@vitessce/biomarker-select 3.9.2 → 3.9.3

package/dist-tsc/BiomarkerSelectAlt.d.ts

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

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

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

package/dist-tsc/BiomarkerSelectAlt.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Grid } from '@vitessce/styles';
+import { BiomarkerSelectAltGeneAutocomplete } from './BiomarkerSelectAltGeneAutocomplete.js';
+import { BiomarkerSelectAltSampleGroups } from './BiomarkerSelectAltSampleGroups.js';
+import { useStyles } from './styles.js';
+export function BiomarkerSelectAlt(props) {
+    const { setFeatureSelection, setSampleSetFilter, setSampleSetSelection, currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection, setCurrentModalitySpecificSelection, autocompleteNode, stratifications, } = props;
+    const { classes } = useStyles();
+    return (_jsx(Grid, { container: true, sx: { border: '0px solid red' }, children: _jsxs(Grid, { container: true, size: 12, className: classes.header, children: [_jsx(Grid, { container: true, size: 4, justifyContent: "flex-end", children: _jsx(BiomarkerSelectAltGeneAutocomplete, { setFeatureSelection: setFeatureSelection, autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection }) }), _jsx(Grid, { container: true, size: 5, justifyContent: "flex-start", flexDirection: "column", children: _jsx(BiomarkerSelectAltSampleGroups, { setSampleSetFilter: setSampleSetFilter, setSampleSetSelection: setSampleSetSelection, stratifications: stratifications }) })] }) }));
+}

package/dist-tsc/BiomarkerSelectAltGeneAutocomplete.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BiomarkerSelectAltGeneAutocomplete.d.ts","sourceRoot":"","sources":["../src/BiomarkerSelectAltGeneAutocomplete.js"],"names":[],"mappings":"AAYA,4EA0FC"}

package/dist-tsc/BiomarkerSelectAltGeneAutocomplete.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable no-unused-vars */
+import React, { useState } from 'react';
+import { Grid, Button, Typography, Dialog, Info as InfoIcon, SimpleAutocomplete, } from '@vitessce/styles';
+import { useStyles } from './styles.js';
+export function BiomarkerSelectAltGeneAutocomplete(props) {
+    const { setFeatureSelection, autocompleteNode, currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection, setCurrentModalitySpecificSelection, } = props;
+    const { classes } = useStyles();
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [biomarkerInfoOpen, setBiomarkerInfoOpen] = useState(false);
+    function confirmSelectedItem() {
+        // eslint-disable-next-line max-len
+        if (selectedItem && !currentModalityAgnosticSelection?.find(item => item.kgId === selectedItem?.kgId)) {
+            setCurrentModalityAgnosticSelection([
+                ...(currentModalityAgnosticSelection || []),
+                selectedItem,
+            ]);
+            // TODO: directly set featureSelection coordination value here instead?
+            // console.log('Setting specific selection to:', selectedItem);
+            const nextModalitySpecificSelection = [
+                ...(currentModalityAgnosticSelection || []),
+                selectedItem,
+            ];
+            setFeatureSelection(nextModalitySpecificSelection.map(d => d.label));
+        }
+    }
+    function clearBiomarkerSelection() {
+        setCurrentModalityAgnosticSelection([]);
+        setCurrentModalitySpecificSelection([]);
+        setFeatureSelection([]);
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, size: 12, children: [_jsx(Grid, { size: 8, children: _jsx(SimpleAutocomplete, { getMatches: autocompleteNode, onChange: item => setSelectedItem(item.data), textInputLabel: "Enter a gene", getItemLabel: item => `${item.label} (${item.data.nodeType})` }) }), selectedItem ? (_jsxs(Grid, { size: 4, children: ["\u00A0", _jsx(Button, { variant: "contained", onClick: confirmSelectedItem, children: "Select" })] })) : null] }), selectedItem ? (_jsxs(_Fragment, { children: [_jsx(Grid, { container: true, size: 12, flexDirection: "row", children: _jsxs(Button, { onClick: () => setBiomarkerInfoOpen(true), children: ["View ", selectedItem.nodeType, " info"] }) }), _jsxs(Dialog, { open: biomarkerInfoOpen, onClose: () => setBiomarkerInfoOpen(false), maxWidth: "md", children: [_jsx(Typography, { variant: "h4", title: selectedItem.term, children: selectedItem.label }), _jsxs(Grid, { container: true, size: 12, children: [_jsx(InfoIcon, {}), _jsxs(Typography, { variant: "h6", children: ["About this ", selectedItem.nodeType] })] }), _jsx(Grid, { container: true, size: 12, sx: { width: '800px' }, children: _jsx("iframe", { title: `Embedded metadata page for ontology term ${selectedItem.term}`, src: `https://identifiers.org/${selectedItem.term}`, width: "100%", height: "500", style: { border: 0 } }) }, selectedItem.term)] })] })) : null] }));
+}

package/dist-tsc/BiomarkerSelectAltSampleGroups.d.ts

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

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

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

package/dist-tsc/BiomarkerSelectAltSampleGroups.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, size: 12, children: [_jsx(Grid, { container: true, size: 4, children: _jsx("span", { style: { lineHeight: '50px' }, children: "in:\u00A0" }) }), _jsx(Grid, { container: true, size: 8, children: _jsxs(NativeSelect, { onChange: handleFirstGroupChange, value: lhsSelectedGroup ?? '__all__', variant: "standard", sx: { width: '100%' }, children: [_jsx("option", { value: "__all__", children: "All" }), hasSampleSetOptions ? (_jsx(_Fragment, { children: lhsOptions.map(o => (_jsx("option", { value: o.name, children: o.name }))) })) : null] }) })] }), _jsxs(Grid, { container: true, size: 12, children: [_jsx(Grid, { container: true, size: 4, children: _jsx("span", { style: { lineHeight: '50px' }, children: "compare to:\u00A0" }) }), _jsx(Grid, { container: true, size: 8, children: _jsxs(NativeSelect, { onChange: handleSecondGroupChange, value: rhsSelectedGroup ?? '__none__', variant: "standard", sx: { width: '100%' }, children: [_jsx("option", { value: "__none__", children: "None" }), hasSampleSetOptions ? (_jsx(_Fragment, { children: rhsOptions.map(o => (_jsx("option", { value: o.name, children: o.name }))) })) : null] }) })] })] }));
+}

package/dist-tsc/BiomarkerSelectAltSubscriber.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Alternative biomarker select UI.
+ * @param {object} props
+ * @param {{ name: string, stratificationType: string, sampleSets: [string[], string[]]}[]} props.stratificationOptions
+ * @returns
+ */
+export function BiomarkerSelectAltSubscriber(props: {
+    stratificationOptions: {
+        name: string;
+        stratificationType: string;
+        sampleSets: [string[], string[]];
+    }[];
+}): JSX.Element;
+//# sourceMappingURL=BiomarkerSelectAltSubscriber.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BiomarkerSelectAltSubscriber.d.ts","sourceRoot":"","sources":["../src/BiomarkerSelectAltSubscriber.js"],"names":[],"mappings":"AAkBA;;;;;GAKG;AACH,oDAHG;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,eA2JF"}

package/dist-tsc/BiomarkerSelectAltSubscriber.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/* 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 (_jsx(_Fragment, { children: _jsx(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/dist-tsc/ComparativeHeadingSubscriber.js

@@ -56,5 +56,5 @@ export function ComparativeHeadingSubscriber(props) {
             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] }));
+    return (_jsxs("div", { className: classes.headingContainer, children: [sampleSetSelection && sampleSetSelection.length === 2 ? (_jsxs("div", { className: classes.headingSectionContainer, children: [_jsx("div", { style: { width: '45%' }, children: _jsx("h3", { className: classes.headingText, children: sampleSetSelection?.[0]?.at(-1) }) }), _jsx("div", { style: { width: '5%' }, children: _jsx("h3", { className: classes.headingText, style: { textAlign: 'right' }, children: "vs.\u00A0" }) }), _jsx("div", { style: { width: '50%' }, children: _jsx("h3", { 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("h3", { 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/index.d.ts

@@ -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 { autocompleteFeature, transformFeature, getAlternativeTerms, getTermMapping } from "./default-async-functions.js";

package/dist-tsc/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 { autocompleteFeature, transformFeature, getAlternativeTerms, getTermMapping, } from './default-async-functions.js';

package/dist-tsc/select-specific.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-specific.d.ts","sourceRoot":"","sources":["../src/select-specific.js"],"names":[],"mappings":"AA+BA,wDA4FC"}
+{"version":3,"file":"select-specific.d.ts","sourceRoot":"","sources":["../src/select-specific.js"],"names":[],"mappings":"AA+BA,wDA6FC"}

package/dist-tsc/select-specific.js

@@ -64,6 +64,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);
     }
     return (_jsxs(_Fragment, { children: [_jsx(Grid, { size: 6, children: _jsx(Typography, { variant: "h6", children: "Select a feature type:" }) }), _jsx(Grid, { container: true, size: 6, children: _jsx(Grid, { children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(NativeSelect, { defaultValue: "gene", classes: { select: classes.selectInput }, inputProps: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/biomarker-select",
-  "version": "3.9.2",
+  "version": "3.9.3",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -21,10 +21,11 @@
     "fuse.js": "^7.0.0",
     "d3-dsv": "^1.1.1",
     "clsx": "^1.1.1",
-    "@vitessce/vit-s": "3.9.2",
-    "@vitessce/styles": "3.9.2",
-    "@vitessce/types": "3.9.2",
-    "@vitessce/constants-internal": "3.9.2"
+    "lodash-es": "^4.17.21",
+    "@vitessce/styles": "3.9.3",
+    "@vitessce/constants-internal": "3.9.3",
+    "@vitessce/vit-s": "3.9.3",
+    "@vitessce/types": "3.9.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/BiomarkerSelectAlt.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Grid } from '@vitessce/styles';
+import { BiomarkerSelectAltGeneAutocomplete } from './BiomarkerSelectAltGeneAutocomplete.js';
+import { BiomarkerSelectAltSampleGroups } from './BiomarkerSelectAltSampleGroups.js';
+import { useStyles } from './styles.js';
+
+
+export function BiomarkerSelectAlt(props) {
+  const {
+    setFeatureSelection,
+    setSampleSetFilter,
+    setSampleSetSelection,
+
+    currentModalityAgnosticSelection,
+    setCurrentModalityAgnosticSelection,
+    setCurrentModalitySpecificSelection,
+
+    autocompleteNode,
+
+    stratifications,
+  } = props;
+  const { classes } = useStyles();
+
+
+  return (
+    <Grid container sx={{ border: '0px solid red' }}>
+      <Grid container size={12} className={classes.header}>
+        <Grid container size={4} justifyContent="flex-end">
+          <BiomarkerSelectAltGeneAutocomplete
+            setFeatureSelection={setFeatureSelection}
+            autocompleteNode={autocompleteNode}
+
+            currentModalityAgnosticSelection={currentModalityAgnosticSelection}
+            setCurrentModalityAgnosticSelection={setCurrentModalityAgnosticSelection}
+            setCurrentModalitySpecificSelection={setCurrentModalitySpecificSelection}
+          />
+        </Grid>
+        <Grid container size={5} justifyContent="flex-start" flexDirection="column">
+          <BiomarkerSelectAltSampleGroups
+            setSampleSetFilter={setSampleSetFilter}
+            setSampleSetSelection={setSampleSetSelection}
+
+            stratifications={stratifications}
+          />
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+}

package/src/BiomarkerSelectAltGeneAutocomplete.js

@@ -0,0 +1,103 @@
+/* eslint-disable no-unused-vars */
+import React, { useState } from 'react';
+import {
+  Grid, Button,
+  Typography,
+  Dialog,
+  Info as InfoIcon,
+  SimpleAutocomplete,
+} from '@vitessce/styles';
+import { useStyles } from './styles.js';
+
+
+export function BiomarkerSelectAltGeneAutocomplete(props) {
+  const {
+    setFeatureSelection,
+    autocompleteNode,
+    currentModalityAgnosticSelection,
+    setCurrentModalityAgnosticSelection,
+    setCurrentModalitySpecificSelection,
+  } = props;
+  const { classes } = useStyles();
+
+  const [selectedItem, setSelectedItem] = useState(null);
+
+  const [biomarkerInfoOpen, setBiomarkerInfoOpen] = useState(false);
+
+
+  function confirmSelectedItem() {
+    // eslint-disable-next-line max-len
+    if (selectedItem && !currentModalityAgnosticSelection?.find(item => item.kgId === selectedItem?.kgId)) {
+      setCurrentModalityAgnosticSelection([
+        ...(currentModalityAgnosticSelection || []),
+        selectedItem,
+      ]);
+      // TODO: directly set featureSelection coordination value here instead?
+      // console.log('Setting specific selection to:', selectedItem);
+      const nextModalitySpecificSelection = [
+        ...(currentModalityAgnosticSelection || []),
+        selectedItem,
+      ];
+      setFeatureSelection(nextModalitySpecificSelection.map(d => d.label));
+    }
+  }
+
+  function clearBiomarkerSelection() {
+    setCurrentModalityAgnosticSelection([]);
+    setCurrentModalitySpecificSelection([]);
+    setFeatureSelection([]);
+  }
+
+  return (
+    <>
+      <Grid container size={12}>
+        <Grid size={8}>
+          <SimpleAutocomplete
+            getMatches={autocompleteNode}
+            onChange={item => setSelectedItem(item.data)}
+            textInputLabel="Enter a gene"
+            getItemLabel={item => `${item.label} (${item.data.nodeType})`}
+          />
+        </Grid>
+        {selectedItem ? (
+          <Grid size={4}>
+            &nbsp;
+            <Button
+              variant="contained"
+              onClick={confirmSelectedItem}
+            >
+              Select
+            </Button>
+          </Grid>
+        ) : null}
+      </Grid>
+      {selectedItem ? (
+        <>
+          <Grid container size={12} flexDirection="row">
+            <Button onClick={() => setBiomarkerInfoOpen(true)}>
+              View {selectedItem.nodeType} info
+            </Button>
+          </Grid>
+          <Dialog open={biomarkerInfoOpen} onClose={() => setBiomarkerInfoOpen(false)} maxWidth="md">
+            <Typography variant="h4" title={selectedItem.term}>
+              {selectedItem.label}
+            </Typography>
+            <Grid container size={12}>
+              <InfoIcon />
+              <Typography variant="h6">About this {selectedItem.nodeType}</Typography>
+            </Grid>
+            <Grid container size={12} key={selectedItem.term} sx={{ width: '800px' }}>
+              <iframe
+                title={`Embedded metadata page for ontology term ${selectedItem.term}`}
+                src={`https://identifiers.org/${selectedItem.term}`}
+                width="100%"
+                height="500"
+                style={{ border: 0 }}
+              />
+            </Grid>
+          </Dialog>
+        </>
+      ) : null}
+    </>
+  );
+}