Maintain state of task progress animation when workspace tabs are hidden & shown

Author: MetRonnie

cypress/component/cylc-icons.cy.js

@@ -103,13 +103,15 @@ describe('Task component', () => {
         .should('have.css', 'animation-duration', `${MEAN_ELAPSED_TIME}s`)
         // the offset should be set to the "percent" of the expected job duration
         .should('have.css', 'animation-delay')
-        .and('match', /([\d.]+)s/) // NOTE the delay should be negative
+        .and('match', /([\d.-]+)s/)
         .then((number) => {
-          // convert the duration string into a number that we can test
-          cy.wrap(Number(number.match(/([\d.]+)s/)[1]))
+          expect(parseInt(number)).to.be.closeTo(
             // ensure this number is ±5 from the expected value
             // (give it a little bit of margin to allow for timing error)
-            .should('closeTo', MEAN_ELAPSED_TIME * (percent / 100), 5)
+            // NOTE the delay should be negative
+            -MEAN_ELAPSED_TIME * (percent / 100),
+            5
+          )
         })
     }
   })

cypress/component/utils/task.js

@@ -19,15 +19,13 @@
 export const MEAN_ELAPSED_TIME = 10000
 
 export function getStartTime (percent) {
-  return String(
-    new Date(
-      // the current time in ms
-      Date.now() -
-      // minus the elapsed time in ms
-      (
-        (MEAN_ELAPSED_TIME * 1000) *
-        (percent / 100)
-      )
-    ).toISOString()
-  )
+  return new Date(
+    // the current time in ms
+    Date.now() -
+    // minus the elapsed time in ms
+    (
+      (MEAN_ELAPSED_TIME * 1000) *
+      (percent / 100)
+    )
+  ).toISOString()
 }

src/components/cylc/SVGTask.vue

@@ -69,7 +69,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           r="16"
           stroke-width="50"
           stroke-dasharray="157"
-          :style="getRunningStyle()"
+          :style="runningStyle"
         />
       </g>
       <!-- dot
@@ -247,6 +247,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script setup>
+import { computed, inject, ref } from 'vue'
 import TaskState from '@/model/TaskState.model'
 
 const props = defineProps({
@@ -268,26 +269,30 @@ const props = defineProps({
   },
 })
 
-function getRunningStyle () {
+/**
+ * @type {import('vue').Ref<number>}
+ * @see @/components/cylc/workspace/Widget.vue
+ */
+const animResetTime = inject('animResetTime', () => ref(0), true)
+
+const runningStyle = computed(() => {
   if (
     props.task.state === TaskState.RUNNING.name &&
     props.startTime &&
     props.task.task?.meanElapsedTime
   ) {
-    // job start time in ms (UTC)
-    const startTime = Date.parse(props.startTime)
-    // current time in ms (UTC)
-    const now = Date.now()
+    // current time in ms (UTC); updates whenever widget is unhidden
+    const now = Math.max(Date.now(), animResetTime.value)
     // job elapsed time in ms
-    const elapsedTime = now - startTime
+    const elapsedTime = now - Date.parse(props.startTime)
     return {
       animationDuration: `${props.task.task.meanElapsedTime}s`,
       animationDelay: `-${elapsedTime}ms`,
       animationFillMode: 'forwards',
     }
   }
   return {}
-}
+})
 
 /**
  * Returns the translation required to position the ".modifier" nicely in

src/components/cylc/workflow/Lumino.vue renamed to src/components/cylc/workspace/Lumino.vue

@@ -18,19 +18,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div ref="mainDiv" class="main pa-2 fill-height">
     <!-- Lumino box panel gets inserted here -->
   </div>
-  <template
+  <WidgetComponent
     v-for="[id, { name }] in views"
     :key="id"
+    :id="id"
   >
-    <Teleport :to="`#${id}`">
-      <component
-        :is="props.allViews.get(name).component"
-        :workflow-name="workflowName"
-        v-model:initial-options="views.get(id).initialOptions"
-        class="h-100"
-      />
-    </Teleport>
-  </template>
+    <component
+      :is="props.allViews.get(name).component"
+      :workflow-name="workflowName"
+      v-model:initial-options="views.get(id).initialOptions"
+      class="h-100"
+    />
+  </WidgetComponent>
 </template>
 
 <script setup>
@@ -42,7 +41,8 @@ import {
 } from 'vue'
 import { useStore } from 'vuex'
 import { startCase, uniqueId } from 'lodash'
-import LuminoWidget from '@/components/cylc/workflow/lumino-widget'
+import WidgetComponent from '@/components/cylc/workspace/Widget.vue'
+import LuminoWidget from '@/components/cylc/workspace/lumino-widget'
 import { BoxPanel, DockPanel, Widget } from '@lumino/widgets'
 import { when } from '@/utils'
 import { useDefaultView } from '@/views/views'

src/components/cylc/workflow/Toolbar.vue renamed to src/components/cylc/workspace/Toolbar.vue

@@ -0,0 +1,53 @@
+<!--
+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/>.
+-->
+
+<!-- Component which is displayed in a lumino tab. -->
+
+<template>
+  <!-- Teleport to the div for the widget (which gets created & attached to dock panel separately) -->
+  <Teleport :to="`#${id}`">
+    <slot />
+  </Teleport>
+</template>
+
+<script setup>
+import { provide, readonly, ref } from 'vue'
+import { eventBus } from '@/services/eventBus'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+})
+
+/**
+ * Ref used to indicate to children that the widget has become unhidden, and
+ * that any task progress CSS animations should be given a new delay value
+ * to maintain their state.
+ *
+ * This is because when an element goes from display:none to visible, CSS
+ * animations start from scratch.
+ * @see https://stackoverflow.com/a/37671302/3217306
+ */
+const animResetTime = ref(Date.now())
+provide('animResetTime', readonly(animResetTime))
+
+eventBus.on(`lumino:show:${props.id}`, () => {
+  animResetTime.value = Date.now()
+})
+</script>

src/components/cylc/workspace/Widget.vue

@@ -81,4 +81,10 @@ export default class LuminoWidget extends Widget {
     eventBus.emit('lumino:deleted', this.id)
     super.onCloseRequest(msg)
   }
+
+  onAfterShow (msg) {
+    // Emit an event so that the Vue component knows that this widget is visible again
+    eventBus.emit(`lumino:show:${this.id}`)
+    super.onAfterShow(msg)
+  }
 }

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

@@ -43,8 +43,8 @@ import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionMixin from '@/mixins/subscription'
 import ViewState from '@/model/ViewState.model'
-import Lumino from '@/components/cylc/workflow/Lumino.vue'
-import Toolbar from '@/components/cylc/workflow/Toolbar.vue'
+import Lumino from '@/components/cylc/workspace/Lumino.vue'
+import Toolbar from '@/components/cylc/workspace/Toolbar.vue'
 import { toolbarHeight } from '@/utils/toolbar'
 
 export default {

src/views/Workspace.vue

@@ -19,7 +19,7 @@ import { createVuetify } from 'vuetify'
 import { createStore } from 'vuex'
 import { mount } from '@vue/test-utils'
 import storeOptions from '@/store/options'
-import Toolbar from '@/components/cylc/workflow/Toolbar.vue'
+import Toolbar from '@/components/cylc/workspace/Toolbar.vue'
 import CylcObjectPlugin from '@/components/cylc/cylcObject/plugin'
 import sinon from 'sinon'
 import WorkflowService from '@/services/workflow.service'