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

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-beta.0",
+  "version": "0.4.0-beta.0",
   "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-beta.0"
+    "@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/Custom/TfPeaks.tsx

@@ -172,6 +172,10 @@ function TooltipRow({
 function TfPeaksTooltip(rect: OverlayInteractionRect) {
   const pwm = rect.pwm;
   const label = tfDisplayName(rect.name);
+  const totalWidth = 340;
+  const pad = 8;
+  const lineH = 14;
+  const titleH = 18;
 
   // Build metadata rows (single-value rows)
   const metaRows: { label: string; value: string }[] = [];
@@ -181,33 +185,47 @@ function TfPeaksTooltip(rect: OverlayInteractionRect) {
     label: "Position",
     value: `${rect.chr ? rect.chr + ":" : ""}${rect.start.toLocaleString()}-${rect.end.toLocaleString()}`,
   });
-  if (rect.expRatio) metaRows.push({ label: "Exps", value: rect.expRatio });
 
-  // Multi-value rows: split comma-separated cCREs, group 3 per row
-  const cCREItems = rect.cCREId
+  // Multi-value rows: split comma-separated cCREs, group 4 per row, cap at 5
+  const allCCREItems = rect.cCREId
     ? rect.cCREId
         .split(",")
         .map((s) => s.trim())
         .filter(Boolean)
     : [];
+  const maxCCREs = 5;
+  const cCREItems = allCCREItems.slice(0, maxCCREs);
+  const hiddenCCREs = Math.max(0, allCCREItems.length - maxCCREs);
   const cCRERows: string[][] = [];
   for (let i = 0; i < cCREItems.length; i += 4) {
     cCRERows.push(cCREItems.slice(i, i + 4));
   }
 
-  // Parse expSupport JSON into flat rows
-  const supportRows: { cellLine: string; expId: string; fileId: string }[] = [];
+  // Extract unique sorted biosamples from expSupport
+  const allBiosamples: string[] = [];
   if (rect.expSupport) {
-    for (const [cellLine, exps] of Object.entries(rect.expSupport)) {
-      for (const [expId, fileId] of Object.entries(exps)) {
-        supportRows.push({ cellLine, expId, fileId });
+    const seen = new Set<string>();
+    for (const cellLine of Object.keys(rect.expSupport)) {
+      if (!seen.has(cellLine)) {
+        seen.add(cellLine);
+        allBiosamples.push(cellLine);
       }
     }
+    allBiosamples.sort((a, b) => a.localeCompare(b));
   }
-
-  const pad = 8;
-  const lineH = 14;
-  const titleH = 18;
+  const maxBiosamples = 12;
+  const biosampleItems = allBiosamples.slice(0, maxBiosamples);
+  const hiddenBiosamples = Math.max(0, allBiosamples.length - maxBiosamples);
+  const biosampleText = biosampleItems.join(", ");
+  const biosampleMoreText =
+    hiddenBiosamples > 0 ? ` ...and ${hiddenBiosamples} more` : "";
+  const biosampleCharsPerLine = Math.floor((totalWidth - 2 * pad) / 5.2);
+  const biosampleContentLines = Math.max(
+    1,
+    Math.ceil(
+      (biosampleText.length + biosampleMoreText.length) / biosampleCharsPerLine,
+    ),
+  );
 
   // Layout: compute y offsets upfront
   const hasLogo = pwm && pwm.length > 0;
@@ -216,26 +234,25 @@ function TfPeaksTooltip(rect: OverlayInteractionRect) {
   const logoSectionH = hasLogo ? logoHeight + 4 : 0;
   const metaSectionH = metaRows.length * lineH;
 
-  // cCRE section: label row + one row per group of 3
+  // cCRE section: label row + one row per group of 4 + optional "+N more" row
   const cCREGap = cCRERows.length > 0 ? 8 : 0;
   const cCREHeaderH = cCRERows.length > 0 ? lineH : 0;
-  const cCRESectionH = cCRERows.length * lineH;
+  const cCREMoreH = hiddenCCREs > 0 ? lineH : 0;
+  const cCRESectionH = cCRERows.length * lineH + cCREMoreH;
 
-  // Support section
-  const supportGap = supportRows.length > 0 ? 8 : 0;
-  const supportHeaderH = supportRows.length > 0 ? lineH : 0;
-  const supportSectionH = supportRows.length * lineH;
+  // Biosamples section
+  const biosampleGap = biosampleContentLines > 0 ? 8 : 0;
+  const biosampleHeaderH = biosampleContentLines > 0 ? lineH : 0;
+  const biosampleSectionH = biosampleContentLines * lineH;
 
   const titleY = pad;
   const logoY = titleY + titleH;
   const metaY = logoY + logoSectionH;
   const cCREY = metaY + metaSectionH + cCREGap;
   const cCREDataY = cCREY + cCREHeaderH;
-  const supportY = cCREDataY + cCRESectionH + supportGap;
-  const supportDataY = supportY + supportHeaderH;
-  const totalHeight = supportDataY + supportSectionH + pad;
-
-  const totalWidth = 340;
+  const biosampleY = cCREDataY + cCRESectionH + biosampleGap;
+  const biosampleDataY = biosampleY + biosampleHeaderH;
+  const totalHeight = biosampleDataY + biosampleSectionH + pad;
 
   return (
     <g>
@@ -306,60 +323,64 @@ function TfPeaksTooltip(rect: OverlayInteractionRect) {
               {group.join(", ")}
             </text>
           ))}
+          {hiddenCCREs > 0 && (
+            <text
+              x={pad}
+              y={cCREDataY + cCRERows.length * lineH + 2}
+              fontSize={9}
+              fill="#aaa"
+              dominantBaseline="hanging"
+            >
+              +{hiddenCCREs} more...
+            </text>
+          )}
         </g>
       )}
 
-      {/* Experiments supporting this peak */}
-      {supportRows.length > 0 && (
+      {/* Biosamples */}
+      {biosampleContentLines > 0 && (
         <g>
           <line
             x1={pad}
             x2={totalWidth - pad}
-            y1={supportY - 4}
-            y2={supportY - 4}
+            y1={biosampleY - 4}
+            y2={biosampleY - 4}
             stroke="#ddd"
           />
           <text
             x={pad}
-            y={supportY + 2}
+            y={biosampleY + 2}
             fontSize={9}
             fontWeight="bold"
             fill="#666"
             dominantBaseline="hanging"
           >
-            Experiments supporting this peak
+            Biosamples
           </text>
-          {supportRows.map((row, i) => (
-            <g key={i} transform={`translate(0, ${supportDataY + i * lineH})`}>
-              <text
-                x={8}
-                y={0}
-                fontSize={9}
-                fill="#666"
-                dominantBaseline="hanging"
-              >
-                {row.cellLine}
-              </text>
-              <text
-                x={100}
-                y={0}
-                fontSize={9}
-                fill="#666"
-                dominantBaseline="hanging"
-              >
-                {row.expId}
-              </text>
-              <text
-                x={210}
-                y={0}
-                fontSize={9}
-                fill="#666"
-                dominantBaseline="hanging"
-              >
-                {row.fileId}
-              </text>
-            </g>
-          ))}
+          <foreignObject
+            x={pad}
+            y={biosampleDataY}
+            width={totalWidth - 2 * pad}
+            height={biosampleSectionH}
+          >
+            <div
+              style={{
+                color: "#333",
+                fontSize: "9px",
+                lineHeight: `${lineH}px`,
+                margin: 0,
+                padding: 0,
+                overflow: "hidden",
+                whiteSpace: "normal",
+                wordBreak: "break-word",
+              }}
+            >
+              {biosampleText}
+              {hiddenBiosamples > 0 && (
+                <span style={{ color: "#aaa" }}>{biosampleMoreText}</span>
+              )}
+            </div>
+          </foreignObject>
         </g>
       )}
     </g>

package/src/TrackSelect/Dialogs/ResetDialog.tsx

@@ -23,11 +23,12 @@ export function ResetDialog({ open, onClose, onConfirm }: ResetDialogProps) {
           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[];
 };