UpSet preparations

package.json

@@ -12,6 +12,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@types/date-arithmetic": "^4.1.1",
+    "@upsetjs/react": "^1.9.1",
     "@visx/gradient": "^1.0.0",
     "@visx/group": "^1.0.0",
     "@visx/hierarchy": "^1.0.0",

src/plots/UpSet.tsx

@@ -0,0 +1,69 @@
+import React, { lazy, Suspense, useMemo } from 'react';
+import { PlotProps } from './PlotlyPlot';
+import { UpSetData } from '../types/plots';
+import { extractFromExpression } from '@upsetjs/react';
+import Spinner from '../components/Spinner';
+
+export interface UpSetProps extends PlotProps<UpSetData> {
+  /** label for intersection size axis */
+  intersectionSizeAxisLabel?: string;
+  /** label for set size axis */
+  setSizeAxisLabel?: string;
+}
+const EmptyUpSetData: UpSetData = { intersections: [] };
+
+const UpSetJS = lazy(() => import('@upsetjs/react'));
+
+export default function UpSet(props: UpSetProps) {
+  const {
+    data = EmptyUpSetData,
+    intersectionSizeAxisLabel,
+    setSizeAxisLabel,
+    // all the props below would normally be handled by PlotlyPlot, so we need to handle them here instead
+    title,
+    displayLegend = true,
+    containerStyles = { width: '100%', height: '400px' },
+    interactive = false,
+    displayLibraryControls,
+    legendOptions,
+    legendTitle,
+    spacingOptions,
+    showSpinner,
+  } = props;
+
+  // convert `data` into UpSetJS-friendly `sets` and `combinations`
+
+  // as a placeholder - just use demo data from
+  // https://github.com/upsetjs/upsetjs/blob/main/examples/staticData/src/App.tsx#L42
+  const { sets, combinations } = useMemo(
+    () =>
+      extractFromExpression(
+        [
+          { sets: ['A'], cardinality: 10 },
+          { sets: ['B'], cardinality: 7 },
+          { sets: ['A', 'B'], cardinality: 5 },
+        ],
+        {
+          // ExtractFromExpressionOptions:
+          type: 'distinctIntersection', // this makes the "Set Size" totals correct
+        }
+      ),
+    []
+  );
+
+  // width and height will need some extra work if we can't specify '100%'
+  return (
+    <Suspense fallback="Loading...">
+      <div style={{ ...containerStyles, position: 'relative' }}>
+        <UpSetJS
+          sets={sets}
+          combinations={combinations}
+          title={title}
+          width={500}
+          height={500}
+        />
+        {showSpinner && <Spinner />}
+      </div>
+    </Suspense>
+  );
+}

src/stories/plots/UpSet.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import UpSet, { UpSetProps } from '../../plots/UpSet';
+
+export default {
+  title: 'Plots/UpSet',
+  component: UpSet,
+} as Meta;
+
+const Template = (args: UpSetProps) => <UpSet {...args} />;
+
+export const Basic: Story<UpSetProps> = Template.bind({});
+Basic.args = {
+  title: 'amazing upset plot',
+  // data: ...
+  // intersectionSizeAxisLabel: 'Intersection size',
+  // setSizeAxisLabel: 'Set size',
+};

src/types/plots/index.ts

@@ -9,6 +9,7 @@ import { XYPlotData } from './xyplot';
 import { BarplotData } from './barplot';
 import { HeatmapData } from './heatmap';
 import { MosaicData } from './mosaic';
+import { UpSetData } from './upset';
 
 // Commonly used type definitions for plots.
 
@@ -23,7 +24,8 @@ export type UnionOfPlotDataTypes =
   | XYPlotData
   | BarplotData
   | HeatmapData
-  | MosaicData;
+  | MosaicData
+  | UpSetData;
 
 export * from './addOns';
 
@@ -35,3 +37,4 @@ export * from './xyplot';
 export * from './barplot';
 export * from './heatmap';
 export * from './mosaic';
+export * from './upset';

src/types/plots/upset.ts

@@ -0,0 +1,8 @@
+type SetIntersection = {
+  sets: string[]; // e.g. [ 'height', 'weight', 'country' ]
+  count: number; // == cardinality in UpSet
+};
+
+export type UpSetData = {
+  intersections: SetIntersection[];
+};

yarn.lock

@@ -2602,6 +2602,11 @@
   resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-1.25.0.tgz#3d6fe591fac874f48dd225cb5660b2b785a21a05"
   integrity sha512-iIJp2CP6C32gVqI08HIYnzqj55tlLnodIBMCcMf28q9ckqMfMzocCmIzd9JWI/ALLPMUiTkCu1JGv3FFtu6t3g==
 
+"@types/lz-string@^1.3.34":
+  version "1.3.34"
+  resolved "https://registry.yarnpkg.com/@types/lz-string/-/lz-string-1.3.34.tgz#69bfadde419314b4a374bf2c8e58659c035ed0a5"
+  integrity sha512-j6G1e8DULJx3ONf6NdR5JiR2ZY3K3PaaqiEuKYkLQO0Czfi1AzrtjfnfCROyWGeDd5IVMKCwsgSmMip9OWijow==
+
 "@types/markdown-to-jsx@^6.11.0":
   version "6.11.3"
   resolved "https://registry.yarnpkg.com/@types/markdown-to-jsx/-/markdown-to-jsx-6.11.3.tgz#cdd1619308fecbc8be7e6a26f3751260249b020e"
@@ -2768,13 +2773,27 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/react@^17.0.1":
+  version "17.0.14"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.14.tgz#f0629761ca02945c4e8fea99b8177f4c5c61fb0f"
+  integrity sha512-0WwKHUbWuQWOce61UexYuWTGuGY/8JvtUe/dtQ6lR4sZ3UiylHotJeWpf3ArP9+DSGUoLY3wbU59VyMrJps5VQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/reactcss@*":
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.3.tgz#af28ae11bbb277978b99d04d1eedfd068ca71834"
   integrity sha512-d2gQQ0IL6hXLnoRfVYZukQNWHuVsE75DzFTLPUuyyEhJS8G2VvlE+qfQQ91SJjaMqlURRCNIsX7Jcsw6cEuJlA==
   dependencies:
     "@types/react" "*"
 
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/source-list-map@*":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
@@ -2845,6 +2864,21 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@upsetjs/model@~1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@upsetjs/model/-/model-1.9.1.tgz#86be17fd45fecec372d75a6d6f5d8fb493a7559c"
+  integrity sha512-CI34OPv4jsRAieZBILL+dx9/tnwfv/XwmBaOKkI0Z1iyPjOyMA5YkLXUhcidjlXKRwZ1U1siD73IinC73pCJHQ==
+
+"@upsetjs/react@^1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@upsetjs/react/-/react-1.9.1.tgz#5e9d76dfa55c4953e8efd6dcefad8caa79243781"
+  integrity sha512-fyjlyDAXDS14+S360Huj8lmfTOiPwviFlvEQzA00DHJwA7LVuLiOO1TUUizAgt468QuIcSVXIQARkxQVX32Wiw==
+  dependencies:
+    "@types/lz-string" "^1.3.34"
+    "@types/react" "^17.0.1"
+    "@upsetjs/model" "~1.9.1"
+    lz-string "^1.4.4"
+
 "@veupathdb/browserslist-config@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@veupathdb/browserslist-config/-/browserslist-config-1.0.0.tgz#90ca79640ffbb195a87d4d65cd4b2f92342f8b76"
@@ -9154,6 +9188,11 @@ luxon@^1.25.0:
   resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.25.0.tgz#d86219e90bc0102c0eb299d65b2f5e95efe1fe72"
   integrity sha512-hEgLurSH8kQRjY6i4YLey+mcKVAWXbDNlZRmM6AgWDJ1cY3atl8Ztf5wEY7VBReFbmGnwQPz7KYJblL8B2k0jQ==
 
+lz-string@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
+  integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"