@weng-lab/genomebrowser-ui 0.2.2 → 0.2.3

package/src/TrackSelect/TreeView/TreeViewWrapper.tsx

@@ -1,145 +1,145 @@
-import { Avatar, Box, Paper, Typography } from "@mui/material";
-import { RichTreeView, TreeViewBaseItem } from "@mui/x-tree-view";
-import { useEffect, useMemo, useState } from "react";
-import {
-  CustomTreeItemProps,
-  ExtendedTreeItemProps,
-  FolderTreeConfig,
-  TreeViewWrapperProps,
-} from "../types";
-import { CustomTreeItem } from "./CustomTreeItem";
-
-/**
- * Recursively collects all item IDs that have children (expandable items)
- */
-function getAllExpandableItemIds(
-  items: TreeViewBaseItem<ExtendedTreeItemProps>[],
-): string[] {
-  const ids: string[] = [];
-  for (const item of items) {
-    if (item.children && item.children.length > 0) {
-      ids.push(item.id);
-      ids.push(...getAllExpandableItemIds(item.children));
-    }
-  }
-  return ids;
-}
-
-/**
- * Internal component that renders a single folder's tree with its own expanded state.
- */
-function FolderTree({
-  items,
-  TreeItemComponent,
-  onRemove,
-}: {
-  items: FolderTreeConfig["items"];
-  TreeItemComponent: FolderTreeConfig["TreeItemComponent"];
-  onRemove: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
-}) {
-  const allExpandableIds = useMemo(
-    () => getAllExpandableItemIds(items),
-    [items],
-  );
-  const [expandedItems, setExpandedItems] =
-    useState<string[]>(allExpandableIds);
-
-  // Auto-expand new items when they're added
-  useEffect(() => {
-    setExpandedItems((prev) => {
-      const newIds = allExpandableIds.filter((id) => !prev.includes(id));
-      if (newIds.length > 0) {
-        return [...prev, ...newIds];
-      }
-      return prev;
-    });
-  }, [allExpandableIds]);
-
-  const handleRemoveTreeItem = (
-    item: TreeViewBaseItem<ExtendedTreeItemProps>,
-  ) => {
-    onRemove(item);
-  };
-
-  const TreeItem = TreeItemComponent ?? CustomTreeItem;
-
-  return (
-    <RichTreeView
-      items={items}
-      expandedItems={expandedItems}
-      onExpandedItemsChange={(_event, ids) => setExpandedItems(ids)}
-      slots={{ item: TreeItem }}
-      slotProps={{
-        item: {
-          onRemove: handleRemoveTreeItem,
-        } as Partial<CustomTreeItemProps>,
-      }}
-      sx={{
-        ml: 1,
-        mr: 1,
-      }}
-      itemChildrenIndentation={0}
-    />
-  );
-}
-
-export function TreeViewWrapper({
-  folderTrees,
-  selectedCount,
-  onRemove,
-}: TreeViewWrapperProps) {
-  return (
-    <Paper
-      sx={{
-        height: 500,
-        width: "100%",
-        border: "10px solid",
-        borderColor: "grey.200",
-        boxSizing: "border-box",
-        borderRadius: 2,
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          gap: 1,
-          py: 1,
-          backgroundColor: "grey.200",
-          flexShrink: 0,
-        }}
-      >
-        <Avatar
-          sx={{
-            width: 30,
-            height: 30,
-            fontSize: 14,
-            fontWeight: "bold",
-            bgcolor: "white",
-            color: "text.primary",
-          }}
-        >
-          {selectedCount}
-        </Avatar>
-        <Typography fontWeight="bold">Active Tracks</Typography>
-      </Box>
-      <Box
-        sx={{
-          flex: 1,
-          overflow: "auto",
-        }}
-      >
-        {folderTrees.map((folderTree) => (
-          <FolderTree
-            key={folderTree.folderId}
-            items={folderTree.items}
-            TreeItemComponent={folderTree.TreeItemComponent}
-            onRemove={onRemove}
-          />
-        ))}
-      </Box>
-    </Paper>
-  );
-}
+import { Avatar, Box, Paper, Typography } from "@mui/material";
+import { RichTreeView, TreeViewBaseItem } from "@mui/x-tree-view";
+import { useEffect, useMemo, useState } from "react";
+import {
+  CustomTreeItemProps,
+  ExtendedTreeItemProps,
+  FolderTreeConfig,
+  TreeViewWrapperProps,
+} from "../types";
+import { CustomTreeItem } from "./CustomTreeItem";
+
+/**
+ * Recursively collects all item IDs that have children (expandable items)
+ */
+function getAllExpandableItemIds(
+  items: TreeViewBaseItem<ExtendedTreeItemProps>[],
+): string[] {
+  const ids: string[] = [];
+  for (const item of items) {
+    if (item.children && item.children.length > 0) {
+      ids.push(item.id);
+      ids.push(...getAllExpandableItemIds(item.children));
+    }
+  }
+  return ids;
+}
+
+/**
+ * Internal component that renders a single folder's tree with its own expanded state.
+ */
+function FolderTree({
+  items,
+  TreeItemComponent,
+  onRemove,
+}: {
+  items: FolderTreeConfig["items"];
+  TreeItemComponent: FolderTreeConfig["TreeItemComponent"];
+  onRemove: (item: TreeViewBaseItem<ExtendedTreeItemProps>) => void;
+}) {
+  const allExpandableIds = useMemo(
+    () => getAllExpandableItemIds(items),
+    [items],
+  );
+  const [expandedItems, setExpandedItems] =
+    useState<string[]>(allExpandableIds);
+
+  // Auto-expand new items when they're added
+  useEffect(() => {
+    setExpandedItems((prev) => {
+      const newIds = allExpandableIds.filter((id) => !prev.includes(id));
+      if (newIds.length > 0) {
+        return [...prev, ...newIds];
+      }
+      return prev;
+    });
+  }, [allExpandableIds]);
+
+  const handleRemoveTreeItem = (
+    item: TreeViewBaseItem<ExtendedTreeItemProps>,
+  ) => {
+    onRemove(item);
+  };
+
+  const TreeItem = TreeItemComponent ?? CustomTreeItem;
+
+  return (
+    <RichTreeView
+      items={items}
+      expandedItems={expandedItems}
+      onExpandedItemsChange={(_event, ids) => setExpandedItems(ids)}
+      slots={{ item: TreeItem }}
+      slotProps={{
+        item: {
+          onRemove: handleRemoveTreeItem,
+        } as Partial<CustomTreeItemProps>,
+      }}
+      sx={{
+        ml: 1,
+        mr: 1,
+      }}
+      itemChildrenIndentation={0}
+    />
+  );
+}
+
+export function TreeViewWrapper({
+  folderTrees,
+  selectedCount,
+  onRemove,
+}: TreeViewWrapperProps) {
+  return (
+    <Paper
+      sx={{
+        height: 500,
+        width: "100%",
+        border: "10px solid",
+        borderColor: "grey.200",
+        boxSizing: "border-box",
+        borderRadius: 2,
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          py: 1,
+          backgroundColor: "grey.200",
+          flexShrink: 0,
+        }}
+      >
+        <Avatar
+          sx={{
+            width: 30,
+            height: 30,
+            fontSize: 14,
+            fontWeight: "bold",
+            bgcolor: "white",
+            color: "text.primary",
+          }}
+        >
+          {selectedCount}
+        </Avatar>
+        <Typography fontWeight="bold">Active Tracks</Typography>
+      </Box>
+      <Box
+        sx={{
+          flex: 1,
+          overflow: "auto",
+        }}
+      >
+        {folderTrees.map((folderTree) => (
+          <FolderTree
+            key={folderTree.folderId}
+            items={folderTree.items}
+            TreeItemComponent={folderTree.TreeItemComponent}
+            onRemove={onRemove}
+          />
+        ))}
+      </Box>
+    </Paper>
+  );
+}

package/src/TrackSelect/store.ts

@@ -1,117 +1,117 @@
-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;
-}
+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;
+}