@vitessce/biomarker-select 3.5.7 → 3.5.9

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,11 +909,36 @@ 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",
+  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)
   AUTOCOMPLETE_FEATURE: "autocompleteFeature",
@@ -1073,10 +1098,18 @@ const CoordinationType = {
   EMBEDDING_CONTOUR_PERCENTILES: "embeddingContourPercentiles",
   CONTOUR_COLOR_ENCODING: "contourColorEncoding",
   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,
@@ -1546,8 +1579,64 @@ 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,
@@ -1555,6 +1644,16 @@ const COMPONENT_COORDINATION_TYPES = {
     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,
@@ -22363,7 +22462,7 @@ const ExpandMoreIcon = createSvgIcon(/* @__PURE__ */ React.createElement("path",
 const InfoIcon = createSvgIcon(/* @__PURE__ */ React.createElement("path", {
   d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
 }), "Info");
-const useStyles = makeStyles(() => ({
+const useStyles$1 = makeStyles(() => ({
   header: {
     marginTop: "10px",
     marginBottom: "10px"
@@ -22406,7 +22505,7 @@ function ConfirmatoryCart(props) {
     // eslint-disable-next-line no-unused-vars
     setCurrentStratificationSelection
   } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const [expandedAccordions, setExpandedAccordions] = React__default.useState([
     "agnostic",
     "specific",
@@ -24668,7 +24767,7 @@ function SelectAgnostic(props) {
     currentModalityAgnosticSelection,
     setCurrentModalityAgnosticSelection
   } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const [selectedItem, setSelectedItem] = React__default.useState(null);
   const [potentialItems, setPotentialItems] = React__default.useState([]);
   const handleChange = async (event) => {
@@ -30651,7 +30750,7 @@ function SelectSpecific(props) {
     setCurrentModalitySpecificSelection,
     getEdges
   } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const queries = useQueries({
     queries: (currentModalityAgnosticSelection == null ? void 0 : currentModalityAgnosticSelection.map((item) => ({
       queryKey: [item.nodeType, item.kgId],
@@ -30769,7 +30868,7 @@ function SelectStratification(props) {
     ) })
   ] });
 }
-const steps = [
+const steps$1 = [
   "Select biomarkers (modality-agnostic)",
   "Derive modality-specific biomarker signature",
   "Define case-control stratification"
@@ -30787,7 +30886,7 @@ function ConfirmatoryStepper(props) {
     stratifications,
     onFinish
   } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const [activeStep, setActiveStep] = React__default.useState(0);
   const [skipped, setSkipped] = React__default.useState(/* @__PURE__ */ new Set());
   const isStepOptional = (step) => step === 2;
@@ -30819,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)) {
@@ -30836,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,
           {
@@ -30892,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$1();
+  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" })
@@ -30930,7 +31141,7 @@ function ScmdUi(props) {
     stratifications,
     onFinish
   } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const mode = modeProp || "confirmatory";
   const [tempIsVisible, setTempIsVisible] = useState(true);
   const isConfirmatoryMode = mode === "confirmatory";
@@ -30958,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);
@@ -30990,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,
     {
@@ -31007,24 +31286,93 @@ 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 });
 }
+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
+  }
+}));
+function ComparativeHeadingSubscriber(props) {
+  var _a2, _b;
+  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 == null ? void 0 : sampleSetSelection.length) === 2) {
+      setSampleSetSelection([
+        sampleSetSelection[1],
+        sampleSetSelection[0]
+      ]);
+    }
+  }, [sampleSetSelection, setSampleSetSelection]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes.headingContainer, children: [
+    sampleSetSelection && sampleSetSelection.length === 2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes.headingSectionContainer, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "45%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: classes.headingText, 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", { className: classes.headingText, style: { textAlign: "right" }, children: "vs. " }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "50%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: classes.headingText, children: (_b = sampleSetSelection == null ? void 0 : sampleSetSelection[1]) == null ? void 0 : _b.at(-1) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes.buttonContainer, children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: swapSampleSets, type: "button", children: "Swap" }) })
+    ] }) : null,
+    featureSelection && featureSelection.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes.headingSectionContainer, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: classes.headingText, children: "Selected Biomarkers: " }) }),
+      featureSelection == null ? void 0 : featureSelection.map((featureName, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: classes.headingText, children: [
+        featureName,
+        i < featureSelection.length - 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: ", " }) : null
+      ] }) }))
+    ] }) : null
+  ] });
+}
 var EOL = {}, EOF = {}, QUOTE = 34, NEWLINE = 10, RETURN = 13;
 function objectConverter(columns2) {
   return new Function("d", "return {" + columns2.map(function(name, i) {
@@ -32223,6 +32571,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