From d6b5d5c78c4ef24a0290853306f03680d3bc7174 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Fri, 6 Dec 2024 11:58:46 -0500
Subject: [PATCH] Fix multiple layers with different axis labels in workflow
 metrics.

---
 client/src/components/Help/HelpText.vue       |  10 +-
 client/src/components/Help/terms.yml          |  17 +-
 .../WorkflowInvocationState/VegaWrapper.vue   |  19 +-
 .../WorkflowInvocationMetrics.vue             | 341 +++++++++++++++---
 4 files changed, 333 insertions(+), 54 deletions(-)

diff --git a/client/src/components/Help/HelpText.vue b/client/src/components/Help/HelpText.vue
index f5f6a7006295..bfd54ed79b61 100644
--- a/client/src/components/Help/HelpText.vue
+++ b/client/src/components/Help/HelpText.vue
@@ -4,9 +4,12 @@ import HelpPopover from "./HelpPopover.vue";
 interface Props {
     uri: string;
     text: string;
+    forTitle?: boolean;
 }
 
-defineProps<Props>();
+withDefaults(defineProps<Props>(), {
+    forTitle: false,
+});
 </script>
 
 <template>
@@ -18,7 +21,7 @@ defineProps<Props>();
                 }
             "
             :term="uri" />
-        <span ref="helpTarget" class="help-text">{{ text }}</span>
+        <span ref="helpTarget" class="help-text" :class="{ 'title-help-text': forTitle }">{{ text }}</span>
     </span>
 </template>
 
@@ -28,4 +31,7 @@ defineProps<Props>();
     text-decoration-line: underline;
     text-decoration-style: dashed;
 }
+.title-help-text {
+    text-decoration-thickness: 1px;
+}
 </style>
diff --git a/client/src/components/Help/terms.yml b/client/src/components/Help/terms.yml
index fce6204d6198..c361ddf91e60 100644
--- a/client/src/components/Help/terms.yml
+++ b/client/src/components/Help/terms.yml
@@ -72,8 +72,23 @@ galaxy:
         each individual file above. If there is only one extension, Galaxy will attempt to set that as the
         extension for each file.
 
-
   jobs:
+    metrics:
+      cores: |
+        This is how many [cores](https://en.wikipedia.org/wiki/Central_processing_unit) (or distinct central processing units (CPUs)) are
+        allocated to run the job for the tool. This value is generally configured for the tool by the Galaxy administrator. This value
+        does not guarantee how many cores the job actually used - the job may have used more and less based on how Galaxy is configured
+        and how the tool is programmed.
+
+      walltime: |
+        This is estimate of the length of time the job ran created by recording the start and stop of the job in the job script
+        created for the tool execution and subtracting these values. 
+
+      allocated_core_time: |
+        This is the number of cores Galaxy believes is allocated for the job times the estimated walltime for the job. This can be thought
+        of as scaling the runtime/walltime metric by the number of cores allocated - when purchasing compute time per core hour or consuming
+        compute time from a compute center's allocation - this is likely to be a more interesting and useful number than the walltime.
+
     states:
       # upload, waiting, failed, paused, deleting, deleted, stop, stopped, skipped.
       ok: |
diff --git a/client/src/components/WorkflowInvocationState/VegaWrapper.vue b/client/src/components/WorkflowInvocationState/VegaWrapper.vue
index e5f4a8f49ba8..ec4ce67b8586 100644
--- a/client/src/components/WorkflowInvocationState/VegaWrapper.vue
+++ b/client/src/components/WorkflowInvocationState/VegaWrapper.vue
@@ -1,17 +1,24 @@
 <template>
-    <div ref="chartContainer" class="chart"></div>
+    <div ref="chartContainer" class="chart" :style="style"></div>
 </template>
 
 <script setup lang="ts">
 import { useResizeObserver } from "@vueuse/core";
 import embed, { type VisualizationSpec } from "vega-embed";
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 export interface VisSpec {
     spec: VisualizationSpec;
+    width: string;
 }
 
-const props = defineProps<VisSpec>();
+const props = withDefaults(defineProps<VisSpec>(), {
+    width: "100%",
+});
+
+const style = computed(() => {
+    return { width: props.width };
+});
 
 const chartContainer = ref<HTMLDivElement | null>(null);
 let vegaView: any;
@@ -30,7 +37,9 @@ onMounted(embedChart);
 
 watch(props, embedChart, { immediate: true, deep: true });
 useResizeObserver(chartContainer, () => {
-    embedChart();
+    if (vegaView) {
+        vegaView.resize();
+    }
 });
 
 // Cleanup the chart when the component is unmounted
@@ -43,7 +52,5 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .chart {
-    width: 100%;
-    height: 100%;
 }
 </style>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index 9b836aa3757f..cb32e4f11288 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { BButtonGroup, BCol, BContainer, BRow } from "bootstrap-vue";
 import type { VisualizationSpec } from "vega-embed";
 import { computed, ref, watch } from "vue";
 import { type ComputedRef } from "vue";
@@ -7,6 +8,8 @@ import { type components, GalaxyApi } from "@/api";
 import { getAppRoot } from "@/onload/loadConfig";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import HelpText from "@/components/Help/HelpText.vue";
+
 const VegaWrapper = () => import("./VegaWrapper.vue");
 
 const props = defineProps({
@@ -17,6 +20,7 @@ const props = defineProps({
 });
 
 const groupBy = ref<"tool_id" | "step_id">("tool_id");
+const timing = ref<"seconds" | "minutes" | "hours">("seconds");
 const jobMetrics = ref<components["schemas"]["WorkflowJobMetric"][]>();
 const fetchError = ref<string>();
 
@@ -55,17 +59,81 @@ function itemToX(item: components["schemas"]["WorkflowJobMetric"]) {
 interface boxplotData {
     x_title: string;
     y_title: string;
+    helpTerm?: string;
     values?: { x: string; y: Number }[];
 }
 
+interface piechartData {
+    category_title: string;
+    y_title: string;
+    helpTerm?: string;
+    values?: { category: string; y: Number }[];
+}
+
+interface JobInfo {
+    toolId: string;
+    stepIndex: number;
+    stepLabel: string | null;
+}
+
+interface DerivedMetric {
+    name: string;
+    job_id: string;
+    raw_value: string;
+    tool_id: string;
+    step_index: number;
+    step_label: string | null;
+}
+
+type AnyMetric = components["schemas"]["WorkflowJobMetric"] & DerivedMetric;
+
+function computeAllocatedCoreTime(
+    jobMetrics: components["schemas"]["WorkflowJobMetric"][] | undefined
+): DerivedMetric[] {
+    const walltimePerJob: Record<string, number> = {};
+    const coresPerJob: Record<string, number> = {};
+    const jobInfo: Record<string, JobInfo> = {};
+    jobMetrics?.forEach((jobMetric) => {
+        if (jobMetric.name == "runtime_seconds") {
+            walltimePerJob[jobMetric.job_id] = parseFloat(jobMetric.raw_value);
+            jobInfo[jobMetric.job_id] = {
+                toolId: jobMetric.tool_id,
+                stepIndex: jobMetric.step_index,
+                stepLabel: jobMetric.step_label,
+            };
+        } else if (jobMetric.name == "galaxy_slots") {
+            coresPerJob[jobMetric.job_id] = parseFloat(jobMetric.raw_value);
+        }
+    });
+    const thisMetric: DerivedMetric[] = [];
+    Object.keys(walltimePerJob).map((jobId) => {
+        const walltime: number | undefined = walltimePerJob[jobId];
+        const cores: number | undefined = coresPerJob[jobId];
+        const thisJobInfo = jobInfo[jobId];
+        if (cores && thisJobInfo && walltime) {
+            const metric: DerivedMetric = {
+                name: "allocated_core_time",
+                job_id: jobId,
+                raw_value: (cores * walltime).toString(),
+                tool_id: thisJobInfo.toolId as string,
+                step_index: thisJobInfo.stepIndex,
+                step_label: thisJobInfo.stepLabel,
+            };
+            thisMetric.push(metric);
+        }
+    });
+    return thisMetric;
+}
+
 function metricToSpecData(
-    jobMetrics: components["schemas"]["WorkflowJobMetric"][] | undefined,
+    jobMetrics: AnyMetric[] | undefined,
     metricName: string,
     yTitle: string,
+    helpTerm?: string,
     transform?: (param: number) => number
-) {
-    const wallclock = jobMetrics?.filter((jobMetric) => jobMetric.name == metricName);
-    const values = wallclock?.map((item) => {
+): boxplotData {
+    const thisMetric = jobMetrics?.filter((jobMetric) => jobMetric.name == metricName);
+    const values = thisMetric?.map((item) => {
         let y = parseFloat(item.raw_value);
         if (transform !== undefined) {
             y = transform(y);
@@ -80,16 +148,102 @@ function metricToSpecData(
     return {
         x_title: attributeToLabel[groupBy.value],
         y_title: yTitle,
+        helpTerm,
+        values,
+    };
+}
+
+function metricToAggregateData(
+    jobMetrics: AnyMetric[] | undefined,
+    metricName: string,
+    yTitle: string,
+    helpTerm?: string,
+    transform?: (param: number) => number
+): piechartData {
+    const thisMetric = jobMetrics?.filter((jobMetric) => jobMetric.name == metricName);
+    const aggregateByX: Record<string, number> = {};
+    thisMetric?.forEach((item) => {
+        let y = parseFloat(item.raw_value);
+        if (transform !== undefined) {
+            y = transform(y);
+        }
+        const x = itemToX(item);
+        if (!(x in aggregateByX)) {
+            aggregateByX[x] = 0;
+        }
+        if (x in aggregateByX) {
+            aggregateByX[x] += y;
+        }
+    });
+    const values = Object.keys(aggregateByX).map((key) => {
+        const value = aggregateByX[key];
+        return {
+            category: key,
+            y: value || 0,
+        };
+    });
+    return {
+        category_title: attributeToLabel[groupBy.value],
+        y_title: yTitle,
+        helpTerm,
         values,
     };
 }
 
+function transformTime(time: number): number {
+    if (timing.value == "minutes") {
+        return time / 60;
+    } else if (timing.value == "hours") {
+        return time / 3600;
+    } else {
+        return time;
+    }
+}
+
+const allocatedCoreTime: ComputedRef<DerivedMetric[]> = computed(() => {
+    return computeAllocatedCoreTime(jobMetrics.value);
+});
+
 const wallclock: ComputedRef<boxplotData> = computed(() => {
-    return metricToSpecData(jobMetrics.value, "runtime_seconds", "Runtime (in Seconds)");
+    const title = `Runtime (in ${timingInTitles.value})`;
+    return metricToSpecData(jobMetrics.value, "runtime_seconds", title, "galaxy.jobs.metrics.walltime", transformTime);
+});
+
+const wallclockAggregate: ComputedRef<piechartData> = computed(() => {
+    const title = `Runtime (in ${timingInTitles.value})`;
+    return metricToAggregateData(
+        jobMetrics.value,
+        "runtime_seconds",
+        title,
+        "galaxy.jobs.metrics.walltime",
+        transformTime
+    );
+});
+
+const allocatedCoreTimeSpec: ComputedRef<boxplotData> = computed(() => {
+    const title = `Allocated Core Time (in ${timingInTitles.value})`;
+    return metricToSpecData(
+        allocatedCoreTime.value as AnyMetric[],
+        "allocated_core_time",
+        title,
+        "galaxy.jobs.metrics.allocated_core_time",
+        transformTime
+    );
+});
+
+const allocatedCoreTimeAggregate: ComputedRef<piechartData> = computed(() => {
+    const title = `Allocated Core Time (in ${timingInTitles.value})`;
+    return metricToAggregateData(
+        allocatedCoreTime.value as AnyMetric[],
+        "allocated_core_time",
+        title,
+        "galaxy.jobs.metrics.allocated_core_time",
+        transformTime
+    );
 });
 
 const coresAllocated: ComputedRef<boxplotData> = computed(() => {
-    return metricToSpecData(jobMetrics.value, "galaxy_slots", "Cores Allocated");
+    return metricToSpecData(jobMetrics.value, "galaxy_slots", "Cores Allocated", "galaxy.jobs.metrics.cores");
 });
 
 const memoryAllocated: ComputedRef<boxplotData> = computed(() => {
@@ -97,9 +251,59 @@ const memoryAllocated: ComputedRef<boxplotData> = computed(() => {
 });
 
 const peakMemory: ComputedRef<boxplotData> = computed(() => {
-    return metricToSpecData(jobMetrics.value, "memory.peak", "Max memory usage recorded (in MB)", (v) => v / 1024 ** 2);
+    return metricToSpecData(
+        jobMetrics.value,
+        "memory.peak",
+        "Max memory usage recorded (in MB)",
+        undefined,
+        (v) => v / 1024 ** 2
+    );
 });
 
+function itemToPieChartSpec(item: piechartData) {
+    const spec: VisualizationSpec = {
+        $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+        description: "Aggregate data.",
+        data: {
+            values: item.values!,
+        },
+        mark: { type: "arc", tooltip: true },
+        encoding: {
+            theta: { field: "y", type: "quantitative" },
+            color: {
+                field: "category",
+                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",
+                },
+            },
+            tooltip: [
+                { field: "category", type: "nominal", title: item.category_title },
+                { field: "y", type: "quantitative", title: item.y_title },
+            ],
+        },
+        autosize: {
+            type: "fit",
+            resize: true,
+        },
+        width: 400,
+        height: 250,
+    };
+    return spec;
+}
+
 function itemToSpec(item: boxplotData) {
     const spec: VisualizationSpec = {
         $schema: "https://vega.github.io/schema/vega-lite/v5.json",
@@ -117,13 +321,26 @@ function itemToSpec(item: boxplotData) {
                 as: "url",
             },
         ],
+        encoding: {
+            y: {
+                field: "y",
+                type: "quantitative",
+                scale: { zero: false },
+                title: item.y_title,
+            },
+            x: {
+                field: "x",
+                type: "nominal",
+                title: item.x_title,
+                axis: {
+                    labelAngle: -45,
+                    labelAlign: "right",
+                },
+            },
+        },
         layer: [
             {
                 mark: { type: "boxplot", opacity: 0.5 },
-                encoding: {
-                    x: { field: "x", type: "nominal" },
-                    y: { field: "y", type: "quantitative" },
-                },
                 width: "container",
             },
             {
@@ -132,56 +349,90 @@ function itemToSpec(item: boxplotData) {
                     opacity: 0.7,
                 },
                 encoding: {
-                    x: {
-                        field: "x",
-                        type: "nominal",
-                        title: item.x_title,
-                        axis: {
-                            labelAngle: -45,
-                            labelAlign: "right",
-                        },
-                    },
                     xOffset: { field: "random_jitter", type: "quantitative", scale: { domain: [-2, 2] } },
-                    y: {
-                        field: "y",
-                        type: "quantitative",
-                        scale: { zero: false },
-                        title: item.y_title,
-                    },
                     tooltip: { field: "tooltip", type: "nominal" },
                     href: { field: "url", type: "nominal" },
+                    color: { field: "x", type: "nominal", legend: null },
                 },
                 width: "container",
+                height: 350,
             },
         ],
     };
     return spec;
 }
 
-const specs = computed(() => {
-    const items = [wallclock.value, coresAllocated.value, memoryAllocated.value, peakMemory.value].filter(
-        (item) => item.values?.length
-    );
-    const specs = Object.fromEntries(items.map((item) => [item.y_title, itemToSpec(item)]));
-    return specs;
+const metrics = computed(() => {
+    const items = [
+        wallclock.value,
+        allocatedCoreTimeSpec.value,
+        coresAllocated.value,
+        memoryAllocated.value,
+        peakMemory.value,
+    ].filter((item) => item.values?.length);
+
+    return Object.fromEntries(items.map((item) => [item.y_title, { spec: itemToSpec(item), item: item }]));
+});
+
+function getTimingInTitle(timing: string): string {
+    return timing.charAt(0).toUpperCase() + timing.slice(1);
+}
+
+const timingInTitles = computed(() => {
+    return getTimingInTitle(timing.value);
 });
 </script>
 
 <template>
     <div>
-        <b-tabs lazy>
-            <b-tab title="Summary by Tool" @click="groupBy = 'tool_id'">
-                <div v-for="(spec, key) in specs" :key="key">
-                    <h2 class="h-l truncate text-center">{{ key }}</h2>
-                    <VegaWrapper :spec="spec" />
-                </div>
-            </b-tab>
-            <b-tab title="Summary by Workflow Step" @click="groupBy = 'step_id'">
-                <div v-for="(spec, key) in specs" :key="key">
-                    <h2 class="h-l truncate text-center">{{ key }}</h2>
+        <BContainer>
+            <BRow align-h="end" class="mb-2">
+                <BButtonGroup>
+                    <b-dropdown right :text="'Timing: ' + timingInTitles">
+                        <b-dropdown-item @click="timing = 'seconds'">{{ getTimingInTitle("seconds") }}</b-dropdown-item>
+                        <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-item @click="groupBy = 'tool_id'">Tool</b-dropdown-item>
+                        <b-dropdown-item @click="groupBy = 'step_id'">Workflow Step</b-dropdown-item>
+                    </b-dropdown>
+                </BButtonGroup>
+            </BRow>
+            <BRow>
+                <BCol v-if="wallclockAggregate && wallclockAggregate.values">
+                    <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)" />
+                </BCol>
+                <BCol v-if="allocatedCoreTimeAggregate && allocatedCoreTimeAggregate.values">
+                    <h2 class="h-l truncate text-center">
+                        Aggregate
+                        <HelpText
+                            :for-title="true"
+                            uri="galaxy.jobs.metrics.allocated_core_time"
+                            text="Allocated Core Time" />
+                        (in {{ timingInTitles }})
+                    </h2>
+                    <VegaWrapper :spec="itemToPieChartSpec(allocatedCoreTimeAggregate)" />
+                </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" />
+                        </span>
+                        <span v-else>
+                            {{ key }}
+                        </span>
+                    </h2>
                     <VegaWrapper :spec="spec" />
-                </div>
-            </b-tab>
-        </b-tabs>
+                </BCol>
+            </BRow>
+        </BContainer>
     </div>
 </template>