Sim previews

packages/client/hmi-client/src/services/models/simulation-service.ts

@@ -274,6 +274,25 @@ export async function unsubscribeToUpdateMessages(
 	await unsubscribe(eventType, messageHandler);
 }
 
+export async function pollAction(id: string) {
+	const simResponse = await getSimulation(id);
+	if (!simResponse) {
+		console.error(`Error occured with simulation ${id}`);
+		return { data: null, progress: null, error: `Failed running simulation ${id}` };
+	}
+
+	if ([ProgressState.Queued || ProgressState.Running].includes(simResponse.status)) {
+		// TODO: untangle progress
+		return { data: null, progress: null, error: null };
+	}
+
+	if ([ProgressState.Error || ProgressState.Failed].includes(simResponse.status)) {
+		return { data: null, progress: null, error: `Failed running simulation ${id}` };
+	}
+	return { data: simResponse, progress: null, error: null };
+}
+
+// @deprecated
 export async function simulationPollAction(
 	simulationIds: string[],
 	node: WorkflowNode<any>,

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

@@ -1,5 +1,15 @@
 <template>
 	<main>
+		<tera-simulate-chart
+			v-if="runResults && csvAsset"
+			:run-results="runResults"
+			:chartConfig="props.node.state.chartConfigs[0]"
+			:mapping="props.node.state.mapping as any"
+			:initial-data="csvAsset"
+			:size="{ width: 190, height: 120 }"
+			has-mean-line
+		/>
+
 		<Button
 			v-if="areInputsFilled"
 			label="Edit"
@@ -14,19 +24,49 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, watch, ref, shallowRef } from 'vue';
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
+import TeraSimulateChart from '@/workflow/tera-simulate-chart.vue';
 import { WorkflowNode } from '@/types/workflow';
 import Button from 'primevue/button';
+import { getRunResultCiemss } from '@/services/models/simulation-service';
+import { RunResults } from '@/types/SimulateConfig';
+import { setupDatasetInput } from '@/services/calibrate-workflow';
+import type { CsvAsset } from '@/types/Types';
 import { CalibrationOperationStateCiemss } from './calibrate-operation';
 
 const props = defineProps<{
 	node: WorkflowNode<CalibrationOperationStateCiemss>;
 }>();
 
+const runResults = ref<RunResults>({});
+const csvAsset = shallowRef<CsvAsset | undefined>(undefined);
+
 const areInputsFilled = computed(() => props.node.inputs[0].value && props.node.inputs[1].value);
 
 const emit = defineEmits(['open-drilldown']);
+
+watch(
+	() => props.node.active,
+	async () => {
+		const active = props.node.active;
+		const state = props.node.state;
+		if (!active) return;
+		if (!state.simulationId) return;
+
+		const simulationId = state.simulationId;
+
+		// Simulate
+		const result = await getRunResultCiemss(simulationId, 'result.csv');
+		runResults.value = result.runResults;
+
+		// Dataset used to calibrate
+		const datasetId = props.node.inputs[1]?.value?.[0];
+		const { csv } = await setupDatasetInput(datasetId);
+		csvAsset.value = csv;
+	},
+	{ immediate: true }
+);
 </script>
 
 <style scoped></style>

packages/client/hmi-client/src/workflow/ops/calibrate-julia/tera-calibrate-node-julia.vue

@@ -1,5 +1,17 @@
 <template>
 	<main>
+		<tera-simulate-chart
+			v-if="simulationId && csvData"
+			:run-results="{ [simulationId]: csvData }"
+			:mapping="props.node.state.mapping as any"
+			:run-type="RunType.Julia"
+			:chartConfig="{
+				selectedRun: simulationId.value,
+				selectedVariable: props.node.state.chartConfigs[0]
+			}"
+			:size="{ width: 190, height: 120 }"
+		/>
+
 		<Button
 			v-if="areInputsFilled"
 			label="Edit"
@@ -14,19 +26,42 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, watch, ref } from 'vue';
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
+import TeraSimulateChart from '@/workflow/tera-simulate-chart.vue';
 import { WorkflowNode } from '@/types/workflow';
 import Button from 'primevue/button';
+import { RunType } from '@/types/SimulateConfig';
+import { getRunResultJulia } from '@/services/models/simulation-service';
+import { csvParse } from 'd3';
 import { CalibrationOperationStateJulia } from './calibrate-operation';
 
 const props = defineProps<{
 	node: WorkflowNode<CalibrationOperationStateJulia>;
 }>();
 
 const areInputsFilled = computed(() => props.node.inputs[0].value && props.node.inputs[1].value);
-
+const simulationId = ref<any>(null);
 const emit = defineEmits(['open-drilldown']);
+const csvData = ref<any>(null);
+
+watch(
+	() => props.node.active,
+	async () => {
+		const active = props.node.active;
+		if (!active) return;
+
+		// FIXME: outdated, don't need tos upport multiple runs
+		simulationId.value = props.node.outputs.find((d) => d.id === active)?.value?.[0];
+		if (!simulationId.value) return;
+
+		const result = await getRunResultJulia(simulationId.value, 'result.json');
+		if (!result) return;
+
+		csvData.value = csvParse(result.csvData);
+	},
+	{ immediate: true }
+);
 </script>
 
 <style scoped></style>

packages/client/hmi-client/src/workflow/ops/simulate-ciemss/tera-simulate-ciemss.vue

@@ -32,7 +32,7 @@
 								class="p-inputtext-sm"
 								v-model="numSamples"
 								inputId="integeronly"
-								:min="2"
+								:min="1"
 								@update:model-value="updateState"
 							/>
 						</div>

packages/client/hmi-client/src/workflow/ops/simulate-ciemss/tera-simulate-node-ciemss.vue

@@ -1,10 +1,13 @@
 <template>
 	<main>
-		{{ selectedRunId }}
 		<tera-simulate-chart
 			v-if="hasData"
 			:run-results="runResults[selectedRunId]"
-			:chartConfig="{ selectedRun: selectedRunId, selectedVariable: ['S_state'] }"
+			:chartConfig="{
+				selectedRun: selectedRunId,
+				selectedVariable: props.node.state.chartConfigs[0]
+			}"
+			:size="{ width: 180, height: 120 }"
 			has-mean-line
 		/>
 
@@ -50,8 +53,10 @@ const hasData = ref(false);
 watch(
 	() => selectedRunId.value,
 	async () => {
+		if (!selectedRunId.value) return;
 		const output = await getRunResultCiemss(selectedRunId.value);
 		runResults.value[selectedRunId.value] = output.runResults;
+
 		hasData.value = true;
 	},
 	{ immediate: true }

packages/client/hmi-client/src/workflow/ops/simulate-ensemble-ciemss/tera-simulate-ensemble-node-ciemss.vue

@@ -9,6 +9,7 @@
 					:chartConfig="cfg"
 					has-mean-line
 					@configuration-change="chartConfigurationChange(index, $event)"
+					:size="{ width: 190, height: 120 }"
 				/>
 			</template>
 			<Button label="Edit" @click="emit('open-drilldown')" severity="secondary" outlined />

packages/client/hmi-client/src/workflow/ops/simulate-julia/tera-simulate-julia.vue

@@ -120,14 +120,7 @@ import _ from 'lodash';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import Button from 'primevue/button';
 import InputNumber from 'primevue/inputnumber';
-import { ProgressState } from '@/types/Types';
-import type {
-	CsvAsset,
-	Model,
-	ModelConfiguration,
-	SimulationRequest,
-	TimeSpan
-} from '@/types/Types';
+import type { CsvAsset, SimulationRequest, TimeSpan } from '@/types/Types';
 import { ChartConfig, RunResults } from '@/types/SimulateConfig';
 
 import { getModelConfigurationById } from '@/services/model-configurations';
@@ -138,9 +131,8 @@ import {
 	getSimulation,
 	makeForecastJob,
 	querySimulationInProgress,
-	simulationPollAction
+	pollAction
 } from '@/services/models/simulation-service';
-import { getModel } from '@/services/model';
 import { createCsvAssetFromRunResults, saveDataset } from '@/services/dataset';
 import { csvParse } from 'd3';
 import { WorkflowNode } from '@/types/workflow';
@@ -178,14 +170,10 @@ const viewOptions = ref([
 	{ value: OutputView.Data, icon: 'pi pi-list' }
 ]);
 
-const model = ref<{ [runId: string]: Model | null }>({});
-const modelConfigurations = ref<{ [runId: string]: ModelConfiguration | null }>({});
 const hasValidDatasetName = computed<boolean>(() => saveAsName.value !== '');
 
 const showSpinner = ref(false);
-const completedRunId = ref<string>('');
 const runResults = ref<RunResults>({});
-const progress = ref({ status: ProgressState.Retrieving, value: 0 });
 
 const showSaveInput = ref(<boolean>false);
 const saveAsName = ref(<string | null>'');
@@ -209,18 +197,6 @@ const selectedRunId = computed(
 
 const poller = new Poller();
 
-onMounted(() => {
-	const runIds = querySimulationInProgress(props.node);
-	if (runIds.length === 1) {
-		// there should only be one run happening at a time
-		getStatus(runIds[0]);
-	}
-});
-
-onUnmounted(() => {
-	poller.stop();
-});
-
 const updateState = () => {
 	const state = _.cloneDeep(props.node.state);
 	state.currentTimespan = timespan.value;
@@ -255,7 +231,7 @@ const getStatus = async (runId: string) => {
 	poller
 		.setInterval(3000)
 		.setThreshold(300)
-		.setPollAction(async () => simulationPollAction([runId], props.node, progress, emit));
+		.setPollAction(async () => pollAction(runId));
 	const pollerResults = await poller.start();
 
 	if (pollerResults.state === PollerState.Cancelled) {
@@ -271,13 +247,6 @@ const getStatus = async (runId: string) => {
 		throw Error('Failed Runs');
 	}
 
-	completedRunId.value = runId;
-	showSpinner.value = false;
-};
-
-const watchCompletedRunId = async (runId: string) => {
-	if (!runId) return;
-
 	const state = _.cloneDeep(props.node.state);
 	if (state.chartConfigs.length === 0) {
 		addChart();
@@ -295,6 +264,8 @@ const watchCompletedRunId = async (runId: string) => {
 		},
 		isSelected: false
 	});
+
+	showSpinner.value = false;
 };
 
 const lazyLoadSimulationData = async (runId: string) => {
@@ -303,14 +274,11 @@ const lazyLoadSimulationData = async (runId: string) => {
 	// there's only a single input config
 	const modelConfigId = props.node.inputs[0].value?.[0];
 	const modelConfiguration = await getModelConfigurationById(modelConfigId);
-	modelConfigurations.value[runId] = modelConfiguration;
 
 	const resultCsv = await getRunResult(runId, 'result.csv');
 	const csvData = csvParse(resultCsv);
 
 	if (modelConfiguration) {
-		model.value[runId] = await getModel(modelConfiguration.model_id);
-
 		const parameters = modelConfiguration.configuration.semantics.ode.parameters;
 		csvData.forEach((row) =>
 			parameters.forEach((parameter) => {
@@ -351,7 +319,17 @@ async function saveDatasetToProject() {
 	}
 }
 
-watch(() => completedRunId.value, watchCompletedRunId, { immediate: true });
+onMounted(() => {
+	const runIds = querySimulationInProgress(props.node);
+	if (runIds.length === 1) {
+		// there should only be one run happening at a time
+		getStatus(runIds[0]);
+	}
+});
+
+onUnmounted(() => {
+	poller.stop();
+});
 
 watch(
 	() => selectedRunId.value,

packages/client/hmi-client/src/workflow/ops/simulate-julia/tera-simulate-node-julia.vue

@@ -1,5 +1,15 @@
 <template>
 	<main>
+		<tera-simulate-chart
+			v-if="hasData"
+			:run-results="{ [selectedRunId]: runResults[selectedRunId] }"
+			:chartConfig="{
+				selectedRun: selectedRunId,
+				selectedVariable: props.node.state.chartConfigs[0]
+			}"
+			:size="{ width: 180, height: 120 }"
+		/>
+
 		<Button
 			v-if="areInputsFilled"
 			label="Edit"
@@ -14,19 +24,44 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import Button from 'primevue/button';
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
+import TeraSimulateChart from '@/workflow/tera-simulate-chart.vue';
 import { WorkflowNode } from '@/types/workflow';
+import { RunResults } from '@/types/SimulateConfig';
+import { getRunResult } from '@/services/models/simulation-service';
+import { csvParse } from 'd3';
 import { SimulateJuliaOperationState } from './simulate-julia-operation';
 
 const props = defineProps<{
 	node: WorkflowNode<SimulateJuliaOperationState>;
 }>();
 
 const emit = defineEmits(['open-drilldown']);
+const runResults = ref<RunResults>({});
+const hasData = ref(false);
 
 const areInputsFilled = computed(() => props.node.inputs[0].value);
+
+const selectedRunId = ref<any>(null);
+
+watch(
+	() => props.node.active,
+	async () => {
+		const active = props.node.active;
+		if (!active) return;
+
+		selectedRunId.value = props.node.outputs.find((o) => o.id === active)?.value?.[0];
+		if (!selectedRunId.value) return;
+
+		const resultCsv = await getRunResult(selectedRunId.value, 'result.csv');
+		const csvData = csvParse(resultCsv);
+		runResults.value[selectedRunId.value] = csvData as any;
+		hasData.value = true;
+	},
+	{ immediate: true }
+);
 </script>
 
 <style scoped></style>

packages/client/hmi-client/src/workflow/tera-simulate-chart.vue

@@ -289,7 +289,7 @@ onMounted(() => {
 
 .p-chart {
 	width: 100%;
-	height: 200px;
+	/* height: 200px; */
 	margin-top: 0.5em;
 }