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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weng-lab/genomebrowser-ui",
   "private": false,
-  "version": "0.3.6-beta.0",
+  "version": "0.3.6",
   "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.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.34.0",

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/Folders/index.ts

@@ -27,6 +27,6 @@ export type { OtherTrackInfo } from "./other-tracks/shared/types";
  * 2. Import and add it to the appropriate assembly array below
  */
 export const foldersByAssembly: Record<Assembly, FolderDefinition[]> = {
-  GRCh38: [humanBiosamplesFolder, humanGenesFolder, humanOtherTracksFolder],
-  mm10: [mouseBiosamplesFolder, mouseGenesFolder],
+  GRCh38: [humanGenesFolder, humanBiosamplesFolder, humanOtherTracksFolder],
+  mm10: [mouseGenesFolder, mouseBiosamplesFolder],
 };

package/test/main.tsx

@@ -38,7 +38,7 @@ import type { BiosampleRowInfo } from "../src/TrackSelect/Folders/biosamples/sha
 import type { GeneRowInfo } from "../src/TrackSelect/Folders/genes/shared/types";
 import type { OtherTrackInfo } from "../src/TrackSelect/Folders/other-tracks/shared/types";
 import { Exon } from "@weng-lab/genomebrowser/dist/components/tracks/transcript/types";
-import { tfPeaksTrack } from "@weng-lab/genomebrowser/test/TfPeaks";
+import { tfPeaksTrack } from "../src/TrackSelect/Custom/TfPeaks";
 
 interface Transcript {
   id: string;
@@ -87,7 +87,7 @@ function Main() {
   const browserStore = createBrowserStoreMemo({
     // chr7:19,695,494-19,699,803
     // chr1:11103779-11262792
-    domain: { chromosome: "chr1", start: 11103779, end: 11262792 },
+    domain: { chromosome: "chr12", start: 53380108, end: 53416378 },
     marginWidth: 100,
     trackWidth: 1400,
     multiplier: 3,