@weng-lab/genomebrowser-ui 0.2.0 → 0.2.2

package/src/TrackSelect/Folders/biosamples/human.ts

@@ -1,17 +1,17 @@
-import { createBiosampleFolder } from "./shared/createFolder";
-import humanData from "./data/human.json";
-import { BiosampleDataFile } from "./shared/types";
-
-/**
- * Human biosamples folder configuration for GRCh38 assembly.
- *
- * Contains epigenomic data (DNase, ATAC, H3K4me3, H3K27ac, CTCF, cCRE, RNA-seq, ChromHMM)
- * from human tissue samples, primary cells, cell lines, and organoids.
- */
-export const humanBiosamplesFolder = createBiosampleFolder({
-  id: "human-biosamples",
-  label: "Human Biosamples",
-  description:
-    "Epigenomic data from human tissue samples, primary cells, cell lines, and organoids.",
-  data: humanData as BiosampleDataFile,
-});
+import { createBiosampleFolder } from "./shared/createFolder";
+import humanData from "./data/human.json";
+import { BiosampleDataFile } from "./shared/types";
+
+/**
+ * Human biosamples folder configuration for GRCh38 assembly.
+ *
+ * Contains epigenomic data (DNase, ATAC, H3K4me3, H3K27ac, CTCF, cCRE, RNA-seq, ChromHMM)
+ * from human tissue samples, primary cells, cell lines, and organoids.
+ */
+export const humanBiosamplesFolder = createBiosampleFolder({
+  id: "human-biosamples",
+  label: "Human Biosamples",
+  description:
+    "Epigenomic data from human tissue samples, primary cells, cell lines, and organoids.",
+  data: humanData as BiosampleDataFile,
+});

package/src/TrackSelect/Folders/biosamples/mouse.ts

@@ -1,17 +1,17 @@
-import { createBiosampleFolder } from "./shared/createFolder";
-import mouseData from "./data/mouse.json";
-import { BiosampleDataFile } from "./shared/types";
-
-/**
- * Mouse biosamples folder configuration for mm10 assembly.
- *
- * Contains epigenomic data (DNase, ATAC, H3K4me3, H3K27ac, CTCF, cCRE, RNA-seq, ChromHMM)
- * from mouse tissue samples, primary cells, cell lines, and organoids.
- */
-export const mouseBiosamplesFolder = createBiosampleFolder({
-  id: "mouse-biosamples",
-  label: "Mouse Biosamples",
-  description:
-    "Epigenomic data from mouse tissue samples, primary cells, cell lines, and organoids.",
-  data: mouseData as BiosampleDataFile,
-});
+import { createBiosampleFolder } from "./shared/createFolder";
+import mouseData from "./data/mouse.json";
+import { BiosampleDataFile } from "./shared/types";
+
+/**
+ * Mouse biosamples folder configuration for mm10 assembly.
+ *
+ * Contains epigenomic data (DNase, ATAC, H3K4me3, H3K27ac, CTCF, cCRE, RNA-seq, ChromHMM)
+ * from mouse tissue samples, primary cells, cell lines, and organoids.
+ */
+export const mouseBiosamplesFolder = createBiosampleFolder({
+  id: "mouse-biosamples",
+  label: "Mouse Biosamples",
+  description:
+    "Epigenomic data from mouse tissue samples, primary cells, cell lines, and organoids.",
+  data: mouseData as BiosampleDataFile,
+});

package/src/TrackSelect/Folders/biosamples/shared/AssayToggle.tsx

@@ -1,78 +1,78 @@
-import { FormControlLabel, Switch } from "@mui/material";
-import { FolderRuntimeConfig } from "../../types";
-import {
-  defaultColumns,
-  defaultGroupingModel,
-  defaultLeafField,
-  sortedByAssayColumns,
-  sortedByAssayGroupingModel,
-  sortedByAssayLeafField,
-} from "./columns";
-import { buildTreeView, buildSortedAssayTreeView } from "./treeBuilder";
-
-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 function AssayToggle({
-  updateConfig,
-  folderId,
-  label,
-  config,
-}: AssayToggleProps) {
-  // Derive toggle state from current config's leafField
-  const sortedByAssay = config.leafField === sortedByAssayLeafField;
-
-  const handleToggle = () => {
-    const newValue = !sortedByAssay;
-
-    if (newValue) {
-      // Switch to assay-grouped view
-      updateConfig({
-        columns: sortedByAssayColumns,
-        groupingModel: sortedByAssayGroupingModel,
-        leafField: sortedByAssayLeafField,
-        buildTree: (selectedIds, rowById) =>
-          buildSortedAssayTreeView(selectedIds, rowById, label, folderId),
-      });
-    } else {
-      // Switch back to default (sample-grouped) view
-      updateConfig({
-        columns: defaultColumns,
-        groupingModel: defaultGroupingModel,
-        leafField: defaultLeafField,
-        buildTree: (selectedIds, rowById) =>
-          buildTreeView(selectedIds, rowById, label, folderId),
-      });
-    }
-  };
-
-  return (
-    <FormControlLabel
-      sx={{ display: "flex", justifyContent: "flex-end" }}
-      value="Sort by assay"
-      control={
-        <Switch
-          color="primary"
-          checked={sortedByAssay}
-          onChange={handleToggle}
-        />
-      }
-      label="Sort by assay"
-      labelPlacement="end"
-    />
-  );
-}
+import { FormControlLabel, Switch } from "@mui/material";
+import { FolderRuntimeConfig } from "../../types";
+import {
+  defaultColumns,
+  defaultGroupingModel,
+  defaultLeafField,
+  sortedByAssayColumns,
+  sortedByAssayGroupingModel,
+  sortedByAssayLeafField,
+} from "./columns";
+import { buildTreeView, buildSortedAssayTreeView } from "./treeBuilder";
+
+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 function AssayToggle({
+  updateConfig,
+  folderId,
+  label,
+  config,
+}: AssayToggleProps) {
+  // Derive toggle state from current config's leafField
+  const sortedByAssay = config.leafField === sortedByAssayLeafField;
+
+  const handleToggle = () => {
+    const newValue = !sortedByAssay;
+
+    if (newValue) {
+      // Switch to assay-grouped view
+      updateConfig({
+        columns: sortedByAssayColumns,
+        groupingModel: sortedByAssayGroupingModel,
+        leafField: sortedByAssayLeafField,
+        buildTree: (selectedIds, rowById) =>
+          buildSortedAssayTreeView(selectedIds, rowById, label, folderId),
+      });
+    } else {
+      // Switch back to default (sample-grouped) view
+      updateConfig({
+        columns: defaultColumns,
+        groupingModel: defaultGroupingModel,
+        leafField: defaultLeafField,
+        buildTree: (selectedIds, rowById) =>
+          buildTreeView(selectedIds, rowById, label, folderId),
+      });
+    }
+  };
+
+  return (
+    <FormControlLabel
+      sx={{ display: "flex", justifyContent: "flex-end" }}
+      value="Sort by assay"
+      control={
+        <Switch
+          color="primary"
+          checked={sortedByAssay}
+          onChange={handleToggle}
+        />
+      }
+      label="Sort by assay"
+      labelPlacement="end"
+    />
+  );
+}

package/src/TrackSelect/Folders/biosamples/shared/BiosampleGroupingCell.tsx

@@ -1,146 +1,146 @@
-import { Stack, Tooltip, Box, IconButton } from "@mui/material";
-import {
-  GridRenderCellParams,
-  useGridApiContext,
-  GridGroupNode,
-} from "@mui/x-data-grid-premium";
-import { assayTypes, AssayIcon } from "./constants";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-
-/**
- * Biosample-specific grouping cell that renders AssayIcon for assay groups/values.
- * Handles expand/collapse, truncation, and tooltips.
- */
-export default function BiosampleGroupingCell(params: GridRenderCellParams) {
-  const apiRef = useGridApiContext();
-  const isGroup = params.rowNode.type === "group";
-  const groupNode = params.rowNode as GridGroupNode;
-  const isExpanded = isGroup ? groupNode.childrenExpanded : false;
-  const groupingField = isGroup ? groupNode.groupingField : null;
-  const depth = params.rowNode.depth ?? 0;
-
-  const handleExpandClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    apiRef.current.setRowChildrenExpansion(params.id, !isExpanded);
-  };
-
-  // Render content based on grouping field
-  const renderContent = () => {
-    const value = String(params.value ?? "");
-
-    // For assay groups, show the colored icon
-    if (isGroup && groupingField === "assay") {
-      return (
-        <Stack
-          direction="row"
-          spacing={1}
-          alignItems="center"
-          sx={{ flex: 1, overflow: "hidden" }}
-        >
-          {AssayIcon(value)}
-          <Tooltip title={value} placement="top-start" enterDelay={500}>
-            <Box
-              sx={{
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-                fontWeight: "bold",
-              }}
-            >
-              {params.formattedValue}
-            </Box>
-          </Tooltip>
-        </Stack>
-      );
-    }
-
-    // For other groups (ontology, displayName), show bold text
-    if (isGroup) {
-      return (
-        <Tooltip title={value} placement="top-start" enterDelay={500}>
-          <Box
-            sx={{
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              flex: 1,
-              fontWeight: "bold",
-            }}
-          >
-            {params.formattedValue}
-          </Box>
-        </Tooltip>
-      );
-    }
-
-    // For leaf rows - check if it's an assay value
-    const isAssayValue = assayTypes
-      .map((a) => a.toLowerCase())
-      .includes(value.toLowerCase());
-
-    if (isAssayValue) {
-      return (
-        <Stack
-          direction="row"
-          spacing={1}
-          alignItems="center"
-          sx={{ flex: 1, overflow: "hidden" }}
-        >
-          {AssayIcon(value)}
-          <Tooltip title={value} placement="top-start" enterDelay={500}>
-            <Box
-              sx={{
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-              }}
-            >
-              {params.formattedValue}
-            </Box>
-          </Tooltip>
-        </Stack>
-      );
-    }
-
-    return (
-      <Tooltip title={value} placement="top-start" enterDelay={500}>
-        <Box
-          sx={{
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            flex: 1,
-          }}
-        >
-          {params.formattedValue}
-        </Box>
-      </Tooltip>
-    );
-  };
-
-  // Indent based on depth (2 units per level)
-  const indentLevel = depth * 2;
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        width: "100%",
-        ml: indentLevel,
-      }}
-    >
-      {isGroup && (
-        <IconButton size="small" onClick={handleExpandClick} sx={{ mr: 0.5 }}>
-          {isExpanded ? (
-            <ExpandMoreIcon fontSize="small" />
-          ) : (
-            <ChevronRightIcon fontSize="small" />
-          )}
-        </IconButton>
-      )}
-      {renderContent()}
-    </Box>
-  );
-}
+import { Stack, Tooltip, Box, IconButton } from "@mui/material";
+import {
+  GridRenderCellParams,
+  useGridApiContext,
+  GridGroupNode,
+} from "@mui/x-data-grid-premium";
+import { assayTypes, AssayIcon } from "./constants";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+/**
+ * Biosample-specific grouping cell that renders AssayIcon for assay groups/values.
+ * Handles expand/collapse, truncation, and tooltips.
+ */
+export default function BiosampleGroupingCell(params: GridRenderCellParams) {
+  const apiRef = useGridApiContext();
+  const isGroup = params.rowNode.type === "group";
+  const groupNode = params.rowNode as GridGroupNode;
+  const isExpanded = isGroup ? groupNode.childrenExpanded : false;
+  const groupingField = isGroup ? groupNode.groupingField : null;
+  const depth = params.rowNode.depth ?? 0;
+
+  const handleExpandClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    apiRef.current.setRowChildrenExpansion(params.id, !isExpanded);
+  };
+
+  // Render content based on grouping field
+  const renderContent = () => {
+    const value = String(params.value ?? "");
+
+    // For assay groups, show the colored icon
+    if (isGroup && groupingField === "assay") {
+      return (
+        <Stack
+          direction="row"
+          spacing={1}
+          alignItems="center"
+          sx={{ flex: 1, overflow: "hidden" }}
+        >
+          {AssayIcon(value)}
+          <Tooltip title={value} placement="top-start" enterDelay={500}>
+            <Box
+              sx={{
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                fontWeight: "bold",
+              }}
+            >
+              {params.formattedValue}
+            </Box>
+          </Tooltip>
+        </Stack>
+      );
+    }
+
+    // For other groups (ontology, displayName), show bold text
+    if (isGroup) {
+      return (
+        <Tooltip title={value} placement="top-start" enterDelay={500}>
+          <Box
+            sx={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              flex: 1,
+              fontWeight: "bold",
+            }}
+          >
+            {params.formattedValue}
+          </Box>
+        </Tooltip>
+      );
+    }
+
+    // For leaf rows - check if it's an assay value
+    const isAssayValue = assayTypes
+      .map((a) => a.toLowerCase())
+      .includes(value.toLowerCase());
+
+    if (isAssayValue) {
+      return (
+        <Stack
+          direction="row"
+          spacing={1}
+          alignItems="center"
+          sx={{ flex: 1, overflow: "hidden" }}
+        >
+          {AssayIcon(value)}
+          <Tooltip title={value} placement="top-start" enterDelay={500}>
+            <Box
+              sx={{
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {params.formattedValue}
+            </Box>
+          </Tooltip>
+        </Stack>
+      );
+    }
+
+    return (
+      <Tooltip title={value} placement="top-start" enterDelay={500}>
+        <Box
+          sx={{
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            flex: 1,
+          }}
+        >
+          {params.formattedValue}
+        </Box>
+      </Tooltip>
+    );
+  };
+
+  // Indent based on depth (2 units per level)
+  const indentLevel = depth * 2;
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        ml: indentLevel,
+      }}
+    >
+      {isGroup && (
+        <IconButton size="small" onClick={handleExpandClick} sx={{ mr: 0.5 }}>
+          {isExpanded ? (
+            <ExpandMoreIcon fontSize="small" />
+          ) : (
+            <ChevronRightIcon fontSize="small" />
+          )}
+        </IconButton>
+      )}
+      {renderContent()}
+    </Box>
+  );
+}

package/src/TrackSelect/Folders/biosamples/shared/BiosampleTreeItem.tsx

@@ -1,15 +1,15 @@
-import React from "react";
-import { CustomTreeItem } from "../../../TreeView/CustomTreeItem";
-import { CustomTreeItemProps } from "../../../types";
-import { AssayIcon } from "./constants";
-
-/**
- * Biosample-specific TreeItem that renders AssayIcon for assay items.
- * Wraps the generic CustomTreeItem with the AssayIcon renderer.
- */
-export const BiosampleTreeItem = React.forwardRef<
-  HTMLLIElement,
-  CustomTreeItemProps
->(function BiosampleTreeItem(props, ref) {
-  return <CustomTreeItem {...props} ref={ref} renderIcon={AssayIcon} />;
-});
+import React from "react";
+import { CustomTreeItem } from "../../../TreeView/CustomTreeItem";
+import { CustomTreeItemProps } from "../../../types";
+import { AssayIcon } from "./constants";
+
+/**
+ * Biosample-specific TreeItem that renders AssayIcon for assay items.
+ * Wraps the generic CustomTreeItem with the AssayIcon renderer.
+ */
+export const BiosampleTreeItem = React.forwardRef<
+  HTMLLIElement,
+  CustomTreeItemProps
+>(function BiosampleTreeItem(props, ref) {
+  return <CustomTreeItem {...props} ref={ref} renderIcon={AssayIcon} />;
+});