From 6eb54999afb5a04d1ba12031854ad2d7d1965290 Mon Sep 17 00:00:00 2001
From: Oliver Sanders <oliver.sanders@metoffice.gov.uk>
Date: Thu, 2 May 2024 09:35:08 +0100
Subject: [PATCH 01/11] metadata view: introduce a minimal task metadata view

* Bare bones task metadata view.
* Display task metadata, prerequisites and outputs.
* Support for viewing task configuration, broadcasts, etc to follow in
  future PRs.
* Support for markup (e.g. markdown & reStructured text) to arrive in
  future PRs (pending a decision on how to configure the markup
  language).
---
 changes.d/1886.feat.md                   |   1 +
 src/components/cylc/commandMenu/Menu.vue |  19 +-
 src/utils/aotf.js                        |  16 +-
 src/views/Info.vue                       | 437 +++++++++++++++++++++++
 src/views/Workspace.vue                  |   5 +-
 src/views/views.js                       |  26 +-
 6 files changed, 492 insertions(+), 12 deletions(-)
 create mode 100644 changes.d/1886.feat.md
 create mode 100644 src/views/Info.vue

diff --git a/changes.d/1886.feat.md b/changes.d/1886.feat.md
new file mode 100644
index 000000000..9f20cc650
--- /dev/null
+++ b/changes.d/1886.feat.md
@@ -0,0 +1 @@
+Added an info view to display task information including metadata, prerequisites and outputs.
diff --git a/src/components/cylc/commandMenu/Menu.vue b/src/components/cylc/commandMenu/Menu.vue
index a75a8e065..a3e532ce9 100644
--- a/src/components/cylc/commandMenu/Menu.vue
+++ b/src/components/cylc/commandMenu/Menu.vue
@@ -224,7 +224,7 @@ export default {
 
   methods: {
     isEditable (mutation, authorised) {
-      return mutation.name !== 'log' && !this.isDisabled(mutation, authorised)
+      return mutation.name !== 'log' && mutation.name !== 'info' && !this.isDisabled(mutation, authorised)
     },
     isDisabled (mutation, authorised) {
       if (!authorised) {
@@ -271,6 +271,23 @@ export default {
             }
           )
         })
+      } else if (mutation.name === 'info') {
+        this.$router.push({
+          name: 'Workspace',
+          params: {
+            workflowName: this.node.tokens.workflow
+          }
+        }).then(() => {
+          eventBus.emit(
+            'add-view',
+            {
+              name: 'Info',
+              initialOptions: {
+                requestedTokens: this.node.tokens || undefined
+              }
+            }
+          )
+        })
       } else {
         mutate(
           mutation,
diff --git a/src/utils/aotf.js b/src/utils/aotf.js
index e864b2b95..ccf42a6ab 100644
--- a/src/utils/aotf.js
+++ b/src/utils/aotf.js
@@ -35,7 +35,7 @@ import {
   mdiDelete,
   mdiEmail,
   mdiFileDocumentOutline,
-  mdiVectorPolylineEdit,
+  mdiInformationOutline,
   mdiMinusCircleOutline,
   mdiPause,
   mdiPauseCircleOutline,
@@ -44,7 +44,8 @@ import {
   mdiPlaylistEdit,
   mdiRefreshCircle,
   mdiReload,
-  mdiStop
+  mdiStop,
+  mdiVectorPolylineEdit,
 } from '@mdi/js'
 
 import { Alert } from '@/model/Alert.model'
@@ -128,6 +129,7 @@ export function getMutationIcon (name) {
     case 'clean': return mdiDelete
     case 'editRuntime': return mdiPlaylistEdit
     case 'hold': return mdiPauseCircleOutline // to distinguish from pause
+    case 'info': return mdiInformationOutline
     case 'kill': return mdiCloseCircle
     case 'log': return mdiFileDocumentOutline
     case 'message': return mdiEmail
@@ -188,6 +190,7 @@ export const primaryMutations = {
     'trigger',
     'kill',
     'log',
+    'info',
     'set'
   ]
 }
@@ -314,6 +317,13 @@ export const dummyMutations = [
     _requiresInfo: false,
     _validStates: WorkflowStateNames,
   },
+  {
+    name: 'info',
+    description: 'View task information.',
+    args: [],
+    _appliesTo: [cylcObjects.Namespace],
+    _requiresInfo: false
+  },
 ]
 
 /**
@@ -323,7 +333,7 @@ export const dummyMutations = [
  */
 const dummyMutationsPermissionsMap = Object.freeze({
   broadcast: Object.freeze(['editRuntime']),
-  read: Object.freeze(['log'])
+  read: Object.freeze(['log', 'info'])
 })
 
 /**
diff --git a/src/views/Info.vue b/src/views/Info.vue
new file mode 100644
index 000000000..c6eb8173f
--- /dev/null
+++ b/src/views/Info.vue
@@ -0,0 +1,437 @@
+<!--
+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/>.
+-->
+
+<template>
+  <div class="c-info">
+    <div v-if="task.id">
+      <!-- The task summary
+
+      * The "-40" comes from the GraphNode offset, see the GraphNode compoent.
+      * The height is "200" + "40".
+      * The "99999" is the maximum component width (the xMinYMin value prevents
+        this from taking up more horizontal space than it requires).
+      * The "8em" is the height that this SVG will be scaled to fill.
+      -->
+      <svg
+        preserveAspectRatio="xMinYMin"
+        viewBox="-40 -40 99999 200"
+        height="8em"
+      >
+        <GraphNode
+          :task="taskNode"
+          :jobs="jobNodes"
+          :jobTheme="jobTheme"
+        />
+      </svg>
+      <br />
+
+      <!-- The task information -->
+      <v-expansion-panels
+        multiple
+        variant="accordion"
+        v-model="panelExpansion"
+      >
+        <!-- The metadata -->
+        <v-expansion-panel class="metadata-panel">
+          <v-expansion-panel-title color="blue-grey-lighten-1">
+            Metadata
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <dl>
+              <dt>Title</dt>
+              <dd>{{ taskMetadata.title }}</dd>
+              <v-divider />
+              <dt>Description</dt>
+              <dd><span class="markup">{{ taskMetadata.description }}</span></dd>
+              <v-divider />
+              <dt>URL</dt>
+              <dd>
+                <!--
+                    NOTE: for security reasons, always display the full URL
+                    that the link directs to
+                -->
+                <a
+                  v-if="taskMetadata.URL"
+                  :href="taskMetadata.URL"
+                  target="_blank"
+                >
+                  {{ taskMetadata.URL }}
+                </a>
+              </dd>
+              <v-divider />
+              <template v-for="(value, key) in customMetadata" :key="key">
+                <dt>{{ key }}</dt>
+                <dd><span class="markup">{{ value }}</span></dd>
+                <v-divider />
+              </template>
+            </dl>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+
+        <!-- The prereqs -->
+        <v-expansion-panel class="prerequisites-panel">
+          <v-expansion-panel-title color="blue-grey-lighten-2">
+            Prerequisites
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <ul>
+              <li v-for="prereq in prerequisites" :key="prereq.expression">
+                <span
+                  class="prerequisite-alias condition"
+                  :class="{satisfied: prereq.satisfied}"
+                >{{ prereq.expression }}</span>
+                <ul>
+                  <li
+                    v-for="condition in prereq.conditions"
+                    :key="condition.taskAlias"
+                  >
+                    <span
+                      class="prerequisite-alias condition"
+                      :class="{satisfied: condition.satisfied}"
+                    >
+                      {{ condition.exprAlias }}
+                    </span>
+                    <span style="margin-left: 0.5em">
+                      {{ condition.taskId }}:{{ condition.reqState }}
+                    </span>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+
+        <!-- The outputs -->
+        <v-expansion-panel class="outputs-panel">
+          <v-expansion-panel-title color="blue-grey-lighten-1">
+            Outputs
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <ul>
+              <li v-for="output in outputs" :key="output.label">
+                <span
+                  class="condition"
+                  :class="{satisfied: output.satisfied}"
+                >{{ output.label }}</span>
+              </li>
+            </ul>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+
+      </v-expansion-panels>
+    </div>
+  </div>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import { getPageTitle } from '@/router/index'
+import graphqlMixin from '@/mixins/graphql'
+import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
+import SubscriptionQuery from '@/model/SubscriptionQuery.model'
+import DeltasCallback from '@/services/callbacks'
+import {
+  initialOptions,
+  useInitialOptions
+} from '@/utils/initialOptions'
+import { Tokens } from '@/utils/uid'
+import { useJobTheme } from '@/composables/localStorage'
+import GraphNode from '@/components/cylc/GraphNode.vue'
+
+// NOTE: This query is run outside of the central data store
+const QUERY = gql`
+subscription InfoViewSubscription ($workflowId: ID, $taskID: ID) {
+  deltas(workflows: [$workflowId]) {
+    added {
+      ...AddedDelta
+    }
+    updated (stripNull: true) {
+      ...UpdatedDelta
+    }
+  }
+}
+
+fragment AddedDelta on Added {
+  taskProxies(ids: [$taskID]) {
+    ...TaskProxyData
+  }
+}
+
+fragment UpdatedDelta on Updated {
+  taskProxies(ids: [$taskID]) {
+    ...TaskProxyData
+  }
+}
+
+fragment TaskProxyData on TaskProxy {
+  id
+  state
+  isHeld
+  isQueued
+  isRunahead
+
+  task {
+    ...TaskDefinitionData
+  }
+
+  jobs {
+    ...JobData
+  }
+
+  prerequisites {
+    satisfied
+    expression
+    conditions {
+      taskId
+      reqState
+      exprAlias
+      satisfied
+    }
+  }
+
+  outputs {
+    label
+    satisfied
+  }
+}
+
+fragment TaskDefinitionData on Task {
+  meanElapsedTime
+
+  meta {
+    title
+    description
+    URL
+    userDefined
+  }
+}
+
+fragment JobData on Job {
+  id
+  jobId
+  startedTime
+  state
+}
+`
+
+/** Callback for assembling the log file from the subscription */
+class InfoCallback extends DeltasCallback {
+  /**
+   * @param {Results} results
+   */
+  constructor (task, node) {
+    super()
+    this.task = task
+    this.taskNode = node
+  }
+
+  onAdded (added, store, errors) {
+    // store the task info
+    Object.assign(this.task, added.taskProxies[0])
+
+    // construct a dummy "node" like to make it look like a node in the
+    // central data store
+    this.taskNode.id = this.task.id
+    this.taskNode.tokens = new Tokens(this.task.id)
+    this.taskNode.name = this.taskNode.tokens.task
+    this.taskNode.node = this.task
+  }
+
+  onUpdated (updated, store, errors) {
+    if (updated?.taskProxies) {
+      Object.assign(this.task, updated.taskProxies[0])
+    }
+  }
+
+  onPruned (pruned) {
+  }
+}
+
+export default {
+  name: 'InfoView',
+
+  mixins: [
+    graphqlMixin,
+    subscriptionComponentMixin
+  ],
+
+  components: {
+    GraphNode,
+  },
+
+  head () {
+    return {
+      // This sets the page title.
+      title: getPageTitle('App.workflow', { name: this.workflowName })
+    }
+  },
+
+  props: {
+    initialOptions,
+  },
+
+  setup (props, { emit }) {
+    const requestedTokens = useInitialOptions('requestedTokens', { props, emit })
+    const panelExpansion = useInitialOptions('panelExpansion', { props, emit }, [0])
+    return {
+      requestedTokens,
+      jobTheme: useJobTheme(),
+      panelExpansion,
+    }
+  },
+
+  data () {
+    return {
+      // This is the task we will request metadata for.
+      // when you change these values, the old query will be automatically canceled
+      // and re-issued with the new values
+      requestedCycle: undefined,
+      requestedTask: undefined,
+
+      // This is where the task data will be put when it arrives
+      task: {},
+
+      // The task formatted as a data-store node
+      taskNode: {},
+    }
+  },
+
+  computed: {
+    // This registers the query with the WorkflowService, once registered, the
+    // WorkflowService promises to make the data defined by the query available
+    // in the store and to keep it up to date.
+    query () {
+      return new SubscriptionQuery(
+        QUERY,
+        { ...this.variables, taskID: this.requestedTokens?.relativeID },
+        `info-query-${this._uid}`,
+        [
+          new InfoCallback(this.task, this.taskNode)
+        ],
+        /* isDelta */ true,
+        /* isGlobalCallback */ false
+      )
+    },
+
+    jobNodes () {
+      // The task's jobs in the format of a data store-node
+      const ret = []
+      let tokens
+      for (const job of this.task.jobs) {
+        tokens = new Tokens(job.id)
+        ret.push({
+          id: job.id,
+          name: tokens.job,
+          tokens,
+          node: { job }
+        })
+      }
+      return ret
+    },
+
+    latestJob () {
+      // NOTE: we cannot use the latestJob function here because the job is
+      // not gaurenteed to be in the central data store (this data comes from a
+      // custom query)
+      if (!this.task.id) {
+        return undefined
+      }
+      return this.task?.jobs?.[0]
+    },
+
+    taskMetadata () {
+      // Default task metadata sections (title, description, URL)
+      return this.task?.task?.meta || {}
+    },
+
+    customMetadata () {
+      // Used-defined task metadata sections
+      return this.task?.task?.meta.userDefined || {}
+    },
+
+    prerequisites () {
+      // Task prerequsite information.
+      return this.task?.prerequisites || {}
+    },
+
+    outputs () {
+      // Task output information.
+      return this.task?.outputs || {}
+    },
+
+  },
+
+}
+</script>
+
+<style scoped lang="scss">
+  .c-info {
+    // for user-defined text where whitespace should be preserved
+    .markup {
+      white-space: pre;
+    }
+
+    // prefixes a tick or cross before the entry
+    .condition:before {
+      content: '✕';
+      padding-right: 0.5em;
+      color: rgb(255, 100, 100);
+    }
+    .condition.satisfied:before {
+      content: '✓';
+      color: rgb(75, 230, 75);
+    }
+
+    // for prerequsite task "aliases" (used in conditional expressions)
+    .prerequisite-alias {
+      font-style: italic;
+      color: rgb(100, 100, 255);
+    }
+
+    .metadata-panel {
+      dl {
+        dt dd {
+          padding-left: 1em;
+          padding-right: 1em;
+        }
+        dt {
+          font-size: 1.3em;
+          padding-top: 0.4em;
+        }
+        dd {
+          padding-bottom: 0.4em;
+        }
+      }
+    }
+
+    .prerequisites-panel {
+      li {
+        list-style: none;
+      }
+
+      ul li ul {
+        margin-left: 2em;
+      }
+    }
+
+    .outputs-panel {
+      li {
+        list-style: none;
+      }
+    }
+  }
+</style>
diff --git a/src/views/Workspace.vue b/src/views/Workspace.vue
index 2e6a60d96..b2ce3d0c0 100644
--- a/src/views/Workspace.vue
+++ b/src/views/Workspace.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div data-cy="workspace-view">
     <Toolbar
-      :views="allViews"
+      :views="workspaceViews"
       :workflow-name="workflowName"
     />
     <div
@@ -38,7 +38,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { ref } from 'vue'
 import { onBeforeRouteUpdate } from 'vue-router'
-import { allViews } from '@/views/views.js'
+import { allViews, workspaceViews } from '@/views/views.js'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionMixin from '@/mixins/subscription'
 import ViewState from '@/model/ViewState.model'
@@ -69,6 +69,7 @@ export default {
 
     return {
       allViews,
+      workspaceViews,
       lumino,
     }
   },
diff --git a/src/views/views.js b/src/views/views.js
index a3f815652..13455c528 100644
--- a/src/views/views.js
+++ b/src/views/views.js
@@ -25,6 +25,7 @@ import {
   mdiTable,
   mdiTree,
   mdiChartGantt,
+  mdiInformationOutline,
 } from '@mdi/js'
 
 // Use dynamic async components for lazy loading:
@@ -35,6 +36,7 @@ const LogView = defineAsyncComponent(() => import('@/views/Log.vue'))
 const AnalysisView = defineAsyncComponent(() => import('@/views/Analysis.vue'))
 const GanttView = defineAsyncComponent(() => import('@/views/Gantt.vue'))
 const SimpleTreeView = defineAsyncComponent(() => import('@/views/SimpleTree.vue'))
+const InfoView = defineAsyncComponent(() => import('@/views/Info.vue'))
 
 /**
  * @typedef {Object} CylcView
@@ -44,6 +46,20 @@ const SimpleTreeView = defineAsyncComponent(() => import('@/views/SimpleTree.vue
 
 export const TREE = 'Tree'
 
+/**
+ * A map of the views that can be opened in a workspace directly.
+ *
+ * Note, some views may require additional context to open.
+ */
+export const workspaceViews = new Map([
+  [TREE, { component: TreeView, icon: mdiFileTree }],
+  ['Table', { component: TableView, icon: mdiTable }],
+  ['Graph', { component: GraphView, icon: mdiGraph }],
+  ['Log', { component: LogView, icon: mdiFileDocumentMultipleOutline }],
+  ['Analysis', { component: AnalysisView, icon: mdiChartLine }],
+  ['Gantt', { component: GanttView, icon: mdiChartGantt }],
+])
+
 /**
  * A map of Vue views or components.
  *
@@ -56,16 +72,14 @@ export const TREE = 'Tree'
  * @type {Map<string, CylcView>}
  */
 export const allViews = new Map([
-  [TREE, { component: TreeView, icon: mdiFileTree }],
-  ['Table', { component: TableView, icon: mdiTable }],
-  ['Graph', { component: GraphView, icon: mdiGraph }],
-  ['Log', { component: LogView, icon: mdiFileDocumentMultipleOutline }],
-  ['Analysis', { component: AnalysisView, icon: mdiChartLine }],
-  ['Gantt', { component: GanttView, icon: mdiChartGantt }]
+  ...workspaceViews,
+  ['Info', { component: InfoView, icon: mdiInformationOutline }],
 ])
+
 // Development views that we don't want in production:
 if (import.meta.env.MODE !== 'production') {
   allViews.set('SimpleTree', { component: SimpleTreeView, icon: mdiTree })
+  workspaceViews.set('SimpleTree', { component: SimpleTreeView, icon: mdiTree })
 }
 
 export const useDefaultView = () => {

From 353ca494ee859014c1e1e732072153f016cf7518 Mon Sep 17 00:00:00 2001
From: Oliver Sanders <oliver.sanders@metoffice.gov.uk>
Date: Mon, 12 Aug 2024 11:05:33 +0100
Subject: [PATCH 02/11] metadata-view: separate view and component

---
 src/components/cylc/Info.vue | 257 +++++++++++++++++++++++++++++++
 src/views/Info.vue           | 289 ++++++-----------------------------
 2 files changed, 307 insertions(+), 239 deletions(-)
 create mode 100644 src/components/cylc/Info.vue

diff --git a/src/components/cylc/Info.vue b/src/components/cylc/Info.vue
new file mode 100644
index 000000000..54e43bf85
--- /dev/null
+++ b/src/components/cylc/Info.vue
@@ -0,0 +1,257 @@
+<!--
+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/>.
+-->
+
+<template>
+  <div class="c-info">
+    <!-- The task summary
+
+    * The "-40" comes from the GraphNode offset, see the GraphNode compoent.
+    * The height is "200" + "40".
+    * The "99999" is the maximum component width (the xMinYMin value prevents
+      this from taking up more horizontal space than it requires).
+    * The "8em" is the height that this SVG will be scaled to fill.
+    -->
+    <svg
+      preserveAspectRatio="xMinYMin"
+      viewBox="-40 -40 99999 200"
+      height="6em"
+    >
+      <GraphNode
+        :task="task"
+        :jobs="task.children"
+        :jobTheme="jobTheme"
+      />
+    </svg>
+
+    <!-- The task information -->
+    <v-expansion-panels
+      multiple
+      variant="accordion"
+      v-model="panelExpansionModel"
+    >
+      <!-- The metadata -->
+      <v-expansion-panel class="metadata-panel">
+        <v-expansion-panel-title color="blue-grey-lighten-1">
+          Metadata
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <dl>
+            <dt>Title</dt>
+            <dd>{{ taskMetadata.title }}</dd>
+            <v-divider />
+            <dt>Description</dt>
+            <dd><span class="markup">{{ taskMetadata.description }}</span></dd>
+            <v-divider />
+            <dt>URL</dt>
+            <dd>
+              <!--
+                  NOTE: for security reasons, always display the full URL
+                  that the link directs to
+              -->
+              <a
+                v-if="taskMetadata.URL"
+                :href="taskMetadata.URL"
+                target="_blank"
+              >
+                {{ taskMetadata.URL }}
+              </a>
+            </dd>
+            <v-divider />
+            <template v-for="(value, key) in customMetadata" :key="key">
+              <dt>{{ key }}</dt>
+              <dd><span class="markup">{{ value }}</span></dd>
+              <v-divider />
+            </template>
+          </dl>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
+      <!-- The prereqs -->
+      <v-expansion-panel class="prerequisites-panel">
+        <v-expansion-panel-title color="blue-grey-lighten-2">
+          Prerequisites
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <ul>
+            <li v-for="prereq in prerequisites" :key="prereq.expression">
+              <span
+                class="prerequisite-alias condition"
+                :class="{satisfied: prereq.satisfied}"
+              >{{ prereq.expression }}</span>
+              <ul>
+                <li
+                  v-for="condition in prereq.conditions"
+                  :key="condition.taskAlias"
+                >
+                  <span
+                    class="prerequisite-alias condition"
+                    :class="{satisfied: condition.satisfied}"
+                  >
+                    {{ condition.exprAlias }}
+                  </span>
+                  <span style="margin-left: 0.5em">
+                    {{ condition.taskId }}:{{ condition.reqState }}
+                  </span>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
+      <!-- The outputs -->
+      <v-expansion-panel class="outputs-panel">
+        <v-expansion-panel-title color="blue-grey-lighten-1">
+          Outputs
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <ul>
+            <li v-for="output in outputs" :key="output.label">
+              <span
+                class="condition"
+                :class="{satisfied: output.satisfied}"
+              >{{ output.label }}</span>
+            </li>
+          </ul>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
+    </v-expansion-panels>
+  </div>
+</template>
+
+<script>
+import { useJobTheme } from '@/composables/localStorage'
+import GraphNode from '@/components/cylc/GraphNode.vue'
+
+export default {
+  name: 'InfoComponent',
+
+  components: {
+    GraphNode,
+  },
+
+  props: {
+    task: {
+      required: true,
+    },
+    panelExpansion: {
+      required: false,
+      default: [0],
+    },
+  },
+
+  setup (props, { emit }) {
+    return {
+      jobTheme: useJobTheme(),
+    }
+  },
+
+  computed: {
+    panelExpansionModel: {
+      get () {
+        return this.panelExpansion
+      },
+      set (value) {
+        this.$emit('update:panelExpansion', value)
+      },
+    },
+
+    taskMetadata () {
+      // Default task metadata sections (title, description, URL)
+      return this.task?.node?.task?.meta || {}
+    },
+
+    customMetadata () {
+      // Used-defined task metadata sections
+      return this.task?.node?.task?.meta.userDefined || {}
+    },
+
+    prerequisites () {
+      // Task prerequsite information.
+      return this.task?.node?.prerequisites || {}
+    },
+
+    outputs () {
+      // Task output information.
+      return this.task?.node?.outputs || {}
+    },
+
+  },
+
+}
+</script>
+
+<style scoped lang="scss">
+  .c-info {
+    padding: 0.5em;
+
+    // for user-defined text where whitespace should be preserved
+    .markup {
+      white-space: pre;
+    }
+
+    // prefixes a tick or cross before the entry
+    .condition:before {
+      content: '✕';
+      padding-right: 0.5em;
+      color: rgb(255, 100, 100);
+    }
+    .condition.satisfied:before {
+      content: '✓';
+      color: rgb(75, 230, 75);
+    }
+
+    // for prerequsite task "aliases" (used in conditional expressions)
+    .prerequisite-alias {
+      font-style: italic;
+      color: rgb(100, 100, 255);
+    }
+
+    .metadata-panel {
+      dl {
+        dt dd {
+          padding-left: 1em;
+          padding-right: 1em;
+        }
+        dt {
+          font-size: 1.3em;
+          padding-top: 0.4em;
+        }
+        dd {
+          padding-bottom: 0.4em;
+        }
+      }
+    }
+
+    .prerequisites-panel {
+      li {
+        list-style: none;
+      }
+
+      ul li ul {
+        margin-left: 2em;
+      }
+    }
+
+    .outputs-panel {
+      li {
+        list-style: none;
+      }
+    }
+  }
+</style>
diff --git a/src/views/Info.vue b/src/views/Info.vue
index c6eb8173f..839918e3f 100644
--- a/src/views/Info.vue
+++ b/src/views/Info.vue
@@ -16,125 +16,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="c-info">
-    <div v-if="task.id">
-      <!-- The task summary
-
-      * The "-40" comes from the GraphNode offset, see the GraphNode compoent.
-      * The height is "200" + "40".
-      * The "99999" is the maximum component width (the xMinYMin value prevents
-        this from taking up more horizontal space than it requires).
-      * The "8em" is the height that this SVG will be scaled to fill.
-      -->
-      <svg
-        preserveAspectRatio="xMinYMin"
-        viewBox="-40 -40 99999 200"
-        height="8em"
-      >
-        <GraphNode
-          :task="taskNode"
-          :jobs="jobNodes"
-          :jobTheme="jobTheme"
-        />
-      </svg>
-      <br />
-
-      <!-- The task information -->
-      <v-expansion-panels
-        multiple
-        variant="accordion"
-        v-model="panelExpansion"
-      >
-        <!-- The metadata -->
-        <v-expansion-panel class="metadata-panel">
-          <v-expansion-panel-title color="blue-grey-lighten-1">
-            Metadata
-          </v-expansion-panel-title>
-          <v-expansion-panel-text>
-            <dl>
-              <dt>Title</dt>
-              <dd>{{ taskMetadata.title }}</dd>
-              <v-divider />
-              <dt>Description</dt>
-              <dd><span class="markup">{{ taskMetadata.description }}</span></dd>
-              <v-divider />
-              <dt>URL</dt>
-              <dd>
-                <!--
-                    NOTE: for security reasons, always display the full URL
-                    that the link directs to
-                -->
-                <a
-                  v-if="taskMetadata.URL"
-                  :href="taskMetadata.URL"
-                  target="_blank"
-                >
-                  {{ taskMetadata.URL }}
-                </a>
-              </dd>
-              <v-divider />
-              <template v-for="(value, key) in customMetadata" :key="key">
-                <dt>{{ key }}</dt>
-                <dd><span class="markup">{{ value }}</span></dd>
-                <v-divider />
-              </template>
-            </dl>
-          </v-expansion-panel-text>
-        </v-expansion-panel>
-
-        <!-- The prereqs -->
-        <v-expansion-panel class="prerequisites-panel">
-          <v-expansion-panel-title color="blue-grey-lighten-2">
-            Prerequisites
-          </v-expansion-panel-title>
-          <v-expansion-panel-text>
-            <ul>
-              <li v-for="prereq in prerequisites" :key="prereq.expression">
-                <span
-                  class="prerequisite-alias condition"
-                  :class="{satisfied: prereq.satisfied}"
-                >{{ prereq.expression }}</span>
-                <ul>
-                  <li
-                    v-for="condition in prereq.conditions"
-                    :key="condition.taskAlias"
-                  >
-                    <span
-                      class="prerequisite-alias condition"
-                      :class="{satisfied: condition.satisfied}"
-                    >
-                      {{ condition.exprAlias }}
-                    </span>
-                    <span style="margin-left: 0.5em">
-                      {{ condition.taskId }}:{{ condition.reqState }}
-                    </span>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-          </v-expansion-panel-text>
-        </v-expansion-panel>
-
-        <!-- The outputs -->
-        <v-expansion-panel class="outputs-panel">
-          <v-expansion-panel-title color="blue-grey-lighten-1">
-            Outputs
-          </v-expansion-panel-title>
-          <v-expansion-panel-text>
-            <ul>
-              <li v-for="output in outputs" :key="output.label">
-                <span
-                  class="condition"
-                  :class="{satisfied: output.satisfied}"
-                >{{ output.label }}</span>
-              </li>
-            </ul>
-          </v-expansion-panel-text>
-        </v-expansion-panel>
-
-      </v-expansion-panels>
-    </div>
-  </div>
+  <InfoComponent
+    v-if="taskNode.id"
+    :task="taskNode"
+    :panelExpansion="panelExpansion"
+    @update:panelExpansion="updatePanelExpansion"
+  />
 </template>
 
 <script>
@@ -149,8 +36,8 @@ import {
   useInitialOptions
 } from '@/utils/initialOptions'
 import { Tokens } from '@/utils/uid'
-import { useJobTheme } from '@/composables/localStorage'
-import GraphNode from '@/components/cylc/GraphNode.vue'
+
+import InfoComponent from '@/components/cylc/Info.vue'
 
 // NOTE: This query is run outside of the central data store
 const QUERY = gql`
@@ -228,15 +115,43 @@ fragment JobData on Job {
 }
 `
 
+function taskObjToNode (task) {
+  const tokens = new Tokens(task.id)
+  return {
+    id: task.id,
+    tokens,
+    name: tokens.task,
+    node: task,
+    children: [],
+  }
+}
+
+function jobObjToNode (job) {
+  const tokens = new Tokens(job.id)
+  return {
+    id: job.id,
+    name: tokens.job,
+    tokens,
+    node: job,
+  }
+}
+
+function rebuildTaskChildren (taskNode, taskData) {
+  taskNode.children = []
+  for (const job of taskData.jobs) {
+    taskNode.children.push(jobObjToNode(job))
+  }
+}
+
 /** Callback for assembling the log file from the subscription */
 class InfoCallback extends DeltasCallback {
   /**
    * @param {Results} results
    */
-  constructor (task, node) {
+  constructor (taskNode) {
     super()
-    this.task = task
-    this.taskNode = node
+    this.task = {}
+    this.taskNode = taskNode
   }
 
   onAdded (added, store, errors) {
@@ -245,16 +160,16 @@ class InfoCallback extends DeltasCallback {
 
     // construct a dummy "node" like to make it look like a node in the
     // central data store
-    this.taskNode.id = this.task.id
-    this.taskNode.tokens = new Tokens(this.task.id)
-    this.taskNode.name = this.taskNode.tokens.task
-    this.taskNode.node = this.task
+    Object.assign(this.taskNode, taskObjToNode(this.task))
+    rebuildTaskChildren(this.taskNode, this.task)
   }
 
   onUpdated (updated, store, errors) {
     if (updated?.taskProxies) {
       Object.assign(this.task, updated.taskProxies[0])
     }
+
+    rebuildTaskChildren(this.taskNode, this.task)
   }
 
   onPruned (pruned) {
@@ -270,7 +185,7 @@ export default {
   ],
 
   components: {
-    GraphNode,
+    InfoComponent,
   },
 
   head () {
@@ -289,7 +204,6 @@ export default {
     const panelExpansion = useInitialOptions('panelExpansion', { props, emit }, [0])
     return {
       requestedTokens,
-      jobTheme: useJobTheme(),
       panelExpansion,
     }
   },
@@ -302,9 +216,6 @@ export default {
       requestedCycle: undefined,
       requestedTask: undefined,
 
-      // This is where the task data will be put when it arrives
-      task: {},
-
       // The task formatted as a data-store node
       taskNode: {},
     }
@@ -320,118 +231,18 @@ export default {
         { ...this.variables, taskID: this.requestedTokens?.relativeID },
         `info-query-${this._uid}`,
         [
-          new InfoCallback(this.task, this.taskNode)
+          new InfoCallback(this.taskNode)
         ],
         /* isDelta */ true,
         /* isGlobalCallback */ false
       )
     },
-
-    jobNodes () {
-      // The task's jobs in the format of a data store-node
-      const ret = []
-      let tokens
-      for (const job of this.task.jobs) {
-        tokens = new Tokens(job.id)
-        ret.push({
-          id: job.id,
-          name: tokens.job,
-          tokens,
-          node: { job }
-        })
-      }
-      return ret
-    },
-
-    latestJob () {
-      // NOTE: we cannot use the latestJob function here because the job is
-      // not gaurenteed to be in the central data store (this data comes from a
-      // custom query)
-      if (!this.task.id) {
-        return undefined
-      }
-      return this.task?.jobs?.[0]
-    },
-
-    taskMetadata () {
-      // Default task metadata sections (title, description, URL)
-      return this.task?.task?.meta || {}
-    },
-
-    customMetadata () {
-      // Used-defined task metadata sections
-      return this.task?.task?.meta.userDefined || {}
-    },
-
-    prerequisites () {
-      // Task prerequsite information.
-      return this.task?.prerequisites || {}
-    },
-
-    outputs () {
-      // Task output information.
-      return this.task?.outputs || {}
-    },
-
   },
 
-}
-</script>
-
-<style scoped lang="scss">
-  .c-info {
-    // for user-defined text where whitespace should be preserved
-    .markup {
-      white-space: pre;
-    }
-
-    // prefixes a tick or cross before the entry
-    .condition:before {
-      content: '✕';
-      padding-right: 0.5em;
-      color: rgb(255, 100, 100);
-    }
-    .condition.satisfied:before {
-      content: '✓';
-      color: rgb(75, 230, 75);
-    }
-
-    // for prerequsite task "aliases" (used in conditional expressions)
-    .prerequisite-alias {
-      font-style: italic;
-      color: rgb(100, 100, 255);
-    }
-
-    .metadata-panel {
-      dl {
-        dt dd {
-          padding-left: 1em;
-          padding-right: 1em;
-        }
-        dt {
-          font-size: 1.3em;
-          padding-top: 0.4em;
-        }
-        dd {
-          padding-bottom: 0.4em;
-        }
-      }
-    }
-
-    .prerequisites-panel {
-      li {
-        list-style: none;
-      }
-
-      ul li ul {
-        margin-left: 2em;
-      }
-    }
-
-    .outputs-panel {
-      li {
-        list-style: none;
-      }
+  methods: {
+    updatePanelExpansion (value) {
+      this.panelExpansion = value
     }
   }
-</style>
+}
+</script>

From 545f0a4f71559d6ea0d34dda2127cbeea00781e8 Mon Sep 17 00:00:00 2001
From: Oliver Sanders <oliver.sanders@metoffice.gov.uk>
Date: Mon, 12 Aug 2024 14:56:42 +0100
Subject: [PATCH 03/11] metadata-view: added offline data and tests

* Added offline data.
* Added component tests to cover component display.
* Added e2e test to cover opening view, expansion state and data
  provision.
---
 cypress/component/info.cy.js         | 220 +++++++++++++++++++++++++++
 src/services/mock/json/index.cjs     |   4 +-
 src/services/mock/json/infoView.json |  81 ++++++++++
 tests/e2e/specs/info.cy.js           |  47 ++++++
 4 files changed, 351 insertions(+), 1 deletion(-)
 create mode 100644 cypress/component/info.cy.js
 create mode 100644 src/services/mock/json/infoView.json
 create mode 100644 tests/e2e/specs/info.cy.js

diff --git a/cypress/component/info.cy.js b/cypress/component/info.cy.js
new file mode 100644
index 000000000..8ff105b38
--- /dev/null
+++ b/cypress/component/info.cy.js
@@ -0,0 +1,220 @@
+/**
+ * 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/>.
+ */
+
+import InfoComponent from '@/components/cylc/Info.vue'
+import { Tokens } from '@/utils/uid'
+
+const DESCRIPTION = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
+`
+const TOKENS = new Tokens('~user/workflow//1234/foo')
+const TASK = {
+  id: TOKENS.id,
+  name: TOKENS.task,
+  tokens: TOKENS,
+  node: {
+    state: 'running',
+    task: {
+      meta: {
+        title: 'My Foo',
+        description: DESCRIPTION,
+        URL: 'https://cylc.org',
+        customMeta: {
+          answer: '42',
+          question: 'mutually exclusive',
+        }
+      }
+    },
+    prerequisites: [
+      {
+        satisfied: false,
+        expression: '(c0 & c1) | c2',
+        conditions: [
+          {
+            taskId: 'a',
+            message: 'succeeded',
+            reqState: 'succeeded',
+            exprAlias: 'c0',
+            satisfied: true,
+          },
+          {
+            taskId: 'b',
+            message: 'custom message',
+            reqState: 'custom_output',
+            exprAlias: 'c1',
+            satisfied: false,
+          },
+          {
+            taskId: 'a',
+            message: 'expired',
+            reqState: 'expired',
+            exprAlias: 'c2',
+            satisfied: false,
+          },
+        ],
+      },
+      {
+        satisfied: true,
+        expression: 'c0',
+        conditions: [
+          {
+            taskId: 'x',
+            message: 'succeeded',
+            reqState: 'succeeded',
+            exprAlias: 'c0',
+            satisfied: true,
+          },
+        ],
+      },
+    ],
+    outputs: [
+      {
+        label: 'started',
+        message: 'started',
+        satisfied: true,
+      },
+      {
+        label: 'succeeded',
+        message: 'succeeded',
+        satisfied: false,
+      },
+      {
+        label: 'failed',
+        message: 'failed',
+        satisfied: false,
+      },
+    ]
+  },
+  children: [
+    {
+      id: TOKENS.clone({ job: '01' }).id,
+      tokens: TOKENS.clone({ job: '01' }),
+      name: '01',
+      node: {
+        state: 'failed'
+      }
+    },
+    {
+      id: TOKENS.clone({ job: '02' }).id,
+      tokens: TOKENS.clone({ job: '02' }),
+      name: '02',
+      node: {
+        state: 'succeeded'
+      }
+    },
+  ],
+}
+
+describe('Info component', () => {
+  it('displays task information', () => {
+    cy.vmount(InfoComponent, {
+      props: {
+        task: TASK,
+        class: 'job_theme--default',
+        // NOTE: expand all sections by default
+        panelExpansion: [0, 1, 2],
+      }
+    })
+
+    // there should be a task icon (running)
+    cy.get('.c-graph-node .c8-task.running').should('be.visible')
+
+    // and two job icons (succeeded & failed)
+    cy.get('.c-graph-node .c-job').should('have.length', 2)
+      .get('.c-graph-node .c-job .failed').should('be.visible')
+      .get('.c-graph-node .c-job .succeeded').should('be.visible')
+
+    // the metadata panel
+    cy.get('.metadata-panel.v-expansion-panel--active').should('be.visible')
+      .contains('My Foo')
+      .get('.metadata-panel') // the description should be displayed
+      .contains(/Lorem ipsum dolor sit amet.*/)
+      .get('.metadata-panel a:first') // the URL should be an anchor
+      .should('have.attr', 'href', 'https://cylc.org')
+      .contains(/^https:\/\/cylc.org$/)
+
+    // the prerequisites panel
+    cy.get('.prerequisites-panel.v-expansion-panel--active').should('be.visible')
+      .find('.prerequisite-alias.condition')
+      .should('have.length', 6)
+      .then((selector) => {
+        expect(selector[0]).to.contain('(c0 & c1) | c2')
+        expect(selector[0].classList.toString()).to.equal('prerequisite-alias condition')
+
+        expect(selector[0]).to.contain('c0')
+        expect(selector[1].classList.toString()).to.equal('prerequisite-alias condition satisfied')
+
+        expect(selector[0]).to.contain('c1')
+        expect(selector[2].classList.toString()).to.equal('prerequisite-alias condition')
+
+        expect(selector[0]).to.contain('c2')
+        expect(selector[3].classList.toString()).to.equal('prerequisite-alias condition')
+
+        expect(selector[0]).to.contain('c0')
+        expect(selector[4].classList.toString()).to.equal('prerequisite-alias condition satisfied')
+
+        expect(selector[0]).to.contain('c0')
+        expect(selector[5].classList.toString()).to.equal('prerequisite-alias condition satisfied')
+      })
+
+    // the outputs panel
+    cy.get('.outputs-panel.v-expansion-panel--active').should('be.visible')
+      .find('.condition')
+      .should('have.length', 3)
+      .then((selector) => {
+        expect(selector[0]).to.contain('started')
+        expect(selector[0].classList.toString()).to.equal('condition satisfied')
+
+        expect(selector[1]).to.contain('succeeded')
+        expect(selector[1].classList.toString()).to.equal('condition')
+
+        expect(selector[2]).to.contain('failed')
+        expect(selector[2].classList.toString()).to.equal('condition')
+      })
+  })
+
+  it('should expand sections as intended', () => {
+    const spy = cy.spy()
+    cy.vmount(InfoComponent, {
+      props: {
+        task: TASK,
+        class: 'job_theme--default'
+      },
+      listeners: {
+        'update:panelExpansion': spy,
+      }
+    }).as('wrapper')
+
+    // ONLY the metadata panel should be expanded by default
+    cy.get('.v-expansion-panel--active')
+      .should('have.length', 1)
+      .should('have.class', 'metadata-panel')
+
+    // the update:panelExpansion event should be emitted when a panel is
+    // expanded/collapsed
+    cy.get('.prerequisites-panel')
+      .find('button')
+      .should('be.visible')
+      .click({ force: true })
+      .get('@wrapper').then(({ wrapper }) => {
+        expect(
+          wrapper.emitted('update:panelExpansion')[0][0]
+        ).to.deep.equal([0, 1])
+      })
+  })
+})
diff --git a/src/services/mock/json/index.cjs b/src/services/mock/json/index.cjs
index 522885114..8f6a3f766 100644
--- a/src/services/mock/json/index.cjs
+++ b/src/services/mock/json/index.cjs
@@ -24,6 +24,7 @@ const { LogData } = require('./logData.cjs')
 const { LogFiles } = require('./logFiles.cjs')
 const analysisQuery = require('./analysisQuery.json')
 const ganttQuery = require('./ganttQuery.json')
+const InfoViewSubscription = require('./infoView.json')
 
 const workflows = [workflowOne, ...workflowsMulti]
 const analysisTaskQuery = analysisQuery.taskQuery
@@ -43,5 +44,6 @@ module.exports = {
   analysisTaskQuery,
   analysisJobQuery,
   analysisQuery,
-  ganttQuery
+  ganttQuery,
+  InfoViewSubscription
 }
diff --git a/src/services/mock/json/infoView.json b/src/services/mock/json/infoView.json
new file mode 100644
index 000000000..45c2c74c0
--- /dev/null
+++ b/src/services/mock/json/infoView.json
@@ -0,0 +1,81 @@
+{
+  "deltas": {
+    "id": "~user/one",
+    "added": {
+      "taskProxies": [
+        {
+          "id": "~user/one//20000102T0000Z/failed",
+          "state": "failed",
+          "isHeld": false,
+          "isQueued": false,
+          "isRunahead": false,
+
+          "task": {
+            "meanElapsedTime": "10",
+            "meta": {
+              "title": "Failed Task",
+              "description": "A task that always fails!",
+              "URL": "https://cylc.org",
+              "userDefined": {
+                "my custom field": "My custom value!"
+              }
+            }
+          },
+
+          "jobs": [
+            {
+              "id": "~user/one//20000102T0000Z/failed/01",
+              "jobId": "1234",
+              "startedTime": 0,
+              "state": "failed"
+            }
+          ],
+
+          "prerequisites": [
+            {
+              "satisfied": true,
+              "expression": "c0 & c1",
+              "conditions": [
+                {
+                  "taskId": "20000102T0000Z/succeeded",
+                  "reqState": "succeeded",
+                  "expreAlias": "c0",
+                  "satisfied": true
+                },
+                {
+                  "taskId": "20000102T0000Z/eventually_succeeded",
+                  "reqState": "succeeded",
+                  "expreAlias": "c1",
+                  "satisfied": true
+                }
+              ]
+            }
+          ],
+
+          "outputs": [
+            {
+              "label": "submitted",
+              "satisfied": true
+            },
+            {
+              "label": "started",
+              "satisfied": true
+            },
+            {
+              "label": "succeeded",
+              "satisfied": false
+            },
+            {
+              "label": "failed",
+              "satisfied": true
+            },
+            {
+              "label": "expired",
+              "satisfied": false
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
diff --git a/tests/e2e/specs/info.cy.js b/tests/e2e/specs/info.cy.js
new file mode 100644
index 000000000..29a637869
--- /dev/null
+++ b/tests/e2e/specs/info.cy.js
@@ -0,0 +1,47 @@
+/**
+ * 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/>.
+ */
+
+describe('Info View', () => {
+  it('works', () => {
+    // test opening the "Info View" from a task in the "Tree View"
+    cy.visit('/#/workspace/one')
+      // click on task 20000102T0000Z/failed
+      .get('.c-treeitem .c-treeitem .c-treeitem:first')
+      .find('.c-task')
+      .click({ force: true })
+
+      // from the menu select the "Info" psudo-mutation
+      .get('.v-list > :nth-child(6)')
+      .contains('Info')
+      .click({ force: true })
+
+      // the info view should open
+      .get('.c-info').should('be.visible')
+
+      // the metadata panel should be expanded by default
+      .find('.v-expansion-panel--active')
+      .should('have.length', 1)
+      .should('have.class', 'metadata-panel')
+
+      // other panels should expand when clicked
+      .get('.c-info .v-expansion-panel:nth-child(2)')
+      .find('button')
+      .click({ force: true })
+      .get('.v-expansion-panel--active')
+      .should('have.length', 2)
+  })
+})

From 095fe7e6692a0bfca7a2cd8129f12034d4ffe2c3 Mon Sep 17 00:00:00 2001
From: Oliver Sanders <oliver.sanders@metoffice.gov.uk>
Date: Wed, 14 Aug 2024 11:15:27 +0100
Subject: [PATCH 04/11] metadata-view: improve coverage

---
 cypress/component/info.cy.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/cypress/component/info.cy.js b/cypress/component/info.cy.js
index 8ff105b38..b09afc183 100644
--- a/cypress/component/info.cy.js
+++ b/cypress/component/info.cy.js
@@ -217,4 +217,34 @@ describe('Info component', () => {
         ).to.deep.equal([0, 1])
       })
   })
+
+  it('should work for a task with no data', () => {
+    // ensure the component can be mounted without errors for empty states
+    // i.e. no metadata, prerequisites, outputs or jobs
+    const tokens = new Tokens('~user/workflow//1234/foo')
+    const task = {
+      id: tokens.id,
+      name: tokens.task,
+      tokens,
+      node: {
+        task: {
+          meta: {
+            customMeta: {}
+          }
+        },
+        prerequisites: [],
+        outputs: [],
+      },
+      children: [],
+    }
+
+    cy.vmount(InfoComponent, {
+      props: {
+        task,
+        class: 'job_theme--default',
+        // NOTE: expand all sections by default
+        panelExpansion: [0, 1, 2],
+      }
+    })
+  })
 })

From 6a1506e26bde356d5e16b7b36e210d9f346e0e83 Mon Sep 17 00:00:00 2001
From: Oliver Sanders <oliver.sanders@metoffice.gov.uk>
Date: Wed, 14 Aug 2024 14:28:28 +0100
Subject: [PATCH 05/11] metadata-view: prevent horizontal scrolling

---
 src/components/cylc/Info.vue | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/cylc/Info.vue b/src/components/cylc/Info.vue
index 54e43bf85..1020546f2 100644
--- a/src/components/cylc/Info.vue
+++ b/src/components/cylc/Info.vue
@@ -21,21 +21,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     * The "-40" comes from the GraphNode offset, see the GraphNode compoent.
     * The height is "200" + "40".
-    * The "99999" is the maximum component width (the xMinYMin value prevents
-      this from taking up more horizontal space than it requires).
+    * The "99999" is the maximum component width (because we don't know
+      how wide it will be until we render it).
+    * The "overflow-x: hidden" prevents this 99999 width from causing
+      horizontal scrolling.
     * The "8em" is the height that this SVG will be scaled to fill.
     -->
-    <svg
-      preserveAspectRatio="xMinYMin"
-      viewBox="-40 -40 99999 200"
-      height="6em"
-    >
-      <GraphNode
-        :task="task"
-        :jobs="task.children"
-        :jobTheme="jobTheme"
-      />
-    </svg>
+    <div style="overflow-x: hidden;">
+      <svg
+        preserveAspectRatio="xMinYMin"
+        viewBox="-40 -40 99999 200"
+        height="6em"
+      >
+        <GraphNode
+          :task="task"
+          :jobs="task.children"
+          :jobTheme="jobTheme"
+        />
+      </svg>
+    </div>
 
     <!-- The task information -->
     <v-expansion-panels

From 49c410ff31e78134c32c5b43d9eafed4add4b120 Mon Sep 17 00:00:00 2001
From: Oliver Sanders <oliver.sanders@metoffice.gov.uk>
Date: Thu, 15 Aug 2024 14:41:21 +0100
Subject: [PATCH 06/11] metadata-view: strip "c" character from prereq
 expressions

* Remove the "c" prefix from prerequisite expressions and task aliases.
* This matches `cylc show`.
---
 cypress/component/info.cy.js | 12 ++++++------
 src/components/cylc/Info.vue |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/cypress/component/info.cy.js b/cypress/component/info.cy.js
index b09afc183..f9cfad5f7 100644
--- a/cypress/component/info.cy.js
+++ b/cypress/component/info.cy.js
@@ -153,22 +153,22 @@ describe('Info component', () => {
       .find('.prerequisite-alias.condition')
       .should('have.length', 6)
       .then((selector) => {
-        expect(selector[0]).to.contain('(c0 & c1) | c2')
+        expect(selector[0]).to.contain('(0 & 1) | 2')
         expect(selector[0].classList.toString()).to.equal('prerequisite-alias condition')
 
-        expect(selector[0]).to.contain('c0')
+        expect(selector[0]).to.contain('0')
         expect(selector[1].classList.toString()).to.equal('prerequisite-alias condition satisfied')
 
-        expect(selector[0]).to.contain('c1')
+        expect(selector[0]).to.contain('1')
         expect(selector[2].classList.toString()).to.equal('prerequisite-alias condition')
 
-        expect(selector[0]).to.contain('c2')
+        expect(selector[0]).to.contain('2')
         expect(selector[3].classList.toString()).to.equal('prerequisite-alias condition')
 
-        expect(selector[0]).to.contain('c0')
+        expect(selector[0]).to.contain('0')
         expect(selector[4].classList.toString()).to.equal('prerequisite-alias condition satisfied')
 
-        expect(selector[0]).to.contain('c0')
+        expect(selector[0]).to.contain('0')
         expect(selector[5].classList.toString()).to.equal('prerequisite-alias condition satisfied')
       })
 
diff --git a/src/components/cylc/Info.vue b/src/components/cylc/Info.vue
index 1020546f2..ac3434f14 100644
--- a/src/components/cylc/Info.vue
+++ b/src/components/cylc/Info.vue
@@ -95,7 +95,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <span
                 class="prerequisite-alias condition"
                 :class="{satisfied: prereq.satisfied}"
-              >{{ prereq.expression }}</span>
+              >{{ prereq.expression.replace(/c/g, '') }}</span>
               <ul>
                 <li
                   v-for="condition in prereq.conditions"
@@ -105,7 +105,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     class="prerequisite-alias condition"
                     :class="{satisfied: condition.satisfied}"
                   >
-                    {{ condition.exprAlias }}
+                    {{ condition.exprAlias.replace(/c/, '') }}
                   </span>
                   <span style="margin-left: 0.5em">
                     {{ condition.taskId }}:{{ condition.reqState }}

From ca34d72553b01c24a0e9feac7e7a86e61f94eb20 Mon Sep 17 00:00:00 2001
From: Oliver Sanders <oliver.sanders@metoffice.gov.uk>
Date: Thu, 15 Aug 2024 14:45:40 +0100
Subject: [PATCH 07/11] metadata-view: fix unknown node state

---
 src/views/Info.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/views/Info.vue b/src/views/Info.vue
index 839918e3f..21ed8a9ed 100644
--- a/src/views/Info.vue
+++ b/src/views/Info.vue
@@ -122,6 +122,7 @@ function taskObjToNode (task) {
     tokens,
     name: tokens.task,
     node: task,
+    type: 'task',
     children: [],
   }
 }
@@ -133,6 +134,7 @@ function jobObjToNode (job) {
     name: tokens.job,
     tokens,
     node: job,
+    type: 'job',
   }
 }
 

From e7955e19c22dba20d9c4538dad8f7c3c5bf71d72 Mon Sep 17 00:00:00 2001
From: Oliver Sanders <oliver.sanders@metoffice.gov.uk>
Date: Fri, 16 Aug 2024 10:06:08 +0100
Subject: [PATCH 08/11] Apply suggestions from code review

Co-authored-by: Tim Pillinger <26465611+wxtim@users.noreply.github.com>
Co-authored-by: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
---
 src/components/cylc/Info.vue         | 24 ++++++++++++++++--------
 src/services/mock/json/infoView.json |  6 +++---
 src/views/Info.vue                   |  7 ++++---
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/cylc/Info.vue b/src/components/cylc/Info.vue
index ac3434f14..9d22716cd 100644
--- a/src/components/cylc/Info.vue
+++ b/src/components/cylc/Info.vue
@@ -106,9 +106,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :class="{satisfied: condition.satisfied}"
                   >
                     {{ condition.exprAlias.replace(/c/, '') }}
-                  </span>
-                  <span style="margin-left: 0.5em">
-                    {{ condition.taskId }}:{{ condition.reqState }}
+
+                    <span style="margin-left: 0.5em; color: rgb(0,0,0)">
+                      {{ condition.taskId }}:{{ condition.reqState }}
+                    </span>
                   </span>
                 </li>
               </ul>
@@ -206,18 +207,25 @@ export default {
 
     // for user-defined text where whitespace should be preserved
     .markup {
-      white-space: pre;
+      white-space: pre-wrap;
+    }
+
+    // change the appearance of satisfied/unsatisfied conditions
+    .condition {
+      opacity: 0.6;
+    }
+    .condition.satisfied {
+      opacity: 1;
     }
 
     // prefixes a tick or cross before the entry
     .condition:before {
-      content: '✕';
+      content: '\25CB';
       padding-right: 0.5em;
-      color: rgb(255, 100, 100);
+      color: rgb(0, 0, 0);
     }
     .condition.satisfied:before {
-      content: '✓';
-      color: rgb(75, 230, 75);
+      content: '\25CF';
     }
 
     // for prerequsite task "aliases" (used in conditional expressions)
diff --git a/src/services/mock/json/infoView.json b/src/services/mock/json/infoView.json
index 45c2c74c0..6e3d86056 100644
--- a/src/services/mock/json/infoView.json
+++ b/src/services/mock/json/infoView.json
@@ -26,7 +26,7 @@
             {
               "id": "~user/one//20000102T0000Z/failed/01",
               "jobId": "1234",
-              "startedTime": 0,
+              "startedTime": "0",
               "state": "failed"
             }
           ],
@@ -39,13 +39,13 @@
                 {
                   "taskId": "20000102T0000Z/succeeded",
                   "reqState": "succeeded",
-                  "expreAlias": "c0",
+                  "exprAlias": "c0",
                   "satisfied": true
                 },
                 {
                   "taskId": "20000102T0000Z/eventually_succeeded",
                   "reqState": "succeeded",
-                  "expreAlias": "c1",
+                  "exprAlias": "c1",
                   "satisfied": true
                 }
               ]
diff --git a/src/views/Info.vue b/src/views/Info.vue
index 21ed8a9ed..d3bcd1568 100644
--- a/src/views/Info.vue
+++ b/src/views/Info.vue
@@ -150,9 +150,9 @@ class InfoCallback extends DeltasCallback {
   /**
    * @param {Results} results
    */
-  constructor (taskNode) {
+  constructor (task, taskNode) {
     super()
-    this.task = {}
+    this.task = task
     this.taskNode = taskNode
   }
 
@@ -219,6 +219,7 @@ export default {
       requestedTask: undefined,
 
       // The task formatted as a data-store node
+      task: {},
       taskNode: {},
     }
   },
@@ -233,7 +234,7 @@ export default {
         { ...this.variables, taskID: this.requestedTokens?.relativeID },
         `info-query-${this._uid}`,
         [
-          new InfoCallback(this.taskNode)
+          new InfoCallback(this.task, this.taskNode)
         ],
         /* isDelta */ true,
         /* isGlobalCallback */ false

From 18760a60f70976150223fdf1ba7b22e40e44f02e Mon Sep 17 00:00:00 2001
From: Oliver Sanders <oliver.sanders@metoffice.gov.uk>
Date: Fri, 11 Oct 2024 11:35:13 +0100
Subject: [PATCH 09/11] info: add completion expression

---
 cypress/component/info.cy.js | 38 +++++++++++++++++--
 src/components/cylc/Info.vue | 54 +++++++++++++++++++++++++--
 src/utils/outputs.js         | 71 ++++++++++++++++++++++++++++++++++++
 src/views/Info.vue           |  4 ++
 4 files changed, 160 insertions(+), 7 deletions(-)
 create mode 100644 src/utils/outputs.js

diff --git a/cypress/component/info.cy.js b/cypress/component/info.cy.js
index f9cfad5f7..132cecb6d 100644
--- a/cypress/component/info.cy.js
+++ b/cypress/component/info.cy.js
@@ -98,7 +98,15 @@ const TASK = {
         message: 'failed',
         satisfied: false,
       },
-    ]
+      {
+        label: 'x',
+        message: 'xxx',
+        satisfied: true,
+      }
+    ],
+    runtime: {
+      completion: '(succeeded and x) or failed'
+    }
   },
   children: [
     {
@@ -127,7 +135,7 @@ describe('Info component', () => {
         task: TASK,
         class: 'job_theme--default',
         // NOTE: expand all sections by default
-        panelExpansion: [0, 1, 2],
+        panelExpansion: [0, 1, 2, 3],
       }
     })
 
@@ -175,7 +183,7 @@ describe('Info component', () => {
     // the outputs panel
     cy.get('.outputs-panel.v-expansion-panel--active').should('be.visible')
       .find('.condition')
-      .should('have.length', 3)
+      .should('have.length', 4)
       .then((selector) => {
         expect(selector[0]).to.contain('started')
         expect(selector[0].classList.toString()).to.equal('condition satisfied')
@@ -185,6 +193,30 @@ describe('Info component', () => {
 
         expect(selector[2]).to.contain('failed')
         expect(selector[2].classList.toString()).to.equal('condition')
+
+        expect(selector[3]).to.contain('x')
+        expect(selector[3].classList.toString()).to.equal('condition satisfied')
+      })
+
+    // the completion panel
+    cy.get('.completion-panel.v-expansion-panel--active').should('be.visible')
+      .find('.condition')
+      .should('have.length', 5)
+      .then((selector) => {
+        expect(selector[0]).to.contain('(')
+        expect(selector[0].classList.toString()).to.equal('condition blank')
+
+        expect(selector[1]).to.contain('succeeded')
+        expect(selector[1].classList.toString()).to.equal('condition')
+
+        expect(selector[2]).to.contain('and x')
+        expect(selector[2].classList.toString()).to.equal('condition satisfied')
+
+        expect(selector[3]).to.contain(')')
+        expect(selector[3].classList.toString()).to.equal('condition blank')
+
+        expect(selector[4]).to.contain('or failed')
+        expect(selector[4].classList.toString()).to.equal('condition')
       })
   })
 
diff --git a/src/components/cylc/Info.vue b/src/components/cylc/Info.vue
index 9d22716cd..04581ec43 100644
--- a/src/components/cylc/Info.vue
+++ b/src/components/cylc/Info.vue
@@ -135,6 +135,32 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </v-expansion-panel-text>
       </v-expansion-panel>
 
+      <!-- The completion -->
+      <v-expansion-panel class="completion-panel">
+        <v-expansion-panel-title color="blue-grey-lighten-2">
+          Completion
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <!-- TODO: We don't have an "is complete" field yet so we cannot
+            display an aggregate status-->
+          <ul>
+            <li
+              v-for="([complete, indent, line], index) in formatCompletion(completion, outputs)"
+              :key="index"
+            >
+              <span
+                class="condition"
+                :class="{satisfied: complete, blank: (complete === null)}"
+              >
+                <!-- Indent the line as required -->
+                <span :style="`margin-left: ${1 * indent}em;`"></span>
+                {{ line }}
+              </span>
+            </li>
+          </ul>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
     </v-expansion-panels>
   </div>
 </template>
@@ -142,6 +168,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { useJobTheme } from '@/composables/localStorage'
 import GraphNode from '@/components/cylc/GraphNode.vue'
+import { formatCompletion } from '@/utils/outputs'
 
 export default {
   name: 'InfoComponent',
@@ -196,8 +223,17 @@ export default {
       return this.task?.node?.outputs || {}
     },
 
+    completion () {
+      // Task output completion expression stuff.
+      return this.task?.node?.runtime.completion
+    }
+
   },
 
+  methods: {
+    formatCompletion,
+  }
+
 }
 </script>
 
@@ -214,18 +250,22 @@ export default {
     .condition {
       opacity: 0.6;
     }
-    .condition.satisfied {
+    .condition.satisfied, .condition.blank {
       opacity: 1;
     }
 
     // prefixes a tick or cross before the entry
     .condition:before {
-      content: '\25CB';
-      padding-right: 0.5em;
+      display: inline-block;
+      content: '\25CB'; /* empty circle */
+      width: 1.5em;
       color: rgb(0, 0, 0);
     }
     .condition.satisfied:before {
-      content: '\25CF';
+      content: '\25CF'; /* filled circle */
+    }
+    .condition.blank:before {
+      content: ''; /* blank */
     }
 
     // for prerequsite task "aliases" (used in conditional expressions)
@@ -265,5 +305,11 @@ export default {
         list-style: none;
       }
     }
+
+    .completion-panel {
+      li {
+        list-style: none;
+      }
+    }
   }
 </style>
diff --git a/src/utils/outputs.js b/src/utils/outputs.js
new file mode 100644
index 000000000..deb0b1173
--- /dev/null
+++ b/src/utils/outputs.js
@@ -0,0 +1,71 @@
+/**
+ * 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/>.
+ */
+
+/** Functionality relating to task output formatting. **/
+
+/** Format a completion expression for display.
+ *
+ * @param {str} completion - The task's completion expression.
+ * @param {Array} outputs - The task's outputs as obtained from GraphQL as an
+ * array of objects with "label" and "satisfied" attributes.
+ *
+ * @returns {Array} - [isSatisfied, indentLevel, text]
+ **/
+
+export function formatCompletion (completion, outputs) {
+  // the array to return
+  const lines = []
+  // indent level of the expression
+  let indent = 0
+  // text yet to be added to the return result
+  let buffer = ''
+
+  // break the completion expression down into parts and iterate over them
+  for (let part of completion.split(/(and|or|\(|\))/)) {
+    part = part.trim()
+
+    if (!part) {
+      continue
+    }
+
+    if (part === '(') {
+      // open bracket
+      lines.push([null, indent, `${buffer}(`])
+      buffer = ''
+      indent = indent + 1
+    } else if (part === ')') {
+      // close bracket
+      indent = indent - 1
+      lines.push([null, indent, `${buffer})`])
+      buffer = ''
+    } else if (part === 'and' || part === 'or') {
+      // local operator
+      buffer = `${part} `
+    } else {
+      // Cylc output -> look it up in the outputs Array
+      for (const output of outputs) {
+        if (output.label === part) {
+          lines.push([output.satisfied, indent, `${buffer}${part}`])
+          break
+        }
+      }
+      buffer = ''
+    }
+  }
+
+  return lines
+}
diff --git a/src/views/Info.vue b/src/views/Info.vue
index d3bcd1568..3b60bfa5e 100644
--- a/src/views/Info.vue
+++ b/src/views/Info.vue
@@ -94,6 +94,10 @@ fragment TaskProxyData on TaskProxy {
     label
     satisfied
   }
+
+  runtime {
+    completion
+  }
 }
 
 fragment TaskDefinitionData on Task {

From 9b339295ce09187c55f2434c8cfdba0692af9261 Mon Sep 17 00:00:00 2001
From: Oliver Sanders <oliver.sanders@metoffice.gov.uk>
Date: Wed, 11 Dec 2024 11:06:30 +0000
Subject: [PATCH 10/11] info: prevent info view being selected as the default
 view

---
 src/views/UserProfile.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/views/UserProfile.vue b/src/views/UserProfile.vue
index 3d34de22d..c21f896ea 100644
--- a/src/views/UserProfile.vue
+++ b/src/views/UserProfile.vue
@@ -195,7 +195,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </v-col>
                 <v-select
                   v-model="defaultView"
-                  :items="Array.from($options.allViews.keys())"
+                  :items="defaultViews"
                   :prepend-inner-icon="$options.allViews.get(defaultView).icon"
                   data-cy="select-default-view"
                   :menu-props="{ 'data-cy': 'select-default-view-menu' }"
@@ -247,6 +247,16 @@ export default {
 
   computed: {
     ...mapState('user', ['user']),
+
+    defaultViews () {
+      const views = Array.from(this.$options.allViews.keys())
+
+      // filter out the "Info" view as this cannot presently be opened on the
+      // workflow itself, only jobs inside of the workflow
+      // https://github.com/cylc/cylc-ui/issues/1898 will resolve this
+      views.pop('Info')
+      return views
+    }
   },
 
   methods: {

From 7a451e6c246fcaa37d6c95f3c6962f3709e07ffd Mon Sep 17 00:00:00 2001
From: Oliver Sanders <oliver.sanders@metoffice.gov.uk>
Date: Wed, 11 Dec 2024 11:19:22 +0000
Subject: [PATCH 11/11] Apply suggestions from code review

Co-authored-by: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
---
 cypress/component/info.cy.js         | 24 ++++++++++++------------
 src/services/mock/json/infoView.json |  6 +++++-
 tests/e2e/specs/info.cy.js           |  7 +++----
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/cypress/component/info.cy.js b/cypress/component/info.cy.js
index 132cecb6d..3bd79dc37 100644
--- a/cypress/component/info.cy.js
+++ b/cypress/component/info.cy.js
@@ -161,23 +161,23 @@ describe('Info component', () => {
       .find('.prerequisite-alias.condition')
       .should('have.length', 6)
       .then((selector) => {
-        expect(selector[0]).to.contain('(0 & 1) | 2')
-        expect(selector[0].classList.toString()).to.equal('prerequisite-alias condition')
+        expect(selector[0].innerText).to.equal('(0 & 1) | 2')
+        expect(selector[0]).to.not.have.class('satisfied')
 
-        expect(selector[0]).to.contain('0')
-        expect(selector[1].classList.toString()).to.equal('prerequisite-alias condition satisfied')
+        expect(selector[1].innerText).to.equal('0 a:succeeded')
+        expect(selector[1]).to.have.class('satisfied')
 
-        expect(selector[0]).to.contain('1')
-        expect(selector[2].classList.toString()).to.equal('prerequisite-alias condition')
+        expect(selector[2].innerText).to.equal('1 b:custom_output')
+        expect(selector[2]).to.not.have.class('satisfied')
 
-        expect(selector[0]).to.contain('2')
-        expect(selector[3].classList.toString()).to.equal('prerequisite-alias condition')
+        expect(selector[3].innerText).to.equal('2 a:expired')
+        expect(selector[3]).to.not.have.class('satisfied')
 
-        expect(selector[0]).to.contain('0')
-        expect(selector[4].classList.toString()).to.equal('prerequisite-alias condition satisfied')
+        expect(selector[4].innerText).to.equal('0')
+        expect(selector[4]).to.have.class('satisfied')
 
-        expect(selector[0]).to.contain('0')
-        expect(selector[5].classList.toString()).to.equal('prerequisite-alias condition satisfied')
+        expect(selector[5].innerText).to.equal('0 x:succeeded')
+        expect(selector[5]).to.have.class('satisfied')
       })
 
     // the outputs panel
diff --git a/src/services/mock/json/infoView.json b/src/services/mock/json/infoView.json
index 6e3d86056..05b7d1bfa 100644
--- a/src/services/mock/json/infoView.json
+++ b/src/services/mock/json/infoView.json
@@ -73,7 +73,11 @@
               "label": "expired",
               "satisfied": false
             }
-          ]
+          ],
+
+          "runtime": {
+            "completion": "succeeded"
+          }
         }
       ]
     }
diff --git a/tests/e2e/specs/info.cy.js b/tests/e2e/specs/info.cy.js
index 29a637869..e5a6204e5 100644
--- a/tests/e2e/specs/info.cy.js
+++ b/tests/e2e/specs/info.cy.js
@@ -19,13 +19,12 @@ describe('Info View', () => {
   it('works', () => {
     // test opening the "Info View" from a task in the "Tree View"
     cy.visit('/#/workspace/one')
-      // click on task 20000102T0000Z/failed
-      .get('.c-treeitem .c-treeitem .c-treeitem:first')
-      .find('.c-task')
+      // click on task
+      .get('.node-data-task [data-c-interactive]:first')
       .click({ force: true })
 
       // from the menu select the "Info" psudo-mutation
-      .get('.v-list > :nth-child(6)')
+      .get('.v-list-item')
       .contains('Info')
       .click({ force: true })