tab switching (preserve tab layout, configure defaults & share links)

[oliver-sanders]

Note

Definition: "Workspace"

The part of the UI within the Lumino instance. Basically everything that isn't GScan in the "default" view.

A workspace could be for:

• An installed workflow (only workspace implemented at the moment).
• A source workflow (soon).
• The user dashboard (one day).

The aims the GScan tabbing system are:

• To simplify workspace selection/switching.
• To make the user's workflow between configuring > running > reviewing easy.
• To make it easy to work in a single browser tab.

Here are four steps to achieve these goals in order of priority.

1. Allow the current tab layout to be saved (urgent).
   • Add a component to the workflow toolbar which allows the current tab layout to saved as the default.
   • Apply the default layout when switching workflows.
   • NOTE: configuring multiple view layouts is blocked by subscriptions: prevent multiple subscribe/unsubscribe events #1278
2. Save the layout last used by a workspace (important). Save & restore workspace layout on navigation #1664
   • When the user navigates away from a workflow, save the tab layout.
   • When the user navigates back to the workflow, load the tab layout.
   • When the user navigates to a new run of the same workflow, copy the layout from the last run of the workflow.
3. Save view state (useful). In progress
   • Some aspects of the view state should be preserved with the layout.
   • E.G. Any task state filters should be preserved.
   • E.G. The "log" view should remember what log file it is looking at.
   • These things need to be saved as part of the layout information so that we can re-open the layout as it was before.
4. Named layouts (nice-to-have).
   • Allow users to save "named" layouts.
   • Allow users to re-configure the workspace to a previously saved layout.

[oliver-sanders]

Long run we should provide:

• A way to "save" the current layout.
• A mechanism for dumping the view's data into the layout (e.g. if the view is filtered by task state, that should be included in the layout)
• A way to "load" a pre-saved layout.
• A configuration for setting the default layout.
• Possibly an additional configuration on each layout to allow setting it as the default layout based on the workflow hierarchy?

E.G. A layout menu icon which provides a "save current layout" button and lists all pre-saved layouts for quick switching.

[MetRonnie]

IMO we should split the "Serialise lumino state into local storage" part off into a 1.4.0 issue?

[oliver-sanders]

For view state (i.e. options like filtering set by the user in the view), I suggest we collect these options into a single objet in the component data () {}. E.G. this.options.taskFilters.

Then the serialisation bit can be done at a higher level, extracting them something like this.$refs[viewID].options.

View defaults (e.g. you might want new table views to open with some sort order pre-configured) could be provided to the view as a prop e.g. this.defaultOptions. We can use the #471 to make these editable in the UserProfile.

[oliver-sanders]

(assigning @AaronDCole as #1128 leads in this direction to avoid scope for duplication)

[oliver-sanders]

See also #1090

[oliver-sanders]

Whilst digging through the Lumino source working on #1090 I found a saveLayout interface.

https://github.com/jupyterlab/lumino/blob/d51b0575c7797769af5a6aabed39500bd494a918/packages/widgets/src/docklayout.ts#L265

It has a restoreLayout counterpart too. To use these in the Lumino component we can do something like this:

diff --git a/src/components/cylc/workflow/Lumino.vue b/src/components/cylc/workflow/Lumino.vue
index 90f9bb1a..66441573 100644
--- a/src/components/cylc/workflow/Lumino.vue
+++ b/src/components/cylc/workflow/Lumino.vue
@@ -181,6 +181,14 @@ export default {
       // TODO: remove it if the linter is fixed later #510
       // eslint-disable-next-line vue/custom-event-name-casing
       this.$emit('lumino:deleted', customEvent.detail)
+    },
+
+    saveLayout () {
+      return this.dock.layout.saveLayout()
+    },
+
+    loadLayout (layout) {
+      return this.dock.layout.restoreLayout(layout)
     }
   }
 }

I haven't tried this out for real but it look promising. We should be able to dump this layout into browser LocalStorage for now. This would allow the default layout to be configurable.

We will require an extra step in the "Workflow Component" as we need to create the Vue components that fit into this layout, not sure how those two components will marry up at present. It might be worth looking at the JupyterLab source for inspiration.

[MetRonnie]

I've tried that out and it works just like what we want. Will need to figure out how to restore the Tree/Table/etc. views to the restored tabs, which will be empty otherwise.

https://lumino.readthedocs.io/en/latest/api/classes/widgets.DockPanel-1.html#layout

https://lumino.readthedocs.io/en/latest/api/classes/widgets.DockLayout-1.html

[oliver-sanders]

Moved the remainder of point (1) to #1834

[oliver-sanders]

Moved point (4) to #1835

[oliver-sanders]

Added #1837 to capture preserving layouts between browser sessions.

[oliver-sanders]

The remainder of this issue has now been split into #1834, #1835 and #1837. Closing this master issue.

See also #1836