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

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

@@ -1,78 +0,0 @@
-import { FormControlLabel, Switch } from "@mui/material";
-import { FolderRuntimeConfig } from "../../types";
-import {
-  defaultColumns,
-  defaultGroupingModel,
-  defaultLeafField,
-  sortedByAssayColumns,
-  sortedByAssayGroupingModel,
-  sortedByAssayLeafField,
-} from "./columns";
-import { buildTreeView, buildSortedAssayTreeView } from "./treeBuilder";
-
-export interface AssayToggleProps {
-  updateConfig: (partial: Partial<FolderRuntimeConfig>) => void;
-  folderId: string;
-  label: string;
-  config: FolderRuntimeConfig;
-}
-
-/**
- * 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"]
- * - leafField: "assay" vs "displayName"
- * - buildTree: Different tree builder function
- */
-export function AssayToggle({
-  updateConfig,
-  folderId,
-  label,
-  config,
-}: AssayToggleProps) {
-  // Derive toggle state from current config's leafField
-  const sortedByAssay = config.leafField === sortedByAssayLeafField;
-
-  const handleToggle = () => {
-    const newValue = !sortedByAssay;
-
-    if (newValue) {
-      // Switch to assay-grouped view
-      updateConfig({
-        columns: sortedByAssayColumns,
-        groupingModel: sortedByAssayGroupingModel,
-        leafField: sortedByAssayLeafField,
-        buildTree: (selectedIds, rowById) =>
-          buildSortedAssayTreeView(selectedIds, rowById, label, folderId),
-      });
-    } else {
-      // Switch back to default (sample-grouped) view
-      updateConfig({
-        columns: defaultColumns,
-        groupingModel: defaultGroupingModel,
-        leafField: defaultLeafField,
-        buildTree: (selectedIds, rowById) =>
-          buildTreeView(selectedIds, rowById, label, folderId),
-      });
-    }
-  };
-
-  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/Folders/biosamples/shared/treeBuilder.ts

@@ -1,224 +0,0 @@
-import { TreeViewBaseItem } from "@mui/x-tree-view";
-import { ExtendedTreeItemProps } from "../../../types";
-import { BiosampleRowInfo } from "./types";
-import { assayTypes, ontologyTypes, formatAssayType } from "./constants";
-
-/** Format an ID like "h3k27ac-ENCFF922YMQ" or "folder::h3k27ac-ENCFF922YMQ" to "H3K27ac - ENCFF922YMQ" */
-function formatIdLabel(id: string): string {
-  // Remove folder prefix if present (e.g., "FolderName::h3k27ac-ENCFF922YMQ" -> "h3k27ac-ENCFF922YMQ")
-  const rawId = id.includes("::") ? id.split("::").pop()! : id;
-
-  const hyphenIndex = rawId.indexOf("-");
-  if (hyphenIndex === -1) return rawId;
-
-  const assayPart = rawId.substring(0, hyphenIndex);
-  const accessionPart = rawId.substring(hyphenIndex + 1);
-
-  return `${formatAssayType(assayPart)} - ${accessionPart}`;
-}
-
-/**
- * Creates the root node for the tree view
- */
-function createRootNode(
-  label: string,
-  folderId: string,
-): TreeViewBaseItem<ExtendedTreeItemProps> {
-  return {
-    id: `${folderId}::root`,
-    label,
-    icon: "folder",
-    children: [],
-    allExpAccessions: [],
-  };
-}
-
-/**
- * Builds tree in the sorted by assay view
- * Hierarchy: Assay -> Ontology -> DisplayName (leaf)
- *
- * This is the reverse of the default view - instead of grouping by sample first,
- * we group by assay first, making displayName the leaf node.
- *
- * @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 function buildSortedAssayTreeView(
-  selectedIds: string[],
-  rowById: Map<string, BiosampleRowInfo>,
-  rootLabel: string = "Biosamples",
-  folderId: string = "",
-): TreeViewBaseItem<ExtendedTreeItemProps>[] {
-  const root = createRootNode(rootLabel, folderId);
-  const assayMap = new Map<string, TreeViewBaseItem<ExtendedTreeItemProps>>();
-  const ontologyMap = new Map<
-    string,
-    TreeViewBaseItem<ExtendedTreeItemProps>
-  >();
-  // Track which displayName nodes exist per assay+ontology combination
-  // and which experiment IDs they contain
-  const displayNameMap = new Map<
-    string,
-    TreeViewBaseItem<ExtendedTreeItemProps>
-  >();
-
-  const selectedRows = selectedIds.reduce<BiosampleRowInfo[]>((acc, id) => {
-    const row = rowById.get(id);
-    if (row) acc.push(row);
-    return acc;
-  }, []);
-
-  selectedRows.forEach((row) => {
-    const assayKey = `${folderId}::${row.assay}`;
-    let assayNode = assayMap.get(assayKey);
-    if (!assayNode) {
-      assayNode = {
-        id: assayKey,
-        isAssayItem: true,
-        label: row.assay,
-        icon: "removeable",
-        assayName: row.assay, // Add assayName so the icon renders correctly
-        children: [],
-        allExpAccessions: [],
-      };
-      assayMap.set(assayKey, assayNode);
-      root.children!.push(assayNode);
-    }
-
-    const ontologyKey = `${folderId}::${row.assay}-${row.ontology}`;
-    let ontologyNode = ontologyMap.get(ontologyKey);
-    if (!ontologyNode) {
-      ontologyNode = {
-        id: ontologyKey,
-        isAssayItem: false,
-        label: row.ontology,
-        icon: "removeable",
-        children: [],
-        allExpAccessions: [],
-      };
-      assayNode.children!.push(ontologyNode);
-      ontologyMap.set(ontologyKey, ontologyNode);
-    }
-
-    // DisplayName is now the leaf node (no children, no assay icon)
-    const displayNameKey = `${folderId}::${row.assay}-${row.ontology}-${row.displayName}`;
-    let displayNameNode = displayNameMap.get(displayNameKey);
-    if (!displayNameNode) {
-      displayNameNode = {
-        id: displayNameKey,
-        isAssayItem: false,
-        label: row.displayName,
-        icon: "removeable",
-        children: [],
-        allExpAccessions: [],
-      };
-      ontologyNode.children!.push(displayNameNode);
-      displayNameMap.set(displayNameKey, displayNameNode);
-    }
-
-    // Add this experiment ID to all parent nodes' allExpAccessions
-    assayNode.allExpAccessions!.push(row.id);
-    ontologyNode.allExpAccessions!.push(row.id);
-    displayNameNode.allExpAccessions!.push(row.id);
-  });
-
-  // standardize the order of the assay folders
-  root.children!.sort((a, b): number => {
-    const aAssay = a.id.split("::")[1] ?? a.id;
-    const bAssay = b.id.split("::")[1] ?? b.id;
-    return assayTypes.indexOf(aAssay) - assayTypes.indexOf(bAssay);
-  });
-
-  return [root];
-}
-
-/**
- * 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 function buildTreeView(
-  selectedIds: string[],
-  rowById: Map<string, BiosampleRowInfo>,
-  rootLabel: string = "Biosamples",
-  folderId: string = "",
-): TreeViewBaseItem<ExtendedTreeItemProps>[] {
-  const root = createRootNode(rootLabel, folderId);
-  const ontologyMap = new Map<
-    string,
-    TreeViewBaseItem<ExtendedTreeItemProps>
-  >();
-  const displayNameMap = new Map<
-    string,
-    TreeViewBaseItem<ExtendedTreeItemProps>
-  >();
-
-  const selectedRows = selectedIds.reduce<BiosampleRowInfo[]>((acc, id) => {
-    const row = rowById.get(id);
-    if (row) acc.push(row);
-    return acc;
-  }, []);
-
-  selectedRows.forEach((row) => {
-    if (!row) {
-      return;
-    }
-    const ontologyKey = `${folderId}::${row.ontology}`;
-    let ontologyNode = ontologyMap.get(ontologyKey);
-    if (!ontologyNode) {
-      ontologyNode = {
-        id: ontologyKey,
-        label: row.ontology,
-        icon: "removeable",
-        children: [],
-        allExpAccessions: [],
-      };
-      ontologyMap.set(ontologyKey, ontologyNode);
-      root.children!.push(ontologyNode);
-    }
-
-    const displayNameKey = `${folderId}::${row.ontology}-${row.displayName}`;
-    let displayNameNode = displayNameMap.get(displayNameKey);
-    if (!displayNameNode) {
-      displayNameNode = {
-        id: displayNameKey,
-        label: row.displayName,
-        icon: "removeable",
-        children: [],
-        allExpAccessions: [],
-      };
-      ontologyNode.children!.push(displayNameNode);
-      displayNameMap.set(displayNameKey, displayNameNode);
-    }
-
-    const expNode: TreeViewBaseItem<ExtendedTreeItemProps> = {
-      id: row.id,
-      label: formatIdLabel(row.id),
-      icon: "removeable",
-      assayName: row.assay,
-      children: [],
-      allExpAccessions: [row.id],
-    };
-    displayNameNode.children!.push(expNode);
-
-    ontologyNode.allExpAccessions!.push(row.id);
-    displayNameNode.allExpAccessions!.push(row.id);
-  });
-
-  // standardize the order of the ontology folders
-  root.children!.sort((a, b): number => {
-    const aOntology = a.id.split("::")[1] ?? a.id;
-    const bOntology = b.id.split("::")[1] ?? b.id;
-    return ontologyTypes.indexOf(aOntology) - ontologyTypes.indexOf(bOntology);
-  });
-
-  return [root];
-}

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

@@ -1,45 +0,0 @@
-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 function buildTreeView(
-  selectedIds: string[],
-  rowById: Map<string, GeneRowInfo>,
-  rootLabel: string = "Genes",
-): TreeViewBaseItem<ExtendedTreeItemProps>[] {
-  // Root node
-  const root: TreeViewBaseItem<ExtendedTreeItemProps> = {
-    id: "root",
-    label: rootLabel,
-    icon: "folder",
-    children: [],
-    allExpAccessions: [],
-  };
-
-  // Get selected rows and add as direct children of root
-  selectedIds.forEach((id) => {
-    const row = rowById.get(id);
-    if (row) {
-      const leafNode: TreeViewBaseItem<ExtendedTreeItemProps> = {
-        id: row.id,
-        label: row.displayName,
-        icon: "removeable",
-        children: [],
-        allExpAccessions: [row.id],
-      };
-      root.children!.push(leafNode);
-      root.allExpAccessions!.push(row.id);
-    }
-  });
-
-  return [root];
-}

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

@@ -1,34 +0,0 @@
-import { TreeViewBaseItem } from "@mui/x-tree-view";
-import { ExtendedTreeItemProps } from "../../../types";
-import { OtherTrackInfo } from "./types";
-
-export function buildTreeView(
-  selectedIds: string[],
-  rowById: Map<string, OtherTrackInfo>,
-  rootLabel: string = "Other Tracks",
-): TreeViewBaseItem<ExtendedTreeItemProps>[] {
-  const root: TreeViewBaseItem<ExtendedTreeItemProps> = {
-    id: "root",
-    label: rootLabel,
-    icon: "folder",
-    children: [],
-    allExpAccessions: [],
-  };
-
-  selectedIds.forEach((id) => {
-    const row = rowById.get(id);
-    if (row) {
-      const leafNode: TreeViewBaseItem<ExtendedTreeItemProps> = {
-        id: row.id,
-        label: row.name,
-        icon: "removeable",
-        children: [],
-        allExpAccessions: [row.id],
-      };
-      root.children!.push(leafNode);
-      root.allExpAccessions!.push(row.id);
-    }
-  });
-
-  return [root];
-}

package/src/TrackSelect/store.ts

@@ -1,117 +0,0 @@
-import { create, StoreApi, UseBoundStore } from "zustand";
-import { SelectionAction, SelectionState } from "./types";
-
-export type SelectionStoreInstance = UseBoundStore<
-  StoreApi<SelectionState & SelectionAction>
->;
-
-const DEFAULT_STORAGE_KEY = "trackSelect_selection";
-
-type SerializedSelection = Record<string, string[]>;
-
-const serializeSelection = (
-  selection: Map<string, Set<string>>,
-): SerializedSelection => {
-  const obj: SerializedSelection = {};
-  selection.forEach((ids, folderId) => {
-    obj[folderId] = Array.from(ids);
-  });
-  return obj;
-};
-
-const deserializeSelection = (
-  data: SerializedSelection,
-): Map<string, Set<string>> => {
-  const map = new Map<string, Set<string>>();
-  Object.entries(data).forEach(([folderId, ids]) => {
-    map.set(folderId, new Set(ids));
-  });
-  return map;
-};
-
-const loadFromStorage = (
-  storageKey: string,
-): Map<string, Set<string>> | undefined => {
-  try {
-    const stored = sessionStorage.getItem(storageKey);
-    if (stored) {
-      const parsed = JSON.parse(stored) as SerializedSelection;
-      return deserializeSelection(parsed);
-    }
-  } catch {
-    // Ignore storage errors
-  }
-  return undefined;
-};
-
-const saveToStorage = (
-  selection: Map<string, Set<string>>,
-  storageKey: string,
-) => {
-  try {
-    const serialized = serializeSelection(selection);
-    sessionStorage.setItem(storageKey, JSON.stringify(serialized));
-  } catch {
-    // Ignore storage errors
-  }
-};
-
-const buildSelectionMap = (
-  folderIds: string[],
-  initialSelection?: Map<string, Set<string>>,
-) => {
-  const map = new Map<string, Set<string>>();
-  folderIds.forEach((folderId) => {
-    const initial = initialSelection?.get(folderId);
-    map.set(folderId, initial ? new Set(initial) : new Set<string>());
-  });
-  return map;
-};
-
-export function createSelectionStore(
-  folderIds: string[],
-  storageKey: string = DEFAULT_STORAGE_KEY,
-  initialSelection?: Map<string, Set<string>>,
-) {
-  const storedSelection = loadFromStorage(storageKey);
-  // Storage wins: use stored if exists, else fall back to initialSelection
-  const selectedByFolder = buildSelectionMap(
-    folderIds,
-    storedSelection ?? initialSelection,
-  );
-  const activeFolderId = folderIds[0] ?? "";
-
-  const store = create<SelectionState & SelectionAction>((set) => ({
-    selectedByFolder,
-    activeFolderId,
-    clear: (folderId?: string) =>
-      set((state) => {
-        if (folderId) {
-          const next = new Map(state.selectedByFolder);
-          next.set(folderId, new Set<string>());
-          return { selectedByFolder: next };
-        }
-
-        const next = new Map<string, Set<string>>();
-        state.selectedByFolder.forEach((_value, id) => {
-          next.set(id, new Set<string>());
-        });
-        return { selectedByFolder: next };
-      }),
-    setActiveFolder: (folderId: string) =>
-      set(() => ({ activeFolderId: folderId })),
-    setSelection: (folderId: string, ids: Set<string>) =>
-      set((state) => {
-        const next = new Map(state.selectedByFolder);
-        next.set(folderId, new Set(ids));
-        return { selectedByFolder: next };
-      }),
-  }));
-
-  // Subscribe to changes and persist to storage
-  store.subscribe((state) => {
-    saveToStorage(state.selectedByFolder, storageKey);
-  });
-
-  return store;
-}