@vitessce/vit-s 2.0.3 → 3.0.0

package/src/VitessceGrid.test.jsx

@@ -1,15 +1,17 @@
 import '@testing-library/jest-dom';
-import { cleanup, render, screen } from '@testing-library/react'
-import { afterEach } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach } from 'vitest';
 
-import VitessceGrid from './VitessceGrid';
+import React from 'react';
+import { PluginViewType } from '@vitessce/plugins';
+import VitessceGrid from './VitessceGrid.js';
 import {
   ViewConfigProvider, createViewConfigStore,
   AuxiliaryProvider, createAuxiliaryStore,
-} from './state/hooks';
+} from './state/hooks.js';
 
 afterEach(() => {
-  cleanup()
+  cleanup();
 });
 
 describe('VitessceGrid.js', () => {
@@ -34,11 +36,18 @@ describe('VitessceGrid.js', () => {
       function FakeComponent() {
         return <p>FakeComponent!</p>;
       }
-      const getComponent = () => FakeComponent;
+      const viewTypes = [new PluginViewType('FakeComponent', FakeComponent, [])];
+      const fileTypes = [];
+      const coordinationTypes = [];
       render(
         <ViewConfigProvider createStore={createViewConfigStore}>
           <AuxiliaryProvider createStore={createAuxiliaryStore}>
-            <VitessceGrid config={config} getComponent={getComponent} />
+            <VitessceGrid
+              config={config}
+              viewTypes={viewTypes}
+              fileTypes={fileTypes}
+              coordinationTypes={coordinationTypes}
+            />
           </AuxiliaryProvider>
         </ViewConfigProvider>,
       );

package/src/Warning.js

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import { VITESSCE_CONTAINER } from './classNames';
+import { makeStyles } from '@material-ui/core';
+import { VITESSCE_CONTAINER } from './classNames.js';
 
 const useStyles = makeStyles(theme => ({
   warningLayout: {

package/src/data/AbstractLoader.js

@@ -1,7 +1,3 @@
-import Ajv from 'ajv';
-import { OptionsValidationError } from '../errors/index';
-import { emptySchema } from '../file-options-schemas';
-
 /**
  * A loader ancestor class containing a default constructor
  * and a stub for the required load() method.
@@ -18,29 +14,10 @@ export default class AbstractLoader {
     this.requestInit = requestInit;
     this.options = options;
     this.coordinationValues = coordinationValues;
-    this.optionsSchema = emptySchema;
-  }
-
-  validateOptions() {
-    const { optionsSchema, options } = this;
-    const validate = new Ajv().compile(optionsSchema);
-    const valid = validate(options || null);
-    if (!valid) {
-      return [false, validate.errors];
-    }
-    return [true, null];
   }
 
+  // eslint-disable-next-line class-methods-use-this
   load() {
-    const {
-      fileType, url, options,
-    } = this;
-    const [optionsAreValid, optionsFailureReason] = this.validateOptions();
-    if (!optionsAreValid) {
-      return Promise.reject(
-        new OptionsValidationError(fileType, url, options, optionsFailureReason),
-      );
-    }
-    return Promise.resolve(optionsAreValid);
+    return Promise.resolve(true);
   }
 }

package/src/data/AbstractTwoStepLoader.js

@@ -1,4 +1,4 @@
-import AbstractLoader from './AbstractLoader';
+import AbstractLoader from './AbstractLoader.js';
 
 export default class AbstractTwoStepLoader extends AbstractLoader {
   constructor(dataSource, params) {

package/src/data/index.js

@@ -1,3 +1,3 @@
-export { default as AbstractLoader } from './AbstractLoader';
-export { default as AbstractTwoStepLoader } from './AbstractTwoStepLoader';
-export { default as LoaderResult } from './LoaderResult';
+export { default as AbstractLoader } from './AbstractLoader.js';
+export { default as AbstractTwoStepLoader } from './AbstractTwoStepLoader.js';
+export { default as LoaderResult } from './LoaderResult.js';

package/src/data/loader-registry.js

@@ -1,19 +1,28 @@
-import {
-  getLoaderClassesForPluginFileType,
-} from '../plugins';
-
-export const fileTypeToLoaderAndSource = {};
-
-export function getSourceAndLoaderFromFileType(type) {
-  if (fileTypeToLoaderAndSource[type]) {
-    return fileTypeToLoaderAndSource[type];
-  }
-  const pluginFileType = getLoaderClassesForPluginFileType(type);
-  if (pluginFileType) {
-    return pluginFileType;
+/**
+ * Get the data source and data loader class.
+ * @param {string} type The fileType name.
+ * @param {PluginFileType[]} fileTypes The array of file types.
+ * @returns {array} [dataSourceClass, dataLoaderClass].
+ */
+export function getSourceAndLoaderFromFileType(type, fileTypes) {
+  if (Array.isArray(fileTypes)) {
+    const matchingFileType = fileTypes.find(ft => ft.name === type);
+    if (matchingFileType) {
+      return matchingFileType.getSourceAndLoader();
+    }
   }
   // Fallback to JSON.
   // TODO(monorepo)
   // return [JsonSource, JsonLoader];
   return [null, null];
 }
+
+export function getDataTypeFromFileType(type, fileTypes) {
+  if (Array.isArray(fileTypes)) {
+    const matchingFileType = fileTypes.find(ft => ft.name === type);
+    if (matchingFileType) {
+      return matchingFileType.dataType;
+    }
+  }
+  return null;
+}

package/src/data-hook-utils.js

@@ -1,13 +1,11 @@
 import { useState, useEffect } from 'react';
-import equal from 'fast-deep-equal';
 import { capitalize } from '@vitessce/utils';
 import { STATUS } from '@vitessce/constants-internal';
-import { useMatchingLoader, useMatchingLoaders, useSetWarning } from './state/hooks';
+import { useMatchingLoader, useMatchingLoaders, useSetWarning } from './state/hooks.js';
 import {
   AbstractLoaderError,
   LoaderNotFoundError,
-} from './errors/index';
-import { getDefaultCoordinationValues } from './plugins';
+} from './errors/index.js';
 
 /**
  * Warn via publishing to the console
@@ -38,12 +36,12 @@ export function initCoordinationSpace(values, setters, initialValues) {
   if (!values || !setters) {
     return;
   }
-  const defaultCoordinationValues = getDefaultCoordinationValues();
   Object.entries(values).forEach(([coordinationType, value]) => {
     const setterName = `set${capitalize(coordinationType)}`;
     const setterFunc = setters[setterName];
     const initialValue = initialValues && initialValues[coordinationType];
-    const shouldInit = equal(initialValue, defaultCoordinationValues[coordinationType]);
+    // Interpret null as "uninitialized" and therefore needing initialization.
+    const shouldInit = initialValue === null;
     if (shouldInit && setterFunc) {
       setterFunc(value);
     }

package/src/data-hooks.js

@@ -1,15 +1,15 @@
 import { useState, useEffect, useMemo } from 'react';
 import { CoordinationType, DataType, STATUS } from '@vitessce/constants-internal';
 import { fromEntries } from '@vitessce/utils';
-import { useMatchingLoader, useMultiCoordinationValues, useSetWarning } from './state/hooks';
+import { useMatchingLoader, useMultiCoordinationValues, useSetWarning } from './state/hooks.js';
 import {
   LoaderNotFoundError,
-} from './errors/index';
+} from './errors/index.js';
 import {
   warn,
   useDataType,
   useDataTypeMulti,
-} from './data-hook-utils';
+} from './data-hook-utils.js';
 
 /**
  * Get the dataset description string.
@@ -232,7 +232,7 @@ export function useFeatureSelection(
             const geneIndex = featureIndex.indexOf(sel);
             const numGenes = featureIndex.length;
             const numCells = obsIndex.length;
-            const expressionData = new Uint8Array(numCells);
+            const expressionData = new Float32Array(numCells);
             for (let cellIndex = 0; cellIndex < numCells; cellIndex += 1) {
               expressionData[cellIndex] = obsFeatureMatrix.data[cellIndex * numGenes + geneIndex];
             }

package/src/errors/DataSourceFetchError.js

@@ -1,4 +1,4 @@
-import AbstractLoaderError from './AbstractLoaderError';
+import AbstractLoaderError from './AbstractLoaderError.js';
 
 export default class DataSourceFetchError extends AbstractLoaderError {
   constructor(source, url, headers) {

package/src/errors/DatasetNotFoundError.js

@@ -1,4 +1,4 @@
-import AbstractLoaderError from './AbstractLoaderError';
+import AbstractLoaderError from './AbstractLoaderError.js';
 
 export default class DatasetNotFoundError extends AbstractLoaderError {
   constructor(datasetUid) {

package/src/errors/LoaderNotFoundError.js

@@ -1,4 +1,4 @@
-import AbstractLoaderError from './AbstractLoaderError';
+import AbstractLoaderError from './AbstractLoaderError.js';
 
 export default class LoaderNotFoundError extends AbstractLoaderError {
   constructor(loaders, dataset, fileType, viewCoordinationValues) {

package/src/errors/LoaderValidationError.js

@@ -1,4 +1,4 @@
-import AbstractLoaderError from './AbstractLoaderError';
+import AbstractLoaderError from './AbstractLoaderError.js';
 
 export default class LoaderValidationError extends AbstractLoaderError {
   constructor(datasetType, datasetFileType, datasetUrl, reason) {

package/src/errors/index.js

@@ -1,6 +1,5 @@
-export { default as AbstractLoaderError } from './AbstractLoaderError';
-export { default as LoaderValidationError } from './LoaderValidationError';
-export { default as OptionsValidationError } from './OptionsValidationError';
-export { default as LoaderNotFoundError } from './LoaderNotFoundError';
-export { default as DatasetNotFoundError } from './DatasetNotFoundError';
-export { default as DataSourceFetchError } from './DataSourceFetchError';
+export { default as AbstractLoaderError } from './AbstractLoaderError.js';
+export { default as LoaderValidationError } from './LoaderValidationError.js';
+export { default as LoaderNotFoundError } from './LoaderNotFoundError.js';
+export { default as DatasetNotFoundError } from './DatasetNotFoundError.js';
+export { default as DataSourceFetchError } from './DataSourceFetchError.js';

package/src/hooks.js

@@ -1,11 +1,11 @@
 import {
   useRef, useState, useEffect, useCallback, useMemo,
 } from 'react';
-import debounce from 'lodash/debounce';
-import every from 'lodash/every';
+import { debounce, every } from 'lodash-es';
+import { extent } from 'd3-array';
 import { capitalize, fromEntries } from '@vitessce/utils';
-import { useGridResize, useEmitGridResize } from './state/hooks';
-import { VITESSCE_CONTAINER } from './classNames';
+import { useGridResize, useEmitGridResize } from './state/hooks.js';
+import { VITESSCE_CONTAINER } from './classNames.js';
 
 function getWindowDimensions() {
   const { innerWidth: width, innerHeight: height } = window;
@@ -199,7 +199,63 @@ export function useClosestVitessceContainerSize(ref) {
   return [width, height];
 }
 
-export function useExpressionValueGetter({ instanceObsIndex, matrixObsIndex, expressionData }) {
+/**
+ * Normalize an obsFeatureMatrix to a Uint8Array.
+ * @param {object} params
+ * @param {object} params.obsFeatureMatrix The obsFeatureMatrix
+ * returned by the useObsFeatureMatrix hook.
+ * @returns {array} A tuple [obsFeatureMatrix, dataExtent]
+ * where obsFeatureMatrix
+ * is a Uint8Array with the same shape as
+ * params.obsFeatureMatrix.data, and dataExtent is the
+ * [min, max] of the original data.
+ */
+export function useUint8ObsFeatureMatrix({ obsFeatureMatrix }) {
+  return useMemo(() => {
+    if (obsFeatureMatrix && obsFeatureMatrix.data) {
+      const dataExtent = extent(obsFeatureMatrix.data);
+      const [min, max] = dataExtent;
+      const ratio = 255 / (max - min);
+      const data = new Uint8Array(
+        obsFeatureMatrix.data.map(i => Math.floor((i - min) * ratio)),
+      );
+      return [{ data }, dataExtent];
+    }
+    return [null, null];
+  }, [obsFeatureMatrix]);
+}
+
+/**
+ * Normalize a feature selection (data for selected
+ * columns of an obsFeatureMatrix) to a Uint8Array.
+ * @param {array|null} expressionData The expressionData
+ * returned by the useFeatureSelection hook,
+ * where each element corresponds to an
+ * array of values for a selected feature.
+ * @returns {array} A tuple [normData, extents] where
+ * normData is an array of Uint8Arrays (or null), and extents is
+ * an array of [min, max] values for each feature (or null).
+ */
+export function useUint8FeatureSelection(expressionData) {
+  return useMemo(() => {
+    if (expressionData && expressionData[0]) {
+      const extents = expressionData.map(arr => extent(arr));
+      const normData = expressionData.map((arr, i) => {
+        const [min, max] = extents[i];
+        const ratio = 255 / (max - min);
+        return new Uint8Array(
+          arr.map(j => Math.floor((j - min) * ratio)),
+        );
+      });
+      return [normData, extents];
+    }
+    return [null, null];
+  }, [expressionData]);
+}
+
+export function useExpressionValueGetter(
+  { instanceObsIndex, matrixObsIndex, expressionData },
+) {
   // Get a mapping from cell ID to row index in the gene expression matrix.
   // Since the two obsIndices (instanceObsIndex = the obsIndex from obsEmbedding)
   // may be ordered differently (matrixObsIndex = the obsIndex from obsFeatureMatrix),
@@ -226,6 +282,15 @@ export function useExpressionValueGetter({ instanceObsIndex, matrixObsIndex, exp
   return getExpressionValue;
 }
 
+export function useGetObsMembership(obsSetsMembership) {
+  return useCallback((obsId) => {
+    if (obsId) {
+      return obsSetsMembership?.get(obsId) || [];
+    }
+    return [];
+  }, [obsSetsMembership]);
+}
+
 export function useGetObsInfo(obsType, obsLabelsTypes, obsLabelsData, obsSetsMembership) {
   return useCallback((obsId) => {
     if (obsId) {

package/src/index.js

@@ -1,20 +1,21 @@
-export { VitS } from './VitS';
-export { TitleInfo } from './TitleInfo';
-export { PopperMenu } from './shared-mui/components';
-export {
-  registerPluginViewType,
-  registerPluginCoordinationType,
-  registerPluginFileType,
-  registerPluginJointFileType,
-} from './plugins';
+export { VitS } from './VitS.js';
+export { TitleInfo } from './TitleInfo.js';
+export { PopperMenu } from './shared-mui/components.js';
 // For plugin view types:
 export {
-  useReady, useUrls,
-  useVitessceContainer, useDeckCanvasSize,
-  useExpressionValueGetter, useGetObsInfo,
-  useClosestVitessceContainerSize, useWindowDimensions,
+  useReady,
+  useUrls,
+  useVitessceContainer,
+  useDeckCanvasSize,
+  useUint8ObsFeatureMatrix,
+  useUint8FeatureSelection,
+  useExpressionValueGetter,
+  useGetObsMembership,
+  useGetObsInfo,
+  useClosestVitessceContainerSize,
+  useWindowDimensions,
   useGridItemSize,
-} from './hooks';
+} from './hooks.js';
 export {
   useCoordination,
   useComplexCoordination,
@@ -33,7 +34,7 @@ export {
   useSetWarning,
   useAuxiliaryCoordination,
   useComponentLayout,
-} from './state/hooks';
+} from './state/hooks.js';
 export {
   useDescription,
   useImageData,
@@ -51,51 +52,25 @@ export {
   useObsFeatureMatrixData,
   useFeatureLabelsData,
   useGenomicProfilesData,
-} from './data-hooks';
+} from './data-hooks.js';
 export {
   useHasLoader,
-} from './data-hook-utils';
+} from './data-hook-utils.js';
 export {
   AbstractLoader,
   AbstractTwoStepLoader,
   LoaderResult,
-} from './data/index';
+} from './data/index.js';
 export {
   AbstractLoaderError,
   DatasetNotFoundError,
   LoaderNotFoundError,
   LoaderValidationError,
-  OptionsValidationError,
   DataSourceFetchError,
-} from './errors/index';
-export {
-  // TODO(monorepo): should these be in here? or within file-types/
-  obsEmbeddingAnndataSchema,
-  obsLocationsAnndataSchema,
-  obsSegmentationsAnndataSchema,
-  obsSetsAnndataSchema,
-  obsFeatureMatrixAnndataSchema,
-  obsLabelsAnndataSchema,
-  featureLabelsAnndataSchema,
-  obsEmbeddingCsvSchema,
-  obsLocationsCsvSchema,
-  obsLabelsCsvSchema,
-  featureLabelsCsvSchema,
-  obsSetsCsvSchema,
-  anndataZarrSchema,
-  emptySchema,
-} from './file-options-schemas';
-export {
-  SCHEMA_HANDLERS,
-  LATEST_VERSION,
-} from './view-config-versions';
-export {
-  upgradeAndValidate,
-} from './view-config-utils';
+} from './errors/index.js';
 export {
   CellColorEncodingOption,
   OptionsContainer,
   OptionSelect,
   usePlotOptionsStyles,
-} from './shared-plot-options';
-export * from './json-schemas';
+} from './shared-plot-options/index.js';

package/src/schemas/config-1.0.16.schema.json

@@ -59,6 +59,7 @@
         "obsFilter": { "$ref": "#/definitions/stringOrStringArray" },
         "obsHighlight": { "$ref": "#/definitions/stringOrStringArray" },
         "obsSetSelection": { "$ref": "#/definitions/stringOrStringArray" },
+        "obsSetExpansion": { "$ref": "#/definitions/stringOrStringArray" },
         "obsSetHighlight": { "$ref": "#/definitions/stringOrStringArray" },
         "obsSetColor": { "$ref": "#/definitions/stringOrStringArray" },
         "featureFilter": { "$ref": "#/definitions/stringOrStringArray" },
@@ -80,7 +81,8 @@
         "additionalObsSets": { "$ref": "#/definitions/stringOrStringArray" },
         "moleculeHighlight": { "$ref": "#/definitions/stringOrStringArray" },
         "gatingFeatureSelectionX": { "$ref": "#/definitions/stringOrStringArray" },
-        "gatingFeatureSelectionY": { "$ref": "#/definitions/stringOrStringArray" }
+        "gatingFeatureSelectionY": { "$ref": "#/definitions/stringOrStringArray" },
+        "tooltipsVisible": { "type": "boolean" }
       }
     },
     "componentCoordinationScopesBy": {
@@ -845,6 +847,20 @@
             }
           }
         },
+        "obsSetExpansion": {
+          "type": "object",
+          "patternProperties": {
+            ".": {
+              "oneOf": [
+                {
+                  "type": "null",
+                  "description": "If null is provided and auto cell set initialization is enabled, cell set expansions will be automatically initialized."
+                },
+                { "type": "array" }
+              ]
+            }
+          }
+        },
         "obsSetHighlight": {
           "type": "object",
           "patternProperties": {
@@ -1051,6 +1067,10 @@
               ]
             }
           }
+        },
+        "tooltipsVisible": {
+          "type": "boolean",
+          "default": true
         }
       }
     },

package/src/shared-mui/components.js

@@ -1,12 +1,14 @@
 import React, { useRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
-import Popper from '@material-ui/core/Popper';
-import IconButton from '@material-ui/core/IconButton';
-import MenuList from '@material-ui/core/MenuList';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import Fade from '@material-ui/core/Fade';
-import { useVitessceContainer } from '../hooks';
+import {
+  makeStyles,
+  Paper,
+  Popper,
+  IconButton,
+  MenuList,
+  ClickAwayListener,
+  Fade,
+} from '@material-ui/core';
+import { useVitessceContainer } from '../hooks.js';
 
 const useStyles = makeStyles(() => ({
   paper: {

package/src/shared-mui/container.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core';
 
 export const useVitessceContainerStyles = makeStyles(theme => ({
   vitessceContainer: {

package/src/shared-mui/styles.js

@@ -1,5 +1,6 @@
-import { createTheme } from '@material-ui/core/styles';
-import { grey } from '@material-ui/core/colors';
+import { createTheme, colors } from '@material-ui/core';
+
+const { grey } = colors;
 
 const globalColors = {
   white: '#FFFFFF',
@@ -78,6 +79,7 @@ export const muiTheme = {
       secondaryForeground: '#D3D3D3',
       gridLayoutBackground: '#333333',
       cardBorder: 'rgba(0, 0, 0, 0.125)',
+      tooltipText: '#FFFFFF',
       ...globalColors,
     },
     ...sharedThemeOptions,
@@ -103,6 +105,7 @@ export const muiTheme = {
       secondaryForeground: '#222222',
       gridLayoutBackground: '#FFFFFF',
       cardBorder: 'rgba(241, 241, 241, 0.125)',
+      tooltipText: 'rgba(0, 0, 0, 0.87)',
       ...globalColors,
     },
     ...sharedThemeOptions,

package/src/shared-plot-options/CellColorEncodingOption.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
+import { TableCell, TableRow } from '@material-ui/core';
 import { capitalize } from '@vitessce/utils';
-import OptionSelect from './OptionSelect';
-import { useStyles } from './styles';
+import OptionSelect from './OptionSelect.js';
+import { useStyles } from './styles.js';
 
 export default function CellColorEncodingOption(props) {
   const {

package/src/shared-plot-options/OptionSelect.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import Select from '@material-ui/core/Select';
-import { useStyles } from './styles';
+import { Select } from '@material-ui/core';
+import { useStyles } from './styles.js';
 
 export default function OptionSelect(props) {
   const { classes: classesProp = {} } = props;

package/src/shared-plot-options/OptionsContainer.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import Box from '@material-ui/core/Box';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableContainer from '@material-ui/core/TableContainer';
-import { useStyles } from './styles';
+import { Box, Table, TableBody, TableContainer } from '@material-ui/core';
+import { useStyles } from './styles.js';
 
 export default function OptionsContainer(props) {
   const {

package/src/shared-plot-options/index.js

@@ -1,4 +1,4 @@
-export { default as CellColorEncodingOption } from './CellColorEncodingOption';
-export { default as OptionsContainer } from './OptionsContainer';
-export { default as OptionSelect } from './OptionSelect';
-export { useStyles as usePlotOptionsStyles } from './styles';
+export { default as CellColorEncodingOption } from './CellColorEncodingOption.js';
+export { default as OptionsContainer } from './OptionsContainer.js';
+export { default as OptionSelect } from './OptionSelect.js';
+export { useStyles as usePlotOptionsStyles } from './styles.js';

package/src/shared-plot-options/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core';
 
 export const useStyles = makeStyles(theme => ({
   box: {

package/src/state/hooks.js

@@ -1,8 +1,9 @@
+/* eslint-disable react-refresh/only-export-components */
 import { useRef, useCallback, useMemo } from 'react';
 import create from 'zustand';
 import createContext from 'zustand/context';
 import shallow from 'zustand/shallow';
-import isMatch from 'lodash/isMatch';
+import { isMatch } from 'lodash-es';
 import { CoordinationType } from '@vitessce/constants-internal';
 import { fromEntries, capitalize } from '@vitessce/utils';
 
@@ -31,7 +32,10 @@ export const useAuxiliaryStore = useAuxiliaryStoreLocal;
  * The useViewConfigStore hook is initialized via the zustand
  * create() function, which sets up both the state variables
  * and the reducer-type functions.
- * Reference: https://github.com/react-spring/zustand
+ * References:
+ * - https://github.com/react-spring/zustand
+ * - https://github.com/pmndrs/zustand/releases/tag/v3.6.0
+ * - https://github.com/pmndrs/zustand#using-subscribe-with-selector
  * @returns {function} The useStore hook.
  */
 export const createViewConfigStore = () => create(set => ({
@@ -609,7 +613,10 @@ export function useComponentViewInfo(uuid) {
  */
 export function useSetComponentViewInfo(uuid) {
   const setViewInfoRef = useRef(useViewInfoStore.getState().setComponentViewInfo);
-  const setComponentViewInfo = viewInfo => setViewInfoRef.current(uuid, viewInfo);
+  const setComponentViewInfo = useCallback(
+    viewInfo => setViewInfoRef.current(uuid, viewInfo),
+    [uuid],
+  );
   return setComponentViewInfo;
 }