@weng-lab/genomebrowser-ui 0.1.1

package/src/TrackSelect/TrackSelect.tsx

@@ -0,0 +1,258 @@
+import {
+  Box,
+  Stack,
+  TextField,
+  FormControlLabel,
+  Switch,
+  Button,
+} from "@mui/material";
+import { DataGridWrapper } from "./DataGrid/DataGridWrapper";
+import { searchTracks, flattenIntoRow } from "./DataGrid/dataGridHelpers";
+import { TreeViewWrapper } from "./TreeView/TreeViewWrapper";
+import {
+  buildSortedAssayTreeView,
+  buildTreeView,
+  searchTreeItems,
+} from "./TreeView/treeViewHelpers";
+import { SearchTracksProps, ExtendedTreeItemProps } from "./types";
+import { rows, rowById, getActiveTracks } from "./consts";
+import React, { useState, useMemo, useEffect } from "react";
+import { TreeViewBaseItem } from "@mui/x-tree-view";
+import { GridRowSelectionModel } from "@mui/x-data-grid";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+} from "@mui/material";
+import { SelectionStoreInstance } from "./store";
+
+export interface TrackSelectProps {
+  store: SelectionStoreInstance;
+}
+
+export default function TrackSelect({ store }: TrackSelectProps) {
+  const [limitDialogOpen, setLimitDialogOpen] = useState(false);
+  const [sortedAssay, setSortedAssay] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isSearchResult, setIsSearchResult] = useState(false);
+  const selectedIds = store((s) => s.selectedIds);
+  const setSelected = store((s) => s.setSelected);
+  const clear = store((s) => s.clear);
+  const MAX_ACTIVE = store((s) => s.maxTracks);
+
+  // Derive active tracks from selectedIds (filters out auto-generated group IDs)
+  const activeTracks = useMemo(
+    () => getActiveTracks(selectedIds),
+    [selectedIds],
+  );
+
+  const treeItems = useMemo(() => {
+    return sortedAssay
+      ? buildSortedAssayTreeView(
+          Array.from(selectedIds),
+          {
+            id: "1",
+            isAssayItem: false,
+            label: "Biosamples",
+            icon: "folder",
+            children: [],
+            allRowInfo: [],
+          },
+          rowById,
+        )
+      : buildTreeView(
+          Array.from(selectedIds),
+          {
+            id: "1",
+            isAssayItem: false,
+            label: "Biosamples",
+            icon: "folder",
+            children: [],
+            allRowInfo: [],
+          },
+          rowById,
+        );
+  }, [selectedIds, sortedAssay]);
+
+  const [filteredRows, setFilteredRows] = useState(rows);
+  const [filteredTreeItems, setFilteredTreeItems] = useState([
+    {
+      id: "1",
+      isAssayItem: false,
+      label: "Biosamples",
+      icon: "folder",
+      children: [],
+      allRowInfo: [],
+    },
+  ] as TreeViewBaseItem<ExtendedTreeItemProps>[]);
+
+  useEffect(() => {
+    if (searchQuery === "") {
+      setFilteredTreeItems(treeItems);
+      setFilteredRows(rows);
+      setIsSearchResult(false);
+    }
+  }, [treeItems, searchQuery]);
+
+  const handleToggle = () => {
+    setSortedAssay(!sortedAssay);
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+
+    const dataGridSearchProps: SearchTracksProps = {
+      jsonStructure: "tracks",
+      query: e.target.value,
+      keyWeightMap: [
+        "displayname",
+        "ontology",
+        "lifeStage",
+        "sampleType",
+        "type",
+        "experimentAccession",
+        "fileAccession",
+      ],
+    };
+
+    const treeSearchProps: SearchTracksProps = {
+      treeItems: treeItems,
+      query: e.target.value,
+      keyWeightMap: [
+        "displayname",
+        "ontology",
+        "lifeStage",
+        "sampleType",
+        "type",
+        "experimentAccession",
+        "fileAccession",
+      ],
+    };
+    const newDataGridRows = searchTracks(dataGridSearchProps)
+      .map((t) => t.item)
+      .map(flattenIntoRow);
+
+    // we only want the intersection of filtered tracks displayed on the DataGrid and user-selected tracks to be displayed on the tree
+    const newDataGridIds = newDataGridRows.map((r) => r.experimentAccession);
+    const retIds = searchTreeItems(treeSearchProps).map(
+      (r) => r.item.experimentAccession,
+    );
+    const newTreeIds = retIds.filter((i) => newDataGridIds.includes(i));
+
+    // build new tree from the newTreeIds...maybe it would be faster to prune the current tree instead of rebuilding it?
+    const newTreeItems = sortedAssay
+      ? buildSortedAssayTreeView(
+          newTreeIds,
+          {
+            id: "1",
+            isAssayItem: false,
+            label: "Biosamples",
+            icon: "folder",
+            children: [],
+            allRowInfo: [],
+          },
+          rowById,
+        )
+      : buildTreeView(
+          newTreeIds,
+          {
+            id: "1",
+            isAssayItem: false,
+            label: "Biosamples",
+            icon: "folder",
+            children: [],
+            allRowInfo: [],
+          },
+          rowById,
+        );
+
+    setFilteredRows(newDataGridRows);
+    setIsSearchResult(true);
+    setFilteredTreeItems(newTreeItems);
+  };
+
+  const handleSelection = (newSelection: GridRowSelectionModel) => {
+    const idsSet =
+      (newSelection && (newSelection as any).ids) ?? new Set<string>();
+    const newActiveTracks = getActiveTracks(idsSet);
+
+    // Block only if the new selection would exceed the limit
+    if (newActiveTracks.size > MAX_ACTIVE) {
+      setLimitDialogOpen(true);
+      return;
+    }
+
+    setSelected(idsSet);
+  };
+
+  return (
+    <Box sx={{ flex: 1 }}>
+      <Box display="flex" justifyContent="space-between" sx={{ mb: 3 }}>
+        <TextField
+          id="outlined-suffix-shrink"
+          label="Search tracks"
+          variant="outlined"
+          onChange={handleSearch}
+          sx={{ width: "400px" }}
+        />
+        <FormControlLabel
+          sx={{ display: "flex", justifyContent: "flex-end", mb: 1 }}
+          value="Sort by assay"
+          control={<Switch color="primary" onChange={handleToggle} />}
+          label="Sort by assay"
+          labelPlacement="end"
+        />
+      </Box>
+      <Stack direction="row" spacing={2} sx={{ width: "100%" }}>
+        <Box sx={{ flex: 3, minWidth: 0 }}>
+          <DataGridWrapper
+            rows={filteredRows}
+            label={
+              isSearchResult
+                ? `${filteredRows.length} Search Results`
+                : `${rows.length} Available Tracks`
+            }
+            selectedIds={selectedIds}
+            handleSelection={handleSelection}
+            sortedAssay={sortedAssay}
+          />
+        </Box>
+        <Box sx={{ flex: 2, minWidth: 0 }}>
+          <TreeViewWrapper
+            store={store}
+            items={filteredTreeItems}
+            selectedIds={selectedIds}
+            activeTracks={activeTracks}
+            isSearchResult={isSearchResult}
+          />
+        </Box>
+      </Stack>
+      <Box sx={{ justifyContent: "flex-end" }}>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={clear}
+          sx={{ mt: 2, justifyContent: "flex-end" }}
+        >
+          Clear Selection
+        </Button>
+      </Box>
+      <Dialog open={limitDialogOpen} onClose={() => setLimitDialogOpen(false)}>
+        <DialogTitle>Track Limit Reached</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            You can select up to {MAX_ACTIVE} tracks at a time. Please remove a
+            track before adding another.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setLimitDialogOpen(false)} autoFocus>
+            OK
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+}

package/src/TrackSelect/TreeView/TreeViewWrapper.tsx

@@ -0,0 +1,115 @@
+import { Box, Paper, Typography } from "@mui/material";
+import { RichTreeView, TreeViewBaseItem } from "@mui/x-tree-view";
+import { rowById } from "../consts";
+import {
+  CustomTreeItemProps,
+  ExtendedTreeItemProps,
+  TreeViewWrapperProps,
+} from "../types";
+import { CustomTreeItem } from "./treeViewHelpers";
+import { Avatar } from "@mui/material";
+
+export function TreeViewWrapper({
+  store,
+  items,
+  activeTracks,
+  isSearchResult,
+}: TreeViewWrapperProps) {
+  const removeIds = store((s) => s.removeIds);
+
+  const handleRemoveTreeItem = (
+    item: TreeViewBaseItem<ExtendedTreeItemProps>,
+  ) => {
+    const removedIds = item.allExpAccessions;
+    if (removedIds && removedIds.length) {
+      const idsToRemove = new Set(removedIds);
+
+      // Also remove any auto-generated group IDs that contain these tracks
+      removedIds.forEach((id) => {
+        const row = rowById.get(id);
+        if (row) {
+          // Add the auto-generated group IDs for this track's ontology and assay
+          idsToRemove.add(`auto-generated-row-ontology/${row.ontology}`);
+          idsToRemove.add(
+            `auto-generated-row-ontology/${row.ontology}-assay/${row.assay}`,
+          );
+          idsToRemove.add(`auto-generated-row-assay/${row.assay}`);
+          idsToRemove.add(
+            `auto-generated-row-assay/${row.assay}-ontology/${row.ontology}`,
+          );
+        }
+      });
+      removeIds(idsToRemove);
+    }
+  };
+
+  return (
+    <Paper
+      sx={{
+        height: 500,
+        width: "100%",
+        border: "10px solid",
+        borderColor: "grey.200",
+        boxSizing: "border-box",
+        borderRadius: 2,
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          py: 1,
+          backgroundColor: "grey.200",
+          flexShrink: 0,
+        }}
+      >
+        <Avatar
+          sx={{
+            width: 30,
+            height: 30,
+            fontSize: 14,
+            fontWeight: "bold",
+            bgcolor: "white",
+            color: "text.primary",
+          }}
+        >
+          {activeTracks.size}
+        </Avatar>
+        <Typography fontWeight="bold">
+          Active Tracks
+          {isSearchResult && (
+            <Typography component="span" color="text.secondary" sx={{ ml: 1 }}>
+              ({items[0].allRowInfo!.length} search results)
+            </Typography>
+          )}
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          flex: 1,
+          overflow: "auto",
+        }}
+      >
+        <RichTreeView
+          items={items}
+          defaultExpandedItems={["1"]}
+          slots={{ item: CustomTreeItem }}
+          slotProps={{
+            item: {
+              onRemove: handleRemoveTreeItem,
+            } as Partial<CustomTreeItemProps>,
+          }}
+          sx={{
+            ml: 1,
+            mr: 1,
+            height: "100%",
+          }}
+          itemChildrenIndentation={0}
+        />
+      </Box>
+    </Paper>
+  );
+}