#139 tests

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: {
@@ -105,6 +105,7 @@ export default {
   },
   watch: {
     dataSources() {
+      chartHelper.clearSelection(this.state.data, this.state.layout)
       // we need to update state.data in order to update the graph
       // https://github.com/plotly/react-chart-editor/issues/948
       if (this.dataSources) {
@@ -151,11 +152,14 @@ export default {
       this.$refs.plotlyEditor?.$el?.querySelector('.js-plotly-plot')
     plotlyDiv?.on('plotly_selected', selectionEvent => {
       if (selectionEvent) {
-        this.selectedItem = 1
+        this.selectedItems = chartHelper.getRowsByIndexFromDataSources(
+          this.dataSources,
+          selectionEvent.points.map(point => point.pointIndex)
+        )
       }
     })
     plotlyDiv?.on('plotly_deselect', () => {
-      this.selectedItem = null
+      this.selectedItems = null
     })
   },
   activated() {
@@ -179,10 +183,8 @@ export default {
       // TODO: check changes and enable Save button if needed
     },
     update(data, layout, frames) {
-      if (layout?.selections?.length > 0) {
-        layout.selections = []
-        data.forEach(dataItem => delete dataItem.selectedpoints)
-      }
+      chartHelper.clearSelection(data, layout)
+
       this.state = { data, layout, frames }
       this.$emit('update')
     },

src/components/DataView.vue

@@ -58,8 +58,8 @@
       </icon-button>
 
       <icon-button
-        v-if="mode === 'graph'"
-        ref="viewNodeOrEdgeBtn"
+        v-if="mode !== 'pivot'"
+        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,27 @@ export function getOptionsFromDataSources(dataSources) {
   }))
 }
 
+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 +43,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 +96,7 @@ export default {
   getOptionsForSave,
   getImageDataUrl,
   getHtml,
-  getChartData
+  getChartData,
+  getRowsByIndexFromDataSources,
+  clearSelection
 }

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/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

@@ -23,35 +23,54 @@ describe('chartHelper.js', () => {
 
   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 +120,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'
       },
       {