Annotations functionalities (#761)

* Add support for annotation to auto-scroll with playback * Add unit tests for the UI component related to annotations * Add text truncation to longer texts and fix active annotation highlights * Refresh annotation layers and annotations on Canvas change * Check currentItem before using it for calculations in autoScroll * Re-render UI when auto-scroll is checked/unchecked * Code review: fix comments and filtering of active annotation with player time-updates
samvera-labs · Feb 3, 2025 · 66730da · 66730da
1 parent 6d51217
commit 66730da
Show file tree

Hide file tree

Showing 13 changed files with 1,884 additions and 173 deletions.
diff --git a/src/components/MarkersDisplay/Annotations/AnnotationLayerSelect.js b/src/components/MarkersDisplay/Annotations/AnnotationLayerSelect.js
@@ -1,25 +1,39 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   parseExternalAnnotationPage,
   parseExternalAnnotationResource
 } from '@Services/annotations-parser';
 
-const AnnotationLayerSelect = ({ annotationLayers = [], duration = 0, setDisplayedAnnotationLayers }) => {
+const AnnotationLayerSelect = ({
+  canvasAnnotationLayers = [],
+  duration = 0,
+  setDisplayedAnnotationLayers,
+  setAutoScrollEnabled,
+  autoScrollEnabled,
+}) => {
   const [selectedAnnotationLayers, setSelectedAnnotationLayers] = useState([]);
   const [isOpen, setIsOpen] = useState(false);
   const [selectedAll, setSelectedAll] = useState(false);
 
   useEffect(() => {
-    if (annotationLayers?.length > 0) {
+    // Reset state when Canvas changes
+    setSelectedAnnotationLayers([]);
+    setDisplayedAnnotationLayers([]);
+    setSelectedAll(false);
+    setIsOpen(false);
+
+    if (canvasAnnotationLayers?.length > 0) {
       // Sort annotation sets alphabetically
-      annotationLayers.sort((a, b) => a.label.localeCompare(b.label));
+      canvasAnnotationLayers.sort((a, b) => a.label.localeCompare(b.label));
       // Select the first annotation set on page load
-      findOrFetchandParseLinkedAnnotations(annotationLayers[0]);
+      findOrFetchandParseLinkedAnnotations(canvasAnnotationLayers[0]);
     }
-  }, [annotationLayers]);
+  }, [canvasAnnotationLayers]);
 
-  const isSelected = (layer) => selectedAnnotationLayers.includes(layer.label);
+  const isSelected = useCallback((layer) => {
+    return selectedAnnotationLayers.includes(layer.label);
+  }, [selectedAnnotationLayers]);
   const toggleDropdown = () => setIsOpen((prev) => !prev);
 
   /**
@@ -68,7 +82,7 @@ const AnnotationLayerSelect = ({ annotationLayers = [], duration = 0, setDisplay
     setSelectedAll(selectAllUpdated);
     if (selectAllUpdated) {
       await Promise.all(
-        annotationLayers.map((annotationLayer) => {
+        canvasAnnotationLayers.map((annotationLayer) => {
           findOrFetchandParseLinkedAnnotations(annotationLayer);
         })
       );
@@ -104,52 +118,72 @@ const AnnotationLayerSelect = ({ annotationLayers = [], duration = 0, setDisplay
     setDisplayedAnnotationLayers((prev) => [...prev, annotationLayer]);
   };
 
-  return (
-    <div className="ramp--annotatations__multi-select">
-      <div className="ramp--annotations__multi-select-header" onClick={toggleDropdown}>
-        {selectedAnnotationLayers.length > 0
-          ? `${selectedAnnotationLayers.length} of ${annotationLayers.length} layers selected`
-          : "Select Annotation layer(s)"}
-        <span className={`annotations-dropdown-arrow ${isOpen ? "open" : ""}`}>▼</span>
+  if (canvasAnnotationLayers?.length > 0) {
+    return (
+      <div className="ramp--annotations__multi-select" data-testid="annotation-multi-select">
+        <div className="ramp--annotations__multi-select-header" onClick={toggleDropdown}>
+          {selectedAnnotationLayers.length > 0
+            ? `${selectedAnnotationLayers.length} of ${canvasAnnotationLayers.length} layers selected`
+            : "Select Annotation layer(s)"}
+          <span className={`annotations-dropdown-arrow ${isOpen ? "open" : ""}`}>▼</span>
+        </div>
+        {isOpen && (
+          <ul className="annotations-dropdown-menu">
+            {
+              // Only show select all option when there's more than one annotation layer
+              canvasAnnotationLayers?.length > 1 &&
+              <li key="select-all" className="annotations-dropdown-item">
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={selectedAll}
+                    onChange={handleSelectAll}
+                  />
+                  Show all Annotation layers
+                </label>
+              </li>
+            }
+            {canvasAnnotationLayers.map((annotationLayer, index) => (
+              <li key={`annotaion-layer-${index}`} className="annotations-dropdown-item">
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={isSelected(annotationLayer)}
+                    onChange={() => handleSelect(annotationLayer)}
+                  />
+                  {annotationLayer.label}
+                </label>
+              </li>
+            ))}
+          </ul>
+        )}
+        <div className="ramp--annotations__scroll" data-testid="annotations-scroll">
+          <input
+            type="checkbox"
+            id="scroll-check"
+            name="scrollcheck"
+            aria-checked={autoScrollEnabled}
+            title='Auto-scroll with media'
+            checked={autoScrollEnabled}
+            onChange={() => { setAutoScrollEnabled(!autoScrollEnabled); }}
+          />
+          <label htmlFor="scroll-check" title='Auto-scroll with media'>
+            Auto-scroll with media
+          </label>
+        </div>
       </div>
-      {isOpen && (
-        <ul className="annotations-dropdown-menu">
-          {
-            // Only show select all option when there's more than one annotation layer
-            annotationLayers?.length > 1 &&
-            <li key="select-all" className="annotations-dropdown-item">
-              <label>
-                <input
-                  type="checkbox"
-                  checked={selectedAll}
-                  onChange={handleSelectAll}
-                />
-                Show all Annotation layers
-              </label>
-            </li>
-          }
-          {annotationLayers.map((annotationLayer, index) => (
-            <li key={`annotaion-layer-${index}`} className="annotations-dropdown-item">
-              <label>
-                <input
-                  type="checkbox"
-                  checked={isSelected(annotationLayer)}
-                  onChange={() => handleSelect(annotationLayer)}
-                />
-                {annotationLayer.label}
-              </label>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
+    );
+  } else {
+    return null;
+  };
 };
 
 AnnotationLayerSelect.propTypes = {
-  annotationLayers: PropTypes.array.isRequired,
+  canvasAnnotationLayers: PropTypes.array.isRequired,
   duration: PropTypes.number.isRequired,
-  setDisplayedAnnotationLayers: PropTypes.func.isRequired
+  setDisplayedAnnotationLayers: PropTypes.func.isRequired,
+  setAutoScrollEnabled: PropTypes.func.isRequired,
+  autoScrollEnabled: PropTypes.bool.isRequired,
 };
 
 export default AnnotationLayerSelect;