Fix slow search by handling timing of updates and cache

samvera-labs · Jul 17, 2024 · 767b97e · 767b97e
1 parent d66ebe6
commit 767b97e
Show file tree

Hide file tree

Showing 7 changed files with 425 additions and 308 deletions.
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "rollup-plugin-terser": "^7.0.1",
     "sass": "^1.28.0",
     "sass-loader": "^10.0.5",
+    "sinon": "^18.0.0",
     "stream-browserify": "^3.0.0",
     "style-loader": "^2.0.0",
     "svg-url-loader": "^6.0.0",

diff --git a/src/components/Transcript/Transcript.js b/src/components/Transcript/Transcript.js
@@ -32,7 +32,7 @@ const buildSpeakerText = (item, isDocx = false) => {
   }
 };
 
-const TranscriptLine = ({
+const TranscriptLine = React.memo(({
   item,
   goToItem,
   isActive,
@@ -185,13 +185,15 @@ const TranscriptLine = ({
         isFocused && 'focused'
       )}
       data-testid="transcript_untimed_text">
-      <p className="ramp--transcript_untimed_item" dangerouslySetInnerHTML={{ __html: buildSpeakerText(item, isNonTimedText) }}></p>
+      <p className="ramp--transcript_untimed_item"
+        dangerouslySetInnerHTML={{ __html: buildSpeakerText(item, isNonTimedText) }}>
+      </p>
 
     </a>;
   } else {
     return null;
   }
-};
+});
 
 const Spinner = () => (
   <div className="lds-spinner">
@@ -201,8 +203,7 @@ const Spinner = () => (
   </div>
 );
 
-const TranscriptList = ({
-  isSearchable,
+const TranscriptList = React.memo(({
   seekPlayer,
   currentTime,
   searchResults,
@@ -239,51 +240,49 @@ const TranscriptList = ({
       break;
   }
 
-  if (isSearchable) {
-    if (!searchResults.results || searchResults.results.length === 0) {
-      return (
-        <Spinner />
-      );
-    } else {
-      return (
-        <div
-          data-testid={`transcript_${testid}`}
-        >
-          {
-            searchResults.ids.map((itemId) => (
-              <TranscriptLine
-                key={itemId}
-                goToItem={goToItem}
-                focusedMatchId={focusedMatchId}
-                isActive={
-                  manuallyActivatedItemId === itemId
-                  || (
-                    typeof searchResults.results[itemId].begin === 'number'
-                    && searchResults.results[itemId].begin <= currentTime
-                    && currentTime <= searchResults.results[itemId].end
-                  )
-                }
-                item={searchResults.results[itemId]}
-                autoScrollEnabled={autoScrollEnabled}
-                setFocusedMatchId={setFocusedMatchId}
-                showNotes={showNotes}
-                transcriptContainerRef={transcriptContainerRef}
-                isNonTimedText={true}
-                focusedMatchIndex={focusedMatchIndex}
-              />
-            ))
-          }
-        </div>
-      );
-    }
-  } else {
+  if (transcriptInfo.tError) {
     return (
       <p key="no-transcript" id="no-transcript" data-testid="no-transcript" role="note">
         {transcriptInfo.tError}
       </p>
     );
+  } else if (!searchResults.results || searchResults.results.length === 0) {
+    return (
+      <Spinner />
+    );
+  } else {
+    return (
+      <div
+        data-testid={`transcript_${testid}`}
+      >
+        {
+          searchResults.ids.map((itemId) => (
+            <TranscriptLine
+              key={itemId}
+              goToItem={goToItem}
+              focusedMatchId={focusedMatchId}
+              isActive={
+                manuallyActivatedItemId === itemId
+                || (
+                  typeof searchResults.results[itemId].begin === 'number'
+                  && searchResults.results[itemId].begin <= currentTime
+                  && currentTime <= searchResults.results[itemId].end
+                )
+              }
+              item={searchResults.results[itemId]}
+              autoScrollEnabled={autoScrollEnabled}
+              setFocusedMatchId={setFocusedMatchId}
+              showNotes={showNotes}
+              transcriptContainerRef={transcriptContainerRef}
+              isNonTimedText={true}
+              focusedMatchIndex={focusedMatchIndex}
+            />
+          ))
+        }
+      </div>
+    );
   }
-};
+});
 
 /**
  *
@@ -332,18 +331,28 @@ const Transcript = ({ playerID, manifestUrl, showNotes = false, search = {}, tra
     _setCanvasIndex(c); // force re-render
   };
 
-  const searchResults = useFilteredTranscripts({
-    ...searchOpts,
-    query: searchQuery,
-    transcripts: transcript,
-    canvasIndex: canvasIndexRef.current,
-    selectedTranscript: selectedTranscript,
+  const searchResults =
+    useFilteredTranscripts({
+      ...searchOpts,
+      query: searchQuery,
+      transcripts: transcript,
+      canvasIndex: canvasIndexRef.current,
+      selectedTranscript: selectedTranscript,
+    });
+
+  const {
+    focusedMatchId,
+    setFocusedMatchId,
+    focusedMatchIndex,
+    setFocusedMatchIndex
+  } = useFocusedMatch({ searchResults });
+
+  const tanscriptHitCounts = useSearchCounts({
+    searchResults,
+    canvasTranscripts,
+    searchQuery
   });
 
-  const { focusedMatchId, setFocusedMatchId, focusedMatchIndex, setFocusedMatchIndex } = useFocusedMatch({ searchResults });
-
-  const tanscriptHitCounts = useSearchCounts({ searchResults, canvasTranscripts, searchQuery });
-
   const [isEmpty, setIsEmpty] = React.useState(true);
   const [_autoScrollEnabled, _setAutoScrollEnabled] = React.useState(true);
   const autoScrollEnabledRef = React.useRef(_autoScrollEnabled);
@@ -579,7 +588,6 @@ const Transcript = ({ playerID, manifestUrl, showNotes = false, search = {}, tra
           ref={transcriptContainerRef}
         >
           <TranscriptList
-            isSearchable={searchOpts.isSearchable}
             currentTime={currentTime}
             seekPlayer={seekPlayer}
             searchResults={searchResults}

diff --git a/src/components/Transcript/TranscriptMenu/TranscriptSearch.js b/src/components/Transcript/TranscriptMenu/TranscriptSearch.js
@@ -1,6 +1,7 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { SearchArrow } from '@Services/svg-icons';
+import debounce from 'lodash/debounce';
 
 export const TranscriptSearch = ({
   searchResults,
@@ -16,6 +17,14 @@ export const TranscriptSearch = ({
     if (searchQuery) searchInputRef.current.value = searchQuery;
   }, [!!searchInputRef.current]);
 
+  const handleOnChange = useMemo(
+    () =>
+      debounce((event) => {
+        setSearchQuery(event.target.value);
+      }, 100),
+    []
+  );
+
   const searchQueryEmpty = searchQuery === null || searchQuery.replace(/\s/g, '') === '';
 
   let resultNavigation = null;
@@ -89,7 +98,7 @@ export const TranscriptSearch = ({
             if (event.target.value.trim() == '') {
               setSearchQuery(null);
             } else {
-              setSearchQuery(event.target.value);
+              handleOnChange(event);
             }
           }}
         />