Save workspace layout to cache storage so it persists beyond browser session

Author: MetRonnie

src/components/cylc/workspace/Lumino.vue

@@ -39,11 +39,12 @@ import {
   onMounted,
   ref,
 } from 'vue'
-import { useStore } from 'vuex'
-import { startCase, uniqueId } from 'lodash'
+import { startCase, uniqueId } from 'lodash-es'
 import WidgetComponent from '@/components/cylc/workspace/Widget.vue'
-import LuminoWidget from '@/components/cylc/workspace/lumino-widget'
+import { LuminoWidget } from '@/components/cylc/workspace/luminoWidget'
 import { BoxPanel, DockPanel, Widget } from '@lumino/widgets'
+import { watchWithControl } from '@/utils/reactivity'
+import { replacer, reviver } from '@/utils/json'
 import { useDefaultView } from '@/views/views'
 import { eventBus } from '@/services/eventBus'
 
@@ -66,8 +67,6 @@ import '@lumino/default-theme/style'
  * @property {Record<string,*>} initialOptions - prop passed to the view component
  */
 
-const $store = useStore()
-
 const props = defineProps({
   workflowName: {
     type: String,
@@ -114,21 +113,35 @@ const resizeObserver = new ResizeObserver(() => {
   boxPanel.update()
 })
 
-onMounted(() => {
+const layoutsCache = window.caches.open('workspace-layouts')
+const layoutWatcher = watchWithControl(views, saveLayout, { deep: true })
+
+onMounted(async () => {
+  // Store any add-view events that occur before the layout is ready
+  // (e.g. when opening log view from command menu):
+  const bufferedAddViewEvents = []
+  eventBus.on('add-view', (e) => bufferedAddViewEvents.push(e))
+
   // Attach box panel to DOM:
   Widget.attach(boxPanel, mainDiv.value)
   // Watch for resize of the main element to trigger relayout:
   resizeObserver.observe(mainDiv.value)
+
+  await getLayout()
+  dockPanel.layoutModified.connect(() => layoutWatcher.trigger())
+
+  eventBus.off('add-view')
   eventBus.on('add-view', addView)
+  bufferedAddViewEvents.forEach((e) => addView(e))
   eventBus.on('lumino:deleted', onWidgetDeleted)
-  getLayout(props.workflowName)
+  eventBus.on('reset-workspace-layout', resetToDefault)
 })
 
 onBeforeUnmount(() => {
   resizeObserver.disconnect()
   eventBus.off('add-view', addView)
   eventBus.off('lumino:deleted', onWidgetDeleted)
-  saveLayout()
+  eventBus.off('reset-workspace-layout', resetToDefault)
   // Register with Lumino that the dock panel is no longer used,
   // otherwise uncaught errors can occur when restoring layout
   dockPanel.dispose()
@@ -140,71 +153,104 @@ onBeforeUnmount(() => {
  * @param {AddViewEvent} event
  * @param {boolean} onTop
  */
-const addView = ({ name, initialOptions = {} }, onTop = true) => {
+async function addView ({ name, initialOptions = {} }, onTop = true) {
+  layoutWatcher.pause()
   const id = uniqueId('widget')
   const luminoWidget = new LuminoWidget(id, startCase(name), /* closable */ true)
   dockPanel.addWidget(luminoWidget, { mode: 'tab-after' })
+  if (onTop) {
+    dockPanel.selectWidget(luminoWidget)
+  }
   // give time for Lumino's widget DOM element to be created
-  nextTick(() => {
-    views.value.set(id, { name, initialOptions })
-    if (onTop) {
-      dockPanel.selectWidget(luminoWidget)
-    }
-  })
+  await nextTick()
+  views.value.set(id, { name, initialOptions })
+  layoutWatcher.resume()
+  layoutWatcher.trigger()
 }
 
 /**
  * Remove all the widgets present in the DockPanel.
  */
-// (This is likely to be used in the future)
-// eslint-disable-next-line no-unused-vars
-const closeAllViews = () => {
+async function closeAllViews () {
   for (const widget of Array.from(dockPanel.widgets())) {
     widget.close()
   }
+  await nextTick()
 }
 
 /**
- * Get the saved layout (if there is one) for the given workflow,
+ * Get the saved layout (if there is one) for the current workflow,
  * else add the default view.
- *
- * @param {string} workflowName
  */
-const getLayout = (workflowName) => {
-  restoreLayout(workflowName) || addView({ name: defaultView.value })
+async function getLayout () {
+  await restoreLayout() || await addView({ name: defaultView.value })
 }
 
 /**
- * Save the current layout/views to the store.
+ * Save the current layout/views to cache storage.
  */
-const saveLayout = () => {
-  $store.commit('app/saveLayout', {
-    workflowName: props.workflowName,
+async function saveLayout () {
+  // Serialize layout first to synchronously capture the current state
+  const serializedLayout = JSON.stringify({
     layout: dockPanel.saveLayout(),
-    views: new Map(views.value),
-  })
+    views: views.value,
+  }, replacer)
+  const cache = await layoutsCache
+  // Overrides on FIFO basis:
+  await cache.put(props.workflowName, new Response(
+    serializedLayout,
+    { headers: { 'Content-Type': 'application/json' } }
+  ))
+  const keys = await cache.keys()
+  if (keys.length > 100) {
+    await cache.delete(keys[0])
+  }
+}
+
+/**
+ * Return the saved layout for this workflow from cache storage, if it was saved.
+ */
+async function getStoredLayout () {
+  const cache = await layoutsCache
+  const stored = await cache.match(props.workflowName).then((r) => r?.text())
+  if (stored) {
+    return JSON.parse(
+      stored,
+      (key, value) => reviver(key, LuminoWidget.layoutReviver(key, value))
+    )
+  }
 }
 
 /**
- * Restore the layout for this workflow from the store, if it was saved.
+ * Restore the layout for this workflow, if it was saved.
  *
- * @param {string} workflowName
- * @returns {boolean} true if the layout was restored, false otherwise
+ * @returns true if the layout was restored, false otherwise
  */
-const restoreLayout = (workflowName) => {
-  const stored = $store.state.app.workspaceLayouts.get(workflowName)
+async function restoreLayout () {
+  const stored = await getStoredLayout()
   if (stored) {
+    layoutWatcher.pause()
     dockPanel.restoreLayout(stored.layout)
     // Wait for next tick so that Lumino has created the widget divs that the
     // views will be teleported into
-    nextTick(() => {
-      views.value = stored.views
-    })
+    await nextTick()
+    views.value = stored.views
+    layoutWatcher.resume()
     return true
   }
   return false
 }
 
+/**
+ * Reset the workspace layout to a single tab with the default view.
+ */
+async function resetToDefault () {
+  layoutWatcher.pause()
+  await closeAllViews()
+  await addView({ name: defaultView.value })
+  // (addView resumes the layout watcher)
+}
+
 /**
  * React to a deleted event.
  *

src/components/cylc/workspace/Toolbar.vue

@@ -160,6 +160,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </template>
               <v-list-item-title>{{ startCase(name) }}</v-list-item-title>
             </v-list-item>
+            <v-divider/>
+            <v-card-actions class="mb-n2">
+              <v-btn
+                @click="eventBus.emit('reset-workspace-layout')"
+                :prepend-icon="$options.icons.mdiArrowULeftTop"
+                class="flex-grow-1"
+                data-cy="reset-layout-btn"
+              >
+                Reset layout
+              </v-btn>
+            </v-card-actions>
           </v-list>
         </v-menu>
       </v-btn>
@@ -207,7 +218,8 @@ import {
   mdiPlusBoxMultiple,
   mdiStop,
   mdiViewList,
-  mdiAccount
+  mdiAccount,
+  mdiArrowULeftTop
 } from '@mdi/js'
 import { startCase } from 'lodash'
 import { until } from '@/utils/reactivity'
@@ -456,7 +468,8 @@ export default {
     run: mdiPlay,
     stop: mdiStop,
     mdiCog,
-    mdiAccount
+    mdiAccount,
+    mdiArrowULeftTop,
   },
 }
 </script>

src/components/cylc/workspace/lumino-widget.js renamed to src/components/cylc/workspace/luminoWidget.js

@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -28,7 +28,7 @@ import { eventBus } from '@/services/eventBus'
  * Events in the widget will be propagated to the Vue component. Event
  * listeners much be attached to the DOM element with the widget ID.
  */
-export default class LuminoWidget extends Widget {
+export class LuminoWidget extends Widget {
   /**
    * Create a LuminoWidget object.
    * @param {string} id - unique ID of the widget
@@ -87,4 +87,25 @@ export default class LuminoWidget extends Widget {
     eventBus.emit(`lumino:show:${this.id}`)
     super.onAfterShow(msg)
   }
+
+  toJSON () {
+    // Allow the widget to be serialized.
+    // We only need to store this limited info when saving the layout,
+    // allowing us to entirely recreate the widget when restoring the layout.
+    return {
+      name: this.name,
+      id: this.id,
+      closable: this.closable,
+    }
+  }
+
+  /**
+   * JSON.parse reviver function for reconstructing a serialized Lumino ILayoutConfig.
+   */
+  static layoutReviver (key, value) {
+    if (key === 'widgets') {
+      return value.map((w) => new LuminoWidget(w.id, w.name, w.closable))
+    }
+    return value
+  }
 }

src/store/app.module.js

@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,29 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { markRaw } from 'vue'
-
 const state = () => ({
   title: null,
-  workspaceLayouts: new Map(),
 })
 
 const mutations = {
   setTitle (state, title) {
     state.title = title
   },
-  saveLayout ({ workspaceLayouts }, { workflowName, layout, views }) {
-    // Delete and re-add to keep this FIFO
-    workspaceLayouts.delete(workflowName)
-    /* NOTE: use markRaw to prevent proxying of the Lumino layout in particular.
-    It is not necessary for this saved state to be reactive, and moreover
-    proxying the layout breaks some parts of the 3rd party Lumino backend. */
-    workspaceLayouts.set(workflowName, markRaw({ layout, views }))
-    if (workspaceLayouts.size > 100) {
-      const firstKey = workspaceLayouts.keys().next().value
-      workspaceLayouts.delete(firstKey)
-    }
-  }
 }
 
 export const app = {

src/utils/initialOptions.js

@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -57,7 +57,7 @@ export function useInitialOptions (name, { props, emit }, defaultValue) {
       updateInitialOptionsEvent,
       { ...props.initialOptions, [name]: val }
     ),
-    { immediate: true, deep: true }
+    { deep: true }
   )
   return _ref
 }

src/utils/json.js

@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+// JSON utilities.
+
+/**
+ * Custom replacer function for JSON.stringify to handle JS objects that
+ * cannot otherwise be serialized.
+ */
+export function replacer (key, value) {
+  if (value instanceof Map) {
+    return { _jsonType: 'Map', _val: Array.from(value) }
+  }
+  if (value instanceof Set) {
+    return { _jsonType: 'Set', _val: Array.from(value) }
+  }
+  return value
+}
+
+/**
+ * Custom reviver function for JSON.parse to handle JS objects that
+ * cannot otherwise be serialized.
+ */
+export function reviver (key, value) {
+  if (value?._jsonType === 'Map') {
+    return new Map(value._val)
+  }
+  if (value?._jsonType === 'Set') {
+    return new Set(value._val)
+  }
+  return value
+}