@jbrowse/plugin-data-management 3.7.0 → 4.0.0

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ResizeHandle } from '@jbrowse/core/ui';
 import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import FacetFilters from './FacetFilters';
-import FacetedDataGrid from './FacetedDataGrid';
-import FacetedHeader from './FacetedHeader';
-import TrackLabelMenu from '../tree/TrackLabelMenu';
+import FacetFilters from "./FacetFilters.js";
+import FacetedDataGrid from "./FacetedDataGrid.js";
+import FacetedHeader from "./FacetedHeader.js";
+import TrackSelectorTrackMenu from "../tree/TrackSelectorTrackMenu.js";
 const useStyles = makeStyles()({
     cell: {
         whiteSpace: 'nowrap',
@@ -31,7 +31,7 @@ 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(TrackLabelMenu, { id: id, conf: conf, trackId: id, model: model })] }));
+                return (_jsxs("div", { className: classes.cell, children: [_jsx(SanitizedHTML, { html: value }), _jsx(TrackSelectorTrackMenu, { id: id, conf: conf, model: model })] }));
             },
         },
         ...filteredNonMetadataKeys.map(e => {
@@ -49,7 +49,7 @@ const FacetedSelector = observer(function FacetedSelector({ model, }) {
                 headerName: ['name', ...filteredNonMetadataKeys].includes(e)
                     ? `${e} (from metadata)`
                     : e,
-                valueGetter: (_, row) => { var _a; return `${(_a = row.metadata[e]) !== null && _a !== void 0 ? _a : ''}`; },
+                valueGetter: (_, row) => `${row.metadata[e] ?? ''}`,
                 renderCell: params => {
                     const val = params.value;
                     return val ? (_jsx(SanitizedHTML, { className: classes.cell, html: val })) : ('');

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

@@ -0,0 +1,6 @@
+export declare function computeInitialWidths(rows: {
+    name: string;
+    metadata: Record<string, unknown>;
+}[], filteredNonMetadataKeys: readonly string[], filteredMetadataKeys: string[], visible: Record<string, boolean>): {
+    name: number;
+};

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

@@ -0,0 +1,18 @@
+import { measureGridWidth } from '@jbrowse/core/util';
+export function computeInitialWidths(rows, filteredNonMetadataKeys, filteredMetadataKeys, visible) {
+    return {
+        name: measureGridWidth(rows.map(r => r.name), { maxWidth: 500, stripHTML: true }) + 15,
+        ...Object.fromEntries(filteredNonMetadataKeys
+            .filter(f => visible[f])
+            .map(e => [
+            e,
+            measureGridWidth(rows.map(r => r[e]), { maxWidth: 400, stripHTML: true }),
+        ])),
+        ...Object.fromEntries(filteredMetadataKeys
+            .filter(f => visible[`metadata.${f}`])
+            .map(e => [
+            `metadata.${e}`,
+            measureGridWidth(rows.map(r => r.metadata[e]), { maxWidth: 400, stripHTML: true }),
+        ])),
+    };
+}

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

@@ -1,6 +1,5 @@
 export function getRowStr(facet, row) {
-    var _a;
     return `${(facet.startsWith('metadata.')
-        ? (_a = row.metadata) === null || _a === void 0 ? void 0 : _a[facet.replace('metadata.', '')]
+        ? row.metadata?.[facet.replace('metadata.', '')]
         : row[facet]) || ''}`;
 }

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

@@ -1,4 +1,4 @@
-import type { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model.ts';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { MenuItem } from '@jbrowse/core/ui/Menu';
 declare const DropdownTrackSelector: ({ model, tracks, extraMenuItems, children, onClick, }: {

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

@@ -5,15 +5,15 @@ import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
 import { getSession } from '@jbrowse/core/util';
 import { getTrackName } from '@jbrowse/core/util/tracks';
 import { observer } from 'mobx-react';
-import TrackLabelMenu from './TrackLabelMenu';
-const DropdownTrackSelector = observer(function ({ model, tracks, extraMenuItems, children, onClick, }) {
+import TrackSelectorTrackMenu from "./TrackSelectorTrackMenu.js";
+const DropdownTrackSelector = observer(function DropdownTrackSelector({ model, tracks, extraMenuItems, children, onClick, }) {
     const { view } = model;
     const [open, setOpen] = useState(false);
     const session = getSession(model);
     return view ? (_jsx(CascadingMenuButton, { closeAfterItemClick: false, onClick: onClick, menuItems: [
             ...tracks.map(t => ({
                 type: 'checkbox',
-                label: (_jsxs(_Fragment, { children: [_jsx(SanitizedHTML, { html: getTrackName(t, session) }), ' ', _jsx(TrackLabelMenu, { id: t.trackId, trackId: t.trackId, model: model, conf: t, setOpen: setOpen, stopPropagation: true })] })),
+                label: (_jsxs(_Fragment, { children: [_jsx(SanitizedHTML, { html: getTrackName(t, session) }), ' ', _jsx(TrackSelectorTrackMenu, { id: t.trackId, model: model, conf: t, setOpen: setOpen, stopPropagation: true })] })),
                 checked: view.tracks.some((f) => f.configuration === t),
                 onClick: () => {
                     if (!open) {

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

@@ -1,4 +1,4 @@
-import type { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model.ts';
 declare const FavoriteTracks: ({ model, }: {
     model: HierarchicalTrackSelectorModel;
 }) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -2,39 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import GradeIcon from '@mui/icons-material/Grade';
 import { Badge, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import DropdownTrackSelector from './DropdownTrackSelector';
-const useStyles = makeStyles()({
-    smallBadge: {
-        height: 14,
-    },
-    margin: {
-        marginRight: 10,
-    },
-});
-const FavoriteTracks = observer(function ({ model, }) {
-    const { classes } = useStyles();
-    const { view, favoriteTracks } = model;
+import DropdownTrackSelector from "./DropdownTrackSelector.js";
+import { badgeAnchorOrigin, getDropdownMenuItems, useSmallBadgeStyles, } from "./trackListStyles.js";
+const FavoriteTracks = observer(function FavoriteTracks({ model, }) {
+    const { classes } = useSmallBadgeStyles();
+    const { view, favoriteTracks, favoritesCounter } = model;
     return view ? (_jsx(DropdownTrackSelector, { onClick: () => {
             model.setFavoritesCounter(0);
-        }, tracks: favoriteTracks, model: model, extraMenuItems: favoriteTracks.length
-            ? [
-                { type: 'divider' },
-                {
-                    label: 'Clear favorites',
-                    onClick: () => {
-                        model.clearFavorites();
-                    },
-                },
-            ]
-            : [
-                {
-                    label: 'No favorite tracks yet',
-                    onClick: () => { },
-                },
-            ], children: _jsx(Tooltip, { title: "Favorite tracks", children: _jsx(Badge, { classes: { badge: classes.smallBadge }, color: "secondary", anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'right',
-                }, className: classes.margin, badgeContent: model.favoritesCounter, children: _jsx(GradeIcon, {}) }) }) })) : null;
+        }, tracks: favoriteTracks, model: model, extraMenuItems: getDropdownMenuItems({
+            hasTracks: favoriteTracks.length > 0,
+            clearLabel: 'Clear favorites',
+            emptyLabel: 'No favorite tracks yet',
+            onClear: () => {
+                model.clearFavorites();
+            },
+        }), children: _jsx(Tooltip, { title: "Favorite tracks", children: _jsx(Badge, { classes: { badge: classes.smallBadge }, color: "secondary", anchorOrigin: badgeAnchorOrigin, className: classes.margin, badgeContent: favoritesCounter, children: _jsx(GradeIcon, {}) }) }) })) : null;
 });
 export default FavoriteTracks;

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

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

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

@@ -5,12 +5,12 @@ import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import { getSession, isSessionModelWithConnectionEditing, isSessionModelWithConnections, isSessionModelWithWidgets, isSessionWithAddTracks, } from '@jbrowse/core/util';
 import MenuIcon from '@mui/icons-material/Menu';
 import { observer } from 'mobx-react';
-const FacetedDialog = lazy(() => import('../faceted/FacetedDialog'));
-const CloseConnectionDialog = lazy(() => import('../dialogs/CloseConnectionDialog'));
-const DeleteConnectionDialog = lazy(() => import('../dialogs/DeleteConnectionDialog'));
-const ManageConnectionsDialog = lazy(() => import('../dialogs/ManageConnectionsDialog'));
-const ToggleConnectionsDialog = lazy(() => import('../dialogs/ToggleConnectionsDialog'));
-const HamburgerMenu = observer(function ({ model, }) {
+const FacetedDialog = lazy(() => import("../faceted/FacetedDialog.js"));
+const CloseConnectionDialog = lazy(() => import("../dialogs/CloseConnectionDialog.js"));
+const DeleteConnectionDialog = lazy(() => import("../dialogs/DeleteConnectionDialog.js"));
+const ManageConnectionsDialog = lazy(() => import("../dialogs/ManageConnectionsDialog.js"));
+const ToggleConnectionsDialog = lazy(() => import("../dialogs/ToggleConnectionsDialog.js"));
+const HamburgerMenu = observer(function HamburgerMenu({ model, }) {
     const session = getSession(model);
     const [modalInfo, setModalInfo] = useState();
     const [deleteDialogDetails, setDeleteDialogDetails] = useState();
@@ -18,9 +18,8 @@ const HamburgerMenu = observer(function ({ model, }) {
     const [connectionManagerOpen, setConnectionManagerOpen] = useState(false);
     const [facetedOpen, setFacetedOpen] = useState(false);
     function breakConnection(connectionConf, deletingConnection) {
-        var _a;
         const name = readConfObject(connectionConf, 'name');
-        const result = (_a = session.prepareToBreakConnection) === null || _a === void 0 ? void 0 : _a.call(session, connectionConf);
+        const result = session.prepareToBreakConnection?.(connectionConf);
         if (result) {
             const [safelyBreakConnection, dereferenceTypeCount] = result;
             if (Object.keys(dereferenceTypeCount).length > 0) {

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

@@ -1,4 +1,4 @@
-import type { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model.ts';
 declare const HierarchicalTrackSelectorHeader: ({ model, setHeaderHeight, }: {
     model: HierarchicalTrackSelectorModel;
     setHeaderHeight: (n: number) => void;

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

@@ -1,33 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ClearIcon from '@mui/icons-material/Clear';
-import { IconButton, InputAdornment, TextField } from '@mui/material';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import HamburgerMenu from './HamburgerMenu';
-import ShoppingCart from '../ShoppingCart';
-import FavoriteTracks from './FavoriteTracks';
-import RecentlyUsedTracks from './RecentlyUsedTracks';
+import ClearableSearchField from "../ClearableSearchField.js";
+import ShoppingCart from "../ShoppingCart.js";
+import FavoriteTracks from "./FavoriteTracks.js";
+import HamburgerMenu from "./HamburgerMenu.js";
+import RecentlyUsedTracks from "./RecentlyUsedTracks.js";
 const useStyles = makeStyles()(theme => ({
     searchBox: {
         margin: theme.spacing(2),
     },
 }));
-const SearchTracksTextField = observer(function ({ model, }) {
-    const { filterText } = model;
+const HierarchicalTrackSelectorHeader = observer(function HierarchicalTrackSelectorHeader({ model, setHeaderHeight, }) {
     const { classes } = useStyles();
-    return (_jsx(TextField, { className: classes.searchBox, label: "Filter tracks", value: filterText, onChange: event => {
-            model.setFilterText(event.target.value);
-        }, fullWidth: true, slotProps: {
-            input: {
-                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => {
-                            model.clearFilterText();
-                        }, children: _jsx(ClearIcon, {}) }) })),
-            },
-        } }));
-});
-const HierarchicalTrackSelectorHeader = observer(function ({ model, setHeaderHeight, }) {
     return (_jsx("div", { ref: ref => {
-            setHeaderHeight((ref === null || ref === void 0 ? void 0 : 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(SearchTracksTextField, { model: model }), _jsx(RecentlyUsedTracks, { model: model }), _jsx(FavoriteTracks, { model: model })] }) }));
+            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 })] }) }));
 });
 export default HierarchicalTrackSelectorHeader;

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

@@ -1,8 +1,6 @@
-import type { TreeNode } from '../../generateHierarchy';
-import type { HierarchicalTrackSelectorModel } from '../../model';
-declare const HierarchicalTree: ({ height, tree, model, }: {
+import type { HierarchicalTrackSelectorModel } from '../../model.ts';
+declare const HierarchicalTree: ({ height, model, }: {
     height: number;
-    tree: TreeNode;
     model: HierarchicalTrackSelectorModel;
 }) => import("react/jsx-runtime").JSX.Element;
 export default HierarchicalTree;

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

@@ -1,63 +1,46 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { getSession } from '@jbrowse/core/util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { observer } from 'mobx-react';
-import { VariableSizeTree } from 'react-vtree';
-import Node from './TrackListNode';
-function getNodeData(node, nestingLevel, extra, selection) {
-    const isLeaf = node.type === 'track';
-    const selected = isLeaf ? selection[node.trackId] : false;
-    return {
-        data: {
-            defaultHeight: isLeaf ? 22 : 40,
-            isLeaf,
-            isOpenByDefault: true,
-            nestingLevel,
-            selected,
-            ...node,
-            ...extra,
-        },
-        nestingLevel,
-        node,
-    };
-}
-const HierarchicalTree = observer(function HierarchicalTree({ height, tree, model, }) {
-    const { filterText, selection, view } = model;
-    const treeRef = useRef(null);
-    const session = getSession(model);
-    const { drawerPosition } = session;
-    const obj = useMemo(() => Object.fromEntries(selection.map(s => [s.trackId, s])), [selection]);
-    const extra = useMemo(() => ({
-        onChange: (trackId) => {
-            const trackTurnedOn = view.toggleTrack(trackId);
-            if (trackTurnedOn) {
-                model.addToRecentlyUsed(trackId);
-            }
-        },
-        toggleCollapse: (pathName) => {
-            model.toggleCategory(pathName);
-        },
-        tree,
-        model,
-        drawerPosition,
-    }), [view, model, drawerPosition, tree]);
-    const treeWalker = useCallback(function* treeWalker() {
-        for (const child of tree.children) {
-            yield getNodeData(child, 0, extra, obj);
-        }
-        while (true) {
-            const parentMeta = yield;
-            for (const curr of parentMeta.node.children) {
-                yield getNodeData(curr, parentMeta.nestingLevel + 1, extra, obj);
-            }
-        }
-    }, [tree, extra, obj]);
+import TreeItem from "./TreeItem.js";
+const HierarchicalTree = observer(function HierarchicalTree({ height, model, }) {
+    const { flattenedItems, shownTrackIds } = model;
+    const containerRef = useRef(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    const { startIndex, endIndex, totalHeight, itemOffsets } = model.itemOffsets(height, scrollTop);
     useEffect(() => {
-        treeRef.current.recomputeTree({
-            refreshNodes: true,
-            useDefaultHeight: true,
-        });
-    }, [tree, filterText]);
-    return (_jsx(_Fragment, { children: _jsx(VariableSizeTree, { ref: treeRef, treeWalker: treeWalker, height: height, children: Node }) }));
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        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;
+            });
+        };
+        container.addEventListener('scroll', onScroll, { passive: true });
+        return () => {
+            container.removeEventListener('scroll', onScroll);
+        };
+    }, [height, model]);
+    return (_jsx("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;
+            }) }) }));
 });
 export default HierarchicalTree;

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

@@ -1,4 +1,4 @@
-import type { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model.ts';
 declare const RecentlyUsedTracks: ({ model, }: {
     model: HierarchicalTrackSelectorModel;
 }) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -2,36 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import HistoryIcon from '@mui/icons-material/History';
 import { Badge, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import DropdownTrackSelector from './DropdownTrackSelector';
-const useStyles = makeStyles()({
-    smallBadge: {
-        height: 14,
-    },
-});
-const RecentlyUsedTracks = observer(function ({ model, }) {
-    const { classes } = useStyles();
-    const { view, recentlyUsedCounter, recentlyUsedTracks } = model;
+import DropdownTrackSelector from "./DropdownTrackSelector.js";
+import { badgeAnchorOrigin, getDropdownMenuItems, useSmallBadgeStyles, } from "./trackListStyles.js";
+const RecentlyUsedTracks = observer(function RecentlyUsedTracks({ model, }) {
+    const { classes } = useSmallBadgeStyles();
+    const { view, recentlyUsedTracks, recentlyUsedCounter } = model;
     return view ? (_jsx(DropdownTrackSelector, { onClick: () => {
             model.setRecentlyUsedCounter(0);
-        }, model: model, tracks: recentlyUsedTracks, extraMenuItems: recentlyUsedTracks.length
-            ? [
-                { type: 'divider' },
-                {
-                    label: 'Clear recently used',
-                    onClick: () => {
-                        model.clearRecentlyUsed();
-                    },
-                },
-            ]
-            : [
-                {
-                    label: 'No recently used',
-                    onClick: () => { },
-                },
-            ], children: _jsx(Tooltip, { title: "Recently used tracks", children: _jsx(Badge, { classes: { badge: classes.smallBadge }, anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'right',
-                }, color: "secondary", badgeContent: recentlyUsedCounter, children: _jsx(HistoryIcon, {}) }) }) })) : null;
+        }, tracks: recentlyUsedTracks, model: model, extraMenuItems: getDropdownMenuItems({
+            hasTracks: recentlyUsedTracks.length > 0,
+            clearLabel: 'Clear recently used',
+            emptyLabel: 'No recently used',
+            onClear: () => {
+                model.clearRecentlyUsed();
+            },
+        }), children: _jsx(Tooltip, { title: "Recently used tracks", children: _jsx(Badge, { classes: { badge: classes.smallBadge }, color: "secondary", anchorOrigin: badgeAnchorOrigin, badgeContent: recentlyUsedCounter, children: _jsx(HistoryIcon, {}) }) }) })) : null;
 });
 export default RecentlyUsedTracks;

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

@@ -1,6 +1,7 @@
-import type { NodeData } from '../util';
-export default function Category({ isOpen, setOpen, data, }: {
-    isOpen: boolean;
-    setOpen: (arg: boolean) => void;
-    data: NodeData;
-}): import("react/jsx-runtime").JSX.Element;
+import type { HierarchicalTrackSelectorModel } from '../../model.ts';
+import type { TreeCategoryNode } from '../../types.ts';
+declare const TrackCategory: ({ item, model, }: {
+    item: TreeCategoryNode;
+    model: HierarchicalTrackSelectorModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TrackCategory;