@vitessce/vit-s 3.5.11 → 3.6.0

package/src/shared-mui/container.js

@@ -1,6 +1,8 @@
-import { makeStyles } from '@material-ui/core';
+/* eslint-disable react-refresh/only-export-components */
+import React from 'react';
+import { makeStyles, ScopedGlobalStyles } from '@vitessce/styles';
 
-export const useVitessceContainerStyles = makeStyles(theme => ({
+export const useVitessceContainerStyles = makeStyles()(theme => ({
   vitessceContainer: {
     position: 'relative',
     margin: '0',
@@ -20,193 +22,207 @@ export const useVitessceContainerStyles = makeStyles(theme => ({
     '& *, ::after, ::before': {
       boxSizing: 'border-box',
     },
-    // Manually converted styles from 'react-grid-layout/css/styles.css',
-    // using https://cssinjs.org/jss-plugin-global/?v=v10.9.2
-    // so that no CSS or SCSS import is required.
-    '@global .react-grid-layout': {
-      transition: 'height 200ms ease',
-      // Custom
-      height: 'auto',
-      position: 'absolute',
-      width: '100%',
-    },
-    '@global .react-grid-item': {
-      transition: 'all 200ms ease',
-      transitionProperty: 'left, top',
-      // Custom
-      flexDirection: 'column!important',
-      display: 'flex!important',
-      /* So the resize handle position looks correct: */
-      paddingRight: '10px',
-    },
-    '@global .react-grid-item img': {
-      pointerEvents: 'none',
-      userSelect: 'none',
-    },
-    '@global .react-grid-item.cssTransforms': {
-      transitionProperty: 'transform',
-    },
-    '@global .react-grid-item.resizing': {
-      zIndex: '1',
-      willChange: 'width, height',
-    },
-    '@global .react-grid-item.react-draggable-dragging': {
-      transition: 'none',
-      zIndex: '3',
-      willChange: 'transform',
-    },
-    '@global .react-grid-item.dropping': {
-      visibility: 'hidden',
-    },
-    '@global .react-grid-item.react-grid-placeholder': {
-      background: 'red',
-      opacity: '0.2',
-      transitionDuration: '100ms',
-      zIndex: '2',
-      userSelect: 'none',
-    },
-    '@global .react-grid-item > .react-resizable-handle': {
-      position: 'absolute',
-      width: '20px',
-      height: '20px',
-    },
-    '@global .react-grid-item > .react-resizable-handle::after': {
-      content: '""',
-      position: 'absolute',
-      right: '3px',
-      bottom: '3px',
-      width: '5px',
-      height: '5px',
-      borderRight: '2px solid rgba(0, 0, 0, 0.4)',
-      borderBottom: '2px solid rgba(0, 0, 0, 0.4)',
-    },
-    '@global .react-resizable-hide > .react-resizable-handle': {
-      display: 'none',
-    },
-    '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
-      bottom: '0',
-      left: '0',
-      cursor: 'sw-resize',
-      transform: 'rotate(90deg)',
-    },
-    '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
-      bottom: '0',
-      right: '0',
-      cursor: 'se-resize',
-    },
-    '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
-      top: '0',
-      left: '0',
-      cursor: 'nw-resize',
-      transform: 'rotate(180deg)',
-    },
-    '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
-      top: '0',
-      right: '0',
-      cursor: 'ne-resize',
-      transform: 'rotate(270deg)',
-    },
-    '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
-      top: '50%',
-      marginTop: '-10px',
-      cursor: 'ew-resize',
-      left: '0',
-      transform: 'rotate(135deg)',
-    },
-    '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
-      top: '50%',
-      marginTop: '-10px',
-      cursor: 'ew-resize',
-      right: '0',
-      transform: 'rotate(315deg)',
-    },
-    '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
-      left: '50%',
-      marginLeft: '-10px',
-      cursor: 'ns-resize',
-      top: '0',
-      transform: 'rotate(225deg)',
-    },
-    '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
-      left: '50%',
-      marginLeft: '-10px',
-      cursor: 'ns-resize',
-      bottom: '0',
-      transform: 'rotate(45deg)',
-    },
-    // Manually converted styles from 'react-resizable/css/styles.css',
-    '@global .react-resizable': {
-      position: 'relative',
-    },
-    '@global .react-resizable-handle': {
-      position: 'absolute',
-      width: '20px',
-      height: '20px',
-      backgroundRepeat: 'no-repeat',
-      backgroundOrigin: 'content-box',
-      boxSizing: 'border-box',
-      backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
-      backgroundPosition: 'bottom right',
-      padding: '0 3px 3px 0',
-    },
-    '@global .react-resizable-handle-sw': {
-      bottom: '0',
-      left: '0',
-      cursor: 'sw-resize',
-      transform: 'rotate(90deg)',
-    },
-    '@global .react-resizable-handle-se': {
-      bottom: '0',
-      right: '0',
-      cursor: 'se-resize',
-    },
-    '@global .react-resizable-handle-nw': {
-      top: '0',
-      left: '0',
-      cursor: 'nw-resize',
-      transform: 'rotate(180deg)',
-    },
-    '@global .react-resizable-handle-ne': {
-      top: '0',
-      right: '0',
-      cursor: 'ne-resize',
-      transform: 'rotate(270deg)',
-    },
-    '@global .react-resizable-handle-w': {
-      top: '50%',
-      marginTop: '-10px',
-      cursor: 'ew-resize',
-      left: '0',
-      transform: 'rotate(135deg)',
-    },
-    '@global .react-resizable-handle-e': {
-      top: '50%',
-      marginTop: '-10px',
-      cursor: 'ew-resize',
-      right: '0',
-      transform: 'rotate(315deg)',
-    },
-    '@global .react-resizable-handle-n': {
-      left: '50%',
-      marginLeft: '-10px',
-      cursor: 'ns-resize',
-      top: '0',
-      transform: 'rotate(225deg)',
-    },
-    '@global .react-resizable-handle-s': {
-      left: '50%',
-      marginLeft: '-10px',
-      cursor: 'ns-resize',
-      bottom: '0',
-      transform: 'rotate(45deg)',
-    },
-    // Custom
-    '@global .react-draggable-transparent-selection .react-grid-item': {
-      /* These styles prevent text selection during resize drag interactions.
-        The react-draggable-transparent-selection class is added to the body
-        element during resizing and removed after resizing has finished.
-        Not part of mixin because acts outside of .vitessce-container. */
-      userSelect: 'none !important',
-    },
   },
 }));
+
+const gridLayoutStyles = {
+  // Manually converted styles from 'react-grid-layout/css/styles.css',
+  // using https://cssinjs.org/jss-plugin-global/?v=v10.9.2
+  // so that no CSS or SCSS import is required.
+  '.react-grid-layout': {
+    transition: 'height 200ms ease',
+    // Custom
+    height: 'auto',
+    position: 'absolute',
+    width: '100%',
+  },
+  '.react-grid-item': {
+    transition: 'all 200ms ease',
+    transitionProperty: 'left, top',
+    // Custom
+    flexDirection: 'column!important',
+    display: 'flex!important',
+    /* So the resize handle position looks correct: */
+    paddingRight: '10px',
+  },
+  '.react-grid-item img': {
+    pointerEvents: 'none',
+    userSelect: 'none',
+  },
+  '.react-grid-item.cssTransforms': {
+    transitionProperty: 'transform',
+  },
+  '.react-grid-item.resizing': {
+    zIndex: '1',
+    willChange: 'width, height',
+  },
+  '.react-grid-item.react-draggable-dragging': {
+    transition: 'none',
+    zIndex: '3',
+    willChange: 'transform',
+  },
+  '.react-grid-item.dropping': {
+    visibility: 'hidden',
+  },
+  '.react-grid-item.react-grid-placeholder': {
+    background: 'red',
+    opacity: '0.2',
+    transitionDuration: '100ms',
+    zIndex: '2',
+    userSelect: 'none',
+  },
+  '.react-grid-item > .react-resizable-handle': {
+    position: 'absolute',
+    width: '20px',
+    height: '20px',
+  },
+  '.react-grid-item > .react-resizable-handle::after': {
+    content: '""',
+    position: 'absolute',
+    right: '3px',
+    bottom: '3px',
+    width: '5px',
+    height: '5px',
+    borderRight: '2px solid rgba(0, 0, 0, 0.4)',
+    borderBottom: '2px solid rgba(0, 0, 0, 0.4)',
+  },
+  '.react-resizable-hide > .react-resizable-handle': {
+    display: 'none',
+  },
+  '.react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
+    bottom: '0',
+    left: '0',
+    cursor: 'sw-resize',
+    transform: 'rotate(90deg)',
+  },
+  '.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
+    bottom: '0',
+    right: '0',
+    cursor: 'se-resize',
+  },
+  '.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
+    top: '0',
+    left: '0',
+    cursor: 'nw-resize',
+    transform: 'rotate(180deg)',
+  },
+  '.react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
+    top: '0',
+    right: '0',
+    cursor: 'ne-resize',
+    transform: 'rotate(270deg)',
+  },
+  '.react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
+    top: '50%',
+    marginTop: '-10px',
+    cursor: 'ew-resize',
+    left: '0',
+    transform: 'rotate(135deg)',
+  },
+  '.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+    top: '50%',
+    marginTop: '-10px',
+    cursor: 'ew-resize',
+    right: '0',
+    transform: 'rotate(315deg)',
+  },
+  '.react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
+    left: '50%',
+    marginLeft: '-10px',
+    cursor: 'ns-resize',
+    top: '0',
+    transform: 'rotate(225deg)',
+  },
+  '.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+    left: '50%',
+    marginLeft: '-10px',
+    cursor: 'ns-resize',
+    bottom: '0',
+    transform: 'rotate(45deg)',
+  },
+  // Manually converted styles from 'react-resizable/css/styles.css',
+  '.react-resizable': {
+    position: 'relative',
+  },
+  '.react-resizable-handle': {
+    position: 'absolute',
+    width: '20px',
+    height: '20px',
+    backgroundRepeat: 'no-repeat',
+    backgroundOrigin: 'content-box',
+    boxSizing: 'border-box',
+    backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
+    backgroundPosition: 'bottom right',
+    padding: '0 3px 3px 0',
+  },
+  '.react-resizable-handle-sw': {
+    bottom: '0',
+    left: '0',
+    cursor: 'sw-resize',
+    transform: 'rotate(90deg)',
+  },
+  '.react-resizable-handle-se': {
+    bottom: '0',
+    right: '0',
+    cursor: 'se-resize',
+  },
+  '.react-resizable-handle-nw': {
+    top: '0',
+    left: '0',
+    cursor: 'nw-resize',
+    transform: 'rotate(180deg)',
+  },
+  '.react-resizable-handle-ne': {
+    top: '0',
+    right: '0',
+    cursor: 'ne-resize',
+    transform: 'rotate(270deg)',
+  },
+  '.react-resizable-handle-w': {
+    top: '50%',
+    marginTop: '-10px',
+    cursor: 'ew-resize',
+    left: '0',
+    transform: 'rotate(135deg)',
+  },
+  '.react-resizable-handle-e': {
+    top: '50%',
+    marginTop: '-10px',
+    cursor: 'ew-resize',
+    right: '0',
+    transform: 'rotate(315deg)',
+  },
+  '.react-resizable-handle-n': {
+    left: '50%',
+    marginLeft: '-10px',
+    cursor: 'ns-resize',
+    top: '0',
+    transform: 'rotate(225deg)',
+  },
+  '.react-resizable-handle-s': {
+    left: '50%',
+    marginLeft: '-10px',
+    cursor: 'ns-resize',
+    bottom: '0',
+    transform: 'rotate(45deg)',
+  },
+  // Custom
+  '.react-draggable-transparent-selection .react-grid-item': {
+    /* These styles prevent text selection during resize drag interactions.
+      The react-draggable-transparent-selection class is added to the body
+      element during resizing and removed after resizing has finished.
+      Not part of mixin because acts outside of .vitessce-container. */
+    userSelect: 'none !important',
+  },
+};
+
+export function GridLayoutGlobalStyles(props) {
+  const { classes } = props;
+
+  return (
+    <ScopedGlobalStyles
+      parentClassName={classes.vitessceContainer}
+      styles={gridLayoutStyles}
+    />
+  );
+}

package/src/shared-mui/styles.js

@@ -1,6 +1,4 @@
-import { createTheme, colors } from '@material-ui/core';
-
-const { grey } = colors;
+import { createTheme, grey } from '@vitessce/styles';
 
 const globalColors = {
   white: '#FFFFFF',
@@ -50,15 +48,17 @@ const sharedThemeOptions = {
       fontSize: '12px',
     },
   },
-  props: {
+  components: {
     MuiButtonBase: {
-      disableRipple: true,
+      defaultProps: {
+        disableRipple: true,
+      },
     },
   },
 };
 
 const lightPalette = {
-  type: 'light',
+  mode: 'light',
   primary: grey,
   secondary: grey,
   primaryBackground: '#F1F1F1',
@@ -76,6 +76,7 @@ const lightPalette = {
   secondaryBackgroundDim: '#C0C0C0',
   secondaryForeground: '#222222',
   gridLayoutBackground: '#FFFFFF',
+  paperBackground: '#FFFFFF',
   cardBorder: 'rgba(241, 241, 241, 0.125)',
   tooltipText: 'rgba(0, 0, 0, 0.87)',
 };
@@ -83,7 +84,7 @@ const lightPalette = {
 export const muiTheme = {
   dark: createTheme({
     palette: {
-      type: 'dark',
+      mode: 'dark',
       primary: grey,
       secondary: grey,
       primaryBackground: '#222222',
@@ -101,6 +102,7 @@ export const muiTheme = {
       secondaryBackgroundDim: '#444444',
       secondaryForeground: '#D3D3D3',
       gridLayoutBackground: '#333333',
+      paperBackground: '#2b2b2b',
       cardBorder: 'rgba(0, 0, 0, 0.125)',
       tooltipText: '#FFFFFF',
       ...globalColors,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useId } from 'react-aria';
-import { TableCell, TableRow } from '@material-ui/core';
+import { TableCell, TableRow } from '@vitessce/styles';
 import { capitalize } from '@vitessce/utils';
 import OptionSelect from './OptionSelect.js';
 import { useStyles } from './styles.js';
@@ -12,7 +12,7 @@ export default function CellColorEncodingOption(props) {
     setCellColorEncoding,
   } = props;
 
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const cellColorEncodingId = useId();
 

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

@@ -1,13 +1,12 @@
 import React from 'react';
-import { Select } from '@material-ui/core';
+import { NativeSelect } from '@vitessce/styles';
 import { useStyles } from './styles.js';
 
 export default function OptionSelect(props) {
   const { classes: classesProp = {} } = props;
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
-    <Select
-      native
+    <NativeSelect
       disableUnderline
       {...props}
       classes={{

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Table, TableBody, TableContainer } from '@material-ui/core';
+import { Box, Table, TableBody, TableContainer } from '@vitessce/styles';
 import { useStyles } from './styles.js';
 
 export default function OptionsContainer(props) {
@@ -7,7 +7,7 @@ export default function OptionsContainer(props) {
     children,
   } = props;
 
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   return (
     <Box className={classes.box}>

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

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@vitessce/styles';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
   box: {
     boxSizing: 'border-box',
   },
@@ -17,7 +17,8 @@ export const useStyles = makeStyles(theme => ({
   slider: {
     color: theme.palette.primaryForeground,
     minWidth: '60px',
-    padding: '10px 0 10px 0',
+    padding: 0,
+    margin: '14px 0 8px 0',
   },
   sliderValueLabel: {
     '& span': {

package/src/shared-warning-styles.js

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@vitessce/styles';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
   warningLayout: {
     backgroundColor: theme.palette.gridLayoutBackground,
     position: 'absolute',

package/src/title-styles.js

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@vitessce/styles';
 
-export const useTitleStyles = makeStyles(theme => ({
+export const useTitleStyles = makeStyles()(theme => ({
   title: {
     color: theme.palette.primaryForeground,
     overflowX: 'hidden',

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

@@ -20,7 +20,7 @@ export function VitessceGridLayout(props) {
   const {
     layout,
     viewTypes, coordinationTypes, fileTypes, stores,
-    padding, margin: marginProp, draggableHandle: draggableHandleClass,
+    padding = 10, margin: marginProp = 10, draggableHandle: draggableHandleClass,
     onResize, onResizeStop, rowHeight, theme, height,
     onRemoveComponent, onLayoutChange: onLayoutChangeProp,
     isBounded,
@@ -216,8 +216,3 @@ export function VitessceGridLayout(props) {
       </>
     )));
 }
-
-VitessceGridLayout.defaultProps = {
-  padding: 10,
-  margin: 10,
-};

package/src/vitessce-grid-layout/VitessceGridLayout.test.jsx

@@ -1,15 +1,10 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import '@testing-library/jest-dom';
-import { cleanup, render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
 
 import React from 'react';
 import { PluginViewType } from '@vitessce/plugins';
 import { VitessceGridLayout } from './VitessceGridLayout.js';
 
-afterEach(() => {
-  cleanup();
-});
-
 function FakeComponent(props) {
   const { text } = props;
   return <span>{text}</span>;