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

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

@@ -5,32 +5,19 @@ 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}`,
     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 +27,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/index.ts

@@ -4,29 +4,26 @@ import { mouseBiosamplesFolder } from "./biosamples/mouse";
 import { humanGenesFolder } from "./genes/human";
 import { mouseGenesFolder } from "./genes/mouse";
 import { humanOtherTracksFolder } from "./other-tracks/human";
+import { humanMohdFolder } from "./mohd/human";
 
-export {
-  type Assembly,
-  type FolderDefinition,
-  type FolderRuntimeConfig,
-} from "./types";
+export { type Assembly, type FolderDefinition, type FolderView } from "./types";
 
 export type { BiosampleRowInfo } from "./biosamples/shared/types";
+export type { BiosampleTrackContext } from "./biosamples/shared/toTrack";
 export type { GeneRowInfo } from "./genes/shared/types";
+export type { GeneTrackContext } from "./genes/shared/toTrack";
+export type { MohdRowInfo } from "./mohd/shared/types";
+export type { MohdTrackContext } from "./mohd/shared/toTrack";
 export type { OtherTrackInfo } from "./other-tracks/shared/types";
+export type { OtherTracksTrackContext } from "./other-tracks/shared/toTrack";
 
-/**
- * Registry of folders available for each assembly.
- *
- * Each assembly can have multiple folders (e.g., biosamples, genes, etc.).
- * TrackSelect receives the folders for the current assembly and renders
- * them as tabs or a folder selector.
- *
- * To add a new folder:
- * 1. Create a folder config file (e.g., folders/genes/human.ts)
- * 2. Import and add it to the appropriate assembly array below
- */
+// Registry of folders by assembly
 export const foldersByAssembly: Record<Assembly, FolderDefinition[]> = {
-  GRCh38: [humanBiosamplesFolder, humanGenesFolder, humanOtherTracksFolder],
-  mm10: [mouseBiosamplesFolder, mouseGenesFolder],
+  GRCh38: [
+    humanGenesFolder,
+    humanBiosamplesFolder,
+    humanMohdFolder,
+    humanOtherTracksFolder,
+  ],
+  mm10: [mouseGenesFolder, mouseBiosamplesFolder],
 };