From f483964061daf4e2567e64b98a67d34b13b8e370 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Sun, 31 May 2026 17:16:58 +0100
Subject: [PATCH 1/2] feat: add pause functionality in ThermalChart

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/components/ui/AppChart.vue                | 10 ++++-
 .../widgets/bedmesh/BedMeshChart.vue          |  9 +++-
 .../widgets/thermals/ThermalChart.vue         | 43 +++++++++++++++++--
 3 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/AppChart.vue b/src/components/ui/AppChart.vue
index e73462ee3e..7d7bcdadc8 100644
--- a/src/components/ui/AppChart.vue
+++ b/src/components/ui/AppChart.vue
@@ -9,8 +9,8 @@
         ref="chart"
         style="overflow: initial;"
         :option="opts"
-        :update-options="{ notMerge: true }"
-        :init-options="{ renderer: 'canvas' }"
+        :update-options="updateOptions"
+        :init-options="initOptions"
         autoresize
       />
     </div>
@@ -39,6 +39,12 @@ export default class AppChart extends Vue {
   @Ref('chart')
   readonly chart!: ECharts
 
+  // Stable references so component re-renders don't make vue-echarts dispose/
+  // re-init the chart or re-apply the options, both of which would wipe the
+  // imperatively-set dataset and blank the chart.
+  readonly updateOptions = Object.freeze({ notMerge: true })
+  readonly initOptions = Object.freeze({ renderer: 'canvas' })
+
   ready = false
 
   @Watch('data')
diff --git a/src/components/widgets/bedmesh/BedMeshChart.vue b/src/components/widgets/bedmesh/BedMeshChart.vue
index f9e4228179..fd0d703a0d 100644
--- a/src/components/widgets/bedmesh/BedMeshChart.vue
+++ b/src/components/widgets/bedmesh/BedMeshChart.vue
@@ -8,8 +8,8 @@
     <e-chart
       ref="chart"
       :option="opts"
-      :update-options="{ notMerge: false }"
-      :init-options="{ renderer: 'canvas' }"
+      :update-options="updateOptions"
+      :init-options="initOptions"
       autoresize
     />
 
@@ -44,6 +44,11 @@ export default class BedMeshChart extends Mixins(BrowserMixin) {
   @Ref('chart')
   readonly chart!: ECharts
 
+  // Stable references so component re-renders don't make vue-echarts dispose/
+  // re-init the chart, which would reset the 3D camera (rotation/zoom) state.
+  readonly updateOptions = Object.freeze({ notMerge: false })
+  readonly initOptions = Object.freeze({ renderer: 'canvas' })
+
   get flatSurface (): boolean {
     return this.$typedState.mesh.flatSurface
   }
diff --git a/src/components/widgets/thermals/ThermalChart.vue b/src/components/widgets/thermals/ThermalChart.vue
index 6085f668ba..01cbf52111 100644
--- a/src/components/widgets/thermals/ThermalChart.vue
+++ b/src/components/widgets/thermals/ThermalChart.vue
@@ -9,13 +9,20 @@
       ref="chart"
       style="overflow: initial;"
       :option="options"
-      :update-options="{ notMerge: true }"
-      :init-options="{ renderer: 'canvas' }"
+      :update-options="updateOptions"
+      :init-options="initOptions"
       autoresize
       @legendselectchanged="handleLegendSelectChanged"
       @legendselected="handleLegendSelectChanged"
       @legendunselected="handleLegendSelectChanged"
     />
+
+    <div
+      class="chart-pause"
+      @click="togglePause"
+    >
+      <v-icon>{{ paused ? '$resume' : '$pause' }}</v-icon>
+    </div>
   </div>
 </template>
 
@@ -34,10 +41,25 @@ export default class ThermalChart extends Mixins(BrowserMixin) {
   @Ref('chart')
   readonly chart!: ECharts
 
+  // Stable references so component re-renders (e.g. toggling pause) don't cause
+  // vue-echarts to dispose/re-init the chart or re-apply the options, both of
+  // which would wipe the imperatively-set dataset and blank the chart.
+  readonly updateOptions = Object.freeze({ notMerge: true })
+  readonly initOptions = Object.freeze({ renderer: 'canvas' })
+
   loading = false
+  paused = false
   series: LineSeriesOption[] = []
   initialSelected: Record<string, boolean> = {}
 
+  togglePause () {
+    this.paused = !this.paused
+
+    if (!this.paused) {
+      this.onDataChange(this.chartData)
+    }
+  }
+
   handleLegendSelectChanged (event: { selected: Record<string, boolean> }) {
     this.$typedDispatch('charts/saveSelectedLegends', event.selected)
 
@@ -73,7 +95,11 @@ export default class ThermalChart extends Mixins(BrowserMixin) {
 
   @Watch('chartData')
   onDataChange (data: any) {
-    if (this.chart && !this.loading) {
+    if (
+      this.chart &&
+      !this.loading &&
+      !this.paused
+    ) {
       this.chart.setOption({
         dataset: {
           source: data
@@ -433,6 +459,17 @@ export default class ThermalChart extends Mixins(BrowserMixin) {
 
 <style lang='scss' scoped>
   .chart {
+    position: relative;
     width: 100%;
   }
+
+  .chart-pause {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 2px 6px;
+    margin-right: 16px;
+    cursor: pointer;
+    z-index: 1;
+  }
 </style>

From 8d0ec32c8b97207e0fe5b7e49720a458ae355a89 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Sun, 31 May 2026 17:40:42 +0100
Subject: [PATCH 2/2] style: use button for pause/resume

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 .../widgets/thermals/ThermalChart.vue         | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/widgets/thermals/ThermalChart.vue b/src/components/widgets/thermals/ThermalChart.vue
index 01cbf52111..cbbe352f51 100644
--- a/src/components/widgets/thermals/ThermalChart.vue
+++ b/src/components/widgets/thermals/ThermalChart.vue
@@ -17,11 +17,22 @@
       @legendunselected="handleLegendSelectChanged"
     />
 
-    <div
-      class="chart-pause"
-      @click="togglePause"
-    >
-      <v-icon>{{ paused ? '$resume' : '$pause' }}</v-icon>
+    <div class="chart-options">
+      <v-tooltip bottom>
+        <template #activator="{ on, attrs }">
+          <v-btn
+            v-bind="attrs"
+            icon
+            small
+            tabindex="-1"
+            v-on="on"
+            @click="togglePause"
+          >
+            <v-icon>{{ paused ? '$resume' : '$pause' }}</v-icon>
+          </v-btn>
+        </template>
+        <span>{{ paused ? $t('app.general.btn.resume') : $t('app.general.btn.pause') }}</span>
+      </v-tooltip>
     </div>
   </div>
 </template>
@@ -463,13 +474,12 @@ export default class ThermalChart extends Mixins(BrowserMixin) {
     width: 100%;
   }
 
-  .chart-pause {
+  .chart-options {
     position: absolute;
     top: 0;
     right: 0;
-    padding: 2px 6px;
+    padding: 2px 0px;
     margin-right: 16px;
-    cursor: pointer;
     z-index: 1;
   }
 </style>