Intervention node - show summary card and selectable node chart (#5747)

DARPA-ASKEM · Dec 5, 2024 · 8b4e8e0 · 8b4e8e0
1 parent 23b7792
commit 8b4e8e0
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git a/...i-client/src/components/workflow/ops/intervention-policy/intervention-policy-operation.ts b/...i-client/src/components/workflow/ops/intervention-policy/intervention-policy-operation.ts
@@ -6,6 +6,7 @@ import { isEqual, omit } from 'lodash';
 export interface InterventionPolicyState extends BaseState {
 	interventionPolicy: InterventionPolicy;
 	taskIds: string[];
+	selectedCharts?: string[];
 }
 
 export const InterventionPolicyOperation: Operation = {

diff --git a/...nt/src/components/workflow/ops/intervention-policy/tera-intervention-policy-drilldown.vue b/...nt/src/components/workflow/ops/intervention-policy/tera-intervention-policy-drilldown.vue
@@ -143,6 +143,16 @@
 									:are-embed-actions-visible="false"
 									:visualization-spec="preparedCharts[appliedTo]"
 								/>
+								<span class="flex justify-content-end pr-7 pb-6">
+									<label class="pr-2">Display on node thumbnail</label>
+									<Checkbox
+										v-model="selectedCharts"
+										:input-id="appliedTo"
+										:name="appliedTo"
+										:value="appliedTo"
+										@change="onSelectChartChange"
+									/>
+								</span>
 								<ul>
 									<li
 										class="pb-2"
@@ -226,6 +236,7 @@ import {
 } from '@/services/intervention-policy';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
+import Checkbox from 'primevue/checkbox';
 import Textarea from 'primevue/textarea';
 import EmptySeed from '@/assets/images/lottie-empty-seed.json';
 import { Vue3Lottie } from 'vue3-lottie';
@@ -252,6 +263,8 @@ const props = defineProps<{
 
 const emit = defineEmits(['close', 'update-state', 'select-output', 'append-output']);
 
+const selectedCharts = ref<string[] | []>([]);
+
 const confirm = useConfirm();
 
 interface BasicKnobs {
@@ -397,6 +410,7 @@ const initialize = async (overwriteWithState: boolean = false) => {
 	} else {
 		knobs.value.transientInterventionPolicy = cloneDeep(state.interventionPolicy);
 	}
+	selectedCharts.value = state.selectedCharts ?? [];
 };
 
 const applyInterventionPolicy = (interventionPolicy: InterventionPolicy) => {
@@ -593,6 +607,12 @@ const extractInterventionPolicyFromInputs = async () => {
 	emit('update-state', state);
 };
 
+const onSelectChartChange = () => {
+	const state = cloneDeep(props.node.state);
+	state.selectedCharts = selectedCharts.value;
+	emit('update-state', state);
+};
+
 watch(
 	() => knobs.value,
 	async () => {

diff --git a/...-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-node.vue b/...-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-node.vue
@@ -1,7 +1,7 @@
 <template>
 	<section>
 		<ul v-if="node.state.interventionPolicy.id">
-			<li v-for="(_interventions, appliedTo) in groupedOutputParameters" :key="appliedTo">
+			<li v-for="(_interventions, appliedTo) in selectedOutputParameters" :key="appliedTo">
 				<vega-chart
 					expandable
 					:are-embed-actions-visible="false"
@@ -11,6 +11,12 @@
 			</li>
 		</ul>
 		<tera-operator-placeholder :node="node" v-else />
+		<tera-intervention-summary-card
+			class="intervention-title"
+			v-for="(intervention, index) in node.state.interventionPolicy.interventions"
+			:intervention="intervention"
+			:key="index"
+		/>
 		<tera-progress-spinner is-centered :font-size="2" v-if="isLoading" />
 		<Button
 			:label="isModelInputConnected ? 'Open' : 'Attach a model'"
@@ -34,6 +40,7 @@ import VegaChart from '@/components/widgets/VegaChart.vue';
 import { useClientEvent } from '@/composables/useClientEvent';
 import { type ClientEvent, ClientEventType, type TaskResponse, TaskStatus } from '@/types/Types';
 import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
+import TeraInterventionSummaryCard from '@/components/intervention-policy/tera-intervention-summary-card.vue';
 import { InterventionPolicyState } from './intervention-policy-operation';
 
 const emit = defineEmits(['open-drilldown', 'update-state']);
@@ -59,12 +66,19 @@ const isModelInputConnected = computed(() => modelInput?.status === WorkflowPort
 
 const groupedOutputParameters = computed(() =>
 	Object.fromEntries(
-		Object.entries(
-			groupBy(flattenInterventionData(props.node.state.interventionPolicy.interventions), 'appliedTo')
-		).slice(0, 4) // Show a max of 4 charts
+		Object.entries(groupBy(flattenInterventionData(props.node.state.interventionPolicy.interventions), 'appliedTo'))
 	)
 );
 
+const selectedOutputParameters = computed(() => {
+	const charts = {};
+	props.node.state.selectedCharts?.forEach((chart) => {
+		const paramOutput = groupedOutputParameters.value[chart];
+		if (paramOutput) charts[chart] = paramOutput;
+	});
+	return charts;
+});
+
 const preparedCharts = computed(() =>
 	_.mapValues(groupedOutputParameters.value, (interventions, key) =>
 		createInterventionChart(interventions, {
@@ -119,4 +133,9 @@ watch(
 ul {
 	list-style-type: none;
 }
+.intervention-title {
+	& > :deep(h5) {
+		padding-top: 15px;
+	}
+}
 </style>