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

package/src/TrackSelect/Folders/mohd/shared/MohdBigBedTooltip.tsx

@@ -0,0 +1,82 @@
+import { InferBigBedRow } from "@weng-lab/genomebrowser";
+import {
+  mohdAtacFdrPeaksSchema,
+  mohdAtacPseudorepPeaksSchema,
+} from "./bigBedSchemas";
+
+type MohdBigBedRow =
+  | InferBigBedRow<typeof mohdAtacFdrPeaksSchema>
+  | InferBigBedRow<typeof mohdAtacPseudorepPeaksSchema>;
+
+function TooltipRow({
+  label,
+  value,
+  y,
+}: {
+  label: string;
+  value: string;
+  y: number;
+}) {
+  return (
+    <g transform={`translate(0, ${y})`}>
+      <text x={8} y={0} fontSize={10} fill="#888" dominantBaseline="hanging">
+        {label}
+      </text>
+      <text x={100} y={0} fontSize={10} fill="#333" dominantBaseline="hanging">
+        {value}
+      </text>
+    </g>
+  );
+}
+
+function formatValue(value: string | number | undefined) {
+  if (value === undefined) {
+    return "-";
+  }
+
+  return `${value}`;
+}
+
+export function MohdBigBedTooltip(rect: MohdBigBedRow) {
+  const rows = [
+    {
+      label: "Position",
+      value: `${rect.chr}:${rect.start.toLocaleString()}-${rect.end.toLocaleString()}`,
+    },
+    { label: "Name", value: formatValue(rect.name) },
+    { label: "Score", value: formatValue(rect.score) },
+    { label: "Strand", value: formatValue(rect.strand) },
+    { label: "Signal", value: formatValue(rect.signalValue) },
+    { label: "pValue", value: formatValue(rect.pValue) },
+    { label: "qValue", value: formatValue(rect.qValue) },
+    { label: "Peak", value: formatValue(rect.peak) },
+  ];
+  const pad = 8;
+  const lineH = 14;
+  const titleH = 18;
+  const width = 280;
+  const height = pad + titleH + rows.length * lineH + pad;
+
+  return (
+    <g>
+      <rect
+        width={width}
+        height={height}
+        fill="white"
+        rx={3}
+        style={{ filter: "drop-shadow(0px 0px 5px rgba(0,0,0,0.3))" }}
+      />
+      <text x={pad} y={pad + 12} fontSize={12} fontWeight="bold" fill="#333">
+        {rect.name || "MOHD peak"}
+      </text>
+      {rows.map((row, index) => (
+        <TooltipRow
+          key={row.label}
+          label={row.label}
+          value={row.value}
+          y={pad + titleH + index * lineH}
+        />
+      ))}
+    </g>
+  );
+}

package/src/TrackSelect/Folders/mohd/shared/bigBedSchemas.ts

@@ -0,0 +1,34 @@
+import { defineBigBedSchema } from "@weng-lab/genomebrowser";
+import type { MohdFileRowInfo } from "./types";
+
+export const mohdAtacFdrPeaksSchema = defineBigBedSchema({
+  name: "string",
+  score: "number",
+  strand: "string",
+  signalValue: "number",
+  pValue: "number",
+  qValue: "number",
+  peak: "number",
+});
+
+export const mohdAtacPseudorepPeaksSchema = defineBigBedSchema({
+  name: "string",
+  score: "number",
+  strand: "string",
+  signalValue: "number",
+  pValue: "number",
+  qValue: "number",
+  peak: "number",
+});
+
+export function getMohdBigBedSchema(row: MohdFileRowInfo) {
+  if (row.description === "FDR 0.05 peaks") {
+    return mohdAtacFdrPeaksSchema;
+  }
+
+  if (row.description === "Pseudorep peaks") {
+    return mohdAtacPseudorepPeaksSchema;
+  }
+
+  return undefined;
+}

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

@@ -16,6 +16,13 @@ const sampleIdCol: GridColDef<MohdRowInfo> = {
   flex: 1,
 };
 
+const kitIdCol: GridColDef<MohdRowInfo> = {
+  field: "kitId",
+  headerName: "Kit ID",
+  minWidth: 140,
+  flex: 1,
+};
+
 const trackCategoryCol: GridColDef<MohdRowInfo> = {
   field: "trackCategory",
   headerName: "Track Type",
@@ -55,6 +62,7 @@ export const mohdColumns: GridColDef<MohdRowInfo>[] = [
   descriptionCol,
   trackCategoryCol,
   sampleIdCol,
+  kitIdCol,
   omeCol,
   siteCol,
   sexCol,

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

@@ -15,6 +15,7 @@ function createBaseRow(folderId: string, row: MohdDataFile[number]) {
     ome: getMohdOmeConfig(row.ome).label,
     site: row.site,
     sampleId: row.sample_id,
+    kitId: row.kit_id,
     sex: row.sex,
     status: row.status,
   };

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

@@ -2,6 +2,7 @@ import {
   BigBedConfig,
   BigWigConfig,
   DisplayMode,
+  InferBigBedRow,
   MethylCConfig,
   Track,
   TrackType,
@@ -9,7 +10,13 @@ import {
 } from "@weng-lab/genomebrowser";
 import type { FC } from "react";
 import { CreateTrackOptions } from "../../types";
+import {
+  getMohdBigBedSchema,
+  mohdAtacFdrPeaksSchema,
+  mohdAtacPseudorepPeaksSchema,
+} from "./bigBedSchemas";
 import { createMohdFileUrl, getMohdOmeConfig } from "./config";
+import { MohdBigBedTooltip } from "./MohdBigBedTooltip";
 import { MohdRowInfo } from "./types";
 
 export type MohdTrackContext = {
@@ -47,6 +54,10 @@ const defaultMethylC: Omit<MethylCConfig, "id" | "title" | "urls"> = {
   },
 };
 
+type MohdBigBedRow =
+  | InferBigBedRow<typeof mohdAtacFdrPeaksSchema>
+  | InferBigBedRow<typeof mohdAtacPseudorepPeaksSchema>;
+
 function createTrackTitle(row: MohdRowInfo) {
   return `${row.sampleId} ${row.description}`;
 }
@@ -157,6 +168,11 @@ export function createMohdTrack(
       title: createTrackTitle(row),
       url,
       color,
+      schema: getMohdBigBedSchema(row),
+      tooltip: MohdBigBedTooltip,
+      onClick: (rect: MohdBigBedRow) => {
+        console.log(rect);
+      },
     };
   }
 

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

@@ -11,6 +11,7 @@ export type MohdDataRow = {
   ome: string;
   site: string;
   sample_id: string;
+  kit_id?: string;
   file_type: string;
   filename: string;
   sex: string;
@@ -22,6 +23,7 @@ type MohdBaseRowInfo = {
   ome: MohdOme;
   site: string;
   sampleId: string;
+  kitId?: string;
   sex: string;
   status: string;
   description: string;

package/test/mohdFolder.test.tsx

@@ -0,0 +1,50 @@
+import { describe, expect, it, vi } from "vitest";
+vi.mock("../src/TrackSelect/Folders/mohd/shared/MohdGroupingCell", () => ({
+  MohdGroupingCell: () => null,
+}));
+vi.mock("../src/TrackSelect/Folders/mohd/shared/MohdTreeItem", () => ({
+  MohdTreeItem: () => null,
+}));
+vi.mock("../src/TrackSelect/Folders/mohd/shared/MohdViewSelector", () => ({
+  MohdViewSelector: () => null,
+}));
+import { createMohdFolder } from "../src/TrackSelect/Folders/mohd/shared/createFolder";
+import type { MohdDataFile } from "../src/TrackSelect/Folders/mohd/shared/types";
+
+describe("MOHD folder", () => {
+  it("maps kit_id to kitId on normalized rows", () => {
+    const folder = createMohdFolder({
+      id: "mohd-test",
+      label: "MOHD",
+      data: [
+        {
+          ome: "atac",
+          site: "CCH",
+          sample_id: "MOHD_EA100001",
+          kit_id: "CCH_0001",
+          file_type: "Fold change signal",
+          filename: "MOHD_EA100001_signal-FC_GRCh38_v0.bigWig",
+          sex: "female",
+          status: "case",
+        },
+      ] as MohdDataFile,
+    });
+
+    expect(folder.rows[0]).toMatchObject({
+      sampleId: "MOHD_EA100001",
+      kitId: "CCH_0001",
+    });
+  });
+
+  it("includes a kit id column", () => {
+    const folder = createMohdFolder({
+      id: "mohd-test",
+      label: "MOHD",
+      data: [],
+    });
+
+    expect(folder.columns.some((column) => column.field === "kitId")).toBe(
+      true,
+    );
+  });
+});