@weng-lab/genomebrowser-ui 0.3.6 → 0.4.0-beta.1

package/dist/lib.d.ts

@@ -1,9 +1,9 @@
-import { default as TrackSelect, TrackSelectProps } from './TrackSelect/TrackSelect';
-import { createSelectionStore, SelectionStoreInstance } from './TrackSelect/store.ts';
+import { default as TrackSelect, InitialSelectedIdsByAssembly, TrackSelectProps } from './TrackSelect/TrackSelect';
 import { foldersByAssembly } from './TrackSelect/Folders/index.ts';
 import { tfPeaksTrack } from './TrackSelect/Custom/TfPeaks.tsx';
 export { TrackSelect, TrackSelectProps };
-export { createSelectionStore, SelectionStoreInstance };
+export type { TrackSelectTrackContext } from './TrackSelect/trackContext';
+export type { InitialSelectedIdsByAssembly };
 export { foldersByAssembly };
-export type { BiosampleRowInfo, GeneRowInfo, OtherTrackInfo, } from './TrackSelect/Folders';
+export type { BiosampleRowInfo, BiosampleTrackContext, GeneRowInfo, GeneTrackContext, MohdRowInfo, MohdTrackContext, OtherTrackInfo, OtherTracksTrackContext, } from './TrackSelect/Folders';
 export { tfPeaksTrack };

package/dist/muiLicense.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weng-lab/genomebrowser-ui",
   "private": false,
-  "version": "0.3.6",
+  "version": "0.4.0-beta.1",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -23,7 +23,7 @@
     "@mui/x-data-grid-premium": "^8.19.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@weng-lab/genomebrowser": "1.8.3"
+    "@weng-lab/genomebrowser": "1.8.5-beta.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.34.0",
@@ -34,15 +34,18 @@
     "eslint": "^9.34.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
+    "jsdom": "^26.1.0",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.42.0",
     "vite": "^6.3.5",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
   },
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
+    "test": "vitest run",
     "preview": "vite preview",
     "format": "prettier --write ."
   }

package/src/TrackSelect/Dialogs/ClearDialog.tsx

@@ -26,8 +26,8 @@ export function ClearDialog({
     <Dialog open={open} onClose={onClose}>
       <DialogTitle
         sx={{
-          bgcolor: "#0c184a",
-          color: "white",
+          bgcolor: "primary.main",
+          color: "primary.contrastText",
           fontWeight: "bold",
         }}
       >
@@ -46,12 +46,7 @@ export function ClearDialog({
         </DialogContentText>
       </DialogContent>
       <DialogActions sx={{ justifyContent: "center", gap: 2, pb: 2 }}>
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={onClose}
-          autoFocus
-        >
+        <Button variant="contained" color="primary" onClick={onClose} autoFocus>
           Cancel
         </Button>
         <Button variant="outlined" color="secondary" onClick={onConfirm}>

package/src/TrackSelect/Dialogs/ResetDialog.tsx

@@ -18,16 +18,17 @@ export function ResetDialog({ open, onClose, onConfirm }: ResetDialogProps) {
     <Dialog open={open} onClose={onClose}>
       <DialogTitle
         sx={{
-          bgcolor: "#0c184a",
-          color: "white",
+          bgcolor: "primary.main",
+          color: "primary.contrastText",
           fontWeight: "bold",
         }}
       >
-        Reset to Default
+        Reset to Browser State
       </DialogTitle>
       <DialogContent sx={{ mt: 2 }}>
         <DialogContentText>
-          Are you sure you want to reset all selections to the default?
+          Are you sure you want to reset all selections to the current browser
+          state?
         </DialogContentText>
       </DialogContent>
       <DialogActions sx={{ justifyContent: "center", gap: 2, pb: 2 }}>

package/src/TrackSelect/FolderList/FolderCard.tsx

@@ -44,7 +44,7 @@ export function FolderCard({ folder, onClick }: FolderCardProps) {
         </Typography>
       )}
       <Typography variant="caption" color="text.secondary">
-        {folder.rowById.size.toLocaleString()} tracks available
+        {folder.rows.length.toLocaleString()} tracks available
       </Typography>
     </Paper>
   );

package/src/TrackSelect/Folders/biosamples/shared/BiosampleViewSelector.tsx

@@ -0,0 +1,33 @@
+import { ToggleButton, ToggleButtonGroup } from "@mui/material";
+import { FolderView } from "../../types";
+
+export interface BiosampleViewSelectorProps {
+  views: FolderView[];
+  activeViewId: string;
+  onChange: (viewId: string) => void;
+}
+
+export function BiosampleViewSelector({
+  views,
+  activeViewId,
+  onChange,
+}: BiosampleViewSelectorProps) {
+  return (
+    <ToggleButtonGroup
+      exclusive
+      value={activeViewId}
+      size="small"
+      onChange={(_event, viewId: string | null) => {
+        if (viewId) {
+          onChange(viewId);
+        }
+      }}
+    >
+      {views.map((view) => (
+        <ToggleButton key={view.id} value={view.id}>
+          {view.label}
+        </ToggleButton>
+      ))}
+    </ToggleButtonGroup>
+  );
+}

package/src/TrackSelect/Folders/biosamples/shared/createFolder.ts

@@ -9,24 +9,24 @@ import {
   defaultColumns,
   defaultGroupingModel,
   defaultLeafField,
+  sortedByAssayColumns,
+  sortedByAssayGroupingModel,
+  sortedByAssayLeafField,
 } from "./columns";
-import { buildTreeView } from "./treeBuilder";
 import { formatAssayType } from "./constants";
-import { AssayToggle } from "./AssayToggle";
+import { BiosampleViewSelector } from "./BiosampleViewSelector";
 import BiosampleGroupingCell from "./BiosampleGroupingCell";
 import { BiosampleTreeItem } from "./BiosampleTreeItem";
+import { createBiosampleTrack } from "./toTrack";
 
-/**
- * Flattens TrackInfo into RowInfo objects for DataGrid display.
- * Each track can have multiple assays, so this creates one row per assay.
- *
- * @param track - TrackInfo object from JSON data
- * @returns Array of flattened BiosampleRowInfo objects, one per assay
- */
-function flattenTrackIntoRows(track: BiosampleTrackInfo): BiosampleRowInfo[] {
+/** Flatten a biosample track into one row per assay. */
+function flattenTrackIntoRows(
+  folderId: string,
+  track: BiosampleTrackInfo,
+): BiosampleRowInfo[] {
   const { ontology, lifeStage, sampleType, displayName, collection } = track;
 
-  // Sort assays so cCRE comes first, then maintain original order for the rest
+  // Keep cCRE rows first so aggregate selections stay prominent in the UI.
   const sortedAssays = [...track.assays].sort((a, b) => {
     const aIsCcre = a.assay.toLowerCase() === "ccre";
     const bIsCcre = b.assay.toLowerCase() === "ccre";
@@ -46,7 +46,7 @@ function flattenTrackIntoRows(track: BiosampleTrackInfo): BiosampleRowInfo[] {
       cpgMinus,
       coverage,
     }) => ({
-      id,
+      id: `${folderId}/${id}`,
       ontology: capitalize(ontology),
       lifeStage: capitalize(lifeStage),
       sampleType: capitalize(sampleType),
@@ -63,75 +63,56 @@ function flattenTrackIntoRows(track: BiosampleTrackInfo): BiosampleRowInfo[] {
   );
 }
 
-/**
- * Transforms raw JSON data into flattened rows and a lookup map.
- * Prefixes each row ID with the folder ID to ensure uniqueness across folders.
- *
- * @param data - Raw biosample data from JSON file
- * @param folderId - Folder ID to prefix row IDs with
- * @returns Object containing rows array and rowById map
- */
-function transformData(data: BiosampleDataFile): {
-  rowById: Map<string, BiosampleRowInfo>;
-} {
-  const rows = data.tracks.flatMap(flattenTrackIntoRows).map((row) => ({
-    ...row,
-    id: row.id,
-  }));
-  const rowById = new Map<string, BiosampleRowInfo>(
-    rows.map((row) => [row.id, row]),
-  );
-  return { rowById };
+function transformData(
+  folderId: string,
+  data: BiosampleDataFile,
+): BiosampleRowInfo[] {
+  return data.tracks.flatMap((track) => flattenTrackIntoRows(folderId, track));
 }
 
 export interface CreateBiosampleFolderOptions {
-  /** Unique identifier for this folder */
   id: string;
-  /** Display label shown in the UI */
   label: string;
-  /** Optional description shown in folder cards */
   description?: string;
-  /** Raw biosample data from JSON file */
   data: BiosampleDataFile;
 }
 
 /**
- * Factory function that creates a FolderDefinition for biosample data.
- *
- * This handles all the common setup for biosample folders:
- * - Transforms JSON data into flattened rows
- * - Creates the rowById lookup map
- * - Configures columns, grouping, and tree building
- *
- * @param options - Configuration options for the folder
- * @returns A complete FolderDefinition for the biosample data
+ * Build a biosample folder with its data, tree builder, and track factory.
  */
 export function createBiosampleFolder(
   options: CreateBiosampleFolderOptions,
 ): FolderDefinition<BiosampleRowInfo> {
   const { id, label, description, data } = options;
-  const { rowById } = transformData(data);
+  const rows = transformData(id, data);
+  const views = [
+    {
+      id: "default",
+      label: "Tissue",
+      columns: defaultColumns,
+      groupingModel: defaultGroupingModel,
+      leafField: defaultLeafField,
+    },
+    {
+      id: "by-assay",
+      label: "Assay",
+      columns: sortedByAssayColumns,
+      groupingModel: sortedByAssayGroupingModel,
+      leafField: sortedByAssayLeafField,
+    },
+  ];
 
   return {
     id,
     label,
     description,
-    rowById,
-    getRowId: (row) => row.id,
-
-    // Default view: ontology-based grouping
+    rows,
     columns: defaultColumns,
     groupingModel: defaultGroupingModel,
     leafField: defaultLeafField,
-
-    // Build tree for selected items panel
-    buildTree: (selectedIds, rowById) =>
-      buildTreeView(selectedIds, rowById, label, id),
-
-    // Biosample-specific toolbar: toggle between sample-grouped and assay-grouped views
-    ToolbarExtras: AssayToggle,
-
-    // Biosample-specific custom components
+    createTrack: createBiosampleTrack,
+    views,
+    ViewSelector: BiosampleViewSelector,
     GroupingCellComponent: BiosampleGroupingCell,
     TreeItemComponent: BiosampleTreeItem,
   };

package/src/TrackSelect/Folders/biosamples/shared/toTrack.ts

@@ -0,0 +1,138 @@
+import {
+  BigBedConfig,
+  BigWigConfig,
+  DisplayMode,
+  MethylCConfig,
+  Rect,
+  Track,
+  TrackType,
+  ValuedPoint,
+} from "@weng-lab/genomebrowser";
+import type { FC } from "react";
+import { CreateTrackOptions } from "../../types";
+import { BiosampleRowInfo } from "./types";
+
+export type BiosampleTrackContext = {
+  onBiosampleFeatureClick?: (args: {
+    trackId: string;
+    row: BiosampleRowInfo;
+    rect: Rect;
+  }) => void;
+  onBiosampleFeatureHover?: (args: {
+    trackId: string;
+    row: BiosampleRowInfo;
+    rect: Rect;
+  }) => void;
+  biosampleFeatureTooltip?: FC<Rect>;
+  biosampleSignalTooltip?: FC<ValuedPoint[]>;
+  biosampleMethylTooltip?: FC<ValuedPoint[]>;
+};
+
+const assayColors: Record<string, string> = {
+  dnase: "#06da93",
+  h3k4me3: "#ff0000",
+  h3k27ac: "#ffcd00",
+  ctcf: "#00b0d0",
+  atac: "#02c7b9",
+  rnaseq: "#00aa00",
+  chromhmm: "#00ff00",
+  ccre: "#000000",
+  wgbs: "#648bd8",
+};
+
+const defaultBigWig: Omit<BigWigConfig, "id" | "title" | "url"> = {
+  trackType: TrackType.BigWig,
+  height: 50,
+  displayMode: DisplayMode.Full,
+  titleSize: 12,
+};
+
+const defaultBigBed: Omit<BigBedConfig, "id" | "title" | "url"> = {
+  trackType: TrackType.BigBed,
+  height: 20,
+  displayMode: DisplayMode.Dense,
+  titleSize: 12,
+};
+
+const defaultMethylC: Omit<MethylCConfig, "id" | "title" | "urls"> = {
+  trackType: TrackType.MethylC,
+  height: 100,
+  displayMode: DisplayMode.Split,
+  titleSize: 12,
+  color: "#648bd8",
+  colors: {
+    cpg: "#648bd8",
+    chg: "#ff944d",
+    chh: "#ff00ff",
+    depth: "#525252",
+  },
+};
+
+export function createBiosampleTrack(
+  row: BiosampleRowInfo,
+  options: CreateTrackOptions,
+): Track {
+  const assay = row.assay.toLowerCase();
+  const color = assayColors[assay] ?? "#000000";
+  const trackContext = options.trackContext;
+
+  switch (assay) {
+    case "chromhmm":
+    case "ccre":
+      return {
+        ...defaultBigBed,
+        id: row.id,
+        url: row.url ?? "",
+        title: row.displayName,
+        color,
+        onClick: trackContext?.onBiosampleFeatureClick
+          ? (rect: Rect) =>
+              trackContext.onBiosampleFeatureClick?.({
+                trackId: row.id,
+                row,
+                rect,
+              })
+          : undefined,
+        onHover: trackContext?.onBiosampleFeatureHover
+          ? (rect: Rect) =>
+              trackContext.onBiosampleFeatureHover?.({
+                trackId: row.id,
+                row,
+                rect,
+              })
+          : undefined,
+        tooltip: trackContext?.biosampleFeatureTooltip,
+      };
+    case "wgbs":
+      return {
+        ...defaultMethylC,
+        id: row.id,
+        title: row.displayName,
+        maskCpgByCoverage: true,
+        tooltip: trackContext?.biosampleMethylTooltip,
+        urls: {
+          plusStrand: {
+            cpg: { url: row.cpgPlus ?? "" },
+            chg: { url: "" },
+            chh: { url: "" },
+            depth: { url: row.coverage ?? "" },
+          },
+          minusStrand: {
+            cpg: { url: row.cpgMinus ?? "" },
+            chg: { url: "" },
+            chh: { url: "" },
+            depth: { url: row.coverage ?? "" },
+          },
+        },
+      };
+    default:
+      return {
+        ...defaultBigWig,
+        id: row.id,
+        url: row.url ?? "",
+        title: row.displayName,
+        color,
+        tooltip: trackContext?.biosampleSignalTooltip,
+      };
+  }
+}

package/src/TrackSelect/Folders/biosamples/shared/types.ts

@@ -1,12 +1,7 @@
-/**
- * Types for biosample folder data
- */
-
 export type CollectionType = "Core" | "Ancillary" | "Partial";
 
 /**
- * Assay information from the JSON data.
- * Standard assays have a single `url`, while WGBS assays have `cpgPlus`, `cpgMinus`, `coverage`.
+ * One assay entry from the source data. WGBS rows carry strand-specific URLs.
  */
 export type BiosampleAssayInfo = {
   id: string;
@@ -14,15 +9,12 @@ export type BiosampleAssayInfo = {
   url?: string;
   experimentAccession: string;
   fileAccession?: string;
-  // WGBS-specific fields
   cpgPlus?: string;
   cpgMinus?: string;
   coverage?: string;
 };
 
-/**
- * Track information from the JSON data
- */
+/** One biosample entry from the source data. */
 export type BiosampleTrackInfo = {
   name: string;
   ontology: string;
@@ -34,8 +26,7 @@ export type BiosampleTrackInfo = {
 };
 
 /**
- * Row format for DataGrid (flattened from TrackInfo).
- * Standard assays have a single `url`, while WGBS assays have `cpgPlus`, `cpgMinus`, `coverage`.
+ * Flattened table row used by TrackSelect and track creation.
  */
 export type BiosampleRowInfo = {
   id: string;
@@ -48,15 +39,12 @@ export type BiosampleRowInfo = {
   fileAccession?: string;
   url?: string;
   collection: CollectionType;
-  // WGBS-specific fields
   cpgPlus?: string;
   cpgMinus?: string;
   coverage?: string;
 };
 
-/**
- * Structure of the biosample JSON data files
- */
+/** Root shape for biosample JSON files. */
 export type BiosampleDataFile = {
   tracks: BiosampleTrackInfo[];
 };

package/src/TrackSelect/Folders/genes/shared/columns.tsx

@@ -37,6 +37,6 @@ export const defaultColumns: GridColDef<GeneRowInfo>[] = [
 export const defaultGroupingModel: string[] = [];
 
 /**
- * Leaf field - the unique identifier
+ * Leaf field - the raw track ID (without folder prefix) used as the tree view leaf label
  */
-export const defaultLeafField = "id";
+export const defaultLeafField = "trackId";

package/src/TrackSelect/Folders/genes/shared/createFolder.ts

@@ -5,32 +5,20 @@ import {
   defaultGroupingModel,
   defaultLeafField,
 } from "./columns";
-import { buildTreeView } from "./treeBuilder";
+import { createGeneTrack } from "./toTrack";
 
-/**
- * Transforms a single track from JSON into a row for DataGrid
- * For genes, this is a 1:1 mapping (no flattening needed)
- */
-function trackToRow(track: GeneTrackInfo): GeneRowInfo {
+/** Genes map 1:1 from JSON track entries to table rows. */
+function trackToRow(folderId: string, track: GeneTrackInfo): GeneRowInfo {
   return {
-    id: track.id,
+    id: `${folderId}/${track.id}`,
+    trackId: track.id,
     displayName: track.displayName,
     versions: track.versions,
   };
 }
 
-/**
- * Transforms raw JSON data into rows and lookup map
- */
-function transformData(data: GeneDataFile): {
-  rows: GeneRowInfo[];
-  rowById: Map<string, GeneRowInfo>;
-} {
-  const rows = data.map(trackToRow);
-  const rowById = new Map<string, GeneRowInfo>(
-    rows.map((row) => [row.id, row]),
-  );
-  return { rows, rowById };
+function transformData(folderId: string, data: GeneDataFile): GeneRowInfo[] {
+  return data.map((track) => trackToRow(folderId, track));
 }
 
 export interface CreateGeneFolderOptions {
@@ -40,29 +28,21 @@ export interface CreateGeneFolderOptions {
   data: GeneDataFile;
 }
 
-/**
- * Factory function that creates a FolderDefinition for genes
- */
+/** Build a gene folder with its row lookup, tree, and track factory. */
 export function createGeneFolder(
   options: CreateGeneFolderOptions,
 ): FolderDefinition<GeneRowInfo> {
   const { id, label, description, data } = options;
-  const { rowById } = transformData(data);
+  const rows = transformData(id, data);
 
   return {
     id,
     label,
     description,
-    rowById,
-    getRowId: (row) => row.id,
-
-    // Default view configuration
+    rows,
     columns: defaultColumns,
     groupingModel: defaultGroupingModel,
     leafField: defaultLeafField,
-
-    // Tree builder for selected items panel
-    buildTree: (selectedIds, rowById) =>
-      buildTreeView(selectedIds, rowById, label),
+    createTrack: createGeneTrack,
   };
 }

package/src/TrackSelect/Folders/genes/shared/toTrack.ts

@@ -0,0 +1,59 @@
+import {
+  DisplayMode,
+  Track,
+  TrackType,
+  Transcript,
+  TranscriptConfig,
+} from "@weng-lab/genomebrowser";
+import type { FC } from "react";
+import { CreateTrackOptions } from "../../types";
+import { GeneRowInfo } from "./types";
+
+export type GeneTrackContext = {
+  onGeneClick?: (args: {
+    trackId: string;
+    row: GeneRowInfo;
+    transcript: Transcript;
+  }) => void;
+  onGeneHover?: (args: {
+    trackId: string;
+    row: GeneRowInfo;
+    transcript: Transcript;
+  }) => void;
+  geneTooltip?: FC<Transcript>;
+};
+
+const defaultTranscript: Omit<TranscriptConfig, "id" | "assembly" | "version"> =
+  {
+    title: "GENCODE Genes",
+    trackType: TrackType.Transcript,
+    displayMode: DisplayMode.Squish,
+    height: 100,
+    color: "#0c184a",
+    canonicalColor: "#100e98",
+    highlightColor: "#3c69e8",
+    titleSize: 12,
+  };
+
+export function createGeneTrack(
+  row: GeneRowInfo,
+  options: CreateTrackOptions,
+): Track {
+  const trackContext = options.trackContext;
+
+  return {
+    ...defaultTranscript,
+    id: row.id,
+    assembly: options.assembly,
+    version: row.versions[row.versions.length - 1],
+    onClick: trackContext?.onGeneClick
+      ? (transcript: Transcript) =>
+          trackContext.onGeneClick?.({ trackId: row.id, row, transcript })
+      : undefined,
+    onHover: trackContext?.onGeneHover
+      ? (transcript: Transcript) =>
+          trackContext.onGeneHover?.({ trackId: row.id, row, transcript })
+      : undefined,
+    tooltip: trackContext?.geneTooltip,
+  };
+}

package/src/TrackSelect/Folders/genes/shared/types.ts

@@ -19,6 +19,8 @@ export type GeneTrackInfo = {
  */
 export type GeneRowInfo = {
   id: string;
+  /** The raw track ID without the folder prefix, used as the tree view leaf label */
+  trackId: string;
   displayName: string;
   versions: number[];
 };