scenario templates

packages/client/hmi-client/src/components/project/tera-resource-sidebar.vue

@@ -55,14 +55,23 @@
 						</header>
 						<!-- New asset buttons for some types -->
 						<Button
-							v-if="type === AssetType.Model || type === AssetType.Workflow"
+							v-if="type === AssetType.Model"
 							class="new-button"
 							icon="pi pi-plus"
 							label="New"
 							size="small"
 							text
 							@click.stop="emit('open-new-asset', type)"
 						/>
+						<Button
+							v-else-if="type === AssetType.Workflow"
+							class="new-button"
+							icon="pi pi-plus"
+							label="New"
+							size="small"
+							text
+							@click.stop="emit('open-new-workflow', type)"
+						/>
 					</div>
 				</template>
 				<!-- These are all the resources. They're buttons because they're click and draggable. -->
@@ -163,7 +172,7 @@ defineProps<{
 	assetId: string;
 }>();
 
-const emit = defineEmits(['open-asset', 'remove-asset', 'open-new-asset']);
+const emit = defineEmits(['open-asset', 'remove-asset', 'open-new-asset', 'open-new-workflow']);
 
 const overview = { assetId: '', pageType: ProjectPages.OVERVIEW };
 

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

@@ -0,0 +1,18 @@
+import { BaseScenarioTemplate } from '@/components/workflow/scenario-templates/scenario-template';
+import * as workflowService from '@/services/workflow';
+
+export class BlankCanvasScenarioTemplate extends BaseScenarioTemplate {
+	constructor() {
+		super('blank-canvas', 'Blank Canvas', 'Blank canvas for creating a new workflow');
+	}
+
+	createWorkflow() {
+		const wf = new workflowService.WorkflowWrapper();
+
+		const workflow = wf.dump();
+		workflow.name = this.workflowName;
+		return workflow;
+	}
+}
+
+export const BlankCanvasTemplate = new BlankCanvasScenarioTemplate();

packages/client/hmi-client/src/components/workflow/scenario-templates/blank-canvas/tera-blank-canvas-template.vue

@@ -0,0 +1,21 @@
+<template>
+	<label>What would you like to call this workflow?</label>
+	<tera-input-text
+		:model-value="state.workflowName"
+		@update:model-value="
+			emit('update-state', {
+				workflowName: $event
+			})
+		"
+	/>
+</template>
+
+<script setup lang="ts">
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import { BlankCanvasScenarioTemplate } from './blank-canvas-template';
+
+const emit = defineEmits(['update-state']);
+defineProps<{
+	state: BlankCanvasScenarioTemplate;
+}>();
+</script>

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

@@ -0,0 +1,23 @@
+import { Workflow } from '@/types/workflow';
+import { useProjects } from '@/composables/project';
+import { AssetType } from '@/types/Types';
+
+export abstract class BaseScenarioTemplate {
+	templateId: string;
+
+	templateName: string;
+
+	description: string;
+
+	workflowName: string;
+
+	constructor(nameId: string, name: string, description: string) {
+		this.templateId = nameId;
+		this.templateName = name;
+		this.description = description;
+		const workflows = useProjects().getActiveProjectAssets(AssetType.Workflow);
+		this.workflowName = `workflow ${workflows.length + 1}`;
+	}
+
+	abstract createWorkflow(): Workflow;
+}

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

@@ -0,0 +1,80 @@
+import { BaseScenarioTemplate } from '@/components/workflow/scenario-templates/scenario-template';
+import * as workflowService from '@/services/workflow';
+import { operation as ModelOp } from '@/components/workflow/ops/model/mod';
+import { operation as ModelConfigOp } from '@/components/workflow/ops/model-config/mod';
+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';
+
+export class SituationalAwarenessScenarioTemplate extends BaseScenarioTemplate {
+	modelSpec: { id: string };
+
+	datasetSpec: { id: string };
+
+	modelConfigSpec: { id: string };
+
+	calibrateSpec: { ids: string[] };
+
+	constructor() {
+		super('situational-awareness', 'Situational Awareness', 'Template for situational awareness');
+		this.modelSpec = {
+			id: ''
+		};
+		this.datasetSpec = {
+			id: ''
+		};
+		this.modelConfigSpec = {
+			id: ''
+		};
+		this.calibrateSpec = {
+			ids: []
+		};
+	}
+
+	createWorkflow() {
+		const wf = new workflowService.WorkflowWrapper();
+
+		// Model
+		wf.addNode(
+			ModelOp,
+			{ x: 0, y: 0 },
+			{
+				size: OperatorNodeSize.medium
+			}
+		);
+
+		// Dataset
+		wf.addNode(
+			DatasetOp,
+			{ x: 0, y: 0 },
+			{
+				size: OperatorNodeSize.medium
+			}
+		);
+
+		// Model Configuration
+		wf.addNode(
+			ModelConfigOp,
+			{ x: 0, y: 0 },
+			{
+				size: OperatorNodeSize.medium
+			}
+		);
+
+		// Calibrate
+		wf.addNode(
+			CalibrateCiemssOp,
+			{ x: 0, y: 0 },
+			{
+				size: OperatorNodeSize.medium
+			}
+		);
+
+		const workflow = wf.dump();
+		workflow.name = this.workflowName;
+
+		return workflow;
+	}
+}
+
+export const SituationalAwarenessTemplate = new SituationalAwarenessScenarioTemplate();

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

@@ -0,0 +1,152 @@
+<template>
+	<div>
+		<h6>What's like to happen next?</h6>
+		<p>
+			Calibrates the model to historical data to obtain the best estimate of parameters for the present, then forecasts
+			into the near future.
+		</p>
+	</div>
+	<div>
+		<h6>Examples</h6>
+		<ul>
+			<li>Some example</li>
+		</ul>
+	</div>
+
+	<div>
+		<label>What would you like to call this workflow?</label>
+		<tera-input-text
+			:model-value="state.workflowName"
+			@update:model-value="
+				emit('update-state', {
+					workflowName: $event
+				})
+			"
+		/>
+	</div>
+
+	<div class="grid">
+		<div class="col-6 flex flex-column gap-2">
+			<h6>Inputs</h6>
+			<label>Select a model</label>
+			<Dropdown
+				:model-value="state.modelSpec.id"
+				:options="models"
+				option-label="assetName"
+				option-value="assetId"
+				placeholder="Select a model"
+				@update:model-value="
+					emit('update-state', {
+						modelSpec: {
+							id: $event
+						},
+						modelConfigSpec: {
+							id: ''
+						},
+						calibrateSpec: {
+							ids: []
+						}
+					})
+				"
+			/>
+
+			<label>Select a dataset</label>
+			<Dropdown
+				:model-value="state.datasetSpec.id"
+				:options="datasets"
+				option-label="assetName"
+				option-value="assetId"
+				placeholder="Select a dataset"
+			/>
+
+			<label>Select an intervention policy (historical)</label>
+			<Dropdown placeholder="Optional" :disabled="isEmpty(interventionPolicies) || isFetchingModelInformation" />
+
+			<label>Select an intervention policy (known future)</label>
+			<Dropdown placeholder="Optional" :disabled="isEmpty(interventionPolicies) || isFetchingModelInformation" />
+
+			<label>Select configuration representing best and generous estimates of the initial conditions</label>
+			<Dropdown
+				:model-value="state.modelConfigSpec.id"
+				placeholder="Select a configuration"
+				:options="modelConfigurations"
+				option-label="name"
+				option-value="id"
+				@update:model-value="
+					emit('update-state', {
+						modelConfigSpec: {
+							id: $event
+						}
+					})
+				"
+				:disabled="isEmpty(modelConfigurations) || isFetchingModelInformation"
+			/>
+		</div>
+		<div class="col-6 flex flex-column gap-2">
+			<h6>Outputs</h6>
+			<label>Select an output metric</label>
+			<MultiSelect
+				:disabled="isEmpty(modelStateOptions) || isFetchingModelInformation"
+				:model-value="state.calibrateSpec.ids"
+				placeholder="Select output metrics"
+				option-label="name"
+				option-value="id"
+				:options="modelStateOptions"
+				@update:model-value="
+					emit('update-state', {
+						calibrateSpec: {
+							ids: $event
+						}
+					})
+				"
+				filter
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Dropdown from 'primevue/dropdown';
+import { computed, ref, watch } from 'vue';
+import { useProjects } from '@/composables/project';
+import { AssetType, InterventionPolicy, ModelConfiguration } from '@/types/Types';
+import { getInterventionPoliciesForModel, getModel, getModelConfigurationsForModel } from '@/services/model';
+import { isEmpty } from 'lodash';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import MultiSelect from 'primevue/multiselect';
+import { SituationalAwarenessScenarioTemplate } from './situational-awareness-template';
+
+const isFetchingModelInformation = ref(false);
+const models = computed(() => useProjects().getActiveProjectAssets(AssetType.Model));
+const datasets = computed(() => useProjects().getActiveProjectAssets(AssetType.Dataset));
+
+const modelConfigurations = ref<ModelConfiguration[]>([]);
+const interventionPolicies = ref<InterventionPolicy[]>([]);
+const modelStateOptions = ref<any[]>([]);
+
+const emit = defineEmits(['update-state']);
+const props = defineProps<{
+	state: SituationalAwarenessScenarioTemplate;
+}>();
+
+watch(
+	() => props.state.modelSpec.id,
+	async (modelId) => {
+		if (!modelId) return;
+		isFetchingModelInformation.value = true;
+		const model = await getModel(modelId);
+		if (!model) return;
+		modelConfigurations.value = await getModelConfigurationsForModel(modelId);
+		interventionPolicies.value = await getInterventionPoliciesForModel(modelId);
+
+		const modelOptions: any[] = model.model.states;
+
+		model.semantics?.ode.observables?.forEach((o) => {
+			modelOptions.push(o);
+		});
+		modelStateOptions.value = modelOptions;
+		isFetchingModelInformation.value = false;
+	},
+	{ immediate: true }
+);
+</script>