Merge pull request #2190 from wxtim/feat.xtrigger-icon

task icon: add xtrigger derived modifiers

Author: wxtim

changes.d/2190.fix.md

@@ -0,0 +1 @@
+Added icon modifiers for tasks waiting on failure-retry, xtriggers or wallclock.

src/components/cylc/SVGTask.vue

@@ -24,12 +24,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <g
     class="c8-task"
-    :class="{
-      [task.state]: true,
-      held: task.isHeld,
-      queued: task.isQueued && !task.isHeld,
-      runahead: task.isRunahead && !(task.isHeld || task.isQueued),
-    }"
+    :class="[task.state, modifier]"
   >
     <!-- status
 
@@ -99,53 +94,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         The "x" in the centre of the outline used to represent failure.
       -->
-      <g
-        class="cross"
-        transform="rotate(45, 50, 50)"
-      >
-        <rect
-          x="43"
-          y="15"
-          width="14"
-          height="70"
-          rx="7.5"
-          ry="7.5"
-        />
-        <rect
-          x="15"
-          y="43"
-          width="70"
-          height="14"
-          rx="7.5"
-          ry="7.5"
-        />
-      </g>
+      <path class="cross"
+        d="
+          m30,30
+          l40 40
+          m0,-40
+          l-40 40
+        "
+      />
+
       <!-- expired
 
+      A clock face, at about 5pm.
       -->
-      <g
-        class="expired"
-      >
-        <rect
-          x="50"
-          y="46"
-          width="42"
-          height="8"
-          rx="5"
-          ry="5"
-          transform="rotate(-90, 50, 50)"
-        />
-        <rect
-          x="50"
-          y="46"
-          width="30"
-          height="8"
-          rx="5"
-          ry="5"
-          transform="rotate(45, 50, 50)"
-        />
-      </g>
+      <path
+        class="clockhands_big"
+        d="
+          m50,12
+          l0 38
+          l18 18
+        "
+      />
     </g>
+
     <!-- modifier
 
       Represents any task state modifiers e.g. isHeld, isRunahead, isQueued.
@@ -175,26 +146,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       />
       <!-- held
 
-        Paused icon representing isHeld.
+        Paused icon representing isHeld. Shown inside the outline
+        circle.
       -->
       <g
         class="held"
       >
-        <rect
-          x="30"
-          y="25"
-          width="16"
-          height="50"
-          rx="10"
-          ry="10"
-        />
-        <rect
-          x="54"
-          y="25"
-          width="16"
-          height="50"
-          rx="10"
-          ry="10"
+        <path
+          d="
+            m37,33
+            l0 34
+            m25,0
+            l0, -34
+          "
         />
       </g>
       <!-- queued
@@ -204,29 +168,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <g
         class="queued"
       >
-        <rect
-          x="20"
-          y="20"
-          width="60"
-          height="16"
-          rx="10"
-          ry="10"
-        />
-        <rect
-          x="20"
-          y="41"
-          width="60"
-          height="16"
-          rx="10"
-          ry="10"
-        />
-        <rect
-          x="20"
-          y="62"
-          width="60"
-          height="16"
-          rx="10"
-          ry="10"
+        <path
+          d="
+            m28,28
+            l43 0
+            m-43,21
+            l43, 0
+            m-43,21
+            l43 0
+          "
         />
       </g>
       <!-- runahead
@@ -242,6 +192,56 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           r="20"
         />
       </g>
+
+      <!-- xtriggered
+
+        Radio signal (similar to RSS logo) representing waiting on xtrigger(s).
+      -->
+      <g class="xtriggered">
+        <path
+          d="
+            m10,70
+            a60, 60, 0, 0, 1, 60, -60
+            m-40, 60
+            a40, 40 0, 0, 1, 40, -40
+            m-6, 27
+            a9,9, 0, 1, 0, .1, 0
+            m0, 4
+            a6,6, 0, 1, 0, .1, 0
+          "
+        />
+      </g>
+
+      <!-- Retry
+
+        Circular arrow representing a retry.
+      -->
+       <g class="retry">
+        <!-- An arc describing the arrow -->
+        <path d="m25, 50 a30 30 1 1 1 25 30 "/>
+        <!-- The arrowhead -->
+        <polygon points="0,40 26,75 52,40, 25,46"/>
+      </g>
+
+      <!-- Wallclock
+
+        A clock face representing an unsatisfied wallclock trigger.
+
+        The path is just the hands of the clock. The icon is created in
+        combination with the outline circle.
+      -->
+      <g class="wallclock">
+        <path
+          d="
+            m50, 18
+            l0, 36
+            l14, 14
+            l3,3
+            l3,-3
+            l-18, -18
+          "
+        />
+      </g>
     </g>
   </g>
 </template>
@@ -275,6 +275,17 @@ const props = defineProps({
  */
 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.isRetry) return 'retry'
+  if (props.task.isWallclock) return 'wallclock'
+  if (props.task.isXtriggered) return 'xtriggered'
+  return ''
+})
+
 const runningStyle = computed(() => {
   if (
     props.task.state === TaskState.RUNNING.name &&
@@ -355,11 +366,11 @@ const modifierTransform = _getModifierTransform()
         fill: none;
         stroke: none;
       }
-      .cross rect {
+      .cross path {
         fill: none;
         stroke: none;
       }
-      .expired rect {
+      .clockhands_big {
         fill: none;
         stroke: none;
       }
@@ -381,6 +392,18 @@ const modifierTransform = _getModifierTransform()
         fill: none;
         stroke: none;
       }
+      .wallclock {
+        fill: none;
+        stroke: none;
+      }
+      .xtriggered {
+        fill: none;
+        stroke: none;
+      }
+      .retry {
+        fill: none;
+        stroke: none;
+      }
     }
 
     &.preparing .status .dot {
@@ -406,17 +429,21 @@ const modifierTransform = _getModifierTransform()
       .outline {
         fill: $foreground;
       }
-      .cross rect {
-        fill: $background;
+      .cross {
+        stroke: $background;
+        stroke-width: 14px;
+        stroke-linecap: round;
       }
     }
 
     &.submit-failed .status {
       .outline {
         fill: $background;
       }
-      .cross rect {
-        fill: $foreground;
+      .cross {
+        stroke: $foreground;
+        stroke-width: 14px;
+        stroke-linecap: round;
       }
     }
 
@@ -427,23 +454,29 @@ const modifierTransform = _getModifierTransform()
       .dot {
         fill: $background;
       }
-      .expired rect {
-        fill: $background;
+      .clockhands_big {
+        stroke: $background;
+        stroke-width: 8px;
+        stroke-linecap: round;
       }
     }
 
     &.held .modifier {
       .outline {
         stroke: $foreground;
       }
-      .held rect {
-        fill: $foreground;
+      .held path {
+        stroke: $foreground;
+        stroke-linecap: round;
+        stroke-width: 16px;
       }
     }
 
     &.queued .modifier {
-      .queued rect {
-        fill: $foreground;
+      .queued path {
+        stroke: $foreground;
+        stroke-linecap: round;
+        stroke-width: 16px;
       }
     }
 
@@ -456,6 +489,42 @@ const modifierTransform = _getModifierTransform()
       }
     }
 
+    &.xtriggered .modifier {
+      .xtriggered {
+        stroke: $foreground;
+        stroke-width: 12px;
+        stroke-linecap: round;
+        fill: none;
+      }
+    }
+
+    &.wallclock .modifier {
+      .outline {
+        fill: $background;
+        stroke: $foreground;
+        stroke-width: 7px;
+      }
+      .wallclock {
+        stroke: $foreground;
+        stroke-width: 8px;
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+    }
+
+    &.retry .modifier {
+      .retry path {
+        stroke: $foreground;
+        stroke-width: 12px;
+        stroke-linecap: round;
+      }
+      .retry polygon {
+        stroke: none;
+        fill: $foreground;
+      }
+    }
+
     &.running .progress {
       animation-name: c8-task-progress-animation;
       animation-timing-function: steps(50);

src/components/cylc/Task.vue

@@ -48,11 +48,11 @@ export default {
       // Scale the size of the task state modifier
       type: Number,
       default: 0.7
-    }
+    },
   },
   components: {
     SVGTask
-  }
+  },
 }
 </script>