@vitessce/vit-s 2.0.2 → 2.0.3

package/{dist → dist-tsc}/index.js

@@ -4,7 +4,7 @@ export { PopperMenu } from './shared-mui/components';
 export { registerPluginViewType, registerPluginCoordinationType, registerPluginFileType, registerPluginJointFileType, } from './plugins';
 // For plugin view types:
 export { useReady, useUrls, useVitessceContainer, useDeckCanvasSize, useExpressionValueGetter, useGetObsInfo, useClosestVitessceContainerSize, useWindowDimensions, useGridItemSize, } from './hooks';
-export { useCoordination, useMultiDatasetCoordination, useDatasetUids, useLoaders, useMatchingLoader, useViewConfigStore, useViewConfigStoreApi, useComponentHover, useSetComponentHover, useComponentViewInfo, useSetComponentViewInfo, useWarning, useSetWarning, useAuxiliaryCoordination, useComponentLayout, } from './state/hooks';
+export { useCoordination, useComplexCoordination, useMultiCoordinationValues, useMultiDatasetCoordination, useDatasetUids, useLoaders, useMatchingLoader, useViewConfigStore, useViewConfigStoreApi, useComponentHover, useSetComponentHover, useComponentViewInfo, useSetComponentViewInfo, useWarning, useSetWarning, useAuxiliaryCoordination, useComponentLayout, } from './state/hooks';
 export { useDescription, useImageData, useObsSetsData, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useMultiObsLabels, useObsLocationsData, useObsSegmentationsData, useNeighborhoodsData, useObsLabelsData, useObsFeatureMatrixData, useFeatureLabelsData, useGenomicProfilesData, } from './data-hooks';
 export { useHasLoader, } from './data-hook-utils';
 export { AbstractLoader, AbstractTwoStepLoader, LoaderResult, } from './data/index';
@@ -15,4 +15,4 @@ obsEmbeddingAnndataSchema, obsLocationsAnndataSchema, obsSegmentationsAnndataSch
 export { SCHEMA_HANDLERS, LATEST_VERSION, } from './view-config-versions';
 export { upgradeAndValidate, } from './view-config-utils';
 export { CellColorEncodingOption, OptionsContainer, OptionSelect, usePlotOptionsStyles, } from './shared-plot-options';
-export * from './schemas';
+export * from './json-schemas';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,9 +8,10 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "dist/index.mjs",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
     "@material-ui/core": "~4.12.3",
@@ -24,8 +25,8 @@
     "react-grid-layout-with-lodash": "^1.3.5",
     "uuid": "^3.3.2",
     "zustand": "^3.5.10",
-    "@vitessce/constants-internal": "2.0.2",
-    "@vitessce/utils": "2.0.2"
+    "@vitessce/constants-internal": "2.0.3",
+    "@vitessce/utils": "2.0.3"
   },
   "devDependencies": {
     "react": "^18.0.0",
@@ -36,8 +37,7 @@
     "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 ."
   }
 }

package/src/CallbackPublisher.js

@@ -0,0 +1,81 @@
+import { useEffect } from 'react';
+import { SCHEMA_HANDLERS, LATEST_VERSION } from './view-config-versions';
+import { useViewConfigStoreApi, useLoaders, useWarning } from './state/hooks';
+
+function validateViewConfig(viewConfig) {
+  // 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}`);
+    }
+  } 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,
+  } = 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);
+      }
+      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]);
+
+  // 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,34 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+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,240 @@
+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 { TOOLTIP_ANCESTOR } from './classNames';
+import LoadingIndicator from './LoadingIndicator';
+import { PopperMenu } from './shared-mui/components';
+
+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 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,
+    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,180 @@
+/* eslint-disable camelcase */
+import React, { useEffect, useMemo } from 'react';
+import {
+  ThemeProvider,
+  StylesProvider,
+  createGenerateClassName,
+} from '@material-ui/core/styles';
+import isEqual from 'lodash/isEqual';
+import { META_VERSION } from '@vitessce/constants-internal';
+import { muiTheme } from './shared-mui/styles';
+import {
+  ViewConfigProvider,
+  createViewConfigStore,
+  AuxiliaryProvider,
+  createAuxiliaryStore,
+} from './state/hooks';
+
+import VitessceGrid from './VitessceGrid';
+import { Warning } from './Warning';
+import CallbackPublisher from './CallbackPublisher';
+import { getComponent } from './component-registry';
+import {
+  checkTypes,
+  initialize,
+  upgradeAndValidate,
+} from './view-config-utils';
+
+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 {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.
+ */
+export function VitS(props) {
+  const {
+    config,
+    rowHeight,
+    height,
+    theme,
+    onWarn,
+    onConfigChange,
+    onLoaderChange,
+    validateOnConfigChange = false,
+    onConfigUpgrade,
+    isBounded = false,
+    uid,
+  } = props;
+
+  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]);
+
+  // 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 the config value is undefined, show a warning message.
+    if (!config) {
+      return [
+        {
+          title: 'No such dataset',
+          unformatted: 'The dataset configuration could not be found.',
+        },
+        false,
+      ];
+    }
+    // If the view config is missing a version, show a warning message.
+    if (!config.version) {
+      return [
+        {
+          title: 'Missing version',
+          unformatted:
+            'The dataset configuration is missing a version, preventing validation.',
+        },
+        false,
+      ];
+    }
+    logConfig(config, 'input view config');
+    // Check if this is a "legacy" view config.
+    const [upgradedConfig, upgradeSuccess] = upgradeAndValidate(
+      config,
+      onConfigUpgrade,
+    );
+    if (upgradeSuccess) {
+      logConfig(upgradedConfig, 'upgraded view config');
+      // Initialize the view config according to the initStrategy.
+      const [typeCheckSuccess, typeCheckMessage] = checkTypes(upgradedConfig);
+      if (typeCheckSuccess) {
+        try {
+          const initializedConfig = initialize(upgradedConfig);
+          logConfig(initializedConfig, 'initialized view config');
+          return [initializedConfig, true];
+        } catch (e) {
+          return [
+            {
+              title: 'View config initialization failed.',
+              unformatted: e.message,
+            },
+            false,
+          ];
+        }
+      }
+      return [
+        {
+          title: 'View config checks failed.',
+          unformatted: typeCheckMessage,
+        },
+        false,
+      ];
+    }
+    return [upgradedConfig, false];
+  }, [config, onConfigUpgrade]);
+
+  // Emit the upgraded/initialized view config
+  // to onConfigChange if necessary.
+  useEffect(() => {
+    if (success && !isEqual(configOrWarning, config) && onConfigChange) {
+      onConfigChange(configOrWarning);
+    }
+  }, [success, config, configOrWarning, onConfigChange]);
+
+  return success ? (
+    <StylesProvider generateClassName={generateClassName}>
+      <ThemeProvider theme={muiTheme[theme]}>
+        <ViewConfigProvider createStore={createViewConfigStore}>
+          <AuxiliaryProvider createStore={createAuxiliaryStore}>
+            <VitessceGrid
+              config={configOrWarning}
+              getComponent={getComponent}
+              rowHeight={rowHeight}
+              height={height}
+              theme={theme}
+              isBounded={isBounded}
+            />
+            <CallbackPublisher
+              onWarn={onWarn}
+              onConfigChange={onConfigChange}
+              onLoaderChange={onLoaderChange}
+              validateOnConfigChange={validateOnConfigChange}
+            />
+          </AuxiliaryProvider>
+        </ViewConfigProvider>
+      </ThemeProvider>
+    </StylesProvider>
+  ) : (
+    <StylesProvider generateClassName={generateClassName}>
+      <ThemeProvider theme={muiTheme[theme]}>
+        <Warning {...configOrWarning} />
+      </ThemeProvider>
+    </StylesProvider>
+  );
+}

package/src/VitessceGrid.js

@@ -0,0 +1,110 @@
+import React, {
+  useEffect,
+  useCallback,
+} from 'react';
+import clsx from 'clsx';
+import { VITESSCE_CONTAINER } from './classNames';
+import { VitessceGridLayout } from './vitessce-grid-layout';
+import { useRowHeight, createLoaders } from './vitessce-grid-utils';
+import {
+  useViewConfigStoreApi,
+  useSetViewConfig,
+  useSetLoaders,
+  useEmitGridResize,
+  useRemoveComponent,
+  useChangeLayout,
+  useLayout,
+} from './state/hooks';
+import {
+  useClosestVitessceContainerSize,
+} from './hooks';
+import { useVitessceContainerStyles } from './shared-mui/container';
+import { useTitleStyles } from './TitleInfo';
+
+const padding = 10;
+const margin = 5;
+
+/**
+ * The wrapper for the VitessceGrid and LoadingIndicator components.
+ * @param {object} props
+ * @param {number} props.rowHeight The height of each grid row. Optional.
+ * @param {object} props.config The view config.
+ * @param {function} props.getComponent A function that maps component names to their
+ * React counterparts.
+ * @param {string} props.theme The theme name.
+ * @param {number} props.height Total height for grid. Optional.
+ * @param {function} props.onWarn A callback for warning messages. Optional.
+ */
+export default function VitessceGrid(props) {
+  const {
+    rowHeight: initialRowHeight,
+    config,
+    getComponent,
+    theme,
+    height,
+    isBounded,
+  } = props;
+
+  const [rowHeight, containerRef] = useRowHeight(config, initialRowHeight, height, margin, padding);
+  const onResize = useEmitGridResize();
+
+  const [componentWidth] = useClosestVitessceContainerSize(containerRef);
+
+  const classes = useVitessceContainerStyles();
+  const titleClasses = useTitleStyles();
+
+  // When the row height has changed, publish a GRID_RESIZE event.
+  useEffect(() => {
+    onResize();
+  }, [rowHeight, onResize]);
+
+  const viewConfigStoreApi = useViewConfigStoreApi();
+  const setViewConfig = useSetViewConfig(viewConfigStoreApi);
+  const setLoaders = useSetLoaders();
+  const removeComponent = useRemoveComponent();
+  const changeLayout = useChangeLayout();
+  const layout = useLayout();
+
+  const changeLayoutPostMount = useCallback((newComponentProps) => {
+    if (componentWidth > 0) {
+      changeLayout(newComponentProps);
+    }
+  }, [changeLayout, componentWidth]);
+
+  // Update the view config and loaders in the global state.
+  useEffect(() => {
+    if (config) {
+      setViewConfig(config);
+      const loaders = createLoaders(config.datasets, config.description);
+      setLoaders(loaders);
+    } else {
+      // No config found, so clear the loaders.
+      setLoaders({});
+    }
+  }, [config, setViewConfig, setLoaders]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={clsx(VITESSCE_CONTAINER, classes.vitessceContainer)}
+    >
+      {layout && (
+        <VitessceGridLayout
+          layout={layout}
+          height={height}
+          rowHeight={rowHeight}
+          theme={theme}
+          getComponent={getComponent}
+          draggableHandle={titleClasses.title}
+          margin={margin}
+          padding={padding}
+          onRemoveComponent={removeComponent}
+          onLayoutChange={changeLayoutPostMount}
+          isBounded={isBounded}
+          onResize={onResize}
+          onResizeStop={onResize}
+        />
+      )}
+    </div>
+  );
+}