@jbrowse/plugin-data-management 4.1.14 → 4.1.15

package/esm/HierarchicalTrackSelectorWidget/components/ClearableSearchField.js

@@ -1,21 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState, useTransition } from 'react';
+import { useEffect, useEffectEvent, useState } from 'react';
+import { useDebounce } from '@jbrowse/core/util';
 import ClearIcon from '@mui/icons-material/Clear';
 import { IconButton, InputAdornment, TextField } from '@mui/material';
 export default function ClearableSearchField({ value, onChange, label, className, }) {
     const [localValue, setLocalValue] = useState(value);
-    const [, startTransition] = useTransition();
+    const debouncedValue = useDebounce(localValue, 300);
+    const onChangeEvent = useEffectEvent(onChange);
     useEffect(() => {
         if (value === '') {
             setLocalValue('');
         }
     }, [value]);
+    useEffect(() => {
+        onChangeEvent(debouncedValue);
+    }, [debouncedValue]);
     return (_jsx(TextField, { className: className, label: label, value: localValue, onChange: event => {
-            const newValue = event.target.value;
-            setLocalValue(newValue);
-            startTransition(() => {
-                onChange(newValue);
-            });
+            setLocalValue(event.target.value);
         }, slotProps: {
             input: {
                 endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => {

package/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalHeader.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
+import useMeasure from '@jbrowse/core/util/useMeasure';
 import { observer } from 'mobx-react';
 import ClearableSearchField from "../ClearableSearchField.js";
 import ShoppingCart from "../ShoppingCart.js";
@@ -13,10 +15,12 @@ const useStyles = makeStyles()(theme => ({
 }));
 const HierarchicalTrackSelectorHeader = observer(function HierarchicalTrackSelectorHeader({ model, setHeaderHeight, }) {
     const { classes } = useStyles();
-    return (_jsx("div", { ref: ref => {
-            setHeaderHeight(ref?.getBoundingClientRect().height || 0);
-        }, "data-testid": "hierarchical_track_selector", children: _jsxs("div", { style: { display: 'flex' }, children: [_jsx(HamburgerMenu, { model: model }), _jsx(ShoppingCart, { model: model }), _jsx(ClearableSearchField, { className: classes.searchBox, label: "Filter tracks", value: model.filterText, onChange: value => {
-                        model.setFilterText(value);
-                    } }), _jsx(RecentlyUsedTracks, { model: model }), _jsx(FavoriteTracks, { model: model })] }) }));
+    const [ref, { height }] = useMeasure();
+    useEffect(() => {
+        if (height !== undefined) {
+            setHeaderHeight(height);
+        }
+    }, [height, setHeaderHeight]);
+    return (_jsx("div", { ref: ref, "data-testid": "hierarchical_track_selector", children: _jsxs("div", { style: { display: 'flex' }, children: [_jsx(HamburgerMenu, { model: model }), _jsx(ShoppingCart, { model: model }), _jsx(ClearableSearchField, { className: classes.searchBox, label: "Filter tracks", value: model.filterText, onChange: model.setFilterText }), _jsx(RecentlyUsedTracks, { model: model }), _jsx(FavoriteTracks, { model: model })] }) }));
 });
 export default HierarchicalTrackSelectorHeader;

package/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalTree.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
+import { getSession } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
+import SharedTooltip from "./SharedTooltip.js";
 import TreeItem from "./TreeItem.js";
 const HierarchicalTree = observer(function HierarchicalTree({ height, model, }) {
     const { flattenedItems, shownTrackIds } = model;
+    const { drawerPosition } = getSession(model);
     const containerRef = useRef(null);
     const [scrollTop, setScrollTop] = useState(0);
     const { startIndex, endIndex, totalHeight, itemOffsets } = model.itemOffsets(height, scrollTop);
@@ -12,35 +15,45 @@ const HierarchicalTree = observer(function HierarchicalTree({ height, model, })
         if (!container) {
             return;
         }
+        let rafId;
         const onScroll = () => {
-            const newScrollTop = container.scrollTop;
-            setScrollTop(prev => {
-                const { startIndex: prevStart, endIndex: prevEnd } = model.itemOffsets(height, prev);
-                const { startIndex: nextStart, endIndex: nextEnd } = model.itemOffsets(height, newScrollTop);
-                if (prevStart === nextStart && prevEnd === nextEnd) {
-                    return prev;
-                }
-                return newScrollTop;
+            if (rafId !== undefined) {
+                return;
+            }
+            rafId = requestAnimationFrame(() => {
+                rafId = undefined;
+                const newScrollTop = container.scrollTop;
+                setScrollTop(prev => {
+                    const { startIndex: prevStart, endIndex: prevEnd } = model.itemOffsets(height, prev);
+                    const { startIndex: nextStart, endIndex: nextEnd } = model.itemOffsets(height, newScrollTop);
+                    if (prevStart === nextStart && prevEnd === nextEnd) {
+                        return prev;
+                    }
+                    return newScrollTop;
+                });
             });
         };
         container.addEventListener('scroll', onScroll, { passive: true });
         return () => {
             container.removeEventListener('scroll', onScroll);
+            if (rafId !== undefined) {
+                cancelAnimationFrame(rafId);
+            }
         };
     }, [height, model]);
-    return (_jsx("div", { ref: containerRef, style: {
+    return (_jsxs("div", { ref: containerRef, style: {
             height,
             overflowY: 'auto',
-        }, children: _jsx("div", { style: {
-                height: totalHeight,
-                width: '100%',
-                position: 'relative',
-            }, children: Array.from({ length: endIndex - startIndex + 1 }, (_, i) => {
-                const index = startIndex + i;
-                const item = flattenedItems[index];
-                return item ? (_jsx(TreeItem, { model: model, item: item, top: itemOffsets[index], checked: item.type === 'track'
-                        ? shownTrackIds.has(item.trackId)
-                        : undefined }, item.id)) : null;
-            }) }) }));
+        }, children: [_jsx("div", { style: {
+                    height: totalHeight,
+                    width: '100%',
+                    position: 'relative',
+                }, children: Array.from({ length: endIndex - startIndex + 1 }, (_, i) => {
+                    const index = startIndex + i;
+                    const item = flattenedItems[index];
+                    return item ? (_jsx(TreeItem, { model: model, item: item, top: itemOffsets[index], checked: item.type === 'track'
+                            ? shownTrackIds.has(item.trackId)
+                            : undefined }, item.id)) : null;
+                }) }), _jsx(SharedTooltip, { containerRef: containerRef, placement: drawerPosition === 'left' ? 'right' : 'left' })] }));
 });
 export default HierarchicalTree;

package/esm/HierarchicalTrackSelectorWidget/components/tree/SharedTooltip.d.ts

@@ -0,0 +1,5 @@
+import { type RefObject } from 'react';
+export default function SharedTooltip({ containerRef, placement, }: {
+    containerRef: RefObject<HTMLDivElement | null>;
+    placement: 'left' | 'right';
+}): import("react/jsx-runtime").JSX.Element | null;

package/esm/HierarchicalTrackSelectorWidget/components/tree/SharedTooltip.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Tooltip } from '@mui/material';
+export default function SharedTooltip({ containerRef, placement, }) {
+    const [state, setState] = useState(null);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const handleOver = (e) => {
+            const target = e.target.closest('[data-tooltip]');
+            if (target) {
+                setState({ anchorEl: target, text: target.dataset.tooltip ?? '' });
+            }
+        };
+        const handleOut = (e) => {
+            const target = e.target.closest('[data-tooltip]');
+            const related = e.relatedTarget?.closest('[data-tooltip]');
+            if (target && target !== related) {
+                setState(null);
+            }
+        };
+        container.addEventListener('mouseover', handleOver);
+        container.addEventListener('mouseout', handleOut);
+        return () => {
+            container.removeEventListener('mouseover', handleOver);
+            container.removeEventListener('mouseout', handleOut);
+        };
+    }, [containerRef]);
+    if (!state?.text) {
+        return null;
+    }
+    return (_jsx(Tooltip, { open: true, title: state.text, placement: placement, slotProps: {
+            popper: {
+                anchorEl: state.anchorEl,
+            },
+        }, children: _jsx("span", {}) }));
+}

package/esm/HierarchicalTrackSelectorWidget/components/tree/TrackCategory.js

@@ -19,9 +19,14 @@ const useStyles = makeStyles()(theme => ({
 }));
 function getAllSubcategories(node) {
     const categoryIds = [];
-    for (const child of node.children) {
-        if (child.type === 'category') {
-            categoryIds.push(child.id, ...getAllSubcategories(child));
+    const stack = [node];
+    while (stack.length > 0) {
+        const curr = stack.pop();
+        for (const child of curr.children) {
+            if (child.type === 'category') {
+                categoryIds.push(child.id);
+                stack.push(child);
+            }
         }
     }
     return categoryIds;

package/esm/HierarchicalTrackSelectorWidget/components/tree/TrackLabel.d.ts

@@ -1,14 +1,8 @@
 import type { HierarchicalTrackSelectorModel } from '../../model.ts';
 import type { TreeTrackNode } from '../../types.ts';
-import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
-export interface InfoArgs {
-    target: HTMLElement;
-    id: string;
-    conf: AnyConfigurationModel;
-}
-declare const TrackLabel: import("react").NamedExoticComponent<{
+declare const TrackLabel: import("react").MemoExoticComponent<({ model, item, checked, }: {
     model: HierarchicalTrackSelectorModel;
     item: TreeTrackNode;
     checked: boolean;
-}>;
+}) => import("react/jsx-runtime").JSX.Element>;
 export default TrackLabel;

package/esm/HierarchicalTrackSelectorWidget/components/tree/TrackLabel.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback } from 'react';
-import { readConfObject } from '@jbrowse/core/configuration';
 import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
-import { getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Checkbox, FormControlLabel, Tooltip } from '@mui/material';
+import { Checkbox, FormControlLabel } from '@mui/material';
 import { observer } from 'mobx-react';
 import { isUnsupported } from "../util.js";
 import TrackSelectorTrackMenu from "./TrackSelectorTrackMenu.js";
@@ -35,22 +33,20 @@ const TrackLabelText = observer(function TrackLabelText({ model, conf, id, name,
 });
 const TrackLabel = memo(function TrackLabel({ model, item, checked, }) {
     const { classes } = useStyles();
-    const { drawerPosition } = getSession(model);
-    const { id, name, conf, trackId } = item;
-    const description = readConfObject(conf, 'description');
+    const { id, name, conf, trackId, description } = item;
     const onChange = useCallback(() => {
         model.view.toggleTrack(trackId);
     }, [model.view, trackId]);
-    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: description, placement: drawerPosition === 'left' ? 'right' : 'left', children: _jsx(FormControlLabel, { className: classes.checkboxLabel, onClick: event => {
-                        if (event.ctrlKey || event.metaKey) {
-                            if (model.selectionSet.has(conf)) {
-                                model.removeFromSelection([conf]);
-                            }
-                            else {
-                                model.addToSelection([conf]);
-                            }
-                            event.preventDefault();
+    return (_jsxs(_Fragment, { children: [_jsx(FormControlLabel, { className: classes.checkboxLabel, "data-tooltip": description || undefined, "aria-description": description || undefined, onClick: event => {
+                    if (event.ctrlKey || event.metaKey) {
+                        if (model.selectionSet.has(conf)) {
+                            model.removeFromSelection([conf]);
                         }
-                    }, control: _jsx(TrackCheckbox, { checked: checked, onChange: onChange, id: id, disabled: isUnsupported(name), className: classes.compactCheckbox }), label: _jsx(TrackLabelText, { model: model, conf: conf, id: id, name: name, selectedClass: classes.selected }) }) }), _jsx(TrackSelectorTrackMenu, { model: model, id: id, conf: conf })] }));
+                        else {
+                            model.addToSelection([conf]);
+                        }
+                        event.preventDefault();
+                    }
+                }, control: _jsx(TrackCheckbox, { checked: checked, onChange: onChange, id: id, disabled: isUnsupported(name), className: classes.compactCheckbox }), label: _jsx(TrackLabelText, { model: model, conf: conf, id: id, name: name, selectedClass: classes.selected }) }), _jsx(TrackSelectorTrackMenu, { model: model, id: id, conf: conf })] }));
 });
 export default TrackLabel;

package/esm/HierarchicalTrackSelectorWidget/components/tree/TreeItem.d.ts

@@ -1,9 +1,9 @@
 import type { HierarchicalTrackSelectorModel } from '../../model.ts';
 import type { TreeNode } from '../../types.ts';
-declare const TreeItem: import("react").NamedExoticComponent<{
+declare const TreeItem: import("react").MemoExoticComponent<({ item, model, top, checked, }: {
     item: TreeNode;
     model: HierarchicalTrackSelectorModel;
     top: number;
     checked?: boolean;
-}>;
+}) => import("react/jsx-runtime").JSX.Element>;
 export default TreeItem;

package/esm/HierarchicalTrackSelectorWidget/generateHierarchy.js

@@ -51,6 +51,7 @@ export function generateHierarchy({ model, trackConfs, extra, noCategories, menu
             id: extra ? `${extra},${conf.trackId}` : conf.trackId,
             trackId: conf.trackId,
             name: getTrackName(conf, session),
+            description: readConfObject(conf, 'description') || '',
             conf,
             children: [],
             nestingLevel: nestingLevel + 1,

package/esm/HierarchicalTrackSelectorWidget/model.js

@@ -287,11 +287,12 @@ export default function stateTreeFactory(pluginManager) {
             return flatten(self.hierarchy.children);
         },
         get flattenedItemOffsets() {
+            const items = this.flattenedItems;
             const offsets = [];
             let cumulativeHeight = 0;
-            for (let i = 0, l = this.flattenedItems.length; i < l; i++) {
+            for (let i = 0, l = items.length; i < l; i++) {
                 offsets.push(cumulativeHeight);
-                cumulativeHeight += getItemHeight(this.flattenedItems[i]);
+                cumulativeHeight += getItemHeight(items[i]);
             }
             return { cumulativeHeight, offsets };
         },

package/esm/HierarchicalTrackSelectorWidget/types.d.ts

@@ -4,6 +4,7 @@ export interface TreeTrackNode {
     id: string;
     trackId: string;
     conf: AnyConfigurationModel;
+    description: string;
     children: TreeNode[];
     nestingLevel: number;
     type: 'track';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-data-management",
-  "version": "4.1.14",
+  "version": "4.1.15",
   "type": "module",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
@@ -22,16 +22,16 @@
   ],
   "dependencies": {
     "@gmod/ucsc-hub": "^2.0.3",
-    "@jbrowse/mobx-state-tree": "^5.5.0",
-    "@mui/icons-material": "^7.3.8",
-    "@mui/material": "^7.3.8",
-    "@mui/x-data-grid": "^8.27.3",
+    "@jbrowse/mobx-state-tree": "^5.6.0",
+    "@mui/icons-material": "^7.3.9",
+    "@mui/material": "^7.3.9",
+    "@mui/x-data-grid": "^8.28.2",
     "deepmerge": "^4.3.1",
     "mobx": "^6.15.0",
     "mobx-react": "^9.2.1",
-    "@jbrowse/core": "^4.1.14",
-    "@jbrowse/plugin-config": "^4.1.14",
-    "@jbrowse/product-core": "^4.1.14"
+    "@jbrowse/product-core": "^4.1.15",
+    "@jbrowse/core": "^4.1.15",
+    "@jbrowse/plugin-config": "^4.1.15"
   },
   "peerDependencies": {
     "react": ">=18.0.0"
@@ -40,6 +40,9 @@
     "access": "public"
   },
   "sideEffects": false,
+  "devDependencies": {
+    "@jbrowse/app-core": "4.1.15"
+  },
   "scripts": {
     "build": "pnpm run /^build:/",
     "test": "cd ../..; jest --passWithNoTests plugins/data-management",