@vitessce/biomarker-select 3.5.0

package/dist-tsc/BiomarkerSelectSubscriber.d.ts

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

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

@@ -0,0 +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,eAwFF"}

package/dist-tsc/BiomarkerSelectSubscriber.js

@@ -0,0 +1,53 @@
+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 { ScmdUi } from './scmd-ui.js';
+/**
+ *
+ * @param {object} props
+ * @param {{ name: string, stratificationType: string, sampleSets: [string[], string[]]}[]} props.stratificationOptions
+ * @returns
+ */
+export function BiomarkerSelectSubscriber(props) {
+    const { coordinationScopes, stratificationOptions, } = props;
+    const [{ sampleSetSelection, featureSelection, }, { setSampleSetSelection, setFeatureSelection, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.BIOMARKER_SELECT], coordinationScopes);
+    const viewConfigStoreApi = useViewConfigStoreApi();
+    const viewConfig = useViewConfig();
+    const setViewConfig = useSetViewConfig(viewConfigStoreApi);
+    // 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);
+    const [mode, setMode] = useState(null);
+    const [step, setStep] = 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) => autocompleteFeature(inputValue), [autocompleteFeature]);
+    const getEdges = useCallback(async (node, targetModality) => transformFeature(node, targetModality), [transformFeature]);
+    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: () => {
+                // eslint-disable-next-line no-console
+                console.log('Done selecting');
+                /*
+                console.log(viewConfig);
+                setViewConfig({
+                  ...viewConfig,
+                  coordinationSpace: {
+                    ...viewConfig.coordinationSpace,
+                    sampleSetFilter: {
+                      ...viewConfig.coordinationSpace.sampleSetFilter,
+                      'case-control': currentStratificationSelection?.sampleSets,
+                    },
+                    sampleSetSelection: {
+                      ...viewConfig.coordinationSpace.sampleSetSelection,
+                      'case-control': currentStratificationSelection?.sampleSets,
+                    },
+                  },
+                });
+                */
+            } })) : null }));
+}

package/dist-tsc/cart.d.ts

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

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

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

package/dist-tsc/cart.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@material-ui/core';
+import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons';
+import { useStyles } from './styles.js';
+export function ConfirmatoryCart(props) {
+    const { currentModalityAgnosticSelection, 
+    // eslint-disable-next-line no-unused-vars
+    setCurrentModalityAgnosticSelection, currentModalitySpecificSelection, 
+    // eslint-disable-next-line no-unused-vars
+    setCurrentModalitySpecificSelection, currentStratificationSelection, 
+    // eslint-disable-next-line no-unused-vars
+    setCurrentStratificationSelection, } = props;
+    const classes = useStyles();
+    const [expandedAccordions, setExpandedAccordions] = React.useState([
+        'agnostic', 'specific', 'stratification',
+    ]);
+    const handleAccordionChange = panel => (event, isExpanded) => {
+        if (isExpanded) {
+            setExpandedAccordions([...expandedAccordions, panel]);
+        }
+        else {
+            setExpandedAccordions(expandedAccordions.filter(item => item !== panel));
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Typography, { children: "Current selections" }), _jsxs(Accordion, { className: classes.accordion, expanded: expandedAccordions.includes('agnostic'), onChange: handleAccordionChange('agnostic'), children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, {}), "aria-controls": "panel1bh-content", id: "panel1bh-header", children: _jsx(Typography, { children: "Modality-agnostic biomarkers" }) }), _jsx(AccordionDetails, { className: classes.accordionDetails, children: _jsx("ul", { className: classes.cartUl, children: currentModalityAgnosticSelection ? (currentModalityAgnosticSelection.map(item => (_jsxs("li", { children: [item.label, " (", item.nodeType, ")"] }, item.kgId)))) : null }) })] }), _jsxs(Accordion, { className: classes.accordion, expanded: expandedAccordions.includes('specific'), onChange: handleAccordionChange('specific'), children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, {}), "aria-controls": "panel2bh-content", id: "panel2bh-header", children: _jsx(Typography, { children: "Modality-specific signature" }) }), _jsx(AccordionDetails, { className: classes.accordionDetails, children: _jsx("ul", { className: classes.cartUl, children: currentModalitySpecificSelection ? (currentModalitySpecificSelection.map(item => (_jsxs("li", { children: [item.label, " (", item.nodeType, ")"] }, item.kgId)))) : null }) })] }), _jsxs(Accordion, { className: classes.accordion, expanded: expandedAccordions.includes('stratification'), onChange: handleAccordionChange('stratification'), children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, {}), "aria-controls": "panel3bh-content", id: "panel3bh-header", children: _jsx(Typography, { children: "Case-control stratification" }) }), _jsx(AccordionDetails, { className: classes.accordionDetails, children: _jsx("ul", { className: classes.cartUl, children: currentStratificationSelection ? (_jsx("li", { children: currentStratificationSelection.name })) : null }) })] })] }));
+}

package/dist-tsc/confirmatory-stepper.d.ts

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

package/dist-tsc/confirmatory-stepper.d.ts.map

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

package/dist-tsc/confirmatory-stepper.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
+import { Stepper, Step, StepLabel, Button, Grid, Box, Typography } from '@material-ui/core';
+import { ConfirmatoryCart } from './cart.js';
+import { SelectAgnostic } from './select-agnostic.js';
+import { SelectSpecific } from './select-specific.js';
+import { SelectStratification } from './select-stratification.js';
+import { useStyles } from './styles.js';
+const steps = [
+    'Select biomarkers (modality-agnostic)',
+    'Derive modality-specific biomarker signature',
+    'Define case-control stratification',
+];
+export function ConfirmatoryStepper(props) {
+    const { autocompleteNode, currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection, currentModalitySpecificSelection, setCurrentModalitySpecificSelection, currentStratificationSelection, setCurrentStratificationSelection, getEdges, stratifications, onFinish, } = props;
+    const classes = useStyles();
+    const [activeStep, setActiveStep] = React.useState(0);
+    const [skipped, setSkipped] = React.useState(new Set());
+    const isStepOptional = step => step === 2;
+    const isStepSkipped = step => skipped.has(step);
+    const handleNext = () => {
+        let newSkipped = skipped;
+        if (isStepSkipped(activeStep)) {
+            newSkipped = new Set(newSkipped.values());
+            newSkipped.delete(activeStep);
+        }
+        setActiveStep(prevActiveStep => prevActiveStep + 1);
+        setSkipped(newSkipped);
+    };
+    const handleBack = () => {
+        setActiveStep(prevActiveStep => prevActiveStep - 1);
+    };
+    const handleSkip = () => {
+        if (!isStepOptional(activeStep)) {
+            // You probably want to guard against something like this,
+            // it should never occur unless someone's actively trying to break something.
+            throw new Error("You can't skip a step that isn't optional.");
+        }
+        setActiveStep(prevActiveStep => prevActiveStep + 1);
+        setSkipped((prevSkipped) => {
+            const newSkipped = new Set(prevSkipped.values());
+            newSkipped.add(activeStep);
+            return newSkipped;
+        });
+    };
+    const handleReset = () => {
+        setActiveStep(0);
+    };
+    useEffect(() => {
+        if (activeStep === steps.length) {
+            onFinish();
+        }
+    }, [activeStep, steps]);
+    return (_jsxs(Grid, { item: true, container: true, xs: 12, children: [_jsx(Grid, { item: true, container: true, xs: 12, children: _jsx(Box, { className: classes.fullWidthBox, children: _jsx(Stepper, { activeStep: activeStep, children: steps.map((label, index) => {
+                            const stepProps = {};
+                            const labelProps = {};
+                            if (isStepOptional(index)) {
+                                labelProps.optional = (_jsx(Typography, { variant: "caption", children: "Optional" }));
+                            }
+                            if (isStepSkipped(index)) {
+                                stepProps.completed = false;
+                            }
+                            return (_jsx(Step, { ...stepProps, children: _jsx(StepLabel, { ...labelProps, children: label }) }, label));
+                        }) }) }) }), _jsxs(Grid, { item: true, container: true, xs: 12, style: { marginTop: '20px' }, alignItems: "flex-start", children: [_jsx(Grid, { item: true, container: true, xs: 8, children: activeStep === steps.length ? (_jsx(_Fragment, { children: _jsx(Typography, { style: { marginTop: '20px', marginBottom: '10px' }, children: "All steps completed - you're finished" }) })) : (_jsxs(_Fragment, { children: [activeStep === 0 ? (_jsx(SelectAgnostic, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications })) : null, activeStep === 1 ? (_jsx(SelectSpecific, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications })) : null, activeStep === 2 ? (_jsx(SelectStratification, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications })) : null] })) }), _jsx(Grid, { item: true, container: true, xs: 4, children: _jsx(ConfirmatoryCart, { currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, stratifications: stratifications }) }), _jsx(Box, { className: classes.fullWidthBox, children: activeStep === steps.length ? (_jsx(_Fragment, { children: _jsxs(Box, { style: { display: 'flex', flexDirection: 'row', paddingTop: '20px' }, children: [_jsx(Box, { style: { flex: '1 1 auto' } }), _jsx(Button, { onClick: handleReset, children: "Reset" })] }) })) : (_jsxs(Box, { style: { display: 'flex', flexDirection: 'row', paddingTop: '20px' }, children: [_jsx(Button, { color: "inherit", disabled: activeStep === 0, onClick: handleBack, style: { mr: 1 }, children: "Back" }), _jsx(Box, { style: { flex: '1 1 auto' } }), isStepOptional(activeStep) && (_jsx(Button, { color: "inherit", onClick: handleSkip, style: { marginRight: '10px' }, children: "Skip" })), _jsx(Button, { onClick: handleNext, children: activeStep === steps.length - 1 ? 'Finish' : 'Next' })] })) })] })] }));
+}

package/dist-tsc/default-async-functions.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @satisfies {AutocompleteFeatureFunc}
+ * @param {object} ctx
+ * @param {QueryClient} ctx.queryClient
+ * @param {string} partial
+ * @param {null | TargetModalityType} targetModality
+ * @returns {Promise<KgNode[]>}
+ */
+export function autocompleteFeature({ queryClient }: {
+    queryClient: QueryClient;
+}, partial: string, targetModality: null | TargetModalityType): Promise<KgNode[]>;
+/**
+ * @satisfies {TransformFeatureFunc}
+ * @param {object} ctx
+ * @param {QueryClient} ctx.queryClient
+ * @param {KgNode} node
+ * @param {TargetModalityType} targetModality
+ * @returns {Promise<KgNode[]>}
+ */
+export function transformFeature({ queryClient }: {
+    queryClient: QueryClient;
+}, node: KgNode, targetModality: TargetModalityType): Promise<KgNode[]>;
+import type { QueryClient } from '@tanstack/react-query';
+import type { TargetModalityType } from '@vitessce/types';
+import type { KgNode } from '@vitessce/types';
+//# sourceMappingURL=default-async-functions.d.ts.map

package/dist-tsc/default-async-functions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-async-functions.d.ts","sourceRoot":"","sources":["../src/default-async-functions.js"],"names":[],"mappings":"AA4GA;;;;;;;GAOG;AACH,qDALG;IAAyB,WAAW,EAA5B,WAAW;CACnB,WAAQ,MAAM,kBACN,IAAI,GAAG,kBAAkB,GACvB,OAAO,CAAC,MAAM,EAAE,CAAC,CAiB7B;AAeD;;;;;;;GAOG;AACH,kDALG;IAAyB,WAAW,EAA5B,WAAW;CACnB,QAAQ,MAAM,kBACN,kBAAkB,GAChB,OAAO,CAAC,MAAM,EAAE,CAAC,CAkC7B;iCAlLsD,uBAAuB;wCADyB,iBAAiB;4BAAjB,iBAAiB"}

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

@@ -0,0 +1,168 @@
+// @ts-check
+/* eslint-disable max-len */
+/* eslint-disable no-unused-vars */
+import { csvParse } from 'd3-dsv';
+// eslint-disable-next-line import/no-unresolved
+import Fuse from 'fuse.js/basic';
+/** @import { KgNode, KgEdge, TargetModalityType, AutocompleteFeatureFunc, TransformFeatureFunc } from '@vitessce/types' */
+/** @import { QueryClient, QueryFunctionContext } from '@tanstack/react-query' */
+const KG_BASE_URL = 'https://storage.googleapis.com/vitessce-demo-data/enrichr-kg-september-2023';
+/**
+ * @returns {Promise<KgNode[]>}
+ */
+function loadGeneNodes() {
+    return fetch(`${KG_BASE_URL}/Gene.nodes.csv`)
+        .then(res => res.text())
+        .then((res) => {
+        const result = csvParse(res);
+        return result.map((/** @type {any} */ d) => ({
+            kgId: d.id,
+            label: d.label,
+            term: `hgnc.symbol:${d.label}`,
+            nodeType: 'gene',
+        }));
+    });
+}
+/**
+ * @returns {Promise<KgNode[]>}
+ */
+function loadCellTypeNodes() {
+    return fetch(`${KG_BASE_URL}/HuBMAP_ASCTplusB_augmented_2022.nodes.csv`)
+        .then(res => res.text())
+        .then((res) => {
+        const result = csvParse(res);
+        return result.map((/** @type {any} */ d) => ({
+            kgId: d.id,
+            label: d.label,
+            term: d.cell_id.length ? d.cell_id : null,
+            nodeType: 'cell-type',
+        }));
+    });
+}
+/**
+ * @returns {Promise<KgNode[]>}
+ */
+function loadPathwayNodes() {
+    return fetch(`${KG_BASE_URL}/Reactome_2022.nodes.csv`)
+        .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}`,
+            nodeType: 'pathway',
+        }));
+    });
+}
+// Parent app can pass in queryClient
+// (to every async function) so that functions can call .fetchQuery
+// Reference: https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientfetchquery
+/**
+ *
+ * @param {QueryFunctionContext} ctx
+ * @returns
+ */
+async function loadFuseObject(ctx) {
+    const queryClient = /** @type {QueryClient} */ (ctx.meta?.queryClient);
+    const [geneNodes, cellTypeNodes, pathwayNodes] = await Promise.all([
+        queryClient.fetchQuery({
+            queryKey: ['geneNodes'],
+            staleTime: Infinity,
+            queryFn: loadGeneNodes,
+        }),
+        queryClient.fetchQuery({
+            queryKey: ['cellTypeNodes'],
+            staleTime: Infinity,
+            queryFn: loadCellTypeNodes,
+        }),
+        queryClient.fetchQuery({
+            queryKey: ['pathwayNodes'],
+            staleTime: Infinity,
+            queryFn: loadPathwayNodes,
+        }),
+    ]);
+    const fuseOptions = {
+        keys: ['label', 'term'],
+    };
+    // For fuzzy searching using fuse.js
+    return new Fuse([
+        ...geneNodes,
+        ...cellTypeNodes,
+        ...pathwayNodes,
+    ], fuseOptions);
+}
+/**
+ * @satisfies {AutocompleteFeatureFunc}
+ * @param {object} ctx
+ * @param {QueryClient} ctx.queryClient
+ * @param {string} partial
+ * @param {null | TargetModalityType} targetModality
+ * @returns {Promise<KgNode[]>}
+ */
+export async function autocompleteFeature({ queryClient }, partial, targetModality) {
+    if (partial.length < 1) {
+        return [];
+    }
+    // TODO: parameterize the fuse object (via queryKey) based on targetModality?
+    // Or just perform that filtering after the search?
+    const fuse = await queryClient.fetchQuery({
+        queryKey: ['autocompleteFeature', 'fuseObject'],
+        staleTime: Infinity,
+        queryFn: loadFuseObject,
+        meta: { queryClient },
+    });
+    const results = fuse.search(partial);
+    return results.map((/** @type {any} */ result) => result.item);
+}
+async function loadPathwayToGeneEdges() {
+    return fetch(`${KG_BASE_URL}/Reactome_2022.Reactome.Gene.edges.csv`)
+        .then(res => res.text())
+        .then((res) => {
+        const result = csvParse(res);
+        return result.map((/** @type {any} */ d) => ({
+            source: d.source,
+            target: d.target,
+            relation: d.relation,
+        }));
+    });
+}
+/**
+ * @satisfies {TransformFeatureFunc}
+ * @param {object} ctx
+ * @param {QueryClient} ctx.queryClient
+ * @param {KgNode} node
+ * @param {TargetModalityType} targetModality
+ * @returns {Promise<KgNode[]>}
+ */
+export async function transformFeature({ queryClient }, node, targetModality) {
+    if (targetModality === node.nodeType) {
+        // For example, if the target modality is gene and the node is already a gene node.
+        return [node];
+    }
+    if (targetModality === 'gene') {
+        const geneNodes = await queryClient.fetchQuery({
+            queryKey: ['geneNodes'],
+            staleTime: Infinity,
+            queryFn: loadGeneNodes,
+        });
+        if (node.nodeType === 'pathway') {
+            // Pathway to genes case.
+            const pathwayGeneEdges = await queryClient.fetchQuery({
+                queryKey: ['pathwayGeneEdges'],
+                staleTime: Infinity,
+                queryFn: loadPathwayToGeneEdges,
+            });
+            const matchingEdges = pathwayGeneEdges.filter((/** @type {KgEdge} */ d) => d.source === node.kgId);
+            const matchingGeneIds = matchingEdges.map((/** @type {KgEdge} */ d) => d.target);
+            const matchingGenes = geneNodes.filter(d => matchingGeneIds.includes(d.kgId));
+            return matchingGenes;
+        }
+        if (node.nodeType === 'cell-type') {
+            // Cell type to genes case.
+            // TODO: implement
+        }
+    }
+    // TODO: handle other target modalities
+    return [];
+}

package/dist-tsc/index.d.ts

@@ -0,0 +1,3 @@
+export { BiomarkerSelectSubscriber } from "./BiomarkerSelectSubscriber.js";
+export { autocompleteFeature, transformFeature } from "./default-async-functions.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist-tsc/index.js

@@ -0,0 +1,2 @@
+export { BiomarkerSelectSubscriber } from './BiomarkerSelectSubscriber.js';
+export { autocompleteFeature, transformFeature, } from './default-async-functions.js';

package/dist-tsc/missing-types.d.ts

@@ -0,0 +1,3 @@
+declare module 'd3-dsv';
+declare module 'fuse.js/basic';
+//# sourceMappingURL=missing-types.d.ts.map

package/dist-tsc/missing-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"missing-types.d.ts","sourceRoot":"","sources":["../src/missing-types.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,QAAQ,CAAC;AACxB,OAAO,QAAQ,eAAe,CAAA"}

package/dist-tsc/missing-types.js

@@ -0,0 +1 @@
+"use strict";

package/dist-tsc/scmd-ui.d.ts

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

package/dist-tsc/scmd-ui.d.ts.map

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

package/dist-tsc/scmd-ui.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-unused-vars */
+import React, { useState } from 'react';
+import { Button, ButtonGroup, Grid, Tooltip } from '@material-ui/core';
+import { ConfirmatoryStepper } from './confirmatory-stepper.js';
+import { useStyles } from './styles.js';
+export function ScmdUi(props) {
+    const { mode: modeProp, setMode, step: stepProp, setStep, currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection, currentModalitySpecificSelection, setCurrentModalitySpecificSelection, currentStratificationSelection, setCurrentStratificationSelection, autocompleteNode, getEdges, stratifications, onFinish, } = props;
+    const classes = useStyles();
+    const mode = modeProp || 'confirmatory';
+    const step = mode === 'confirmatory' ? (stepProp || 'select-biomarkers') : (stepProp || 'define-stratification');
+    const [tempIsVisible, setTempIsVisible] = useState(true);
+    const isConfirmatoryMode = mode === 'confirmatory';
+    return (_jsxs(Grid, { container: true, style: { border: '0px solid red' }, children: [_jsxs(Grid, { item: true, container: true, xs: 12, className: classes.header, children: [_jsx(Grid, { item: true, xs: 8 }), _jsx(Grid, { item: true, container: true, xs: 4, justifyContent: "flex-end", children: _jsxs(ButtonGroup, { variant: "outlined", size: "small", color: "secondary", "aria-label": "Toggle between confirmatory and exploratory modes", children: [_jsx(Tooltip, { arrow: true, title: "Start from biomarker(s) of interest", children: _jsx(Button, { variant: isConfirmatoryMode ? 'contained' : 'outlined', onClick: () => setMode('confirmatory'), children: "Confirmatory (Hypothesis-driven)" }) }), _jsx(Tooltip, { arrow: true, title: "Lacking biomarker(s) of interest", children: _jsx(Button, { variant: !isConfirmatoryMode ? 'contained' : 'outlined', onClick: () => setMode('exploratory'), children: "Exploratory (Hypothesis-generating)" }) })] }) })] }), tempIsVisible ? (_jsxs("div", { style: { border: '2px solid #eee', borderRadius: '5px' }, children: [mode === 'confirmatory' ? (_jsx(ConfirmatoryStepper, { autocompleteNode: autocompleteNode, currentModalityAgnosticSelection: currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection: setCurrentModalityAgnosticSelection, currentModalitySpecificSelection: currentModalitySpecificSelection, setCurrentModalitySpecificSelection: setCurrentModalitySpecificSelection, currentStratificationSelection: currentStratificationSelection, setCurrentStratificationSelection: setCurrentStratificationSelection, getEdges: getEdges, stratifications: stratifications, onFinish: onFinish })) : null, mode === 'exploratory' ? _jsx("span", { children: "TODO" }) : null] })) : null] }));
+}

package/dist-tsc/select-agnostic.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-agnostic.d.ts","sourceRoot":"","sources":["../src/select-agnostic.js"],"names":[],"mappings":"AAoEA,wDAuGC"}

package/dist-tsc/select-agnostic.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useRef, useEffect } from 'react';
+import { Grid, Button, TextField, Typography } from '@material-ui/core';
+import { Add as AddIcon, Info as InfoIcon } from '@material-ui/icons';
+import { Autocomplete } from '@material-ui/lab';
+import { VariableSizeList } from 'react-window';
+import { useStyles } from './styles.js';
+const LIST_ROW_HEIGHT = 48;
+// We use a context to pass the extra props from ListboxComponent to the outer div element.
+const OuterElementContext = React.createContext({});
+const OuterElementType = React.forwardRef((props, ref) => {
+    const outerProps = React.useContext(OuterElementContext);
+    return _jsx("div", { ref: ref, ...props, ...outerProps });
+});
+function ListRow(props) {
+    const { data, index, style } = props;
+    return React.cloneElement(data[index], {
+        style: {
+            ...style,
+            top: style.top + 8,
+        },
+    });
+}
+function useResetCache(itemCount) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current != null) {
+            ref.current.resetAfterIndex(0, true);
+        }
+    }, [itemCount]);
+    return ref;
+}
+// Reference: https://mui.com/material-ui/react-autocomplete/#virtualization
+const ListboxComponent = React.forwardRef((props, ref) => {
+    const { children, ...other } = props;
+    const itemCount = children.length;
+    const gridRef = useResetCache(itemCount);
+    return (_jsx("div", { ref: ref, children: _jsx(OuterElementContext.Provider, { value: other, children: _jsx(VariableSizeList, { height: Math.min(8, itemCount) * LIST_ROW_HEIGHT, itemSize: () => LIST_ROW_HEIGHT, width: "100%", innerElementType: "ul", outerElementType: OuterElementType, overscanCount: 5, ref: gridRef, itemCount: itemCount, itemData: children, children: ListRow }) }) }));
+});
+export function SelectAgnostic(props) {
+    const { autocompleteNode, currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection, } = props;
+    const classes = useStyles();
+    const [selectedItem, setSelectedItem] = React.useState(null);
+    const [potentialItems, setPotentialItems] = React.useState([]);
+    const handleChange = async (event) => {
+        const { value } = event.target;
+        if (!value) {
+            return;
+        }
+        const autocompleteResult = await autocompleteNode(value);
+        setPotentialItems(autocompleteResult);
+    };
+    function confirmSelectedItem() {
+        // eslint-disable-next-line max-len
+        if (selectedItem && !currentModalityAgnosticSelection?.find(item => item.kgId === selectedItem?.kgId)) {
+            setCurrentModalityAgnosticSelection([
+                ...(currentModalityAgnosticSelection || []),
+                selectedItem,
+            ]);
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Grid, { item: true, container: true, xs: 12, children: _jsx(Typography, { variant: "h6", children: "Search by gene, protein, pathway (by term name), or cell type:" }) }), _jsxs(Grid, { item: true, container: true, xs: 12, children: [_jsx(Grid, { item: true, xs: 4, children: _jsx(Autocomplete, { options: potentialItems, autoComplete: true, includeInputInList: true, onInputChange: handleChange, onChange: (event, item) => setSelectedItem(item), classes: { input: classes.searchInput }, renderInput: params => (_jsx(TextField, { label: "Search", variant: "outlined", onChange: handleChange, ...params })), ListboxComponent: ListboxComponent, getOptionLabel: option => option.label, renderOption: option => (_jsxs(Typography, { noWrap: true, children: [option.label, " (", option.nodeType, ")"] })) }) }), _jsx(Grid, { item: true, xs: 8, style: {
+                            border: selectedItem ? '1px solid gray' : '1px solid transparent',
+                            borderRadius: '4px',
+                        }, children: selectedItem ? (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, item: true, xs: 12, children: [_jsx(Grid, { item: true, xs: 9, children: _jsx(Typography, { variant: "h4", title: selectedItem.term, children: selectedItem.label }) }), _jsx(Grid, { item: true, xs: 3, style: { position: 'relative' }, children: _jsx(Button, { className: classes.selectButton, variant: "contained", startIcon: _jsx(AddIcon, {}), onClick: confirmSelectedItem, children: "Select" }) })] }), _jsxs(Grid, { container: true, item: true, xs: 12, children: [_jsx(InfoIcon, {}), _jsxs(Typography, { variant: "h6", children: ["About this ", selectedItem.nodeType] })] }), _jsx(Grid, { container: true, item: true, xs: 12, 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/select-specific.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-specific.d.ts","sourceRoot":"","sources":["../src/select-specific.js"],"names":[],"mappings":"AAuBA,wDAuFC"}

package/dist-tsc/select-specific.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { useQueries } from '@tanstack/react-query';
+import { Grid, FormHelperText, Typography, Select, FormControl } from '@material-ui/core';
+import { DataGrid } from '@mui/x-data-grid';
+import { useStyles } from './styles.js';
+const columns = [
+    {
+        field: 'targetLabel',
+        headerName: 'Gene symbol',
+        width: 200,
+        editable: false,
+    },
+    {
+        field: 'sourceRelationship',
+        headerName: 'Relationship to modality-agnostic selections',
+        width: 400,
+        editable: false,
+    },
+];
+export function SelectSpecific(props) {
+    const { currentModalityAgnosticSelection, currentModalitySpecificSelection, setCurrentModalitySpecificSelection, getEdges, } = props;
+    const classes = useStyles();
+    const queries = useQueries({
+        queries: currentModalityAgnosticSelection?.map(item => ({
+            queryKey: [item.nodeType, item.kgId],
+            queryFn: async () => {
+                const matchingGenes = await getEdges(item, 'gene');
+                return matchingGenes.map(d => ({ target: d, source: item }));
+            },
+        })) || [],
+    });
+    const anyLoading = queries.some(q => q.isFetching);
+    const anyError = queries.some(q => q.isError);
+    // eslint-disable-next-line no-nested-ternary
+    const dataStatus = anyLoading ? 'loading' : (anyError ? 'error' : 'success');
+    const data = queries
+        .flatMap(q => q.data)
+        .filter(Boolean);
+    const rows = useMemo(() => data.map(d => ({
+        id: d.target.kgId,
+        targetLabel: d.target.label,
+        sourceRelationship: (d.source.nodeType === 'gene'
+            ? 'Directly-selected gene'
+            : `Member of ${d.source.label} ${d.source.nodeType}`),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    })), [currentModalityAgnosticSelection, dataStatus]);
+    // Derive the set of selected row ids from the
+    // currentModalitySpecificSelection.
+    const rowSelectionModel = useMemo(() => currentModalitySpecificSelection?.map(d => d.kgId) || [], [rows, currentModalitySpecificSelection]);
+    function handleSelection(newRowSelectionModel) {
+        const newSelection = newRowSelectionModel
+            .map(kgId => data.find(d => d.target.kgId === kgId)?.target)
+            .filter(Boolean);
+        setCurrentModalitySpecificSelection(newSelection);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Grid, { item: true, xs: 6, children: _jsx(Typography, { variant: "h6", children: "Select a feature type:" }) }), _jsx(Grid, { item: true, container: true, xs: 6, children: _jsx(Grid, { item: true, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(Select, { native: true, defaultValue: "gene", classes: { select: classes.selectInput }, inputProps: {
+                                    name: 'age',
+                                    id: 'uncontrolled-native',
+                                }, children: _jsx("option", { value: "gene", children: "Gene (RNA-seq)" }) }), _jsx(FormHelperText, { children: "Feature type (experimental modality)" })] }) }) }), _jsx(Grid, { item: true, container: true, xs: 12, style: { height: '450px' }, children: _jsx(DataGrid, { rows: rows, columns: columns, pageSize: 10, checkboxSelection: true, onSelectionModelChange: handleSelection, rowSelectionModel: rowSelectionModel }) })] }));
+}

package/dist-tsc/select-stratification.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-stratification.d.ts","sourceRoot":"","sources":["../src/select-stratification.js"],"names":[],"mappings":"AAIA,8DAqFC"}

package/dist-tsc/select-stratification.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Grid, RadioGroup, FormControl, FormLabel, Radio, FormControlLabel, Typography } from '@material-ui/core';
+export function SelectStratification(props) {
+    const { stratifications, currentStratificationSelection: currentStratificationSelectionProp, setCurrentStratificationSelection: setCurrentStratificationSelectionProp, } = props;
+    // Convert back and forth from the special value '__all__' to null.
+    const currentStratificationSelection = currentStratificationSelectionProp === null
+        ? '__all__'
+        : currentStratificationSelectionProp.stratificationId;
+    function setCurrentStratificationSelection(event, value) {
+        setCurrentStratificationSelectionProp(stratifications.find(s => s.stratificationId === value) ?? null);
+    }
+    const sampleSetOptions = stratifications?.filter(s => s.stratificationType === 'sampleSet');
+    const structuralRegionOptions = stratifications?.filter(s => s.stratificationType === 'structural-region');
+    const hasSampleSetOptions = sampleSetOptions && sampleSetOptions.length > 0;
+    const hasStructuralRegionOptions = structuralRegionOptions && structuralRegionOptions.length > 0;
+    return (_jsxs(Grid, { item: true, xs: 12, children: [_jsx(Typography, { variant: "h6", children: "Select a stratification option:" }), _jsx(FormControl, { children: _jsxs(RadioGroup, { "aria-labelledby": "demo-radio-buttons-group-label", value: currentStratificationSelection, onChange: setCurrentStratificationSelection, name: "radio-buttons-group", children: [_jsx(FormControlLabel, { value: "__all__", control: _jsx(Radio, {}), label: "No stratification" }), hasSampleSetOptions ? (_jsxs(_Fragment, { children: [_jsx(FormLabel, { children: "By participant group (clinical):" }), sampleSetOptions.map(s => (_jsx(FormControlLabel, { value: s.stratificationId, control: _jsx(Radio, {}), label: s.name }, s.name)))] })) : null, hasStructuralRegionOptions ? (_jsxs(_Fragment, { children: [_jsx(FormLabel, { children: "By segmentation-defined spatial region (structural):" }), structuralRegionOptions.map(s => (_jsx(FormControlLabel, { value: s.stratificationId, control: _jsx(Radio, {}), label: s.name }, s.name)))] })) : null] }) })] }));
+}

package/dist-tsc/styles.d.ts

@@ -0,0 +1,2 @@
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"header" | "fullWidthBox" | "selectButton" | "accordion" | "accordionDetails" | "cartUl" | "selectInput" | "searchInput">;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.js"],"names":[],"mappings":"AAEA,8NA8BI"}