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

package/src/view-config-utils.test.jsx

@@ -0,0 +1,222 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import { z } from '@vitessce/schemas';
+import { PluginViewType, PluginCoordinationType } from '@vitessce/plugins';
+import {
+  getExistingScopesForCoordinationType,
+  initialize,
+} from './view-config-utils.js';
+
+function FakeComponent(props) {
+  const { text } = props;
+  return <span>{text}</span>;
+}
+
+const jointFileTypes = [];
+const coordinationTypes = [
+  new PluginCoordinationType('dataset', null, z.string().nullable()),
+  new PluginCoordinationType('embeddingTargetX', 0, z.number()),
+  new PluginCoordinationType('embeddingTargetY', 0, z.number()),
+  new PluginCoordinationType('embeddingZoom', 3, z.number()),
+  new PluginCoordinationType('embeddingType', null, z.string().nullable()),
+];
+const viewTypes = [
+  new PluginViewType('description', FakeComponent, ['dataset']),
+  new PluginViewType('scatterplot', FakeComponent, ['dataset', 'embeddingType', 'embeddingZoom', 'embeddingTargetX', 'embeddingTargetY']),
+];
+
+describe('src/app/view-config-utils.js', () => {
+  describe('getExistingScopesForCoordinationType', () => {
+    it('gets all scope names for a particular coordination type', () => {
+      const config = {
+        coordinationSpace: {
+          dataset: {
+            A: 'my-dataset-1',
+            B: 'my-dataset-2',
+          },
+        },
+        layout: [
+          {
+            coordinationScopes: {
+              dataset: 'A',
+            },
+          },
+          {
+            coordinationScopes: {
+              dataset: 'C',
+            },
+          },
+        ],
+      };
+      expect(getExistingScopesForCoordinationType(config, 'dataset')).toEqual(['A', 'B', 'C']);
+    });
+  });
+
+  describe('initialize', () => {
+    it('initializes coordination space and component coordination scopes when initStrategy is auto', () => {
+      const preInitializationConfig = {
+        version: '1.0.16',
+        name: 'My config name',
+        description: 'My config description',
+        initStrategy: 'auto',
+        coordinationSpace: {
+          embeddingTargetX: {
+            A: 0,
+          },
+          embeddingTargetY: {
+            A: 0,
+          },
+          embeddingType: {
+            't-SNE': 't-SNE',
+          },
+        },
+        datasets: [
+          {
+            files: [],
+            name: 'A',
+            uid: 'A',
+          },
+        ],
+        layout: [
+          {
+            component: 'description',
+            coordinationScopes: {},
+            h: 2,
+            w: 3,
+            x: 9,
+            y: 0,
+          },
+          {
+            component: 'scatterplot',
+            coordinationScopes: {
+              embeddingTargetX: 'A',
+              embeddingTargetY: 'A',
+              embeddingType: 't-SNE',
+            },
+            h: 4,
+            w: 5,
+            x: 0,
+            y: 2,
+          },
+        ],
+      };
+
+      const initializedViewConfig = {
+        version: '1.0.16',
+        uid: 'A',
+        name: 'My config name',
+        description: 'My config description',
+        initStrategy: 'auto',
+        coordinationSpace: {
+          dataset: {
+            A: 'A',
+          },
+          embeddingTargetX: {
+            A: 0,
+          },
+          embeddingTargetY: {
+            A: 0,
+          },
+          embeddingType: {
+            't-SNE': 't-SNE',
+          },
+          embeddingZoom: {
+            A: 3,
+          },
+        },
+        datasets: [
+          {
+            files: [],
+            name: 'A',
+            uid: 'A',
+          },
+        ],
+        layout: [
+          {
+            component: 'description',
+            coordinationScopes: {
+              dataset: 'A',
+            },
+            h: 2,
+            uid: 'A',
+            w: 3,
+            x: 9,
+            y: 0,
+          },
+          {
+            component: 'scatterplot',
+            coordinationScopes: {
+              dataset: 'A',
+              embeddingTargetX: 'A',
+              embeddingTargetY: 'A',
+              embeddingType: 't-SNE',
+              embeddingZoom: 'A',
+            },
+            h: 4,
+            uid: 'B',
+            w: 5,
+            x: 0,
+            y: 2,
+          },
+        ],
+      };
+
+      expect(initialize(preInitializationConfig, jointFileTypes, coordinationTypes, viewTypes))
+        .toEqual(initializedViewConfig);
+    });
+
+    it('does not initialize when initStrategy is none', () => {
+      const preInitializationConfig = {
+        version: '1.0.16',
+        name: 'My config name',
+        description: 'My config description',
+        initStrategy: 'none', // initStrategy is none
+        coordinationSpace: {
+          embeddingTargetX: {
+            A: 0,
+          },
+          embeddingTargetY: {
+            A: 0,
+          },
+          embeddingType: {
+            't-SNE': 't-SNE',
+          },
+        },
+        datasets: [
+          {
+            files: [],
+            name: 'A',
+            uid: 'A',
+          },
+        ],
+        layout: [
+          {
+            component: 'description',
+            coordinationScopes: {},
+            h: 2,
+            w: 3,
+            x: 9,
+            y: 0,
+          },
+          {
+            component: 'scatterplot',
+            coordinationScopes: {
+              embeddingTargetX: 'A',
+              embeddingTargetY: 'A',
+              embeddingType: 't-SNE',
+            },
+            h: 4,
+            w: 5,
+            x: 0,
+            y: 2,
+          },
+        ],
+      };
+      expect(
+        initialize(
+          preInitializationConfig, jointFileTypes, coordinationTypes, viewTypes,
+        ).coordinationSpace,
+      ).toEqual(preInitializationConfig.coordinationSpace);
+    });
+  });
+});

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

@@ -0,0 +1,179 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { Responsive, WidthProvider } from 'react-grid-layout-with-lodash';
+import { isEqual } from 'lodash-es';
+import { getMaxRows, resolveLayout } from './layout-utils.js';
+
+const ResponsiveGridLayout = WidthProvider(Responsive);
+
+class ResponsiveHeightGridLayout extends ResponsiveGridLayout {
+  componentDidUpdate(prevProps) {
+    if (this.props.height !== prevProps.height) {
+      this.onWindowResize();
+    }
+  }
+}
+
+export function VitessceGridLayout(props) {
+  const {
+    layout,
+    viewTypes, padding, margin: marginProp, draggableHandle: draggableHandleClass,
+    onResize, onResizeStop, rowHeight, theme, height,
+    onRemoveComponent, onLayoutChange: onLayoutChangeProp,
+    isBounded,
+  } = props;
+
+  const getComponent = useCallback((viewType) => {
+    if (Array.isArray(viewTypes)) {
+      const matchingViewType = viewTypes.find(v => v.name === viewType);
+      if (matchingViewType) {
+        return matchingViewType.component;
+      }
+    }
+    return () => null;
+  }, [viewTypes]);
+
+  const draggableHandle = `.${draggableHandleClass}`;
+
+  // If layout changes, update grid components.
+  const {
+    cols: gridCols, layouts: gridLayouts, breakpoints: gridBreakpoints, components: gridComponents,
+  } = useMemo(() => resolveLayout(layout), [layout]);
+
+  const containerPadding = useMemo(() => ([padding, padding]), [padding]);
+  const margin = useMemo(() => ([marginProp, marginProp]), [marginProp]);
+
+  const maxRows = getMaxRows(gridLayouts);
+
+  // Inline CSS is generally avoided, but this saves the end-user a little work,
+  // and prevents class names from getting out of sync.
+  const style = (
+    <style>
+      {`
+        ${draggableHandle} {
+          cursor: grab;
+        }
+        ${draggableHandle}:active {
+          cursor: grabbing;
+        }
+     `}
+    </style>
+  );
+
+  // A bit of hacky feeling stuff to prevent users from stacking elements and forcing the
+  // grid boundary to change even when isBounded is set to true. It seems like react-grid-layout
+  // should support this through isBounded and maxRows, but neither of these actually works for the
+  // edge case where a user drags one element above another and forces the first element downwards.
+  //
+  // Additionally, react-grid-layout doesn't revert if you don't save a new/changed layouts. If you
+  // wish to do this, first you have to save the new layouts and render the grid with it, and then
+  // you can revert to the original layouts. Thus, we need one state for a temporary grid layout,
+  // which gets called on every onLayoutChange. If the grid height is still valid, we then call
+  // onValidLayoutChange, otherwise we call onValidLayoutChange with lastValidGridLayouts.
+  //
+  // See the following GitHub issue for more information.
+  // https://github.com/react-grid-layout/react-grid-layout/issues/1104#issuecomment-827785217
+  const [tempGridLayouts, setTempGridLayouts] = useState(null);
+  const [lastValidGridLayouts, setLastValidGridLayouts] = useState(gridLayouts);
+
+  const onValidLayoutChange = useCallback((newLayout) => {
+    if (newLayout.length === Object.entries(gridComponents).length) {
+      const newComponentProps = {};
+      newLayout.forEach((nextC) => {
+        const id = nextC.i;
+        const prevC = gridComponents[id];
+        if (prevC) {
+          const nextProps = {
+            x: nextC.x, y: nextC.y, w: nextC.w, h: nextC.h,
+          };
+          const prevProps = {
+            x: prevC.x, y: prevC.y, w: prevC.w, h: prevC.h,
+          };
+          if (!isEqual(nextProps, prevProps)) {
+            newComponentProps[id] = nextProps;
+          }
+        }
+      });
+      if (Object.keys(newComponentProps).length > 0) {
+        onLayoutChangeProp(newComponentProps);
+      }
+    }
+  }, [gridComponents, onLayoutChangeProp]);
+
+  const onLayoutChange = useCallback((newLayout, allLayouts) => {
+    // We first need to set the new layout to the potentially-invalid allLayouts
+    // (see comments above about react-grid-layout limitations).
+    setTempGridLayouts(allLayouts);
+    // Then we wait 50ms and validate/set the new layout.
+    setTimeout(() => {
+      if (!isBounded || getMaxRows({ ID: newLayout }) <= maxRows) {
+        // Good, new layout was valid with respect to isBounded, so set in parent.
+        onValidLayoutChange(newLayout);
+        setLastValidGridLayouts(allLayouts);
+      } else {
+        // Bad, new layout was not valid with respect to isBounded.
+        onValidLayoutChange(lastValidGridLayouts);
+      }
+      setTempGridLayouts(null);
+    }, 50);
+  }, [isBounded, lastValidGridLayouts, maxRows, onValidLayoutChange]);
+
+  const saveCurrentLayouts = useCallback(() => {
+    setLastValidGridLayouts(gridLayouts);
+  }, [gridLayouts]);
+
+  const layoutChildren = useMemo(() => Object.values(gridComponents).map((v) => {
+    const Component = getComponent(v.component);
+
+    const removeGridComponent = () => {
+      onRemoveComponent(v.uid);
+    };
+
+    return (
+      <div key={v.uid}>
+        <Component
+          {... v.props}
+          uuid={v.uid}
+          coordinationScopes={v.coordinationScopes}
+          coordinationScopesBy={v.coordinationScopesBy}
+          theme={theme}
+          removeGridComponent={removeGridComponent}
+        />
+      </div>
+    );
+  }), [gridComponents, getComponent, onRemoveComponent, theme]);
+
+  return (gridLayouts && gridComponents && gridBreakpoints && gridCols) && (
+    <>
+      {style}
+      <ResponsiveHeightGridLayout
+        className="layout"
+        cols={gridCols}
+        layouts={tempGridLayouts || gridLayouts}
+        breakpoints={gridBreakpoints}
+        height={height}
+        rowHeight={
+          rowHeight
+          || (
+            (window.innerHeight - 2 * padding - (maxRows - 1) * margin)
+            / maxRows
+          )}
+        containerPadding={containerPadding}
+        margin={margin}
+        draggableHandle={draggableHandle}
+        onLayoutChange={onLayoutChange}
+        isBounded={isBounded}
+        onResizeStart={saveCurrentLayouts}
+        onDragStart={saveCurrentLayouts}
+        onResize={onResize}
+        onResizeStop={onResizeStop}
+      >
+        {layoutChildren}
+      </ResponsiveHeightGridLayout>
+    </>
+  );
+}
+
+VitessceGridLayout.defaultProps = {
+  padding: 10,
+  margin: 10,
+};

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

@@ -0,0 +1,64 @@
+import '@testing-library/jest-dom';
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+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>;
+}
+const layoutJson = {
+  columns: {
+    600: [0, 2, 4, 8],
+  },
+  components: [
+    {
+      component: 'FakeComponent',
+      uid: 'fake',
+      props: { text: 'Hello World' },
+      x: 0,
+      y: 0,
+      w: 2,
+    },
+  ],
+};
+
+describe('VitessceGridLayout.js', () => {
+  describe('<VitessceGridLayout />', () => {
+    it('mount() works', async () => {
+      const viewTypes = [new PluginViewType('FakeComponent', FakeComponent, [])];
+      const { container } = render(<VitessceGridLayout
+        layout={layoutJson}
+        viewTypes={viewTypes}
+        draggableHandle=".my-handle"
+      />);
+
+      expect(await screen.findByText('Hello World'));
+      expect(container.querySelectorAll('.react-grid-item span:not(.react-resizable-handle)').length).toEqual(1);
+
+      const style = container.querySelectorAll('style');
+      expect(style.length).toEqual(1);
+      expect(style[0].textContent).toContain('.my-handle {');
+      expect(style[0].textContent).toContain('.my-handle:active {');
+    });
+
+    it('rowHeight works', () => {
+      const viewTypes = [new PluginViewType('FakeComponent', FakeComponent, [])];
+      const { container } = render(<VitessceGridLayout
+        layout={layoutJson}
+        viewTypes={viewTypes}
+        draggableHandle=".my-handle"
+        rowHeight={123}
+      />);
+
+      expect(container.querySelector('.react-grid-item').style.height).toEqual('123px');
+    });
+  });
+});

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

@@ -0,0 +1 @@
+export { VitessceGridLayout } from './VitessceGridLayout.js';

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

@@ -0,0 +1,76 @@
+import { range } from 'lodash-es';
+
+function sum(a) {
+  return a.reduce((x, y) => x + y, 0);
+}
+
+export function makeGridLayout(colXs, colLayout) {
+  const colWs = [];
+  for (let i = 0; i < colXs.length; i++) { // eslint-disable-line no-plusplus
+    colWs.push(colXs[i + 1] - colXs[i]);
+  }
+  return Object.entries(colLayout).map(([id, spec]) => ({
+    i: id,
+    y: spec.y,
+    h: spec.h || 1,
+    x: colXs[spec.x],
+    w: sum(colWs.slice(spec.x, spec.x + (spec.w || 1))),
+  }));
+}
+
+export function getMaxRows(layouts) {
+  return Math.max(
+    ...Object.values(layouts).map(
+      layout => Math.max(
+        ...layout.map(xywh => xywh.y + xywh.h),
+      ),
+    ),
+  );
+}
+
+export function resolveLayout(layout) {
+  const cols = {};
+  const layouts = {};
+  const breakpoints = {};
+  const components = {};
+  const positions = {};
+
+  (('components' in layout) ? layout.components : layout).forEach(
+    (def) => {
+      const id = def.uid;
+      components[id] = {
+        uid: def.uid,
+        component: def.component,
+        props: def.props || {},
+        coordinationScopes: def.coordinationScopes || {},
+        coordinationScopesBy: def.coordinationScopesBy || {},
+      };
+      positions[id] = {
+        id, x: def.x, y: def.y, w: def.w, h: def.h,
+      };
+    },
+  );
+
+  if ('components' in layout) {
+    Object.entries(layout.columns).forEach(
+      ([width, columnXs]) => {
+        cols[width] = columnXs[columnXs.length - 1];
+        layouts[width] = makeGridLayout(columnXs, positions);
+        breakpoints[width] = width;
+      },
+    );
+  } else {
+    // static layout
+    const id = 'ID';
+    const columnCount = 12;
+    cols[id] = columnCount;
+    layouts[id] = makeGridLayout(range(columnCount + 1), positions);
+    breakpoints[id] = 1000;
+    // Default has different numbers of columns at different widths,
+    // so we do need to override that to ensure the same number of columns,
+    // regardless of window width.
+  }
+  return {
+    cols, layouts, breakpoints, components,
+  };
+}

package/src/vitessce-grid-layout/layout-utils.test.js

@@ -0,0 +1,167 @@
+import {
+  makeGridLayout, getMaxRows, resolveLayout,
+} from './layout-utils.js';
+
+describe('layout-utils.js', () => {
+  describe('makeGridLayout', () => {
+    it('applies columnXs and makes list from object', () => {
+      const columnXs = [0, 4, 8, 12];
+      const layout = {
+        bigLeft: { x: 0, y: 0, w: 2 },
+        smallRight: { x: 2, y: 0 },
+        smallLeft: { x: 0, y: 1 },
+        bigRight: { x: 1, y: 1, w: 2 },
+        wholeRow: { x: 0, y: 2, w: 3 },
+      };
+      const gridLayout = makeGridLayout(columnXs, layout);
+      expect(gridLayout).toEqual(
+        /* Disable eslint so it's easier to copy-and-paste from test results. */
+        /* eslint-disable quote-props */
+        /* eslint-disable quotes */
+        [
+          {
+            "h": 1,
+            "i": "bigLeft",
+            "w": 8,
+            "x": 0,
+            "y": 0,
+          },
+          {
+            "h": 1,
+            "i": "smallRight",
+            "w": 4,
+            "x": 8,
+            "y": 0,
+          },
+          {
+            "h": 1,
+            "i": "smallLeft",
+            "w": 4,
+            "x": 0,
+            "y": 1,
+          },
+          {
+            "h": 1,
+            "i": "bigRight",
+            "w": 8,
+            "x": 4,
+            "y": 1,
+          },
+          {
+            "h": 1,
+            "i": "wholeRow",
+            "w": 12,
+            "x": 0,
+            "y": 2,
+          },
+        ],
+        /* eslint-enable */
+      );
+    });
+  });
+
+  describe('getMaxRows', () => {
+    it('works', () => {
+      const columnXs = [0, 4, 8, 12];
+      const layout = {
+        bigLeft: { x: 0, y: 0, w: 2 },
+        smallRight: { x: 2, y: 0 },
+        smallLeft: { x: 0, y: 1 },
+        bigRight: { x: 1, y: 1, w: 2 },
+        wholeRow: { x: 0, y: 2, w: 3 },
+      };
+      const gridLayout = makeGridLayout(columnXs, layout);
+      expect(getMaxRows([gridLayout])).toEqual(3);
+    });
+  });
+
+  describe('resolveLayout', () => {
+    const componentsSpec = [
+      {
+        uid: 'i0', component: 'NoProps', x: 0, y: 0,
+      },
+      {
+        uid: 'i1', component: 'HasProps', props: { foo: 'bar' }, x: 1, y: 1, w: 1, h: 1,
+      },
+    ];
+    const expectedComponents = {
+      i0: {
+        uid: 'i0',
+        component: 'NoProps',
+        coordinationScopes: {},
+        coordinationScopesBy: {},
+        props: {},
+      },
+      i1: {
+        uid: 'i1',
+        component: 'HasProps',
+        coordinationScopes: {},
+        coordinationScopesBy: {},
+        props: {
+          foo: 'bar',
+        },
+      },
+    };
+
+    it('handles responsive', () => {
+      const {
+        cols, layouts, breakpoints, components,
+      } = resolveLayout({
+        columns: {
+          1000: [0, 3, 9, 12],
+          800: [0, 4, 8, 12],
+        },
+        components: componentsSpec,
+      });
+      expect(cols).toEqual({ 800: 12, 1000: 12 });
+      expect(layouts).toEqual(
+        {
+          800: [
+            {
+              h: 1, i: 'i0', w: 4, x: 0, y: 0,
+            },
+            {
+              h: 1, i: 'i1', w: 4, x: 4, y: 1,
+            },
+          ],
+          1000: [
+            {
+              h: 1, i: 'i0', w: 3, x: 0, y: 0,
+            },
+            {
+              h: 1, i: 'i1', w: 6, x: 3, y: 1,
+            },
+          ],
+        },
+      );
+      expect(breakpoints).toEqual({
+        800: '800',
+        1000: '1000',
+      });
+      expect(components).toEqual(expectedComponents);
+    });
+
+    it('handles static', () => {
+      const {
+        cols, layouts, breakpoints, components,
+      } = resolveLayout(
+        componentsSpec,
+      );
+      expect(cols).toEqual({ ID: 12 });
+      expect(layouts).toEqual(
+        {
+          ID: [
+            {
+              h: 1, i: 'i0', w: 1, x: 0, y: 0,
+            },
+            {
+              h: 1, i: 'i1', w: 1, x: 1, y: 1,
+            },
+          ],
+        },
+      );
+      expect(breakpoints).toEqual({ ID: 1000 });
+      expect(components).toEqual(expectedComponents);
+    });
+  });
+});