@vitessce/biomarker-select 3.5.7 → 3.5.9

package/dist-tsc/ComparativeHeadingSubscriber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComparativeHeadingSubscriber.d.ts","sourceRoot":"","sources":["../src/ComparativeHeadingSubscriber.js"],"names":[],"mappings":"AA+BA,sEAuDC"}

package/dist-tsc/ComparativeHeadingSubscriber.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { useCoordination, } from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+import { makeStyles } from '@material-ui/core';
+const useStyles = makeStyles(theme => ({
+    buttonContainer: {
+        position: 'absolute',
+        right: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        height: '100%',
+    },
+    headingContainer: {
+        backgroundColor: 'transparent',
+    },
+    headingSectionContainer: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        position: 'relative',
+    },
+    headingText: {
+        margin: 0,
+        color: theme.palette.primaryForeground,
+    },
+}));
+export function ComparativeHeadingSubscriber(props) {
+    const { coordinationScopes, } = props;
+    const [{ sampleSetSelection, featureSelection, }, { setSampleSetSelection,
+    // TODO: buttons for modification of featureSelection
+    // setFeatureSelection,
+     }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.COMPARATIVE_HEADING], coordinationScopes);
+    const classes = useStyles();
+    const swapSampleSets = useCallback(() => {
+        if (sampleSetSelection?.length === 2) {
+            setSampleSetSelection([
+                sampleSetSelection[1],
+                sampleSetSelection[0],
+            ]);
+        }
+    }, [sampleSetSelection, setSampleSetSelection]);
+    return (_jsxs("div", { className: classes.headingContainer, children: [sampleSetSelection && sampleSetSelection.length === 2 ? (_jsxs("div", { className: classes.headingSectionContainer, children: [_jsx("div", { style: { width: '45%' }, children: _jsx("h2", { className: classes.headingText, children: sampleSetSelection?.[0]?.at(-1) }) }), _jsx("div", { style: { width: '5%' }, children: _jsx("h2", { className: classes.headingText, style: { textAlign: 'right' }, children: "vs.\u00A0" }) }), _jsx("div", { style: { width: '50%' }, children: _jsx("h2", { className: classes.headingText, children: sampleSetSelection?.[1]?.at(-1) }) }), _jsx("div", { className: classes.buttonContainer, children: _jsx("button", { onClick: swapSampleSets, type: "button", children: "Swap" }) })] })) : null, featureSelection && featureSelection.length > 0 ? (_jsxs("div", { className: classes.headingSectionContainer, children: [_jsx("div", { children: _jsx("h3", { className: classes.headingText, children: "Selected Biomarkers:\u00A0" }) }), featureSelection?.map((featureName, i) => (_jsx("div", { children: _jsxs("h3", { className: classes.headingText, children: [featureName, i < featureSelection.length - 1 ? (_jsx("span", { children: ",\u00A0" })) : null] }) })))] })) : null] }));
+}

package/dist-tsc/default-async-functions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default-async-functions.d.ts","sourceRoot":"","sources":["../src/default-async-functions.js"],"names":[],"mappings":"AAqHA;;;;;;;GAOG;AACH,qDALG;IAAyB,WAAW,EAA5B,WAAW;CACnB,WAAQ,MAAM,kBACN,IAAI,GAAG,kBAAkB,GACvB,OAAO,CAAC,MAAM,EAAE,CAAC,CAiB7B;AAeD;;;;;;;GAOG;AACH,kDALG;IAAyB,WAAW,EAA5B,WAAW;CACnB,QAAQ,MAAM,kBACN,kBAAkB,GAChB,OAAO,CAAC,MAAM,EAAE,CAAC,CAkC7B;AAED;;;;;;GAMG;AACH,qDAJG;IAAyB,WAAW,EAA5B,WAAW;CACnB,SAAQ,MAAM,GACJ,OAAO,CAAC,MAAM,EAAE,CAAC,CA2B7B;AAED;;;;;;;GAOG;AACH,gDALG;IAAyB,WAAW,EAA5B,WAAW;CACnB,kBAAQ,MAAM,kBACN,MAAM,GACJ,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAoBxC;iCAzPsD,uBAAuB;wCADsE,iBAAiB;4BAAjB,iBAAiB"}
+{"version":3,"file":"default-async-functions.d.ts","sourceRoot":"","sources":["../src/default-async-functions.js"],"names":[],"mappings":"AAqHA;;;;;;;GAOG;AACH,qDALG;IAAyB,WAAW,EAA5B,WAAW;CACnB,WAAQ,MAAM,kBACN,IAAI,GAAG,kBAAkB,GACvB,OAAO,CAAC,MAAM,EAAE,CAAC,CAiB7B;AAeD;;;;;;;GAOG;AACH,kDALG;IAAyB,WAAW,EAA5B,WAAW;CACnB,QAAQ,MAAM,kBACN,kBAAkB,GAChB,OAAO,CAAC,MAAM,EAAE,CAAC,CAmC7B;AAED;;;;;;GAMG;AACH,qDAJG;IAAyB,WAAW,EAA5B,WAAW;CACnB,SAAQ,MAAM,GACJ,OAAO,CAAC,MAAM,EAAE,CAAC,CA2B7B;AAED;;;;;;;GAOG;AACH,gDALG;IAAyB,WAAW,EAA5B,WAAW;CACnB,kBAAQ,MAAM,kBACN,MAAM,GACJ,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAoBxC;iCA1PsD,uBAAuB;wCADsE,iBAAiB;4BAAjB,iBAAiB"}

package/dist-tsc/default-async-functions.js

@@ -161,6 +161,7 @@ export async function transformFeature({ queryClient }, node, targetModality) {
                 staleTime: Infinity,
                 queryFn: loadPathwayToGeneEdges,
             });
+            // TODO: support matching using ontology term (rather than requiring kgId)?
             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));

package/dist-tsc/index.d.ts

@@ -1,3 +1,4 @@
 export { BiomarkerSelectSubscriber } from "./BiomarkerSelectSubscriber.js";
+export { ComparativeHeadingSubscriber } from "./ComparativeHeadingSubscriber.js";
 export { autocompleteFeature, transformFeature, getAlternativeTerms, getTermMapping } from "./default-async-functions.js";
 //# sourceMappingURL=index.d.ts.map

package/dist-tsc/index.js

@@ -1,2 +1,3 @@
 export { BiomarkerSelectSubscriber } from './BiomarkerSelectSubscriber.js';
+export { ComparativeHeadingSubscriber } from './ComparativeHeadingSubscriber.js';
 export { autocompleteFeature, transformFeature, getAlternativeTerms, getTermMapping, } from './default-async-functions.js';

package/dist-tsc/scmd-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scmd-ui.d.ts","sourceRoot":"","sources":["../src/scmd-ui.js"],"names":[],"mappings":"AAOA,gDAmEC"}
+{"version":3,"file":"scmd-ui.d.ts","sourceRoot":"","sources":["../src/scmd-ui.js"],"names":[],"mappings":"AAQA,gDAkFC"}

package/dist-tsc/scmd-ui.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-unused-vars */
 import React, { useState } from 'react';
 import { Button, ButtonGroup, Grid, Tooltip } from '@material-ui/core';
-import { ConfirmatoryStepper } from './confirmatory-stepper.js';
+import { ConfirmatoryStepper } from './stepper-confirmatory.js';
+import { ExploratoryStepper } from './stepper-exploratory.js';
 import { useStyles } from './styles.js';
 export function ScmdUi(props) {
     const { mode: modeProp, setMode, step: stepProp, setStep, currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection, currentModalitySpecificSelection, setCurrentModalitySpecificSelection, currentStratificationSelection, setCurrentStratificationSelection, autocompleteNode, getEdges, stratifications, onFinish, } = props;
@@ -11,5 +12,5 @@ export function ScmdUi(props) {
     const step = mode === 'confirmatory' ? (stepProp || 'select-biomarkers') : (stepProp || 'define-stratification');
     const [tempIsVisible, setTempIsVisible] = useState(true);
     const isConfirmatoryMode = mode === 'confirmatory';
-    return (_jsxs(Grid, { container: true, style: { border: '0px solid red' }, children: [_jsxs(Grid, { item: true, container: true, xs: 12, className: classes.header, children: [_jsx(Grid, { item: true, xs: 8 }), _jsx(Grid, { item: true, container: true, xs: 4, justifyContent: "flex-end", children: _jsxs(ButtonGroup, { variant: "outlined", size: "small", color: "secondary", "aria-label": "Toggle between confirmatory and exploratory modes", children: [_jsx(Tooltip, { arrow: true, title: "Start from biomarker(s) of interest", children: _jsx(Button, { variant: isConfirmatoryMode ? 'contained' : 'outlined', onClick: () => setMode('confirmatory'), children: "Confirmatory (Hypothesis-driven)" }) }), _jsx(Tooltip, { arrow: true, title: "Lacking biomarker(s) of interest", children: _jsx(Button, { variant: !isConfirmatoryMode ? 'contained' : 'outlined', onClick: () => setMode('exploratory'), children: "Exploratory (Hypothesis-generating)" }) })] }) })] }), tempIsVisible ? (_jsxs("div", { style: { border: '2px solid #eee', borderRadius: '5px' }, children: [mode === 'confirmatory' ? (_jsx(ConfirmatoryStepper, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications, onFinish: onFinish })) : null, mode === 'exploratory' ? _jsx("span", { children: "TODO" }) : null] })) : null] }));
+    return (_jsxs(Grid, { container: true, style: { border: '0px solid red' }, children: [_jsxs(Grid, { item: true, container: true, xs: 12, className: classes.header, children: [_jsx(Grid, { item: true, xs: 8 }), _jsx(Grid, { item: true, container: true, xs: 4, justifyContent: "flex-end", children: _jsxs(ButtonGroup, { variant: "outlined", size: "small", color: "secondary", "aria-label": "Toggle between confirmatory and exploratory modes", children: [_jsx(Tooltip, { arrow: true, title: "Start from biomarker(s) of interest", children: _jsx(Button, { variant: isConfirmatoryMode ? 'contained' : 'outlined', onClick: () => setMode('confirmatory'), children: "Confirmatory (Hypothesis-driven)" }) }), _jsx(Tooltip, { arrow: true, title: "Lacking biomarker(s) of interest", children: _jsx(Button, { variant: !isConfirmatoryMode ? 'contained' : 'outlined', onClick: () => setMode('exploratory'), children: "Exploratory (Hypothesis-generating)" }) })] }) })] }), tempIsVisible ? (_jsxs("div", { style: { border: '2px solid #eee', borderRadius: '5px' }, children: [mode === 'confirmatory' ? (_jsx(ConfirmatoryStepper, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications, onFinish: onFinish })) : null, mode === 'exploratory' ? (_jsx(ExploratoryStepper, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications, onFinish: onFinish })) : null] })) : null] }));
 }

package/dist-tsc/{confirmatory-stepper.d.ts → stepper-confirmatory.d.ts}

@@ -1,2 +1,2 @@
 export function ConfirmatoryStepper(props: any): JSX.Element;
-//# sourceMappingURL=confirmatory-stepper.d.ts.map
+//# sourceMappingURL=stepper-confirmatory.d.ts.map

package/dist-tsc/stepper-confirmatory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-confirmatory.d.ts","sourceRoot":"","sources":["../src/stepper-confirmatory.js"],"names":[],"mappings":"AAcA,6DAkMC"}

package/dist-tsc/stepper-exploratory.d.ts

@@ -0,0 +1,2 @@
+export function ExploratoryStepper(props: any): JSX.Element;
+//# sourceMappingURL=stepper-exploratory.d.ts.map

package/dist-tsc/stepper-exploratory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-exploratory.d.ts","sourceRoot":"","sources":["../src/stepper-exploratory.js"],"names":[],"mappings":"AAUA,4DAoKC"}

package/dist-tsc/stepper-exploratory.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
+import { Stepper, Step, StepLabel, Button, Grid, Box, Typography } from '@material-ui/core';
+import { ConfirmatoryCart } from './cart.js';
+import { SelectStratification } from './select-stratification.js';
+import { useStyles } from './styles.js';
+const steps = [
+    'Define case-control stratification',
+];
+export function ExploratoryStepper(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 (_jsxs(Grid, { item: true, container: true, xs: 12, children: [_jsx(Grid, { item: true, container: true, xs: 12, children: _jsx(Box, { className: classes.fullWidthBox, children: _jsx(Stepper, { activeStep: activeStep, children: steps.map((label, index) => {
+                            const stepProps = {};
+                            const labelProps = {};
+                            if (isStepOptional(index)) {
+                                labelProps.optional = (_jsx(Typography, { variant: "caption", children: "Optional" }));
+                            }
+                            if (isStepSkipped(index)) {
+                                stepProps.completed = false;
+                            }
+                            return (_jsx(Step, { ...stepProps, children: _jsx(StepLabel, { ...labelProps, children: label }) }, label));
+                        }) }) }) }), _jsxs(Grid, { item: true, container: true, xs: 12, style: { marginTop: '20px' }, alignItems: "flex-start", children: [_jsx(Grid, { item: true, container: true, xs: 8, children: activeStep === steps.length ? (_jsx(_Fragment, { children: _jsx(Typography, { style: { marginTop: '20px', marginBottom: '10px' }, children: "All steps completed - you're finished" }) })) : (_jsx(_Fragment, { children: activeStep === 0 ? (_jsx(SelectStratification, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications })) : null })) }), _jsx(Grid, { item: true, container: true, xs: 4, children: _jsx(ConfirmatoryCart, { currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, stratifications: stratifications }) }), _jsx(Box, { className: classes.fullWidthBox, children: activeStep === steps.length ? (_jsx(_Fragment, { children: _jsxs(Box, { style: { display: 'flex', flexDirection: 'row', paddingTop: '20px' }, children: [_jsx(Box, { style: { flex: '1 1 auto' } }), _jsx(Button, { onClick: handleReset, children: "Reset" })] }) })) : (_jsxs(Box, { style: { display: 'flex', flexDirection: 'row', paddingTop: '20px' }, children: [_jsx(Button, { color: "inherit", disabled: activeStep === 0, onClick: handleBack, style: { mr: 1 }, children: "Back" }), _jsx(Box, { style: { flex: '1 1 auto' } }), isStepOptional(activeStep) && (_jsx(Button, { color: "inherit", onClick: handleSkip, style: { marginRight: '10px' }, children: "Skip" })), _jsx(Button, { onClick: handleNext, children: activeStep === steps.length - 1 ? 'Finish' : 'Next' })] })) })] })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/biomarker-select",
-  "version": "3.5.7",
+  "version": "3.5.9",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -24,9 +24,9 @@
     "react-window": "^1.8.10",
     "fuse.js": "^7.0.0",
     "d3-dsv": "^1.1.1",
-    "@vitessce/constants-internal": "3.5.7",
-    "@vitessce/vit-s": "3.5.7",
-    "@vitessce/types": "3.5.7"
+    "@vitessce/constants-internal": "3.5.9",
+    "@vitessce/vit-s": "3.5.9",
+    "@vitessce/types": "3.5.9"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",

package/src/BiomarkerSelectSubscriber.js

@@ -1,17 +1,20 @@
 /* eslint-disable max-len */
 /* eslint-disable no-unused-vars */
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import {
   useAsyncFunction,
   useViewConfigStoreApi,
   useSetViewConfig,
   useViewConfig,
   useCoordination,
+  useLoaders,
+  useComparisonMetadata,
+  useMatchingLoader,
+  useColumnNameMapping,
 } from '@vitessce/vit-s';
-import { AsyncFunctionType, ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+import { AsyncFunctionType, ViewType, COMPONENT_COORDINATION_TYPES, DataType } from '@vitessce/constants-internal';
 import { ScmdUi } from './scmd-ui.js';
 
-
 /**
  *
  * @param {object} props
@@ -21,10 +24,15 @@ import { ScmdUi } from './scmd-ui.js';
 export function BiomarkerSelectSubscriber(props) {
   const {
     coordinationScopes,
-    stratificationOptions,
+    stratificationOptions: stratificationOptionsProp, // TODO: Remove; Get from comparisonMetadata instead
   } = props;
 
+  const loaders = useLoaders();
+
   const [{
+    dataset,
+    obsType,
+    sampleType,
     sampleSetSelection,
     featureSelection,
   }, {
@@ -40,6 +48,16 @@ export function BiomarkerSelectSubscriber(props) {
   const setViewConfig = useSetViewConfig(viewConfigStoreApi);
 
 
+  // Need obsSets and sampleSets options to obtain mapping between
+  // group names and column names.
+  const obsSetsLoader = useMatchingLoader(
+    loaders, dataset, DataType.OBS_SETS, { obsType },
+  );
+  const sampleSetsLoader = useMatchingLoader(
+    loaders, dataset, DataType.SAMPLE_SETS, { sampleType },
+  );
+  const sampleSetsColumnNameMappingReversed = useColumnNameMapping(sampleSetsLoader, true);
+
   // 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);
@@ -62,6 +80,43 @@ export function BiomarkerSelectSubscriber(props) {
     [transformFeature],
   );
 
+  const [{ comparisonMetadata }, cmpMetadataStatus, cmpMetadataUrls] = useComparisonMetadata(
+    loaders, dataset, false, {}, {}, { obsType, sampleType },
+  );
+  const stratificationOptions = useMemo(() => {
+    /*
+      return array of objects like {
+        stratificationId: 'aki-vs-hr',
+        name: 'Acute kidney injury (AKI) vs. Healthy reference',
+        stratificationType: 'sampleSet', // key changed from 'groupType'. value changed from 'clinical'
+        sampleSets: [
+          ['Disease Type', 'AKI'],
+          ['Disease Type', 'Reference'],
+        ],
+      },
+    */
+    if (comparisonMetadata?.sample_group_pairs) {
+      return comparisonMetadata.sample_group_pairs.map((sampleGroupPair) => {
+        const [sampleGroupCol, sampleGroupValues] = sampleGroupPair;
+        const [sampleGroupCtrl, sampleGroupCase] = sampleGroupValues;
+        const groupName = sampleSetsColumnNameMappingReversed?.[sampleGroupCol];
+        return {
+          stratificationId: `${sampleGroupCol}_${sampleGroupCtrl}-vs-${sampleGroupCase}`,
+          name: `${groupName}: ${sampleGroupCtrl} vs. ${sampleGroupCase}`,
+          stratificationType: 'sampleSet',
+          sampleSets: [
+            // With sampleSets coming from the comparison_metadata,
+            // need to use loader options from obsSets and sampleSets to get mapping
+            // from column name to group name.
+            [groupName, sampleGroupCtrl],
+            [groupName, sampleGroupCase],
+          ],
+        };
+      });
+    }
+    return null;
+  }, [comparisonMetadata, sampleSetsColumnNameMappingReversed]);
+
   return (
     <>
       {isSelecting ? (
@@ -80,20 +135,39 @@ export function BiomarkerSelectSubscriber(props) {
           getEdges={getEdges}
           stratifications={stratificationOptions}
           onFinish={() => {
-            setViewConfig({
+            if (mode === 'exploratory') {
+              // mode is exploratory, configure accordingly.
+
+              // TODO
+
+            } else {
+              // mode is confirmatory, configure accordingly.
+
+              // TODO
+            }
+
+            const newViewConfig = {
               ...viewConfig,
               coordinationSpace: {
                 ...viewConfig.coordinationSpace,
                 sampleSetFilter: {
                   ...viewConfig.coordinationSpace.sampleSetFilter,
-                  'case-control': currentStratificationSelection?.sampleSets,
+                  __comparison__: currentStratificationSelection?.sampleSets,
                 },
                 sampleSetSelection: {
                   ...viewConfig.coordinationSpace.sampleSetSelection,
-                  'case-control': currentStratificationSelection?.sampleSets,
+                  __comparison__: currentStratificationSelection?.sampleSets,
+                },
+                featureSelection: {
+                  ...viewConfig.coordinationSpace.featureSelection,
+                  __comparison__: currentModalitySpecificSelection ? currentModalitySpecificSelection.map(d => d.label) : null,
                 },
               },
-            });
+            };
+
+            // TODO: can the normal coordination value setters be used instead?
+            // (e.g., setFeatureSelection, setSampleSetSelection)
+            setViewConfig(newViewConfig);
           }}
         />
       ) : null}

package/src/ComparativeHeadingSubscriber.js

@@ -0,0 +1,87 @@
+import React, { useCallback } from 'react';
+import {
+  useCoordination,
+} from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  buttonContainer: {
+    position: 'absolute',
+    right: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    height: '100%',
+  },
+  headingContainer: {
+    backgroundColor: 'transparent',
+  },
+  headingSectionContainer: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    position: 'relative',
+  },
+  headingText: {
+    margin: 0,
+    color: theme.palette.primaryForeground,
+  },
+}));
+
+export function ComparativeHeadingSubscriber(props) {
+  const {
+    coordinationScopes,
+  } = props;
+
+  const [{
+    sampleSetSelection,
+    featureSelection,
+  }, {
+    setSampleSetSelection,
+    // TODO: buttons for modification of featureSelection
+    // setFeatureSelection,
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType.COMPARATIVE_HEADING],
+    coordinationScopes,
+  );
+
+  const classes = useStyles();
+
+  const swapSampleSets = useCallback(() => {
+    if (sampleSetSelection?.length === 2) {
+      setSampleSetSelection([
+        sampleSetSelection[1],
+        sampleSetSelection[0],
+      ]);
+    }
+  }, [sampleSetSelection, setSampleSetSelection]);
+
+  return (
+    <div className={classes.headingContainer}>
+      {sampleSetSelection && sampleSetSelection.length === 2 ? (
+        <div className={classes.headingSectionContainer}>
+          <div style={{ width: '45%' }}><h2 className={classes.headingText}>{sampleSetSelection?.[0]?.at(-1)}</h2></div>
+          <div style={{ width: '5%' }}><h2 className={classes.headingText} style={{ textAlign: 'right' }}>vs.&nbsp;</h2></div>
+          <div style={{ width: '50%' }}><h2 className={classes.headingText}>{sampleSetSelection?.[1]?.at(-1)}</h2></div>
+          <div className={classes.buttonContainer}>
+            <button onClick={swapSampleSets} type="button">Swap</button>
+          </div>
+        </div>
+      ) : null}
+      {featureSelection && featureSelection.length > 0 ? (
+        <div className={classes.headingSectionContainer}>
+          <div><h3 className={classes.headingText}>Selected Biomarkers:&nbsp;</h3></div>
+          {featureSelection?.map((featureName, i) => (
+            <div>
+              <h3 className={classes.headingText}>
+                {featureName}
+                {i < featureSelection.length - 1 ? (<span>,&nbsp;</span>) : null}
+              </h3>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/default-async-functions.js

@@ -180,6 +180,7 @@ export async function transformFeature({ queryClient }, node, targetModality) {
         queryFn: loadPathwayToGeneEdges,
       });
 
+      // TODO: support matching using ontology term (rather than requiring kgId)?
       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));

package/src/index.js

@@ -1,4 +1,5 @@
 export { BiomarkerSelectSubscriber } from './BiomarkerSelectSubscriber.js';
+export { ComparativeHeadingSubscriber } from './ComparativeHeadingSubscriber.js';
 export {
   autocompleteFeature,
   transformFeature,

package/src/scmd-ui.js

@@ -1,7 +1,8 @@
 /* eslint-disable no-unused-vars */
 import React, { useState } from 'react';
 import { Button, ButtonGroup, Grid, Tooltip } from '@material-ui/core';
-import { ConfirmatoryStepper } from './confirmatory-stepper.js';
+import { ConfirmatoryStepper } from './stepper-confirmatory.js';
+import { ExploratoryStepper } from './stepper-exploratory.js';
 import { useStyles } from './styles.js';
 
 
@@ -67,7 +68,22 @@ export function ScmdUi(props) {
               onFinish={onFinish}
             />
           ) : null}
-          {mode === 'exploratory' ? <span>TODO</span> : null}
+          {mode === 'exploratory' ? (
+            <ExploratoryStepper
+              autocompleteNode={autocompleteNode}
+
+              currentModalityAgnosticSelection={currentModalityAgnosticSelection}
+              setCurrentModalityAgnosticSelection={setCurrentModalityAgnosticSelection}
+              currentModalitySpecificSelection={currentModalitySpecificSelection}
+              setCurrentModalitySpecificSelection={setCurrentModalitySpecificSelection}
+              currentStratificationSelection={currentStratificationSelection}
+              setCurrentStratificationSelection={setCurrentStratificationSelection}
+
+              getEdges={getEdges}
+              stratifications={stratifications}
+              onFinish={onFinish}
+            />
+          ) : null}
         </div>
       ) : null}
     </Grid>