Workflow cleanup july (#4278)

Co-authored-by: Yohann Paris <[email protected]>

packages/client/hmi-client/src/components/operator/tera-operator-outputs.vue

@@ -54,7 +54,7 @@ const props = defineProps({
 });
 
 const selectedOutputs = computed(() =>
-	props.outputs?.filter((output) => {
+	props.outputs.filter((output) => {
 		if (!('isSelected' in output)) return true;
 		return output.isSelected;
 	})

packages/client/hmi-client/src/components/operator/tera-operator-placeholder.vue

@@ -6,56 +6,14 @@
 </template>
 
 <script setup lang="ts">
-import { WorkflowOperationTypes } from '@/types/workflow';
+import { WorkflowNode } from '@/types/workflow';
 import plants from '@/assets/svg/plants.svg';
-import calibrateJulia from '@assets/svg/operator-images/calibrate-deterministic.svg';
-import editModel from '@assets/svg/operator-images/edit-model.svg';
-import calibrateEnsembleCiemss from '@assets/svg/operator-images/calibrate-ensemble-probabilistic.svg';
-import model from '@assets/svg/operator-images/model.svg';
-import optimizeModel from '@assets/svg/operator-images/optimize-model.svg';
-import calibrateSimulateCiemss from '@assets/svg/operator-images/calibrate-simulate-probabilistic.svg';
-import simulateJulia from '@assets/svg/operator-images/simulate-deterministic.svg';
-import code from '@assets/svg/operator-images/code.svg';
-import simulateEnsembleCiemss from '@assets/svg/operator-images/simulate-ensemble-probabilistic.svg';
-import configureModel from '@assets/svg/operator-images/configure-model.svg';
-import simulateProbabilistic from '@assets/svg/operator-images/simulate-probabilistic.svg';
-import coupleModels from '@assets/svg/operator-images/couple-models.svg';
-import stratifyModel from '@assets/svg/operator-images/stratify-model.svg';
-import createModelFromCode from '@assets/svg/operator-images/create-model-from-code.svg';
-import transformDataset from '@assets/svg/operator-images/transform-dataset.svg';
-import createModelFromEquations from '@assets/svg/operator-images/create-model-from-equation.svg';
-import transformModel from '@assets/svg/operator-images/transform-model.svg';
-import dataset from '@assets/svg/operator-images/dataset.svg';
-import document from '@assets/svg/operator-images/document.svg';
 
 const props = defineProps<{
-	operationType: WorkflowOperationTypes;
+	node: WorkflowNode<any>;
 }>();
 
-const operatorGraphics = {
-	[WorkflowOperationTypes.CALIBRATE_ENSEMBLE_CIEMSS]: calibrateEnsembleCiemss,
-	[WorkflowOperationTypes.CALIBRATION_CIEMSS]: calibrateSimulateCiemss,
-	[WorkflowOperationTypes.CALIBRATION_JULIA]: calibrateJulia,
-	[WorkflowOperationTypes.CODE]: code,
-	[WorkflowOperationTypes.DATASET]: dataset,
-	[WorkflowOperationTypes.DATASET_TRANSFORMER]: transformDataset,
-	[WorkflowOperationTypes.DOCUMENT]: document,
-	[WorkflowOperationTypes.MODEL]: model,
-	[WorkflowOperationTypes.MODEL_CONFIG]: configureModel,
-	[WorkflowOperationTypes.MODEL_COUPLING]: coupleModels,
-	[WorkflowOperationTypes.MODEL_EDIT]: editModel,
-	[WorkflowOperationTypes.MODEL_FROM_CODE]: createModelFromCode,
-	[WorkflowOperationTypes.MODEL_FROM_EQUATIONS]: createModelFromEquations,
-	[WorkflowOperationTypes.OPTIMIZE_CIEMSS]: optimizeModel,
-	[WorkflowOperationTypes.MODEL_TRANSFORMER]: transformModel,
-	[WorkflowOperationTypes.REGRIDDING]: transformDataset,
-	[WorkflowOperationTypes.SIMULATE_CIEMSS]: simulateProbabilistic,
-	[WorkflowOperationTypes.SIMULATE_ENSEMBLE_CIEMSS]: simulateEnsembleCiemss,
-	[WorkflowOperationTypes.SIMULATE_JULIA]: simulateJulia,
-	[WorkflowOperationTypes.STRATIFY_MIRA]: stratifyModel
-};
-
-const placeholderGraphic = operatorGraphics[props.operationType] ?? plants;
+const placeholderGraphic = props.node.imageUrl ?? plants;
 </script>
 
 <style scoped>

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

@@ -1,5 +1,6 @@
 import { Operation, WorkflowOperationTypes, BaseState } from '@/types/workflow';
 import { CalibrateMap } from '@/services/calibrate-workflow';
+import calibrateSimulateCiemss from '@assets/svg/operator-images/calibrate-simulate-probabilistic.svg';
 
 const DOCUMENTATION_URL = 'https://github.com/ciemss/pyciemss/blob/main/pyciemss/interfaces.py#L529';
 
@@ -28,6 +29,7 @@ export const CalibrationOperationCiemss: Operation = {
 	description:
 		'given a model id, a dataset id, and optionally a configuration. calibrate the models initial values and rates',
 	documentationUrl: DOCUMENTATION_URL,
+	imageUrl: calibrateSimulateCiemss,
 	inputs: [
 		{ type: 'modelConfigId', label: 'Model configuration' },
 		{ type: 'datasetId', label: 'Dataset' },

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

@@ -19,7 +19,7 @@
 		</tera-progress-spinner>
 
 		<Button v-if="areInputsFilled" label="Edit" @click="emit('open-drilldown')" severity="secondary" outlined />
-		<tera-operator-placeholder v-else :operation-type="node.operationType">
+		<tera-operator-placeholder v-else :node="node">
 			Connect a model configuration and dataset
 		</tera-operator-placeholder>
 	</main>

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

@@ -1,5 +1,6 @@
 import { Operation, WorkflowOperationTypes, BaseState } from '@/types/workflow';
 import type { EnsembleModelConfigs } from '@/types/Types';
+import calibrateEnsembleCiemss from '@assets/svg/operator-images/calibrate-ensemble-probabilistic.svg';
 
 const DOCUMENTATION_URL = 'https://github.com/ciemss/pyciemss/blob/main/pyciemss/interfaces.py#L156';
 
@@ -25,6 +26,7 @@ export const CalibrateEnsembleCiemssOperation: Operation = {
 	displayName: 'Calibrate ensemble',
 	description: '',
 	documentationUrl: DOCUMENTATION_URL,
+	imageUrl: calibrateEnsembleCiemss,
 	inputs: [
 		{ type: 'datasetId', label: 'Dataset' },
 		{ type: 'modelConfigId', label: 'Model configuration', acceptMultiple: false }

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

@@ -25,7 +25,7 @@
 		/>
 
 		<Button v-if="areInputsFilled" label="Edit" @click="emit('open-drilldown')" severity="secondary" outlined />
-		<tera-operator-placeholder v-else :operation-type="node.operationType">
+		<tera-operator-placeholder v-else :node="node">
 			Connect a model configuration and dataset
 		</tera-operator-placeholder>
 	</main>

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

@@ -19,7 +19,7 @@
 		<tera-progress-spinner v-if="inProgressSimulationId" :font-size="2" is-centered style="height: 100%" />
 
 		<Button v-if="areInputsFilled" label="Edit" @click="emit('open-drilldown')" severity="secondary" outlined />
-		<tera-operator-placeholder v-else :operation-type="node.operationType">
+		<tera-operator-placeholder v-else :node="node">
 			Connect a model configuration and dataset
 		</tera-operator-placeholder>
 	</main>

packages/client/hmi-client/src/components/workflow/ops/code-asset/code-asset-operation.ts

@@ -1,5 +1,6 @@
 import { WorkflowOperationTypes } from '@/types/workflow';
 import type { Operation, BaseState } from '@/types/workflow';
+import code from '@assets/svg/operator-images/code.svg';
 
 export interface CodeAssetState extends BaseState {
 	codeAssetId: string | null;
@@ -8,6 +9,7 @@ export interface CodeAssetState extends BaseState {
 export const CodeAssetOperation: Operation = {
 	name: WorkflowOperationTypes.CODE,
 	description: 'Select a code asset',
+	imageUrl: code,
 	displayName: 'Code',
 	isRunnable: true,
 	inputs: [],

packages/client/hmi-client/src/components/workflow/ops/code-asset/tera-code-asset-node.vue

@@ -12,7 +12,7 @@
 				@update:model-value="onCodeChange"
 				placeholder="Select a code asset"
 			/>
-			<tera-operator-placeholder :operation-type="node.operationType" />
+			<tera-operator-placeholder :node="node" />
 		</template>
 	</main>
 </template>

packages/client/hmi-client/src/components/workflow/ops/dataset-transformer/dataset-transformer-operation.ts

@@ -1,6 +1,7 @@
 import { ProgrammingLanguage } from '@/types/Types';
 import { ProgrammingLanguageVersion } from '@/types/common';
 import { Operation, WorkflowOperationTypes, BaseState } from '@/types/workflow';
+import transformDataset from '@assets/svg/operator-images/transform-dataset.svg';
 
 const DOCUMENTATION_URL = 'https://pandas.pydata.org/docs/user_guide/index.html#user-guide';
 
@@ -14,6 +15,7 @@ export const DatasetTransformerOperation: Operation = {
 	name: WorkflowOperationTypes.DATASET_TRANSFORMER,
 	description: 'Select a dataset',
 	documentationUrl: DOCUMENTATION_URL,
+	imageUrl: transformDataset,
 	displayName: 'Transform dataset',
 	isRunnable: true,
 	inputs: [{ type: 'datasetId|simulationId', label: 'Dataset or Simulation' }],

packages/client/hmi-client/src/components/workflow/ops/dataset-transformer/tera-dataset-transformer-node.vue

@@ -1,6 +1,6 @@
 <template>
 	<section>
-		<tera-operator-placeholder v-if="!node.inputs[0].value" :operation-type="node.operationType">
+		<tera-operator-placeholder v-if="!node.inputs[0].value" :node="node">
 			Attach one or more resources
 		</tera-operator-placeholder>
 		<Button v-else label="Edit" @click="emit('open-drilldown')" severity="secondary" outlined />

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

@@ -1,4 +1,5 @@
 import { Operation, WorkflowOperationTypes, BaseState } from '@/types/workflow';
+import dataset from '@assets/svg/operator-images/dataset.svg';
 
 export interface DatasetOperationState extends BaseState {
 	datasetId: string | null;
@@ -7,6 +8,7 @@ export interface DatasetOperationState extends BaseState {
 export const DatasetOperation: Operation = {
 	name: WorkflowOperationTypes.DATASET,
 	description: 'Select a dataset',
+	imageUrl: dataset,
 	displayName: 'Dataset',
 	isRunnable: true,
 	inputs: [],

packages/client/hmi-client/src/components/workflow/ops/dataset/tera-dataset-node.vue

@@ -2,7 +2,7 @@
 	<main>
 		<template v-if="dataset">
 			<tera-operator-title>{{ dataset.name }}</tera-operator-title>
-			<tera-operator-placeholder :operation-type="node.operationType" />
+			<tera-operator-placeholder :node="node" />
 			<!--
 			  -- Hide the section for the moment as this is taking too much memory in the hmi-server
 			<section v-if="csvContent">
@@ -53,7 +53,7 @@
 				placeholder="Select a dataset"
 				@update:model-value="onDatasetChange"
 			/>
-			<tera-operator-placeholder :operation-type="node.operationType" />
+			<tera-operator-placeholder :node="node" />
 		</template>
 	</main>
 </template>

packages/client/hmi-client/src/components/workflow/ops/decapodes/tera-decapodes-node.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<tera-operator-placeholder v-if="!node.inputs[0].value" :operation-type="node.operationType">
+		<tera-operator-placeholder v-if="!node.inputs[0].value" :node="node">
 			Attach a decapode model
 		</tera-operator-placeholder>
 		<Button label="Open" @click="emit('open-drilldown')" severity="secondary" outlined />

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

@@ -1,6 +1,7 @@
 import type { DocumentExtraction } from '@/types/Types';
 import type { AssetBlock, Operation, BaseState } from '@/types/workflow';
 import { WorkflowOperationTypes } from '@/types/workflow';
+import document from '@assets/svg/operator-images/document.svg';
 
 export interface DocumentOperationState extends BaseState {
 	documentId: string | null;
@@ -13,6 +14,7 @@ export const DocumentOperation: Operation = {
 	name: WorkflowOperationTypes.DOCUMENT,
 	displayName: 'Document',
 	description: 'Document',
+	imageUrl: document,
 	inputs: [],
 	outputs: [{ type: 'documentId', label: 'Document' }],
 	isRunnable: true,

packages/client/hmi-client/src/components/workflow/ops/document/tera-document-operation-node.vue

@@ -5,7 +5,7 @@
 			<h6>
 				<span class="truncate-after-three-lines">{{ documentName }}</span>
 			</h6>
-			<tera-operator-placeholder :operation-type="node.operationType" />
+			<tera-operator-placeholder :node="node" />
 			<Button label="Open" @click="emit('open-drilldown')" severity="secondary" outlined />
 		</template>
 		<template v-else>
@@ -16,7 +16,7 @@
 				placeholder="Select a document"
 				@update:model-value="onDocumentChange"
 			/>
-			<tera-operator-placeholder :operation-type="node.operationType" />
+			<tera-operator-placeholder :node="node" />
 		</template>
 	</main>
 </template>

packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-node.vue

@@ -1,6 +1,6 @@
 <template>
 	<section>
-		<tera-operator-placeholder v-if="!inProgressId" :operation-type="node.operationType">
+		<tera-operator-placeholder v-if="!inProgressId" :node="node">
 			<template v-if="!node.inputs[0].value"> Attach a model configuration </template>
 		</tera-operator-placeholder>
 

packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue

@@ -134,7 +134,7 @@
 						@update:trajectoryState="updateTrajectorystate"
 					/>
 					<div v-else class="flex flex-column h-full justify-content-center">
-						<tera-operator-placeholder :operation-type="node.operationType" />
+						<tera-operator-placeholder :node="node" />
 					</div>
 				</template>
 			</tera-drilldown-preview>

packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-node.vue

@@ -1,6 +1,6 @@
 <template>
 	<section>
-		<tera-operator-placeholder :operation-type="node.operationType" />
+		<tera-operator-placeholder :node="node" />
 		<Button
 			:label="isModelInputConnected ? 'Open' : 'Attach a model'"
 			@click="emit('open-drilldown')"

packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue

@@ -1,9 +1,6 @@
 <template>
 	<section>
-		<tera-operator-placeholder
-			v-if="!node.inputs[0].value || !node.inputs[1].value"
-			:operation-type="node.operationType"
-		>
+		<tera-operator-placeholder v-if="!node.inputs[0].value || !node.inputs[1].value" :node="node">
 			Attach models to compare
 		</tera-operator-placeholder>
 		<Button v-else label="Open" @click="emit('open-drilldown')" severity="secondary" outlined />

packages/client/hmi-client/src/components/workflow/ops/model-config/model-config-operation.ts

@@ -1,6 +1,7 @@
 import { WorkflowOperationTypes } from '@/types/workflow';
 import type { Operation, BaseState } from '@/types/workflow';
 import type { ModelConfiguration } from '@/types/Types';
+import configureModel from '@assets/svg/operator-images/configure-model.svg';
 
 export const name = 'ModelConfigOperation';
 
@@ -30,6 +31,7 @@ export const ModelConfigOperation: Operation = {
 	name: WorkflowOperationTypes.MODEL_CONFIG,
 	displayName: 'Configure model',
 	description: 'Create model configurations.',
+	imageUrl: configureModel,
 	isRunnable: true,
 	inputs: [
 		{ type: 'modelId', label: 'Model' },

packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue

@@ -457,10 +457,10 @@ useClientEvent(ClientEventType.TaskGollmConfigureModel, configModelEventHandler)
 useClientEvent(ClientEventType.TaskGollmConfigureFromDataset, configModelEventHandler);
 
 const selectedOutputId = ref<string>('');
-const selectedConfigId = computed(() => props.node.outputs?.find((o) => o.id === selectedOutputId.value)?.value?.[0]);
+const selectedConfigId = computed(() => props.node.outputs.find((o) => o.id === selectedOutputId.value)?.value?.[0]);
 
-const documentId = computed(() => props.node.inputs?.[1]?.value?.[0]?.documentId);
-const datasetIds = computed(() => props.node.inputs?.[2]?.value);
+const documentId = computed(() => props.node.inputs[1]?.value?.[0]?.documentId);
+const datasetIds = computed(() => props.node.inputs[2]?.value);
 
 const suggestedConfigurationContext = ref<{
 	isOpen: boolean;

packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-node.vue

@@ -1,6 +1,6 @@
 <template>
 	<section>
-		<tera-operator-placeholder :operation-type="node.operationType" />
+		<tera-operator-placeholder :node="node" />
 		<Button
 			:label="isModelInputConnected ? 'Open' : 'Attach a model'"
 			@click="emit('open-drilldown')"

packages/client/hmi-client/src/components/workflow/ops/model-coupling/tera-model-coupling-node.vue

@@ -1,7 +1,5 @@
 <template>
-	<tera-operator-placeholder :operation-type="node.operationType">
-		Attach two or more models
-	</tera-operator-placeholder>
+	<tera-operator-placeholder :node="node"> Attach two or more models </tera-operator-placeholder>
 	<Button v-if="node.inputs[0].value" @click="emit('open-drilldown')" label="Edit" severity="secondary" outlined />
 </template>
 

packages/client/hmi-client/src/components/workflow/ops/model-edit/model-edit-operation.ts

@@ -1,5 +1,6 @@
 import { Operation, WorkflowOperationTypes, BaseState } from '@/types/workflow';
 import { NotebookHistory } from '@/services/notebook';
+import editModel from '@assets/svg/operator-images/edit-model.svg';
 
 const DOCUMENTATION_URL = 'https://github.com/DARPA-ASKEM/beaker-kernel/blob/main/docs/contexts_mira_model_edit.md';
 
@@ -13,6 +14,7 @@ export const ModelEditOperation: Operation = {
 	displayName: 'Edit model',
 	description: 'Edit a model',
 	documentationUrl: DOCUMENTATION_URL,
+	imageUrl: editModel,
 	isRunnable: false,
 	inputs: [{ type: 'modelId|modelConfigId', label: 'Model or Model configuration', acceptMultiple: false }],
 	outputs: [{ type: 'modelId', label: 'Model' }],

packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-node.vue

@@ -1,7 +1,7 @@
 <template>
 	<section>
 		<tera-operator-model-preview v-if="model" :model="model" />
-		<tera-operator-placeholder v-else :operation-type="node.operationType">
+		<tera-operator-placeholder v-else :node="node">
 			<template v-if="!node.inputs[0].value">Attach a model</template>
 		</tera-operator-placeholder>
 		<template v-if="node.inputs[0].value">

packages/client/hmi-client/src/components/workflow/ops/model-from-code/model-from-code-operation.ts

@@ -2,6 +2,7 @@ import { ProgrammingLanguage } from '@/types/Types';
 import { ModelServiceType } from '@/types/common';
 import { AssetBlock, Operation, WorkflowOperationTypes } from '@/types/workflow';
 import { CodeBlock } from '@/utils/code-asset';
+import createModelFromCode from '@assets/svg/operator-images/create-model-from-code.svg';
 
 const DOCUMENTATION_URL = 'https://github.com/ml4ai/ASKEM-TA1-DockerVM?tab=readme-ov-file#code2amr';
 
@@ -18,6 +19,7 @@ export const ModelFromCodeOperation: Operation = {
 	description: 'Create model',
 	displayName: 'Create model from code',
 	documentationUrl: DOCUMENTATION_URL,
+	imageUrl: createModelFromCode,
 	isRunnable: true,
 	inputs: [
 		{ type: 'codeAssetId', label: 'Code' },

packages/client/hmi-client/src/components/workflow/ops/model-from-code/tera-model-from-code-node.vue

@@ -4,7 +4,7 @@
 		<!-- <tera-carousel>
 			<img v-for="(image, index) in images" :src="image" alt="alt" :key="index" />
 		</tera-carousel> -->
-		<tera-operator-placeholder :operation-type="WorkflowOperationTypes.MODEL_FROM_CODE">
+		<tera-operator-placeholder :node="node">
 			Attach a code asset or open the drilldown to configure
 		</tera-operator-placeholder>
 
@@ -17,7 +17,11 @@
 // import terarium from '@/assets/svg/terarium-icon.svg';
 import Button from 'primevue/button';
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
-import { WorkflowOperationTypes } from '@/types/workflow';
+import { WorkflowNode } from '@/types/workflow';
+
+defineProps<{
+	node: WorkflowNode<any>;
+}>();
 
 const emit = defineEmits(['open-drilldown']);