#139 fix deselection in multi-trace charts

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

@@ -1,6 +1,6 @@
 {
   "name": "sqliteviz",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "license": "Apache-2.0",
   "private": true,
   "type": "module",
@@ -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,26 @@
+diff --git a/node_modules/plotly.js/dist/plotly.js b/node_modules/plotly.js/dist/plotly.js
+index 28f5612..5b9956d 100644
+--- a/node_modules/plotly.js/dist/plotly.js
++++ b/node_modules/plotly.js/dist/plotly.js
+@@ -34384,6 +34384,9 @@ var layoutUIControlPatterns = [{
+   pattern: /^(shapes|annotations)/,
+   attr: 'editrevision'
+ }, {
++  pattern: /^selections/, 
++  attr: 'selectionrevision'
++},{
+   pattern: /^title\.text$/,
+   attr: 'editrevision'
+ }];
+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,30 +1,45 @@
 <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%' }"
     >
-      <PlotlyEditor
-        ref="plotlyEditor"
-        :data="state.data"
-        :layout="state.layout"
-        :frames="state.frames"
-        :config="config"
-        :dataSources="dataSources"
-        :dataSourceOptions="dataSourceOptions"
-        :plotly="plotly"
-        :useResizeHandler="useResizeHandler"
-        :debug="true"
-        :advancedTraceTypeSelector="true"
-        :hideControls="!showViewSettings"
-        @update="update"
-        @render="onRender"
-      />
-    </div>
+      <template #left-pane>
+        <div ref="chartContainer" :style="{ height: '100%' }">
+          <PlotlyEditor
+            ref="plotlyEditor"
+            :data="state.data"
+            :layout="state.layout"
+            :frames="state.frames"
+            :config="config"
+            :dataSources="dataSources"
+            :dataSourceOptions="dataSourceOptions"
+            :plotly="plotly"
+            :useResizeHandler="useResizeHandler"
+            :debug="true"
+            :advancedTraceTypeSelector="true"
+            :hideControls="!showViewSettings"
+            @update="update"
+            @render="onRender"
+          />
+        </div>
+      </template>
+      <template v-if="showValueViewer" #right-pane>
+        <value-viewer
+          :empty="!selectedItems || selectedItems.length === 0"
+          emptyMessage="No points selected to view"
+          :value="JSON.stringify(selectedItems)"
+          defaultFormat="json"
+        />
+      </template>
+    </splitpanes>
   </div>
 </template>
 
@@ -37,11 +52,16 @@ 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',
@@ -60,18 +81,21 @@ export default {
   data() {
     return {
       plotly,
-      state: this.initOptions || {
-        data: [],
-        layout: { autosize: true },
-        frames: []
-      },
+      state: this.initOptions
+        ? JSON.parse(JSON.stringify(this.initOptions))
+        : {
+            data: [],
+            layout: { autosize: true },
+            frames: []
+          },
       config: {
         editable: true,
         displaylogo: false,
         modeBarButtonsToRemove: ['toImage']
       },
       resizeObserver: null,
-      useResizeHandler: this.$store.state.isWorkspaceVisible
+      useResizeHandler: this.$store.state.isWorkspaceVisible,
+      selectedItems: null
     }
   },
   computed: {
@@ -84,6 +108,7 @@ export default {
       // we need to update state.data in order to update the graph
       // https://github.com/plotly/react-chart-editor/issues/948
       if (this.dataSources) {
+        chartHelper.clearSelection(this.state.data, this.state.layout)
         dereference.default(this.state.data, this.dataSources)
         this.updatePlotly()
       }
@@ -115,13 +140,24 @@ 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) {
+        this.selectedItems = this.getSelectedData()
+      }
+    })
+    plotlyDiv?.on('plotly_deselect', () => {
+      this.selectedItems = this.getSelectedData()
+    })
   },
   activated() {
     this.useResizeHandler = true
@@ -144,6 +180,8 @@ export default {
       // TODO: check changes and enable Save button if needed
     },
     update(data, layout, frames) {
+      chartHelper.clearSelection(data, layout)
+
       this.state = { data, layout, frames }
       this.$emit('update')
     },
@@ -178,6 +216,12 @@ export default {
     },
     prepareCopy(type = 'png') {
       return chartHelper.getImageDataUrl(this.$refs.plotlyEditor.$el, type)
+    },
+    getSelectedData() {
+      return chartHelper.getRowsByIndexFromDataSources(
+        this.dataSources,
+        chartHelper.getSelectedPointsIndexes(this.state.data)
+      )
     }
   }
 }

src/components/DataView.vue

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

src/components/DbUploader.vue

@@ -125,6 +125,13 @@ export default {
     },
 
     async checkFile(file) {
+      if (!file) {
+        alert(
+          'You should drop a file. ' +
+            'It can be an SQLite database, CSV file, JSON or NDJSON file.'
+        )
+        return
+      }
       this.state = 'dropping'
       this.newDb = database.getNewDatabase()
 

src/components/MainMenu.vue

@@ -227,7 +227,7 @@ export default {
       events.send(eventName)
     },
     _keyListener(e) {
-      if (this.$route.path === '/workspace') {
+      if (this.$route.path === '/workspace' && this.currentInquiryTab) {
         // Run query Ctrl+R or Ctrl+Enter
         if ((e.key === 'r' || e.key === 'Enter') && (e.ctrlKey || e.metaKey)) {
           e.preventDefault()

src/components/Pivot/index.vue

@@ -19,6 +19,7 @@
       <chart
         ref="customChart"
         v-bind="customChartComponentProps"
+        :showViewSettings="showViewSettings"
         @update="$emit('update')"
         @loading-image-completed="$emit('loadingImageCompleted')"
       />

src/lib/chartHelper.js

@@ -13,6 +13,37 @@ export function getOptionsFromDataSources(dataSources) {
   }))
 }
 
+export function getSelectedPointsIndexes(stateData) {
+  if (!stateData) {
+    return []
+  }
+
+  return Array.from(
+    new Set(stateData.flatMap(data => data.selectedpoints || []))
+  )
+}
+
+export function getRowsByIndexFromDataSources(dataSources, rowIndexes) {
+  if (!dataSources) {
+    return []
+  }
+
+  const dataSourceColumns = Object.keys(dataSources)
+  return rowIndexes.map(rowIndex =>
+    dataSourceColumns.reduce((result, columnName) => {
+      result[columnName] = dataSources[columnName][rowIndex]
+      return result
+    }, {})
+  )
+}
+
+export function clearSelection(data, layout) {
+  if (layout?.selections?.length > 0) {
+    layout.selections = []
+    data.forEach(dataItem => delete dataItem.selectedpoints)
+  }
+}
+
 export function getOptionsForSave(state, dataSources) {
   // we don't need to save the data, only settings
   // so we modify state.data using dereference
@@ -22,6 +53,9 @@ export function getOptionsForSave(state, dataSources) {
     emptySources[key] = []
   }
   dereference.default(stateCopy.data, emptySources)
+
+  // Also, we don't need to save selections
+  clearSelection(stateCopy.data, stateCopy.layout)
   return stateCopy
 }
 
@@ -72,5 +106,8 @@ export default {
   getOptionsForSave,
   getImageDataUrl,
   getHtml,
-  getChartData
+  getChartData,
+  getRowsByIndexFromDataSources,
+  clearSelection,
+  getSelectedPointsIndexes
 }

src/lib/storedInquiries/_migrations.js

@@ -1,3 +1,5 @@
+import { clearSelection } from '@/lib/chartHelper'
+
 export default {
   _migrate(installedVersion, inquiries) {
     if (installedVersion < 2) {
@@ -28,6 +30,14 @@ export default {
       })
     }
 
+    if (installedVersion < 5) {
+      inquiries.forEach(inquiry => {
+        if (inquiry.viewType === 'chart') {
+          clearSelection(inquiry.viewOptions.data, inquiry.viewOptions.layout)
+        }
+      })
+    }
+
     return inquiries
   }
 }

src/lib/storedInquiries/index.js

@@ -5,7 +5,7 @@ import migration from './_migrations'
 
 const migrate = migration._migrate
 const myInquiriesKey = 'myInquiries'
-const latestVersion = 4
+const latestVersion = 5
 
 export default {
   version: latestVersion,

tests/components/Chart.spec.js

@@ -244,4 +244,287 @@ describe('Chart.vue', () => {
     )
     wrapper.unmount()
   })
+
+  it('selections are shown in value viewer', async () => {
+    const dataSources = {
+      name: ['Gryffindor', 'Hufflepuff', 'Ravenclaw', 'Slytherin'],
+      points: [100, 90, 95, 80]
+    }
+    const wrapper = mount(Chart, {
+      attachTo: document.body,
+      props: {
+        dataSources,
+        initOptions: {
+          data: [
+            {
+              type: 'scatter',
+              mode: 'markers',
+              x: ['Gryffindor', 'Hufflepuff', 'Ravenclaw', 'Slytherin'],
+              xsrc: 'name',
+              meta: {
+                columnNames: {
+                  x: 'name',
+                  y: 'points'
+                }
+              },
+              y: [100, 90, 95, 80],
+              ysrc: 'points',
+              selectedpoints: [1, 2]
+            }
+          ],
+          layout: {
+            autosize: true,
+            mapbox: {
+              style: 'open-street-map'
+            },
+            dragmode: 'select',
+            selections: [
+              {
+                xref: 'x',
+                yref: 'y',
+                line: {
+                  width: 1,
+                  dash: 'dot'
+                },
+                type: 'rect',
+                x0: 0.6238202370500439,
+                y0: 98.1184336198663,
+                x1: 2.4324242756804213,
+                y1: 87.03915950334289
+              }
+            ],
+            title: {
+              subtitle: {
+                text: 'Click to enter Plot subtitle'
+              }
+            },
+            xaxis: {
+              range: [-0.20324846356453027, 3.20324846356453],
+              autorange: true,
+              type: 'category'
+            },
+            yaxis: {
+              range: [78.4909264565425, 101.5090735434575],
+              autorange: true,
+              type: 'linear'
+            }
+          },
+          frames: []
+        },
+        showViewSettings: true,
+        showValueViewer: true
+      },
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    await flushPromises()
+    const valueViewerText = wrapper
+      .findComponent({ name: 'ValueViewer' })
+      .text()
+
+    expect(valueViewerText).to.contain(`"name": "Hufflepuff"`)
+    expect(valueViewerText).to.contain(`"points": 90`)
+
+    expect(valueViewerText).to.contain(`"name": "Ravenclaw"`)
+    expect(valueViewerText).to.contain(`"points": 95`)
+
+    expect(valueViewerText).not.to.contain(`"name": "Gryffindor"`)
+    expect(valueViewerText).not.to.contain(`"points": 100`)
+
+    expect(valueViewerText).not.to.contain(`"name": "Slytherin"`)
+    expect(valueViewerText).not.to.contain(`"points": 80`)
+    wrapper.unmount()
+  })
+
+  it('clears selections on dataSources change', async () => {
+    const dataSources = {
+      name: ['Gryffindor', 'Hufflepuff', 'Ravenclaw', 'Slytherin'],
+      points: [100, 90, 95, 80]
+    }
+    const wrapper = mount(Chart, {
+      attachTo: document.body,
+      props: {
+        dataSources,
+        initOptions: {
+          data: [
+            {
+              type: 'scatter',
+              mode: 'markers',
+              x: ['Gryffindor', 'Hufflepuff', 'Ravenclaw', 'Slytherin'],
+              xsrc: 'name',
+              meta: {
+                columnNames: {
+                  x: 'name',
+                  y: 'points'
+                }
+              },
+              y: [100, 90, 95, 80],
+              ysrc: 'points',
+              selectedpoints: [1, 2]
+            }
+          ],
+          layout: {
+            autosize: true,
+            mapbox: {
+              style: 'open-street-map'
+            },
+            dragmode: 'select',
+            selections: [
+              {
+                xref: 'x',
+                yref: 'y',
+                line: {
+                  width: 1,
+                  dash: 'dot'
+                },
+                type: 'rect',
+                x0: 0.6238202370500439,
+                y0: 98.1184336198663,
+                x1: 2.4324242756804213,
+                y1: 87.03915950334289
+              }
+            ],
+            title: {
+              subtitle: {
+                text: 'Click to enter Plot subtitle'
+              }
+            },
+            xaxis: {
+              range: [-0.20324846356453027, 3.20324846356453],
+              autorange: true,
+              type: 'category'
+            },
+            yaxis: {
+              range: [78.4909264565425, 101.5090735434575],
+              autorange: true,
+              type: 'linear'
+            }
+          },
+          frames: []
+        },
+        showViewSettings: true,
+        showValueViewer: true
+      },
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    await flushPromises()
+    const valueViewerText = wrapper
+      .findComponent({ name: 'ValueViewer' })
+      .text()
+
+    expect(valueViewerText).to.contain(`"name": "Hufflepuff"`)
+    expect(valueViewerText).to.contain(`"name": "Ravenclaw"`)
+
+    await wrapper.setProps({
+      dataSources: {
+        name: ['Gryffindor', 'Hufflepuff'],
+        points: [100, 90]
+      }
+    })
+
+    await flushPromises()
+
+    expect(wrapper.findComponent({ name: 'ValueViewer' }).text()).equal(
+      `No points selected to view`
+    )
+    wrapper.unmount()
+  })
+
+  it('clears selections on changes in chart settings', async () => {
+    const dataSources = {
+      name: ['Gryffindor', 'Hufflepuff', 'Ravenclaw', 'Slytherin'],
+      points: [100, 90, 95, 80]
+    }
+    const wrapper = mount(Chart, {
+      attachTo: document.body,
+      props: {
+        dataSources,
+        initOptions: {
+          data: [
+            {
+              type: 'scatter',
+              mode: 'markers',
+              x: ['Gryffindor', 'Hufflepuff', 'Ravenclaw', 'Slytherin'],
+              xsrc: 'name',
+              meta: {
+                columnNames: {
+                  x: 'name',
+                  y: 'points'
+                }
+              },
+              y: [100, 90, 95, 80],
+              ysrc: 'points',
+              selectedpoints: [1, 2]
+            }
+          ],
+          layout: {
+            autosize: true,
+            mapbox: {
+              style: 'open-street-map'
+            },
+            dragmode: 'select',
+            selections: [
+              {
+                xref: 'x',
+                yref: 'y',
+                line: {
+                  width: 1,
+                  dash: 'dot'
+                },
+                type: 'rect',
+                x0: 0.6238202370500439,
+                y0: 98.1184336198663,
+                x1: 2.4324242756804213,
+                y1: 87.03915950334289
+              }
+            ],
+            title: {
+              subtitle: {
+                text: 'Click to enter Plot subtitle'
+              }
+            },
+            xaxis: {
+              range: [-0.20324846356453027, 3.20324846356453],
+              autorange: true,
+              type: 'category'
+            },
+            yaxis: {
+              range: [78.4909264565425, 101.5090735434575],
+              autorange: true,
+              type: 'linear'
+            }
+          },
+          frames: []
+        },
+        showViewSettings: true,
+        showValueViewer: true
+      },
+      global: {
+        mocks: { $store }
+      }
+    })
+
+    await flushPromises()
+    const valueViewerText = wrapper
+      .findComponent({ name: 'ValueViewer' })
+      .text()
+
+    expect(valueViewerText).to.contain(`"name": "Hufflepuff"`)
+    expect(valueViewerText).to.contain(`"name": "Ravenclaw"`)
+
+    // Add another trace
+    await wrapper.find('button.js-add-button').wrapperElement.click()
+
+    await flushPromises()
+
+    expect(wrapper.findComponent({ name: 'ValueViewer' }).text()).equal(
+      `No points selected to view`
+    )
+    wrapper.unmount()
+  })
 })

tests/components/DataView.spec.js

@@ -429,37 +429,44 @@ describe('DataView.vue', () => {
       }
     })
 
-    // viewNodeOrEdgeBtn is not disaplyed in chart mode
-    expect(
-      wrapper.findComponent({ ref: 'viewNodeOrEdgeBtn' }).exists()
-    ).to.equal(false)
+    // viewDetailsBtn is disaplyed in chart mode
+    expect(wrapper.findComponent({ ref: 'viewDetailsBtn' }).exists()).to.equal(
+      true
+    )
 
     // Switch to pivot
     const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
     await pivotBtn.trigger('click')
 
-    // viewNodeOrEdgeBtn is not disaplyed in pivot mode
-    expect(
-      wrapper.findComponent({ ref: 'viewNodeOrEdgeBtn' }).exists()
-    ).to.equal(false)
+    // viewDetailsBtn is not disaplyed in pivot mode
+    expect(wrapper.findComponent({ ref: 'viewDetailsBtn' }).exists()).to.equal(
+      false
+    )
 
     // Switch to graph
     const graphBtn = wrapper.findComponent({ ref: 'graphBtn' })
     await graphBtn.trigger('click')
 
-    // viewNodeOrEdgeBtn is disaplyed in graph mode
-    const viewNodeOrEdgeBtn = wrapper.findComponent({
-      ref: 'viewNodeOrEdgeBtn'
+    // viewDetailsBtn is disaplyed in graph mode
+    const viewDetailsBtn = wrapper.findComponent({
+      ref: 'viewDetailsBtn'
     })
-    expect(viewNodeOrEdgeBtn.exists()).to.equal(true)
+    expect(viewDetailsBtn.exists()).to.equal(true)
 
-    // by default node viewer is hidden
+    // by default details viewer is hidden
     expect(wrapper.findComponent({ name: 'value-viewer' }).exists()).to.equal(
       false
     )
 
-    // Click to show node viewer
-    await viewNodeOrEdgeBtn.trigger('click')
+    // Click to show details viewer
+    await viewDetailsBtn.trigger('click')
+    expect(wrapper.findComponent({ name: 'value-viewer' }).exists()).to.equal(
+      true
+    )
+
+    // Switch to chart
+    const chartBtn = wrapper.findComponent({ ref: 'chartBtn' })
+    await chartBtn.trigger('click')
     expect(wrapper.findComponent({ name: 'value-viewer' }).exists()).to.equal(
       true
     )

tests/components/MainMenu.spec.js

@@ -210,8 +210,8 @@ describe('MainMenu.vue', () => {
       isSaved: false
     }
     const state = {
-      currentTab: tab,
-      tabs: [tab],
+      currentTab: null,
+      tabs: [],
       db: {}
     }
     const store = createStore({ state })
@@ -228,6 +228,17 @@ describe('MainMenu.vue', () => {
 
     const ctrlR = new KeyboardEvent('keydown', { key: 'r', ctrlKey: true })
     const metaR = new KeyboardEvent('keydown', { key: 'r', metaKey: true })
+
+    // execute is not called - no tabs open
+    document.dispatchEvent(ctrlR)
+    expect(tab.execute.calledOnce).to.equal(false)
+    document.dispatchEvent(metaR)
+    expect(tab.execute.calledOnce).to.equal(false)
+
+    // Open a tab
+    store.state.currentTab = tab
+    store.state.tabs = [tab]
+
     // Running is enabled and route path is workspace
     document.dispatchEvent(ctrlR)
     expect(state.currentTab.execute.calledOnce).to.equal(true)
@@ -257,8 +268,8 @@ describe('MainMenu.vue', () => {
       isSaved: false
     }
     const state = {
-      currentTab: tab,
-      tabs: [tab],
+      currentTab: null,
+      tabs: [],
       db: {}
     }
     const store = createStore({ state })
@@ -281,6 +292,17 @@ describe('MainMenu.vue', () => {
       key: 'Enter',
       metaKey: true
     })
+
+    // execute is not called - no tabs open
+    document.dispatchEvent(ctrlEnter)
+    expect(tab.execute.calledOnce).to.equal(false)
+    document.dispatchEvent(metaEnter)
+    expect(tab.execute.calledOnce).to.equal(false)
+
+    // Open a tab
+    store.state.currentTab = tab
+    store.state.tabs = [tab]
+
     // Running is enabled and route path is workspace
     document.dispatchEvent(ctrlEnter)
     expect(state.currentTab.execute.calledOnce).to.equal(true)
@@ -347,8 +369,8 @@ describe('MainMenu.vue', () => {
       isSaved: false
     }
     const state = {
-      currentTab: tab,
-      tabs: [tab],
+      currentTab: null,
+      tabs: [],
       db: {}
     }
     const store = createStore({ state })
@@ -365,6 +387,17 @@ describe('MainMenu.vue', () => {
 
     const ctrlS = new KeyboardEvent('keydown', { key: 's', ctrlKey: true })
     const metaS = new KeyboardEvent('keydown', { key: 's', metaKey: true })
+
+    // onSave is not called - no tabs open
+    document.dispatchEvent(ctrlS)
+    expect(wrapper.vm.onSave.calledOnce).to.equal(false)
+    document.dispatchEvent(metaS)
+    expect(wrapper.vm.onSave.calledOnce).to.equal(false)
+
+    // Open a tab
+    store.state.currentTab = tab
+    store.state.tabs = [tab]
+
     // tab is unsaved and route is /workspace
     document.dispatchEvent(ctrlS)
     expect(wrapper.vm.onSave.calledOnce).to.equal(true)
@@ -394,8 +427,8 @@ describe('MainMenu.vue', () => {
       isSaved: false
     }
     const state = {
-      currentTab: tab,
-      tabs: [tab],
+      currentTab: null,
+      tabs: [],
       db: {}
     }
     const store = createStore({ state })
@@ -420,6 +453,17 @@ describe('MainMenu.vue', () => {
       metaKey: true,
       shiftKey: true
     })
+
+    // onSaveAs is not called - no tabs open
+    document.dispatchEvent(ctrlS)
+    expect(wrapper.vm.onSaveAs.calledOnce).to.equal(false)
+    document.dispatchEvent(metaS)
+    expect(wrapper.vm.onSaveAs.calledOnce).to.equal(false)
+
+    // Open a tab
+    store.state.currentTab = tab
+    store.state.tabs = [tab]
+
     // tab is unsaved and route is /workspace
     document.dispatchEvent(ctrlS)
     expect(wrapper.vm.onSaveAs.calledOnce).to.equal(true)

tests/lib/chartHelper.spec.js

@@ -21,37 +21,69 @@ describe('chartHelper.js', () => {
     ])
   })
 
+  it('getSelectedPointsIndexes returns unique selected point indexes', () => {
+    const stateData = [
+      { selectedpoints: [1, 2, 3] },
+      { selectedpoints: [3, 4] },
+      { selectedpoints: [] },
+      {}
+    ]
+
+    const indexes = chartHelper.getSelectedPointsIndexes(stateData)
+
+    expect(indexes).to.eql([1, 2, 3, 4])
+  })
+
   it('getOptionsForSave', () => {
     const state = {
-      data: {
-        foo: {},
-        bar: {}
-      },
-      layout: {},
+      data: [
+        {
+          foo: {},
+          bar: {},
+          selectedpoints: []
+        }
+      ],
+      layout: { selections: [{}] },
       frames: {}
     }
     const dataSources = {
       id: [1, 2],
       name: ['foo', 'bar']
     }
-    sinon.stub(dereference, 'default')
+    const dereferenceArgs = []
+    sinon.stub(dereference, 'default').callsFake((data, emptySources) => {
+      dereferenceArgs[0] = JSON.stringify(data)
+      dereferenceArgs[1] = JSON.stringify(emptySources)
+    })
     sinon.spy(JSON, 'parse')
 
     const ds = chartHelper.getOptionsForSave(state, dataSources)
 
     expect(dereference.default.calledOnce).to.equal(true)
-
-    const args = dereference.default.firstCall.args
-    expect(args[0]).to.eql({
-      foo: {},
-      bar: {}
-    })
-    expect(args[1]).to.eql({
-      id: [],
-      name: []
-    })
+    expect(dereferenceArgs[0]).to.eql(
+      JSON.stringify([
+        {
+          foo: {},
+          bar: {},
+          selectedpoints: []
+        }
+      ])
+    )
+    expect(dereferenceArgs[1]).to.eql(
+      JSON.stringify({
+        id: [],
+        name: []
+      })
+    )
 
     expect(ds).to.equal(JSON.parse.returnValues[0])
+    expect(ds.layout.selections).to.eql([])
+    expect(ds.data).to.eql([
+      {
+        foo: {},
+        bar: {}
+      }
+    ])
   })
 
   it('getImageDataUrl returns dataUrl', async () => {
@@ -101,4 +133,32 @@ describe('chartHelper.js', () => {
       'Plotly.newPlot(el, "plotly data", "plotly layout"'
     )
   })
+
+  it('getRowsByIndexFromDataSources', () => {
+    const dataSources = {
+      id: [1, 2, 3],
+      name: ['Harry', 'Draco', 'Ron'],
+      points: [10, null, 7]
+    }
+    const rows = chartHelper.getRowsByIndexFromDataSources(dataSources, [1, 2])
+    expect(rows).to.eql([
+      { id: 2, name: 'Draco', points: null },
+      { id: 3, name: 'Ron', points: 7 }
+    ])
+  })
+
+  it('clearSelection', () => {
+    const layout = {
+      selections: [{}],
+      someLayoutField: 1
+    }
+    const data = [
+      { selectedpoints: [], someField: 1 },
+      { someField: 2 },
+      { selectedpoints: [], someField: 3 }
+    ]
+    chartHelper.clearSelection(data, layout)
+    expect(layout).to.eql({ selections: [], someLayoutField: 1 })
+    expect(data).to.eql([{ someField: 1 }, { someField: 2 }, { someField: 3 }])
+  })
 })

tests/lib/storedInquiries/_migrations.spec.js

@@ -8,14 +8,22 @@ describe('_migrations.js', () => {
         id: '123',
         name: 'foo',
         query: 'SELECT * FROM foo',
-        chart: { here_are: 'foo chart settings' },
+        chart: {
+          data: [{ selectedpoints: ['some selected points'] }, {}],
+          layout: { selections: [{}, {}] },
+          frames: 'foo chart frames'
+        },
         createdAt: '2021-05-06T11:05:50.877Z'
       },
       {
         id: '456',
         name: 'bar',
         query: 'SELECT * FROM bar',
-        chart: { here_are: 'bar chart settings' },
+        chart: {
+          data: [{}, {}],
+          layout: {},
+          frames: 'bar chart frames'
+        },
         createdAt: '2021-05-07T11:05:50.877Z'
       }
     ]
@@ -26,7 +34,11 @@ describe('_migrations.js', () => {
         name: 'foo',
         query: 'SELECT * FROM foo',
         viewType: 'chart',
-        viewOptions: { here_are: 'foo chart settings' },
+        viewOptions: {
+          data: [{}, {}],
+          layout: { selections: [] },
+          frames: 'foo chart frames'
+        },
         createdAt: '2021-05-06T11:05:50.877Z'
       },
       {
@@ -34,7 +46,7 @@ describe('_migrations.js', () => {
         name: 'bar',
         query: 'SELECT * FROM bar',
         viewType: 'chart',
-        viewOptions: { here_are: 'bar chart settings' },
+        viewOptions: { data: [{}, {}], layout: {}, frames: 'bar chart frames' },
         createdAt: '2021-05-07T11:05:50.877Z'
       }
     ])
@@ -47,7 +59,11 @@ describe('_migrations.js', () => {
         name: 'foo',
         query: 'SELECT * FROM foo',
         viewType: 'chart',
-        viewOptions: { here_are: 'foo chart settings' },
+        viewOptions: {
+          data: [{ selectedpoints: ['some selected points'] }, {}],
+          layout: { selections: [{}, {}] },
+          frames: 'foo chart frames'
+        },
         createdAt: '2021-05-06T11:05:50.877Z'
       },
       {
@@ -108,7 +124,11 @@ describe('_migrations.js', () => {
         name: 'foo',
         query: 'SELECT * FROM foo',
         viewType: 'chart',
-        viewOptions: { here_are: 'foo chart settings' },
+        viewOptions: {
+          data: [{}, {}],
+          layout: { selections: [] },
+          frames: 'foo chart frames'
+        },
         createdAt: '2021-05-06T11:05:50.877Z'
       },
       {
@@ -175,7 +195,11 @@ describe('_migrations.js', () => {
         name: 'foo',
         query: 'SELECT * FROM foo',
         viewType: 'chart',
-        viewOptions: { here_are: 'foo chart settings' },
+        viewOptions: {
+          data: [{ selectedpoints: ['some selected points'] }, {}],
+          layout: { selections: [{}, {}] },
+          frames: 'foo chart frames'
+        },
         createdAt: '2021-05-06T11:05:50.877Z'
       },
       {
@@ -238,7 +262,150 @@ describe('_migrations.js', () => {
         name: 'foo',
         query: 'SELECT * FROM foo',
         viewType: 'chart',
-        viewOptions: { here_are: 'foo chart settings' },
+        viewOptions: {
+          data: [{}, {}],
+          layout: { selections: [] },
+          frames: 'foo chart frames'
+        },
+        createdAt: '2021-05-06T11:05:50.877Z'
+      },
+      {
+        id: '456',
+        name: 'bar',
+        query: 'SELECT * FROM bar',
+        viewType: 'graph',
+        viewOptions: {
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          },
+          style: {
+            backgroundColor: 'white',
+            highlightMode: 'node_and_neighbors',
+            nodes: {
+              size: { type: 'constant', value: 10 },
+              color: {
+                type: 'calculated',
+                method: 'degree',
+                colorscale: null,
+                mode: 'continious',
+                colorscaleDirection: 'reversed',
+                opacity: 100
+              },
+              label: { source: 'label', color: '#444444' }
+            },
+            edges: {
+              showDirection: true,
+              size: { type: 'constant', value: 2 },
+              color: { type: 'constant', value: '#a2b1c6' },
+              label: { source: null, color: '#a2b1c6' }
+            }
+          },
+          layout: {
+            type: 'forceAtlas2',
+            options: {
+              initialAlgorithm: 'circular',
+              initialIterationsAmount: 50,
+              adjustSizes: false,
+              barnesHutOptimize: false,
+              barnesHutTheta: 0.5,
+              edgeWeightInfluence: 0,
+              gravity: 1,
+              linLogMode: false,
+              outboundAttractionDistribution: false,
+              scalingRatio: 1,
+              slowDown: 1,
+              strongGravityMode: false
+            }
+          }
+        },
+        createdAt: '2021-05-07T11:05:50.877Z'
+      }
+    ])
+  })
+
+  it('migrates from version 4 to the current', () => {
+    const oldInquiries = [
+      {
+        id: '123',
+        name: 'foo',
+        query: 'SELECT * FROM foo',
+        viewType: 'chart',
+        viewOptions: {
+          data: [{ selectedpoints: ['some selected points'] }, {}],
+          layout: { selections: [{}, {}] },
+          frames: 'foo chart frames'
+        },
+        createdAt: '2021-05-06T11:05:50.877Z'
+      },
+      {
+        id: '456',
+        name: 'bar',
+        query: 'SELECT * FROM bar',
+        viewType: 'graph',
+        viewOptions: {
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          },
+          style: {
+            backgroundColor: 'white',
+            highlightMode: 'node_and_neighbors',
+            nodes: {
+              size: { type: 'constant', value: 10 },
+              color: {
+                type: 'calculated',
+                method: 'degree',
+                colorscale: null,
+                mode: 'continious',
+                colorscaleDirection: 'reversed',
+                opacity: 100
+              },
+              label: { source: 'label', color: '#444444' }
+            },
+            edges: {
+              showDirection: true,
+              size: { type: 'constant', value: 2 },
+              color: { type: 'constant', value: '#a2b1c6' },
+              label: { source: null, color: '#a2b1c6' }
+            }
+          },
+          layout: {
+            type: 'forceAtlas2',
+            options: {
+              initialAlgorithm: 'circular',
+              initialIterationsAmount: 50,
+              adjustSizes: false,
+              barnesHutOptimize: false,
+              barnesHutTheta: 0.5,
+              edgeWeightInfluence: 0,
+              gravity: 1,
+              linLogMode: false,
+              outboundAttractionDistribution: false,
+              scalingRatio: 1,
+              slowDown: 1,
+              strongGravityMode: false
+            }
+          }
+        },
+        createdAt: '2021-05-07T11:05:50.877Z'
+      }
+    ]
+    expect(migrations._migrate(4, oldInquiries)).to.eql([
+      {
+        id: '123',
+        name: 'foo',
+        query: 'SELECT * FROM foo',
+        viewType: 'chart',
+        viewOptions: {
+          data: [{}, {}],
+          layout: { selections: [] },
+          frames: 'foo chart frames'
+        },
         createdAt: '2021-05-06T11:05:50.877Z'
       },
       {

tests/lib/storedInquiries/storedInquiries.spec.js

@@ -117,7 +117,11 @@ describe('storedInquiries.js', () => {
             id: 'Yh1Hc9v7P3mRPZVM59QiD',
             query: 'SELECT * from test',
             viewType: 'chart',
-            viewOptions: 'some chart view options',
+            viewOptions: {
+              data: [{ selectedpoints: [] }, {}],
+              layout: { selections: [{}, {}] },
+              frames: 'some chart frames'
+            },
             name: 'student chart',
             updatedAt: '2026-01-19T21:49:40.708Z',
             createdAt: '2026-01-19T21:46:13.899Z'
@@ -186,7 +190,11 @@ describe('storedInquiries.js', () => {
         id: 'Yh1Hc9v7P3mRPZVM59QiD',
         query: 'SELECT * from test',
         viewType: 'chart',
-        viewOptions: 'some chart view options',
+        viewOptions: {
+          data: [{}, {}],
+          layout: { selections: [] },
+          frames: 'some chart frames'
+        },
         name: 'student chart',
         updatedAt: '2026-01-19T21:49:40.708Z',
         createdAt: '2026-01-19T21:46:13.899Z'
@@ -275,7 +283,7 @@ describe('storedInquiries.js', () => {
     const str = storedInquiries.serialiseInquiries(inquiryList)
     const parsedJson = JSON.parse(str)
 
-    expect(parsedJson.version).to.equal(4)
+    expect(parsedJson.version).to.equal(5)
     expect(parsedJson.inquiries).to.have.lengthOf(2)
     expect(parsedJson.inquiries[1]).to.eql(inquiryList[1])
     expect(parsedJson.inquiries[0]).to.eql({
@@ -336,7 +344,11 @@ describe('storedInquiries.js', () => {
           "name": "foo",
           "query": "select * from foo",
           "viewType": "chart",
-          "viewOptions": [],
+          "viewOptions": {
+              "data": [{"selectedpoints": []}, {}],
+              "layout": {"selections": [{}, {}]},
+              "frames": "some chart frames"
+            },
           "createdAt": "2020-11-03T14:17:49.524Z" 
         },
         {
@@ -401,7 +413,11 @@ describe('storedInquiries.js', () => {
         name: 'foo',
         query: 'select * from foo',
         viewType: 'chart',
-        viewOptions: [],
+        viewOptions: {
+          data: [{}, {}],
+          layout: { selections: [] },
+          frames: 'some chart frames'
+        },
         createdAt: '2020-11-03T14:17:49.524Z'
       },
       {
@@ -607,7 +623,11 @@ describe('storedInquiries.js', () => {
           "name": "foo",
           "query": "select * from foo",
           "viewType": "chart",
-          "viewOptions": [],
+          "viewOptions": {
+              "data": [{"selectedpoints": []}, {}],
+              "layout": {"selections": [{}, {}]},
+              "frames": "some chart frames"
+            },
           "createdAt": "2020-11-03T14:17:49.524Z" 
         },
         {
@@ -673,7 +693,11 @@ describe('storedInquiries.js', () => {
         name: 'foo',
         query: 'select * from foo',
         viewType: 'chart',
-        viewOptions: [],
+        viewOptions: {
+          data: [{}, {}],
+          layout: { selections: [] },
+          frames: 'some chart frames'
+        },
         createdAt: '2020-11-03T14:17:49.524Z'
       },
       {
@@ -735,7 +759,7 @@ describe('storedInquiries.js', () => {
 
   it('readPredefinedInquiries', async () => {
     const str = `{
-      "version": 4,
+      "version": 5,
       "inquiries": [
         {
           "id": 1,

tests/views/MainView.spec.js

@@ -0,0 +1,122 @@
+import { expect } from 'chai'
+import { mount, flushPromises } from '@vue/test-utils'
+import actions from '@/store/actions'
+import mutations from '@/store/mutations'
+import { createStore } from 'vuex'
+import MainView from '@/views/MainView.vue'
+import { routes } from '@/router'
+import { createRouter, createWebHistory } from 'vue-router'
+
+describe('MainView.vue', () => {
+  it('Saves inquiry without data', async () => {
+    const state = {
+      db: {},
+      tabs: [],
+      inquiries: []
+    }
+    const store = createStore({ state, actions, mutations })
+    const router = createRouter({
+      history: createWebHistory(),
+      routes: routes
+    })
+
+    router.push('/workspace')
+    await router.isReady()
+    const wrapper = mount(MainView, {
+      global: {
+        stubs: {
+          'router-link': true,
+          teleport: false,
+          'app-diagnostic-info': true,
+          transition: false,
+          schema: true,
+          'run-result': true
+        },
+        plugins: [store, router]
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.find('#create-btn').trigger('click')
+
+    store.state.tabs[1].result = {
+      columns: ['id', 'name'],
+      values: {
+        id: [1, 2],
+        name: ['Harry', 'Drako']
+      }
+    }
+
+    await flushPromises()
+
+    // Add trace
+    await wrapper
+      .findAllComponents({ name: 'Chart' })[1]
+      .find('button.js-add-button')
+      .wrapperElement.click()
+
+    await flushPromises()
+
+    // Select data for axis x
+    await wrapper
+      .findAll('.field .dropdown-container .Select__indicator')[0]
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+    await wrapper.findAll('.Select__menu .Select__option')[0].trigger('click')
+
+    // Select data for axis y
+    await wrapper
+      .findAll('.field .dropdown-container .Select__indicator')[2]
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+    await wrapper.findAll('.Select__menu .Select__option')[1].trigger('click')
+
+    // Click Save in the top menu
+    await wrapper.find('#save-btn').trigger('click')
+
+    // Input inquiry name
+    document.querySelector('.dialog input').value = 'test'
+    document.querySelector('.dialog input').dispatchEvent(
+      new InputEvent('input', {
+        data: 'test'
+      })
+    )
+
+    // Click Save in the dialog
+    document
+      .querySelector('.dialog .dialog-buttons-container button.primary')
+      .click()
+
+    const inquiriesInStore = store.state.inquiries
+    expect(inquiriesInStore.length).to.equal(1)
+    expect(inquiriesInStore[0].createdAt).to.not.be.null
+    expect(inquiriesInStore[0].createdAt).to.not.be.undefined
+    expect(inquiriesInStore[0].updateAt).to.not.be.null
+    expect(inquiriesInStore[0].updatedAt).to.not.be.undefined
+
+    expect(inquiriesInStore[0].id).to.not.be.null
+    expect(inquiriesInStore[0].id).to.not.be.undefined
+
+    expect(inquiriesInStore[0].name).to.equal('test')
+    expect(inquiriesInStore[0].viewType).to.equal('chart')
+    expect(inquiriesInStore[0].viewOptions.data).to.eql([
+      {
+        type: 'scatter',
+        mode: 'markers',
+        x: null,
+        xsrc: 'id',
+        meta: {
+          columnNames: {
+            x: 'id',
+            y: 'name'
+          }
+        },
+        y: null,
+        ysrc: 'name'
+      }
+    ])
+    wrapper.unmount()
+  })
+})