From fdf180d340f08aa4f83b33a2460718bd496cd217 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Sun, 23 Mar 2025 21:09:12 +0100
Subject: [PATCH] fix plot resize

---
 src/lib/ReactPlotlyEditorWithPlotRef.jsx      | 65 +++++++++++++++++++
 .../Tabs/Tab/DataView/Chart/index.vue         | 29 +++++----
 2 files changed, 81 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/ReactPlotlyEditorWithPlotRef.jsx

diff --git a/src/lib/ReactPlotlyEditorWithPlotRef.jsx b/src/lib/ReactPlotlyEditorWithPlotRef.jsx
new file mode 100644
index 0000000..bf78bf0
--- /dev/null
+++ b/src/lib/ReactPlotlyEditorWithPlotRef.jsx
@@ -0,0 +1,65 @@
+import ReactPlotlyEditor from 'react-chart-editor'
+import React, { createRef } from 'react'
+import EditorControls from 'react-chart-editor/lib/EditorControls'
+
+/**
+ * This extended ReactPlotlyEditor has a reference to PlotComponent.
+ * The reference makes it possible to call updatePlotly method of PlotComponent.
+ * updatePlotly method allows smoothly resize the plot
+ * when resize chart editor container.
+ */
+export default class ReactPlotlyEditorWithPlotRef extends ReactPlotlyEditor {
+  constructor(props) {
+    super(props)
+    this.plotComponentRef = createRef()
+  }
+  render() {
+    return (
+      <div className="plotly_editor">
+        {!this.props.hideControls && (
+          <EditorControls
+            graphDiv={this.state.graphDiv}
+            dataSources={this.props.dataSources}
+            dataSourceOptions={this.props.dataSourceOptions}
+            plotly={this.props.plotly}
+            onUpdate={this.props.onUpdate}
+            advancedTraceTypeSelector={this.props.advancedTraceTypeSelector}
+            locale={this.props.locale}
+            traceTypesConfig={this.props.traceTypesConfig}
+            dictionaries={this.props.dictionaries}
+            showFieldTooltips={this.props.showFieldTooltips}
+            srcConverters={this.props.srcConverters}
+            makeDefaultTrace={this.props.makeDefaultTrace}
+            glByDefault={this.props.glByDefault}
+            mapBoxAccess={Boolean(
+              this.props.config && this.props.config.mapboxAccessToken
+            )}
+            fontOptions={this.props.fontOptions}
+            chartHelp={this.props.chartHelp}
+            customConfig={this.props.customConfig}
+          >
+            {this.props.children}
+          </EditorControls>
+        )}
+        <div
+          className="plotly_editor_plot"
+          style={{ width: '100%', height: '100%' }}
+        >
+          <this.PlotComponent
+            ref={this.plotComponentRef}
+            data={this.props.data}
+            layout={this.props.layout}
+            frames={this.props.frames}
+            config={this.props.config}
+            useResizeHandler={this.props.useResizeHandler}
+            debug={this.props.debug}
+            onInitialized={this.handleRender}
+            onUpdate={this.handleRender}
+            style={{ width: '100%', height: '100%' }}
+            divId={this.props.divId}
+          />
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue b/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue
index ab677b0..d473f3a 100644
--- a/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-show="visible" class="chart-container" ref="chartContainer">
+  <div class="chart-container" ref="chartContainer">
     <div class="warning chart-warning" v-show="!dataSources && visible">
       There is no data to build a chart. Run your SQL query and make sure the
       result is not empty.
@@ -13,11 +13,7 @@
         :data="state.data"
         :layout="state.layout"
         :frames="state.frames"
-        :config="{
-          editable: true,
-          displaylogo: false,
-          modeBarButtonsToRemove: ['toImage']
-        }"
+        :config="config"
         :dataSources="dataSources"
         :dataSourceOptions="dataSourceOptions"
         :plotly="plotly"
@@ -36,8 +32,7 @@
 import { applyPureReactInVue } from 'veaury'
 import plotly from 'plotly.js'
 import 'react-chart-editor/lib/react-chart-editor.css'
-
-import ReactPlotlyEditor from 'react-chart-editor'
+import ReactPlotlyEditorWithPlotRef from '@/lib/ReactPlotlyEditorWithPlotRef.jsx'
 import chartHelper from '@/lib/chartHelper'
 import * as dereference from 'react-chart-editor/lib/lib/dereference'
 import fIo from '@/lib/utils/fileIo'
@@ -54,16 +49,21 @@ export default {
   ],
   emits: ['update:importToSvgEnabled', 'update', 'loadingImageCompleted'],
   components: {
-    PlotlyEditor: applyPureReactInVue(ReactPlotlyEditor)
+    PlotlyEditor: applyPureReactInVue(ReactPlotlyEditorWithPlotRef)
   },
   data() {
     return {
       plotly,
       state: this.initOptions || {
         data: [],
-        layout: {},
+        layout: { autosize: true },
         frames: []
       },
+      config: {
+        editable: true,
+        displaylogo: false,
+        modeBarButtonsToRemove: ['toImage']
+      },
       visible: true,
       resizeObserver: null,
       useResizeHandler: this.$store.state.isWorkspaceVisible
@@ -120,9 +120,12 @@ export default {
   },
   methods: {
     async handleResize() {
-      this.visible = false
-      await this.$nextTick()
-      this.visible = true
+      const plotComponent = this.$refs.plotlyEditor.plotComponentRef.current
+      this.$refs.plotlyEditor.plotComponentRef.current.updatePlotly(
+        false, // shouldInvokeResizeHandler
+        plotComponent.props.onUpdate, // figureCallbackFunction
+        false // shouldAttachUpdateEvents
+      )
     },
     onRender(data, layout, frames) {
       // TODO: check changes and enable Save button if needed