@vitessce/vit-s 3.0.0 → 3.1.0

package/src/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';
 
@@ -38,17 +38,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: {
@@ -181,6 +183,30 @@ const useGridSizeStore = create(set => ({
   })),
 }));
 
+/**
+ * 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
@@ -434,6 +460,37 @@ 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).
@@ -448,22 +505,9 @@ 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]);
 }
 
 /**
@@ -471,6 +515,7 @@ export function useMatchingLoader(loaders, dataset, dataType, viewCoordinationVa
  * 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/src/view-config-utils.js

@@ -4,8 +4,16 @@ import { cloneDeep } from 'lodash-es';
 import { fromEntries, getNextScope } from '@vitessce/utils';
 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/src/view-config-utils.test.jsx

@@ -1,4 +1,5 @@
 /* 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/src/vitessce-grid-layout/VitessceGridLayout.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';

package/src/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';

package/dist-tsc/schemas/config-0.1.0.schema.json

@@ -1,84 +0,0 @@
-{
-    "$schema": "http://json-schema.org/draft-07/schema#",
-    "$id": "https://github.com/vitessce/vitessce/#dataset",
-    "title": "Vitessce data set",
-    "type": "object",
-    "definitions": {
-        "components": {
-            "type": "array",
-            "items": {
-                "type": "object",
-                "additionalProperties": false,
-                "required": ["component", "x", "y"],
-                "properties": {
-                    "component": { "type": "string" },
-                    "props": { "type": "object" },
-                    "x": { "type": "integer" },
-                    "y": { "type": "integer" },
-                    "w": { "type": "integer" },
-                    "h": { "type": "integer" }
-                }
-            }
-        },
-        "requestInit": {
-            "type": "object",
-            "additionalProperties": false,
-            "required": [],
-            "properties": {
-                "method": {
-                    "type": "string"
-                },
-                "headers": {
-                    "type": "object"
-                },
-                "body": {
-                    "type": "string"
-                },
-                "mode": {
-                    "type": "string"
-                },
-                "credentials": {
-                    "type": "string"
-                },
-                "cache": {
-                    "type": "string"
-                },
-                "redirect": {
-                    "type": "string"
-                },
-                "referrer": {
-                    "type": "string"
-                },
-                "integrity": {
-                    "type": "string"
-                }
-            }
-        }
-    },
-    "additionalProperties": false,
-    "required": ["version", "name", "layers"],
-    "properties": {
-        "name": { "type": "string" },
-        "public": { "type": "boolean" },
-        "description": { "type": "string" },
-        "layers": {
-            "type": "array",
-            "items": {
-                "type": "object",
-                "additionalProperties": false,
-                "required": ["name", "type", "fileType", "url"],
-                "properties": {
-                    "name": { "type": "string" },
-                    "type": { "type": "string" },
-                    "fileType": { "type": "string" },
-                    "url": { "type": "string" },
-                    "requestInit": { "$ref": "#/definitions/requestInit" }
-                }
-            }
-        },
-        "staticLayout": { "$ref": "#/definitions/components" },
-        "version": {
-            "type": "string", "enum": ["0.1.0"]
-        }
-    }
-}