Merge pull request #2920 from ProjectMirador/perf-issues

Setup cached manifest selector that is shared between component insta…

__tests__/src/selectors/manifests.test.js

@@ -81,6 +81,12 @@ describe('getManifestoInstance', () => {
     const received = getManifestoInstance(state, { manifestId: 'x' });
     expect(received.id).toEqual('http://iiif.io/api/presentation/2.1/example/fixtures/19/manifest.json');
   });
+  it('is cached based off of input props', () => {
+    const state = { manifests: { x: { json: manifestFixture019 } } };
+    const received = getManifestoInstance(state, { manifestId: 'x' });
+    expect(getManifestoInstance(state, { manifestId: 'x' })).toBe(received);
+    expect(getManifestoInstance(state, { manifestId: 'x', windowId: 'y' })).not.toBe(received);
+  });
 });
 
 describe('getManifestLogo()', () => {

package.json

@@ -49,6 +49,7 @@
     "normalize-url": "^4.2.0",
     "openseadragon": "^2.4.1",
     "prop-types": "^15.6.2",
+    "re-reselect": "^3.4.0",
     "react-aria-live": "^2.0.5",
     "react-copy-to-clipboard": "^5.0.1",
     "react-full-screen": "^0.2.4",

src/state/selectors/manifests.js

 import { createSelector } from 'reselect';
+import createCachedSelector from 're-reselect';
 import manifesto, { LanguageMap } from 'manifesto.js';
 import ManifestoCanvas from '../../lib/ManifestoCanvas';
 
@@ -18,13 +19,20 @@ export function getManifest(state, { manifestId, windowId }) {
 }
 
 /** Instantiate a manifesto instance */
-export const getManifestoInstance = createSelector(
-  [
+export const getManifestoInstance = createCachedSelector(
   getManifest,
   getLocale,
-  ],
   (manifest, locale) => manifest
     && createManifestoInstance(manifest.json, locale),
+)(
+  (state, props) => [
+    props.manifestId,
+    props.windowId,
+    (state.companionWindows
+      && state.companionWindows[props.companionWindowId]
+      && state.companionWindows[props.companionWindowId].locale)
+      || (state.config && state.config.language),
+  ].join(' - '), // Cache key consisting of manifestId, windowId, and locale
 );
 
 export const getManifestLocale = createSelector(