5663 look into simulate operator for polling spinner

packages/client/hmi-client/src/api/api.ts

@@ -108,9 +108,9 @@ export interface PollerResult<T> {
 }
 
 export class Poller<T> {
-	pollingInterval = 2000;
+	pollingInterval = 3000;
 
-	pollingThreshold = 10;
+	pollingThreshold = 150;
 
 	keepGoing = false;
 

packages/client/hmi-client/src/components/drilldown/tera-drilldown-preview.vue

@@ -1,9 +1,8 @@
 <template>
-	<tera-drilldown-section>
+	<tera-drilldown-section :is-loading="isLoading">
 		<div class="content-container">
 			<main>
-				<slot v-if="!isLoading" />
-				<tera-progress-spinner v-else :font-size="2" is-centered style="height: 100%" />
+				<slot />
 			</main>
 		</div>
 		<template #footer v-if="slots.footer">
@@ -15,7 +14,6 @@
 <script setup lang="ts">
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
 import { useSlots } from 'vue';
-import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 
 defineProps<{
 	isLoading?: boolean;

packages/client/hmi-client/src/components/drilldown/tera-drilldown-section.vue

@@ -9,8 +9,16 @@
 			</div>
 		</header>
 		<main ref="main" @scroll="handleScroll">
-			<slot v-if="!isLoading" />
-			<tera-progress-spinner v-else :font-size="2" is-centered />
+			<slot v-if="!isLoading || showSlotWhileLoading" />
+			<tera-progress-spinner v-if="isLoading" :font-size="2" is-centered>
+				<span v-if="!loadingMessage">Processing... </span>
+				<span v-if="loadingProgress">{{ loadingProgress }}% </span>
+				<span v-if="loadingProgress && loadingMessage">{{ loadingMessage }}</span>
+			</tera-progress-spinner>
+			<div v-else-if="isBlank" class="empty-state">
+				<Vue3Lottie :animationData="EmptySeed" :height="150" :width="150" loop autoplay />
+				<p>{{ blankMessage }}</p>
+			</div>
 		</main>
 		<footer v-if="slots.footer">
 			<slot name="footer" />
@@ -20,10 +28,17 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed, useSlots } from 'vue';
+import { Vue3Lottie } from 'vue3-lottie';
+import EmptySeed from '@/assets/images/lottie-empty-seed.json';
 import TeraProgressSpinner from '../widgets/tera-progress-spinner.vue';
 
 defineProps<{
 	isLoading?: boolean;
+	showSlotWhileLoading?: boolean;
+	isBlank?: boolean;
+	blankMessage?: string;
+	loadingMessage?: string;
+	loadingProgress?: number;
 }>();
 
 const slots = useSlots();
@@ -92,6 +107,18 @@ main {
 	flex-direction: column;
 	flex-grow: 1;
 	overflow-y: auto;
+
+	.empty-state {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--gap-4);
+		text-align: center;
+		pointer-events: none;
+	}
 }
 
 .notebook-section {

packages/client/hmi-client/src/components/operator/tera-operator-output-summary.vue

@@ -76,17 +76,14 @@ function cancelEdit() {
 const poller = new Poller<Summary>();
 async function pollSummary() {
 	isLoading.value = true;
-	poller
-		.setInterval(3000)
-		.setThreshold(15)
-		.setPollAction(async () => {
-			const summaryMap = await getSummaries([props.summaryId]);
-			const summaryObj = summaryMap[props.summaryId];
-			if (summaryObj && summaryObj.generatedSummary) {
-				return { data: summaryObj, progress: null, error: null };
-			}
-			return { data: null, progress: null, error: null };
-		});
+	poller.setThreshold(15).setPollAction(async () => {
+		const summaryMap = await getSummaries([props.summaryId]);
+		const summaryObj = summaryMap[props.summaryId];
+		if (summaryObj && summaryObj.generatedSummary) {
+			return { data: summaryObj, progress: null, error: null };
+		}
+		return { data: null, progress: null, error: null };
+	});
 	const pollerResult = await poller.start();
 	if (pollerResult.state === PollerState.Cancelled) {
 		return;

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

@@ -223,7 +223,13 @@
 
 		<!-- Output section -->
 		<template #preview>
-			<tera-drilldown-section v-if="showOutputSection">
+			<tera-drilldown-section
+				:is-loading="isLoading"
+				:show-slot-while-loading="true"
+				:loading-progress="props.node.state.currentProgress"
+				:is-blank="!showOutputSection"
+				:blank-message="'Click \'Run\' to begin calibrating'"
+			>
 				<template #header-controls-left>
 					<h5 v-if="configuredModelConfig?.name" class="ml-3">{{ configuredModelConfig.name }}</h5>
 				</template>
@@ -246,7 +252,7 @@
 					class="p-3"
 					:summary-id="node.state.summaryId"
 				/>
-				<Accordion :active-index="lossActiveIndex" class="px-2" v-if="!isLoading">
+				<Accordion :active-index="lossActiveIndex" class="px-2">
 					<AccordionTab header="Loss">
 						<!-- Loss chart -->
 						<div ref="lossChartContainer">
@@ -343,17 +349,7 @@
 						<p class="helpMessage">Connect a model configuration and dataset</p>
 					</section>
 				</div>
-
-				<section v-else class="emptyState">
-					<tera-progress-spinner :font-size="2" is-centered style="height: 12rem" />
-					<p>Processing...{{ props.node.state.currentProgress }}%</p>
-				</section>
 			</tera-drilldown-section>
-			<!-- Empty state if calibrate hasn't been run yet -->
-			<section v-else class="output-section-empty-state">
-				<Vue3Lottie :animationData="EmptySeed" :height="150" loop autoplay />
-				<p class="helpMessage">Click 'Run' to begin calibrating</p>
-			</section>
 		</template>
 
 		<template #sidebar-right>
@@ -497,11 +493,8 @@ import {
 	parseCsvAsset
 } from '@/services/calibrate-workflow';
 import { deleteAnnotation, updateChartSettingsBySelectedVariables } from '@/services/chart-settings';
-import { Vue3Lottie } from 'vue3-lottie';
-import EmptySeed from '@/assets/images/lottie-empty-seed.json';
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
-import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 import TeraNotebookError from '@/components/drilldown/tera-notebook-error.vue';
 import TeraOperatorOutputSummary from '@/components/operator/tera-operator-output-summary.vue';
 import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';

packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue

@@ -171,8 +171,6 @@ const variableCharts = useVariableCharts(selectedVariableSettings, groundTruth);
 const poller = new Poller();
 const pollResult = async (runId: string) => {
 	poller
-		.setInterval(3000)
-		.setThreshold(350)
 		.setPollAction(async () => pollAction(runId))
 		.setProgressAction((data: Simulation) => {
 			if (data?.updates?.length) {

packages/client/hmi-client/src/components/workflow/ops/calibrate-ensemble-ciemss/tera-calibrate-ensemble-ciemss-drilldown.vue

@@ -189,7 +189,11 @@
 			<h4>Notebook</h4>
 		</section>
 		<template #preview>
-			<tera-drilldown-section>
+			<tera-drilldown-section
+				:is-loading="isRunInProgress"
+				:show-slot-while-loading="true"
+				:loading-progress="node.state.currentProgress"
+			>
 				<section class="pb-3 px-2">
 					<div class="mx-2" ref="chartWidthDiv"></div>
 					<Accordion multiple :active-index="[0, 1, 2, 3]">
@@ -240,9 +244,6 @@
 							</AccordionTab>
 						</template>
 					</Accordion>
-					<tera-progress-spinner v-if="isRunInProgress" :font-size="2" is-centered style="height: 100%">
-						{{ node.state.currentProgress }}%
-					</tera-progress-spinner>
 					<tera-notebook-error v-bind="node.state.errorMessage" />
 				</section>
 			</tera-drilldown-section>
@@ -336,7 +337,6 @@ import Divider from 'primevue/divider';
 import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import AccordionTab from 'primevue/accordiontab';
 import Accordion from 'primevue/accordion';
-import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 import Dropdown from 'primevue/dropdown';
 import { setupDatasetInput, setupCsvAsset, setupModelInput, parseCsvAsset } from '@/services/calibrate-workflow';
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';

packages/client/hmi-client/src/components/workflow/ops/calibrate-ensemble-ciemss/tera-calibrate-ensemble-node-ciemss.vue

@@ -73,8 +73,6 @@ const lossChartSize = { width: 180, height: 120 };
 const poller = new Poller();
 const pollResult = async (runId: string) => {
 	poller
-		.setInterval(3000)
-		.setThreshold(300)
 		.setPollAction(async () => pollAction(runId))
 		.setProgressAction((data: Simulation) => {
 			if (data?.updates?.length) {

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

@@ -156,11 +156,8 @@
 			</template>
 		</tera-slider-panel>
 		<template #preview>
-			<tera-drilldown-preview>
-				<tera-progress-spinner v-if="showSpinner" :font-size="2" is-centered style="height: 100%">
-					{{ props.node.state.currentProgress }}%
-				</tera-progress-spinner>
-				<template v-else-if="!isEmpty(node.state.runId)">
+			<tera-drilldown-preview :is-loading="showSpinner" :loading-progress="props.node.state.currentProgress">
+				<template v-if="!isEmpty(node.state.runId)">
 					<header class="flex align-items-start">
 						<div>
 							<h4>{{ validatedModelConfiguration?.name }}</h4>
@@ -345,15 +342,13 @@ import { VAceEditor } from 'vue3-ace-editor';
 import { saveCodeToState } from '@/services/notebook';
 
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
-import TeraDrilldownPreview from '@/components/drilldown/tera-drilldown-preview.vue';
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
 import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
 import TeraModelPart from '@/components/model/model-parts/tera-model-part.vue';
 import TeraInitialTable from '@/components/model/petrinet/tera-initial-table.vue';
 import TeraParameterTable from '@/components/model/petrinet/tera-parameter-table.vue';
 import TeraModelDiagram from '@/components/model/petrinet/tera-model-diagram.vue';
 
-import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 import TeraToggleableInput from '@/components/widgets/tera-toggleable-input.vue';
 
 import TeraChartControl from '@/components/workflow/tera-chart-control.vue';

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

@@ -116,12 +116,7 @@
 					:options="{ showPrintMargin: false }"
 				/>
 			</tera-drilldown-section>
-			<tera-drilldown-preview>
-				<tera-progress-spinner
-					v-if="isLoadingStructuralComparisons && isEmpty(structuralComparisons)"
-					is-centered
-					:font-size="3"
-				/>
+			<tera-drilldown-preview :is-loading="isLoadingStructuralComparisons && isEmpty(structuralComparisons)">
 				<ul>
 					<li v-for="(image, index) in structuralComparisons" :key="index">
 						<label>Comparison {{ index + 1 }}: {{ getTitle(index) }}</label>
@@ -177,7 +172,6 @@ import { VAceEditor } from 'vue3-ace-editor';
 import { VAceEditorInstance } from 'vue3-ace-editor/types';
 import TeraNotebookJupyterInput from '@/components/llm/tera-notebook-jupyter-input.vue';
 import Image from 'primevue/image';
-import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 import { saveCodeToState } from '@/services/notebook';
 import { addImage, deleteImages, getImages } from '@/services/image';
 import TeraColumnarPanel from '@/components/widgets/tera-columnar-panel.vue';

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

@@ -201,6 +201,11 @@
 		<!-- Preview tab -->
 		<template #preview>
 			<tera-drilldown-section
+				:is-loading="showSpinner"
+				:loading-progress="props.node.state.currentProgress"
+				:loading-message="'of maximum iterations complete'"
+				:is-blank="showSpinner && node.state.inProgressOptimizeId === ''"
+				:blank-message="'Optimize complete. Running simulations'"
 				class="ml-3 mr-3"
 				:class="{
 					'failed-run': optimizationResult.success === 'False',
@@ -219,12 +224,6 @@
 						@click="showSaveInterventionPolicy = true"
 					/>
 				</template>
-				<tera-progress-spinner v-if="showSpinner" :font-size="2" is-centered style="height: 100%">
-					<div v-if="node.state.inProgressOptimizeId !== ''">
-						{{ props.node.state.currentProgress }}% of maximum iterations complete
-					</div>
-					<div v-else>Optimize complete. Running simulations</div>
-				</tera-progress-spinner>
 				<tera-operator-output-summary v-if="node.state.summaryId && !showSpinner" :summary-id="node.state.summaryId" />
 				<!-- Optimize result.json display: -->
 				<div
@@ -438,7 +437,6 @@ import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.
 import TeraSaveDatasetFromSimulation from '@/components/dataset/tera-save-dataset-from-simulation.vue';
 import TeraPyciemssCancelButton from '@/components/pyciemss/tera-pyciemss-cancel-button.vue';
 import TeraOperatorOutputSummary from '@/components/operator/tera-operator-output-summary.vue';
-import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 import { getModelByModelConfigurationId, getCalendarSettingsFromModel } from '@/services/model';
 import { getModelConfigurationById } from '@/services/model-configurations';
 import {

packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-node.vue

@@ -100,8 +100,6 @@ const showSpinner = computed<boolean>(
 const poller = new Poller();
 const pollResult = async (runId: string) => {
 	poller
-		.setInterval(5000)
-		.setThreshold(350)
 		.setPollAction(async () => pollAction(runId))
 		.setProgressAction((data: Simulation) => {
 			if (runId === props.node.state.inProgressOptimizeId && data.updates.length > 0) {