task: persist simulation states in the UI

packages/client/hmi-client/src/components/widgets/tera-progress-bar.vue

@@ -0,0 +1,23 @@
+<template>
+	<div>
+		<i class="pi pi-spin pi-spinner"></i>
+		<span>{{ props.status }}...{{ props.value ? '(' + props.value + '%)' : null }}</span>
+		<ProgressBar v-if="props.value" class="progress-bar" :value="props.value"></ProgressBar>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ProgressState } from '@/types/workflow';
+import ProgressBar from 'primevue/progressbar';
+
+const props = defineProps<{
+	status: ProgressState;
+	value: number;
+}>();
+</script>
+
+<style scoped>
+.progress-bar {
+	width: 100%;
+}
+</style>

packages/client/hmi-client/src/components/workflow/tera-calibrate-ensemble-node-ciemss.vue

@@ -35,44 +35,47 @@
 		</section>
 	</section>
 	<section v-else>
-		<div>loading...</div>
+		<tera-progress-bar :value="progress.value" :status="progress.status"></tera-progress-bar>
 	</section>
 </template>
 
 <script setup lang="ts">
 import _ from 'lodash';
-import { ref, watch, computed, ComputedRef } from 'vue';
+import { ref, watch, computed, ComputedRef, onMounted } from 'vue';
 // import { csvParse } from 'd3';
 // import { ModelConfiguration } from '@/types/Types';
 // import { getRunResult } from '@/services/models/simulation-service';
-import { WorkflowNode, WorkflowStatus } from '@/types/workflow';
+import {
+	ProgressState,
+	SimulationStateOperation,
+	WorkflowNode,
+	WorkflowStatus
+} from '@/types/workflow';
 // import { getModelConfigurationById } from '@/services/model-configurations';
 import { workflowEventBus } from '@/services/workflow';
-import {
-	EnsembleCalibrationCiemssRequest,
-	Simulation,
-	TimeSpan,
-	EnsembleModelConfigs
-} from '@/types/Types';
+import { EnsembleCalibrationCiemssRequest, TimeSpan, EnsembleModelConfigs } from '@/types/Types';
 import {
 	getSimulation,
 	makeEnsembleCiemssCalibration,
-	getRunResultCiemss
+	getRunResultCiemss,
+	handleSimulationsInProgress
 } from '@/services/models/simulation-service';
 import Button from 'primevue/button';
 import { ChartConfig, RunResults } from '@/types/SimulateConfig';
 import { setupDatasetInput } from '@/services/calibrate-workflow';
+import { Poller, PollerState } from '@/api/api';
 import {
 	CalibrateEnsembleCiemssOperationState,
 	CalibrateEnsembleCiemssOperation,
 	EnsembleCalibrateExtraCiemss
 } from './calibrate-ensemble-ciemss-operation';
 import TeraSimulateChart from './tera-simulate-chart.vue';
+import TeraProgressBar from '../widgets/tera-progress-bar.vue';
 
 const props = defineProps<{
 	node: WorkflowNode;
 }>();
-const emit = defineEmits(['append-output-port']);
+const emit = defineEmits(['append-output-port', 'update-state']);
 
 const showSpinner = ref(false);
 const modelConfigIds = computed<string[]>(() => props.node.inputs[0].value as string[]);
@@ -93,6 +96,14 @@ const simulationIds: ComputedRef<any | undefined> = computed(
 	<any | undefined>(() => props.node.outputs[0]?.value)
 );
 const datasetColumnNames = ref<string[]>();
+const progress = ref({ status: ProgressState.QUEUED, value: 0 });
+
+onMounted(() => {
+	const runIds = handleSimulationsInProgress(SimulationStateOperation.QUERY, props.node);
+	if (runIds.length > 0) {
+		getStatus(runIds[0]);
+	}
+});
 
 const runEnsemble = async () => {
 	if (!datasetId.value || !currentDatasetFileName.value) return;
@@ -113,30 +124,83 @@ const runEnsemble = async () => {
 	};
 	const response = await makeEnsembleCiemssCalibration(params);
 	startedRunId.value = response.simulationId;
+	if (response.simulationId) {
+		getStatus(response.simulationId);
+	}
+};
 
+const getStatus = async (simulationId: string) => {
 	showSpinner.value = true;
-	getStatus();
-};
+	if (!simulationId) return;
+
+	const poller = new Poller<object>()
+		.setInterval(3000)
+		.setThreshold(300)
+		.setPollAction(async () => {
+			const response = await getSimulation(simulationId);
+			if (response?.status === ProgressState.COMPLETE) {
+				const newState = handleSimulationsInProgress(
+					SimulationStateOperation.DELETE,
+					props.node,
+					simulationId
+				);
+				if (newState) {
+					emit('update-state', newState);
+				}
+				return {
+					data: response,
+					progress: null,
+					error: null
+				};
+			}
+			if (response?.status === ProgressState.RUNNING) {
+				const newState = handleSimulationsInProgress(
+					SimulationStateOperation.ADD,
+					props.node,
+					simulationId
+				);
+				if (newState) {
+					emit('update-state', newState);
+				}
+				progress.value = {
+					status: ProgressState.RUNNING,
+					value: 0
+				};
+			}
 
-const getStatus = async () => {
-	if (!startedRunId.value) return;
+			if (response?.status === ProgressState.QUEUED) {
+				const newState = handleSimulationsInProgress(
+					SimulationStateOperation.ADD,
+					props.node,
+					simulationId
+				);
+				if (newState) {
+					emit('update-state', newState);
+				}
+				progress.value = {
+					status: ProgressState.QUEUED,
+					value: 0
+				};
+			}
 
-	const currentSimulation: Simulation | null = await getSimulation(startedRunId.value); // get TDS's simulation object
-	const ongoingStatusList = ['running', 'queued'];
+			return {
+				data: null,
+				progress: null,
+				error: null
+			};
+		});
+	const pollerResults = await poller.start();
 
-	if (currentSimulation && currentSimulation.status === 'complete') {
-		completedRunId.value = startedRunId.value;
-		updateOutputPorts(completedRunId);
-		addChart();
-		showSpinner.value = false;
-	} else if (currentSimulation && ongoingStatusList.includes(currentSimulation.status)) {
-		// recursively call until all runs retrieved
-		setTimeout(getStatus, 3000);
-	} else {
+	if (pollerResults.state !== PollerState.Done || !pollerResults.data) {
 		// throw if there are any failed runs for now
-		console.error('Failed', startedRunId.value);
+		console.error('Failed', simulationId);
+		showSpinner.value = false;
 		throw Error('Failed Runs');
 	}
+	completedRunId.value = simulationId;
+	updateOutputPorts(completedRunId);
+	addChart();
+	showSpinner.value = false;
 };
 
 const updateOutputPorts = async (runId) => {

packages/client/hmi-client/src/components/workflow/tera-calibration-node-ciemss.vue

@@ -99,48 +99,50 @@
 		/>
 	</section>
 	<section v-else>
-		<div><i class="pi pi-spin pi-spinner"></i> loading...</div>
+		<tera-progress-bar :value="progress.value" :status="progress.status"></tera-progress-bar>
 	</section>
 </template>
 
 <script setup lang="ts">
-import { computed, shallowRef, watch, ref, ComputedRef } from 'vue';
-import { WorkflowNode } from '@/types/workflow';
+import { computed, shallowRef, watch, ref, ComputedRef, onMounted } from 'vue';
+import { ProgressState, SimulationStateOperation, WorkflowNode } from '@/types/workflow';
 import DataTable from 'primevue/datatable';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
 import Column from 'primevue/column';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import InputNumber from 'primevue/inputnumber';
-import { CalibrationRequestCiemss, CsvAsset, Simulation, ModelConfiguration } from '@/types/Types';
+import { CalibrationRequestCiemss, CsvAsset, ModelConfiguration } from '@/types/Types';
 import {
 	makeCalibrateJobCiemss,
 	getSimulation,
-	getRunResultCiemss
+	getRunResultCiemss,
+	handleSimulationsInProgress
 } from '@/services/models/simulation-service';
 import { setupModelInput, setupDatasetInput } from '@/services/calibrate-workflow';
 import { ChartConfig, RunResults } from '@/types/SimulateConfig';
 import { workflowEventBus } from '@/services/workflow';
 import _ from 'lodash';
+import { Poller, PollerState } from '@/api/api';
 import {
 	CalibrationOperationCiemss,
 	CalibrationOperationStateCiemss,
 	CalibrateMap
 } from './calibrate-operation-ciemss';
 import TeraSimulateChart from './tera-simulate-chart.vue';
+import TeraProgressBar from '../widgets/tera-progress-bar.vue';
 
 const props = defineProps<{
 	node: WorkflowNode;
 }>();
 
-const emit = defineEmits(['append-output-port']);
+const emit = defineEmits(['append-output-port', 'update-state']);
 
 const modelConfigId = computed(() => props.node.inputs[0].value?.[0] as string | undefined);
 const datasetId = computed(() => props.node.inputs[1].value?.[0] as string | undefined);
 const currentDatasetFileName = ref<string>();
 const modelConfig = ref<ModelConfiguration>();
-const startedRunId = ref<string>();
 const completedRunId = ref<string>();
 const parameterResult = ref<{ [index: string]: any }>();
 
@@ -154,6 +156,7 @@ const simulationIds: ComputedRef<any | undefined> = computed(
 const mapping = ref<CalibrateMap[]>(props.node.state.mapping);
 const csvAsset = shallowRef<CsvAsset | undefined>(undefined);
 const showSpinner = ref(false);
+const progress = ref({ status: ProgressState.QUEUED, value: 0 });
 
 // EXTRA section
 const numSamples = ref(100);
@@ -170,6 +173,13 @@ const disableRunButton = computed(
 		!datasetId.value
 );
 
+onMounted(() => {
+	const runIds = handleSimulationsInProgress(SimulationStateOperation.QUERY, props.node);
+	if (runIds.length > 0) {
+		getStatus(runIds[0]);
+	}
+});
+
 const runCalibrate = async () => {
 	if (
 		!modelConfigId.value ||
@@ -221,31 +231,82 @@ const runCalibrate = async () => {
 	};
 	const response = await makeCalibrateJobCiemss(calibrationRequest);
 
-	startedRunId.value = response.simulationId;
-	getStatus();
-	showSpinner.value = true;
+	if (response.simulationId) {
+		getStatus(response.simulationId);
+	}
 };
-// Retrieve run ids
-// FIXME: Replace with API.poller
-const getStatus = async () => {
-	if (!startedRunId.value) return;
 
-	const currentSimulation: Simulation | null = await getSimulation(startedRunId.value); // get TDS's simulation object
-	const ongoingStatusList = ['running', 'queued'];
+const getStatus = async (simulationId: string) => {
+	showSpinner.value = true;
+	if (!simulationId) return;
+
+	const poller = new Poller<object>()
+		.setInterval(3000)
+		.setThreshold(300)
+		.setPollAction(async () => {
+			const response = await getSimulation(simulationId);
+			if (response?.status === ProgressState.COMPLETE) {
+				const newState = handleSimulationsInProgress(
+					SimulationStateOperation.DELETE,
+					props.node,
+					simulationId
+				);
+				if (newState) {
+					emit('update-state', newState);
+				}
+				return {
+					data: response,
+					progress: null,
+					error: null
+				};
+			}
+			if (response?.status === ProgressState.RUNNING) {
+				const newState = handleSimulationsInProgress(
+					SimulationStateOperation.ADD,
+					props.node,
+					simulationId
+				);
+				if (newState) {
+					emit('update-state', newState);
+				}
+				progress.value = {
+					status: ProgressState.RUNNING,
+					value: 0
+				};
+			}
 
-	if (currentSimulation && currentSimulation.status === 'complete') {
-		completedRunId.value = startedRunId.value;
-		updateOutputPorts(completedRunId);
-		showSpinner.value = false;
-	} else if (currentSimulation && ongoingStatusList.includes(currentSimulation.status)) {
-		// recursively call until all runs retrieved
-		setTimeout(getStatus, 3000);
-	} else {
+			if (response?.status === ProgressState.QUEUED) {
+				const newState = handleSimulationsInProgress(
+					SimulationStateOperation.ADD,
+					props.node,
+					simulationId
+				);
+				if (newState) {
+					emit('update-state', newState);
+				}
+				progress.value = {
+					status: ProgressState.QUEUED,
+					value: 0
+				};
+			}
+
+			return {
+				data: null,
+				progress: null,
+				error: null
+			};
+		});
+	const pollerResults = await poller.start();
+
+	if (pollerResults.state !== PollerState.Done || !pollerResults.data) {
 		// throw if there are any failed runs for now
-		console.error('Failed', startedRunId.value);
+		console.error('Failed', simulationId);
 		showSpinner.value = false;
 		throw Error('Failed Runs');
 	}
+	completedRunId.value = simulationId;
+	updateOutputPorts(completedRunId);
+	showSpinner.value = false;
 };
 
 const updateOutputPorts = async (runId) => {