From f2385fc97516a170dc1dcda2053c89fd01a23844 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Mon, 6 Oct 2025 14:56:40 +0100
Subject: [PATCH 1/2] Fix hit area of task/job icons

---
 src/components/cylc/table/Table.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/cylc/table/Table.vue b/src/components/cylc/table/Table.vue
index 3f66c3ff1..87df61e4a 100644
--- a/src/components/cylc/table/Table.vue
+++ b/src/components/cylc/table/Table.vue
@@ -33,14 +33,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :class="{ 'flow-none': isFlowNone(item.task.node.flowNums) }"
         :data-cy-task-name="item.task.name"
       >
-        <div style="width: 2em;">
+        <div v-bind="jobIconParentProps">
           <Task
             v-command-menu="item.task"
             :task="item.task.node"
             :startTime="item.latestJob?.node?.startedTime"
           />
         </div>
-        <div style="width: 2em;">
+        <div v-bind="jobIconParentProps">
           <Job
             v-if="item.latestJob"
             v-command-menu="item.latestJob"
@@ -93,14 +93,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       >
         <td :colspan="3">
           <div class="d-flex align-content-center flex-nowrap">
-            <div class="d-flex" style="margin-left: 2em;">
+            <div v-bind="jobIconParentProps" :style="{ marginLeft: jobIconParentProps.style.width }">
               <Job
                 v-command-menu="job"
                 :key="`${job.id}-summary-${index}`"
                 :status="job.node.state"
               />
-              <span class="ml-2">#{{ job.node.submitNum }}</span>
             </div>
+            <span>#{{ job.node.submitNum }}</span>
           </div>
         </td>
         <td>{{ job.node.platform }}</td>
@@ -288,6 +288,11 @@ const taskRunTimes = computed(() => new Map(
   ])
 ))
 
+const jobIconParentProps = {
+  class: ['d-flex', 'align-center'],
+  style: { width: '2em' },
+}
+
 const itemsPerPageOptions = [
   { value: 10, title: '10' },
   { value: 20, title: '20' },

From 94ffc6783587aceb9703560654f8995134a6faa7 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Mon, 6 Oct 2025 15:00:05 +0100
Subject: [PATCH 2/2] Replace task state icons with badges in sidebar

---
 src/components/cylc/TaskStateBadge.vue     |  45 ++++++
 src/components/cylc/WarningIcon.vue        |   4 +-
 src/components/cylc/tree/GScanTreeItem.vue |  57 ++-----
 src/components/cylc/workspace/Toolbar.vue  |   2 +-
 src/styles/cylc/_job.scss                  | 173 ++++++++-------------
 5 files changed, 130 insertions(+), 151 deletions(-)
 create mode 100644 src/components/cylc/TaskStateBadge.vue

diff --git a/src/components/cylc/TaskStateBadge.vue b/src/components/cylc/TaskStateBadge.vue
new file mode 100644
index 000000000..6ab4fa288
--- /dev/null
+++ b/src/components/cylc/TaskStateBadge.vue
@@ -0,0 +1,45 @@
+<!--
+  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="task-state-badge d-flex justify-center align-center px-1"
+    :class="state"
+    v-tooltip="{ text: tooltip, openDelay: 400, location: 'top' }"
+  >
+    {{ value > 99 ? '99+' : value }}
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  state: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: Number,
+    required: true,
+  },
+})
+
+const tooltip = computed(
+  () => `${props.value} ${props.state} task${props.value > 1 ? 's' : ''}`
+)
+</script>
diff --git a/src/components/cylc/WarningIcon.vue b/src/components/cylc/WarningIcon.vue
index 51eeeb6f3..ef06b6013 100644
--- a/src/components/cylc/WarningIcon.vue
+++ b/src/components/cylc/WarningIcon.vue
@@ -26,9 +26,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <span
-    class="c-warn"
+    class="c-warn d-inline-flex"
     :class="{'active': workflow.node.warningActive}"
-    style="display: inline-block;"
   >
     <v-tooltip
       :activator="null"
@@ -45,7 +44,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @click="deactivate"
           @click.prevent
           style="
-            vertical-align: middle;
             cursor: pointer;
           "
           :style="[workflow.node.logRecords?.length ? {opacity: 1} : {opacity: 0.3}]"
diff --git a/src/components/cylc/tree/GScanTreeItem.vue b/src/components/cylc/tree/GScanTreeItem.vue
index d29779b2d..9778bb1ee 100644
--- a/src/components/cylc/tree/GScanTreeItem.vue
+++ b/src/components/cylc/tree/GScanTreeItem.vue
@@ -47,37 +47,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </span>
         </div>
         <div class="d-flex text-right c-gscan-workflow-states flex-grow-0">
-          <!-- task summary tooltips -->
-          <!-- a v-tooltip does not work directly set on Cylc job component, so we use a div to wrap it -->
-          <div
-            class="ma-0 pa-0"
-            min-width="0"
-            min-height="0"
-            style="font-size: 120%; width: auto;"
-          >
-            <WarningIcon v-if="workflowWarnings" :workflow="node" />
-          </div>
-          <div
-            v-for="[state, tasks] in Object.entries(descendantTaskInfo.latestTasks)"
-            :key="`${node.id}-${state}`"
-            :class="getTaskStateClass(descendantTaskInfo.stateTotals, state)"
-            class="ma-0 pa-0"
-            min-width="0"
-            min-height="0"
-            style="font-size: 120%; width: auto;"
-          >
-            <Job :status="state" />
-            <v-tooltip location="top">
-              <!-- tooltip text -->
-              <div class="text-grey-lighten-1">
-                {{ descendantTaskInfo.stateTotals[state] ?? 0 }} {{ state }}. Recent {{ state }} tasks:
-              </div>
-              <div v-for="(task, index) in tasks.slice(0, $options.maxTasksDisplayed)" :key="index">
-                {{ task }}<br v-if="index !== tasks.length - 1" />
-              </div>
-            </v-tooltip>
-          </div>
+          <WarningIcon
+            v-if="workflowWarnings"
+            :workflow="node"
+            style="font-size: 120%;"
+          />
         </div>
+        <template
+          v-for="state in Object.keys(descendantTaskInfo.latestTasks)"
+          :key="`${node.id}-${state}`"
+        >
+          <TaskStateBadge
+            v-if="descendantTaskInfo.stateTotals[state]"
+            :state="state"
+            :value="descendantTaskInfo.stateTotals[state]"
+          />
+        </template>
       </div>
     </v-list-item>
 
@@ -95,7 +80,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import Job from '@/components/cylc/Job.vue'
+import TaskStateBadge from '@/components/cylc/TaskStateBadge.vue'
 import WorkflowIcon from '@/components/cylc/gscan/WorkflowIcon.vue'
 import TreeItem from '@/components/cylc/tree/TreeItem.vue'
 import WarningIcon from '@/components/cylc/WarningIcon.vue'
@@ -144,7 +129,7 @@ export default {
   name: 'GScanTreeItem',
 
   components: {
-    Job,
+    TaskStateBadge,
     TreeItem,
     WarningIcon,
     WorkflowIcon,
@@ -197,14 +182,6 @@ export default {
     }
   },
 
-  methods: {
-    getTaskStateClass (stateTotals, state) {
-      return {
-        'empty-state': !stateTotals[state]
-      }
-    },
-  },
-
   nodeTypes: ['workflow-part', 'workflow'],
   maxTasksDisplayed: 5,
   WorkflowState,
diff --git a/src/components/cylc/workspace/Toolbar.vue b/src/components/cylc/workspace/Toolbar.vue
index 51407e5a3..c5692f48f 100644
--- a/src/components/cylc/workspace/Toolbar.vue
+++ b/src/components/cylc/workspace/Toolbar.vue
@@ -45,7 +45,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- control bar elements displayed only when there is a current workflow in the store -->
     <template v-if="currentWorkflow">
-      <div class="c-workflow-controls flex-shrink-0">
+      <div class="c-workflow-controls d-flex align-center flex-shrink-0">
         <WarningIcon
           :workflow="currentWorkflow"
           style="font-size: 120%; padding-right: 0.3em;"
diff --git a/src/styles/cylc/_job.scss b/src/styles/cylc/_job.scss
index ae486cb1c..fee673877 100644
--- a/src/styles/cylc/_job.scss
+++ b/src/styles/cylc/_job.scss
@@ -15,131 +15,90 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+@use "sass:list";
+
 /* css namespace for job element */
 $cjob: ".c-job .job rect";
 
-
 #{$cjob} {
     /* if no job status display nothing */
     fill: transparent;
     stroke: transparent;
 }
 
-.c-job {
-    .job {
-        vertical-align: middle;
-        /* scale the icon to the font-size */
-        width: 1em;
-        height: 1em;
-    }
+.c-job .job {
+    /* scale the icon to the font-size */
+    width: 1em;
+    height: 1em;
 }
 
-@mixin job_theme($theme) {
-    @if $theme == "default" {
-        $teal: rgb(109,213,194);
-        $blue: rgb(106,164,241);
-        $green: rgb(81,175,81);
-        $red: rgb(207,72,72);
-        $pink: rgb(190,106,192);
-
-        #{$cjob} {
-            &.submitted {
-                fill: $teal;
-                stroke: $teal;
-            }
-
-            &.running {
-                fill: $blue;
-                stroke: $blue;
-            }
-
-            &.succeeded {
-                fill: $green;
-                stroke: $green;
-            }
-
-            &.failed {
-                fill: $red;
-                stroke: $red;
-            }
-
-            &.submit-failed {
-                fill: $pink;
-                stroke: $pink;
-            }
-        }
-    } @else if $theme == "greyscale" {
-        $light: rgb(208,208,208);
-        $medium: rgb(133,133,133);
-        $dark: rgb(0,0,0);
-
-        #{$cjob} {
-            &.submitted {
-                fill: transparent;
-                stroke: $light;
-            }
-
-            &.running {
-                fill: $light;
-                stroke: $light;
-            }
-
-            &.succeeded {
-                fill: $medium;
-                stroke: $medium;
-            }
-
-            &.failed {
-                fill: $dark;
-                stroke: $dark;
-            }
-
-            &.submit-failed {
-                fill: transparent;
-                stroke: $dark;
-            }
-        }
-    } @else if $theme == "colour_blind" {
-        $grey: rgb(152,152,152);
-        $success: rgb(108,218,255);
-        $error: rgb(146,0,0);
-
-        #{$cjob} {
-            &.submitted {
-                fill: transparent;
-                stroke: $grey;
-            }
-
-            &.running {
-                fill: $grey;
-                stroke: $grey;
-            }
-
-            &.succeeded {
-                fill: $success;
-                stroke: $success;
-            }
-
-            &.failed {
-                fill: $error;
-                stroke: $error;
-            }
-
-            &.submit-failed {
-                fill: transparent;
-                stroke: $error;
-            }
-        }
-    }
+.task-state-badge {
+    font-size: 0.7em;
+    height: 1.8em;
+    min-width: 1.8em;
+    font-weight: 500;
+    border-radius: 1.8em;
+    border: 2px solid;
+    margin: 0 0.1em;
+    line-height: normal;
 }
 
-@each $theme in "default", "greyscale", "colour_blind" {
+$teal: rgb(109,213,194);
+$blue: rgb(106,164,241);
+$green: rgb(81,175,81);
+$red: rgb(207,72,72);
+$pink: rgb(190,106,192);
+
+$light: rgb(208,208,208);
+$medium: rgb(133,133,133);
+$dark: rgb(0,0,0);
+
+$grey: rgb(152,152,152);
+$success: rgb(108,218,255);
+$error: rgb(146,0,0);
+
+// Mapping of job themes to job states to (fill, outline, text) colors
+$themes: (
+    "default": (
+        "submitted": ($teal, $teal, white),
+        "running": ($blue, $blue, white),
+        "succeeded": ($green, $green, white),
+        "failed": ($red, $red, white),
+        "submit-failed": ($pink, $pink, white),
+    ),
+    "greyscale": (
+        "submitted": (transparent, $light, black),
+        "running": ($light, $light, black),
+        "succeeded": ($medium, $medium, white),
+        "failed": ($dark, $dark, white),
+        "submit-failed": (transparent, $dark, black),
+    ),
+    "colour_blind": (
+        "submitted": (transparent, $grey, black),
+        "running": ($grey, $grey, white),
+        "succeeded": ($success, $success, black),
+        "failed": ($error, $error, white),
+        "submit-failed": (transparent, $error, black),
+    ),
+);
+
+@each $theme, $state_map in $themes {
     .job_theme--#{$theme} {
         &, // job theme as configured by the top-level application
         &.job_theme_override {
             // if overridden elsewhere the new value should take priority
             // (this allows us to override the theme in the user profile)
-            @include job_theme($theme);
+            @each $state, $colors in $state_map {
+                #{$cjob}.#{$state} {
+                    fill: list.nth($colors, 1);
+                    stroke: list.nth($colors, 2);
+                }
+                .task-state-badge.#{$state} {
+                    background-color: list.nth($colors, 1);
+                    border-color: list.nth($colors, 2);
+                    color: list.nth($colors, 3);
+                }
+            }
         }
     }
 }