Search bar working. No visual work

src/components/CanvasAnnotations.js

@@ -11,6 +11,7 @@ import InputBase from '@material-ui/core/InputBase';
 import SanitizedHtml from '../containers/SanitizedHtml';
 import { ScrollTo } from './ScrollTo';
 import AnnotationManifestsAccordion from '../containers/AnnotationManifestsAccordion';
+import { filterAnnotation } from '../helper/utils';
 
 /**
  * CanvasAnnotations ~
@@ -25,6 +26,9 @@ export class CanvasAnnotations extends Component {
     this.handleClick = this.handleClick.bind(this);
     this.handleAnnotationHover = this.handleAnnotationHover.bind(this);
     this.handleAnnotationBlur = this.handleAnnotationBlur.bind(this);
+    this.handleAnnotationSearch = this.handleAnnotationSearch.bind(this);
+
+    this.state = { };
   }
 
   /**
@@ -56,16 +60,30 @@ export class CanvasAnnotations extends Component {
     hoverAnnotation(windowId, []);
   }
 
+  /** */
+  handleAnnotationSearch(event) {
+    this.setState({ inputSearch: event.target.value });
+  }
+
   /**
    * Returns the rendered component
   */
   render() {
     const {
-      annotations, autoScroll, classes, index, label, selectedAnnotationId, t, totalSize,
+      autoScroll, classes, index, label, selectedAnnotationId, t, totalSize,
       listContainerComponent, htmlSanitizationRuleSet, hoveredAnnotationIds,
       containerRef,
     } = this.props;
-    if (annotations.length === 0) return null;
+
+    let { annotations } = this.props;
+
+    const { inputSearch } = this.state;
+
+    if (inputSearch != undefined && inputSearch !== '') {
+      annotations = filterAnnotation(annotations, inputSearch);
+    }
+
+
     return (
       <>
         <Typography className={classes.sectionHeading} variant="overline">
@@ -83,6 +101,7 @@ export class CanvasAnnotations extends Component {
               root: classes.inputRoot,
             }}
             inputProps={{ 'aria-label': 'search' }}
+            onChange={this.handleAnnotationSearch}
           />
         </div>
         <MenuList autoFocusItem variant="selectedMenu">

src/containers/CanvasAnnotations.js

@@ -94,9 +94,9 @@ const styles = theme => ({
   },
   search: {
     '&:hover': {
-      backgroundColor: alpha(theme.palette.common.white, 0.25),
+      backgroundColor: 'grey',
     },
-    backgroundColor: alpha(theme.palette.common.white, 0.15),
+    backgroundColor: 'lightgray',
     borderRadius: theme.shape.borderRadius,
     marginLeft: 0,
     marginRight: theme.spacing(2),

src/helper/utils.js

@@ -3,3 +3,12 @@
  *
  * */
 export const removeDuplicates = (arr) => [...new Map(arr.map(v => [v.id, v])).values()];
+
+/**
+ * Filter annotation with a query string. Search in ID and value
+ * */
+export const filterAnnotation = (annotations, query) => annotations.filter((annotation) => {
+  // eslint-disable-next-line max-len
+  const queryLowered = query.toLowerCase();
+  return annotation.id.toLowerCase().includes(queryLowered) || annotation.content.toLowerCase().includes(queryLowered);
+});