fix plotly warnings see issue 7809

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sqliteviz",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sqliteviz",
-      "version": "0.29.0",
+      "version": "0.30.0",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -24,7 +24,7 @@
         "nanoid": "^3.1.12",
         "papaparse": "^5.4.1",
         "pivottable": "^2.23.0",
-        "plotly.js": "^2.35.2",
+        "plotly.js": "^2.35.3",
         "promise-worker": "^2.0.1",
         "react": "^16.14.0",
         "react-chart-editor": "^0.46.1",

package.json

@@ -28,7 +28,7 @@
     "nanoid": "^3.1.12",
     "papaparse": "^5.4.1",
     "pivottable": "^2.23.0",
-    "plotly.js": "^2.35.2",
+    "plotly.js": "^2.35.3",
     "promise-worker": "^2.0.1",
     "react": "^16.14.0",
     "react-chart-editor": "^0.46.1",

patches/plotly.js+2.35.3.patch

@@ -0,0 +1,12 @@
+diff --git a/node_modules/plotly.js/src/plot_api/plot_api.js b/node_modules/plotly.js/src/plot_api/plot_api.js
+index 75e98f5..5c38053 100644
+--- a/node_modules/plotly.js/src/plot_api/plot_api.js
++++ b/node_modules/plotly.js/src/plot_api/plot_api.js
+@@ -2394,6 +2394,7 @@ var layoutUIControlPatterns = [
+ 
+     {pattern: /^legend\.(x|y)$/, attr: 'editrevision'},
+     {pattern: /^(shapes|annotations)/, attr: 'editrevision'},
++    {pattern: /^selections/, attr: 'selectionrevision'},
+     {pattern: /^title\.text$/, attr: 'editrevision'}
+ ];
+ 

src/components/Chart.vue

@@ -1,13 +1,18 @@
 <template>
-  <div ref="chartContainer" class="chart-container">
+  <div class="chart-container">
     <div v-show="!dataSources" class="warning data-view-warning">
       There is no data to build a chart. Run your SQL query and make sure the
       result is not empty.
     </div>
-    <div
+    <splitpanes
+      :before="{ size: 70, max: 100 }"
+      :after="{ size: 30, max: 50, hidden: !showValueViewer }"
+      :default="{ before: 70, after: 30 }"
       class="chart"
       :style="{ height: !dataSources ? 'calc(100% - 40px)' : '100%' }"
     >
+      <template #left-pane>
+        <div ref="chartContainer" :style="{ height: '100%' }">
           <PlotlyEditor
             ref="plotlyEditor"
             :data="state.data"
@@ -25,23 +30,38 @@
             @render="onRender"
           />
         </div>
+      </template>
+      <template v-if="showValueViewer" #right-pane>
+        <value-viewer
+          :empty="!selectedItem"
+          emptyMessage="No points selected to view"
+          :value="JSON.stringify(selectedItem)"
+          defaultFormat="json"
+        />
+      </template>
+    </splitpanes>
   </div>
 </template>
 
 <script>
 import { applyPureReactInVue } from 'veaury'
-import plotly from 'plotly.js'
+import plotly from 'plotly.js/dist/plotly'
 import 'react-chart-editor/lib/react-chart-editor.css'
 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'
 import events from '@/lib/utils/events'
+import Splitpanes from '@/components/Common/Splitpanes'
+import ValueViewer from '@/components/ValueViewer.vue'
+import { nextTick } from 'vue'
 
 export default {
   name: 'Chart',
   components: {
-    PlotlyEditor: applyPureReactInVue(ReactPlotlyEditorWithPlotRef)
+    PlotlyEditor: applyPureReactInVue(ReactPlotlyEditorWithPlotRef),
+    Splitpanes,
+    ValueViewer
   },
   props: {
     dataSources: Object,
@@ -49,7 +69,8 @@ export default {
     exportToPngEnabled: Boolean,
     exportToSvgEnabled: Boolean,
     forPivot: Boolean,
-    showViewSettings: Boolean
+    showViewSettings: Boolean,
+    showValueViewer: Boolean
   },
   emits: [
     'update:exportToSvgEnabled',
@@ -71,7 +92,8 @@ export default {
         modeBarButtonsToRemove: ['toImage']
       },
       resizeObserver: null,
-      useResizeHandler: this.$store.state.isWorkspaceVisible
+      useResizeHandler: this.$store.state.isWorkspaceVisible,
+      selectedItem: null
     }
   },
   computed: {
@@ -115,13 +137,25 @@ export default {
     this.$emit('update:exportToSvgEnabled', true)
     this.$emit('update:exportToHtmlEnabled', true)
   },
-  mounted() {
+  async mounted() {
     this.resizeObserver = new ResizeObserver(this.handleResize)
     this.resizeObserver.observe(this.$refs.chartContainer)
     if (this.dataSources) {
       dereference.default(this.state.data, this.dataSources)
     }
     this.handleResize()
+    await nextTick()
+    const plotlyDiv =
+      this.$refs.plotlyEditor.$el.querySelector('.js-plotly-plot')
+    plotlyDiv?.on('plotly_selected', selectionEvent => {
+      if (selectionEvent) {
+        console.log(this.dataSources)
+        this.selectedItem = 1
+      }
+    })
+    plotlyDiv?.on('plotly_deselect', () => {
+      this.selectedItem = null
+    })
   },
   activated() {
     this.useResizeHandler = true

src/components/DataView.vue

@@ -58,9 +58,9 @@
       </icon-button>
 
       <icon-button
-        v-if="mode === 'graph'"
+        v-if="mode !== 'pivot'"
         ref="viewNodeOrEdgeBtn"
-        tooltip="View node or edge details"
+        tooltip="View details"
         tooltipPosition="top-left"
         :active="viewValuePanelVisible"
         @click="viewValuePanelVisible = !viewValuePanelVisible"