@vitessce/vit-s 2.0.3 → 3.0.0

package/src/title-styles.js

@@ -0,0 +1,73 @@
+import { makeStyles } from '@material-ui/core';
+
+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,
+    },
+  },
+}));

package/src/view-config-utils.js

@@ -1,20 +1,10 @@
 /* eslint-disable no-plusplus */
 /* eslint-disable camelcase */
-import difference from 'lodash/difference';
-import cloneDeep from 'lodash/cloneDeep';
-import { getNextScope } from '@vitessce/utils';
+import { cloneDeep } from 'lodash-es';
+import { fromEntries, getNextScope } from '@vitessce/utils';
 import {
   AUTO_INDEPENDENT_COORDINATION_TYPES,
 } from '@vitessce/constants-internal';
-import { getViewTypes } from './component-registry';
-import {
-  getComponentCoordinationTypes,
-  getDefaultCoordinationValues,
-  getCoordinationTypes,
-  getFileTypes,
-  getJointFileTypes,
-} from './plugins';
-import { SCHEMA_HANDLERS } from './view-config-versions';
 
 /**
  * Get a list of all unique scope names for a
@@ -40,8 +30,10 @@ export function getExistingScopesForCoordinationType(config, coordinationType) {
  * to set in the coordination space.
  * @returns {object} The new view config.
  */
-function coordinateComponentsTogether(config, coordinationType, scopeValue) {
-  const componentCoordinationTypes = getComponentCoordinationTypes();
+function coordinateComponentsTogether(config, coordinationType, scopeValue, viewTypes) {
+  const componentCoordinationTypes = fromEntries(
+    viewTypes.map(vt => ([vt.name, vt.coordinationTypes])),
+  );
   const scopeName = getNextScope(getExistingScopesForCoordinationType(config, coordinationType));
   const newConfig = {
     ...config,
@@ -82,8 +74,10 @@ function coordinateComponentsTogether(config, coordinationType, scopeValue) {
  * to set in the coordination space.
  * @returns {object} The new view config.
  */
-function coordinateComponentsIndependent(config, coordinationType, scopeValue) {
-  const componentCoordinationTypes = getComponentCoordinationTypes();
+function coordinateComponentsIndependent(config, coordinationType, scopeValue, viewTypes) {
+  const componentCoordinationTypes = fromEntries(
+    viewTypes.map(vt => ([vt.name, vt.coordinationTypes])),
+  );
   const newConfig = {
     ...config,
     layout: [...config.layout],
@@ -120,13 +114,24 @@ function coordinateComponentsIndependent(config, coordinationType, scopeValue) {
   return newConfig;
 }
 
-function initializeAuto(config) {
+/**
+ * Perform initialization using initStrategy: "auto".
+ * @param {object} config The view config.
+ * @param {PluginCoordinationType[]} coordinationTypeObjs
+ * @param {PluginViewType[]} viewTypeObjs
+ * @returns {object} The config.
+ */
+function initializeAuto(config, coordinationTypeObjs, viewTypeObjs) {
   let newConfig = config;
   const { layout, datasets } = newConfig;
 
-  const componentCoordinationTypes = getComponentCoordinationTypes();
-  const defaultCoordinationValues = getDefaultCoordinationValues();
-  const coordinationTypes = getCoordinationTypes();
+  const componentCoordinationTypes = fromEntries(
+    viewTypeObjs.map(vt => ([vt.name, vt.coordinationTypes])),
+  );
+  const defaultCoordinationValues = fromEntries(
+    coordinationTypeObjs.map(ct => ([ct.name, ct.defaultValue])),
+  );
+  const coordinationTypes = coordinationTypeObjs.map(ct => ct.name);
 
   // For each coordination type, check whether it requires initialization.
   coordinationTypes.forEach((coordinationType) => {
@@ -153,9 +158,13 @@ function initializeAuto(config) {
       // a unique scope for every component ("independent")
       // vs. the same scope for every component ("together").
       if (AUTO_INDEPENDENT_COORDINATION_TYPES.includes(coordinationType)) {
-        newConfig = coordinateComponentsIndependent(newConfig, coordinationType, defaultValue);
+        newConfig = coordinateComponentsIndependent(
+          newConfig, coordinationType, defaultValue, viewTypeObjs,
+        );
       } else {
-        newConfig = coordinateComponentsTogether(newConfig, coordinationType, defaultValue);
+        newConfig = coordinateComponentsTogether(
+          newConfig, coordinationType, defaultValue, viewTypeObjs,
+        );
       }
     }
   });
@@ -163,35 +172,6 @@ function initializeAuto(config) {
   return newConfig;
 }
 
-export function checkTypes(config) {
-  // Add a log message when there are additionalProperties in the coordination space that
-  // do not appear in the view config JSON schema,
-  // with a note that this indicates either a mistake or custom coordination type usage.
-  const coordinationTypesInConfig = Object.keys(config.coordinationSpace || {});
-  const allCoordinationTypes = getCoordinationTypes();
-  const unknownCoordinationTypes = difference(coordinationTypesInConfig, allCoordinationTypes);
-  if (unknownCoordinationTypes.length > 0) {
-    return [false, `The following coordination types are not recognized: [${unknownCoordinationTypes}].\nIf these are plugin coordination types, ensure that they have been properly registered.`];
-  }
-  // Add a log message when there are views in the layout that are neither
-  // core views nor registered plugin views.
-  const viewTypesInConfig = config.layout.map(c => c.component);
-  const allViewTypes = getViewTypes();
-  const unknownViewTypes = difference(viewTypesInConfig, allViewTypes);
-  if (unknownViewTypes.length > 0) {
-    return [false, `The following view types are not recognized: [${unknownViewTypes}].\nIf these are plugin view types, ensure that they have been properly registered.`];
-  }
-  // Add a log message when there are file definitions with neither
-  // core nor registered plugin file types.
-  const fileTypesInConfig = config.datasets.flatMap(d => d.files.map(f => f.fileType));
-  const allFileTypes = getFileTypes();
-  const unknownFileTypes = difference(fileTypesInConfig, allFileTypes);
-  if (unknownFileTypes.length > 0) {
-    return [false, `The following file types are not recognized: [${unknownFileTypes}].\nIf these are plugin file types, ensure that they have been properly registered.`];
-  }
-  return [true, 'All view types, coordination types, and file types that appear in the view config are recognized.'];
-}
-
 /**
  * Assign unique ids for view definitions where
  * they are missing a value for the uid property
@@ -200,7 +180,7 @@ export function checkTypes(config) {
  * @returns The updated view config.
  */
 function assignViewUids(config) {
-  const { layout } = config;
+  const { uid, layout } = config;
   const usedIds = layout.map(view => view.uid);
   layout.forEach((view, i) => {
     // Assign uids for views where they are not present.
@@ -210,8 +190,10 @@ function assignViewUids(config) {
       usedIds.push(nextUid);
     }
   });
+  const newUid = uid || getNextScope([]);
   return {
     ...config,
+    uid: newUid,
     layout,
   };
 }
@@ -224,8 +206,10 @@ function assignViewUids(config) {
  * convenience file types.
  * @returns The view config containing expanded minimal file types.
  */
-function expandConvenienceFileDefs(config) {
-  const convenienceFileTypes = getJointFileTypes();
+function expandConvenienceFileDefs(config, jointFileTypes) {
+  const convenienceFileTypes = fromEntries(
+    jointFileTypes.map(ft => ([ft.name, ft.expandFunction])),
+  );
   const { datasets: currDatasets } = config;
   const datasets = cloneDeep(currDatasets);
   currDatasets.forEach((dataset, i) => {
@@ -262,54 +246,18 @@ function expandConvenienceFileDefs(config) {
  * Should be "stable": if run on the same view config twice, the return value the second
  * time should be identical to the return value the first time.
  * @param {object} config The view config prop.
+ * @param {PluginJointFileType[]} jointFileTypes
+ * @param {PluginCoordinationType[]} coordinationTypes
+ * @param {PluginViewType[]} viewTypes
  * @returns The initialized view config.
  */
-export function initialize(config) {
+export function initialize(config, jointFileTypes, coordinationTypes, viewTypes) {
   let newConfig = cloneDeep(config);
   if (newConfig.initStrategy === 'auto') {
-    newConfig = initializeAuto(config);
+    // TODO: pass coordination types with defaults
+    // TODO: pass view types with per-view coordination type lists
+    newConfig = initializeAuto(config, coordinationTypes, viewTypes);
   }
-  newConfig = expandConvenienceFileDefs(newConfig);
+  newConfig = expandConvenienceFileDefs(newConfig, jointFileTypes);
   return assignViewUids(newConfig);
 }
-
-export function upgradeAndValidate(oldConfig, onConfigUpgrade = null) {
-  // oldConfig object must have a `version` property.
-  let nextConfig = oldConfig;
-  let fromVersion;
-  let upgradeFunction; let
-    validateFunction;
-
-  do {
-    fromVersion = nextConfig.version;
-
-    if (!Object.keys(SCHEMA_HANDLERS).includes(fromVersion)) {
-      return [{
-        title: 'Config validation failed',
-        preformatted: 'Unknown config version.',
-      }, false];
-    }
-
-    [validateFunction, upgradeFunction] = SCHEMA_HANDLERS[fromVersion];
-
-    // Validate under the legacy schema before upgrading.
-    const validLegacy = validateFunction(nextConfig);
-    if (!validLegacy) {
-      const failureReason = JSON.stringify(validateFunction.errors, null, 2);
-      return [{
-        title: 'Config validation failed',
-        preformatted: failureReason,
-      }, false];
-    }
-
-    if (upgradeFunction) {
-      const prevConfig = nextConfig;
-      nextConfig = upgradeFunction(nextConfig);
-      if (onConfigUpgrade) {
-        onConfigUpgrade(prevConfig, nextConfig);
-      }
-    }
-  } while (upgradeFunction);
-
-  return [nextConfig, true];
-}

package/src/view-config-utils.test.jsx

@@ -0,0 +1,222 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import { z } from '@vitessce/schemas';
+import { PluginViewType, PluginCoordinationType } from '@vitessce/plugins';
+import {
+  getExistingScopesForCoordinationType,
+  initialize,
+} from './view-config-utils.js';
+
+function FakeComponent(props) {
+  const { text } = props;
+  return <span>{text}</span>;
+}
+
+const jointFileTypes = [];
+const coordinationTypes = [
+  new PluginCoordinationType('dataset', null, z.string().nullable()),
+  new PluginCoordinationType('embeddingTargetX', 0, z.number()),
+  new PluginCoordinationType('embeddingTargetY', 0, z.number()),
+  new PluginCoordinationType('embeddingZoom', 3, z.number()),
+  new PluginCoordinationType('embeddingType', null, z.string().nullable()),
+];
+const viewTypes = [
+  new PluginViewType('description', FakeComponent, ['dataset']),
+  new PluginViewType('scatterplot', FakeComponent, ['dataset', 'embeddingType', 'embeddingZoom', 'embeddingTargetX', 'embeddingTargetY']),
+];
+
+describe('src/app/view-config-utils.js', () => {
+  describe('getExistingScopesForCoordinationType', () => {
+    it('gets all scope names for a particular coordination type', () => {
+      const config = {
+        coordinationSpace: {
+          dataset: {
+            A: 'my-dataset-1',
+            B: 'my-dataset-2',
+          },
+        },
+        layout: [
+          {
+            coordinationScopes: {
+              dataset: 'A',
+            },
+          },
+          {
+            coordinationScopes: {
+              dataset: 'C',
+            },
+          },
+        ],
+      };
+      expect(getExistingScopesForCoordinationType(config, 'dataset')).toEqual(['A', 'B', 'C']);
+    });
+  });
+
+  describe('initialize', () => {
+    it('initializes coordination space and component coordination scopes when initStrategy is auto', () => {
+      const preInitializationConfig = {
+        version: '1.0.16',
+        name: 'My config name',
+        description: 'My config description',
+        initStrategy: 'auto',
+        coordinationSpace: {
+          embeddingTargetX: {
+            A: 0,
+          },
+          embeddingTargetY: {
+            A: 0,
+          },
+          embeddingType: {
+            't-SNE': 't-SNE',
+          },
+        },
+        datasets: [
+          {
+            files: [],
+            name: 'A',
+            uid: 'A',
+          },
+        ],
+        layout: [
+          {
+            component: 'description',
+            coordinationScopes: {},
+            h: 2,
+            w: 3,
+            x: 9,
+            y: 0,
+          },
+          {
+            component: 'scatterplot',
+            coordinationScopes: {
+              embeddingTargetX: 'A',
+              embeddingTargetY: 'A',
+              embeddingType: 't-SNE',
+            },
+            h: 4,
+            w: 5,
+            x: 0,
+            y: 2,
+          },
+        ],
+      };
+
+      const initializedViewConfig = {
+        version: '1.0.16',
+        uid: 'A',
+        name: 'My config name',
+        description: 'My config description',
+        initStrategy: 'auto',
+        coordinationSpace: {
+          dataset: {
+            A: 'A',
+          },
+          embeddingTargetX: {
+            A: 0,
+          },
+          embeddingTargetY: {
+            A: 0,
+          },
+          embeddingType: {
+            't-SNE': 't-SNE',
+          },
+          embeddingZoom: {
+            A: 3,
+          },
+        },
+        datasets: [
+          {
+            files: [],
+            name: 'A',
+            uid: 'A',
+          },
+        ],
+        layout: [
+          {
+            component: 'description',
+            coordinationScopes: {
+              dataset: 'A',
+            },
+            h: 2,
+            uid: 'A',
+            w: 3,
+            x: 9,
+            y: 0,
+          },
+          {
+            component: 'scatterplot',
+            coordinationScopes: {
+              dataset: 'A',
+              embeddingTargetX: 'A',
+              embeddingTargetY: 'A',
+              embeddingType: 't-SNE',
+              embeddingZoom: 'A',
+            },
+            h: 4,
+            uid: 'B',
+            w: 5,
+            x: 0,
+            y: 2,
+          },
+        ],
+      };
+
+      expect(initialize(preInitializationConfig, jointFileTypes, coordinationTypes, viewTypes))
+        .toEqual(initializedViewConfig);
+    });
+
+    it('does not initialize when initStrategy is none', () => {
+      const preInitializationConfig = {
+        version: '1.0.16',
+        name: 'My config name',
+        description: 'My config description',
+        initStrategy: 'none', // initStrategy is none
+        coordinationSpace: {
+          embeddingTargetX: {
+            A: 0,
+          },
+          embeddingTargetY: {
+            A: 0,
+          },
+          embeddingType: {
+            't-SNE': 't-SNE',
+          },
+        },
+        datasets: [
+          {
+            files: [],
+            name: 'A',
+            uid: 'A',
+          },
+        ],
+        layout: [
+          {
+            component: 'description',
+            coordinationScopes: {},
+            h: 2,
+            w: 3,
+            x: 9,
+            y: 0,
+          },
+          {
+            component: 'scatterplot',
+            coordinationScopes: {
+              embeddingTargetX: 'A',
+              embeddingTargetY: 'A',
+              embeddingType: 't-SNE',
+            },
+            h: 4,
+            w: 5,
+            x: 0,
+            y: 2,
+          },
+        ],
+      };
+      expect(
+        initialize(
+          preInitializationConfig, jointFileTypes, coordinationTypes, viewTypes,
+        ).coordinationSpace,
+      ).toEqual(preInitializationConfig.coordinationSpace);
+    });
+  });
+});

package/src/vitessce-grid-layout/VitessceGridLayout.js

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout-with-lodash';
-import isEqual from 'lodash/isEqual';
-import { getMaxRows, resolveLayout } from './layout-utils';
+import { isEqual } from 'lodash-es';
+import { getMaxRows, resolveLayout } from './layout-utils.js';
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
@@ -16,18 +16,31 @@ class ResponsiveHeightGridLayout extends ResponsiveGridLayout {
 export function VitessceGridLayout(props) {
   const {
     layout,
-    getComponent, padding, margin, draggableHandle: draggableHandleClass,
+    viewTypes, padding, margin: marginProp, draggableHandle: draggableHandleClass,
     onResize, onResizeStop, rowHeight, theme, height,
     onRemoveComponent, onLayoutChange: onLayoutChangeProp,
     isBounded,
   } = props;
 
+  const getComponent = useCallback((viewType) => {
+    if (Array.isArray(viewTypes)) {
+      const matchingViewType = viewTypes.find(v => v.name === viewType);
+      if (matchingViewType) {
+        return matchingViewType.component;
+      }
+    }
+    return () => null;
+  }, [viewTypes]);
+
   const draggableHandle = `.${draggableHandleClass}`;
 
   // If layout changes, update grid components.
   const {
     cols: gridCols, layouts: gridLayouts, breakpoints: gridBreakpoints, components: gridComponents,
-  } = resolveLayout(layout);
+  } = useMemo(() => resolveLayout(layout), [layout]);
+
+  const containerPadding = useMemo(() => ([padding, padding]), [padding]);
+  const margin = useMemo(() => ([marginProp, marginProp]), [marginProp]);
 
   const maxRows = getMaxRows(gridLayouts);
 
@@ -53,16 +66,16 @@ export function VitessceGridLayout(props) {
   //
   // Additionally, react-grid-layout doesn't revert if you don't save a new/changed layouts. If you
   // wish to do this, first you have to save the new layouts and render the grid with it, and then
-  // you can revert to the original layouts. Thus, we need one state for the current grid layouts,
+  // you can revert to the original layouts. Thus, we need one state for a temporary grid layout,
   // which gets called on every onLayoutChange. If the grid height is still valid, we then call
-  // onValidLayoutChange, otherwise we reset currentGridLayouts to lastValidGridLayouts.
+  // onValidLayoutChange, otherwise we call onValidLayoutChange with lastValidGridLayouts.
   //
   // See the following GitHub issue for more information.
   // https://github.com/react-grid-layout/react-grid-layout/issues/1104#issuecomment-827785217
-  const [currentGridLayouts, setCurrentGridLayouts] = useState(gridLayouts);
+  const [tempGridLayouts, setTempGridLayouts] = useState(null);
   const [lastValidGridLayouts, setLastValidGridLayouts] = useState(gridLayouts);
 
-  const onValidLayoutChange = (newLayout) => {
+  const onValidLayoutChange = useCallback((newLayout) => {
     if (newLayout.length === Object.entries(gridComponents).length) {
       const newComponentProps = {};
       newLayout.forEach((nextC) => {
@@ -84,24 +97,31 @@ export function VitessceGridLayout(props) {
         onLayoutChangeProp(newComponentProps);
       }
     }
-  };
-
-  const onLayoutChange = (newLayout, allLayouts) => {
-    setCurrentGridLayouts(allLayouts);
-    if (!isBounded || getMaxRows({ ID: newLayout }) <= maxRows) {
-      onValidLayoutChange(newLayout);
-      setLastValidGridLayouts(allLayouts);
-    } else {
-      setCurrentGridLayouts(lastValidGridLayouts);
-    }
-  };
-
-  const saveCurrentLayouts = () => {
-    setLastValidGridLayouts(currentGridLayouts);
-  };
+  }, [gridComponents, onLayoutChangeProp]);
+
+  const onLayoutChange = useCallback((newLayout, allLayouts) => {
+    // We first need to set the new layout to the potentially-invalid allLayouts
+    // (see comments above about react-grid-layout limitations).
+    setTempGridLayouts(allLayouts);
+    // Then we wait 50ms and validate/set the new layout.
+    setTimeout(() => {
+      if (!isBounded || getMaxRows({ ID: newLayout }) <= maxRows) {
+        // Good, new layout was valid with respect to isBounded, so set in parent.
+        onValidLayoutChange(newLayout);
+        setLastValidGridLayouts(allLayouts);
+      } else {
+        // Bad, new layout was not valid with respect to isBounded.
+        onValidLayoutChange(lastValidGridLayouts);
+      }
+      setTempGridLayouts(null);
+    }, 50);
+  }, [isBounded, lastValidGridLayouts, maxRows, onValidLayoutChange]);
 
+  const saveCurrentLayouts = useCallback(() => {
+    setLastValidGridLayouts(gridLayouts);
+  }, [gridLayouts]);
 
-  const layoutChildren = Object.values(gridComponents).map((v) => {
+  const layoutChildren = useMemo(() => Object.values(gridComponents).map((v) => {
     const Component = getComponent(v.component);
 
     const removeGridComponent = () => {
@@ -120,14 +140,15 @@ export function VitessceGridLayout(props) {
         />
       </div>
     );
-  });
-  return (currentGridLayouts && gridComponents && gridBreakpoints && gridCols) && (
+  }), [gridComponents, getComponent, onRemoveComponent, theme]);
+
+  return (gridLayouts && gridComponents && gridBreakpoints && gridCols) && (
     <>
       {style}
       <ResponsiveHeightGridLayout
         className="layout"
         cols={gridCols}
-        layouts={currentGridLayouts}
+        layouts={tempGridLayouts || gridLayouts}
         breakpoints={gridBreakpoints}
         height={height}
         rowHeight={
@@ -136,8 +157,8 @@ export function VitessceGridLayout(props) {
             (window.innerHeight - 2 * padding - (maxRows - 1) * margin)
             / maxRows
           )}
-        containerPadding={[padding, padding]}
-        margin={[margin, margin]}
+        containerPadding={containerPadding}
+        margin={margin}
         draggableHandle={draggableHandle}
         onLayoutChange={onLayoutChange}
         isBounded={isBounded}