@weng-lab/genomebrowser-ui 0.4.0 → 0.4.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weng-lab/genomebrowser-ui",
   "private": false,
-  "version": "0.4.0",
+  "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

@@ -5,9 +5,12 @@ import {
   GridAutosizeOptions,
   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";
 
@@ -17,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,
@@ -32,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);
@@ -88,7 +164,7 @@ export function DataGridWrapper(props: DataGridProps) {
           apiRef={apiRef}
           rows={rows}
           columns={columns}
-          getRowId={(row) => row.id}
+          getRowId={(row: { id: string }) => row.id}
           autosizeOptions={autosizeOptions}
           rowGroupingModel={groupingModel}
           groupingColDef={{
@@ -97,20 +173,32 @@ export function DataGridWrapper(props: DataGridProps) {
             minWidth: 300,
             maxWidth: 500,
             flex: 2,
-            renderCell: (params) => <GroupingCell {...params} />,
+            renderCell: (params: GridRenderCellParams) => (
+              <GroupingCell {...params} />
+            ),
           }}
           columnVisibilityModel={columnVisibilityModel}
           onColumnVisibilityModelChange={setColumnVisibilityModel}
-          onRowSelectionModelChange={(selection) => {
-            const ids = (selection as any)?.ids ?? new Set<string>();
-            onSelectionChange(new Set(ids));
+          onRowSelectionModelChange={(selection: GridRowSelectionModel) => {
+            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: {

package/src/TrackSelect/Folders/biosamples/data/fix-human-collections.mjs

@@ -0,0 +1,119 @@
+import { readFile, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const inputPath = join(__dirname, "human_with_wgbs.json");
+const outputPath = join(__dirname, "humans_fixed.json");
+
+const expectedCounts = {
+  Core: 170,
+  Partial: 1155,
+  Ancillary: 562,
+};
+
+const counts = {
+  Core: 0,
+  Partial: 0,
+  Ancillary: 0,
+  NA: 0,
+};
+
+const specialCases = {
+  GM12866_ENCDO000ABQ: "NA",
+  neural_crest_cell_ENCDO222AAA: "Partial",
+};
+
+const specialCaseFound = Object.fromEntries(
+  Object.keys(specialCases).map((name) => [name, false]),
+);
+
+function classifyTrack(track) {
+  const specialCollection = specialCases[track.name];
+  if (specialCollection) {
+    specialCaseFound[track.name] = true;
+    return specialCollection;
+  }
+
+  const assays = new Set(
+    track.assays.map((assay) => assay.assay.toLowerCase()),
+  );
+
+  if (!assays.has("dnase")) {
+    return "Ancillary";
+  }
+
+  if (
+    assays.has("h3k4me3") &&
+    assays.has("h3k27ac") &&
+    assays.has("ctcf")
+  ) {
+    return "Core";
+  }
+
+  return "Partial";
+}
+
+function isAggregate(track) {
+  return track.name === "aggregate-biosample-data" || track.ontology === "aggregate";
+}
+
+function validateCounts() {
+  const mismatches = Object.entries(expectedCounts).filter(
+    ([collection, expected]) => counts[collection] !== expected,
+  );
+
+  if (mismatches.length === 0) {
+    return;
+  }
+
+  console.error("Classification count validation failed.");
+  console.error("Expected:", expectedCounts);
+  console.error("Actual:", counts);
+  process.exit(1);
+}
+
+const input = JSON.parse(await readFile(inputPath, "utf8"));
+const changes = [];
+
+const fixedTracks = input.tracks.map((track) => {
+  const collection = classifyTrack(track);
+
+  if (!isAggregate(track)) {
+    counts[collection] += 1;
+  }
+
+  if (track.collection !== collection) {
+    changes.push({
+      name: track.name,
+      displayName: track.displayName,
+      from: track.collection,
+      to: collection,
+    });
+  }
+
+  return {
+    ...track,
+    collection,
+  };
+});
+
+validateCounts();
+
+await writeFile(
+  outputPath,
+  `${JSON.stringify({ ...input, tracks: fixedTracks }, null, 2)}\n`,
+);
+
+console.log("Wrote", outputPath);
+console.log("Counts excluding aggregate:", counts);
+console.log("Changed tracks:", changes.length);
+console.log("Special cases found:", specialCaseFound);
+
+const changeCounts = changes.reduce((acc, change) => {
+  const key = `${change.from} -> ${change.to}`;
+  acc[key] = (acc[key] ?? 0) + 1;
+  return acc;
+}, {});
+
+console.log("Change counts:", changeCounts);