@jbrowse/plugin-data-management 2.9.0 → 2.10.1

package/dist/AddTrackWidget/components/DefaultAddTrackWorkflow.js

@@ -122,9 +122,6 @@ const DefaultAddTrackWorkflow = (0, mobx_react_1.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 ((0, util_1.isSessionModelWithWidgets)(session)) {
                 session.hideWidget(model);
@@ -134,10 +131,6 @@ const DefaultAddTrackWorkflow = (0, mobx_react_1.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:
@@ -154,7 +147,10 @@ const DefaultAddTrackWorkflow = (0, mobx_react_1.observer)(function ({ model, })
             react_1.default.createElement(material_1.StepContent, null,
                 getStepContent(idx),
                 react_1.default.createElement("div", { className: classes.actionsContainer },
-                    react_1.default.createElement(material_1.Button, { disabled: activeStep === 0, onClick: handleBack, className: classes.button }, "Back"),
+                    react_1.default.createElement(material_1.Button, { disabled: activeStep === 0, onClick: () => {
+                            setTrackErrorMessage(undefined);
+                            setActiveStep(activeStep - 1);
+                        }, className: classes.button }, "Back"),
                     react_1.default.createElement(material_1.Button, { disabled: isNextDisabled(), variant: "contained", color: "primary", onClick: handleNext, className: classes.button, "data-testid": "addTrackNextButton" }, activeStep === steps.length - 1 ? 'Add' : 'Next')),
                 trackErrorMessage ? (react_1.default.createElement("div", { className: classes.alertContainer },
                     react_1.default.createElement(material_1.Alert, { severity: "error" }, trackErrorMessage))) : null)))))));

package/dist/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/dist/HierarchicalTrackSelectorWidget/components/faceted/FacetFilter.js

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

package/dist/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/dist/HierarchicalTrackSelectorWidget/components/faceted/FacetFilters.js

@@ -4,9 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const FacetFilter_1 = __importDefault(require("./FacetFilter"));
 const mobx_react_1 = require("mobx-react");
-const FacetFilters = (0, mobx_react_1.observer)(function ({ rows, columns, width, model, }) {
+// locals
+const FacetFilter_1 = __importDefault(require("./FacetFilter"));
+const util_1 = require("./util");
+const FacetFilters = (0, mobx_react_1.observer)(function ({ rows, columns, model, }) {
     var _a, _b;
     const { faceted } = model;
     const { filters } = faceted;
@@ -31,7 +33,7 @@ const FacetFilters = (0, mobx_react_1.observer)(function ({ rows, columns, width
     for (const facet of ret) {
         const elt = uniqs.get(facet);
         for (const row of currentRows) {
-            const key = `${row[facet] || ''}`;
+            const key = (0, util_1.getRowStr)(facet, row);
             const val = elt.get(key);
             // we don't allow filtering on empty yet
             if (key) {
@@ -46,10 +48,8 @@ const FacetFilters = (0, mobx_react_1.observer)(function ({ rows, columns, width
         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((0, util_1.getRowStr)(facet, row)) : true);
     }
-    return (react_1.default.createElement("div", null, facets.map(column => (react_1.default.createElement(FacetFilter_1.default, { key: column.field, vals: [...uniqs.get(column.field)], column: column, width: width, model: model })))));
+    return (react_1.default.createElement("div", null, facets.map(c => (react_1.default.createElement(FacetFilter_1.default, { key: c.field, vals: [...uniqs.get(c.field)], column: c, model: model })))));
 });
 exports.default = FacetFilters;

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

@@ -34,11 +34,10 @@ const frac = 0.75;
 const FacetedSelector = (0, mobx_react_1.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 } = (0, util_1.getEnv)(model);
     const { ref, scrollLeft } = (0, useResizeBar_1.useResizeBar)();
-    const tracks = view.tracks;
     const widthsDebounced = (0, util_1.useDebounce)(widths, 200);
     const columns = [
         {
@@ -80,7 +79,6 @@ const FacetedSelector = (0, mobx_react_1.observer)(function FacetedSelector({ mo
             });
         }),
     ];
-    const shownTrackIds = new Set(tracks.map(t => t.configuration.trackId));
     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: {
@@ -130,11 +128,7 @@ const FacetedSelector = (0, mobx_react_1.observer)(function FacetedSelector({ mo
                     }, columns: columns, rowHeight: 25 })),
             showFilters ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(ui_1.ResizeHandle, { vertical: true, onDrag: dist => faceted.setPanelWidth(panelWidth - dist), className: classes.resizeHandle }),
-                react_1.default.createElement("div", { style: {
-                        width: panelWidth,
-                        overflowY: 'auto',
-                        overflowX: 'hidden',
-                    } },
-                    react_1.default.createElement(FacetFilters_1.default, { model: model, width: panelWidth - 10, rows: rows, columns: columns })))) : null)));
+                react_1.default.createElement("div", { style: { width: panelWidth, overflow: 'auto' } },
+                    react_1.default.createElement(FacetFilters_1.default, { model: model, rows: rows, columns: columns })))) : null)));
 });
 exports.default = FacetedSelector;

package/dist/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/dist/HierarchicalTrackSelectorWidget/components/faceted/util.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRowStr = void 0;
+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]) || ''}`;
+}
+exports.getRowStr = getRowStr;

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

@@ -47,7 +47,9 @@ const DropdownTrackSelector = (0, mobx_react_1.observer)(function ({ model, trac
                 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/dist/HierarchicalTrackSelectorWidget/components/tree/FavoriteTracks.js

@@ -6,14 +6,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
 // icons
 const Grade_1 = __importDefault(require("@mui/icons-material/Grade"));
 const DropdownTrackSelector_1 = __importDefault(require("./DropdownTrackSelector"));
-const mui_1 = require("tss-react/mui");
 const useStyles = (0, mui_1.makeStyles)()({
     smallBadge: {
         height: 14,
     },
+    margin: {
+        marginRight: 10,
+    },
 });
 const FavoriteTracks = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
@@ -36,7 +39,7 @@ const FavoriteTracks = (0, mobx_react_1.observer)(function ({ model, }) {
             react_1.default.createElement(material_1.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_1.default.createElement(Grade_1.default, null))))) : null;
 });
 exports.default = FavoriteTracks;

package/dist/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/dist/HierarchicalTrackSelectorWidget/facetedModel.js

@@ -8,6 +8,7 @@ const tracks_1 = require("@jbrowse/core/util/tracks");
 const util_2 = require("@jbrowse/core/util");
 const mobx_1 = require("mobx");
 const facetedUtil_1 = require("./facetedUtil");
+const util_3 = require("./components/faceted/util");
 const nonMetadataKeys = ['category', 'adapter', 'description'];
 /**
  * #stateModel FacetedModel
@@ -101,13 +102,10 @@ function facetedStateTreeF() {
         get rows() {
             const session = (0, util_2.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 => (0, util_1.matches)(filterText, conf, session))
                 .map(track => {
                 var _a, _b;
-                const metadata = (0, configuration_1.readConfObject)(track, 'metadata');
                 return {
                     id: track.trackId,
                     conf: track,
@@ -115,7 +113,7 @@ function facetedStateTreeF() {
                     category: (_a = (0, configuration_1.readConfObject)(track, 'category')) === null || _a === void 0 ? void 0 : _a.join(', '),
                     adapter: (_b = (0, configuration_1.readConfObject)(track, 'adapter')) === null || _b === void 0 ? void 0 : _b.type,
                     description: (0, configuration_1.readConfObject)(track, 'description'),
-                    metadata,
+                    metadata: (0, configuration_1.readConfObject)(track, 'metadata'),
                 };
             });
         },
@@ -159,9 +157,7 @@ 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((0, util_3.getRowStr)(key, row))));
         },
     }))
         .actions(self => ({

package/dist/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/dist/HierarchicalTrackSelectorWidget/model.js

@@ -25,8 +25,7 @@ function postF() {
         ].join('-')
         : 'empty';
 }
-const lsKeyFavoritesF = () => `favoriteTracks-${postF()}}`;
-const lsKeyRecentlyUsedF = () => `recentlyUsedTracks-${postF()}}`;
+const MAX_RECENTLY_USED = 10;
 /**
  * #stateModel HierarchicalTrackSelectorWidget
  */
@@ -61,30 +60,27 @@ function stateTreeFactory(pluginManager) {
          * #property
          */
         view: mobx_state_tree_1.types.safeReference(pluginManager.pluggableMstType('view', 'stateModel')),
-        /**
-         * #property
-         * this is removed in postProcessSnapshot, so is generally only loaded
-         * from localstorage
-         */
-        favorites: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.array(mobx_state_tree_1.types.string), () => JSON.parse((0, util_1.localStorageGetItem)(lsKeyFavoritesF()) || '[]')),
-        /**
-         * #property
-         * this is removed in postProcessSnapshot, so is generally only loaded
-         * from localstorage
-         */
-        recentlyUsed: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.array(mobx_state_tree_1.types.string), () => JSON.parse((0, util_1.localStorageGetItem)(lsKeyRecentlyUsedF()) || '[]')),
         /**
          * #property
          */
         faceted: mobx_state_tree_1.types.optional((0, facetedModel_1.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
          */
@@ -147,19 +143,19 @@ 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
@@ -167,6 +163,18 @@ function stateTreeFactory(pluginManager) {
         setRecentlyUsedCounter(val) {
             self.recentlyUsedCounter = val;
         },
+        /**
+         * #action
+         */
+        setRecentlyUsed(str) {
+            self.recentlyUsed = str;
+        },
+        /**
+         * #action
+         */
+        setFavorites(str) {
+            self.favorites = str;
+        },
         /**
          * #action
          */
@@ -177,19 +185,19 @@ 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
@@ -276,6 +284,22 @@ 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
          */
@@ -300,6 +324,9 @@ function stateTreeFactory(pluginManager) {
                 ...(0, filterTracks_1.filterTracks)((0, util_1.getSession)(self).tracks, self),
             ].filter(util_1.notEmpty);
         },
+        /**
+         * #getter
+         */
         get allTrackConfigurations() {
             const { connectionInstances = [] } = (0, util_1.getSession)(self);
             return [
@@ -307,6 +334,12 @@ 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 => ({
         /**
@@ -314,14 +347,18 @@ 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 => ({
@@ -437,15 +474,17 @@ function stateTreeFactory(pluginManager) {
     }))
         .actions(self => ({
         afterAttach() {
+            // this should be the first autorun to properly initialize
+            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
+                self.setRecentlyUsed(JSON.parse((0, util_1.localStorageGetItem)(self.recentlyUsedLocalStorageKey) || '[]'));
+                self.setFavorites(JSON.parse((0, util_1.localStorageGetItem)(self.favoritesLocalStorageKey) || '[]'));
+            }));
+            // this should be the second autorun
             (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
-                (0, util_1.localStorageSetItem)(lsKeyFavoritesF(), JSON.stringify(self.favorites));
-                (0, util_1.localStorageSetItem)(lsKeyRecentlyUsedF(), JSON.stringify(self.recentlyUsed));
+                (0, util_1.localStorageSetItem)(self.favoritesLocalStorageKey, JSON.stringify(self.favorites));
+                (0, util_1.localStorageSetItem)(self.recentlyUsedLocalStorageKey, JSON.stringify(self.recentlyUsed));
             }));
         },
-    }))
-        .postProcessSnapshot(snap => {
-        const { favorites: _, recentlyUsed: __, ...rest } = snap;
-        return rest;
-    });
+    }));
 }
 exports.default = stateTreeFactory;