dbf-mirador 4.2.3

package/src/state/sagas/iiif.js

@@ -0,0 +1,233 @@
+import { all, call, put, select, takeEvery } from 'redux-saga/effects';
+import { Utils } from 'manifesto.js';
+import normalizeUrl from 'normalize-url';
+import ActionTypes from '../actions/action-types';
+import {
+  receiveManifest,
+  receiveManifestFailure,
+  receiveInfoResponse,
+  receiveInfoResponseFailure,
+  receiveDegradedInfoResponse,
+  receiveSearch,
+  receiveSearchFailure,
+  receiveAnnotation,
+  receiveAnnotationFailure,
+} from '../actions';
+import { getManifests, getRequestsConfig, getAccessTokens, selectInfoResponse } from '../selectors';
+
+/** */
+function fetchWrapper(url, options, { success, degraded, failure }) {
+  return fetch(url, options)
+    .then((response) =>
+      response
+        .json()
+        .then((json) => {
+          if (response.status === 401) return (degraded || success)({ json, response });
+          if (response.ok) return success({ json, response });
+          return failure({ error: response.statusText, json, response });
+        })
+        .catch((error) => {
+          // Error responses (4xx/5xx) often have a body that isn't valid JSON
+          // only surface the raw parse error when the response was otherwise ok,
+          // where it points to an actual unexpected JSON body bug.
+          if (!response.ok) {
+            return failure({ error: `${response.status} ${response.statusText}: ${url}`, response });
+          }
+          return failure({ error, response });
+        }),
+    )
+    .catch((error) => failure({ error }));
+}
+
+/** */
+function* fetchIiifResource(url, options, { success, degraded, failure }) {
+  const { preprocessors = [], postprocessors = [] } = yield select(getRequestsConfig);
+
+  try {
+    const reqOptions = preprocessors.reduce((acc, f) => f(url, acc) || acc, options);
+
+    let action = yield call(fetchWrapper, url, reqOptions, { degraded, failure, success });
+    action = postprocessors.reduce((acc, f) => f(url, acc) || acc, action);
+    return action;
+  } catch (error) {
+    return failure({ error });
+  }
+}
+
+/** */
+function* fetchIiifResourceWithAuth(url, iiifResource, options, { degraded, failure, success }) {
+  const urlOptions = { ...options };
+  let tokenServiceId;
+
+  // If we have a requested IIIF resource (say, the image description from the manifest)
+  // we can optimistically try an appropriate access token.
+  //
+  // TODO: there might be multiple applicable access token services
+  if (iiifResource) {
+    const tokenService = yield call(getAccessTokenService, iiifResource);
+    tokenServiceId = tokenService && tokenService.id;
+
+    if (tokenService && tokenService.json) {
+      urlOptions.headers = {
+        Authorization: `Bearer ${tokenService.json.accessToken}`,
+        ...options.headers,
+      };
+    }
+  }
+
+  const { error, json, response } = yield call(fetchIiifResource, url, urlOptions, {
+    failure: (arg) => arg,
+    success: (arg) => arg,
+  });
+
+  // Hard error either requesting the resource or deserializing the JSON.
+  if (error) {
+    yield put(
+      failure({
+        error,
+        json,
+        response,
+        tokenServiceId,
+      }),
+    );
+    return;
+  }
+
+  const id = json['@id'] || json.id;
+  if (response.ok) {
+    if (
+      normalizeUrl(id, { stripAuthentication: false }) ===
+      normalizeUrl(url.replace(/info\.json$/, ''), { stripAuthentication: false })
+    ) {
+      yield put(success({ json, response, tokenServiceId }));
+      return;
+    }
+  } else if (response.status !== 401) {
+    yield put(
+      failure({
+        error,
+        json,
+        response,
+        tokenServiceId,
+      }),
+    );
+
+    return;
+  }
+
+  // Start attempting some IIIF Auth;
+  // First, the IIIF resource we were given may not be authoritative; check if
+  // it suggests a different access token service and re-enter the auth workflow
+  const authoritativeTokenService = yield call(getAccessTokenService, json);
+  if (authoritativeTokenService && authoritativeTokenService.id !== tokenServiceId) {
+    yield call(fetchIiifResourceWithAuth, url, json, options, { degraded, failure, success });
+    return;
+  }
+
+  // Record the response (potentially kicking off other auth flows)
+  yield put((degraded || success)({ json, response, tokenServiceId }));
+}
+
+/** */
+export function* fetchManifest({ manifestId }) {
+  const callbacks = {
+    failure: ({ error, json, response }) => receiveManifestFailure(manifestId, typeof error === 'object' ? String(error) : error),
+    success: ({ json, response }) => receiveManifest(manifestId, json),
+  };
+  const dispatch = yield call(fetchIiifResource, manifestId, {}, callbacks);
+  yield put(dispatch);
+}
+
+/** @private */
+function* getAccessTokenService(resource) {
+  const manifestoCompatibleResource = resource && resource.__jsonld ? resource : { ...resource, options: {} };
+  const services = Utils.getServices(manifestoCompatibleResource).filter((s) =>
+    s.getProfile().match(/http:\/\/iiif.io\/api\/auth\//),
+  );
+  if (services.length === 0) return undefined;
+
+  const accessTokens = yield select(getAccessTokens);
+  if (!accessTokens) return undefined;
+
+  for (let i = 0; i < services.length; i += 1) {
+    const authService = services[i];
+    const accessTokenService =
+      Utils.getService(authService, 'http://iiif.io/api/auth/1/token') ||
+      Utils.getService(authService, 'http://iiif.io/api/auth/0/token');
+    const token = accessTokenService && accessTokens[accessTokenService.id];
+    if (token && token.json) return token;
+  }
+
+  return undefined;
+}
+
+/** @private */
+export function* fetchInfoResponse({ imageResource, infoId, windowId }) {
+  let iiifResource = imageResource;
+  if (!iiifResource) {
+    iiifResource = yield select(selectInfoResponse, { infoId });
+  }
+
+  const callbacks = {
+    degraded: ({ json, response, tokenServiceId }) =>
+      receiveDegradedInfoResponse(infoId, json, response.ok, tokenServiceId, windowId),
+    failure: ({ error, json, response, tokenServiceId }) => receiveInfoResponseFailure(infoId, error, tokenServiceId),
+    success: ({ json, response, tokenServiceId }) => receiveInfoResponse(infoId, json, response.ok, tokenServiceId),
+  };
+
+  yield call(fetchIiifResourceWithAuth, `${infoId.replace(/\/$/, '')}/info.json`, iiifResource, {}, callbacks);
+}
+
+/** @private */
+export function* fetchSearchResponse({ windowId, companionWindowId, query, searchId }) {
+  const callbacks = {
+    failure: ({ error, json, response }) => receiveSearchFailure(windowId, companionWindowId, searchId, error),
+    success: ({ json, response }) => receiveSearch(windowId, companionWindowId, searchId, json),
+  };
+  const dispatch = yield call(fetchIiifResource, searchId, {}, callbacks);
+  yield put(dispatch);
+}
+
+/** @private */
+export function* fetchAnnotation({ targetId, annotationId }) {
+  const callbacks = {
+    failure: ({ error, json, response }) => receiveAnnotationFailure(targetId, annotationId, error),
+    success: ({ json, response }) => receiveAnnotation(targetId, annotationId, json),
+  };
+  const dispatch = yield call(fetchIiifResource, annotationId, {}, callbacks);
+  yield put(dispatch);
+}
+
+/** */
+export function* fetchResourceManifest({ manifestId, manifestJson }) {
+  if (manifestJson) {
+    yield put(receiveManifest(manifestId, manifestJson));
+    return;
+  }
+
+  if (!manifestId) return;
+
+  const manifests = yield select(getManifests) || {};
+  if (!manifests[manifestId]) yield* fetchManifest({ manifestId });
+}
+
+/** */
+export function* fetchManifests(...manifestIds) {
+  const manifests = yield select(getManifests);
+
+  for (let i = 0; i < manifestIds.length; i += 1) {
+    const manifestId = manifestIds[i];
+    if (!manifests[manifestId]) yield call(fetchManifest, { manifestId });
+  }
+}
+
+/** */
+export default function* iiifSaga() {
+  yield all([
+    takeEvery(ActionTypes.REQUEST_MANIFEST, fetchManifest),
+    takeEvery(ActionTypes.REQUEST_INFO_RESPONSE, fetchInfoResponse),
+    takeEvery(ActionTypes.REQUEST_SEARCH, fetchSearchResponse),
+    takeEvery(ActionTypes.REQUEST_ANNOTATION, fetchAnnotation),
+    takeEvery(ActionTypes.ADD_RESOURCE, fetchResourceManifest),
+  ]);
+}

package/src/state/sagas/index.js

@@ -0,0 +1,30 @@
+import { all, call, spawn } from 'redux-saga/effects';
+
+import appSaga from './app';
+import iiifSaga from './iiif';
+import windowSaga from './windows';
+import annotationsSaga from './annotations';
+import authSaga from './auth';
+
+/** */
+function* launchSaga(saga) {
+  while (true) {
+    try {
+      yield call(saga);
+      break;
+    } catch (e) {
+      console.log(e);
+    }
+  }
+}
+
+/** */
+function getRootSaga(pluginSagas = []) {
+  return function* rootSaga() {
+    const sagas = [annotationsSaga, appSaga, iiifSaga, windowSaga, authSaga, ...pluginSagas];
+
+    yield all(sagas.map((saga) => spawn(launchSaga, saga)));
+  };
+}
+
+export default getRootSaga;

package/src/state/sagas/windows.js

@@ -0,0 +1,293 @@
+import { all, call, put, select, takeEvery } from 'redux-saga/effects';
+import ActionTypes from '../actions/action-types';
+import {
+  setContentSearchCurrentAnnotation,
+  selectAnnotation,
+  setWorkspaceViewportPosition,
+  updateWindow,
+  setCanvas,
+  fetchSearch,
+  receiveManifest,
+  fetchInfoResponse,
+  showCollectionDialog,
+} from '../actions';
+import {
+  getSearchForWindow,
+  getSearchAnnotationsForCompanionWindow,
+  getCanvasGrouping,
+  getWindow,
+  getManifestoInstance,
+  getCompanionWindowIdsForPosition,
+  getManifestSearchService,
+  getCanvasForAnnotation,
+  getSelectedContentSearchAnnotationIds,
+  getSortedSearchAnnotationsForCompanionWindow,
+  getVisibleCanvasIds,
+  getWorkspace,
+  getElasticLayout,
+  getCanvases,
+  selectInfoResponses,
+  getWindowConfig,
+  getMiradorCanvasWrapper,
+  getMiradorManifestWrapper,
+} from '../selectors';
+import { fetchManifests } from './iiif';
+import { getIiifResourceImageService } from '../../lib/iiif';
+
+/** */
+export function* fetchWindowManifest(action) {
+  const { collectionPath, id, manifestId } = action.payload || action.window;
+
+  if (!manifestId) return;
+
+  if (action.manifest) {
+    yield put(receiveManifest(manifestId, action.manifest));
+  } else {
+    yield call(fetchManifests, manifestId, ...(collectionPath || []));
+  }
+
+  yield call(setWindowStartingCanvas, action);
+  yield call(setWindowDefaultSearchQuery, action);
+  if (!collectionPath) {
+    yield call(setCollectionPath, { manifestId, windowId: action.id || action.window.id });
+  }
+  yield call(determineAndShowCollectionDialog, manifestId, id);
+}
+
+/** */
+export function* setCanvasOnNewSequence(action) {
+  const windowId = action.id;
+  if (!action || !action.payload || !action.payload.sequenceId) return;
+
+  const canvases = yield select(getCanvases, { windowId });
+  if (!canvases || !canvases[0] || !canvases[0].id) return;
+
+  const thunk = yield call(setCanvas, windowId, canvases[0].id);
+  yield put(thunk);
+}
+
+/** */
+export function* setCollectionPath({ manifestId, windowId }) {
+  const manifestoInstance = yield select(getManifestoInstance, { manifestId });
+
+  if (manifestoInstance) {
+    const partOfs = manifestoInstance.getProperty('partOf');
+    const partOf = Array.isArray(partOfs) ? partOfs[0] : partOfs;
+
+    if (partOf && partOf.id) {
+      yield put(updateWindow(windowId, { collectionPath: [partOf.id] }));
+    }
+  }
+}
+
+/** */
+export function* fetchCollectionManifests(action) {
+  const { collectionPath } = action.payload;
+  if (!collectionPath) return;
+
+  yield call(fetchManifests, ...collectionPath);
+}
+
+/** @private */
+export function* setWindowStartingCanvas(action) {
+  const { canvasId, canvasIndex, manifestId } = action.payload || action.window;
+
+  const windowId = action.id || action.window.id;
+
+  if (canvasId) {
+    // Preserve viewport when initialViewerConfig exists, event if the preserveViewport OSD setting is set to false
+    const preserveViewport = !!action.payload || !!action.window?.initialViewerConfig;
+    // When canvasId is explicitly provided, always pass preserveViewport flag
+    const thunk = yield call(setCanvas, windowId, canvasId, null, { preserveViewport });
+    yield put(thunk);
+  } else {
+    const getMiradorManifest = yield select(getMiradorManifestWrapper);
+    const manifestoInstance = yield select(getManifestoInstance, { manifestId });
+    if (manifestoInstance) {
+      // set the startCanvas
+      const miradorManifest = getMiradorManifest(manifestoInstance);
+      const startCanvas =
+        miradorManifest.startCanvas || miradorManifest.canvasAt(canvasIndex || 0) || miradorManifest.canvasAt(0);
+      if (startCanvas) {
+        const preserveViewport = !!action.payload || !!action.window?.initialViewerConfig;
+        // When canvas is calculated, only pass preserveViewport when true
+        const thunk = preserveViewport
+          ? yield call(setCanvas, windowId, startCanvas.id, null, { preserveViewport })
+          : yield call(setCanvas, windowId, startCanvas.id);
+        yield put(thunk);
+      }
+    }
+  }
+}
+
+/** @private */
+export function* setWindowDefaultSearchQuery(action) {
+  // only for a brand new window
+  if (!action.window || !action.window.defaultSearchQuery) return;
+
+  const { id: windowId, defaultSearchQuery } = action.window;
+  const searchService = yield select(getManifestSearchService, { windowId });
+  const companionWindowIds = yield select(getCompanionWindowIdsForPosition, {
+    position: 'left',
+    windowId,
+  });
+  const companionWindowId = companionWindowIds[0];
+
+  if (searchService && companionWindowId) {
+    const searchId = searchService && `${searchService.id}?${new URLSearchParams({ q: defaultSearchQuery })}`;
+    yield put(fetchSearch(windowId, companionWindowId, searchId, defaultSearchQuery));
+  }
+}
+
+/** @private */
+export function getAnnotationsBySearch(state, { canvasIds, companionWindowIds, windowId }) {
+  const annotationBySearch = companionWindowIds.reduce((accumulator, companionWindowId) => {
+    const annotations = getSearchAnnotationsForCompanionWindow(state, {
+      companionWindowId,
+      windowId,
+    });
+
+    const resourceAnnotations = annotations.resources;
+    const hitAnnotation = resourceAnnotations.find((r) => canvasIds.includes(r.targetId));
+
+    // eslint-disable-next-line no-param-reassign
+    if (hitAnnotation) accumulator[companionWindowId] = [hitAnnotation.id];
+
+    return accumulator;
+  }, {});
+
+  return annotationBySearch;
+}
+
+/** @private */
+export function* setCurrentAnnotationsOnCurrentCanvas({ annotationId, windowId, visibleCanvases }) {
+  const searches = yield select(getSearchForWindow, { windowId });
+  const companionWindowIds = Object.keys(searches || {});
+  if (companionWindowIds.length === 0) return;
+
+  const annotationBySearch = yield select(getAnnotationsBySearch, {
+    canvasIds: visibleCanvases,
+    companionWindowIds,
+    windowId,
+  });
+
+  yield all(
+    Object.keys(annotationBySearch).map((companionWindowId) =>
+      put(setContentSearchCurrentAnnotation(windowId, companionWindowId, annotationBySearch[companionWindowId])),
+    ),
+  );
+
+  if (Object.values(annotationBySearch).length > 0) {
+    // if the currently selected annotation isn't on this canvas, do a thing.
+    yield put(selectAnnotation(windowId, Object.values(annotationBySearch)[0][0]));
+  }
+}
+
+/** @private */
+export function* panToFocusedWindow({ pan, windowId }) {
+  if (!pan) return;
+  const elasticLayout = yield select(getElasticLayout);
+  const { x, y, width, height } = elasticLayout[windowId] || {};
+
+  const {
+    viewportPosition: { width: viewWidth, height: viewHeight },
+  } = yield select(getWorkspace);
+
+  yield put(
+    setWorkspaceViewportPosition({
+      x: x + width / 2 - viewWidth / 2,
+      y: y + height / 2 - viewHeight / 2,
+    }),
+  );
+}
+
+/** @private */
+export function* updateVisibleCanvases({ windowId }) {
+  const { canvasId } = yield select(getWindow, { windowId });
+  const visibleCanvases = yield select(getCanvasGrouping, { canvasId, windowId });
+  yield put(updateWindow(windowId, { visibleCanvases: (visibleCanvases || []).map((c) => c.id) }));
+}
+
+/** @private */
+export function* setCanvasOfFirstSearchResult({ companionWindowId, windowId }) {
+  const { switchCanvasOnSearch } = yield select(getWindowConfig, { windowId });
+  if (!switchCanvasOnSearch) {
+    return;
+  }
+  const selectedIds = yield select(getSelectedContentSearchAnnotationIds, {
+    companionWindowId,
+    windowId,
+  });
+
+  if (selectedIds.length !== 0) return;
+
+  const annotations = yield select(getSortedSearchAnnotationsForCompanionWindow, {
+    companionWindowId,
+    windowId,
+  });
+  if (!annotations || annotations.length === 0) return;
+
+  yield put(selectAnnotation(windowId, annotations[0].id));
+}
+
+/** @private */
+export function* setCanvasforSelectedAnnotation({ annotationId, windowId }) {
+  const canvasIds = yield select(getVisibleCanvasIds, { windowId });
+  const canvas = yield select(getCanvasForAnnotation, {
+    annotationId,
+    windowId,
+  });
+
+  if (!canvas || canvasIds.includes(canvas.id)) return;
+
+  const thunk = yield call(setCanvas, windowId, canvas.id);
+  yield put(thunk);
+}
+
+/** Fetch info responses for the visible canvases */
+export function* fetchInfoResponses({ visibleCanvases: visibleCanvasIds, windowId }) {
+  const canvases = yield select(getCanvases, { windowId });
+  const infoResponses = yield select(selectInfoResponses);
+  const visibleCanvases = (canvases || []).filter((c) => visibleCanvasIds.includes(c.id));
+  const getMiradorCanvas = yield select(getMiradorCanvasWrapper);
+
+  yield all(
+    visibleCanvases.map((canvas) => {
+      const miradorCanvas = getMiradorCanvas(canvas);
+      return all(
+        miradorCanvas.iiifImageResources
+          .map(
+            (imageResource) =>
+              !infoResponses[getIiifResourceImageService(imageResource)?.id] &&
+              put(fetchInfoResponse({ imageResource, windowId })),
+          )
+          .filter(Boolean),
+      );
+    }),
+  );
+}
+
+/** */
+export function* determineAndShowCollectionDialog(manifestId, windowId) {
+  const manifestoInstance = yield select(getManifestoInstance, { manifestId });
+  if (manifestoInstance && manifestoInstance.isCollection()) {
+    yield put(showCollectionDialog(manifestId, [], windowId));
+  }
+}
+
+/** */
+export default function* windowsSaga() {
+  yield all([
+    takeEvery(ActionTypes.ADD_WINDOW, fetchWindowManifest),
+    takeEvery(ActionTypes.UPDATE_WINDOW, fetchWindowManifest),
+    takeEvery(ActionTypes.UPDATE_WINDOW, setCanvasOnNewSequence),
+    takeEvery(ActionTypes.UPDATE_WINDOW, fetchCollectionManifests),
+    takeEvery(ActionTypes.SET_CANVAS, setCurrentAnnotationsOnCurrentCanvas),
+    takeEvery(ActionTypes.SET_CANVAS, fetchInfoResponses),
+    takeEvery(ActionTypes.UPDATE_COMPANION_WINDOW, fetchCollectionManifests),
+    takeEvery(ActionTypes.SET_WINDOW_VIEW_TYPE, updateVisibleCanvases),
+    takeEvery(ActionTypes.RECEIVE_SEARCH, setCanvasOfFirstSearchResult),
+    takeEvery(ActionTypes.SELECT_ANNOTATION, setCanvasforSelectedAnnotation),
+    takeEvery(ActionTypes.FOCUS_WINDOW, panToFocusedWindow),
+  ]);
+}

package/src/state/selectors/annotations.js

@@ -0,0 +1,138 @@
+import { createSelector } from 'reselect';
+import filter from 'lodash/filter';
+import AnnotationFactory from '../../lib/AnnotationFactory';
+import { miradorSlice } from './utils';
+import { getCanvas, getVisibleCanvasIds } from './canvases';
+import { getConfig } from './config';
+import { getWindow } from './getters';
+
+/**
+ * Returns the annotation object from the mirador slice.
+ * @param {object} state redux state
+ * @returns {object} Annotations from the state
+ */
+export const getAnnotations = (state) => miradorSlice(state).annotations;
+
+const getMotivations = createSelector(
+  [getConfig, (state, { motivations }) => motivations],
+  (config, motivations) => motivations || config.annotations.filteredMotivations,
+);
+
+const getAnnotationsOnCanvas = createSelector([getCanvas, getAnnotations], (canvas, annotations) => {
+  if (!annotations || !canvas) return [];
+  if (!annotations[canvas.id]) return [];
+
+  return Object.values(annotations[canvas.id]).flat();
+});
+
+const getPresentAnnotationsCanvas = createSelector([getAnnotationsOnCanvas], (annotations) =>
+  filter(
+    Object.values(annotations).map((annotation) => annotation && AnnotationFactory.determineAnnotation(annotation.json)),
+    (annotation) => annotation && annotation.present(),
+  ),
+);
+
+const getAnnotationsOnSelectedCanvases = createSelector(
+  [(state, { canvasId, ...otherProps }) => (canvasId ? [canvasId] : getVisibleCanvasIds(state, otherProps)), getAnnotations],
+  (canvasIds, annotations) => {
+    if (!annotations || canvasIds.length === 0) return [];
+    return canvasIds.flatMap((targetId) => annotations[targetId] && Object.values(annotations[targetId]));
+  },
+);
+
+/**
+ * Returns an array of present annotations given a canvasId.
+ * @param {object} state redux state
+ * @param {string} canvasId canvasId
+ * @returns {Array} An array of present annotations
+ */
+export const getPresentAnnotationsOnSelectedCanvases = createSelector([getAnnotationsOnSelectedCanvases], (annotations) =>
+  filter(
+    Object.values(annotations).map((annotation) => annotation && AnnotationFactory.determineAnnotation(annotation.json)),
+    (annotation) => annotation && annotation.present(),
+  ),
+);
+
+/**
+ * Returns an array of annotation resources filtered by the given motivation for a particular canvas.
+ * @param {Array} annotations
+ * @param {Array} motivations
+ * @returns {Array}
+ */
+export const getAnnotationResourcesByMotivationForCanvas = createSelector(
+  [getPresentAnnotationsCanvas, getMotivations],
+  (annotations, motivations) => {
+    const resources = annotations.flatMap((annotation) => annotation.resources);
+
+    // If motivations is empty, null, or undefined, return everything
+    if (!motivations || motivations.length === 0) {
+      return resources;
+    }
+
+    // Otherwise filter by motivations
+    return resources.filter((resource) => resource.motivations.some((motivation) => motivations.includes(motivation)));
+  },
+);
+
+/**
+ * Returns annotation resources for a canvas destructured into their id/content/tags/targetId.
+ * @param {object} state
+ * @param {object} props
+ * @param {string} props.canvasId
+ * @param {string} props.windowId
+ * @returns {Array} [{ id: 'abc123', content: 'Annotation Content' }, ...]
+ */
+export const getAnnotationResourcesDataForCanvas = createSelector([getAnnotationResourcesByMotivationForCanvas], (resources) =>
+  resources.map((resource) => ({
+    content: resource.chars,
+    id: resource.id,
+    tags: resource.tags,
+    targetId: resource.targetId,
+  })),
+);
+
+/**
+ * Returns an array of annotation resources filtered by the given motivation.
+ * @param {Array} annotations
+ * @param {Array} motivations
+ * @returns {Array}
+ */
+export const getAnnotationResourcesByMotivation = createSelector(
+  [getPresentAnnotationsOnSelectedCanvases, getMotivations],
+  (annotations, motivations) => {
+    const resources = annotations.flatMap((annotation) => annotation.resources);
+
+    // If motivations is empty, null, or undefined, return everything
+    if (!motivations || motivations.length === 0) {
+      return resources;
+    }
+
+    // Otherwise filter by motivations
+    return resources.filter((resource) => resource.motivations.some((motivation) => motivations.includes(motivation)));
+  },
+);
+
+/**
+ * Returns the selected annotations IDs.
+ * @param {object} state
+ * @param {string} windowId
+ * @param {Array} targetIds
+ * @returns {Array}
+ */
+export const getSelectedAnnotationId = createSelector([getWindow], ({ selectedAnnotationId }) => selectedAnnotationId);
+
+/**
+ * Returns annotations on selected canvases.
+ * @param {object} state
+ * @returns {Array}
+ */
+export const getSelectedAnnotationsOnCanvases = createSelector(
+  [getPresentAnnotationsOnSelectedCanvases, getSelectedAnnotationId],
+  (canvasAnnotations, selectedAnnotationId) =>
+    canvasAnnotations
+      .map((annotation) => ({
+        id: annotation['@id'] || annotation.id,
+        resources: annotation.resources.filter((r) => selectedAnnotationId === r.id),
+      }))
+      .filter((val) => val.resources.length > 0),
+);