@vitessce/vit-s 2.0.3-beta.0 → 3.0.0

package/{dist → dist-tsc}/vitessce-grid-utils.js

@@ -1,10 +1,9 @@
 import { useState, useEffect, useRef, } from 'react';
 import { InternMap } from 'internmap';
-import isEqual from 'lodash/isEqual';
-import pick from 'lodash/pick';
-import { DEFAULT_COORDINATION_VALUES, DATA_TYPE_COORDINATION_VALUE_USAGE } from '@vitessce/constants-internal';
-import { getSourceAndLoaderFromFileType } from './data/loader-registry';
-import { getFileTypeDataTypeMapping } from './plugins';
+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
@@ -79,12 +78,12 @@ export function useRowHeight(config, initialRowHeight, height, margin, padding)
     }, [containerRef, height]);
     return [rowHeight, containerRef];
 }
-function withDefaults(coordinationValues, dataType, fileType, datasetUid) {
+function withDefaults(coordinationValues, dataType, fileType, datasetUid, defaultCoordinationValues) {
     const defaultKeys = DATA_TYPE_COORDINATION_VALUE_USAGE[dataType]
-        .filter(k => (Object.keys(DEFAULT_COORDINATION_VALUES).includes(k)
-        && DEFAULT_COORDINATION_VALUES[k]
+        .filter(k => (Object.keys(defaultCoordinationValues).includes(k)
+        && defaultCoordinationValues[k]
         && !Object.keys(coordinationValues).includes(k)));
-    const defaultValues = pick(DEFAULT_COORDINATION_VALUES, defaultKeys);
+    const defaultValues = pick(defaultCoordinationValues, defaultKeys);
     const coordinationValuesWithDefaults = {
         ...defaultValues,
         // The user-provided values should take precedence.
@@ -100,14 +99,16 @@ function withDefaults(coordinationValues, dataType, fileType, datasetUid) {
  * 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) {
+export function createLoaders(datasets, configDescription, fileTypes, coordinationTypes) {
     const result = {};
     const dataSources = {};
-    const fileTypeDataTypeMapping = getFileTypeDataTypeMapping();
+    const defaultCoordinationValues = fromEntries(coordinationTypes.map(ct => ([ct.name, ct.defaultValue])));
     datasets.forEach((dataset) => {
         const datasetLoaders = {
             name: dataset.name,
@@ -116,9 +117,9 @@ export function createLoaders(datasets, configDescription) {
         };
         dataset.files.forEach((file) => {
             const { url, options, requestInit, fileType, coordinationValues = {}, } = file;
-            const dataType = fileTypeDataTypeMapping[fileType];
-            const coordinationValuesWithDefaults = withDefaults(coordinationValues, dataType, fileType, dataset.uid);
-            const [DataSourceClass, LoaderClass] = getSourceAndLoaderFromFileType(fileType);
+            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)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "2.0.3-beta.0",
+  "version": "3.0.0",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,36 +8,49 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
+  "type": "module",
   "main": "dist/index.js",
   "files": [
-    "dist"
+    "src",
+    "dist",
+    "dist-tsc"
   ],
   "dependencies": {
     "@material-ui/core": "~4.12.3",
     "@material-ui/icons": "~4.11.2",
-    "ajv": "^6.10.0",
     "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-beta.0",
-    "@vitessce/utils": "2.0.3-beta.0"
+    "@vitessce/constants-internal": "3.0.0",
+    "@vitessce/plugins": "3.0.0",
+    "@vitessce/schemas": "3.0.0",
+    "@vitessce/utils": "3.0.0"
   },
   "devDependencies": {
     "react": "^18.0.0",
-    "vite": "^3.0.0",
-    "vitest": "^0.23.4"
+    "vite": "^4.3.0",
+    "vitest": "^0.23.4",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
-    "start": "tsc --watch",
-    "build": "tsc",
+    "bundle": "pnpm exec vite build -c ../../scripts/vite.config.js",
     "test": "pnpm exec vitest --run -r ../../ --dir ."
+  },
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist-tsc/index.d.ts",
+      "import": "./dist/index.js"
+    }
   }
 }

package/src/CallbackPublisher.js

@@ -0,0 +1,77 @@
+import { useEffect } from 'react';
+import { useViewConfigStoreApi, useLoaders, useWarning } from './state/hooks.js';
+
+
+function validateViewConfig(viewConfig, pluginSpecificConfigSchema) {
+  // Need the try-catch here since Zustand will actually
+  // just catch and ignore errors in its subscription callbacks.
+  try {
+    pluginSpecificConfigSchema.parse(viewConfig);
+  } catch (e) {
+    console.error(e);
+  }
+  // Do nothing if successful.
+}
+
+/**
+ * This is a dummy component which handles
+ * publishing new view configs and loaders to
+ * the provided callbacks on changes.
+ * @param {object} props
+ * @param {function} props.onConfigChange A callback function
+ * to execute on each change of the Vitessce view config.
+ * @param {function} props.onLoaderChange A callback function
+ * to execute on each change of the loaders object.
+ * @param {boolean} props.validateOnConfigChange Whether to validate
+ * against the view config schema when publishing changes.
+ */
+export default function CallbackPublisher(props) {
+  const {
+    onWarn,
+    onConfigChange,
+    onLoaderChange,
+    validateOnConfigChange,
+    pluginSpecificConfigSchema,
+  } = props;
+
+  const warning = useWarning();
+  const loaders = useLoaders();
+
+  const viewConfigStoreApi = useViewConfigStoreApi();
+
+  // View config updates are often-occurring, so
+  // we want to use the "transient update" approach
+  // to subscribe to view config changes.
+  // Reference: https://github.com/react-spring/zustand#transient-updates-for-often-occuring-state-changes
+  useEffect(() => viewConfigStoreApi.subscribe(
+    // The function to run on each publish.
+    (viewConfig) => {
+      if (validateOnConfigChange && viewConfig) {
+        validateViewConfig(viewConfig, pluginSpecificConfigSchema);
+      }
+      if (onConfigChange && viewConfig) {
+        onConfigChange(viewConfig);
+      }
+    },
+    // The function to specify which part of the store
+    // we want to subscribe to.
+    state => state.viewConfig,
+  ), [onConfigChange, validateOnConfigChange, viewConfigStoreApi, pluginSpecificConfigSchema]);
+
+  // Emit updates to the warning message.
+  useEffect(() => {
+    if (onWarn && warning) {
+      onWarn(warning);
+    }
+  }, [warning, onWarn]);
+
+  // Emit updates to the loaders.
+  useEffect(() => {
+    if (onLoaderChange && loaders) {
+      onLoaderChange(loaders);
+    }
+  }, [loaders, onLoaderChange]);
+
+  // Render nothing.
+  return null;
+}

package/src/LoadingIndicator.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { makeStyles, CircularProgress } from '@material-ui/core';
+
+const useStyles = makeStyles(() => ({
+  loadingIndicatorBackdrop: {
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    zIndex: '1040',
+    width: '100%',
+    height: '100%',
+    borderRadius: '4px',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  loadingIndicatorContainer: {
+    display: 'grid',
+    placeItems: 'center',
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+}));
+
+export default function LoadingIndicator() {
+  const classes = useStyles();
+  return (
+    <div className={classes.loadingIndicatorBackdrop}>
+      <div className={classes.loadingIndicatorContainer}>
+        <CircularProgress />
+      </div>
+    </div>
+  );
+}

package/src/TitleInfo.js

@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import clsx from 'clsx';
+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.js';
+import LoadingIndicator from './LoadingIndicator.js';
+import { PopperMenu } from './shared-mui/components.js';
+import { useTitleStyles } from './title-styles.js';
+
+const useStyles = makeStyles(theme => ({
+  iconButton: {
+    border: 'none',
+    marginLeft: 0,
+    background: 'none',
+    color: theme.palette.primaryForeground,
+    paddingLeft: '0.25em',
+    paddingRight: '0.25em',
+    borderRadius: '2px',
+    '&:hover': {
+      backgroundColor: theme.palette.primaryBackgroundLight,
+    },
+    '&:first-child': {
+      marginLeft: '0.25em',
+    },
+    '&:last-child': {
+      marginRight: '0.25em',
+    },
+    '& svg': {
+      width: '0.7em',
+      height: '0.7em',
+      verticalAlign: 'middle',
+      overflow: 'visible',
+    },
+  },
+  downloadLink: {
+    color: theme.palette.primaryForeground,
+  },
+}));
+
+function SettingsIconWithArrow({ open }) {
+  return (
+    <>
+      <SettingsIcon />
+      {open ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
+    </>
+  );
+}
+
+function PlotOptions(props) {
+  const { options } = props;
+  const [open, setOpen] = useState(false);
+  const classes = useStyles();
+  return (options ? (
+    <PopperMenu
+      open={open}
+      setOpen={setOpen}
+      buttonIcon={<SettingsIconWithArrow open={open} />}
+      buttonClassName={classes.iconButton}
+      placement="bottom-end"
+    >
+      {options}
+    </PopperMenu>
+  ) : null);
+}
+
+function CloudDownloadIconWithArrow({ open }) {
+  return (
+    <>
+      <CloudDownloadIcon />
+      {open ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
+    </>
+  );
+}
+
+function DownloadOptions(props) {
+  const { urls } = props;
+  const [open, setOpen] = useState(false);
+  const classes = useStyles();
+  return (urls && urls.length ? (
+    <PopperMenu
+      open={open}
+      setOpen={setOpen}
+      buttonIcon={<CloudDownloadIconWithArrow open={open} />}
+      buttonClassName={classes.iconButton}
+      placement="bottom-end"
+    >
+      {urls.map(({ url, name }) => (
+        <MenuItem dense key={`${url}_${name}`}>
+          <Link underline="none" href={url} target="_blank" rel="noopener" className={classes.downloadLink}>
+            Download {name}
+          </Link>
+        </MenuItem>
+      ))}
+    </PopperMenu>
+  ) : null);
+}
+
+function ClosePaneButton(props) {
+  const { removeGridComponent } = props;
+  const classes = useStyles();
+  return (
+    <IconButton
+      onClick={removeGridComponent}
+      size="small"
+      className={classes.iconButton}
+      title="close"
+    >
+      <CloseIcon />
+    </IconButton>
+  );
+}
+
+export function TitleInfo(props) {
+  const {
+    title, info, children, isScroll, isSpatial, removeGridComponent, urls,
+    isReady, options,
+  } = props;
+
+  const classes = useTitleStyles();
+
+  return (
+    // d-flex without wrapping div is not always full height; I don't understand the root cause.
+    <>
+      <div className={classes.title}>
+        <div className={classes.titleLeft}>
+          {title}
+        </div>
+        <div className={classes.titleInfo} title={info}>
+          {info}
+        </div>
+        <div className={classes.titleButtons}>
+          <PlotOptions
+            options={options}
+          />
+          <DownloadOptions
+            urls={urls}
+          />
+          <ClosePaneButton
+            removeGridComponent={removeGridComponent}
+          />
+        </div>
+      </div>
+      <div
+        className={clsx(
+          TOOLTIP_ANCESTOR,
+          classes.card,
+          {
+            [classes.scrollCard]: isScroll,
+            [classes.spatialCard]: isSpatial,
+            [classes.noScrollCard]: !isScroll && !isSpatial,
+          },
+        )}
+      >
+        { !isReady && <LoadingIndicator /> }
+        {children}
+      </div>
+    </>
+    // "pl-2" only matters when the window is very narrow.
+  );
+}

package/src/VitS.js

@@ -0,0 +1,202 @@
+import React, { useEffect, useMemo } from 'react';
+import {
+  ThemeProvider,
+  StylesProvider,
+  createGenerateClassName,
+} from '@material-ui/core/es/styles/index.js';
+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 {
+  ViewConfigProvider,
+  createViewConfigStore,
+  AuxiliaryProvider,
+  createAuxiliaryStore,
+} from './state/hooks.js';
+
+import VitessceGrid from './VitessceGrid.js';
+import { Warning } from './Warning.js';
+import CallbackPublisher from './CallbackPublisher.js';
+import {
+  initialize,
+} from './view-config-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.
+ * @param {object} props
+ * @param {object} props.config A Vitessce view config.
+ * If the config is valid, the VitessceGrid will be rendered as a child.
+ * If the config is invalid, a Warning will be rendered instead.
+ * @param {undefined|number} props.rowHeight Row height for grid layout. Optional.
+ * @param {number} props.height Total height for grid layout. Optional.
+ * @param {string} props.theme The theme, used for styling as
+ * light or dark. Optional. By default, "dark"
+ * @param {function} props.onWarn A callback for warning messages. Optional.
+ * @param {function} props.onConfigChange A callback for view config
+ * updates. Optional.
+ * @param {function} props.onLoaderChange A callback for loader
+ * updates. Optional.
+ * @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,
+ * 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.
+ * @param {array} props.fileTypes Plugin file types.
+ * @param {array} props.jointFileTypes Plugin joint file types.
+ * @param {array} props.coordinationTypes Plugin coordination types.
+ * @param {null|object} props.warning A warning to render within the Vitessce grid,
+ * provided by the parent.
+ */
+export function VitS(props) {
+  const {
+    config,
+    rowHeight,
+    height,
+    theme,
+    onWarn,
+    onConfigChange,
+    onLoaderChange,
+    validateOnConfigChange = false,
+    isBounded = false,
+    uid,
+    viewTypes: viewTypesProp,
+    fileTypes: fileTypesProp,
+    jointFileTypes: jointFileTypesProp,
+    coordinationTypes: coordinationTypesProp,
+    warning,
+  } = props;
+
+  const viewTypes = useMemo(() => (viewTypesProp || []), [viewTypesProp]);
+  const fileTypes = useMemo(() => (fileTypesProp || []), [fileTypesProp]);
+  const jointFileTypes = useMemo(
+    () => (jointFileTypesProp || []),
+    [jointFileTypesProp],
+  );
+  const coordinationTypes = useMemo(
+    () => (coordinationTypesProp || []),
+    [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 configUid = config?.uid;
+  const configVersion = config?.version;
+
+  const pluginSpecificConfigSchema = useMemo(() => buildConfigSchema(
+    fileTypes,
+    jointFileTypes,
+    coordinationTypes,
+    viewTypes,
+  ), [viewTypes, fileTypes, jointFileTypes, coordinationTypes]);
+
+  // Process the view config and memoize the result:
+  // - Validate.
+  // - Upgrade, if legacy schema.
+  // - Validate after upgrade, if legacy schema.
+  // - Initialize (based on initStrategy).
+  const [configOrWarning, success] = useMemo(() => {
+    if (warning) {
+      return [warning, false];
+    }
+    logConfig(config, 'input view config');
+    const result = latestConfigSchema.safeParse(config);
+    if (result.success) {
+      const upgradedConfig = result.data;
+      logConfig(upgradedConfig, 'upgraded 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.
+      if (pluginSpecificResult.success) {
+        try {
+          const upgradedConfigWithValidPlugins = pluginSpecificResult.data;
+          const initializedConfig = initialize(
+            upgradedConfigWithValidPlugins,
+            jointFileTypes,
+            coordinationTypes,
+            viewTypes,
+          );
+          logConfig(initializedConfig, 'initialized view config');
+          return [initializedConfig, true];
+        } catch (e) {
+          return [
+            {
+              title: 'Config initialization failed.',
+              unformatted: e.message,
+            },
+            false,
+          ];
+        }
+      }
+      return [
+        {
+          title: 'Config validation failed on second pass.',
+          unformatted: pluginSpecificResult.error.message,
+        },
+        false,
+      ];
+    }
+    return [{
+      title: 'Config validation failed on first pass.',
+      unformatted: result.error.message,
+    }, result.success];
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [configUid, configVersion, pluginSpecificConfigSchema, warning]);
+
+  // Emit the upgraded/initialized view config
+  // to onConfigChange if necessary.
+  useEffect(() => {
+    if (success && !isEqual(configOrWarning, config) && onConfigChange) {
+      onConfigChange(configOrWarning);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [success, configUid, configOrWarning, onConfigChange]);
+
+  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>
+      </ThemeProvider>
+    </StylesProvider>
+  ) : (
+    <StylesProvider generateClassName={generateClassName}>
+      <ThemeProvider theme={muiTheme[theme]}>
+        <Warning {...configOrWarning} />
+      </ThemeProvider>
+    </StylesProvider>
+  );
+}