@vitessce/vit-s 2.0.3 → 3.0.1

package/dist-tsc/shared-mui/container.js

@@ -0,0 +1,211 @@
+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/dist-tsc/shared-mui/styles.d.ts

@@ -0,0 +1,5 @@
+export namespace muiTheme {
+    const dark: import("@material-ui/core").Theme;
+    const light: import("@material-ui/core").Theme;
+}
+//# sourceMappingURL=styles.d.ts.map

package/dist-tsc/shared-mui/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/shared-mui/styles.js"],"names":[],"mappings":""}

package/dist-tsc/shared-mui/styles.js

@@ -0,0 +1,109 @@
+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)',
+    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)',
+            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)',
+            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)',
+            tooltipText: 'rgba(0, 0, 0, 0.87)',
+            ...globalColors,
+        },
+        ...sharedThemeOptions,
+    }),
+};

package/dist-tsc/shared-plot-options/CellColorEncodingOption.d.ts

@@ -0,0 +1,2 @@
+export default function CellColorEncodingOption(props: any): JSX.Element;
+//# sourceMappingURL=CellColorEncodingOption.d.ts.map

package/dist-tsc/shared-plot-options/CellColorEncodingOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellColorEncodingOption.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/CellColorEncodingOption.js"],"names":[],"mappings":"AAMA,yEAmCC"}

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

@@ -0,0 +1,17 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+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 (_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-tsc/shared-plot-options/OptionSelect.d.ts

@@ -0,0 +1,2 @@
+export default function OptionSelect(props: any): JSX.Element;
+//# sourceMappingURL=OptionSelect.d.ts.map

package/dist-tsc/shared-plot-options/OptionSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionSelect.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/OptionSelect.js"],"names":[],"mappings":"AAIA,8DAcC"}

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx(Select, { native: true, disableUnderline: true, ...props, classes: {
+            root: classes.optionSelectRoot,
+            ...classesProp,
+        } }));
+}

package/dist-tsc/shared-plot-options/OptionsContainer.d.ts

@@ -0,0 +1,2 @@
+export default function OptionsContainer(props: any): JSX.Element;
+//# sourceMappingURL=OptionsContainer.d.ts.map

package/dist-tsc/shared-plot-options/OptionsContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsContainer.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/OptionsContainer.js"],"names":[],"mappings":"AAIA,kEAkBC"}

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_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-tsc/shared-plot-options/index.d.ts

@@ -0,0 +1,5 @@
+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";
+//# sourceMappingURL=index.d.ts.map

package/dist-tsc/shared-plot-options/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/index.js"],"names":[],"mappings":""}

package/dist-tsc/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/dist-tsc/shared-plot-options/styles.d.ts

@@ -0,0 +1,2 @@
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<never>;
+//# sourceMappingURL=styles.d.ts.map

package/dist-tsc/shared-plot-options/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/styles.js"],"names":[],"mappings":"AAEA,2GA8CI"}

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

@@ -0,0 +1,48 @@
+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',
+        },
+    },
+    optionSelectRoot: {
+        padding: 0,
+        height: 'auto',
+    },
+}));