Workspace view: use dynamic async components in lumino widgets

Also fixes SimpleTree view post-vue3

Author: MetRonnie

.eslintrc.js

@@ -37,7 +37,7 @@ module.exports = {
         objects: 'only-multiline',
         imports: 'only-multiline',
         exports: 'only-multiline',
-        functions: 'never',
+        functions: 'only-multiline',
       },
     ],
     'template-curly-spacing': [

src/components/cylc/workflow/Lumino.vue

@@ -18,23 +18,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div ref="main" class="main pa-2 fill-height">
     <!-- Lumino box panel gets inserted here -->
   </div>
-  <div v-show="false">
-    <!-- Hidden div acts as staging area for views before they are
-    moved into a lumino widget -->
-    <component
-      v-for="(item, id) of views"
-      :key="id"
-      :ref="(ref) => setViewRef(id, ref)"
-      :is="item.view"
-      :tab-title="getTabTitle(item.view)"
-      :workflow-name="workflowName"
-      :initialOptions="item.initialOptions"
-      class="h-100"
-    />
-  </div>
+  <template
+    v-for="(item, id) in views"
+    :key="id"
+  >
+    <Teleport :to="`#${id}`">
+      <component
+        :is="item.view"
+        :workflow-name="workflowName"
+        :initialOptions="item.initialOptions"
+        class="h-100"
+      />
+    </Teleport>
+  </template>
 </template>
 
 <script>
+import { startCase } from 'lodash'
 import LuminoWidget from '@/components/cylc/workflow/lumino-widget'
 import { BoxPanel, DockPanel, Widget } from '@lumino/widgets'
 
@@ -74,27 +74,17 @@ export default {
       type: Array,
       required: true
     },
-    /**
-     * Prop to customize the tab title. Defaults to name.
-     * If a component does not have the $component.$tabTitleProp
-     * set, then we still revert to the old default $component.name.
-     */
-    tabTitleProp: {
-      type: String,
-      default: 'name'
-    }
   },
 
   emits: [
     'lumino:activated',
     'lumino:deleted'
   ],
 
-  data () {
-    return {
-      /** Keep track of views' refs separate from $refs in order to access
-       * by ID */
-      viewRefs: {}
+  beforeCreate () {
+    // Populate components
+    for (const { name, component } of this.allViews) {
+      this.$options.components[name] = component
     }
   },
 
@@ -103,12 +93,6 @@ export default {
    * Box panel. In the next tick of Vue, the DOM element and the Vue element/ref are attached.
    */
   created () {
-    // We need to load each view used by this view/component.
-    // See "local-registration" in Vue.js documentation.
-    this.allViews.forEach(view => {
-      this.$options.components[view.name] = view
-    })
-
     // create a box panel, which holds the dock panel, and controls its layout
     this.box = new BoxPanel({ direction: 'left-to-right', spacing: 0 })
     // create dock panel, which holds the widgets
@@ -152,40 +136,27 @@ export default {
   },
 
   methods: {
-    /** Keep track of views' refs separate from $refs, allowing access by ID */
-    setViewRef (id, ref) {
-      if (ref) {
-        this.viewRefs[id] = ref
-      } else {
-        delete this.viewRefs[id]
-      }
-    },
     /**
      * Look for newly added views, creating a corresponding Lumino Widget
      * for each.
      */
     syncWidgets (newVal, oldVal) {
-      const { tabTitleProp } = this.$props
       for (const [id, item] of Object.entries(newVal)) {
         if (!(id in oldVal)) {
-          const view = this.$options.components[item.view]
-          const name = view[tabTitleProp] ?? view.name
-          this.addWidget(id, name)
+          this.addWidget(id, item.view)
         }
       }
     },
 
     /**
-     * Create a widget, add it to the dock, and move the corresponding view
-     * from the hidden div into it.
+     * Create a widget and add it to the dock.
      */
     addWidget (id, name, onTop = true) {
-      const luminoWidget = new LuminoWidget(id, name, /* closable */ true)
+      const luminoWidget = new LuminoWidget(id, startCase(name), /* closable */ true)
       this.dock.addWidget(luminoWidget, { mode: 'tab-after' })
       // give time for Lumino's widget DOM element to be created
       this.$nextTick(() => {
         const widgetEl = document.getElementById(id)
-        widgetEl.appendChild(this.viewRefs[id].$el)
         widgetEl.addEventListener('lumino:activated', this.onWidgetActivated)
         widgetEl.addEventListener('lumino:deleted', this.onWidgetDeleted)
         if (onTop) {
@@ -227,10 +198,6 @@ export default {
       widgetEl.removeEventListener('lumino:activated', this.onWidgetActivated)
       this.$emit('lumino:deleted', customEvent.detail)
     },
-
-    getTabTitle (viewName) {
-      return this.$options.components[viewName].data().widget.title
-    }
   }
 }
 </script>

src/components/cylc/workflow/Toolbar.vue

@@ -89,6 +89,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <v-spacer class="mx-0" />
 
       <v-btn
+        v-if="$route.name === 'workspace'"
         class="add-view"
         color="primary"
         data-cy="add-view-btn"
@@ -101,20 +102,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <v-menu
           activator="parent"
           location="bottom"
-          v-if="$route.name === 'workspace'"
-        >
-          <v-list class="pa-0">
+          >
+          <v-list>
             <v-list-item
-              :id="`toolbar-add-${ view.name }-view`"
               v-for="view in views"
+              :id="`toolbar-add-${ view.name }-view`"
               :key="view.name"
               @click="$emit('add', { viewName: view.name })"
-              class="py-0 px-8 ma-0 c-add-view"
             >
               <template v-slot:prepend>
-                <v-icon>{{ view.data().widget.icon }}</v-icon>
+                <v-icon>{{ view.icon }}</v-icon>
               </template>
-              <v-list-item-title>{{ view.name }}</v-list-item-title>
+              <v-list-item-title>{{ startCase(view.name) }}</v-list-item-title>
             </v-list-item>
           </v-list>
         </v-menu>
@@ -148,6 +147,7 @@ import {
   mdiStop,
   mdiViewList
 } from '@mdi/js'
+import { startCase } from 'lodash'
 import toolbar from '@/mixins/toolbar'
 import WorkflowState from '@/model/WorkflowState.model'
 import graphql from '@/mixins/graphql'
@@ -158,20 +158,24 @@ import {
 
 export default {
   name: 'Toolbar',
+
   mixins: [
     toolbar,
     graphql
   ],
+
   props: {
     views: {
       type: Array,
       required: true
     }
+
   },
+
   emits: ['add'],
+
   data: () => ({
     extended: false,
-    // FIXME: remove local state once we have this data in the workflow - https://github.com/cylc/cylc-ui/issues/221
     svgPaths: {
       add: mdiPlusBoxMultiple,
       hold: mdiPause,
@@ -187,6 +191,7 @@ export default {
       stop: null
     }
   }),
+
   computed: {
     ...mapState('app', ['title']),
     ...mapState('user', ['user']),
@@ -253,6 +258,7 @@ export default {
       }
     }
   },
+
   watch: {
     isRunning () {
       this.expecting.play = null
@@ -264,6 +270,7 @@ export default {
       this.expecting.stop = null
     }
   },
+
   methods: {
     onClickPlay () {
       this.$workflowService.mutate(
@@ -285,7 +292,7 @@ export default {
         }
       })
     },
-    async onClickStop () {
+    onClickStop () {
       this.$workflowService.mutate(
         'stop',
         this.currentWorkflow.id
@@ -297,7 +304,8 @@ export default {
     },
     toggleExtended () {
       this.extended = !this.extended
-    }
+    },
+    startCase,
   }
 }
 </script>

src/views/Analysis.vue

@@ -88,7 +88,6 @@ import {
   platformOptions
 } from '@/components/cylc/analysis/filter'
 import {
-  mdiChartLine,
   mdiRefresh
 } from '@mdi/js'
 
@@ -185,10 +184,6 @@ export default {
   data () {
     const tasks = []
     return {
-      widget: {
-        title: 'analysis',
-        icon: mdiChartLine
-      },
       /** Defines controls which get added to the toolbar */
       groups: [
         {

src/views/Graph.vue

@@ -108,7 +108,6 @@ import {
 import { Graphviz } from '@hpcc-js/wasm/graphviz'
 import svgPanZoom from 'svg-pan-zoom'
 import {
-  mdiGraph,
   mdiTimer,
   mdiImageFilterCenterFocus,
   mdiArrowCollapse,
@@ -219,10 +218,6 @@ export default {
 
   data () {
     return {
-      widget: {
-        title: 'graph',
-        icon: mdiGraph
-      },
       // the graph orientation
       orientation: 'TB',
       // the auto-refresh timer

src/views/Log.vue

@@ -141,7 +141,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import {
   mdiClockOutline,
-  mdiFileDocumentMultipleOutline,
   mdiFolderRefresh,
   mdiPowerPlugOff,
   mdiPowerPlug
@@ -253,11 +252,6 @@ export default {
 
   data () {
     return {
-      // metadata for the workspace view
-      widget: {
-        title: 'logs',
-        icon: mdiFileDocumentMultipleOutline
-      },
       // the log subscription query
       query: null,
       // list of log files for the selected workflow/task/job

src/views/SimpleTree.vue

@@ -106,11 +106,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import gql from 'graphql-tag'
 import { mapState, mapGetters } from 'vuex'
-import pageMixin from '@/mixins/index'
+import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
-import { mdiTree } from '@mdi/js'
 
 // Any fields that our view will use (e.g. TaskProxy.status) must be requested
 // in the query.
@@ -176,30 +175,18 @@ fragment JobData on Job {
 `
 
 export default {
+  name: 'SimpleTree',
+
   // These mixins enable various functionalities.
   mixins: [
-    pageMixin,
     graphqlMixin,
     subscriptionComponentMixin
   ],
 
-  // This defines the component name, must be HTML safe.
-  name: 'SimpleTree',
-
   // This sets the page title.
-  metaInfo () {
+  head () {
     return {
-      title: this.getPageTitle('App.workflow', { name: this.workflowName })
-    }
-  },
-
-  // The view must provide a title and icon for display purposes.
-  data () {
-    return {
-      widget: {
-        title: 'simple tree',
-        icon: mdiTree
-      }
+      title: getPageTitle('App.workflow', { name: this.workflowName })
     }
   },
 
@@ -238,7 +225,10 @@ export default {
 
 <style lang="scss">
   .c-simple-tree {
-    .state:before {
+    ul, ol {
+      padding-left: 24px;
+    }
+    .state::before {
       content: ' ';
     }
     .state {

src/views/Table.vue

@@ -27,7 +27,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { mdiTable } from '@mdi/js'
 import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
@@ -55,13 +54,6 @@ export default {
     }
   },
 
-  data: () => ({
-    widget: {
-      title: 'table',
-      icon: mdiTable
-    }
-  }),
-
   computed: {
     ...mapState('workflows', ['cylcTree']),
     ...mapGetters('workflows', ['getNodes']),