@vitessce/vit-s 3.0.0 → 3.1.0

package/dist-tsc/state/hooks.js

@@ -3,7 +3,7 @@ import { useRef, useCallback, useMemo } from 'react';
 import create from 'zustand';
 import createContext from 'zustand/context';
 import shallow from 'zustand/shallow';
-import { isMatch } from 'lodash-es';
+import { isMatch, cloneDeep } from 'lodash-es';
 import { CoordinationType } from '@vitessce/constants-internal';
 import { fromEntries, capitalize } from '@vitessce/utils';
 // Reference: https://github.com/pmndrs/zustand#react-context
@@ -25,17 +25,19 @@ export const useAuxiliaryStore = useAuxiliaryStoreLocal;
  * - https://github.com/pmndrs/zustand#using-subscribe-with-selector
  * @returns {function} The useStore hook.
  */
-export const createViewConfigStore = () => create(set => ({
+export const createViewConfigStore = (initialLoaders, initialConfig) => create(set => ({
     // State:
     // The viewConfig is an object which must conform to the schema
     // found in src/schemas/config.schema.json.
-    viewConfig: null,
+    viewConfig: initialConfig,
+    // Store the initial config so that its values can be used for resetting.
+    initialViewConfig: cloneDeep(initialConfig),
     // The loaders object is a mapping from dataset ID to
     // data type to loader object instance.
-    loaders: null,
+    loaders: initialLoaders,
     // Reducer functions which update the state
     // (although technically also part of state):
-    setViewConfig: viewConfig => set({ viewConfig }),
+    setViewConfig: viewConfig => set({ viewConfig, initialViewConfig: viewConfig }),
     setLoaders: loaders => set({ loaders }),
     setCoordinationValue: ({ parameter, scope, value }) => set(state => ({
         viewConfig: {
@@ -157,6 +159,29 @@ const useGridSizeStore = create(set => ({
         resizeCount: state.resizeCount + 1,
     })),
 }));
+/**
+ * This hook uses the same logic as for the `values` part of
+ * the useCoordination hook, with the difference that it
+ * gets its values from the _initial_ view config rather
+ * than the current view config.
+ * @param {string[]} parameters Array of coordination types.
+ * @param {object} coordinationScopes Mapping of coordination types
+ * to scope names.
+ * @returns {object} Object containing all coordination values.
+ */
+export function useInitialCoordination(parameters, coordinationScopes) {
+    const values = useViewConfigStore((state) => {
+        const { coordinationSpace } = state.initialViewConfig;
+        return fromEntries(parameters.map((parameter) => {
+            if (coordinationSpace && coordinationSpace[parameter]) {
+                const value = coordinationSpace[parameter][coordinationScopes[parameter]];
+                return [parameter, value];
+            }
+            return [parameter, undefined];
+        }));
+    }, shallow);
+    return values;
+}
 /**
  * The useCoordination hook returns both the
  * values and setter functions for the coordination objects
@@ -388,6 +413,35 @@ export function useAuxiliaryCoordination(parameters, coordinationScopes) {
 export function useLoaders() {
     return useViewConfigStore(state => state.loaders);
 }
+/**
+ * Find a specific loader instance for a particular dataset, data type, and view
+ * coordination values (mapping from coordination types to coordination values).
+ * Uses lodash/isMatch to perform matching against the file definition's
+ * coordination value mapping.
+ * @param {object} loaders The value returned by useLoaders.
+ * @param {string} dataset The dataset UID.
+ * @param {string} dataType The data type for the matching file.
+ * @param {object} viewCoordinationValues Current coordination values
+ * from the view. Match these against a subset of file definition coordination
+ * values.
+ * @returns The matching loader instance or `null`.
+ */
+export function getMatchingLoader(loaders, dataset, dataType, viewCoordinationValues) {
+    if (!loaders[dataset]) {
+        return null;
+    }
+    const loaderInternMap = loaders[dataset].loaders[dataType];
+    if (!loaderInternMap) {
+        return null;
+    }
+    const loaderKeys = Array.from(loaderInternMap.keys());
+    const matchingKey = loaderKeys
+        .find(fileCoordinationValues => isMatch(fileCoordinationValues, viewCoordinationValues));
+    if (!matchingKey) {
+        return null;
+    }
+    return loaderInternMap.get(matchingKey);
+}
 /**
  * Find a specific loader instance for a particular dataset, data type, and view
  * coordination values (mapping from coordination types to coordination values).
@@ -402,28 +456,14 @@ export function useLoaders() {
  * @returns The matching loader instance or `null`.
  */
 export function useMatchingLoader(loaders, dataset, dataType, viewCoordinationValues) {
-    return useMemo(() => {
-        if (!loaders[dataset]) {
-            return null;
-        }
-        const loaderInternMap = loaders[dataset].loaders[dataType];
-        if (!loaderInternMap) {
-            return null;
-        }
-        const loaderKeys = Array.from(loaderInternMap.keys());
-        const matchingKey = loaderKeys
-            .find(fileCoordinationValues => isMatch(fileCoordinationValues, viewCoordinationValues));
-        if (!matchingKey) {
-            return null;
-        }
-        return loaderInternMap.get(matchingKey);
-    }, [loaders, dataset, dataType, viewCoordinationValues]);
+    return useMemo(() => getMatchingLoader(loaders, dataset, dataType, viewCoordinationValues), [loaders, dataset, dataType, viewCoordinationValues]);
 }
 /**
  * Find a specific loader instance for a particular dataset, data type, and view
  * coordination values (mapping from coordination types to coordination values).
  * Uses lodash/isMatch to perform matching against the file definition's
  * coordination value mapping.
+ * TODO: can this function be removed?
  * @param {object} loaders The value returned by useLoaders.
  * @param {string} dataset The dataset UID.
  * @param {string} dataType The data type for the matching file.

package/dist-tsc/view-config-utils.d.ts

@@ -1,3 +1,4 @@
+export function logConfig(config: any, name: any): void;
 /**
  * Get a list of all unique scope names for a
  * particular coordination type, which exist in

package/dist-tsc/view-config-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view-config-utils.d.ts","sourceRoot":"","sources":["../src/view-config-utils.js"],"names":[],"mappings":"AAQA;;;;;;;;GAQG;AACH,6DALW,MAAM,oBACN,MAAM,GAEJ,MAAM,EAAE,CAMpB;AAyND;;;;;;;;;;;;;;GAcG;AACH,mCANW,MAAM,kBACN,qBAAqB,qBACrB,wBAAwB,aACxB,gBAAgB;;;EAY1B"}
+{"version":3,"file":"view-config-utils.d.ts","sourceRoot":"","sources":["../src/view-config-utils.js"],"names":[],"mappings":"AASA,wDAKC;AAED;;;;;;;;GAQG;AACH,6DALW,MAAM,oBACN,MAAM,GAEJ,MAAM,EAAE,CAMpB;AAyND;;;;;;;;;;;;;;GAcG;AACH,mCANW,MAAM,kBACN,qBAAqB,qBACrB,wBAAwB,aACxB,gBAAgB;;;EAY1B"}

package/dist-tsc/view-config-utils.js

@@ -2,7 +2,13 @@
 /* eslint-disable camelcase */
 import { cloneDeep } from 'lodash-es';
 import { fromEntries, getNextScope } from '@vitessce/utils';
-import { AUTO_INDEPENDENT_COORDINATION_TYPES, } from '@vitessce/constants-internal';
+import { AUTO_INDEPENDENT_COORDINATION_TYPES, META_VERSION, } from '@vitessce/constants-internal';
+export function logConfig(config, name) {
+    console.groupCollapsed(`🚄 VitS (${META_VERSION.version}) ${name}`);
+    console.info(`data:,${JSON.stringify(config)}`);
+    console.info(JSON.stringify(config, null, 2));
+    console.groupEnd();
+}
 /**
  * Get a list of all unique scope names for a
  * particular coordination type, which exist in

package/dist-tsc/view-config-utils.test.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable camelcase */
+import { describe, it, expect } from 'vitest';
 import React from 'react';
 import { z } from '@vitessce/schemas';
 import { PluginViewType, PluginCoordinationType } from '@vitessce/plugins';

package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.test.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, afterEach } from 'vitest';
 import '@testing-library/jest-dom';
 import { cleanup, render, screen } from '@testing-library/react';
-import { afterEach } from 'vitest';
 import React from 'react';
 import { PluginViewType } from '@vitessce/plugins';
 import { VitessceGridLayout } from './VitessceGridLayout.js';

package/dist-tsc/vitessce-grid-layout/layout-utils.test.js

@@ -1,3 +1,4 @@
+import { describe, it, expect } from 'vitest';
 import { makeGridLayout, getMaxRows, resolveLayout, } from './layout-utils.js';
 describe('layout-utils.js', () => {
     describe('makeGridLayout', () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -18,6 +18,7 @@
   "dependencies": {
     "@material-ui/core": "~4.12.3",
     "@material-ui/icons": "~4.11.2",
+    "@tanstack/react-query": "^4.29.12",
     "clsx": "^1.1.1",
     "d3-array": "^2.4.0",
     "fast-deep-equal": "^3.1.3",
@@ -27,24 +28,24 @@
     "react-grid-layout-with-lodash": "^1.3.5",
     "uuid": "^9.0.0",
     "zustand": "^3.5.10",
-    "@vitessce/constants-internal": "3.0.0",
-    "@vitessce/plugins": "3.0.0",
-    "@vitessce/schemas": "3.0.0",
-    "@vitessce/utils": "3.0.0"
+    "@vitessce/constants-internal": "3.1.0",
+    "@vitessce/plugins": "3.1.0",
+    "@vitessce/schemas": "3.1.0",
+    "@vitessce/utils": "3.1.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
     "react": "^18.0.0",
     "vite": "^4.3.0",
-    "vitest": "^0.23.4",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0"
+    "vitest": "^0.32.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
     "bundle": "pnpm exec vite build -c ../../scripts/vite.config.js",
-    "test": "pnpm exec vitest --run -r ../../ --dir ."
+    "test": "pnpm exec vitest --run"
   },
   "module": "dist/index.js",
   "exports": {

package/src/VitS.js

@@ -1,11 +1,13 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useCallback } from 'react';
 import {
   ThemeProvider,
   StylesProvider,
-  createGenerateClassName,
-} from '@material-ui/core/es/styles/index.js';
+} from '@material-ui/core';
+import {
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query';
 import { isEqual } from 'lodash-es';
-import { META_VERSION } from '@vitessce/constants-internal';
 import { buildConfigSchema, latestConfigSchema } from '@vitessce/schemas';
 import { muiTheme } from './shared-mui/styles.js';
 import {
@@ -20,14 +22,11 @@ import { Warning } from './Warning.js';
 import CallbackPublisher from './CallbackPublisher.js';
 import {
   initialize,
+  logConfig,
 } from './view-config-utils.js';
+import { createLoaders } from './vitessce-grid-utils.js';
+import { createGenerateClassName } from './mui-utils.js';
 
-function logConfig(config, name) {
-  console.groupCollapsed(`🚄 Vitessce (${META_VERSION.version}) ${name}`);
-  console.info(`data:,${JSON.stringify(config)}`);
-  console.info(JSON.stringify(config, null, 2));
-  console.groupEnd();
-}
 
 /**
  * The Vitessce component.
@@ -44,10 +43,14 @@ function logConfig(config, name) {
  * updates. Optional.
  * @param {function} props.onLoaderChange A callback for loader
  * updates. Optional.
+ * @param {boolean} props.validateConfig Whether to validate or not. Only to be
+ * set to false in controlled component situations, where bypassing validation
+ * is required for performance, and the parent knows the config
+ * is already valid (e.g., it originated from onConfigChange). By default, true.
  * @param {boolean} props.validateOnConfigChange Whether to validate
  * against the view config schema when publishing changes. Use for debugging
  * purposes, as this may have a performance impact. By default, false.
- * @param {undefined|string} props.uid A unique identifier for this Vitessce instance,
+ * @param {null|string} props.uid A unique identifier for this Vitessce instance,
  * for the purpose of avoiding CSS autogenerated class name conflicts. Must be valid as part
  * of a CSS class name string.
  * @param {array} props.viewTypes Plugin view types.
@@ -66,9 +69,10 @@ export function VitS(props) {
     onWarn,
     onConfigChange,
     onLoaderChange,
+    validateConfig = true,
     validateOnConfigChange = false,
     isBounded = false,
-    uid,
+    uid = null,
     viewTypes: viewTypesProp,
     fileTypes: fileTypesProp,
     jointFileTypes: jointFileTypesProp,
@@ -87,16 +91,15 @@ export function VitS(props) {
     [coordinationTypesProp],
   );
 
-  const generateClassName = useMemo(() => createGenerateClassName({
-    disableGlobal: false, // Class names need to be deterministic
-    // Avoid conflicts with portal-ui MUI class names,
-    // and allow setting a UID.
-    productionPrefix: (uid ? `vit${uid}` : 'vit'),
-  }), [uid]);
+  const generateClassName = useMemo(() => createGenerateClassName(uid), [uid]);
 
-  const configUid = config?.uid;
   const configVersion = config?.version;
 
+  // If config.uid exists, then use it for hook dependencies to detect changes
+  // (controlled component case). If not, then use the config object itself
+  // and assume the un-controlled component case.
+  const configKey = config?.uid || config;
+
   const pluginSpecificConfigSchema = useMemo(() => buildConfigSchema(
     fileTypes,
     jointFileTypes,
@@ -114,10 +117,13 @@ export function VitS(props) {
       return [warning, false];
     }
     logConfig(config, 'input view config');
+    if (!validateConfig) {
+      return [config, true];
+    }
     const result = latestConfigSchema.safeParse(config);
     if (result.success) {
       const upgradedConfig = result.data;
-      logConfig(upgradedConfig, 'upgraded view config');
+      logConfig(upgradedConfig, 'parsed view config');
       // Perform second round of parsing against plugin-specific config schema.
       const pluginSpecificResult = pluginSpecificConfigSchema.safeParse(upgradedConfig);
       // Initialize the view config according to the initStrategy.
@@ -155,7 +161,17 @@ export function VitS(props) {
       unformatted: result.error.message,
     }, result.success];
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [configUid, configVersion, pluginSpecificConfigSchema, warning]);
+  }, [configKey, configVersion, pluginSpecificConfigSchema, warning]);
+
+  const queryClient = useMemo(() => new QueryClient({
+    // Reference: https://tanstack.com/query/latest/docs/react/guides/window-focus-refetching
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        retry: 2,
+      },
+    },
+  }), [configKey]);
 
   // Emit the upgraded/initialized view config
   // to onConfigChange if necessary.
@@ -164,32 +180,52 @@ export function VitS(props) {
       onConfigChange(configOrWarning);
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [success, configUid, configOrWarning, onConfigChange]);
+  }, [success, configKey, configOrWarning, onConfigChange]);
+
+  // Initialize the view config and loaders in the global state.
+  const createViewConfigStoreClosure = useCallback(() => {
+    if (success) {
+      const loaders = createLoaders(
+        configOrWarning.datasets,
+        configOrWarning.description,
+        fileTypes,
+        coordinationTypes,
+      );
+      return createViewConfigStore(loaders, configOrWarning);
+    }
+    // No config found, so clear the loaders.
+    return createViewConfigStore(null, null);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [success, configKey]);
 
   return success ? (
     <StylesProvider generateClassName={generateClassName}>
       <ThemeProvider theme={muiTheme[theme]}>
-        <ViewConfigProvider createStore={createViewConfigStore}>
-          <AuxiliaryProvider createStore={createAuxiliaryStore}>
-            <VitessceGrid
-              viewTypes={viewTypes}
-              fileTypes={fileTypes}
-              coordinationTypes={coordinationTypes}
-              config={configOrWarning}
-              rowHeight={rowHeight}
-              height={height}
-              theme={theme}
-              isBounded={isBounded}
-            />
-            <CallbackPublisher
-              onWarn={onWarn}
-              onConfigChange={onConfigChange}
-              onLoaderChange={onLoaderChange}
-              validateOnConfigChange={validateOnConfigChange}
-              pluginSpecificConfigSchema={pluginSpecificConfigSchema}
-            />
-          </AuxiliaryProvider>
-        </ViewConfigProvider>
+        <QueryClientProvider client={queryClient}>
+          <ViewConfigProvider key={configKey} createStore={createViewConfigStoreClosure}>
+            <AuxiliaryProvider createStore={createAuxiliaryStore}>
+              <VitessceGrid
+                success={success}
+                configKey={configKey}
+                viewTypes={viewTypes}
+                fileTypes={fileTypes}
+                coordinationTypes={coordinationTypes}
+                config={configOrWarning}
+                rowHeight={rowHeight}
+                height={height}
+                theme={theme}
+                isBounded={isBounded}
+              />
+              <CallbackPublisher
+                onWarn={onWarn}
+                onConfigChange={onConfigChange}
+                onLoaderChange={onLoaderChange}
+                validateOnConfigChange={validateOnConfigChange}
+                pluginSpecificConfigSchema={pluginSpecificConfigSchema}
+              />
+            </AuxiliaryProvider>
+          </ViewConfigProvider>
+        </QueryClientProvider>
       </ThemeProvider>
     </StylesProvider>
   ) : (

package/src/VitessceGrid.js

@@ -38,6 +38,8 @@ const margin = 5;
  */
 export default function VitessceGrid(props) {
   const {
+    success,
+    configKey,
     rowHeight: initialRowHeight,
     config,
     theme,
@@ -75,28 +77,32 @@ export default function VitessceGrid(props) {
   }, [changeLayout, componentWidth]);
 
   // Update the view config and loaders in the global state.
+  // This effect is needed for the controlled component case in which
+  // the store has already been initialized with a view config,
+  // and we want to replace it with a new view config.
   useEffect(() => {
-    if (config) {
-      setViewConfig(config);
-      const loaders = createLoaders(
+    let newLoaders = null;
+    let newConfig = null;
+    if (success) {
+      newLoaders = createLoaders(
         config.datasets,
         config.description,
         fileTypes,
         coordinationTypes,
       );
-      setLoaders(loaders);
-    } else {
-      // No config found, so clear the loaders.
-      setLoaders({});
+      newConfig = config;
     }
-  }, [config, setViewConfig, setLoaders, fileTypes, coordinationTypes]);
+    setViewConfig(newConfig);
+    setLoaders(newLoaders);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [success, configKey]);
 
   return (
     <div
       ref={containerRef}
       className={clsx(VITESSCE_CONTAINER, classes.vitessceContainer)}
     >
-      {layout && (
+      {layout ? (
         <VitessceGridLayout
           layout={layout}
           height={height}
@@ -112,7 +118,7 @@ export default function VitessceGrid(props) {
           onResize={onResize}
           onResizeStop={onResize}
         />
-      )}
+      ) : null}
     </div>
   );
 }

package/src/VitessceGrid.test.jsx

@@ -1,6 +1,6 @@
+import { describe, it, expect, afterEach } from 'vitest';
 import '@testing-library/jest-dom';
 import { cleanup, render, screen } from '@testing-library/react';
-import { afterEach } from 'vitest';
 
 import React from 'react';
 import { PluginViewType } from '@vitessce/plugins';
@@ -33,6 +33,10 @@ describe('VitessceGrid.js', () => {
         ],
       };
 
+      function createViewConfigStoreClosure() {
+        return createViewConfigStore(null, config);
+      }
+
       function FakeComponent() {
         return <p>FakeComponent!</p>;
       }
@@ -40,9 +44,11 @@ describe('VitessceGrid.js', () => {
       const fileTypes = [];
       const coordinationTypes = [];
       render(
-        <ViewConfigProvider createStore={createViewConfigStore}>
+        <ViewConfigProvider createStore={createViewConfigStoreClosure}>
           <AuxiliaryProvider createStore={createAuxiliaryStore}>
             <VitessceGrid
+              success
+              configKey={null}
               config={config}
               viewTypes={viewTypes}
               fileTypes={fileTypes}

package/src/Warning.js

@@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({
   row: {
     flexGrow: '1',
   },
-  card: {
+  warningCard: {
     border: `1px solid ${theme.palette.cardBorder}`,
     flex: '1 1 auto',
     minHeight: '1px',
@@ -50,7 +50,7 @@ export function Warning(props) {
     <div className={VITESSCE_CONTAINER}>
       <div className={clsx(classes.warningLayout, classes.containerFluid)}>
         <div className={classes.row}>
-          <div className={classes.card}>
+          <div className={classes.warningCard}>
             <h1>{title}</h1>
             {preformatted ? (<pre>{preformatted}</pre>) : null}
             <p>{unformatted}</p>

package/src/data/LoaderResult.js

@@ -1,5 +1,10 @@
 
 export default class LoaderResult {
+  /**
+   * @param {*} data
+   * @param {object[]|string|null} url Single URL or array of { url, name } objects.
+   * @param {object} coordinationValues
+   */
   constructor(data, url, coordinationValues = null) {
     this.data = data;
     this.url = url;