Merge pull request #2176 from MetRonnie/save-layout

Persist saved workspace layouts

Author: wxtim

changes.d/2176.feat.md

@@ -0,0 +1 @@
+Workspace tab layout is now remembered beyond the current browser session.

src/components/cylc/Drawer.vue

@@ -87,7 +87,7 @@ import Header from '@/components/cylc/Header.vue'
 import Workflows from '@/views/Workflows.vue'
 import { mdiHome, mdiInformationOutline } from '@mdi/js'
 import pkg from '@/../package.json'
-import { when } from '@/utils'
+import { when } from '@/utils/reactivity'
 import { useDrawer } from '@/utils/toolbar'
 
 export const initialWidth = 260

src/components/cylc/log/Log.vue

@@ -42,7 +42,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { useTemplateRef, watch, onBeforeUnmount, nextTick } from 'vue'
 import { useScroll, useVModel, whenever } from '@vueuse/core'
-import { when } from '@/utils'
+import { when } from '@/utils/reactivity'
 import {
   mdiMouseMoveUp
 } from '@mdi/js'

src/components/cylc/tree/TreeItem.vue

@@ -176,7 +176,7 @@ import {
   isFlowNone,
 } from '@/utils/tasks'
 import { getIndent, getNodeChildren } from '@/components/cylc/tree/util'
-import { once } from '@/utils'
+import { once } from '@/utils/reactivity'
 import { useToggle } from '@vueuse/core'
 import FlowNumsChip from '@/components/cylc/common/FlowNumsChip.vue'
 

src/components/cylc/workspace/Lumino.vue

@@ -39,14 +39,15 @@ 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 { when } from '@/utils'
+import { watchWithControl } from '@/utils/reactivity'
+import { replacer, reviver } from '@/utils/json'
 import { useDefaultView } from '@/views/views'
 import { eventBus } from '@/services/eventBus'
+import { useWorkspaceLayoutsCache } from '@/composables/cacheStorage'
 
 import '@lumino/default-theme/style'
 
@@ -61,14 +62,12 @@ import '@lumino/default-theme/style'
  */
 
 /**
- * Mitt event for adding a view to the workspace.
- * @typedef {Object} AddViewEvent
- * @property {string} name - the view to add
+ * Options for views in the workspace.
+ * @typedef {Object} IViewOptions
+ * @property {string} name - the view component name
  * @property {Record<string,*>} initialOptions - prop passed to the view component
  */
 
-const $store = useStore()
-
 const props = defineProps({
   workflowName: {
     type: String,
@@ -98,7 +97,7 @@ const mainDiv = ref(null)
 /**
  * Mapping of widget ID to the name of view component and its initialOptions prop.
  *
- * @type {import('vue').Ref<Map<string, AddViewEvent>>}
+ * @type {import('vue').Ref<Map<string, IViewOptions>>}
  */
 const views = ref(new Map())
 
@@ -115,21 +114,35 @@ const resizeObserver = new ResizeObserver(() => {
   boxPanel.update()
 })
 
-onMounted(() => {
+const layoutsCache = useWorkspaceLayoutsCache()
+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()
@@ -138,85 +151,105 @@ onBeforeUnmount(() => {
 /**
  * Create a widget and add it to the dock.
  *
- * @param {AddViewEvent} event
+ * @param {IViewOptions} param0
  * @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.
  */
-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])
+  }
 }
 
 /**
- * Restore the layout for this workflow from the store, if it was saved.
+ * 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, 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
 }
 
 /**
- * Save & close the current layout and open the one for the given workflow.
- *
- * @param {string} workflowName
+ * Reset the workspace layout to a single tab with the default view.
  */
-const changeLayout = (workflowName) => {
-  saveLayout()
-  closeAllViews()
-  // Wait if necessary for the workflowName prop to be updated to the new value:
-  when(
-    () => props.workflowName === workflowName,
-    () => getLayout(workflowName),
-  )
+async function resetToDefault () {
+  layoutWatcher.pause()
+  await closeAllViews()
+  await addView({ name: defaultView.value })
+  // (addView resumes the layout watcher)
 }
 
 /**
@@ -225,13 +258,12 @@ const changeLayout = (workflowName) => {
  * @param {string} id - widget ID
  */
 const onWidgetDeleted = (id) => {
+  // layoutWatcher will be triggered by DockPanel.layoutModified, so pause to avoid duplicate trigger:
+  layoutWatcher.pause()
   views.value.delete(id)
+  layoutWatcher.resume()
   if (!views.value.size) {
     emit('emptied')
   }
 }
-
-defineExpose({
-  changeLayout,
-})
 </script>

src/components/cylc/workspace/Toolbar.vue

@@ -167,6 +167,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>
@@ -216,9 +227,10 @@ import {
   mdiViewList,
   mdiAccount,
   mdiChevronDown,
+  mdiArrowULeftTop,
 } from '@mdi/js'
 import { startCase } from 'lodash'
-import { until } from '@/utils'
+import { until } from '@/utils/reactivity'
 import { useDrawer, useNavBtn, toolbarHeight } from '@/utils/toolbar'
 import WorkflowState from '@/model/WorkflowState.model'
 import graphql from '@/mixins/graphql'
@@ -472,6 +484,7 @@ export default {
     mdiCog,
     mdiAccount,
     mdiChevronDown,
+    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
+  }
 }