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

package/dist/TrackSelect/Folders/biosamples/human.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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 declare const humanBiosamplesFolder: import('..').FolderDefinition<import('./shared/types').BiosampleRowInfo>;

package/dist/TrackSelect/Folders/biosamples/mouse.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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 declare const mouseBiosamplesFolder: import('..').FolderDefinition<import('./shared/types').BiosampleRowInfo>;

package/dist/TrackSelect/Folders/biosamples/shared/AssayToggle.d.ts

@@ -0,0 +1,14 @@
+import { FolderRuntimeConfig } from '../../types';
+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 declare function AssayToggle({ updateConfig }: AssayToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/TrackSelect/Folders/biosamples/shared/BiosampleGroupingCell.d.ts

@@ -0,0 +1,6 @@
+import { GridRenderCellParams } from '@mui/x-data-grid-premium';
+/**
+ * Biosample-specific grouping cell that renders AssayIcon for assay groups/values.
+ * Handles expand/collapse, truncation, and tooltips.
+ */
+export default function BiosampleGroupingCell(params: GridRenderCellParams): import("react/jsx-runtime").JSX.Element;

package/dist/TrackSelect/Folders/biosamples/shared/BiosampleTreeItem.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { CustomTreeItemProps } from '../../../types';
+/**
+ * Biosample-specific TreeItem that renders AssayIcon for assay items.
+ * Wraps the generic CustomTreeItem with the AssayIcon renderer.
+ */
+export declare const BiosampleTreeItem: React.ForwardRefExoticComponent<CustomTreeItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/TrackSelect/Folders/biosamples/shared/columns.d.ts

@@ -0,0 +1,14 @@
+import { GridColDef } from '@mui/x-data-grid-premium';
+import { BiosampleRowInfo } from './types';
+/** Columns for sorted-by-assay view (assay as top-level grouping) */
+export declare const sortedByAssayColumns: GridColDef<BiosampleRowInfo>[];
+/** Default columns (ontology as top-level grouping) */
+export declare const defaultColumns: GridColDef<BiosampleRowInfo>[];
+/** Grouping model for sorted-by-assay view */
+export declare const sortedByAssayGroupingModel: string[];
+/** Default grouping model (ontology-based) */
+export declare const defaultGroupingModel: string[];
+/** Leaf field for sorted-by-assay view */
+export declare const sortedByAssayLeafField = "id";
+/** Default leaf field */
+export declare const defaultLeafField = "assay";

package/dist/TrackSelect/Folders/biosamples/shared/constants.d.ts

@@ -0,0 +1,19 @@
+import { Assembly } from '../../types';
+export type { Assembly };
+export declare const assayTypes: string[];
+export declare const ontologyTypes: string[];
+/** Color mapping for assay types */
+export declare const assayColorMap: {
+    [key: string]: string;
+};
+/**
+ * Creates the assay icon for DataGrid and RichTreeView
+ * @param type - assay type
+ * @returns an icon of the assay's respective color
+ */
+export declare function AssayIcon(type: string): import("react/jsx-runtime").JSX.Element;
+/**
+ * Convert JSON assay key to display name.
+ * Used only during data loading to normalize assay names.
+ */
+export declare function formatAssayType(jsonKey: string): string;

package/dist/TrackSelect/Folders/biosamples/shared/createFolder.d.ts

@@ -0,0 +1,24 @@
+import { FolderDefinition } from '../../types';
+import { BiosampleDataFile, BiosampleRowInfo } from './types';
+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 declare function createBiosampleFolder(options: CreateBiosampleFolderOptions): FolderDefinition<BiosampleRowInfo>;

package/dist/TrackSelect/Folders/biosamples/shared/treeBuilder.d.ts

@@ -0,0 +1,25 @@
+import { TreeViewBaseItem } from '@mui/x-tree-view';
+import { ExtendedTreeItemProps } from '../../../types';
+import { BiosampleRowInfo } from './types';
+/**
+ * Builds tree in the sorted by assay view
+ * Hierarchy: Assay -> Ontology -> DisplayName -> Experiment
+ *
+ * @param selectedIds - list of selected row IDs
+ * @param rowById - Mapping between an id and its BiosampleRowInfo object
+ * @param rootLabel - Label for the root node
+ * @param folderId - Folder ID to prefix tree item IDs with
+ * @returns tree items for the RichTreeView
+ */
+export declare function buildSortedAssayTreeView(selectedIds: string[], rowById: Map<string, BiosampleRowInfo>, rootLabel?: string, folderId?: string): TreeViewBaseItem<ExtendedTreeItemProps>[];
+/**
+ * Builds tree in the default view (sorted by ontology)
+ * Hierarchy: Ontology -> DisplayName -> Experiment
+ *
+ * @param selectedIds - list of selected row IDs
+ * @param rowById - Mapping between an id and its BiosampleRowInfo object
+ * @param rootLabel - Label for the root node
+ * @param folderId - Folder ID to prefix tree item IDs with
+ * @returns tree items for the RichTreeView
+ */
+export declare function buildTreeView(selectedIds: string[], rowById: Map<string, BiosampleRowInfo>, rootLabel?: string, folderId?: string): TreeViewBaseItem<ExtendedTreeItemProps>[];

package/dist/TrackSelect/Folders/biosamples/shared/types.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Types for biosample folder data
+ */
+/**
+ * Assay information from the JSON data
+ */
+export type BiosampleAssayInfo = {
+    id: string;
+    assay: string;
+    url: string;
+    experimentAccession: string;
+    fileAccession: string;
+};
+/**
+ * Track information from the JSON data
+ */
+export type BiosampleTrackInfo = {
+    name: string;
+    ontology: string;
+    lifeStage: string;
+    sampleType: string;
+    displayName: string;
+    assays: BiosampleAssayInfo[];
+};
+/**
+ * Row format for DataGrid (flattened from TrackInfo)
+ */
+export type BiosampleRowInfo = {
+    id: string;
+    ontology: string;
+    lifeStage: string;
+    sampleType: string;
+    displayName: string;
+    assay: string;
+    experimentAccession: string;
+    fileAccession: string;
+    url: string;
+};
+/**
+ * Structure of the biosample JSON data files
+ */
+export type BiosampleDataFile = {
+    tracks: BiosampleTrackInfo[];
+};

package/dist/TrackSelect/Folders/genes/data/human.json.d.ts

@@ -0,0 +1,10 @@
+declare const _default: [
+  {
+    "id": "genocode-basic",
+    "displayName": "GENCODE Basic Genes",
+    "versions": [29, 40]
+  }
+]
+;
+
+export default _default;

package/dist/TrackSelect/Folders/genes/data/mouse.json.d.ts

@@ -0,0 +1,10 @@
+declare const _default: [
+  {
+    "id": "genocode-basic",
+    "displayName": "GENCODE Basic Genes",
+    "versions": [21, 25]
+  }
+]
+;
+
+export default _default;

package/dist/TrackSelect/Folders/genes/human.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Gene annotations folder for human (GRCh38 assembly)
+ *
+ * Contains gene annotation tracks like GENCODE that users can
+ * select to display in the genome browser.
+ */
+export declare const humanGenesFolder: import('..').FolderDefinition<import('./shared/types').GeneRowInfo>;

package/dist/TrackSelect/Folders/genes/mouse.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Gene annotations folder for human (GRCh38 assembly)
+ *
+ * Contains gene annotation tracks like GENCODE that users can
+ * select to display in the genome browser.
+ */
+export declare const mouseGenesFolder: import('..').FolderDefinition<import('./shared/types').GeneRowInfo>;

package/dist/TrackSelect/Folders/genes/shared/columns.d.ts

@@ -0,0 +1,14 @@
+import { GridColDef } from '@mui/x-data-grid-premium';
+import { GeneRowInfo } from './types';
+/**
+ * Default columns for genes DataGrid (flat list, no grouping)
+ */
+export declare const defaultColumns: GridColDef<GeneRowInfo>[];
+/**
+ * No grouping for genes - flat list
+ */
+export declare const defaultGroupingModel: string[];
+/**
+ * Leaf field - the unique identifier
+ */
+export declare const defaultLeafField = "id";

package/dist/TrackSelect/Folders/genes/shared/createFolder.d.ts

@@ -0,0 +1,12 @@
+import { FolderDefinition } from '../../types';
+import { GeneDataFile, GeneRowInfo } from './types';
+export interface CreateGeneFolderOptions {
+    id: string;
+    label: string;
+    description?: string;
+    data: GeneDataFile;
+}
+/**
+ * Factory function that creates a FolderDefinition for genes
+ */
+export declare function createGeneFolder(options: CreateGeneFolderOptions): FolderDefinition<GeneRowInfo>;

package/dist/TrackSelect/Folders/genes/shared/treeBuilder.d.ts

@@ -0,0 +1,13 @@
+import { TreeViewBaseItem } from '@mui/x-tree-view';
+import { ExtendedTreeItemProps } from '../../../types';
+import { GeneRowInfo } from './types';
+/**
+ * Builds a flat tree structure for the TreeView panel (selected items)
+ * Since genes have no grouping, this is a simple root -> leaf structure
+ *
+ * @param selectedIds - Array of selected row IDs
+ * @param rowById - Map of row ID to row data
+ * @param rootLabel - Label for the root node
+ * @returns Tree structure for RichTreeView
+ */
+export declare function buildTreeView(selectedIds: string[], rowById: Map<string, GeneRowInfo>, rootLabel?: string): TreeViewBaseItem<ExtendedTreeItemProps>[];

package/dist/TrackSelect/Folders/genes/shared/types.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Types for genes folder data
+ */
+/**
+ * Gene track information from the JSON data
+ */
+export type GeneTrackInfo = {
+    /** Unique identifier for this gene track */
+    id: string;
+    /** Display name shown in the UI */
+    displayName: string;
+    /** Available versions for this gene annotation */
+    versions: number[];
+};
+/**
+ * Row format for DataGrid (same as track info for genes since it's flat)
+ */
+export type GeneRowInfo = {
+    id: string;
+    displayName: string;
+    versions: number[];
+};
+/**
+ * Structure of the gene JSON data files (direct array)
+ */
+export type GeneDataFile = GeneTrackInfo[];

package/dist/TrackSelect/Folders/index.d.ts

@@ -0,0 +1,14 @@
+import { Assembly, FolderDefinition } from './types';
+export { type Assembly, type FolderDefinition, type FolderRuntimeConfig, } from './types';
+/**
+ * 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
+ */
+export declare const foldersByAssembly: Record<Assembly, FolderDefinition[]>;

package/dist/TrackSelect/Folders/types.d.ts

@@ -0,0 +1,76 @@
+import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-premium';
+import { TreeViewBaseItem } from '@mui/x-tree-view';
+import { ExtendedTreeItemProps, CustomTreeItemProps } from '../types';
+export type Assembly = "GRCh38" | "mm10";
+/**
+ * Runtime configuration that can be modified by ToolbarExtras components.
+ * This allows folder-specific UI (like AssayToggle) to dynamically update
+ * how the DataGrid displays data.
+ */
+export interface FolderRuntimeConfig {
+    columns: GridColDef[];
+    groupingModel: string[];
+    leafField: string;
+}
+/**
+ * Definition for a folder in TrackSelect.
+ *
+ * A folder represents a category of data (e.g., biosamples, genes, etc.)
+ * that can be displayed in the DataGrid and TreeView. Each folder is
+ * self-contained with its own data, column definitions, and tree building logic.
+ *
+ * @template TRow - The type of row data stored in this folder
+ */
+export interface FolderDefinition<TRow = any> {
+    /** Unique identifier for this folder */
+    id: string;
+    /** Display label shown in the UI */
+    label: string;
+    /** Optional description shown in folder cards */
+    description?: string;
+    /**
+     * Single source of truth for all row data.
+     * Maps row ID to the full row object.
+     */
+    rowById: Map<string, TRow>;
+    /**
+     * Function to extract the unique ID from a row object.
+     * Used for selection tracking and lookups.
+     */
+    getRowId: (row: TRow) => string;
+    /** Column definitions for the DataGrid */
+    columns: GridColDef[];
+    /** Fields to group by in the DataGrid (row grouping) */
+    groupingModel: string[];
+    /** The field that represents the leaf level in the grouping hierarchy */
+    leafField: string;
+    /**
+     * Builds a tree structure from selected row IDs.
+     * Used to display selected items in the TreeView panel.
+     *
+     * @param selectedIds - Array of selected row IDs
+     * @param rowById - Map of row ID to row data (same as this.rowById)
+     * @returns Array of tree items to render in the TreeView
+     */
+    buildTree: (selectedIds: string[], rowById: Map<string, TRow>) => TreeViewBaseItem<ExtendedTreeItemProps>[];
+    /**
+     * Optional component to render folder-specific toolbar controls.
+     * For example, biosamples folder uses this to render an assay toggle
+     * that switches between sample-grouped and assay-grouped views.
+     *
+     * @param updateConfig - Callback to update the folder's runtime config
+     */
+    ToolbarExtras?: React.FC<{
+        updateConfig: (partial: Partial<FolderRuntimeConfig>) => void;
+    }>;
+    /**
+     * Optional custom component for rendering grouping cells in the DataGrid.
+     * If not provided, a default grouping cell renderer will be used.
+     */
+    GroupingCellComponent?: React.FC<GridRenderCellParams>;
+    /**
+     * Optional custom TreeItem component for the TreeView.
+     * If not provided, the default CustomTreeItem will be used.
+     */
+    TreeItemComponent?: React.ForwardRefExoticComponent<CustomTreeItemProps & React.RefAttributes<HTMLLIElement>>;
+}

package/dist/TrackSelect/TrackSelect.d.ts

@@ -1,8 +1,15 @@
-import { SelectionStoreInstance } from './store';
+import { FolderDefinition } from './Folders/types';
 export interface TrackSelectProps {
-    store: SelectionStoreInstance;
-    onSubmit?: (trackIds: Set<string>) => void;
+    folders: FolderDefinition[];
+    onSubmit: (selectedByFolder: Map<string, Set<string>>) => void;
     onCancel?: () => void;
-    onReset?: () => void;
+    onClear?: () => void;
+    maxTracks?: number;
+    storageKey?: string;
+    /** Initial selection to use when no stored selection exists */
+    initialSelection?: Map<string, Set<string>>;
+    open: boolean;
+    onClose: () => void;
+    title?: string;
 }
-export default function TrackSelect({ store, onSubmit, onCancel, onReset, }: TrackSelectProps): import("react/jsx-runtime").JSX.Element;
+export default function TrackSelect({ folders, onSubmit, onCancel, onClear, maxTracks, storageKey, initialSelection, open, onClose, title, }: TrackSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/TrackSelect/TreeView/CustomTreeItem.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { CustomTreeItemProps } from '../types';
+export declare const CustomTreeItem: React.ForwardRefExoticComponent<CustomTreeItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/TrackSelect/TreeView/TreeViewWrapper.d.ts

@@ -1,2 +1,2 @@
 import { TreeViewWrapperProps } from '../types';
-export declare function TreeViewWrapper({ store, items, trackIds, isSearchResult, }: TreeViewWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function TreeViewWrapper({ items, selectedCount, onRemove, TreeItemComponent, }: TreeViewWrapperProps): import("react/jsx-runtime").JSX.Element;

package/dist/TrackSelect/store.d.ts

@@ -1,5 +1,4 @@
 import { StoreApi, UseBoundStore } from 'zustand';
-import { Assembly } from './consts';
 import { SelectionAction, SelectionState } from './types';
 export type SelectionStoreInstance = UseBoundStore<StoreApi<SelectionState & SelectionAction>>;
-export declare function createSelectionStore(assembly: Assembly, initialIds?: Set<string>): UseBoundStore<StoreApi<SelectionState & SelectionAction>>;
+export declare function createSelectionStore(folderIds: string[], storageKey?: string, initialSelection?: Map<string, Set<string>>): UseBoundStore<StoreApi<SelectionState & SelectionAction>>;

package/dist/TrackSelect/types.d.ts

@@ -1,50 +1,8 @@
-import { FuseOptionKey } from 'fuse.js';
 import { UseTreeItemParameters } from '@mui/x-tree-view/useTreeItem';
 import { TreeViewBaseItem } from '@mui/x-tree-view';
-import { DataGridPremiumProps, GridRowSelectionModel } from '@mui/x-data-grid-premium';
+import { DataGridPremiumProps, GridColDef, GridRenderCellParams } from '@mui/x-data-grid-premium';
 import { ReactElement, ReactNode } from 'react';
 import { SvgIconOwnProps } from '@mui/material';
-import { SelectionStoreInstance } from './store';
-export interface SearchTracksProps {
-    query: string;
-    keyWeightMap: FuseOptionKey<any>[];
-    jsonStructure?: string;
-    treeItems?: TreeViewBaseItem<ExtendedTreeItemProps>[];
-    threshold?: number;
-    limit?: number;
-}
-/**
- * Types for the JSON-formatted tracks fomr modifiedHumanTracks.json
- */
-export type AssayInfo = {
-    id: string;
-    assay: string;
-    url: string;
-    experimentAccession: string;
-    fileAccession: string;
-};
-export type TrackInfo = {
-    name: string;
-    ontology: string;
-    lifeStage: string;
-    sampleType: string;
-    displayname: string;
-    assays: AssayInfo[];
-};
-/**
- *  Row format for DataGrid
- */
-export type RowInfo = {
-    id: string;
-    ontology: string;
-    lifeStage: string;
-    sampleType: string;
-    displayname: string;
-    assay: string;
-    experimentAccession: string;
-    fileAccession: string;
-    url: string;
-};
 /**
  * Custom Tree Props for RichTreeView Panel
  */
@@ -52,6 +10,7 @@ export type ExtendedTreeItemProps = {
     id: string;
     label: string;
     icon: string;
+    folderId?: string;
     isAssayItem?: boolean;
     /**
      * The assay name for leaf nodes (experiment accession items)
@@ -62,40 +21,39 @@ export type ExtendedTreeItemProps = {
      * this is used in updating the rowSelectionModel when removing items from the Tree View panel
      */
     allExpAccessions?: string[];
-    allRowInfo?: RowInfo[];
 };
 export type TreeViewWrapperProps = {
-    store: SelectionStoreInstance;
     items: TreeViewBaseItem<ExtendedTreeItemProps>[];
-    trackIds: Set<string>;
-    isSearchResult: boolean;
+    selectedCount: number;
+    onRemove: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
+    /** Optional custom TreeItem component */
+    TreeItemComponent?: React.ForwardRefExoticComponent<CustomTreeItemProps & React.RefAttributes<HTMLLIElement>>;
 };
 export interface CustomLabelProps {
     id: string;
     children: React.ReactNode;
     isAssayItem?: boolean;
     assayName?: string;
-    icon: React.ElementType | React.ReactElement;
+    icon?: React.ElementType | React.ReactElement | ReactNode;
+    /** Optional function to render custom icons for assay items */
+    renderIcon?: (name: string) => ReactNode;
 }
 export interface CustomTreeItemProps extends Omit<UseTreeItemParameters, "rootRef">, Omit<React.HTMLAttributes<HTMLLIElement>, "onFocus"> {
     onRemove?: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
+    /** Optional function to render custom icons for assay items */
+    renderIcon?: (name: string) => ReactNode;
 }
 /**
  * Types for useSelectionStore to keep track of selected DataGrid rows/tracks
  */
 export type SelectionState = {
-    maxTracks: number;
-    assembly: string;
-    rows: RowInfo[];
-    rowById: Map<string, RowInfo>;
-    selectedIds: Set<string>;
+    selectedByFolder: Map<string, Set<string>>;
+    activeFolderId: string;
 };
 export type SelectionAction = {
-    getTrackIds: () => Set<string>;
-    getTrackMap: () => Map<string, RowInfo>;
-    setSelected: (ids: Set<string>) => void;
-    removeIds: (removedIds: Set<string>) => void;
-    clear: () => void;
+    clear: (folderId?: string) => void;
+    setActiveFolder: (folderId: string) => void;
+    setSelection: (folderId: string, ids: Set<string>) => void;
 };
 /**
  * DataGrid Props
@@ -116,11 +74,15 @@ interface BaseTableProps extends Omit<DataGridPremiumProps, "columns"> {
      */
     toolbarIconColor?: SvgIconOwnProps["htmlColor"];
 }
-type DataGridWrapperProps = {
-    rows: RowInfo[];
+export type DataGridWrapperProps = {
+    rows: any[];
+    columns: GridColDef[];
+    groupingModel: string[];
+    leafField: string;
     selectedIds: Set<string>;
-    handleSelection: (newSelection: GridRowSelectionModel) => void;
-    sortedAssay: boolean;
+    onSelectionChange: (ids: Set<string>) => void;
+    /** Optional custom component for rendering grouping cells */
+    GroupingCellComponent?: React.FC<GridRenderCellParams>;
 };
 export type DataGridProps = DataGridWrapperProps & BaseTableProps & ({
     label?: string;