@weng-lab/genomebrowser-ui 0.2.3 → 0.2.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weng-lab/genomebrowser-ui",
   "private": false,
-  "version": "0.2.3",
+  "version": "0.2.5",
   "license": "MIT",
   "type": "module",
   "publishConfig": {

package/src/TrackSelect/Folders/biosamples/data/human.json

@@ -31223,11 +31223,11 @@
           "fileAccession": "ENCFF814BZJ"
         },
         {
-          "id": "ccre-ENCFF592CNZ_NA_ENCFF346DEM_ENCFF192FOK",
+          "id": "ccre-ENCFF592CNZ_ENCFF346DEM_ENCFF192FOK",
           "assay": "ccre",
-          "url": "https://downloads.wenglab.org/Registry-V4/ENCFF592CNZ_NA_ENCFF346DEM_ENCFF192FOK.bigBed",
+          "url": "https://downloads.wenglab.org/Registry-V4/ENCFF592CNZ_ENCFF346DEM_ENCFF192FOK.bigBed",
           "experimentAccession": "",
-          "fileAccession": "ENCFF592CNZ_NA_ENCFF346DEM_ENCFF192FOK"
+          "fileAccession": "ENCFF592CNZ_ENCFF346DEM_ENCFF192FOK"
         }
       ]
     },

package/src/TrackSelect/TreeView/CustomTreeItem.tsx

@@ -19,7 +19,6 @@ import {
   ExtendedTreeItemProps,
 } from "../types";
 
-// Everything below is styling for the custom directory look of the tree view
 const TreeItemRoot = styled("li")(({ theme }) => ({
   listStyle: "none",
   margin: 0,
@@ -27,7 +26,7 @@ const TreeItemRoot = styled("li")(({ theme }) => ({
   outline: 4,
   color: theme.palette.grey[400],
   ...theme.applyStyles("light", {
-    color: theme.palette.grey[600], // controls colors of the MUI icons
+    color: theme.palette.grey[600],
   }),
 }));
 
@@ -95,9 +94,9 @@ function CustomLabel({
 const TreeItemContent = styled("div")(({ theme }) => ({
   padding: theme.spacing(0.5),
   paddingRight: theme.spacing(2),
-  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
+  paddingLeft: `calc(${theme.spacing(1)} + 6px * var(--TreeView-itemDepth))`,
   width: "100%",
-  boxSizing: "border-box", // prevent width + padding to overflow
+  boxSizing: "border-box",
   position: "relative",
   display: "flex",
   alignItems: "center",
@@ -162,7 +161,7 @@ export const CustomTreeItem = React.forwardRef(function CustomTreeItem(
   const icon = getIconFromTreeItemType(item.icon, renderIcon);
 
   const handleRemoveIconClick = (e: React.MouseEvent) => {
-    e.stopPropagation(); // prevent item expand/select
+    e.stopPropagation();
     onRemove?.(item);
   };
 

package/src/TrackSelect/TreeView/TreeViewWrapper.tsx

@@ -9,9 +9,6 @@ import {
 } from "../types";
 import { CustomTreeItem } from "./CustomTreeItem";
 
-/**
- * Recursively collects all item IDs that have children (expandable items)
- */
 function getAllExpandableItemIds(
   items: TreeViewBaseItem<ExtendedTreeItemProps>[],
 ): string[] {
@@ -25,9 +22,6 @@ function getAllExpandableItemIds(
   return ids;
 }
 
-/**
- * Internal component that renders a single folder's tree with its own expanded state.
- */
 function FolderTree({
   items,
   TreeItemComponent,
@@ -44,7 +38,6 @@ function FolderTree({
   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));
@@ -77,6 +70,9 @@ function FolderTree({
       sx={{
         ml: 1,
         mr: 1,
+        "& ul": {
+          paddingInlineStart: "12px",
+        },
       }}
       itemChildrenIndentation={0}
     />