@weng-lab/genomebrowser-ui 0.1.9 → 0.1.10

package/src/TrackSelect/DataGrid/DataGridWrapper.tsx

@@ -10,6 +10,7 @@ import {
 import { useEffect, useState } from "react";
 import { DataGridProps } from "../types";
 import { defaultColumns, sortedByAssayColumns } from "./columns";
+import GroupingCell from "./GroupingCell";
 
 const autosizeOptions: GridAutosizeOptions = {
   expand: true,
@@ -17,7 +18,6 @@ const autosizeOptions: GridAutosizeOptions = {
   outliersFactor: 1.5,
 };
 
-// TODO: figure out where mui stores the number of rows in a row grouping so that can be bolded too
 export function DataGridWrapper(props: DataGridProps) {
   const { sortedAssay, handleSelection, rows, selectedIds } = props;
 
@@ -36,10 +36,10 @@ export function DataGridWrapper(props: DataGridProps) {
   const columnModel = sortedAssay ? sortedByAssayColumns : defaultColumns;
   const leafField = sortedAssay ? "displayname" : "assay";
 
-  // Hide columns that are used in grouping or as leaf field
+  // Hide columns that are used in grouping or as leaf field, plus ID column
   const baseVisibility: GridColumnVisibilityModel = sortedAssay
-    ? { assay: false, ontology: false, displayname: false } // sort by assay: assay & ontology are grouping, displayname is leaf
-    : { ontology: false, displayname: false, assay: false }; // default: ontology & displayname are grouping, assay is leaf
+    ? { assay: false, ontology: false, displayname: false, id: false } // sort by assay: assay & ontology are grouping, displayname is leaf
+    : { ontology: false, displayname: false, assay: false, id: false }; // default: ontology & displayname are grouping, assay is leaf
 
   const [columnVisibilityModel, setColumnVisibilityModel] =
     useState<GridColumnVisibilityModel>(baseVisibility);
@@ -75,10 +75,17 @@ export function DataGridWrapper(props: DataGridProps) {
           apiRef={apiRef}
           rows={rows}
           columns={columnModel}
-          getRowId={(row) => row.experimentAccession}
+          getRowId={(row) => row.id}
           autosizeOptions={autosizeOptions}
           rowGroupingModel={groupingModel}
-          groupingColDef={{ leafField, display: "flex" }}
+          groupingColDef={{
+            leafField,
+            display: "flex",
+            minWidth: 300,
+            maxWidth: 500,
+            flex: 2,
+            renderCell: (params) => <GroupingCell {...params} />,
+          }}
           columnVisibilityModel={columnVisibilityModel}
           onColumnVisibilityModelChange={setColumnVisibilityModel}
           onRowSelectionModelChange={handleSelection}

package/src/TrackSelect/DataGrid/GroupingCell.tsx

@@ -0,0 +1,144 @@
+import { Stack, Tooltip, Box, IconButton } from "@mui/material";
+import {
+  GridRenderCellParams,
+  useGridApiContext,
+  GridGroupNode,
+} from "@mui/x-data-grid-premium";
+import { assayTypes } from "../consts";
+import { AssayIcon } from "../TreeView/treeViewHelpers";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+// Custom grouping cell that preserves expand/collapse while adding truncation + tooltip
+export default function GroupingCell(params: GridRenderCellParams) {
+  const apiRef = useGridApiContext();
+  const isGroup = params.rowNode.type === "group";
+  const groupNode = params.rowNode as GridGroupNode;
+  const isExpanded = isGroup ? groupNode.childrenExpanded : false;
+  const groupingField = isGroup ? groupNode.groupingField : null;
+  const depth = params.rowNode.depth ?? 0;
+
+  const handleExpandClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    apiRef.current.setRowChildrenExpansion(params.id, !isExpanded);
+  };
+
+  // Render content based on grouping field
+  const renderContent = () => {
+    const value = String(params.value ?? "");
+
+    // For assay groups, show the colored icon
+    if (isGroup && groupingField === "assay") {
+      return (
+        <Stack
+          direction="row"
+          spacing={1}
+          alignItems="center"
+          sx={{ flex: 1, overflow: "hidden" }}
+        >
+          {AssayIcon(value)}
+          <Tooltip title={value} placement="top-start" enterDelay={500}>
+            <Box
+              sx={{
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                fontWeight: "bold",
+              }}
+            >
+              {params.formattedValue}
+            </Box>
+          </Tooltip>
+        </Stack>
+      );
+    }
+
+    // For other groups (ontology, displayname), show bold text
+    if (isGroup) {
+      return (
+        <Tooltip title={value} placement="top-start" enterDelay={500}>
+          <Box
+            sx={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              flex: 1,
+              fontWeight: "bold",
+            }}
+          >
+            {params.formattedValue}
+          </Box>
+        </Tooltip>
+      );
+    }
+
+    // For leaf rows - check if it's an assay value
+    const isAssayValue = assayTypes
+      .map((a) => a.toLowerCase())
+      .includes(value.toLowerCase());
+
+    if (isAssayValue) {
+      return (
+        <Stack
+          direction="row"
+          spacing={1}
+          alignItems="center"
+          sx={{ flex: 1, overflow: "hidden" }}
+        >
+          {AssayIcon(value)}
+          <Tooltip title={value} placement="top-start" enterDelay={500}>
+            <Box
+              sx={{
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {params.formattedValue}
+            </Box>
+          </Tooltip>
+        </Stack>
+      );
+    }
+
+    return (
+      <Tooltip title={value} placement="top-start" enterDelay={500}>
+        <Box
+          sx={{
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            flex: 1,
+          }}
+        >
+          {params.formattedValue}
+        </Box>
+      </Tooltip>
+    );
+  };
+
+  // Indent based on depth (2 units per level)
+  const indentLevel = depth * 2;
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        ml: indentLevel,
+      }}
+    >
+      {isGroup && (
+        <IconButton size="small" onClick={handleExpandClick} sx={{ mr: 0.5 }}>
+          {isExpanded ? (
+            <ExpandMoreIcon fontSize="small" />
+          ) : (
+            <ChevronRightIcon fontSize="small" />
+          )}
+        </IconButton>
+      )}
+      {renderContent()}
+    </Box>
+  );
+}

package/src/TrackSelect/DataGrid/columns.tsx

@@ -123,6 +123,11 @@ const fileCol: GridColDef<RowInfo> = {
   headerName: "File Accession",
 };
 
+const idCol: GridColDef<RowInfo> = {
+  field: "id",
+  headerName: "ID",
+};
+
 export const sortedByAssayColumns: GridColDef<RowInfo>[] = [
   displayNameCol,
   sortedByAssayOntologyCol,
@@ -131,6 +136,7 @@ export const sortedByAssayColumns: GridColDef<RowInfo>[] = [
   sortedByAssayAssayCol,
   experimentCol,
   fileCol,
+  idCol,
 ];
 
 export const defaultColumns: GridColDef<RowInfo>[] = [
@@ -141,4 +147,5 @@ export const defaultColumns: GridColDef<RowInfo>[] = [
   displayNameCol,
   experimentCol,
   fileCol,
+  idCol,
 ];

package/src/TrackSelect/DataGrid/dataGridHelpers.tsx

@@ -1,7 +1,18 @@
 import { capitalize } from "@mui/material";
 import Fuse, { FuseResult } from "fuse.js";
-import tracksData from "../Data/modifiedHumanTracks.json";
+import humanTracksData from "../Data/humanBiosamples.json";
+import mouseTracksData from "../Data/mouseBiosamples.json";
 import { AssayInfo, RowInfo, SearchTracksProps, TrackInfo } from "../types";
+import { Assembly } from "../consts";
+
+const tracksDataByAssembly: Record<Assembly, typeof humanTracksData> = {
+  GRCh38: humanTracksData,
+  mm10: mouseTracksData,
+};
+
+export function getTracksData(assembly: Assembly) {
+  return tracksDataByAssembly[assembly];
+}
 
 function formatAssayType(assay: string): string {
   switch (assay) {
@@ -17,11 +28,39 @@ function formatAssayType(assay: string): string {
       return "CTCF";
     case "chromhmm":
       return "ChromHMM";
+    case "ccre":
+      return "cCRE";
+    case "rnaseq":
+      return "RNA-seq";
     default:
       return assay;
   }
 }
 
+/** Convert display assay name to JSON format */
+function toJsonAssayType(displayName: string): string {
+  switch (displayName.toLowerCase()) {
+    case "dnase":
+      return "dnase";
+    case "atac":
+      return "atac";
+    case "h3k4me3":
+      return "h3k4me3";
+    case "h3k27ac":
+      return "h3k27ac";
+    case "ctcf":
+      return "ctcf";
+    case "chromhmm":
+      return "chromhmm";
+    case "ccre":
+      return "ccre";
+    case "rna-seq":
+      return "rnaseq";
+    default:
+      return displayName.toLowerCase();
+  }
+}
+
 // use to get nested data in JSON file
 function getNestedValue(obj: any, path: string): any {
   return path.split(".").reduce((acc, key) => acc && acc[key], obj);
@@ -30,14 +69,15 @@ function getNestedValue(obj: any, path: string): any {
 export function getTracksByAssayAndOntology(
   assay: string,
   ontology: string,
+  tracksData: ReturnType<typeof getTracksData>,
 ): TrackInfo[] {
   let res: TrackInfo[] = [];
   const data = getNestedValue(tracksData, "tracks");
+  const jsonAssay = toJsonAssayType(assay);
 
   data.forEach((track: TrackInfo) => {
     const filteredAssays =
-      track.assays?.filter((e: AssayInfo) => e.assay === assay.toLowerCase()) ||
-      [];
+      track.assays?.filter((e: AssayInfo) => e.assay === jsonAssay) || [];
     if (
       filteredAssays.length > 0 &&
       track.ontology === ontology.toLowerCase()
@@ -51,24 +91,26 @@ export function getTracksByAssayAndOntology(
   return res;
 }
 
-/** Flatten TrackInfo or FuseResult into RowInfo for DataGrid display.
- * @param track TrackInfo object or FuseResult containing information from JSON file
- * @returns Flattened RowInfo object
+/** Flatten TrackInfo into RowInfo objects for DataGrid display.
+ * @param track TrackInfo object containing information from JSON file
+ * @returns Array of flattened RowInfo objects, one per assay
  */
-export function flattenIntoRow(track: TrackInfo): RowInfo {
+export function flattenIntoRows(track: TrackInfo): RowInfo[] {
   const { ontology, lifeStage, sampleType, displayname } = track;
-  const { assay, experimentAccession, fileAccession, url } = track.assays[0];
 
-  return {
-    ontology: capitalize(ontology),
-    lifeStage: capitalize(lifeStage),
-    sampleType: capitalize(sampleType),
-    displayname: capitalize(displayname),
-    assay: formatAssayType(assay),
-    experimentAccession,
-    fileAccession,
-    url,
-  };
+  return track.assays.map(
+    ({ id, assay, experimentAccession, fileAccession, url }) => ({
+      id,
+      ontology: capitalize(ontology),
+      lifeStage: capitalize(lifeStage),
+      sampleType: capitalize(sampleType),
+      displayname: capitalize(displayname),
+      assay: formatAssayType(assay),
+      experimentAccession,
+      fileAccession,
+      url,
+    }),
+  );
 }
 
 /**
@@ -97,7 +139,10 @@ export function searchTracks({
   query,
   keyWeightMap,
   threshold = 0.75,
-}: SearchTracksProps): FuseResult<TrackInfo>[] {
+  tracksData,
+}: SearchTracksProps & {
+  tracksData: ReturnType<typeof getTracksData>;
+}): FuseResult<TrackInfo>[] {
   const data = getNestedValue(tracksData, jsonStructure ?? "");
 
   const fuse = new Fuse(data, {

package/src/TrackSelect/TrackSelect.tsx

@@ -15,39 +15,70 @@ import { GridRowSelectionModel } from "@mui/x-data-grid";
 import { TreeViewBaseItem } from "@mui/x-tree-view";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { DataGridWrapper } from "./DataGrid/DataGridWrapper";
-import { flattenIntoRow, searchTracks } from "./DataGrid/dataGridHelpers";
+import {
+  flattenIntoRows,
+  searchTracks,
+  getTracksData,
+} from "./DataGrid/dataGridHelpers";
 import { TreeViewWrapper } from "./TreeView/TreeViewWrapper";
 import {
   buildSortedAssayTreeView,
   buildTreeView,
   searchTreeItems,
 } from "./TreeView/treeViewHelpers";
-import { rowById, rows } from "./consts";
 import { SelectionStoreInstance } from "./store";
 import { ExtendedTreeItemProps, SearchTracksProps } from "./types";
 
 export interface TrackSelectProps {
   store: SelectionStoreInstance;
+  onSubmit?: (trackIds: Set<string>) => void;
+  onCancel?: () => void;
+  onReset?: () => void;
 }
 
-export default function TrackSelect({ store }: TrackSelectProps) {
+export default function TrackSelect({
+  store,
+  onSubmit,
+  onCancel,
+  onReset,
+}: 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 getTrackIds = store((s) => s.getTrackIds);
   const setSelected = store((s) => s.setSelected);
   const clear = store((s) => s.clear);
   const MAX_ACTIVE = store((s) => s.maxTracks);
+  const rows = store((s) => s.rows);
+  const rowById = store((s) => s.rowById);
+  const assembly = store((s) => s.assembly);
+
+  // Local working state - changes here don't affect the store until Submit
+  const [workingIds, setWorkingIds] = useState<Set<string>>(
+    () => new Set(selectedIds),
+  );
+
+  // Get tracks data for search functionality
+  const tracksData = useMemo(
+    () => getTracksData(assembly as "GRCh38" | "mm10"),
+    [assembly],
+  );
 
-  // Get only real track IDs (no auto-generated group IDs)
-  const trackIds = useMemo(() => getTrackIds(), [selectedIds, getTrackIds]);
+  // Get only real track IDs from working selection (no auto-generated group IDs)
+  const workingTrackIds = useMemo(() => {
+    return new Set([...workingIds].filter((id) => rowById.has(id)));
+  }, [workingIds, rowById]);
+
+  // Sync workingIds when store's selectedIds changes externally
+  useEffect(() => {
+    setWorkingIds(new Set(selectedIds));
+  }, [selectedIds]);
 
   const treeItems = useMemo(() => {
     return sortedAssay
       ? buildSortedAssayTreeView(
-          Array.from(trackIds),
+          Array.from(workingTrackIds),
           {
             id: "1",
             isAssayItem: false,
@@ -59,7 +90,7 @@ export default function TrackSelect({ store }: TrackSelectProps) {
           rowById,
         )
       : buildTreeView(
-          Array.from(trackIds),
+          Array.from(workingTrackIds),
           {
             id: "1",
             isAssayItem: false,
@@ -70,7 +101,7 @@ export default function TrackSelect({ store }: TrackSelectProps) {
           },
           rowById,
         );
-  }, [trackIds, sortedAssay]);
+  }, [workingTrackIds, sortedAssay, rowById]);
 
   const [filteredRows, setFilteredRows] = useState(rows);
   const [filteredTreeItems, setFilteredTreeItems] = useState([
@@ -94,7 +125,7 @@ export default function TrackSelect({ store }: TrackSelectProps) {
       searchResultIdsRef.current = new Set();
     } else if (searchResultIdsRef.current.size > 0) {
       // When selection changes during search, rebuild tree from selected items that match search
-      const matchingTrackIds = Array.from(trackIds).filter((id) =>
+      const matchingTrackIds = Array.from(workingTrackIds).filter((id) =>
         searchResultIdsRef.current.has(id),
       );
 
@@ -126,7 +157,7 @@ export default function TrackSelect({ store }: TrackSelectProps) {
 
       setFilteredTreeItems(newTreeItems);
     }
-  }, [treeItems, searchQuery, trackIds, sortedAssay]);
+  }, [treeItems, searchQuery, workingTrackIds, sortedAssay, rowById, rows]);
 
   const handleToggle = () => {
     setSortedAssay(!sortedAssay);
@@ -147,7 +178,7 @@ export default function TrackSelect({ store }: TrackSelectProps) {
         return; // useEffect handles empty query
       }
 
-      const dataGridSearchProps: SearchTracksProps = {
+      const dataGridSearchProps = {
         jsonStructure: "tracks",
         query: query,
         keyWeightMap: [
@@ -159,6 +190,7 @@ export default function TrackSelect({ store }: TrackSelectProps) {
           "experimentAccession",
           "fileAccession",
         ],
+        tracksData,
       };
 
       const treeSearchProps: SearchTracksProps = {
@@ -176,13 +208,11 @@ export default function TrackSelect({ store }: TrackSelectProps) {
       };
       const newDataGridRows = searchTracks(dataGridSearchProps)
         .map((t) => t.item)
-        .map(flattenIntoRow);
+        .flatMap(flattenIntoRows);
 
       // 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 newDataGridIds = newDataGridRows.map((r) => r.id);
+      const retIds = searchTreeItems(treeSearchProps).map((r) => r.item.id);
       const newTreeIds = retIds.filter((i) => newDataGridIds.includes(i));
 
       // build new tree from the newTreeIds
@@ -239,8 +269,21 @@ export default function TrackSelect({ store }: TrackSelectProps) {
       return;
     }
 
-    // Store ALL IDs (including auto-generated group IDs)
-    setSelected(allIds);
+    // Update working state (not the store yet)
+    setWorkingIds(allIds);
+  };
+
+  const handleSubmit = () => {
+    // Commit working selection to store
+    setSelected(workingIds);
+    // Call callback with real track IDs
+    onSubmit?.(workingTrackIds);
+  };
+
+  const handleCancel = () => {
+    // Revert working state to store's committed state
+    setWorkingIds(new Set(selectedIds));
+    onCancel?.();
   };
 
   return (
@@ -270,7 +313,7 @@ export default function TrackSelect({ store }: TrackSelectProps) {
                 ? `${filteredRows.length} Search Results`
                 : `${rows.length} Available Tracks`
             }
-            selectedIds={selectedIds}
+            selectedIds={workingIds}
             handleSelection={handleSelection}
             sortedAssay={sortedAssay}
           />
@@ -279,20 +322,36 @@ export default function TrackSelect({ store }: TrackSelectProps) {
           <TreeViewWrapper
             store={store}
             items={filteredTreeItems}
-            trackIds={trackIds}
+            trackIds={workingTrackIds}
             isSearchResult={isSearchResult}
           />
         </Box>
       </Stack>
-      <Box sx={{ justifyContent: "flex-end" }}>
+      <Box
+        sx={{ display: "flex", justifyContent: "space-between", mt: 2, gap: 2 }}
+      >
         <Button
-          variant="contained"
-          color="primary"
-          onClick={clear}
-          sx={{ mt: 2, justifyContent: "flex-end" }}
+          variant="outlined"
+          color="secondary"
+          onClick={() => {
+            if (onReset) {
+              onReset();
+            } else {
+              clear();
+              setWorkingIds(new Set());
+            }
+          }}
         >
-          Clear Selection
+          Reset
         </Button>
+        <Box sx={{ display: "flex", gap: 2 }}>
+          <Button variant="outlined" onClick={handleCancel}>
+            Cancel
+          </Button>
+          <Button variant="contained" color="primary" onClick={handleSubmit}>
+            Submit
+          </Button>
+        </Box>
       </Box>
       <Dialog open={limitDialogOpen} onClose={() => setLimitDialogOpen(false)}>
         <DialogTitle>Track Limit Reached</DialogTitle>

package/src/TrackSelect/TreeView/TreeViewWrapper.tsx

@@ -1,6 +1,5 @@
 import { Box, Paper, Typography } from "@mui/material";
 import { RichTreeView, TreeViewBaseItem } from "@mui/x-tree-view";
-import { rowById } from "../consts";
 import {
   CustomTreeItemProps,
   ExtendedTreeItemProps,
@@ -16,6 +15,7 @@ export function TreeViewWrapper({
   isSearchResult,
 }: TreeViewWrapperProps) {
   const removeIds = store((s) => s.removeIds);
+  const rowById = store((s) => s.rowById);
 
   const handleRemoveTreeItem = (
     item: TreeViewBaseItem<ExtendedTreeItemProps>,