From 09973f0dbe4ca3ad421f26f6fe3218a6d60a9b63 Mon Sep 17 00:00:00 2001
From: asylves1 <asylvester@uncharted.software>
Date: Wed, 24 Jul 2024 15:18:37 -0400
Subject: [PATCH 01/11] rough working version

---
 .../calibrate-ciemss/calibrate-operation.ts   |  1 +
 .../tera-calibrate-ciemss-drilldown.vue       | 10 +++-
 .../tera-calibrate-node-ciemss.vue            | 59 ++++++++++++++++++-
 3 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts
index 7a857ebf44..1d4d0447eb 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts
@@ -7,6 +7,7 @@ export interface CalibrationOperationStateCiemss extends BaseState {
 	chartConfigs: string[][];
 	mapping: CalibrateMap[];
 	simulationsInProgress: string[];
+	lossValues?: any;
 
 	inProgressCalibrationId: string;
 	inProgressPreForecastId: string;
diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
index e11669b70c..6032d3dd88 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
@@ -374,13 +374,15 @@ const runCalibrate = async () => {
 
 const messageHandler = (event: ClientEvent<any>) => {
 	lossValues.push({ iter: lossValues.length, loss: event.data.loss });
-
 	if (drilldownLossPlot.value) {
 		renderLossGraph(drilldownLossPlot.value, lossValues, {
 			width: previewChartWidth.value,
 			height: 120
 		});
 	}
+	const state = props.node.state;
+	state.lossValues = lossValues;
+	emit('update-state', state);
 };
 
 const onSelection = (id: string) => {
@@ -484,6 +486,8 @@ watch(
 		if (props.node.active) {
 			selectedOutputId.value = props.node.active;
 
+			const state = props.node.state;
+
 			// Fetch saved intermediate state
 			const simulationObj = await getSimulation(selectedRunId.value);
 			if (simulationObj?.updates) {
@@ -497,9 +501,11 @@ watch(
 						height: 120
 					});
 				}
+
+				state.lossValues = lossValues;
+				emit('update-state', state);
 			}
 
-			const state = props.node.state;
 			runResult.value = await getRunResultCSV(state.forecastId, 'result.csv');
 			runResultSummary.value = await getRunResultCSV(state.forecastId, 'result_summary.csv');
 
diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
index 25a57f2ad6..5fbcef80e9 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
@@ -1,6 +1,10 @@
 <template>
 	<main>
-		<template v-if="!inProgressCalibrationId && runResult && csvAsset && runResultPre">
+		<template
+			v-if="
+				!inProgressCalibrationId && runResult && csvAsset && runResultPre && props.node.state.chartConfigs[0]?.length
+			"
+		>
 			<vega-chart
 				v-for="(_config, index) of props.node.state.chartConfigs"
 				:key="index"
@@ -8,6 +12,9 @@
 				:visualization-spec="preparedCharts[index]"
 			/>
 		</template>
+		<template v-else-if="!props.node.state.chartConfigs[0]?.length && props.node.state.lossValues">
+			<div ref="drilldownLossPlot" class="loss-chart" />
+		</template>
 
 		<tera-progress-spinner v-if="inProgressCalibrationId" :font-size="2" is-centered style="height: 100%" />
 
@@ -21,7 +28,7 @@
 <script setup lang="ts">
 import _ from 'lodash';
 import { csvParse, autoType } from 'd3';
-import { computed, watch, ref, shallowRef } from 'vue';
+import { computed, watch, ref, shallowRef, onMounted } from 'vue';
 import Button from 'primevue/button';
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
 import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
@@ -34,7 +41,7 @@ import {
 	DataArray
 } from '@/services/models/simulation-service';
 import { getModelByModelConfigurationId } from '@/services/model';
-import { setupDatasetInput } from '@/services/calibrate-workflow';
+import { renderLossGraph, setupDatasetInput } from '@/services/calibrate-workflow';
 import { nodeMetadata, nodeOutputLabel } from '@/components/workflow/util';
 import { logger } from '@/utils/logger';
 import { Poller, PollerState } from '@/api/api';
@@ -58,12 +65,41 @@ const runResult = ref<DataArray>([]);
 const runResultPre = ref<DataArray>([]);
 const runResultSummary = ref<DataArray>([]);
 const runResultSummaryPre = ref<DataArray>([]);
+const drilldownLossPlot = ref<HTMLElement>();
 
 const csvAsset = shallowRef<CsvAsset | undefined>(undefined);
 
 const areInputsFilled = computed(() => props.node.inputs[0].value && props.node.inputs[1].value);
 const inProgressCalibrationId = computed(() => props.node.state.inProgressCalibrationId);
 
+watch(
+	() => props.node.state.lossValues,
+	async () => {
+		if (props.node.state.lossValues) {
+			// Fetch saved intermediate state
+			if (drilldownLossPlot.value) {
+				renderLossGraph(drilldownLossPlot.value, props.node.state.lossValues, {
+					width: 200,
+					height: 120
+				});
+			}
+		}
+	},
+
+	{ deep: true }
+);
+
+onMounted(() => {
+	if (props.node.active) {
+		if (drilldownLossPlot.value) {
+			renderLossGraph(drilldownLossPlot.value, props.node.state.lossValues, {
+				width: 200,
+				height: 120
+			});
+		}
+	}
+});
+
 let pyciemssMap: Record<string, string> = {};
 
 const preparedCharts = computed(() => {
@@ -300,6 +336,23 @@ watch(
 		if (!active) return;
 		if (!state.forecastId) return;
 
+		// Fetch saved intermediate state
+		// if (props.node.active) {
+		// 	const simulationObj = await getSimulation(props.node.active);
+		// 	if (simulationObj?.updates) {
+		// 		const lossValues = simulationObj?.updates.map((d, i) => ({
+		// 			iter: i,
+		// 			loss: d.data.loss
+		// 		}));
+		// 		if (drilldownLossPlot.value) {
+		// 			renderLossGraph(drilldownLossPlot.value, lossValues, {
+		// 				width: 180,
+		// 				height: 120
+		// 			});
+		// 		}
+		// 	}
+		// }
+
 		// Simulates
 		runResult.value = await getRunResultCSV(state.forecastId, 'result.csv');
 		runResultSummary.value = await getRunResultCSV(state.forecastId, 'result_summary.csv');

From 9453a15d6a758eeae4ff45f4520a7344956cedce Mon Sep 17 00:00:00 2001
From: asylves1 <asylvester@uncharted.software>
Date: Thu, 25 Jul 2024 12:50:46 -0400
Subject: [PATCH 02/11] subscribe to update messages

---
 .../tera-calibrate-ciemss-drilldown.vue       |  3 -
 .../tera-calibrate-node-ciemss.vue            | 84 +++++++++++--------
 2 files changed, 48 insertions(+), 39 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
index 6032d3dd88..0c3ee49821 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
@@ -380,9 +380,6 @@ const messageHandler = (event: ClientEvent<any>) => {
 			height: 120
 		});
 	}
-	const state = props.node.state;
-	state.lossValues = lossValues;
-	emit('update-state', state);
 };
 
 const onSelection = (id: string) => {
diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
index 5fbcef80e9..7ba7b83ba6 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
@@ -12,7 +12,7 @@
 				:visualization-spec="preparedCharts[index]"
 			/>
 		</template>
-		<template v-else-if="!props.node.state.chartConfigs[0]?.length && props.node.state.lossValues">
+		<template v-else-if="!props.node.state.chartConfigs[0]?.length && lossValues">
 			<div ref="drilldownLossPlot" class="loss-chart" />
 		</template>
 
@@ -35,6 +35,8 @@ import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue'
 import {
 	getRunResultCSV,
 	pollAction,
+	subscribeToUpdateMessages,
+	unsubscribeToUpdateMessages,
 	makeForecastJobCiemss,
 	getSimulation,
 	parsePyCiemssMap,
@@ -46,7 +48,7 @@ import { nodeMetadata, nodeOutputLabel } from '@/components/workflow/util';
 import { logger } from '@/utils/logger';
 import { Poller, PollerState } from '@/api/api';
 import type { WorkflowNode } from '@/types/workflow';
-import type { CsvAsset, SimulationRequest, Model } from '@/types/Types';
+import { ClientEvent, ClientEventType, CsvAsset, SimulationRequest, Model } from '@/types/Types';
 import { createLLMSummary } from '@/services/summary-service';
 import { createForecastChart } from '@/services/charts';
 import VegaChart from '@/components/widgets/VegaChart.vue';
@@ -72,30 +74,57 @@ const csvAsset = shallowRef<CsvAsset | undefined>(undefined);
 const areInputsFilled = computed(() => props.node.inputs[0].value && props.node.inputs[1].value);
 const inProgressCalibrationId = computed(() => props.node.state.inProgressCalibrationId);
 
+const selectedOutputId = ref<string>();
+const selectedRunId = computed(() => props.node.outputs.find((o) => o.id === selectedOutputId.value)?.value?.[0]);
+
+let lossValues: { [key: string]: number }[] = [];
+
+function drawLossGraph() {
+	if (drilldownLossPlot.value) {
+		renderLossGraph(drilldownLossPlot.value, lossValues, {
+			width: 200,
+			height: 120
+		});
+	}
+}
+
+const messageHandler = (event: ClientEvent<any>) => {
+	lossValues.push({ iter: lossValues.length, loss: event.data.loss });
+	drawLossGraph();
+};
+
 watch(
-	() => props.node.state.lossValues,
-	async () => {
-		if (props.node.state.lossValues) {
-			// Fetch saved intermediate state
-			if (drilldownLossPlot.value) {
-				renderLossGraph(drilldownLossPlot.value, props.node.state.lossValues, {
-					width: 200,
-					height: 120
-				});
-			}
+	() => props.node.state.inProgressCalibrationId,
+	(id) => {
+		if (id === '') {
+			unsubscribeToUpdateMessages([id], ClientEventType.SimulationPyciemss, messageHandler);
+		} else {
+			subscribeToUpdateMessages([id], ClientEventType.SimulationPyciemss, messageHandler);
 		}
 	},
+	{ immediate: true }
+);
 
-	{ deep: true }
+watch(
+	() => props.node.state.lossValues,
+	(data) => {
+		if (data) {
+			lossValues = data;
+			drawLossGraph();
+		}
+	}
 );
 
-onMounted(() => {
+onMounted(async () => {
 	if (props.node.active) {
-		if (drilldownLossPlot.value) {
-			renderLossGraph(drilldownLossPlot.value, props.node.state.lossValues, {
-				width: 200,
-				height: 120
-			});
+		selectedOutputId.value = props.node.active;
+		const simulationObj = await getSimulation(selectedRunId.value);
+		if (simulationObj?.updates) {
+			lossValues = simulationObj?.updates.map((d, i) => ({
+				iter: i,
+				loss: d.data.loss
+			}));
+			drawLossGraph();
 		}
 	}
 });
@@ -336,23 +365,6 @@ watch(
 		if (!active) return;
 		if (!state.forecastId) return;
 
-		// Fetch saved intermediate state
-		// if (props.node.active) {
-		// 	const simulationObj = await getSimulation(props.node.active);
-		// 	if (simulationObj?.updates) {
-		// 		const lossValues = simulationObj?.updates.map((d, i) => ({
-		// 			iter: i,
-		// 			loss: d.data.loss
-		// 		}));
-		// 		if (drilldownLossPlot.value) {
-		// 			renderLossGraph(drilldownLossPlot.value, lossValues, {
-		// 				width: 180,
-		// 				height: 120
-		// 			});
-		// 		}
-		// 	}
-		// }
-
 		// Simulates
 		runResult.value = await getRunResultCSV(state.forecastId, 'result.csv');
 		runResultSummary.value = await getRunResultCSV(state.forecastId, 'result_summary.csv');

From cb715bebcaf88cf7a9f0a20ea162d08b84006595 Mon Sep 17 00:00:00 2001
From: asylves1 <asylvester@uncharted.software>
Date: Thu, 25 Jul 2024 12:53:08 -0400
Subject: [PATCH 03/11] fix type

---
 .../workflow/ops/calibrate-ciemss/calibrate-operation.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts
index 1d4d0447eb..3fd109bb58 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts
@@ -7,7 +7,7 @@ export interface CalibrationOperationStateCiemss extends BaseState {
 	chartConfigs: string[][];
 	mapping: CalibrateMap[];
 	simulationsInProgress: string[];
-	lossValues?: any;
+	lossValues?: { [key: string]: number }[];
 
 	inProgressCalibrationId: string;
 	inProgressPreForecastId: string;

From fcbfa22106d760616b9f7c8000f0e0124ed113a5 Mon Sep 17 00:00:00 2001
From: asylves1 <asylvester@uncharted.software>
Date: Thu, 25 Jul 2024 13:35:04 -0400
Subject: [PATCH 04/11] remove lossValues from state

---
 .../calibrate-ciemss/calibrate-operation.ts   |  1 -
 .../tera-calibrate-ciemss-drilldown.vue       |  3 --
 .../tera-calibrate-node-ciemss.vue            | 39 +++++++++----------
 3 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts
index 3fd109bb58..7a857ebf44 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts
@@ -7,7 +7,6 @@ export interface CalibrationOperationStateCiemss extends BaseState {
 	chartConfigs: string[][];
 	mapping: CalibrateMap[];
 	simulationsInProgress: string[];
-	lossValues?: { [key: string]: number }[];
 
 	inProgressCalibrationId: string;
 	inProgressPreForecastId: string;
diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
index 0c3ee49821..3a77e8eabb 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
@@ -498,9 +498,6 @@ watch(
 						height: 120
 					});
 				}
-
-				state.lossValues = lossValues;
-				emit('update-state', state);
 			}
 
 			runResult.value = await getRunResultCSV(state.forecastId, 'result.csv');
diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
index 7ba7b83ba6..5f0947c378 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
@@ -12,7 +12,7 @@
 				:visualization-spec="preparedCharts[index]"
 			/>
 		</template>
-		<template v-else-if="!props.node.state.chartConfigs[0]?.length && lossValues">
+		<template v-else>
 			<div ref="drilldownLossPlot" class="loss-chart" />
 		</template>
 
@@ -88,6 +88,20 @@ function drawLossGraph() {
 	}
 }
 
+async function updateLossChartWithSimulation() {
+	if (props.node.active) {
+		selectedOutputId.value = props.node.active;
+		const simulationObj = await getSimulation(selectedRunId.value);
+		if (simulationObj?.updates) {
+			lossValues = simulationObj?.updates.map((d, i) => ({
+				iter: i,
+				loss: d.data.loss
+			}));
+			drawLossGraph();
+		}
+	}
+}
+
 const messageHandler = (event: ClientEvent<any>) => {
 	lossValues.push({ iter: lossValues.length, loss: event.data.loss });
 	drawLossGraph();
@@ -106,28 +120,11 @@ watch(
 );
 
 watch(
-	() => props.node.state.lossValues,
-	(data) => {
-		if (data) {
-			lossValues = data;
-			drawLossGraph();
-		}
-	}
+	() => props.node.state.inProgressPreForecastId,
+	() => updateLossChartWithSimulation()
 );
 
-onMounted(async () => {
-	if (props.node.active) {
-		selectedOutputId.value = props.node.active;
-		const simulationObj = await getSimulation(selectedRunId.value);
-		if (simulationObj?.updates) {
-			lossValues = simulationObj?.updates.map((d, i) => ({
-				iter: i,
-				loss: d.data.loss
-			}));
-			drawLossGraph();
-		}
-	}
-});
+onMounted(async () => updateLossChartWithSimulation());
 
 let pyciemssMap: Record<string, string> = {};
 

From f1c4310e1388cb53eae03c55d57850eaa775214d Mon Sep 17 00:00:00 2001
From: asylves1 <asylvester@uncharted.software>
Date: Thu, 25 Jul 2024 13:37:29 -0400
Subject: [PATCH 05/11] undo unneeded change

---
 .../ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
index 3a77e8eabb..b194da378e 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
@@ -483,8 +483,6 @@ watch(
 		if (props.node.active) {
 			selectedOutputId.value = props.node.active;
 
-			const state = props.node.state;
-
 			// Fetch saved intermediate state
 			const simulationObj = await getSimulation(selectedRunId.value);
 			if (simulationObj?.updates) {
@@ -500,6 +498,7 @@ watch(
 				}
 			}
 
+			const state = props.node.state;
 			runResult.value = await getRunResultCSV(state.forecastId, 'result.csv');
 			runResultSummary.value = await getRunResultCSV(state.forecastId, 'result_summary.csv');
 

From 4f9d14c315bf903bed5ca93c77b671bf9157b43c Mon Sep 17 00:00:00 2001
From: asylves1 <asylvester@uncharted.software>
Date: Thu, 25 Jul 2024 13:38:28 -0400
Subject: [PATCH 06/11] clean up

---
 .../ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
index b194da378e..e11669b70c 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
@@ -374,6 +374,7 @@ const runCalibrate = async () => {
 
 const messageHandler = (event: ClientEvent<any>) => {
 	lossValues.push({ iter: lossValues.length, loss: event.data.loss });
+
 	if (drilldownLossPlot.value) {
 		renderLossGraph(drilldownLossPlot.value, lossValues, {
 			width: previewChartWidth.value,

From 82ba894b51497c53dd814bedaea7f6498af1803d Mon Sep 17 00:00:00 2001
From: asylves1 <asylvester@uncharted.software>
Date: Thu, 25 Jul 2024 13:47:27 -0400
Subject: [PATCH 07/11] fix lint bug

---
 .../ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
index ee6449f5ab..aa94e0039b 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
@@ -49,7 +49,7 @@ import { nodeMetadata, nodeOutputLabel } from '@/components/workflow/util';
 import { logger } from '@/utils/logger';
 import { Poller, PollerState } from '@/api/api';
 import type { WorkflowNode } from '@/types/workflow';
-import { ClientEvent, ClientEventType, CsvAsset, SimulationRequest, Model } from '@/types/Types';
+import { ClientEvent, ClientEventType, CsvAsset, SimulationRequest, Model, ModelConfiguration } from '@/types/Types';
 import { createLLMSummary } from '@/services/summary-service';
 import { createForecastChart } from '@/services/charts';
 import VegaChart from '@/components/widgets/VegaChart.vue';

From a12f3cce4daa8aef572d1c025de5911e4efe2581 Mon Sep 17 00:00:00 2001
From: asylves1 <asylvester@uncharted.software>
Date: Thu, 25 Jul 2024 15:14:36 -0400
Subject: [PATCH 08/11] suggested changes

---
 .../tera-calibrate-node-ciemss.vue            | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
index 70aa174864..e35b60863c 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
@@ -12,9 +12,7 @@
 				:visualization-spec="preparedCharts[index]"
 			/>
 		</template>
-		<template v-else>
-			<div ref="drilldownLossPlot" class="loss-chart" />
-		</template>
+		<div v-else ref="drilldownLossPlot" class="loss-chart" />
 
 		<tera-progress-spinner v-if="inProgressCalibrationId" :font-size="2" is-centered style="height: 100%">
 			<div>{{ props.node.state.currentProgress }}%</div>
@@ -51,7 +49,15 @@ import { nodeMetadata, nodeOutputLabel } from '@/components/workflow/util';
 import { logger } from '@/utils/logger';
 import { Poller, PollerState } from '@/api/api';
 import type { WorkflowNode } from '@/types/workflow';
-import type { ClientEvent, ClientEventType, CsvAsset, Simulation, SimulationRequest, Model, ModelConfiguration } from '@/types/Types';
+import {
+	ClientEvent,
+	ClientEventType,
+	CsvAsset,
+	Simulation,
+	SimulationRequest,
+	Model,
+	ModelConfiguration
+} from '@/types/Types';
 import { createLLMSummary } from '@/services/summary-service';
 import { createForecastChart } from '@/services/charts';
 import VegaChart from '@/components/widgets/VegaChart.vue';
@@ -113,7 +119,7 @@ const messageHandler = (event: ClientEvent<any>) => {
 watch(
 	() => props.node.state.inProgressCalibrationId,
 	(id) => {
-		if (id === '') {
+		if (_.isEmpty(id)) {
 			unsubscribeToUpdateMessages([id], ClientEventType.SimulationPyciemss, messageHandler);
 		} else {
 			subscribeToUpdateMessages([id], ClientEventType.SimulationPyciemss, messageHandler);
@@ -127,6 +133,11 @@ watch(
 	() => updateLossChartWithSimulation()
 );
 
+watch(
+	() => props.node.state.inProgressForecastId,
+	() => updateLossChartWithSimulation()
+);
+
 onMounted(async () => updateLossChartWithSimulation());
 
 let pyciemssMap: Record<string, string> = {};

From 8899a2409d3057d50675bf939e61a3fb40424cf5 Mon Sep 17 00:00:00 2001
From: asylves1 <asylvester@uncharted.software>
Date: Thu, 25 Jul 2024 17:20:50 -0400
Subject: [PATCH 09/11] clean up

---
 .../tera-calibrate-node-ciemss.vue            | 47 ++++---------------
 1 file changed, 10 insertions(+), 37 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
index e35b60863c..fefb7519f5 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
@@ -28,15 +28,13 @@
 <script setup lang="ts">
 import _ from 'lodash';
 import { csvParse, autoType } from 'd3';
-import { computed, watch, ref, shallowRef, onMounted } from 'vue';
+import { computed, watch, ref, shallowRef } from 'vue';
 import Button from 'primevue/button';
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
 import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 import {
 	getRunResultCSV,
 	pollAction,
-	subscribeToUpdateMessages,
-	unsubscribeToUpdateMessages,
 	makeForecastJobCiemss,
 	getSimulation,
 	parsePyCiemssMap,
@@ -49,15 +47,7 @@ import { nodeMetadata, nodeOutputLabel } from '@/components/workflow/util';
 import { logger } from '@/utils/logger';
 import { Poller, PollerState } from '@/api/api';
 import type { WorkflowNode } from '@/types/workflow';
-import {
-	ClientEvent,
-	ClientEventType,
-	CsvAsset,
-	Simulation,
-	SimulationRequest,
-	Model,
-	ModelConfiguration
-} from '@/types/Types';
+import { CsvAsset, Simulation, SimulationRequest, Model, ModelConfiguration } from '@/types/Types';
 import { createLLMSummary } from '@/services/summary-service';
 import { createForecastChart } from '@/services/charts';
 import VegaChart from '@/components/widgets/VegaChart.vue';
@@ -111,35 +101,11 @@ async function updateLossChartWithSimulation() {
 	}
 }
 
-const messageHandler = (event: ClientEvent<any>) => {
-	lossValues.push({ iter: lossValues.length, loss: event.data.loss });
-	drawLossGraph();
-};
-
-watch(
-	() => props.node.state.inProgressCalibrationId,
-	(id) => {
-		if (_.isEmpty(id)) {
-			unsubscribeToUpdateMessages([id], ClientEventType.SimulationPyciemss, messageHandler);
-		} else {
-			subscribeToUpdateMessages([id], ClientEventType.SimulationPyciemss, messageHandler);
-		}
-	},
-	{ immediate: true }
-);
-
-watch(
-	() => props.node.state.inProgressPreForecastId,
-	() => updateLossChartWithSimulation()
-);
-
 watch(
-	() => props.node.state.inProgressForecastId,
+	() => props.node.state.calibrationId,
 	() => updateLossChartWithSimulation()
 );
 
-onMounted(async () => updateLossChartWithSimulation());
-
 let pyciemssMap: Record<string, string> = {};
 
 const preparedCharts = computed(() => {
@@ -223,6 +189,13 @@ const pollResult = async (runId: string) => {
 		.setThreshold(350)
 		.setPollAction(async () => pollAction(runId))
 		.setProgressAction((data: Simulation) => {
+			if (data?.updates?.length && !props.node.state.calibrationId) {
+				lossValues = data?.updates.map((d, i) => ({
+					iter: i,
+					loss: d.data.loss
+				}));
+				drawLossGraph();
+			}
 			if (runId === props.node.state.inProgressCalibrationId && data.updates.length > 0) {
 				const checkpoint = _.first(data.updates);
 				if (checkpoint) {

From 77689b0ce282249885e2ab8965f2253bd259426b Mon Sep 17 00:00:00 2001
From: asylves1 <asylvester@uncharted.software>
Date: Thu, 25 Jul 2024 17:37:29 -0400
Subject: [PATCH 10/11] clean up

---
 .../ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
index fefb7519f5..b787e9619c 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
@@ -189,7 +189,7 @@ const pollResult = async (runId: string) => {
 		.setThreshold(350)
 		.setPollAction(async () => pollAction(runId))
 		.setProgressAction((data: Simulation) => {
-			if (data?.updates?.length && !props.node.state.calibrationId) {
+			if (data?.updates?.length) {
 				lossValues = data?.updates.map((d, i) => ({
 					iter: i,
 					loss: d.data.loss

From a76b18dd43d0e84afca5d41f4b0653c65f3ccd89 Mon Sep 17 00:00:00 2001
From: asylves1 <asylvester@uncharted.software>
Date: Thu, 25 Jul 2024 17:50:38 -0400
Subject: [PATCH 11/11] clean up

---
 .../calibrate-ciemss/tera-calibrate-node-ciemss.vue | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
index b787e9619c..c269c26f9b 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
@@ -28,7 +28,7 @@
 <script setup lang="ts">
 import _ from 'lodash';
 import { csvParse, autoType } from 'd3';
-import { computed, watch, ref, shallowRef } from 'vue';
+import { computed, watch, ref, shallowRef, onMounted } from 'vue';
 import Button from 'primevue/button';
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
 import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
@@ -73,9 +73,6 @@ const csvAsset = shallowRef<CsvAsset | undefined>(undefined);
 const areInputsFilled = computed(() => props.node.inputs[0].value && props.node.inputs[1].value);
 const inProgressCalibrationId = computed(() => props.node.state.inProgressCalibrationId);
 
-const selectedOutputId = ref<string>();
-const selectedRunId = computed(() => props.node.outputs.find((o) => o.id === selectedOutputId.value)?.value?.[0]);
-
 let lossValues: { [key: string]: number }[] = [];
 
 function drawLossGraph() {
@@ -89,8 +86,7 @@ function drawLossGraph() {
 
 async function updateLossChartWithSimulation() {
 	if (props.node.active) {
-		selectedOutputId.value = props.node.active;
-		const simulationObj = await getSimulation(selectedRunId.value);
+		const simulationObj = await getSimulation(props.node.state.calibrationId);
 		if (simulationObj?.updates) {
 			lossValues = simulationObj?.updates.map((d, i) => ({
 				iter: i,
@@ -101,10 +97,7 @@ async function updateLossChartWithSimulation() {
 	}
 }
 
-watch(
-	() => props.node.state.calibrationId,
-	() => updateLossChartWithSimulation()
-);
+onMounted(async () => updateLossChartWithSimulation());
 
 let pyciemssMap: Record<string, string> = {};