Better UI; use Redux selector

- time controls buttons where not visually "buttons"
- added tooltip on hover
- use a Redux selector to get annotations, don't parse them from the state

src/AnnotationCreation.js

@@ -442,27 +442,35 @@ class AnnotationCreation extends Component {
           <Grid container>
             { mediaIsVideo && (
             <>
-              <Grid item xs={12} onClick={this.seekToTstart}>
-                <IconButton size="small"><LastPage /></IconButton>
+              <Grid item xs={12}>
+                <ToggleButton title="Go to start time" size="small" onClick={this.seekToTstart} className={classes.timecontrolsbutton}>
+                  <LastPage />
+                </ToggleButton>
                 <Typography variant="overline">
                   Start
                 </Typography>
               </Grid>
 
               <Grid item xs={12} className={classes.paper}>
-                <IconButton onClick={this.setTstartNow}><Alarm /></IconButton>
+                <ToggleButton title="Set current time" size="small" onClick={this.setTstartNow} className={classes.timecontrolsbutton}>
+                  <Alarm />
+                </ToggleButton>
                 <HMSInput seconds={tstart} onChange={this.updateTstart} />
               </Grid>
 
-              <Grid item xs={12} onClick={this.seekToTend}>
+              <Grid item xs={12}>
                 <Typography variant="overline">
-                  <IconButton size="small"><LastPage /></IconButton>
+                  <ToggleButton title="Go to start time" size="small" onClick={this.seekToTend} className={classes.timecontrolsbutton}>
+                    <LastPage />
+                  </ToggleButton>
                   End
                 </Typography>
               </Grid>
 
               <Grid item xs={12} className={classes.paper}>
-                <IconButton onClick={this.setTendNow}><Alarm /></IconButton>
+                <ToggleButton title="Set current time" size="small" onClick={this.setTendNow} className={classes.timecontrolsbutton}>
+                  <Alarm />
+                </ToggleButton>
                 <HMSInput seconds={tend} onChange={this.updateTend} />
               </Grid>
             </>
@@ -551,6 +559,13 @@ const styles = (theme) => ({
     paddingRight: theme.spacing(1),
     paddingTop: theme.spacing(2),
   },
+  timecontrolsbutton: {
+    height: '30px',
+    margin: 'auto',
+    marginLeft: '0',
+    marginRight: '5px',
+    width: '30px',
+  },
 });
 
 AnnotationCreation.propTypes = {

src/plugins/annotationCreationCompanionWindow.js

@@ -2,6 +2,7 @@ import * as actions from 'mirador/dist/es/src/state/actions';
 import { getCompanionWindow } from 'mirador/dist/es/src/state/selectors/companionWindows';
 import { getWindowCurrentTime, getWindowPausedStatus } from 'mirador/dist/es/src/state/selectors/window';
 import { getVisibleCanvases } from 'mirador/dist/es/src/state/selectors/canvases';
+import { getPresentAnnotationsOnSelectedCanvases } from 'mirador/dist/es/src/state/selectors/annotations';
 import AnnotationCreation from '../AnnotationCreation';
 
 /** */
@@ -23,16 +24,9 @@ function mapStateToProps(state, { id: companionWindowId, windowId }) {
   const { annotationid } = cw;
   const canvases = getVisibleCanvases(state, { windowId });
 
-  let annotation = null;
-  canvases.forEach((canvas) => {
-    const annotationsOnCanvas = state.annotations[canvas.id];
-    Object.values(annotationsOnCanvas || {}).forEach((value, i) => {
-      if (value.json && value.json.items) {
-        const maybeAnnot = value.json.items.find((anno) => anno.id === annotationid);
-        if (maybeAnnot !== undefined) annotation = maybeAnnot;
-      }
-    });
-  });
+  const annotation = getPresentAnnotationsOnSelectedCanvases(state, { windowId })
+    .flatMap((annoPage) => annoPage.json.items)
+    .find((annot) => annot.id === annotationid);
 
   return {
     annotation,