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

package/test/startup.test.ts

@@ -0,0 +1,206 @@
+import { Track, TrackType, createTrackStore } from "@weng-lab/genomebrowser";
+import { describe, expect, it } from "vitest";
+import { FolderDefinition } from "../src/TrackSelect/Folders/types";
+import { diffManagedTracks } from "../src/TrackSelect/managedTracks";
+
+interface TestRow {
+  id: string;
+  label: string;
+}
+
+const makeTrack = (id: string, title: string): Track => {
+  return {
+    id,
+    title,
+    height: 40,
+    trackType: TrackType.Custom,
+  } as Track;
+};
+
+const createTestFolder = (): FolderDefinition<TestRow> => {
+  const rows = [
+    { id: "test-folder/managed-a", label: "Managed A" },
+    { id: "test-folder/managed-b", label: "Managed B" },
+    { id: "test-folder/managed-c", label: "Managed C" },
+    { id: "test-folder/managed-d", label: "Managed D" },
+  ];
+
+  return {
+    id: "test-folder",
+    label: "Test Folder",
+    rows,
+    columns: [],
+    groupingModel: [],
+    leafField: "label",
+    createTrack: (row) => makeTrack(row.id, row.label),
+  };
+};
+
+const applyManagedTrackDiff = (
+  trackStore: ReturnType<typeof createTrackStore>,
+  diff: ReturnType<typeof diffManagedTracks>,
+) => {
+  const { insertTrack, removeTrack } = trackStore.getState();
+  diff.idsToRemove.forEach((id) => removeTrack(id));
+  diff.tracksToAdd.forEach((track) => insertTrack(track));
+};
+
+describe("TrackSelect managed track diff", () => {
+  it("preserves existing managed tracks on submit when selections do not change", () => {
+    const folder = createTestFolder();
+    const trackStore = createTrackStore([
+      makeTrack("external-track", "External"),
+      makeTrack("test-folder/managed-a", "Managed A"),
+    ]);
+
+    trackStore.getState().editTrack("test-folder/managed-a", { height: 120 });
+    const editedManagedTrack = trackStore
+      .getState()
+      .getTrack("test-folder/managed-a");
+
+    applyManagedTrackDiff(
+      trackStore,
+      diffManagedTracks({
+        assembly: "GRCh38",
+        currentTracks: trackStore.getState().tracks,
+        folders: [folder],
+        selectedByFolder: new Map([
+          ["test-folder", new Set(["test-folder/managed-a"])],
+        ]),
+      }),
+    );
+
+    expect(trackStore.getState().tracks.map((track) => track.id)).toEqual([
+      "external-track",
+      "test-folder/managed-a",
+    ]);
+    expect(trackStore.getState().getTrack("test-folder/managed-a")).toBe(
+      editedManagedTrack,
+    );
+    expect(
+      trackStore.getState().getTrack("test-folder/managed-a")?.height,
+    ).toBe(120);
+  });
+
+  it("appends newly selected managed tracks to the bottom of the store", () => {
+    const folder = createTestFolder();
+    const trackStore = createTrackStore([
+      makeTrack("external-track", "External"),
+      makeTrack("test-folder/managed-a", "Managed A"),
+    ]);
+
+    applyManagedTrackDiff(
+      trackStore,
+      diffManagedTracks({
+        assembly: "GRCh38",
+        currentTracks: trackStore.getState().tracks,
+        folders: [folder],
+        selectedByFolder: new Map([
+          [
+            "test-folder",
+            new Set(["test-folder/managed-a", "test-folder/managed-b"]),
+          ],
+        ]),
+      }),
+    );
+
+    expect(trackStore.getState().tracks.map((track) => track.id)).toEqual([
+      "external-track",
+      "test-folder/managed-a",
+      "test-folder/managed-b",
+    ]);
+  });
+
+  it("removes only deselected managed tracks while preserving unmanaged tracks", () => {
+    const folder = createTestFolder();
+    const trackStore = createTrackStore([
+      makeTrack("external-track", "External"),
+      makeTrack("test-folder/managed-a", "Managed A"),
+      makeTrack("test-folder/managed-b", "Managed B"),
+    ]);
+
+    applyManagedTrackDiff(
+      trackStore,
+      diffManagedTracks({
+        assembly: "GRCh38",
+        currentTracks: trackStore.getState().tracks,
+        folders: [folder],
+        selectedByFolder: new Map([
+          ["test-folder", new Set(["test-folder/managed-b"])],
+        ]),
+      }),
+    );
+
+    expect(trackStore.getState().tracks.map((track) => track.id)).toEqual([
+      "external-track",
+      "test-folder/managed-b",
+    ]);
+  });
+
+  it("applies multiple managed additions and removals in one submit flow", () => {
+    const folder = createTestFolder();
+    const trackStore = createTrackStore([
+      makeTrack("external-track", "External"),
+      makeTrack("test-folder/managed-a", "Managed A"),
+      makeTrack("test-folder/managed-c", "Managed C"),
+    ]);
+
+    applyManagedTrackDiff(
+      trackStore,
+      diffManagedTracks({
+        assembly: "GRCh38",
+        currentTracks: trackStore.getState().tracks,
+        folders: [folder],
+        selectedByFolder: new Map([
+          [
+            "test-folder",
+            new Set(["test-folder/managed-b", "test-folder/managed-d"]),
+          ],
+        ]),
+      }),
+    );
+
+    expect(trackStore.getState().tracks.map((track) => track.id)).toEqual([
+      "external-track",
+      "test-folder/managed-b",
+      "test-folder/managed-d",
+    ]);
+  });
+
+  it("uses folder-owned track creation when adding managed tracks", () => {
+    const folder: FolderDefinition<TestRow> = {
+      ...createTestFolder(),
+      createTrack: (row) => ({
+        ...makeTrack(row.id, `test-folder:${row.label}`),
+        onClick: () => `${row.id}-clicked`,
+      }),
+    };
+    const trackStore = createTrackStore([
+      makeTrack("external-track", "External"),
+    ]);
+
+    applyManagedTrackDiff(
+      trackStore,
+      diffManagedTracks({
+        assembly: "GRCh38",
+        currentTracks: trackStore.getState().tracks,
+        folders: [folder],
+        selectedByFolder: new Map([
+          ["test-folder", new Set(["test-folder/managed-a"])],
+        ]),
+      }),
+    );
+
+    expect(trackStore.getState().tracks.map((track) => track.id)).toEqual([
+      "external-track",
+      "test-folder/managed-a",
+    ]);
+
+    const managedTrack = trackStore
+      .getState()
+      .tracks.find((track) => track.id === "test-folder/managed-a");
+
+    expect(managedTrack?.title).toBe("test-folder:Managed A");
+    expect(typeof managedTrack?.onClick).toBe("function");
+  });
+});

package/test/trackSelectState.test.ts

@@ -0,0 +1,176 @@
+import { describe, expect, it, vi } from "vitest";
+import { buildSelectedTree } from "../src/TrackSelect/buildSelectedTree";
+vi.mock("../src/TrackSelect/Folders/mohd/shared/MohdGroupingCell", () => ({
+  MohdGroupingCell: () => null,
+}));
+vi.mock("../src/TrackSelect/Folders/mohd/shared/MohdTreeItem", () => ({
+  MohdTreeItem: () => null,
+}));
+vi.mock("../src/TrackSelect/Folders/mohd/shared/MohdViewSelector", () => ({
+  MohdViewSelector: () => null,
+}));
+import { humanMohdFolder } from "../src/TrackSelect/Folders/mohd/human";
+import { FolderDefinition } from "../src/TrackSelect/Folders/types";
+import { resolveFolderView } from "../src/TrackSelect/resolveFolderView";
+
+interface TestRow {
+  id: string;
+  label: string;
+  group: string;
+}
+
+const createTestFolder = (
+  id: string,
+  overrides: Partial<FolderDefinition<TestRow>> = {},
+): FolderDefinition<TestRow> => {
+  const rows = [
+    { id: `${id}-a`, label: `${id} A`, group: "group-1" },
+    { id: `${id}-b`, label: `${id} B`, group: "group-1" },
+    { id: `${id}-c`, label: `${id} C`, group: "group-2" },
+  ];
+
+  return {
+    id,
+    label: id,
+    rows,
+    columns: [],
+    groupingModel: [],
+    leafField: "label",
+    createTrack: () => null,
+    ...overrides,
+  };
+};
+
+describe("TrackSelect direct view helpers", () => {
+  it("resolves the active folder view with sensible fallback behavior", () => {
+    const folder = createTestFolder("folder-a", {
+      views: [
+        {
+          id: "default",
+          label: "Default",
+          columns: [],
+          groupingModel: [],
+          leafField: "label",
+        },
+        {
+          id: "runtime",
+          label: "Runtime",
+          columns: [{ field: "runtime-label" } as never],
+          groupingModel: ["group"],
+          leafField: "id",
+        },
+      ],
+    });
+
+    expect(resolveFolderView(folder, new Map()).id).toBe("default");
+    expect(
+      resolveFolderView(folder, new Map([[folder.id, "runtime"]])).id,
+    ).toBe("runtime");
+    expect(
+      resolveFolderView(folder, new Map([[folder.id, "missing"]])).id,
+    ).toBe("default");
+  });
+
+  it("builds a flat selected tree from the leaf field when there is no grouping", () => {
+    const folder = createTestFolder("folder-a");
+
+    const tree = buildSelectedTree({
+      folderId: folder.id,
+      rootLabel: folder.label,
+      selectedRows: folder.rows.slice(0, 2),
+      groupingModel: [],
+      leafField: "label",
+    });
+
+    expect(tree[0]?.label).toBe(folder.label);
+    expect(tree[0]?.children?.map((item) => item.label)).toEqual([
+      "folder-a A",
+      "folder-a B",
+    ]);
+  });
+
+  it("builds grouped selected trees that match the configured grouping model", () => {
+    const folder = createTestFolder("folder-a");
+
+    const tree = buildSelectedTree({
+      folderId: folder.id,
+      rootLabel: folder.label,
+      selectedRows: folder.rows,
+      groupingModel: ["group"],
+      leafField: "label",
+    });
+
+    expect(tree[0]?.children?.map((item) => item.label)).toEqual([
+      "group-1",
+      "group-2",
+    ]);
+    expect(tree[0]?.children?.[0]?.children?.map((item) => item.label)).toEqual(
+      ["folder-a A", "folder-a B"],
+    );
+  });
+
+  it("uses the default MOHD view to group by ome, then site, then sample", () => {
+    const activeView = resolveFolderView(humanMohdFolder, new Map());
+    const selectedRows = humanMohdFolder.rows.filter(
+      (row) => row.sampleId === "MOHD_EA100001",
+    );
+
+    const tree = buildSelectedTree({
+      folderId: humanMohdFolder.id,
+      rootLabel: humanMohdFolder.label,
+      selectedRows,
+      groupingModel: activeView.groupingModel,
+      leafField: activeView.leafField,
+    });
+
+    expect(activeView.id).toBe("ome");
+    expect(tree[0]?.children?.map((item) => item.label)).toEqual(["ATAC"]);
+    expect(tree[0]?.children?.[0]?.children?.map((item) => item.label)).toEqual(
+      ["CCH"],
+    );
+    expect(
+      tree[0]?.children?.[0]?.children?.[0]?.children?.map(
+        (item) => item.label,
+      ),
+    ).toEqual(["MOHD_EA100001"]);
+    expect(
+      tree[0]?.children?.[0]?.children?.[0]?.children?.[0]?.children?.map(
+        (item) => item.label,
+      ),
+    ).toEqual([
+      "FDR 0.05 peaks",
+      "Fold change signal",
+      "Pseudorep peaks",
+      "p-value signal",
+    ]);
+  });
+
+  it("builds the selected MOHD tree from the site-first view when active", () => {
+    const activeView = resolveFolderView(
+      humanMohdFolder,
+      new Map([[humanMohdFolder.id, "site"]]),
+    );
+    const selectedRows = humanMohdFolder.rows.filter(
+      (row) => row.sampleId === "MOHD_EA100001",
+    );
+
+    const tree = buildSelectedTree({
+      folderId: humanMohdFolder.id,
+      rootLabel: humanMohdFolder.label,
+      selectedRows,
+      groupingModel: activeView.groupingModel,
+      leafField: activeView.leafField,
+    });
+
+    expect(activeView.id).toBe("site");
+    expect(tree[0]?.children?.map((item) => item.label)).toEqual(["CCH"]);
+    expect(tree[0]?.children?.[0]?.children?.map((item) => item.label)).toEqual(
+      ["ATAC"],
+    );
+    expect(
+      tree[0]?.children?.[0]?.children?.[0]?.children?.map(
+        (item) => item.label,
+      ),
+    ).toEqual(["MOHD_EA100001"]);
+  });
+});

package/vite.config.ts

@@ -8,6 +8,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 
 // https://vite.dev/config/
 export default defineConfig({
+  envPrefix: ["VITE_", "NEXT_PUBLIC_"],
   plugins: [
     react(),
     dts({

package/vitest.config.ts

@@ -0,0 +1,20 @@
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { fileURLToPath } from "url";
+import { defineConfig } from "vitest/config";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      buffer: "buffer",
+      "@weng-lab/genomebrowser": path.resolve(__dirname, "../core/src/lib.ts"),
+      "logo-test": path.resolve(__dirname, "./test/mocks/logo-test.tsx"),
+    },
+  },
+  test: {
+    environment: "node",
+  },
+});

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

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

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

@@ -1,28 +0,0 @@
-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 (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 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/genes/shared/treeBuilder.d.ts

@@ -1,13 +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 declare function buildTreeView(selectedIds: string[], rowById: Map<string, GeneRowInfo>, rootLabel?: string): TreeViewBaseItem<ExtendedTreeItemProps>[];

package/dist/TrackSelect/Folders/other-tracks/shared/treeBuilder.d.ts

@@ -1,4 +0,0 @@
-import { TreeViewBaseItem } from '@mui/x-tree-view';
-import { ExtendedTreeItemProps } from '../../../types';
-import { OtherTrackInfo } from './types';
-export declare function buildTreeView(selectedIds: string[], rowById: Map<string, OtherTrackInfo>, rootLabel?: string): TreeViewBaseItem<ExtendedTreeItemProps>[];

package/dist/TrackSelect/store.d.ts

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