From 1c5dcd691be574569eb82953ad9aad306b0edef2 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Fri, 28 Apr 2023 12:23:17 -0400
Subject: [PATCH 01/10] adding first steps to calibration operation

---
 .../src/components/workflow/calibration.vue   |  54 ++++++
 .../hmi-client/src/temp/calibrationExample.ts | 170 ++++++++++++++++++
 packages/client/hmi-client/src/types/Types.ts |   2 +-
 .../types/workflow/calibrationOperation.ts    |  37 ++++
 .../simulationservice/CalibrationParams.java  |   2 +-
 5 files changed, 263 insertions(+), 2 deletions(-)
 create mode 100644 packages/client/hmi-client/src/components/workflow/calibration.vue
 create mode 100644 packages/client/hmi-client/src/temp/calibrationExample.ts
 create mode 100644 packages/client/hmi-client/src/types/workflow/calibrationOperation.ts

diff --git a/packages/client/hmi-client/src/components/workflow/calibration.vue b/packages/client/hmi-client/src/components/workflow/calibration.vue
new file mode 100644
index 0000000000..03169170b8
--- /dev/null
+++ b/packages/client/hmi-client/src/components/workflow/calibration.vue
@@ -0,0 +1,54 @@
+<template>
+	<Button @click="startCalibration">Start Calibration Job</Button>
+
+	<form>
+		<label for="calibrationStatus">
+			<input v-model="runId" type="text" placeholder="Run ID" />
+		</label>
+		<Button @click="getCalibrationStatus"> Get Run Status </Button>
+	</form>
+
+	<form>
+		<label for="calibrationResult">
+			<input v-model="runId" type="text" placeholder="Run ID" />
+		</label>
+		<Button @click="getCalibrationResults"> Get Run Results </Button>
+	</form>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Button from 'primevue/button';
+// import { WorkflowNode } from '@/types/workflow';
+import { makeCalibrateJob, getRunStatus, getRunResult } from '@/services/models/simulation-service';
+import { CalibrationParams } from '@/types/Types';
+import { calibrationParamExample } from '@/temp/calibrationExample';
+
+// const props = defineProps<{
+// 	workflowNode: WorkflowNode;
+// }>();
+
+const runId = ref('');
+
+const startCalibration = async () => {
+	// Make calibration job.
+	const calibrationParam: CalibrationParams = calibrationParamExample;
+	runId.value = await makeCalibrateJob(calibrationParam);
+};
+
+const getCalibrationStatus = async () => {
+	console.log('Getting status of run');
+	const results = await getRunStatus(Number(runId.value));
+	console.log('Done');
+	console.log(results);
+};
+
+const getCalibrationResults = async () => {
+	console.log('Getting results of run');
+	const results = await getRunResult(Number(runId.value));
+	console.log('Done');
+	console.log(results);
+};
+</script>
+
+<style scoped></style>
diff --git a/packages/client/hmi-client/src/temp/calibrationExample.ts b/packages/client/hmi-client/src/temp/calibrationExample.ts
new file mode 100644
index 0000000000..5afd0c32a6
--- /dev/null
+++ b/packages/client/hmi-client/src/temp/calibrationExample.ts
@@ -0,0 +1,170 @@
+import { CalibrationParams } from '@/types/Types';
+
+export const calibrationParamExample: CalibrationParams = {
+	petri: JSON.stringify({
+		T: [{ tname: 'exp' }, { tname: 'conv' }, { tname: 'rec' }, { tname: 'death' }],
+		S: [{ sname: 'S' }, { sname: 'E' }, { sname: 'I' }, { sname: 'R' }, { sname: 'D' }],
+		I: [
+			{ it: 1, is: 1 },
+			{ it: 1, is: 3 },
+			{ it: 2, is: 2 },
+			{ it: 3, is: 3 },
+			{ it: 4, is: 3 }
+		],
+		O: [
+			{ ot: 1, os: 2 },
+			{ ot: 1, os: 3 },
+			{ ot: 2, os: 3 },
+			{ ot: 3, os: 4 },
+			{ ot: 4, os: 5 }
+		]
+	}),
+	initials: {
+		S: 0.49457800495224524,
+		E: 0.26745259325403603,
+		I: 0.4497387877393193,
+		R: 0.32807705995998604,
+		D: 0.8545934885162726
+	},
+	timesteps: [
+		0.0, 1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0,
+		17.0, 18.0, 19.0, 20.0, 21.0, 22.0, 23.0, 24.0, 25.0, 26.0, 27.0, 28.0, 29.0, 30.0, 31.0, 32.0,
+		33.0, 34.0, 35.0, 36.0, 37.0, 38.0, 39.0, 40.0, 41.0, 42.0, 43.0, 44.0, 45.0, 46.0, 47.0, 48.0,
+		49.0, 50.0, 51.0, 52.0, 53.0, 54.0, 55.0, 56.0, 57.0, 58.0, 59.0, 60.0, 61.0, 62.0, 63.0, 64.0,
+		65.0, 66.0, 67.0, 68.0, 69.0, 70.0, 71.0, 72.0, 73.0, 74.0, 75.0, 76.0, 77.0, 78.0, 79.0, 80.0,
+		81.0, 82.0, 83.0, 84.0, 85.0, 86.0, 87.0, 88.0, 89.0, 90.0
+	],
+	data: {
+		S: [
+			0.8457800495224524, 0.7989147588862952, 0.7717574792075946, 0.7555359186659574,
+			0.7456920016554676, 0.7396688112881398, 0.7359674505077398, 0.733687938266877,
+			0.7322826633014184, 0.7314156264067815, 0.7308804557081816, 0.7305502951721528,
+			0.730346448584973, 0.7302205972596495, 0.7301429778227182, 0.7300949977873166,
+			0.7300654335334856, 0.730047144258963, 0.7300358864204086, 0.73002890908885,
+			0.730024629042432, 0.7300219622444799, 0.7300203331637952, 0.7300193219752432,
+			0.7300186914052434, 0.7300183147077333, 0.7300180744975032, 0.7300179226974934,
+			0.7300178363018128, 0.7300177832030919, 0.7300177442606378, 0.7300177212694495,
+			0.7300177109424568, 0.7300177052872375, 0.7300176984613497, 0.730017693784836,
+			0.7300176914001032, 0.7300176908506781, 0.7300176910990095, 0.7300177219074794,
+			0.7300178458024273, 0.7300179345285785, 0.7300179072318298, 0.7300177547480409,
+			0.7300175396030346, 0.7300173960125973, 0.7300175363444509, 0.730017912737607,
+			0.7300177386150222, 0.7300174202020968, 0.7300177284913968, 0.7300177123167327,
+			0.7300175532942412, 0.7300177171274255, 0.7300176919754777, 0.7300176235282271,
+			0.7300177181879278, 0.7300176938299692, 0.7300176424408426, 0.7300177168767108,
+			0.7300177049794416, 0.7300176427971512, 0.7300177097969711, 0.7300177230196913,
+			0.7300176477927348, 0.7300176880711062, 0.7300177406695283, 0.7300176686418995,
+			0.7300176522675123, 0.7300177435777646, 0.7300177016229011, 0.7300176226569584,
+			0.7300176569508812, 0.7300176826579916, 0.7300177007038987, 0.7300177110886026,
+			0.7300177138121032, 0.7300177088744005, 0.7300176994020061, 0.7300176938927453,
+			0.730017689480069, 0.7300176861639774, 0.7300176839444705, 0.7300176828215483,
+			0.7300176827952107, 0.7300176838654578, 0.7300176860322897, 0.7300176878300157,
+			0.730017688937628, 0.7300176894334329, 0.7300176893174307
+		],
+		E: [
+			0.217452593254036, 0.1404833532397162, 0.088632010007611, 0.0552963061774049,
+			0.0343100125543896, 0.0212307431983028, 0.0131195391705995, 0.0081018926034363,
+			0.0050021747290917, 0.0030878740632234, 0.0019058189715296, 0.0011765103673726,
+			0.0007262006132702, 0.0004481938724756, 0.0002767404236125, 0.0001707569164318,
+			0.0001054559433752, 6.505848872204872e-5, 4.019311351184087e-5, 2.478189020708888e-5,
+			1.5328655255094524e-5, 9.438387358063689e-6, 5.840286483038082e-6, 3.6068759808457466e-6,
+			2.214113804391068e-6, 1.3821494011314538e-6, 8.51573374279463e-7, 5.162622885181237e-7,
+			3.254925316256019e-7, 2.082282990279533e-7, 1.220137453281243e-7, 7.1209207397538e-8,
+			4.867191969701728e-8, 3.63384002842148e-8, 1.8287085423410195e-8, 4.665386113775543e-9,
+			1.0770495710384207e-9, 6.14378482299531e-9, 1.1527792880149082e-8, -8.362901541072997e-8,
+			-4.504371012477758e-7, -7.134866529110417e-7, -6.374765412561147e-7, -1.9554335065173602e-7,
+			4.3073862102014507e-7, 8.513573623644157e-7, 4.502358673376463e-7, -6.273118044533418e-7,
+			-1.353925922945228e-7, 7.687307162182654e-7, -1.1023424604761453e-7, -6.510054210534464e-8,
+			3.869754757232925e-7, -7.969665699893962e-8, -8.322081593118136e-9, 1.863674779812018e-7,
+			-8.314683083207985e-8, -1.3868152265098973e-8, 1.323692126105411e-7, -7.951765100918856e-8,
+			-4.566685952634925e-8, 1.3131475728721093e-7, -5.9391474108796086e-8, -9.703024328237189e-8,
+			1.1708587860358057e-7, 2.44038991154976e-9, -1.472709141288501e-7, 5.774030335551677e-8,
+			1.0434595580506445e-7, -1.555500662598952e-7, -3.6134414911451415e-8, 1.886253035122505e-7,
+			9.101428015414449e-8, 1.7843941481753958e-8, -3.3520287896786234e-8, -6.307840798147604e-8,
+			-7.083041877231543e-8, -5.677632026930445e-8, -2.9815085378066694e-8, -1.413407668776829e-8,
+			-1.574276315884203e-9, 7.864315737585585e-9, 1.4181699472641062e-8, 1.7377874889282224e-8,
+			1.7452841987509093e-8, 1.4406600767321636e-8, 8.239151228719873e-9, 3.1222862385595557e-9,
+			-3.0309217043157454e-11, -1.4415191680171683e-9, -1.111343614362474e-9
+		],
+		I: [
+			0.4497387877393193, 0.2703453558919503, 0.1653910436709313, 0.1019498710791962,
+			0.0630188528097618, 0.0389809118258074, 0.0241083368473905, 0.0149044038581098,
+			0.009211194579637, 0.0056906061008903, 0.0035143080526178, 0.0021703370346262,
+			0.0013400270966871, 0.000827196170478, 0.0005108171815234, 0.0003152198819452,
+			0.0001946818676834, 0.0001201097632167, 7.420476326892384e-5, 4.575360736524228e-5,
+			2.8300472720058342e-5, 1.7425910306088104e-5, 1.078275738828892e-5, 6.659295756205264e-6,
+			4.087951098286808e-6, 2.5517885635365483e-6, 1.5722706609474684e-6, 9.532825993129216e-7,
+			6.009212494743482e-7, 3.843775758378507e-7, 2.257781668456925e-7, 1.3204727752626754e-7,
+			8.966337611148167e-8, 6.644508425991673e-8, 4.158506541928465e-8, 2.5807590806114457e-8,
+			1.4404168084575729e-8, 5.883446258331484e-9, 2.0605949546011224e-9, 2.908964615185167e-7,
+			1.436576585246252e-6, 2.257407617734316e-6, 2.0097949037680603e-6, 6.092642788981324e-7,
+			-1.3695379305593796e-6, -2.6928449075230503e-6, -1.4095223432849782e-6, 2.034197390485977e-6,
+			4.476699669663285e-7, -2.4581111175867632e-6, 3.589147619815499e-7, 2.12102564827637e-7,
+			-1.2396504208438817e-6, 2.5696291871873894e-7, 2.74714220891997e-8, -5.975087570024642e-7,
+			2.670869216182632e-7, 4.4681543928191686e-8, -4.246136348603734e-7, 2.55217127418659e-7,
+			1.4657379359677668e-7, -4.2131813728946084e-7, 1.905851959640476e-7, 3.113489576805776e-7,
+			-3.7568344418951466e-7, -7.825907097209913e-9, 4.7254686353887043e-7, -1.8526792098122545e-7,
+			-3.348104609788996e-7, 4.991099995234981e-7, 1.1594406973346749e-7, -6.052357806743842e-7,
+			-2.920340702260703e-7, -5.7254556977615096e-8, 1.0755628995366001e-7, 2.0239847056775485e-7,
+			2.2727198486466962e-7, 1.821768328444043e-7, 9.566693079778256e-8, 4.535163864789735e-8,
+			5.051297687341081e-9, -2.523409208388622e-8, -4.550453066578466e-8, -5.576001805835408e-8,
+			-5.60005542615946e-8, -4.6226139275506176e-8, -2.643677310008877e-8, -1.0018400843478872e-8,
+			9.72615938096802e-11, 4.6253778944017745e-9, 3.565948058297408e-9
+		],
+		R: [
+			0.328077059959986, 0.575704439041781, 0.7259355031548465, 0.8182142842907686,
+			0.8751839322495475, 0.9104140088945406, 0.9322060994766032, 0.9456815127600474,
+			0.954009748853752, 0.9591561390989404, 0.9623357373642007, 0.9642984771532586,
+			0.965510748248018, 0.966259351017806, 0.9667211203236034, 0.9670065848779302,
+			0.9671824912805328, 0.96729131546496, 0.967358302794905, 0.9673998204182364,
+			0.967425288420584, 0.9674411570203612, 0.9674508507827414, 0.9674568678187088,
+			0.967460620004928, 0.9674628615319908, 0.9674642908963146, 0.9674651941785616,
+			0.9674657082738553, 0.9674660242363848, 0.967466255962566, 0.967466392771112,
+			0.9674664542216124, 0.9674664878728264, 0.9674665284901154, 0.9674665563176058,
+			0.967466570507904, 0.9674665737772408, 0.9674665722995444, 0.9674663889745708,
+			0.9674656517410362, 0.967465123778545, 0.967465286207249, 0.9674661935580388,
+			0.967467473772543, 0.9674683282031288, 0.9674674931642172, 0.967465253482127,
+			0.967466289575498, 0.9674681842326472, 0.9674663497784228, 0.9674664460217516,
+			0.967467392259387, 0.9674664173782408, 0.9674665670425042, 0.9674669743306402,
+			0.9674664110620944, 0.967466556002753, 0.967466861790233, 0.9674664188624796,
+			0.967466489656646, 0.9674668596691384, 0.967466460989138, 0.9674663823079656,
+			0.9674668299423852, 0.9674665902670504, 0.9674662772825848, 0.9674667058795138,
+			0.9674668033135962, 0.9674662599762196, 0.9674665096265568, 0.9674669795085046,
+			0.967466775443317, 0.967466622473781, 0.9674665150920312, 0.967466453298067,
+			0.967466437091889, 0.9674664664734968, 0.9674665228386964, 0.9674665556214272,
+			0.9674665818789554, 0.9674666016112812, 0.9674666148184043, 0.9674666215003253,
+			0.9674666216570434, 0.9674666152885592, 0.9674666023948724, 0.9674665916975448,
+			0.967466585106724, 0.967466582156448, 0.9674665828467162
+		],
+		D: [
+			0.3545934885162726, 0.4101940719323234, 0.4439259429510829, 0.4646455987787392,
+			0.4774371797228998, 0.4853475037852757, 0.4902405529897334, 0.493266231503596,
+			0.4951361975281673, 0.4962917333222308, 0.4970056588955365, 0.4974463592646562,
+			0.4977185544491183, 0.4978866406716573, 0.4979903232406089, 0.4980544195284428,
+			0.4980939163669894, 0.4981183510162046, 0.4981333918999721, 0.4981427139874078,
+			0.4981484324010752, 0.4981519954295613, 0.4981541720016586, 0.4981555230263775,
+			0.4981563655169925, 0.4981568688143778, 0.4981571897542133, 0.4981573925711236,
+			0.4981575080026174, 0.4981575789467151, 0.4981576309769506, 0.4981576616950199,
+			0.4981576754927013, 0.4981576830485181, 0.4981576921684505, 0.4981576984166478,
+			0.4981577016028417, 0.4981577023369166, 0.4981577020051246, 0.4981576608425702,
+			0.498157495309119, 0.4981573767639782, 0.4981574132346251, 0.4981576169650586,
+			0.4981579044157985, 0.4981580962638858, 0.4981579087698743, 0.4981574058867467,
+			0.4981576385241719, 0.4981580639377238, 0.4981576520417311, 0.4981576736515598,
+			0.4981578861133836, 0.4981576672201388, 0.4981577008247442, 0.4981577922744784,
+			0.4981576658019538, 0.4981576983459528, 0.4981577670054135, 0.4981576675533998,
+			0.498157683449045, 0.4981577665291572, 0.4981576770122358, 0.4981576593456955,
+			0.4981577598545123, 0.4981577060394274, 0.498157635764004, 0.498157731998271,
+			0.4981577538754634, 0.4981576318781494, 0.4981576879329542, 0.4981577934370811,
+			0.4981577476176587, 0.4981577132709096, 0.4981576891601349, 0.4981576752853345,
+			0.4981576716465085, 0.4981576782436568, 0.4981576908995189, 0.4981576982603324,
+			0.4981577041560209, 0.4981577085865845, 0.4981577115520229, 0.4981577130523364,
+			0.4981577130875249, 0.4981577116575883, 0.4981577087625267, 0.4981577063606208,
+			0.4981577048807624, 0.4981577042183272, 0.4981577043733154
+		]
+	},
+	params: {
+		exp: 0.16207166221196045,
+		conv: 0.7009195813964052,
+		rec: 0.7040317196117394,
+		death: 0.15807853921067516
+	}
+};
diff --git a/packages/client/hmi-client/src/types/Types.ts b/packages/client/hmi-client/src/types/Types.ts
index 9968b8fb29..8bf31523fa 100644
--- a/packages/client/hmi-client/src/types/Types.ts
+++ b/packages/client/hmi-client/src/types/Types.ts
@@ -49,7 +49,7 @@ export interface Simulation {
 export interface CalibrationParams {
     petri: string;
     initials: { [index: string]: number };
-    t: number[];
+    timesteps: number[];
     params: { [index: string]: number };
     data: { [index: string]: number[] };
 }
diff --git a/packages/client/hmi-client/src/types/workflow/calibrationOperation.ts b/packages/client/hmi-client/src/types/workflow/calibrationOperation.ts
new file mode 100644
index 0000000000..699e0b6e6d
--- /dev/null
+++ b/packages/client/hmi-client/src/types/workflow/calibrationOperation.ts
@@ -0,0 +1,37 @@
+import { WorkflowPort, Operation } from '@/types/workflow';
+import { CalibrationParams } from '@/types/Types';
+import { calibrationParamExample } from '@/temp/calibrationExample';
+import { makeCalibrateJob } from '@/services/models/simulation-service';
+import { getModel } from '@/services/model';
+
+export const calibrationOperation: Operation = {
+	name: 'calibration',
+	description:
+		'given a model id, a dataset id, and optionally a configuration. calibrate the models initial values and rates',
+	inputs: [{ type: 'modelId' }, { type: 'datasetId' }, { type: 'calibrationConfiguration' }],
+	outputs: [{ type: 'number' }],
+
+	// TODO: Figure out mapping
+	// Calls API, returns results.
+	action: async (v: WorkflowPort[]) => {
+		// TODO Add more safety checks.
+		if (v.length) {
+			// TODO: The mapping is not 0 -> modelId as i am assuming here for testing
+			const modelId = v[0].value;
+			// let datasetId = v[1].value;
+			// let configuration = v[2].value; //TODO Not sure if this is a required input
+
+			// Get the model:
+			const model = await getModel(modelId);
+			const petriNetString = JSON.stringify(model?.content);
+			console.log('Petrinet String: ');
+			console.log(petriNetString);
+
+			// Make calibration job.
+			const calibrationParam: CalibrationParams = calibrationParamExample;
+			const result = makeCalibrateJob(calibrationParam);
+			return [{ type: 'number', result }];
+		}
+		return [{ type: null, value: null }];
+	}
+};
diff --git a/packages/services/hmi-server/src/main/java/software/uncharted/terarium/hmiserver/models/simulationservice/CalibrationParams.java b/packages/services/hmi-server/src/main/java/software/uncharted/terarium/hmiserver/models/simulationservice/CalibrationParams.java
index 4f10dfd21f..3594acf5f0 100644
--- a/packages/services/hmi-server/src/main/java/software/uncharted/terarium/hmiserver/models/simulationservice/CalibrationParams.java
+++ b/packages/services/hmi-server/src/main/java/software/uncharted/terarium/hmiserver/models/simulationservice/CalibrationParams.java
@@ -15,7 +15,7 @@
 public class CalibrationParams implements Serializable {
 	private String petri;
 	private Map<String, Double> initials;
-	private List<Double> t;
+	private List<Double> timesteps;
 	private Map<String, Double> params;
 	private Map<String, List<Double>> data;
 }

From 6bb3c9ebfa4ea2219d57978f1e1a76dcff4588aa Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Fri, 28 Apr 2023 13:15:34 -0400
Subject: [PATCH 02/10] minor bugs from pull. need to make new pull soon

---
 .../client/hmi-client/src/types/workflow/calibrationOperation.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/hmi-client/src/types/workflow/calibrationOperation.ts b/packages/client/hmi-client/src/types/workflow/calibrationOperation.ts
index 699e0b6e6d..60fec1aa70 100644
--- a/packages/client/hmi-client/src/types/workflow/calibrationOperation.ts
+++ b/packages/client/hmi-client/src/types/workflow/calibrationOperation.ts
@@ -10,6 +10,7 @@ export const calibrationOperation: Operation = {
 		'given a model id, a dataset id, and optionally a configuration. calibrate the models initial values and rates',
 	inputs: [{ type: 'modelId' }, { type: 'datasetId' }, { type: 'calibrationConfiguration' }],
 	outputs: [{ type: 'number' }],
+	isRunnable: true,
 
 	// TODO: Figure out mapping
 	// Calls API, returns results.

From 1b87c972f2dd66843eb1f65e68cfb5d71f053cda Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Fri, 28 Apr 2023 15:35:09 -0400
Subject: [PATCH 03/10] moving workflow node Adding node.viewState

---
 ...ibration.vue => tera-calibration-node.vue} | 46 +++++++++++--------
 .../workflow/tera-workflow-node.vue           |  1 +
 .../client/hmi-client/src/types/workflow.ts   |  8 +++-
 .../types/workflow/calibrationOperation.ts    |  4 +-
 .../src/workflow/tera-simulation-workflow.vue | 42 +++++++++--------
 5 files changed, 59 insertions(+), 42 deletions(-)
 rename packages/client/hmi-client/src/components/workflow/{calibration.vue => tera-calibration-node.vue} (51%)
 rename packages/client/hmi-client/src/{ => components}/workflow/tera-workflow-node.vue (98%)

diff --git a/packages/client/hmi-client/src/components/workflow/calibration.vue b/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue
similarity index 51%
rename from packages/client/hmi-client/src/components/workflow/calibration.vue
rename to packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue
index 03169170b8..325df713ca 100644
--- a/packages/client/hmi-client/src/components/workflow/calibration.vue
+++ b/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue
@@ -1,39 +1,45 @@
 <template>
-	<Button @click="startCalibration">Start Calibration Job</Button>
-
-	<form>
-		<label for="calibrationStatus">
-			<input v-model="runId" type="text" placeholder="Run ID" />
-		</label>
-		<Button @click="getCalibrationStatus"> Get Run Status </Button>
-	</form>
-
-	<form>
-		<label for="calibrationResult">
-			<input v-model="runId" type="text" placeholder="Run ID" />
-		</label>
-		<Button @click="getCalibrationResults"> Get Run Results </Button>
-	</form>
+	<tera-workflow-node :node="node">
+		<template #body v-if="viewState === VIEWOPTIONS.ONNODE">
+			<Button @click="startCalibration">Start Calibration Job</Button>
+			<form>
+				<label for="calibrationStatus">
+					<input v-model="runId" type="text" placeholder="Run ID" />
+				</label>
+				<Button @click="getCalibrationStatus"> Get Run Status </Button>
+			</form>
+
+			<form>
+				<label for="calibrationResult">
+					<input v-model="runId" type="text" placeholder="Run ID" />
+				</label>
+				<Button @click="getCalibrationResults"> Get Run Results </Button>
+			</form>
+		</template>
+	</tera-workflow-node>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import Button from 'primevue/button';
-// import { WorkflowNode } from '@/types/workflow';
 import { makeCalibrateJob, getRunStatus, getRunResult } from '@/services/models/simulation-service';
 import { CalibrationParams } from '@/types/Types';
 import { calibrationParamExample } from '@/temp/calibrationExample';
+import { WorkflowNode, VIEWOPTIONS } from '@/types/workflow';
+import TeraWorkflowNode from './tera-workflow-node.vue';
 
-// const props = defineProps<{
-// 	workflowNode: WorkflowNode;
-// }>();
+const props = defineProps<{
+	node: WorkflowNode;
+}>();
 
 const runId = ref('');
+const viewState = computed(() => props.node.viewState);
 
 const startCalibration = async () => {
 	// Make calibration job.
 	const calibrationParam: CalibrationParams = calibrationParamExample;
 	runId.value = await makeCalibrateJob(calibrationParam);
+	console.log(runId.value);
 };
 
 const getCalibrationStatus = async () => {
diff --git a/packages/client/hmi-client/src/workflow/tera-workflow-node.vue b/packages/client/hmi-client/src/components/workflow/tera-workflow-node.vue
similarity index 98%
rename from packages/client/hmi-client/src/workflow/tera-workflow-node.vue
rename to packages/client/hmi-client/src/components/workflow/tera-workflow-node.vue
index 3e76721a4f..9bc3a9210d 100644
--- a/packages/client/hmi-client/src/workflow/tera-workflow-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/tera-workflow-node.vue
@@ -7,6 +7,7 @@
 				{{ input.label }}
 			</li>
 		</section>
+		<slot name="body"></slot>
 		<section class="outputs">
 			<li v-for="(output, index) in node.outputs" :key="index">
 				{{ output.label }}
diff --git a/packages/client/hmi-client/src/types/workflow.ts b/packages/client/hmi-client/src/types/workflow.ts
index e2a5d924db..f52d00b918 100644
--- a/packages/client/hmi-client/src/types/workflow.ts
+++ b/packages/client/hmi-client/src/types/workflow.ts
@@ -6,6 +6,12 @@ export enum WorkflowStatus {
 	ERROR = 'error'
 }
 
+export enum VIEWOPTIONS {
+	ONNODE = 'onNode',
+	PREVIEW = 'preview',
+	FULLPAGE = 'fullPage'
+}
+
 // Defines the type of data an operation can consume and output
 export interface OperationData {
 	type: string;
@@ -48,7 +54,7 @@ export interface WorkflowNode {
 	y: number;
 	width: number;
 	height: number;
-
+	viewState: VIEWOPTIONS;
 	inputs: WorkflowPort[];
 	outputs: WorkflowPort[];
 
diff --git a/packages/client/hmi-client/src/types/workflow/calibrationOperation.ts b/packages/client/hmi-client/src/types/workflow/calibrationOperation.ts
index 60fec1aa70..9cd959d999 100644
--- a/packages/client/hmi-client/src/types/workflow/calibrationOperation.ts
+++ b/packages/client/hmi-client/src/types/workflow/calibrationOperation.ts
@@ -4,8 +4,8 @@ import { calibrationParamExample } from '@/temp/calibrationExample';
 import { makeCalibrateJob } from '@/services/models/simulation-service';
 import { getModel } from '@/services/model';
 
-export const calibrationOperation: Operation = {
-	name: 'calibration',
+export const CalibrationOperation: Operation = {
+	name: 'CalibrationOperation',
 	description:
 		'given a model id, a dataset id, and optionally a configuration. calibrate the models initial values and rates',
 	inputs: [{ type: 'modelId' }, { type: 'datasetId' }, { type: 'calibrationConfiguration' }],
diff --git a/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue b/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue
index 514bc79d22..c4911425cb 100644
--- a/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue
+++ b/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue
@@ -5,7 +5,8 @@
 			<ContextMenu ref="contextMenu" :model="contextMenuItems" />
 
 			<ul v-for="(node, index) in nodes" :key="index">
-				<tera-workflow-node :node="node"></tera-workflow-node>
+				<tera-workflow-node :node="node" v-if="node.operationType === 'testOpteration'" />
+				<tera-calibration-node :node="node" v-if="node.operationType === 'CalibrationOperation'" />
 			</ul>
 		</template>
 	</infinite-canvas>
@@ -14,30 +15,32 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import InfiniteCanvas from '@/components/widgets/tera-infinite-canvas.vue';
-import { Operation, WorkflowNode, WorkflowStatus } from '@/types/workflow';
+import { Operation, WorkflowNode, WorkflowStatus, VIEWOPTIONS } from '@/types/workflow';
 import ContextMenu from 'primevue/contextmenu';
-import TeraWorkflowNode from './tera-workflow-node.vue';
+import TeraWorkflowNode from '@/components/workflow/tera-workflow-node.vue';
+import teraCalibrationNode from '@/components/workflow/tera-calibration-node.vue';
+import { CalibrationOperation } from '@/types/workflow/CalibrationOperation';
 
 const nodes = ref<WorkflowNode[]>([]);
 const contextMenu = ref();
 const newNodePosition = ref<{ x: number; y: number }>({ x: 0, y: 0 });
 let canvasTransform = { x: 0, y: 0, k: 1 };
 
-const testOperation: Operation = {
-	name: 'Test operation',
-	description: 'A test operation',
-	inputs: [
-		{ type: 'number', label: 'Input one' },
-		{ type: 'number', label: 'Input two' },
-		{ type: 'number', label: 'Input three' }
-	],
-	outputs: [
-		{ type: 'number', label: 'Output one' },
-		{ type: 'number', label: 'Output two' }
-	],
-	action: () => {},
-	isRunnable: true
-};
+// const testOperation: Operation = {
+// 	name: 'Test operation',
+// 	description: 'A test operation',
+// 	inputs: [
+// 		{ type: 'number', label: 'Input one' },
+// 		{ type: 'number', label: 'Input two' },
+// 		{ type: 'number', label: 'Input three' }
+// 	],
+// 	outputs: [
+// 		{ type: 'number', label: 'Output one' },
+// 		{ type: 'number', label: 'Output two' }
+// 	],
+// 	action: () => {},
+// 	isRunnable: true
+// };
 
 function insertNode(operation: Operation) {
 	const newNode: WorkflowNode = {
@@ -48,6 +51,7 @@ function insertNode(operation: Operation) {
 		y: newNodePosition.value.y,
 		width: 100,
 		height: 100,
+		viewState: VIEWOPTIONS.ONNODE,
 		inputs: operation.inputs.map((o, i) => ({ id: i.toString(), ...o })),
 		outputs: operation.outputs.map((o, i) => ({ id: i.toString(), ...o })),
 		statusCode: WorkflowStatus.INVALID
@@ -59,7 +63,7 @@ const contextMenuItems = ref([
 	{
 		label: 'New operation',
 		command: () => {
-			insertNode(testOperation);
+			insertNode(CalibrationOperation);
 		}
 	}
 ]);

From 04c8e6b150857e4a131dfbf855d0b69bfaf134a2 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Fri, 28 Apr 2023 15:38:27 -0400
Subject: [PATCH 04/10] minor fix

---
 .../src/components/workflow/tera-calibration-node.vue          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue b/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue
index 325df713ca..75d95945e4 100644
--- a/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue
@@ -38,7 +38,8 @@ const viewState = computed(() => props.node.viewState);
 const startCalibration = async () => {
 	// Make calibration job.
 	const calibrationParam: CalibrationParams = calibrationParamExample;
-	runId.value = await makeCalibrateJob(calibrationParam);
+	const results = await makeCalibrateJob(calibrationParam);
+	runId.value = results.id;
 	console.log(runId.value);
 };
 

From 591b01500eff16832cfcd741832d289712146538 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Fri, 28 Apr 2023 15:44:35 -0400
Subject: [PATCH 05/10] step 1 in renaming a file

---
 .../{calibrationOperation.ts => calibrationOperation_Renaming.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/client/hmi-client/src/types/workflow/{calibrationOperation.ts => calibrationOperation_Renaming.ts} (100%)

diff --git a/packages/client/hmi-client/src/types/workflow/calibrationOperation.ts b/packages/client/hmi-client/src/types/workflow/calibrationOperation_Renaming.ts
similarity index 100%
rename from packages/client/hmi-client/src/types/workflow/calibrationOperation.ts
rename to packages/client/hmi-client/src/types/workflow/calibrationOperation_Renaming.ts

From 863641e05f41fefa4122c0ea96285a19b8a24efb Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Fri, 28 Apr 2023 15:45:21 -0400
Subject: [PATCH 06/10] renaming step 2

---
 .../{calibrationOperation_Renaming.ts => CalibrationOperation.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/client/hmi-client/src/types/workflow/{calibrationOperation_Renaming.ts => CalibrationOperation.ts} (100%)

diff --git a/packages/client/hmi-client/src/types/workflow/calibrationOperation_Renaming.ts b/packages/client/hmi-client/src/types/workflow/CalibrationOperation.ts
similarity index 100%
rename from packages/client/hmi-client/src/types/workflow/calibrationOperation_Renaming.ts
rename to packages/client/hmi-client/src/types/workflow/CalibrationOperation.ts

From fcf2e97ddc1c982728519cda10934fd09451400d Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Fri, 28 Apr 2023 16:00:16 -0400
Subject: [PATCH 07/10] removing viewoption stuff. Daniel gave up good pov

---
 .../workflow/tera-calibration-node.vue        |  9 +--
 .../hmi-client/src/temp/TA2Playground.vue     | 66 -------------------
 .../client/hmi-client/src/types/workflow.ts   |  7 --
 .../src/workflow/tera-simulation-workflow.vue |  3 +-
 4 files changed, 6 insertions(+), 79 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue b/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue
index 75d95945e4..56751e8124 100644
--- a/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue
@@ -1,6 +1,6 @@
 <template>
 	<tera-workflow-node :node="node">
-		<template #body v-if="viewState === VIEWOPTIONS.ONNODE">
+		<template #body>
 			<Button @click="startCalibration">Start Calibration Job</Button>
 			<form>
 				<label for="calibrationStatus">
@@ -20,20 +20,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import Button from 'primevue/button';
 import { makeCalibrateJob, getRunStatus, getRunResult } from '@/services/models/simulation-service';
 import { CalibrationParams } from '@/types/Types';
 import { calibrationParamExample } from '@/temp/calibrationExample';
-import { WorkflowNode, VIEWOPTIONS } from '@/types/workflow';
+import { WorkflowNode } from '@/types/workflow';
 import TeraWorkflowNode from './tera-workflow-node.vue';
 
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = defineProps<{
 	node: WorkflowNode;
 }>();
 
 const runId = ref('');
-const viewState = computed(() => props.node.viewState);
 
 const startCalibration = async () => {
 	// Make calibration job.
diff --git a/packages/client/hmi-client/src/temp/TA2Playground.vue b/packages/client/hmi-client/src/temp/TA2Playground.vue
index 520e4c0c75..d7a19c455e 100644
--- a/packages/client/hmi-client/src/temp/TA2Playground.vue
+++ b/packages/client/hmi-client/src/temp/TA2Playground.vue
@@ -14,8 +14,6 @@ import { defineComponent, ref } from 'vue';
 import { fetchStratificationResult } from '@/services/models/stratification-service';
 import { runDagreLayout, D3SelectionINode, D3SelectionIEdge } from '@/services/graph';
 import API from '@/api/api';
-import { CalibrationParams } from '@/types/Types';
-import { makeCalibrateJob } from '@/services/models/simulation-service';
 
 enum NodeType {
 	Species = 'S',
@@ -765,69 +763,6 @@ export default defineComponent({
 			resultGraph.height = 500;
 			await renderer?.setData(resultGraph);
 			await renderer?.render();
-		},
-		async testCalibration() {
-			console.log('Testing Calibration:');
-			let calibrationParam: CalibrationParams = {
-				petri: JSON.stringify({
-					T: [{ tname: 'exp' }, { tname: 'conv' }, { tname: 'rec' }, { tname: 'death' }],
-					S: [{ sname: 'S' }, { sname: 'E' }, { sname: 'I' }, { sname: 'R' }, { sname: 'D' }],
-					I: [
-						{ it: 1, is: 1 },
-						{ it: 1, is: 3 },
-						{ it: 2, is: 2 },
-						{ it: 3, is: 3 },
-						{ it: 4, is: 3 }
-					],
-					O: [
-						{ ot: 1, os: 2 },
-						{ ot: 1, os: 3 },
-						{ ot: 2, os: 3 },
-						{ ot: 3, os: 4 },
-						{ ot: 4, os: 5 }
-					]
-				}),
-				initials: {
-					S: 0.49457800495224524,
-					E: 0.26745259325403603,
-					I: 0.4497387877393193,
-					R: 0.32807705995998604,
-					D: 0.8545934885162726
-				},
-				t: [0.0, 1.0, 2.0, 3.0, 4.0, 5.0],
-				data: {
-					S: [
-						0.8457800495224524, 0.7989147588862952, 0.7717574792075946, 0.7555359186659574,
-						0.7456920016554676, 0.7396688112881398
-					],
-					E: [
-						0.21745259325403604, 0.1404833532397162, 0.088632010007611, 0.05529630617740498,
-						0.03431001255438966, 0.021230743198302895
-					],
-					I: [
-						0.4497387877393193, 0.27034535589195036, 0.1653910436709313, 0.10194987107919627,
-						0.06301885280976183, 0.03898091182580745
-					],
-					R: [
-						0.8545934885162726, 0.575704439041781, 0.7259355031548465, 0.8182142842907686,
-						0.8751839322495475, 0.9104140088945406
-					],
-					D: [
-						0.3545934885162726, 0.41019407193232343, 0.44392594295108295, 0.4646455987787392,
-						0.47743717972289984, 0.48534750378527575
-					]
-				},
-				params: {
-					exp: 0.16207166221196045,
-					conv: 0.7009195813964052,
-					rec: 0.7040317196117394,
-					death: 0.15807853921067516
-				}
-			};
-			console.log('Calibration Params setup done');
-			const results = await makeCalibrateJob(calibrationParam);
-			console.log('Done');
-			console.log(results);
 		}
 	}
 });
@@ -835,7 +770,6 @@ export default defineComponent({
 <template>
 	<section class="playground">
 		<p>A playground for testing TA2 API integrations.</p>
-		<button type="button" @click="testCalibration">Test Calibration</button>
 		<button type="button" @click="addPlace">Add place</button>
 		<button type="button" @click="addTransition">Add transition</button>
 		&nbsp;
diff --git a/packages/client/hmi-client/src/types/workflow.ts b/packages/client/hmi-client/src/types/workflow.ts
index f52d00b918..bf9e881dd7 100644
--- a/packages/client/hmi-client/src/types/workflow.ts
+++ b/packages/client/hmi-client/src/types/workflow.ts
@@ -6,12 +6,6 @@ export enum WorkflowStatus {
 	ERROR = 'error'
 }
 
-export enum VIEWOPTIONS {
-	ONNODE = 'onNode',
-	PREVIEW = 'preview',
-	FULLPAGE = 'fullPage'
-}
-
 // Defines the type of data an operation can consume and output
 export interface OperationData {
 	type: string;
@@ -54,7 +48,6 @@ export interface WorkflowNode {
 	y: number;
 	width: number;
 	height: number;
-	viewState: VIEWOPTIONS;
 	inputs: WorkflowPort[];
 	outputs: WorkflowPort[];
 
diff --git a/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue b/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue
index c4911425cb..65fd12aa2b 100644
--- a/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue
+++ b/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue
@@ -15,7 +15,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import InfiniteCanvas from '@/components/widgets/tera-infinite-canvas.vue';
-import { Operation, WorkflowNode, WorkflowStatus, VIEWOPTIONS } from '@/types/workflow';
+import { Operation, WorkflowNode, WorkflowStatus } from '@/types/workflow';
 import ContextMenu from 'primevue/contextmenu';
 import TeraWorkflowNode from '@/components/workflow/tera-workflow-node.vue';
 import teraCalibrationNode from '@/components/workflow/tera-calibration-node.vue';
@@ -51,7 +51,6 @@ function insertNode(operation: Operation) {
 		y: newNodePosition.value.y,
 		width: 100,
 		height: 100,
-		viewState: VIEWOPTIONS.ONNODE,
 		inputs: operation.inputs.map((o, i) => ({ id: i.toString(), ...o })),
 		outputs: operation.outputs.map((o, i) => ({ id: i.toString(), ...o })),
 		statusCode: WorkflowStatus.INVALID

From da2ab06dc109834a07498d868a5011b08556032b Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Fri, 28 Apr 2023 16:06:46 -0400
Subject: [PATCH 08/10] getting lint to shut up

---
 .../src/components/workflow/tera-calibration-node.vue      | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue b/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue
index 56751e8124..1f3cc6a43e 100644
--- a/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue
@@ -1,5 +1,5 @@
 <template>
-	<tera-workflow-node :node="node">
+	<tera-workflow-node :node="thisNode">
 		<template #body>
 			<Button @click="startCalibration">Start Calibration Job</Button>
 			<form>
@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import Button from 'primevue/button';
 import { makeCalibrateJob, getRunStatus, getRunResult } from '@/services/models/simulation-service';
 import { CalibrationParams } from '@/types/Types';
@@ -28,13 +28,12 @@ import { calibrationParamExample } from '@/temp/calibrationExample';
 import { WorkflowNode } from '@/types/workflow';
 import TeraWorkflowNode from './tera-workflow-node.vue';
 
-// @ts-ignore
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = defineProps<{
 	node: WorkflowNode;
 }>();
 
 const runId = ref('');
+const thisNode = computed(() => props.node);
 
 const startCalibration = async () => {
 	// Make calibration job.

From 7b09bf67b765694d6a95a3c9bfc72fa114058e37 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Fri, 28 Apr 2023 16:41:31 -0400
Subject: [PATCH 09/10] adding back testOperation to contextMenuItems

---
 .../src/workflow/tera-simulation-workflow.vue | 38 +++++++++++--------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue b/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue
index 65fd12aa2b..cadd2ff895 100644
--- a/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue
+++ b/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue
@@ -26,21 +26,21 @@ const contextMenu = ref();
 const newNodePosition = ref<{ x: number; y: number }>({ x: 0, y: 0 });
 let canvasTransform = { x: 0, y: 0, k: 1 };
 
-// const testOperation: Operation = {
-// 	name: 'Test operation',
-// 	description: 'A test operation',
-// 	inputs: [
-// 		{ type: 'number', label: 'Input one' },
-// 		{ type: 'number', label: 'Input two' },
-// 		{ type: 'number', label: 'Input three' }
-// 	],
-// 	outputs: [
-// 		{ type: 'number', label: 'Output one' },
-// 		{ type: 'number', label: 'Output two' }
-// 	],
-// 	action: () => {},
-// 	isRunnable: true
-// };
+const testOperation: Operation = {
+	name: 'testOpteration',
+	description: 'A test operation',
+	inputs: [
+		{ type: 'number', label: 'Input one' },
+		{ type: 'number', label: 'Input two' },
+		{ type: 'number', label: 'Input three' }
+	],
+	outputs: [
+		{ type: 'number', label: 'Output one' },
+		{ type: 'number', label: 'Output two' }
+	],
+	action: () => {},
+	isRunnable: true
+};
 
 function insertNode(operation: Operation) {
 	const newNode: WorkflowNode = {
@@ -60,7 +60,13 @@ function insertNode(operation: Operation) {
 
 const contextMenuItems = ref([
 	{
-		label: 'New operation',
+		label: 'New Test Operation',
+		command: () => {
+			insertNode(testOperation);
+		}
+	},
+	{
+		label: 'New Calibration',
 		command: () => {
 			insertNode(CalibrationOperation);
 		}

From c5d3582d87dd6cab6d4a262834a573799a5fd595 Mon Sep 17 00:00:00 2001
From: mwdchang <mwdchang@gmail.com>
Date: Mon, 1 May 2023 11:15:28 -0400
Subject: [PATCH 10/10] canvas tweaks, remove extra nesting

---
 .../widgets/tera-infinite-canvas.vue          | 23 ++++++++---
 .../workflow/tera-calibration-node.vue        | 38 ++++++++-----------
 .../src/workflow/tera-simulation-workflow.vue | 11 +++++-
 3 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue b/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
index 8205c9e4d9..4ce2964794 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-infinite-canvas.vue
@@ -1,12 +1,17 @@
 <template>
 	<main ref="canvasRef">
-		<svg class="background-layer" ref="backgroundLayerRef" :width="width" :height="height">
+		<svg
+			class="canvas-layer background-layer"
+			ref="backgroundLayerRef"
+			:width="width"
+			:height="height"
+		>
 			<slot name="background" />
 		</svg>
-		<div class="data-layer" ref="dataLayerRef">
+		<div class="canvas-layer data-layer" ref="dataLayerRef">
 			<slot name="data" />
 		</div>
-		<div>
+		<div class="canvas-layer">
 			<slot name="foreground" />
 		</div>
 	</main>
@@ -106,6 +111,13 @@ onMounted(() => {
 	// Zoom config is applied and event handler
 	const zoom = d3
 		.zoom()
+		.filter((evt: any) => {
+			const classStr = d3.select(evt.target).attr('class');
+			if (classStr.includes('canvas-layer') || evt.type === 'wheel') {
+				return true;
+			}
+			return false;
+		})
 		.scaleExtent(props.scaleExtent)
 		.on('zoom', (e) => handleZoom(e, container))
 		.on('end', handleZoomEnd);
@@ -129,8 +141,6 @@ onMounted(() => {
 		// Default position - triggers handleZoom which in turn sets currentTransform
 		svg.transition().call(zoom.transform as any, d3.zoomIdentity);
 	}
-
-	container.append('circle').attr('cx', 400).attr('cy', 300).attr('r', 20).attr('fill', 'red');
 });
 </script>
 
@@ -153,6 +163,9 @@ main > * {
 .background-layer:deep(.tick line) {
 	color: var(--surface-border);
 }
+.background-layer:deep(.tick text) {
+	color: var(--surface-border);
+}
 
 svg:active {
 	cursor: grabbing;
diff --git a/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue b/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue
index 1f3cc6a43e..cb8669ee02 100644
--- a/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/tera-calibration-node.vue
@@ -1,39 +1,33 @@
 <template>
-	<tera-workflow-node :node="thisNode">
-		<template #body>
-			<Button @click="startCalibration">Start Calibration Job</Button>
-			<form>
-				<label for="calibrationStatus">
-					<input v-model="runId" type="text" placeholder="Run ID" />
-				</label>
-				<Button @click="getCalibrationStatus"> Get Run Status </Button>
-			</form>
-
-			<form>
-				<label for="calibrationResult">
-					<input v-model="runId" type="text" placeholder="Run ID" />
-				</label>
-				<Button @click="getCalibrationResults"> Get Run Results </Button>
-			</form>
-		</template>
-	</tera-workflow-node>
+	<Button @click="startCalibration">Start Calibration Job</Button>
+	<form>
+		<label for="calibrationStatus">
+			<input v-model="runId" type="text" placeholder="Run ID" />
+		</label>
+		<Button @click="getCalibrationStatus"> Get Run Status </Button>
+	</form>
+
+	<form>
+		<label for="calibrationResult">
+			<input v-model="runId" type="text" placeholder="Run ID" />
+		</label>
+		<Button @click="getCalibrationResults"> Get Run Results </Button>
+	</form>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import Button from 'primevue/button';
 import { makeCalibrateJob, getRunStatus, getRunResult } from '@/services/models/simulation-service';
 import { CalibrationParams } from '@/types/Types';
 import { calibrationParamExample } from '@/temp/calibrationExample';
 import { WorkflowNode } from '@/types/workflow';
-import TeraWorkflowNode from './tera-workflow-node.vue';
 
-const props = defineProps<{
+defineProps<{
 	node: WorkflowNode;
 }>();
 
 const runId = ref('');
-const thisNode = computed(() => props.node);
 
 const startCalibration = async () => {
 	// Make calibration job.
diff --git a/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue b/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue
index cadd2ff895..99303491a2 100644
--- a/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue
+++ b/packages/client/hmi-client/src/workflow/tera-simulation-workflow.vue
@@ -5,8 +5,15 @@
 			<ContextMenu ref="contextMenu" :model="contextMenuItems" />
 
 			<ul v-for="(node, index) in nodes" :key="index">
-				<tera-workflow-node :node="node" v-if="node.operationType === 'testOpteration'" />
-				<tera-calibration-node :node="node" v-if="node.operationType === 'CalibrationOperation'" />
+				<tera-workflow-node :node="node">
+					<template #body>
+						<tera-calibration-node
+							:node="node"
+							v-if="node.operationType === 'CalibrationOperation'"
+						/>
+						<div v-else>Test node</div>
+					</template>
+				</tera-workflow-node>
 			</ul>
 		</template>
 	</infinite-canvas>