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

package/src/TrackSelect/Folders/mohd/human.ts

@@ -0,0 +1,10 @@
+import humanData from "./data/human.json";
+import { createMohdFolder } from "./shared/createFolder";
+import { MohdDataFile } from "./shared/types";
+
+export const humanMohdFolder = createMohdFolder({
+  id: "human-mohd",
+  label: "MOHD",
+  description: "Public MOHD signal, methylation, and annotation tracks.",
+  data: humanData as MohdDataFile,
+});

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

@@ -0,0 +1,68 @@
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { Box, IconButton, Stack, Tooltip } from "@mui/material";
+import {
+  GridGroupNode,
+  GridRenderCellParams,
+  useGridApiContext,
+} from "@mui/x-data-grid-premium";
+import { isMohdOmeLabel, MohdOmeIcon } from "./config";
+
+export function MohdGroupingCell(params: GridRenderCellParams) {
+  const apiRef = useGridApiContext();
+  const isGroup = params.rowNode.type === "group";
+  const groupNode = params.rowNode as GridGroupNode;
+  const isExpanded = isGroup ? groupNode.childrenExpanded : false;
+  const groupingField = isGroup ? groupNode.groupingField : null;
+  const depth = params.rowNode.depth ?? 0;
+  const value = String(params.value ?? "");
+  const showOmeIcon =
+    (isGroup && groupingField === "ome") || isMohdOmeLabel(value);
+
+  const handleExpandClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    apiRef.current.setRowChildrenExpansion(params.id, !isExpanded);
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        ml: depth * 2,
+      }}
+    >
+      {isGroup && (
+        <IconButton size="small" onClick={handleExpandClick} sx={{ mr: 0.5 }}>
+          {isExpanded ? (
+            <ExpandMoreIcon fontSize="small" />
+          ) : (
+            <ChevronRightIcon fontSize="small" />
+          )}
+        </IconButton>
+      )}
+      <Stack
+        direction="row"
+        spacing={1}
+        alignItems="center"
+        sx={{ flex: 1, overflow: "hidden" }}
+      >
+        {showOmeIcon && <MohdOmeIcon type={value} />}
+        <Tooltip title={value} placement="top-start" enterDelay={500}>
+          <Box
+            sx={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              flex: 1,
+              fontWeight: isGroup ? "bold" : undefined,
+            }}
+          >
+            {params.formattedValue}
+          </Box>
+        </Tooltip>
+      </Stack>
+    </Box>
+  );
+}

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { CustomTreeItem } from "../../../TreeView/CustomTreeItem";
+import { CustomTreeItemProps } from "../../../types";
+import { MohdOmeIcon } from "./config";
+
+export const MohdTreeItem = React.forwardRef<
+  HTMLLIElement,
+  CustomTreeItemProps
+>(function MohdTreeItem(props, ref) {
+  return (
+    <CustomTreeItem
+      {...props}
+      ref={ref}
+      renderIcon={(type) => <MohdOmeIcon type={type} />}
+    />
+  );
+});

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

@@ -0,0 +1,33 @@
+import { ToggleButton, ToggleButtonGroup } from "@mui/material";
+import { FolderView } from "../../types";
+
+export interface MohdViewSelectorProps {
+  views: FolderView[];
+  activeViewId: string;
+  onChange: (viewId: string) => void;
+}
+
+export function MohdViewSelector({
+  views,
+  activeViewId,
+  onChange,
+}: MohdViewSelectorProps) {
+  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/mohd/shared/columns.tsx

@@ -0,0 +1,79 @@
+import { GridColDef } from "@mui/x-data-grid-premium";
+import { FolderView } from "../../types";
+import { MohdRowInfo } from "./types";
+
+const descriptionCol: GridColDef<MohdRowInfo> = {
+  field: "description",
+  headerName: "Description",
+  minWidth: 220,
+  flex: 1.5,
+};
+
+const sampleIdCol: GridColDef<MohdRowInfo> = {
+  field: "sampleId",
+  headerName: "Sample ID",
+  minWidth: 180,
+  flex: 1,
+};
+
+const trackCategoryCol: GridColDef<MohdRowInfo> = {
+  field: "trackCategory",
+  headerName: "Track Type",
+  minWidth: 140,
+  width: 140,
+};
+
+const omeCol: GridColDef<MohdRowInfo> = {
+  field: "ome",
+  headerName: "Ome",
+  minWidth: 120,
+  width: 120,
+};
+
+const siteCol: GridColDef<MohdRowInfo> = {
+  field: "site",
+  headerName: "Site",
+  minWidth: 100,
+  width: 100,
+};
+
+const sexCol: GridColDef<MohdRowInfo> = {
+  field: "sex",
+  headerName: "Sex",
+  minWidth: 120,
+  width: 120,
+};
+
+const statusCol: GridColDef<MohdRowInfo> = {
+  field: "status",
+  headerName: "Status",
+  minWidth: 120,
+  flex: 1,
+};
+
+export const mohdColumns: GridColDef<MohdRowInfo>[] = [
+  descriptionCol,
+  trackCategoryCol,
+  sampleIdCol,
+  omeCol,
+  siteCol,
+  sexCol,
+  statusCol,
+];
+
+export const mohdViews: FolderView[] = [
+  {
+    id: "ome",
+    label: "Ome",
+    columns: mohdColumns,
+    groupingModel: ["ome", "site", "sampleId"],
+    leafField: "description",
+  },
+  {
+    id: "site",
+    label: "Site",
+    columns: mohdColumns,
+    groupingModel: ["site", "ome", "sampleId"],
+    leafField: "description",
+  },
+];

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

@@ -0,0 +1,71 @@
+import { Box } from "@mui/material";
+
+export const MOHD_BASE_URL = "https://downloads.mohdconsortium.org";
+
+export const MOHD_OME_CONFIG = {
+  atac: {
+    label: "ATAC",
+    color: "#02c7b9",
+    downloadPath: "2_ATAC",
+  },
+  rna: {
+    label: "RNA",
+    color: "#00aa00",
+    downloadPath: "3_RNA",
+  },
+  wgbs: {
+    label: "WGBS",
+    color: "#648bd8",
+    downloadPath: "1_WGBS",
+  },
+} as const;
+
+export type MohdRawOme = keyof typeof MOHD_OME_CONFIG;
+export type MohdOme = (typeof MOHD_OME_CONFIG)[MohdRawOme]["label"];
+
+const MOHD_OME_LABELS = Object.values(MOHD_OME_CONFIG).map(
+  (config) => config.label,
+);
+
+export function getMohdOmeConfig(rawOme: string) {
+  const config = MOHD_OME_CONFIG[rawOme.toLowerCase() as MohdRawOme];
+
+  if (!config) {
+    throw new Error(`Unknown MOHD ome: ${rawOme}`);
+  }
+
+  return config;
+}
+
+export function createMohdFileUrl({
+  ome,
+  sampleId,
+  filename,
+}: {
+  ome: string;
+  sampleId: string;
+  filename: string;
+}) {
+  const { downloadPath } = getMohdOmeConfig(ome);
+  return `${MOHD_BASE_URL}/${downloadPath}/${sampleId}/${filename}`;
+}
+
+export function isMohdOmeLabel(value: string) {
+  return MOHD_OME_LABELS.includes(value as MohdOme);
+}
+
+export function MohdOmeIcon({ type }: { type: string }) {
+  const { color } = getMohdOmeConfig(type);
+
+  return (
+    <Box
+      data-testid={`mohd-ome-icon-${type.toLowerCase()}`}
+      sx={{
+        width: 12,
+        height: 12,
+        borderRadius: "20%",
+        bgcolor: color,
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,144 @@
+import { FolderDefinition } from "../../types";
+import { MohdDataFile, MohdRowInfo } from "./types";
+import { getMohdOmeConfig } from "./config";
+import { mohdViews } from "./columns";
+import { MohdGroupingCell } from "./MohdGroupingCell";
+import { MohdTreeItem } from "./MohdTreeItem";
+import { createMohdTrack } from "./toTrack";
+import { MohdViewSelector } from "./MohdViewSelector";
+
+const WGBS_DESCRIPTION = "DNA Methylation";
+
+function createBaseRow(folderId: string, row: MohdDataFile[number]) {
+  return {
+    id: `${folderId}/${row.sample_id}::${row.filename}`,
+    ome: getMohdOmeConfig(row.ome).label,
+    site: row.site,
+    sampleId: row.sample_id,
+    sex: row.sex,
+    status: row.status,
+  };
+}
+
+function createFileRow(
+  folderId: string,
+  row: MohdDataFile[number],
+): MohdRowInfo {
+  const trackCategory = row.filename.endsWith(".bigBed")
+    ? "Annotation"
+    : "Signal";
+
+  return {
+    ...createBaseRow(folderId, row),
+    kind: "file",
+    description: row.file_type,
+    trackCategory,
+    filename: row.filename,
+  };
+}
+
+function getRequiredWgbsFilename(
+  sampleRows: MohdDataFile,
+  includesText: string,
+) {
+  const match = sampleRows.find((row) => row.filename.includes(includesText));
+
+  if (!match) {
+    throw new Error(`Missing WGBS file matching ${includesText}`);
+  }
+
+  return match.filename;
+}
+
+function createWgbsMethylRow(
+  folderId: string,
+  sampleRows: MohdDataFile,
+): MohdRowInfo {
+  const sampleId = sampleRows[0]?.sample_id;
+
+  if (!sampleId) {
+    throw new Error("Cannot build WGBS row without a sample ID");
+  }
+
+  const base = createBaseRow(folderId, sampleRows[0]!);
+
+  return {
+    ...base,
+    id: `${folderId}/${sampleId}`,
+    kind: "wgbs-methyl",
+    description: WGBS_DESCRIPTION,
+    trackCategory: "Methylation",
+    filenames: {
+      plusStrand: {
+        cpg: getRequiredWgbsFilename(sampleRows, "DNAme-CpG-plus"),
+        chg: getRequiredWgbsFilename(sampleRows, "DNAme-CHG-plus"),
+        chh: getRequiredWgbsFilename(sampleRows, "DNAme-CHH-plus"),
+        depth: getRequiredWgbsFilename(sampleRows, "coverage-plus"),
+      },
+      minusStrand: {
+        cpg: getRequiredWgbsFilename(sampleRows, "DNAme-CpG-minus"),
+        chg: getRequiredWgbsFilename(sampleRows, "DNAme-CHG-minus"),
+        chh: getRequiredWgbsFilename(sampleRows, "DNAme-CHH-minus"),
+        depth: getRequiredWgbsFilename(sampleRows, "coverage-minus"),
+      },
+    },
+  };
+}
+
+function transformData(folderId: string, data: MohdDataFile): MohdRowInfo[] {
+  const signalRows = data
+    .filter((row) => row.ome !== "wgbs")
+    .map((row) => createFileRow(folderId, row));
+  const wgbsRowsBySampleId = new Map<string, MohdDataFile>();
+
+  data.forEach((row) => {
+    if (row.ome !== "wgbs") {
+      return;
+    }
+
+    const sampleRows = wgbsRowsBySampleId.get(row.sample_id);
+
+    if (sampleRows) {
+      sampleRows.push(row);
+      return;
+    }
+
+    wgbsRowsBySampleId.set(row.sample_id, [row]);
+  });
+
+  const methylationRows = Array.from(wgbsRowsBySampleId.values()).map(
+    (sampleRows) => createWgbsMethylRow(folderId, sampleRows),
+  );
+
+  return [...signalRows, ...methylationRows];
+}
+
+export interface CreateMohdFolderOptions {
+  id: string;
+  label: string;
+  description?: string;
+  data: MohdDataFile;
+}
+
+export function createMohdFolder(
+  options: CreateMohdFolderOptions,
+): FolderDefinition<MohdRowInfo> {
+  const { id, label, description, data } = options;
+  const rows = transformData(id, data);
+  const defaultView = mohdViews[0]!;
+
+  return {
+    id,
+    label,
+    description,
+    rows,
+    columns: defaultView.columns,
+    groupingModel: defaultView.groupingModel,
+    leafField: defaultView.leafField,
+    createTrack: createMohdTrack,
+    views: mohdViews,
+    ViewSelector: MohdViewSelector,
+    GroupingCellComponent: MohdGroupingCell,
+    TreeItemComponent: MohdTreeItem,
+  };
+}

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

@@ -0,0 +1,164 @@
+import {
+  BigBedConfig,
+  BigWigConfig,
+  DisplayMode,
+  MethylCConfig,
+  Track,
+  TrackType,
+  ValuedPoint,
+} from "@weng-lab/genomebrowser";
+import type { FC } from "react";
+import { CreateTrackOptions } from "../../types";
+import { createMohdFileUrl, getMohdOmeConfig } from "./config";
+import { MohdRowInfo } from "./types";
+
+export type MohdTrackContext = {
+  mohdSignalTooltip?: FC<ValuedPoint[]>;
+  mohdMethylTooltip?: FC<ValuedPoint[]>;
+};
+
+const defaultBigWig: Omit<BigWigConfig, "id" | "title" | "url"> = {
+  trackType: TrackType.BigWig,
+  height: 30,
+  displayMode: DisplayMode.Full,
+  titleSize: 12,
+  color: "#02c7b9",
+};
+
+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: 75,
+  displayMode: DisplayMode.Split,
+  titleSize: 12,
+  color: "#648bd8",
+  maskCpgByCoverage: true,
+  colors: {
+    cpg: "#648bd8",
+    chg: "#ff944d",
+    chh: "#ff00ff",
+    depth: "#525252",
+  },
+};
+
+function createTrackTitle(row: MohdRowInfo) {
+  return `${row.sampleId} ${row.description}`;
+}
+
+export function createMohdTrack(
+  row: MohdRowInfo,
+  options: CreateTrackOptions,
+): Track | null {
+  const trackContext = options.trackContext;
+
+  if (row.kind === "wgbs-methyl") {
+    return {
+      ...defaultMethylC,
+      id: row.id,
+      title: createTrackTitle(row),
+      tooltip: trackContext?.mohdMethylTooltip,
+      urls: {
+        plusStrand: {
+          cpg: {
+            url: createMohdFileUrl({
+              ome: row.ome,
+              sampleId: row.sampleId,
+              filename: row.filenames.plusStrand.cpg,
+            }),
+          },
+          chg: {
+            url: createMohdFileUrl({
+              ome: row.ome,
+              sampleId: row.sampleId,
+              filename: row.filenames.plusStrand.chg,
+            }),
+          },
+          chh: {
+            url: createMohdFileUrl({
+              ome: row.ome,
+              sampleId: row.sampleId,
+              filename: row.filenames.plusStrand.chh,
+            }),
+          },
+          depth: {
+            url: createMohdFileUrl({
+              ome: row.ome,
+              sampleId: row.sampleId,
+              filename: row.filenames.plusStrand.depth,
+            }),
+          },
+        },
+        minusStrand: {
+          cpg: {
+            url: createMohdFileUrl({
+              ome: row.ome,
+              sampleId: row.sampleId,
+              filename: row.filenames.minusStrand.cpg,
+            }),
+          },
+          chg: {
+            url: createMohdFileUrl({
+              ome: row.ome,
+              sampleId: row.sampleId,
+              filename: row.filenames.minusStrand.chg,
+            }),
+          },
+          chh: {
+            url: createMohdFileUrl({
+              ome: row.ome,
+              sampleId: row.sampleId,
+              filename: row.filenames.minusStrand.chh,
+            }),
+          },
+          depth: {
+            url: createMohdFileUrl({
+              ome: row.ome,
+              sampleId: row.sampleId,
+              filename: row.filenames.minusStrand.depth,
+            }),
+          },
+        },
+      },
+    };
+  }
+
+  if (row.kind !== "file") {
+    return null;
+  }
+
+  const { color } = getMohdOmeConfig(row.ome);
+  const url = createMohdFileUrl({
+    ome: row.ome,
+    sampleId: row.sampleId,
+    filename: row.filename,
+  });
+
+  if (row.filename.endsWith(".bigWig")) {
+    return {
+      ...defaultBigWig,
+      id: row.id,
+      title: createTrackTitle(row),
+      url,
+      color,
+      tooltip: trackContext?.mohdSignalTooltip,
+    };
+  }
+
+  if (row.filename.endsWith(".bigBed")) {
+    return {
+      ...defaultBigBed,
+      id: row.id,
+      title: createTrackTitle(row),
+      url,
+      color,
+    };
+  }
+
+  return null;
+}

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

@@ -0,0 +1,46 @@
+import type { MohdOme } from "./config";
+
+export type MohdMethylStrandUrls = {
+  cpg: string;
+  chg: string;
+  chh: string;
+  depth: string;
+};
+
+export type MohdDataRow = {
+  ome: string;
+  site: string;
+  sample_id: string;
+  file_type: string;
+  filename: string;
+  sex: string;
+  status: string;
+};
+
+type MohdBaseRowInfo = {
+  id: string;
+  ome: MohdOme;
+  site: string;
+  sampleId: string;
+  sex: string;
+  status: string;
+  description: string;
+  trackCategory: "Signal" | "Annotation" | "Methylation";
+};
+
+export type MohdFileRowInfo = MohdBaseRowInfo & {
+  kind: "file";
+  filename: string;
+};
+
+export type MohdWgbsMethylRowInfo = MohdBaseRowInfo & {
+  kind: "wgbs-methyl";
+  filenames: {
+    plusStrand: MohdMethylStrandUrls;
+    minusStrand: MohdMethylStrandUrls;
+  };
+};
+
+export type MohdRowInfo = MohdFileRowInfo | MohdWgbsMethylRowInfo;
+
+export type MohdDataFile = MohdDataRow[];

package/src/TrackSelect/Folders/other-tracks/shared/createFolder.ts

@@ -5,16 +5,17 @@ import {
   defaultGroupingModel,
   defaultLeafField,
 } from "./columns";
-import { buildTreeView } from "./treeBuilder";
+import { createOtherTrack } from "./toTrack";
 
-function transformData(data: OtherTrackDataFile): {
-  rows: OtherTrackInfo[];
-  rowById: Map<string, OtherTrackInfo>;
-} {
-  const rowById = new Map<string, OtherTrackInfo>(
-    data.map((row) => [row.id, row]),
-  );
-  return { rows: data, rowById };
+function transformData(
+  folderId: string,
+  data: OtherTrackDataFile,
+): OtherTrackInfo[] {
+  return data.map((row) => ({
+    ...row,
+    sourceId: row.id,
+    id: `${folderId}/${row.id}`,
+  }));
 }
 
 export interface CreateOtherTracksFolderOptions {
@@ -28,18 +29,16 @@ export function createOtherTracksFolder(
   options: CreateOtherTracksFolderOptions,
 ): FolderDefinition<OtherTrackInfo> {
   const { id, label, description, data } = options;
-  const { rowById } = transformData(data);
+  const rows = transformData(id, data);
 
   return {
     id,
     label,
     description,
-    rowById,
-    getRowId: (row) => row.id,
+    rows,
     columns: defaultColumns,
     groupingModel: defaultGroupingModel,
     leafField: defaultLeafField,
-    buildTree: (selectedIds, rowById) =>
-      buildTreeView(selectedIds, rowById, label),
+    createTrack: createOtherTrack,
   };
 }

package/src/TrackSelect/Folders/other-tracks/shared/toTrack.ts

@@ -0,0 +1,17 @@
+import { Track } from "@weng-lab/genomebrowser";
+import { tfPeaksTrack } from "../../../Custom/TfPeaks";
+import { CreateTrackOptions } from "../../types";
+import { OtherTrackInfo } from "./types";
+
+export type OtherTracksTrackContext = {};
+
+export function createOtherTrack(
+  row: OtherTrackInfo,
+  _options: CreateTrackOptions,
+): Track | null {
+  if ((row.sourceId ?? row.id) === "tf-peaks") {
+    return { ...tfPeaksTrack, id: row.id };
+  }
+
+  return null;
+}