@vitessce/biomarker-select 3.5.6 → 3.5.8

package/dist/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React__default, { Children, isValidElement, cloneElement, createElement, PureComponent, useRef, useEffect, useMemo, useState, useCallback } from "react";
-import { useCoordination, useViewConfigStoreApi, useViewConfig, useSetViewConfig, useAsyncFunction } from "@vitessce/vit-s";
+import { useLoaders, useCoordination, useViewConfigStoreApi, useViewConfig, useSetViewConfig, useMatchingLoader, useColumnNameMapping, useAsyncFunction, useComparisonMetadata } from "@vitessce/vit-s";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 function getDefaultExportFromCjs(x) {
@@ -909,9 +909,35 @@ const ViewType = {
   FEATURE_VALUE_HISTOGRAM: "featureValueHistogram",
   DOT_PLOT: "dotPlot",
   FEATURE_BAR_PLOT: "featureBarPlot",
+  VOLCANO_PLOT: "volcanoPlot",
+  OBS_SET_COMPOSITION_BAR_PLOT: "obsSetCompositionBarPlot",
+  FEATURE_SET_ENRICHMENT_BAR_PLOT: "featureSetEnrichmentBarPlot",
   BIOMARKER_SELECT: "biomarkerSelect",
+  COMPARATIVE_HEADING: "comparativeHeading",
   LINK_CONTROLLER: "linkController",
-  DUAL_SCATTERPLOT: "dualScatterplot"
+  NEUROGLANCER: "neuroglancer",
+  DUAL_SCATTERPLOT: "dualScatterplot",
+  TREEMAP: "treemap"
+};
+const DataType = {
+  OBS_LABELS: "obsLabels",
+  OBS_EMBEDDING: "obsEmbedding",
+  OBS_FEATURE_MATRIX: "obsFeatureMatrix",
+  OBS_SETS: "obsSets",
+  FEATURE_LABELS: "featureLabels",
+  IMAGE: "image",
+  OBS_SEGMENTATIONS: "obsSegmentations",
+  NEIGHBORHOODS: "neighborhoods",
+  GENOMIC_PROFILES: "genomic-profiles",
+  OBS_SPOTS: "obsSpots",
+  OBS_POINTS: "obsPoints",
+  OBS_LOCATIONS: "obsLocations",
+  SAMPLE_SETS: "sampleSets",
+  SAMPLE_EDGES: "sampleEdges",
+  COMPARISON_METADATA: "comparisonMetadata",
+  FEATURE_STATS: "featureStats",
+  FEATURE_SET_STATS: "featureSetStats",
+  OBS_SET_STATS: "obsSetStats"
 };
 const AsyncFunctionType = {
   // String input (rather than Node input)
@@ -1065,14 +1091,25 @@ const CoordinationType = {
   SAMPLE_SET_FILTER: "sampleSetFilter",
   SAMPLE_FILTER_MODE: "sampleFilterMode",
   SAMPLE_SET_COLOR: "sampleSetColor",
+  SAMPLE_HIGHLIGHT: "sampleHighlight",
   EMBEDDING_POINTS_VISIBLE: "embeddingPointsVisible",
   EMBEDDING_CONTOURS_VISIBLE: "embeddingContoursVisible",
   EMBEDDING_CONTOURS_FILLED: "embeddingContoursFilled",
   EMBEDDING_CONTOUR_PERCENTILES: "embeddingContourPercentiles",
   CONTOUR_COLOR_ENCODING: "contourColorEncoding",
-  CONTOUR_COLOR: "contourColor"
+  CONTOUR_COLOR: "contourColor",
+  // For volcano plot:
+  FEATURE_POINT_SIGNIFICANCE_THRESHOLD: "featurePointSignificanceThreshold",
+  FEATURE_LABEL_SIGNIFICANCE_THRESHOLD: "featureLabelSignificanceThreshold",
+  FEATURE_POINT_FOLD_CHANGE_THRESHOLD: "featurePointFoldChangeThreshold",
+  FEATURE_LABEL_FOLD_CHANGE_THRESHOLD: "featureLabelFoldChangeThreshold",
+  // Treemap
+  HIERARCHY_LEVELS: "hierarchyLevels"
 };
 const COMPONENT_COORDINATION_TYPES = {
+  [ViewType.NEUROGLANCER]: [
+    CoordinationType.DATASET
+  ],
   [ViewType.SCATTERPLOT]: [
     CoordinationType.DATASET,
     CoordinationType.OBS_TYPE,
@@ -1542,14 +1579,106 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType.OBS_COLOR_ENCODING,
     CoordinationType.ADDITIONAL_OBS_SETS
   ],
+  [ViewType.VOLCANO_PLOT]: [
+    CoordinationType.DATASET,
+    CoordinationType.OBS_TYPE,
+    CoordinationType.FEATURE_TYPE,
+    CoordinationType.SAMPLE_TYPE,
+    // For selection of case-control sets of samples:
+    CoordinationType.SAMPLE_SET_SELECTION,
+    // For selection of one-vs-others sets of observations:
+    CoordinationType.OBS_SET_SELECTION,
+    // TODO: CoordinationType.FEATURE_SET_SELECTION,
+    // TODO: CoordinationType.FEATURE_SET_HIGHLIGHT,
+    // TODO: CoordinationType.FEATURE_SET_COLOR,
+    CoordinationType.FEATURE_HIGHLIGHT,
+    CoordinationType.FEATURE_SELECTION,
+    CoordinationType.FEATURE_VALUE_COLORMAP,
+    CoordinationType.FEATURE_VALUE_COLORMAP_RANGE,
+    // TODO: CoordinationType.FEATURE_COLOR_ENCODING,
+    // TODO: CoordinationType.ADDITIONAL_FEATURE_SETS,
+    CoordinationType.TOOLTIPS_VISIBLE,
+    CoordinationType.ADDITIONAL_OBS_SETS,
+    CoordinationType.OBS_SET_COLOR,
+    CoordinationType.SAMPLE_SET_COLOR,
+    CoordinationType.FEATURE_POINT_SIGNIFICANCE_THRESHOLD,
+    CoordinationType.FEATURE_LABEL_SIGNIFICANCE_THRESHOLD,
+    CoordinationType.FEATURE_POINT_FOLD_CHANGE_THRESHOLD,
+    CoordinationType.FEATURE_LABEL_FOLD_CHANGE_THRESHOLD
+  ],
+  [ViewType.OBS_SET_COMPOSITION_BAR_PLOT]: [
+    CoordinationType.DATASET,
+    CoordinationType.OBS_TYPE,
+    CoordinationType.SAMPLE_TYPE,
+    // For selection of case-control sets of samples:
+    CoordinationType.SAMPLE_SET_SELECTION,
+    // For selection of one-vs-others sets of observations:
+    CoordinationType.OBS_SET_SELECTION,
+    CoordinationType.ADDITIONAL_OBS_SETS,
+    CoordinationType.OBS_SET_COLOR,
+    CoordinationType.SAMPLE_SET_COLOR
+  ],
+  [ViewType.FEATURE_SET_ENRICHMENT_BAR_PLOT]: [
+    CoordinationType.DATASET,
+    CoordinationType.OBS_TYPE,
+    CoordinationType.FEATURE_TYPE,
+    CoordinationType.SAMPLE_TYPE,
+    // For selection of case-control sets of samples:
+    CoordinationType.SAMPLE_SET_SELECTION,
+    // For selection of one-vs-others sets of observations:
+    CoordinationType.OBS_SET_SELECTION,
+    CoordinationType.ADDITIONAL_OBS_SETS,
+    CoordinationType.OBS_SET_COLOR,
+    CoordinationType.SAMPLE_SET_COLOR,
+    CoordinationType.FEATURE_SELECTION
+  ],
   [ViewType.LINK_CONTROLLER]: [],
   [ViewType.BIOMARKER_SELECT]: [
+    CoordinationType.DATASET,
+    CoordinationType.OBS_TYPE,
+    CoordinationType.SAMPLE_TYPE,
     CoordinationType.FEATURE_SELECTION,
     CoordinationType.SAMPLE_SET_SELECTION,
     CoordinationType.SAMPLE_SET_FILTER,
     CoordinationType.OBS_SET_SELECTION,
     CoordinationType.OBS_SET_FILTER
     // TODO: create coordination types for internal state of the biomarker selection view?
+  ],
+  [ViewType.COMPARATIVE_HEADING]: [
+    CoordinationType.DATASET,
+    CoordinationType.OBS_TYPE,
+    CoordinationType.SAMPLE_TYPE,
+    CoordinationType.FEATURE_SELECTION,
+    CoordinationType.SAMPLE_SET_SELECTION,
+    CoordinationType.SAMPLE_SET_FILTER,
+    CoordinationType.OBS_SET_SELECTION,
+    CoordinationType.OBS_SET_FILTER
+  ],
+  [ViewType.TREEMAP]: [
+    CoordinationType.DATASET,
+    CoordinationType.OBS_TYPE,
+    CoordinationType.FEATURE_TYPE,
+    CoordinationType.FEATURE_VALUE_TYPE,
+    CoordinationType.OBS_FILTER,
+    CoordinationType.OBS_HIGHLIGHT,
+    CoordinationType.OBS_SET_SELECTION,
+    CoordinationType.OBS_SET_FILTER,
+    CoordinationType.OBS_SELECTION,
+    CoordinationType.OBS_SELECTION_MODE,
+    CoordinationType.OBS_SET_HIGHLIGHT,
+    CoordinationType.OBS_SET_COLOR,
+    CoordinationType.OBS_COLOR_ENCODING,
+    CoordinationType.ADDITIONAL_OBS_SETS,
+    CoordinationType.SAMPLE_TYPE,
+    CoordinationType.SAMPLE_SET_SELECTION,
+    CoordinationType.SAMPLE_SET_FILTER,
+    CoordinationType.SAMPLE_SET_COLOR,
+    CoordinationType.SAMPLE_SELECTION,
+    CoordinationType.SAMPLE_SELECTION_MODE,
+    CoordinationType.SAMPLE_FILTER,
+    CoordinationType.SAMPLE_FILTER_MODE,
+    CoordinationType.SAMPLE_HIGHLIGHT,
+    CoordinationType.HIERARCHY_LEVELS
   ]
 };
 var common = {
@@ -30739,7 +30868,7 @@ function SelectStratification(props) {
     ) })
   ] });
 }
-const steps = [
+const steps$1 = [
   "Select biomarkers (modality-agnostic)",
   "Derive modality-specific biomarker signature",
   "Define case-control stratification"
@@ -30789,12 +30918,12 @@ function ConfirmatoryStepper(props) {
     setActiveStep(0);
   };
   useEffect(() => {
-    if (activeStep === steps.length) {
+    if (activeStep === steps$1.length) {
       onFinish();
     }
-  }, [activeStep, steps]);
+  }, [activeStep, steps$1]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid$1, { item: true, container: true, xs: 12, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Grid$1, { item: true, container: true, xs: 12, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { className: classes.fullWidthBox, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Stepper$1, { activeStep, children: steps.map((label, index) => {
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Grid$1, { item: true, container: true, xs: 12, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { className: classes.fullWidthBox, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Stepper$1, { activeStep, children: steps$1.map((label, index) => {
       const stepProps = {};
       const labelProps = {};
       if (isStepOptional(index)) {
@@ -30806,7 +30935,7 @@ function ConfirmatoryStepper(props) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(Step$1, { ...stepProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StepLabel$1, { ...labelProps, children: label }) }, label);
     }) }) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid$1, { item: true, container: true, xs: 12, style: { marginTop: "20px" }, alignItems: "flex-start", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Grid$1, { item: true, container: true, xs: 8, children: activeStep === steps.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography$1, { style: { marginTop: "20px", marginBottom: "10px" }, children: "All steps completed - you're finished" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Grid$1, { item: true, container: true, xs: 8, children: activeStep === steps$1.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography$1, { style: { marginTop: "20px", marginBottom: "10px" }, children: "All steps completed - you're finished" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         activeStep === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           SelectAgnostic,
           {
@@ -30862,6 +30991,118 @@ function ConfirmatoryStepper(props) {
           stratifications
         }
       ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { className: classes.fullWidthBox, children: activeStep === steps$1.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box$1, { style: { display: "flex", flexDirection: "row", paddingTop: "20px" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { style: { flex: "1 1 auto" } }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { onClick: handleReset, children: "Reset" })
+      ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Box$1, { style: { display: "flex", flexDirection: "row", paddingTop: "20px" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button$1,
+          {
+            color: "inherit",
+            disabled: activeStep === 0,
+            onClick: handleBack,
+            style: { mr: 1 },
+            children: "Back"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { style: { flex: "1 1 auto" } }),
+        isStepOptional(activeStep) && /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { color: "inherit", onClick: handleSkip, style: { marginRight: "10px" }, children: "Skip" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { onClick: handleNext, children: activeStep === steps$1.length - 1 ? "Finish" : "Next" })
+      ] }) })
+    ] })
+  ] });
+}
+const steps = [
+  "Define case-control stratification"
+];
+function ExploratoryStepper(props) {
+  const {
+    autocompleteNode,
+    currentModalityAgnosticSelection,
+    setCurrentModalityAgnosticSelection,
+    currentModalitySpecificSelection,
+    setCurrentModalitySpecificSelection,
+    currentStratificationSelection,
+    setCurrentStratificationSelection,
+    getEdges,
+    stratifications,
+    onFinish
+  } = props;
+  const classes = useStyles();
+  const [activeStep, setActiveStep] = React__default.useState(0);
+  const [skipped, setSkipped] = React__default.useState(/* @__PURE__ */ 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)) {
+      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 /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid$1, { item: true, container: true, xs: 12, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Grid$1, { item: true, container: true, xs: 12, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { className: classes.fullWidthBox, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Stepper$1, { activeStep, children: steps.map((label, index) => {
+      const stepProps = {};
+      const labelProps = {};
+      if (isStepOptional(index)) {
+        labelProps.optional = /* @__PURE__ */ jsxRuntimeExports.jsx(Typography$1, { variant: "caption", children: "Optional" });
+      }
+      if (isStepSkipped(index)) {
+        stepProps.completed = false;
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Step$1, { ...stepProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StepLabel$1, { ...labelProps, children: label }) }, label);
+    }) }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid$1, { item: true, container: true, xs: 12, style: { marginTop: "20px" }, alignItems: "flex-start", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Grid$1, { item: true, container: true, xs: 8, children: activeStep === steps.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography$1, { style: { marginTop: "20px", marginBottom: "10px" }, children: "All steps completed - you're finished" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: activeStep === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SelectStratification,
+        {
+          autocompleteNode,
+          currentModalityAgnosticSelection,
+          setCurrentModalityAgnosticSelection,
+          currentModalitySpecificSelection,
+          setCurrentModalitySpecificSelection,
+          currentStratificationSelection,
+          setCurrentStratificationSelection,
+          getEdges,
+          stratifications
+        }
+      ) : null }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Grid$1, { item: true, container: true, xs: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ConfirmatoryCart,
+        {
+          currentModalityAgnosticSelection,
+          setCurrentModalityAgnosticSelection,
+          currentModalitySpecificSelection,
+          setCurrentModalitySpecificSelection,
+          currentStratificationSelection,
+          setCurrentStratificationSelection,
+          stratifications
+        }
+      ) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { className: classes.fullWidthBox, children: activeStep === steps.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box$1, { style: { display: "flex", flexDirection: "row", paddingTop: "20px" }, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { style: { flex: "1 1 auto" } }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { onClick: handleReset, children: "Reset" })
@@ -30928,22 +31169,60 @@ function ScmdUi(props) {
           onFinish
         }
       ) : null,
-      mode === "exploratory" ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "TODO" }) : null
+      mode === "exploratory" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ExploratoryStepper,
+        {
+          autocompleteNode,
+          currentModalityAgnosticSelection,
+          setCurrentModalityAgnosticSelection,
+          currentModalitySpecificSelection,
+          setCurrentModalitySpecificSelection,
+          currentStratificationSelection,
+          setCurrentStratificationSelection,
+          getEdges,
+          stratifications,
+          onFinish
+        }
+      ) : null
     ] }) : null
   ] });
 }
 function BiomarkerSelectSubscriber(props) {
   const {
     coordinationScopes,
-    stratificationOptions
+    stratificationOptions: stratificationOptionsProp
+    // TODO: Remove; Get from comparisonMetadata instead
   } = props;
-  useCoordination(
+  const loaders = useLoaders();
+  const [{
+    dataset,
+    obsType,
+    sampleType,
+    sampleSetSelection,
+    featureSelection
+  }, {
+    setSampleSetSelection,
+    setFeatureSelection
+  }] = useCoordination(
     COMPONENT_COORDINATION_TYPES[ViewType.BIOMARKER_SELECT],
     coordinationScopes
   );
   const viewConfigStoreApi = useViewConfigStoreApi();
   const viewConfig = useViewConfig();
   const setViewConfig = useSetViewConfig(viewConfigStoreApi);
+  useMatchingLoader(
+    loaders,
+    dataset,
+    DataType.OBS_SETS,
+    { obsType }
+  );
+  const sampleSetsLoader = useMatchingLoader(
+    loaders,
+    dataset,
+    DataType.SAMPLE_SETS,
+    { sampleType }
+  );
+  const sampleSetsColumnNameMappingReversed = useColumnNameMapping(sampleSetsLoader, true);
   const [isSelecting, setIsSelecting] = useState(true);
   const [mode, setMode] = useState(null);
   const [step, setStep] = useState(null);
@@ -30960,6 +31239,36 @@ function BiomarkerSelectSubscriber(props) {
     async (node, targetModality) => transformFeature2(node, targetModality),
     [transformFeature2]
   );
+  const [{ comparisonMetadata }, cmpMetadataStatus, cmpMetadataUrls] = useComparisonMetadata(
+    loaders,
+    dataset,
+    false,
+    {},
+    {},
+    { obsType, sampleType }
+  );
+  const stratificationOptions = useMemo(() => {
+    if (comparisonMetadata == null ? void 0 : comparisonMetadata.sample_group_pairs) {
+      return comparisonMetadata.sample_group_pairs.map((sampleGroupPair) => {
+        const [sampleGroupCol, sampleGroupValues] = sampleGroupPair;
+        const [sampleGroupCtrl, sampleGroupCase] = sampleGroupValues;
+        const groupName = sampleSetsColumnNameMappingReversed == null ? void 0 : 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 /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isSelecting ? /* @__PURE__ */ jsxRuntimeExports.jsx(
     ScmdUi,
     {
@@ -30977,24 +31286,46 @@ function BiomarkerSelectSubscriber(props) {
       getEdges,
       stratifications: stratificationOptions,
       onFinish: () => {
-        setViewConfig({
+        const newViewConfig = {
           ...viewConfig,
           coordinationSpace: {
             ...viewConfig.coordinationSpace,
             sampleSetFilter: {
               ...viewConfig.coordinationSpace.sampleSetFilter,
-              "case-control": currentStratificationSelection == null ? void 0 : currentStratificationSelection.sampleSets
+              __comparison__: currentStratificationSelection == null ? void 0 : currentStratificationSelection.sampleSets
             },
             sampleSetSelection: {
               ...viewConfig.coordinationSpace.sampleSetSelection,
-              "case-control": currentStratificationSelection == null ? void 0 : currentStratificationSelection.sampleSets
+              __comparison__: currentStratificationSelection == null ? void 0 : currentStratificationSelection.sampleSets
+            },
+            featureSelection: {
+              ...viewConfig.coordinationSpace.featureSelection,
+              __comparison__: currentModalitySpecificSelection ? currentModalitySpecificSelection.map((d) => d.label) : null
             }
           }
-        });
+        };
+        setViewConfig(newViewConfig);
       }
     }
   ) : null });
 }
+function ComparativeHeadingSubscriber(props) {
+  var _a2, _b;
+  const {
+    coordinationScopes
+  } = props;
+  const [{
+    sampleSetSelection
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType.COMPARATIVE_HEADING],
+    coordinationScopes
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: sampleSetSelection && sampleSetSelection.length === 2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "row" }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "45%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: (_a2 = sampleSetSelection == null ? void 0 : sampleSetSelection[0]) == null ? void 0 : _a2.at(-1) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "5%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { style: { textAlign: "right" }, children: "vs. " }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "50%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: (_b = sampleSetSelection == null ? void 0 : sampleSetSelection[1]) == null ? void 0 : _b.at(-1) }) })
+  ] }) : null });
+}
 var EOL = {}, EOF = {}, QUOTE = 34, NEWLINE = 10, RETURN = 13;
 function objectConverter(columns2) {
   return new Function("d", "return {" + columns2.map(function(name, i) {
@@ -32193,6 +32524,7 @@ async function getTermMapping({ queryClient }, keyCuriePrefix, valCuriePrefix) {
 }
 export {
   BiomarkerSelectSubscriber,
+  ComparativeHeadingSubscriber,
   autocompleteFeature,
   getAlternativeTerms,
   getTermMapping,

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

@@ -1 +1 @@
-{"version":3,"file":"BiomarkerSelectSubscriber.d.ts","sourceRoot":"","sources":["../src/BiomarkerSelectSubscriber.js"],"names":[],"mappings":"AAcA;;;;;GAKG;AACH,iDAHG;IAA+F,qBAAqB,EAA5G;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,kBAAkB,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAAA;KAAC,EAAE;CACvF,eAmFF"}
+{"version":3,"file":"BiomarkerSelectSubscriber.d.ts","sourceRoot":"","sources":["../src/BiomarkerSelectSubscriber.js"],"names":[],"mappings":"AAiBA;;;;;GAKG;AACH,iDAHG;IAA+F,qBAAqB,EAA5G;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,kBAAkB,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAAA;KAAC,EAAE;CACvF,eA0JF"}

package/dist-tsc/BiomarkerSelectSubscriber.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /* 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 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, DataType } from '@vitessce/constants-internal';
 import { ScmdUi } from './scmd-ui.js';
 /**
  *
@@ -12,11 +12,18 @@ import { ScmdUi } from './scmd-ui.js';
  * @returns
  */
 export function BiomarkerSelectSubscriber(props) {
-    const { coordinationScopes, stratificationOptions, } = props;
-    const [{ sampleSetSelection, featureSelection, }, { setSampleSetSelection, setFeatureSelection, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.BIOMARKER_SELECT], coordinationScopes);
+    const { coordinationScopes, stratificationOptions: stratificationOptionsProp, // TODO: Remove; Get from comparisonMetadata instead
+     } = props;
+    const loaders = useLoaders();
+    const [{ dataset, obsType, sampleType, sampleSetSelection, featureSelection, }, { setSampleSetSelection, setFeatureSelection, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.BIOMARKER_SELECT], coordinationScopes);
     const viewConfigStoreApi = useViewConfigStoreApi();
     const viewConfig = useViewConfig();
     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);
@@ -29,20 +36,69 @@ export function BiomarkerSelectSubscriber(props) {
     const transformFeature = useAsyncFunction(AsyncFunctionType.TRANSFORM_FEATURE);
     const autocompleteNode = useCallback(async (inputValue) => autocompleteFeature(inputValue), [autocompleteFeature]);
     const getEdges = useCallback(async (node, targetModality) => transformFeature(node, targetModality), [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 (_jsx(_Fragment, { children: isSelecting ? (_jsx(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: () => {
-                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/dist-tsc/ComparativeHeadingSubscriber.d.ts

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

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

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

package/dist-tsc/ComparativeHeadingSubscriber.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { useCoordination, } from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+export function ComparativeHeadingSubscriber(props) {
+    const { coordinationScopes, } = props;
+    const [{ sampleSetSelection, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.COMPARATIVE_HEADING], coordinationScopes);
+    return (_jsx(_Fragment, { children: sampleSetSelection && sampleSetSelection.length === 2 ? (_jsxs("div", { style: { width: '100%', display: 'flex', flexDirection: 'row' }, children: [_jsx("div", { style: { width: '45%' }, children: _jsx("h2", { children: sampleSetSelection?.[0]?.at(-1) }) }), _jsx("div", { style: { width: '5%' }, children: _jsx("h2", { style: { textAlign: 'right' }, children: "vs.\u00A0" }) }), _jsx("div", { style: { width: '50%' }, children: _jsx("h2", { children: sampleSetSelection?.[1]?.at(-1) }) })] })) : 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.6",
+  "version": "3.5.8",
   "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.6",
-    "@vitessce/vit-s": "3.5.6",
-    "@vitessce/types": "3.5.6"
+    "@vitessce/constants-internal": "3.5.8",
+    "@vitessce/vit-s": "3.5.8",
+    "@vitessce/types": "3.5.8"
   },
   "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,31 @@
+import React from 'react';
+import {
+  useCoordination,
+} from '@vitessce/vit-s';
+import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+
+
+export function ComparativeHeadingSubscriber(props) {
+  const {
+    coordinationScopes,
+  } = props;
+
+  const [{
+    sampleSetSelection,
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType.COMPARATIVE_HEADING],
+    coordinationScopes,
+  );
+
+  return (
+    <>
+      {sampleSetSelection && sampleSetSelection.length === 2 ? (
+        <div style={{ width: '100%', display: 'flex', flexDirection: 'row' }}>
+          <div style={{ width: '45%' }}><h2>{sampleSetSelection?.[0]?.at(-1)}</h2></div>
+          <div style={{ width: '5%' }}><h2 style={{ textAlign: 'right' }}>vs.&nbsp;</h2></div>
+          <div style={{ width: '50%' }}><h2>{sampleSetSelection?.[1]?.at(-1)}</h2></div>
+        </div>
+      ) : null}
+    </>
+  );
+}

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>

package/src/stepper-exploratory.js

@@ -0,0 +1,175 @@
+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 (
+    <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 ? (
+                <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/dist-tsc/confirmatory-stepper.d.ts.map

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