@jbrowse/plugin-data-management 2.6.2 → 2.6.3

package/dist/PluginStoreWidget/components/InstalledPluginsList.js

@@ -7,14 +7,11 @@ const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
 const material_1 = require("@mui/material");
 const InstalledPlugin_1 = __importDefault(require("./InstalledPlugin"));
-function InstalledPluginsList({ pluginManager, model, }) {
+exports.default = (0, mobx_react_1.observer)(function InstalledPluginsList({ pluginManager, model, }) {
     const { plugins } = pluginManager;
-    const corePlugins = new Set(plugins
-        .filter(p => { var _a; return (_a = pluginManager.pluginMetadata[p.name]) === null || _a === void 0 ? void 0 : _a.isCore; })
-        .map(p => p.name));
-    const externalPlugins = plugins.filter(plugin => !corePlugins.has(plugin.name));
+    const { filterText } = model;
+    const externalPlugins = plugins.filter(p => { var _a; return !((_a = pluginManager.pluginMetadata[p.name]) === null || _a === void 0 ? void 0 : _a.isCore); });
     return (react_1.default.createElement(material_1.List, null, externalPlugins.length > 0 ? (externalPlugins
-        .filter(plugin => plugin.name.toLowerCase().includes(model.filterText.toLowerCase()))
-        .map(plugin => (react_1.default.createElement(InstalledPlugin_1.default, { key: plugin.name, plugin: plugin, model: model, pluginManager: pluginManager })))) : (react_1.default.createElement(material_1.Typography, null, "No plugins currently installed"))));
-}
-exports.default = (0, mobx_react_1.observer)(InstalledPluginsList);
+        .filter(p => p.name.toLowerCase().includes(filterText.toLowerCase()))
+        .map(p => react_1.default.createElement(InstalledPlugin_1.default, { key: p.name, plugin: p, model: model }))) : (react_1.default.createElement(material_1.Typography, null, "No plugins currently installed"))));
+});

package/dist/PluginStoreWidget/components/PluginCard.js

@@ -39,7 +39,7 @@ const Add_1 = __importDefault(require("@mui/icons-material/Add"));
 const Check_1 = __importDefault(require("@mui/icons-material/Check"));
 const useStyles = (0, mui_1.makeStyles)()({
     card: {
-        margin: '1em',
+        margin: '0.5em',
     },
     icon: {
         marginLeft: '0.5em',
@@ -51,7 +51,6 @@ const useStyles = (0, mui_1.makeStyles)()({
     dataField: {
         display: 'flex',
         alignItems: 'center',
-        margin: '0.4em 0em',
     },
 });
 exports.default = (0, mobx_react_1.observer)(function PluginCard({ plugin, model, adminMode, }) {
@@ -67,9 +66,8 @@ exports.default = (0, mobx_react_1.observer)(function PluginCard({ plugin, model
     const { jbrowse } = rootModel;
     return (react_1.default.createElement(material_1.Card, { variant: "outlined", key: plugin.name, className: classes.card },
         react_1.default.createElement(material_1.CardContent, null,
-            react_1.default.createElement("div", { className: classes.dataField },
-                react_1.default.createElement(material_1.Typography, { variant: "h5" },
-                    react_1.default.createElement(material_1.Link, { href: `${plugin.location}#readme`, target: "_blank", rel: "noopener" }, plugin.name))),
+            react_1.default.createElement(material_1.Typography, { variant: "h5" },
+                react_1.default.createElement(material_1.Link, { href: `${plugin.location}#readme`, target: "_blank", rel: "noopener" }, plugin.name)),
             react_1.default.createElement("div", { className: classes.dataField },
                 react_1.default.createElement(Person_1.default, { style: { marginRight: '0.5em' } }),
                 react_1.default.createElement(material_1.Typography, null, plugin.authors.join(', '))),

package/dist/PluginStoreWidget/components/PluginStoreWidget.js

@@ -40,16 +40,14 @@ const InfoOutlined_1 = __importDefault(require("@mui/icons-material/InfoOutlined
 // locals
 const InstalledPluginsList_1 = __importDefault(require("./InstalledPluginsList"));
 const PluginCard_1 = __importDefault(require("./PluginCard"));
-const CustomPluginForm_1 = __importDefault(require("./CustomPluginForm"));
+const util_2 = require("./util");
+// lazies
+const AddCustomPluginDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./AddCustomPluginDialog'))));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    root: {
-        margin: theme.spacing(1),
-    },
     expandIcon: {
         color: theme.palette.tertiary.contrastText,
     },
     adminBadge: {
-        margin: '0.5em',
         borderRadius: 3,
         backgroundColor: theme.palette.quaternary.main,
         padding: '1em',
@@ -57,43 +55,17 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         alignContent: 'center',
     },
     customPluginButton: {
-        margin: '0.5em',
+        margin: '1em auto',
         display: 'flex',
-        justifyContent: 'center',
     },
 }));
 function PluginStoreWidget({ model }) {
     const { classes } = useStyles();
-    const [pluginArray, setPluginArray] = (0, react_1.useState)();
-    const [error, setError] = (0, react_1.useState)();
-    const [customPluginFormOpen, setCustomPluginFormOpen] = (0, react_1.useState)(false);
+    const { plugins, error } = (0, util_2.useFetchPlugins)();
+    const [open, setOpen] = (0, react_1.useState)(false);
     const { adminMode } = (0, util_1.getSession)(model);
     const { pluginManager } = (0, mobx_state_tree_1.getEnv)(model);
-    (0, react_1.useEffect)(() => {
-        const controller = new AbortController();
-        const { signal } = controller;
-        (async () => {
-            try {
-                const response = await fetch('https://jbrowse.org/plugin-store/plugins.json', { signal });
-                if (!response.ok) {
-                    const err = await response.text();
-                    throw new Error(`Failed to fetch plugin data: ${response.status} ${response.statusText} ${err}`);
-                }
-                const array = await response.json();
-                if (!signal.aborted) {
-                    setPluginArray(array.plugins);
-                }
-            }
-            catch (e) {
-                console.error(e);
-                setError(e);
-            }
-        })();
-        return () => {
-            controller.abort();
-        };
-    }, []);
-    return (react_1.default.createElement("div", { className: classes.root },
+    return (react_1.default.createElement("div", null,
         adminMode && (react_1.default.createElement(react_1.default.Fragment, null,
             !util_1.isElectron && (react_1.default.createElement("div", { className: classes.adminBadge },
                 react_1.default.createElement(InfoOutlined_1.default, { style: { marginRight: '0.3em' } }),
@@ -101,9 +73,9 @@ function PluginStoreWidget({ model }) {
                     "You are using the ",
                     react_1.default.createElement("code", null, "admin-server"),
                     ". Any changes you make will be saved to your configuration file. You also have the ability to add custom plugins that are not in the store."))),
-            react_1.default.createElement("div", { className: classes.customPluginButton },
-                react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => setCustomPluginFormOpen(true) }, "Add custom plugin")),
-            react_1.default.createElement(CustomPluginForm_1.default, { open: customPluginFormOpen, onClose: () => setCustomPluginFormOpen(false), model: model }))),
+            react_1.default.createElement(material_1.Button, { className: classes.customPluginButton, variant: "contained", onClick: () => setOpen(true) }, "Add custom plugin"),
+            open ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(react_1.default.Fragment, null) },
+                react_1.default.createElement(AddCustomPluginDialog, { onClose: () => setOpen(false), model: model }))) : null)),
         react_1.default.createElement(material_1.TextField, { label: "Filter plugins", value: model.filterText, onChange: event => model.setFilterText(event.target.value), fullWidth: true, InputProps: {
                 endAdornment: (react_1.default.createElement(material_1.InputAdornment, { position: "end" },
                     react_1.default.createElement(material_1.IconButton, { onClick: () => model.clearFilterText() },
@@ -117,7 +89,7 @@ function PluginStoreWidget({ model }) {
         react_1.default.createElement(material_1.Accordion, { defaultExpanded: true },
             react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.expandIcon }) },
                 react_1.default.createElement(material_1.Typography, { variant: "h5" }, "Available plugins")),
-            error ? (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) : pluginArray ? (pluginArray
+            error ? (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) : plugins ? (plugins
                 .filter(plugin => {
                 // If plugin only has cjsUrl, don't display outside desktop
                 return (!(util_1.isElectron && plugin.cjsUrl) &&

package/dist/PluginStoreWidget/components/util.d.ts

@@ -0,0 +1,5 @@
+import { JBrowsePlugin } from '@jbrowse/core/util/types';
+export declare function useFetchPlugins(): {
+    plugins: JBrowsePlugin[] | undefined;
+    error: unknown;
+};

package/dist/PluginStoreWidget/components/util.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFetchPlugins = void 0;
+const react_1 = require("react");
+function useFetchPlugins() {
+    const [plugins, setPlugins] = (0, react_1.useState)();
+    const [error, setError] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;
+        (async () => {
+            try {
+                const res = await fetch('https://jbrowse.org/plugin-store/plugins.json');
+                if (!res.ok) {
+                    const err = await res.text();
+                    throw new Error(`HTTP ${res.status} fetching plugins: ${err}`);
+                }
+                const array = await res.json();
+                setPlugins(array.plugins);
+            }
+            catch (e) {
+                console.error(e);
+                setError(e);
+            }
+        })();
+    }, []);
+    return { plugins, error };
+}
+exports.useFetchPlugins = useFetchPlugins;

package/dist/PluginStoreWidget/model.d.ts

@@ -1,6 +1,6 @@
 import { Instance } from 'mobx-state-tree';
 import PluginManager from '@jbrowse/core/PluginManager';
-export default function f(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
+export default function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     type: import("mobx-state-tree").ISimpleType<"PluginStoreWidget">;
     filterText: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -9,5 +9,5 @@ export default function f(pluginManager: PluginManager): import("mobx-state-tree
     clearFilterText(): void;
     setFilterText(newText: string): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
-export type PluginStoreStateModel = ReturnType<typeof f>;
+export type PluginStoreStateModel = ReturnType<typeof stateModelFactory>;
 export type PluginStoreModel = Instance<PluginStoreStateModel>;

package/dist/PluginStoreWidget/model.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const mobx_state_tree_1 = require("mobx-state-tree");
 const mst_1 = require("@jbrowse/core/util/types/mst");
-function f(pluginManager) {
+function stateModelFactory(pluginManager) {
     return mobx_state_tree_1.types
         .model('PluginStoreModel', {
         id: mst_1.ElementId,
@@ -19,4 +19,4 @@ function f(pluginManager) {
         },
     }));
 }
-exports.default = f;
+exports.default = stateModelFactory;

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

@@ -14,8 +14,7 @@ import { getEnv, getSession, measureGridWidth, useDebounce, } from '@jbrowse/cor
 import { readConfObject, } from '@jbrowse/core/configuration';
 // icons
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
-// locals
-import { matches } from '../../model';
+import { matches } from '../../util';
 import FacetedHeader from './FacetedHeader';
 import FacetFilters from './FacetFilters';
 import { getRootKeys } from './util';

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

@@ -1,10 +1,8 @@
 import React, { Suspense, lazy, useState } from 'react';
-import { IconButton } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
-import JBrowseMenu from '@jbrowse/core/ui/Menu';
 import { getSession, isSessionModelWithConnectionEditing, isSessionModelWithConnections, isSessionModelWithWidgets, isSessionWithAddTracks, } from '@jbrowse/core/util';
 import { readConfObject, } from '@jbrowse/core/configuration';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 // icons
 import MenuIcon from '@mui/icons-material/Menu';
 // lazy components
@@ -12,20 +10,12 @@ const CloseConnectionDlg = lazy(() => import('../dialogs/CloseConnectionDialog')
 const DeleteConnectionDlg = lazy(() => import('../dialogs/DeleteConnectionDialog'));
 const ManageConnectionsDlg = lazy(() => import('../dialogs/ManageConnectionsDialog'));
 const ToggleConnectionsDlg = lazy(() => import('../dialogs/ToggleConnectionsDialog'));
-const useStyles = makeStyles()(theme => ({
-    menuIcon: {
-        marginRight: theme.spacing(1),
-        marginBottom: 0,
-    },
-}));
 export default observer(function HamburgerMenu({ model, }) {
     const session = getSession(model);
-    const [menuEl, setMenuEl] = useState();
     const [modalInfo, setModalInfo] = useState();
     const [deleteDlgDetails, setDeleteDlgDetails] = useState();
     const [connectionToggleOpen, setConnectionToggleOpen] = useState(false);
     const [connectionManagerOpen, setConnectionManagerOpen] = useState(false);
-    const { classes } = useStyles();
     function breakConnection(connectionConf, deletingConnection) {
         const name = readConfObject(connectionConf, 'name');
         const result = session.prepareToBreakConnection(connectionConf);
@@ -48,12 +38,7 @@ export default observer(function HamburgerMenu({ model, }) {
         }
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(IconButton, { className: classes.menuIcon, onClick: event => setMenuEl(event.currentTarget) },
-            React.createElement(MenuIcon, null)),
-        React.createElement(JBrowseMenu, { anchorEl: menuEl, open: Boolean(menuEl), onMenuItemClick: (_, callback) => {
-                callback();
-                setMenuEl(undefined);
-            }, onClose: () => setMenuEl(undefined), menuItems: [
+        React.createElement(CascadingMenuButton, { menuItems: [
                 ...(isSessionWithAddTracks(session)
                     ? [
                         {
@@ -92,7 +77,38 @@ export default observer(function HamburgerMenu({ model, }) {
                         },
                     ]
                     : []),
-            ] }),
+                { type: 'divider' },
+                {
+                    label: 'Sort tracks by name',
+                    type: 'checkbox',
+                    checked: model.activeSortTrackNames,
+                    onClick: () => model.setSortTrackNames(!model.activeSortTrackNames),
+                },
+                {
+                    label: 'Sort categories by name',
+                    type: 'checkbox',
+                    checked: model.activeSortCategories,
+                    onClick: () => model.setSortCategories(!model.activeSortCategories),
+                },
+                { type: 'divider' },
+                ...(model.hasAnySubcategories
+                    ? [
+                        {
+                            label: 'Collapse subcategories',
+                            onClick: () => model.collapseSubCategories(),
+                        },
+                    ]
+                    : []),
+                {
+                    label: 'Collapse top-level categories',
+                    onClick: () => model.collapseTopLevelCategories(),
+                },
+                {
+                    label: 'Expand all categories',
+                    onClick: () => model.expandAllCategories(),
+                },
+            ] },
+            React.createElement(MenuIcon, null)),
         React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null) },
             modalInfo ? (React.createElement(CloseConnectionDlg, { modalInfo: modalInfo, onClose: () => setModalInfo(undefined) })) : null,
             deleteDlgDetails ? (React.createElement(DeleteConnectionDlg, { handleClose: () => setDeleteDlgDetails(undefined), deleteDialogDetails: deleteDlgDetails, session: session })) : null,

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

@@ -17,19 +17,23 @@ const useStyles = makeStyles()(theme => ({
         marginBottom: 0,
     },
 }));
+const SearchTracksTextField = observer(function ({ model, }) {
+    const { filterText } = model;
+    const { classes } = useStyles();
+    return (React.createElement(TextField, { className: classes.searchBox, label: "Filter tracks", value: filterText, onChange: event => model.setFilterText(event.target.value), fullWidth: true, InputProps: {
+            endAdornment: (React.createElement(InputAdornment, { position: "end" },
+                React.createElement(IconButton, { onClick: () => model.clearFilterText() },
+                    React.createElement(ClearIcon, null)))),
+        } }));
+});
 function HierarchicalTrackSelectorHeader({ model, setHeaderHeight, }) {
     const { classes } = useStyles();
     const [facetedOpen, setFacetedOpen] = useState(false);
-    const { filterText } = model;
     return (React.createElement("div", { ref: ref => setHeaderHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0), "data-testid": "hierarchical_track_selector" },
         React.createElement("div", { style: { display: 'flex' } },
             React.createElement(HamburgerMenu, { model: model }),
             React.createElement(ShoppingCart, { model: model }),
-            React.createElement(TextField, { className: classes.searchBox, label: "Filter tracks", value: filterText, onChange: event => model.setFilterText(event.target.value), fullWidth: true, InputProps: {
-                    endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                        React.createElement(IconButton, { onClick: () => model.clearFilterText() },
-                            React.createElement(ClearIcon, null)))),
-                } }),
+            React.createElement(SearchTracksTextField, { model: model }),
             React.createElement(Button, { className: classes.menuIcon, onClick: () => setFacetedOpen(true) }, "Open faceted selector")),
         React.createElement(Suspense, { fallback: React.createElement("div", null) }, facetedOpen ? (React.createElement(FacetedDialog, { handleClose: () => setFacetedOpen(false), model: model })) : null)));
 }

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { TreeNode, HierarchicalTrackSelectorModel } from '../../model';
+import { TreeNode } from '../../generateHierarchy';
+import { HierarchicalTrackSelectorModel } from '../../model';
 declare const _default: ({ height, tree, model, }: {
     height: number;
     tree: TreeNode;

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

@@ -52,6 +52,28 @@ export default function Category({ isOpen, setOpen, data, }) {
                         model.removeFromSelection(getAllChildren(r));
                     },
                 },
+                {
+                    label: 'Show all tracks',
+                    onClick: () => {
+                        var _a;
+                        for (const entry of ((_a = treeToMap(tree).get(id)) === null || _a === void 0 ? void 0 : _a.children) || []) {
+                            if (!entry.children.length) {
+                                model.view.showTrack(entry.id);
+                            }
+                        }
+                    },
+                },
+                {
+                    label: 'Hide all tracks',
+                    onClick: () => {
+                        var _a;
+                        for (const entry of ((_a = treeToMap(tree).get(id)) === null || _a === void 0 ? void 0 : _a.children) || []) {
+                            if (!entry.children.length) {
+                                model.view.hideTrack(entry.id);
+                            }
+                        }
+                    },
+                },
             ], onMenuItemClick: (_event, callback) => {
                 callback();
                 setMenuEl(null);

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

@@ -31,7 +31,7 @@ export default function TrackLabel({ data }) {
             React.createElement(FormControlLabel, { className: classes.checkboxLabel, control: React.createElement(Checkbox, { className: classes.compactCheckbox, checked: checked, onChange: () => onChange(id), disabled: isUnsupported(name), inputProps: {
                         // @ts-expect-error
                         'data-testid': `htsTrackEntry-${id}`,
-                    } }), label: React.createElement("div", { style: { background: selected ? '#cccc' : undefined } },
+                    } }), label: React.createElement("div", { "data-testid": `htsTrackLabel-${id}`, style: { background: selected ? '#cccc' : undefined } },
                     React.createElement(SanitizedHTML, { html: name })) })),
         React.createElement(IconButton, { onClick: e => setInfo({ target: e.currentTarget, id, conf }), style: { padding: 0 }, "data-testid": `htsTrackEntryMenu-${id}` },
             React.createElement(MoreHorizIcon, null)),

package/esm/HierarchicalTrackSelectorWidget/components/util.d.ts

@@ -1,5 +1,6 @@
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { HierarchicalTrackSelectorModel, TreeNode } from '../model';
+import { HierarchicalTrackSelectorModel } from '../model';
+import { TreeNode } from '../generateHierarchy';
 export interface NodeData {
     nestingLevel: number;
     checked: boolean;

package/esm/HierarchicalTrackSelectorWidget/filterTracks.d.ts

@@ -0,0 +1,12 @@
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+export declare function filterTracks(tracks: AnyConfigurationModel[], self: {
+    view?: {
+        type: string;
+        trackSelectorAnyOverlap?: boolean;
+    };
+    assemblyNames: string[];
+}): ({
+    [x: string]: any;
+} & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+    setSubschema(slotName: string, data: unknown): any;
+} & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>)[];

package/esm/HierarchicalTrackSelectorWidget/filterTracks.js

@@ -0,0 +1,28 @@
+import { readConfObject, } from '@jbrowse/core/configuration';
+import { getEnv, getSession, notEmpty } from '@jbrowse/core/util';
+import { hasAllOverlap, hasAnyOverlap } from './util';
+export function filterTracks(tracks, self) {
+    const { assemblyManager } = getSession(self);
+    const { pluginManager } = getEnv(self);
+    const { view } = self;
+    if (!view) {
+        return [];
+    }
+    const trackListAssemblies = self.assemblyNames
+        .map(a => assemblyManager.get(a))
+        .filter(notEmpty);
+    return tracks
+        .filter(c => {
+        const trackAssemblyNames = readConfObject(c, 'assemblyNames');
+        const trackAssemblies = trackAssemblyNames === null || trackAssemblyNames === void 0 ? void 0 : trackAssemblyNames.map(name => assemblyManager.get(name)).filter(notEmpty);
+        return view.trackSelectorAnyOverlap
+            ? hasAnyOverlap(trackAssemblies, trackListAssemblies)
+            : hasAllOverlap(trackAssemblies, trackListAssemblies);
+    })
+        .filter(c => {
+        const { displayTypes } = pluginManager.getViewType(view.type);
+        const compatDisplays = displayTypes.map(d => d.name);
+        const trackDisplays = c.displays.map((d) => d.type);
+        return hasAnyOverlap(compatDisplays, trackDisplays);
+    });
+}

package/esm/HierarchicalTrackSelectorWidget/generateHierarchy.d.ts

@@ -0,0 +1,21 @@
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+export type TreeNode = {
+    name: string;
+    id: string;
+    conf?: AnyConfigurationModel;
+    checked?: boolean;
+    isOpenByDefault?: boolean;
+    children: TreeNode[];
+};
+export declare function generateHierarchy(model: {
+    filterText: string;
+    activeSortTrackNames: boolean;
+    activeSortCategories: boolean;
+    view?: {
+        tracks: {
+            configuration: AnyConfigurationModel;
+        }[];
+    };
+}, trackConfs: AnyConfigurationModel[], collapsed: {
+    get: (arg: string) => boolean | undefined;
+}, extra?: string): TreeNode[];

package/esm/HierarchicalTrackSelectorWidget/generateHierarchy.js

@@ -0,0 +1,94 @@
+import { readConfObject, } from '@jbrowse/core/configuration';
+import { getSession } from '@jbrowse/core/util';
+import { getTrackName } from '@jbrowse/core/util/tracks';
+// locals
+import { matches } from './util';
+function sortConfs(confs, sortNames, sortCategories) {
+    // uses readConfObject instead of getTrackName so that the undefined
+    // reference sequence track is sorted to the top
+    const ret = confs.map(c => {
+        var _a, _b, _c;
+        return [
+            c,
+            readConfObject(c, 'name'),
+            ((_a = readConfObject(c, 'category')) === null || _a === void 0 ? void 0 : _a[0]) || '',
+            ((_b = readConfObject(c, 'category')) === null || _b === void 0 ? void 0 : _b[1]) || '',
+            ((_c = readConfObject(c, 'category')) === null || _c === void 0 ? void 0 : _c[2]) || '',
+        ];
+    });
+    if (sortNames) {
+        ret.sort((a, b) => a[1].localeCompare(b[1]));
+    }
+    if (sortCategories) {
+        // sort up to three sub-category levels, harder to code it to go deeper
+        // than this and likely rarely used
+        ret.sort((a, b) => {
+            if (a[2] !== b[2]) {
+                return a[2].localeCompare(b[2]);
+            }
+            else if (a[3] !== b[3]) {
+                return a[3].localeCompare(b[3]);
+            }
+            else if (a[4] !== b[4]) {
+                return a[4].localeCompare(b[4]);
+            }
+            return 0;
+        });
+    }
+    return ret.map(a => a[0]);
+}
+export function generateHierarchy(model, trackConfs, collapsed, extra) {
+    const hierarchy = { children: [] };
+    const { filterText, activeSortTrackNames, activeSortCategories, view } = model;
+    if (!view) {
+        return [];
+    }
+    const session = getSession(model);
+    const viewTracks = view.tracks;
+    const confs = trackConfs.filter(conf => matches(filterText, conf, session));
+    // uses getConf
+    for (const conf of sortConfs(confs, activeSortTrackNames, activeSortCategories)) {
+        // copy the categories since this array can be mutated downstream
+        const categories = [...(readConfObject(conf, 'category') || [])];
+        // hack where if trackId ends with sessionTrack, then push it to a
+        // category that starts with a space to force sort to the top
+        if (conf.trackId.endsWith('sessionTrack')) {
+            categories.unshift(' Session tracks');
+        }
+        let currLevel = hierarchy;
+        // find existing category to put track into or create it
+        for (let i = 0; i < categories.length; i++) {
+            const category = categories[i];
+            const ret = currLevel.children.find(c => c.name === category);
+            const id = [extra, categories.slice(0, i + 1).join(',')]
+                .filter(f => !!f)
+                .join('-');
+            if (!ret) {
+                const n = {
+                    children: [],
+                    name: category,
+                    id,
+                    isOpenByDefault: !collapsed.get(id),
+                };
+                currLevel.children.push(n);
+                currLevel = n;
+            }
+            else {
+                currLevel = ret;
+            }
+        }
+        // uses splice to try to put all leaf nodes above "category nodes" if you
+        // change the splice to a simple push and open
+        // test_data/test_order/config.json you will see the weirdness
+        const r = currLevel.children.findIndex(elt => elt.children.length);
+        const idx = r === -1 ? currLevel.children.length : r;
+        currLevel.children.splice(idx, 0, {
+            id: conf.trackId,
+            name: getTrackName(conf, session),
+            conf,
+            checked: viewTracks.some(f => f.configuration === conf),
+            children: [],
+        });
+    }
+    return hierarchy.children;
+}