From af1fb66246606b274e9e5f405086211c4f7737e7 Mon Sep 17 00:00:00 2001
From: Brittany Kondo <bkondo@uncharted.software>
Date: Wed, 2 Oct 2024 12:53:00 -0400
Subject: [PATCH] Display config name and description in workflow node (#4980)

Co-authored-by: Brittany Kondo <bkondo@brittanys-mbp.home>
---
 .../ops/model-config/tera-model-config-node.vue    | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-node.vue b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-node.vue
index e96af9752c..a8e9495a99 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-node.vue
@@ -1,6 +1,11 @@
 <template>
 	<section>
-		<tera-operator-placeholder :node="node" />
+		<div v-if="!isEmpty(node.state.transientModelConfig.id)" class="pl-2 pr-2 pb-3">
+			<h6 class="pb-2">{{ node.state.transientModelConfig.name }}</h6>
+			<p>{{ node.state.transientModelConfig.description }}</p>
+		</div>
+		<tera-operator-placeholder v-else :node="node" />
+
 		<tera-progress-spinner is-centered :font-size="2" v-if="isLoading" />
 		<Button
 			:label="isModelInputConnected ? 'Open' : 'Attach a model'"
@@ -13,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { cloneDeep, omit } from 'lodash';
+import { cloneDeep, omit, isEmpty } from 'lodash';
 import { computed, watch, ref } from 'vue';
 import { WorkflowNode, WorkflowPortStatus } from '@/types/workflow';
 import Button from 'primevue/button';
@@ -120,3 +125,8 @@ watch(
 	}
 );
 </script>
+<style scoped>
+h6 + p {
+	color: var(--text-color-subdued);
+}
+</style>