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

package/src/schemas/schema-schema.sh

@@ -0,0 +1,34 @@
+#!/usr/bin/env bash
+set -o errexit
+
+die() { set +v; echo "$*" 1>&2 ; exit 1; }
+
+# This is a totally ad-hoc script to ensure some consistency in our schemas.
+# We want to be sure that each "properties" also specifies "additionalProperties" and "required".
+
+FAILURES=$(
+  SCHEMA_DIR=`dirname $0`
+  for SCHEMA in $SCHEMA_DIR/*.schema.json; do
+    export SCHEMA
+    grep -B2 '"properties"' $SCHEMA \
+      | perl -pne 's/\n//; s/\s+/ /g; s/--/\n/;' \
+      | perl -ne 'next unless /properties/; print "$ENV{SCHEMA}: $_" unless /"additionalProperties".*"(required|oneOf|allOf|anyOf)".*"properties"/;'
+  done
+)
+
+if [[ $FAILURES ]]; then
+  die "Check that 'additionalProperties' & 'required' & 'properties' are provided:
+$FAILURES"
+fi
+
+# Check that existing schemas have not changed.
+for SCHEMA in $SCHEMA_DIR/config-*.schema.json; do
+  SCHEMA_NAME=`basename $SCHEMA`
+  SCHEMA_RESPONSE=`curl -s https://raw.githubusercontent.com/vitessce/vitessce/main/src/schemas/$SCHEMA_NAME`
+  if [ "$SCHEMA_RESPONSE" == "404: Not Found" ]; then
+    echo "Schema $SCHEMA is not in production yet."
+  else
+    diff --ignore-all-space $SCHEMA <(echo "$SCHEMA_RESPONSE") \
+      || die "$SCHEMA has changed.  Please do not change existing schema; instead, make a new schema."
+  fi
+done

package/src/shared-mui/components.js

@@ -0,0 +1,81 @@
+import React, { useRef } from 'react';
+import {
+  makeStyles,
+  Paper,
+  Popper,
+  IconButton,
+  MenuList,
+  ClickAwayListener,
+  Fade,
+} from '@material-ui/core';
+import { useVitessceContainer } from '../hooks.js';
+
+const useStyles = makeStyles(() => ({
+  paper: {
+    maxHeight: 200,
+    overflow: 'auto',
+  },
+  container: {
+    position: 'relative',
+    left: 0,
+    top: 0,
+  },
+}));
+
+export function PopperMenu(props) {
+  const {
+    buttonIcon,
+    open,
+    setOpen,
+    children,
+    buttonClassName,
+    placement = 'bottom-end',
+  } = props;
+  const classes = useStyles();
+
+  const anchorRef = useRef();
+
+  const handleClick = () => {
+    setOpen(prev => !prev);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const id = open ? 'v-popover-menu' : undefined;
+
+  const getTooltipContainer = useVitessceContainer(anchorRef);
+
+  return (
+    <div ref={anchorRef} className={classes.container}>
+      <IconButton
+        aria-describedby={id}
+        onClick={handleClick}
+        size="small"
+        className={buttonClassName}
+      >
+        {buttonIcon}
+      </IconButton>
+      <Popper
+        id={id}
+        open={open}
+        anchorEl={anchorRef && anchorRef.current}
+        container={getTooltipContainer}
+        onClose={handleClose}
+        placement={placement}
+        transition
+      >
+        {({ TransitionProps }) => (
+          <ClickAwayListener onClickAway={handleClose}>
+            <Fade {...TransitionProps} timeout={100}>
+              <Paper elevation={4} className={classes.paper}>
+                <MenuList>{children}</MenuList>
+              </Paper>
+            </Fade>
+          </ClickAwayListener>
+        )}
+      </Popper>
+    </div>
+  );
+}

package/src/shared-mui/container.js

@@ -0,0 +1,212 @@
+import { makeStyles } from '@material-ui/core';
+
+export const useVitessceContainerStyles = makeStyles(theme => ({
+  vitessceContainer: {
+    position: 'relative',
+    margin: '0',
+    textAlign: 'left',
+    backgroundColor: theme.palette.gridLayoutBackground,
+    '& div': {
+      fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
+      fontSize: '16px',
+      fontWeight: '400',
+      lineHeight: '1.5',
+      textAlign: 'left',
+    },
+    '& p': {
+      marginTop: '0',
+      marginBottom: '16px',
+    },
+    '& *, ::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',
+    },
+  },
+}));

package/src/shared-mui/styles.js

@@ -0,0 +1,113 @@
+import { createTheme, colors } from '@material-ui/core';
+
+const { grey } = colors;
+
+const globalColors = {
+  white: '#FFFFFF',
+  grayLight: '#D3D3D3',
+  grayMid: '#808080',
+  grayDark: '#555555',
+  black: '#000000',
+  grayDarkL5: 'rgb(98, 98, 98)', // lighten(map-get($global-colors, "gray-dark"), 5%);
+  grayDarkD15: 'rgb(47, 47, 47)', // darken(map-get($global-colors, "gray-dark"), 15%);
+  grayMidL10: 'rgb(154, 154, 154)', // lighten(map-get($global-colors, "gray-mid"), 10%);
+  grayLightL10: 'rgb(237, 237, 237)', // lighten(map-get($global-colors, "gray-light"), 10%);
+};
+
+const sharedThemeOptions = {
+  // Use px instead of rem, so that sizing is consistent despite the root element font-size.
+  // Reference: https://github.com/mui/material-ui/blob/627c08fc/src/styles/createTypography.js
+  typography: {
+    pxToRem: size => `${size}px`,
+    display4: {
+      fontSize: '112px',
+    },
+    display3: {
+      fontSize: '56px',
+    },
+    display2: {
+      fontSize: '45px',
+    },
+    display1: {
+      fontSize: '34px',
+    },
+    headline: {
+      fontSize: '24px',
+    },
+    title: {
+      fontSize: '21px',
+    },
+    subheading: {
+      fontSize: '16px',
+    },
+    body2: {
+      fontSize: '14px',
+    },
+    body1: {
+      fontSize: '14px',
+    },
+    caption: {
+      fontSize: '12px',
+    },
+  },
+  props: {
+    MuiButtonBase: {
+      disableRipple: true,
+    },
+  },
+};
+
+export const muiTheme = {
+  dark: createTheme({
+    palette: {
+      type: 'dark',
+      primary: grey,
+      secondary: grey,
+      primaryBackground: '#222222',
+      primaryBackgroundHighlight: '#000000',
+      primaryBackgroundInput: '#D3D3D3',
+      primaryBackgroundDim: '#333333',
+      primaryBackgroundLight: '#757575',
+      primaryForeground: '#D3D3D3',
+      primaryForegroundL5: 'rgb(224, 224, 224)',
+      primaryForegroundL10: 'rgb(237, 237, 237)',
+      primaryForegroundD15: 'rgb(173, 173, 173)',
+      primaryForegroundDim: '#000000',
+      primaryForegroundActive: '#9bb7d6',
+      secondaryBackground: '#000000',
+      secondaryBackgroundDim: '#444444',
+      secondaryForeground: '#D3D3D3',
+      gridLayoutBackground: '#333333',
+      cardBorder: 'rgba(0, 0, 0, 0.125)',
+      tooltipText: '#FFFFFF',
+      ...globalColors,
+    },
+    ...sharedThemeOptions,
+  }),
+  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',
+      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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { TableCell, TableRow } from '@material-ui/core';
+import { capitalize } from '@vitessce/utils';
+import OptionSelect from './OptionSelect.js';
+import { useStyles } from './styles.js';
+
+export default function CellColorEncodingOption(props) {
+  const {
+    observationsLabel,
+    cellColorEncoding,
+    setCellColorEncoding,
+  } = props;
+
+  const classes = useStyles();
+
+  const observationsLabelNice = capitalize(observationsLabel);
+
+  function handleColorEncodingChange(event) {
+    setCellColorEncoding(event.target.value);
+  }
+
+  return (
+    <TableRow>
+      <TableCell className={classes.labelCell} htmlFor="cell-color-encoding-select">
+        {observationsLabelNice} Color Encoding
+      </TableCell>
+      <TableCell className={classes.inputCell}>
+        <OptionSelect
+          className={classes.select}
+          value={cellColorEncoding}
+          onChange={handleColorEncodingChange}
+          inputProps={{
+            id: 'cell-color-encoding-select',
+          }}
+        >
+          <option value="cellSetSelection">Cell Sets</option>
+          <option value="geneSelection">Gene Expression</option>
+        </OptionSelect>
+      </TableCell>
+    </TableRow>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,49 @@
+import { makeStyles } from '@material-ui/core';
+
+export const useStyles = makeStyles(theme => ({
+  box: {
+    boxSizing: 'border-box',
+  },
+  checkbox: {
+    padding: '3px',
+    color: theme.palette.primaryForeground,
+    '&:checked': {
+      color: theme.palette.primaryForeground,
+    },
+    '& input': {
+      height: '100%',
+    },
+  },
+  slider: {
+    color: theme.palette.primaryForeground,
+    minWidth: '60px',
+    padding: '10px 0 10px 0',
+  },
+  sliderValueLabel: {
+    '& span': {
+      '& span': {
+        color: theme.palette.primaryBackground,
+      },
+    },
+  },
+  tableContainer: {
+    overflow: 'hidden',
+    overflowX: 'hidden !important',
+  },
+  labelCell: {
+    padding: '2px 8px 2px 16px',
+  },
+  inputCell: {
+    padding: '2px 16px 2px 8px',
+    overflow: 'visible',
+  },
+  select: {
+    '& select': {
+      fontSize: '14px',
+    },
+  },
+  selectRoot: {
+    padding: 0,
+    height: 'auto',
+  },
+}));