From e5b300b9c1a20dd6f05971c3e293f99b96c1c21a Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Wed, 23 Oct 2024 12:12:28 -0400
Subject: [PATCH 1/6] Add job metrics per invocation

---
 client/src/api/schema/schema.ts               | 100 +++++++++++
 .../MetricsBoxPlots.vue                       | 169 ++++++++++++++++++
 .../WorkflowInvocationMetrics.vue             |  52 ++++++
 .../WorkflowInvocationState.vue               |   4 +
 lib/galaxy/managers/jobs.py                   |  39 +++-
 lib/galaxy/schema/schema.py                   |   4 +
 lib/galaxy/webapps/galaxy/api/workflows.py    |   9 +
 .../webapps/galaxy/services/invocations.py    |  14 ++
 lib/galaxy_test/api/test_workflows.py         |  33 ++++
 9 files changed, 423 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/WorkflowInvocationState/MetricsBoxPlots.vue
 create mode 100644 client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue

diff --git a/client/src/api/schema/schema.ts b/client/src/api/schema/schema.ts
index 93d99b75fa0a..73cb76dd7af6 100644
--- a/client/src/api/schema/schema.ts
+++ b/client/src/api/schema/schema.ts
@@ -2594,6 +2594,23 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/invocations/{invocation_id}/metrics": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get Invocation Metrics */
+        get: operations["get_invocation_metrics_api_invocations__invocation_id__metrics_get"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/invocations/{invocation_id}/prepare_store_download": {
         parameters: {
             query?: never;
@@ -18317,6 +18334,45 @@ export interface components {
                 [key: string]: number;
             };
         };
+        /**
+         * WorkflowJobMetric
+         * @example {
+         *       "name": "start_epoch",
+         *       "plugin": "core",
+         *       "raw_value": "1614261340.0000000",
+         *       "title": "Job Start Time",
+         *       "value": "2021-02-25 14:55:40"
+         *     }
+         */
+        WorkflowJobMetric: {
+            /**
+             * Name
+             * @description The name of the metric variable.
+             */
+            name: string;
+            /**
+             * Plugin
+             * @description The instrumenter plugin that generated this metric.
+             */
+            plugin: string;
+            /**
+             * Raw Value
+             * @description The raw value of the metric as a string.
+             */
+            raw_value: string;
+            /**
+             * Title
+             * @description A descriptive title for this metric.
+             */
+            title: string;
+            /** Tool Id */
+            tool_id: string;
+            /**
+             * Value
+             * @description The textual representation of the metric value.
+             */
+            value: string;
+        };
         /** WorkflowLandingRequest */
         WorkflowLandingRequest: {
             /** Request State */
@@ -27021,6 +27077,50 @@ export interface operations {
             };
         };
     };
+    get_invocation_metrics_api_invocations__invocation_id__metrics_get: {
+        parameters: {
+            query?: never;
+            header?: {
+                /** @description The user ID that will be used to effectively make this API call. Only admins and designated users can make API calls on behalf of other users. */
+                "run-as"?: string | null;
+            };
+            path: {
+                /** @description The encoded database identifier of the Invocation. */
+                invocation_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["WorkflowJobMetric"][];
+                };
+            };
+            /** @description Request Error */
+            "4XX": {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MessageExceptionModel"];
+                };
+            };
+            /** @description Server Error */
+            "5XX": {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MessageExceptionModel"];
+                };
+            };
+        };
+    };
     prepare_store_download_api_invocations__invocation_id__prepare_store_download_post: {
         parameters: {
             query?: never;
diff --git a/client/src/components/WorkflowInvocationState/MetricsBoxPlots.vue b/client/src/components/WorkflowInvocationState/MetricsBoxPlots.vue
new file mode 100644
index 000000000000..1876190cc903
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/MetricsBoxPlots.vue
@@ -0,0 +1,169 @@
+<template>
+  <div ref="boxPlot"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import * as d3 from 'd3';
+import { isTerminal } from './util';
+
+interface JobData {
+  title: string;
+  value: string;
+  plugin: string;
+  name: string;
+  raw_value: string;
+  tool_id: string;
+}
+
+
+const boxPlot = ref<HTMLElement | null>(null);
+
+// Define the job data (this can come from props or API in real scenario// Extract runtime seconds data
+// Define props
+const props = defineProps<{
+  jobData: JobData[];
+}>();
+
+// Function to render box plots for different tool_ids on the same graph
+const renderBoxPlots = () => {
+  const margin = { top: 10, right: 30, bottom: 50, left: 40 },
+    width = 800 - margin.left - margin.right,
+    height = 400 - margin.top - margin.bottom;
+
+  // Remove any previous content
+  d3.select(boxPlot.value).selectAll('*').remove();
+
+  // Group data by tool_id
+  const groupedData = d3.group(props.jobData, d => d.tool_id);
+
+  // Extract the tool_ids for the x-axis
+  const toolIds = Array.from(groupedData.keys());
+
+  // Create SVG
+  const svg = d3
+    .select(boxPlot.value)
+    .append('svg')
+    .attr('width', width + margin.left + margin.right)
+    .attr('height', height + margin.top + margin.bottom)
+    .append('g')
+    .attr('transform', `translate(${margin.left},${margin.top})`);
+
+  // X Scale: tool_ids on the x-axis
+  const x = d3.scaleBand()
+    .range([0, width])
+    .domain(toolIds)
+    .padding(0.4);
+
+  svg.append('g')
+    .attr('transform', `translate(0,${height})`)
+    .call(d3.axisBottom(x));
+
+  // Y Scale: common for all box plots
+  const allRuntimes = Array.from(props.jobData)
+    .filter(d => d.name === "runtime_seconds")
+    .map(d => parseFloat(d.raw_value));
+
+  const y = d3.scaleLinear()
+    .domain([0, d3.max(allRuntimes) as number])
+    .range([height, 0]);
+
+  svg.append('g').call(d3.axisLeft(y));
+
+  // Tooltip for individual dots
+  const tooltip = d3.select(boxPlot.value)
+    .append("div")
+    .style("position", "absolute")
+    .style("background", "lightgray")
+    .style("padding", "5px")
+    .style("border-radius", "5px")
+    .style("pointer-events", "none")
+    .style("visibility", "hidden");
+
+  // Render box plots for each tool_id
+  groupedData.forEach((data, toolId) => {
+    const runtimeData = data.map(d => parseFloat(d.raw_value));
+
+    const center = x(toolId) as number + x.bandwidth() / 2;
+    const boxWidth = x.bandwidth() / 2;
+
+    const q1 = d3.quantile(runtimeData.sort(d3.ascending), 0.25) as number;
+    const median = d3.quantile(runtimeData.sort(d3.ascending), 0.5) as number;
+    const q3 = d3.quantile(runtimeData.sort(d3.ascending), 0.75) as number;
+    const interQuantileRange = q3 - q1;
+    const min = Math.max(d3.min(runtimeData) as number, q1 - 1.5 * interQuantileRange);
+    const max = Math.min(d3.max(runtimeData) as number, q3 + 1.5 * interQuantileRange);
+
+    // Box
+    svg.append('rect')
+      .attr('x', center - boxWidth / 2)
+      .attr('y', y(q3))
+      .attr('height', y(q1) - y(q3))
+      .attr('width', boxWidth)
+      .attr('stroke', 'black')
+      .style('fill', '#69b3a2');
+
+    // Median, min, max lines
+    svg.selectAll('line')
+      .data([min, median, max])
+      .enter()
+      .append('line')
+      .attr('x1', center - boxWidth / 2)
+      .attr('x2', center + boxWidth / 2)
+      .attr('y1', d => y(d))
+      .attr('y2', d => y(d))
+      .attr('stroke', 'black');
+
+    // Vertical lines for min-max
+    svg.append('line')
+      .attr('x1', center)
+      .attr('x2', center)
+      .attr('y1', y(min))
+      .attr('y2', y(q1))
+      .attr('stroke', 'black');
+
+    svg.append('line')
+      .attr('x1', center)
+      .attr('x2', center)
+      .attr('y1', y(max))
+      .attr('y2', y(q3))
+      .attr('stroke', 'black');
+
+    // Add individual data points (dots)
+    svg.selectAll("circle")
+      .data(runtimeData)
+      .enter()
+      .append("circle")
+      .attr("cx", center) // Align horizontally to the center of the group
+      .attr("cy", d => y(d)) // Map the data value to the y-axis
+      .attr("r", 5) // Radius of the circle
+      .style("fill", "#ff5722") // Fill color for the points
+      .attr("stroke", "black")
+      .on("mouseover", function (event, d) {
+        tooltip.style("visibility", "visible")
+          .text(`Value: ${d}`);
+        d3.select(this).style("fill", "yellow");
+      })
+      .on("mousemove", function (event) {
+        tooltip.style("top", `${event.pageY - 10}px`)
+          .style("left", `${event.pageX + 10}px`);
+      })
+      .on("mouseout", function () {
+        tooltip.style("visibility", "hidden");
+        d3.select(this).style("fill", "#ff5722");
+      });
+  });
+};
+
+// Lifecycle hook to render the plot once the component is mounted
+onMounted(() => {
+  renderBoxPlots();
+});
+
+</script>
+
+<style scoped>
+svg {
+  font-family: Arial, sans-serif;
+}
+</style>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
new file mode 100644
index 000000000000..cb9aed99233f
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { BCard } from "bootstrap-vue";
+import { GalaxyApi, type components } from "@/api";
+import { computed, ref, watch } from "vue";
+import type JobMetrics from "../JobMetrics/JobMetrics.vue";
+import { errorMessageAsString } from "@/utils/simple-error";
+import MetricsBoxPlot from "./MetricsBoxPlots.vue";
+
+const props = defineProps({
+    invocationId: {
+        type: String,
+        required: true,
+    },
+});
+
+
+const jobMetrics = ref<components["schemas"]["JobMetric"][]>()
+const fetchError = ref<string>()
+
+async function fetchMetrics() {
+    const {data, error} = await GalaxyApi().GET("/api/invocations/{invocation_id}/metrics", {
+        params: {
+            path: {
+                invocation_id: props.invocationId
+            }
+        }
+    })
+    console.log("data", data, error);
+    if (error) {
+        fetchError.value = errorMessageAsString(error)
+    } else {
+        jobMetrics.value = data
+    }
+}
+
+
+watch((props), () => fetchMetrics(), { immediate: true })
+
+const wallclock = computed(() => {
+    return jobMetrics.value?.filter((jobMetric) => jobMetric.name == "runtime_seconds")
+})
+
+</script>
+
+<template>
+    <MetricsBoxPlot v-if="wallclock" :job-data="wallclock"/>
+    <!--
+    <div>
+        {{ jobMetrics }}
+    </div>  
+    -->
+</template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index e035bc9b7dbe..bcf03f61b816 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -13,6 +13,7 @@ import { isTerminal, jobCount, runningCount } from "./util";
 
 import InvocationReport from "../Workflow/InvocationReport.vue";
 import WorkflowInvocationExportOptions from "./WorkflowInvocationExportOptions.vue";
+import WorkflowInvocationMetrics from "./WorkflowInvocationMetrics.vue";
 import WorkflowInvocationHeader from "./WorkflowInvocationHeader.vue";
 import WorkflowInvocationInputOutputTabs from "./WorkflowInvocationInputOutputTabs.vue";
 import WorkflowInvocationOverview from "./WorkflowInvocationOverview.vue";
@@ -185,6 +186,9 @@ function cancelWorkflowSchedulingLocal() {
                     <LoadingSpan message="Waiting to complete invocation" />
                 </BAlert>
             </BTab>
+            <BTab title="Metrics">
+                <WorkflowInvocationMetrics :invocation-id="invocation.id"></WorkflowInvocationMetrics>
+            </BTab>
         </BTabs>
     </div>
     <BAlert v-else-if="errorMessage" variant="danger" show>
diff --git a/lib/galaxy/managers/jobs.py b/lib/galaxy/managers/jobs.py
index 1d4a61dac6f0..be9d0083567b 100644
--- a/lib/galaxy/managers/jobs.py
+++ b/lib/galaxy/managers/jobs.py
@@ -54,6 +54,7 @@
     ImplicitCollectionJobs,
     ImplicitCollectionJobsJobAssociation,
     Job,
+    JobMetricNumeric,
     JobParameter,
     User,
     Workflow,
@@ -729,6 +730,38 @@ def invocation_job_source_iter(sa_session, invocation_id):
             yield ("ImplicitCollectionJobs", row[1], row[2])
 
 
+def get_job_metrics_for_invocation(sa_session: galaxy_scoped_session, invocation_id: int):
+    single_job_stmnt = (
+        select(JobMetricNumeric, Job.tool_id)
+        .join(Job, JobMetricNumeric.job_id == Job.id)
+        .join(
+            WorkflowInvocationStep,
+            and_(
+                WorkflowInvocationStep.workflow_invocation_id == invocation_id, WorkflowInvocationStep.job_id == Job.id
+            ),
+        )
+    )
+    collection_job_stmnt = (
+        select(JobMetricNumeric, Job.tool_id)
+        .join(Job, JobMetricNumeric.job_id == Job.id)
+        .join(ImplicitCollectionJobsJobAssociation, Job.id == ImplicitCollectionJobsJobAssociation.job_id)
+        .join(
+            ImplicitCollectionJobs,
+            ImplicitCollectionJobs.id == ImplicitCollectionJobsJobAssociation.implicit_collection_jobs_id,
+        )
+        .join(
+            WorkflowInvocationStep,
+            and_(
+                WorkflowInvocationStep.workflow_invocation_id == invocation_id,
+                WorkflowInvocationStep.implicit_collection_jobs_id == ImplicitCollectionJobs.id,
+            ),
+        )
+    )
+    # should be sa_session.execute(single_job_stmnt.union(collection_job_stmnt)).all() but that returns
+    # columns instead of the job metrics ORM instance.
+    return list(sa_session.execute(single_job_stmnt).all()) + list(sa_session.execute(collection_job_stmnt).all())
+
+
 def fetch_job_states(sa_session, job_source_ids, job_source_types):
     assert len(job_source_ids) == len(job_source_types)
     job_ids = set()
@@ -911,6 +944,10 @@ def summarize_job_metrics(trans, job):
     Precondition: the caller has verified the job is accessible to the user
     represented by the trans parameter.
     """
+    return summarize_metrics(trans, job.metrics)
+
+
+def summarize_metrics(trans: ProvidesUserContext, job_metrics):
     safety_level = Safety.SAFE
     if trans.user_is_admin:
         safety_level = Safety.UNSAFE
@@ -922,7 +959,7 @@ def summarize_job_metrics(trans, job):
             m.metric_value,
             m.plugin,
         )
-        for m in job.metrics
+        for m in job_metrics
     ]
     dictifiable_metrics = trans.app.job_metrics.dictifiable_metrics(raw_metrics, safety_level)
     return [d.dict() for d in dictifiable_metrics]
diff --git a/lib/galaxy/schema/schema.py b/lib/galaxy/schema/schema.py
index 0d9646316e59..88460a3f425f 100644
--- a/lib/galaxy/schema/schema.py
+++ b/lib/galaxy/schema/schema.py
@@ -2171,6 +2171,10 @@ class JobMetric(Model):
     )
 
 
+class WorkflowJobMetric(JobMetric):
+    tool_id: str
+
+
 class JobMetricCollection(RootModel):
     """Represents a collection of metrics associated with a Job."""
 
diff --git a/lib/galaxy/webapps/galaxy/api/workflows.py b/lib/galaxy/webapps/galaxy/api/workflows.py
index c4abb88968c0..9348e25a977b 100644
--- a/lib/galaxy/webapps/galaxy/api/workflows.py
+++ b/lib/galaxy/webapps/galaxy/api/workflows.py
@@ -78,6 +78,7 @@
     ShareWithPayload,
     ShareWithStatus,
     SharingStatus,
+    WorkflowJobMetric,
     WorkflowLandingRequest,
     WorkflowSortByEnum,
 )
@@ -1759,3 +1760,11 @@ def workflow_invocation_jobs_summary(
     ) -> InvocationJobsResponse:
         """An alias for `GET /api/invocations/{invocation_id}/jobs_summary`. `workflow_id` is ignored."""
         return self.invocation_jobs_summary(trans=trans, invocation_id=invocation_id)
+
+    @router.get("/api/invocations/{invocation_id}/metrics")
+    def get_invocation_metrics(
+        self,
+        invocation_id: InvocationIDPathParam,
+        trans: ProvidesHistoryContext = DependsOnTrans,
+    ) -> List[WorkflowJobMetric]:
+        return self.invocations_service.show_invocation_metrics(trans=trans, invocation_id=invocation_id)
diff --git a/lib/galaxy/webapps/galaxy/services/invocations.py b/lib/galaxy/webapps/galaxy/services/invocations.py
index ce9610ac0422..4066a3dbfeaa 100644
--- a/lib/galaxy/webapps/galaxy/services/invocations.py
+++ b/lib/galaxy/webapps/galaxy/services/invocations.py
@@ -25,7 +25,9 @@
 from galaxy.managers.histories import HistoryManager
 from galaxy.managers.jobs import (
     fetch_job_states,
+    get_job_metrics_for_invocation,
     invocation_job_source_iter,
+    summarize_metrics,
 )
 from galaxy.managers.workflows import WorkflowsManager
 from galaxy.model import (
@@ -162,6 +164,18 @@ def show_invocation_step(self, trans, step_id) -> InvocationStep:
         )
         return self.serialize_workflow_invocation_step(wfi_step)
 
+    def show_invocation_metrics(self, trans: ProvidesHistoryContext, invocation_id: int):
+        extended_job_metrics = get_job_metrics_for_invocation(trans.sa_session, invocation_id)
+        job_metrics = []
+        tool_ids = []
+        for row in extended_job_metrics:
+            job_metrics.append(row[0])
+            tool_ids.append(row[1])
+        metrics_dict_list = summarize_metrics(trans, job_metrics)
+        for tool_id, metrics_dict in zip(tool_ids, metrics_dict_list):
+            metrics_dict["tool_id"] = tool_id
+        return metrics_dict_list
+
     def update_invocation_step(self, trans, step_id, action):
         wfi_step = self._workflows_manager.update_invocation_step(trans, step_id, action)
         return self.serialize_workflow_invocation_step(wfi_step)
diff --git a/lib/galaxy_test/api/test_workflows.py b/lib/galaxy_test/api/test_workflows.py
index 174985ad51d9..f18cdd8a760d 100644
--- a/lib/galaxy_test/api/test_workflows.py
+++ b/lib/galaxy_test/api/test_workflows.py
@@ -3499,6 +3499,39 @@ def test_workflow_new_autocreated_history(self):
         invocation_id = run_workflow_dict["id"]
         self.workflow_populator.wait_for_invocation_and_jobs(new_history_id, workflow_id, invocation_id)
 
+    def test_invocation_job_metrics_simple(self):
+        with self.dataset_populator.test_history() as history_id:
+            summary = self._run_workflow(WORKFLOW_SIMPLE, test_data={"input1": "hello world"}, history_id=history_id)
+            self.workflow_populator.wait_for_invocation_and_jobs(
+                history_id=history_id, workflow_id=summary.workflow_id, invocation_id=summary.invocation_id
+            )
+            job_metrics = self._get(f"invocations/{summary.invocation_id}/metrics").json()
+            galaxy_slots = [m for m in job_metrics if m["name"] == "galaxy_slots"]
+            assert len(galaxy_slots) == 1
+
+    def test_invocation_job_metrics_map_over(self):
+        with self.dataset_populator.test_history() as history_id:
+            summary = self._run_workflow(
+                WORKFLOW_SIMPLE,
+                test_data={
+                    "input1": {
+                        "collection_type": "list",
+                        "name": "the_dataset_list",
+                        "elements": [
+                            {"identifier": "el1", "value": "1.fastq", "type": "File"},
+                            {"identifier": "el2", "value": "1.fastq", "type": "File"},
+                        ],
+                    }
+                },
+                history_id=history_id,
+            )
+            self.workflow_populator.wait_for_invocation_and_jobs(
+                history_id=history_id, workflow_id=summary.workflow_id, invocation_id=summary.invocation_id
+            )
+            job_metrics = self._get(f"invocations/{summary.invocation_id}/metrics").json()
+            galaxy_slots = [m for m in job_metrics if m["name"] == "galaxy_slots"]
+            assert len(galaxy_slots) == 2
+
     def test_workflow_output_dataset(self):
         with self.dataset_populator.test_history() as history_id:
             summary = self._run_workflow(WORKFLOW_SIMPLE, test_data={"input1": "hello world"}, history_id=history_id)

From bcf212dab41b4fede0223083536eb1ee5648f565 Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Wed, 23 Oct 2024 22:16:02 -0400
Subject: [PATCH 2/6] Add basic boxplot

---
 client/package.json                           |   5 +
 .../MetricsBoxPlots.vue                       | 169 ------
 .../WorkflowInvocationState/VegaWrapper.vue   |  45 ++
 .../WorkflowInvocationMetrics.vue             | 151 +++++-
 .../WorkflowInvocationState.vue               |   4 +-
 client/yarn.lock                              | 511 +++++++++++++++++-
 6 files changed, 673 insertions(+), 212 deletions(-)
 delete mode 100644 client/src/components/WorkflowInvocationState/MetricsBoxPlots.vue
 create mode 100644 client/src/components/WorkflowInvocationState/VegaWrapper.vue

diff --git a/client/package.json b/client/package.json
index a4f2c4b695d2..b2a751ff3d94 100644
--- a/client/package.json
+++ b/client/package.json
@@ -62,6 +62,7 @@
     "dom-to-image": "^2.6.0",
     "dompurify": "^3.0.6",
     "dumpmeta-webpack-plugin": "^0.2.0",
+    "echarts": "^5.5.1",
     "elkjs": "^0.8.2",
     "file-saver": "^2.0.5",
     "flush-promises": "^1.0.2",
@@ -100,7 +101,11 @@
     "tus-js-client": "^3.1.1",
     "underscore": "^1.13.6",
     "util": "^0.12.5",
+    "vega": "^5.30.0",
+    "vega-embed": "^6.26.0",
+    "vega-lite": "^5.21.0",
     "vue": "^2.7.14",
+    "vue-echarts": "^7.0.3",
     "vue-infinite-scroll": "^2.0.2",
     "vue-multiselect": "^2.1.7",
     "vue-observe-visibility": "^1.0.0",
diff --git a/client/src/components/WorkflowInvocationState/MetricsBoxPlots.vue b/client/src/components/WorkflowInvocationState/MetricsBoxPlots.vue
deleted file mode 100644
index 1876190cc903..000000000000
--- a/client/src/components/WorkflowInvocationState/MetricsBoxPlots.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<template>
-  <div ref="boxPlot"></div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import * as d3 from 'd3';
-import { isTerminal } from './util';
-
-interface JobData {
-  title: string;
-  value: string;
-  plugin: string;
-  name: string;
-  raw_value: string;
-  tool_id: string;
-}
-
-
-const boxPlot = ref<HTMLElement | null>(null);
-
-// Define the job data (this can come from props or API in real scenario// Extract runtime seconds data
-// Define props
-const props = defineProps<{
-  jobData: JobData[];
-}>();
-
-// Function to render box plots for different tool_ids on the same graph
-const renderBoxPlots = () => {
-  const margin = { top: 10, right: 30, bottom: 50, left: 40 },
-    width = 800 - margin.left - margin.right,
-    height = 400 - margin.top - margin.bottom;
-
-  // Remove any previous content
-  d3.select(boxPlot.value).selectAll('*').remove();
-
-  // Group data by tool_id
-  const groupedData = d3.group(props.jobData, d => d.tool_id);
-
-  // Extract the tool_ids for the x-axis
-  const toolIds = Array.from(groupedData.keys());
-
-  // Create SVG
-  const svg = d3
-    .select(boxPlot.value)
-    .append('svg')
-    .attr('width', width + margin.left + margin.right)
-    .attr('height', height + margin.top + margin.bottom)
-    .append('g')
-    .attr('transform', `translate(${margin.left},${margin.top})`);
-
-  // X Scale: tool_ids on the x-axis
-  const x = d3.scaleBand()
-    .range([0, width])
-    .domain(toolIds)
-    .padding(0.4);
-
-  svg.append('g')
-    .attr('transform', `translate(0,${height})`)
-    .call(d3.axisBottom(x));
-
-  // Y Scale: common for all box plots
-  const allRuntimes = Array.from(props.jobData)
-    .filter(d => d.name === "runtime_seconds")
-    .map(d => parseFloat(d.raw_value));
-
-  const y = d3.scaleLinear()
-    .domain([0, d3.max(allRuntimes) as number])
-    .range([height, 0]);
-
-  svg.append('g').call(d3.axisLeft(y));
-
-  // Tooltip for individual dots
-  const tooltip = d3.select(boxPlot.value)
-    .append("div")
-    .style("position", "absolute")
-    .style("background", "lightgray")
-    .style("padding", "5px")
-    .style("border-radius", "5px")
-    .style("pointer-events", "none")
-    .style("visibility", "hidden");
-
-  // Render box plots for each tool_id
-  groupedData.forEach((data, toolId) => {
-    const runtimeData = data.map(d => parseFloat(d.raw_value));
-
-    const center = x(toolId) as number + x.bandwidth() / 2;
-    const boxWidth = x.bandwidth() / 2;
-
-    const q1 = d3.quantile(runtimeData.sort(d3.ascending), 0.25) as number;
-    const median = d3.quantile(runtimeData.sort(d3.ascending), 0.5) as number;
-    const q3 = d3.quantile(runtimeData.sort(d3.ascending), 0.75) as number;
-    const interQuantileRange = q3 - q1;
-    const min = Math.max(d3.min(runtimeData) as number, q1 - 1.5 * interQuantileRange);
-    const max = Math.min(d3.max(runtimeData) as number, q3 + 1.5 * interQuantileRange);
-
-    // Box
-    svg.append('rect')
-      .attr('x', center - boxWidth / 2)
-      .attr('y', y(q3))
-      .attr('height', y(q1) - y(q3))
-      .attr('width', boxWidth)
-      .attr('stroke', 'black')
-      .style('fill', '#69b3a2');
-
-    // Median, min, max lines
-    svg.selectAll('line')
-      .data([min, median, max])
-      .enter()
-      .append('line')
-      .attr('x1', center - boxWidth / 2)
-      .attr('x2', center + boxWidth / 2)
-      .attr('y1', d => y(d))
-      .attr('y2', d => y(d))
-      .attr('stroke', 'black');
-
-    // Vertical lines for min-max
-    svg.append('line')
-      .attr('x1', center)
-      .attr('x2', center)
-      .attr('y1', y(min))
-      .attr('y2', y(q1))
-      .attr('stroke', 'black');
-
-    svg.append('line')
-      .attr('x1', center)
-      .attr('x2', center)
-      .attr('y1', y(max))
-      .attr('y2', y(q3))
-      .attr('stroke', 'black');
-
-    // Add individual data points (dots)
-    svg.selectAll("circle")
-      .data(runtimeData)
-      .enter()
-      .append("circle")
-      .attr("cx", center) // Align horizontally to the center of the group
-      .attr("cy", d => y(d)) // Map the data value to the y-axis
-      .attr("r", 5) // Radius of the circle
-      .style("fill", "#ff5722") // Fill color for the points
-      .attr("stroke", "black")
-      .on("mouseover", function (event, d) {
-        tooltip.style("visibility", "visible")
-          .text(`Value: ${d}`);
-        d3.select(this).style("fill", "yellow");
-      })
-      .on("mousemove", function (event) {
-        tooltip.style("top", `${event.pageY - 10}px`)
-          .style("left", `${event.pageX + 10}px`);
-      })
-      .on("mouseout", function () {
-        tooltip.style("visibility", "hidden");
-        d3.select(this).style("fill", "#ff5722");
-      });
-  });
-};
-
-// Lifecycle hook to render the plot once the component is mounted
-onMounted(() => {
-  renderBoxPlots();
-});
-
-</script>
-
-<style scoped>
-svg {
-  font-family: Arial, sans-serif;
-}
-</style>
diff --git a/client/src/components/WorkflowInvocationState/VegaWrapper.vue b/client/src/components/WorkflowInvocationState/VegaWrapper.vue
new file mode 100644
index 000000000000..586fa124cf0e
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/VegaWrapper.vue
@@ -0,0 +1,45 @@
+<template>
+    <div ref="chartContainer" class="chart"></div>
+</template>
+
+<script setup lang="ts">
+import embed, { type VisualizationSpec } from "vega-embed";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+export interface VisSpec {
+    spec: VisualizationSpec;
+}
+
+const props = defineProps<VisSpec>();
+
+const chartContainer = ref<HTMLDivElement | null>(null);
+let vegaView: any;
+
+async function embedChart() {
+    if (vegaView) {
+        vegaView.finalize();
+    }
+    if (chartContainer.value !== null) {
+        const result = await embed(chartContainer.value, props.spec, { renderer: "svg" });
+        vegaView = result.view;
+    }
+}
+
+onMounted(embedChart);
+
+watch(props, embedChart, { immediate: true, deep: true });
+
+// Cleanup the chart when the component is unmounted
+onBeforeUnmount(() => {
+    if (vegaView) {
+        vegaView.finalize();
+    }
+});
+</script>
+
+<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 cb9aed99233f..a924bc54aed1 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { BCard } from "bootstrap-vue";
-import { GalaxyApi, type components } from "@/api";
 import { computed, ref, watch } from "vue";
-import type JobMetrics from "../JobMetrics/JobMetrics.vue";
+
+import { type components, GalaxyApi } from "@/api";
 import { errorMessageAsString } from "@/utils/simple-error";
-import MetricsBoxPlot from "./MetricsBoxPlots.vue";
+import { type ComputedRef } from "vue";
+import { type VisualizationSpec } from "vega-embed";
+
+import VegaWrapper from "./VegaWrapper.vue";
 
 const props = defineProps({
     invocationId: {
@@ -13,40 +15,141 @@ const props = defineProps({
     },
 });
 
-
-const jobMetrics = ref<components["schemas"]["JobMetric"][]>()
-const fetchError = ref<string>()
+const jobMetrics = ref<components["schemas"]["WorkflowJobMetric"][]>();
+const fetchError = ref<string>();
 
 async function fetchMetrics() {
-    const {data, error} = await GalaxyApi().GET("/api/invocations/{invocation_id}/metrics", {
+    const { data, error } = await GalaxyApi().GET("/api/invocations/{invocation_id}/metrics", {
         params: {
             path: {
-                invocation_id: props.invocationId
-            }
-        }
-    })
-    console.log("data", data, error);
+                invocation_id: props.invocationId,
+            },
+        },
+    });
     if (error) {
-        fetchError.value = errorMessageAsString(error)
+        fetchError.value = errorMessageAsString(error);
     } else {
-        jobMetrics.value = data
+        jobMetrics.value = data;
     }
 }
 
+watch(props, () => fetchMetrics(), { immediate: true });
+
+interface boxplotData {
+    x_title: string;
+    y_title: string;
+    values?: { x: string; y: Number }[];
+}
+
+const wallclock: ComputedRef<boxplotData> = computed(() => {
+    const wallclock = jobMetrics.value?.filter((jobMetric) => jobMetric.name == "runtime_seconds");
+    const values = wallclock?.map((item) => {
+        return {
+            y: parseFloat(item.raw_value),
+            x: item.tool_id,
+        };
+    });
+    return {
+        x_title: "Tool ID",
+        y_title: "Runtime (in Seconds)",
+        values,
+    };
+});
+
+const coresAllocated: ComputedRef<boxplotData> = computed(() => {
+    const coresAllocated = jobMetrics.value?.filter((jobMetric) => jobMetric.name == "galaxy_slots");
+    const values = coresAllocated?.map((item) => {
+        return {
+            y: parseFloat(item.raw_value),
+            x: item.tool_id,
+        };
+    });
+    return {
+        x_title: "Tool ID",
+        y_title: "Cores Allocated",
+        values,
+    };
+});
 
-watch((props), () => fetchMetrics(), { immediate: true })
+const memoryAllocated: ComputedRef<boxplotData> = computed(() => {
+    const memoryAllocated = jobMetrics.value?.filter((jobMetric) => jobMetric.name == "galaxy_memory_mb");
+    const values = memoryAllocated?.map((item) => {
+        return {
+            y: parseFloat(item.raw_value),
+            x: item.tool_id,
+        };
+    });
+    return {
+        x_title: "Tool ID",
+        y_title: "Memory Allocated (in MB)",
+        values,
+    };
+});
 
-const wallclock = computed(() => {
-    return jobMetrics.value?.filter((jobMetric) => jobMetric.name == "runtime_seconds")
-})
+function itemToSpec(item: boxplotData) {
+    const spec: VisualizationSpec = {
+        $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+        description: "A boxplot with jittered points.",
+        data: {
+            values: item.values!,
+        },
+        transform: [
+            {
+                calculate: "random() - 0.5",
+                as: "random_jitter",
+            },
+        ],
+        layer: [
+            {
+                mark: { type: "boxplot", opacity: 0.5 },
+                encoding: {
+                    x: { field: "x", type: "nominal" },
+                    y: { field: "y", type: "quantitative" },
+                },
+                width: "container",
+            },
+            {
+                mark: {
+                    type: "point",
+                    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,
+                    },
+                },
+                width: "container",
+            },
+        ],
+    };
+    return spec;
+}
 
+const specs = computed(() => {
+    const items = [wallclock.value, coresAllocated.value, memoryAllocated.value].filter((item) => item.values?.length);
+    const specs = Object.fromEntries(items.map((item) => [item.y_title, itemToSpec(item)]));
+    return specs;
+});
 </script>
 
 <template>
-    <MetricsBoxPlot v-if="wallclock" :job-data="wallclock"/>
-    <!--
     <div>
-        {{ jobMetrics }}
-    </div>  
-    -->
+        <div v-for="(spec, key) in specs" :key="key">
+            <h2 class="h-l truncate text-center">{{ key }}</h2>
+            <VegaWrapper :spec="spec" />
+        </div>
+    </div>
 </template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index bcf03f61b816..bbc3d4a4f443 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -13,9 +13,9 @@ import { isTerminal, jobCount, runningCount } from "./util";
 
 import InvocationReport from "../Workflow/InvocationReport.vue";
 import WorkflowInvocationExportOptions from "./WorkflowInvocationExportOptions.vue";
-import WorkflowInvocationMetrics from "./WorkflowInvocationMetrics.vue";
 import WorkflowInvocationHeader from "./WorkflowInvocationHeader.vue";
 import WorkflowInvocationInputOutputTabs from "./WorkflowInvocationInputOutputTabs.vue";
+import WorkflowInvocationMetrics from "./WorkflowInvocationMetrics.vue";
 import WorkflowInvocationOverview from "./WorkflowInvocationOverview.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -186,7 +186,7 @@ function cancelWorkflowSchedulingLocal() {
                     <LoadingSpan message="Waiting to complete invocation" />
                 </BAlert>
             </BTab>
-            <BTab title="Metrics">
+            <BTab title="Metrics" :lazy="true">
                 <WorkflowInvocationMetrics :invocation-id="invocation.id"></WorkflowInvocationMetrics>
             </BTab>
         </BTabs>
diff --git a/client/yarn.lock b/client/yarn.lock
index 46d7ba982257..48e01581c8b9 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2507,6 +2507,11 @@
   dependencies:
     "@types/trusted-types" "*"
 
+"@types/estree@^1.0.0":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
+  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
+
 "@types/estree@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@@ -2536,6 +2541,11 @@
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
   integrity sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==
 
+"@types/geojson@7946.0.4":
+  version "7946.0.4"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.4.tgz#4e049756383c3f055dd8f3d24e63fb543e98eb07"
+  integrity sha512-MHmwBtCb7OCv1DSivz2UNJXPGU/1btAWRKlqJ2saEhVJkpkvqHMMaOpKg0v4sAbDWSQekHGvPVMM8nQ+Jen03Q==
+
 "@types/graceful-fs@^4.1.3":
   version "4.1.5"
   resolved "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz"
@@ -4314,6 +4324,11 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@2, commander@^2.19.0, commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 commander@7, commander@^7.2.0:
   version "7.2.0"
   resolved "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz"
@@ -4324,11 +4339,6 @@ commander@^10.0.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
   integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
 
-commander@^2.19.0, commander@^2.20.0:
-  version "2.20.3"
-  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
 component-emitter@^1.2.1:
   version "1.3.0"
   resolved "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz"
@@ -4722,6 +4732,13 @@ custom-error-instance@2.1.1:
   resolved "https://registry.npmjs.org/custom-error-instance/-/custom-error-instance-2.1.1.tgz"
   integrity sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg==
 
+"d3-array@1 - 3", d3-array@3.2.4, d3-array@^3.2.2:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
+  integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==
+  dependencies:
+    internmap "1 - 2"
+
 "d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3, d3-array@^3.2.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.1.tgz#39331ea706f5709417d31bbb6ec152e0328b39b3"
@@ -4752,7 +4769,7 @@ d3-chord@3:
   dependencies:
     d3-path "1 - 3"
 
-"d3-color@1 - 3", d3-color@3:
+"d3-color@1 - 3", d3-color@3, d3-color@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
   integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
@@ -4771,6 +4788,13 @@ d3-delaunay@6:
   dependencies:
     delaunator "5"
 
+d3-delaunay@^6.0.2:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.4.tgz#98169038733a0a5babbeda55054f795bb9e4a58b"
+  integrity sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==
+  dependencies:
+    delaunator "5"
+
 "d3-dispatch@1 - 3", d3-dispatch@3:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz#5fc75284e9c2375c36c839411a0cf550cbfc4d5e"
@@ -4784,7 +4808,7 @@ d3-delaunay@6:
     d3-dispatch "1 - 3"
     d3-selection "3"
 
-"d3-dsv@1 - 3", d3-dsv@3:
+"d3-dsv@1 - 3", d3-dsv@3, d3-dsv@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-3.0.1.tgz#c63af978f4d6a0d084a52a673922be2160789b73"
   integrity sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==
@@ -4805,7 +4829,7 @@ d3-fetch@3:
   dependencies:
     d3-dsv "1 - 3"
 
-d3-force@3:
+d3-force@3, d3-force@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-3.0.0.tgz#3e2ba1a61e70888fe3d9194e30d6d14eece155c4"
   integrity sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==
@@ -4814,11 +4838,27 @@ d3-force@3:
     d3-quadtree "1 - 3"
     d3-timer "1 - 3"
 
-"d3-format@1 - 3", d3-format@3:
+"d3-format@1 - 3", d3-format@3, d3-format@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
   integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
 
+d3-geo-projection@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/d3-geo-projection/-/d3-geo-projection-4.0.0.tgz#dc229e5ead78d31869a4e87cf1f45bd2716c48ca"
+  integrity sha512-p0bK60CEzph1iqmnxut7d/1kyTmm3UWtPlwdkM31AU+LW+BXazd5zJdoCn7VFxNCHXRngPHRnsNn5uGjLRGndg==
+  dependencies:
+    commander "7"
+    d3-array "1 - 3"
+    d3-geo "1.12.0 - 3"
+
+"d3-geo@1.12.0 - 3", d3-geo@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-3.1.1.tgz#6027cf51246f9b2ebd64f99e01dc7c3364033a4d"
+  integrity sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==
+  dependencies:
+    d3-array "2.5.0 - 3"
+
 d3-geo@3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-3.1.0.tgz#74fd54e1f4cebd5185ac2039217a98d39b0a4c0e"
@@ -4826,12 +4866,12 @@ d3-geo@3:
   dependencies:
     d3-array "2.5.0 - 3"
 
-d3-hierarchy@3:
+d3-hierarchy@3, d3-hierarchy@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz#b01cd42c1eed3d46db77a5966cf726f8c09160c6"
   integrity sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==
 
-"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3:
+"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3, d3-interpolate@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
   integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
@@ -4866,7 +4906,15 @@ d3-scale-chromatic@3:
     d3-color "1 - 3"
     d3-interpolate "1 - 3"
 
-d3-scale@4:
+d3-scale-chromatic@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz#34c39da298b23c20e02f1a4b239bd0f22e7f1314"
+  integrity sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==
+  dependencies:
+    d3-color "1 - 3"
+    d3-interpolate "1 - 3"
+
+d3-scale@4, d3-scale@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
   integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
@@ -4882,28 +4930,28 @@ d3-scale@4:
   resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
   integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
 
-d3-shape@3:
+d3-shape@3, d3-shape@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
   integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==
   dependencies:
     d3-path "^3.1.0"
 
-"d3-time-format@2 - 4", d3-time-format@4:
+"d3-time-format@2 - 4", d3-time-format@4, d3-time-format@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
   integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
   dependencies:
     d3-time "1 - 3"
 
-"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@3:
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@3, d3-time@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
   integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
   dependencies:
     d3-array "2 - 3"
 
-"d3-timer@1 - 3", d3-timer@3:
+"d3-timer@1 - 3", d3-timer@3, d3-timer@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
   integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
@@ -5327,6 +5375,14 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
+echarts@^5.5.1:
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.5.1.tgz#8dc9c68d0c548934bedcb5f633db07ed1dd2101c"
+  integrity sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.6.0"
+
 editorconfig@^0.15.3:
   version "0.15.3"
   resolved "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz"
@@ -6071,6 +6127,11 @@ fast-glob@^3.3.0:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-json-patch@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/fast-json-patch/-/fast-json-patch-3.1.1.tgz#85064ea1b1ebf97a3f7ad01e23f9337e72c66947"
+  integrity sha512-vf6IHUX2SBcA+5/+4883dsIjpBTqmfBjmYiWK1savxQmFk4JfBMLa7ynTYOs1Rolp/T1betJxHiGD3g1Mn8lUQ==
+
 fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
@@ -8129,6 +8190,11 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
+json-stringify-pretty-compact@^3.0.0, json-stringify-pretty-compact@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/json-stringify-pretty-compact/-/json-stringify-pretty-compact-3.0.0.tgz#f71ef9d82ef16483a407869556588e91b681d9ab"
+  integrity sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA==
+
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz"
@@ -10526,6 +10592,11 @@ semver@^7.3.4, semver@^7.3.6, semver@^7.3.8, semver@^7.5.3, semver@^7.5.4:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.6.2:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
 send@0.19.0:
   version "0.19.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
@@ -11367,6 +11438,13 @@ toidentifier@1.0.1:
   resolved "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
+topojson-client@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/topojson-client/-/topojson-client-3.1.0.tgz#22e8b1ed08a2b922feeb4af6f53b6ef09a467b99"
+  integrity sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==
+  dependencies:
+    commander "2"
+
 tough-cookie@^4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
@@ -11468,6 +11546,11 @@ tsconfig@^7.0.0:
     strip-bom "^3.0.0"
     strip-json-comments "^2.0.0"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
@@ -11488,6 +11571,16 @@ tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
+tslib@^2.6.3:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.0.tgz#d124c86c3c05a40a91e6fdea4021bd31d377971b"
+  integrity sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==
+
+tslib@~2.6.3:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
+  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
+
 tus-js-client@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/tus-js-client/-/tus-js-client-3.1.1.tgz#87cb72e528d274d0a8ff62e9c18165f1e901ce9e"
@@ -11837,6 +11930,371 @@ vary@~1.1.2:
   resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+vega-canvas@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/vega-canvas/-/vega-canvas-1.2.7.tgz#cf62169518f5dcd91d24ad352998c2248f8974fb"
+  integrity sha512-OkJ9CACVcN9R5Pi9uF6MZBF06pO6qFpDYHWSKBJsdHP5o724KrsgR6UvbnXFH82FdsiTOff/HqjuaG8C7FL+9Q==
+
+vega-crossfilter@~4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/vega-crossfilter/-/vega-crossfilter-4.1.2.tgz#810281c279b3592310f12814bc61206dd42ca61d"
+  integrity sha512-J7KVEXkpfRJBfRvwLxn5vNCzQCNkrnzmDvkvwhuiwT4gPm5sk7MK5TuUP8GCl/iKYw+kWeVXEtrVHwWtug+bcQ==
+  dependencies:
+    d3-array "^3.2.2"
+    vega-dataflow "^5.7.6"
+    vega-util "^1.17.2"
+
+vega-dataflow@^5.7.6, vega-dataflow@~5.7.6:
+  version "5.7.6"
+  resolved "https://registry.yarnpkg.com/vega-dataflow/-/vega-dataflow-5.7.6.tgz#21dfad9120cb18d9aeaed578658670839d1adc95"
+  integrity sha512-9Md8+5iUC1MVKPKDyZ7pCEHk6I9am+DgaMzZqo/27O/KI4f23/WQXPyuI8jbNmc/mkm340P0TKREmzL5M7+2Dg==
+  dependencies:
+    vega-format "^1.1.2"
+    vega-loader "^4.5.2"
+    vega-util "^1.17.2"
+
+vega-embed@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/vega-embed/-/vega-embed-6.26.0.tgz#25ca51783b2819adf6e6330ae6dd5771e8da8653"
+  integrity sha512-AZCTdKHDAuhp6TFZRQOOs332tStCwZr/5e4uZMNEuJL69A57cT66NNZJdNiCP6u66REzIToYtMJhMTL9wl5B3A==
+  dependencies:
+    fast-json-patch "^3.1.1"
+    json-stringify-pretty-compact "^3.0.0"
+    semver "^7.6.2"
+    tslib "^2.6.3"
+    vega-interpreter "^1.0.5"
+    vega-schema-url-parser "^2.2.0"
+    vega-themes "^2.15.0"
+    vega-tooltip "^0.34.0"
+
+vega-encode@~4.10.1:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/vega-encode/-/vega-encode-4.10.1.tgz#1656e20396db99c414f495704ef3d9cff99631df"
+  integrity sha512-d25nVKZDrg109rC65M8uxE+7iUrTxktaqgK4fU3XZBgpWlh1K4UbU5nDag7kiHVVN4tKqwgd+synEotra9TiVQ==
+  dependencies:
+    d3-array "^3.2.2"
+    d3-interpolate "^3.0.1"
+    vega-dataflow "^5.7.6"
+    vega-scale "^7.4.1"
+    vega-util "^1.17.2"
+
+vega-event-selector@^3.0.1, vega-event-selector@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vega-event-selector/-/vega-event-selector-3.0.1.tgz#b99e92147b338158f8079d81b28b2e7199c2e259"
+  integrity sha512-K5zd7s5tjr1LiOOkjGpcVls8GsH/f2CWCrWcpKy74gTCp+llCdwz0Enqo013ZlGaRNjfgD/o1caJRt3GSaec4A==
+
+vega-expression@^5.0.1, vega-expression@^5.1.1, vega-expression@~5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/vega-expression/-/vega-expression-5.1.1.tgz#9b2d287a1f34d990577c9798ae68ec88453815ef"
+  integrity sha512-zv9L1Hm0KHE9M7mldHyz8sXbGu3KmC0Cdk7qfHkcTNS75Jpsem6jkbu6ZAwx5cNUeW91AxUQOu77r4mygq2wUQ==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    vega-util "^1.17.2"
+
+vega-force@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/vega-force/-/vega-force-4.2.1.tgz#bdce6ec8572867b4ff2fb7e09d2894798c5358ec"
+  integrity sha512-2BcuuqFr77vcCyKfcpedNFeYMxi+XEFCrlgLWNx7YV0PI8pdP5y/yPkzyuE9Tb894+KkRAvfQHZRAshcnFNcMw==
+  dependencies:
+    d3-force "^3.0.0"
+    vega-dataflow "^5.7.6"
+    vega-util "^1.17.2"
+
+vega-format@^1.1.2, vega-format@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vega-format/-/vega-format-1.1.2.tgz#d344ba8a2680144e92127459c149a4181e9e7f84"
+  integrity sha512-0kUfAj0dg0U6GcEY0Kp6LiSTCZ8l8jl1qVdQyToMyKmtZg/q56qsiJQZy3WWRr1MtWkTIZL71xSJXgjwjeUaAw==
+  dependencies:
+    d3-array "^3.2.2"
+    d3-format "^3.1.0"
+    d3-time-format "^4.1.0"
+    vega-time "^2.1.2"
+    vega-util "^1.17.2"
+
+vega-functions@^5.15.0, vega-functions@~5.15.0:
+  version "5.15.0"
+  resolved "https://registry.yarnpkg.com/vega-functions/-/vega-functions-5.15.0.tgz#a7905e1dd6457efe265dbf954cbc0a5721c484b0"
+  integrity sha512-pCqmm5efd+3M65jrJGxEy3UGuRksmK6DnWijoSNocnxdCBxez+yqUUVX9o2pN8VxMe3648vZnR9/Vk5CXqRvIQ==
+  dependencies:
+    d3-array "^3.2.2"
+    d3-color "^3.1.0"
+    d3-geo "^3.1.0"
+    vega-dataflow "^5.7.6"
+    vega-expression "^5.1.1"
+    vega-scale "^7.4.1"
+    vega-scenegraph "^4.13.0"
+    vega-selections "^5.4.2"
+    vega-statistics "^1.9.0"
+    vega-time "^2.1.2"
+    vega-util "^1.17.2"
+
+vega-geo@~4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/vega-geo/-/vega-geo-4.4.2.tgz#da4a08ee39c9488bfc4fe6493779f584dd8bb412"
+  integrity sha512-unuV/UxUHf6UJu6GYxMZonC3SZlMfFXYLOkgEsRSvmsMPt3+CVv8FmG88dXNRUJUrdROrJepgecqx0jOwMSnGA==
+  dependencies:
+    d3-array "^3.2.2"
+    d3-color "^3.1.0"
+    d3-geo "^3.1.0"
+    vega-canvas "^1.2.7"
+    vega-dataflow "^5.7.6"
+    vega-projection "^1.6.1"
+    vega-statistics "^1.9.0"
+    vega-util "^1.17.2"
+
+vega-hierarchy@~4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/vega-hierarchy/-/vega-hierarchy-4.1.2.tgz#e42938c42527b392b110b1e3bf89eaa456dba1b8"
+  integrity sha512-m+xDtT5092YPSnV0rdTLW+AWmoCb+A54JQ66MUJwiDBpKxvfKnTiQeuiWDU2YudjUoXZN9EBOcI6QHF8H2Lu2A==
+  dependencies:
+    d3-hierarchy "^3.1.2"
+    vega-dataflow "^5.7.6"
+    vega-util "^1.17.2"
+
+vega-interpreter@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/vega-interpreter/-/vega-interpreter-1.0.5.tgz#19e1d1b5f84a4ea9cb25c4e90a05ce16cd058484"
+  integrity sha512-po6oTOmeQqr1tzTCdD15tYxAQLeUnOVirAysgVEemzl+vfmvcEP7jQmlc51jz0jMA+WsbmE6oJywisQPu/H0Bg==
+
+vega-label@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/vega-label/-/vega-label-1.3.0.tgz#21b3e5ef40e63f51ac987a449d183068c4961503"
+  integrity sha512-EfSFSCWAwVPsklM5g0gUEuohALgryuGC/SKMmsOH7dYT/bywmLBZhLVbrE+IHJAUauoGrMhYw1mqnXL/0giJBg==
+  dependencies:
+    vega-canvas "^1.2.7"
+    vega-dataflow "^5.7.6"
+    vega-scenegraph "^4.13.0"
+    vega-util "^1.17.2"
+
+vega-lite@^5.21.0:
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/vega-lite/-/vega-lite-5.21.0.tgz#21ce8b905a02ba364b7b1d7ef471497ba3e12e93"
+  integrity sha512-hNxM9nuMqpI1vkUOhEx6ewEf23WWLmJxSFJ4TA86AW43ixJyqcLV+iSCO0NipuVTE0rlDcc2e8joSewWyOlEwA==
+  dependencies:
+    json-stringify-pretty-compact "~3.0.0"
+    tslib "~2.6.3"
+    vega-event-selector "~3.0.1"
+    vega-expression "~5.1.1"
+    vega-util "~1.17.2"
+    yargs "~17.7.2"
+
+vega-loader@^4.5.2, vega-loader@~4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/vega-loader/-/vega-loader-4.5.2.tgz#7212f093c397b153f69f7e6cfef47817c17c5c01"
+  integrity sha512-ktIdGz3DRIS3XfTP9lJ6oMT5cKwC86nQkjUbXZbOtwXQFVNE2xVWBuH13GP6FKUZxg5hJCMtb5v/e/fwTvhKsQ==
+  dependencies:
+    d3-dsv "^3.0.1"
+    node-fetch "^2.6.7"
+    topojson-client "^3.1.0"
+    vega-format "^1.1.2"
+    vega-util "^1.17.2"
+
+vega-parser@~6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/vega-parser/-/vega-parser-6.4.0.tgz#6a12f07f0f9178492a17842efe7e1f51a2d36bed"
+  integrity sha512-/hFIJs0yITxfvLIfhhcpUrcbKvu4UZYoMGmly5PSsbgo60oAsVQW8ZbX2Ji3iNFqZJh1ifoX/P0j+9wep1OISw==
+  dependencies:
+    vega-dataflow "^5.7.6"
+    vega-event-selector "^3.0.1"
+    vega-functions "^5.15.0"
+    vega-scale "^7.4.1"
+    vega-util "^1.17.2"
+
+vega-projection@^1.6.1, vega-projection@~1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/vega-projection/-/vega-projection-1.6.1.tgz#da687abc60f4a93bb888385beb23e0a1000f8b57"
+  integrity sha512-sqfnAAHumU7MWU1tQN3b6HNgKGF3legek0uLHhjLKcDJQxEc7kwcD18txFz2ffQks6d5j+AUhBiq4GARWf0DEQ==
+  dependencies:
+    d3-geo "^3.1.0"
+    d3-geo-projection "^4.0.0"
+    vega-scale "^7.4.1"
+
+vega-regression@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/vega-regression/-/vega-regression-1.3.0.tgz#3e68e234fa9460041fac082c6a3469c896d436a8"
+  integrity sha512-gxOQfmV7Ft/MYKpXDEo09WZyBuKOBqxqDRWay9KtfGq/E0Y4vbTPsWLv2cB1ToPJdKE6XSN6Re9tCIw5M/yMUg==
+  dependencies:
+    d3-array "^3.2.2"
+    vega-dataflow "^5.7.6"
+    vega-statistics "^1.9.0"
+    vega-util "^1.17.2"
+
+vega-runtime@^6.2.0, vega-runtime@~6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/vega-runtime/-/vega-runtime-6.2.0.tgz#10f435089fff11d8e1b49cb0cbab8041731e6f06"
+  integrity sha512-30UXbujWjKNd5aeP+oeHuwFmzuyVYlBj4aDy9+AjfWLECu8wJt4K01vwegcaGPdCWcPLVIv4Oa9Lob4mcXn5KQ==
+  dependencies:
+    vega-dataflow "^5.7.6"
+    vega-util "^1.17.2"
+
+vega-scale@^7.4.1, vega-scale@~7.4.1:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/vega-scale/-/vega-scale-7.4.1.tgz#2dcd3e39ebb00269b03a8be86e44c7b48c67442a"
+  integrity sha512-dArA28DbV/M92O2QvswnzCmQ4bq9WwLKUoyhqFYWCltmDwkmvX7yhqiFLFMWPItIm7mi4Qyoygby6r4DKd1X2A==
+  dependencies:
+    d3-array "^3.2.2"
+    d3-interpolate "^3.0.1"
+    d3-scale "^4.0.2"
+    d3-scale-chromatic "^3.1.0"
+    vega-time "^2.1.2"
+    vega-util "^1.17.2"
+
+vega-scenegraph@^4.13.0, vega-scenegraph@~4.13.0:
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/vega-scenegraph/-/vega-scenegraph-4.13.0.tgz#c4fa5c82773f6244a9ca8b01a44e380adf03fabd"
+  integrity sha512-nfl45XtuqB5CxyIZJ+bbJ+dofzosPCRlmF+eUQo+0J23NkNXsTzur+1krJDSdhcw0SOYs4sbYRoMz1cpuOM4+Q==
+  dependencies:
+    d3-path "^3.1.0"
+    d3-shape "^3.2.0"
+    vega-canvas "^1.2.7"
+    vega-loader "^4.5.2"
+    vega-scale "^7.4.1"
+    vega-util "^1.17.2"
+
+vega-schema-url-parser@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/vega-schema-url-parser/-/vega-schema-url-parser-2.2.0.tgz#a0d1e02915adfbfcb1fd517c8c2ebe2419985c1e"
+  integrity sha512-yAtdBnfYOhECv9YC70H2gEiqfIbVkq09aaE4y/9V/ovEFmH9gPKaEgzIZqgT7PSPQjKhsNkb6jk6XvSoboxOBw==
+
+vega-selections@^5.4.2:
+  version "5.4.2"
+  resolved "https://registry.yarnpkg.com/vega-selections/-/vega-selections-5.4.2.tgz#cb4f41f5d4c0ee924ebf131b8dbd43e7885bcad4"
+  integrity sha512-99FUhYmg0jOJr2/K4TcEURmJRkuibrCDc8KBUX7qcQEITzrZ5R6a4QE+sarCvbb3hi8aA9GV2oyST6MQeA9mgQ==
+  dependencies:
+    d3-array "3.2.4"
+    vega-expression "^5.0.1"
+    vega-util "^1.17.1"
+
+vega-statistics@^1.9.0, vega-statistics@~1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/vega-statistics/-/vega-statistics-1.9.0.tgz#7d6139cea496b22d60decfa6abd73346f70206f9"
+  integrity sha512-GAqS7mkatpXcMCQKWtFu1eMUKLUymjInU0O8kXshWaQrVWjPIO2lllZ1VNhdgE0qGj4oOIRRS11kzuijLshGXQ==
+  dependencies:
+    d3-array "^3.2.2"
+
+vega-themes@^2.15.0:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/vega-themes/-/vega-themes-2.15.0.tgz#cf7592efb45406957e9beb67d7033ee5f7b7a511"
+  integrity sha512-DicRAKG9z+23A+rH/3w3QjJvKnlGhSbbUXGjBvYGseZ1lvj9KQ0BXZ2NS/+MKns59LNpFNHGi9us/wMlci4TOA==
+
+vega-time@^2.1.2, vega-time@~2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/vega-time/-/vega-time-2.1.2.tgz#0c414e74780613d6d3234fb97f19b50c0ebd9f49"
+  integrity sha512-6rXc6JdDt8MnCRy6UzUCsa6EeFycPDmvioMddLfKw38OYCV8pRQC5nw44gyddOwXgUTJLiCtn/sp53P0iA542A==
+  dependencies:
+    d3-array "^3.2.2"
+    d3-time "^3.1.0"
+    vega-util "^1.17.2"
+
+vega-tooltip@^0.34.0:
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/vega-tooltip/-/vega-tooltip-0.34.0.tgz#e0aa4d9c9bcf155e257650ba7e670fad7b1ff5ab"
+  integrity sha512-TtxwkcLZ5aWQTvKGlfWDou8tISGuxmqAW1AgGZjrDpf75qsXvgtbPdRAAls2LZMqDxpr5T1kMEZs9XbSpiI8yw==
+  dependencies:
+    vega-util "^1.17.2"
+
+vega-transforms@~4.12.0:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/vega-transforms/-/vega-transforms-4.12.0.tgz#6a69e0b67934b0c0a40a6f607fdb543bf749955e"
+  integrity sha512-bh/2Qbj85O70mjfLRgPKAsABArgSUP0k+GjmaY54zukIRxoGxKju+85nigeX/aR/INpEqNWif+5lL+NvmyWA5w==
+  dependencies:
+    d3-array "^3.2.2"
+    vega-dataflow "^5.7.6"
+    vega-statistics "^1.9.0"
+    vega-time "^2.1.2"
+    vega-util "^1.17.2"
+
+vega-typings@~1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/vega-typings/-/vega-typings-1.3.1.tgz#025a6031505794b44d9b6e2c49d4551b8918d4ae"
+  integrity sha512-j9Sdgmvowz09jkMgTFGVfiv7ycuRP/TQkdHRPXIYwt3RDgPQn7inyFcJ8C8ABFt4MiMWdjOwbneF6KWW8TRXIw==
+  dependencies:
+    "@types/geojson" "7946.0.4"
+    vega-event-selector "^3.0.1"
+    vega-expression "^5.1.1"
+    vega-util "^1.17.2"
+
+vega-util@^1.17.1, vega-util@^1.17.2, vega-util@~1.17.2:
+  version "1.17.2"
+  resolved "https://registry.yarnpkg.com/vega-util/-/vega-util-1.17.2.tgz#f69aa09fd5d6110c19c4a0f0af9e35945b99987d"
+  integrity sha512-omNmGiZBdjm/jnHjZlywyYqafscDdHaELHx1q96n5UOz/FlO9JO99P4B3jZg391EFG8dqhWjQilSf2JH6F1mIw==
+
+vega-view-transforms@~4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/vega-view-transforms/-/vega-view-transforms-4.6.0.tgz#829d56ca3c8116b0dded4ec0502f4ac70253de9a"
+  integrity sha512-z3z66aJTA3ZRo4oBY4iBXnn+A4KqBGZT/UrlKDbm+7Ec+Ip+hK2tF8Kmhp/WNcMsDZoUWFqLJgR2VgOgvJk9RA==
+  dependencies:
+    vega-dataflow "^5.7.6"
+    vega-scenegraph "^4.13.0"
+    vega-util "^1.17.2"
+
+vega-view@~5.13.0:
+  version "5.13.0"
+  resolved "https://registry.yarnpkg.com/vega-view/-/vega-view-5.13.0.tgz#8ea96da9fcdf42fe7c0e95fe6258933477524745"
+  integrity sha512-ZPAAQ3iYz6YrQjJoDT+0bcxJkXt9PKF5v4OO7Omw8PFhkIv++jFXeKlQTW1bBtyQ92dkdGGHv5lYY67Djqjf3A==
+  dependencies:
+    d3-array "^3.2.2"
+    d3-timer "^3.0.1"
+    vega-dataflow "^5.7.6"
+    vega-format "^1.1.2"
+    vega-functions "^5.15.0"
+    vega-runtime "^6.2.0"
+    vega-scenegraph "^4.13.0"
+    vega-util "^1.17.2"
+
+vega-voronoi@~4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/vega-voronoi/-/vega-voronoi-4.2.3.tgz#54c4bb96b9b94c3fa0160bee24695dcb9d583fe1"
+  integrity sha512-aYYYM+3UGqwsOx+TkVtF1IZfguy0H7AN79dR8H0nONRIc+vhk/lbnlkgwY2nSzEu0EZ4b5wZxeGoDBEVmdDEcg==
+  dependencies:
+    d3-delaunay "^6.0.2"
+    vega-dataflow "^5.7.6"
+    vega-util "^1.17.2"
+
+vega-wordcloud@~4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/vega-wordcloud/-/vega-wordcloud-4.1.5.tgz#789c9e67225c77f3f35a6fc052beec1c2bdc8b5e"
+  integrity sha512-p+qXU3cb9VeWzJ/HEdax0TX2mqDJcSbrCIfo2d/EalOXGkvfSLKobsmMQ8DxPbtVp0uhnpvfCGDyMJw+AzcI2A==
+  dependencies:
+    vega-canvas "^1.2.7"
+    vega-dataflow "^5.7.6"
+    vega-scale "^7.4.1"
+    vega-statistics "^1.9.0"
+    vega-util "^1.17.2"
+
+vega@^5.30.0:
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/vega/-/vega-5.30.0.tgz#d12350c829878b481453ab28ce10855a954df06d"
+  integrity sha512-ZGoC8LdfEUV0LlXIuz7hup9jxuQYhSaWek2M7r9dEHAPbPrzSQvKXZ0BbsJbrarM100TGRpTVN/l1AFxCwDkWw==
+  dependencies:
+    vega-crossfilter "~4.1.2"
+    vega-dataflow "~5.7.6"
+    vega-encode "~4.10.1"
+    vega-event-selector "~3.0.1"
+    vega-expression "~5.1.1"
+    vega-force "~4.2.1"
+    vega-format "~1.1.2"
+    vega-functions "~5.15.0"
+    vega-geo "~4.4.2"
+    vega-hierarchy "~4.1.2"
+    vega-label "~1.3.0"
+    vega-loader "~4.5.2"
+    vega-parser "~6.4.0"
+    vega-projection "~1.6.1"
+    vega-regression "~1.3.0"
+    vega-runtime "~6.2.0"
+    vega-scale "~7.4.1"
+    vega-scenegraph "~4.13.0"
+    vega-statistics "~1.9.0"
+    vega-time "~2.1.2"
+    vega-transforms "~4.12.0"
+    vega-typings "~1.3.1"
+    vega-util "~1.17.2"
+    vega-view "~5.13.0"
+    vega-view-transforms "~4.6.0"
+    vega-voronoi "~4.2.3"
+    vega-wordcloud "~4.1.5"
+
 vinyl-fs@^3.0.0:
   version "3.0.3"
   resolved "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-3.0.3.tgz"
@@ -11895,6 +12353,18 @@ vue-demi@>=0.14.7:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2"
   integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
 
+vue-demi@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
+
+vue-echarts@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/vue-echarts/-/vue-echarts-7.0.3.tgz#bf79f7ee0144bbdc6aee5610e8443fed91f6abbe"
+  integrity sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==
+  dependencies:
+    vue-demi "^0.13.11"
+
 vue-eslint-parser@^9.0.1:
   version "9.0.3"
   resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz"
@@ -12467,7 +12937,7 @@ yargs@^17.3.1:
     y18n "^5.0.5"
     yargs-parser "^21.1.1"
 
-yargs@^17.7.2:
+yargs@^17.7.2, yargs@~17.7.2:
   version "17.7.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
   integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
@@ -12508,3 +12978,10 @@ yoctocolors-cjs@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yoctocolors-cjs/-/yoctocolors-cjs-2.1.2.tgz#f4b905a840a37506813a7acaa28febe97767a242"
   integrity sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==
+
+zrender@5.6.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.6.0.tgz#01325b0bb38332dd5e87a8dbee7336cafc0f4a5b"
+  integrity sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==
+  dependencies:
+    tslib "2.3.0"

From 6b94267a882c1656a2d4423db9f126432168ef75 Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Mon, 4 Nov 2024 13:44:15 +0100
Subject: [PATCH 3/6] Enable grouping by workflow step

---
 client/src/api/schema/schema.ts               |  4 ++
 .../WorkflowInvocationMetrics.vue             | 48 ++++++++++++++-----
 lib/galaxy/managers/jobs.py                   | 12 +++--
 lib/galaxy/schema/schema.py                   |  2 +
 .../webapps/galaxy/services/invocations.py    | 12 ++++-
 5 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/client/src/api/schema/schema.ts b/client/src/api/schema/schema.ts
index 73cb76dd7af6..348c9cda9fab 100644
--- a/client/src/api/schema/schema.ts
+++ b/client/src/api/schema/schema.ts
@@ -18360,6 +18360,10 @@ export interface components {
              * @description The raw value of the metric as a string.
              */
             raw_value: string;
+            /** Step Index */
+            step_index: number;
+            /** Step Label */
+            step_label: string | null;
             /**
              * Title
              * @description A descriptive title for this metric.
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index a924bc54aed1..d372ede7f3a5 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import { type VisualizationSpec } from "vega-embed";
 import { computed, ref, watch } from "vue";
+import { type ComputedRef } from "vue";
 
 import { type components, GalaxyApi } from "@/api";
 import { errorMessageAsString } from "@/utils/simple-error";
-import { type ComputedRef } from "vue";
-import { type VisualizationSpec } from "vega-embed";
 
 import VegaWrapper from "./VegaWrapper.vue";
 
@@ -15,9 +15,15 @@ const props = defineProps({
     },
 });
 
+const groupBy = ref<"tool_id" | "step_id">("tool_id");
 const jobMetrics = ref<components["schemas"]["WorkflowJobMetric"][]>();
 const fetchError = ref<string>();
 
+const attributeToLabel = {
+    tool_id: "Tool ID",
+    step_id: "Step",
+};
+
 async function fetchMetrics() {
     const { data, error } = await GalaxyApi().GET("/api/invocations/{invocation_id}/metrics", {
         params: {
@@ -35,6 +41,16 @@ async function fetchMetrics() {
 
 watch(props, () => fetchMetrics(), { immediate: true });
 
+function itemToX(item: components["schemas"]["WorkflowJobMetric"]) {
+    if (groupBy.value === "tool_id") {
+        return item.tool_id;
+    } else if (groupBy.value === "step_id") {
+        return `${item.step_index + 1}: ${item.step_label || item.tool_id}`;
+    } else {
+        throw Error("Cannot happen");
+    }
+}
+
 interface boxplotData {
     x_title: string;
     y_title: string;
@@ -46,11 +62,11 @@ const wallclock: ComputedRef<boxplotData> = computed(() => {
     const values = wallclock?.map((item) => {
         return {
             y: parseFloat(item.raw_value),
-            x: item.tool_id,
+            x: itemToX(item),
         };
     });
     return {
-        x_title: "Tool ID",
+        x_title: attributeToLabel[groupBy.value],
         y_title: "Runtime (in Seconds)",
         values,
     };
@@ -61,11 +77,11 @@ const coresAllocated: ComputedRef<boxplotData> = computed(() => {
     const values = coresAllocated?.map((item) => {
         return {
             y: parseFloat(item.raw_value),
-            x: item.tool_id,
+            x: itemToX(item),
         };
     });
     return {
-        x_title: "Tool ID",
+        x_title: attributeToLabel[groupBy.value],
         y_title: "Cores Allocated",
         values,
     };
@@ -76,7 +92,7 @@ const memoryAllocated: ComputedRef<boxplotData> = computed(() => {
     const values = memoryAllocated?.map((item) => {
         return {
             y: parseFloat(item.raw_value),
-            x: item.tool_id,
+            x: itemToX(item),
         };
     });
     return {
@@ -147,9 +163,19 @@ const specs = computed(() => {
 
 <template>
     <div>
-        <div v-for="(spec, key) in specs" :key="key">
-            <h2 class="h-l truncate text-center">{{ key }}</h2>
-            <VegaWrapper :spec="spec" />
-        </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>
+                    <VegaWrapper :spec="spec" />
+                </div>
+            </b-tab>
+        </b-tabs>
     </div>
 </template>
diff --git a/lib/galaxy/managers/jobs.py b/lib/galaxy/managers/jobs.py
index be9d0083567b..09406182e7aa 100644
--- a/lib/galaxy/managers/jobs.py
+++ b/lib/galaxy/managers/jobs.py
@@ -60,6 +60,7 @@
     Workflow,
     WorkflowInvocation,
     WorkflowInvocationStep,
+    WorkflowStep,
     YIELD_PER_ROWS,
 )
 from galaxy.model.base import transaction
@@ -732,7 +733,7 @@ def invocation_job_source_iter(sa_session, invocation_id):
 
 def get_job_metrics_for_invocation(sa_session: galaxy_scoped_session, invocation_id: int):
     single_job_stmnt = (
-        select(JobMetricNumeric, Job.tool_id)
+        select(WorkflowStep.order_index, Job.tool_id, WorkflowStep.label, JobMetricNumeric)
         .join(Job, JobMetricNumeric.job_id == Job.id)
         .join(
             WorkflowInvocationStep,
@@ -740,9 +741,10 @@ def get_job_metrics_for_invocation(sa_session: galaxy_scoped_session, invocation
                 WorkflowInvocationStep.workflow_invocation_id == invocation_id, WorkflowInvocationStep.job_id == Job.id
             ),
         )
+        .join(WorkflowStep, WorkflowStep.id == WorkflowInvocationStep.workflow_step_id)
     )
     collection_job_stmnt = (
-        select(JobMetricNumeric, Job.tool_id)
+        select(WorkflowStep.order_index, Job.tool_id, WorkflowStep.label, JobMetricNumeric)
         .join(Job, JobMetricNumeric.job_id == Job.id)
         .join(ImplicitCollectionJobsJobAssociation, Job.id == ImplicitCollectionJobsJobAssociation.job_id)
         .join(
@@ -756,10 +758,14 @@ def get_job_metrics_for_invocation(sa_session: galaxy_scoped_session, invocation
                 WorkflowInvocationStep.implicit_collection_jobs_id == ImplicitCollectionJobs.id,
             ),
         )
+        .join(WorkflowStep, WorkflowStep.id == WorkflowInvocationStep.workflow_step_id)
     )
     # should be sa_session.execute(single_job_stmnt.union(collection_job_stmnt)).all() but that returns
     # columns instead of the job metrics ORM instance.
-    return list(sa_session.execute(single_job_stmnt).all()) + list(sa_session.execute(collection_job_stmnt).all())
+    return sorted(
+        (*sa_session.execute(single_job_stmnt).all(), *sa_session.execute(collection_job_stmnt).all()),
+        key=lambda row: row[0],
+    )
 
 
 def fetch_job_states(sa_session, job_source_ids, job_source_types):
diff --git a/lib/galaxy/schema/schema.py b/lib/galaxy/schema/schema.py
index 88460a3f425f..e97a743e53b3 100644
--- a/lib/galaxy/schema/schema.py
+++ b/lib/galaxy/schema/schema.py
@@ -2173,6 +2173,8 @@ class JobMetric(Model):
 
 class WorkflowJobMetric(JobMetric):
     tool_id: str
+    step_index: int
+    step_label: Optional[str]
 
 
 class JobMetricCollection(RootModel):
diff --git a/lib/galaxy/webapps/galaxy/services/invocations.py b/lib/galaxy/webapps/galaxy/services/invocations.py
index 4066a3dbfeaa..4db9a0d5f1a0 100644
--- a/lib/galaxy/webapps/galaxy/services/invocations.py
+++ b/lib/galaxy/webapps/galaxy/services/invocations.py
@@ -168,12 +168,20 @@ def show_invocation_metrics(self, trans: ProvidesHistoryContext, invocation_id:
         extended_job_metrics = get_job_metrics_for_invocation(trans.sa_session, invocation_id)
         job_metrics = []
         tool_ids = []
+        step_indexes = []
+        step_labels = []
         for row in extended_job_metrics:
-            job_metrics.append(row[0])
+            step_indexes.append(row[0])
             tool_ids.append(row[1])
+            step_labels.append(row[2])
+            job_metrics.append(row[3])
         metrics_dict_list = summarize_metrics(trans, job_metrics)
-        for tool_id, metrics_dict in zip(tool_ids, metrics_dict_list):
+        for tool_id, step_index, step_label, metrics_dict in zip(
+            tool_ids, step_indexes, step_labels, metrics_dict_list
+        ):
             metrics_dict["tool_id"] = tool_id
+            metrics_dict["step_index"] = step_index
+            metrics_dict["step_label"] = step_label
         return metrics_dict_list
 
     def update_invocation_step(self, trans, step_id, action):

From 39a7ed26694aa757bf3e5d8342f9994ad3bfab44 Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Mon, 4 Nov 2024 18:20:49 +0100
Subject: [PATCH 4/6] Decrease value parsing repetition, add peakMemory

---
 .../WorkflowInvocationMetrics.vue             | 51 +++++++++----------
 1 file changed, 23 insertions(+), 28 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index d372ede7f3a5..4da3248864f1 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -57,49 +57,44 @@ interface boxplotData {
     values?: { x: string; y: Number }[];
 }
 
-const wallclock: ComputedRef<boxplotData> = computed(() => {
-    const wallclock = jobMetrics.value?.filter((jobMetric) => jobMetric.name == "runtime_seconds");
+function metricToSpecData(
+    jobMetrics: components["schemas"]["WorkflowJobMetric"][] | undefined,
+    metricName: string,
+    yTitle: string,
+    transform?: (param: number) => number
+) {
+    const wallclock = jobMetrics?.filter((jobMetric) => jobMetric.name == metricName);
     const values = wallclock?.map((item) => {
+        let y = parseFloat(item.raw_value);
+        if (transform !== undefined) {
+            y = transform(y);
+        }
         return {
-            y: parseFloat(item.raw_value),
+            y,
             x: itemToX(item),
         };
     });
     return {
         x_title: attributeToLabel[groupBy.value],
-        y_title: "Runtime (in Seconds)",
+        y_title: yTitle,
         values,
     };
+}
+
+const wallclock: ComputedRef<boxplotData> = computed(() => {
+    return metricToSpecData(jobMetrics.value, "runtime_seconds", "Runtime (in Seconds)");
 });
 
 const coresAllocated: ComputedRef<boxplotData> = computed(() => {
-    const coresAllocated = jobMetrics.value?.filter((jobMetric) => jobMetric.name == "galaxy_slots");
-    const values = coresAllocated?.map((item) => {
-        return {
-            y: parseFloat(item.raw_value),
-            x: itemToX(item),
-        };
-    });
-    return {
-        x_title: attributeToLabel[groupBy.value],
-        y_title: "Cores Allocated",
-        values,
-    };
+    return metricToSpecData(jobMetrics.value, "galaxy_slots", "Cores Allocated");
 });
 
 const memoryAllocated: ComputedRef<boxplotData> = computed(() => {
-    const memoryAllocated = jobMetrics.value?.filter((jobMetric) => jobMetric.name == "galaxy_memory_mb");
-    const values = memoryAllocated?.map((item) => {
-        return {
-            y: parseFloat(item.raw_value),
-            x: itemToX(item),
-        };
-    });
-    return {
-        x_title: "Tool ID",
-        y_title: "Memory Allocated (in MB)",
-        values,
-    };
+    return metricToSpecData(jobMetrics.value, "galaxy_memory_mb", "Memory Allocated (in MB)");
+});
+
+const peakMemory: ComputedRef<boxplotData> = computed(() => {
+    return metricToSpecData(jobMetrics.value, "memory.peak", "Max memory usage recorded (in MB)", (v) => v / 1024 ** 2);
 });
 
 function itemToSpec(item: boxplotData) {

From b1691c56f8933872c05adacdc391578b63002b31 Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Mon, 4 Nov 2024 18:32:33 +0100
Subject: [PATCH 5/6] Rerender on resize

---
 client/src/components/WorkflowInvocationState/VegaWrapper.vue | 4 ++++
 .../WorkflowInvocationState/WorkflowInvocationMetrics.vue     | 4 +++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/src/components/WorkflowInvocationState/VegaWrapper.vue b/client/src/components/WorkflowInvocationState/VegaWrapper.vue
index 586fa124cf0e..e5f4a8f49ba8 100644
--- a/client/src/components/WorkflowInvocationState/VegaWrapper.vue
+++ b/client/src/components/WorkflowInvocationState/VegaWrapper.vue
@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import { useResizeObserver } from "@vueuse/core";
 import embed, { type VisualizationSpec } from "vega-embed";
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 
@@ -28,6 +29,9 @@ async function embedChart() {
 onMounted(embedChart);
 
 watch(props, embedChart, { immediate: true, deep: true });
+useResizeObserver(chartContainer, () => {
+    embedChart();
+});
 
 // Cleanup the chart when the component is unmounted
 onBeforeUnmount(() => {
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index 4da3248864f1..f848d9f1d6b9 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -150,7 +150,9 @@ function itemToSpec(item: boxplotData) {
 }
 
 const specs = computed(() => {
-    const items = [wallclock.value, coresAllocated.value, memoryAllocated.value].filter((item) => item.values?.length);
+    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;
 });

From 946d2ffa31673ce01f0f10efa7b8bbce483a6b2b Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 6 Nov 2024 17:26:01 +0100
Subject: [PATCH 6/6] split vega related components into lazy loaded bundle

---
 .../WorkflowInvocationState/WorkflowInvocationMetrics.vue     | 4 ++--
 client/webpack.config.js                                      | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index f848d9f1d6b9..91782651b709 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type VisualizationSpec } from "vega-embed";
+import type { VisualizationSpec } from "vega-embed";
 import { computed, ref, watch } from "vue";
 import { type ComputedRef } from "vue";
 
 import { type components, GalaxyApi } from "@/api";
 import { errorMessageAsString } from "@/utils/simple-error";
 
-import VegaWrapper from "./VegaWrapper.vue";
+const VegaWrapper = () => import("./VegaWrapper.vue");
 
 const props = defineProps({
     invocationId: {
diff --git a/client/webpack.config.js b/client/webpack.config.js
index 6ca6b748151d..43699d475e3a 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -25,6 +25,9 @@ const modulesExcludedFromLibs = [
     "elkjs",
     "@citation-js",
     "citeproc",
+    "vega",
+    "vega-embed",
+    "vega-lite",
 ].join("|");
 
 const buildDate = new Date();