5038 bug intervention policies are not described well in simulate (#5079

)

packages/client/hmi-client/src/components/intervention-policy/tera-intervention-summary-card.vue

@@ -0,0 +1,57 @@
+<template>
+	<div>
+		<aside>{{ !isEmpty(intervention.dynamicInterventions) ? 'Dynamic' : 'Static' }}</aside>
+		<h5>{{ intervention.name }}</h5>
+		<ul>
+			<li v-for="(staticIntervention, index) in intervention.staticInterventions" :key="`static-${index}`">
+				Set {{ staticIntervention.type }} <strong>{{ staticIntervention.appliedTo }}</strong> to
+				<strong>{{ staticIntervention.value }}</strong> starting at <strong>{{ staticIntervention.timestep }}</strong
+				>&nbsp;day.
+			</li>
+			<li v-for="(dynamicIntervention, index) in intervention.dynamicInterventions" :key="`dynamic-${index}`">
+				Set {{ dynamicIntervention.type }} <strong>{{ dynamicIntervention.appliedTo }}</strong> to
+				<strong>{{ dynamicIntervention.value }}</strong> when
+				<strong>{{ dynamicIntervention.parameter }}</strong> crosses the threshold&nbsp;<strong>{{
+					dynamicIntervention.threshold
+				}}</strong
+				>.
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Intervention } from '@/types/Types';
+import { isEmpty } from 'lodash';
+
+defineProps<{
+	intervention: Intervention;
+}>();
+</script>
+
+<style scoped>
+div {
+	background: var(--surface-section);
+	border: 1px solid var(--surface-border-light);
+	border-radius: var(--border-radius-medium);
+	padding: var(--gap-4) var(--gap-5);
+	box-shadow:
+		0 2px 2px -1px rgba(0, 0, 0, 0.06),
+		0 2px 4px -1px rgba(0, 0, 0, 0.08);
+}
+
+ul {
+	list-style: none;
+	margin-top: var(--gap-2);
+}
+
+li + li {
+	margin-top: var(--gap-1);
+}
+
+aside {
+	color: var(--text-color-subdued);
+	font-size: var(--font-caption);
+	float: right;
+}
+</style>

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

@@ -498,7 +498,7 @@ import TeraSaveSimulationModal from '@/components/project/tera-save-simulation-m
 import { useClientEvent } from '@/composables/useClientEvent';
 import { useDrilldownChartSize } from '@/composables/useDrilldownChartSize';
 import { flattenInterventionData, getInterventionPolicyById } from '@/services/intervention-policy';
-import TeraInterventionSummaryCard from '@/components/workflow/ops/simulate-ciemss/tera-intervention-summary-card.vue';
+import TeraInterventionSummaryCard from '@/components/intervention-policy/tera-intervention-summary-card.vue';
 import { getParameters } from '@/model-representation/service';
 import type { CalibrationOperationStateCiemss } from './calibrate-operation';
 import { renameFnGenerator, mergeResults, getErrorData } from './calibrate-utils';

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

@@ -1,23 +1,19 @@
 <template>
-	<div class="policy-card" :class="{ 'card-selected': selected }">
-		<div>
-			<span class="flex align-items-center">
-				<h6>{{ interventionPolicy.name }}</h6>
-				<Button class="ml-auto" text icon="pi pi-ellipsis-v" @click.stop="toggleContextMenu" />
-			</span>
-			<ContextMenu ref="contextMenu" :model="contextMenuItems"></ContextMenu>
-			<p>{{ interventionPolicy.description }}</p>
-			<p>{{ formatTimestamp(interventionPolicy.createdOn) }}</p>
-		</div>
-		<Divider />
+	<div :class="{ selected: selected }">
+		<header>
+			<h6>{{ interventionPolicy.name }}</h6>
+			<Button text icon="pi pi-ellipsis-v" @click.stop="toggleContextMenu" />
+		</header>
+		<ContextMenu ref="contextMenu" :model="contextMenuItems"></ContextMenu>
+		<p v-if="interventionPolicy.description">{{ interventionPolicy.description }}</p>
+		<p>{{ formatTimestamp(interventionPolicy.createdOn) }}</p>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { formatTimestamp } from '@/utils/date';
 import ContextMenu from 'primevue/contextmenu';
 import { ref } from 'vue';
-import Divider from 'primevue/divider';
 import Button from 'primevue/button';
 import { InterventionPolicy } from '@/types/Types';
 
@@ -45,32 +41,42 @@ const toggleContextMenu = (event) => {
 </script>
 
 <style scoped>
-.policy-card {
+div {
 	background-color: var(--gray-0);
 	border-left: 4px solid var(--surface-300);
+	border-bottom: 1px solid var(--gray-300);
+	padding: var(--gap-1) var(--gap-1) var(--gap-3) var(--gap-3);
 
-	&.card-selected {
-		border-left: 4px solid var(--primary-color);
+	&.selected {
+		border-left-color: var(--primary-color);
+	}
+
+	&,
+	&.selected {
+		transition: border-left-color 250ms;
 	}
 
 	&:not(.card-selected):hover {
-		cursor: pointer;
 		background-color: var(--gray-50);
+		cursor: pointer;
 	}
+}
+
+header {
+	align-items: center;
+	display: flex;
 
-	& > div {
-		padding-left: var(--gap-small);
+	& > *:last-child {
+		margin-left: auto;
 	}
 }
 
 p {
 	color: var(--text-color-subdued);
+	font-size: var(--font-caption);
 }
-:deep(.p-divider) {
-	&.p-divider-horizontal {
-		margin-top: var(--gap);
-		margin-bottom: 0;
-		color: var(--gray-300);
-	}
+
+p + p {
+	margin-top: var(--gap-2);
 }
 </style>

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

@@ -45,7 +45,7 @@
 			</tera-slider-panel>
 		</template>
 		<tera-columnar-panel>
-			<tera-drilldown-section class="px-3 intervention-settings-section">
+			<tera-drilldown-section class="intervention-settings-section">
 				<template #header-controls-left> Add and configure intervention settings for this policy. </template>
 				<template #header-controls-right>
 					<Button outlined severity="secondary" label="Reset" @click="onResetPolicy" />
@@ -556,10 +556,28 @@ onMounted(() => {
 <style scoped>
 .intervention-settings-section {
 	background-color: var(--surface-100);
+	padding: 0 var(--gap-3);
 }
 
-ul {
-	list-style: none;
+.input-config {
+	ul {
+		list-style: none;
+	}
+	li {
+		& > * {
+			border-bottom: 1px solid var(--gray-300);
+			border-right: 1px solid var(--gray-300);
+		}
+		&:first-child > * {
+			border-top: 1px solid var(--gray-300);
+			border-top-left-radius: var(--border-radius);
+			border-top-right-radius: var(--border-radius);
+		}
+		&:last-child > * {
+			border-bottom-left-radius: var(--border-radius);
+			border-bottom-right-radius: var(--border-radius);
+		}
+	}
 }
 
 section {

packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue

@@ -242,7 +242,7 @@ import VegaChart from '@/components/widgets/VegaChart.vue';
 import { CiemssPresetTypes, DrilldownTabs } from '@/types/common';
 import { getModelConfigurationById } from '@/services/model-configurations';
 import { flattenInterventionData, getInterventionPolicyById } from '@/services/intervention-policy';
-import TeraInterventionSummaryCard from '@/components/workflow/ops/simulate-ciemss/tera-intervention-summary-card.vue';
+import TeraInterventionSummaryCard from '@/components/intervention-policy/tera-intervention-summary-card.vue';
 import TeraSaveSimulationModal from '@/components/project/tera-save-simulation-modal.vue';
 import { SimulateCiemssOperationState } from './simulate-ciemss-operation';
 import TeraChartControl from '../../tera-chart-control.vue';