Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Context / update Zustand #746

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 20 additions & 4 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion sites/avivator/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"react-dom": "^16.8.0 || ^17.0.0",
"react-dropzone": "^11.2.3",
"react-router-dom": "^5.2.0",
"zustand": "^3.4.1"
"zustand": "^4.4.6"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.1.1",
Expand Down
5 changes: 3 additions & 2 deletions sites/avivator/src/Avivator.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useEffect } from 'react';

import { useViewerStore } from './state';
import { useViewerStore, useViewerStoreApi } from './state';
import { useImage } from './hooks';
import SnackBars from './components/Snackbars';
import Viewer from './components/Viewer';
Expand All @@ -22,9 +22,10 @@ export default function Avivator(props) {
const isViewerLoading = useViewerStore(store => store.isViewerLoading);
const source = useViewerStore(store => store.source);
const useLinkedView = useViewerStore(store => store.useLinkedView);
const viewerStore = useViewerStoreApi();

useEffect(() => {
useViewerStore.setState({
viewerStore.setState({
source: initSource,
isNoImageUrlSnackbarOn: isDemoImage
});
Expand Down
10 changes: 6 additions & 4 deletions sites/avivator/src/components/Controller/Controller.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Divider from '@material-ui/core/Divider';
import shallow from 'zustand/shallow';
import { shallow } from 'zustand/shallow';

import ChannelController from './components/ChannelController';
import Menu from './components/Menu';
Expand All @@ -25,7 +25,8 @@ import {
useViewerStore,
useImageSettingsStore,
useLoader,
useMetadata
useMetadata,
useImageSettingsStoreApi
} from '../../state';
import { guessRgb, useWindowSize, getSingleSelectionStats } from '../../utils';
import { GLOBAL_SLIDER_DIMENSION_FIELDS } from '../../constants';
Expand Down Expand Up @@ -108,6 +109,7 @@ const Controller = () => {
const globalControlLabels = labels.filter(label =>
GLOBAL_SLIDER_DIMENSION_FIELDS.includes(label)
);
const imageSettingsStore = useImageSettingsStoreApi();
const channelControllers = ids.map((id, i) => {
const onSelectionChange = e => {
const selection = {
Expand All @@ -132,9 +134,9 @@ const Controller = () => {
newProps.colors = Channels[c].Color.slice(0, -1);
}
setPropertiesForChannel(i, newProps);
useImageSettingsStore.setState({
imageSettingsStore.setState({
onViewportLoad: () => {
useImageSettingsStore.setState({ onViewportLoad: () => {} });
imageSettingsStore.setState({ onViewportLoad: () => {} });
setIsChannelLoading(i, false);
}
});
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React, { useCallback } from 'react';
import Button from '@material-ui/core/Button';
import AddIcon from '@material-ui/icons/Add';
import shallow from 'zustand/shallow';
import { shallow } from 'zustand/shallow';

import { MAX_CHANNELS, COLOR_PALLETE } from '../../../constants';
import {
useChannelsStore,
useViewerStore,
useImageSettingsStore,
useImageSettingsStoreApi,
useLoader,
useMetadata
} from '../../../state';
Expand Down Expand Up @@ -41,6 +41,7 @@ const AddChannel = () => {
const loader = useLoader();
const metadata = useMetadata();
const { labels } = loader[0];
const imageSettingsStore = useImageSettingsStoreApi();
const handleChannelAdd = useCallback(() => {
let selection = Object.fromEntries(labels.map(l => [l, 0]));
selection = { ...selection, ...globalSelection };
Expand All @@ -55,9 +56,9 @@ const AddChannel = () => {
contrastLimits,
channelsVisible: true
});
useImageSettingsStore.setState({
imageSettingsStore.setState({
onViewportLoad: () => {
useImageSettingsStore.setState({ onViewportLoad: () => {} });
imageSettingsStore.setState({ onViewportLoad: () => {} });
setIsChannelLoading(numSelectionsBeforeAdd, false);
}
});
Expand Down Expand Up @@ -85,6 +86,7 @@ const AddChannel = () => {
selections,
setIsChannelLoading,
setPropertiesForChannel,
imageSettingsStore,
metadata
]);
return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@ import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import shallow from 'zustand/shallow';
import { shallow } from 'zustand/shallow';

import { getDefaultInitialViewState } from '@hms-dbmi/viv';
import {
useImageSettingsStore,
useViewerStore,
useLoader
useLoader,
useViewerStoreApi
} from '../../../state';
import { useWindowSize } from '../../../utils';

Expand Down Expand Up @@ -53,11 +54,12 @@ const CameraOptions = () => {
</Grid>
</Grid>
);
const viewerStore = useViewerStoreApi();
const reCenterButton = (
<Grid item xs="auto" key="recenter">
<Button
onClick={() =>
useViewerStore.setState({
viewerStore.setState({
viewState: {
...viewState,
...getDefaultInitialViewState(loader, { height, width }, 1, true),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Select from '@material-ui/core/Select';
import CircularProgress from '@material-ui/core/CircularProgress';
import HighlightOffIcon from '@material-ui/icons/HighlightOff';
import IconButton from '@material-ui/core/IconButton';
import shallow from 'zustand/shallow';
import { shallow } from 'zustand/shallow';
import { DTYPE_VALUES } from '@hms-dbmi/viv';

import ChannelOptions from './ChannelOptions';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,16 @@ import InputLabel from '@material-ui/core/InputLabel';
import Select from '@material-ui/core/Select';

import { COLORMAP_OPTIONS } from '../../../constants';
import { useImageSettingsStore, useViewerStore } from '../../../state';
import {
useImageSettingsStoreApi,
useImageSettingsStore,
useViewerStore
} from '../../../state';

function ColormapSelect() {
const colormap = useImageSettingsStore(store => store.colormap);
const isViewerLoading = useViewerStore(store => store.isViewerLoading);
const imageSettingsStore = useImageSettingsStoreApi();
return (
<FormControl fullWidth>
<InputLabel htmlFor="colormap-select">
Expand All @@ -17,7 +22,7 @@ function ColormapSelect() {
<Select
native
onChange={e =>
useImageSettingsStore.setState({ colormap: e.target.value })
imageSettingsStore.setState({ colormap: e.target.value })
}
value={colormap}
inputProps={{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@ import { unstable_batchedUpdates } from 'react-dom';
import Grid from '@material-ui/core/Grid';
import Slider from '@material-ui/core/Slider';
import debounce from 'lodash/debounce';
import shallow from 'zustand/shallow';
import { shallow } from 'zustand/shallow';

import { range, getMultiSelectionStats } from '../../../utils';
import {
useChannelsStore,
useViewerStore,
useImageSettingsStore,
useLoader
useLoader,
useViewerStoreApi,
useImageSettingsStoreApi
} from '../../../state';

export default function GlobalSelectionSlider(props) {
Expand All @@ -22,9 +23,11 @@ export default function GlobalSelectionSlider(props) {
);
const loader = useLoader();
const globalSelection = useViewerStore(store => store.globalSelection);
const viewerStore = useViewerStoreApi();
const imageSettingsStore = useImageSettingsStoreApi();
const changeSelection = debounce(
(_event, newValue) => {
useViewerStore.setState({
viewerStore.setState({
isChannelLoading: selections.map(() => true)
});
const newSelections = [...selections].map(sel => ({
Expand All @@ -45,12 +48,12 @@ export default function GlobalSelectionSlider(props) {
);
});
unstable_batchedUpdates(() => {
useImageSettingsStore.setState({
imageSettingsStore.setState({
onViewportLoad: () => {
useImageSettingsStore.setState({
imageSettingsStore.setState({
onViewportLoad: () => {}
});
useViewerStore.setState({
viewerStore.setState({
isChannelLoading: selections.map(() => false)
});
}
Expand Down Expand Up @@ -81,7 +84,7 @@ export default function GlobalSelectionSlider(props) {
<Slider
value={globalSelection[label]}
onChange={(event, newValue) => {
useViewerStore.setState({
viewerStore.setState({
globalSelection: {
...globalSelection,
[label]: newValue
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import Grid from '@material-ui/core/Grid';
import Select from '@material-ui/core/Select';
import shallow from 'zustand/shallow';
import { shallow } from 'zustand/shallow';

import {
useChannelsStore,
useImageSettingsStore,
useImageSettingsStoreApi,
useViewerStore
} from '../../../state';

Expand All @@ -21,6 +22,7 @@ function LensSelect() {
const currChannelIndices = selections.map(sel => sel.c);

const checkboxColor = `rgb(${[255, 255, 255]})`;
const imageSettingsStore = useImageSettingsStoreApi();
return (
<Grid
container
Expand Down Expand Up @@ -48,7 +50,7 @@ function LensSelect() {
native
value={lensSelection}
onChange={e =>
useImageSettingsStore.setState({ lensSelection: e.target.value })
imageSettingsStore.setState({ lensSelection: e.target.value })
}
>
{currChannelIndices.map((channelIndex, relativeIndex) => (
Expand Down
15 changes: 11 additions & 4 deletions sites/avivator/src/components/Controller/components/Menu.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,18 @@ import Link from '@material-ui/core/Link';
import Button from '@material-ui/core/Button';
import SettingsIcon from '@material-ui/icons/Settings';
import { makeStyles } from '@material-ui/core/styles';
import shallow from 'zustand/shallow';
import { shallow } from 'zustand/shallow';
import { Select } from '@material-ui/core';

import MenuTitle from './MenuTitle';
import DropzoneButton from './DropzoneButton';
import { isMobileOrTablet, getNameFromUrl } from '../../../utils';
import { useChannelsStore, useViewerStore } from '../../../state';
import {
useChannelsStore,
useChannelsStoreApi,
useViewerStore,
useViewerStoreApi
} from '../../../state';

const useStyles = makeStyles(theme => ({
root: {
Expand Down Expand Up @@ -57,17 +62,19 @@ function Header(props) {
store.source,
store.metadata
]);
const viewerStore = useViewerStoreApi();
const channelsStore = useChannelsStoreApi();
const handleSubmitNewUrl = (event, newUrl) => {
event.preventDefault();
const newSource = {
urlOrFile: newUrl,
// Use the trailing part of the URL (file name, presumably) as the description.
description: getNameFromUrl(newUrl)
};
useViewerStore.setState({ source: newSource });
viewerStore.setState({ source: newSource });
};
const onImageSelectionChange = e =>
useChannelsStore.setState({
channelsStore.setState({
image: e.target.value
});
const url = typeof source.urlOrFile === 'string' ? source.urlOrFile : '';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import Button from '@material-ui/core/Button';
import shallow from 'zustand/shallow';
import { shallow } from 'zustand/shallow';

import { useImageSettingsStore, useViewerStore } from '../../../state';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import Button from '@material-ui/core/Button';
import shallow from 'zustand/shallow';
import { shallow } from 'zustand/shallow';

import { useImageSettingsStore, useViewerStore } from '../../../state';

Expand Down
Loading