situational awareness state population

packages/client/hmi-client/src/components/widgets/tera-modal.vue

@@ -112,8 +112,8 @@ main > section {
 }
 
 .content {
-	max-height: 65vh;
-	padding: 0 2rem;
+	max-height: 80vh;
+	padding: 0 var(--gap-8);
 	overflow-y: auto;
 }
 

packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts

@@ -26,6 +26,9 @@ export interface CalibrationOperationStateCiemss extends BaseState {
 	endTime: number;
 	stepSize: number;
 	learningRate: number;
+
+	// This is a state variable to indicate which model variables are selected for calibration, this is filled in from the workflow template generator
+	templateSelectedModelVariables: string[];
 }
 
 export const CalibrationOperationCiemss: Operation = {
@@ -68,7 +71,8 @@ export const CalibrationOperationCiemss: Operation = {
 			numSamples: 100,
 			endTime: 100,
 			stepSize: 1,
-			learningRate: 0.03
+			learningRate: 0.03,
+			templateSelectedModelVariables: []
 		};
 		return init;
 	}

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

@@ -818,9 +818,18 @@ const initDefaultChartSettings = (state: CalibrationOperationStateCiemss) => {
 	// Initialize default selected chart settings when chart settings are not set yet. Return if chart settings are already set.
 	if (Array.isArray(state.chartSettings)) return;
 	const defaultSelectedParam = modelParameters.value.filter((p) => !!p.distribution).map((p) => p.id);
-	const mappedModelVariables = mapping.value
-		.filter((c) => ['state', 'observable'].includes(modelPartTypesMap.value[c.modelVariable]))
-		.map((c) => c.modelVariable);
+	const mappedModelVariablesSet = new Set(
+		mapping.value
+			.filter((c) => ['state', 'observable'].includes(modelPartTypesMap.value[c.modelVariable]))
+			.map((c) => c.modelVariable)
+	);
+
+	props.node.state.templateSelectedModelVariables.forEach((variable) => {
+		mappedModelVariablesSet.add(variable);
+	});
+
+	const mappedModelVariables = Array.from(mappedModelVariablesSet);
+
 	state.chartSettings = updateChartSettingsBySelectedVariables([], ChartSettingType.VARIABLE, mappedModelVariables);
 	state.chartSettings = updateChartSettingsBySelectedVariables(
 		state.chartSettings,
@@ -886,6 +895,8 @@ const runCalibrate = async () => {
 		state.inProgressForecastId = '';
 		state.inProgressPreForecastId = '';
 		initDefaultChartSettings(state);
+		// we want to make this an empty array after the first click of run, these are generated from the workflow template
+		state.templateSelectedModelVariables = [];
 		emit('update-state', state);
 	}
 };

packages/client/hmi-client/src/components/workflow/scenario-templates/base-scenario.ts

@@ -11,7 +11,11 @@ export abstract class BaseScenario {
 		this.workflowName = '';
 	}
 
-	abstract createWorkflow(): Workflow;
+	abstract createWorkflow(): Promise<Workflow>;
+
+	isValid(): boolean {
+		return true;
+	}
 
 	setWorkflowName(name: string) {
 		this.workflowName = name;

packages/client/hmi-client/src/components/workflow/scenario-templates/blank-canvas/blank-canvas-scenario.ts

@@ -18,7 +18,7 @@ export class BlankCanvasScenario extends BaseScenario {
 		};
 	}
 
-	createWorkflow() {
+	async createWorkflow() {
 		const wf = new workflowService.WorkflowWrapper();
 		wf.setWorkflowName(this.workflowName);
 		wf.setWorkflowScenario(this.toJSON());

packages/client/hmi-client/src/components/workflow/scenario-templates/situational-awareness/situational-awareness-scenario.ts

@@ -5,6 +5,8 @@ import { operation as ModelConfigOp } from '@/components/workflow/ops/model-conf
 import { operation as CalibrateCiemssOp } from '@/components/workflow/ops/calibrate-ciemss/mod';
 import { operation as DatasetOp } from '@/components/workflow/ops/dataset/mod';
 import { OperatorNodeSize } from '@/services/workflow';
+import { getModelConfigurationById } from '@/services/model-configurations';
+import _ from 'lodash';
 
 export class SituationalAwarenessScenario extends BaseScenario {
 	public static templateId = 'situational-awareness';
@@ -19,6 +21,10 @@ export class SituationalAwarenessScenario extends BaseScenario {
 
 	calibrateSpec: { ids: string[] };
 
+	historicalInterventionSpec: { id: string };
+
+	futureInterventionSpec: { id: string };
+
 	constructor() {
 		super();
 		this.workflowName = 'Situational Awareness';
@@ -34,6 +40,12 @@ export class SituationalAwarenessScenario extends BaseScenario {
 		this.calibrateSpec = {
 			ids: []
 		};
+		this.historicalInterventionSpec = {
+			id: ''
+		};
+		this.futureInterventionSpec = {
+			id: ''
+		};
 	}
 
 	setModelSpec(id: string) {
@@ -50,6 +62,14 @@ export class SituationalAwarenessScenario extends BaseScenario {
 		this.modelConfigSpec.id = id;
 	}
 
+	setHistoricalInterventionSpec(id: string) {
+		this.historicalInterventionSpec.id = id;
+	}
+
+	setFutureInterventionSpec(id: string) {
+		this.futureInterventionSpec.id = id;
+	}
+
 	setCalibrateSpec(ids: string[]) {
 		this.calibrateSpec.ids = ids;
 	}
@@ -65,18 +85,32 @@ export class SituationalAwarenessScenario extends BaseScenario {
 		};
 	}
 
-	createWorkflow() {
+	isValid(): boolean {
+		return (
+			this.modelSpec.id !== '' &&
+			this.datasetSpec.id !== '' &&
+			this.modelConfigSpec.id !== '' &&
+			!_.isEmpty(this.calibrateSpec.ids)
+		);
+	}
+
+	async createWorkflow() {
 		const wf = new workflowService.WorkflowWrapper();
 		wf.setWorkflowName(this.workflowName);
 		wf.setWorkflowScenario(this.toJSON());
 
 		// Add nodes
 		// Model
+
 		const modelNode = wf.addNode(
 			ModelOp,
 			{ x: 0, y: 0 },
 			{
-				size: OperatorNodeSize.medium
+				size: OperatorNodeSize.medium,
+				state: {
+					modelId: this.modelSpec.id
+				},
+				outputValue: this.modelSpec.id
 			}
 		);
 
@@ -85,16 +119,25 @@ export class SituationalAwarenessScenario extends BaseScenario {
 			DatasetOp,
 			{ x: 0, y: 0 },
 			{
-				size: OperatorNodeSize.medium
+				size: OperatorNodeSize.medium,
+				state: {
+					datasetId: this.datasetSpec.id
+				},
+				outputValue: this.datasetSpec.id
 			}
 		);
 
 		// Model Configuration
+		const modelConfig = await getModelConfigurationById(this.modelConfigSpec.id);
 		const modelConfigNode = wf.addNode(
 			ModelConfigOp,
 			{ x: 0, y: 0 },
 			{
-				size: OperatorNodeSize.medium
+				size: OperatorNodeSize.medium,
+				state: {
+					transientModelConfig: modelConfig
+				},
+				outputValue: this.modelConfigSpec.id
 			}
 		);
 
@@ -103,7 +146,10 @@ export class SituationalAwarenessScenario extends BaseScenario {
 			CalibrateCiemssOp,
 			{ x: 0, y: 0 },
 			{
-				size: OperatorNodeSize.medium
+				size: OperatorNodeSize.medium,
+				state: {
+					templateSelectedModelVariables: this.calibrateSpec.ids
+				}
 			}
 		);
 

packages/client/hmi-client/src/components/workflow/scenario-templates/situational-awareness/tera-situational-awareness-template.vue

@@ -8,8 +8,9 @@
 	</div>
 	<div>
 		<h6>Examples</h6>
-		<ul>
-			<li>Some example</li>
+		<ul class="pl-5">
+			<li>Anticipate the arrival of new variants.</li>
+			<li>Evaluate the potential impact of growing vaccine hesitancy and declining NPIs.</li>
 		</ul>
 	</div>
 
@@ -41,11 +42,26 @@
 				@update:model-value="scenario.setDatasetSpec($event)"
 			/>
 
-			<label>Select an intervention policy (historical)</label>
-			<Dropdown placeholder="Optional" :disabled="isEmpty(interventionPolicies) || isFetchingModelInformation" />
+			<!-- TODO: adding intervention policies -->
+			<!-- <label>Select an intervention policy (historical)</label>
+			<Dropdown
+			:model-value="scenario.historicalInterventionSpec.id"
+			placeholder="Optional"
+			:options="interventionPolicies"
+			option-label="name"
+			option-value="id"
+			@update:model-value="scenario.setHistoricalInterventionSpec($event)"
+			:disabled="isEmpty(interventionPolicies) || isFetchingModelInformation" />
 
 			<label>Select an intervention policy (known future)</label>
-			<Dropdown placeholder="Optional" :disabled="isEmpty(interventionPolicies) || isFetchingModelInformation" />
+			<Dropdown
+			:model-value="scenario.futureInterventionSpec.id"
+			placeholder="Optional"
+			:options="interventionPolicies"
+			option-label="name"
+			option-value="id"
+			@update:model-value="scenario.setFutureInterventionSpec($event)"
+			:disabled="isEmpty(interventionPolicies) || isFetchingModelInformation" /> -->
 
 			<label>Select configuration representing best and generous estimates of the initial conditions</label>
 			<Dropdown
@@ -71,6 +87,7 @@
 				@update:model-value="scenario.setCalibrateSpec($event)"
 				filter
 			/>
+			<img :src="calibrate" alt="Calibrate chart" />
 		</div>
 	</div>
 </template>
@@ -84,6 +101,7 @@ import { getInterventionPoliciesForModel, getModel, getModelConfigurationsForMod
 import { isEmpty } from 'lodash';
 import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import MultiSelect from 'primevue/multiselect';
+import calibrate from '@/assets/svg/template-images/calibration-thumbnail.svg';
 import { SituationalAwarenessScenario } from './situational-awareness-scenario';
 
 const isFetchingModelInformation = ref(false);
@@ -108,6 +126,11 @@ watch(
 		modelConfigurations.value = await getModelConfigurationsForModel(modelId);
 		interventionPolicies.value = await getInterventionPoliciesForModel(modelId);
 
+		// Set the first model configuration as the default
+		if (!isEmpty(modelConfigurations.value)) {
+			props.scenario.setModelConfigSpec(modelConfigurations.value[0].id!);
+		}
+
 		const modelOptions: any[] = model.model.states;
 
 		model.semantics?.ode.observables?.forEach((o) => {

packages/client/hmi-client/src/components/workflow/tera-create-workflow-modal.vue

@@ -5,20 +5,20 @@
 		</template>
 		<template #default>
 			<div class="grid">
-				<aside class="col-2">
-					<label>Select a template</label>
+				<aside class="flex flex-column col-2">
+					<label class="p-text-secondary pb-2">Select a template</label>
 					<div v-for="scenario in scenarios" :key="scenario.id" class="flex align-items-center py-1">
 						<RadioButton :inputId="scenario.id" :value="scenario.id" v-model="selectedTemplateId" />
 						<label class="pl-2" :for="scenario.id">{{ scenario.displayName }}</label>
 					</div>
 				</aside>
-				<main class="col-10 flex flex-column gap-3">
+				<main class="col-10 flex flex-column gap-3 p-3">
 					<component v-if="getScenario()" :is="getScenario().component" :scenario="getScenario().instance" />
 				</main>
 			</div>
 		</template>
 		<template #footer>
-			<Button label="Create" size="large" @click="saveWorkflow" />
+			<Button label="Create" size="large" @click="saveWorkflow" :disabled="!getScenario().instance.isValid()" />
 			<Button label="Close" class="p-button-secondary" size="large" outlined @click="emit('close-modal')" />
 		</template>
 	</tera-modal>
@@ -69,7 +69,7 @@ const selectedTemplateId = ref<any>(scenarios.value[0].id);
 
 const saveWorkflow = async () => {
 	const scenario = getScenario();
-	const wf = scenario.instance.createWorkflow();
+	const wf = await scenario.instance.createWorkflow();
 	const response = await createWorkflow(wf);
 
 	const projectId = useProjects().activeProject.value?.id;

packages/client/hmi-client/src/services/workflow.ts

@@ -1,6 +1,6 @@
 import { Component } from 'vue';
 import { v4 as uuidv4 } from 'uuid';
-import _ from 'lodash';
+import _, { isArray } from 'lodash';
 import API from '@/api/api';
 import { logger } from '@/utils/logger';
 import { EventEmitter } from '@/utils/emitter';
@@ -210,7 +210,7 @@ export class WorkflowWrapper {
 		}
 	}
 
-	addNode(op: Operation, pos: Position, options: { size?: OperatorNodeSize; state?: any }) {
+	addNode(op: Operation, pos: Position, options: { size?: OperatorNodeSize; state?: any; outputValue?: string }) {
 		const nodeSize: Size = getOperatorNodeSize(options.size ?? OperatorNodeSize.medium);
 
 		const node: WorkflowNode<any> = {
@@ -250,10 +250,19 @@ export class WorkflowWrapper {
 			width: nodeSize.width,
 			height: nodeSize.height
 		};
-		if (op.initState && _.isEmpty(node.state)) {
+		if (op.initState) {
 			node.state = op.initState();
+			Object.assign(node.state, options.state);
 		}
 		this.wf.nodes.push(node);
+
+		if (options.outputValue) {
+			node.status = OperatorStatus.SUCCESS;
+			const outputPort = node.outputs[0];
+			outputPort.value = isArray(options.outputValue) ? options.outputValue : [options.outputValue];
+			node.active = outputPort.id;
+			this.selectOutput(node, outputPort.id);
+		}
 		return node;
 	}