Merge pull request #2261 from wxtim/feat.skip-mode-task-modifiers

Skip mode modifier

Author: wxtim

changes.d/2261.feat.md

@@ -0,0 +1 @@
+Add a skip mode modifier for the task icon

src/components/cylc/SVGTask.vue

@@ -161,6 +161,33 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           "
         />
       </g>
+
+      <!-- runahead
+
+        Dot icon representing isRunahead.
+      -->
+      <g
+        class="runahead"
+      >
+        <circle
+          cx="50"
+          cy="50"
+          r="20"
+        />
+      </g>
+
+      <!-- Run Mode is Skip
+
+        Fast-forward icon representing skip-mode
+      -->
+      <g
+        class="skip"
+      >
+        <path class="skip"
+          d="M 5 15 v 70 l 43 -35 M 50 15 v 70 l 43 -35"
+        />
+      </g>
+
       <!-- queued
 
         Burger bar-like icon representing isQueued.
@@ -179,19 +206,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           "
         />
       </g>
-      <!-- runahead
-
-        Dot icon representing isRunahead.
-      -->
-      <g
-        class="runahead"
-      >
-        <circle
-          cx="50"
-          cy="50"
-          r="20"
-        />
-      </g>
 
       <!-- xtriggered
 
@@ -278,8 +292,9 @@ const animResetTime = inject('animResetTime', () => ref(0), true)
 // Get modifier (if any) for the task state.
 const modifier = computed(() => {
   if (props.task.isHeld) return 'held'
-  if (props.task.isQueued) return 'queued'
   if (props.task.isRunahead) return 'runahead'
+  if (props.task.runtime?.runMode === 'Skip') return 'skip'
+  if (props.task.isQueued) return 'queued'
   if (props.task.isRetry) return 'retry'
   if (props.task.isWallclock) return 'wallclock'
   if (props.task.isXtriggered) return 'xtriggered'
@@ -384,11 +399,15 @@ const modifierTransform = _getModifierTransform()
         fill: none;
         stroke: none;
       }
-      .queued rect {
+      .runahead circle {
         fill: none;
         stroke: none;
       }
-      .runahead circle {
+      .skip{
+        fill: none;
+        stroke: none;
+      }
+      .queued rect {
         fill: none;
         stroke: none;
       }
@@ -472,14 +491,6 @@ const modifierTransform = _getModifierTransform()
       }
     }
 
-    &.queued .modifier {
-      .queued path {
-        stroke: $foreground;
-        stroke-linecap: round;
-        stroke-width: 16px;
-      }
-    }
-
     &.runahead .modifier {
       .outline {
         stroke: $foreground;
@@ -489,6 +500,22 @@ const modifierTransform = _getModifierTransform()
       }
     }
 
+    &.skip .modifier {
+      .skip path {
+        stroke: $background;
+        fill: $foreground;
+        stroke-width: 0px;
+      }
+    }
+
+    &.queued .modifier {
+      .queued path {
+        stroke: $foreground;
+        stroke-linecap: round;
+        stroke-width: 16px;
+      }
+    }
+
     &.xtriggered .modifier {
       .xtriggered {
         stroke: $foreground;

src/components/cylc/commandMenu/Menu.vue

@@ -232,8 +232,9 @@ export default {
         } else {
           ret += upperFirst(this.node.node.state || 'state unknown')
           if (this.node.node.isHeld) ret += ' (held)'
-          if (this.node.node.isQueued) ret += ' (queued)'
           if (this.node.node.isRunahead) ret += ' (beyond runahead limit)'
+          if (this.node.node.runtime?.runMode === 'Skip') ret += ' (skip mode)'
+          if (this.node.node.isQueued) ret += ' (queued)'
           if (this.node.node.isRetry) ret += ' (awaiting retry)'
           else if (this.node.node.isWallclock) ret += ' (awaiting wallclock)'
           else if (this.node.node.isXtriggered) ret += ' (awaiting xtrigger)'

src/views/Graph.vue

@@ -175,6 +175,9 @@ fragment TaskProxyData on TaskProxy {
     meanElapsedTime
   }
   flowNums
+  runtime {
+    runMode
+  }
 }
 
 fragment JobData on Job {

src/views/Guide.vue

@@ -138,32 +138,47 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <template v-slot:prepend>
                   <task
                     style="font-size: 2em;"
-                    :task="{state: 'waiting', isQueued: true}"
+                    :task="{state: 'waiting', isRunahead: true}"
                     class="mr-4"
                   />
                 </template>
                 <v-list-item-title>
-                  Queued
+                  Runahead
                 </v-list-item-title>
                 <v-list-item-subtitle>
-                  The task is ready to run but is held back by a queue,
-                  which restricts the number of active tasks.
+                  The task is ready to run but is beyond the runahead limit,
+                  which restricts the number of active cycle points.
                 </v-list-item-subtitle>
               </v-list-item>
               <v-list-item>
                 <template v-slot:prepend>
                   <task
                     style="font-size: 2em;"
-                    :task="{state: 'waiting', isRunahead: true}"
+                    :task="{state: 'waiting', runtime: { runMode: 'Skip' }}"
                     class="mr-4"
                   />
                 </template>
                 <v-list-item-title>
-                  Runahead
+                  Skip Mode
                 </v-list-item-title>
                 <v-list-item-subtitle>
-                  The task is ready to run but is beyond the runahead limit,
-                  which restricts the number of active cycle points.
+                  This task will be run in skip mode.
+                </v-list-item-subtitle>
+              </v-list-item>
+              <v-list-item>
+                <template v-slot:prepend>
+                  <task
+                    style="font-size: 2em;"
+                    :task="{state: 'waiting', isQueued: true}"
+                    class="mr-4"
+                  />
+                </template>
+                <v-list-item-title>
+                  Queued
+                </v-list-item-title>
+                <v-list-item-subtitle>
+                  The task is ready to run but is held back by a queue,
+                  which restricts the number of active tasks.
                 </v-list-item-subtitle>
               </v-list-item>
               <v-list-item>

src/views/Table.vue

@@ -136,6 +136,9 @@ fragment TaskProxyData on TaskProxy {
   firstParent {
     id
   }
+  runtime {
+    runMode
+  }
   flowNums
 }
 

src/views/Tree.vue

@@ -196,6 +196,9 @@ fragment TaskProxyData on TaskProxy {
   firstParent {
     id
   }
+  runtime {
+    runMode
+  }
   flowNums
 }
 

tests/component/specs/cylc-icons.cy.js

@@ -56,17 +56,19 @@ const TaskComponent = defineComponent({
 function makeTask (
   state = 'waiting',
   isHeld = false,
-  isQueued = false,
   isRunahead = false,
+  runtime = { runMode: 'Live' },
+  isQueued = false,
   isRetry = false,
   isWallclock = false,
   isXtriggered = false,
 ) {
   return {
     state,
     isHeld,
-    isQueued,
     isRunahead,
+    runtime,
+    isQueued,
     isRetry,
     isWallclock,
     isXtriggered,
@@ -125,17 +127,25 @@ describe('Task component', () => {
     let task
     for (const modifier of [
       'isHeld',
-      'isQueued',
       'isRunahead',
+      'skip',
+      'isQueued',
       'isXtriggered',
       'isRetry',
       'isWallclock'
     ]) {
       task = makeTask()
-      task[modifier] = true
+      let filename
+      if (modifier === 'skip') {
+        task.runtime.runMode = 'Skip'
+        filename = 'isSkip'
+      } else {
+        task[modifier] = true
+        filename = modifier
+      }
       cy.mount(TaskComponent, { props: { task } })
       cy.get('.c8-task').last().screenshot(
-        `task-${modifier}`,
+        `task-${filename}`,
         {
           overwrite: true,
           disableTimersAndAnimations: false,

tests/unit/components/cylc/common/SVGTask.vue.spec.js

@@ -35,16 +35,27 @@ describe('modifier', () => {
     [['isWallclock', 'isXtriggered'], 'wallclock'],
     [['isHeld', 'isWallclock', 'isXtriggered'], 'held'],
     // Some cases in the middle of the list:
-    [['isQueued', 'isRunahead', 'isXtriggered'], 'queued'],
+    [['isQueued', 'isRunahead', 'isXtriggered'], 'runahead'],
     [['isRunahead', 'isRetry', 'isWallclock'], 'runahead'],
+    // Skip is handled before queued and after runahead
+    [['isRunahead', 'skip'], 'runahead'],
+    [['isQueued', 'skip'], 'skip'],
   ])('returns the correct modifier for %o', (switchedOn, expected) => {
     const wrapper = mount(SVGTask, {
       props: {
         task: Object.fromEntries(
-          switchedOn.map((modifier) => [modifier, true])
+          // switchedOn.map((modifier) => [modifier, true])
+          switchedOn.map(mapper)
         ),
       }
     })
+    function mapper (key) {
+      if (key === 'skip') {
+        return ['runtime', { runMode: 'Skip' }]
+      } else {
+        return [key, true]
+      }
+    }
     expect(wrapper.vm.modifier).toBe(expected)
     expect(wrapper.get('.c8-task').classes()).toContain(expected)
   })