Scroll the selected annotation into view in the annotations companion window

__tests__/src/components/CanvasAnnotations.test.js

@@ -5,6 +5,7 @@ import Chip from '@material-ui/core/Chip';
 import MenuList from '@material-ui/core/MenuList';
 import MenuItem from '@material-ui/core/MenuItem';
 import { CanvasAnnotations } from '../../../src/components/CanvasAnnotations';
+import { ScrollTo } from '../../../src/components/ScrollTo';
 
 /** Utility function to wrap CanvasAnnotations */
 function createWrapper(props) {
@@ -62,6 +63,14 @@ describe('CanvasAnnotations', () => {
     expect(wrapper.find(MenuItem).length).toEqual(2);
   });
 
+  it('scrolls to the selected annotation', () => {
+    wrapper = createWrapper({ annotations, selectedAnnotationId: 'abc123' });
+
+    expect(wrapper.find(ScrollTo).length).toEqual(2);
+    expect(wrapper.find(ScrollTo).first().prop('scrollTo')).toEqual(true);
+    expect(wrapper.find(ScrollTo).last().prop('scrollTo')).toEqual(false);
+  });
+
   it('renders a Chip for every tag', () => {
     wrapper = createWrapper({ annotations });
 

src/components/CanvasAnnotations.js

@@ -7,6 +7,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Typography from '@material-ui/core/Typography';
 import SanitizedHtml from '../containers/SanitizedHtml';
+import { ScrollTo } from './ScrollTo';
 
 /**
  * CanvasAnnotations ~
@@ -59,6 +60,7 @@ export class CanvasAnnotations extends Component {
     const {
       annotations, classes, index, label, selectedAnnotationId, t, totalSize,
       listContainerComponent, htmlSanitizationRuleSet, hoveredAnnotationIds,
+      containerRef,
     } = this.props;
     if (annotations.length === 0) return <></>;
 
@@ -70,6 +72,12 @@ export class CanvasAnnotations extends Component {
         <MenuList autoFocusItem variant="selectedMenu">
           {
             annotations.map(annotation => (
+              <ScrollTo
+                containerRef={containerRef}
+                key={`${annotation.id}-scroll`}
+                offsetTop={96} // offset for the height of the form above
+                scrollTo={selectedAnnotationId === annotation.id}
+              >
                 <MenuItem
                   button
                   component={listContainerComponent}
@@ -102,6 +110,7 @@ export class CanvasAnnotations extends Component {
                     </div>
                   </ListItemText>
                 </MenuItem>
+              </ScrollTo>
             ))
           }
         </MenuList>
@@ -118,6 +127,10 @@ CanvasAnnotations.propTypes = {
     }),
   ),
   classes: PropTypes.objectOf(PropTypes.string),
+  containerRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
   deselectAnnotation: PropTypes.func.isRequired,
   hoverAnnotation: PropTypes.func.isRequired,
   hoveredAnnotationIds: PropTypes.arrayOf(PropTypes.string),
@@ -134,6 +147,7 @@ CanvasAnnotations.propTypes = {
 CanvasAnnotations.defaultProps = {
   annotations: [],
   classes: {},
+  containerRef: undefined,
   hoveredAnnotationIds: [],
   htmlSanitizationRuleSet: 'iiif',
   listContainerComponent: 'li',

src/components/WindowSideBarAnnotationsPanel.js

@@ -10,6 +10,13 @@ import ns from '../config/css-ns';
  * WindowSideBarAnnotationsPanel ~
 */
 export class WindowSideBarAnnotationsPanel extends Component {
+  /** */
+  constructor(props) {
+    super(props);
+
+    this.containerRef = React.createRef();
+  }
+
   /**
    * Returns the rendered component
   */
@@ -23,6 +30,8 @@ export class WindowSideBarAnnotationsPanel extends Component {
         paperClassName={ns('window-sidebar-annotation-panel')}
         windowId={windowId}
         id={id}
+        ref={this.containerRef}
+        otherRef={this.containerRef}
         titleControls={<AnnotationSettings windowId={windowId} />}
       >
         <div className={classes.section}>
@@ -32,6 +41,7 @@ export class WindowSideBarAnnotationsPanel extends Component {
         {canvasIds.map((canvasId, index) => (
           <CanvasAnnotations
             canvasId={canvasId}
+            containerRef={this.containerRef}
             key={canvasId}
             index={index}
             totalSize={canvasIds.length}