@vitessce/vit-s 3.3.4 → 3.3.6

package/src/hooks.js

@@ -3,7 +3,7 @@ import {
 } from 'react';
 import { debounce, every } from 'lodash-es';
 import { extent } from 'd3-array';
-import { capitalize, fromEntries } from '@vitessce/utils';
+import { capitalize } from '@vitessce/utils';
 import { STATUS } from '@vitessce/constants-internal';
 import { useGridResize, useEmitGridResize } from './state/hooks.js';
 import { VITESSCE_CONTAINER } from './classNames.js';
@@ -290,19 +290,24 @@ export function useGetObsInfo(obsType, obsLabelsTypes, obsLabelsData, obsSetsMem
       const obsMembership = obsSetsMembership?.get(obsId) || [];
       return {
         [`${capitalize(obsType)} ID`]: obsId,
-        ...fromEntries(obsMembership.flatMap(path => path.slice(1).map((pathEl, elLevel) => ([
-          `${path[0]}${path.length > 2 ? ` L${elLevel + 1}` : ''}`,
-          pathEl,
-        ])))),
-        ...fromEntries(Object.entries(obsLabelsTypes).map(([scopeKey, obsLabelsType]) => ([
-          obsLabelsType,
-          obsLabelsData?.[scopeKey]?.obsLabels?.[
-            // TODO: Maybe all loaders that return obsIndex should also return an obsIndexMap
-            // with keys: obsId, values: obsIdx
-            // which would avoid the indexOf calls.
-            obsLabelsData?.[scopeKey]?.obsIndex?.indexOf(obsId)
-          ],
-        ])).filter(([obsLabelsType]) => Boolean(obsLabelsType))),
+        ...Object.fromEntries(
+          obsMembership
+            .flatMap(path => path.slice(1).map((pathEl, elLevel) => ([
+              `${path[0]}${path.length > 2 ? ` L${elLevel + 1}` : ''}`,
+              pathEl,
+            ]))),
+        ),
+        ...Object.fromEntries(
+          Object.entries(obsLabelsTypes).map(([scopeKey, obsLabelsType]) => ([
+            obsLabelsType,
+            obsLabelsData?.[scopeKey]?.obsLabels?.[
+              // TODO: Maybe all loaders that return obsIndex should also return an obsIndexMap
+              // with keys: obsId, values: obsIdx
+              // which would avoid the indexOf calls.
+              obsLabelsData?.[scopeKey]?.obsIndex?.indexOf(obsId)
+            ],
+          ])).filter(([obsLabelsType]) => Boolean(obsLabelsType)),
+        ),
       };
     }
     return null;

package/src/shared-mui/styles.js

@@ -57,6 +57,29 @@ const sharedThemeOptions = {
   },
 };
 
+const lightPalette = {
+  type: 'light',
+  primary: grey,
+  secondary: grey,
+  primaryBackground: '#F1F1F1',
+  primaryBackgroundHighlight: '#FFFFFF',
+  primaryBackgroundInput: '#FFFFFF',
+  primaryBackgroundDim: '#8A8A8A',
+  primaryBackgroundLight: '#e0e0e0',
+  primaryForeground: '#333333',
+  primaryForegroundL5: 'rgb(64, 64, 64)', // lighten(map-get($theme-colors, "primary-foreground"), 5%);
+  primaryForegroundL10: 'rgb(77, 77, 77)', // lighten(map-get($theme-colors, "primary-foreground"), 10%);
+  primaryForegroundD15: 'rgb(13, 13, 13)', // darken(map-get($theme-colors, "primary-foreground"), 15%);
+  primaryForegroundDim: '#808080',
+  primaryForegroundActive: '#0074D9',
+  secondaryBackground: '#F1F1F1',
+  secondaryBackgroundDim: '#C0C0C0',
+  secondaryForeground: '#222222',
+  gridLayoutBackground: '#FFFFFF',
+  cardBorder: 'rgba(241, 241, 241, 0.125)',
+  tooltipText: 'rgba(0, 0, 0, 0.87)',
+};
+
 export const muiTheme = {
   dark: createTheme({
     palette: {
@@ -83,31 +106,28 @@ export const muiTheme = {
       ...globalColors,
     },
     ...sharedThemeOptions,
+    cardBorderSize: '1px',
   }),
   light: createTheme({
     palette: {
-      type: 'light',
-      primary: grey,
-      secondary: grey,
-      primaryBackground: '#F1F1F1',
-      primaryBackgroundHighlight: '#FFFFFF',
-      primaryBackgroundInput: '#FFFFFF',
-      primaryBackgroundDim: '#8A8A8A',
-      primaryBackgroundLight: '#e0e0e0',
-      primaryForeground: '#333333',
-      primaryForegroundL5: 'rgb(64, 64, 64)', // lighten(map-get($theme-colors, "primary-foreground"), 5%);
-      primaryForegroundL10: 'rgb(77, 77, 77)', // lighten(map-get($theme-colors, "primary-foreground"), 10%);
-      primaryForegroundD15: 'rgb(13, 13, 13)', // darken(map-get($theme-colors, "primary-foreground"), 15%);
-      primaryForegroundDim: '#808080',
-      primaryForegroundActive: '#0074D9',
-      secondaryBackground: '#F1F1F1',
-      secondaryBackgroundDim: '#C0C0C0',
-      secondaryForeground: '#222222',
+      ...lightPalette,
+      ...globalColors,
+    },
+    ...sharedThemeOptions,
+    cardBorderSize: '1px',
+  }),
+  light2: createTheme({
+    palette: {
+      ...lightPalette,
+      primaryBackground: '#FFFFFF',
+      primaryBackgroundHighlight: '#F1F1F1',
+      primaryBackgroundInput: '#F1F1F1',
+      secondaryBackground: '#FFFFFF',
       gridLayoutBackground: '#FFFFFF',
-      cardBorder: 'rgba(241, 241, 241, 0.125)',
-      tooltipText: 'rgba(0, 0, 0, 0.87)',
+      cardBorder: '#ccc',
       ...globalColors,
     },
     ...sharedThemeOptions,
+    cardBorderSize: '2px',
   }),
 };

package/src/state/hooks.js

@@ -6,7 +6,7 @@ import createContext from 'zustand/context';
 import shallow from 'zustand/shallow';
 import { isMatch, cloneDeep } from 'lodash-es';
 import { CoordinationType } from '@vitessce/constants-internal';
-import { fromEntries, capitalize } from '@vitessce/utils';
+import { capitalize } from '@vitessce/utils';
 import { getCoordinationSpaceAndScopes } from '@vitessce/config';
 import {
   removeImageChannelInMetaCoordinationScopesHelper,
@@ -444,7 +444,7 @@ const useGridSizeStore = create(set => ({
 export function useInitialCoordination(parameters, coordinationScopes) {
   const values = useViewConfigStore((state) => {
     const { coordinationSpace } = state.initialViewConfig;
-    return fromEntries(parameters.map((parameter) => {
+    return Object.fromEntries(parameters.map((parameter) => {
       if (coordinationSpace && coordinationSpace[parameter]) {
         const value = coordinationSpace[parameter][coordinationScopes[parameter]];
         return [parameter, value];
@@ -476,7 +476,7 @@ export function useCoordination(parameters, coordinationScopes) {
 
   const values = useViewConfigStore((state) => {
     const { coordinationSpace } = state.viewConfig;
-    return fromEntries(parameters.map((parameter) => {
+    return Object.fromEntries(parameters.map((parameter) => {
       if (coordinationSpace) {
         const parameterScope = getParameterScope(parameter, coordinationScopes);
         if (coordinationSpace && coordinationSpace[parameter]) {
@@ -488,7 +488,7 @@ export function useCoordination(parameters, coordinationScopes) {
     }));
   }, shallow);
 
-  const setters = useMemo(() => fromEntries(parameters.map((parameter) => {
+  const setters = useMemo(() => Object.fromEntries(parameters.map((parameter) => {
     const setterName = `set${capitalize(parameter)}`;
     const setterFunc = value => setCoordinationValue({
       parameter,
@@ -539,7 +539,7 @@ export function useMultiCoordinationScopesSecondary(
     const scopes = getParameterScope(byType, coordinationScopes);
     if (scopes && coordinationScopesBy?.[byType]?.[parameter]) {
       const scopesArr = Array.isArray(scopes) ? scopes : [scopes];
-      return [scopesArr, fromEntries(scopesArr.map((scope) => {
+      return [scopesArr, Object.fromEntries(scopesArr.map((scope) => {
         const secondaryScopes = coordinationScopesBy[byType][parameter][scope];
         const secondaryScopesArr = Array.isArray(secondaryScopes)
           ? secondaryScopes
@@ -550,7 +550,7 @@ export function useMultiCoordinationScopesSecondary(
     // Fallback from fine-grained to coarse-grained.
     if (scopes && !coordinationScopesBy?.[byType]?.[parameter] && coordinationScopes?.[parameter]) {
       const scopesArr = Array.isArray(scopes) ? scopes : [scopes];
-      return [scopesArr, fromEntries(scopesArr.map((scope) => {
+      return [scopesArr, Object.fromEntries(scopesArr.map((scope) => {
         const secondaryScopes = coordinationScopes?.[parameter];
         const secondaryScopesArr = Array.isArray(secondaryScopes)
           ? secondaryScopes
@@ -586,7 +586,7 @@ export function useMultiCoordinationScopesSecondaryNonNull(
         }
         return false;
       });
-      return [scopesNonNull, fromEntries(scopesNonNull.map((scope) => {
+      return [scopesNonNull, Object.fromEntries(scopesNonNull.map((scope) => {
         const secondaryScopes = coordinationScopesBy[byType][parameter][scope];
         const secondaryScopesArr = Array.isArray(secondaryScopes)
           ? secondaryScopes
@@ -611,7 +611,7 @@ export function useMultiCoordinationScopesSecondaryNonNull(
         }
         return false;
       });
-      return [scopesNonNull, fromEntries(scopesNonNull.map((scope) => {
+      return [scopesNonNull, Object.fromEntries(scopesNonNull.map((scope) => {
         const secondaryScopes = coordinationScopes?.[parameter];
         const secondaryScopesArr = Array.isArray(secondaryScopes)
           ? secondaryScopes
@@ -638,7 +638,7 @@ export function useMultiCoordinationValues(parameter, coordinationScopes) {
     const { coordinationSpace } = state.viewConfig;
     // Convert a single scope to an array of scopes to be consistent.
     const scopesArr = Array.isArray(scopes) ? scopes : [scopes];
-    return fromEntries(scopesArr.map((scope) => {
+    return Object.fromEntries(scopesArr.map((scope) => {
       if (coordinationSpace && coordinationSpace[parameter]) {
         const value = coordinationSpace[parameter][scope];
         return [scope, value];
@@ -689,8 +689,8 @@ export function useComplexCoordination(
     if (typeScopes) {
       // Convert a single scope to an array of scopes to be consistent.
       const typeScopesArr = Array.isArray(typeScopes) ? typeScopes : [typeScopes];
-      return fromEntries(typeScopesArr.map((datasetScope) => {
-        const datasetValues = fromEntries(parameters.map((parameter, i) => {
+      return Object.fromEntries(typeScopesArr.map((datasetScope) => {
+        const datasetValues = Object.fromEntries(parameters.map((parameter, i) => {
           if (parameterSpaces[i]) {
             const parameterSpace = parameterSpaces[i];
             const parameterScope = getParameterScopeBy(
@@ -722,8 +722,8 @@ export function useComplexCoordination(
     if (typeScopes) {
       // Convert a single scope to an array of scopes to be consistent.
       const typeScopesArr = Array.isArray(typeScopes) ? typeScopes : [typeScopes];
-      return fromEntries(typeScopesArr.map((datasetScope) => {
-        const datasetSetters = fromEntries(parameters.map((parameter) => {
+      return Object.fromEntries(typeScopesArr.map((datasetScope) => {
+        const datasetSetters = Object.fromEntries(parameters.map((parameter) => {
           const setterName = `set${capitalize(parameter)}`;
           const setterFunc = value => setCoordinationValue({
             parameter,
@@ -939,7 +939,7 @@ export function useAuxiliaryCoordination(parameters, coordinationScopes) {
   const mappedParameters = mapParameters(parameters);
   const values = useAuxiliaryStore((state) => {
     const { auxiliaryStore } = state;
-    return fromEntries(mappedParameters.map((parameter) => {
+    return Object.fromEntries(mappedParameters.map((parameter) => {
       if (auxiliaryStore && auxiliaryStore[parameter]) {
         const value = auxiliaryStore[parameter][mappedCoordinationScopes[parameter]];
         return [parameter, value];
@@ -947,7 +947,7 @@ export function useAuxiliaryCoordination(parameters, coordinationScopes) {
       return [parameter, undefined];
     }));
   }, shallow);
-  const setters = useMemo(() => fromEntries(mappedParameters.map((parameter) => {
+  const setters = useMemo(() => Object.fromEntries(mappedParameters.map((parameter) => {
     const setterName = `set${capitalize(parameter)}`;
     const setterFunc = value => setCoordinationValue({
       parameter,

package/src/title-styles.js

@@ -37,7 +37,7 @@ export const useTitleStyles = makeStyles(theme => ({
     },
   },
   card: {
-    border: `1px solid ${theme.palette.cardBorder}`,
+    border: `${theme.cardBorderSize} solid ${theme.palette.cardBorder}`,
     flex: '1 1 auto',
     minHeight: '1px',
     padding: '12px',

package/src/view-config-utils.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-plusplus */
 /* eslint-disable camelcase */
 import { cloneDeep } from 'lodash-es';
-import { fromEntries, getNextScope } from '@vitessce/utils';
+import { getNextScope } from '@vitessce/utils';
 import {
   AUTO_INDEPENDENT_COORDINATION_TYPES,
   META_VERSION,
@@ -39,7 +39,7 @@ export function getExistingScopesForCoordinationType(config, coordinationType) {
  * @returns {object} The new view config.
  */
 function coordinateComponentsTogether(config, coordinationType, scopeValue, viewTypes) {
-  const componentCoordinationTypes = fromEntries(
+  const componentCoordinationTypes = Object.fromEntries(
     viewTypes.map(vt => ([vt.name, vt.coordinationTypes])),
   );
   const scopeName = getNextScope(getExistingScopesForCoordinationType(config, coordinationType));
@@ -83,7 +83,7 @@ function coordinateComponentsTogether(config, coordinationType, scopeValue, view
  * @returns {object} The new view config.
  */
 function coordinateComponentsIndependent(config, coordinationType, scopeValue, viewTypes) {
-  const componentCoordinationTypes = fromEntries(
+  const componentCoordinationTypes = Object.fromEntries(
     viewTypes.map(vt => ([vt.name, vt.coordinationTypes])),
   );
   const newConfig = {
@@ -133,10 +133,10 @@ function initializeAuto(config, coordinationTypeObjs, viewTypeObjs) {
   let newConfig = config;
   const { layout, datasets } = newConfig;
 
-  const componentCoordinationTypes = fromEntries(
+  const componentCoordinationTypes = Object.fromEntries(
     viewTypeObjs.map(vt => ([vt.name, vt.coordinationTypes])),
   );
-  const defaultCoordinationValues = fromEntries(
+  const defaultCoordinationValues = Object.fromEntries(
     coordinationTypeObjs.map(ct => ([ct.name, ct.defaultValue])),
   );
   const coordinationTypes = coordinationTypeObjs.map(ct => ct.name);
@@ -215,7 +215,7 @@ function assignViewUids(config) {
  * @returns The view config containing expanded minimal file types.
  */
 function expandConvenienceFileDefs(config, jointFileTypes) {
-  const convenienceFileTypes = fromEntries(
+  const convenienceFileTypes = Object.fromEntries(
     jointFileTypes.map(ft => ([ft.name, ft.expandFunction])),
   );
   const { datasets: currDatasets } = config;

package/src/vitessce-grid-utils.js

@@ -3,7 +3,6 @@ import {
 } from 'react';
 import { InternMap } from 'internmap';
 import { isEqual, pick } from 'lodash-es';
-import { fromEntries } from '@vitessce/utils';
 import { DATA_TYPE_COORDINATION_VALUE_USAGE } from '@vitessce/constants-internal';
 import { getSourceAndLoaderFromFileType, getDataTypeFromFileType } from './data/loader-registry.js';
 
@@ -127,7 +126,7 @@ function withDefaults(
 export function createLoaders(datasets, configDescription, fileTypes, coordinationTypes, stores) {
   const result = {};
   const dataSources = new InternMap([], JSON.stringify);
-  const defaultCoordinationValues = fromEntries(
+  const defaultCoordinationValues = Object.fromEntries(
     coordinationTypes.map(ct => ([ct.name, ct.defaultValue])),
   );
   datasets.forEach((dataset) => {