#139 fix deselection in multi-trace charts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sqliteviz",
-  "version": "0.30.1",
+  "version": "0.31.0",
   "license": "Apache-2.0",
   "private": true,
   "type": "module",

src/components/Chart.vue

@@ -33,9 +33,9 @@
       </template>
       <template v-if="showValueViewer" #right-pane>
         <value-viewer
-          :empty="!selectedItem"
+          :empty="!selectedItems || selectedItems.length === 0"
           emptyMessage="No points selected to view"
-          :value="JSON.stringify(selectedItem)"
+          :value="JSON.stringify(selectedItems)"
           defaultFormat="json"
         />
       </template>
@@ -95,7 +95,7 @@ export default {
       },
       resizeObserver: null,
       useResizeHandler: this.$store.state.isWorkspaceVisible,
-      selectedItem: null
+      selectedItems: null
     }
   },
   computed: {
@@ -108,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()
       }
@@ -151,11 +152,11 @@ export default {
       this.$refs.plotlyEditor?.$el?.querySelector('.js-plotly-plot')
     plotlyDiv?.on('plotly_selected', selectionEvent => {
       if (selectionEvent) {
-        this.selectedItem = 1
+        this.selectedItems = this.getSelectedData()
       }
     })
     plotlyDiv?.on('plotly_deselect', () => {
-      this.selectedItem = null
+      this.selectedItems = this.getSelectedData()
     })
   },
   activated() {
@@ -179,10 +180,8 @@ export default {
       // TODO: check changes and enable Save button if needed
     },
     update(data, layout, frames) {
-      if (layout?.selections?.length > 0) {
+      chartHelper.clearSelection(data, layout)
-        layout.selections = []
+
-        data.forEach(dataItem => delete dataItem.selectedpoints)
-      }
       this.state = { data, layout, frames }
       this.$emit('update')
     },
@@ -217,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,8 +58,8 @@
       </icon-button>
 
       <icon-button
-        v-if="mode === 'graph'"
+        v-if="mode !== 'pivot'"
-        ref="viewNodeOrEdgeBtn"
+        ref="viewDetailsBtn"
         tooltip="View details"
         tooltipPosition="top-left"
         :active="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/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
+    // viewDetailsBtn is disaplyed in chart mode
-    expect(
+    expect(wrapper.findComponent({ ref: 'viewDetailsBtn' }).exists()).to.equal(
-      wrapper.findComponent({ ref: 'viewNodeOrEdgeBtn' }).exists()
+      true
-    ).to.equal(false)
+    )
 
     // Switch to pivot
     const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
     await pivotBtn.trigger('click')
 
-    // viewNodeOrEdgeBtn is not disaplyed in pivot mode
+    // viewDetailsBtn is not disaplyed in pivot mode
-    expect(
+    expect(wrapper.findComponent({ ref: 'viewDetailsBtn' }).exists()).to.equal(
-      wrapper.findComponent({ ref: 'viewNodeOrEdgeBtn' }).exists()
+      false
-    ).to.equal(false)
+    )
 
     // Switch to graph
     const graphBtn = wrapper.findComponent({ ref: 'graphBtn' })
     await graphBtn.trigger('click')
 
-    // viewNodeOrEdgeBtn is disaplyed in graph mode
+    // viewDetailsBtn is disaplyed in graph mode
-    const viewNodeOrEdgeBtn = wrapper.findComponent({
+    const viewDetailsBtn = wrapper.findComponent({
-      ref: 'viewNodeOrEdgeBtn'
+      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
+    // Click to show details viewer
-    await viewNodeOrEdgeBtn.trigger('click')
+    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,
+      currentTab: null,
-      tabs: [tab],
+      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,
+      currentTab: null,
-      tabs: [tab],
+      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,
+      currentTab: null,
-      tabs: [tab],
+      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,
+      currentTab: null,
-      tabs: [tab],
+      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: {
+      data: [
-        foo: {},
+        {
-        bar: {}
+          foo: {},
-      },
+          bar: {},
-      layout: {},
+          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)
-
+    expect(dereferenceArgs[0]).to.eql(
-    const args = dereference.default.firstCall.args
+      JSON.stringify([
-    expect(args[0]).to.eql({
+        {
-      foo: {},
+          foo: {},
-      bar: {}
+          bar: {},
-    })
+          selectedpoints: []
-    expect(args[1]).to.eql({
+        }
-      id: [],
+      ])
-      name: []
+    )
-    })
+    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,