Baisc boxplot

client/package.json

@@ -101,6 +101,9 @@
     "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",

client/src/components/WorkflowInvocationState/VegaWrapper.vue

@@ -0,0 +1,43 @@
+<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;
+
+watch(
+    props,
+    async () => {
+        console.log(props.spec);
+        if (chartContainer.value) {
+            const result = await embed(chartContainer.value, props.spec);
+            vegaView = result.view;
+        }
+    },
+    { immediate: true }
+);
+
+// Cleanup the chart when the component is unmounted
+onBeforeUnmount(() => {
+    if (vegaView) {
+        vegaView.finalize();
+    }
+});
+</script>
+
+<style scoped>
+.chart {
+    width: 100%;
+    height: 300rem;
+}
+</style>

client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue

@@ -1,10 +1,10 @@
 <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 VegaWrapper from "./VegaWrapper.vue";
 
 const props = defineProps({
     invocationId: {
@@ -13,40 +13,79 @@ 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
-            }
-        }
-    })
+                invocation_id: props.invocationId,
+            },
+        },
+    });
     console.log("data", data, error);
     if (error) {
-        fetchError.value = errorMessageAsString(error)
+        fetchError.value = errorMessageAsString(error);
     } else {
-        jobMetrics.value = data
+        jobMetrics.value = data;
     }
 }
 
-
-watch((props), () => fetchMetrics(), { immediate: true })
+watch(props, () => fetchMetrics(), { immediate: true });
 
 const wallclock = computed(() => {
-    return jobMetrics.value?.filter((jobMetric) => jobMetric.name == "runtime_seconds")
-})
+    const wallclock = jobMetrics.value?.filter((jobMetric) => jobMetric.name == "runtime_seconds");
+    return wallclock?.map((item) => {
+        return {
+            raw_value: parseFloat(item.raw_value),
+            tool_id: item.tool_id,
+        };
+    });
+});
 
+const spec = computed(() => {
+    console.log(wallclock.value);
+    return {
+        $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+        description: "A boxplot with jittered points.",
+        data: {
+            values: wallclock.value,
+        },
+        layer: [
+            {
+                mark: { type: "boxplot", opacity: 0.5 },
+                encoding: {
+                    x: { field: "tool_id", type: "ordinal" },
+                    y: { field: "raw_value", type: "quantitative" },
+                },
+                width: "container",
+            },
+            {
+                mark: {
+                    type: "point",
+                    opacity: 0.7,
+                },
+                encoding: {
+                    x: {
+                        field: "tool_id",
+                        type: "ordinal",
+                        bandPosition: { signal: "(random() + 0.05)" }, // Apply random jitter within the categorical band
+                    },
+                    y: {
+                        field: "raw_value",
+                        type: "quantitative",
+                        axis: { title: "Raw Value" },
+                        scale: { zero: false },
+                    },
+                },
+                width: "container",
+            },
+        ],
+    };
+});
 </script>
 
 <template>
-    <MetricsBoxPlot v-if="wallclock" :job-data="wallclock"/>
-    <!--
-    <div>
-        {{ jobMetrics }}
-    </div>  
-    -->
+    <VegaWrapper v-if="spec" :spec="spec" />
 </template>

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>