@vitessce/vit-s 2.0.2 → 2.0.3

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

@@ -0,0 +1,95 @@
+/* eslint-disable camelcase */
+import {
+  getExistingScopesForCoordinationType,
+  initialize,
+} from './view-config-utils';
+import {
+  upgradeFrom0_1_0,
+  upgradeFrom1_0_0,
+  upgradeFrom1_0_15,
+} from './view-config-upgraders';
+import {
+  legacyViewConfig0_1_0,
+  upgradedLegacyViewConfig0_1_0,
+  legacyViewConfig1_0_0,
+  upgradedLegacyViewConfig1_0_0,
+  initializedViewConfig,
+  viewConfig1_0_10,
+  missingViewUids,
+  implicitPerDatasetCoordinations,
+  explicitPerDatasetCoordinations,
+} from './view-config-utils.test.fixtures';
+
+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('upgrade', () => {
+    it('upgrade view config from v0.1.0 to v1.0.0', () => {
+      expect(upgradeFrom0_1_0(legacyViewConfig0_1_0, 'A')).toEqual(upgradedLegacyViewConfig0_1_0);
+    });
+
+    it('upgrade view config from v1.0.0 to v1.0.1', () => {
+      expect(upgradeFrom1_0_0(legacyViewConfig1_0_0)).toEqual(upgradedLegacyViewConfig1_0_0);
+    });
+
+    it('upgrade view config from v1.0.9 to v1.0.16', () => {
+      expect(upgradeFrom1_0_15(implicitPerDatasetCoordinations))
+        .toEqual(explicitPerDatasetCoordinations);
+    });
+  });
+
+  describe('initialize', () => {
+    it('initializes coordination space and component coordination scopes when initStrategy is auto', () => {
+      expect(initialize(viewConfig1_0_10)).toEqual(initializedViewConfig);
+    });
+
+    it('does not change the result when initialized twice when initStrategy is auto', () => {
+      const firstResult = initialize(viewConfig1_0_10);
+      expect(firstResult).toEqual(initializedViewConfig);
+      const secondResult = initialize(firstResult);
+      expect(secondResult).toEqual(initializedViewConfig);
+    });
+
+    it('generates unique ids for the view uid property when missing', () => {
+      const withUids = initialize(missingViewUids);
+      expect(withUids.layout[0].uid).toEqual('A');
+      // Should not overwrite uid when present:
+      expect(withUids.layout[1].uid).toEqual('some-umap');
+      expect(withUids.layout[2].uid).toEqual('B');
+      expect(withUids.layout[3].uid).toEqual('C');
+    });
+
+    it('does not initialize when initStrategy is none', () => {
+      const noneInitViewConfig = {
+        ...upgradedLegacyViewConfig0_1_0,
+        initStrategy: 'none',
+      };
+      expect(initialize(noneInitViewConfig).coordinationSpace)
+        .toEqual(noneInitViewConfig.coordinationSpace);
+    });
+  });
+});

package/src/view-config-versions.js

@@ -0,0 +1,68 @@
+/* eslint-disable camelcase */
+import Ajv from 'ajv';
+import configSchema0_1_0 from './schemas/config-0.1.0.schema.json';
+import configSchema1_0_0 from './schemas/config-1.0.0.schema.json';
+import configSchema1_0_1 from './schemas/config-1.0.1.schema.json';
+import configSchema1_0_2 from './schemas/config-1.0.2.schema.json';
+import configSchema1_0_3 from './schemas/config-1.0.3.schema.json';
+import configSchema1_0_4 from './schemas/config-1.0.4.schema.json';
+import configSchema1_0_5 from './schemas/config-1.0.5.schema.json';
+import configSchema1_0_6 from './schemas/config-1.0.6.schema.json';
+import configSchema1_0_7 from './schemas/config-1.0.7.schema.json';
+import configSchema1_0_8 from './schemas/config-1.0.8.schema.json';
+import configSchema1_0_9 from './schemas/config-1.0.9.schema.json';
+import configSchema1_0_10 from './schemas/config-1.0.10.schema.json';
+import configSchema1_0_11 from './schemas/config-1.0.11.schema.json';
+import configSchema1_0_12 from './schemas/config-1.0.12.schema.json';
+import configSchema1_0_13 from './schemas/config-1.0.13.schema.json';
+import configSchema1_0_14 from './schemas/config-1.0.14.schema.json';
+import configSchema1_0_15 from './schemas/config-1.0.15.schema.json';
+import configSchema1_0_16 from './schemas/config-1.0.16.schema.json';
+import obsSetsSchema from './schemas/obsSets.schema';
+import rasterSchema from './schemas/raster.schema';
+import {
+  upgradeFrom0_1_0,
+  upgradeFrom1_0_0,
+  upgradeFrom1_0_1,
+  upgradeFrom1_0_2,
+  upgradeFrom1_0_3,
+  upgradeFrom1_0_4,
+  upgradeFrom1_0_5,
+  upgradeFrom1_0_6,
+  upgradeFrom1_0_7,
+  upgradeFrom1_0_8,
+  upgradeFrom1_0_9,
+  upgradeFrom1_0_10,
+  upgradeFrom1_0_11,
+  upgradeFrom1_0_12,
+  upgradeFrom1_0_13,
+  upgradeFrom1_0_14,
+  upgradeFrom1_0_15,
+} from './view-config-upgraders';
+
+/**
+ * Mapping from view config versions to view config schemas and upgrade functions.
+ * Add a new schema and upgrade function here when bumping the view config version.
+ * The latest view config version should always have a null value instead of an upgrade function.
+ */
+export const LATEST_VERSION = '1.0.15';
+export const SCHEMA_HANDLERS = {
+  '0.1.0': [new Ajv().compile(configSchema0_1_0), upgradeFrom0_1_0],
+  '1.0.0': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_0), upgradeFrom1_0_0],
+  '1.0.1': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_1), upgradeFrom1_0_1],
+  '1.0.2': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_2), upgradeFrom1_0_2],
+  '1.0.3': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_3), upgradeFrom1_0_3],
+  '1.0.4': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_4), upgradeFrom1_0_4],
+  '1.0.5': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_5), upgradeFrom1_0_5],
+  '1.0.6': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_6), upgradeFrom1_0_6],
+  '1.0.7': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_7), upgradeFrom1_0_7],
+  '1.0.8': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_8), upgradeFrom1_0_8],
+  '1.0.9': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_9), upgradeFrom1_0_9],
+  '1.0.10': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_10), upgradeFrom1_0_10],
+  '1.0.11': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_11), upgradeFrom1_0_11],
+  '1.0.12': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_12), upgradeFrom1_0_12],
+  '1.0.13': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_13), upgradeFrom1_0_13],
+  '1.0.14': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_14), upgradeFrom1_0_14],
+  '1.0.15': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_15), upgradeFrom1_0_15],
+  '1.0.16': [new Ajv().addSchema(obsSetsSchema).addSchema(rasterSchema).compile(configSchema1_0_16), null],
+};

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

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { Responsive, WidthProvider } from 'react-grid-layout-with-lodash';
+import isEqual from 'lodash/isEqual';
+import { getMaxRows, resolveLayout } from './layout-utils';
+
+const ResponsiveGridLayout = WidthProvider(Responsive);
+
+class ResponsiveHeightGridLayout extends ResponsiveGridLayout {
+  componentDidUpdate(prevProps) {
+    if (this.props.height !== prevProps.height) {
+      this.onWindowResize();
+    }
+  }
+}
+
+export function VitessceGridLayout(props) {
+  const {
+    layout,
+    getComponent, padding, margin, draggableHandle: draggableHandleClass,
+    onResize, onResizeStop, rowHeight, theme, height,
+    onRemoveComponent, onLayoutChange: onLayoutChangeProp,
+    isBounded,
+  } = props;
+
+  const draggableHandle = `.${draggableHandleClass}`;
+
+  // If layout changes, update grid components.
+  const {
+    cols: gridCols, layouts: gridLayouts, breakpoints: gridBreakpoints, components: gridComponents,
+  } = resolveLayout(layout);
+
+  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 the current grid layouts,
+  // which gets called on every onLayoutChange. If the grid height is still valid, we then call
+  // onValidLayoutChange, otherwise we reset currentGridLayouts to lastValidGridLayouts.
+  //
+  // See the following GitHub issue for more information.
+  // https://github.com/react-grid-layout/react-grid-layout/issues/1104#issuecomment-827785217
+  const [currentGridLayouts, setCurrentGridLayouts] = useState(gridLayouts);
+  const [lastValidGridLayouts, setLastValidGridLayouts] = useState(gridLayouts);
+
+  const onValidLayoutChange = (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);
+      }
+    }
+  };
+
+  const onLayoutChange = (newLayout, allLayouts) => {
+    setCurrentGridLayouts(allLayouts);
+    if (!isBounded || getMaxRows({ ID: newLayout }) <= maxRows) {
+      onValidLayoutChange(newLayout);
+      setLastValidGridLayouts(allLayouts);
+    } else {
+      setCurrentGridLayouts(lastValidGridLayouts);
+    }
+  };
+
+  const saveCurrentLayouts = () => {
+    setLastValidGridLayouts(currentGridLayouts);
+  };
+
+
+  const layoutChildren = 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>
+    );
+  });
+  return (currentGridLayouts && gridComponents && gridBreakpoints && gridCols) && (
+    <>
+      {style}
+      <ResponsiveHeightGridLayout
+        className="layout"
+        cols={gridCols}
+        layouts={currentGridLayouts}
+        breakpoints={gridBreakpoints}
+        height={height}
+        rowHeight={
+          rowHeight
+          || (
+            (window.innerHeight - 2 * padding - (maxRows - 1) * margin)
+            / maxRows
+          )}
+        containerPadding={[padding, padding]}
+        margin={[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,56 @@
+import '@testing-library/jest-dom';
+import { cleanup, render, screen, waitForElement } from '@testing-library/react'
+import { afterEach } from 'vitest'
+
+import { VitessceGridLayout } from './VitessceGridLayout';
+
+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 { container } = render(<VitessceGridLayout
+        layout={layoutJson}
+        getComponent={() => FakeComponent}
+        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 { container } = render(<VitessceGridLayout
+        layout={layoutJson}
+        getComponent={() => FakeComponent}
+        draggableHandle=".my-handle"
+        rowHeight={123}
+      />);
+
+      expect(container.querySelector('.react-grid-item').style.height).toEqual('123px');
+    });
+  });
+});

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

@@ -0,0 +1,76 @@
+import range from 'lodash/range';
+
+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';
+
+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);
+    });
+  });
+});