From 1c6bece3be1dd67586d2caf83bc534da75b50e5b Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 9 Dec 2024 19:04:30 +0100
Subject: [PATCH 1/4] Fix PieChart legend visual issue

The "chart" class was braking Vega's CSS
---
 .../WorkflowInvocationState/VegaWrapper.vue         |  7 +------
 .../WorkflowInvocationMetrics.vue                   | 13 +------------
 2 files changed, 2 insertions(+), 18 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/VegaWrapper.vue b/client/src/components/WorkflowInvocationState/VegaWrapper.vue
index ec4ce67b8586..fb76e6e4875f 100644
--- a/client/src/components/WorkflowInvocationState/VegaWrapper.vue
+++ b/client/src/components/WorkflowInvocationState/VegaWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="chartContainer" class="chart" :style="style"></div>
+    <div ref="chartContainer" :style="style"></div>
 </template>
 
 <script setup lang="ts">
@@ -49,8 +49,3 @@ onBeforeUnmount(() => {
     }
 });
 </script>
-
-<style scoped>
-.chart {
-}
-</style>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index cb32e4f11288..a3e530696926 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -275,18 +275,7 @@ function itemToPieChartSpec(item: piechartData) {
                 type: "nominal",
                 legend: {
                     type: "symbol",
-                    title: "", // should be item.category_title but it doesn't align right so just hide it
-                    direction: "vertical",
-                    titleAlign: "right",
-                    padding: 10,
-                    // rowPadding: 3,
-                    labelOffset: 40,
-                    // symbolOffset: 50,
-                    labelLimit: 120,
-                    // labelAlign: 'center',
-                    columnPadding: 5,
-                    // clipHeight: 20,
-                    titleOrient: "top",
+                    title: item.category_title,
                 },
             },
             tooltip: [

From e3ac780d64c7483bf9cce5a0b51136bef2d45567 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 9 Dec 2024 19:06:33 +0100
Subject: [PATCH 2/4] Increase PieChart legend font size

Slightly increase for improved visibility
---
 .../WorkflowInvocationState/WorkflowInvocationMetrics.vue       | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index a3e530696926..2298d1880cd5 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -276,6 +276,8 @@ function itemToPieChartSpec(item: piechartData) {
                 legend: {
                     type: "symbol",
                     title: item.category_title,
+                    titleFontSize: 16,
+                    labelFontSize: 14,
                 },
             },
             tooltip: [

From 631da6456d42d417d0ee85ecba5030f337bd919a Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 9 Dec 2024 19:08:42 +0100
Subject: [PATCH 3/4] Fix label for 'Group By' dropdown in Workflow Invocation
 Metrics

Make it dynamic like the other one for time.
---
 .../WorkflowInvocationState/WorkflowInvocationMetrics.vue   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index 2298d1880cd5..3a1a1bbf8e19 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -372,6 +372,10 @@ function getTimingInTitle(timing: string): string {
 const timingInTitles = computed(() => {
     return getTimingInTitle(timing.value);
 });
+
+const groupByInTitles = computed(() => {
+    return attributeToLabel[groupBy.value];
+});
 </script>
 
 <template>
@@ -384,7 +388,7 @@ const timingInTitles = computed(() => {
                         <b-dropdown-item @click="timing = 'minutes'">{{ getTimingInTitle("minutes") }}</b-dropdown-item>
                         <b-dropdown-item @click="timing = 'hours'">{{ getTimingInTitle("hours") }}</b-dropdown-item>
                     </b-dropdown>
-                    <b-dropdown right text="Group By: Tool">
+                    <b-dropdown right :text="'Group By: ' + groupByInTitles">
                         <b-dropdown-item @click="groupBy = 'tool_id'">Tool</b-dropdown-item>
                         <b-dropdown-item @click="groupBy = 'step_id'">Workflow Step</b-dropdown-item>
                     </b-dropdown>

From f07d67386a5fc981fe7520c96926045cf0ff5bf3 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 9 Dec 2024 19:11:26 +0100
Subject: [PATCH 4/4] Center PieCharts horizontally

---
 .../components/WorkflowInvocationState/VegaWrapper.vue |  9 ++++++---
 .../WorkflowInvocationMetrics.vue                      | 10 +++++-----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/VegaWrapper.vue b/client/src/components/WorkflowInvocationState/VegaWrapper.vue
index fb76e6e4875f..8a46fec2fd0a 100644
--- a/client/src/components/WorkflowInvocationState/VegaWrapper.vue
+++ b/client/src/components/WorkflowInvocationState/VegaWrapper.vue
@@ -9,15 +9,18 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 export interface VisSpec {
     spec: VisualizationSpec;
-    width: string;
+    fillWidth?: boolean;
 }
 
 const props = withDefaults(defineProps<VisSpec>(), {
-    width: "100%",
+    fillWidth: true,
 });
 
 const style = computed(() => {
-    return { width: props.width };
+    if (props.fillWidth) {
+        return { width: "100%" };
+    }
+    return {};
 });
 
 const chartContainer = ref<HTMLDivElement | null>(null);
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index 3a1a1bbf8e19..40f46da6db23 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -395,15 +395,15 @@ const groupByInTitles = computed(() => {
                 </BButtonGroup>
             </BRow>
             <BRow>
-                <BCol v-if="wallclockAggregate && wallclockAggregate.values">
+                <BCol v-if="wallclockAggregate && wallclockAggregate.values" class="text-center">
                     <h2 class="h-l truncate text-center">
                         Aggregate
                         <HelpText :for-title="true" uri="galaxy.jobs.metrics.walltime" text="Runtime Time" /> (in
                         {{ timingInTitles }})
                     </h2>
-                    <VegaWrapper :spec="itemToPieChartSpec(wallclockAggregate)" />
+                    <VegaWrapper :spec="itemToPieChartSpec(wallclockAggregate)" :fill-width="false" />
                 </BCol>
-                <BCol v-if="allocatedCoreTimeAggregate && allocatedCoreTimeAggregate.values">
+                <BCol v-if="allocatedCoreTimeAggregate && allocatedCoreTimeAggregate.values" class="text-center">
                     <h2 class="h-l truncate text-center">
                         Aggregate
                         <HelpText
@@ -412,14 +412,14 @@ const groupByInTitles = computed(() => {
                             text="Allocated Core Time" />
                         (in {{ timingInTitles }})
                     </h2>
-                    <VegaWrapper :spec="itemToPieChartSpec(allocatedCoreTimeAggregate)" />
+                    <VegaWrapper :spec="itemToPieChartSpec(allocatedCoreTimeAggregate)" :fill-width="false" />
                 </BCol>
             </BRow>
             <BRow v-for="({ spec, item }, key) in metrics" :key="key">
                 <BCol>
                     <h2 class="h-l truncate text-center">
                         <span v-if="item.helpTerm">
-                            <HelpText :for-title="true" :uri="item.helpTerm" :text="key" />
+                            <HelpText :for-title="true" :uri="item.helpTerm" :text="`${key}`" />
                         </span>
                         <span v-else>
                             {{ key }}