@vitessce/vit-s 2.0.0-beta.0

package/dist/schemas/raster.schema.json

@@ -0,0 +1,119 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "$id": "https://github.com/vitessce/vitessce/#raster",
+    "title": "Vitessce image data",
+    "type": "object",
+    "definitions": {
+        "transform": {
+            "type": "object",
+            "additionalProperties": false,
+            "oneOf": [{ "required": ["scale", "translate"] }, { "required": ["matrix"] }],
+            "properties": {
+                "scale": { "type": "number" },
+                "translate": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "required": ["y", "x"],
+                    "properties": {
+                        "y": { "type": "number" },
+                        "x": { "type": "number" }
+                    }
+                },
+                "matrix": {
+                    "type": "array",
+                    "items": { "type": "number" },
+                    "minItems": 16,
+                    "maxItems": 16
+                }
+            }
+        },
+        "dimensions": {
+            "type": "array",
+            "items": {
+                "type": "object",
+                "additionalProperties": false,
+                "required": ["field", "type", "values"],
+                "properties": {
+                    "field": { "type": "string" },
+                    "type": {
+                        "type": "string",
+                        "enum": ["quantitative", "nominal", "ordinal", "temporal"]
+                    },
+                    "values": {
+                        "type": ["array", "null"],
+                        "items": { "type": "string" }
+                    }
+                }
+            }
+        },
+        "metadata": {
+            "type": "object",
+            "additionalProperties": false,
+            "anyOf": [{ "required": ["dimensions", "isPyramid"] }, { "required": ["transform"] }, { "required": ["omeTiffOffsetsUrl"] }, { "required": ["isBitmask"] }],
+            "properties": {
+                "dimensions": { "$ref": "#/definitions/dimensions" },
+                "isPyramid": { "type": "boolean" },
+                "transform": { "$ref": "#/definitions/transform" },
+                "isBitmask": { "type": "boolean" },
+                "omeTiffOffsetsUrl": { "type": "string", "format": "uri" }
+            }
+        },
+        "requestInit": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": [],
+            "properties": {
+                "method": {
+                    "type": "string"
+                },
+                "headers": {
+                    "type": "object"
+                },
+                "body": {
+                    "type": "string"
+                },
+                "mode": {
+                    "type": "string"
+                },
+                "credentials": {
+                    "type": "string"
+                },
+                "cache": {
+                    "type": "string"
+                },
+                "redirect": {
+                    "type": "string"
+                },
+                "referrer": {
+                    "type": "string"
+                },
+                "integrity": {
+                    "type": "string"
+                }
+            }
+        },
+        "image": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": ["name", "url", "type"],
+            "properties": {
+                "name": { "type": "string" },
+                "url": { "type": "string", "format": "uri" },
+                "type": { "type": "string" },
+                "metadata": { "$ref": "#/definitions/metadata" },
+                "requestInit": { "$ref": "#/definitions/requestInit" }
+            }
+        }
+    },
+    "additionalProperties": false,
+    "required": ["schemaVersion", "images"],
+    "properties": {
+        "schemaVersion": { "type": "string" },
+        "usePhysicalSizeScaling": { "type": "boolean", "description": "Default is false: passing true in will infer scaling from the reported physcial size" },
+        "renderLayers": { "type": "array", "items": { "type": "string" } },
+        "images": {
+            "type": "array",
+            "items": { "$ref": "#/definitions/image" }
+        }
+    }
+}

package/dist/schemas/schema.test-old.js

@@ -0,0 +1,50 @@
+"use strict";
+// TODO(monorepo)
+/*
+import Ajv from 'ajv';
+import obsSetsSchema from './obsSets.schema';
+import rasterSchema from './raster.schema';
+describe('schemas', () => {
+  [
+    'config-1.0.1',
+    'obsSets',
+    'obsSetsTabular',
+    'raster',
+  ].forEach((type) => {
+    const schemaFile = `${type}.schema.json`;
+    describe(schemaFile, async () => {
+      const schema = await import(`./${schemaFile}`);
+      let validate;
+      if (type === 'config-1.0.1') {
+        const obsSets = obsSetsSchema;
+        const raster = rasterSchema;
+        validate = new Ajv()
+          .addSchema(obsSets)
+          .addSchema(raster)
+          .compile(schema);
+      } else {
+        validate = new Ajv().compile(schema);
+      }
+
+      const [goodFixture, badFixture, badMessage] = [
+        'good', 'bad', 'bad.message',
+      ].map(stem => `${type}.${stem}.json`);
+
+      it(`passes ${goodFixture}`, async () => {
+        const data = await import(`./fixtures/${goodFixture}`);
+        const valid = validate(data);
+        if (!valid) { console.warn(validate.errors); }
+        expect(valid).toEqual(true);
+      });
+
+      it(`fails ${badFixture}`, async () => {
+        const data = await import(`./fixtures/${badFixture}`);
+        const message = await import(`./fixtures/${badMessage}`);
+        const valid = validate(data);
+        expect(valid).toEqual(false);
+        expect(validate.errors).toEqual(message);
+      });
+    });
+  });
+});
+*/

package/dist/schemas/schema.test.js

@@ -0,0 +1,46 @@
+import Ajv from 'ajv';
+/* eslint-disable import/no-dynamic-require */
+/* eslint-disable global-require */
+describe('schemas', () => {
+    [
+        'config-1.0.1',
+        'obsSets',
+        'obsSetsTabular',
+        'raster',
+    ].forEach((type) => {
+        const schemaFile = `${type}.schema.json`;
+        describe(schemaFile, () => {
+            const schema = require(`./${schemaFile}`);
+            let validate;
+            if (type === 'config-1.0.1') {
+                const obsSets = require('./obsSets.schema.json');
+                const raster = require('./raster.schema.json');
+                validate = new Ajv()
+                    .addSchema(obsSets)
+                    .addSchema(raster)
+                    .compile(schema);
+            }
+            else {
+                validate = new Ajv().compile(schema);
+            }
+            const [goodFixture, badFixture, badMessage] = [
+                'good', 'bad', 'bad.message',
+            ].map(stem => `${type}.${stem}.json`);
+            it(`passes ${goodFixture}`, () => {
+                const data = require(`./fixtures/${goodFixture}`);
+                const valid = validate(data);
+                if (!valid) {
+                    console.warn(validate.errors);
+                }
+                expect(valid).toEqual(true);
+            });
+            it(`fails ${badFixture}`, () => {
+                const data = require(`./fixtures/${badFixture}`);
+                const message = require(`./fixtures/${badMessage}`);
+                const valid = validate(data);
+                expect(valid).toEqual(false);
+                expect(validate.errors).toEqual(message);
+            });
+        });
+    });
+});

package/dist/schemas.js

@@ -0,0 +1,4 @@
+import rasterSchema from './schemas/raster.schema';
+import obsSetsSchema from './schemas/obsSets.schema';
+import obsSetsTabularSchema from './schemas/obsSetsTabular.schema';
+export { rasterSchema, obsSetsSchema, obsSetsTabularSchema, };

package/dist/shared-mui/components.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Popper from '@material-ui/core/Popper';
+import IconButton from '@material-ui/core/IconButton';
+import MenuList from '@material-ui/core/MenuList';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Fade from '@material-ui/core/Fade';
+import { useVitessceContainer } from '../hooks';
+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 (_jsxs("div", { ref: anchorRef, className: classes.container, children: [_jsx(IconButton, { "aria-describedby": id, onClick: handleClick, size: "small", className: buttonClassName, children: buttonIcon }), _jsx(Popper, { id: id, open: open, anchorEl: anchorRef && anchorRef.current, container: getTooltipContainer, onClose: handleClose, placement: placement, transition: true, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: handleClose, children: _jsx(Fade, { ...TransitionProps, timeout: 100, children: _jsx(Paper, { elevation: 4, className: classes.paper, children: _jsx(MenuList, { children: children }) }) }) })) })] }));
+}

package/dist/shared-mui/container.js

@@ -0,0 +1,211 @@
+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: '1rem',
+            fontWeight: '400',
+            lineHeight: '1.5',
+            textAlign: 'left',
+        },
+        '& p': {
+            marginTop: '0',
+            marginBottom: '1rem',
+        },
+        '& *, ::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

@@ -0,0 +1,63 @@
+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',
+};
+export const muiTheme = {
+    dark: createTheme({
+        palette: {
+            type: 'dark',
+            primary: grey,
+            secondary: grey,
+            primaryBackground: '#222222',
+            primaryBackgroundHighlight: '#000000',
+            primaryBackgroundInput: '#D3D3D3',
+            primaryBackgroundDim: '#333333',
+            primaryBackgroundLight: '#757575',
+            primaryForeground: '#D3D3D3',
+            primaryForegroundDim: '#000000',
+            primaryForegroundActive: '#9bb7d6',
+            secondaryBackground: '#000000',
+            secondaryBackgroundDim: '#444444',
+            secondaryForeground: '#D3D3D3',
+            gridLayoutBackground: '#333333',
+            cardBorder: 'rgba(0, 0, 0, 0.125)',
+            ...globalColors,
+        },
+        props: {
+            MuiButtonBase: {
+                disableRipple: true,
+            },
+        },
+    }),
+    light: createTheme({
+        palette: {
+            type: 'light',
+            primary: grey,
+            secondary: grey,
+            primaryBackground: '#F1F1F1',
+            primaryBackgroundHighlight: '#FFFFFF',
+            primaryBackgroundInput: '#FFFFFF',
+            primaryBackgroundDim: '#8A8A8A',
+            primaryBackgroundLight: '#e0e0e0',
+            primaryForeground: '#333333',
+            primaryForegroundDim: '#808080',
+            primaryForegroundActive: '#0074D9',
+            secondaryBackground: '#F1F1F1',
+            secondaryBackgroundDim: '#C0C0C0',
+            secondaryForeground: '#222222',
+            gridLayoutBackground: '#FFFFFF',
+            cardBorder: 'rgba(241, 241, 241, 0.125)',
+            ...globalColors,
+        },
+        props: {
+            MuiButtonBase: {
+                disableRipple: true,
+            },
+        },
+    }),
+};

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

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

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

@@ -0,0 +1,12 @@
+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/index.js

@@ -0,0 +1,4 @@
+export { default as CellColorEncodingOption } from './CellColorEncodingOption';
+export { default as OptionsContainer } from './OptionsContainer';
+export { default as OptionSelect } from './OptionSelect';
+export { useStyles as usePlotOptionsStyles } from './styles';

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

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