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

package/src/VitessceGrid.js

@@ -0,0 +1,118 @@
+import React, {
+  useEffect,
+  useCallback,
+} from 'react';
+import clsx from 'clsx';
+import { VITESSCE_CONTAINER } from './classNames.js';
+import { VitessceGridLayout } from './vitessce-grid-layout/index.js';
+import { useRowHeight, createLoaders } from './vitessce-grid-utils.js';
+import {
+  useViewConfigStoreApi,
+  useSetViewConfig,
+  useSetLoaders,
+  useEmitGridResize,
+  useRemoveComponent,
+  useChangeLayout,
+  useLayout,
+} from './state/hooks.js';
+import {
+  useClosestVitessceContainerSize,
+} from './hooks.js';
+import { useVitessceContainerStyles } from './shared-mui/container.js';
+import { useTitleStyles } from './title-styles.js';
+
+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 {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.
+ * @param {PluginViewType[]} props.viewTypes
+ * @param {PluginFileType[]} props.fileTypes
+ * @param {PluginCoordinationType[]} props.coordinationTypes
+ */
+export default function VitessceGrid(props) {
+  const {
+    rowHeight: initialRowHeight,
+    config,
+    theme,
+    height,
+    isBounded,
+    viewTypes,
+    fileTypes,
+    coordinationTypes,
+  } = 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,
+        fileTypes,
+        coordinationTypes,
+      );
+      setLoaders(loaders);
+    } else {
+      // No config found, so clear the loaders.
+      setLoaders({});
+    }
+  }, [config, setViewConfig, setLoaders, fileTypes, coordinationTypes]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={clsx(VITESSCE_CONTAINER, classes.vitessceContainer)}
+    >
+      {layout && (
+        <VitessceGridLayout
+          layout={layout}
+          height={height}
+          rowHeight={rowHeight}
+          theme={theme}
+          viewTypes={viewTypes}
+          draggableHandle={titleClasses.title}
+          margin={margin}
+          padding={padding}
+          onRemoveComponent={removeComponent}
+          onLayoutChange={changeLayoutPostMount}
+          isBounded={isBounded}
+          onResize={onResize}
+          onResizeStop={onResize}
+        />
+      )}
+    </div>
+  );
+}

package/src/VitessceGrid.test.jsx

@@ -0,0 +1,57 @@
+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 VitessceGrid from './VitessceGrid.js';
+import {
+  ViewConfigProvider, createViewConfigStore,
+  AuxiliaryProvider, createAuxiliaryStore,
+} from './state/hooks.js';
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('VitessceGrid.js', () => {
+  describe('<VitessceGrid />', () => {
+    it('renders', async () => {
+      const config = {
+        version: '1.0.0',
+        description: 'fake description',
+        datasets: [],
+        name: 'fake name',
+        layout: [
+          {
+            component: 'FakeComponent',
+            props: { description: 'fake prop description' },
+            uid: 'A',
+            x: 0,
+            y: 0,
+          },
+        ],
+      };
+
+      function FakeComponent() {
+        return <p>FakeComponent!</p>;
+      }
+      const viewTypes = [new PluginViewType('FakeComponent', FakeComponent, [])];
+      const fileTypes = [];
+      const coordinationTypes = [];
+      render(
+        <ViewConfigProvider createStore={createViewConfigStore}>
+          <AuxiliaryProvider createStore={createAuxiliaryStore}>
+            <VitessceGrid
+              config={config}
+              viewTypes={viewTypes}
+              fileTypes={fileTypes}
+              coordinationTypes={coordinationTypes}
+            />
+          </AuxiliaryProvider>
+        </ViewConfigProvider>,
+      );
+      expect(await screen.findByText('FakeComponent!'));
+    });
+  });
+});

package/src/Warning.js

@@ -0,0 +1,62 @@
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core';
+import { VITESSCE_CONTAINER } from './classNames.js';
+
+const useStyles = makeStyles(theme => ({
+  warningLayout: {
+    backgroundColor: theme.palette.gridLayoutBackground,
+    position: 'absolute',
+    width: '100%',
+    height: '100vh',
+  },
+  containerFluid: {
+    width: '100%',
+    padding: '15px',
+    marginRight: 'auto',
+    marginLeft: 'auto',
+    boxSizing: 'border-box',
+    display: 'flex',
+  },
+  row: {
+    flexGrow: '1',
+  },
+  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',
+    backgroundColor: theme.palette.primaryBackground,
+    color: theme.palette.primaryForeground,
+  },
+}));
+
+export function Warning(props) {
+  const {
+    title,
+    preformatted,
+    unformatted,
+  } = props;
+  const classes = useStyles();
+  return (
+    <div className={VITESSCE_CONTAINER}>
+      <div className={clsx(classes.warningLayout, classes.containerFluid)}>
+        <div className={classes.row}>
+          <div className={classes.card}>
+            <h1>{title}</h1>
+            {preformatted ? (<pre>{preformatted}</pre>) : null}
+            <p>{unformatted}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/classNames.js

@@ -0,0 +1,8 @@
+export const TOOLTIP_ANCESTOR = 'tooltip-ancestor';
+const CARD = `card card-body my-2 ${TOOLTIP_ANCESTOR}`;
+export const PRIMARY_CARD = `${CARD} bg-primary`;
+export const SECONDARY_CARD = `${CARD} bg-secondary`;
+export const BLACK_CARD = `${CARD} bg-black`;
+export const TITLE_CARD = 'title';
+export const SCROLL_CARD = `${PRIMARY_CARD} scroll`;
+export const VITESSCE_CONTAINER = 'vitessce-container';

package/src/data/AbstractLoader.js

@@ -0,0 +1,23 @@
+/**
+ * A loader ancestor class containing a default constructor
+ * and a stub for the required load() method.
+ */
+export default class AbstractLoader {
+  constructor({
+    type, fileType,
+    url, requestInit,
+    options, coordinationValues,
+  }) {
+    this.fileType = fileType;
+    this.type = type;
+    this.url = url;
+    this.requestInit = requestInit;
+    this.options = options;
+    this.coordinationValues = coordinationValues;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  load() {
+    return Promise.resolve(true);
+  }
+}

package/src/data/AbstractTwoStepLoader.js

@@ -0,0 +1,8 @@
+import AbstractLoader from './AbstractLoader.js';
+
+export default class AbstractTwoStepLoader extends AbstractLoader {
+  constructor(dataSource, params) {
+    super(params);
+    this.dataSource = dataSource;
+  }
+}

package/src/data/LoaderResult.js

@@ -0,0 +1,8 @@
+
+export default class LoaderResult {
+  constructor(data, url, coordinationValues = null) {
+    this.data = data;
+    this.url = url;
+    this.coordinationValues = coordinationValues;
+  }
+}

package/src/data/index.js

@@ -0,0 +1,3 @@
+export { default as AbstractLoader } from './AbstractLoader.js';
+export { default as AbstractTwoStepLoader } from './AbstractTwoStepLoader.js';
+export { default as LoaderResult } from './LoaderResult.js';

package/src/data/loader-registry.js

@@ -0,0 +1,28 @@
+/**
+ * Get the data source and data loader class.
+ * @param {string} type The fileType name.
+ * @param {PluginFileType[]} fileTypes The array of file types.
+ * @returns {array} [dataSourceClass, dataLoaderClass].
+ */
+export function getSourceAndLoaderFromFileType(type, fileTypes) {
+  if (Array.isArray(fileTypes)) {
+    const matchingFileType = fileTypes.find(ft => ft.name === type);
+    if (matchingFileType) {
+      return matchingFileType.getSourceAndLoader();
+    }
+  }
+  // Fallback to JSON.
+  // TODO(monorepo)
+  // return [JsonSource, JsonLoader];
+  return [null, null];
+}
+
+export function getDataTypeFromFileType(type, fileTypes) {
+  if (Array.isArray(fileTypes)) {
+    const matchingFileType = fileTypes.find(ft => ft.name === type);
+    if (matchingFileType) {
+      return matchingFileType.dataType;
+    }
+  }
+  return null;
+}

package/src/data-hook-utils.js

@@ -0,0 +1,195 @@
+import { useState, useEffect } from 'react';
+import { capitalize } from '@vitessce/utils';
+import { STATUS } from '@vitessce/constants-internal';
+import { useMatchingLoader, useMatchingLoaders, useSetWarning } from './state/hooks.js';
+import {
+  AbstractLoaderError,
+  LoaderNotFoundError,
+} from './errors/index.js';
+
+/**
+ * Warn via publishing to the console
+ * and to the global warning store.
+ * @param {AbstractLoaderError} error An error instance.
+ */
+export function warn(error, setWarning) {
+  setWarning(error.message);
+  console.warn(error.message);
+  console.error(error.stack);
+  if (error instanceof AbstractLoaderError) {
+    error.warnInConsole();
+  }
+}
+
+/**
+ * Initialize values in the coordination space.
+ * @param {object} values Object where
+ * keys are coordination type names,
+ * values are initial coordination values.
+ * @param {object} setters Object where
+ * keys are coordination type names with the prefix 'set',
+ * values are coordination setter functions.
+ * @param {object} initialValues Object where
+ * keys are coordination type names and keys are values.
+ */
+export function initCoordinationSpace(values, setters, initialValues) {
+  if (!values || !setters) {
+    return;
+  }
+  Object.entries(values).forEach(([coordinationType, value]) => {
+    const setterName = `set${capitalize(coordinationType)}`;
+    const setterFunc = setters[setterName];
+    const initialValue = initialValues && initialValues[coordinationType];
+    // Interpret null as "uninitialized" and therefore needing initialization.
+    const shouldInit = initialValue === null;
+    if (shouldInit && setterFunc) {
+      setterFunc(value);
+    }
+  });
+}
+
+
+/**
+ * Get data from a cells data type loader,
+ * updating "ready" and URL state appropriately.
+ * Throw warnings if the data is marked as required.
+ * Subscribe to loader updates.
+ * @param {object} loaders The object mapping
+ * datasets and data types to loader instances.
+ * @param {string} dataset The key for a dataset,
+ * used to identify which loader to use.
+ * @param {function} addUrl A function to call to update
+ * the URL list.
+ * @param {boolean} isRequired Should a warning be thrown if
+ * loading is unsuccessful?
+ * @param {object} coordinationSetters Object where
+ * keys are coordination type names with the prefix 'set',
+ * values are coordination setter functions.
+ * @param {object} initialCoordinationValues Object where
+ * keys are coordination type names with the prefix 'initialize',
+ * values are initialization preferences as boolean values.
+ * @returns {array} [cells, cellsCount] where
+ * cells is an object and cellsCount is the
+ * number of items in the cells object.
+ */
+export function useDataType(
+  dataType, loaders, dataset, addUrl, isRequired,
+  coordinationSetters, initialCoordinationValues, matchOn,
+) {
+  const [data, setData] = useState({});
+  const [status, setStatus] = useState(STATUS.LOADING);
+
+  const setWarning = useSetWarning();
+  const loader = useMatchingLoader(loaders, dataset, dataType, matchOn);
+
+  useEffect(() => {
+    if (loader) {
+      setStatus(STATUS.LOADING);
+      loader.load().catch(e => warn(e, setWarning)).then((payload) => {
+        if (!payload) return;
+        const { data: payloadData, url, coordinationValues } = payload;
+        setData(payloadData);
+        if (Array.isArray(url)) {
+          url.forEach(([val, name]) => {
+            addUrl(val, name);
+          });
+        } else if (url) {
+          addUrl(url, dataType);
+        }
+        initCoordinationSpace(
+          coordinationValues,
+          coordinationSetters,
+          initialCoordinationValues,
+        );
+        setStatus(STATUS.SUCCESS);
+      });
+    } else {
+      setData({});
+      if (isRequired) {
+        warn(new LoaderNotFoundError(loaders, dataset, dataType, matchOn), setWarning);
+        setStatus(STATUS.ERROR);
+      } else {
+        setStatus(STATUS.SUCCESS);
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loader]);
+
+  return [data, status];
+}
+
+/**
+ * Get data from a cells data type loader,
+ * updating "ready" and URL state appropriately.
+ * Throw warnings if the data is marked as required.
+ * Subscribe to loader updates.
+ * @param {object} loaders The object mapping
+ * datasets and data types to loader instances.
+ * @param {string} dataset The key for a dataset,
+ * used to identify which loader to use.
+ * @param {function} addUrl A function to call to update
+ * the URL list.
+ * @param {boolean} isRequired Should a warning be thrown if
+ * loading is unsuccessful?
+ * @param {object} coordinationSetters Object where
+ * keys are coordination type names with the prefix 'set',
+ * values are coordination setter functions.
+ * @param {object} initialCoordinationValues Object where
+ * keys are coordination type names with the prefix 'initialize',
+ * values are initialization preferences as boolean values.
+ * @returns {array} [cells, cellsCount] where
+ * cells is an object and cellsCount is the
+ * number of items in the cells object.
+ */
+export function useDataTypeMulti(
+  dataType, loaders, dataset, addUrl, isRequired,
+  coordinationSetters, initialCoordinationValues, matchOnObj,
+) {
+  const [data, setData] = useState({});
+  const [status, setStatus] = useState(STATUS.LOADING);
+
+  const setWarning = useSetWarning();
+  const matchingLoaders = useMatchingLoaders(loaders, dataset, dataType, matchOnObj);
+
+  useEffect(() => {
+    if (matchingLoaders) {
+      setStatus(STATUS.LOADING);
+      Object.entries(matchingLoaders).forEach(([scopeKey, loader]) => {
+        if (loader) {
+          loader.load().catch(e => warn(e, setWarning)).then((payload) => {
+            if (!payload) return;
+            const { data: payloadData, url, coordinationValues } = payload;
+            setData((prev) => {
+              // eslint-disable-next-line no-param-reassign
+              prev[scopeKey] = payloadData;
+              return prev;
+            });
+            addUrl(url, dataType);
+            initCoordinationSpace(
+              coordinationValues,
+              coordinationSetters,
+              initialCoordinationValues,
+            );
+            setStatus(STATUS.SUCCESS);
+          });
+        }
+      });
+    } else {
+      setData({});
+      if (isRequired) {
+        warn(new LoaderNotFoundError(loaders, dataset, dataType, matchOnObj), setWarning);
+        setStatus(STATUS.ERROR);
+      } else {
+        setStatus(STATUS.SUCCESS);
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [matchingLoaders]);
+
+  return [data, status];
+}
+
+export function useHasLoader(loaders, dataset, dataType, matchOn) {
+  const loader = useMatchingLoader(loaders, dataset, dataType, matchOn);
+  return loader !== null;
+}