From 09f0bea8463ce4fcffd6da3d4fe574ad77cdf891 Mon Sep 17 00:00:00 2001
From: Chris Beer <cabeer@stanford.edu>
Date: Fri, 18 Sep 2020 11:53:35 -0700
Subject: [PATCH] Use canvas groupings selectors
---
.../ThumbnailCanvasGrouping.test.js | 2 +-
.../components/ThumbnailNavigation.test.js | 4 ++-
src/components/CanvasLayers.js | 20 +++++------
src/components/ThumbnailCanvasGrouping.js | 2 +-
src/components/ThumbnailNavigation.js | 6 ++--
src/containers/CanvasLayers.js | 7 +---
src/containers/ThumbnailNavigation.js | 33 ++++++++-----------
src/state/selectors/canvases.js | 2 +-
8 files changed, 32 insertions(+), 44 deletions(-)
diff --git a/__tests__/src/components/ThumbnailCanvasGrouping.test.js b/__tests__/src/components/ThumbnailCanvasGrouping.test.js
index dfcfcb731..ba27c5a71 100644
--- a/__tests__/src/components/ThumbnailCanvasGrouping.test.js
+++ b/__tests__/src/components/ThumbnailCanvasGrouping.test.js
@@ -28,7 +28,7 @@ describe('ThumbnailCanvasGrouping', () => {
let setCanvas;
const data = {
canvasGroupings: new CanvasGroupings(Utils.parseManifest(manifestJson)
- .getSequences()[0].getCanvases()),
+ .getSequences()[0].getCanvases()).groupings(),
height: 131,
position: 'far-bottom',
};
diff --git a/__tests__/src/components/ThumbnailNavigation.test.js b/__tests__/src/components/ThumbnailNavigation.test.js
index e86aa0896..4bfbf173f 100644
--- a/__tests__/src/components/ThumbnailNavigation.test.js
+++ b/__tests__/src/components/ThumbnailNavigation.test.js
@@ -12,7 +12,9 @@ function createWrapper(props, fixture = manifestJson) {
return shallow(
<ThumbnailNavigation
canvasGroupings={
- new CanvasGroupings(Utils.parseManifest(fixture).getSequences()[0].getCanvases())
+ new CanvasGroupings(
+ Utils.parseManifest(fixture).getSequences()[0].getCanvases(),
+ ).groupings()
}
canvasIndex={1}
classes={{}}
diff --git a/src/components/CanvasLayers.js b/src/components/CanvasLayers.js
index 7024334c4..d2eb7d44d 100644
--- a/src/components/CanvasLayers.js
+++ b/src/components/CanvasLayers.js
@@ -51,7 +51,7 @@ export class CanvasLayers extends Component {
/** */
onDragEnd(result) {
const {
- canvas, layers, updateLayers, windowId,
+ canvasId, layers, updateLayers, windowId,
} = this.props;
if (!result.destination) return;
if (result.destination.droppableId !== this.droppableId) return;
@@ -68,26 +68,26 @@ export class CanvasLayers extends Component {
return acc;
}, {});
- updateLayers(windowId, canvas.id, payload);
+ updateLayers(windowId, canvasId, payload);
}
/** */
setLayerVisibility(layerId, value) {
const {
- canvas, updateLayers, windowId,
+ canvasId, updateLayers, windowId,
} = this.props;
const payload = {
[layerId]: { visibility: value },
};
- updateLayers(windowId, canvas.id, payload);
+ updateLayers(windowId, canvasId, payload);
}
/** */
moveToTop(layerId) {
const {
- canvas, layers, updateLayers, windowId,
+ canvasId, layers, updateLayers, windowId,
} = this.props;
const sortedLayers = reorder(layers.map(l => l.id), layers.findIndex(l => l.id === layerId), 0);
@@ -97,20 +97,20 @@ export class CanvasLayers extends Component {
return acc;
}, {});
- updateLayers(windowId, canvas.id, payload);
+ updateLayers(windowId, canvasId, payload);
}
/** */
handleOpacityChange(layerId, value) {
const {
- canvas, updateLayers, windowId,
+ canvasId, updateLayers, windowId,
} = this.props;
const payload = {
[layerId]: { opacity: value / 100.0 },
};
- updateLayers(windowId, canvas.id, payload);
+ updateLayers(windowId, canvasId, payload);
}
/** @private */
@@ -261,9 +261,7 @@ export class CanvasLayers extends Component {
}
CanvasLayers.propTypes = {
- canvas: PropTypes.shape({
- id: PropTypes.string,
- }).isRequired,
+ canvasId: PropTypes.string.isRequired,
classes: PropTypes.objectOf(PropTypes.string),
index: PropTypes.number.isRequired,
label: PropTypes.string.isRequired,
diff --git a/src/components/ThumbnailCanvasGrouping.js b/src/components/ThumbnailCanvasGrouping.js
index 958e2e5f2..cc966ff81 100644
--- a/src/components/ThumbnailCanvasGrouping.js
+++ b/src/components/ThumbnailCanvasGrouping.js
@@ -36,7 +36,7 @@ export class ThumbnailCanvasGrouping extends PureComponent {
const {
canvasGroupings, position, height,
} = data;
- const currentGroupings = canvasGroupings.groupings()[index];
+ const currentGroupings = canvasGroupings[index];
const SPACING = 8;
return (
<div
diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js
index 48accae8e..252e45824 100644
--- a/src/components/ThumbnailNavigation.js
+++ b/src/components/ThumbnailNavigation.js
@@ -48,7 +48,7 @@ export class ThumbnailNavigation extends Component {
*/
calculateScaledSize(index) {
const { thumbnailNavigation, canvasGroupings, position } = this.props;
- const canvases = canvasGroupings.groupings()[index];
+ const canvases = canvasGroupings[index];
const world = new CanvasWorld(canvases);
const bounds = world.worldBounds();
switch (position) {
@@ -125,7 +125,7 @@ export class ThumbnailNavigation extends Component {
/** */
itemCount() {
const { canvasGroupings } = this.props;
- return canvasGroupings.groupings().length;
+ return canvasGroupings.length;
}
/** */
@@ -231,7 +231,7 @@ export class ThumbnailNavigation extends Component {
}
ThumbnailNavigation.propTypes = {
- canvasGroupings: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+ canvasGroupings: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
canvasIndex: PropTypes.number.isRequired,
classes: PropTypes.objectOf(PropTypes.string).isRequired,
hasNextCanvas: PropTypes.bool,
diff --git a/src/containers/CanvasLayers.js b/src/containers/CanvasLayers.js
index 7e36dc1d6..aba5f5c7c 100644
--- a/src/containers/CanvasLayers.js
+++ b/src/containers/CanvasLayers.js
@@ -4,7 +4,6 @@ import { withTranslation } from 'react-i18next';
import { withStyles } from '@material-ui/core/styles';
import * as actions from '../state/actions';
import {
- getCanvas,
getCanvasLabel,
getLayers,
getSortedLayers,
@@ -13,11 +12,7 @@ import { CanvasLayers } from '../components/CanvasLayers';
/** For connect */
const mapStateToProps = (state, { canvasId, windowId }) => ({
- canvas: getCanvas(state, { canvasId, windowId }),
- label: getCanvasLabel(state, {
- canvasId,
- windowId,
- }),
+ label: getCanvasLabel(state, { canvasId, windowId }),
layerMetadata: getLayers(state, { canvasId, windowId }),
layers: getSortedLayers(state, { canvasId, windowId }),
});
diff --git a/src/containers/ThumbnailNavigation.js b/src/containers/ThumbnailNavigation.js
index eb82793df..e3be9a8f3 100644
--- a/src/containers/ThumbnailNavigation.js
+++ b/src/containers/ThumbnailNavigation.js
@@ -3,13 +3,12 @@ import { connect } from 'react-redux';
import { withTranslation } from 'react-i18next';
import { withStyles } from '@material-ui/core/styles';
import { withPlugins } from '../extend/withPlugins';
-import CanvasGroupings from '../lib/CanvasGroupings';
import * as actions from '../state/actions';
import { ThumbnailNavigation } from '../components/ThumbnailNavigation';
import {
getCompanionWindow, getWindow,
getNextCanvasGrouping, getPreviousCanvasGrouping,
- getCanvases, getCanvasIndex, getWindowViewType,
+ getCanvasGroupings, getCanvasIndex, getWindowViewType,
getSequenceViewingDirection, getConfig,
} from '../state/selectors';
@@ -18,24 +17,18 @@ import {
* @memberof ThumbnailNavigation
* @private
*/
-const mapStateToProps = (state, { windowId }) => {
- const viewType = getWindowViewType(state, { windowId });
- return {
- canvasGroupings: new CanvasGroupings(
- getCanvases(state, { windowId }),
- viewType,
- ),
- canvasIndex: getCanvasIndex(state, { windowId }),
- hasNextCanvas: !!getNextCanvasGrouping(state, { windowId }),
- hasPreviousCanvas: !!getPreviousCanvasGrouping(state, { windowId }),
- position: getCompanionWindow(state, {
- companionWindowId: getWindow(state, { windowId }).thumbnailNavigationId,
- }).position,
- thumbnailNavigation: getConfig(state).thumbnailNavigation,
- view: viewType,
- viewingDirection: getSequenceViewingDirection(state, { windowId }),
- };
-};
+const mapStateToProps = (state, { windowId }) => ({
+ canvasGroupings: getCanvasGroupings(state, { windowId }),
+ canvasIndex: getCanvasIndex(state, { windowId }),
+ hasNextCanvas: !!getNextCanvasGrouping(state, { windowId }),
+ hasPreviousCanvas: !!getPreviousCanvasGrouping(state, { windowId }),
+ position: getCompanionWindow(state, {
+ companionWindowId: getWindow(state, { windowId }).thumbnailNavigationId,
+ }).position,
+ thumbnailNavigation: getConfig(state).thumbnailNavigation,
+ view: getWindowViewType(state, { windowId }),
+ viewingDirection: getSequenceViewingDirection(state, { windowId }),
+});
/**
* mapDispatchToProps - used to hook up connect to action creators
diff --git a/src/state/selectors/canvases.js b/src/state/selectors/canvases.js
index 684676bcd..4a3c99248 100644
--- a/src/state/selectors/canvases.js
+++ b/src/state/selectors/canvases.js
@@ -70,7 +70,7 @@ export const getVisibleCanvases = createSelector(
* @param {string} props.windowId
* @return {Array}
*/
-const getCanvasGroupings = createSelector(
+export const getCanvasGroupings = createSelector(
[
getCanvases,
getWindowViewType,
--
GitLab