From b8d11278a1639cd70c91b20d98be2d6662cf241a Mon Sep 17 00:00:00 2001
From: Daniel Chang <mwdchang@gmail.com>
Date: Wed, 19 Jun 2024 09:53:54 -0400
Subject: [PATCH 1/9] vegalite test

---
 packages/client/hmi-client/package.json |  1 +
 yarn.lock                               | 64 ++++++++++++++++++++++++-
 2 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/packages/client/hmi-client/package.json b/packages/client/hmi-client/package.json
index 5ac52b961b..21032c0f20 100644
--- a/packages/client/hmi-client/package.json
+++ b/packages/client/hmi-client/package.json
@@ -68,6 +68,7 @@
 		"pyodide": "0.25.1",
 		"sass": "1.56.1",
 		"uuid": "9.0.1",
+		"vega-lite": "^5.19.0",
 		"vue": "3.3.13",
 		"vue-feather": "2.0.0",
 		"vue-gtag": "2.0.1",
diff --git a/yarn.lock b/yarn.lock
index 73cd68cff5..6ff3d41ad1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3218,7 +3218,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:1.0.5":
+"@types/estree@npm:1.0.5, @types/estree@npm:^1.0.0":
   version: 1.0.5
   resolution: "@types/estree@npm:1.0.5"
   checksum: 7de6d928dd4010b0e20c6919e1a6c27b61f8d4567befa89252055fad503d587ecb9a1e3eab1b1901f923964d7019796db810b7fd6430acb26c32866d126fd408
@@ -8667,6 +8667,7 @@ __metadata:
     sass: "npm:1.56.1"
     typescript: "npm:5.4.5"
     uuid: "npm:9.0.1"
+    vega-lite: "npm:^5.19.0"
     vite: "npm:5.2.13"
     vite-svg-loader: "npm:4.0.0"
     vitest: "npm:0.24.5"
@@ -10276,6 +10277,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json-stringify-pretty-compact@npm:~3.0.0":
+  version: 3.0.0
+  resolution: "json-stringify-pretty-compact@npm:3.0.0"
+  checksum: bf2cfb77e5eedb38c2a3c5ff2b8680e05a6073209bd54176640e90c2bc49c9eb798c8c6a3267216981291f8e3a6b82c996bfae71c155cbfd51eb3f998eeea482
+  languageName: node
+  linkType: hard
+
 "json5@npm:^1.0.2":
   version: 1.0.2
   resolution: "json5@npm:1.0.2"
@@ -14035,6 +14043,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:~2.6.3":
+  version: 2.6.3
+  resolution: "tslib@npm:2.6.3"
+  checksum: 52109bb681f8133a2e58142f11a50e05476de4f075ca906d13b596ae5f7f12d30c482feb0bff167ae01cfc84c5803e575a307d47938999246f5a49d174fc558c
+  languageName: node
+  linkType: hard
+
 "tsutils@npm:^3.21.0":
   version: 3.21.0
   resolution: "tsutils@npm:3.21.0"
@@ -14462,6 +14477,51 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vega-event-selector@npm:~3.0.1":
+  version: 3.0.1
+  resolution: "vega-event-selector@npm:3.0.1"
+  checksum: fe02aa5942cc410bab11f6c5e61882b9215c4b26728d1979db292c8434dc1516f500714cff1db81413ba63c6d7b2e40acc1cb2473bd779312116236df8a5c03b
+  languageName: node
+  linkType: hard
+
+"vega-expression@npm:~5.1.0":
+  version: 5.1.1
+  resolution: "vega-expression@npm:5.1.1"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    vega-util: "npm:^1.17.2"
+  checksum: 64921f5430dd3dcda850899386a3ed58c3c3f7d6003abe89785caae4cab5654026c70b70506ca0290b69dc170408ee8a073cf8685ca4cb981785351b19a3cf58
+  languageName: node
+  linkType: hard
+
+"vega-lite@npm:^5.19.0":
+  version: 5.19.0
+  resolution: "vega-lite@npm:5.19.0"
+  dependencies:
+    json-stringify-pretty-compact: "npm:~3.0.0"
+    tslib: "npm:~2.6.3"
+    vega-event-selector: "npm:~3.0.1"
+    vega-expression: "npm:~5.1.0"
+    vega-util: "npm:~1.17.2"
+    yargs: "npm:~17.7.2"
+  peerDependencies:
+    vega: ^5.24.0
+  bin:
+    vl2pdf: bin/vl2pdf
+    vl2png: bin/vl2png
+    vl2svg: bin/vl2svg
+    vl2vg: bin/vl2vg
+  checksum: be70cd3bf59f4f1394dc696e7ebd3e93d117bab7a041e0ff3f0449d37def1f77d18aba80f30be469ac61f1d36c28a274da68ba6b9dbf43789b5d16b25b782176
+  languageName: node
+  linkType: hard
+
+"vega-util@npm:^1.17.2, vega-util@npm:~1.17.2":
+  version: 1.17.2
+  resolution: "vega-util@npm:1.17.2"
+  checksum: dc8e93b85dbe132d83f5979364bbe5fb42a771cc93ac63e09ce7e49e98c384b0f46da3df2ad86b2e2d180ac395add57d8c85d61e1660d4a8143ad7364d6a1da1
+  languageName: node
+  linkType: hard
+
 "vinyl@npm:^1.1.1":
   version: 1.2.0
   resolution: "vinyl@npm:1.2.0"
@@ -15255,7 +15315,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:17.7.2, yargs@npm:^17.3.1":
+"yargs@npm:17.7.2, yargs@npm:^17.3.1, yargs@npm:~17.7.2":
   version: 17.7.2
   resolution: "yargs@npm:17.7.2"
   dependencies:

From 0c3539a8a70ba24857d404a148b1ebc7d12f7907 Mon Sep 17 00:00:00 2001
From: Daniel Chang <mwdchang@gmail.com>
Date: Wed, 19 Jun 2024 09:58:06 -0400
Subject: [PATCH 2/9] test page

---
 packages/client/hmi-client/src/router/index.ts   | 4 +++-
 packages/client/hmi-client/src/temp/Vegalite.vue | 5 +++++
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/hmi-client/src/temp/Vegalite.vue

diff --git a/packages/client/hmi-client/src/router/index.ts b/packages/client/hmi-client/src/router/index.ts
index d0d5c35642..ae0bd13966 100644
--- a/packages/client/hmi-client/src/router/index.ts
+++ b/packages/client/hmi-client/src/router/index.ts
@@ -17,6 +17,7 @@ import PyodideTest from '@/temp/PyodideTest.vue';
 import JupyterTest from '@/temp/JupyterTest.vue';
 import CustomInputTest from '@/temp/custom-input-test.vue';
 import ClipboardTest from '@/temp/Clipboard.vue';
+import VegaliteTest from '@/temp/Vegalite.vue';
 import { RouteName } from './routes';
 
 export enum RoutePath {
@@ -69,7 +70,8 @@ const routes = [
 	{ path: '/pyodide-test', component: PyodideTest },
 	{ path: '/jupyter-test', component: JupyterTest },
 	{ path: '/custom-input-test', component: CustomInputTest },
-	{ path: '/clipboard', component: ClipboardTest }
+	{ path: '/clipboard', component: ClipboardTest },
+	{ path: '/vegalite', component: VegaliteTest }
 ];
 
 const router = createRouter({
diff --git a/packages/client/hmi-client/src/temp/Vegalite.vue b/packages/client/hmi-client/src/temp/Vegalite.vue
new file mode 100644
index 0000000000..9947198110
--- /dev/null
+++ b/packages/client/hmi-client/src/temp/Vegalite.vue
@@ -0,0 +1,5 @@
+<template>
+	<div>hi</div>
+</template>
+
+<script setup lang="ts"></script>

From 637b9ee3b92b8fa419323e7673b7d53f3f50186a Mon Sep 17 00:00:00 2001
From: Daniel Chang <mwdchang@gmail.com>
Date: Wed, 19 Jun 2024 14:03:06 -0400
Subject: [PATCH 3/9] vega component and util from pantera

---
 packages/client/hmi-client/package.json       |   4 +-
 .../client/hmi-client/src/temp/VegaChart.vue  | 123 +++++
 .../client/hmi-client/src/temp/Vegalite.vue   |  58 +-
 .../client/hmi-client/src/temp/vega-theme.ts  | 128 +++++
 yarn.lock                                     | 502 +++++++++++++++++-
 5 files changed, 790 insertions(+), 25 deletions(-)
 create mode 100644 packages/client/hmi-client/src/temp/VegaChart.vue
 create mode 100644 packages/client/hmi-client/src/temp/vega-theme.ts

diff --git a/packages/client/hmi-client/package.json b/packages/client/hmi-client/package.json
index 21032c0f20..863f14ca71 100644
--- a/packages/client/hmi-client/package.json
+++ b/packages/client/hmi-client/package.json
@@ -68,7 +68,9 @@
 		"pyodide": "0.25.1",
 		"sass": "1.56.1",
 		"uuid": "9.0.1",
-		"vega-lite": "^5.19.0",
+		"vega": "5.30.0",
+		"vega-embed": "6.25.0",
+		"vega-lite": "5.19.0",
 		"vue": "3.3.13",
 		"vue-feather": "2.0.0",
 		"vue-gtag": "2.0.1",
diff --git a/packages/client/hmi-client/src/temp/VegaChart.vue b/packages/client/hmi-client/src/temp/VegaChart.vue
new file mode 100644
index 0000000000..f024581252
--- /dev/null
+++ b/packages/client/hmi-client/src/temp/VegaChart.vue
@@ -0,0 +1,123 @@
+<template>
+	<div class="vega-chart-container">
+		<div v-if="renderErrorMessage" class="p-error">
+			{{ renderErrorMessage }}
+		</div>
+		<div ref="vegaContainer"></div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import embed, { Result, VisualizationSpec } from 'vega-embed';
+import { ref, watch, toRaw, isRef, isReactive, isProxy } from 'vue';
+import unchartedVegaTheme from './vega-theme';
+
+const props = withDefaults(
+	defineProps<{
+		visualizationSpec: VisualizationSpec;
+		areEmbedActionsVisible?: boolean;
+		/**
+		 * A list of signal names for Vega interval-type selections.
+		 * This is equivalent to the name of the `param` in the Vega Lite spec.
+		 * The chart will listen to signals for that selection, and emit the selected interval, or null
+		 * if the selection is empty.
+		 * See https://vega.github.io/vega/docs/api/view/#view_signal for more information.
+		 */
+		intervalSelectionSignalNames?: string[];
+	}>(),
+	{
+		areEmbedActionsVisible: true,
+		intervalSelectionSignalNames: () => []
+	}
+);
+const vegaContainer = ref<HTMLElement>();
+const vegaVisualization = ref<Result>();
+const renderErrorMessage = ref<String>();
+
+const emit = defineEmits<{
+	(
+		e: 'update-interval-selection',
+		signalName: string,
+		intervalExtent: { [fieldName: string]: [number, number] } | null
+	): void;
+	(e: 'chart-click', datum: any | null): void;
+}>();
+
+/**
+ * deepToRaw() is a recursive 'deep' version of Vue's `toRaw` function, which converts
+ * Vue created Refs/Proxy objects back to their original form.
+ *
+ * In certain cases, such as when a nested object (like a Vega Spec) is wrapped in a
+ * Vue ref (including when it is returned using `defineModel` on a component like
+ * `encoding` is in the `ChartChannelEncodingConfigurator`), each nested object is
+ * wrapped in its own `Proxy`. Certain libraries don't deal well with `Proxy` objects
+ * and they need to be converted back to raw objects. Vue's `toRaw` function only
+ * handles the first level of Proxy objects. This function will recursively go through
+ * an object with nested Proxy objects and unwrap them all.
+ *
+ * This function is taken from https://github.com/vuejs/core/issues/5303
+ */
+function deepToRaw<T extends Record<string, any>>(sourceObj: T): T {
+	const objectIterator = (input: any): any => {
+		if (Array.isArray(input)) {
+			return input.map((item) => objectIterator(item));
+		}
+		if (isRef(input) || isReactive(input) || isProxy(input)) {
+			return objectIterator(toRaw(input));
+		}
+		if (input && typeof input === 'object') {
+			return Object.keys(input).reduce((acc, key) => {
+				acc[key as keyof typeof acc] = objectIterator(input[key]);
+				return acc;
+			}, {} as T);
+		}
+		return input;
+	};
+	return objectIterator(sourceObj);
+}
+
+async function updateVegaVisualization(
+	container: HTMLElement,
+	visualizationSpec: VisualizationSpec
+) {
+	renderErrorMessage.value = undefined;
+	vegaVisualization.value = undefined;
+	try {
+		vegaVisualization.value = await embed(
+			container,
+			{ ...visualizationSpec },
+			{
+				config: unchartedVegaTheme,
+				actions: props.areEmbedActionsVisible === false ? false : undefined
+			}
+		);
+		const { view } = vegaVisualization.value;
+		props.intervalSelectionSignalNames.forEach((signalName) => {
+			view.addSignalListener(
+				signalName,
+				(name, valueRange: { [fieldName: string]: [number, number] }) => {
+					if (valueRange === undefined || Object.keys(valueRange).length === 0) {
+						emit('update-interval-selection', name, null);
+						return;
+					}
+					emit('update-interval-selection', name, valueRange);
+				}
+			);
+		});
+		view.addEventListener('click', (_event, item) => {
+			emit('chart-click', item?.datum ?? null);
+		});
+	} catch (e) {
+		// renderErrorMessage.value = getErrorMessage(e);
+		// renderErrorMessage.value = e;
+	}
+}
+
+watch([vegaContainer, () => props.visualizationSpec], () => {
+	if (!vegaContainer.value) {
+		return;
+	}
+	const spec = deepToRaw(props.visualizationSpec);
+	updateVegaVisualization(vegaContainer.value, spec);
+});
+</script>
diff --git a/packages/client/hmi-client/src/temp/Vegalite.vue b/packages/client/hmi-client/src/temp/Vegalite.vue
index 9947198110..6361c2440e 100644
--- a/packages/client/hmi-client/src/temp/Vegalite.vue
+++ b/packages/client/hmi-client/src/temp/Vegalite.vue
@@ -1,5 +1,59 @@
 <template>
-	<div>hi</div>
+	<vega-chart :visualization-spec="spec" />
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import VegaChart from './VegaChart.vue';
+
+const spec = ref<any>({
+	$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+	data: { url: 'https://vega.github.io/editor/data/unemployment-across-industries.json' },
+	transform: [{ calculate: 'random()', as: 'jitter' }],
+	vconcat: [
+		{
+			width: 500,
+			height: 100,
+			mark: 'area',
+			encoding: {
+				color: { value: '#0d4' },
+				x: {
+					timeUnit: 'yearmonth',
+					field: 'date',
+					axis: { format: '%Y' }
+				},
+				y: {
+					aggregate: 'sum',
+					field: 'count',
+					title: 'count'
+				}
+			}
+		},
+		{
+			width: 500,
+			height: 50,
+			mark: 'boxplot',
+			encoding: {
+				color: { value: '#a52' },
+				x: {
+					field: 'count',
+					type: 'quantitative',
+					scale: { zero: false }
+				}
+			}
+		},
+		{
+			width: 500,
+			height: 100,
+			mark: 'point',
+			encoding: {
+				color: { value: '#f80' },
+				opacity: { value: 0.4 },
+				size: { value: 5 },
+				x: { field: 'count', type: 'quantitative' },
+				y: { field: 'jitter', type: 'quantitative' }
+			}
+		}
+	]
+});
+</script>
diff --git a/packages/client/hmi-client/src/temp/vega-theme.ts b/packages/client/hmi-client/src/temp/vega-theme.ts
new file mode 100644
index 0000000000..867bf6d709
--- /dev/null
+++ b/packages/client/hmi-client/src/temp/vega-theme.ts
@@ -0,0 +1,128 @@
+import { Config as VgConfig } from 'vega';
+import { Config as VlConfig } from 'vega-lite';
+
+export type Config = VgConfig | VlConfig;
+
+/**
+ * The Uncharted theme for Vega Charts
+ * Uses the vega-themes PowerBi theme as a starting point:
+ * https://github.com/vega/vega-themes/blob/main/src/theme-powerbi.ts
+ */
+
+const ptToPx = (value: number) => value * (1 / 3 + 1);
+
+const fontSmallPx = ptToPx(9);
+const legendFontPx = ptToPx(10);
+const fontLargePx = ptToPx(12);
+const fontStandard = '"Figtree", sans-serif'; // Segoe UI';
+const fontTitle = fontStandard; // 'wf_standard-font, helvetica, arial, sans-serif';
+const defaultBarFillColour = '#858D9D';
+export const hoverBarFillColour = '#DADEE3'; // Primevue bluegray-100
+// const firstLevelElementColor = '#252423';
+// const secondLevelElementColor = '#605E5C';
+// const backgroundColor = 'transparent';
+// const backgroundSecondaryColor = '#C8C6C4';
+// const paletteColor1 = '#118DFF';
+// const paletteColor2 = '#12239E';
+// const paletteColor3 = '#E66C37';
+// const paletteColor4 = '#6B007B';
+// const paletteColor5 = '#E044A7';
+// const paletteColor6 = '#744EC2';
+// const paletteColor7 = '#D9B300';
+// const paletteColor8 = '#D64550';
+// const divergentColorMax = paletteColor1;
+// const divergentColorMin = '#DEEFFF';
+// const divergentPalette = [divergentColorMin, divergentColorMax];
+// const ordinalPalette = [
+//   divergentColorMin,
+//   '#c7e4ff',
+//   '#b0d9ff',
+//   '#9aceff',
+//   '#83c3ff',
+//   '#6cb9ff',
+//   '#55aeff',
+//   '#3fa3ff',
+//   '#2898ff',
+//   divergentColorMax,
+// ];
+
+const unchartedVegaTheme: Config = {
+	// view: {stroke: backgroundColor},
+	// background: backgroundColor,
+	font: fontStandard,
+	header: {
+		titleFont: fontTitle,
+		titleFontSize: fontLargePx,
+		// titleColor: firstLevelElementColor,
+		labelFont: fontStandard,
+		labelFontSize: legendFontPx
+		// labelColor: secondLevelElementColor,
+	},
+	axis: {
+		ticks: false,
+		grid: false,
+		domain: false,
+		// labelColor: secondLevelElementColor,
+		labelFontSize: fontSmallPx,
+		titleFont: fontTitle,
+		// titleColor: firstLevelElementColor,
+		titleFontSize: fontLargePx,
+		titleFontWeight: 'normal'
+	},
+	axisQuantitative: {
+		tickCount: 3,
+		grid: true,
+		// gridColor: backgroundSecondaryColor,
+		gridDash: [1, 5],
+		labelFlush: false
+	},
+	axisBand: { tickExtra: true },
+	axisX: { labelPadding: 5 },
+	axisY: { labelPadding: 10 },
+	bar: { fill: defaultBarFillColour },
+	line: {
+		// stroke: paletteColor1,
+		strokeWidth: 3,
+		strokeCap: 'round',
+		strokeJoin: 'round'
+	},
+	text: {
+		font: fontStandard,
+		fontSize: fontSmallPx
+		// fill: secondLevelElementColor
+	},
+	// arc: {fill: paletteColor1},
+	// area: {fill: paletteColor1, line: true, opacity: 0.6},
+	// path: {stroke: paletteColor1},
+	// rect: {fill: paletteColor1},
+	// point: {fill: paletteColor1, filled: true, size: 75},
+	// shape: {stroke: paletteColor1},
+	// symbol: {fill: paletteColor1, strokeWidth: 1.5, size: 50},
+	legend: {
+		titleFont: fontStandard,
+		titleFontWeight: 'bold',
+		// titleColor: secondLevelElementColor,
+		labelFont: fontStandard,
+		labelFontSize: legendFontPx
+		// labelColor: secondLevelElementColor,
+		// symbolType: 'circle',
+		// symbolSize: 75,
+	}
+	// range: {
+	//   category: [
+	//     paletteColor1,
+	//     paletteColor2,
+	//     paletteColor3,
+	//     paletteColor4,
+	//     paletteColor5,
+	//     paletteColor6,
+	//     paletteColor7,
+	//     paletteColor8,
+	//   ],
+	//   diverging: divergentPalette,
+	//   heatmap: divergentPalette,
+	//   ordinal: ordinalPalette,
+	// },
+};
+
+export default unchartedVegaTheme;
diff --git a/yarn.lock b/yarn.lock
index 6ff3d41ad1..3b1316a4c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3232,6 +3232,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/geojson@npm:7946.0.4":
+  version: 7946.0.4
+  resolution: "@types/geojson@npm:7946.0.4"
+  checksum: fb491420ce449279ccd6141d6e25e7f0bbf819194cb7cd1b05ff255a74bb6279176e697c5d90c30db08684733842be41e567342027ea594c00ac5c6c788c13a2
+  languageName: node
+  linkType: hard
+
 "@types/graceful-fs@npm:^4.1.2, @types/graceful-fs@npm:^4.1.3":
   version: 4.1.9
   resolution: "@types/graceful-fs@npm:4.1.9"
@@ -5215,6 +5222,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:2":
+  version: 2.20.3
+  resolution: "commander@npm:2.20.3"
+  checksum: 90c5b6898610cd075984c58c4f88418a4fb44af08c1b1415e9854c03171bec31b336b7f3e4cefe33de994b3f12b03c5e2d638da4316df83593b9e82554e7e95b
+  languageName: node
+  linkType: hard
+
 "commander@npm:7, commander@npm:^7.2.0":
   version: 7.2.0
   resolution: "commander@npm:7.2.0"
@@ -5505,7 +5519,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-array@npm:2 - 3, d3-array@npm:2.10.0 - 3, d3-array@npm:2.5.0 - 3, d3-array@npm:3, d3-array@npm:^3.2.0":
+"d3-array@npm:1 - 3, d3-array@npm:2 - 3, d3-array@npm:2.10.0 - 3, d3-array@npm:2.5.0 - 3, d3-array@npm:3, d3-array@npm:3.2.4, d3-array@npm:^3.2.0, d3-array@npm:^3.2.2":
   version: 3.2.4
   resolution: "d3-array@npm:3.2.4"
   dependencies:
@@ -5543,7 +5557,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-color@npm:1 - 3, d3-color@npm:3":
+"d3-color@npm:1 - 3, d3-color@npm:3, d3-color@npm:^3.1.0":
   version: 3.1.0
   resolution: "d3-color@npm:3.1.0"
   checksum: 536ba05bfd9f4fcd6fa289b5974f5c846b21d186875684637e22bf6855e6aba93e24a2eb3712985c6af3f502fbbfa03708edb72f58142f626241a8a17258e545
@@ -5559,7 +5573,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-delaunay@npm:6":
+"d3-delaunay@npm:6, d3-delaunay@npm:^6.0.2":
   version: 6.0.4
   resolution: "d3-delaunay@npm:6.0.4"
   dependencies:
@@ -5585,7 +5599,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-dsv@npm:1 - 3, d3-dsv@npm:3":
+"d3-dsv@npm:1 - 3, d3-dsv@npm:3, d3-dsv@npm:^3.0.1":
   version: 3.0.1
   resolution: "d3-dsv@npm:3.0.1"
   dependencies:
@@ -5622,7 +5636,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-force@npm:3":
+"d3-force@npm:3, d3-force@npm:^3.0.0":
   version: 3.0.0
   resolution: "d3-force@npm:3.0.0"
   dependencies:
@@ -5633,14 +5647,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-format@npm:1 - 3, d3-format@npm:3":
+"d3-format@npm:1 - 3, d3-format@npm:3, d3-format@npm:^3.1.0":
   version: 3.1.0
   resolution: "d3-format@npm:3.1.0"
   checksum: a0fe23d2575f738027a3db0ce57160e5a473ccf24808c1ed46d45ef4f3211076b34a18b585547d34e365e78dcc26dd4ab15c069731fc4b1c07a26bfced09ea31
   languageName: node
   linkType: hard
 
-"d3-geo@npm:3":
+"d3-geo-projection@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "d3-geo-projection@npm:4.0.0"
+  dependencies:
+    commander: "npm:7"
+    d3-array: "npm:1 - 3"
+    d3-geo: "npm:1.12.0 - 3"
+  bin:
+    geo2svg: bin/geo2svg.js
+    geograticule: bin/geograticule.js
+    geoproject: bin/geoproject.js
+    geoquantize: bin/geoquantize.js
+    geostitch: bin/geostitch.js
+  checksum: 41cc71ec76ec34956a09c9461fce507fd9b3052b6e055b9113f047a86bf92d3dfb6328c062fbe2a55b9def2beab8127e2de80bff63c2ecd9ce21b1e6257032a3
+  languageName: node
+  linkType: hard
+
+"d3-geo@npm:1.12.0 - 3, d3-geo@npm:3, d3-geo@npm:^3.1.0":
   version: 3.1.1
   resolution: "d3-geo@npm:3.1.1"
   dependencies:
@@ -5649,14 +5680,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-hierarchy@npm:3":
+"d3-hierarchy@npm:3, d3-hierarchy@npm:^3.1.2":
   version: 3.1.2
   resolution: "d3-hierarchy@npm:3.1.2"
   checksum: 497b79dc6c35e28b21e8a7b94db92876abd1d4ec082d9803a07ea8964e55b0e71c511a21489363a36f1456f069adb8ff7d33c633678730d6ae961ed350b27733
   languageName: node
   linkType: hard
 
-"d3-interpolate@npm:1 - 3, d3-interpolate@npm:1.2.0 - 3, d3-interpolate@npm:3":
+"d3-interpolate@npm:1 - 3, d3-interpolate@npm:1.2.0 - 3, d3-interpolate@npm:3, d3-interpolate@npm:^3.0.1":
   version: 3.0.1
   resolution: "d3-interpolate@npm:3.0.1"
   dependencies:
@@ -5693,7 +5724,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-scale-chromatic@npm:3":
+"d3-scale-chromatic@npm:3, d3-scale-chromatic@npm:^3.1.0":
   version: 3.1.0
   resolution: "d3-scale-chromatic@npm:3.1.0"
   dependencies:
@@ -5703,7 +5734,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-scale@npm:4":
+"d3-scale@npm:4, d3-scale@npm:^4.0.2":
   version: 4.0.2
   resolution: "d3-scale@npm:4.0.2"
   dependencies:
@@ -5723,7 +5754,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-shape@npm:3":
+"d3-shape@npm:3, d3-shape@npm:^3.2.0":
   version: 3.2.0
   resolution: "d3-shape@npm:3.2.0"
   dependencies:
@@ -5732,7 +5763,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-time-format@npm:2 - 4, d3-time-format@npm:4":
+"d3-time-format@npm:2 - 4, d3-time-format@npm:4, d3-time-format@npm:^4.1.0":
   version: 4.1.0
   resolution: "d3-time-format@npm:4.1.0"
   dependencies:
@@ -5741,7 +5772,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-time@npm:1 - 3, d3-time@npm:2.1.1 - 3, d3-time@npm:3":
+"d3-time@npm:1 - 3, d3-time@npm:2.1.1 - 3, d3-time@npm:3, d3-time@npm:^3.1.0":
   version: 3.1.0
   resolution: "d3-time@npm:3.1.0"
   dependencies:
@@ -5750,7 +5781,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-timer@npm:1 - 3, d3-timer@npm:3":
+"d3-timer@npm:1 - 3, d3-timer@npm:3, d3-timer@npm:^3.0.1":
   version: 3.0.1
   resolution: "d3-timer@npm:3.0.1"
   checksum: 004128602bb187948d72c7dc153f0f063f38ac7a584171de0b45e3a841ad2e17f1e40ad396a4af9cce5551b6ab4a838d5246d23492553843d9da4a4050a911e2
@@ -7723,6 +7754,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-json-patch@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "fast-json-patch@npm:3.1.1"
+  checksum: 3e56304e1c95ad1862a50e5b3f557a74c65c0ff2ba5b15caab983b43e70e86ddbc5bc887e9f7064f0aacfd0f0435a29ab2f000fe463379e72b906486345e6671
+  languageName: node
+  linkType: hard
+
 "fast-json-stable-stringify@npm:^2.0.0, fast-json-stable-stringify@npm:^2.1.0":
   version: 2.1.0
   resolution: "fast-json-stable-stringify@npm:2.1.0"
@@ -8667,7 +8705,9 @@ __metadata:
     sass: "npm:1.56.1"
     typescript: "npm:5.4.5"
     uuid: "npm:9.0.1"
-    vega-lite: "npm:^5.19.0"
+    vega: "npm:5.30.0"
+    vega-embed: "npm:6.25.0"
+    vega-lite: "npm:5.19.0"
     vite: "npm:5.2.13"
     vite-svg-loader: "npm:4.0.0"
     vitest: "npm:0.24.5"
@@ -10277,7 +10317,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json-stringify-pretty-compact@npm:~3.0.0":
+"json-stringify-pretty-compact@npm:^3.0.0, json-stringify-pretty-compact@npm:~3.0.0":
   version: 3.0.0
   resolution: "json-stringify-pretty-compact@npm:3.0.0"
   checksum: bf2cfb77e5eedb38c2a3c5ff2b8680e05a6073209bd54176640e90c2bc49c9eb798c8c6a3267216981291f8e3a6b82c996bfae71c155cbfd51eb3f998eeea482
@@ -11289,7 +11329,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-fetch@npm:^2.6.0":
+"node-fetch@npm:^2.6.0, node-fetch@npm:^2.6.7":
   version: 2.7.0
   resolution: "node-fetch@npm:2.7.0"
   dependencies:
@@ -13968,6 +14008,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"topojson-client@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "topojson-client@npm:3.1.0"
+  dependencies:
+    commander: "npm:2"
+  bin:
+    topo2geo: bin/topo2geo
+    topomerge: bin/topomerge
+    topoquantize: bin/topoquantize
+  checksum: a0bd2f313dfeb2893ccbe00492f47518c62f0da41f6ee16a9d362dced57f79ba5bd51ae62038387b446463cd8e033d68a217c98c62d8b5fe2b807d9dd18406fc
+  languageName: node
+  linkType: hard
+
 "tough-cookie@npm:^4.1.4":
   version: 4.1.4
   resolution: "tough-cookie@npm:4.1.4"
@@ -14477,14 +14530,75 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vega-event-selector@npm:~3.0.1":
+"vega-canvas@npm:^1.2.7":
+  version: 1.2.7
+  resolution: "vega-canvas@npm:1.2.7"
+  checksum: 6ff92fcdf0c359f2f662909c859a7f4cb4a502436136ab2f4c02373c47a621996ec0eea23e2108f11d62a618be301de86cd8528b5058c2e207a53ddd7ff58d1b
+  languageName: node
+  linkType: hard
+
+"vega-crossfilter@npm:~4.1.2":
+  version: 4.1.2
+  resolution: "vega-crossfilter@npm:4.1.2"
+  dependencies:
+    d3-array: "npm:^3.2.2"
+    vega-dataflow: "npm:^5.7.6"
+    vega-util: "npm:^1.17.2"
+  checksum: e03ca6409cb2f4be94654ddaaf0259e44916a6b1a4161ceebd2014bfbec70829a476fbf4d7283408ad5e01514272123d3409477ee747de08396a411028e61795
+  languageName: node
+  linkType: hard
+
+"vega-dataflow@npm:^5.7.6, vega-dataflow@npm:~5.7.6":
+  version: 5.7.6
+  resolution: "vega-dataflow@npm:5.7.6"
+  dependencies:
+    vega-format: "npm:^1.1.2"
+    vega-loader: "npm:^4.5.2"
+    vega-util: "npm:^1.17.2"
+  checksum: 24ad1f2618c115af33274d00cf3c8d15ad56c885402d5e4a84bcc48d1d68b5f721932114bdb5003b7317331b6e16217c36f776c2cc66626d1b46839d557c62a6
+  languageName: node
+  linkType: hard
+
+"vega-embed@npm:6.25.0":
+  version: 6.25.0
+  resolution: "vega-embed@npm:6.25.0"
+  dependencies:
+    fast-json-patch: "npm:^3.1.1"
+    json-stringify-pretty-compact: "npm:^3.0.0"
+    semver: "npm:^7.6.0"
+    tslib: "npm:^2.6.2"
+    vega-interpreter: "npm:^1.0.5"
+    vega-schema-url-parser: "npm:^2.2.0"
+    vega-themes: "npm:^2.14.0"
+    vega-tooltip: "npm:^0.34.0"
+  peerDependencies:
+    vega: ^5.21.0
+    vega-lite: "*"
+  checksum: 13c5e0ce7d4e5a0888cea94c4b20fcf7275b4ca2984e8a1111954cf00facaf215c1a4e26a53e0844d9a5fe828b320ae746accbe8f21543bb242ad709b902a669
+  languageName: node
+  linkType: hard
+
+"vega-encode@npm:~4.10.1":
+  version: 4.10.1
+  resolution: "vega-encode@npm:4.10.1"
+  dependencies:
+    d3-array: "npm:^3.2.2"
+    d3-interpolate: "npm:^3.0.1"
+    vega-dataflow: "npm:^5.7.6"
+    vega-scale: "npm:^7.4.1"
+    vega-util: "npm:^1.17.2"
+  checksum: 65522043a1745ecd456d4aa4daea2e2886329c2a162427ab7b750ac526766b8075e6100a9237f7e1c121c4e285155d298ae5db9f45b8a3f7a2c55faf6030eb61
+  languageName: node
+  linkType: hard
+
+"vega-event-selector@npm:^3.0.1, vega-event-selector@npm:~3.0.1":
   version: 3.0.1
   resolution: "vega-event-selector@npm:3.0.1"
   checksum: fe02aa5942cc410bab11f6c5e61882b9215c4b26728d1979db292c8434dc1516f500714cff1db81413ba63c6d7b2e40acc1cb2473bd779312116236df8a5c03b
   languageName: node
   linkType: hard
 
-"vega-expression@npm:~5.1.0":
+"vega-expression@npm:^5.0.1, vega-expression@npm:^5.1.1, vega-expression@npm:~5.1.0, vega-expression@npm:~5.1.1":
   version: 5.1.1
   resolution: "vega-expression@npm:5.1.1"
   dependencies:
@@ -14494,7 +14608,96 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vega-lite@npm:^5.19.0":
+"vega-force@npm:~4.2.1":
+  version: 4.2.1
+  resolution: "vega-force@npm:4.2.1"
+  dependencies:
+    d3-force: "npm:^3.0.0"
+    vega-dataflow: "npm:^5.7.6"
+    vega-util: "npm:^1.17.2"
+  checksum: bdbca51e5249bfb1b9b2376420e3a0e754a6c00687e4ad59fb81141e4e73cd8215e8dac7ef017853f311b847b81022fabc7415e9a0b3ac24cca0ec75bd94e648
+  languageName: node
+  linkType: hard
+
+"vega-format@npm:^1.1.2, vega-format@npm:~1.1.2":
+  version: 1.1.2
+  resolution: "vega-format@npm:1.1.2"
+  dependencies:
+    d3-array: "npm:^3.2.2"
+    d3-format: "npm:^3.1.0"
+    d3-time-format: "npm:^4.1.0"
+    vega-time: "npm:^2.1.2"
+    vega-util: "npm:^1.17.2"
+  checksum: 80bcb809bcda8089b43c4d369a32c187231c82784216ada14a01ac0ca4aa890a50eddf514ce88eea05e9563c07661adde5de56f373a8df4149e0cd378330e3e1
+  languageName: node
+  linkType: hard
+
+"vega-functions@npm:^5.15.0, vega-functions@npm:~5.15.0":
+  version: 5.15.0
+  resolution: "vega-functions@npm:5.15.0"
+  dependencies:
+    d3-array: "npm:^3.2.2"
+    d3-color: "npm:^3.1.0"
+    d3-geo: "npm:^3.1.0"
+    vega-dataflow: "npm:^5.7.6"
+    vega-expression: "npm:^5.1.1"
+    vega-scale: "npm:^7.4.1"
+    vega-scenegraph: "npm:^4.13.0"
+    vega-selections: "npm:^5.4.2"
+    vega-statistics: "npm:^1.9.0"
+    vega-time: "npm:^2.1.2"
+    vega-util: "npm:^1.17.2"
+  checksum: 0b54e7528e6befece421e657f2936d67d86e0573367c396cc6296ee19fbad3b01a6128359d67b77441dcc6bd96056f62f5f7b21893047ba61946497baeedee5f
+  languageName: node
+  linkType: hard
+
+"vega-geo@npm:~4.4.2":
+  version: 4.4.2
+  resolution: "vega-geo@npm:4.4.2"
+  dependencies:
+    d3-array: "npm:^3.2.2"
+    d3-color: "npm:^3.1.0"
+    d3-geo: "npm:^3.1.0"
+    vega-canvas: "npm:^1.2.7"
+    vega-dataflow: "npm:^5.7.6"
+    vega-projection: "npm:^1.6.1"
+    vega-statistics: "npm:^1.9.0"
+    vega-util: "npm:^1.17.2"
+  checksum: 66c5baddc877166c0c33fd402b778d0fd20b0a2ae67336608863cac57b782a0e57078a798a0e2d50ee6eb634a4f6b438c54588bcbc1b1eae2206958194176dc6
+  languageName: node
+  linkType: hard
+
+"vega-hierarchy@npm:~4.1.2":
+  version: 4.1.2
+  resolution: "vega-hierarchy@npm:4.1.2"
+  dependencies:
+    d3-hierarchy: "npm:^3.1.2"
+    vega-dataflow: "npm:^5.7.6"
+    vega-util: "npm:^1.17.2"
+  checksum: a092da22ac853fd94031ec1b15f7aacbeae31d7176fe1ad299074a3cddf37600e1c6fd0761df24b2c0d691d8b18760cf080aff299de32dccf267218e51cafce5
+  languageName: node
+  linkType: hard
+
+"vega-interpreter@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "vega-interpreter@npm:1.0.5"
+  checksum: 8e71f65feee2737483b9fcb1be7de10f3571d21b60b55555697d4494c31ddcccbaaccf3aca29cfe2bec43239d94870a341c46abfbd0ab65010471e75e8086c0d
+  languageName: node
+  linkType: hard
+
+"vega-label@npm:~1.3.0":
+  version: 1.3.0
+  resolution: "vega-label@npm:1.3.0"
+  dependencies:
+    vega-canvas: "npm:^1.2.7"
+    vega-dataflow: "npm:^5.7.6"
+    vega-scenegraph: "npm:^4.13.0"
+    vega-util: "npm:^1.17.2"
+  checksum: 6f91a7cfbe6b4e9c2daf6ea59ea08ddc677ff579847b9f0a08a286e7f62f6b68dd09ae75b78e70c01dc8e3a0637dbb8bc4745d5f1661da5ddd3f1cce9775553a
+  languageName: node
+  linkType: hard
+
+"vega-lite@npm:5.19.0":
   version: 5.19.0
   resolution: "vega-lite@npm:5.19.0"
   dependencies:
@@ -14515,13 +14718,268 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vega-util@npm:^1.17.2, vega-util@npm:~1.17.2":
+"vega-loader@npm:^4.5.2, vega-loader@npm:~4.5.2":
+  version: 4.5.2
+  resolution: "vega-loader@npm:4.5.2"
+  dependencies:
+    d3-dsv: "npm:^3.0.1"
+    node-fetch: "npm:^2.6.7"
+    topojson-client: "npm:^3.1.0"
+    vega-format: "npm:^1.1.2"
+    vega-util: "npm:^1.17.2"
+  checksum: d5437532cee6b43ae4f8e7dace89aa01d6cf2d5fc66b4e19b05cb0f1e0ebfd240a2d97eb6f0e98a3a1ba8cc25652d4becbd5db9424a059d11e5903c1c2ef6376
+  languageName: node
+  linkType: hard
+
+"vega-parser@npm:~6.4.0":
+  version: 6.4.0
+  resolution: "vega-parser@npm:6.4.0"
+  dependencies:
+    vega-dataflow: "npm:^5.7.6"
+    vega-event-selector: "npm:^3.0.1"
+    vega-functions: "npm:^5.15.0"
+    vega-scale: "npm:^7.4.1"
+    vega-util: "npm:^1.17.2"
+  checksum: 0e77b0bb98c73c4395735dd9039ae9160ebe8cef213f6d8cba600beef16720f19c189fdc4e1c9f46963e0ed59d5edd35cd13d7ce5ed0286d9012de11ca546c7b
+  languageName: node
+  linkType: hard
+
+"vega-projection@npm:^1.6.1, vega-projection@npm:~1.6.1":
+  version: 1.6.1
+  resolution: "vega-projection@npm:1.6.1"
+  dependencies:
+    d3-geo: "npm:^3.1.0"
+    d3-geo-projection: "npm:^4.0.0"
+    vega-scale: "npm:^7.4.1"
+  checksum: daf5d1e1fc7832286feda6758384f6a20b5a649fbad179d330a73e3c732e032c82bd1fd6cda1a60bbcb0f275b144f35a4b7676471c063818dda1df91768fe948
+  languageName: node
+  linkType: hard
+
+"vega-regression@npm:~1.3.0":
+  version: 1.3.0
+  resolution: "vega-regression@npm:1.3.0"
+  dependencies:
+    d3-array: "npm:^3.2.2"
+    vega-dataflow: "npm:^5.7.6"
+    vega-statistics: "npm:^1.9.0"
+    vega-util: "npm:^1.17.2"
+  checksum: 99291bbc27df4f4b7073f78bbb36d702ee4f778677c1fa87eb010155a85ea7699e2734712cbec3f7f6e72bd962185382bccd408aeb25f6b4f852481aee124f86
+  languageName: node
+  linkType: hard
+
+"vega-runtime@npm:^6.2.0, vega-runtime@npm:~6.2.0":
+  version: 6.2.0
+  resolution: "vega-runtime@npm:6.2.0"
+  dependencies:
+    vega-dataflow: "npm:^5.7.6"
+    vega-util: "npm:^1.17.2"
+  checksum: b247bfa1766a7d311cdc2f94ddb1628679c364f40f921822a274242e3499099ac59b51de0b7eb29630b6418e548c7b8641083a7ccb5a64fd353f6cfc6037b104
+  languageName: node
+  linkType: hard
+
+"vega-scale@npm:^7.4.1, vega-scale@npm:~7.4.1":
+  version: 7.4.1
+  resolution: "vega-scale@npm:7.4.1"
+  dependencies:
+    d3-array: "npm:^3.2.2"
+    d3-interpolate: "npm:^3.0.1"
+    d3-scale: "npm:^4.0.2"
+    d3-scale-chromatic: "npm:^3.1.0"
+    vega-time: "npm:^2.1.2"
+    vega-util: "npm:^1.17.2"
+  checksum: a043b61e39fee529b68ff8c4b28d7a3768e267e023a99865f37ed87e377f6c393eae3433db131c1878e2ac03b49454ddd591156124096b2dd64569bdf359e320
+  languageName: node
+  linkType: hard
+
+"vega-scenegraph@npm:^4.13.0, vega-scenegraph@npm:~4.13.0":
+  version: 4.13.0
+  resolution: "vega-scenegraph@npm:4.13.0"
+  dependencies:
+    d3-path: "npm:^3.1.0"
+    d3-shape: "npm:^3.2.0"
+    vega-canvas: "npm:^1.2.7"
+    vega-loader: "npm:^4.5.2"
+    vega-scale: "npm:^7.4.1"
+    vega-util: "npm:^1.17.2"
+  checksum: 436169bd98b5351ab20564ade0b9bbb5024de19ab798470f88c69c480eb388f13c4bbed33a3202e1bb92ef45b83ef0317923e80e976587d850590aebcaf45324
+  languageName: node
+  linkType: hard
+
+"vega-schema-url-parser@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "vega-schema-url-parser@npm:2.2.0"
+  checksum: 09c3321bfe0a464d574c3b76f934fb69c1f764710d5b92933ba5c3a5a3073995cfecd0e45d56d3e5b9b53dfc3bbfbcf87303cdc81660ea7956209ed9b44529a9
+  languageName: node
+  linkType: hard
+
+"vega-selections@npm:^5.4.2":
+  version: 5.4.2
+  resolution: "vega-selections@npm:5.4.2"
+  dependencies:
+    d3-array: "npm:3.2.4"
+    vega-expression: "npm:^5.0.1"
+    vega-util: "npm:^1.17.1"
+  checksum: 81e5f9310d968607a40f760b599212a3e9899e822c5b097f0dd76fbbc3f2100b96fddf1b0ad178655bedcf8731b422fb5e76a6a02ae27a62055c6abffa7f1bec
+  languageName: node
+  linkType: hard
+
+"vega-statistics@npm:^1.9.0, vega-statistics@npm:~1.9.0":
+  version: 1.9.0
+  resolution: "vega-statistics@npm:1.9.0"
+  dependencies:
+    d3-array: "npm:^3.2.2"
+  checksum: c077358aef3709e14c83a3bd4b08344eb7ce5fe5f7991a6a029cf267667e1b2ccdc0029ec617866d5a4b3fe4e7df75573f77e0e4b38ae9109c816a51c25809dc
+  languageName: node
+  linkType: hard
+
+"vega-themes@npm:^2.14.0":
+  version: 2.15.0
+  resolution: "vega-themes@npm:2.15.0"
+  peerDependencies:
+    vega: "*"
+    vega-lite: "*"
+  checksum: c5697aba40701a327f22e8885c186cc5c8843b337946b06d86bf44238bc77a8baeca031c7183c20cc0f000d8caa6b985bf5b1f24e5f14a9ef5dabe760a5e020f
+  languageName: node
+  linkType: hard
+
+"vega-time@npm:^2.1.2, vega-time@npm:~2.1.2":
+  version: 2.1.2
+  resolution: "vega-time@npm:2.1.2"
+  dependencies:
+    d3-array: "npm:^3.2.2"
+    d3-time: "npm:^3.1.0"
+    vega-util: "npm:^1.17.2"
+  checksum: 26794e4cbb64c768ab50848ba042e3ce24c5911d3fa1436761e87992862db88a63f5de753df6c99d49194ad88018b88889e8ab319b36abd5546c4c1734c99cfc
+  languageName: node
+  linkType: hard
+
+"vega-tooltip@npm:^0.34.0":
+  version: 0.34.0
+  resolution: "vega-tooltip@npm:0.34.0"
+  dependencies:
+    vega-util: "npm:^1.17.2"
+  checksum: 1a324123e9ebe2e17a51f5ef899acd3a8bc4c17a9278198d6181b744892372c933061d549c8c31b842761f63d46d31b4f289332451d1ddf7492dfa4d99384d48
+  languageName: node
+  linkType: hard
+
+"vega-transforms@npm:~4.12.0":
+  version: 4.12.0
+  resolution: "vega-transforms@npm:4.12.0"
+  dependencies:
+    d3-array: "npm:^3.2.2"
+    vega-dataflow: "npm:^5.7.6"
+    vega-statistics: "npm:^1.9.0"
+    vega-time: "npm:^2.1.2"
+    vega-util: "npm:^1.17.2"
+  checksum: 269f0d0adcf796cc02ab850742572385bfe93fe33a01328b88418e336b6d2e05f55587cd143851adf0ce798306bcfd8e61137234ed2e1dfb2645d8007e0e319d
+  languageName: node
+  linkType: hard
+
+"vega-typings@npm:~1.3.1":
+  version: 1.3.1
+  resolution: "vega-typings@npm:1.3.1"
+  dependencies:
+    "@types/geojson": "npm:7946.0.4"
+    vega-event-selector: "npm:^3.0.1"
+    vega-expression: "npm:^5.1.1"
+    vega-util: "npm:^1.17.2"
+  checksum: 892099114e16ac491a59b65480fcda59dbab8c95e809b5f99af6ed688116ee9632c431c1eb5d13f1ec27090ad9c1eb1e4113d97c70f93b8bc3221a7f08d79663
+  languageName: node
+  linkType: hard
+
+"vega-util@npm:^1.17.1, vega-util@npm:^1.17.2, vega-util@npm:~1.17.2":
   version: 1.17.2
   resolution: "vega-util@npm:1.17.2"
   checksum: dc8e93b85dbe132d83f5979364bbe5fb42a771cc93ac63e09ce7e49e98c384b0f46da3df2ad86b2e2d180ac395add57d8c85d61e1660d4a8143ad7364d6a1da1
   languageName: node
   linkType: hard
 
+"vega-view-transforms@npm:~4.6.0":
+  version: 4.6.0
+  resolution: "vega-view-transforms@npm:4.6.0"
+  dependencies:
+    vega-dataflow: "npm:^5.7.6"
+    vega-scenegraph: "npm:^4.13.0"
+    vega-util: "npm:^1.17.2"
+  checksum: 2d3b0a11de3fcbd9e28ae356c5511db275d628aace441c97826ceb69a7310609fc191cd4fe7fc0ec2943c5fc5c4022b80d9ee9d3d08e71a81d5757463662a093
+  languageName: node
+  linkType: hard
+
+"vega-view@npm:~5.13.0":
+  version: 5.13.0
+  resolution: "vega-view@npm:5.13.0"
+  dependencies:
+    d3-array: "npm:^3.2.2"
+    d3-timer: "npm:^3.0.1"
+    vega-dataflow: "npm:^5.7.6"
+    vega-format: "npm:^1.1.2"
+    vega-functions: "npm:^5.15.0"
+    vega-runtime: "npm:^6.2.0"
+    vega-scenegraph: "npm:^4.13.0"
+    vega-util: "npm:^1.17.2"
+  checksum: c07f857a623ed1962111aa278a896f573e63b8c9c1dee76fa658a55fb334b839098f180ae56442b2ca88c3221e97792a71c2245bd332a9894ecad211dba4c2b0
+  languageName: node
+  linkType: hard
+
+"vega-voronoi@npm:~4.2.3":
+  version: 4.2.3
+  resolution: "vega-voronoi@npm:4.2.3"
+  dependencies:
+    d3-delaunay: "npm:^6.0.2"
+    vega-dataflow: "npm:^5.7.6"
+    vega-util: "npm:^1.17.2"
+  checksum: 16c8624bd8d7786b9fb7d4105f901a05cceeafd5a63297c68585630159382106543d8f36900b26d159e6754d946a6259b828b63a8f0f62c24434913d03af1379
+  languageName: node
+  linkType: hard
+
+"vega-wordcloud@npm:~4.1.5":
+  version: 4.1.5
+  resolution: "vega-wordcloud@npm:4.1.5"
+  dependencies:
+    vega-canvas: "npm:^1.2.7"
+    vega-dataflow: "npm:^5.7.6"
+    vega-scale: "npm:^7.4.1"
+    vega-statistics: "npm:^1.9.0"
+    vega-util: "npm:^1.17.2"
+  checksum: 58ea1640379e27850e30cd553aaf4cfba7c652fd7985c5ca6cd8c7cc21d51d7157a605ef7792d1e9f3bd1e515fea45e0c84783ae9a3e8f1140362cecd36ab35c
+  languageName: node
+  linkType: hard
+
+"vega@npm:5.30.0":
+  version: 5.30.0
+  resolution: "vega@npm:5.30.0"
+  dependencies:
+    vega-crossfilter: "npm:~4.1.2"
+    vega-dataflow: "npm:~5.7.6"
+    vega-encode: "npm:~4.10.1"
+    vega-event-selector: "npm:~3.0.1"
+    vega-expression: "npm:~5.1.1"
+    vega-force: "npm:~4.2.1"
+    vega-format: "npm:~1.1.2"
+    vega-functions: "npm:~5.15.0"
+    vega-geo: "npm:~4.4.2"
+    vega-hierarchy: "npm:~4.1.2"
+    vega-label: "npm:~1.3.0"
+    vega-loader: "npm:~4.5.2"
+    vega-parser: "npm:~6.4.0"
+    vega-projection: "npm:~1.6.1"
+    vega-regression: "npm:~1.3.0"
+    vega-runtime: "npm:~6.2.0"
+    vega-scale: "npm:~7.4.1"
+    vega-scenegraph: "npm:~4.13.0"
+    vega-statistics: "npm:~1.9.0"
+    vega-time: "npm:~2.1.2"
+    vega-transforms: "npm:~4.12.0"
+    vega-typings: "npm:~1.3.1"
+    vega-util: "npm:~1.17.2"
+    vega-view: "npm:~5.13.0"
+    vega-view-transforms: "npm:~4.6.0"
+    vega-voronoi: "npm:~4.2.3"
+    vega-wordcloud: "npm:~4.1.5"
+  checksum: 43ba469f353217c0b1aa1e64895816094ffb968df90f03e6314bddc18f08a0b29e8e768d9d56ab0830b6c03bcf83567e4c24a5d74b6a488760998ce86296ea16
+  languageName: node
+  linkType: hard
+
 "vinyl@npm:^1.1.1":
   version: 1.2.0
   resolution: "vinyl@npm:1.2.0"

From d47ed6b1c2e9d73bffa55b0562346226d16192b8 Mon Sep 17 00:00:00 2001
From: Daniel Chang <mwdchang@gmail.com>
Date: Wed, 19 Jun 2024 16:25:09 -0400
Subject: [PATCH 4/9] debug

---
 packages/client/hmi-client/src/temp/Vegalite.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/client/hmi-client/src/temp/Vegalite.vue b/packages/client/hmi-client/src/temp/Vegalite.vue
index 6361c2440e..0518b8d443 100644
--- a/packages/client/hmi-client/src/temp/Vegalite.vue
+++ b/packages/client/hmi-client/src/temp/Vegalite.vue
@@ -1,11 +1,17 @@
 <template>
-	<vega-chart :visualization-spec="spec" />
+	<div style="padding: 2rem">
+		<vega-chart :visualization-spec="spec" @chart-click="handleChartClick($event)" />
+	</div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import VegaChart from './VegaChart.vue';
 
+const handleChartClick = (event: any) => {
+	console.log('!!', event);
+};
+
 const spec = ref<any>({
 	$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
 	data: { url: 'https://vega.github.io/editor/data/unemployment-across-industries.json' },
@@ -36,6 +42,7 @@ const spec = ref<any>({
 			encoding: {
 				color: { value: '#a52' },
 				x: {
+					title: '',
 					field: 'count',
 					type: 'quantitative',
 					scale: { zero: false }
@@ -50,8 +57,8 @@ const spec = ref<any>({
 				color: { value: '#f80' },
 				opacity: { value: 0.4 },
 				size: { value: 5 },
-				x: { field: 'count', type: 'quantitative' },
-				y: { field: 'jitter', type: 'quantitative' }
+				x: { field: 'count', type: 'quantitative', title: '' },
+				y: { field: 'jitter', type: 'quantitative', title: '' }
 			}
 		}
 	]

From 50c5ca87b99f91d339278a67cc307690043274cc Mon Sep 17 00:00:00 2001
From: Jaehwan Ryu <jryu@uncharted.software>
Date: Thu, 20 Jun 2024 18:29:08 -0400
Subject: [PATCH 5/9] Fire brush selection event (#3951)

---
 packages/client/hmi-client/src/temp/Vegalite.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/client/hmi-client/src/temp/Vegalite.vue b/packages/client/hmi-client/src/temp/Vegalite.vue
index 0518b8d443..cbe2e00cb8 100644
--- a/packages/client/hmi-client/src/temp/Vegalite.vue
+++ b/packages/client/hmi-client/src/temp/Vegalite.vue
@@ -1,6 +1,11 @@
 <template>
 	<div style="padding: 2rem">
-		<vega-chart :visualization-spec="spec" @chart-click="handleChartClick($event)" />
+		<vega-chart
+			:interval-selection-signal-names="['brush']"
+			:visualization-spec="spec"
+			@chart-click="handleChartClick($event)"
+			@update-interval-selection="handleIntervalSelect"
+		/>
 	</div>
 </template>
 
@@ -12,6 +17,10 @@ const handleChartClick = (event: any) => {
 	console.log('!!', event);
 };
 
+const handleIntervalSelect = (name: any, valueRange: any) => {
+	console.log(name, valueRange);
+};
+
 const spec = ref<any>({
 	$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
 	data: { url: 'https://vega.github.io/editor/data/unemployment-across-industries.json' },
@@ -21,6 +30,7 @@ const spec = ref<any>({
 			width: 500,
 			height: 100,
 			mark: 'area',
+			transform: [{ filter: { param: 'brush' } }],
 			encoding: {
 				color: { value: '#0d4' },
 				x: {
@@ -39,6 +49,7 @@ const spec = ref<any>({
 			width: 500,
 			height: 50,
 			mark: 'boxplot',
+			transform: [{ filter: { param: 'brush' } }],
 			encoding: {
 				color: { value: '#a52' },
 				x: {
@@ -59,7 +70,8 @@ const spec = ref<any>({
 				size: { value: 5 },
 				x: { field: 'count', type: 'quantitative', title: '' },
 				y: { field: 'jitter', type: 'quantitative', title: '' }
-			}
+			},
+			params: [{ name: 'brush', select: 'interval' }]
 		}
 	]
 });

From 57d83db0ac3c6d71d3787769ddbf7aa8be5890e8 Mon Sep 17 00:00:00 2001
From: Daniel Chang <mwdchang@gmail.com>
Date: Fri, 21 Jun 2024 12:24:49 -0400
Subject: [PATCH 6/9] make more realistic test

---
 .../client/hmi-client/src/temp/Vegalite.vue   | 84 ++++++++++++++++++-
 1 file changed, 83 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/temp/Vegalite.vue b/packages/client/hmi-client/src/temp/Vegalite.vue
index cbe2e00cb8..c4154e40ec 100644
--- a/packages/client/hmi-client/src/temp/Vegalite.vue
+++ b/packages/client/hmi-client/src/temp/Vegalite.vue
@@ -1,11 +1,12 @@
 <template>
-	<div style="padding: 2rem">
+	<div style="padding: 2rem; display: flex; flex-direction: row">
 		<vega-chart
 			:interval-selection-signal-names="['brush']"
 			:visualization-spec="spec"
 			@chart-click="handleChartClick($event)"
 			@update-interval-selection="handleIntervalSelect"
 		/>
+		<vega-chart :visualization-spec="spec2" />
 	</div>
 </template>
 
@@ -13,6 +14,8 @@
 import { ref } from 'vue';
 import VegaChart from './VegaChart.vue';
 
+const rand = (v: number) => Math.round(Math.random() * v);
+
 const handleChartClick = (event: any) => {
 	console.log('!!', event);
 };
@@ -21,6 +24,84 @@ const handleIntervalSelect = (name: any, valueRange: any) => {
 	console.log(name, valueRange);
 };
 
+const numPoints = 10;
+const numSamples = 20;
+const valueRange = 20;
+const trueValues: any[] = [];
+const dataChart1: any[] = [];
+const dataChart2: any[] = [];
+
+for (let j = 0; j < numPoints; j++) {
+	trueValues.push(rand(valueRange));
+}
+
+for (let i = 0; i < numSamples; i++) {
+	let error = 0;
+	for (let j = 0; j < numPoints; j++) {
+		const v = rand(valueRange);
+		dataChart2.push({ sample: i, timestep: j, value: v });
+		error += Math.abs(trueValues[j] - v);
+	}
+	dataChart1.push({ sample: i, error: error });
+}
+
+const spec = ref<any>({
+	$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+	data: { values: dataChart1 },
+	transform: [
+		{
+			aggregate: [{ op: 'count', field: '*', as: 'count' }],
+			groupby: ['error']
+		},
+		{ calculate: 'random()', as: 'jitter' }
+	],
+	vconcat: [
+		{
+			mark: 'area',
+			encoding: {
+				x: {
+					field: 'error',
+					type: 'quantitative'
+				},
+				y: {
+					field: 'count',
+					type: 'quantitative'
+				}
+			}
+		},
+		{
+			mark: 'point',
+			encoding: {
+				data: { value: dataChart1 },
+				color: { value: '#f80' },
+				opacity: { value: 0.8 },
+				size: { value: 15 },
+				x: { field: 'error', type: 'quantitative', title: '' },
+				y: { field: 'jitter', type: 'quantitative', title: '' }
+			},
+			params: [{ name: 'brush', select: 'interval' }]
+		}
+	]
+});
+
+const spec2 = ref<any>({
+	$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+	description: 'Stock prices of 5 Tech Companies over Time.',
+	// data: { url: 'https://vega.github.io/vega-lite/data/stocks.csv' },
+	data: { values: dataChart2 },
+	mark: 'line',
+	encoding: {
+		x: { field: 'timestep', type: 'quantitative' },
+		y: { field: 'value', type: 'quantitative' },
+		color: {
+			field: 'sample',
+			type: 'nominal',
+			legend: null
+		}
+	}
+});
+
+/*
 const spec = ref<any>({
 	$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
 	data: { url: 'https://vega.github.io/editor/data/unemployment-across-industries.json' },
@@ -75,4 +156,5 @@ const spec = ref<any>({
 		}
 	]
 });
+*/
 </script>

From d47d26d314017740dc48527848312bbfd5c638c6 Mon Sep 17 00:00:00 2001
From: Daniel Chang <mwdchang@gmail.com>
Date: Fri, 21 Jun 2024 14:57:35 -0400
Subject: [PATCH 7/9] update vega tests

---
 .../client/hmi-client/src/temp/Vegalite.vue   | 112 +++++++++++++-----
 1 file changed, 83 insertions(+), 29 deletions(-)

diff --git a/packages/client/hmi-client/src/temp/Vegalite.vue b/packages/client/hmi-client/src/temp/Vegalite.vue
index c4154e40ec..fee7f51ff8 100644
--- a/packages/client/hmi-client/src/temp/Vegalite.vue
+++ b/packages/client/hmi-client/src/temp/Vegalite.vue
@@ -4,28 +4,21 @@
 			:interval-selection-signal-names="['brush']"
 			:visualization-spec="spec"
 			@chart-click="handleChartClick($event)"
-			@update-interval-selection="handleIntervalSelect"
+			@update-interval-selection="debounceHandleIntervalSelect"
 		/>
 		<vega-chart :visualization-spec="spec2" />
 	</div>
 </template>
 
 <script setup lang="ts">
+import { debounce } from 'lodash';
 import { ref } from 'vue';
 import VegaChart from './VegaChart.vue';
 
 const rand = (v: number) => Math.round(Math.random() * v);
 
-const handleChartClick = (event: any) => {
-	console.log('!!', event);
-};
-
-const handleIntervalSelect = (name: any, valueRange: any) => {
-	console.log(name, valueRange);
-};
-
 const numPoints = 10;
-const numSamples = 20;
+const numSamples = 40;
 const valueRange = 20;
 const trueValues: any[] = [];
 const dataChart1: any[] = [];
@@ -45,6 +38,36 @@ for (let i = 0; i < numSamples; i++) {
 	dataChart1.push({ sample: i, error: error });
 }
 
+const makeLineChart = (data: any[]) => {
+	return {
+		$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+		description: 'Stock prices of 5 Tech Companies over Time.',
+		// data: { url: 'https://vega.github.io/vega-lite/data/stocks.csv' },
+		data: { values: data },
+		mark: {
+			type: 'line',
+			strokeWidth: 0.5
+		},
+		encoding: {
+			x: {
+				field: 'timestep',
+				type: 'quantitative'
+			},
+			y: {
+				field: 'value',
+				type: 'quantitative',
+				scale: { domain: [-20, 40] }
+			},
+			color: {
+				field: 'sample',
+				type: 'nominal',
+				// scale: { range: ['#f00'] },
+				legend: null
+			}
+		}
+	};
+};
+
 const spec = ref<any>({
 	$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
 	data: { values: dataChart1 },
@@ -58,10 +81,13 @@ const spec = ref<any>({
 	vconcat: [
 		{
 			mark: 'area',
+			width: 500,
+			height: 100,
 			encoding: {
 				x: {
 					field: 'error',
-					type: 'quantitative'
+					type: 'quantitative',
+					scale: { domain: [0, 120] }
 				},
 				y: {
 					field: 'count',
@@ -71,35 +97,63 @@ const spec = ref<any>({
 		},
 		{
 			mark: 'point',
+			width: 500,
+			height: 80,
 			encoding: {
 				data: { value: dataChart1 },
 				color: { value: '#f80' },
 				opacity: { value: 0.8 },
 				size: { value: 15 },
-				x: { field: 'error', type: 'quantitative', title: '' },
-				y: { field: 'jitter', type: 'quantitative', title: '' }
+				x: {
+					field: 'error',
+					type: 'quantitative',
+					title: '',
+					scale: { domain: [0, 120] }
+				},
+				y: {
+					field: 'jitter',
+					type: 'quantitative',
+					title: '',
+					axis: null
+				}
 			},
-			params: [{ name: 'brush', select: 'interval' }]
+			params: [
+				{
+					name: 'brush',
+					select: { type: 'interval', encodings: ['x'] }
+				}
+			]
 		}
 	]
 });
 
-const spec2 = ref<any>({
-	$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
-	description: 'Stock prices of 5 Tech Companies over Time.',
-	// data: { url: 'https://vega.github.io/vega-lite/data/stocks.csv' },
-	data: { values: dataChart2 },
-	mark: 'line',
-	encoding: {
-		x: { field: 'timestep', type: 'quantitative' },
-		y: { field: 'value', type: 'quantitative' },
-		color: {
-			field: 'sample',
-			type: 'nominal',
-			legend: null
-		}
+const spec2 = ref<any>(makeLineChart(dataChart2));
+
+const handleChartClick = (event: any) => {
+	console.log('!!');
+};
+
+const handleIntervalSelect = (name: any, valueRange: any) => {
+	console.log('>>', name, valueRange);
+	let samples = dataChart1
+		.filter((d) => {
+			return d.error >= valueRange.error[0] && d.error <= valueRange.error[1];
+		})
+		.map((d) => d.sample);
+
+	if (!samples || samples.length === 0) {
+		spec2.value = makeLineChart(dataChart2);
+		return;
 	}
-});
+
+	spec2.value = makeLineChart(
+		dataChart2.filter((d) => {
+			return samples.includes(d.sample);
+		})
+	);
+};
+
+const debounceHandleIntervalSelect = debounce(handleIntervalSelect, 200);
 
 /*
 const spec = ref<any>({

From be811354cdc56e467014f1559ba5dc0c0ad002f0 Mon Sep 17 00:00:00 2001
From: Daniel Chang <mwdchang@gmail.com>
Date: Fri, 21 Jun 2024 15:30:02 -0400
Subject: [PATCH 8/9] clean up

---
 .../widgets}/VegaChart.vue                    | 12 +++-
 .../client/hmi-client/src/temp/Vegalite.vue   | 64 ++-----------------
 2 files changed, 14 insertions(+), 62 deletions(-)
 rename packages/client/hmi-client/src/{temp => components/widgets}/VegaChart.vue (93%)

diff --git a/packages/client/hmi-client/src/temp/VegaChart.vue b/packages/client/hmi-client/src/components/widgets/VegaChart.vue
similarity index 93%
rename from packages/client/hmi-client/src/temp/VegaChart.vue
rename to packages/client/hmi-client/src/components/widgets/VegaChart.vue
index f024581252..682a17dc83 100644
--- a/packages/client/hmi-client/src/temp/VegaChart.vue
+++ b/packages/client/hmi-client/src/components/widgets/VegaChart.vue
@@ -9,8 +9,12 @@
 
 <script setup lang="ts">
 import embed, { Result, VisualizationSpec } from 'vega-embed';
+import { Config as VgConfig } from 'vega';
+import { Config as VlConfig } from 'vega-lite';
+
 import { ref, watch, toRaw, isRef, isReactive, isProxy } from 'vue';
-import unchartedVegaTheme from './vega-theme';
+
+export type Config = VgConfig | VlConfig;
 
 const props = withDefaults(
 	defineProps<{
@@ -24,10 +28,12 @@ const props = withDefaults(
 		 * See https://vega.github.io/vega/docs/api/view/#view_signal for more information.
 		 */
 		intervalSelectionSignalNames?: string[];
+		config?: Config | null;
 	}>(),
 	{
 		areEmbedActionsVisible: true,
-		intervalSelectionSignalNames: () => []
+		intervalSelectionSignalNames: () => [],
+		config: null
 	}
 );
 const vegaContainer = ref<HTMLElement>();
@@ -87,7 +93,7 @@ async function updateVegaVisualization(
 			container,
 			{ ...visualizationSpec },
 			{
-				config: unchartedVegaTheme,
+				config: props.config || {},
 				actions: props.areEmbedActionsVisible === false ? false : undefined
 			}
 		);
diff --git a/packages/client/hmi-client/src/temp/Vegalite.vue b/packages/client/hmi-client/src/temp/Vegalite.vue
index fee7f51ff8..e7d3dc508d 100644
--- a/packages/client/hmi-client/src/temp/Vegalite.vue
+++ b/packages/client/hmi-client/src/temp/Vegalite.vue
@@ -3,6 +3,7 @@
 		<vega-chart
 			:interval-selection-signal-names="['brush']"
 			:visualization-spec="spec"
+			:config="unchartedVegaTheme"
 			@chart-click="handleChartClick($event)"
 			@update-interval-selection="debounceHandleIntervalSelect"
 		/>
@@ -13,7 +14,8 @@
 <script setup lang="ts">
 import { debounce } from 'lodash';
 import { ref } from 'vue';
-import VegaChart from './VegaChart.vue';
+import VegaChart from '@/components/widgets/VegaChart.vue';
+import unchartedVegaTheme from './vega-theme';
 
 const rand = (v: number) => Math.round(Math.random() * v);
 
@@ -24,6 +26,7 @@ const trueValues: any[] = [];
 const dataChart1: any[] = [];
 const dataChart2: any[] = [];
 
+// Fake data generation
 for (let j = 0; j < numPoints; j++) {
 	trueValues.push(rand(valueRange));
 }
@@ -130,7 +133,7 @@ const spec = ref<any>({
 const spec2 = ref<any>(makeLineChart(dataChart2));
 
 const handleChartClick = (event: any) => {
-	console.log('!!');
+	console.log('!!', event);
 };
 
 const handleIntervalSelect = (name: any, valueRange: any) => {
@@ -154,61 +157,4 @@ const handleIntervalSelect = (name: any, valueRange: any) => {
 };
 
 const debounceHandleIntervalSelect = debounce(handleIntervalSelect, 200);
-
-/*
-const spec = ref<any>({
-	$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
-	data: { url: 'https://vega.github.io/editor/data/unemployment-across-industries.json' },
-	transform: [{ calculate: 'random()', as: 'jitter' }],
-	vconcat: [
-		{
-			width: 500,
-			height: 100,
-			mark: 'area',
-			transform: [{ filter: { param: 'brush' } }],
-			encoding: {
-				color: { value: '#0d4' },
-				x: {
-					timeUnit: 'yearmonth',
-					field: 'date',
-					axis: { format: '%Y' }
-				},
-				y: {
-					aggregate: 'sum',
-					field: 'count',
-					title: 'count'
-				}
-			}
-		},
-		{
-			width: 500,
-			height: 50,
-			mark: 'boxplot',
-			transform: [{ filter: { param: 'brush' } }],
-			encoding: {
-				color: { value: '#a52' },
-				x: {
-					title: '',
-					field: 'count',
-					type: 'quantitative',
-					scale: { zero: false }
-				}
-			}
-		},
-		{
-			width: 500,
-			height: 100,
-			mark: 'point',
-			encoding: {
-				color: { value: '#f80' },
-				opacity: { value: 0.4 },
-				size: { value: 5 },
-				x: { field: 'count', type: 'quantitative', title: '' },
-				y: { field: 'jitter', type: 'quantitative', title: '' }
-			},
-			params: [{ name: 'brush', select: 'interval' }]
-		}
-	]
-});
-*/
 </script>

From 5451136830be6b52b5410e0f153228e4c332325c Mon Sep 17 00:00:00 2001
From: Daniel Chang <mwdchang@gmail.com>
Date: Mon, 24 Jun 2024 12:49:44 -0400
Subject: [PATCH 9/9] Update
 packages/client/hmi-client/src/components/widgets/VegaChart.vue

Co-authored-by: Yohann Paris <github@yohannparis.com>
---
 .../client/hmi-client/src/components/widgets/VegaChart.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/VegaChart.vue b/packages/client/hmi-client/src/components/widgets/VegaChart.vue
index 682a17dc83..8944fa74cc 100644
--- a/packages/client/hmi-client/src/components/widgets/VegaChart.vue
+++ b/packages/client/hmi-client/src/components/widgets/VegaChart.vue
@@ -1,8 +1,8 @@
 <template>
 	<div class="vega-chart-container">
-		<div v-if="renderErrorMessage" class="p-error">
+		<p v-if="renderErrorMessage" class="p-error">
 			{{ renderErrorMessage }}
-		</div>
+		</p>
 		<div ref="vegaContainer"></div>
 	</div>
 </template>