@vitessce/vit-s 2.0.3 → 3.0.1

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

@@ -0,0 +1,141 @@
+import { useState, useEffect, useRef, } from 'react';
+import { InternMap } from 'internmap';
+import { isEqual, pick } from 'lodash-es';
+import { fromEntries } from '@vitessce/utils';
+import { DATA_TYPE_COORDINATION_VALUE_USAGE } from '@vitessce/constants-internal';
+import { getSourceAndLoaderFromFileType, getDataTypeFromFileType } from './data/loader-registry.js';
+/**
+ * Return the bottom coordinate of the layout.
+ * https://github.com/STRML/react-grid-layout/blob/20dac73f91274526034c00968b5bedb9c2ed36b9/lib/utils.js#L82
+ * @param  {array} layout react-grid-layout layout array.
+ * @returns {number} Bottom coordinate.
+ */
+function getNumRows(layout) {
+    let max = 0;
+    let bottomY;
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0, len = layout.length; i < len; i++) {
+        bottomY = layout[i].y + layout[i].h;
+        if (bottomY > max)
+            max = bottomY;
+    }
+    return max;
+}
+/**
+ * Compute the row height based on the container height, number of rows,
+ * and margin/padding. Basically the reverse of the react-grid-layout's
+ * `.containerHeight()` function.
+ * https://github.com/STRML/react-grid-layout/blob/83251e5e682abfa3252ff89d4bacf47fdc1f4270/lib/ReactGridLayout.jsx#L223
+ * @param {number} containerHeight The height of the .vitessce-container element.
+ * @param {number} numRows The number of rows in the layout.
+ * @param {number} margin The margin value that will be passed to VitessceGrid.
+ * @param {number} padding The padding value that will be passed to VitessceGrid.
+ * @returns {number} The new row height value.
+ */
+function getRowHeight(containerHeight, numRows, margin, padding) {
+    const effectiveContainerHeight = containerHeight - 2 * padding - (numRows - 1) * margin;
+    return effectiveContainerHeight / numRows;
+}
+export function useRowHeight(config, initialRowHeight, height, margin, padding) {
+    const [containerHeight, setContainerHeight] = useState(height);
+    const [rowHeight, setRowHeight] = useState(initialRowHeight);
+    const containerRef = useRef();
+    // Detect when the `config` or `containerHeight` variables
+    // have changed, and update `rowHeight` in response.
+    useEffect(() => {
+        const numRows = getNumRows(config.layout);
+        const newRowHeight = getRowHeight(containerHeight, numRows, margin, padding);
+        setRowHeight(newRowHeight);
+    }, [containerHeight, config, margin, padding]);
+    // Update the `containerHeight` state when the `height` prop has changed.
+    useEffect(() => {
+        if (height !== null && height !== undefined) {
+            setContainerHeight(height);
+        }
+    }, [height]);
+    // If no height prop has been provided, set the `containerHeight`
+    // using height of the `.vitessce-container` element.
+    // Check the container element height whenever the window has been
+    // resized, as it may change if `.vitessce-container` should be
+    // sized relative to its parent (and by extension, potentially the window).
+    useEffect(() => {
+        if (height !== null && height !== undefined) {
+            // eslint will complain if the return value is inconsistent,
+            // so return a no-op function.
+            return () => { };
+        }
+        function onWindowResize() {
+            if (!containerRef.current)
+                return;
+            const containerRect = containerRef.current.getBoundingClientRect();
+            setContainerHeight(containerRect.height);
+        }
+        window.addEventListener('resize', onWindowResize);
+        onWindowResize();
+        return () => {
+            window.removeEventListener('resize', onWindowResize);
+        };
+    }, [containerRef, height]);
+    return [rowHeight, containerRef];
+}
+function withDefaults(coordinationValues, dataType, fileType, datasetUid, defaultCoordinationValues) {
+    const defaultKeys = DATA_TYPE_COORDINATION_VALUE_USAGE[dataType]
+        .filter(k => (Object.keys(defaultCoordinationValues).includes(k)
+        && defaultCoordinationValues[k]
+        && !Object.keys(coordinationValues).includes(k)));
+    const defaultValues = pick(defaultCoordinationValues, defaultKeys);
+    const coordinationValuesWithDefaults = {
+        ...defaultValues,
+        // The user-provided values should take precedence.
+        ...coordinationValues,
+    };
+    if (!isEqual(coordinationValues, coordinationValuesWithDefaults)) {
+        // eslint-disable-next-line max-len
+        console.warn(`Using coordination value defaults for file type ${fileType} in dataset ${datasetUid}\nBefore: ${JSON.stringify(coordinationValues)}\nAfter: ${JSON.stringify(coordinationValuesWithDefaults)}`);
+    }
+    return coordinationValuesWithDefaults;
+}
+/**
+ * Create a mapping from dataset ID to loader objects by data type.
+ * @param {object[]} datasets The datasets array from the view config.
+ * @param {string} configDescription The top-level description in the
+ * @param {PluginFileType[]} fileTypes
+ * @param {PluginCoordinationType[]} coordinationTypes
+ * view config.
+ * @returns {object} Mapping from dataset ID to data type to loader
+ * instance.
+ */
+export function createLoaders(datasets, configDescription, fileTypes, coordinationTypes) {
+    const result = {};
+    const dataSources = {};
+    const defaultCoordinationValues = fromEntries(coordinationTypes.map(ct => ([ct.name, ct.defaultValue])));
+    datasets.forEach((dataset) => {
+        const datasetLoaders = {
+            name: dataset.name,
+            description: dataset.description || configDescription,
+            loaders: {},
+        };
+        dataset.files.forEach((file) => {
+            const { url, options, requestInit, fileType, coordinationValues = {}, } = file;
+            const dataType = getDataTypeFromFileType(fileType, fileTypes);
+            const coordinationValuesWithDefaults = withDefaults(coordinationValues, dataType, fileType, dataset.uid, defaultCoordinationValues);
+            const [DataSourceClass, LoaderClass] = getSourceAndLoaderFromFileType(fileType, fileTypes);
+            // Create _one_ DataSourceClass instance per URL. Derived loaders share this object.
+            const fileId = url || JSON.stringify(options);
+            if (!(fileId in dataSources)) {
+                dataSources[fileId] = new DataSourceClass({ url, requestInit });
+            }
+            const loader = new LoaderClass(dataSources[fileId], file);
+            if (datasetLoaders.loaders[dataType]) {
+                datasetLoaders.loaders[dataType].set(coordinationValuesWithDefaults, loader);
+            }
+            else {
+                datasetLoaders.loaders[dataType] = new InternMap([
+                    [coordinationValuesWithDefaults, loader],
+                ], JSON.stringify);
+            }
+        });
+        result[dataset.uid] = datasetLoaders;
+    });
+    return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "2.0.3",
+  "version": "3.0.1",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,36 +8,50 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
-  "main": "dist/index.mjs",
+  "type": "module",
+  "main": "dist/index.js",
   "files": [
+    "src",
     "dist",
-    "src"
+    "dist-tsc"
   ],
   "dependencies": {
     "@material-ui/core": "~4.12.3",
     "@material-ui/icons": "~4.11.2",
-    "ajv": "^6.10.0",
+    "@tanstack/react-query": "^4.29.12",
     "clsx": "^1.1.1",
+    "d3-array": "^2.4.0",
     "fast-deep-equal": "^3.1.3",
     "internmap": "^2.0.3",
     "jss-plugin-global": "^10.9.2",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "react-grid-layout-with-lodash": "^1.3.5",
-    "uuid": "^3.3.2",
+    "uuid": "^9.0.0",
     "zustand": "^3.5.10",
-    "@vitessce/constants-internal": "2.0.3",
-    "@vitessce/utils": "2.0.3"
+    "@vitessce/constants-internal": "3.0.1",
+    "@vitessce/plugins": "3.0.1",
+    "@vitessce/schemas": "3.0.1",
+    "@vitessce/utils": "3.0.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
     "react": "^18.0.0",
-    "vite": "^3.0.0",
-    "vitest": "^0.23.4"
+    "vite": "^4.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": {
+    ".": {
+      "types": "./dist-tsc/index.d.ts",
+      "import": "./dist/index.js"
+    }
   }
 }

package/src/CallbackPublisher.js

@@ -1,17 +1,12 @@
 import { useEffect } from 'react';
-import { SCHEMA_HANDLERS, LATEST_VERSION } from './view-config-versions';
-import { useViewConfigStoreApi, useLoaders, useWarning } from './state/hooks';
+import { useViewConfigStoreApi, useLoaders, useWarning } from './state/hooks.js';
 
-function validateViewConfig(viewConfig) {
+
+function validateViewConfig(viewConfig, pluginSpecificConfigSchema) {
   // Need the try-catch here since Zustand will actually
   // just catch and ignore errors in its subscription callbacks.
   try {
-    const validate = SCHEMA_HANDLERS[LATEST_VERSION][0];
-    const valid = validate(viewConfig);
-    if (!valid) {
-      const failureReason = JSON.stringify(validate.errors, null, 2);
-      throw new Error(`Config validation failed: ${failureReason}`);
-    }
+    pluginSpecificConfigSchema.parse(viewConfig);
   } catch (e) {
     console.error(e);
   }
@@ -36,6 +31,7 @@ export default function CallbackPublisher(props) {
     onConfigChange,
     onLoaderChange,
     validateOnConfigChange,
+    pluginSpecificConfigSchema,
   } = props;
 
   const warning = useWarning();
@@ -51,7 +47,7 @@ export default function CallbackPublisher(props) {
     // The function to run on each publish.
     (viewConfig) => {
       if (validateOnConfigChange && viewConfig) {
-        validateViewConfig(viewConfig);
+        validateViewConfig(viewConfig, pluginSpecificConfigSchema);
       }
       if (onConfigChange && viewConfig) {
         onConfigChange(viewConfig);
@@ -60,7 +56,7 @@ export default function CallbackPublisher(props) {
     // The function to specify which part of the store
     // we want to subscribe to.
     state => state.viewConfig,
-  ), [onConfigChange, validateOnConfigChange, viewConfigStoreApi]);
+  ), [onConfigChange, validateOnConfigChange, viewConfigStoreApi, pluginSpecificConfigSchema]);
 
   // Emit updates to the warning message.
   useEffect(() => {

package/src/LoadingIndicator.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles, CircularProgress } from '@material-ui/core';
 
 const useStyles = makeStyles(() => ({
   loadingIndicatorBackdrop: {

package/src/TitleInfo.js

@@ -1,18 +1,18 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
-import MenuItem from '@material-ui/core/MenuItem';
-import IconButton from '@material-ui/core/IconButton';
-import Link from '@material-ui/core/Link';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
-import SettingsIcon from '@material-ui/icons/Settings';
-import CloseIcon from '@material-ui/icons/Close';
+import { makeStyles, MenuItem, IconButton, Link } from '@material-ui/core';
+import {
+  CloudDownload as CloudDownloadIcon,
+  ArrowDropDown as ArrowDropDownIcon,
+  ArrowDropUp as ArrowDropUpIcon,
+  Settings as SettingsIcon,
+  Close as CloseIcon,
+} from '@material-ui/icons';
 
-import { TOOLTIP_ANCESTOR } from './classNames';
-import LoadingIndicator from './LoadingIndicator';
-import { PopperMenu } from './shared-mui/components';
+import { TOOLTIP_ANCESTOR } from './classNames.js';
+import LoadingIndicator from './LoadingIndicator.js';
+import { PopperMenu } from './shared-mui/components.js';
+import { useTitleStyles } from './title-styles.js';
 
 const useStyles = makeStyles(theme => ({
   iconButton: {
@@ -117,79 +117,6 @@ function ClosePaneButton(props) {
   );
 }
 
-export const useTitleStyles = makeStyles(theme => ({
-  title: {
-    color: theme.palette.primaryForeground,
-    overflowX: 'hidden',
-    display: 'flex',
-    flexDirection: 'row',
-    flexShrink: '0',
-  },
-  titleLeft: {
-    flexShrink: '1',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  },
-  titleInfo: {
-    width: '100%',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    fontSize: '80% !important',
-    opacity: '.8',
-    padding: '0 4px',
-    justifyContent: 'center',
-    lineHeight: '25px !important',
-    flexShrink: '1',
-    textAlign: 'right !important',
-  },
-  titleButtons: {
-    display: 'flex',
-    flexDirection: 'row',
-    flexGrow: '1',
-    flexShrink: '0',
-    justifyContent: 'right',
-    '& div': {
-      display: 'inline-block',
-    },
-  },
-  card: {
-    border: `1px solid ${theme.palette.cardBorder}`,
-    flex: '1 1 auto',
-    minHeight: '1px',
-    padding: '12px',
-    marginTop: '8px',
-    marginBottom: '8px',
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    minWidth: '0',
-    wordWrap: 'break-word',
-    backgroundClip: 'border-box',
-    borderRadius: '4px',
-  },
-  noScrollCard: {
-    backgroundColor: theme.palette.secondaryBackground,
-    color: theme.palette.secondaryForeground,
-  },
-  scrollCard: {
-    backgroundColor: theme.palette.primaryBackground,
-    color: theme.palette.primaryForeground,
-    '& a': {
-      color: theme.palette.primaryForegroundActive,
-    },
-    overflowY: 'auto',
-  },
-  spatialCard: {
-    backgroundColor: theme.palette.black,
-    color: theme.palette.white,
-    '& a': {
-      color: theme.palette.white,
-    },
-  },
-}));
-
-
 export function TitleInfo(props) {
   const {
     title, info, children, isScroll, isSpatial, removeGridComponent, urls,