Make selected annotations single-valued

__tests__/src/components/CanvasAnnotations.test.js

@@ -94,7 +94,7 @@ describe('CanvasAnnotations', () => {
       wrapper = createWrapper({
         annotations,
         deselectAnnotation,
-        selectedAnnotationIds: ['abc123'],
+        selectedAnnotationId: 'abc123',
       });
 
       wrapper.find(MenuItem).first().simulate('click');

__tests__/src/reducers/windows.test.js

@@ -337,31 +337,15 @@ describe('windows reducer', () => {
   });
 
   describe('SELECT_ANNOTATION', () => {
-    it('handles when no selectedAnnotations exist', () => {
-      const beforeState = { abc123: {} };
-      const action = {
-        annotationId: 'aId',
-        targetId: 'cId',
-        type: ActionTypes.SELECT_ANNOTATION,
-        windowId: 'abc123',
-      };
-      const expectedState = {
-        abc123: { selectedAnnotations: { cId: ['aId'] } },
-      };
-
-      expect(windowsReducer(beforeState, action)).toEqual(expectedState);
-    });
-
-    it('adds new annotation IDs to existing canvas IDs', () => {
-      const beforeState = { abc123: { selectedAnnotations: { cId: ['prevId'] } } };
+    it('sets the selectedAnnotationId', () => {
+      const beforeState = { abc123: { selectedAnnotationId: 'bId' } };
       const action = {
         annotationId: 'aId',
-        targetId: 'cId',
         type: ActionTypes.SELECT_ANNOTATION,
         windowId: 'abc123',
       };
       const expectedState = {
-        abc123: { selectedAnnotations: { cId: ['prevId', 'aId'] } },
+        abc123: { selectedAnnotationId: 'aId' },
       };
 
       expect(windowsReducer(beforeState, action)).toEqual(expectedState);
@@ -369,31 +353,14 @@ describe('windows reducer', () => {
   });
 
   describe('DESELECT_ANNOTATION', () => {
-    it('remvoves the given annotation Id', () => {
-      const beforeState = { abc123: { selectedAnnotations: { cId: ['aId1', 'aId2'] } } };
-      const action = {
-        annotationId: 'aId1',
-        targetId: 'cId',
-        type: ActionTypes.DESELECT_ANNOTATION,
-        windowId: 'abc123',
-      };
-      const expectedState = {
-        abc123: { selectedAnnotations: { cId: ['aId2'] } },
-      };
-
-      expect(windowsReducer(beforeState, action)).toEqual(expectedState);
-    });
-
-    it('remvoves the given canvas Id from the selected annotations if there are no more IDs', () => {
-      const beforeState = { abc123: { selectedAnnotations: { cId1: ['aId1'], cId2: ['aId2'] } } };
+    it('removes the given annotation Id', () => {
+      const beforeState = { abc123: { selectedAnnotationId: 'asdf' } };
       const action = {
-        annotationId: 'aId2',
-        targetId: 'cId2',
         type: ActionTypes.DESELECT_ANNOTATION,
         windowId: 'abc123',
       };
       const expectedState = {
-        abc123: { selectedAnnotations: { cId1: ['aId1'] } },
+        abc123: { selectedAnnotationId: undefined },
       };
 
       expect(windowsReducer(beforeState, action)).toEqual(expectedState);

__tests__/src/selectors/annotations.test.js

 import {
   getAnnotationResourcesByMotivation,
   getAnnotationResourcesByMotivationForCanvas,
-  getHighlightedAnnotationsOnCanvases,
-  getSelectedAnnotationIds,
+  getSelectedAnnotationId,
 } from '../../../src/state/selectors';
 
 describe('getAnnotationResourcesByMotivationForCanvas', () => {
@@ -120,7 +119,7 @@ describe('getAnnotationResourcesByMotivation', () => {
   });
 });
 
-it('getSelectedAnnotationIds returns an array of selected annotation IDs from state', () => {
+it('getSelectedAnnotationId returns the selected annotation ID from state', () => {
   const state = {
     manifests: {
       mid: {
@@ -145,17 +144,14 @@ it('getSelectedAnnotationIds returns an array of selected annotation IDs from st
       wid: {
         canvasIndex: 0,
         manifestId: 'mid',
-        selectedAnnotations: {
-          tid1: ['aid1', 'aid2'],
-          tid2: ['aid3'],
-        },
+        selectedAnnotationId: 'aid1',
         visibleCanvases: ['tid1'],
       },
     },
   };
 
-  expect(getSelectedAnnotationIds(state, { windowId: 'wid' })).toEqual(
-    ['aid1', 'aid2'],
+  expect(getSelectedAnnotationId(state, { windowId: 'wid' })).toEqual(
+    'aid1',
   );
 });
 

__tests__/src/selectors/index.test.js

 import {
   getAnnotationResourcesByMotivation,
   getLanguagesFromConfigWithCurrent,
-  getSelectedAnnotationIds,
+  getSelectedAnnotationId,
 } from '../../../src/state/selectors';
 
 describe('getAnnotationResourcesByMotivation', () => {
@@ -88,7 +88,7 @@ describe('getLanguagesFromConfigWithCurrent', () => {
   });
 });
 
-it('getSelectedAnnotationIds returns an array of selected annotation IDs from state', () => {
+it('getSelectedAnnotationId returns an array of selected annotation IDs from state', () => {
   const state = {
     manifests: {
       mid: {
@@ -112,16 +112,13 @@ it('getSelectedAnnotationIds returns an array of selected annotation IDs from st
     windows: {
       wid: {
         manifestId: 'mid',
-        selectedAnnotations: {
-          tid1: ['aid1', 'aid2'],
-          tid2: ['aid3'],
-        },
+        selectedAnnotationId: 'aid1',
         visibleCanvases: ['tid1'],
       },
     },
   };
 
-  expect(getSelectedAnnotationIds(state, { windowId: 'wid' })).toEqual(
-    ['aid1', 'aid2'],
+  expect(getSelectedAnnotationId(state, { windowId: 'wid' })).toEqual(
+    'aid1',
   );
 });

src/components/CanvasAnnotations.js

@@ -28,10 +28,10 @@ export class CanvasAnnotations extends Component {
   */
   handleClick(event, annotation) {
     const {
-      deselectAnnotation, selectAnnotation, selectedAnnotationIds, windowId,
+      deselectAnnotation, selectAnnotation, selectedAnnotationId, windowId,
     } = this.props;
 
-    if (selectedAnnotationIds.includes(annotation.id)) {
+    if (selectedAnnotationId === annotation.id) {
       deselectAnnotation(windowId, annotation.targetId, annotation.id);
     } else {
       selectAnnotation(windowId, annotation.targetId, annotation.id);
@@ -59,7 +59,7 @@ export class CanvasAnnotations extends Component {
   */
   render() {
     const {
-      annotations, classes, index, label, selectedAnnotationIds, t, totalSize,
+      annotations, classes, index, label, selectedAnnotationId, t, totalSize,
       listContainerComponent, htmlSanitizationRuleSet, hoveredAnnotationIds,
     } = this.props;
     if (annotations.length === 0) return <></>;
@@ -83,7 +83,7 @@ export class CanvasAnnotations extends Component {
                 )}
                 key={annotation.id}
                 annotationid={annotation.id}
-                selected={selectedAnnotationIds.includes(annotation.id)}
+                selected={selectedAnnotationId === annotation.id}
                 onClick={e => this.handleClick(e, annotation)}
                 onFocus={() => this.handleAnnotationHover(annotation)}
                 onBlur={this.handleAnnotationBlur}
@@ -128,7 +128,7 @@ CanvasAnnotations.propTypes = {
   label: PropTypes.string.isRequired,
   listContainerComponent: PropTypes.elementType,
   selectAnnotation: PropTypes.func.isRequired,
-  selectedAnnotationIds: PropTypes.arrayOf(PropTypes.string),
+  selectedAnnotationId: PropTypes.string,
   t: PropTypes.func.isRequired,
   totalSize: PropTypes.number.isRequired,
   windowId: PropTypes.string.isRequired,
@@ -139,5 +139,5 @@ CanvasAnnotations.defaultProps = {
   hoveredAnnotationIds: [],
   htmlSanitizationRuleSet: 'iiif',
   listContainerComponent: 'li',
-  selectedAnnotationIds: [],
+  selectedAnnotationId: undefined,
 };

src/containers/CanvasAnnotations.js

@@ -7,7 +7,7 @@ import * as actions from '../state/actions';
 import {
   getAnnotationResourcesByMotivationForCanvas,
   getCanvasLabel,
-  getSelectedAnnotationIds,
+  getSelectedAnnotationId,
 } from '../state/selectors';
 import { CanvasAnnotations } from '../components/CanvasAnnotations';
 
@@ -36,7 +36,7 @@ const mapStateToProps = (state, { canvasId, windowId }) => ({
     canvasId,
     windowId,
   }),
-  selectedAnnotationIds: getSelectedAnnotationIds(state, { windowId }),
+  selectedAnnotationId: getSelectedAnnotationId(state, { windowId }),
 });
 
 /**

src/state/reducers/windows.js

 import {
-  remove, removeIn, updateIn, merge,
+  removeIn, updateIn, merge,
 } from 'immutable';
 import ActionTypes from '../actions/action-types';
 
@@ -163,22 +163,3 @@ export const windowsReducer = (state = {}, action) => {
       return state;
   }
 };
-
-/**
- * Handle removing IDs from selectedAnnotations
- * where empty targetIds are removed from state as well
- */
-function updatedSelectedAnnotations(state, action) {
-  const filteredIds = state[action.windowId]
-    .selectedAnnotations[action.targetId]
-    .filter(id => id !== action.annotationId);
-
-  if (filteredIds.length > 0) {
-    return {
-      ...state[action.windowId].selectedAnnotations,
-      [action.targetId]: filteredIds,
-    };
-  }
-
-  return remove(state[action.windowId].selectedAnnotations, action.targetId);
-}

src/state/selectors/annotations.js

@@ -100,25 +100,22 @@ export const getAnnotationResourcesByMotivation = createSelector(
  * @param {Array} targetIds
  * @return {Array}
  */
-export const getSelectedAnnotationIds = createSelector(
+export const getSelectedAnnotationId = createSelector(
   [
-    (state, { windowId }) => state.windows[windowId].selectedAnnotations,
-    getVisibleCanvasIds,
+    (state, { windowId }) => state.windows[windowId].selectedAnnotationId,
   ],
-  (selectedAnnotations, canvasIds) => (
-    (flatten(canvasIds.map(targetId => selectedAnnotations && selectedAnnotations[targetId])))
-  ),
+  selectedAnnotationId => selectedAnnotationId,
 );
 
 export const getSelectedAnnotationsOnCanvases = createSelector(
   [
     getPresentAnnotationsOnSelectedCanvases,
-    getSelectedAnnotationIds,
+    getSelectedAnnotationId,
   ],
-  (canvasAnnotations, selectedAnnotationIds) => canvasAnnotations.map(annotation => ({
+  (canvasAnnotations, selectedAnnotationId) => canvasAnnotations.map(annotation => ({
     id: (annotation['@id'] || annotation.id),
     resources: annotation.resources.filter(
-      r => selectedAnnotationIds && selectedAnnotationIds.includes(r.id),
+      r => selectedAnnotationId === r.id,
     ),
   })).filter(val => val.resources.length > 0),
 );