@weng-lab/genomebrowser-ui 0.4.1 → 0.4.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weng-lab/genomebrowser-ui",
   "private": false,
-  "version": "0.4.1",
+  "version": "0.4.2",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -23,7 +23,7 @@
     "@mui/x-data-grid-premium": "^8.19.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@weng-lab/genomebrowser": "1.8.5"
+    "@weng-lab/genomebrowser": "1.8.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.34.0",

package/src/TrackSelect/DataGrid/DataGridWrapper.tsx

@@ -6,10 +6,11 @@ import {
   GridColDef,
   GridColumnVisibilityModel,
   GridRenderCellParams,
+  GridRowId,
   GridRowSelectionModel,
   useGridApiRef,
 } from "@mui/x-data-grid-premium";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { DataGridProps } from "../types";
 import { DefaultGroupingCell } from "./DefaultGroupingCell";
 
@@ -19,6 +20,25 @@ const autosizeOptions: GridAutosizeOptions = {
   outliersFactor: 1.5,
 };
 
+const areSetsEqual = <T,>(a: Set<T>, b: Set<T>) => {
+  if (a.size !== b.size) {
+    return false;
+  }
+
+  for (const value of a) {
+    if (!b.has(value)) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+const areSelectionModelsEqual = (
+  a: GridRowSelectionModel,
+  b: GridRowSelectionModel,
+) => a.type === b.type && areSetsEqual(a.ids, b.ids);
+
 export function DataGridWrapper(props: DataGridProps) {
   const {
     columns,
@@ -34,6 +54,60 @@ export function DataGridWrapper(props: DataGridProps) {
 
   const apiRef = useGridApiRef();
 
+  const rowIdSet = useMemo(
+    () => new Set(rows.map((row: { id: string }) => row.id)),
+    [rows],
+  );
+
+  const filterToLeafIds = useCallback(
+    (ids: Set<GridRowId>) =>
+      new Set([...ids].map(String).filter((id) => rowIdSet.has(id))),
+    [rowIdSet],
+  );
+
+  const getPropagatedSelectionModel = useCallback(
+    (ids: Set<GridRowId>) => {
+      const selectionModel: GridRowSelectionModel = {
+        type: "include",
+        ids,
+      };
+
+      return apiRef.current.getPropagatedRowSelectionModel
+        ? apiRef.current.getPropagatedRowSelectionModel(selectionModel)
+        : selectionModel;
+    },
+    [apiRef],
+  );
+
+  const [rowSelectionModel, setRowSelectionModel] =
+    useState<GridRowSelectionModel>(() => ({
+      type: "include",
+      ids: new Set(selectedIds),
+    }));
+
+  useEffect(() => {
+    const currentLeafIds = filterToLeafIds(rowSelectionModel.ids);
+    if (areSetsEqual(currentLeafIds, selectedIds)) {
+      return;
+    }
+
+    const nextSelectionModel = getPropagatedSelectionModel(
+      new Set(selectedIds),
+    );
+
+    setRowSelectionModel((currentSelectionModel) =>
+      areSelectionModelsEqual(currentSelectionModel, nextSelectionModel)
+        ? currentSelectionModel
+        : nextSelectionModel,
+    );
+  }, [
+    filterToLeafIds,
+    getPropagatedSelectionModel,
+    groupingModel,
+    rowSelectionModel.ids,
+    selectedIds,
+  ]);
+
   useEffect(() => {
     if (apiRef.current && apiRef.current.autosizeColumns) {
       apiRef.current.autosizeColumns(autosizeOptions);
@@ -106,15 +180,25 @@ export function DataGridWrapper(props: DataGridProps) {
           columnVisibilityModel={columnVisibilityModel}
           onColumnVisibilityModelChange={setColumnVisibilityModel}
           onRowSelectionModelChange={(selection: GridRowSelectionModel) => {
-            const ids = selection.ids ?? new Set<string>();
-            onSelectionChange(new Set([...ids].map(String)));
+            const nextSelectionModel = getPropagatedSelectionModel(
+              selection.ids,
+            );
+
+            setRowSelectionModel((currentSelectionModel) =>
+              areSelectionModelsEqual(currentSelectionModel, nextSelectionModel)
+                ? currentSelectionModel
+                : nextSelectionModel,
+            );
+
+            const leafIds = filterToLeafIds(nextSelectionModel.ids);
+
+            if (!areSetsEqual(leafIds, selectedIds)) {
+              onSelectionChange(leafIds);
+            }
           }}
-          rowSelectionPropagation={{ descendants: true, parents: false }}
+          rowSelectionPropagation={{ descendants: true, parents: true }}
           disableRowGrouping={false}
-          rowSelectionModel={{
-            type: "include",
-            ids: selectedIds,
-          }}
+          rowSelectionModel={rowSelectionModel}
           slotProps={{
             filterPanel: {
               filterFormProps: {