Add graphics search bar

src/components/CanvasAnnotations.js

@@ -6,6 +6,8 @@ import MenuList from '@material-ui/core/MenuList';
 import MenuItem from '@material-ui/core/MenuItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Typography from '@material-ui/core/Typography';
+import SearchIcon from '@material-ui/icons/SearchSharp';
+import InputBase from '@material-ui/core/InputBase';
 import SanitizedHtml from '../containers/SanitizedHtml';
 import { ScrollTo } from './ScrollTo';
 import AnnotationManifestsAccordion from '../containers/AnnotationManifestsAccordion';
@@ -69,6 +71,20 @@ export class CanvasAnnotations extends Component {
         <Typography className={classes.sectionHeading} variant="overline">
           {t('annotationCanvasLabel', { context: `${index + 1}/${totalSize}`, label })}
         </Typography>
+
+        <div className={classes.search}>
+          <div className={classes.searchIcon}>
+            <SearchIcon />
+          </div>
+          <InputBase
+            placeholder="Search…"
+            classes={{
+              input: classes.inputInput,
+              root: classes.inputRoot,
+            }}
+            inputProps={{ 'aria-label': 'search' }}
+          />
+        </div>
         <MenuList autoFocusItem variant="selectedMenu">
           {
             annotations.map(annotation => (

src/containers/CanvasAnnotations.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import { alpha, withStyles } from '@material-ui/core/styles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import {
@@ -69,16 +69,76 @@ const styles = theme => ({
     marginRight: theme.spacing(0.5),
     marginTop: theme.spacing(1),
   },
+  grow: {
+    flexGrow: 1,
+  },
   hovered: {},
+  inputInput: {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+      width: '20ch',
+    },
+  },
+  inputRoot: {
+    color: 'inherit',
+  },
   manifestLabel: {
     fontSize: '10px',
   },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  search: {
+    '&:hover': {
+      backgroundColor: alpha(theme.palette.common.white, 0.25),
+    },
+    backgroundColor: alpha(theme.palette.common.white, 0.15),
+    borderRadius: theme.shape.borderRadius,
+    marginLeft: 0,
+    marginRight: theme.spacing(2),
+    position: 'relative',
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing(3),
+      width: 'auto',
+    },
+    width: '100%',
+  },
+  searchIcon: {
+    alignItems: 'center',
+    display: 'flex',
+    height: '100%',
+    justifyContent: 'center',
+    padding: theme.spacing(0, 2),
+    pointerEvents: 'none',
+    position: 'absolute',
+  },
+  sectionDesktop: {
+    display: 'none',
+    [theme.breakpoints.up('md')]: {
+      display: 'flex',
+    },
+  },
   sectionHeading: {
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(1),
     paddingTop: theme.spacing(2),
   },
-
+  sectionMobile: {
+    display: 'flex',
+    [theme.breakpoints.up('md')]: {
+      display: 'none',
+    },
+  },
+  title: {
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+    },
+  },
 });
 
 const enhance = compose(