@vitessce/vit-s 2.0.3 → 3.0.1

package/src/index.js

@@ -1,21 +1,23 @@
-export { VitS } from './VitS';
-export { TitleInfo } from './TitleInfo';
-export { PopperMenu } from './shared-mui/components';
-export {
-  registerPluginViewType,
-  registerPluginCoordinationType,
-  registerPluginFileType,
-  registerPluginJointFileType,
-} from './plugins';
+export { VitS } from './VitS.js';
+export { TitleInfo } from './TitleInfo.js';
+export { PopperMenu } from './shared-mui/components.js';
 // For plugin view types:
 export {
-  useReady, useUrls,
-  useVitessceContainer, useDeckCanvasSize,
-  useExpressionValueGetter, useGetObsInfo,
-  useClosestVitessceContainerSize, useWindowDimensions,
+  useReady,
+  useUrls,
+  useVitessceContainer,
+  useDeckCanvasSize,
+  useUint8ObsFeatureMatrix,
+  useUint8FeatureSelection,
+  useExpressionValueGetter,
+  useGetObsMembership,
+  useGetObsInfo,
+  useClosestVitessceContainerSize,
+  useWindowDimensions,
   useGridItemSize,
-} from './hooks';
+} from './hooks.js';
 export {
+  useInitialCoordination,
   useCoordination,
   useComplexCoordination,
   useMultiCoordinationValues,
@@ -33,7 +35,7 @@ export {
   useSetWarning,
   useAuxiliaryCoordination,
   useComponentLayout,
-} from './state/hooks';
+} from './state/hooks.js';
 export {
   useDescription,
   useImageData,
@@ -51,51 +53,26 @@ export {
   useObsFeatureMatrixData,
   useFeatureLabelsData,
   useGenomicProfilesData,
-} from './data-hooks';
+} from './data-hooks.js';
 export {
   useHasLoader,
-} from './data-hook-utils';
+} from './data-hook-utils.js';
 export {
   AbstractLoader,
   AbstractTwoStepLoader,
   LoaderResult,
-} from './data/index';
+} from './data/index.js';
 export {
   AbstractLoaderError,
   DatasetNotFoundError,
   LoaderNotFoundError,
   LoaderValidationError,
-  OptionsValidationError,
   DataSourceFetchError,
-} from './errors/index';
-export {
-  // TODO(monorepo): should these be in here? or within file-types/
-  obsEmbeddingAnndataSchema,
-  obsLocationsAnndataSchema,
-  obsSegmentationsAnndataSchema,
-  obsSetsAnndataSchema,
-  obsFeatureMatrixAnndataSchema,
-  obsLabelsAnndataSchema,
-  featureLabelsAnndataSchema,
-  obsEmbeddingCsvSchema,
-  obsLocationsCsvSchema,
-  obsLabelsCsvSchema,
-  featureLabelsCsvSchema,
-  obsSetsCsvSchema,
-  anndataZarrSchema,
-  emptySchema,
-} from './file-options-schemas';
-export {
-  SCHEMA_HANDLERS,
-  LATEST_VERSION,
-} from './view-config-versions';
-export {
-  upgradeAndValidate,
-} from './view-config-utils';
+} from './errors/index.js';
 export {
   CellColorEncodingOption,
   OptionsContainer,
   OptionSelect,
   usePlotOptionsStyles,
-} from './shared-plot-options';
-export * from './json-schemas';
+} from './shared-plot-options/index.js';
+export { logConfig } from './view-config-utils.js';

package/src/mui-utils.js

@@ -0,0 +1,52 @@
+// This function has been copied from MUI v4
+// with logic related to randomness / random numbers removed.
+// Reference: https://github.com/mui/material-ui/blob/0adada09/packages/mui-styles/src/createGenerateClassName/createGenerateClassName.js#L29
+/**
+ * This is the list of the style rule name we use as drop in replacement for the built-in
+ * pseudo classes (:checked, :disabled, :focused, etc.).
+ *
+ * Why do they exist in the first place?
+ * These classes are used at a specificity of 2.
+ * It allows them to override previously defined styles as well as
+ * being untouched by simple user overrides.
+ */
+const stateClasses = [
+  'checked',
+  'disabled',
+  'error',
+  'focused',
+  'focusVisible',
+  'required',
+  'expanded',
+  'selected',
+];
+
+const defaultPrefix = 'vit-';
+
+export function createGenerateClassName(customPrefix) {
+  return (rule, styleSheet) => {
+    const {
+      name: styleSheetName,
+      link: styleSheetLink,
+      classNamePrefix,
+    } = styleSheet.options;
+    const { key: ruleKey } = rule;
+
+    const seedPrefix = customPrefix ? `${customPrefix}-` : defaultPrefix;
+
+    // Is a global static MUI style?
+    if (styleSheetName && styleSheetName.indexOf('Mui') === 0 && !styleSheetLink) {
+      // We can use a shorthand class name, we never use the keys to style the components.
+      if (stateClasses.indexOf(ruleKey) !== -1) {
+        return `Mui-${ruleKey}`;
+      }
+      const prefix = `${seedPrefix}${styleSheetName}-${ruleKey}`;
+      return prefix;
+    }
+    // Help with debuggability.
+    if (classNamePrefix) {
+      return `${seedPrefix}${classNamePrefix}-${ruleKey}`;
+    }
+    return `${seedPrefix}${ruleKey}`;
+  };
+}

package/src/shared-mui/components.js

@@ -1,12 +1,14 @@
 import React, { useRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
-import Popper from '@material-ui/core/Popper';
-import IconButton from '@material-ui/core/IconButton';
-import MenuList from '@material-ui/core/MenuList';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import Fade from '@material-ui/core/Fade';
-import { useVitessceContainer } from '../hooks';
+import {
+  makeStyles,
+  Paper,
+  Popper,
+  IconButton,
+  MenuList,
+  ClickAwayListener,
+  Fade,
+} from '@material-ui/core';
+import { useVitessceContainer } from '../hooks.js';
 
 const useStyles = makeStyles(() => ({
   paper: {

package/src/shared-mui/container.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core';
 
 export const useVitessceContainerStyles = makeStyles(theme => ({
   vitessceContainer: {

package/src/shared-mui/styles.js

@@ -1,5 +1,6 @@
-import { createTheme } from '@material-ui/core/styles';
-import { grey } from '@material-ui/core/colors';
+import { createTheme, colors } from '@material-ui/core';
+
+const { grey } = colors;
 
 const globalColors = {
   white: '#FFFFFF',
@@ -78,6 +79,7 @@ export const muiTheme = {
       secondaryForeground: '#D3D3D3',
       gridLayoutBackground: '#333333',
       cardBorder: 'rgba(0, 0, 0, 0.125)',
+      tooltipText: '#FFFFFF',
       ...globalColors,
     },
     ...sharedThemeOptions,
@@ -103,6 +105,7 @@ export const muiTheme = {
       secondaryForeground: '#222222',
       gridLayoutBackground: '#FFFFFF',
       cardBorder: 'rgba(241, 241, 241, 0.125)',
+      tooltipText: 'rgba(0, 0, 0, 0.87)',
       ...globalColors,
     },
     ...sharedThemeOptions,

package/src/shared-plot-options/CellColorEncodingOption.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
+import { TableCell, TableRow } from '@material-ui/core';
 import { capitalize } from '@vitessce/utils';
-import OptionSelect from './OptionSelect';
-import { useStyles } from './styles';
+import OptionSelect from './OptionSelect.js';
+import { useStyles } from './styles.js';
 
 export default function CellColorEncodingOption(props) {
   const {

package/src/shared-plot-options/OptionSelect.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import Select from '@material-ui/core/Select';
-import { useStyles } from './styles';
+import { Select } from '@material-ui/core';
+import { useStyles } from './styles.js';
 
 export default function OptionSelect(props) {
   const { classes: classesProp = {} } = props;
@@ -11,7 +11,7 @@ export default function OptionSelect(props) {
       disableUnderline
       {...props}
       classes={{
-        root: classes.selectRoot,
+        root: classes.optionSelectRoot,
         ...classesProp,
       }}
     />

package/src/shared-plot-options/OptionsContainer.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import Box from '@material-ui/core/Box';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableContainer from '@material-ui/core/TableContainer';
-import { useStyles } from './styles';
+import { Box, Table, TableBody, TableContainer } from '@material-ui/core';
+import { useStyles } from './styles.js';
 
 export default function OptionsContainer(props) {
   const {

package/src/shared-plot-options/index.js

@@ -1,4 +1,4 @@
-export { default as CellColorEncodingOption } from './CellColorEncodingOption';
-export { default as OptionsContainer } from './OptionsContainer';
-export { default as OptionSelect } from './OptionSelect';
-export { useStyles as usePlotOptionsStyles } from './styles';
+export { default as CellColorEncodingOption } from './CellColorEncodingOption.js';
+export { default as OptionsContainer } from './OptionsContainer.js';
+export { default as OptionSelect } from './OptionSelect.js';
+export { useStyles as usePlotOptionsStyles } from './styles.js';

package/src/shared-plot-options/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core';
 
 export const useStyles = makeStyles(theme => ({
   box: {
@@ -42,7 +42,7 @@ export const useStyles = makeStyles(theme => ({
       fontSize: '14px',
     },
   },
-  selectRoot: {
+  optionSelectRoot: {
     padding: 0,
     height: 'auto',
   },

package/src/state/hooks.js

@@ -1,8 +1,9 @@
+/* eslint-disable react-refresh/only-export-components */
 import { useRef, useCallback, useMemo } from 'react';
 import create from 'zustand';
 import createContext from 'zustand/context';
 import shallow from 'zustand/shallow';
-import isMatch from 'lodash/isMatch';
+import { isMatch, cloneDeep } from 'lodash-es';
 import { CoordinationType } from '@vitessce/constants-internal';
 import { fromEntries, capitalize } from '@vitessce/utils';
 
@@ -31,20 +32,25 @@ export const useAuxiliaryStore = useAuxiliaryStoreLocal;
  * The useViewConfigStore hook is initialized via the zustand
  * create() function, which sets up both the state variables
  * and the reducer-type functions.
- * Reference: https://github.com/react-spring/zustand
+ * References:
+ * - https://github.com/react-spring/zustand
+ * - https://github.com/pmndrs/zustand/releases/tag/v3.6.0
+ * - https://github.com/pmndrs/zustand#using-subscribe-with-selector
  * @returns {function} The useStore hook.
  */
-export const createViewConfigStore = () => create(set => ({
+export const createViewConfigStore = (initialLoaders, initialConfig) => create(set => ({
   // State:
   // The viewConfig is an object which must conform to the schema
   // found in src/schemas/config.schema.json.
-  viewConfig: null,
+  viewConfig: initialConfig,
+  // Store the initial config so that its values can be used for resetting.
+  initialViewConfig: cloneDeep(initialConfig),
   // The loaders object is a mapping from dataset ID to
   // data type to loader object instance.
-  loaders: null,
+  loaders: initialLoaders,
   // Reducer functions which update the state
   // (although technically also part of state):
-  setViewConfig: viewConfig => set({ viewConfig }),
+  setViewConfig: viewConfig => set({ viewConfig, initialViewConfig: viewConfig }),
   setLoaders: loaders => set({ loaders }),
   setCoordinationValue: ({ parameter, scope, value }) => set(state => ({
     viewConfig: {
@@ -177,6 +183,30 @@ const useGridSizeStore = create(set => ({
   })),
 }));
 
+/**
+ * This hook uses the same logic as for the `values` part of
+ * the useCoordination hook, with the difference that it
+ * gets its values from the _initial_ view config rather
+ * than the current view config.
+ * @param {string[]} parameters Array of coordination types.
+ * @param {object} coordinationScopes Mapping of coordination types
+ * to scope names.
+ * @returns {object} Object containing all coordination values.
+ */
+export function useInitialCoordination(parameters, coordinationScopes) {
+  const values = useViewConfigStore((state) => {
+    const { coordinationSpace } = state.initialViewConfig;
+    return fromEntries(parameters.map((parameter) => {
+      if (coordinationSpace && coordinationSpace[parameter]) {
+        const value = coordinationSpace[parameter][coordinationScopes[parameter]];
+        return [parameter, value];
+      }
+      return [parameter, undefined];
+    }));
+  }, shallow);
+  return values;
+}
+
 /**
  * The useCoordination hook returns both the
  * values and setter functions for the coordination objects
@@ -430,6 +460,37 @@ export function useLoaders() {
   return useViewConfigStore(state => state.loaders);
 }
 
+
+/**
+ * Find a specific loader instance for a particular dataset, data type, and view
+ * coordination values (mapping from coordination types to coordination values).
+ * Uses lodash/isMatch to perform matching against the file definition's
+ * coordination value mapping.
+ * @param {object} loaders The value returned by useLoaders.
+ * @param {string} dataset The dataset UID.
+ * @param {string} dataType The data type for the matching file.
+ * @param {object} viewCoordinationValues Current coordination values
+ * from the view. Match these against a subset of file definition coordination
+ * values.
+ * @returns The matching loader instance or `null`.
+ */
+export function getMatchingLoader(loaders, dataset, dataType, viewCoordinationValues) {
+  if (!loaders[dataset]) {
+    return null;
+  }
+  const loaderInternMap = loaders[dataset].loaders[dataType];
+  if (!loaderInternMap) {
+    return null;
+  }
+  const loaderKeys = Array.from(loaderInternMap.keys());
+  const matchingKey = loaderKeys
+    .find(fileCoordinationValues => isMatch(fileCoordinationValues, viewCoordinationValues));
+  if (!matchingKey) {
+    return null;
+  }
+  return loaderInternMap.get(matchingKey);
+}
+
 /**
  * Find a specific loader instance for a particular dataset, data type, and view
  * coordination values (mapping from coordination types to coordination values).
@@ -444,22 +505,9 @@ export function useLoaders() {
  * @returns The matching loader instance or `null`.
  */
 export function useMatchingLoader(loaders, dataset, dataType, viewCoordinationValues) {
-  return useMemo(() => {
-    if (!loaders[dataset]) {
-      return null;
-    }
-    const loaderInternMap = loaders[dataset].loaders[dataType];
-    if (!loaderInternMap) {
-      return null;
-    }
-    const loaderKeys = Array.from(loaderInternMap.keys());
-    const matchingKey = loaderKeys
-      .find(fileCoordinationValues => isMatch(fileCoordinationValues, viewCoordinationValues));
-    if (!matchingKey) {
-      return null;
-    }
-    return loaderInternMap.get(matchingKey);
-  }, [loaders, dataset, dataType, viewCoordinationValues]);
+  return useMemo(() => getMatchingLoader(
+    loaders, dataset, dataType, viewCoordinationValues,
+  ), [loaders, dataset, dataType, viewCoordinationValues]);
 }
 
 /**
@@ -467,6 +515,7 @@ export function useMatchingLoader(loaders, dataset, dataType, viewCoordinationVa
  * coordination values (mapping from coordination types to coordination values).
  * Uses lodash/isMatch to perform matching against the file definition's
  * coordination value mapping.
+ * TODO: can this function be removed?
  * @param {object} loaders The value returned by useLoaders.
  * @param {string} dataset The dataset UID.
  * @param {string} dataType The data type for the matching file.
@@ -609,7 +658,10 @@ export function useComponentViewInfo(uuid) {
  */
 export function useSetComponentViewInfo(uuid) {
   const setViewInfoRef = useRef(useViewInfoStore.getState().setComponentViewInfo);
-  const setComponentViewInfo = viewInfo => setViewInfoRef.current(uuid, viewInfo);
+  const setComponentViewInfo = useCallback(
+    viewInfo => setViewInfoRef.current(uuid, viewInfo),
+    [uuid],
+  );
   return setComponentViewInfo;
 }
 

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,
+    },
+  },
+}));