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

package/src/VitessceGrid.test.jsx

@@ -0,0 +1,48 @@
+import '@testing-library/jest-dom';
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach } from 'vitest'
+
+import VitessceGrid from './VitessceGrid';
+import {
+  ViewConfigProvider, createViewConfigStore,
+  AuxiliaryProvider, createAuxiliaryStore,
+} from './state/hooks';
+
+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 getComponent = () => FakeComponent;
+      render(
+        <ViewConfigProvider createStore={createViewConfigStore}>
+          <AuxiliaryProvider createStore={createAuxiliaryStore}>
+            <VitessceGrid config={config} getComponent={getComponent} />
+          </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/styles';
+import { VITESSCE_CONTAINER } from './classNames';
+
+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/component-registry.js

@@ -0,0 +1,21 @@
+import { getPluginViewType, getPluginViewTypes } from './plugins';
+
+// TODO(monorepo): this code can be simplified
+const registry = {};
+
+export function getComponent(name) {
+  let component = registry[name];
+  if (component === undefined) {
+    component = getPluginViewType(name);
+    if (component === undefined) {
+      throw new Error(
+        `Could not find definition for "${name}" in the core registry nor the plugin registry.`,
+      );
+    }
+  }
+  return component;
+}
+
+export function getViewTypes() {
+  return [...Object.keys(registry), ...getPluginViewTypes()];
+}

package/src/data/AbstractLoader.js

@@ -0,0 +1,46 @@
+import Ajv from 'ajv';
+import { OptionsValidationError } from '../errors/index';
+import { emptySchema } from '../file-options-schemas';
+
+/**
+ * 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;
+    this.optionsSchema = emptySchema;
+  }
+
+  validateOptions() {
+    const { optionsSchema, options } = this;
+    const validate = new Ajv().compile(optionsSchema);
+    const valid = validate(options || null);
+    if (!valid) {
+      return [false, validate.errors];
+    }
+    return [true, null];
+  }
+
+  load() {
+    const {
+      fileType, url, options,
+    } = this;
+    const [optionsAreValid, optionsFailureReason] = this.validateOptions();
+    if (!optionsAreValid) {
+      return Promise.reject(
+        new OptionsValidationError(fileType, url, options, optionsFailureReason),
+      );
+    }
+    return Promise.resolve(optionsAreValid);
+  }
+}

package/{dist → src}/data/AbstractTwoStepLoader.js

@@ -1,7 +1,8 @@
 import AbstractLoader from './AbstractLoader';
+
 export default class AbstractTwoStepLoader extends AbstractLoader {
-    constructor(dataSource, params) {
-        super(params);
-        this.dataSource = dataSource;
-    }
+  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/loader-registry.js

@@ -0,0 +1,19 @@
+import {
+  getLoaderClassesForPluginFileType,
+} from '../plugins';
+
+export const fileTypeToLoaderAndSource = {};
+
+export function getSourceAndLoaderFromFileType(type) {
+  if (fileTypeToLoaderAndSource[type]) {
+    return fileTypeToLoaderAndSource[type];
+  }
+  const pluginFileType = getLoaderClassesForPluginFileType(type);
+  if (pluginFileType) {
+    return pluginFileType;
+  }
+  // Fallback to JSON.
+  // TODO(monorepo)
+  // return [JsonSource, JsonLoader];
+  return [null, null];
+}

package/src/data-hook-utils.js

@@ -0,0 +1,197 @@
+import { useState, useEffect } from 'react';
+import equal from 'fast-deep-equal';
+import { capitalize } from '@vitessce/utils';
+import { STATUS } from '@vitessce/constants-internal';
+import { useMatchingLoader, useMatchingLoaders, useSetWarning } from './state/hooks';
+import {
+  AbstractLoaderError,
+  LoaderNotFoundError,
+} from './errors/index';
+import { getDefaultCoordinationValues } from './plugins';
+
+/**
+ * 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;
+  }
+  const defaultCoordinationValues = getDefaultCoordinationValues();
+  Object.entries(values).forEach(([coordinationType, value]) => {
+    const setterName = `set${capitalize(coordinationType)}`;
+    const setterFunc = setters[setterName];
+    const initialValue = initialValues && initialValues[coordinationType];
+    const shouldInit = equal(initialValue, defaultCoordinationValues[coordinationType]);
+    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;
+}