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

package/dist/shared-mui/container.js

@@ -1,211 +0,0 @@
-import { makeStyles } from '@material-ui/core/styles';
-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/dist/shared-mui/styles.js

@@ -1,107 +0,0 @@
-import { createTheme } from '@material-ui/core/styles';
-import { grey } from '@material-ui/core/colors';
-const globalColors = {
-    white: '#FFFFFF',
-    grayLight: '#D3D3D3',
-    grayMid: '#808080',
-    grayDark: '#555555',
-    black: '#000000',
-    grayDarkL5: 'rgb(98, 98, 98)',
-    grayDarkD15: 'rgb(47, 47, 47)',
-    grayMidL10: 'rgb(154, 154, 154)',
-    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)',
-            ...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)',
-            primaryForegroundL10: 'rgb(77, 77, 77)',
-            primaryForegroundD15: 'rgb(13, 13, 13)',
-            primaryForegroundDim: '#808080',
-            primaryForegroundActive: '#0074D9',
-            secondaryBackground: '#F1F1F1',
-            secondaryBackgroundDim: '#C0C0C0',
-            secondaryForeground: '#222222',
-            gridLayoutBackground: '#FFFFFF',
-            cardBorder: 'rgba(241, 241, 241, 0.125)',
-            ...globalColors,
-        },
-        ...sharedThemeOptions,
-    }),
-};

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

@@ -1,18 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
-import { capitalize } from '@vitessce/utils';
-import OptionSelect from './OptionSelect';
-import { useStyles } from './styles';
-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 (_jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, htmlFor: "cell-color-encoding-select", children: [observationsLabelNice, " Color Encoding"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsxs(OptionSelect, { className: classes.select, value: cellColorEncoding, onChange: handleColorEncodingChange, inputProps: {
-                        id: 'cell-color-encoding-select',
-                    }, children: [_jsx("option", { value: "cellSetSelection", children: "Cell Sets" }), _jsx("option", { value: "geneSelection", children: "Gene Expression" })] }) })] }));
-}

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

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import Select from '@material-ui/core/Select';
-import { useStyles } from './styles';
-export default function OptionSelect(props) {
-    const { classes: classesProp = {} } = props;
-    const classes = useStyles();
-    return (_jsx(Select, { native: true, disableUnderline: true, ...props, classes: {
-            root: classes.selectRoot,
-            ...classesProp,
-        } }));
-}

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

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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';
-export default function OptionsContainer(props) {
-    const { children, } = props;
-    const classes = useStyles();
-    return (_jsx(Box, { className: classes.box, children: _jsx(TableContainer, { className: classes.tableContainer, children: _jsx(Table, { className: classes.table, size: "small", children: _jsx(TableBody, { children: children }) }) }) }));
-}

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

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