@vitessce/biomarker-select 3.5.0

package/dist-tsc/styles.js

@@ -0,0 +1,32 @@
+import { makeStyles } from '@material-ui/core';
+export const useStyles = makeStyles(() => ({
+    header: {
+        marginTop: '10px',
+        marginBottom: '10px',
+    },
+    fullWidthBox: {
+        width: '100%',
+    },
+    selectButton: {
+        position: 'absolute',
+        right: 0,
+    },
+    accordion: {
+        width: '100%',
+        margin: '0 !important',
+    },
+    accordionDetails: {
+        paddingTop: 0,
+    },
+    cartUl: {
+        marginTop: 0,
+        marginBottom: 0,
+    },
+    selectInput: {
+        height: 'auto !important',
+    },
+    searchInput: {
+        lineHeight: 'initial',
+        height: 'auto !important',
+    },
+}));

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@vitessce/biomarker-select",
+  "version": "3.5.0",
+  "author": "Gehlenborg Lab",
+  "homepage": "http://vitessce.io",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vitessce/vitessce.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "files": [
+    "src",
+    "dist",
+    "dist-tsc"
+  ],
+  "dependencies": {
+    "@material-ui/core": "~4.12.3",
+    "@material-ui/icons": "~4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@mui/x-data-grid": "^4.0.2",
+    "@tanstack/react-query": "^4.29.12",
+    "react-window": "^1.8.10",
+    "fuse.js": "^7.0.0",
+    "d3-dsv": "^1.1.1",
+    "@vitessce/constants-internal": "3.5.0",
+    "@vitessce/vit-s": "3.5.0",
+    "@vitessce/types": "3.5.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "react": "^18.0.0",
+    "vite": "^4.3.0",
+    "vitest": "^0.32.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "scripts": {
+    "bundle": "pnpm exec vite build -c ../../../scripts/vite.config.js",
+    "test": "pnpm exec vitest --run"
+  },
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist-tsc/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  }
+}

package/src/BiomarkerSelectSubscriber.js

@@ -0,0 +1,107 @@
+/* eslint-disable max-len */
+/* eslint-disable no-unused-vars */
+import React, { useState, useCallback } from 'react';
+import {
+  useAsyncFunction,
+  useViewConfigStoreApi,
+  useSetViewConfig,
+  useViewConfig,
+  useCoordination,
+} from '@vitessce/vit-s';
+import { AsyncFunctionType, ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+import { ScmdUi } from './scmd-ui.js';
+
+
+/**
+ *
+ * @param {object} props
+ * @param {{ name: string, stratificationType: string, sampleSets: [string[], string[]]}[]} props.stratificationOptions
+ * @returns
+ */
+export function BiomarkerSelectSubscriber(props) {
+  const {
+    coordinationScopes,
+    stratificationOptions,
+  } = props;
+
+  const [{
+    sampleSetSelection,
+    featureSelection,
+  }, {
+    setSampleSetSelection,
+    setFeatureSelection,
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType.BIOMARKER_SELECT],
+    coordinationScopes,
+  );
+
+  const viewConfigStoreApi = useViewConfigStoreApi();
+  const viewConfig = useViewConfig();
+  const setViewConfig = useSetViewConfig(viewConfigStoreApi);
+
+
+  // TODO: make isSelecting a coordination type plugin.
+  // TODO: use store hooks from @vitessce/vit-s to update the view config based on the selections.
+  const [isSelecting, setIsSelecting] = useState(true);
+
+  const [mode, setMode] = useState(null);
+  const [step, setStep] = useState(null);
+  const [currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection] = useState(null);
+  const [currentModalitySpecificSelection, setCurrentModalitySpecificSelection] = useState(null);
+  const [currentStratificationSelection, setCurrentStratificationSelection] = useState(null);
+
+  const autocompleteFeature = useAsyncFunction(AsyncFunctionType.AUTOCOMPLETE_FEATURE);
+  const transformFeature = useAsyncFunction(AsyncFunctionType.TRANSFORM_FEATURE);
+
+  const autocompleteNode = useCallback(
+    async inputValue => autocompleteFeature(inputValue),
+    [autocompleteFeature],
+  );
+  const getEdges = useCallback(
+    async (node, targetModality) => transformFeature(node, targetModality),
+    [transformFeature],
+  );
+
+  return (
+    <>
+      {isSelecting ? (
+        <ScmdUi
+          mode={mode}
+          setMode={setMode}
+          step={step}
+          setStep={setStep}
+          currentModalityAgnosticSelection={currentModalityAgnosticSelection}
+          setCurrentModalityAgnosticSelection={setCurrentModalityAgnosticSelection}
+          currentModalitySpecificSelection={currentModalitySpecificSelection}
+          setCurrentModalitySpecificSelection={setCurrentModalitySpecificSelection}
+          currentStratificationSelection={currentStratificationSelection}
+          setCurrentStratificationSelection={setCurrentStratificationSelection}
+          autocompleteNode={autocompleteNode}
+          getEdges={getEdges}
+          stratifications={stratificationOptions}
+          onFinish={() => {
+            // eslint-disable-next-line no-console
+            console.log('Done selecting');
+            /*
+            console.log(viewConfig);
+            setViewConfig({
+              ...viewConfig,
+              coordinationSpace: {
+                ...viewConfig.coordinationSpace,
+                sampleSetFilter: {
+                  ...viewConfig.coordinationSpace.sampleSetFilter,
+                  'case-control': currentStratificationSelection?.sampleSets,
+                },
+                sampleSetSelection: {
+                  ...viewConfig.coordinationSpace.sampleSetSelection,
+                  'case-control': currentStratificationSelection?.sampleSets,
+                },
+              },
+            });
+            */
+          }}
+        />
+      ) : null}
+    </>
+  );
+}

package/src/cart.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@material-ui/core';
+import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons';
+import { useStyles } from './styles.js';
+
+
+export function ConfirmatoryCart(props) {
+  const {
+    currentModalityAgnosticSelection,
+    // eslint-disable-next-line no-unused-vars
+    setCurrentModalityAgnosticSelection,
+    currentModalitySpecificSelection,
+    // eslint-disable-next-line no-unused-vars
+    setCurrentModalitySpecificSelection,
+    currentStratificationSelection,
+    // eslint-disable-next-line no-unused-vars
+    setCurrentStratificationSelection,
+  } = props;
+  const classes = useStyles();
+  const [expandedAccordions, setExpandedAccordions] = React.useState([
+    'agnostic', 'specific', 'stratification',
+  ]);
+
+  const handleAccordionChange = panel => (event, isExpanded) => {
+    if (isExpanded) {
+      setExpandedAccordions([...expandedAccordions, panel]);
+    } else {
+      setExpandedAccordions(expandedAccordions.filter(item => item !== panel));
+    }
+  };
+
+  return (
+    <>
+      <Typography>Current selections</Typography>
+      <Accordion className={classes.accordion} expanded={expandedAccordions.includes('agnostic')} onChange={handleAccordionChange('agnostic')}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1bh-content"
+          id="panel1bh-header"
+        >
+          <Typography>
+            Modality-agnostic biomarkers
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails className={classes.accordionDetails}>
+          <ul className={classes.cartUl}>
+            {currentModalityAgnosticSelection ? (
+              currentModalityAgnosticSelection.map(item => (
+                <li key={item.kgId}>{item.label} ({item.nodeType})</li>
+              ))
+            ) : null}
+          </ul>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion className={classes.accordion} expanded={expandedAccordions.includes('specific')} onChange={handleAccordionChange('specific')}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel2bh-content"
+          id="panel2bh-header"
+        >
+          <Typography>
+            Modality-specific signature
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails className={classes.accordionDetails}>
+          <ul className={classes.cartUl}>
+            {currentModalitySpecificSelection ? (
+              currentModalitySpecificSelection.map(item => (
+                <li key={item.kgId}>{item.label} ({item.nodeType})</li>
+              ))
+            ) : null}
+          </ul>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion className={classes.accordion} expanded={expandedAccordions.includes('stratification')} onChange={handleAccordionChange('stratification')}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel3bh-content"
+          id="panel3bh-header"
+        >
+          <Typography>
+            Case-control stratification
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails className={classes.accordionDetails}>
+          <ul className={classes.cartUl}>
+            {currentStratificationSelection ? (
+              <li>{currentStratificationSelection.name}</li>
+            ) : null}
+          </ul>
+        </AccordionDetails>
+      </Accordion>
+    </>
+  );
+}

package/src/confirmatory-stepper.js

@@ -0,0 +1,209 @@
+import React, { useEffect } from 'react';
+import { Stepper, Step, StepLabel, Button, Grid, Box, Typography } from '@material-ui/core';
+import { ConfirmatoryCart } from './cart.js';
+import { SelectAgnostic } from './select-agnostic.js';
+import { SelectSpecific } from './select-specific.js';
+import { SelectStratification } from './select-stratification.js';
+import { useStyles } from './styles.js';
+
+const steps = [
+  'Select biomarkers (modality-agnostic)',
+  'Derive modality-specific biomarker signature',
+  'Define case-control stratification',
+];
+
+export function ConfirmatoryStepper(props) {
+  const {
+    autocompleteNode,
+
+    currentModalityAgnosticSelection,
+    setCurrentModalityAgnosticSelection,
+    currentModalitySpecificSelection,
+    setCurrentModalitySpecificSelection,
+    currentStratificationSelection,
+    setCurrentStratificationSelection,
+
+    getEdges,
+    stratifications,
+    onFinish,
+  } = props;
+  const classes = useStyles();
+  const [activeStep, setActiveStep] = React.useState(0);
+  const [skipped, setSkipped] = React.useState(new Set());
+
+  const isStepOptional = step => step === 2;
+
+  const isStepSkipped = step => skipped.has(step);
+
+  const handleNext = () => {
+    let newSkipped = skipped;
+    if (isStepSkipped(activeStep)) {
+      newSkipped = new Set(newSkipped.values());
+      newSkipped.delete(activeStep);
+    }
+
+    setActiveStep(prevActiveStep => prevActiveStep + 1);
+    setSkipped(newSkipped);
+  };
+
+  const handleBack = () => {
+    setActiveStep(prevActiveStep => prevActiveStep - 1);
+  };
+
+  const handleSkip = () => {
+    if (!isStepOptional(activeStep)) {
+      // You probably want to guard against something like this,
+      // it should never occur unless someone's actively trying to break something.
+      throw new Error("You can't skip a step that isn't optional.");
+    }
+
+    setActiveStep(prevActiveStep => prevActiveStep + 1);
+    setSkipped((prevSkipped) => {
+      const newSkipped = new Set(prevSkipped.values());
+      newSkipped.add(activeStep);
+      return newSkipped;
+    });
+  };
+
+  const handleReset = () => {
+    setActiveStep(0);
+  };
+
+  useEffect(() => {
+    if (activeStep === steps.length) {
+      onFinish();
+    }
+  }, [activeStep, steps]);
+
+
+  return (
+    <Grid item container xs={12}>
+      <Grid item container xs={12}>
+        <Box className={classes.fullWidthBox}>
+          <Stepper activeStep={activeStep}>
+            {steps.map((label, index) => {
+              const stepProps = {};
+              const labelProps = {};
+              if (isStepOptional(index)) {
+                labelProps.optional = (
+                  <Typography variant="caption">Optional</Typography>
+                );
+              }
+              if (isStepSkipped(index)) {
+                stepProps.completed = false;
+              }
+              return (
+                <Step key={label} {...stepProps}>
+                  <StepLabel {...labelProps}>{label}</StepLabel>
+                </Step>
+              );
+            })}
+          </Stepper>
+        </Box>
+      </Grid>
+      <Grid item container xs={12} style={{ marginTop: '20px' }} alignItems="flex-start">
+        {/* Step contents to left of cart */}
+        <Grid item container xs={8}>
+          {activeStep === steps.length ? (
+            <>
+              <Typography style={{ marginTop: '20px', marginBottom: '10px' }}>
+                All steps completed - you&apos;re finished
+              </Typography>
+            </>
+          ) : (
+            <>
+              {activeStep === 0 ? (
+                <SelectAgnostic
+                  autocompleteNode={autocompleteNode}
+
+                  currentModalityAgnosticSelection={currentModalityAgnosticSelection}
+                  setCurrentModalityAgnosticSelection={setCurrentModalityAgnosticSelection}
+                  currentModalitySpecificSelection={currentModalitySpecificSelection}
+                  setCurrentModalitySpecificSelection={setCurrentModalitySpecificSelection}
+                  currentStratificationSelection={currentStratificationSelection}
+                  setCurrentStratificationSelection={setCurrentStratificationSelection}
+
+                  getEdges={getEdges}
+                  stratifications={stratifications}
+                />
+              ) : null}
+              {activeStep === 1 ? (
+                <SelectSpecific
+                  autocompleteNode={autocompleteNode}
+
+                  currentModalityAgnosticSelection={currentModalityAgnosticSelection}
+                  setCurrentModalityAgnosticSelection={setCurrentModalityAgnosticSelection}
+                  currentModalitySpecificSelection={currentModalitySpecificSelection}
+                  setCurrentModalitySpecificSelection={setCurrentModalitySpecificSelection}
+                  currentStratificationSelection={currentStratificationSelection}
+                  setCurrentStratificationSelection={setCurrentStratificationSelection}
+
+                  getEdges={getEdges}
+                  stratifications={stratifications}
+                />
+              ) : null}
+              {activeStep === 2 ? (
+                <SelectStratification
+                  autocompleteNode={autocompleteNode}
+
+                  currentModalityAgnosticSelection={currentModalityAgnosticSelection}
+                  setCurrentModalityAgnosticSelection={setCurrentModalityAgnosticSelection}
+                  currentModalitySpecificSelection={currentModalitySpecificSelection}
+                  setCurrentModalitySpecificSelection={setCurrentModalitySpecificSelection}
+                  currentStratificationSelection={currentStratificationSelection}
+                  setCurrentStratificationSelection={setCurrentStratificationSelection}
+
+                  getEdges={getEdges}
+                  stratifications={stratifications}
+                />
+              ) : null}
+            </>
+          )}
+        </Grid>
+        {/* Cart */}
+        <Grid item container xs={4}>
+          <ConfirmatoryCart
+            currentModalityAgnosticSelection={currentModalityAgnosticSelection}
+            setCurrentModalityAgnosticSelection={setCurrentModalityAgnosticSelection}
+            currentModalitySpecificSelection={currentModalitySpecificSelection}
+            setCurrentModalitySpecificSelection={setCurrentModalitySpecificSelection}
+            currentStratificationSelection={currentStratificationSelection}
+            setCurrentStratificationSelection={setCurrentStratificationSelection}
+            stratifications={stratifications}
+          />
+        </Grid>
+        {/* Step navigation button footer */}
+        <Box className={classes.fullWidthBox}>
+          {activeStep === steps.length ? (
+            <>
+              <Box style={{ display: 'flex', flexDirection: 'row', paddingTop: '20px' }}>
+                <Box style={{ flex: '1 1 auto' }} />
+                <Button onClick={handleReset}>Reset</Button>
+              </Box>
+            </>
+          ) : (
+            <Box style={{ display: 'flex', flexDirection: 'row', paddingTop: '20px' }}>
+              <Button
+                color="inherit"
+                disabled={activeStep === 0}
+                onClick={handleBack}
+                style={{ mr: 1 }}
+              >
+                Back
+              </Button>
+              <Box style={{ flex: '1 1 auto' }} />
+              {isStepOptional(activeStep) && (
+                <Button color="inherit" onClick={handleSkip} style={{ marginRight: '10px' }}>
+                  Skip
+                </Button>
+              )}
+              <Button onClick={handleNext}>
+                {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
+              </Button>
+            </Box>
+          )}
+        </Box>
+      </Grid>
+    </Grid>
+  );
+}

package/src/default-async-functions.js

@@ -0,0 +1,187 @@
+// @ts-check
+/* eslint-disable max-len */
+/* eslint-disable no-unused-vars */
+import { csvParse } from 'd3-dsv';
+// eslint-disable-next-line import/no-unresolved
+import Fuse from 'fuse.js/basic';
+
+/** @import { KgNode, KgEdge, TargetModalityType, AutocompleteFeatureFunc, TransformFeatureFunc } from '@vitessce/types' */
+/** @import { QueryClient, QueryFunctionContext } from '@tanstack/react-query' */
+
+const KG_BASE_URL = 'https://storage.googleapis.com/vitessce-demo-data/enrichr-kg-september-2023';
+
+/**
+ * @returns {Promise<KgNode[]>}
+ */
+function loadGeneNodes() {
+  return fetch(`${KG_BASE_URL}/Gene.nodes.csv`)
+    .then(res => res.text())
+    .then((res) => {
+      const result = csvParse(res);
+      return result.map((/** @type {any} */ d) => ({
+        kgId: d.id,
+        label: d.label,
+        term: `hgnc.symbol:${d.label}`,
+        nodeType: 'gene',
+      }));
+    });
+}
+
+/**
+ * @returns {Promise<KgNode[]>}
+ */
+function loadCellTypeNodes() {
+  return fetch(`${KG_BASE_URL}/HuBMAP_ASCTplusB_augmented_2022.nodes.csv`)
+    .then(res => res.text())
+    .then((res) => {
+      const result = csvParse(res);
+      return result.map((/** @type {any} */ d) => ({
+        kgId: d.id,
+        label: d.label,
+        term: d.cell_id.length ? d.cell_id : null,
+        nodeType: 'cell-type',
+      }));
+    });
+}
+
+/**
+ * @returns {Promise<KgNode[]>}
+ */
+function loadPathwayNodes() {
+  return fetch(`${KG_BASE_URL}/Reactome_2022.nodes.csv`)
+    .then(res => res.text())
+    .then((res) => {
+      const result = csvParse(res);
+      return result.map((/** @type {any} */ d) => ({
+        kgId: d.id,
+        label: d.pathway,
+        term: `reactome:${d.acc}`,
+        nodeType: 'pathway',
+      }));
+    });
+}
+
+// Parent app can pass in queryClient
+// (to every async function) so that functions can call .fetchQuery
+// Reference: https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientfetchquery
+
+/**
+ *
+ * @param {QueryFunctionContext} ctx
+ * @returns
+ */
+async function loadFuseObject(ctx) {
+  const queryClient = /** @type {QueryClient} */ (ctx.meta?.queryClient);
+
+  const [geneNodes, cellTypeNodes, pathwayNodes] = await Promise.all([
+    queryClient.fetchQuery({
+      queryKey: ['geneNodes'],
+      staleTime: Infinity,
+      queryFn: loadGeneNodes,
+    }),
+    queryClient.fetchQuery({
+      queryKey: ['cellTypeNodes'],
+      staleTime: Infinity,
+      queryFn: loadCellTypeNodes,
+    }),
+    queryClient.fetchQuery({
+      queryKey: ['pathwayNodes'],
+      staleTime: Infinity,
+      queryFn: loadPathwayNodes,
+    }),
+  ]);
+
+  const fuseOptions = {
+    keys: ['label', 'term'],
+  };
+
+  // For fuzzy searching using fuse.js
+  return new Fuse(
+    [
+      ...geneNodes,
+      ...cellTypeNodes,
+      ...pathwayNodes,
+    ],
+    fuseOptions,
+  );
+}
+
+/**
+ * @satisfies {AutocompleteFeatureFunc}
+ * @param {object} ctx
+ * @param {QueryClient} ctx.queryClient
+ * @param {string} partial
+ * @param {null | TargetModalityType} targetModality
+ * @returns {Promise<KgNode[]>}
+ */
+export async function autocompleteFeature({ queryClient }, partial, targetModality) {
+  if (partial.length < 1) {
+    return [];
+  }
+  // TODO: parameterize the fuse object (via queryKey) based on targetModality?
+  // Or just perform that filtering after the search?
+  const fuse = await queryClient.fetchQuery({
+    queryKey: ['autocompleteFeature', 'fuseObject'],
+    staleTime: Infinity,
+    queryFn: loadFuseObject,
+    meta: { queryClient },
+  });
+
+  const results = fuse.search(partial);
+  return results.map((/** @type {any} */ result) => result.item);
+}
+
+async function loadPathwayToGeneEdges() {
+  return fetch(`${KG_BASE_URL}/Reactome_2022.Reactome.Gene.edges.csv`)
+    .then(res => res.text())
+    .then((res) => {
+      const result = csvParse(res);
+      return result.map((/** @type {any} */ d) => ({
+        source: d.source,
+        target: d.target,
+        relation: d.relation,
+      }));
+    });
+}
+
+/**
+ * @satisfies {TransformFeatureFunc}
+ * @param {object} ctx
+ * @param {QueryClient} ctx.queryClient
+ * @param {KgNode} node
+ * @param {TargetModalityType} targetModality
+ * @returns {Promise<KgNode[]>}
+ */
+export async function transformFeature({ queryClient }, node, targetModality) {
+  if (targetModality === node.nodeType) {
+    // For example, if the target modality is gene and the node is already a gene node.
+    return [node];
+  }
+  if (targetModality === 'gene') {
+    const geneNodes = await queryClient.fetchQuery({
+      queryKey: ['geneNodes'],
+      staleTime: Infinity,
+      queryFn: loadGeneNodes,
+    });
+    if (node.nodeType === 'pathway') {
+      // Pathway to genes case.
+      const pathwayGeneEdges = await queryClient.fetchQuery({
+        queryKey: ['pathwayGeneEdges'],
+        staleTime: Infinity,
+        queryFn: loadPathwayToGeneEdges,
+      });
+
+      const matchingEdges = pathwayGeneEdges.filter((/** @type {KgEdge} */ d) => d.source === node.kgId);
+      const matchingGeneIds = matchingEdges.map((/** @type {KgEdge} */ d) => d.target);
+      const matchingGenes = geneNodes.filter(d => matchingGeneIds.includes(d.kgId));
+      return matchingGenes;
+    }
+    if (node.nodeType === 'cell-type') {
+      // Cell type to genes case.
+
+      // TODO: implement
+    }
+  }
+  // TODO: handle other target modalities
+  return [];
+}

package/src/index.js

@@ -0,0 +1,5 @@
+export { BiomarkerSelectSubscriber } from './BiomarkerSelectSubscriber.js';
+export {
+  autocompleteFeature,
+  transformFeature,
+} from './default-async-functions.js';

package/src/missing-types.ts

@@ -0,0 +1,2 @@
+declare module 'd3-dsv';
+declare module 'fuse.js/basic'