@vitessce/biomarker-select 3.5.0

package/src/scmd-ui.js

@@ -0,0 +1,75 @@
+/* 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 (
+    <Grid container style={{ border: '0px solid red' }}>
+      {/* Header */}
+      <Grid item container xs={12} className={classes.header}>
+        <Grid item xs={8} />
+        <Grid item container xs={4} justifyContent="flex-end">
+          <ButtonGroup variant="outlined" size="small" color="secondary" aria-label="Toggle between confirmatory and exploratory modes">
+            <Tooltip arrow title="Start from biomarker(s) of interest">
+              <Button variant={isConfirmatoryMode ? 'contained' : 'outlined'} onClick={() => setMode('confirmatory')}>Confirmatory (Hypothesis-driven)</Button>
+            </Tooltip>
+            <Tooltip arrow title="Lacking biomarker(s) of interest">
+              <Button variant={!isConfirmatoryMode ? 'contained' : 'outlined'} onClick={() => setMode('exploratory')}>Exploratory (Hypothesis-generating)</Button>
+            </Tooltip>
+          </ButtonGroup>
+        </Grid>
+      </Grid>
+      {/* Stepper */}
+      {tempIsVisible ? (
+        <div style={{ border: '2px solid #eee', borderRadius: '5px' }}>
+          {mode === 'confirmatory' ? (
+            <ConfirmatoryStepper
+              autocompleteNode={autocompleteNode}
+
+              currentModalityAgnosticSelection={currentModalityAgnosticSelection}
+              setCurrentModalityAgnosticSelection={setCurrentModalityAgnosticSelection}
+              currentModalitySpecificSelection={currentModalitySpecificSelection}
+              setCurrentModalitySpecificSelection={setCurrentModalitySpecificSelection}
+              currentStratificationSelection={currentStratificationSelection}
+              setCurrentStratificationSelection={setCurrentStratificationSelection}
+
+              getEdges={getEdges}
+              stratifications={stratifications}
+              onFinish={onFinish}
+            />
+          ) : null}
+          {mode === 'exploratory' ? <span>TODO</span> : null}
+        </div>
+      ) : null}
+    </Grid>
+  );
+}

package/src/select-agnostic.js

@@ -0,0 +1,172 @@
+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 <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 (
+    <div ref={ref}>
+      <OuterElementContext.Provider value={other}>
+        <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}
+        >
+          {ListRow}
+        </VariableSizeList>
+      </OuterElementContext.Provider>
+    </div>
+  );
+});
+
+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 (
+    <>
+      <Grid item container xs={12}>
+        <Typography variant="h6">
+          Search by gene, protein, pathway (by term name), or cell type:
+        </Typography>
+      </Grid>
+      <Grid item container xs={12}>
+        <Grid item xs={4}>
+          <Autocomplete
+            options={potentialItems}
+            autoComplete
+            includeInputInList
+            onInputChange={handleChange}
+            onChange={(event, item) => setSelectedItem(item)}
+            classes={{ input: classes.searchInput }}
+            renderInput={params => (
+              <TextField label="Search" variant="outlined" onChange={handleChange} {...params} />
+            )}
+            ListboxComponent={ListboxComponent}
+            getOptionLabel={option => option.label}
+            renderOption={option => (
+              <Typography noWrap>{option.label} ({option.nodeType})</Typography>
+            )}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={8}
+          style={{
+            border: selectedItem ? '1px solid gray' : '1px solid transparent',
+            borderRadius: '4px',
+          }}
+        >
+          {selectedItem ? (
+            <>
+              <Grid container item xs={12}>
+                <Grid item xs={9}>
+                  <Typography variant="h4" title={selectedItem.term}>
+                    {selectedItem.label}
+                  </Typography>
+                </Grid>
+                <Grid item xs={3} style={{ position: 'relative' }}>
+                  <Button
+                    className={classes.selectButton}
+                    variant="contained"
+                    startIcon={<AddIcon />}
+                    onClick={confirmSelectedItem}
+                  >
+                    Select
+                  </Button>
+                </Grid>
+              </Grid>
+              <Grid container item xs={12}>
+                <InfoIcon />
+                <Typography variant="h6">About this {selectedItem.nodeType}</Typography>
+              </Grid>
+              <Grid container item xs={12} key={selectedItem.term}>
+                <iframe
+                  title={`Embedded metadata page for ontology term ${selectedItem.term}`}
+                  src={`https://identifiers.org/${selectedItem.term}`}
+                  width="100%"
+                  height="500"
+                  style={{ border: 0 }}
+                />
+              </Grid>
+            </>
+          ) : null}
+        </Grid>
+      </Grid>
+    </>
+  );
+}

package/src/select-specific.js

@@ -0,0 +1,111 @@
+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 (
+    <>
+      <Grid item xs={6}>
+        <Typography variant="h6">Select a feature type:</Typography>
+      </Grid>
+      <Grid item container xs={6}>
+        <Grid item>
+          <FormControl fullWidth>
+            <Select
+              native
+              defaultValue="gene"
+              classes={{ select: classes.selectInput }}
+              inputProps={{
+                name: 'age',
+                id: 'uncontrolled-native',
+              }}
+            >
+              <option value="gene">Gene (RNA-seq)</option>
+            </Select>
+            <FormHelperText>Feature type (experimental modality)</FormHelperText>
+          </FormControl>
+        </Grid>
+      </Grid>
+      <Grid item container xs={12} style={{ height: '450px' }}>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          pageSize={10}
+          checkboxSelection
+          onSelectionModelChange={handleSelection}
+          rowSelectionModel={rowSelectionModel}
+        />
+      </Grid>
+    </>
+  );
+}

package/src/select-stratification.js

@@ -0,0 +1,90 @@
+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 (
+    <Grid item xs={12}>
+      <Typography variant="h6">
+        Select a stratification option:
+      </Typography>
+      <FormControl>
+        <RadioGroup
+          aria-labelledby="demo-radio-buttons-group-label"
+          value={currentStratificationSelection}
+          onChange={setCurrentStratificationSelection}
+          name="radio-buttons-group"
+        >
+          <FormControlLabel value="__all__" control={<Radio />} label="No stratification" />
+          {hasSampleSetOptions ? (
+            <>
+              <FormLabel>By participant group (clinical):</FormLabel>
+              {sampleSetOptions.map(s => (
+                <FormControlLabel
+                  value={s.stratificationId}
+                  control={<Radio />}
+                  key={s.name}
+                  label={s.name}
+                />
+              ))}
+            </>
+          ) : null}
+          {hasStructuralRegionOptions ? (
+            <>
+              <FormLabel>By segmentation-defined spatial region (structural):</FormLabel>
+              {structuralRegionOptions.map(s => (
+                <FormControlLabel
+                  value={s.stratificationId}
+                  control={<Radio />}
+                  key={s.name}
+                  label={s.name}
+                />
+              ))}
+            </>
+          ) : null}
+        </RadioGroup>
+      </FormControl>
+      {/* // TODO: store participant-level and region-level stratification options independently
+      <Typography variant="h6">
+        Define case-control stratification (region-level):
+      </Typography>
+      <FormControl>
+      <RadioGroup
+          aria-labelledby="demo-radio-buttons-group-label-2"
+          value={currentStratificationSelection}
+          onChange={setCurrentStratificationSelection}
+          name="radio-buttons-group-2"
+        >
+          <FormLabel>By segmentation-defined spatial region (structural):</FormLabel>
+          {stratifications ? stratifications
+            .filter(s => s.stratificationType === 'structural-region').map((s) => (
+              <FormControlLabel value={s.stratificationId} control={<Radio />} label={s.name} />
+            )) : null}
+        </RadioGroup>
+      </FormControl>
+      */}
+    </Grid>
+  );
+}

package/src/styles.js

@@ -0,0 +1,33 @@
+import { makeStyles } from '@material-ui/core';
+
+export const useStyles = makeStyles(() => ({
+  header: {
+    marginTop: '10px',
+    marginBottom: '10px',
+  },
+  fullWidthBox: {
+    width: '100%',
+  },
+  selectButton: {
+    position: 'absolute',
+    right: 0,
+  },
+  accordion: {
+    width: '100%',
+    margin: '0 !important',
+  },
+  accordionDetails: {
+    paddingTop: 0,
+  },
+  cartUl: {
+    marginTop: 0,
+    marginBottom: 0,
+  },
+  selectInput: {
+    height: 'auto !important',
+  },
+  searchInput: {
+    lineHeight: 'initial',
+    height: 'auto !important',
+  },
+}));