From f3acb1ca8d982c4a781b375fefbd847fdc24e3a4 Mon Sep 17 00:00:00 2001 From: Colin Date: Wed, 13 Dec 2023 18:09:56 -0500 Subject: [PATCH] Containerize --- .../components/tree/DropdownTrackSelector.tsx | 1 + .../HierarchicalTrackSelectorWidget/model.ts | 90 ++++++++++++------- 2 files changed, 60 insertions(+), 31 deletions(-) diff --git a/plugins/data-management/src/HierarchicalTrackSelectorWidget/components/tree/DropdownTrackSelector.tsx b/plugins/data-management/src/HierarchicalTrackSelectorWidget/components/tree/DropdownTrackSelector.tsx index 8bee8d0c3c..f5e2a530d3 100644 --- a/plugins/data-management/src/HierarchicalTrackSelectorWidget/components/tree/DropdownTrackSelector.tsx +++ b/plugins/data-management/src/HierarchicalTrackSelectorWidget/components/tree/DropdownTrackSelector.tsx @@ -27,6 +27,7 @@ const DropdownTrackSelector = observer(function ({ const { view } = model const [open, setOpen] = useState(false) const session = getSession(model) + console.log('k2', { tracks: tracks.map(t => t.trackId) }) return view ? ( !!f).join('-') +} + +const MAX_RECENTLY_USED = 10 const lsKeyFavoritesF = () => `favoriteTracks-${postF()}}` -const lsKeyRecentlyUsedF = () => `recentlyUsedTracks-${postF()}}` /** * #stateModel HierarchicalTrackSelectorWidget @@ -87,14 +91,6 @@ export default function stateTreeFactory(pluginManager: PluginManager) { 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 @@ -102,6 +98,7 @@ export default function stateTreeFactory(pluginManager: PluginManager) { faceted: types.optional(facetedStateTreeF(), {}), }) .volatile(() => ({ + recentlyUsed: [] as string[], selection: [] as AnyConfigurationModel[], filterText: '', recentlyUsedCounter: 0, @@ -192,6 +189,12 @@ export default function stateTreeFactory(pluginManager: PluginManager) { setRecentlyUsedCounter(val: number) { self.recentlyUsedCounter = val }, + /** + * #action + */ + setRecentlyUsed(str: string[]) { + self.recentlyUsed = str + }, /** * #action */ @@ -202,12 +205,15 @@ export default function stateTreeFactory(pluginManager: PluginManager) { * #action */ addToRecentlyUsed(id: string) { - 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] } }, @@ -215,7 +221,7 @@ export default function stateTreeFactory(pluginManager: PluginManager) { * #action */ clearRecentlyUsed() { - self.recentlyUsed.clear() + self.recentlyUsed = [] }, /** * #action @@ -302,6 +308,9 @@ export default function stateTreeFactory(pluginManager: PluginManager) { }, })) .views(self => ({ + get recentlyUsedLocalStorageKey() { + return `recentlyUsedTracks-${postF2(self.assemblyNames)}` + }, /** * #getter */ @@ -331,7 +340,9 @@ export default function stateTreeFactory(pluginManager: PluginManager) { ...filterTracks(getSession(self).tracks, self), ].filter(notEmpty) }, - + /** + * #getter + */ get allTrackConfigurations() { const { connectionInstances = [] } = getSession(self) return [ @@ -339,6 +350,13 @@ export default function stateTreeFactory(pluginManager: PluginManager) { ...connectionInstances?.flatMap(c => c.tracks), ] }, + + /** + * #getter + */ + get allTrackConfigurationTrackIdSet() { + return new Map(this.allTrackConfigurations.map(t => [t.trackId, t])) + }, })) .views(self => ({ /** @@ -346,9 +364,9 @@ export default function stateTreeFactory(pluginManager: 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)) }, /** @@ -356,9 +374,9 @@ export default function stateTreeFactory(pluginManager: PluginManager) { * 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 => ({ @@ -480,6 +498,18 @@ export default function stateTreeFactory(pluginManager: PluginManager) { })) .actions(self => ({ afterAttach() { + // this should be the first autorun to properly initialize + addDisposer( + self, + autorun(() => { + self.setRecentlyUsed( + JSON.parse( + localStorageGetItem(self.recentlyUsedLocalStorageKey) || '[]', + ), + ) + }), + ) + // this should be the second autorun addDisposer( self, autorun(() => { @@ -487,20 +517,18 @@ export default function stateTreeFactory(pluginManager: PluginManager) { lsKeyFavoritesF(), JSON.stringify(self.favorites), ) - localStorageSetItem( - lsKeyRecentlyUsedF(), - JSON.stringify(self.recentlyUsed), - ) + if (self.recentlyUsed) { + localStorageSetItem( + self.recentlyUsedLocalStorageKey, + JSON.stringify(self.recentlyUsed), + ) + } }), ) }, })) .postProcessSnapshot(snap => { - const { - favorites: _, - recentlyUsed: __, - ...rest - } = snap as Omit + const { favorites: _, ...rest } = snap as Omit return rest }) }