#139 view details of selected points

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) {
+      chartHelper.clearSelection(data, layout)
-        layout.selections = []
+
-        data.forEach(dataItem => delete dataItem.selectedpoints)
-      }
       this.state = { data, layout, frames }
       this.$emit('update')
     },

src/components/DataView.vue

@@ -58,7 +58,7 @@
       </icon-button>
 
       <icon-button
-        v-if="mode === 'graph'"
+        v-if="mode !== 'pivot'"
         ref="viewNodeOrEdgeBtn"
         tooltip="View details"
         tooltipPosition="top-left"

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,