@weng-lab/genomebrowser-ui 0.1.11 → 0.2.0-beta.0

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

@@ -0,0 +1,17 @@
+import { createBiosampleFolder } from "./shared/createFolder";
+import humanData from "./data/human.json";
+import { BiosampleDataFile } from "./shared/types";
+
+/**
+ * Human biosamples folder configuration for GRCh38 assembly.
+ *
+ * Contains epigenomic data (DNase, ATAC, H3K4me3, H3K27ac, CTCF, cCRE, RNA-seq, ChromHMM)
+ * from human tissue samples, primary cells, cell lines, and organoids.
+ */
+export const humanBiosamplesFolder = createBiosampleFolder({
+  id: "human-biosamples",
+  label: "Human Biosamples",
+  description:
+    "Epigenomic data from human tissue samples, primary cells, cell lines, and organoids.",
+  data: humanData as BiosampleDataFile,
+});

package/src/TrackSelect/Folders/biosamples/mouse.ts

@@ -0,0 +1,17 @@
+import { createBiosampleFolder } from "./shared/createFolder";
+import mouseData from "./data/mouse.json";
+import { BiosampleDataFile } from "./shared/types";
+
+/**
+ * Mouse biosamples folder configuration for mm10 assembly.
+ *
+ * Contains epigenomic data (DNase, ATAC, H3K4me3, H3K27ac, CTCF, cCRE, RNA-seq, ChromHMM)
+ * from mouse tissue samples, primary cells, cell lines, and organoids.
+ */
+export const mouseBiosamplesFolder = createBiosampleFolder({
+  id: "mouse-biosamples",
+  label: "Mouse Biosamples",
+  description:
+    "Epigenomic data from mouse tissue samples, primary cells, cell lines, and organoids.",
+  data: mouseData as BiosampleDataFile,
+});

package/src/TrackSelect/Folders/biosamples/shared/AssayToggle.tsx

@@ -0,0 +1,65 @@
+import { FormControlLabel, Switch } from "@mui/material";
+import { useState } from "react";
+import { FolderRuntimeConfig } from "../../types";
+import {
+  defaultColumns,
+  defaultGroupingModel,
+  defaultLeafField,
+  sortedByAssayColumns,
+  sortedByAssayGroupingModel,
+  sortedByAssayLeafField,
+} from "./columns";
+
+export interface AssayToggleProps {
+  updateConfig: (partial: Partial<FolderRuntimeConfig>) => void;
+}
+
+/**
+ * Biosample-specific toolbar component that toggles between
+ * sample-grouped and assay-grouped views.
+ *
+ * When toggled, it updates the folder's runtime config to switch:
+ * - columns: Different column definitions for each view
+ * - groupingModel: ["ontology", "displayName"] vs ["assay", "ontology", "displayName"]
+ * - leafField: "assay" vs "id"
+ */
+export function AssayToggle({ updateConfig }: AssayToggleProps) {
+  const [sortedByAssay, setSortedByAssay] = useState(false);
+
+  const handleToggle = () => {
+    const newValue = !sortedByAssay;
+    setSortedByAssay(newValue);
+
+    if (newValue) {
+      // Switch to assay-grouped view
+      updateConfig({
+        columns: sortedByAssayColumns,
+        groupingModel: sortedByAssayGroupingModel,
+        leafField: sortedByAssayLeafField,
+      });
+    } else {
+      // Switch back to default (sample-grouped) view
+      updateConfig({
+        columns: defaultColumns,
+        groupingModel: defaultGroupingModel,
+        leafField: defaultLeafField,
+      });
+    }
+  };
+
+  return (
+    <FormControlLabel
+      sx={{ display: "flex", justifyContent: "flex-end" }}
+      value="Sort by assay"
+      control={
+        <Switch
+          color="primary"
+          checked={sortedByAssay}
+          onChange={handleToggle}
+        />
+      }
+      label="Sort by assay"
+      labelPlacement="end"
+    />
+  );
+}

package/src/TrackSelect/{DataGrid/GroupingCell.tsx → Folders/biosamples/shared/BiosampleGroupingCell.tsx}

@@ -4,13 +4,15 @@ import {
   useGridApiContext,
   GridGroupNode,
 } from "@mui/x-data-grid-premium";
-import { assayTypes } from "../consts";
-import { AssayIcon } from "../TreeView/treeViewHelpers";
+import { assayTypes, AssayIcon } from "./constants";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-// Custom grouping cell that preserves expand/collapse while adding truncation + tooltip
-export default function GroupingCell(params: GridRenderCellParams) {
+/**
+ * Biosample-specific grouping cell that renders AssayIcon for assay groups/values.
+ * Handles expand/collapse, truncation, and tooltips.
+ */
+export default function BiosampleGroupingCell(params: GridRenderCellParams) {
   const apiRef = useGridApiContext();
   const isGroup = params.rowNode.type === "group";
   const groupNode = params.rowNode as GridGroupNode;
@@ -53,7 +55,7 @@ export default function GroupingCell(params: GridRenderCellParams) {
       );
     }
 
-    // For other groups (ontology, displayname), show bold text
+    // For other groups (ontology, displayName), show bold text
     if (isGroup) {
       return (
         <Tooltip title={value} placement="top-start" enterDelay={500}>

package/src/TrackSelect/Folders/biosamples/shared/BiosampleTreeItem.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { CustomTreeItem } from "../../../TreeView/CustomTreeItem";
+import { CustomTreeItemProps } from "../../../types";
+import { AssayIcon } from "./constants";
+
+/**
+ * Biosample-specific TreeItem that renders AssayIcon for assay items.
+ * Wraps the generic CustomTreeItem with the AssayIcon renderer.
+ */
+export const BiosampleTreeItem = React.forwardRef<
+  HTMLLIElement,
+  CustomTreeItemProps
+>(function BiosampleTreeItem(props, ref) {
+  return <CustomTreeItem {...props} ref={ref} renderIcon={AssayIcon} />;
+});

package/src/TrackSelect/{DataGrid → Folders/biosamples/shared}/columns.tsx

@@ -1,17 +1,16 @@
 import { GridColDef } from "@mui/x-data-grid-premium";
-import { RowInfo } from "../types";
 import { Stack, capitalize } from "@mui/material";
-import { AssayIcon } from "../TreeView/treeViewHelpers";
-import { ontologyTypes, assayTypes } from "../consts";
+import { AssayIcon, ontologyTypes, assayTypes } from "./constants";
+import { BiosampleRowInfo } from "./types";
 
-const displayNameCol: GridColDef<RowInfo> = {
-  field: "displayname",
+const displayNameCol: GridColDef<BiosampleRowInfo> = {
+  field: "displayName",
   headerName: "Name",
   valueFormatter: (value) => value && capitalize(value),
   maxWidth: 300,
 };
 
-const sortedByAssayOntologyCol: GridColDef<RowInfo> = {
+const sortedByAssayOntologyCol: GridColDef<BiosampleRowInfo> = {
   field: "ontology",
   headerName: "Ontology",
   type: "singleSelect",
@@ -31,7 +30,7 @@ const sortedByAssayOntologyCol: GridColDef<RowInfo> = {
   },
 };
 
-const sortedByAssayAssayCol: GridColDef<RowInfo> = {
+const sortedByAssayAssayCol: GridColDef<BiosampleRowInfo> = {
   field: "assay",
   headerName: "Assay",
   valueOptions: assayTypes,
@@ -53,7 +52,7 @@ const sortedByAssayAssayCol: GridColDef<RowInfo> = {
   },
 };
 
-const defaultOntologyCol: GridColDef<RowInfo> = {
+const defaultOntologyCol: GridColDef<BiosampleRowInfo> = {
   field: "ontology",
   headerName: "Ontology",
   type: "singleSelect",
@@ -73,7 +72,7 @@ const defaultOntologyCol: GridColDef<RowInfo> = {
   },
 };
 
-const defaultAssayCol: GridColDef<RowInfo> = {
+const defaultAssayCol: GridColDef<BiosampleRowInfo> = {
   field: "assay",
   headerName: "Assay",
   valueOptions: assayTypes,
@@ -91,11 +90,12 @@ const defaultAssayCol: GridColDef<RowInfo> = {
   },
 };
 
-const sampleTypeCol: GridColDef<RowInfo> = {
+const sampleTypeCol: GridColDef<BiosampleRowInfo> = {
   field: "sampleType",
   headerName: "Sample Type",
   type: "singleSelect",
   valueOptions: [
+    "aggregate",
     "tissue",
     "primary cell",
     "cell line",
@@ -105,30 +105,31 @@ const sampleTypeCol: GridColDef<RowInfo> = {
   valueFormatter: (value) => value && capitalize(value),
 };
 
-const lifeStageCol: GridColDef<RowInfo> = {
+const lifeStageCol: GridColDef<BiosampleRowInfo> = {
   field: "lifeStage",
   headerName: "Life Stage",
   type: "singleSelect",
-  valueOptions: ["adult", "embryonic"],
+  valueOptions: ["adult", "embryonic", "N/A"],
   valueFormatter: (value) => value && capitalize(value),
 };
 
-const experimentCol: GridColDef<RowInfo> = {
+const experimentCol: GridColDef<BiosampleRowInfo> = {
   field: "experimentAccession",
   headerName: "Experiment Accession",
 };
 
-const fileCol: GridColDef<RowInfo> = {
+const fileCol: GridColDef<BiosampleRowInfo> = {
   field: "fileAccession",
   headerName: "File Accession",
 };
 
-const idCol: GridColDef<RowInfo> = {
+const idCol: GridColDef<BiosampleRowInfo> = {
   field: "id",
   headerName: "ID",
 };
 
-export const sortedByAssayColumns: GridColDef<RowInfo>[] = [
+/** Columns for sorted-by-assay view (assay as top-level grouping) */
+export const sortedByAssayColumns: GridColDef<BiosampleRowInfo>[] = [
   displayNameCol,
   sortedByAssayOntologyCol,
   sampleTypeCol,
@@ -139,7 +140,8 @@ export const sortedByAssayColumns: GridColDef<RowInfo>[] = [
   idCol,
 ];
 
-export const defaultColumns: GridColDef<RowInfo>[] = [
+/** Default columns (ontology as top-level grouping) */
+export const defaultColumns: GridColDef<BiosampleRowInfo>[] = [
   defaultAssayCol,
   sampleTypeCol,
   lifeStageCol,
@@ -149,3 +151,15 @@ export const defaultColumns: GridColDef<RowInfo>[] = [
   fileCol,
   idCol,
 ];
+
+/** Grouping model for sorted-by-assay view */
+export const sortedByAssayGroupingModel = ["assay", "ontology", "displayName"];
+
+/** Default grouping model (ontology-based) */
+export const defaultGroupingModel = ["ontology", "displayName"];
+
+/** Leaf field for sorted-by-assay view */
+export const sortedByAssayLeafField = "id";
+
+/** Default leaf field */
+export const defaultLeafField = "assay";

package/src/TrackSelect/Folders/biosamples/shared/constants.tsx

@@ -0,0 +1,116 @@
+import { Box } from "@mui/material";
+import type { Assembly } from "../../types";
+
+export type { Assembly };
+
+export const assayTypes = [
+  "cCRE",
+  "DNase",
+  "H3K4me3",
+  "H3K27ac",
+  "ATAC",
+  "CTCF",
+  "RNA-seq",
+  "ChromHMM",
+];
+
+export const ontologyTypes = [
+  "Aggregate",
+  "Adipose",
+  "Adrenal gland",
+  "Blood",
+  "Blood vessel",
+  "Bone",
+  "Bone marrow",
+  "Brain",
+  "Breast",
+  "Connective tissue",
+  "Embryo",
+  "Epithelium",
+  "Esophagus",
+  "Eye",
+  "Fallopian Tube",
+  "Gallbladder",
+  "Heart",
+  "Kidney",
+  "Large Intestine",
+  "Limb",
+  "Liver",
+  "Lung",
+  "Lymphoid Tissue",
+  "Muscle",
+  "Mouth",
+  "Nerve",
+  "Nose",
+  "Pancreas",
+  "Parathyroid Gland",
+  "Ovary",
+  "Penis",
+  "Placenta",
+  "Prostate",
+  "Skin",
+  "Small Intestine",
+  "Spinal Cord",
+  "Spleen",
+  "Stomach",
+  "Testis",
+  "Thymus",
+  "Thyroid",
+  "Urinary Bladder",
+  "Uterus",
+  "Vagina",
+];
+
+/** Color mapping for assay types */
+export const assayColorMap: { [key: string]: string } = {
+  DNase: "#06da93",
+  ATAC: "#02c7b9",
+  H3K4me3: "#ff2020",
+  ChromHMM: "#0097a7",
+  H3K27ac: "#fdc401",
+  CTCF: "#01a6f1",
+  cCRE: "#000000",
+  "RNA-seq": "#00aa00",
+};
+
+/**
+ * Creates the assay icon for DataGrid and RichTreeView
+ * @param type - assay type
+ * @returns an icon of the assay's respective color
+ */
+export function AssayIcon(type: string) {
+  const color = assayColorMap[type];
+  return (
+    <Box
+      sx={{
+        width: 12,
+        height: 12,
+        borderRadius: "20%",
+        bgcolor: color,
+      }}
+    />
+  );
+}
+
+/**
+ * Mapping from JSON assay keys to display names.
+ * This is the single source of truth for assay name formatting.
+ */
+const assayJsonToDisplay: Record<string, string> = {
+  dnase: "DNase",
+  atac: "ATAC",
+  h3k4me3: "H3K4me3",
+  h3k27ac: "H3K27ac",
+  ctcf: "CTCF",
+  chromhmm: "ChromHMM",
+  ccre: "cCRE",
+  rnaseq: "RNA-seq",
+};
+
+/**
+ * Convert JSON assay key to display name.
+ * Used only during data loading to normalize assay names.
+ */
+export function formatAssayType(jsonKey: string): string {
+  return assayJsonToDisplay[jsonKey.toLowerCase()] ?? jsonKey;
+}

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

@@ -0,0 +1,116 @@
+import { capitalize } from "@mui/material";
+import { FolderDefinition } from "../../types";
+import {
+  BiosampleDataFile,
+  BiosampleRowInfo,
+  BiosampleTrackInfo,
+} from "./types";
+import {
+  defaultColumns,
+  defaultGroupingModel,
+  defaultLeafField,
+} from "./columns";
+import { buildTreeView } from "./treeBuilder";
+import { formatAssayType } from "./constants";
+import { AssayToggle } from "./AssayToggle";
+import BiosampleGroupingCell from "./BiosampleGroupingCell";
+import { BiosampleTreeItem } from "./BiosampleTreeItem";
+
+/**
+ * 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[] {
+  const { ontology, lifeStage, sampleType, displayName } = track;
+
+  return track.assays.map(
+    ({ id, assay, experimentAccession, fileAccession, url }) => ({
+      id,
+      ontology: capitalize(ontology),
+      lifeStage: capitalize(lifeStage),
+      sampleType: capitalize(sampleType),
+      displayName: capitalize(displayName),
+      assay: formatAssayType(assay),
+      experimentAccession,
+      fileAccession,
+      url,
+    }),
+  );
+}
+
+/**
+ * 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 };
+}
+
+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
+ */
+export function createBiosampleFolder(
+  options: CreateBiosampleFolderOptions,
+): FolderDefinition<BiosampleRowInfo> {
+  const { id, label, description, data } = options;
+  const { rowById } = transformData(data);
+
+  return {
+    id,
+    label,
+    description,
+    rowById,
+    getRowId: (row) => row.id,
+
+    // Default view: ontology-based grouping
+    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
+    GroupingCellComponent: BiosampleGroupingCell,
+    TreeItemComponent: BiosampleTreeItem,
+  };
+}