@vitessce/biomarker-select 3.9.2 → 3.9.4

package/src/BiomarkerSelectAltSampleGroups.js

@@ -0,0 +1,153 @@
+import React, { useState, useMemo } from 'react';
+import { Grid, NativeSelect } from '@vitessce/styles';
+import { isEqual } from 'lodash-es';
+
+
+export function BiomarkerSelectAltSampleGroups(props) {
+  const {
+    setSampleSetFilter,
+    setSampleSetSelection,
+
+    stratifications,
+  } = props;
+
+  const [lhsSelectedGroup, setLhsSelectedGroup] = useState(null);
+  const [rhsSelectedGroup, setRhsSelectedGroup] = useState(null);
+
+  const sampleSetOptions = stratifications?.filter(s => s.stratificationType === 'sampleSet');
+  const hasSampleSetOptions = sampleSetOptions && sampleSetOptions.length > 0;
+
+  const lhsOptions = useMemo(() => {
+    if (sampleSetOptions) {
+      const result = [];
+      const withDuplicates = sampleSetOptions.map(o => o.sampleSets).flat();
+      withDuplicates.forEach((setPath) => {
+        if (!result.find(r => isEqual(r.path, setPath))) {
+          const rhsOptionsForLhs = [];
+          sampleSetOptions.forEach((o) => {
+            const pathPair = o.sampleSets;
+            if (isEqual(pathPair[0], setPath)) {
+              const otherPath = pathPair[1];
+              rhsOptionsForLhs.push({
+                name: `${otherPath[0]}: ${otherPath[1]}`,
+                path: otherPath,
+                sampleSets: o.sampleSets,
+                stratificationId: o.stratificationId,
+              });
+            } else if (isEqual(pathPair[1], setPath)) {
+              const otherPath = pathPair[0];
+              rhsOptionsForLhs.push({
+                name: `${otherPath[0]}: ${otherPath[1]}`,
+                path: otherPath,
+                // Reverse the order.
+                sampleSets: [o.sampleSets[1], o.sampleSets[0]],
+                stratificationId: o.stratificationId,
+              });
+            }
+          });
+
+          result.push({
+            name: `${setPath[0]}: ${setPath[1]}`,
+            path: setPath,
+            rhsOptions: rhsOptionsForLhs,
+          });
+        }
+      });
+      return result;
+    }
+    return [];
+  }, [sampleSetOptions]);
+
+  const rhsOptions = useMemo(() => {
+    if (sampleSetOptions && lhsOptions && lhsSelectedGroup) {
+      const lhsOption = lhsOptions.find(o => o.name === lhsSelectedGroup);
+      return lhsOption ? lhsOption.rhsOptions : [];
+    }
+    return [];
+  }, [sampleSetOptions, lhsOptions, lhsSelectedGroup]);
+
+
+  function handleFirstGroupChange(event) {
+    setLhsSelectedGroup(event.target.value);
+
+    // Update the sampleSetFilter and sampleSetSelection.
+    if (event.target.value === '__all__') {
+      setSampleSetFilter(null);
+      setSampleSetSelection(null);
+    } else {
+      const lhsOption = lhsOptions.find(o => o.name === event.target.value);
+      if (lhsOption) {
+        setSampleSetFilter([lhsOption.path]);
+        setSampleSetSelection([lhsOption.path]);
+      }
+    }
+  }
+
+  function handleSecondGroupChange(event) {
+    setRhsSelectedGroup(event.target.value);
+
+    // Update the sampleSetFilter and sampleSetSelection.
+    if (event.target.value === '__none__') {
+      const lhsOption = lhsOptions.find(o => o.name === lhsSelectedGroup);
+      if (lhsOption) {
+        setSampleSetFilter([lhsOption.path]);
+        setSampleSetSelection([lhsOption.path]);
+      }
+    } else {
+      const rhsOption = rhsOptions.find(o => o.name === event.target.value);
+      if (rhsOption) {
+        setSampleSetFilter(rhsOption.sampleSets);
+        setSampleSetSelection(rhsOption.sampleSets);
+      }
+    }
+  }
+
+  return (
+    <>
+      <Grid container size={12}>
+        <Grid container size={4}>
+          <span style={{ lineHeight: '50px' }}>in:&nbsp;</span>
+        </Grid>
+        <Grid container size={8}>
+          <NativeSelect
+            onChange={handleFirstGroupChange}
+            value={lhsSelectedGroup ?? '__all__'}
+            variant="standard"
+            sx={{ width: '100%' }}
+          >
+            <option value="__all__">All</option>
+            {hasSampleSetOptions ? (
+              <>
+                {lhsOptions.map(o => (
+                  <option value={o.name}>{o.name}</option>
+                ))}
+              </>
+            ) : null}
+          </NativeSelect>
+        </Grid>
+      </Grid>
+      <Grid container size={12}>
+        <Grid container size={4}>
+          <span style={{ lineHeight: '50px' }}>compare to:&nbsp;</span>
+        </Grid>
+        <Grid container size={8}>
+          <NativeSelect
+            onChange={handleSecondGroupChange}
+            value={rhsSelectedGroup ?? '__none__'}
+            variant="standard"
+            sx={{ width: '100%' }}
+          >
+            <option value="__none__">None</option>
+            {hasSampleSetOptions ? (
+              <>
+                {rhsOptions.map(o => (
+                  <option value={o.name}>{o.name}</option>
+                ))}
+              </>
+            ) : null}
+          </NativeSelect>
+        </Grid>
+      </Grid>
+    </>
+  );
+}

package/src/BiomarkerSelectAltSubscriber.js

@@ -0,0 +1,178 @@
+/* eslint-disable max-len */
+/* eslint-disable no-unused-vars */
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+  useAsyncFunction,
+  useViewConfigStoreApi,
+  useSetViewConfig,
+  useViewConfig,
+  useCoordination,
+  useLoaders,
+  useComparisonMetadata,
+  useMatchingLoader,
+  useColumnNameMapping,
+  useCoordinationScopes,
+} from '@vitessce/vit-s';
+import { AsyncFunctionType, ViewType, COMPONENT_COORDINATION_TYPES, DataType } from '@vitessce/constants-internal';
+import { BiomarkerSelectAlt } from './BiomarkerSelectAlt.js';
+
+/**
+ * Alternative biomarker select UI.
+ * @param {object} props
+ * @param {{ name: string, stratificationType: string, sampleSets: [string[], string[]]}[]} props.stratificationOptions
+ * @returns
+ */
+export function BiomarkerSelectAltSubscriber(props) {
+  const {
+    coordinationScopes: coordinationScopesRaw,
+  } = props;
+
+  const loaders = useLoaders();
+  const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
+
+  const [{
+    dataset,
+    obsType,
+    sampleType,
+    sampleSetFilter,
+    sampleSetSelection,
+    featureSelection,
+  }, {
+    setSampleSetFilter,
+    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);
+
+  const [mode] = useState(null);
+  const [currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection] = useState(null);
+  const [currentModalitySpecificSelection, setCurrentModalitySpecificSelection] = useState(null);
+  const [currentStratificationSelection, setCurrentStratificationSelection] = useState(null);
+
+  const autocompleteFeature = useAsyncFunction(AsyncFunctionType.AUTOCOMPLETE_FEATURE);
+  const transformFeature = useAsyncFunction(AsyncFunctionType.TRANSFORM_FEATURE);
+
+  const autocompleteNode = useCallback(async (inputValue) => {
+    const results = await autocompleteFeature(inputValue);
+    return results.map(item => ({
+      label: item.label,
+      data: item,
+    }));
+  }, [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]);
+
+  // TODO: Remove mode/step logic
+  // TODO: remove currentModalityAgnostic/SpecificSelection and use featureSelection + sampleSetSelection as the source of truth.
+  // Get rid of the local state within the children components and pass down the coordination values and setters directly
+  // so that everything stays in sync.
+  // E.g., if a user selects a gene from the volcano plot, the autocomplete input should reflect that selection
+  // and allow the user to view the corresponding gene info / gene card.
+
+  return (
+    <>
+      <BiomarkerSelectAlt
+        setFeatureSelection={setFeatureSelection}
+        setSampleSetFilter={setSampleSetFilter}
+        setSampleSetSelection={setSampleSetSelection}
+        currentModalityAgnosticSelection={currentModalityAgnosticSelection}
+        setCurrentModalityAgnosticSelection={setCurrentModalityAgnosticSelection}
+        setCurrentModalitySpecificSelection={setCurrentModalitySpecificSelection}
+        autocompleteNode={autocompleteNode}
+        stratifications={stratificationOptions}
+
+        onFinish={() => {
+          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,
+                __comparison__: currentStratificationSelection?.sampleSets,
+              },
+              sampleSetSelection: {
+                ...viewConfig.coordinationSpace.sampleSetSelection,
+                __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);
+        }}
+      />
+    </>
+  );
+}

package/src/ComparativeHeadingSubscriber.js

@@ -82,9 +82,9 @@ export function ComparativeHeadingSubscriber(props) {
     <div className={classes.headingContainer}>
       {sampleSetSelection && sampleSetSelection.length === 2 ? (
         <div className={classes.headingSectionContainer}>
-          <div style={{ width: '45%' }}><h2 className={classes.headingText}>{sampleSetSelection?.[0]?.at(-1)}</h2></div>
-          <div style={{ width: '5%' }}><h2 className={classes.headingText} style={{ textAlign: 'right' }}>vs.&nbsp;</h2></div>
-          <div style={{ width: '50%' }}><h2 className={classes.headingText}>{sampleSetSelection?.[1]?.at(-1)}</h2></div>
+          <div style={{ width: '45%' }}><h3 className={classes.headingText}>{sampleSetSelection?.[0]?.at(-1)}</h3></div>
+          <div style={{ width: '5%' }}><h3 className={classes.headingText} style={{ textAlign: 'right' }}>vs.&nbsp;</h3></div>
+          <div style={{ width: '50%' }}><h3 className={classes.headingText}>{sampleSetSelection?.[1]?.at(-1)}</h3></div>
           <div className={classes.buttonContainer}>
             <div>
               <button onClick={swapSampleSets} type="button">Swap</button>
@@ -94,7 +94,7 @@ export function ComparativeHeadingSubscriber(props) {
         </div>
       ) : (
         <div className={classes.headingSectionContainer}>
-          <div><h2 className={classes.headingText}>All samples</h2></div>
+          <div><h3 className={classes.headingText}>All samples</h3></div>
         </div>
       )}
       {featureSelection && featureSelection.length > 0 ? (

package/src/index.js

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

package/src/select-specific.js

@@ -83,6 +83,7 @@ export function SelectSpecific(props) {
     const newSelection = Array.from(newRowSelectionModel.ids)
       .map(kgId => data.find(d => d.target.kgId === kgId)?.target)
       .filter(Boolean);
+    // console.log('New specific selection:', newSelection);
     setCurrentModalitySpecificSelection(newSelection);
   }