fix standart chart resize in pivot, improve performance

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sqliteviz",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sqliteviz",
-      "version": "0.25.1",
+      "version": "0.26.0",
       "license": "Apache-2.0",
       "dependencies": {
         "buffer": "^6.0.3",
@@ -3259,12 +3259,20 @@
       "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
       "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA=="
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.14",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
+      "peer": true
+    },
     "node_modules/@types/react": {
-      "version": "19.0.10",
+      "version": "17.0.85",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.85.tgz",
-      "integrity": "sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g==",
+      "integrity": "sha512-5oBDUsRDsrYq4DdyHaL99gE1AJCfuDhyxqF6/55fvvOIRkp1PpKuwJ+aMiGJR+GJt7YqMNclPROTHF20vY2cXA==",
       "peer": true,
       "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "^0.16",
         "csstype": "^3.0.2"
       }
     },
@@ -3276,6 +3284,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
+      "peer": true
+    },
     "node_modules/@types/supercluster": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",

src/views/MainView/Workspace/Tabs/Tab/DataView/Chart/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="chartContainer" class="chart-container">
-    <div v-show="!dataSources && visible" class="warning chart-warning">
+    <div v-show="!dataSources" class="warning chart-warning">
       There is no data to build a chart. Run your SQL query and make sure the
       result is not empty.
     </div>
@@ -9,7 +9,6 @@
       :style="{ height: !dataSources ? 'calc(100% - 40px)' : '100%' }"
     >
       <PlotlyEditor
-        v-show="visible"
         ref="plotlyEditor"
         :data="state.data"
         :layout="state.layout"
@@ -64,7 +63,6 @@ export default {
         displaylogo: false,
         modeBarButtonsToRemove: ['toImage']
       },
-      visible: true,
       resizeObserver: null,
       useResizeHandler: this.$store.state.isWorkspaceVisible
     }
@@ -137,7 +135,7 @@ export default {
     updatePlotly() {
       const plotComponent = this.$refs.plotlyEditor.plotComponentRef.current
       plotComponent.updatePlotly(
-        false, // shouldInvokeResizeHandler
+        true, // shouldInvokeResizeHandler
         plotComponent.props.onUpdate, // figureCallbackFunction
         false // shouldAttachUpdateEvents
       )

src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/index.vue

@@ -35,6 +35,7 @@ import pivotHelper from './pivotHelper'
 import Chart from '@/views/MainView/Workspace/Tabs/Tab/DataView/Chart'
 import chartHelper from '@/lib/chartHelper'
 import events from '@/lib/utils/events'
+import plotly from 'plotly.js'
 
 export default {
   name: 'Pivot',
@@ -130,17 +131,19 @@ export default {
     // We need to detect resizing because plotly doesn't resize when resize its container
     // but it resize on window.resize (we will trigger it manualy in order to make plotly resize)
     this.resizeObserver = new ResizeObserver(this.handleResize)
-    this.resizeObserver.observe(this.$refs.customChartOutput)
+    this.resizeObserver.observe(this.$refs.pivotOutput)
   },
   beforeUnmount() {
-    this.resizeObserver.unobserve(this.$refs.customChartOutput)
+    this.resizeObserver.unobserve(this.$refs.pivotOutput)
   },
   methods: {
     handleResize() {
       // hack: plotly changes size only on window.resize event,
-      // so, we trigger it when container resizes (e.g. when move splitter)
+      // so, we resize it manually when container resizes (e.g. when move splitter)
       if (this.viewStandartChart) {
-        window.dispatchEvent(new Event('resize'))
+        plotly.Plots.resize(
+          this.$refs.pivotOutput.querySelector('.js-plotly-plot')
+        )
       }
     },
 
@@ -184,9 +187,7 @@ export default {
       )
 
       // fix for Firefox: fit plotly renderers just after choosing it in pivotUi
-      if (this.viewStandartChart) {
+      this.handleResize()
-        window.dispatchEvent(new Event('resize'))
-      }
     },
 
     getOptionsForSave() {

src/views/MainView/Workspace/Tabs/Tab/index.vue

@@ -134,7 +134,6 @@ export default {
       const fromPosition = this.tab.layout[from]
       this.tab.layout[from] = this.tab.layout[to]
       this.tab.layout[to] = fromPosition
-      window.dispatchEvent(new Event('resize'))
 
       events.send('inquiry.panel', null, { panel: to })
     },

tests/views/MainView/Workspace/Tabs/Tab/DataView/Chart/Chart.spec.js

@@ -123,10 +123,8 @@ describe('Chart.vue', () => {
     const newContainerWidth = initialContainerWidth * 2 || 1000
     const newContainerHeight = initialContainerHeight * 2 || 2000
 
-    wrapper.find('.chart-container').wrapperElement.parentElement.style.width =
+    container.style.width = `${newContainerWidth}px`
-      `${newContainerWidth}px`
+    container.style.height = `${newContainerHeight}px`
-    wrapper.find('.chart-container').wrapperElement.parentElement.style.height =
-      `${newContainerHeight}px`
 
     await flushPromises()
 
@@ -179,4 +177,34 @@ describe('Chart.vue', () => {
     expect(fIo.downloadFromUrl.calledOnceWith(url, 'chart'))
     wrapper.unmount()
   })
+
+  it('dataSources are passed correctly', async () => {
+    const dataSources = {
+      name: ['Gryffindor'],
+      points: [80]
+    }
+
+    const wrapper = mount(Chart, {
+      attachTo: document.body,
+      props: {
+        dataSources
+      },
+      global: {
+        mocks: { $store }
+      }
+    })
+    await flushPromises()
+    await wrapper.find('button.js-add-button').wrapperElement.click()
+
+    await flushPromises()
+
+    await wrapper
+      .find('.field .dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    expect(wrapper.find('.Select__menu').text()).to.contain('name' + 'points')
+    wrapper.unmount()
+  })
 })

tests/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js

@@ -1,5 +1,5 @@
 import { expect } from 'chai'
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import Pivot from '@/views/MainView/Workspace/Tabs/Tab/DataView/Pivot'
 import chartHelper from '@/lib/chartHelper'
 import fIo from '@/lib/utils/fileIo'
@@ -533,4 +533,57 @@ describe('Pivot.vue', () => {
       fIo.downloadFromUrl.calledOnceWith('canvas data url', 'pivot')
     ).to.equal(true)
   })
+
+  it('resizes standart chart', async () => {
+    const wrapper = mount(Pivot, {
+      global: {
+        mocks: { $store: { state: { isWorkspaceVisible: true } } }
+      },
+      props: {
+        dataSources: {
+          item: ['foo', 'bar', 'bar', 'bar'],
+          year: [2021, 2021, 2020, 2020]
+        },
+        initOptions: {
+          rows: ['item'],
+          cols: ['year'],
+          colOrder: 'key_a_to_z',
+          rowOrder: 'key_a_to_z',
+          aggregatorName: 'Count',
+          vals: [],
+          renderer: $.pivotUtilities.renderers['Bar Chart'],
+          rendererName: 'Bar Chart'
+        }
+      },
+      attachTo: container
+    })
+
+    await flushPromises()
+
+    const plotContainer = wrapper.find('.pivot-output').wrapperElement
+    const plot = wrapper.find('.svg-container').wrapperElement
+
+    const initialContainerWidth = plotContainer.scrollWidth
+    const initialContainerHeight = plotContainer.scrollHeight
+
+    const initialPlotWidth = plot.scrollWidth
+    const initialPlotHeight = plot.scrollHeight
+
+    const newContainerWidth = initialContainerWidth * 2 || 1000
+    const newContainerHeight = initialContainerHeight * 2 || 2000
+
+    plotContainer.style.width = `${newContainerWidth}px`
+    plotContainer.style.height = `${newContainerHeight}px`
+
+    await flushPromises()
+
+    const plotAfterResize = wrapper.find('.svg-container').wrapperElement
+    expect(plotAfterResize.scrollWidth).not.to.equal(initialPlotWidth)
+
+    expect(plotAfterResize.scrollWidth.scrollHeight).not.to.equal(
+      initialPlotHeight
+    )
+
+    wrapper.unmount()
+  })
 })