@jbrowse/plugin-data-management 2.9.0 → 2.10.1

package/esm/AddTrackWidget/components/DefaultAddTrackWorkflow.js

@@ -94,9 +94,6 @@ const DefaultAddTrackWorkflow = observer(function ({ model, }) {
                 };
                 jobsManager.queueJob(newEntry);
             }
-            else {
-                session.notify('Open a new view, or use the track selector in an existing view, to view this track', 'info');
-            }
             model.clearData();
             if (isSessionModelWithWidgets(session)) {
                 session.hideWidget(model);
@@ -106,10 +103,6 @@ const DefaultAddTrackWorkflow = observer(function ({ model, }) {
             setTrackErrorMessage('Failed to add track.\nThe configuration of this file is not currently supported.');
         }
     }
-    function handleBack() {
-        setTrackErrorMessage(undefined);
-        setActiveStep(activeStep - 1);
-    }
     function isNextDisabled() {
         switch (activeStep) {
             case 0:
@@ -126,7 +119,10 @@ const DefaultAddTrackWorkflow = observer(function ({ model, }) {
             React.createElement(StepContent, null,
                 getStepContent(idx),
                 React.createElement("div", { className: classes.actionsContainer },
-                    React.createElement(Button, { disabled: activeStep === 0, onClick: handleBack, className: classes.button }, "Back"),
+                    React.createElement(Button, { disabled: activeStep === 0, onClick: () => {
+                            setTrackErrorMessage(undefined);
+                            setActiveStep(activeStep - 1);
+                        }, className: classes.button }, "Back"),
                     React.createElement(Button, { disabled: isNextDisabled(), variant: "contained", color: "primary", onClick: handleNext, className: classes.button, "data-testid": "addTrackNextButton" }, activeStep === steps.length - 1 ? 'Add' : 'Next')),
                 trackErrorMessage ? (React.createElement("div", { className: classes.alertContainer },
                     React.createElement(Alert, { severity: "error" }, trackErrorMessage))) : null)))))));

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

@@ -1,11 +1,10 @@
 import React from 'react';
 import { HierarchicalTrackSelectorModel } from '../../model';
-declare const FacetFilter: ({ column, vals, width, model, }: {
+declare const FacetFilter: ({ column, vals, model, }: {
     column: {
         field: string;
     };
     vals: [string, number][];
-    width: number;
     model: HierarchicalTrackSelectorModel;
 }) => React.JSX.Element;
 export default FacetFilter;

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

@@ -25,15 +25,16 @@ function ExpandButton({ visible, onClick, }) {
     return (React.createElement(Tooltip, { title: "Minimize/expand this facet filter" },
         React.createElement(IconButton, { onClick: () => onClick(), size: "small" }, visible ? React.createElement(MinimizeIcon, null) : React.createElement(AddIcon, null))));
 }
-const FacetFilter = observer(function ({ column, vals, width, model, }) {
+const FacetFilter = observer(function ({ column, vals, model, }) {
     const { classes } = useStyles();
     const [visible, setVisible] = useState(true);
     const { faceted } = model;
     const { filters } = faceted;
-    return (React.createElement(FormControl, { key: column.field, className: classes.facet, style: { width } },
-        React.createElement("div", { style: { display: 'flex' } },
-            React.createElement(Typography, null, column.field),
-            React.createElement(ClearButton, { onClick: () => model.faceted.setFilter(column.field, []) }),
+    const { field } = column;
+    return (React.createElement(FormControl, { className: classes.facet, fullWidth: true },
+        React.createElement("div", null,
+            React.createElement(Typography, { component: "span" }, field),
+            React.createElement(ClearButton, { onClick: () => faceted.setFilter(field, []) }),
             React.createElement(ExpandButton, { visible: visible, onClick: () => setVisible(!visible) })),
         visible ? (React.createElement(Select, { multiple: true, native: true, className: classes.select, value: filters.get(column.field) || [], onChange: event => {
                 faceted.setFilter(column.field, 

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { HierarchicalTrackSelectorModel } from '../../model';
-declare const FacetFilters: ({ rows, columns, width, model, }: {
-    rows: Record<string, unknown>[];
+import { Row } from './util';
+declare const FacetFilters: ({ rows, columns, model, }: {
+    rows: Row[];
     columns: {
         field: string;
     }[];
-    width: number;
     model: HierarchicalTrackSelectorModel;
 }) => React.JSX.Element;
 export default FacetFilters;

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

@@ -1,7 +1,9 @@
 import React from 'react';
-import FacetFilter from './FacetFilter';
 import { observer } from 'mobx-react';
-const FacetFilters = observer(function ({ rows, columns, width, model, }) {
+// locals
+import FacetFilter from './FacetFilter';
+import { getRowStr } from './util';
+const FacetFilters = observer(function ({ rows, columns, model, }) {
     var _a, _b;
     const { faceted } = model;
     const { filters } = faceted;
@@ -26,7 +28,7 @@ const FacetFilters = observer(function ({ rows, columns, width, model, }) {
     for (const facet of ret) {
         const elt = uniqs.get(facet);
         for (const row of currentRows) {
-            const key = `${row[facet] || ''}`;
+            const key = getRowStr(facet, row);
             const val = elt.get(key);
             // we don't allow filtering on empty yet
             if (key) {
@@ -41,10 +43,8 @@ const FacetFilters = observer(function ({ rows, columns, width, model, }) {
         const filter = ((_b = filters.get(facet)) === null || _b === void 0 ? void 0 : _b.length)
             ? new Set(filters.get(facet))
             : undefined;
-        currentRows = currentRows.filter(row => {
-            return filter !== undefined ? filter.has(row[facet]) : true;
-        });
+        currentRows = currentRows.filter(row => filter !== undefined ? filter.has(getRowStr(facet, row)) : true);
     }
-    return (React.createElement("div", null, facets.map(column => (React.createElement(FacetFilter, { key: column.field, vals: [...uniqs.get(column.field)], column: column, width: width, model: model })))));
+    return (React.createElement("div", null, facets.map(c => (React.createElement(FacetFilter, { key: c.field, vals: [...uniqs.get(c.field)], column: c, model: model })))));
 });
 export default FacetFilters;

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

@@ -29,11 +29,10 @@ const frac = 0.75;
 const FacetedSelector = observer(function FacetedSelector({ model, }) {
     var _a;
     const { classes } = useStyles();
-    const { view, selection, faceted } = model;
+    const { view, selection, shownTrackIds, faceted } = model;
     const { rows, panelWidth, showFilters, useShoppingCart, showOptions, filteredRows, filteredNonMetadataKeys, filteredMetadataKeys, visible, widths, } = faceted;
     const { pluginManager } = getEnv(model);
     const { ref, scrollLeft } = useResizeBar();
-    const tracks = view.tracks;
     const widthsDebounced = useDebounce(widths, 200);
     const columns = [
         {
@@ -75,7 +74,6 @@ const FacetedSelector = observer(function FacetedSelector({ model, }) {
             });
         }),
     ];
-    const shownTrackIds = new Set(tracks.map(t => t.configuration.trackId));
     return (React.createElement(React.Fragment, null,
         React.createElement(FacetedHeader, { model: model }),
         React.createElement("div", { ref: ref, style: {
@@ -125,11 +123,7 @@ const FacetedSelector = observer(function FacetedSelector({ model, }) {
                     }, columns: columns, rowHeight: 25 })),
             showFilters ? (React.createElement(React.Fragment, null,
                 React.createElement(ResizeHandle, { vertical: true, onDrag: dist => faceted.setPanelWidth(panelWidth - dist), className: classes.resizeHandle }),
-                React.createElement("div", { style: {
-                        width: panelWidth,
-                        overflowY: 'auto',
-                        overflowX: 'hidden',
-                    } },
-                    React.createElement(FacetFilters, { model: model, width: panelWidth - 10, rows: rows, columns: columns })))) : null)));
+                React.createElement("div", { style: { width: panelWidth, overflow: 'auto' } },
+                    React.createElement(FacetFilters, { model: model, rows: rows, columns: columns })))) : null)));
 });
 export default FacetedSelector;

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

@@ -0,0 +1,6 @@
+export interface Row {
+    id: string;
+    metadata?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+export declare function getRowStr(facet: string, row: Row): string;

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

@@ -0,0 +1,6 @@
+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[facet]) || ''}`;
+}

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

@@ -19,7 +19,9 @@ const DropdownTrackSelector = observer(function ({ model, tracks, extraMenuItems
                 checked: view.tracks.some((f) => f.configuration === t),
                 onClick: () => {
                     if (!open) {
-                        model.view.toggleTrack(t.trackId);
+                        if (model.view.toggleTrack(t.trackId)) {
+                            model.addToRecentlyUsed(t.trackId);
+                        }
                     }
                 },
             })),

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

@@ -1,14 +1,17 @@
 import React from 'react';
 import { Badge, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 // icons
 import GradeIcon from '@mui/icons-material/Grade';
 import DropdownTrackSelector from './DropdownTrackSelector';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     smallBadge: {
         height: 14,
     },
+    margin: {
+        marginRight: 10,
+    },
 });
 const FavoriteTracks = observer(function ({ model, }) {
     const { classes } = useStyles();
@@ -31,7 +34,7 @@ const FavoriteTracks = observer(function ({ model, }) {
             React.createElement(Badge, { classes: { badge: classes.smallBadge }, color: "secondary", anchorOrigin: {
                     vertical: 'bottom',
                     horizontal: 'right',
-                }, style: { marginRight: 10 }, badgeContent: model.favoritesCounter },
+                }, className: classes.margin, badgeContent: model.favoritesCounter },
                 React.createElement(GradeIcon, null))))) : null;
 });
 export default FavoriteTracks;

package/esm/HierarchicalTrackSelectorWidget/facetedModel.d.ts

@@ -81,7 +81,7 @@ export declare function facetedStateTreeF(): import("mobx-state-tree").IModelTyp
         readonly category: string;
         readonly adapter: string;
         readonly description: string;
-        readonly metadata: any;
+        readonly metadata: Record<string, unknown>;
     }[];
 } & {
     /**
@@ -111,7 +111,7 @@ export declare function facetedStateTreeF(): import("mobx-state-tree").IModelTyp
         readonly category: string;
         readonly adapter: string;
         readonly description: string;
-        readonly metadata: any;
+        readonly metadata: Record<string, unknown>;
     }[];
 } & {
     /**

package/esm/HierarchicalTrackSelectorWidget/facetedModel.js

@@ -5,6 +5,7 @@ import { getTrackName } from '@jbrowse/core/util/tracks';
 import { getSession, localStorageGetItem, measureGridWidth, } from '@jbrowse/core/util';
 import { autorun, observable } from 'mobx';
 import { getRootKeys, findNonSparseKeys } from './facetedUtil';
+import { getRowStr } from './components/faceted/util';
 const nonMetadataKeys = ['category', 'adapter', 'description'];
 /**
  * #stateModel FacetedModel
@@ -98,13 +99,10 @@ export function facetedStateTreeF() {
         get rows() {
             const session = getSession(self);
             const { allTrackConfigurations, filterText } = self;
-            // metadata is spread onto the object for easier access and sorting
-            // by the mui data grid (it's unable to sort by nested objects)
             return allTrackConfigurations
                 .filter(conf => matches(filterText, conf, session))
                 .map(track => {
                 var _a, _b;
-                const metadata = readConfObject(track, 'metadata');
                 return {
                     id: track.trackId,
                     conf: track,
@@ -112,7 +110,7 @@ export function facetedStateTreeF() {
                     category: (_a = readConfObject(track, 'category')) === null || _a === void 0 ? void 0 : _a.join(', '),
                     adapter: (_b = readConfObject(track, 'adapter')) === null || _b === void 0 ? void 0 : _b.type,
                     description: readConfObject(track, 'description'),
-                    metadata,
+                    metadata: readConfObject(track, 'metadata'),
                 };
             });
         },
@@ -156,9 +154,7 @@ export function facetedStateTreeF() {
             const arrFilters = [...self.filters.entries()]
                 .filter(f => f[1].length > 0)
                 .map(([key, val]) => [key, new Set(val)]);
-            return self.rows.filter(row => 
-            // @ts-expect-error
-            arrFilters.every(([key, val]) => val.has(row[key])));
+            return self.rows.filter(row => arrFilters.every(([key, val]) => val.has(getRowStr(key, row))));
         },
     }))
         .actions(self => ({

package/esm/HierarchicalTrackSelectorWidget/model.d.ts

@@ -34,18 +34,6 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
      * #property
      */
     view: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IReferenceType<import("mobx-state-tree").IAnyType>>;
-    /**
-     * #property
-     * this is removed in postProcessSnapshot, so is generally only loaded
-     * from localstorage
-     */
-    favorites: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>, [undefined]>;
-    /**
-     * #property
-     * this is removed in postProcessSnapshot, so is generally only loaded
-     * from localstorage
-     */
-    recentlyUsed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>, [undefined]>;
     /**
      * #property
      */
@@ -56,13 +44,14 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
         showOptions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         panelWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
     }, {
-        /**
+        visible: Record<string, boolean>;
+        widths: Record<string, number | undefined>; /**
          * #property
          */
-        visible: Record<string, boolean>;
-        widths: Record<string, number | undefined>;
         useShoppingCart: boolean;
-        filters: import("mobx").ObservableMap<string, string[]>;
+        filters: import("mobx").ObservableMap<string, string[]>; /**
+         * #property
+         */
     } & {
         setFilter(key: string, value: string[]): void;
         setPanelWidth(width: number): void;
@@ -86,12 +75,10 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
                 setSubschema(slotName: string, data: unknown): any;
             } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>;
             readonly name: string;
-            readonly category: string; /**
-             * #action
-             */
+            readonly category: string;
             readonly adapter: string;
             readonly description: string;
-            readonly metadata: any;
+            readonly metadata: Record<string, unknown>;
         }[];
     } & {
         readonly filteredNonMetadataKeys: string[] | readonly ["category", "adapter", "description"];
@@ -106,12 +93,10 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
                 setSubschema(slotName: string, data: unknown): any;
             } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>;
             readonly name: string;
-            readonly category: string; /**
-             * #action
-             */
+            readonly category: string;
             readonly adapter: string;
             readonly description: string;
-            readonly metadata: any;
+            readonly metadata: Record<string, unknown>;
         }[];
     } & {
         setVisible(args: Record<string, boolean>): void;
@@ -119,6 +104,8 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
         afterAttach(): void;
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>, [undefined]>;
 }, {
+    favorites: string[];
+    recentlyUsed: string[];
     selection: ({
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
@@ -128,6 +115,10 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
     recentlyUsedCounter: number;
     favoritesCounter: number;
 } & {
+    /**
+     * #getter
+     */
+    readonly shownTrackIds: Set<string>;
     /**
      * #getter
      */
@@ -185,6 +176,14 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
      * #action
      */
     setRecentlyUsedCounter(val: number): void;
+    /**
+     * #action
+     */
+    setRecentlyUsed(str: string[]): void;
+    /**
+     * #action
+     */
+    setFavorites(str: string[]): void;
     /**
      * #action
      */
@@ -244,6 +243,14 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
      */
     readonly assemblyNames: string[];
 } & {
+    /**
+     * #getter
+     */
+    readonly recentlyUsedLocalStorageKey: string;
+    /**
+     * #getter
+     */
+    readonly favoritesLocalStorageKey: string;
     /**
      * #getter
      */
@@ -261,11 +268,22 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
         setSubschema(slotName: string, data: unknown): any;
     } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>)[];
+    /**
+     * #getter
+     */
     readonly allTrackConfigurations: ({
         [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>)[];
+    /**
+     * #getter
+     */
+    readonly allTrackConfigurationTrackIdSet: Map<any, {
+        [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>>;
 } & {
     /**
      * #getter
@@ -335,22 +353,7 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
     readonly hasAnySubcategories: boolean;
 } & {
     afterAttach(): void;
-}, import("mobx-state-tree")._NotCustomized, {
-    type: "HierarchicalTrackSelectorWidget";
-    view: import("mobx-state-tree").ReferenceIdentifier | undefined;
-    id: string;
-    collapsed: import("mobx").IKeyValueMap<boolean>;
-    initialized: boolean | undefined;
-    sortTrackNames: boolean | undefined;
-    sortCategories: boolean | undefined;
-    faceted: import("mobx-state-tree").ModelSnapshotType<{
-        filterText: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-        showSparse: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-        showFilters: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-        showOptions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-        panelWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
-    }>;
-}>;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type HierarchicalTrackSelectorStateModel = ReturnType<typeof stateTreeFactory>;
 export type HierarchicalTrackSelectorModel = Instance<HierarchicalTrackSelectorStateModel>;
 export {};

package/esm/HierarchicalTrackSelectorWidget/model.js

@@ -23,8 +23,7 @@ function postF() {
         ].join('-')
         : 'empty';
 }
-const lsKeyFavoritesF = () => `favoriteTracks-${postF()}}`;
-const lsKeyRecentlyUsedF = () => `recentlyUsedTracks-${postF()}}`;
+const MAX_RECENTLY_USED = 10;
 /**
  * #stateModel HierarchicalTrackSelectorWidget
  */
@@ -59,30 +58,27 @@ export default function stateTreeFactory(pluginManager) {
          * #property
          */
         view: types.safeReference(pluginManager.pluggableMstType('view', 'stateModel')),
-        /**
-         * #property
-         * this is removed in postProcessSnapshot, so is generally only loaded
-         * from localstorage
-         */
-        favorites: types.optional(types.array(types.string), () => JSON.parse(localStorageGetItem(lsKeyFavoritesF()) || '[]')),
-        /**
-         * #property
-         * this is removed in postProcessSnapshot, so is generally only loaded
-         * from localstorage
-         */
-        recentlyUsed: types.optional(types.array(types.string), () => JSON.parse(localStorageGetItem(lsKeyRecentlyUsedF()) || '[]')),
         /**
          * #property
          */
         faceted: types.optional(facetedStateTreeF(), {}),
     })
         .volatile(() => ({
+        favorites: [],
+        recentlyUsed: [],
         selection: [],
         filterText: '',
         recentlyUsedCounter: 0,
         favoritesCounter: 0,
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
+        get shownTrackIds() {
+            var _a, _b;
+            return new Set((_b = (_a = self.view) === null || _a === void 0 ? void 0 : _a.tracks) === null || _b === void 0 ? void 0 : _b.map((t) => t.configuration.trackId));
+        },
         /**
          * #getter
          */
@@ -145,19 +141,19 @@ export default function stateTreeFactory(pluginManager) {
          */
         addToFavorites(trackId) {
             self.favoritesCounter += 1;
-            self.favorites.push(trackId);
+            self.favorites = [...self.favorites, trackId];
         },
         /**
          * #action
          */
         removeFromFavorites(trackId) {
-            self.favorites.remove(trackId);
+            self.favorites = self.favorites.filter(f => f !== trackId);
         },
         /**
          * #action
          */
         clearFavorites() {
-            self.favorites.clear();
+            self.favorites = [];
         },
         /**
          * #action
@@ -165,6 +161,18 @@ export default function stateTreeFactory(pluginManager) {
         setRecentlyUsedCounter(val) {
             self.recentlyUsedCounter = val;
         },
+        /**
+         * #action
+         */
+        setRecentlyUsed(str) {
+            self.recentlyUsed = str;
+        },
+        /**
+         * #action
+         */
+        setFavorites(str) {
+            self.favorites = str;
+        },
         /**
          * #action
          */
@@ -175,19 +183,19 @@ export default function stateTreeFactory(pluginManager) {
          * #action
          */
         addToRecentlyUsed(id) {
-            self.recentlyUsedCounter += 1;
             if (!self.recentlyUsed.includes(id)) {
-                if (self.recentlyUsed.length >= 10) {
-                    self.recentlyUsed.shift();
-                }
-                self.recentlyUsed.push(id);
+                self.recentlyUsedCounter = Math.min(self.recentlyUsedCounter + 1, MAX_RECENTLY_USED);
+                self.recentlyUsed =
+                    self.recentlyUsed.length >= MAX_RECENTLY_USED
+                        ? [...self.recentlyUsed.slice(1), id]
+                        : [...self.recentlyUsed, id];
             }
         },
         /**
          * #action
          */
         clearRecentlyUsed() {
-            self.recentlyUsed.clear();
+            self.recentlyUsed = [];
         },
         /**
          * #action
@@ -274,6 +282,22 @@ export default function stateTreeFactory(pluginManager) {
         },
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
+        get recentlyUsedLocalStorageKey() {
+            return `recentlyUsedTracks-${[postF(), self.assemblyNames.join(',')]
+                .filter(f => !!f)
+                .join('-')}`;
+        },
+        /**
+         * #getter
+         */
+        get favoritesLocalStorageKey() {
+            // this has a extra } at the end because that's how it was initially
+            // released
+            return `favoriteTracks-${postF()}}`;
+        },
         /**
          * #getter
          */
@@ -298,6 +322,9 @@ export default function stateTreeFactory(pluginManager) {
                 ...filterTracks(getSession(self).tracks, self),
             ].filter(notEmpty);
         },
+        /**
+         * #getter
+         */
         get allTrackConfigurations() {
             const { connectionInstances = [] } = getSession(self);
             return [
@@ -305,6 +332,12 @@ export default function stateTreeFactory(pluginManager) {
                 ...connectionInstances === null || connectionInstances === void 0 ? void 0 : connectionInstances.flatMap(c => c.tracks),
             ];
         },
+        /**
+         * #getter
+         */
+        get allTrackConfigurationTrackIdSet() {
+            return new Map(this.allTrackConfigurations.map(t => [t.trackId, t]));
+        },
     }))
         .views(self => ({
         /**
@@ -312,14 +345,18 @@ export default function stateTreeFactory(pluginManager) {
          * filters out tracks that are not in the favorites group
          */
         get favoriteTracks() {
-            return self.allTrackConfigurations.filter(t => self.favoritesSet.has(t.trackId));
+            return self.favorites
+                .filter(t => self.allTrackConfigurationTrackIdSet.has(t))
+                .map(t => self.allTrackConfigurationTrackIdSet.get(t));
         },
         /**
          * #getter
          * filters out tracks that are not in the recently used group
          */
         get recentlyUsedTracks() {
-            return self.allTrackConfigurations.filter(t => self.recentlyUsedSet.has(t.trackId));
+            return self.recentlyUsed
+                .filter(t => self.allTrackConfigurationTrackIdSet.has(t))
+                .map(t => self.allTrackConfigurationTrackIdSet.get(t));
         },
     }))
         .views(self => ({
@@ -435,14 +472,16 @@ export default function stateTreeFactory(pluginManager) {
     }))
         .actions(self => ({
         afterAttach() {
+            // this should be the first autorun to properly initialize
+            addDisposer(self, autorun(() => {
+                self.setRecentlyUsed(JSON.parse(localStorageGetItem(self.recentlyUsedLocalStorageKey) || '[]'));
+                self.setFavorites(JSON.parse(localStorageGetItem(self.favoritesLocalStorageKey) || '[]'));
+            }));
+            // this should be the second autorun
             addDisposer(self, autorun(() => {
-                localStorageSetItem(lsKeyFavoritesF(), JSON.stringify(self.favorites));
-                localStorageSetItem(lsKeyRecentlyUsedF(), JSON.stringify(self.recentlyUsed));
+                localStorageSetItem(self.favoritesLocalStorageKey, JSON.stringify(self.favorites));
+                localStorageSetItem(self.recentlyUsedLocalStorageKey, JSON.stringify(self.recentlyUsed));
             }));
         },
-    }))
-        .postProcessSnapshot(snap => {
-        const { favorites: _, recentlyUsed: __, ...rest } = snap;
-        return rest;
-    });
+    }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-data-management",
-  "version": "2.9.0",
+  "version": "2.10.1",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -39,7 +39,6 @@
     "@gmod/ucsc-hub": "^0.3.0",
     "@mui/icons-material": "^5.0.1",
     "@mui/x-data-grid": "^6.0.1",
-    "clsx": "^2.0.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-vtree": "^3.0.0-beta.1",
     "react-window": "^1.8.6"
@@ -61,5 +60,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "a50b6f67cf8c8f3c65a7b8cd858de2fcca1f2909"
+  "gitHead": "442b5f87efddfdf4ccf520b4d9dd01ddd370cb07"
 }