@jbrowse/plugin-data-management 2.11.1 → 2.12.0

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

@@ -1,9 +1,32 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const mobx_1 = require("mobx");
 const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
@@ -11,9 +34,7 @@ const x_data_grid_1 = require("@mui/x-data-grid");
 // jbrowse
 const ui_1 = require("@jbrowse/core/ui");
 const SanitizedHTML_1 = __importDefault(require("@jbrowse/core/ui/SanitizedHTML"));
-const ResizeBar_1 = __importDefault(require("@jbrowse/core/ui/ResizeBar"));
 const util_1 = require("@jbrowse/core/util");
-const useResizeBar_1 = require("@jbrowse/core/ui/useResizeBar");
 const mui_1 = require("tss-react/mui");
 const FacetedHeader_1 = __importDefault(require("./FacetedHeader"));
 const FacetFilters_1 = __importDefault(require("./FacetFilters"));
@@ -35,10 +56,25 @@ const FacetedSelector = (0, mobx_react_1.observer)(function FacetedSelector({ mo
     var _a;
     const { classes } = useStyles();
     const { view, selection, shownTrackIds, faceted } = model;
-    const { rows, panelWidth, showFilters, useShoppingCart, showOptions, filteredRows, filteredNonMetadataKeys, filteredMetadataKeys, visible, widths, } = faceted;
+    const { rows, panelWidth, showFilters, useShoppingCart, showOptions, filteredRows, filteredNonMetadataKeys, filteredMetadataKeys, visible, } = faceted;
     const { pluginManager } = (0, util_1.getEnv)(model);
-    const { ref, scrollLeft } = (0, useResizeBar_1.useResizeBar)();
-    const widthsDebounced = (0, util_1.useDebounce)(widths, 200);
+    const [widths, setWidths] = (0, react_1.useState)({
+        name: (0, util_1.measureGridWidth)(rows.map(r => r.name), { maxWidth: 500, stripHTML: true }) + 15,
+        ...Object.fromEntries(filteredNonMetadataKeys
+            .filter(f => visible[f])
+            .map(e => [
+            e,
+            (0, util_1.measureGridWidth)(rows.map(r => r[e]), { maxWidth: 400, stripHTML: true }),
+        ])),
+        ...Object.fromEntries(filteredMetadataKeys
+            .filter(f => visible['metadata.' + f])
+            .map(e => {
+            return [
+                'metadata.' + e,
+                (0, util_1.measureGridWidth)(rows.map(r => r.metadata[e]), { maxWidth: 400, stripHTML: true }),
+            ];
+        })),
+    });
     const columns = [
         {
             field: 'name',
@@ -50,13 +86,13 @@ const FacetedSelector = (0, mobx_react_1.observer)(function FacetedSelector({ mo
                     react_1.default.createElement(SanitizedHTML_1.default, { html: value }),
                     react_1.default.createElement(TrackLabelMenu_1.default, { id: id, conf: conf, trackId: id, model: model })));
             },
-            width: (_a = widthsDebounced.name) !== null && _a !== void 0 ? _a : 100,
+            width: (_a = widths.name) !== null && _a !== void 0 ? _a : 100,
         },
         ...filteredNonMetadataKeys.map(e => {
             var _a;
             return {
                 field: e,
-                width: (_a = widthsDebounced[e]) !== null && _a !== void 0 ? _a : 100,
+                width: (_a = widths[e]) !== null && _a !== void 0 ? _a : 100,
                 renderCell: params => {
                     const val = params.value;
                     return val ? (react_1.default.createElement(SanitizedHTML_1.default, { className: classes.cell, html: val })) : ('');
@@ -70,8 +106,8 @@ const FacetedSelector = (0, mobx_react_1.observer)(function FacetedSelector({ mo
                 headerName: ['name', ...filteredNonMetadataKeys].includes(e)
                     ? `${e} (from metadata)`
                     : e,
-                width: (_a = widthsDebounced['metadata.' + e]) !== null && _a !== void 0 ? _a : 100,
-                valueGetter: (_, row) => `${row.metadata[e]}`,
+                width: (_a = widths['metadata.' + e]) !== null && _a !== void 0 ? _a : 100,
+                valueGetter: (_, row) => { var _a; return `${(_a = row.metadata[e]) !== null && _a !== void 0 ? _a : ''}`; },
                 renderCell: params => {
                     const val = params.value;
                     return val ? (react_1.default.createElement(SanitizedHTML_1.default, { className: classes.cell, html: val })) : ('');
@@ -81,7 +117,7 @@ const FacetedSelector = (0, mobx_react_1.observer)(function FacetedSelector({ mo
     ];
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(FacetedHeader_1.default, { model: model }),
-        react_1.default.createElement("div", { ref: ref, style: {
+        react_1.default.createElement("div", { style: {
                 display: 'flex',
                 overflow: 'hidden',
                 height: window.innerHeight * frac,
@@ -91,11 +127,7 @@ const FacetedSelector = (0, mobx_react_1.observer)(function FacetedSelector({ mo
                     height: window.innerHeight * frac,
                     width: window.innerWidth * frac - (showFilters ? panelWidth : 0),
                 } },
-                react_1.default.createElement(ResizeBar_1.default, { checkbox: true, widths: Object.values(widths).map(f => f !== null && f !== void 0 ? f : 100), setWidths: newWidths => faceted.setWidths(Object.fromEntries(Object.entries(widths).map((entry, idx) => [
-                        entry[0],
-                        newWidths[idx],
-                    ]))), scrollLeft: scrollLeft }),
-                react_1.default.createElement(x_data_grid_1.DataGrid, { rows: filteredRows, columnVisibilityModel: visible, onColumnVisibilityModelChange: n => faceted.setVisible(n), columnHeaderHeight: 35, checkboxSelection: true, disableRowSelectionOnClick: true, keepNonExistentRowsSelected: true, onRowSelectionModelChange: userSelectedIds => {
+                react_1.default.createElement(x_data_grid_1.DataGrid, { rows: filteredRows, onColumnWidthChange: arg => setWidths({ ...widths, [arg.colDef.field]: arg.width }), columnVisibilityModel: visible, onColumnVisibilityModelChange: n => faceted.setVisible(n), columnHeaderHeight: 35, checkboxSelection: true, disableRowSelectionOnClick: true, keepNonExistentRowsSelected: true, onRowSelectionModelChange: userSelectedIds => {
                         if (!useShoppingCart) {
                             const a1 = shownTrackIds;
                             const a2 = new Set(userSelectedIds);

package/dist/HierarchicalTrackSelectorWidget/facetedModel.d.ts

@@ -25,7 +25,6 @@ export declare function facetedStateTreeF(): import("mobx-state-tree").IModelTyp
     panelWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
 }, {
     visible: Record<string, boolean>;
-    widths: Record<string, number | undefined>;
     useShoppingCart: boolean;
     filters: import("mobx").ObservableMap<string, string[]>;
 } & {
@@ -118,10 +117,6 @@ export declare function facetedStateTreeF(): import("mobx-state-tree").IModelTyp
      * #action
      */
     setVisible(args: Record<string, boolean>): void;
-    /**
-     * #action
-     */
-    setWidths(args: Record<string, number | undefined>): void;
     afterAttach(): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type FacetedStateModel = ReturnType<typeof facetedStateTreeF>;

package/dist/HierarchicalTrackSelectorWidget/facetedModel.js

@@ -39,7 +39,6 @@ function facetedStateTreeF() {
     })
         .volatile(() => ({
         visible: {},
-        widths: {},
         useShoppingCart: false,
         filters: mobx_1.observable.map(),
     }))
@@ -167,35 +166,10 @@ function facetedStateTreeF() {
         setVisible(args) {
             self.visible = args;
         },
-        /**
-         * #action
-         */
-        setWidths(args) {
-            self.widths = args;
-        },
         afterAttach() {
             (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
                 this.setVisible(Object.fromEntries(self.fields.map(c => [c, true])));
             }));
-            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
-                this.setWidths({
-                    name: (0, util_2.measureGridWidth)(self.rows.map(r => r.name), { maxWidth: 500, stripHTML: true }) + 15,
-                    ...Object.fromEntries(self.filteredNonMetadataKeys
-                        .filter(f => self.visible[f])
-                        .map(e => [
-                        e,
-                        (0, util_2.measureGridWidth)(self.rows.map(r => r[e]), { maxWidth: 400, stripHTML: true }),
-                    ])),
-                    ...Object.fromEntries(self.filteredMetadataKeys
-                        .filter(f => self.visible['metadata.' + f])
-                        .map(e => {
-                        return [
-                            'metadata.' + e,
-                            (0, util_2.measureGridWidth)(self.rows.map(r => r.metadata[e]), { maxWidth: 400, stripHTML: true }),
-                        ];
-                    })),
-                });
-            }));
         },
     }));
 }

package/dist/HierarchicalTrackSelectorWidget/model.d.ts

@@ -29,7 +29,6 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
         panelWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
     }, {
         visible: Record<string, boolean>;
-        widths: Record<string, number | undefined>;
         useShoppingCart: boolean;
         filters: import("mobx").ObservableMap<string, string[]>;
     } & {
@@ -38,7 +37,9 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
         setUseShoppingCart(f: boolean): void;
         setFilterText(str: string): void;
         setShowSparse(f: boolean): void;
-        setShowOptions(f: boolean): void;
+        setShowOptions(f: boolean): void; /**
+         * #property
+         */
         setShowFilters(f: boolean): void;
     } & {
         readonly allTrackConfigurations: ({
@@ -80,7 +81,6 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
         }[];
     } & {
         setVisible(args: Record<string, boolean>): void;
-        setWidths(args: Record<string, number | undefined>): void;
         afterAttach(): void;
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>, [undefined]>;
 }, {

package/dist/HierarchicalTrackSelectorWidget/model.js

@@ -454,44 +454,48 @@ function stateTreeFactory(pluginManager) {
             (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
                 const { assemblyNames, view } = self;
                 self.setRecentlyUsed(localStorageGetJSON(recentlyUsedK(assemblyNames), '[]'));
-                const val = (0, util_1.localStorageGetItem)(collapsedK(assemblyNames, view.type));
-                if (!val) {
-                    self.expandAllCategories();
-                    const session = (0, util_1.getSession)(self);
-                    if ((0, configuration_1.getConf)(session, [
-                        'hierarchical',
-                        'defaultCollapsed',
-                        'topLevelCategories',
-                    ])) {
-                        self.collapseTopLevelCategories();
+                if (view) {
+                    const val = (0, util_1.localStorageGetItem)(collapsedK(assemblyNames, view.type));
+                    if (!val) {
+                        self.expandAllCategories();
+                        const session = (0, util_1.getSession)(self);
+                        if ((0, configuration_1.getConf)(session, [
+                            'hierarchical',
+                            'defaultCollapsed',
+                            'topLevelCategories',
+                        ])) {
+                            self.collapseTopLevelCategories();
+                        }
+                        if ((0, configuration_1.getConf)(session, [
+                            'hierarchical',
+                            'defaultCollapsed',
+                            'subCategories',
+                        ])) {
+                            self.collapseSubCategories();
+                        }
+                        for (const entry of (0, configuration_1.getConf)(session, [
+                            'hierarchical',
+                            'defaultCollapsed',
+                            'categoryNames',
+                        ])) {
+                            self.setCategoryCollapsed(`Tracks-${entry}`, true);
+                        }
                     }
-                    if ((0, configuration_1.getConf)(session, [
-                        'hierarchical',
-                        'defaultCollapsed',
-                        'subCategories',
-                    ])) {
-                        self.collapseSubCategories();
+                    else {
+                        self.setCollapsedCategories(JSON.parse(val));
                     }
-                    for (const entry of (0, configuration_1.getConf)(session, [
-                        'hierarchical',
-                        'defaultCollapsed',
-                        'categoryNames',
-                    ])) {
-                        self.setCategoryCollapsed(`Tracks-${entry}`, true);
-                    }
-                }
-                else {
-                    self.setCollapsedCategories(JSON.parse(val));
                 }
             }));
             // this should be the second autorun
             (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
                 const { assemblyNames, collapsed, view } = self;
                 localStorageSetJSON(recentlyUsedK(assemblyNames), self.recentlyUsed);
-                localStorageSetJSON(collapsedK(assemblyNames, view.type), collapsed);
                 localStorageSetJSON(favoritesK(), self.favorites);
                 localStorageSetJSON(sortTrackNamesK(), self.sortTrackNames);
                 localStorageSetJSON(sortCategoriesK(), self.sortCategories);
+                if (view) {
+                    localStorageSetJSON(collapsedK(assemblyNames, view.type), collapsed);
+                }
             }));
         },
     }));

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { transaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { getRoot, resolveIdentifier } from 'mobx-state-tree';
@@ -6,9 +6,7 @@ import { DataGrid, GridToolbar } from '@mui/x-data-grid';
 // jbrowse
 import { ResizeHandle } from '@jbrowse/core/ui';
 import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
-import ResizeBar from '@jbrowse/core/ui/ResizeBar';
-import { getEnv, useDebounce } from '@jbrowse/core/util';
-import { useResizeBar } from '@jbrowse/core/ui/useResizeBar';
+import { getEnv, measureGridWidth } from '@jbrowse/core/util';
 import { makeStyles } from 'tss-react/mui';
 import FacetedHeader from './FacetedHeader';
 import FacetFilters from './FacetFilters';
@@ -30,10 +28,25 @@ const FacetedSelector = observer(function FacetedSelector({ model, }) {
     var _a;
     const { classes } = useStyles();
     const { view, selection, shownTrackIds, faceted } = model;
-    const { rows, panelWidth, showFilters, useShoppingCart, showOptions, filteredRows, filteredNonMetadataKeys, filteredMetadataKeys, visible, widths, } = faceted;
+    const { rows, panelWidth, showFilters, useShoppingCart, showOptions, filteredRows, filteredNonMetadataKeys, filteredMetadataKeys, visible, } = faceted;
     const { pluginManager } = getEnv(model);
-    const { ref, scrollLeft } = useResizeBar();
-    const widthsDebounced = useDebounce(widths, 200);
+    const [widths, setWidths] = useState({
+        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 => {
+            return [
+                'metadata.' + e,
+                measureGridWidth(rows.map(r => r.metadata[e]), { maxWidth: 400, stripHTML: true }),
+            ];
+        })),
+    });
     const columns = [
         {
             field: 'name',
@@ -45,13 +58,13 @@ const FacetedSelector = observer(function FacetedSelector({ model, }) {
                     React.createElement(SanitizedHTML, { html: value }),
                     React.createElement(TrackLabelMenu, { id: id, conf: conf, trackId: id, model: model })));
             },
-            width: (_a = widthsDebounced.name) !== null && _a !== void 0 ? _a : 100,
+            width: (_a = widths.name) !== null && _a !== void 0 ? _a : 100,
         },
         ...filteredNonMetadataKeys.map(e => {
             var _a;
             return {
                 field: e,
-                width: (_a = widthsDebounced[e]) !== null && _a !== void 0 ? _a : 100,
+                width: (_a = widths[e]) !== null && _a !== void 0 ? _a : 100,
                 renderCell: params => {
                     const val = params.value;
                     return val ? (React.createElement(SanitizedHTML, { className: classes.cell, html: val })) : ('');
@@ -65,8 +78,8 @@ const FacetedSelector = observer(function FacetedSelector({ model, }) {
                 headerName: ['name', ...filteredNonMetadataKeys].includes(e)
                     ? `${e} (from metadata)`
                     : e,
-                width: (_a = widthsDebounced['metadata.' + e]) !== null && _a !== void 0 ? _a : 100,
-                valueGetter: (_, row) => `${row.metadata[e]}`,
+                width: (_a = widths['metadata.' + e]) !== null && _a !== void 0 ? _a : 100,
+                valueGetter: (_, row) => { var _a; return `${(_a = row.metadata[e]) !== null && _a !== void 0 ? _a : ''}`; },
                 renderCell: params => {
                     const val = params.value;
                     return val ? (React.createElement(SanitizedHTML, { className: classes.cell, html: val })) : ('');
@@ -76,7 +89,7 @@ const FacetedSelector = observer(function FacetedSelector({ model, }) {
     ];
     return (React.createElement(React.Fragment, null,
         React.createElement(FacetedHeader, { model: model }),
-        React.createElement("div", { ref: ref, style: {
+        React.createElement("div", { style: {
                 display: 'flex',
                 overflow: 'hidden',
                 height: window.innerHeight * frac,
@@ -86,11 +99,7 @@ const FacetedSelector = observer(function FacetedSelector({ model, }) {
                     height: window.innerHeight * frac,
                     width: window.innerWidth * frac - (showFilters ? panelWidth : 0),
                 } },
-                React.createElement(ResizeBar, { checkbox: true, widths: Object.values(widths).map(f => f !== null && f !== void 0 ? f : 100), setWidths: newWidths => faceted.setWidths(Object.fromEntries(Object.entries(widths).map((entry, idx) => [
-                        entry[0],
-                        newWidths[idx],
-                    ]))), scrollLeft: scrollLeft }),
-                React.createElement(DataGrid, { rows: filteredRows, columnVisibilityModel: visible, onColumnVisibilityModelChange: n => faceted.setVisible(n), columnHeaderHeight: 35, checkboxSelection: true, disableRowSelectionOnClick: true, keepNonExistentRowsSelected: true, onRowSelectionModelChange: userSelectedIds => {
+                React.createElement(DataGrid, { rows: filteredRows, onColumnWidthChange: arg => setWidths({ ...widths, [arg.colDef.field]: arg.width }), columnVisibilityModel: visible, onColumnVisibilityModelChange: n => faceted.setVisible(n), columnHeaderHeight: 35, checkboxSelection: true, disableRowSelectionOnClick: true, keepNonExistentRowsSelected: true, onRowSelectionModelChange: userSelectedIds => {
                         if (!useShoppingCart) {
                             const a1 = shownTrackIds;
                             const a2 = new Set(userSelectedIds);

package/esm/HierarchicalTrackSelectorWidget/facetedModel.d.ts

@@ -25,7 +25,6 @@ export declare function facetedStateTreeF(): import("mobx-state-tree").IModelTyp
     panelWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
 }, {
     visible: Record<string, boolean>;
-    widths: Record<string, number | undefined>;
     useShoppingCart: boolean;
     filters: import("mobx").ObservableMap<string, string[]>;
 } & {
@@ -118,10 +117,6 @@ export declare function facetedStateTreeF(): import("mobx-state-tree").IModelTyp
      * #action
      */
     setVisible(args: Record<string, boolean>): void;
-    /**
-     * #action
-     */
-    setWidths(args: Record<string, number | undefined>): void;
     afterAttach(): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type FacetedStateModel = ReturnType<typeof facetedStateTreeF>;

package/esm/HierarchicalTrackSelectorWidget/facetedModel.js

@@ -2,7 +2,7 @@ import { addDisposer, getParent, types } from 'mobx-state-tree';
 import { matches } from './util';
 import { readConfObject, } from '@jbrowse/core/configuration';
 import { getTrackName } from '@jbrowse/core/util/tracks';
-import { getSession, localStorageGetItem, measureGridWidth, } from '@jbrowse/core/util';
+import { getSession, localStorageGetItem } from '@jbrowse/core/util';
 import { autorun, observable } from 'mobx';
 import { getRootKeys, findNonSparseKeys } from './facetedUtil';
 import { getRowStr } from './components/faceted/util';
@@ -36,7 +36,6 @@ export function facetedStateTreeF() {
     })
         .volatile(() => ({
         visible: {},
-        widths: {},
         useShoppingCart: false,
         filters: observable.map(),
     }))
@@ -164,35 +163,10 @@ export function facetedStateTreeF() {
         setVisible(args) {
             self.visible = args;
         },
-        /**
-         * #action
-         */
-        setWidths(args) {
-            self.widths = args;
-        },
         afterAttach() {
             addDisposer(self, autorun(() => {
                 this.setVisible(Object.fromEntries(self.fields.map(c => [c, true])));
             }));
-            addDisposer(self, autorun(() => {
-                this.setWidths({
-                    name: measureGridWidth(self.rows.map(r => r.name), { maxWidth: 500, stripHTML: true }) + 15,
-                    ...Object.fromEntries(self.filteredNonMetadataKeys
-                        .filter(f => self.visible[f])
-                        .map(e => [
-                        e,
-                        measureGridWidth(self.rows.map(r => r[e]), { maxWidth: 400, stripHTML: true }),
-                    ])),
-                    ...Object.fromEntries(self.filteredMetadataKeys
-                        .filter(f => self.visible['metadata.' + f])
-                        .map(e => {
-                        return [
-                            'metadata.' + e,
-                            measureGridWidth(self.rows.map(r => r.metadata[e]), { maxWidth: 400, stripHTML: true }),
-                        ];
-                    })),
-                });
-            }));
         },
     }));
 }

package/esm/HierarchicalTrackSelectorWidget/model.d.ts

@@ -29,7 +29,6 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
         panelWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
     }, {
         visible: Record<string, boolean>;
-        widths: Record<string, number | undefined>;
         useShoppingCart: boolean;
         filters: import("mobx").ObservableMap<string, string[]>;
     } & {
@@ -38,7 +37,9 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
         setUseShoppingCart(f: boolean): void;
         setFilterText(str: string): void;
         setShowSparse(f: boolean): void;
-        setShowOptions(f: boolean): void;
+        setShowOptions(f: boolean): void; /**
+         * #property
+         */
         setShowFilters(f: boolean): void;
     } & {
         readonly allTrackConfigurations: ({
@@ -80,7 +81,6 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
         }[];
     } & {
         setVisible(args: Record<string, boolean>): void;
-        setWidths(args: Record<string, number | undefined>): void;
         afterAttach(): void;
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>, [undefined]>;
 }, {

package/esm/HierarchicalTrackSelectorWidget/model.js

@@ -452,44 +452,48 @@ export default function stateTreeFactory(pluginManager) {
             addDisposer(self, autorun(() => {
                 const { assemblyNames, view } = self;
                 self.setRecentlyUsed(localStorageGetJSON(recentlyUsedK(assemblyNames), '[]'));
-                const val = localStorageGetItem(collapsedK(assemblyNames, view.type));
-                if (!val) {
-                    self.expandAllCategories();
-                    const session = getSession(self);
-                    if (getConf(session, [
-                        'hierarchical',
-                        'defaultCollapsed',
-                        'topLevelCategories',
-                    ])) {
-                        self.collapseTopLevelCategories();
+                if (view) {
+                    const val = localStorageGetItem(collapsedK(assemblyNames, view.type));
+                    if (!val) {
+                        self.expandAllCategories();
+                        const session = getSession(self);
+                        if (getConf(session, [
+                            'hierarchical',
+                            'defaultCollapsed',
+                            'topLevelCategories',
+                        ])) {
+                            self.collapseTopLevelCategories();
+                        }
+                        if (getConf(session, [
+                            'hierarchical',
+                            'defaultCollapsed',
+                            'subCategories',
+                        ])) {
+                            self.collapseSubCategories();
+                        }
+                        for (const entry of getConf(session, [
+                            'hierarchical',
+                            'defaultCollapsed',
+                            'categoryNames',
+                        ])) {
+                            self.setCategoryCollapsed(`Tracks-${entry}`, true);
+                        }
                     }
-                    if (getConf(session, [
-                        'hierarchical',
-                        'defaultCollapsed',
-                        'subCategories',
-                    ])) {
-                        self.collapseSubCategories();
+                    else {
+                        self.setCollapsedCategories(JSON.parse(val));
                     }
-                    for (const entry of getConf(session, [
-                        'hierarchical',
-                        'defaultCollapsed',
-                        'categoryNames',
-                    ])) {
-                        self.setCategoryCollapsed(`Tracks-${entry}`, true);
-                    }
-                }
-                else {
-                    self.setCollapsedCategories(JSON.parse(val));
                 }
             }));
             // this should be the second autorun
             addDisposer(self, autorun(() => {
                 const { assemblyNames, collapsed, view } = self;
                 localStorageSetJSON(recentlyUsedK(assemblyNames), self.recentlyUsed);
-                localStorageSetJSON(collapsedK(assemblyNames, view.type), collapsed);
                 localStorageSetJSON(favoritesK(), self.favorites);
                 localStorageSetJSON(sortTrackNamesK(), self.sortTrackNames);
                 localStorageSetJSON(sortCategoriesK(), self.sortCategories);
+                if (view) {
+                    localStorageSetJSON(collapsedK(assemblyNames, view.type), collapsed);
+                }
             }));
         },
     }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-data-management",
-  "version": "2.11.1",
+  "version": "2.12.0",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -60,5 +60,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "11b28d66d782eb06f92ccb993108bb6c3c82819e"
+  "gitHead": "935f2602d29abc737bb1f493a922b6218d023ae2"
 }