Bring back save for re use in model operators (#5034)

packages/client/hmi-client/src/components/model/tera-model.vue

@@ -7,7 +7,7 @@
  :is-naming-asset="isNaming"
  :name="temporaryModel?.header.name"
  @close-preview="emit('close-preview')"
- show-table-of-contents
+ :show-table-of-contents="!isWorkflow"
  >
  <template #name-input>
  <tera-input-text
@@ -42,13 +42,14 @@
  :disabled="!(hasChanged && hasEditPermission)"
  />
  <Button
- v-if="!isWorkflow"
- :label="`Save ${isWorkflow ? 'for re-use' : 'as'}`"
+ v-if="isSaveForReuse"
+ label="Save for re-use"
  severity="secondary"
  outlined
- @click="onSaveAs"
+ @click="onSaveForReUse"
  :disabled="!hasEditPermission"
  />
+ <Button v-else label="Save as" severity="secondary" outlined @click="onSaveAs" :disabled="!hasEditPermission" />
  <Button label="Save" @click="onSave" :disabled="!(hasChanged && hasEditPermission)" />
  </aside>
  </template>
@@ -71,6 +72,7 @@
  :asset-type="AssetType.Model"
  :initial-name="temporaryModel?.header.name"
  :is-visible="showSaveModal"
+ :is-updating-asset="isSaveForReuse"
  :open-on-save="!isWorkflow"
  @close-modal="showSaveModal = false"
  @on-save="onModalSave"
@@ -107,6 +109,10 @@ const props = defineProps({
  isWorkflow: {
  type: Boolean,
  default: false
+ },
+ isSaveForReuse: {
+ type: Boolean,
+ default: false
  }
 });
 
@@ -145,13 +151,17 @@ function onSave() {
 function onSaveAs() {
  showSaveModal.value = true;
 }
+function onSaveForReUse() {
+ showSaveModal.value = true;
+}
 
 // Save modal
 function onModalSave(event: any) {
  showSaveModal.value = false;
  if (props.isWorkflow) {
  emit('on-save', event);
  }
+ fetchModel();
 }
 
 // User menu

packages/client/hmi-client/src/components/operator/tera-operator-placeholder.vue

@@ -1,8 +1,8 @@
 <template>
- <div class="placeholder-container">
+ <aside>
  <img :src="placeholderGraphic" alt="Plant icon" />
  <slot />
- </div>
+ </aside>
 </template>
 
 <script setup lang="ts">
@@ -17,21 +17,20 @@ const placeholderGraphic = props.node.imageUrl ?? plants;
 </script>
 
 <style scoped>
-.placeholder-container {
+aside {
+ color: var(--text-color-subdued);
  display: flex;
  flex-direction: column;
+ gap: var(--gap-6);
  justify-content: center;
- font-size: var(--font-caption);
- color: var(--text-color-subdued);
+ margin-top: var(--gap-8);
  text-align: center;
- gap: 0.5rem;
- padding: 0.5rem;
 }
 
 img {
  height: 5.5rem;
- max-height: 8rem;
  margin: 0 auto;
+ max-height: 8rem;
  pointer-events: none;
 }
 </style>

packages/client/hmi-client/src/components/widgets/tera-asset-enrichment.vue

@@ -1,6 +1,6 @@
 <template>
  <Button
- label="Enrich metadata with AI"
+ label="Enrich metadata"
  icon="pi pi-sparkles"
  :loading="isLoading"
  severity="secondary"

packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-drilldown.vue

@@ -56,7 +56,7 @@
  :value="executeResponse.value"
  :traceback="executeResponse.traceback"
  />
- <tera-model v-else-if="amr" is-workflow :assetId="amr.id" @on-save="updateNode" />
+ <tera-model v-else-if="amr" is-workflow is-save-for-reuse :assetId="amr.id" @on-save="updateNode" />
  <tera-progress-spinner v-else-if="isUpdatingModel || !amr" is-centered :font-size="2">
  Loading...
  </tera-progress-spinner>
@@ -351,15 +351,11 @@ watch(
 );
 
 function updateNode(model: Model) {
- const id = amr.value?.id;
- if (!id || !model) return;
-
+ if (!model) return;
  amr.value = model;
- const outputPort = cloneDeep(props.node.outputs?.find((port) => port.value?.[0] === id));
-
+ const outputPort = cloneDeep(props.node.outputs?.find((port) => port.value?.[0] === model.id));
  if (!outputPort) return;
  outputPort.label = model.header.name;
-
  emit('update-output', outputPort);
 }
 

packages/client/hmi-client/src/components/workflow/ops/model-from-equations/tera-model-from-equations-drilldown.vue

@@ -7,7 +7,12 @@
  @update-state="(state: any) => emit('update-state', state)"
  >
  <template #sidebar>
- <tera-slider-panel v-model:is-open="isDocViewerOpen" header="Document Viewer" content-width="100%">
+ <tera-slider-panel
+ v-if="document"
+ v-model:is-open="isDocViewerOpen"
+ header="Document Viewer"
+ content-width="100%"
+ >
  <template #content>
  <tera-drilldown-section :is-loading="isFetchingPDF">
  <tera-pdf-embed ref="pdfViewer" v-if="pdfLink" :pdf-link="pdfLink" :title="document?.name || ''" />
@@ -122,8 +127,17 @@
  <tera-slider-panel v-model:is-open="isOutputOpen" header="Output" content-width="100%">
  <template #content>
  <tera-drilldown-preview>
- <tera-model v-if="selectedModel" is-workflow :assetId="selectedModel.id" @on-save="onModelSaveEvent" />
- <tera-operator-placeholder v-else :node="node" class="h-100" />
+ <tera-model
+ v-if="selectedModel"
+ is-workflow
+ is-save-for-reuse
+ :assetId="selectedModel.id"
+ @on-save="onModelSaveEvent"
+ />
+ <tera-operator-placeholder v-else :node="node" class="h-100">
+ <p v-if="loadingModel">Model is being created...</p>
+ <p v-else>Select equations to create a model</p>
+ </tera-operator-placeholder>
  </tera-drilldown-preview>
  </template>
  </tera-slider-panel>
@@ -155,9 +169,9 @@ import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
 import TeraPdfEmbed from '@/components/widgets/tera-pdf-embed.vue';
 import TeraTextEditor from '@/components/documents/tera-text-editor.vue';
-import { ModelFromEquationsOperation, ModelFromEquationsState, EquationBlock } from './model-from-equations-operation';
+import { ModelFromEquationsState, EquationBlock } from './model-from-equations-operation';
 
-const emit = defineEmits(['close', 'update-state', 'append-output', 'select-output']);
+const emit = defineEmits(['close', 'update-state', 'append-output', 'update-output', 'select-output']);
 const props = defineProps<{
  node: WorkflowNode<ModelFromEquationsState>;
 }>();
@@ -395,17 +409,12 @@ function getEquationErrorLabel(equation) {
  return equation.asset.extractionError ? "Couldn't extract equation" : '';
 }
 
-function onModelSaveEvent(event: any) {
- const state = cloneDeep(props.node.state);
- state.modelId = event.id;
- emit('update-state', state);
- emit('append-output', {
- type: ModelFromEquationsOperation.outputs[0].type,
- label: event.header.name,
- value: [event.id],
- state,
- isSelected: false
- });
+function onModelSaveEvent(model: Model) {
+ if (!model) return;
+ const outputPort = cloneDeep(props.node.outputs?.find((port) => port.value?.[0] === model.id));
+ if (!outputPort) return;
+ outputPort.label = model.header.name;
+ emit('update-output', outputPort);
 }
 
 // generates the model card and fetches the model when finished

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

@@ -5,7 +5,7 @@
  @update-state="(state: any) => emit('update-state', state)"
  >
  <tera-drilldown-section>
- <tera-model v-if="node.state.modelId" :asset-id="node.state.modelId" :is-workflow="true" @on-save="onSaveEvent" />
+ <tera-model v-if="node.state.modelId" :asset-id="node.state.modelId" is-workflow @on-save="onSaveEvent" />
  </tera-drilldown-section>
  </tera-drilldown>
 </template>

packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-drilldown.vue

@@ -81,7 +81,7 @@
  :value="executeResponse.value"
  :traceback="executeResponse.traceback"
  />
- <tera-model v-else-if="outputAmr" is-workflow :assetId="outputAmr.id" @on-save="updateNode" />
+ <tera-model v-else-if="outputAmr" is-workflow is-save-for-reuse :assetId="outputAmr.id" @on-save="updateNode" />
  <template v-else>
  <tera-progress-spinner v-if="isStratifyInProgress" is-centered :font-size="2">
  Processing...
@@ -429,15 +429,11 @@ const hasCodeChange = () => {
 const checkForCodeChange = debounce(hasCodeChange, 100);
 
 function updateNode(model: Model) {
- const id = outputAmr.value?.id;
- if (!id || !model) return;
-
+ if (!model) return;
  outputAmr.value = model;
- const outputPort = cloneDeep(props.node.outputs?.find((port) => port.value?.[0] === id));
-
+ const outputPort = cloneDeep(props.node.outputs?.find((port) => port.value?.[0] === model.id));
  if (!outputPort) return;
  outputPort.label = model.header.name;
-
  emit('update-output', outputPort);
 }