@weng-lab/genomebrowser-ui 0.1.9 → 0.1.10

package/src/TrackSelect/TreeView/treeViewHelpers.tsx

@@ -24,6 +24,44 @@ import Fuse, { FuseResult } from "fuse.js";
 import { SearchTracksProps } from "../types";
 import { assayTypes, ontologyTypes } from "../consts";
 
+/** Format an ID like "h3k27ac-ENCFF922YMQ" to "H3K27ac - ENCFF922YMQ" */
+function formatIdLabel(id: string): string {
+  const hyphenIndex = id.indexOf("-");
+  if (hyphenIndex === -1) return id;
+
+  const assayPart = id.substring(0, hyphenIndex);
+  let accessionPart = id.substring(hyphenIndex + 1);
+
+  // Truncate accession parts to 15 characters
+  if (accessionPart.length > 25)
+    accessionPart = accessionPart.substring(0, 15) + "…";
+
+  const formattedAssay = formatAssayName(assayPart);
+  return `${formattedAssay} - ${accessionPart}`;
+}
+
+function formatAssayName(assay: string): string {
+  switch (assay.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 "rnaseq":
+      return "RNA-seq";
+    default:
+      return assay;
+  }
+}
 
 /**
  * Builds tree in the sorted by assay view
@@ -93,23 +131,23 @@ export function buildSortedAssayTreeView(
     };
     ontologyNode.children!.push(displayNameNode);
 
-    let expNode = sampleAssayMap.get(row.displayname + row.experimentAccession);
+    let expNode = sampleAssayMap.get(row.displayname + row.id);
     if (!expNode) {
       expNode = {
-        id: row.experimentAccession,
+        id: row.id,
         isAssayItem: false,
-        label: row.experimentAccession,
+        label: formatIdLabel(row.id),
         icon: "removeable",
         assayName: row.assay,
         children: [],
-        allExpAccessions: [row.experimentAccession],
+        allExpAccessions: [row.id],
       };
       sampleAssayMap.set(row.displayname + row.assay, expNode);
       displayNameNode.children!.push(expNode);
     }
-    assayNode.allExpAccessions!.push(row.experimentAccession);
-    ontologyNode.allExpAccessions!.push(row.experimentAccession);
-    displayNameNode.allExpAccessions!.push(row.experimentAccession);
+    assayNode.allExpAccessions!.push(row.id);
+    ontologyNode.allExpAccessions!.push(row.id);
+    displayNameNode.allExpAccessions!.push(row.id);
     root.allRowInfo!.push(row);
   });
   // standardize the order of the assay folders everytime one is added
@@ -183,18 +221,18 @@ export function buildTreeView(
     let expNode = sampleAssayMap.get(row.displayname + row.assay);
     if (!expNode) {
       expNode = {
-        id: row.experimentAccession,
-        label: row.experimentAccession,
+        id: row.id,
+        label: formatIdLabel(row.id),
         icon: "removeable",
         assayName: row.assay,
         children: [],
-        allExpAccessions: [row.experimentAccession],
+        allExpAccessions: [row.id],
       };
       sampleAssayMap.set(row.displayname + row.assay, expNode);
       displayNameNode.children!.push(expNode);
     }
-    ontologyNode.allExpAccessions!.push(row.experimentAccession);
-    displayNameNode.allExpAccessions!.push(row.experimentAccession);
+    ontologyNode.allExpAccessions!.push(row.id);
+    displayNameNode.allExpAccessions!.push(row.id);
     root.allRowInfo!.push(row);
   });
   // standardize the order of the assay folders everytime one is added
@@ -230,7 +268,7 @@ export function searchTreeItems({
   query,
   keyWeightMap,
   threshold,
-  limit = 10
+  limit = 10,
 }: SearchTracksProps): FuseResult<RowInfo>[] {
   const data = treeItems![0].allRowInfo ?? [];
   const fuse = new Fuse(data, {
@@ -255,6 +293,8 @@ export function AssayIcon(type: string) {
     ChromHMM: "#0097a7",
     H3K27ac: "#fdc401",
     CTCF: "#01a6f1",
+    cCRE: "#8b5cf6",
+    "RNA-seq": "#f97316",
   };
   const color = colorMap[type];
   return (
@@ -286,7 +326,13 @@ const TreeItemLabelText = styled(Typography)({
   fontFamily: "inherit",
 });
 
-function CustomLabel({ icon: Icon, children, isAssayItem, assayName, ...other }: CustomLabelProps) {
+function CustomLabel({
+  icon: Icon,
+  children,
+  isAssayItem,
+  assayName,
+  ...other
+}: CustomLabelProps) {
   const variant = isAssayItem ? "subtitle2" : "body2";
   const fontWeight = isAssayItem ? "bold" : 500;
   return (
@@ -312,7 +358,9 @@ function CustomLabel({ icon: Icon, children, isAssayItem, assayName, ...other }:
       <Stack direction="row" spacing={1} alignItems="center">
         {isAssayItem && AssayIcon(other.id)}
         {assayName && AssayIcon(assayName)}
-        <TreeItemLabelText fontWeight={fontWeight} variant={variant}>{children}</TreeItemLabelText>
+        <TreeItemLabelText fontWeight={fontWeight} variant={variant}>
+          {children}
+        </TreeItemLabelText>
       </Stack>
     </TreeItemLabel>
   );
@@ -416,7 +464,7 @@ export const CustomTreeItem = React.forwardRef(function CustomTreeItem(
               expandable: (status.expandable && status.expanded).toString(),
               isAssayItem: item.isAssayItem,
               assayName: item.assayName,
-              id: item.id
+              id: item.id,
             })}
           />
         </TreeItemContent>
@@ -424,4 +472,4 @@ export const CustomTreeItem = React.forwardRef(function CustomTreeItem(
       </TreeItemRoot>
     </TreeItemProvider>
   );
-});
+});

package/src/TrackSelect/consts.ts

@@ -1,15 +1,20 @@
 import {
   getTracksByAssayAndOntology,
-  flattenIntoRow,
+  flattenIntoRows,
+  getTracksData,
 } from "./DataGrid/dataGridHelpers";
 import { RowInfo, TrackInfo } from "./types";
 
+export type Assembly = "GRCh38" | "mm10";
+
 export const assayTypes = [
+  "cCRE",
   "DNase",
   "H3K4me3",
   "H3K27ac",
   "ATAC",
   "CTCF",
+  "RNA-seq",
   "ChromHMM",
 ];
 
@@ -59,34 +64,29 @@ export const ontologyTypes = [
   "Vagina",
 ];
 
-export const rows = ontologyTypes.flatMap((ontology) =>
-  assayTypes.flatMap((assay) =>
-    getTracksByAssayAndOntology(
-      assay.toLowerCase(),
-      ontology.toLowerCase(),
-    ).map((r: TrackInfo) => {
-      const flat = flattenIntoRow(r);
-      return {
-        ...flat,
-        assay,
-        ontology,
-      };
-    }),
-  ),
-);
-
-// map of experimentAccession -> rowInfo for faster row lookup
-export const rowById = new Map<string, RowInfo>(
-  rows.map((r) => [r.experimentAccession, r]),
-);
-
-/**
- * Check if an ID is a real track (exists in rowById) vs an auto-generated group ID
- */
-export const isTrackId = (id: string): boolean => rowById.has(id);
-
 /**
- * Filter a set of IDs to return only real track IDs (no auto-generated group IDs)
+ * Build rows and rowById for a specific assembly
  */
-export const getActiveTracks = (selectedIds: Set<string>): Set<string> =>
-  new Set(Array.from(selectedIds).filter(isTrackId));
+export function buildRowsForAssembly(assembly: Assembly): {
+  rows: RowInfo[];
+  rowById: Map<string, RowInfo>;
+} {
+  const tracksData = getTracksData(assembly);
+  const rows = ontologyTypes.flatMap((ontology) =>
+    assayTypes.flatMap((assay) =>
+      getTracksByAssayAndOntology(
+        assay.toLowerCase(),
+        ontology.toLowerCase(),
+        tracksData,
+      ).flatMap((r: TrackInfo) =>
+        flattenIntoRows(r).map((flat) => ({
+          ...flat,
+          assay,
+          ontology,
+        })),
+      ),
+    ),
+  );
+  const rowById = new Map<string, RowInfo>(rows.map((r) => [r.id, r]));
+  return { rows, rowById };
+}

package/src/TrackSelect/issues.md

@@ -0,0 +1,404 @@
+# TrackSelect Code Review Issues
+
+## Critical Issues
+
+### ~~1. Bug: Hardcoded `rowById` Import Breaks Multi-Assembly Support~~ ✅ FIXED
+
+**File:** `TreeViewWrapper.tsx:3,28-42`
+
+~~**Problem:** The `rowById` from `consts.ts` is always built with `"GRCh38"` (human assembly). When the store is created with `mm10` assembly, the TreeViewWrapper will fail to find rows because it's looking in the wrong map.~~
+
+**Resolution:** Removed hardcoded import, now gets `rowById` from the store.
+
+---
+
+### 2. Bug: Memory Leak from Missing Timeout Cleanup
+
+**File:** `TrackSelect.tsx:117,170-173`
+
+**Problem:** No cleanup on unmount. If component unmounts while timeout is pending, it will try to update state on an unmounted component.
+
+**Fix - Add useEffect after line 118:**
+```typescript
+useEffect(() => {
+  return () => {
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+  };
+}, []);
+```
+
+---
+
+### 3. Bug: Unsafe Type Assertion with `as any`
+
+**File:** `TrackSelect.tsx:254-256`
+
+```typescript
+const allIds: Set<string> =
+  (newSelection && (newSelection as any).ids) ?? new Set<string>();
+```
+
+**Problem:** Using `as any` bypasses TypeScript safety.
+
+**Fix:**
+```typescript
+let allIds: Set<string>;
+if (
+  newSelection &&
+  typeof newSelection === 'object' &&
+  'ids' in newSelection &&
+  newSelection.ids instanceof Set
+) {
+  allIds = newSelection.ids as Set<string>;
+} else {
+  allIds = new Set<string>();
+}
+```
+
+---
+
+### 4. Bug: Inconsistent Map Keys in `buildSortedAssayTreeView`
+
+**File:** `TreeView/treeViewHelpers.tsx:134,145`
+
+```typescript
+// Line 134 (get):
+let expNode = sampleAssayMap.get(row.displayname + row.id);
+// Line 145 (set):
+sampleAssayMap.set(row.displayname + row.assay, expNode);
+```
+
+**Problem:** Different keys used for get vs set - lookup will always return `undefined`.
+
+**Fix Line 134:**
+```typescript
+let expNode = sampleAssayMap.get(row.displayname + row.assay);
+```
+
+---
+
+## Code Duplication Issues
+
+### 5. Duplicate Assay Formatting Functions
+
+**Files:**
+- `DataGrid/dataGridHelpers.tsx:17-38` - `formatAssayType`
+- `TreeView/treeViewHelpers.tsx:43-64` - `formatAssayName`
+
+Nearly identical switch statements.
+
+**Fix - Create shared utility in `consts.ts`:**
+```typescript
+export const ASSAY_DISPLAY_MAP: Record<string, string> = {
+  dnase: "DNase",
+  atac: "ATAC",
+  h3k4me3: "H3K4me3",
+  h3k27ac: "H3K27ac",
+  ctcf: "CTCF",
+  chromhmm: "ChromHMM",
+  ccre: "cCRE",
+  rnaseq: "RNA-seq",
+};
+
+export function formatAssayType(assay: string): string {
+  return ASSAY_DISPLAY_MAP[assay.toLowerCase()] ?? assay;
+}
+```
+
+---
+
+### 6. Duplicate Root Tree Item Object (6 occurrences)
+
+**File:** `TrackSelect.tsx` - Lines 83, 95, 108, 134, 145, 222
+
+Same object literal repeated 6 times:
+```typescript
+{
+  id: "1",
+  isAssayItem: false,
+  label: "Biosamples",
+  icon: "folder",
+  children: [],
+  allRowInfo: [],
+}
+```
+
+**Fix - Add to `consts.ts`:**
+```typescript
+export const createRootTreeItem = (): TreeViewBaseItem<ExtendedTreeItemProps> => ({
+  id: "1",
+  isAssayItem: false,
+  label: "Biosamples",
+  icon: "folder",
+  children: [],
+  allRowInfo: [],
+});
+```
+
+---
+
+### 7. Duplicate Column renderCell Logic
+
+**File:** `DataGrid/columns.tsx:19-92`
+
+Similar renderCell implementations across multiple column definitions.
+
+**Fix - Create helper functions:**
+```typescript
+const renderGroupCell = (params: GridRenderCellParams<RowInfo>) => {
+  if (params.rowNode.type !== "group" || params.value === undefined) {
+    return null;
+  }
+  return <div><b>{params.value}</b></div>;
+};
+```
+
+---
+
+### 8. Duplicate Tree Building Logic
+
+**File:** `TreeView/treeViewHelpers.tsx:73-243`
+
+`buildSortedAssayTreeView` and `buildTreeView` share common patterns.
+
+**Fix - Extract shared logic:**
+```typescript
+function getSelectedRows(
+  selectedIds: string[],
+  rowById: Map<string, RowInfo>
+): RowInfo[] {
+  return selectedIds.reduce<RowInfo[]>((acc, id) => {
+    const row = rowById.get(id);
+    if (row) acc.push(row);
+    return acc;
+  }, []);
+}
+```
+
+---
+
+## Unused Code
+
+### 9. Unused `CustomToolbar` Component
+
+**File:** `DataGrid/CustomToolbar.tsx`
+
+Entire file defines a component that is never imported or used.
+
+**Recommendation:** Delete the file or integrate into `DataGridWrapper.tsx`.
+
+---
+
+### 10. Unused Exports in consts.ts
+
+**File:** `consts.ts:102-108`
+
+```typescript
+export const isTrackId = (id: string): boolean => rowById.has(id);
+export const getActiveTracks = (selectedIds: Set<string>): Set<string> =>
+  new Set(Array.from(selectedIds).filter(isTrackId));
+```
+
+Never used anywhere.
+
+**Recommendation:** Remove or document intended usage.
+
+---
+
+## Type Safety Issues
+
+### 11. Using `any` Type in getNestedValue
+
+**File:** `DataGrid/dataGridHelpers.tsx:65-67`
+
+```typescript
+function getNestedValue(obj: any, path: string): any {
+  return path.split(".").reduce((acc, key) => acc && acc[key], obj);
+}
+```
+
+**Fix:** Remove function and access properties directly:
+```typescript
+const data = tracksData.tracks;
+```
+
+---
+
+### 12. Non-Null Assertion Without Safety Check
+
+**File:** `TreeView/TreeViewWrapper.tsx:87`
+
+```typescript
+({items[0].allRowInfo!.length} search results)
+```
+
+**Fix:**
+```typescript
+({items[0]?.allRowInfo?.length ?? 0} search results)
+```
+
+---
+
+### 13. Implicit Any in FuseOptionKey
+
+**File:** `types.ts:14`
+
+```typescript
+keyWeightMap: FuseOptionKey<any>[];
+```
+
+**Fix:**
+```typescript
+keyWeightMap: FuseOptionKey<TrackInfo | RowInfo>[];
+```
+
+---
+
+## Performance Issues
+
+### 14. Redundant useEffect Dependency
+
+**File:** `DataGrid/DataGridWrapper.tsx:48-50`
+
+**Fix - Memoize baseVisibility:**
+```typescript
+const baseVisibility = useMemo<GridColumnVisibilityModel>(() =>
+  sortedAssay
+    ? { assay: false, ontology: false, displayname: false, id: false }
+    : { ontology: false, displayname: false, assay: false, id: false },
+  [sortedAssay]
+);
+```
+
+---
+
+### 15. Eager Module Initialization
+
+**File:** `consts.ts:95-97`
+
+```typescript
+const humanData = buildRowsForAssembly("GRCh38");
+export const rows = humanData.rows;
+export const rowById = humanData.rowById;
+```
+
+Runs at module load time even if never used.
+
+**Fix - Lazy initialization:**
+```typescript
+let _humanData: ReturnType<typeof buildRowsForAssembly> | null = null;
+
+function getHumanData() {
+  if (!_humanData) {
+    _humanData = buildRowsForAssembly("GRCh38");
+  }
+  return _humanData;
+}
+```
+
+---
+
+## Code Quality Issues
+
+### 16. Magic Number for maxTracks
+
+**File:** `store.ts:19`
+
+```typescript
+maxTracks: 30,
+```
+
+**Fix:**
+```typescript
+const DEFAULT_MAX_TRACKS = 30;
+maxTracks: DEFAULT_MAX_TRACKS,
+```
+
+---
+
+### 17. Redundant Null Check
+
+**File:** `TreeView/treeViewHelpers.tsx:191-194`
+
+The `reduce` already filters out falsy values, so the check in `forEach` is redundant.
+
+---
+
+### 18. Redundant has() + get()
+
+**File:** `store.ts:36-43`
+
+```typescript
+if (storeRowById.has(id)) {
+  const row = storeRowById.get(id);
+  if (row) { // Redundant after has()
+```
+
+**Fix:**
+```typescript
+const row = storeRowById.get(id);
+if (row) {
+  map.set(id, row);
+}
+```
+
+---
+
+### 19. Commented-Out Code
+
+**File:** `store.ts:9-10`
+
+```typescript
+// const isAutoGeneratedId = (id: string) => id.startsWith("auto-generated-row-");
+```
+
+**Recommendation:** Remove or use.
+
+---
+
+### 20. Typo in Comment
+
+**File:** `types.ts:22`
+
+```typescript
+* Types for the JSON-formatted tracks fomr modifiedHumanTracks.json
+```
+
+Should be "from".
+
+---
+
+### 21. Missing Return Type Annotations
+
+**File:** `TreeView/treeViewHelpers.tsx:288`
+
+```typescript
+export function AssayIcon(type: string) {
+```
+
+**Fix:**
+```typescript
+export function AssayIcon(type: string): JSX.Element {
+```
+
+---
+
+### 22. Hardcoded Color Values
+
+**File:** `TreeView/treeViewHelpers.tsx:289-298`
+
+**Recommendation:** Move to `consts.ts` as `ASSAY_COLORS` for reusability.
+
+---
+
+## Summary
+
+| Severity | Count | Fixed |
+|----------|-------|-------|
+| Critical | 4 | 1 |
+| High | 4 | 0 |
+| Medium | 5 | 0 |
+| Low | 9 | 0 |
+| **Total** | **22** | **1** |

package/src/TrackSelect/store.ts

@@ -1,5 +1,5 @@
 import { create, StoreApi, UseBoundStore } from "zustand";
-import { rowById } from "./consts";
+import { buildRowsForAssembly, Assembly } from "./consts";
 import { RowInfo, SelectionAction, SelectionState } from "./types";
 
 export type SelectionStoreInstance = UseBoundStore<
@@ -7,25 +7,35 @@ export type SelectionStoreInstance = UseBoundStore<
 >;
 
 // Helper to check if an ID is auto-generated by DataGrid grouping
-const isAutoGeneratedId = (id: string) => id.startsWith("auto-generated-row-");
+// const isAutoGeneratedId = (id: string) => id.startsWith("auto-generated-row-");
+
+export function createSelectionStore(
+  assembly: Assembly,
+  initialIds?: Set<string>,
+) {
+  const { rows, rowById } = buildRowsForAssembly(assembly);
 
-export function createSelectionStore(initialIds?: Set<string>) {
   return create<SelectionState & SelectionAction>((set, get) => ({
     maxTracks: 30,
+    assembly,
+    rows,
+    rowById,
     // Stores ALL selected IDs, including auto-generated group IDs
     selectedIds: initialIds ? new Set(initialIds) : new Set<string>(),
     // Returns only real track IDs (filters out auto-generated group IDs)
     getTrackIds: () => {
       const all = get().selectedIds;
-      return new Set([...all].filter((id) => !isAutoGeneratedId(id)));
+      const storeRowById = get().rowById;
+      return new Set([...all].filter((id) => storeRowById.has(id)));
     },
     // Returns a Map of track IDs to RowInfo (no auto-generated IDs)
     getTrackMap: () => {
       const all = get().selectedIds;
+      const storeRowById = get().rowById;
       const map = new Map<string, RowInfo>();
       all.forEach((id) => {
-        if (!isAutoGeneratedId(id)) {
-          const row = rowById.get(id);
+        if (storeRowById.has(id)) {
+          const row = storeRowById.get(id);
           if (row) {
             map.set(id, row);
           }

package/src/TrackSelect/types.ts

@@ -22,6 +22,7 @@ export interface SearchTracksProps {
  * Types for the JSON-formatted tracks fomr modifiedHumanTracks.json
  */
 export type AssayInfo = {
+  id: string;
   assay: string;
   url: string;
   experimentAccession: string;
@@ -41,6 +42,7 @@ export type TrackInfo = {
  *  Row format for DataGrid
  */
 export type RowInfo = {
+  id: string;
   ontology: string;
   lifeStage: string;
   sampleType: string;
@@ -98,6 +100,12 @@ export interface CustomTreeItemProps
  */
 export type SelectionState = {
   maxTracks: number;
+  // Assembly determines which JSON data to use
+  assembly: string;
+  // All available rows for the current assembly
+  rows: RowInfo[];
+  // Map of id -> RowInfo for fast lookup
+  rowById: Map<string, RowInfo>;
   // All selected IDs including auto-generated group IDs from DataGrid
   selectedIds: Set<string>;
 };