@vitessce/biomarker-select 3.5.8 → 3.5.10

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

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

package/dist-tsc/ComparativeHeadingSubscriber.js

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

package/dist-tsc/SampleSetPairManagerSubscriber.d.ts

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

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

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

package/dist-tsc/SampleSetPairManagerSubscriber.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useCallback } from 'react';
+import { isEqual } from 'lodash-es';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core';
+import { TitleInfo, useReady, useCoordination, useLoaders, useComparisonMetadata, useMatchingLoader, useColumnNameMapping, } from '@vitessce/vit-s';
+import { ViewType, DataType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping } from '@vitessce/constants-internal';
+const useStyles = makeStyles(() => ({
+    selectedPair: {
+        fontWeight: 'bold',
+    },
+    pairUl: {
+        paddingLeft: '15px',
+        marginTop: 0,
+        fontSize: '12px',
+        '& button': {
+            fontSize: '12px',
+        },
+    },
+}));
+export function SampleSetPairManagerSubscriber(props) {
+    const { coordinationScopes, removeGridComponent, theme, title = 'Sample Sets', closeButtonVisible, helpText = ViewHelpMapping.SAMPLE_SET_PAIR_MANAGER, } = props;
+    const classes = useStyles();
+    const loaders = useLoaders();
+    // Get "props" from the coordination space.
+    const [{ dataset, obsType, sampleType, sampleSetSelection, }, { setSampleSetSelection, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.SAMPLE_SET_PAIR_MANAGER], coordinationScopes);
+    const sampleSetsLoader = useMatchingLoader(loaders, dataset, DataType.SAMPLE_SETS, { sampleType });
+    const sampleSetsColumnNameMappingReversed = useColumnNameMapping(sampleSetsLoader, true);
+    const [{ comparisonMetadata }, cmpMetadataStatus] = useComparisonMetadata(loaders, dataset, false, {}, {}, { obsType, sampleType });
+    const isReady = useReady([
+        cmpMetadataStatus,
+    ]);
+    const stratificationOptions = useMemo(() => {
+        /*
+          return array of objects like {
+            stratificationId: 'aki-vs-hr',
+            name: 'Acute kidney injury (AKI) vs. Healthy reference',
+            stratificationType: 'sampleSet',
+            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]);
+    const onSelectPair = useCallback((sampleSetPair) => {
+        setSampleSetSelection(sampleSetPair);
+    }, [sampleSetSelection, setSampleSetSelection]);
+    return (_jsx(TitleInfo, { title: title, closeButtonVisible: closeButtonVisible, removeGridComponent: removeGridComponent, isScroll: true, theme: theme, isReady: isReady, helpText: helpText, children: _jsx("ul", { className: classes.pairUl, children: stratificationOptions?.map((pairObj) => {
+                const isSelected = Array.isArray(sampleSetSelection)
+                    && sampleSetSelection.length === 2
+                    && (isEqual(pairObj.sampleSets, sampleSetSelection)
+                        || isEqual(pairObj.sampleSets, [sampleSetSelection?.[1], sampleSetSelection?.[0]]));
+                return (_jsxs("li", { className: clsx({ [classes.selectedPair]: isSelected }), children: [pairObj.name, "\u00A0", !isSelected ? (_jsx("button", { type: "button", onClick: () => onSelectPair(pairObj.sampleSets), children: "Select" })) : null] }, pairObj.stratificationId));
+            }) }) }));
+}

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,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"}
+{"version":3,"file":"default-async-functions.d.ts","sourceRoot":"","sources":["../src/default-async-functions.js"],"names":[],"mappings":"AAyHA;;;;;;;GAOG;AACH,qDALG;IAAyB,WAAW,EAA5B,WAAW;CACnB,WAAQ,MAAM,kBACN,IAAI,GAAG,kBAAkB,GACvB,OAAO,CAAC,MAAM,EAAE,CAAC,CAiB7B;AAkBD;;;;;;;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;iCAjQsD,uBAAuB;wCADsE,iBAAiB;4BAAjB,iBAAiB"}

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

@@ -44,14 +44,18 @@ function loadCellTypeNodes() {
  * @returns {Promise<KgNode[]>}
  */
 function loadPathwayNodes() {
-    return fetch(`${KG_BASE_URL}/Reactome_2022.nodes.csv`)
-        .then(res => res.text())
+    const reactomeNodes = fetch(`${KG_BASE_URL}/Reactome_2022.nodes.csv`);
+    // TODO: load both GO and Reactome nodes, concat together.
+    // const goNodes = fetch(`${KG_BASE_URL}/GO_Biological_Process_2021.nodes.csv`);
+    return reactomeNodes.then(res => res.text())
         .then((res) => {
         const result = csvParse(res);
         return result.map((/** @type {any} */ d) => ({
             kgId: d.id,
-            label: d.pathway,
-            term: `reactome:${d.acc}`,
+            label: d.pathway, // For reactome
+            term: `reactome:${d.acc}`, // For reactome
+            // label: d.ontology_label, // For GO_BP
+            // term: d.acc, // For GO_BP
             nodeType: 'pathway',
         }));
     });
@@ -124,7 +128,10 @@ export async function autocompleteFeature({ queryClient }, partial, targetModali
     return results.map((/** @type {any} */ result) => result.item);
 }
 async function loadPathwayToGeneEdges() {
-    return fetch(`${KG_BASE_URL}/Reactome_2022.Reactome.Gene.edges.csv`)
+    const reactomeEdges = fetch(`${KG_BASE_URL}/Reactome_2022.Reactome.Gene.edges.csv`);
+    // TODO: load both GO and Reactome edges, concat together.
+    // const goEdges = fetch(`${KG_BASE_URL}/GO_Biological_Process_2021.GO_BP.Gene.edges.csv`);
+    return reactomeEdges
         .then(res => res.text())
         .then((res) => {
         const result = csvParse(res);

package/dist-tsc/index.d.ts

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

package/dist-tsc/index.js

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

package/package.json

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

package/src/ComparativeHeadingSubscriber.js

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

package/src/SampleSetPairManagerSubscriber.js

@@ -0,0 +1,146 @@
+import React, { useMemo, useCallback } from 'react';
+import { isEqual } from 'lodash-es';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core';
+import {
+  TitleInfo,
+  useReady,
+  useCoordination,
+  useLoaders,
+  useComparisonMetadata,
+  useMatchingLoader,
+  useColumnNameMapping,
+} from '@vitessce/vit-s';
+import { ViewType, DataType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping } from '@vitessce/constants-internal';
+
+const useStyles = makeStyles(() => ({
+  selectedPair: {
+    fontWeight: 'bold',
+  },
+  pairUl: {
+    paddingLeft: '15px',
+    marginTop: 0,
+    fontSize: '12px',
+    '& button': {
+      fontSize: '12px',
+    },
+  },
+}));
+
+export function SampleSetPairManagerSubscriber(props) {
+  const {
+    coordinationScopes,
+    removeGridComponent,
+    theme,
+    title = 'Sample Sets',
+    closeButtonVisible,
+    helpText = ViewHelpMapping.SAMPLE_SET_PAIR_MANAGER,
+  } = props;
+
+  const classes = useStyles();
+  const loaders = useLoaders();
+
+  // Get "props" from the coordination space.
+  const [{
+    dataset,
+    obsType,
+    sampleType,
+    sampleSetSelection,
+  }, {
+    setSampleSetSelection,
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType.SAMPLE_SET_PAIR_MANAGER],
+    coordinationScopes,
+  );
+
+  const sampleSetsLoader = useMatchingLoader(
+    loaders, dataset, DataType.SAMPLE_SETS, { sampleType },
+  );
+  const sampleSetsColumnNameMappingReversed = useColumnNameMapping(sampleSetsLoader, true);
+
+  const [{ comparisonMetadata }, cmpMetadataStatus] = useComparisonMetadata(
+    loaders, dataset, false, {}, {}, { obsType, sampleType },
+  );
+
+  const isReady = useReady([
+    cmpMetadataStatus,
+  ]);
+
+  const stratificationOptions = useMemo(() => {
+    /*
+      return array of objects like {
+        stratificationId: 'aki-vs-hr',
+        name: 'Acute kidney injury (AKI) vs. Healthy reference',
+        stratificationType: 'sampleSet',
+        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]);
+
+  const onSelectPair = useCallback((sampleSetPair) => {
+    setSampleSetSelection(sampleSetPair);
+  }, [sampleSetSelection, setSampleSetSelection]);
+
+
+  return (
+    <TitleInfo
+      title={title}
+      closeButtonVisible={closeButtonVisible}
+      removeGridComponent={removeGridComponent}
+      isScroll
+      theme={theme}
+      isReady={isReady}
+      helpText={helpText}
+    >
+      <ul className={classes.pairUl}>
+        {stratificationOptions?.map((pairObj) => {
+          const isSelected = Array.isArray(sampleSetSelection)
+            && sampleSetSelection.length === 2
+            && (
+              isEqual(pairObj.sampleSets, sampleSetSelection)
+              || isEqual(pairObj.sampleSets, [sampleSetSelection?.[1], sampleSetSelection?.[0]])
+            );
+          return (
+            <li
+              key={pairObj.stratificationId}
+              className={clsx({ [classes.selectedPair]: isSelected })}
+            >
+              {pairObj.name}&nbsp;
+              {!isSelected ? (
+                <button
+                  type="button"
+                  onClick={() => onSelectPair(pairObj.sampleSets)}
+                >
+                  Select
+                </button>
+              ) : null}
+            </li>
+          );
+        })}
+      </ul>
+    </TitleInfo>
+  );
+}

package/src/default-async-functions.js

@@ -49,14 +49,18 @@ function loadCellTypeNodes() {
  * @returns {Promise<KgNode[]>}
  */
 function loadPathwayNodes() {
-  return fetch(`${KG_BASE_URL}/Reactome_2022.nodes.csv`)
-    .then(res => res.text())
+  const reactomeNodes = fetch(`${KG_BASE_URL}/Reactome_2022.nodes.csv`);
+  // TODO: load both GO and Reactome nodes, concat together.
+  // const goNodes = fetch(`${KG_BASE_URL}/GO_Biological_Process_2021.nodes.csv`);
+  return reactomeNodes.then(res => res.text())
     .then((res) => {
       const result = csvParse(res);
       return result.map((/** @type {any} */ d) => ({
         kgId: d.id,
-        label: d.pathway,
-        term: `reactome:${d.acc}`,
+        label: d.pathway, // For reactome
+        term: `reactome:${d.acc}`, // For reactome
+        // label: d.ontology_label, // For GO_BP
+        // term: d.acc, // For GO_BP
         nodeType: 'pathway',
       }));
     });
@@ -141,7 +145,10 @@ export async function autocompleteFeature({ queryClient }, partial, targetModali
 }
 
 async function loadPathwayToGeneEdges() {
-  return fetch(`${KG_BASE_URL}/Reactome_2022.Reactome.Gene.edges.csv`)
+  const reactomeEdges = fetch(`${KG_BASE_URL}/Reactome_2022.Reactome.Gene.edges.csv`);
+  // TODO: load both GO and Reactome edges, concat together.
+  // const goEdges = fetch(`${KG_BASE_URL}/GO_Biological_Process_2021.GO_BP.Gene.edges.csv`);
+  return reactomeEdges
     .then(res => res.text())
     .then((res) => {
       const result = csvParse(res);

package/src/index.js

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