UX changes to create intervention policy

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

@@ -12,7 +12,10 @@ export const InterventionPolicyOperation: Operation = {
 	description: 'Create intervention policy',
 	displayName: 'Create intervention policy',
 	isRunnable: true,
-	inputs: [{ type: 'modelId', label: 'Model' }],
+	inputs: [
+		{ type: 'modelId', label: 'Model' },
+		{ type: 'documentId', label: 'Document', isOptional: true }
+	],
 	outputs: [{ type: 'policyInterventionId', label: 'Intervention Policy' }],
 	action: () => {},
 

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

@@ -26,22 +26,25 @@
 		<section>
 			<div class="flex align-items-center flex-wrap gap-2">
 				Set
-				<Dropdown
-					:model-value="intervention.type"
-					@change="onSemanticChange"
-					:options="interventionSemanticOptions"
-					option-label="label"
-					option-value="value"
-				/>
-				<Dropdown
-					:model-value="intervention.appliedTo"
-					@change="onAppliedToParameterChange"
-					:options="semanticOptions"
-					option-label="label"
-					option-value="value"
-					placeholder="Select"
-				/>
-
+				<section>
+					<Dropdown
+						class="type-menu"
+						:model-value="intervention.type"
+						@change="onSemanticChange"
+						:options="interventionSemanticOptions"
+						option-label="label"
+						option-value="value"
+					/>
+					<Dropdown
+						class="applied-to-menu"
+						:model-value="intervention.appliedTo"
+						@change="onAppliedToParameterChange"
+						:options="semanticOptions"
+						option-label="label"
+						option-value="value"
+						placeholder="Select"
+					/>
+				</section>
 				<!-- Static -->
 				<template v-if="interventionType === 'static'">
 					to
@@ -112,7 +115,7 @@
 						@update:model-value="(val) => onUpdateThreshold(val, 0)"
 						placeholder="threshold"
 					/>
-					.
+					{{ dynamicInterventionUnits }}.
 				</template>
 			</div>
 		</section>
@@ -143,8 +146,8 @@ import Divider from 'primevue/divider';
 const emit = defineEmits(['update', 'delete', 'add']);
 const props = defineProps<{
 	intervention: Intervention;
-	parameterOptions: { label: string; value: string }[];
-	stateOptions: { label: string; value: string }[];
+	parameterOptions: { label: string; value: string; units?: string }[];
+	stateOptions: { label: string; value: string; units?: string }[];
 }>();
 
 const interventionSemanticOptions = [
@@ -169,6 +172,19 @@ const interventionType = computed(() => {
 	return 'static';
 });
 
+const dynamicInterventionUnits = computed(() => {
+	let units = '';
+	const type = props.intervention.type;
+	const appliedTo = props.intervention.appliedTo;
+
+	if (type === InterventionSemanticType.Parameter) {
+		units = props.parameterOptions.find((parameter) => parameter.label === appliedTo)?.units ?? '';
+	} else {
+		units = props.stateOptions.find((state) => state.label === appliedTo)?.units ?? '';
+	}
+	return units;
+});
+
 const onUpdateName = (name: string) => {
 	const intervention = cloneDeep(props.intervention);
 	intervention.name = name;
@@ -271,6 +287,15 @@ const debounceUpdateState = debounce((intervention) => {
 	}
 }
 
+.type-menu {
+	border-radius: var(--border-radius) 0 0 var(--border-radius);
+	background: var(--surface-200);
+}
+
+.applied-to-menu {
+	border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+
 .intervention-card {
 	background-color: var(--surface-50);
 	border: 1px solid var(--surface-border-light);

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

@@ -15,6 +15,16 @@
 			>
 				<template #content>
 					<section>
+						<nav class="inline-flex">
+							<!-- Disabled until Backend code is complete -->
+							<!-- <Button class="flex-1 mr-1" outlined severity="secondary" label="Extract from inputs" /> -->
+							<Button
+								class="flex-1 ml-1"
+								label="Create New"
+								:disabled="!model?.id"
+								@click="createNewInterventionPolicy"
+							/>
+						</nav>
 						<tera-input-text v-model="filterInterventionsText" placeholder="Filter" />
 						<ul v-if="!isFetchingPolicies">
 							<li v-for="policy in interventionPoliciesFiltered" :key="policy.id">
@@ -136,9 +146,9 @@
 		</tera-columnar-panel>
 	</tera-drilldown>
 	<tera-save-asset-modal
-		:initial-name="knobs.transientInterventionPolicy.name"
+		:initial-name="showCreatePolicyModal ? 'New Intervention Policy' : knobs.transientInterventionPolicy.name"
 		:is-visible="showSaveModal"
-		:asset="knobs.transientInterventionPolicy"
+		:asset="showCreatePolicyModal ? newBlankInterventionPolicy : knobs.transientInterventionPolicy"
 		:asset-type="AssetType.InterventionPolicy"
 		@close-modal="showSaveModal = false"
 		@on-save="onSaveAsInterventionPolicy"
@@ -203,7 +213,14 @@ const knobs = ref<BasicKnobs>({
 	}
 });
 
+const newBlankInterventionPolicy = ref({
+	name: '',
+	modelId: '',
+	interventions: [blankIntervention]
+});
+
 const showSaveModal = ref(false);
+const showCreatePolicyModal = ref(false);
 const isSidebarOpen = ref(true);
 const filterInterventionsText = ref('');
 const model = ref<Model | null>(null);
@@ -247,15 +264,17 @@ const parameterOptions = computed(() => {
 	if (!model.value) return [];
 	return getParameters(model.value).map((parameter) => ({
 		label: parameter.id,
-		value: parameter.id
+		value: parameter.id,
+		units: parameter.units?.expression
 	}));
 });
 
 const stateOptions = computed(() => {
 	if (!model.value) return [];
 	return getStates(model.value).map((state) => ({
 		label: state.id,
-		value: state.id
+		value: state.id,
+		units: state.units?.expression
 	}));
 });
 
@@ -403,6 +422,7 @@ const onResetPolicy = () => {
 };
 
 const onSaveAsInterventionPolicy = (data: InterventionPolicy) => {
+	showCreatePolicyModal.value = false;
 	applyInterventionPolicy(data);
 };
 
@@ -424,6 +444,13 @@ const onSaveInterventionPolicy = async () => {
 	}
 };
 
+const createNewInterventionPolicy = () => {
+	if (!model.value?.id) return;
+	showCreatePolicyModal.value = true;
+	newBlankInterventionPolicy.value.modelId = model.value.id;
+	showSaveModal.value = true;
+};
+
 watch(
 	() => knobs.value,
 	async () => {