@jbrowse/plugin-data-management 4.1.13 → 4.1.15

package/esm/HierarchicalTrackSelectorWidget/components/ClearableSearchField.js

@@ -1,22 +1,23 @@
 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);
-            });
-        }, fullWidth: true, slotProps: {
+            setLocalValue(event.target.value);
+        }, slotProps: {
             input: {
                 endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => {
                             setLocalValue('');

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetFilter.js

@@ -17,14 +17,10 @@ const useStyles = makeStyles()(theme => ({
     },
 }));
 function ClearButton({ onClick }) {
-    return (_jsx(Tooltip, { title: "Clear selection on this facet filter", children: _jsx(IconButton, { onClick: () => {
-                onClick();
-            }, size: "small", children: _jsx(ClearIcon, {}) }) }));
+    return (_jsx(Tooltip, { title: "Clear selection on this facet filter", children: _jsx(IconButton, { onClick: onClick, size: "small", children: _jsx(ClearIcon, {}) }) }));
 }
 function ExpandButton({ visible, onClick, }) {
-    return (_jsx(Tooltip, { title: "Minimize/expand this facet filter", children: _jsx(IconButton, { onClick: () => {
-                onClick();
-            }, size: "small", children: visible ? _jsx(MinimizeIcon, {}) : _jsx(AddIcon, {}) }) }));
+    return (_jsx(Tooltip, { title: "Minimize/expand this facet filter", children: _jsx(IconButton, { onClick: onClick, size: "small", children: visible ? _jsx(MinimizeIcon, {}) : _jsx(AddIcon, {}) }) }));
 }
 const FacetFilter = observer(function FacetFilter({ column, vals, model, }) {
     const { classes } = useStyles();
@@ -37,11 +33,11 @@ const FacetFilter = observer(function FacetFilter({ column, vals, model, }) {
                         } }), _jsx(ExpandButton, { visible: visible, onClick: () => {
                             setVisible(!visible);
                         } })] }), visible ? (_jsx(Select, { multiple: true, native: true, className: classes.select, value: filters.get(column.field) || [], onChange: event => {
-                    faceted.setFilter(column.field, [...event.target.options]
-                        .filter(opt => opt.selected)
-                        .map(opt => opt.value));
+                    const options = event.target
+                        .options;
+                    faceted.setFilter(column.field, [...options].filter(opt => opt.selected).map(opt => opt.value));
                 }, children: vals
-                    .sort((a, b) => a[0].localeCompare(b[0]))
+                    .toSorted((a, b) => a[0].localeCompare(b[0]))
                     .map(([name, count]) => (_jsxs("option", { value: name, children: [coarseStripHTML(name), " (", count, ")"] }, name))) })) : null] }));
 });
 export default FacetFilter;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetFilters.js

@@ -6,17 +6,15 @@ const FacetFilters = observer(function FacetFilters({ rows, columns, model, }) {
     const { faceted } = model;
     const { filters } = faceted;
     const facets = columns.slice(1);
-    const facetFieldToCategoryCountMap = new Map(columns.slice(1).map(f => [f.field, new Map()]));
-    const filterKeys = faceted.filters.keys();
-    const facetKeys = facets.map(f => f.field);
+    const facetFieldToCategoryCountMap = new Map(facets.map(f => [f.field, new Map()]));
     const facetKeysPrioritizingUserSelections = new Set();
-    for (const entry of filterKeys) {
+    for (const entry of filters.keys()) {
         if (filters.get(entry)?.length) {
             facetKeysPrioritizingUserSelections.add(entry);
         }
     }
-    for (const entry of facetKeys) {
-        facetKeysPrioritizingUserSelections.add(entry);
+    for (const f of facets) {
+        facetKeysPrioritizingUserSelections.add(f.field);
     }
     let currentRows = rows;
     for (const facetKey of facetKeysPrioritizingUserSelections) {
@@ -24,21 +22,16 @@ const FacetFilters = observer(function FacetFilters({ rows, columns, model, }) {
         if (categoryCountMap) {
             for (const row of currentRows) {
                 const key = getRowStr(facetKey, row);
-                const currentCount = categoryCountMap.get(key);
                 if (key) {
-                    if (currentCount === undefined) {
-                        categoryCountMap.set(key, 1);
-                    }
-                    else {
-                        categoryCountMap.set(key, currentCount + 1);
-                    }
+                    categoryCountMap.set(key, (categoryCountMap.get(key) ?? 0) + 1);
                 }
             }
         }
-        const filter = filters.get(facetKey)?.length
-            ? new Set(filters.get(facetKey))
-            : undefined;
-        currentRows = currentRows.filter(row => filter !== undefined ? filter.has(getRowStr(facetKey, row)) : true);
+        const filterValues = filters.get(facetKey);
+        if (filterValues?.length) {
+            const filterSet = new Set(filterValues);
+            currentRows = currentRows.filter(row => filterSet.has(getRowStr(facetKey, row)));
+        }
     }
     return (_jsx("div", { children: facets.map(c => (_jsx(FacetFilter, { vals: [...facetFieldToCategoryCountMap.get(c.field)], column: c, model: model }, c.field))) }));
 });

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedDataGrid.d.ts

@@ -1,9 +1,10 @@
 import type { HierarchicalTrackSelectorModel } from '../../model.ts';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { GridColDef, GridRowId } from '@mui/x-data-grid';
 declare const FacetedDataGrid: ({ model, columns, shownTrackIds, selection, }: {
     model: HierarchicalTrackSelectorModel;
     columns: GridColDef[];
     shownTrackIds: Set<GridRowId>;
-    selection: any[];
+    selection: AnyConfigurationModel[];
 }) => import("react/jsx-runtime").JSX.Element;
 export default FacetedDataGrid;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedDataGrid.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo, useState, useTransition } from 'react';
+import { useEffect, useMemo, useState, useTransition } from 'react';
 import { notEmpty } from '@jbrowse/core/util';
 import { DataGrid } from '@mui/x-data-grid';
 import { transaction } from 'mobx';
@@ -10,6 +10,12 @@ const FacetedDataGrid = observer(function FacetedDataGrid({ model, columns, show
     const { rows, useShoppingCart, showOptions, filteredRows, filteredNonMetadataKeys, filteredMetadataKeys, visible, } = faceted;
     const [, startTransition] = useTransition();
     const [widths, setWidths] = useState(() => computeInitialWidths(rows, filteredNonMetadataKeys, filteredMetadataKeys, visible));
+    useEffect(() => {
+        setWidths(prev => ({
+            ...computeInitialWidths(rows, filteredNonMetadataKeys, filteredMetadataKeys, visible),
+            ...prev,
+        }));
+    }, [rows, filteredNonMetadataKeys, filteredMetadataKeys, visible]);
     const rowSelectionModel = useMemo(() => ({
         type: 'include',
         ids: new Set(useShoppingCart ? selection.map(s => s.trackId) : [...shownTrackIds]),
@@ -31,14 +37,17 @@ const FacetedDataGrid = observer(function FacetedDataGrid({ model, columns, show
                     const a1 = shownTrackIds;
                     const a2 = userSelectedIds.ids;
                     transaction(() => {
-                        ;
-                        [...a1].filter(x => !a2.has(x)).map(t => view.hideTrack(t));
-                        [...a2]
-                            .filter(x => !a1.has(x))
-                            .map(t => {
-                            view.showTrack(t);
-                            model.addToRecentlyUsed(t);
-                        });
+                        for (const t of a1) {
+                            if (!a2.has(t)) {
+                                view.hideTrack(t);
+                            }
+                        }
+                        for (const t of a2) {
+                            if (!a1.has(t)) {
+                                view.showTrack(t);
+                                model.addToRecentlyUsed(t);
+                            }
+                        }
                     });
                 }
                 else {

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedHeader.d.ts

@@ -1,4 +1,5 @@
 import type { HierarchicalTrackSelectorModel } from '../../model.ts';
-export default function FacetedHeader({ model, }: {
+declare const FacetedHeader: ({ model, }: {
     model: HierarchicalTrackSelectorModel;
-}): import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FacetedHeader;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedHeader.js

@@ -3,13 +3,14 @@ import { useState } from 'react';
 import { Menu } from '@jbrowse/core/ui';
 import MoreVert from '@mui/icons-material/MoreVert';
 import { Grid, IconButton } from '@mui/material';
+import { observer } from 'mobx-react';
 import ClearableSearchField from "../ClearableSearchField.js";
 import ShoppingCart from "../ShoppingCart.js";
-export default function FacetedHeader({ model, }) {
+const FacetedHeader = observer(function FacetedHeader({ model, }) {
     const { faceted } = model;
     const { filterText, showOptions, showFilters, showSparse, useShoppingCart } = faceted;
     const [anchorEl, setAnchorEl] = useState(null);
-    return (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: 4, alignItems: "center", children: [_jsx(ClearableSearchField, { label: "Search...", value: filterText, onChange: value => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, alignItems: "center", children: [_jsx(ClearableSearchField, { label: "Search...", value: filterText, onChange: value => {
                             faceted.setFilterText(value);
                         } }), _jsx(IconButton, { onClick: event => {
                             setAnchorEl(event.currentTarget);
@@ -52,4 +53,5 @@ export default function FacetedHeader({ model, }) {
                         type: 'checkbox',
                     },
                 ] })] }));
-}
+});
+export default FacetedHeader;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedSelector.d.ts

@@ -1,10 +1,4 @@
 import type { HierarchicalTrackSelectorModel } from '../../model.ts';
-import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
-export interface InfoArgs {
-    target: HTMLElement;
-    id: string;
-    conf: AnyConfigurationModel;
-}
 declare const FacetedSelector: ({ model, }: {
     model: HierarchicalTrackSelectorModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedSelector.js

@@ -21,7 +21,7 @@ const useStyles = makeStyles()({
 });
 function HighlightText({ text, query, className, }) {
     if (!query || !text) {
-        return _jsx("span", { className: className, children: text });
+        return _jsx(SanitizedHTML, { html: text, className: className });
     }
     const lowerText = text.toLowerCase();
     const lowerQuery = query.toLowerCase();
@@ -42,10 +42,14 @@ function HighlightText({ text, query, className, }) {
     return _jsx("span", { className: className, children: parts });
 }
 const frac = 0.75;
+function HighlightCell({ value, filterText, className, }) {
+    return value ? (_jsx(HighlightText, { className: className, text: value, query: filterText })) : ('');
+}
 const FacetedSelector = observer(function FacetedSelector({ model, }) {
     const { classes } = useStyles();
     const { selection, shownTrackIds, faceted } = model;
     const { rows, panelWidth, showFilters, filterText, filteredNonMetadataKeys, filteredMetadataKeys, } = faceted;
+    const nonMetadataFieldSet = new Set(['name', ...filteredNonMetadataKeys]);
     const columns = [
         {
             field: 'name',
@@ -53,29 +57,21 @@ const FacetedSelector = observer(function FacetedSelector({ model, }) {
             renderCell: params => {
                 const { value, row } = params;
                 const { id, conf } = row;
-                return (_jsxs("div", { className: classes.cell, children: [_jsx(SanitizedHTML, { html: value }), _jsx(TrackSelectorTrackMenu, { id: id, conf: conf, model: model })] }));
+                return (_jsxs("div", { className: classes.cell, children: [_jsx(HighlightText, { text: value, query: filterText }), _jsx(TrackSelectorTrackMenu, { id: id, conf: conf, model: model })] }));
             },
         },
         ...filteredNonMetadataKeys.map(e => {
             return {
                 field: e,
-                renderCell: params => {
-                    const val = params.value;
-                    return val ? (_jsx(HighlightText, { className: classes.cell, text: val, query: filterText })) : ('');
-                },
+                renderCell: (params) => (_jsx(HighlightCell, { value: params.value, filterText: filterText, className: classes.cell })),
             };
         }),
         ...filteredMetadataKeys.map(e => {
             return {
                 field: `metadata.${e}`,
-                headerName: ['name', ...filteredNonMetadataKeys].includes(e)
-                    ? `${e} (from metadata)`
-                    : e,
+                headerName: nonMetadataFieldSet.has(e) ? `${e} (from metadata)` : e,
                 valueGetter: (_, row) => `${row.metadata[e] ?? ''}`,
-                renderCell: params => {
-                    const val = params.value;
-                    return val ? (_jsx(HighlightText, { className: classes.cell, text: val, query: filterText })) : ('');
-                },
+                renderCell: (params) => (_jsx(HighlightCell, { value: params.value, filterText: filterText, className: classes.cell })),
             };
         }),
     ];

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/facetedModel.d.ts

@@ -26,6 +26,22 @@ export declare function facetedStateTreeF(): import("@jbrowse/mobx-state-tree").
             [x: string]: any;
         } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & any & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
     } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>)[];
+} & {
+    readonly allRows: {
+        readonly id: string;
+        readonly conf: {
+            [x: string]: any;
+        } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & {
+            setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
+                [x: string]: any;
+            } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & any & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
+        } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>;
+        readonly name: string;
+        readonly category: any;
+        readonly adapter: string;
+        readonly description: string | undefined;
+        readonly metadata: Record<string, unknown>;
+    }[];
 } & {
     readonly rows: {
         readonly id: string;
@@ -37,9 +53,9 @@ export declare function facetedStateTreeF(): import("@jbrowse/mobx-state-tree").
             } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & any & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
         } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>;
         readonly name: string;
-        readonly category: string;
+        readonly category: any;
         readonly adapter: string;
-        readonly description: string;
+        readonly description: string | undefined;
         readonly metadata: Record<string, unknown>;
     }[];
 } & {
@@ -57,9 +73,9 @@ export declare function facetedStateTreeF(): import("@jbrowse/mobx-state-tree").
             } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & any & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
         } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>;
         readonly name: string;
-        readonly category: string;
+        readonly category: any;
         readonly adapter: string;
-        readonly description: string;
+        readonly description: string | undefined;
         readonly metadata: Record<string, unknown>;
     }[];
 } & {

package/esm/HierarchicalTrackSelectorWidget/facetedModel.js

@@ -5,7 +5,6 @@ import { addDisposer, getParent, types } from '@jbrowse/mobx-state-tree';
 import { autorun, observable } from 'mobx';
 import { getRowStr } from "./components/faceted/util.js";
 import { findNonSparseKeys, getRootKeys } from "./facetedUtil.js";
-import { matches, matchesMetadata } from "./util.js";
 const nonMetadataKeys = ['category', 'adapter', 'description'];
 export function facetedStateTreeF() {
     return types
@@ -54,36 +53,48 @@ export function facetedStateTreeF() {
         },
     }))
         .views(self => ({
-        get rows() {
+        get allRows() {
             const session = getSession(self);
-            const { allTrackConfigurations, filterText } = self;
-            return allTrackConfigurations
-                .filter(conf => matches(filterText, conf, session) ||
-                matchesMetadata(filterText, conf))
-                .map(track => ({
+            return self.allTrackConfigurations.map(track => ({
                 id: track.trackId,
                 conf: track,
                 name: getTrackName(track, session),
                 category: readConfObject(track, 'category')?.join(', '),
                 adapter: readConfObject(track, 'adapter')?.type,
                 description: readConfObject(track, 'description'),
-                metadata: (track.metadata || {}),
+                metadata: (readConfObject(track, 'metadata') || {}),
             }));
         },
+    }))
+        .views(self => ({
+        get rows() {
+            const queryLower = self.filterText.toLowerCase();
+            if (!queryLower) {
+                return self.allRows;
+            }
+            return self.allRows.filter(row => row.name.toLowerCase().includes(queryLower) ||
+                row.category?.toLowerCase().includes(queryLower) ||
+                row.description?.toLowerCase().includes(queryLower) ||
+                Object.values(row.metadata).some(v => v !== null &&
+                    v !== undefined &&
+                    `${v}`.toLowerCase().includes(queryLower)));
+        },
     }))
         .views(self => ({
         get filteredNonMetadataKeys() {
             return self.showSparse
                 ? nonMetadataKeys
-                : findNonSparseKeys(nonMetadataKeys, self.rows, (r, f) => r[f]);
+                : findNonSparseKeys(nonMetadataKeys, self.allRows, (r, f) => r[f]);
         },
         get metadataKeys() {
-            return [...new Set(self.rows.flatMap(row => getRootKeys(row.metadata)))];
+            return [
+                ...new Set(self.allRows.flatMap(row => getRootKeys(row.metadata))),
+            ];
         },
         get filteredMetadataKeys() {
             return self.showSparse
                 ? this.metadataKeys
-                : findNonSparseKeys(this.metadataKeys, self.rows, (r, f) => r.metadata[f]);
+                : findNonSparseKeys(this.metadataKeys, self.allRows, (r, f) => r.metadata[f]);
         },
         get fields() {
             return [

package/esm/HierarchicalTrackSelectorWidget/facetedUtil.d.ts

@@ -1,2 +1,2 @@
-export declare function findNonSparseKeys(keys: readonly string[], rows: Record<string, unknown>[], cb: (row: Record<string, unknown>, f: string) => unknown): string[];
+export declare function findNonSparseKeys<T>(keys: readonly string[], rows: T[], cb: (row: T, f: string) => unknown, threshold?: number): string[];
 export declare function getRootKeys(obj: Record<string, unknown>): string[];

package/esm/HierarchicalTrackSelectorWidget/facetedUtil.js

@@ -1,8 +1,20 @@
-export function findNonSparseKeys(keys, rows, cb) {
-    return keys.filter(key => rows.filter(row => cb(row, key)).length > 5);
+export function findNonSparseKeys(keys, rows, cb, threshold = 5) {
+    return keys.filter(key => {
+        let count = 0;
+        for (const row of rows) {
+            if (cb(row, key)) {
+                count++;
+                if (count > threshold) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    });
 }
 export function getRootKeys(obj) {
-    return Object.entries(obj)
-        .map(([key, val]) => (typeof val === 'string' ? key : ''))
-        .filter((f) => !!f);
+    return Object.keys(obj).filter(key => {
+        const val = obj[key];
+        return val !== null && val !== undefined && typeof val !== 'object';
+    });
 }

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.d.ts

@@ -37,6 +37,22 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
                 [x: string]: any;
             } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & any & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
         } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>)[];
+    } & {
+        readonly allRows: {
+            readonly id: string;
+            readonly conf: {
+                [x: string]: any;
+            } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & {
+                setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
+                    [x: string]: any;
+                } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & any & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
+            } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>;
+            readonly name: string;
+            readonly category: any;
+            readonly adapter: string;
+            readonly description: string | undefined;
+            readonly metadata: Record<string, unknown>;
+        }[];
     } & {
         readonly rows: {
             readonly id: string;
@@ -48,9 +64,9 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
                 } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & any & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
             } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>;
             readonly name: string;
-            readonly category: string;
+            readonly category: any;
             readonly adapter: string;
-            readonly description: string;
+            readonly description: string | undefined;
             readonly metadata: Record<string, unknown>;
         }[];
     } & {
@@ -68,9 +84,9 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
                 } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & any & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
             } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>;
             readonly name: string;
-            readonly category: string;
+            readonly category: any;
             readonly adapter: string;
-            readonly description: string;
+            readonly description: string | undefined;
             readonly metadata: Record<string, unknown>;
         }[];
     } & {

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/esm/HierarchicalTrackSelectorWidget/util.js

@@ -22,9 +22,11 @@ export function matches(query, conf, session) {
 export function matchesMetadata(query, conf) {
     const queryLower = query.toLowerCase();
     const description = (readConfObject(conf, 'description') || '');
-    const metadata = (conf.metadata || {});
+    const metadata = (readConfObject(conf, 'metadata') || {});
     return (description.toLowerCase().includes(queryLower) ||
-        Object.values(metadata).some(v => typeof v === 'string' && v.toLowerCase().includes(queryLower)));
+        Object.values(metadata).some(v => v !== null &&
+            v !== undefined &&
+            `${v}`.toLowerCase().includes(queryLower)));
 }
 export function findSubCategories(obj, paths, depth = 0) {
     let hasSubs = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-data-management",
-  "version": "4.1.13",
+  "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.1",
+    "@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.13",
-    "@jbrowse/plugin-config": "^4.1.13",
-    "@jbrowse/product-core": "^4.1.13"
+    "@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",