Add basic boxplot

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",

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>