From 900777deedb540efba26839ae703249940a1335c Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Mon, 17 Jun 2024 10:32:35 -0400
Subject: [PATCH 01/20] START moving constraints over

---
 .../optimize-ciemss-operation.ts              |  33 ++++--
 .../optimize-ciemss/tera-optimize-ciemss.vue  | 108 +++++++-----------
 .../tera-optimize-constraint-group-form.vue   |  79 +++++++++++++
 3 files changed, 144 insertions(+), 76 deletions(-)
 create mode 100644 packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/optimize-ciemss-operation.ts b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/optimize-ciemss-operation.ts
index 314bf05118..e7b0680193 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/optimize-ciemss-operation.ts
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/optimize-ciemss-operation.ts
@@ -27,6 +27,15 @@ export interface InterventionPolicyGroup {
 	paramValue: number;
 }
 
+export interface ConstraintGroup {
+	name: string; // Title of the group
+	targetVariable: string;
+	qoiMethod: ContextMethods;
+	riskTolerance: number;
+	threshold: number;
+	isMinimized: boolean;
+}
+
 export interface OptimizeCiemssOperationState extends BaseState {
 	// Settings
 	endTime: number;
@@ -37,12 +46,9 @@ export interface OptimizeCiemssOperationState extends BaseState {
 	// Intervention policies
 	interventionType: InterventionTypes;
 	interventionPolicyGroups: InterventionPolicyGroup[];
-	// Constraints
-	qoiMethod: ContextMethods;
-	targetVariables: string[];
-	riskTolerance: number;
-	threshold: number;
-	isMinimized: boolean;
+	// Constraints:
+	constraintGroups: ConstraintGroup[];
+	// Charts + Outputs:
 	chartConfigs: string[][];
 	inProgressOptimizeId: string;
 	inProgressForecastId: string;
@@ -64,6 +70,15 @@ export const blankInterventionPolicyGroup: InterventionPolicyGroup = {
 	paramValue: 0
 };
 
+export const defaultConstraintGroup: ConstraintGroup = {
+	name: 'Constraint',
+	qoiMethod: ContextMethods.max,
+	targetVariable: '',
+	riskTolerance: 5,
+	threshold: 1,
+	isMinimized: true
+};
+
 export const OptimizeCiemssOperation: Operation = {
 	name: WorkflowOperationTypes.OPTIMIZE_CIEMSS,
 	displayName: 'Optimize with PyCIEMSS',
@@ -85,11 +100,7 @@ export const OptimizeCiemssOperation: Operation = {
 			maxfeval: 25,
 			interventionType: InterventionTypes.paramValue,
 			interventionPolicyGroups: [blankInterventionPolicyGroup],
-			qoiMethod: ContextMethods.max,
-			targetVariables: [],
-			riskTolerance: 5,
-			threshold: 1,
-			isMinimized: true,
+			constraintGroups: [defaultConstraintGroup],
 			chartConfigs: [],
 			inProgressOptimizeId: '',
 			inProgressForecastId: '',
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
index 8fd510e112..6ed5ce5a32 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
@@ -12,6 +12,22 @@
 					<Button :disabled="isRunDisabled" label="Run" icon="pi pi-play" @click="runOptimize" />
 					<tera-pyciemss-cancel-button class="mr-auto" :simulation-run-id="cancelRunId" />
 				</template>
+				<div class="form-section">
+					<h5>Constraints</h5>
+					<tera-optimize-constraint-group-form
+						v-for="(cfg, index) in node.state.constraintGroups"
+						:key="selectedOutputId + ':' + index"
+						:index="index"
+						:constraint="cfg"
+						:model-state-and-obs-options="modelStateAndObsOptions"
+					/>
+					<Button
+						icon="pi pi-plus"
+						class="p-button-sm p-button-text"
+						label="Add more constraints"
+						@click="addConstraintGroupForm"
+					/>
+				</div>
 				<div class="form-section">
 					<h5>Settings</h5>
 					<div class="input-row">
@@ -53,20 +69,6 @@
 								placeholder="Select"
 							/>
 						</div>
-						<div class="label-and-input">
-							<!-- TODO: This could likely be better explained to user -->
-							<label> Minimized </label>
-							<Dropdown
-								class="toolbar-button"
-								v-model="knobs.isMinimized"
-								optionLabel="label"
-								optionValue="value"
-								:options="[
-									{ label: 'true', value: true },
-									{ label: 'false', value: false }
-								]"
-							/>
-						</div>
 						<div class="label-and-input">
 							<label>Maxiter</label>
 							<InputNumber class="p-inputtext-sm" v-model="knobs.maxiter" inputId="integeronly" />
@@ -125,45 +127,11 @@
 							<MultiSelect
 								class="p-inputtext-sm"
 								:options="modelStateAndObsOptions"
-								v-model="knobs.targetVariables"
+								v-model="knobs.targetVariable"
 								placeholder="Select"
 								filter
 							/>
 						</div>
-						<div class="label-and-input">
-							<label>QoI Method</label>
-							<Dropdown
-								class="p-inputtext-sm"
-								:options="[
-									{ label: 'Max', value: ContextMethods.max },
-									{ label: 'Day average', value: ContextMethods.day_average }
-								]"
-								option-label="label"
-								option-value="value"
-								v-model="knobs.qoiMethod"
-							/>
-						</div>
-					</div>
-					<div class="constraint-row">
-						<div class="label-and-input">
-							<label>Acceptable risk of failure</label>
-							<div>
-								<InputNumber
-									class="p-inputtext-sm"
-									inputId="integeronly"
-									v-model="knobs.riskTolerance"
-								/>
-							</div>
-						</div>
-						<div class="label-and-input">
-							<label>Threshold</label>
-							<InputNumber
-								class="p-inputtext-sm"
-								v-model="knobs.threshold"
-								:min-fraction-digits="1"
-								:max-fraction-digits="10"
-							/>
-						</div>
 					</div>
 				</div>
 			</tera-drilldown-section>
@@ -241,9 +209,9 @@
 							:risk-results="riskResults[knobs.forecastRunId]"
 							:chartConfig="{
 								selectedRun: knobs.forecastRunId,
-								selectedVariable: knobs.targetVariables
+								selectedVariable: [knobs.targetVariable]
 							}"
-							:target-variable="knobs.targetVariables[0]"
+							:target-variable="knobs.targetVariable[0]"
 							:size="chartSize"
 							:threshold="knobs.threshold"
 						/>
@@ -337,13 +305,15 @@ import { WorkflowNode } from '@/types/workflow';
 import TeraNotebookError from '@/components/drilldown/tera-notebook-error.vue';
 import { useProjects } from '@/composables/project';
 import { isSaveDatasetDisabled } from '@/components/dataset/utils';
+import teraOptimizeConstraintGroupForm from './tera-optimize-constraint-group-form.vue';
 import {
 	OptimizeCiemssOperationState,
 	InterventionTypes,
 	ContextMethods,
 	InterventionPolicyGroup,
 	blankInterventionPolicyGroup,
-	getOptimizedInterventions
+	getOptimizedInterventions,
+	defaultConstraintGroup
 } from './optimize-ciemss-operation';
 
 const props = defineProps<{
@@ -369,7 +339,7 @@ interface BasicKnobs {
 	maxiter: number;
 	maxfeval: number;
 	qoiMethod: ContextMethods;
-	targetVariables: string[];
+	targetVariable: string;
 	riskTolerance: number;
 	threshold: number;
 	isMinimized: boolean;
@@ -384,11 +354,11 @@ const knobs = ref<BasicKnobs>({
 	solverMethod: props.node.state.solverMethod ?? '', // Currently not used.
 	maxiter: props.node.state.maxiter ?? 5,
 	maxfeval: props.node.state.maxfeval ?? 25,
-	qoiMethod: props.node.state.qoiMethod ?? ContextMethods.max,
-	targetVariables: props.node.state.targetVariables ?? [],
-	riskTolerance: props.node.state.riskTolerance ?? 0,
-	threshold: props.node.state.threshold ?? 0, // currently not used.
-	isMinimized: props.node.state.isMinimized ?? true,
+	qoiMethod: props.node.state.constraintGroups[0].qoiMethod ?? ContextMethods.max,
+	targetVariable: props.node.state.constraintGroups[0].targetVariable ?? [],
+	riskTolerance: props.node.state.constraintGroups[0].riskTolerance ?? 0,
+	threshold: props.node.state.constraintGroups[0].threshold ?? 0, // currently not used.
+	isMinimized: props.node.state.constraintGroups[0].isMinimized ?? true,
 	forecastRunId: props.node.state.forecastRunId ?? '',
 	optimizationRunId: props.node.state.optimizationRunId ?? '',
 	interventionType: props.node.state.interventionType ?? ''
@@ -453,7 +423,7 @@ const outputs = computed(() => {
 
 const isRunDisabled = computed(() => {
 	if (
-		knobs.value.targetVariables.length === 0 ||
+		knobs.value.targetVariable.length === 0 ||
 		props.node.state.interventionPolicyGroups.length === 0
 	)
 		return true;
@@ -505,6 +475,14 @@ const addInterventionPolicyGroupForm = () => {
 	emit('update-state', state);
 };
 
+const addConstraintGroupForm = () => {
+	const state = _.cloneDeep(props.node.state);
+	if (!state.constraintGroups) return;
+
+	state.constraintGroups.push(defaultConstraintGroup);
+	emit('update-state', state);
+};
+
 const toggleAdditonalOptions = () => {
 	showAdditionalOptions.value = !showAdditionalOptions.value;
 };
@@ -566,7 +544,7 @@ const runOptimize = async () => {
 		},
 		policyInterventions: optimizeInterventions,
 		qoi: {
-			contexts: knobs.value.targetVariables,
+			contexts: [knobs.value.targetVariable],
 			method: knobs.value.qoiMethod
 		},
 		riskBound: knobs.value.threshold,
@@ -650,14 +628,14 @@ watch(
 		state.solverMethod = knobs.value.solverMethod;
 		state.maxiter = knobs.value.maxiter;
 		state.maxfeval = knobs.value.maxfeval;
-		state.targetVariables = knobs.value.targetVariables;
-		state.riskTolerance = knobs.value.riskTolerance;
-		state.threshold = knobs.value.threshold;
+		state.constraintGroups[0].targetVariable = knobs.value.targetVariable[0];
+		state.constraintGroups[0].riskTolerance = knobs.value.riskTolerance;
+		state.constraintGroups[0].threshold = knobs.value.threshold;
 		state.forecastRunId = knobs.value.forecastRunId;
 		state.optimizationRunId = knobs.value.optimizationRunId;
 		state.interventionType = knobs.value.interventionType;
-		state.isMinimized = knobs.value.isMinimized;
-		state.qoiMethod = knobs.value.qoiMethod;
+		state.constraintGroups[0].isMinimized = knobs.value.isMinimized;
+		state.constraintGroups[0].qoiMethod = knobs.value.qoiMethod;
 		emit('update-state', state);
 	},
 	{ deep: true }
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
new file mode 100644
index 0000000000..187272f2c2
--- /dev/null
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
@@ -0,0 +1,79 @@
+<template>
+	<div class="container">
+		<p>The average value of</p>
+		<Dropdown
+			class="p-inputtext-sm"
+			:options="modelStateAndObsOptions"
+			v-model="constraint.targetVariable"
+			placeholder="Select"
+		/>
+		<p>at</p>
+		<Dropdown
+			class="p-inputtext-sm"
+			:options="[
+				{ label: 'Max', value: ContextMethods.max },
+				{ label: 'Day average', value: ContextMethods.day_average }
+			]"
+			option-label="label"
+			option-value="value"
+			v-model="constraint.qoiMethod"
+		/>
+		<p>over the worst</p>
+		<InputNumber class="p-inputtext-sm" inputId="integeronly" v-model="constraint.riskTolerance" />
+		<p>% of simulated outcomes</p>
+		<Dropdown
+			class="toolbar-button"
+			v-model="constraint.isMinimized"
+			optionLabel="label"
+			optionValue="value"
+			:options="[
+				{ label: 'less than', value: true },
+				{ label: 'greater than', value: false }
+			]"
+		/>
+		<p>a threshold of</p>
+		<InputNumber
+			class="p-inputtext-sm"
+			v-model="constraint.threshold"
+			:min-fraction-digits="1"
+			:max-fraction-digits="10"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import _ from 'lodash';
+import { ref } from 'vue';
+import Dropdown from 'primevue/dropdown';
+import InputNumber from 'primevue/inputnumber';
+import { ConstraintGroup, ContextMethods } from './optimize-ciemss-operation';
+
+const props = defineProps<{
+	constraint: ConstraintGroup;
+	modelStateAndObsOptions: string[];
+}>();
+
+// const emit = defineEmits(['update-self', 'delete-self']);
+
+const constraint = ref<ConstraintGroup>(_.cloneDeep(props.constraint));
+</script>
+
+<style scoped>
+.container {
+	border: 1px solid var(--surface-border);
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.5rem;
+
+	& > *:first-child {
+		flex: 2;
+	}
+
+	& > *:not(:first-child) {
+		flex: 1;
+	}
+}
+</style>

From 2c98e6f02ef8d5883a6b5fe3b76bbc56736552d6 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Mon, 17 Jun 2024 11:20:11 -0400
Subject: [PATCH 02/20] name, update + delete, info circle

---
 .../optimize-ciemss/tera-optimize-ciemss.vue  | 34 +++++++++++++-
 .../tera-optimize-constraint-group-form.vue   | 46 ++++++++++++++++---
 2 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
index 6ed5ce5a32..c0aec9576e 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
@@ -13,13 +13,16 @@
 					<tera-pyciemss-cancel-button class="mr-auto" :simulation-run-id="cancelRunId" />
 				</template>
 				<div class="form-section">
-					<h5>Constraints</h5>
+					<span> Constraints <i v-tooltip="constraintToolTip" class="pi pi-info-circle" /> </span>
+
 					<tera-optimize-constraint-group-form
 						v-for="(cfg, index) in node.state.constraintGroups"
 						:key="selectedOutputId + ':' + index"
 						:index="index"
 						:constraint="cfg"
 						:model-state-and-obs-options="modelStateAndObsOptions"
+						@update-self="(config) => updateConstraintGroupForm(index, config)"
+						@delete-self="() => deleteConstraintGroupForm(index)"
 					/>
 					<Button
 						icon="pi pi-plus"
@@ -313,7 +316,8 @@ import {
 	InterventionPolicyGroup,
 	blankInterventionPolicyGroup,
 	getOptimizedInterventions,
-	defaultConstraintGroup
+	defaultConstraintGroup,
+	ConstraintGroup
 } from './optimize-ciemss-operation';
 
 const props = defineProps<{
@@ -364,6 +368,8 @@ const knobs = ref<BasicKnobs>({
 	interventionType: props.node.state.interventionType ?? ''
 });
 
+const constraintToolTip = 'TODO';
+
 const modelConfigName = ref<string>('');
 const modelConfigDesc = ref<string>('');
 const showSaveDataDialog = ref<boolean>(false);
@@ -483,6 +489,22 @@ const addConstraintGroupForm = () => {
 	emit('update-state', state);
 };
 
+const deleteConstraintGroupForm = (index: number) => {
+	const state = _.cloneDeep(props.node.state);
+	if (!state.constraintGroups) return;
+
+	state.constraintGroups.splice(index, 1);
+	emit('update-state', state);
+};
+
+const updateConstraintGroupForm = (index: number, config: ConstraintGroup) => {
+	const state = _.cloneDeep(props.node.state);
+	if (!state.constraintGroups) return;
+
+	state.constraintGroups[index] = config;
+	emit('update-state', state);
+};
+
 const toggleAdditonalOptions = () => {
 	showAdditionalOptions.value = !showAdditionalOptions.value;
 };
@@ -693,6 +715,14 @@ watch(
 }
 
 .form-section {
+	gap: var(--gap-1);
+	background-color: var(--surface-50);
+	flex-grow: 1;
+	padding: var(--gap);
+	margin: 0 var(--gap) var(--gap) var(--gap);
+	border-radius: var(--border-radius-medium);
+	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25) inset;
+	overflow: auto;
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
index 187272f2c2..0d4dc3fa67 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
@@ -1,11 +1,29 @@
 <template>
 	<div class="container">
+		<div>
+			<InputText
+				v-if="isEditing"
+				v-model="config.name"
+				placeholder="Policy bounds"
+				@focusout="emit('update-self', config)"
+			/>
+			<h6 v-else>{{ props.constraint.name }}</h6>
+			<i
+				:class="{ 'pi pi-check i': isEditing, 'pi pi-pencil i': !isEditing }"
+				:style="'cursor: pointer'"
+				@click="onEdit"
+			/>
+		</div>
+		<div class="trash-button-align">
+			<i class="trash-button pi pi-trash" @click="emit('delete-self')" />
+		</div>
 		<p>The average value of</p>
 		<Dropdown
 			class="p-inputtext-sm"
 			:options="modelStateAndObsOptions"
-			v-model="constraint.targetVariable"
+			v-model="config.targetVariable"
 			placeholder="Select"
+			@update:model-value="emit('update-self', config)"
 		/>
 		<p>at</p>
 		<Dropdown
@@ -16,27 +34,35 @@
 			]"
 			option-label="label"
 			option-value="value"
-			v-model="constraint.qoiMethod"
+			v-model="config.qoiMethod"
+			@update:model-value="emit('update-self', config)"
 		/>
 		<p>over the worst</p>
-		<InputNumber class="p-inputtext-sm" inputId="integeronly" v-model="constraint.riskTolerance" />
+		<InputNumber
+			class="p-inputtext-sm"
+			inputId="integeronly"
+			v-model="config.riskTolerance"
+			@focusout="emit('update-self', config)"
+		/>
 		<p>% of simulated outcomes</p>
 		<Dropdown
 			class="toolbar-button"
-			v-model="constraint.isMinimized"
+			v-model="config.isMinimized"
 			optionLabel="label"
 			optionValue="value"
 			:options="[
 				{ label: 'less than', value: true },
 				{ label: 'greater than', value: false }
 			]"
+			@update:model-value="emit('update-self', config)"
 		/>
 		<p>a threshold of</p>
 		<InputNumber
 			class="p-inputtext-sm"
-			v-model="constraint.threshold"
+			v-model="config.threshold"
 			:min-fraction-digits="1"
 			:max-fraction-digits="10"
+			@focusout="emit('update-self', config)"
 		/>
 	</div>
 </template>
@@ -53,9 +79,15 @@ const props = defineProps<{
 	modelStateAndObsOptions: string[];
 }>();
 
-// const emit = defineEmits(['update-self', 'delete-self']);
+const emit = defineEmits(['update-self', 'delete-self']);
+
+const config = ref<ConstraintGroup>(_.cloneDeep(props.constraint));
+
+const isEditing = ref<boolean>(false);
 
-const constraint = ref<ConstraintGroup>(_.cloneDeep(props.constraint));
+const onEdit = () => {
+	isEditing.value = !isEditing.value;
+};
 </script>
 
 <style scoped>

From 2ba1c073dd4803785d777163ce109f7d97e843ee Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Mon, 17 Jun 2024 11:24:04 -0400
Subject: [PATCH 03/20] add isActive to the optimize constraint grp

---
 .../workflow/ops/optimize-ciemss/optimize-ciemss-operation.ts | 4 +++-
 .../optimize-ciemss/tera-optimize-constraint-group-form.vue   | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/optimize-ciemss-operation.ts b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/optimize-ciemss-operation.ts
index e7b0680193..a968d0934f 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/optimize-ciemss-operation.ts
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/optimize-ciemss-operation.ts
@@ -34,6 +34,7 @@ export interface ConstraintGroup {
 	riskTolerance: number;
 	threshold: number;
 	isMinimized: boolean;
+	isActive: boolean; // Denotes whether or not this should be used when user hits run.
 }
 
 export interface OptimizeCiemssOperationState extends BaseState {
@@ -76,7 +77,8 @@ export const defaultConstraintGroup: ConstraintGroup = {
 	targetVariable: '',
 	riskTolerance: 5,
 	threshold: 1,
-	isMinimized: true
+	isMinimized: true,
+	isActive: true
 };
 
 export const OptimizeCiemssOperation: Operation = {
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
index 0d4dc3fa67..abb940ac36 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
@@ -14,6 +14,10 @@
 				@click="onEdit"
 			/>
 		</div>
+		<div>
+			<label for="active">Active</label>
+			<InputSwitch v-model="config.isActive" @change="emit('update-self', config)" />
+		</div>
 		<div class="trash-button-align">
 			<i class="trash-button pi pi-trash" @click="emit('delete-self')" />
 		</div>

From b61d35d7a4598f585c368dc913fe1800b7941f70 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Tue, 18 Jun 2024 11:36:53 -0400
Subject: [PATCH 04/20] minor css

---
 .../optimize-ciemss/tera-optimize-ciemss.vue  |   1 -
 .../tera-optimize-constraint-group-form.vue   | 173 +++++++++++-------
 2 files changed, 103 insertions(+), 71 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
index eadd174f14..49d3354c56 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
@@ -14,7 +14,6 @@
 				</template>
 				<div class="form-section">
 					<span> Constraints <i v-tooltip="constraintToolTip" class="pi pi-info-circle" /> </span>
-
 					<tera-optimize-constraint-group-form
 						v-for="(cfg, index) in node.state.constraintGroups"
 						:key="selectedOutputId + ':' + index"
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
index abb940ac36..c3a5792f34 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
@@ -1,73 +1,73 @@
 <template>
 	<div class="container">
-		<div>
-			<InputText
-				v-if="isEditing"
-				v-model="config.name"
-				placeholder="Policy bounds"
-				@focusout="emit('update-self', config)"
-			/>
-			<h6 v-else>{{ props.constraint.name }}</h6>
-			<i
-				:class="{ 'pi pi-check i': isEditing, 'pi pi-pencil i': !isEditing }"
-				:style="'cursor: pointer'"
-				@click="onEdit"
-			/>
-		</div>
-		<div>
+		<div class="form-header">
+			<div>
+				<InputText
+					v-if="isEditing"
+					v-model="config.name"
+					placeholder="Policy bounds"
+					@focusout="emit('update-self', config)"
+				/>
+				<h6 v-else>{{ props.constraint.name }}</h6>
+				<i
+					:class="{ 'pi pi-check i': isEditing, 'pi pi-pencil i': !isEditing }"
+					:style="'cursor: pointer'"
+					@click="onEdit"
+				/>
+			</div>
 			<label for="active">Active</label>
 			<InputSwitch v-model="config.isActive" @change="emit('update-self', config)" />
-		</div>
-		<div class="trash-button-align">
 			<i class="trash-button pi pi-trash" @click="emit('delete-self')" />
 		</div>
-		<p>The average value of</p>
-		<Dropdown
-			class="p-inputtext-sm"
-			:options="modelStateAndObsOptions"
-			v-model="config.targetVariable"
-			placeholder="Select"
-			@update:model-value="emit('update-self', config)"
-		/>
-		<p>at</p>
-		<Dropdown
-			class="p-inputtext-sm"
-			:options="[
-				{ label: 'Max', value: ContextMethods.max },
-				{ label: 'Day average', value: ContextMethods.day_average }
-			]"
-			option-label="label"
-			option-value="value"
-			v-model="config.qoiMethod"
-			@update:model-value="emit('update-self', config)"
-		/>
-		<p>over the worst</p>
-		<InputNumber
-			class="p-inputtext-sm"
-			inputId="integeronly"
-			v-model="config.riskTolerance"
-			@focusout="emit('update-self', config)"
-		/>
-		<p>% of simulated outcomes</p>
-		<Dropdown
-			class="toolbar-button"
-			v-model="config.isMinimized"
-			optionLabel="label"
-			optionValue="value"
-			:options="[
-				{ label: 'less than', value: true },
-				{ label: 'greater than', value: false }
-			]"
-			@update:model-value="emit('update-self', config)"
-		/>
-		<p>a threshold of</p>
-		<InputNumber
-			class="p-inputtext-sm"
-			v-model="config.threshold"
-			:min-fraction-digits="1"
-			:max-fraction-digits="10"
-			@focusout="emit('update-self', config)"
-		/>
+		<div class="section-row">
+			<p>The average value of</p>
+			<Dropdown
+				class="p-inputtext-sm"
+				:options="modelStateAndObsOptions"
+				v-model="config.targetVariable"
+				placeholder="Select"
+				@update:model-value="emit('update-self', config)"
+			/>
+			<p>at</p>
+			<Dropdown
+				class="p-inputtext-sm"
+				:options="[
+					{ label: 'Max', value: ContextMethods.max },
+					{ label: 'Day average', value: ContextMethods.day_average }
+				]"
+				option-label="label"
+				option-value="value"
+				v-model="config.qoiMethod"
+				@update:model-value="emit('update-self', config)"
+			/>
+			<p>over the worst</p>
+			<InputNumber
+				class="p-inputtext-sm"
+				inputId="integeronly"
+				v-model="config.riskTolerance"
+				@focusout="emit('update-self', config)"
+			/>
+			<p>% of simulated outcomes</p>
+			<Dropdown
+				class="toolbar-button"
+				v-model="config.isMinimized"
+				optionLabel="label"
+				optionValue="value"
+				:options="[
+					{ label: 'less than', value: true },
+					{ label: 'greater than', value: false }
+				]"
+				@update:model-value="emit('update-self', config)"
+			/>
+			<p>a threshold of</p>
+			<InputNumber
+				class="p-inputtext-sm"
+				v-model="config.threshold"
+				:min-fraction-digits="1"
+				:max-fraction-digits="10"
+				@focusout="emit('update-self', config)"
+			/>
+		</div>
 	</div>
 </template>
 
@@ -76,6 +76,8 @@ import _ from 'lodash';
 import { ref } from 'vue';
 import Dropdown from 'primevue/dropdown';
 import InputNumber from 'primevue/inputnumber';
+import InputText from 'primevue/inputtext';
+import InputSwitch from 'primevue/inputswitch';
 import { ConstraintGroup, ContextMethods } from './optimize-ciemss-operation';
 
 const props = defineProps<{
@@ -96,20 +98,51 @@ const onEdit = () => {
 
 <style scoped>
 .container {
-	border: 1px solid var(--surface-border);
+	width: 100%;
+	display: flex;
+	margin-top: 1rem;
+	padding: 1rem 1rem 1rem 1.5rem;
+	flex-direction: column;
+	justify-content: center;
+	align-items: flex-start;
+	border-radius: 0.375rem;
+	background: #fff;
+	border: 1px solid rgba(0, 0, 0, 0.08);
+	/* Shadow/medium */
+	box-shadow:
+		0px 2px 4px -1px rgba(0, 0, 0, 0.06),
+		0px 4px 6px -1px rgba(0, 0, 0, 0.08);
+}
+
+.form-header {
 	width: 100%;
 	display: flex;
 	flex-direction: row;
-	flex-wrap: wrap;
+	justify-content: space-between;
 	align-items: center;
-	gap: 0.5rem;
+	gap: 1rem;
+	padding-bottom: 0.5rem;
 
 	& > *:first-child {
-		flex: 2;
+		margin-right: auto;
 	}
 
-	& > *:not(:first-child) {
-		flex: 1;
+	& > * {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		gap: 0.5rem;
 	}
 }
+
+.section-row {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	padding: var(--gap-small) 0;
+	align-items: center;
+	gap: 0.5rem;
+	width: 100%;
+}
 </style>

From dd1c790bd9f17abfdeeba8870ca100cf439e7b8f Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Tue, 18 Jun 2024 11:40:14 -0400
Subject: [PATCH 05/20] moving settings to bottom

---
 .../optimize-ciemss/tera-optimize-ciemss.vue  | 86 ++++++++-----------
 1 file changed, 35 insertions(+), 51 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
index 49d3354c56..2b3b15a466 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
@@ -31,7 +31,41 @@
 					/>
 				</div>
 				<div class="form-section">
-					<h5>Settings</h5>
+					<h5>Intervention policy</h5>
+					<div>
+						<label>Intervention Type</label>
+						<Dropdown
+							class="p-inputtext-sm"
+							:options="[
+								{ label: 'parameter value', value: InterventionTypes.paramValue },
+								{ label: 'start time', value: InterventionTypes.startTime }
+							]"
+							option-label="label"
+							option-value="value"
+							v-model="knobs.interventionType"
+							placeholder="Select"
+						/>
+					</div>
+					<tera-intervention-policy-group-form
+						v-for="(cfg, idx) in props.node.state.interventionPolicyGroups"
+						:key="idx"
+						:config="cfg"
+						:intervention-type="props.node.state.interventionType"
+						:parameter-options="modelParameterOptions.map((ele) => ele.id)"
+						@update-self="(config) => updateInterventionPolicyGroupForm(idx, config)"
+						@delete-self="() => deleteInterverntionPolicyGroupForm(idx)"
+					/>
+					<div>
+						<Button
+							icon="pi pi-plus"
+							class="p-button-sm p-button-text"
+							label="Add more interventions"
+							@click="addInterventionPolicyGroupForm"
+						/>
+					</div>
+				</div>
+				<div class="form-section">
+					<h5>Optimization settings</h5>
 					<div class="input-row">
 						<div class="label-and-input">
 							<label>Start time</label>
@@ -87,55 +121,6 @@
 						@click="toggleAdditonalOptions"
 					/>
 				</div>
-				<div class="form-section">
-					<h5>Intervention policy</h5>
-					<div>
-						<label>Intervention Type</label>
-						<Dropdown
-							class="p-inputtext-sm"
-							:options="[
-								{ label: 'parameter value', value: InterventionTypes.paramValue },
-								{ label: 'start time', value: InterventionTypes.startTime }
-							]"
-							option-label="label"
-							option-value="value"
-							v-model="knobs.interventionType"
-							placeholder="Select"
-						/>
-					</div>
-					<tera-intervention-policy-group-form
-						v-for="(cfg, idx) in props.node.state.interventionPolicyGroups"
-						:key="idx"
-						:config="cfg"
-						:intervention-type="props.node.state.interventionType"
-						:parameter-options="modelParameterOptions.map((ele) => ele.id)"
-						@update-self="(config) => updateInterventionPolicyGroupForm(idx, config)"
-						@delete-self="() => deleteInterverntionPolicyGroupForm(idx)"
-					/>
-					<div>
-						<Button
-							icon="pi pi-plus"
-							class="p-button-sm p-button-text"
-							label="Add more interventions"
-							@click="addInterventionPolicyGroupForm"
-						/>
-					</div>
-				</div>
-				<div class="form-section">
-					<h5>Constraint</h5>
-					<div class="constraint-row">
-						<div class="label-and-input">
-							<label>Target-variable</label>
-							<MultiSelect
-								class="p-inputtext-sm"
-								:options="modelStateAndObsOptions"
-								v-model="knobs.targetVariable"
-								placeholder="Select"
-								filter
-							/>
-						</div>
-					</div>
-				</div>
 			</tera-drilldown-section>
 		</section>
 		<section :tabName="OptimizeTabs.Notebook" class="ml-4 mr-2 pt-3">
@@ -269,7 +254,6 @@ import InputText from 'primevue/inputtext';
 import InputNumber from 'primevue/inputnumber';
 import SelectButton from 'primevue/selectbutton';
 import Dialog from 'primevue/dialog';
-import MultiSelect from 'primevue/multiselect';
 import TeraOptimizeChart from '@/components/workflow/tera-optimize-chart.vue';
 import TeraSimulateChart from '@/components/workflow/tera-simulate-chart.vue';
 import TeraDatasetDatatable from '@/components/dataset/tera-dataset-datatable.vue';

From 545ad1fb75d0325ed254d0b8e9b075286018c5f1 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Tue, 18 Jun 2024 11:56:56 -0400
Subject: [PATCH 06/20] first update to correct API call with new state

---
 .../optimize-ciemss/tera-optimize-ciemss.vue  | 45 +++++++------------
 1 file changed, 17 insertions(+), 28 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
index 2b3b15a466..e2786595cc 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
@@ -192,7 +192,7 @@
 							label="Add chart"
 							icon="pi pi-plus"
 						/>
-						<tera-optimize-chart
+						<!-- <tera-optimize-chart
 							:risk-results="riskResults[knobs.forecastRunId]"
 							:chartConfig="{
 								selectedRun: knobs.forecastRunId,
@@ -201,7 +201,7 @@
 							:target-variable="knobs.targetVariable[0]"
 							:size="chartSize"
 							:threshold="knobs.threshold"
-						/>
+						/> -->
 					</section>
 					<div v-else-if="outputViewSelection === OutputView.Data">
 						<tera-dataset-datatable
@@ -254,7 +254,7 @@ import InputText from 'primevue/inputtext';
 import InputNumber from 'primevue/inputnumber';
 import SelectButton from 'primevue/selectbutton';
 import Dialog from 'primevue/dialog';
-import TeraOptimizeChart from '@/components/workflow/tera-optimize-chart.vue';
+// import TeraOptimizeChart from '@/components/workflow/tera-optimize-chart.vue';
 import TeraSimulateChart from '@/components/workflow/tera-simulate-chart.vue';
 import TeraDatasetDatatable from '@/components/dataset/tera-dataset-datatable.vue';
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
@@ -281,7 +281,8 @@ import {
 	ModelParameter,
 	OptimizeRequestCiemss,
 	CsvAsset,
-	PolicyInterventions
+	PolicyInterventions,
+	OptimizeQoi
 } from '@/types/Types';
 import { logger } from '@/utils/logger';
 import { chartActionsProxy, drilldownChartSize, nodeMetadata } from '@/components/workflow/util';
@@ -295,7 +296,6 @@ import teraOptimizeConstraintGroupForm from './tera-optimize-constraint-group-fo
 import {
 	OptimizeCiemssOperationState,
 	InterventionTypes,
-	ContextMethods,
 	InterventionPolicyGroup,
 	blankInterventionPolicyGroup,
 	getOptimizedInterventions,
@@ -325,11 +325,6 @@ interface BasicKnobs {
 	solverMethod: string;
 	maxiter: number;
 	maxfeval: number;
-	qoiMethod: ContextMethods;
-	targetVariable: string;
-	riskTolerance: number;
-	threshold: number;
-	isMinimized: boolean;
 	forecastRunId: string;
 	optimizationRunId: string;
 	interventionType: InterventionTypes;
@@ -341,11 +336,6 @@ const knobs = ref<BasicKnobs>({
 	solverMethod: props.node.state.solverMethod ?? '', // Currently not used.
 	maxiter: props.node.state.maxiter ?? 5,
 	maxfeval: props.node.state.maxfeval ?? 25,
-	qoiMethod: props.node.state.constraintGroups[0].qoiMethod ?? ContextMethods.max,
-	targetVariable: props.node.state.constraintGroups[0].targetVariable ?? [],
-	riskTolerance: props.node.state.constraintGroups[0].riskTolerance ?? 0,
-	threshold: props.node.state.constraintGroups[0].threshold ?? 0, // currently not used.
-	isMinimized: props.node.state.constraintGroups[0].isMinimized ?? true,
 	forecastRunId: props.node.state.forecastRunId ?? '',
 	optimizationRunId: props.node.state.optimizationRunId ?? '',
 	interventionType: props.node.state.interventionType ?? ''
@@ -412,7 +402,7 @@ const outputs = computed(() => {
 
 const isRunDisabled = computed(() => {
 	if (
-		knobs.value.targetVariable.length === 0 ||
+		props.node.state.constraintGroups.length === 0 ||
 		props.node.state.interventionPolicyGroups.length === 0
 	)
 		return true;
@@ -539,6 +529,13 @@ const runOptimize = async () => {
 		paramValues
 	};
 
+	// TODO: https://github.com/DARPA-ASKEM/terarium/issues/3887
+	// The method should be a list but pyciemss + pyciemss service is not yet ready for this.
+	const qoi: OptimizeQoi = {
+		contexts: props.node.state.constraintGroups.map((ele) => ele.targetVariable),
+		method: props.node.state.constraintGroups[0].qoiMethod
+	};
+
 	const optimizePayload: OptimizeRequestCiemss = {
 		userId: 'no_user_provided',
 		engine: 'ciemss',
@@ -548,19 +545,16 @@ const runOptimize = async () => {
 			end: knobs.value.endTime
 		},
 		policyInterventions: optimizeInterventions,
-		qoi: {
-			contexts: [knobs.value.targetVariable],
-			method: knobs.value.qoiMethod
-		},
-		riskBound: knobs.value.threshold,
+		qoi,
+		riskBound: props.node.state.constraintGroups[0].threshold, // TODO: https://github.com/DARPA-ASKEM/terarium/issues/3887
 		initialGuessInterventions: listInitialGuessInterventions,
 		boundsInterventions: listBoundsInterventions,
 		extra: {
-			isMinimized: knobs.value.isMinimized,
+			isMinimized: props.node.state.constraintGroups[0].isMinimized,
 			numSamples: knobs.value.numSamples,
 			maxiter: knobs.value.maxiter,
 			maxfeval: knobs.value.maxfeval,
-			alpha: (100 - knobs.value.riskTolerance) / 100,
+			alpha: (100 - props.node.state.constraintGroups[0].riskTolerance) / 100,
 			solverMethod: knobs.value.solverMethod
 		}
 	};
@@ -633,14 +627,9 @@ watch(
 		state.solverMethod = knobs.value.solverMethod;
 		state.maxiter = knobs.value.maxiter;
 		state.maxfeval = knobs.value.maxfeval;
-		state.constraintGroups[0].targetVariable = knobs.value.targetVariable[0];
-		state.constraintGroups[0].riskTolerance = knobs.value.riskTolerance;
-		state.constraintGroups[0].threshold = knobs.value.threshold;
 		state.forecastRunId = knobs.value.forecastRunId;
 		state.optimizationRunId = knobs.value.optimizationRunId;
 		state.interventionType = knobs.value.interventionType;
-		state.constraintGroups[0].isMinimized = knobs.value.isMinimized;
-		state.constraintGroups[0].qoiMethod = knobs.value.qoiMethod;
 		emit('update-state', state);
 	},
 	{ deep: true }

From c3cd7bfeed1ce728ef73dd4664d3262178ff2329 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Tue, 18 Jun 2024 15:56:16 -0400
Subject: [PATCH 07/20] styling and labeling

---
 .../optimize-ciemss/tera-optimize-ciemss.vue  | 54 +++++++++++++------
 .../tera-optimize-constraint-group-form.vue   |  2 +-
 2 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
index e2786595cc..49e45550b9 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
@@ -8,12 +8,15 @@
 	>
 		<section :tabName="OptimizeTabs.Wizard" class="ml-4 mr-2 pt-3">
 			<tera-drilldown-section>
+				<template #header-controls-left>
+					<label>The model configuration will be optimized with the following settings</label>
+				</template>
 				<template #header-controls-right>
 					<Button :disabled="isRunDisabled" label="Run" icon="pi pi-play" @click="runOptimize" />
 					<tera-pyciemss-cancel-button class="mr-auto" :simulation-run-id="cancelRunId" />
 				</template>
 				<div class="form-section">
-					<span> Constraints <i v-tooltip="constraintToolTip" class="pi pi-info-circle" /> </span>
+					<h5>Constraints <i v-tooltip="constraintToolTip" class="pi pi-info-circle" /></h5>
 					<tera-optimize-constraint-group-form
 						v-for="(cfg, index) in node.state.constraintGroups"
 						:key="selectedOutputId + ':' + index"
@@ -23,12 +26,14 @@
 						@update-self="(config) => updateConstraintGroupForm(index, config)"
 						@delete-self="() => deleteConstraintGroupForm(index)"
 					/>
-					<Button
-						icon="pi pi-plus"
-						class="p-button-sm p-button-text"
-						label="Add more constraints"
-						@click="addConstraintGroupForm"
-					/>
+					<div>
+						<Button
+							icon="pi pi-plus"
+							class="p-button-sm p-button-text"
+							label="Add more constraints"
+							@click="addConstraintGroupForm"
+						/>
+					</div>
 				</div>
 				<div class="form-section">
 					<h5>Intervention policy</h5>
@@ -86,7 +91,7 @@
 					</div>
 					<div v-if="showAdditionalOptions" class="input-row">
 						<div class="label-and-input">
-							<label>Number of samples</label>
+							<label>Number of samples to simulate model</label>
 							<div>
 								<InputNumber
 									class="p-inputtext-sm"
@@ -105,6 +110,20 @@
 								placeholder="Select"
 							/>
 						</div>
+					</div>
+					<div class="input-row">
+						<h3>Optimizer options</h3>
+					</div>
+					<div class="input-row">
+						<div class="label-and-input">
+							<label>Algorithm</label>
+							<InputText
+								disabled
+								class="p-inputtext-sm"
+								inputId="integeronly"
+								value="basinhopping"
+							/>
+						</div>
 						<div class="label-and-input">
 							<label>Maxiter</label>
 							<InputNumber class="p-inputtext-sm" v-model="knobs.maxiter" inputId="integeronly" />
@@ -192,16 +211,17 @@
 							label="Add chart"
 							icon="pi pi-plus"
 						/>
-						<!-- <tera-optimize-chart
+						<!-- TODO: https://github.com/DARPA-ASKEM/terarium/issues/3909 -->
+						<tera-optimize-chart
 							:risk-results="riskResults[knobs.forecastRunId]"
 							:chartConfig="{
 								selectedRun: knobs.forecastRunId,
-								selectedVariable: [knobs.targetVariable]
+								selectedVariable: props.node.state.constraintGroups.map((ele) => ele.targetVariable)
 							}"
-							:target-variable="knobs.targetVariable[0]"
+							:target-variable="props.node.state.constraintGroups[0].targetVariable"
 							:size="chartSize"
-							:threshold="knobs.threshold"
-						/> -->
+							:threshold="props.node.state.constraintGroups[0].threshold"
+						/>
 					</section>
 					<div v-else-if="outputViewSelection === OutputView.Data">
 						<tera-dataset-datatable
@@ -254,7 +274,7 @@ import InputText from 'primevue/inputtext';
 import InputNumber from 'primevue/inputnumber';
 import SelectButton from 'primevue/selectbutton';
 import Dialog from 'primevue/dialog';
-// import TeraOptimizeChart from '@/components/workflow/tera-optimize-chart.vue';
+import TeraOptimizeChart from '@/components/workflow/tera-optimize-chart.vue';
 import TeraSimulateChart from '@/components/workflow/tera-simulate-chart.vue';
 import TeraDatasetDatatable from '@/components/dataset/tera-dataset-datatable.vue';
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
@@ -341,7 +361,7 @@ const knobs = ref<BasicKnobs>({
 	interventionType: props.node.state.interventionType ?? ''
 });
 
-const constraintToolTip = 'TODO';
+const constraintToolTip = 'TODO'; // TODO https://github.com/DARPA-ASKEM/terarium/issues/3915
 
 const modelConfigName = ref<string>('');
 const modelConfigDesc = ref<string>('');
@@ -529,7 +549,7 @@ const runOptimize = async () => {
 		paramValues
 	};
 
-	// TODO: https://github.com/DARPA-ASKEM/terarium/issues/3887
+	// TODO: https://github.com/DARPA-ASKEM/terarium/issues/3909
 	// The method should be a list but pyciemss + pyciemss service is not yet ready for this.
 	const qoi: OptimizeQoi = {
 		contexts: props.node.state.constraintGroups.map((ele) => ele.targetVariable),
@@ -546,7 +566,7 @@ const runOptimize = async () => {
 		},
 		policyInterventions: optimizeInterventions,
 		qoi,
-		riskBound: props.node.state.constraintGroups[0].threshold, // TODO: https://github.com/DARPA-ASKEM/terarium/issues/3887
+		riskBound: props.node.state.constraintGroups[0].threshold, // TODO: https://github.com/DARPA-ASKEM/terarium/issues/3909
 		initialGuessInterventions: listInitialGuessInterventions,
 		boundsInterventions: listBoundsInterventions,
 		extra: {
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
index c3a5792f34..744637a44a 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
@@ -5,7 +5,7 @@
 				<InputText
 					v-if="isEditing"
 					v-model="config.name"
-					placeholder="Policy bounds"
+					placeholder="Constraint name"
 					@focusout="emit('update-self', config)"
 				/>
 				<h6 v-else>{{ props.constraint.name }}</h6>

From 2ca0ac7f6a683ba7a827f9cd17260ed82d1807ff Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Tue, 18 Jun 2024 15:57:51 -0400
Subject: [PATCH 08/20] Removing policy group's coloured border

---
 .../workflow/ops/optimize-ciemss/optimize-ciemss-operation.ts   | 2 --
 .../ops/optimize-ciemss/tera-intervention-policy-group-form.vue | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/optimize-ciemss-operation.ts b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/optimize-ciemss-operation.ts
index a968d0934f..165857ff73 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/optimize-ciemss-operation.ts
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/optimize-ciemss-operation.ts
@@ -16,7 +16,6 @@ export enum ContextMethods {
 }
 
 export interface InterventionPolicyGroup {
-	borderColour: string;
 	name: string;
 	parameter: string;
 	startTime: number;
@@ -60,7 +59,6 @@ export interface OptimizeCiemssOperationState extends BaseState {
 }
 
 export const blankInterventionPolicyGroup: InterventionPolicyGroup = {
-	borderColour: '#cee2a4',
 	name: 'Policy bounds',
 	parameter: '',
 	startTime: 0,
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-intervention-policy-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-intervention-policy-group-form.vue
index 70dcb9c73e..f8da60d108 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-intervention-policy-group-form.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-intervention-policy-group-form.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="policy-group" :style="`border-left: 9px solid ${props.config.borderColour}`">
+	<div class="policy-group">
 		<div class="form-header">
 			<div>
 				<InputText

From 1c9bdc8bc8a54419ac2fdb2c89008e8b277dd9e2 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Tue, 18 Jun 2024 16:01:36 -0400
Subject: [PATCH 09/20] updates to show additional options

---
 .../optimize-ciemss/tera-optimize-ciemss.vue  | 92 ++++++++++---------
 1 file changed, 49 insertions(+), 43 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
index 49e45550b9..5b8cc23ff5 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
@@ -88,57 +88,63 @@
 							label="Show additional options"
 							@click="toggleAdditonalOptions"
 						/>
+						<Button
+							v-if="showAdditionalOptions"
+							class="p-button-sm p-button-text w-3"
+							label="Hide additional options"
+							@click="toggleAdditonalOptions"
+						/>
 					</div>
-					<div v-if="showAdditionalOptions" class="input-row">
-						<div class="label-and-input">
-							<label>Number of samples to simulate model</label>
-							<div>
-								<InputNumber
+					<div v-if="showAdditionalOptions">
+						<div class="input-row">
+							<div class="label-and-input">
+								<label>Number of samples to simulate model</label>
+								<div>
+									<InputNumber
+										class="p-inputtext-sm"
+										inputId="integeronly"
+										v-model="knobs.numSamples"
+									/>
+								</div>
+							</div>
+							<div class="label-and-input">
+								<label>Solver method</label>
+								<Dropdown
 									class="p-inputtext-sm"
-									inputId="integeronly"
-									v-model="knobs.numSamples"
+									disabled
+									:options="['dopri5', 'euler']"
+									v-model="knobs.solverMethod"
+									placeholder="Select"
 								/>
 							</div>
 						</div>
-						<div class="label-and-input">
-							<label>Solver method</label>
-							<Dropdown
-								class="p-inputtext-sm"
-								disabled
-								:options="['dopri5', 'euler']"
-								v-model="knobs.solverMethod"
-								placeholder="Select"
-							/>
-						</div>
-					</div>
-					<div class="input-row">
-						<h3>Optimizer options</h3>
-					</div>
-					<div class="input-row">
-						<div class="label-and-input">
-							<label>Algorithm</label>
-							<InputText
-								disabled
-								class="p-inputtext-sm"
-								inputId="integeronly"
-								value="basinhopping"
-							/>
-						</div>
-						<div class="label-and-input">
-							<label>Maxiter</label>
-							<InputNumber class="p-inputtext-sm" v-model="knobs.maxiter" inputId="integeronly" />
+						<div class="input-row">
+							<h3>Optimizer options</h3>
 						</div>
-						<div class="label-and-input">
-							<label>Maxfeval</label>
-							<InputNumber class="p-inputtext-sm" v-model="knobs.maxfeval" inputId="integeronly" />
+						<div class="input-row">
+							<div class="label-and-input">
+								<label>Algorithm</label>
+								<InputText
+									disabled
+									class="p-inputtext-sm"
+									inputId="integeronly"
+									value="basinhopping"
+								/>
+							</div>
+							<div class="label-and-input">
+								<label>Maxiter</label>
+								<InputNumber class="p-inputtext-sm" v-model="knobs.maxiter" inputId="integeronly" />
+							</div>
+							<div class="label-and-input">
+								<label>Maxfeval</label>
+								<InputNumber
+									class="p-inputtext-sm"
+									v-model="knobs.maxfeval"
+									inputId="integeronly"
+								/>
+							</div>
 						</div>
 					</div>
-					<Button
-						v-if="showAdditionalOptions"
-						class="p-button-sm p-button-text w-3"
-						label="Hide additional options"
-						@click="toggleAdditonalOptions"
-					/>
 				</div>
 			</tera-drilldown-section>
 		</section>

From cb010d2111c905e305857ebb1ff5f15950409b34 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Tue, 18 Jun 2024 16:04:22 -0400
Subject: [PATCH 10/20] minor padding update

---
 .../workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
index 5b8cc23ff5..42546f981a 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
@@ -90,7 +90,7 @@
 						/>
 						<Button
 							v-if="showAdditionalOptions"
-							class="p-button-sm p-button-text w-3"
+							class="p-button-sm p-button-text"
 							label="Hide additional options"
 							@click="toggleAdditonalOptions"
 						/>
@@ -739,7 +739,7 @@ watch(
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 0.5rem;
-
+	padding-top: var(--gap);
 	& > * {
 		flex: 1;
 	}

From a34d2731a28ef552b57aa6b141b21b1a04e5620d Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Tue, 18 Jun 2024 16:07:26 -0400
Subject: [PATCH 11/20] center label

---
 .../workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
index 42546f981a..2f59606cc4 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
@@ -9,7 +9,9 @@
 		<section :tabName="OptimizeTabs.Wizard" class="ml-4 mr-2 pt-3">
 			<tera-drilldown-section>
 				<template #header-controls-left>
-					<label>The model configuration will be optimized with the following settings</label>
+					<label class="center-label"
+						>The model configuration will be optimized with the following settings</label
+					>
 				</template>
 				<template #header-controls-right>
 					<Button :disabled="isRunDisabled" label="Run" icon="pi pi-play" @click="runOptimize" />
@@ -760,4 +762,8 @@ watch(
 		flex: 1;
 	}
 }
+
+.center-label {
+	align-content: center;
+}
 </style>

From bb4bb1bebfb35e6ef54491f3f97d7cfd07864533 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Tue, 18 Jun 2024 16:10:37 -0400
Subject: [PATCH 12/20] adding TODO tooltips

---
 .../ops/optimize-ciemss/tera-optimize-ciemss.vue  | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
index 2f59606cc4..8d03887c07 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
@@ -38,7 +38,10 @@
 					</div>
 				</div>
 				<div class="form-section">
-					<h5>Intervention policy</h5>
+					<h5>
+						Intervention policy
+						<i v-tooltip="interventionPolicyToolTip" class="pi pi-info-circle" />
+					</h5>
 					<div>
 						<label>Intervention Type</label>
 						<Dropdown
@@ -72,7 +75,10 @@
 					</div>
 				</div>
 				<div class="form-section">
-					<h5>Optimization settings</h5>
+					<h5>
+						Optimization settings
+						<i v-tooltip="optimizeSettingsToolTip" class="pi pi-info-circle" />
+					</h5>
 					<div class="input-row">
 						<div class="label-and-input">
 							<label>Start time</label>
@@ -369,7 +375,10 @@ const knobs = ref<BasicKnobs>({
 	interventionType: props.node.state.interventionType ?? ''
 });
 
-const constraintToolTip = 'TODO'; // TODO https://github.com/DARPA-ASKEM/terarium/issues/3915
+// TODO https://github.com/DARPA-ASKEM/terarium/issues/3915
+const constraintToolTip = 'TODO';
+const interventionPolicyToolTip = 'TODO';
+const optimizeSettingsToolTip = 'TODO';
 
 const modelConfigName = ref<string>('');
 const modelConfigDesc = ref<string>('');

From b8b3d066b78e68bc971b7f17e12499fc1e8114ce Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Tue, 18 Jun 2024 16:14:09 -0400
Subject: [PATCH 13/20] adding minimizer method

---
 .../ops/optimize-ciemss/tera-optimize-ciemss.vue      | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
index 8d03887c07..6837286aae 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
@@ -132,12 +132,11 @@
 						<div class="input-row">
 							<div class="label-and-input">
 								<label>Algorithm</label>
-								<InputText
-									disabled
-									class="p-inputtext-sm"
-									inputId="integeronly"
-									value="basinhopping"
-								/>
+								<InputText disabled class="p-inputtext-sm" value="basinhopping" />
+							</div>
+							<div class="label-and-input">
+								<label>Minimizer method</label>
+								<InputText disabled class="p-inputtext-sm" value="COBYLA" />
 							</div>
 							<div class="label-and-input">
 								<label>Maxiter</label>

From 6094adff55b251f292f88d05010f33230b1edc74 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Tue, 18 Jun 2024 16:45:29 -0400
Subject: [PATCH 14/20] correction to isRunDisabled

---
 .../workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
index 6837286aae..78b96e906f 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
@@ -438,7 +438,7 @@ const outputs = computed(() => {
 
 const isRunDisabled = computed(() => {
 	if (
-		props.node.state.constraintGroups.length === 0 ||
+		!props.node.state.constraintGroups[0]?.targetVariable ||
 		props.node.state.interventionPolicyGroups.length === 0
 	)
 		return true;

From dea3edc404694085a43e1105ce50b0286bf4c792 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Tue, 18 Jun 2024 16:54:19 -0400
Subject: [PATCH 15/20] undefined error handling

---
 .../workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue   | 6 +++---
 .../src/components/workflow/tera-optimize-chart.vue         | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
index 78b96e906f..848574a6b4 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
@@ -231,9 +231,9 @@
 								selectedRun: knobs.forecastRunId,
 								selectedVariable: props.node.state.constraintGroups.map((ele) => ele.targetVariable)
 							}"
-							:target-variable="props.node.state.constraintGroups[0].targetVariable"
+							:target-variable="props.node.state.constraintGroups?.[0]?.targetVariable || undefined"
 							:size="chartSize"
-							:threshold="props.node.state.constraintGroups[0].threshold"
+							:threshold="props.node.state.constraintGroups?.[0]?.threshold || undefined"
 						/>
 					</section>
 					<div v-else-if="outputViewSelection === OutputView.Data">
@@ -438,7 +438,7 @@ const outputs = computed(() => {
 
 const isRunDisabled = computed(() => {
 	if (
-		!props.node.state.constraintGroups[0]?.targetVariable ||
+		!props.node.state.constraintGroups?.at(0)?.targetVariable ||
 		props.node.state.interventionPolicyGroups.length === 0
 	)
 		return true;
diff --git a/packages/client/hmi-client/src/components/workflow/tera-optimize-chart.vue b/packages/client/hmi-client/src/components/workflow/tera-optimize-chart.vue
index 6e5292c72b..325554c413 100644
--- a/packages/client/hmi-client/src/components/workflow/tera-optimize-chart.vue
+++ b/packages/client/hmi-client/src/components/workflow/tera-optimize-chart.vue
@@ -36,10 +36,10 @@ const renderChart = () => {
 
 const props = defineProps<{
 	riskResults: any;
-	targetVariable: string;
+	targetVariable?: string;
 	chartConfig: ChartConfig;
 	size?: { width: number; height: number };
-	threshold: number;
+	threshold?: number;
 }>();
 
 const chartSize = computed(() => {
@@ -53,6 +53,8 @@ const binCount = 6;
 
 const setChartOptions = () => {
 	if (!props.riskResults) return {};
+	if (!props.threshold) return {};
+
 	const { toBinIndex } = getBinData(qoiData.value);
 	return {
 		indexAxis: 'y',

From a864df3fda679314eca2b65e1c8d5c1d5e8a6298 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Wed, 19 Jun 2024 11:02:15 -0400
Subject: [PATCH 16/20] Thanks Shawn

---
 .../optimize-ciemss/tera-optimize-constraint-group-form.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
index 744637a44a..4e9eeb5026 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
@@ -100,8 +100,8 @@ const onEdit = () => {
 .container {
 	width: 100%;
 	display: flex;
-	margin-top: 1rem;
-	padding: 1rem 1rem 1rem 1.5rem;
+	margin-top: var(--gap);
+	padding: var(--gap) var(--gap) var(--gap) var(--gap-medium);
 	flex-direction: column;
 	justify-content: center;
 	align-items: flex-start;

From 929c1bab9d6720351d1492948893fa6697aa8461 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Wed, 19 Jun 2024 11:13:49 -0400
Subject: [PATCH 17/20] need the attrs in tera-input

---
 packages/client/hmi-client/src/components/widgets/tera-input.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-input.vue b/packages/client/hmi-client/src/components/widgets/tera-input.vue
index 50348376fc..4e45689b77 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-input.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-input.vue
@@ -4,6 +4,7 @@
 		<main :class="{ error: getErrorMessage }" @click.self.stop="focusInput">
 			<input
 				ref="inputField"
+				v-bind="$attrs"
 				:value="getValue()"
 				@input="updateValue"
 				:style="{ 'text-align': textAlign }"

From 7c07a0e4971641647920422c10ba6149326f76f9 Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Wed, 19 Jun 2024 11:14:18 -0400
Subject: [PATCH 18/20] replacing primevue stuff with tera-input

---
 .../optimize-ciemss/tera-optimize-ciemss.vue  | 29 +++++++------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
index 848574a6b4..ebb9155535 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss.vue
@@ -82,11 +82,11 @@
 					<div class="input-row">
 						<div class="label-and-input">
 							<label>Start time</label>
-							<InputText disabled class="p-inputtext-sm" inputId="integeronly" value="0" />
+							<tera-input disabled class="p-inputtext-sm" type="number" model-value="0" />
 						</div>
 						<div class="label-and-input">
 							<label>End time</label>
-							<InputNumber class="p-inputtext-sm" inputId="integeronly" v-model="knobs.endTime" />
+							<tera-input class="p-inputtext-sm" type="number" v-model="knobs.endTime" />
 						</div>
 					</div>
 					<div>
@@ -108,11 +108,7 @@
 							<div class="label-and-input">
 								<label>Number of samples to simulate model</label>
 								<div>
-									<InputNumber
-										class="p-inputtext-sm"
-										inputId="integeronly"
-										v-model="knobs.numSamples"
-									/>
+									<tera-input class="p-inputtext-sm" type="number" v-model="knobs.numSamples" />
 								</div>
 							</div>
 							<div class="label-and-input">
@@ -132,23 +128,19 @@
 						<div class="input-row">
 							<div class="label-and-input">
 								<label>Algorithm</label>
-								<InputText disabled class="p-inputtext-sm" value="basinhopping" />
+								<tera-input disabled class="p-inputtext-sm" model-value="basinhopping" />
 							</div>
 							<div class="label-and-input">
 								<label>Minimizer method</label>
-								<InputText disabled class="p-inputtext-sm" value="COBYLA" />
+								<tera-input disabled class="p-inputtext-sm" model-value="COBYLA" />
 							</div>
 							<div class="label-and-input">
 								<label>Maxiter</label>
-								<InputNumber class="p-inputtext-sm" v-model="knobs.maxiter" inputId="integeronly" />
+								<tera-input class="p-inputtext-sm" v-model="knobs.maxiter" inputId="integeronly" />
 							</div>
 							<div class="label-and-input">
 								<label>Maxfeval</label>
-								<InputNumber
-									class="p-inputtext-sm"
-									v-model="knobs.maxfeval"
-									inputId="integeronly"
-								/>
+								<tera-input class="p-inputtext-sm" v-model="knobs.maxfeval" inputId="integeronly" />
 							</div>
 						</div>
 					</div>
@@ -262,11 +254,11 @@
 	>
 		<div class="label-and-input">
 			<label> Model config name</label>
-			<InputText v-model="modelConfigName" />
+			<tera-input v-model="modelConfigName" />
 		</div>
 		<div class="label-and-input">
 			<label> Model config description</label>
-			<InputText v-model="modelConfigDesc" />
+			<tera-input v-model="modelConfigDesc" />
 		</div>
 		<Button
 			:disabled="modelConfigName === ''"
@@ -283,8 +275,7 @@ import { computed, ref, onMounted, watch } from 'vue';
 // components:
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
-import InputText from 'primevue/inputtext';
-import InputNumber from 'primevue/inputnumber';
+import teraInput from '@/components/widgets/tera-input.vue';
 import SelectButton from 'primevue/selectbutton';
 import Dialog from 'primevue/dialog';
 import TeraOptimizeChart from '@/components/workflow/tera-optimize-chart.vue';

From 9a7490145e6d13d063c73660b895462af5a4c3ad Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Wed, 19 Jun 2024 11:15:38 -0400
Subject: [PATCH 19/20] replace with tera-input in group form

---
 .../tera-optimize-constraint-group-form.vue              | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
index 4e9eeb5026..159da4d159 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-constraint-group-form.vue
@@ -2,7 +2,7 @@
 	<div class="container">
 		<div class="form-header">
 			<div>
-				<InputText
+				<tera-input
 					v-if="isEditing"
 					v-model="config.name"
 					placeholder="Constraint name"
@@ -41,7 +41,7 @@
 				@update:model-value="emit('update-self', config)"
 			/>
 			<p>over the worst</p>
-			<InputNumber
+			<tera-input
 				class="p-inputtext-sm"
 				inputId="integeronly"
 				v-model="config.riskTolerance"
@@ -60,7 +60,7 @@
 				@update:model-value="emit('update-self', config)"
 			/>
 			<p>a threshold of</p>
-			<InputNumber
+			<tera-input
 				class="p-inputtext-sm"
 				v-model="config.threshold"
 				:min-fraction-digits="1"
@@ -75,8 +75,7 @@
 import _ from 'lodash';
 import { ref } from 'vue';
 import Dropdown from 'primevue/dropdown';
-import InputNumber from 'primevue/inputnumber';
-import InputText from 'primevue/inputtext';
+import teraInput from '@/components/widgets/tera-input.vue';
 import InputSwitch from 'primevue/inputswitch';
 import { ConstraintGroup, ContextMethods } from './optimize-ciemss-operation';
 

From ed53d4a0b4eb10dc7c8bf9e47f5dd07f8e9901af Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Wed, 19 Jun 2024 15:01:22 -0400
Subject: [PATCH 20/20] Good point Dan!

---
 .../client/hmi-client/src/components/widgets/tera-input.vue   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-input.vue b/packages/client/hmi-client/src/components/widgets/tera-input.vue
index 4e45689b77..05346dcbfc 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-input.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-input.vue
@@ -4,7 +4,7 @@
 		<main :class="{ error: getErrorMessage }" @click.self.stop="focusInput">
 			<input
 				ref="inputField"
-				v-bind="$attrs"
+				:disabled="getDisabled"
 				:value="getValue()"
 				@input="updateValue"
 				:style="{ 'text-align': textAlign }"
@@ -24,6 +24,7 @@ const props = defineProps<{
 	modelValue: string | number;
 	label?: string;
 	errorMessage?: string;
+	disabled?: boolean;
 }>();
 
 const emit = defineEmits(['update:modelValue']);
@@ -35,6 +36,7 @@ const maskedValue = ref('');
 const isNistType = attrs.type === 'nist';
 const textAlign = attrs.type === 'number' || isNistType ? 'right' : 'left';
 const getType = isNistType ? 'text' : (attrs.type as InputTypeHTMLAttribute);
+const getDisabled = props.disabled ?? false;
 
 const focusInput = () => {
 	inputField.value?.focus();