From 86703213139e70dc849775a61f3a44ccdb8623cc Mon Sep 17 00:00:00 2001
From: Cole Blanchard <cblanchard@Cole-Blanchards-MacBook-Pro.local>
Date: Mon, 30 Sep 2024 09:11:45 -0400
Subject: [PATCH 1/4] weighted interventions

---
 .../components/widgets/tera-signal-bars.vue   | 86 +++++++++++++++++++
 .../optimize-ciemss-operation.ts              |  4 +-
 .../tera-optimize-ciemss-drilldown.vue        | 12 ++-
 .../tera-optimize-ciemss-node.vue             |  2 -
 .../tera-static-intervention-policy-group.vue | 15 ++--
 5 files changed, 104 insertions(+), 15 deletions(-)
 create mode 100644 packages/client/hmi-client/src/components/widgets/tera-signal-bars.vue

diff --git a/packages/client/hmi-client/src/components/widgets/tera-signal-bars.vue b/packages/client/hmi-client/src/components/widgets/tera-signal-bars.vue
new file mode 100644
index 0000000000..54ec4a57f6
--- /dev/null
+++ b/packages/client/hmi-client/src/components/widgets/tera-signal-bars.vue
@@ -0,0 +1,86 @@
+<template>
+	<div class="flex align-items-center gap-2">
+		<label v-if="label">{{ label }}</label>
+		<Dropdown :model-value="modelValue" :options="options" @update:model-value="updateValue" />
+		<!-- Signal Bars -->
+		<ul>
+			<li v-for="n in numberOfBars" :key="n" :class="{ active: n <= modelValue }" :style="getBarStyle(n)"></li>
+		</ul>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Dropdown from 'primevue/dropdown';
+import { ref } from 'vue';
+
+const baseDelay = 0.03; // trasnition delay for each bar
+const barWidth = 2; // width for each bar
+const maxNumberOfBars = 15; // just setting a max number of bars arbitrarily
+
+const props = defineProps({
+	modelValue: {
+		type: Number,
+		required: true
+	},
+	numberOfBars: {
+		type: Number,
+		default: 10
+	},
+	label: {
+		type: String,
+		default: ''
+	}
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const previousValue = ref(props.modelValue);
+const numberOfBars = Math.min(props.numberOfBars, maxNumberOfBars);
+
+const options: number[] = Array.from({ length: numberOfBars }, (_, i) => i + 1);
+
+// fun styling for the bars :)
+const getBarStyle = (n: number) => {
+	const isIncreasing = props.modelValue > previousValue.value;
+	const delay = isIncreasing
+		? (n - Math.min(props.modelValue, previousValue.value)) * baseDelay
+		: (Math.max(props.modelValue, previousValue.value) - n) * baseDelay;
+
+	// might be worth to make the height based on the nuyber of bars
+	return {
+		height: `${n * barWidth}px`,
+		transitionDelay: `${delay}s`
+	};
+};
+
+const updateValue = (value: number) => {
+	previousValue.value = props.modelValue;
+	emit('update:modelValue', value);
+};
+</script>
+
+<style scoped>
+ul {
+	display: flex;
+	align-items: flex-end;
+	gap: var(--gap-0-5);
+	list-style: none;
+}
+
+li {
+	width: 4px;
+	background-color: var(--surface-border);
+	border-radius: var(--border-radius);
+	transition:
+		height 0.5s ease,
+		background-color 0.5s ease;
+	&.active {
+		background-color: var(--primary-color);
+	}
+}
+
+/* static width for dropdown */
+:deep(.p-dropdown) {
+	width: 4rem;
+}
+</style>
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 feb9f9e38b..dca05a4bd2 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
@@ -33,7 +33,7 @@ export interface InterventionPolicyGroupForm {
 	lowerBoundValue: number;
 	upperBoundValue: number;
 	initialGuessValue: number;
-	isActive: boolean;
+	relativeImportance: number;
 	optimizationType: OptimizationInterventionObjective;
 	objectiveFunctionOption: InterventionObjectiveFunctions;
 	intervention: Intervention;
@@ -100,7 +100,7 @@ export const blankInterventionPolicyGroup: InterventionPolicyGroupForm = {
 	lowerBoundValue: 0,
 	upperBoundValue: 0,
 	initialGuessValue: 0,
-	isActive: true,
+	relativeImportance: 5,
 	optimizationType: OptimizationInterventionObjective.startTime,
 	objectiveFunctionOption: InterventionObjectiveFunctions.initialGuess,
 	intervention: blankIntervention
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue
index 5637168c3f..b88a236601 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue
@@ -518,9 +518,13 @@ const outputPanel = ref(null);
 const chartSize = computed(() => drilldownChartSize(outputPanel.value));
 const cancelRunId = computed(() => props.node.state.inProgressPostForecastId || props.node.state.inProgressOptimizeId);
 
-const activePolicyGroups = computed(() => knobs.value.interventionPolicyGroups.filter((ele) => ele.isActive));
+const activePolicyGroups = computed(() =>
+	knobs.value.interventionPolicyGroups.filter((ele) => ele.relativeImportance > 5)
+);
 
-const inactivePolicyGroups = computed(() => knobs.value.interventionPolicyGroups.filter((ele) => !ele.isActive));
+const inactivePolicyGroups = computed(() =>
+	knobs.value.interventionPolicyGroups.filter((ele) => ele.relativeImportance <= 5)
+);
 let pyciemssMap: Record<string, string> = {};
 
 const showSpinner = computed<boolean>(
@@ -712,11 +716,11 @@ const setInterventionPolicyGroups = (interventionPolicy: InterventionPolicy) =>
 	knobs.value.interventionPolicyGroups = []; // Reset prior to populating.
 	if (interventionPolicy.interventions && interventionPolicy.interventions.length > 0) {
 		interventionPolicy.interventions.forEach((intervention) => {
-			const isNotActive = intervention.dynamicInterventions?.length > 0 || intervention.staticInterventions?.length > 1;
+			// const isNotActive = intervention.dynamicInterventions?.length > 0 || intervention.staticInterventions?.length > 1;
 			const newIntervention = _.cloneDeep(blankInterventionPolicyGroup);
 			newIntervention.id = interventionPolicy.id;
 			newIntervention.intervention = intervention;
-			newIntervention.isActive = !isNotActive;
+			newIntervention.relativeImportance = 5;
 			newIntervention.startTimeGuess = intervention.staticInterventions[0]?.timestep;
 			newIntervention.initialGuessValue = intervention.staticInterventions[0]?.value;
 			knobs.value.interventionPolicyGroups.push(newIntervention);
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-node.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-node.vue
index 8165ba33d7..2b7958ee01 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-node.vue
@@ -239,8 +239,6 @@ watch(
 The following are the key attributes and findings of an optimization process for a ODE epidemilogy model, the goal is to find the best values or time points that satisfy a set of constraints.
 
 - The succss constraints are, in JSON: ${JSON.stringify(state.constraintGroups)}
-- We want to optimize: ${JSON.stringify(state.interventionPolicyGroups.filter((d) => d.isActive === true))}
-- The fixed/static intervenations: ${JSON.stringify(state.interventionPolicyGroups.filter((d) => d.isActive === false))}
 - The best guesses are: ${optimizationResult.x}
 - The result is ${optimizationResult.success}
 
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue
index 7d2cc48d74..2897ab70b1 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue
@@ -2,12 +2,13 @@
 	<div class="policy-group">
 		<div class="form-header">
 			<h6 class="mr-auto">{{ config.intervention?.name ?? `Intervention` }}</h6>
-			<div>
-				<label for="active">Optimize</label>
-				<InputSwitch v-model="knobs.isActive" :disabled="isNotEditable" @change="emit('update-self', knobs)" />
-			</div>
+			<tera-signal-bars
+				v-model="knobs.relativeImportance"
+				@update:model-value="emit('update-self', knobs)"
+				label="Relative importance"
+			/>
 		</div>
-		<template v-if="knobs.isActive">
+		<template v-if="true">
 			<section class="input-row">
 				<p>
 					Find the
@@ -120,7 +121,6 @@
 <script setup lang="ts">
 import Dropdown from 'primevue/dropdown';
 import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
-import InputSwitch from 'primevue/inputswitch';
 import { computed, ref, watch } from 'vue';
 import { StaticIntervention } from '@/types/Types';
 import {
@@ -129,6 +129,7 @@ import {
 	OPTIMIZATION_TYPE_MAP,
 	OBJECTIVE_FUNCTION_MAP
 } from '@/components/workflow/ops/optimize-ciemss/optimize-ciemss-operation';
+import TeraSignalBars from '@/components/widgets/tera-signal-bars.vue';
 
 const props = defineProps<{
 	config: InterventionPolicyGroupForm;
@@ -142,7 +143,7 @@ const knobs = ref<InterventionPolicyGroupForm>({
 	...props.config
 });
 
-const isNotEditable = computed(() => staticInterventions.value.length !== 1);
+// const isNotEditable = computed(() => staticInterventions.value.length !== 1);
 
 const showStartTimeOptions = computed(
 	() =>

From 87c45b835c936c9ec2166e76f13a1ea1874ded4a Mon Sep 17 00:00:00 2001
From: Cole Blanchard <cblanchard@Cole-Blanchards-MacBook-Pro.local>
Date: Mon, 30 Sep 2024 16:28:40 -0400
Subject: [PATCH 2/4] weighted interventions

---
 .../tera-dynamic-intervention-policy-group.vue  | 17 +++++++++--------
 .../tera-optimize-ciemss-drilldown.vue          | 13 ++++++++-----
 .../tera-static-intervention-policy-group.vue   |  3 ++-
 packages/client/hmi-client/src/types/Types.ts   |  1 +
 .../parts/OptimizeInterventions.java            |  6 ++++++
 5 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-dynamic-intervention-policy-group.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-dynamic-intervention-policy-group.vue
index e9a6f0e726..b8657c1208 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-dynamic-intervention-policy-group.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-dynamic-intervention-policy-group.vue
@@ -1,11 +1,13 @@
 <template>
 	<div class="policy-group">
 		<div class="form-header">
-			<label class="mr-auto" tag="h5"> {{ config.intervention?.name ?? `Intervention` }}</label>
-			<aside>
-				<label for="active">Optimize</label>
-				<InputSwitch v-model="knobs.isActive" :disabled="true" @change="emit('update-self', knobs)" />
-			</aside>
+			<h6 class="mr-auto">{{ config.intervention?.name ?? `Intervention` }}</h6>
+			<tera-signal-bars
+				v-if="!!knobs.relativeImportance"
+				v-model="knobs.relativeImportance"
+				@update:model-value="emit('update-self', knobs)"
+				label="Relative importance"
+			/>
 		</div>
 		<p>
 			Set the {{ dynamicInterventions[0].type }}&nbsp; <strong>{{ dynamicInterventions[0].appliedTo }}</strong> to
@@ -15,10 +17,9 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { computed, ref } from 'vue';
 import { DynamicIntervention } from '@/types/Types';
 import { InterventionPolicyGroupForm } from '@/components/workflow/ops/optimize-ciemss/optimize-ciemss-operation';
-import InputSwitch from 'primevue/inputswitch';
 
 const props = defineProps<{
 	config: InterventionPolicyGroupForm;
@@ -29,7 +30,7 @@ const emit = defineEmits(['update-self']);
 const dynamicInterventions = computed<DynamicIntervention[]>(() => props.config.intervention.dynamicInterventions);
 
 const knobs = ref({
-	isActive: props.config.isActive ?? false
+	relativeImportance: props.config.relativeImportance
 });
 </script>
 <style>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue
index bae3731c5b..2e4c37e9da 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue
@@ -519,11 +519,11 @@ const chartSize = computed(() => drilldownChartSize(outputPanel.value));
 const cancelRunId = computed(() => props.node.state.inProgressPostForecastId || props.node.state.inProgressOptimizeId);
 
 const activePolicyGroups = computed(() =>
-	knobs.value.interventionPolicyGroups.filter((ele) => ele.relativeImportance > 5)
+	knobs.value.interventionPolicyGroups.filter((ele) => !!ele.relativeImportance)
 );
 
 const inactivePolicyGroups = computed(() =>
-	knobs.value.interventionPolicyGroups.filter((ele) => ele.relativeImportance <= 5)
+	knobs.value.interventionPolicyGroups.filter((ele) => !ele.relativeImportance)
 );
 let pyciemssMap: Record<string, string> = {};
 
@@ -716,11 +716,11 @@ const setInterventionPolicyGroups = (interventionPolicy: InterventionPolicy) =>
 	knobs.value.interventionPolicyGroups = []; // Reset prior to populating.
 	if (interventionPolicy.interventions && interventionPolicy.interventions.length > 0) {
 		interventionPolicy.interventions.forEach((intervention) => {
-			// const isNotActive = intervention.dynamicInterventions?.length > 0 || intervention.staticInterventions?.length > 1;
+			const isNotActive = intervention.dynamicInterventions?.length > 0 || intervention.staticInterventions?.length > 1;
 			const newIntervention = _.cloneDeep(blankInterventionPolicyGroup);
 			newIntervention.id = interventionPolicy.id;
 			newIntervention.intervention = intervention;
-			newIntervention.relativeImportance = 5;
+			newIntervention.relativeImportance = isNotActive ? 0 : 5;
 			newIntervention.startTimeGuess = intervention.staticInterventions[0]?.timestep;
 			newIntervention.initialGuessValue = intervention.staticInterventions[0]?.value;
 			knobs.value.interventionPolicyGroups.push(newIntervention);
@@ -743,6 +743,7 @@ const runOptimize = async () => {
 	const listBoundsInterventions: number[][] = [];
 	const initialGuess: number[] = [];
 	const objectiveFunctionOption: string[] = [];
+	const relativeImportance: number[] = [];
 
 	activePolicyGroups.value.forEach((ele) => {
 		// Only allowed to optimize on interventions that arent grouped aka staticInterventions' length is 1
@@ -750,6 +751,7 @@ const runOptimize = async () => {
 		paramValues.push(ele.intervention.staticInterventions[0].value);
 		startTime.push(ele.intervention.staticInterventions[0].timestep);
 		objectiveFunctionOption.push(ele.objectiveFunctionOption);
+		relativeImportance.push(ele.relativeImportance);
 
 		if (ele.optimizationType === OptimizationInterventionObjective.startTime) {
 			initialGuess.push(ele.startTimeGuess);
@@ -779,7 +781,8 @@ const runOptimize = async () => {
 		startTime,
 		paramValues,
 		initialGuess,
-		objectiveFunctionOption
+		objectiveFunctionOption,
+		relativeImportance
 	};
 
 	// These are interventions to be considered but not optimized over.
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue
index 2897ab70b1..861de91b41 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue
@@ -3,12 +3,13 @@
 		<div class="form-header">
 			<h6 class="mr-auto">{{ config.intervention?.name ?? `Intervention` }}</h6>
 			<tera-signal-bars
+				v-if="!!knobs.relativeImportance"
 				v-model="knobs.relativeImportance"
 				@update:model-value="emit('update-self', knobs)"
 				label="Relative importance"
 			/>
 		</div>
-		<template v-if="true">
+		<template v-if="!!knobs.relativeImportance">
 			<section class="input-row">
 				<p>
 					Find the
diff --git a/packages/client/hmi-client/src/types/Types.ts b/packages/client/hmi-client/src/types/Types.ts
index 620e9cb3b7..cd40740025 100644
--- a/packages/client/hmi-client/src/types/Types.ts
+++ b/packages/client/hmi-client/src/types/Types.ts
@@ -645,6 +645,7 @@ export interface OptimizeInterventions {
     startTime?: number[];
     objectiveFunctionOption?: string[];
     initialGuess?: number[];
+    relativeImportance?: number[];
 }
 
 export interface OptimizeQoi {
diff --git a/packages/server/src/main/java/software/uncharted/terarium/hmiserver/models/simulationservice/parts/OptimizeInterventions.java b/packages/server/src/main/java/software/uncharted/terarium/hmiserver/models/simulationservice/parts/OptimizeInterventions.java
index 2fa6dc4229..c1520dc087 100644
--- a/packages/server/src/main/java/software/uncharted/terarium/hmiserver/models/simulationservice/parts/OptimizeInterventions.java
+++ b/packages/server/src/main/java/software/uncharted/terarium/hmiserver/models/simulationservice/parts/OptimizeInterventions.java
@@ -2,8 +2,10 @@
 
 import com.fasterxml.jackson.annotation.JsonAlias;
 import java.util.List;
+import java.util.stream.Collectors;
 import lombok.Data;
 import lombok.experimental.Accessors;
+import software.uncharted.terarium.hmiserver.annotations.TSIgnore;
 import software.uncharted.terarium.hmiserver.annotations.TSModel;
 import software.uncharted.terarium.hmiserver.annotations.TSOptional;
 
@@ -36,6 +38,10 @@ public class OptimizeInterventions {
 	@JsonAlias("initial_guess")
 	private List<Double> initialGuess;
 
+	@TSOptional
+	@JsonAlias("relative_importance")
+	private List<Double> relativeImportance;
+
 	@Override
 	public String toString() {
 		return (" { Parameter Names: " + this.paramNames + " start time: " + startTime.toString() + " } ");

From d307d9c97310c9762af0ee3d71220fefd97d78b0 Mon Sep 17 00:00:00 2001
From: Cole Blanchard <cblanchard@Cole-Blanchards-MacBook-Pro.local>
Date: Tue, 1 Oct 2024 11:13:21 -0400
Subject: [PATCH 3/4] address comments

---
 .../src/components/widgets/tera-signal-bars.vue           | 8 ++++++--
 .../tera-static-intervention-policy-group.vue             | 6 ++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-signal-bars.vue b/packages/client/hmi-client/src/components/widgets/tera-signal-bars.vue
index 54ec4a57f6..493d1604c3 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-signal-bars.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-signal-bars.vue
@@ -1,7 +1,11 @@
 <template>
 	<div class="flex align-items-center gap-2">
 		<label v-if="label">{{ label }}</label>
-		<Dropdown :model-value="modelValue" :options="options" @update:model-value="updateValue" />
+		<Dropdown :model-value="modelValue" :options="options" @update:model-value="updateValue">
+			<template #value="{ value }">
+				{{ value.toString() }}
+			</template>
+		</Dropdown>
 		<!-- Signal Bars -->
 		<ul>
 			<li v-for="n in numberOfBars" :key="n" :class="{ active: n <= modelValue }" :style="getBarStyle(n)"></li>
@@ -37,7 +41,7 @@ const emit = defineEmits(['update:modelValue']);
 const previousValue = ref(props.modelValue);
 const numberOfBars = Math.min(props.numberOfBars, maxNumberOfBars);
 
-const options: number[] = Array.from({ length: numberOfBars }, (_, i) => i + 1);
+const options: number[] = Array.from({ length: numberOfBars + 1 }, (_, i) => i);
 
 // fun styling for the bars :)
 const getBarStyle = (n: number) => {
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue
index 861de91b41..8b8bb8a18d 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue
@@ -3,13 +3,13 @@
 		<div class="form-header">
 			<h6 class="mr-auto">{{ config.intervention?.name ?? `Intervention` }}</h6>
 			<tera-signal-bars
-				v-if="!!knobs.relativeImportance"
+				v-if="staticInterventions.length === 1"
 				v-model="knobs.relativeImportance"
 				@update:model-value="emit('update-self', knobs)"
 				label="Relative importance"
 			/>
 		</div>
-		<template v-if="!!knobs.relativeImportance">
+		<template v-if="staticInterventions.length === 1">
 			<section class="input-row">
 				<p>
 					Find the
@@ -144,8 +144,6 @@ const knobs = ref<InterventionPolicyGroupForm>({
 	...props.config
 });
 
-// const isNotEditable = computed(() => staticInterventions.value.length !== 1);
-
 const showStartTimeOptions = computed(
 	() =>
 		knobs.value.optimizationType === OptimizationInterventionObjective.startTime ||

From 6d0a80ca727f0aa3d497e1226558ed943584b8b2 Mon Sep 17 00:00:00 2001
From: Cole Blanchard <cblanchard@Cole-Blanchards-MacBook-Pro.local>
Date: Tue, 1 Oct 2024 11:52:38 -0400
Subject: [PATCH 4/4] more comments

---
 .../src/components/widgets/tera-signal-bars.vue    | 14 ++++++++++----
 .../tera-static-intervention-policy-group.vue      |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-signal-bars.vue b/packages/client/hmi-client/src/components/widgets/tera-signal-bars.vue
index 493d1604c3..65d915f867 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-signal-bars.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-signal-bars.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex align-items-center gap-2">
+	<div>
 		<label v-if="label">{{ label }}</label>
 		<Dropdown :model-value="modelValue" :options="options" @update:model-value="updateValue">
 			<template #value="{ value }">
@@ -8,7 +8,7 @@
 		</Dropdown>
 		<!-- Signal Bars -->
 		<ul>
-			<li v-for="n in numberOfBars" :key="n" :class="{ active: n <= modelValue }" :style="getBarStyle(n)"></li>
+			<li v-for="n in numberOfBars" :key="n" :class="{ active: n <= modelValue }" :style="getBarStyle(n)" />
 		</ul>
 	</div>
 </template>
@@ -17,7 +17,7 @@
 import Dropdown from 'primevue/dropdown';
 import { ref } from 'vue';
 
-const baseDelay = 0.03; // trasnition delay for each bar
+const baseDelay = 0.03; // transition delay for each bar
 const barWidth = 2; // width for each bar
 const maxNumberOfBars = 15; // just setting a max number of bars arbitrarily
 
@@ -64,6 +64,12 @@ const updateValue = (value: number) => {
 </script>
 
 <style scoped>
+div {
+	display: flex;
+	align-items: center;
+	gap: var(--gap-2);
+}
+
 ul {
 	display: flex;
 	align-items: flex-end;
@@ -85,6 +91,6 @@ li {
 
 /* static width for dropdown */
 :deep(.p-dropdown) {
-	width: 4rem;
+	width: 5rem;
 }
 </style>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue
index 8b8bb8a18d..de417d8b19 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-static-intervention-policy-group.vue
@@ -9,7 +9,7 @@
 				label="Relative importance"
 			/>
 		</div>
-		<template v-if="staticInterventions.length === 1">
+		<template v-if="staticInterventions.length === 1 && knobs.relativeImportance">
 			<section class="input-row">
 				<p>
 					Find the