Display config name and description in workflow node (#4980)

Co-authored-by: Brittany Kondo <[email protected]>

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>