show intervention charts on nodes (#4829)

Co-authored-by: Cole Blanchard <cblanchard@Cole-Blanchards-MacBook-Pro.local> Co-authored-by: Yohann Paris <github@yohannparis.com>
DARPA-ASKEM · Sep 17, 2024 · 3f34b8c · 3f34b8c
1 parent ecbfb69
commit 3f34b8c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 9 deletions.
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
@@ -70,7 +70,7 @@
 					<Button label="Save as..." outlined severity="secondary" @click="showSaveModal = true" />
 					<Button class="mr-3" label="Save" @click="onSaveInterventionPolicy" :disabled="isSaveDisabled" />
 				</template>
-				<Accordion v-if="knobs.transientInterventionPolicy.id" multiple :active-index="[0, 1]">
+				<Accordion v-if="knobs.transientInterventionPolicy" multiple :active-index="[0, 1]">
 					<AccordionTab>
 						<template #header>
 							<Button v-if="!isEditingDescription" class="start-edit" text @click.stop="onEditDescription">
@@ -97,7 +97,6 @@
 					<AccordionTab header="Charts">
 						<ul class="flex flex-column gap-2">
 							<li v-for="(interventions, appliedTo) in groupedOutputParameters" :key="appliedTo">
-								<h5 class="pb-2">{{ appliedTo }}</h5>
 								<vega-chart
 									expandable
 									:are-embed-actions-visible="false"
@@ -267,7 +266,15 @@ const groupedOutputParameters = computed(() =>
 );
 
 const preparedCharts = computed(() =>
-	_.mapValues(groupedOutputParameters.value, (interventions) => createInterventionChart(interventions))
+	_.mapValues(groupedOutputParameters.value, (interventions, key) =>
+		createInterventionChart(interventions, {
+			title: key,
+			width: 400,
+			height: 200,
+			xAxisTitle: 'Time',
+			yAxisTitle: 'Value'
+		})
+	)
 );
 
 const initialize = async (overwriteWithState: boolean = false) => {

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,6 +1,11 @@
 <template>
 	<section>
-		<tera-operator-placeholder :node="node" />
+		<ul v-if="node.state.interventionPolicy.id">
+			<li v-for="(_interventions, appliedTo) in groupedOutputParameters" :key="appliedTo">
+				<vega-chart expandable :are-embed-actions-visible="false" :visualization-spec="preparedCharts[appliedTo]" />
+			</li>
+		</ul>
+		<tera-operator-placeholder :node="node" v-else />
 		<Button
 			:label="isModelInputConnected ? 'Open' : 'Attach a model'"
 			@click="emit('open-drilldown')"
@@ -16,8 +21,10 @@ import { computed, watch } from 'vue';
 import { WorkflowNode, WorkflowPortStatus } from '@/types/workflow';
 import Button from 'primevue/button';
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
-import { cloneDeep } from 'lodash';
+import _, { cloneDeep, groupBy } from 'lodash';
 import { blankIntervention } from '@/services/intervention-policy';
+import { createInterventionChart } from '@/services/charts';
+import VegaChart from '@/components/widgets/VegaChart.vue';
 import { InterventionPolicyState } from './intervention-policy-operation';
 
 const emit = defineEmits(['open-drilldown', 'update-state']);
@@ -28,6 +35,20 @@ const props = defineProps<{
 const modelInput = props.node.inputs.find((input) => input.type === 'modelId');
 const isModelInputConnected = computed(() => modelInput?.status === WorkflowPortStatus.CONNECTED);
 
+const groupedOutputParameters = computed(() => groupBy(props.node.state.interventionPolicy.interventions, 'appliedTo'));
+
+const preparedCharts = computed(() =>
+	_.mapValues(groupedOutputParameters.value, (interventions, key) =>
+		createInterventionChart(interventions, {
+			title: key,
+			width: 180,
+			height: 120,
+			xAxisTitle: 'Time',
+			yAxisTitle: 'Value'
+		})
+	)
+);
+
 watch(
 	() => props.node.inputs,
 	(inputs) => {
@@ -46,3 +67,9 @@ watch(
 	{ deep: true }
 );
 </script>
+
+<style scoped>
+ul {
+	list-style-type: none;
+}
+</style>
diff --git a/packages/client/hmi-client/src/services/charts.ts b/packages/client/hmi-client/src/services/charts.ts
@@ -909,11 +909,21 @@ export function createInterventionChartMarkers(interventions: Intervention[]): a
 	return [markerSpec, labelSpec];
 }
 
-export function createInterventionChart(interventions: Intervention[]) {
+export function createInterventionChart(interventions: Intervention[], chartOptions: Omit<BaseChartOptions, 'legend'>) {
 	const interventionsData = flattenInterventionData(interventions);
+	const titleObj = chartOptions.title
+		? {
+				text: chartOptions.title,
+				anchor: 'start',
+				subtitle: ' ',
+				subtitlePadding: 4
+			}
+		: null;
 	const spec: any = {
 		$schema: VEGALITE_SCHEMA,
-		width: 400,
+		width: chartOptions.width,
+		title: titleObj,
+		height: chartOptions.height,
 		autosize: {
 			type: 'fit-x'
 		},
@@ -929,8 +939,8 @@ export function createInterventionChart(interventions: Intervention[]) {
 			data: { values: interventionsData },
 			mark: 'point',
 			encoding: {
-				x: { field: 'time', type: 'quantitative' },
-				y: { field: 'value', type: 'quantitative' }
+				x: { field: 'time', type: 'quantitative', title: chartOptions.xAxisTitle },
+				y: { field: 'value', type: 'quantitative', title: chartOptions.yAxisTitle }
 			}
 		});
 	}