@weng-lab/genomebrowser-ui 0.1.1 → 0.1.3

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@weng-lab/genomebrowser-ui",
   "private": false,
-  "version": "0.1.1",
+  "version": "0.1.3",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
-  "main": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "module": "dist/genomebrowser-ui.es.js",
+  "types": "dist/lib.d.ts",
   "dependencies": {
     "fuse.js": "^7.1.0",
     "zustand": "^5.0.8"

package/src/TrackSelect/DataGrid/DataGridWrapper.tsx

@@ -31,7 +31,7 @@ export function DataGridWrapper(props: DataGridProps) {
     sortedAssay,
     handleSelection,
     rows,
-    selectedIds
+    selectedTracks
   } = props;
 
   const CustomToolbarWrapper = useMemo(() => {
@@ -89,7 +89,7 @@ export function DataGridWrapper(props: DataGridProps) {
           columnVisibilityModel={{ displayname: false }} // so you don't see a second name column
           onRowSelectionModelChange={handleSelection}
           rowSelectionPropagation={{ descendants: true }}
-          rowSelectionModel={{ type: "include", ids: new Set(selectedIds) }}
+          rowSelectionModel={{ type: "include", ids: new Set(selectedTracks.keys()) }}
           slots={{
             toolbar: CustomToolbarWrapper,
           }}

package/src/TrackSelect/DataGrid/dataGridHelpers.tsx

@@ -1,12 +1,7 @@
 import { capitalize } from "@mui/material";
 import Fuse, { FuseResult } from "fuse.js";
 import tracksData from "../Data/modifiedHumanTracks.json";
-import { 
-  AssayInfo, 
-  RowInfo, 
-  SearchTracksProps, 
-  TrackInfo
-} from "../types";
+import { AssayInfo, RowInfo, SearchTracksProps, TrackInfo } from "../types";
 
 function formatAssayType(assay: string): string {
   switch (assay) {
@@ -62,7 +57,7 @@ export function getTracksByAssayAndOntology(
  */
 export function flattenIntoRow(track: TrackInfo): RowInfo {
   const { ontology, lifeStage, sampleType, displayname } = track;
-  const { assay, experimentAccession, fileAccession } = track.assays[0];
+  const { assay, experimentAccession, fileAccession, url } = track.assays[0];
 
   return {
     ontology: capitalize(ontology),
@@ -72,6 +67,7 @@ export function flattenIntoRow(track: TrackInfo): RowInfo {
     assay: formatAssayType(assay),
     experimentAccession,
     fileAccession,
+    url,
   };
 }
 
@@ -111,4 +107,4 @@ export function searchTracks({
     keys: keyWeightMap,
   });
   return fuse.search(query);
-}
+}

package/src/TrackSelect/TrackSelect.tsx

@@ -14,8 +14,8 @@ import {
   buildTreeView,
   searchTreeItems,
 } from "./TreeView/treeViewHelpers";
-import { SearchTracksProps, ExtendedTreeItemProps } from "./types";
-import { rows, rowById, getActiveTracks } from "./consts";
+import { SearchTracksProps, ExtendedTreeItemProps, RowInfo } from "./types";
+import { rows, rowById } from "./consts";
 import React, { useState, useMemo, useEffect } from "react";
 import { TreeViewBaseItem } from "@mui/x-tree-view";
 import { GridRowSelectionModel } from "@mui/x-data-grid";
@@ -37,21 +37,21 @@ export default function TrackSelect({ store }: TrackSelectProps) {
   const [sortedAssay, setSortedAssay] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const [isSearchResult, setIsSearchResult] = useState(false);
-  const selectedIds = store((s) => s.selectedIds);
+  const selectedTracks = store((s) => s.selectedTracks);
   const setSelected = store((s) => s.setSelected);
   const clear = store((s) => s.clear);
   const MAX_ACTIVE = store((s) => s.maxTracks);
 
-  // Derive active tracks from selectedIds (filters out auto-generated group IDs)
+  // Derive active tracks from selectedTracks (all keys are real track IDs)
   const activeTracks = useMemo(
-    () => getActiveTracks(selectedIds),
-    [selectedIds],
+    () => new Set(selectedTracks.keys()),
+    [selectedTracks],
   );
 
   const treeItems = useMemo(() => {
     return sortedAssay
       ? buildSortedAssayTreeView(
-          Array.from(selectedIds),
+          Array.from(selectedTracks.keys()),
           {
             id: "1",
             isAssayItem: false,
@@ -63,7 +63,7 @@ export default function TrackSelect({ store }: TrackSelectProps) {
           rowById,
         )
       : buildTreeView(
-          Array.from(selectedIds),
+          Array.from(selectedTracks.keys()),
           {
             id: "1",
             isAssayItem: false,
@@ -74,7 +74,7 @@ export default function TrackSelect({ store }: TrackSelectProps) {
           },
           rowById,
         );
-  }, [selectedIds, sortedAssay]);
+  }, [selectedTracks, sortedAssay]);
 
   const [filteredRows, setFilteredRows] = useState(rows);
   const [filteredTreeItems, setFilteredTreeItems] = useState([
@@ -176,15 +176,23 @@ export default function TrackSelect({ store }: TrackSelectProps) {
   const handleSelection = (newSelection: GridRowSelectionModel) => {
     const idsSet =
       (newSelection && (newSelection as any).ids) ?? new Set<string>();
-    const newActiveTracks = getActiveTracks(idsSet);
+
+    // Build a Map of only real track IDs (filter out auto-generated group IDs)
+    const newTracks = new Map<string, RowInfo>();
+    idsSet.forEach((id: string) => {
+      const row = rowById.get(id);
+      if (row) {
+        newTracks.set(id, row);
+      }
+    });
 
     // Block only if the new selection would exceed the limit
-    if (newActiveTracks.size > MAX_ACTIVE) {
+    if (newTracks.size > MAX_ACTIVE) {
       setLimitDialogOpen(true);
       return;
     }
 
-    setSelected(idsSet);
+    setSelected(newTracks);
   };
 
   return (
@@ -214,7 +222,7 @@ export default function TrackSelect({ store }: TrackSelectProps) {
                 ? `${filteredRows.length} Search Results`
                 : `${rows.length} Available Tracks`
             }
-            selectedIds={selectedIds}
+            selectedTracks={selectedTracks}
             handleSelection={handleSelection}
             sortedAssay={sortedAssay}
           />
@@ -223,7 +231,7 @@ export default function TrackSelect({ store }: TrackSelectProps) {
           <TreeViewWrapper
             store={store}
             items={filteredTreeItems}
-            selectedIds={selectedIds}
+            selectedTracks={selectedTracks}
             activeTracks={activeTracks}
             isSearchResult={isSearchResult}
           />

package/src/TrackSelect/store.ts

@@ -1,26 +1,27 @@
 import { create, StoreApi, UseBoundStore } from "zustand";
-import { SelectionState, SelectionAction } from "./types";
+import { SelectionState, SelectionAction, RowInfo } from "./types";
 
 export type SelectionStoreInstance = UseBoundStore<
   StoreApi<SelectionState & SelectionAction>
 >;
 
 export function createSelectionStore() {
-  return create<SelectionState & SelectionAction>((set) => ({
+  return create<SelectionState & SelectionAction>((set, get) => ({
     maxTracks: 30,
-    selectedIds: new Set<string>(),
-    setSelected: (ids: Set<string>) =>
+    selectedTracks: new Map<string, RowInfo>(),
+    selectedIds: () => new Set(get().selectedTracks.keys()),
+    setSelected: (tracks: Map<string, RowInfo>) =>
       set(() => ({
-        selectedIds: new Set(ids),
+        selectedTracks: new Map(tracks),
       })),
     removeIds: (removedIds: Set<string>) =>
       set((state) => {
-        const next = new Set(state.selectedIds);
+        const next = new Map(state.selectedTracks);
         removedIds.forEach((id) => {
           next.delete(id);
         });
-        return { selectedIds: next };
+        return { selectedTracks: next };
       }),
-    clear: () => set(() => ({ selectedIds: new Set<string>() })),
+    clear: () => set(() => ({ selectedTracks: new Map<string, RowInfo>() })),
   }));
 }

package/src/TrackSelect/types.ts

@@ -48,6 +48,7 @@ export type RowInfo = {
   assay: string;
   experimentAccession: string;
   fileAccession: string;
+  url: string;
 };
 
 /**
@@ -70,7 +71,7 @@ export type ExtendedTreeItemProps = {
 export type TreeViewWrapperProps = {
   store: SelectionStoreInstance;
   items: TreeViewBaseItem<ExtendedTreeItemProps>[];
-  selectedIds: Set<string>;
+  selectedTracks: Map<string, RowInfo>;
   activeTracks: Set<string>; // doesn't have the autogenerated row groupings to provide accurate number of tracks
   isSearchResult: boolean;
 };
@@ -89,15 +90,16 @@ export interface CustomTreeItemProps
 }
 
 /**
- * Types for useSelectionStore to keep track of selected DataGrid row ids/tracks
+ * Types for useSelectionStore to keep track of selected DataGrid rows/tracks
  */
 export type SelectionState = {
   maxTracks: number;
-  selectedIds: Set<string>;
+  selectedTracks: Map<string, RowInfo>;
 };
 
 export type SelectionAction = {
-  setSelected: (ids: Set<string>) => void;
+  selectedIds: () => Set<string>;
+  setSelected: (tracks: Map<string, RowInfo>) => void;
   removeIds: (removedIds: Set<string>) => void;
   clear: () => void;
 };
@@ -124,7 +126,7 @@ interface BaseTableProps extends Omit<DataGridPremiumProps, "columns"> {
 
 type DataGridWrapperProps = {
   rows: RowInfo[];
-  selectedIds: Set<string>;
+  selectedTracks: Map<string, RowInfo>;
   handleSelection: (newSelection: GridRowSelectionModel) => void;
   sortedAssay: boolean;
 };

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "files": [],
-  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
 }