Implement the AnnotationSettings component in the sidebar and use the state it...

Implement the AnnotationSettings component in the sidebar and use the state it supplied to determine which annotations to show.

__tests__/src/components/WindowSideBarAnnotationsPanel.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
+import AnnotationSettings from '../../../src/containers/AnnotationSettings';
 import { WindowSideBarAnnotationsPanel } from '../../../src/components/WindowSideBarAnnotationsPanel';
 
 /** */
@@ -27,6 +28,10 @@ describe('WindowSideBarAnnotationsPanel', () => {
     ).toBe('annotations');
   });
 
+  it('has the AnnotationSettings component', () => {
+    expect(createWrapper().find(AnnotationSettings).length).toBe(1);
+  });
+
   it('renders a list with a list item for each annotation', () => {
     wrapper = createWrapper({
       annotations: [

__tests__/src/selectors/index.test.js

 import {
+  getAllOrSelectedAnnotations,
   getAnnotationResourcesByMotivation,
   getIdAndContentOfResources,
   getLanguagesFromConfigWithCurrent,
@@ -166,3 +167,39 @@ it('getSelectedTargetAnnotationResources filters the annotation resources by the
     getSelectedTargetAnnotationResources(state, ['cid1'], ['annoId1', 'annoId2'])[0].resources.length,
   ).toBe(2);
 });
+
+describe('getAllOrSelectedAnnotations', () => {
+  it('returns all annotations if the given window is set to display all', () => {
+    const state = {
+      windows: {
+        abc123: { displayAllAnnotations: true },
+      },
+      annotations: {
+        cid1: {
+          annoId1: { id: 'annoId1', json: { resources: [{ '@id': 'annoId1' }, { '@id': 'annoId2' }] } },
+        },
+      },
+    };
+
+    expect(
+      getAllOrSelectedAnnotations(state, 'abc123', ['cid1'], ['annoId1'])[0].resources.length,
+    ).toBe(2);
+  });
+
+  it('returns only selected annotations if the window is not set to display all', () => {
+    const state = {
+      windows: {
+        abc123: { displayAllAnnotations: false },
+      },
+      annotations: {
+        cid1: {
+          annoId1: { id: 'annoId1', json: { resources: [{ '@id': 'annoId1' }, { '@id': 'annoId2' }] } },
+        },
+      },
+    };
+
+    expect(
+      getAllOrSelectedAnnotations(state, 'abc123', ['cid1'], ['annoId1'])[0].resources.length,
+    ).toBe(1);
+  });
+});

src/components/WindowSideBarAnnotationsPanel.js

@@ -4,6 +4,7 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
 import { SanitizedHtml } from './SanitizedHtml';
+import AnnotationSettings from '../containers/AnnotationSettings';
 import CompanionWindow from '../containers/CompanionWindow';
 import ns from '../config/css-ns';
 
@@ -62,6 +63,7 @@ export class WindowSideBarAnnotationsPanel extends Component {
     } = this.props;
     return (
       <CompanionWindow title={t('annotations')} paperClassName={ns('window-sidebar-annotation-panel')} windowId={windowId} id={id}>
+        <AnnotationSettings windowId={windowId} />
         <div className={classes.section}>
           <Typography variant="subtitle2">{t('showingNumAnnotations', { number: annotations.length })}</Typography>
         </div>

src/containers/OpenSeadragonViewer.js

@@ -7,9 +7,9 @@ import { withPlugins } from '../extend';
 import { OpenSeadragonViewer } from '../components/OpenSeadragonViewer';
 import * as actions from '../state/actions';
 import {
+  getAllOrSelectedAnnotations,
   getCanvasLabel,
   getSelectedAnnotationIds,
-  getSelectedTargetAnnotationResources,
 } from '../state/selectors';
 
 /**
@@ -22,8 +22,9 @@ const mapStateToProps = ({
 }, { windowId, currentCanvases }) => ({
   viewer: viewers[windowId],
   label: getCanvasLabel({ windows, manifests }, { windowId, canvasIndex: 'selected' }),
-  annotations: getSelectedTargetAnnotationResources(
-    { annotations },
+  annotations: getAllOrSelectedAnnotations(
+    { annotations, windows },
+    windowId,
     currentCanvases.map(c => c.id),
     getSelectedAnnotationIds({ windows }, windowId, currentCanvases.map(c => c.id)),
   ),

src/state/selectors/index.js

@@ -105,3 +105,20 @@ export function getSelectedTargetAnnotationResources(state, targetIds, annotatio
       resources: annotation.resources.filter(r => annotationIds && annotationIds.includes(r.id)),
     }));
 }
+
+/**
+* Return all of the given canvases annotations if the window
+* is set to display all, otherwise only return selected
+* @param {object} state
+* @param {String} windowId
+* @param {Array} targetIds
+* @param {Array} annotationIds
+* @return {Array}
+*/
+export function getAllOrSelectedAnnotations(state, windowId, targetIds, annotationIds) {
+  if (state.windows[windowId].displayAllAnnotations) {
+    return getSelectedTargetsAnnotations(state, targetIds);
+  }
+
+  return getSelectedTargetAnnotationResources(state, targetIds, annotationIds);
+}