fix import

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.29.0",
+  "version": "0.30.1",
   "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,13 +1,18 @@
 <template>
-  <div ref="chartContainer" class="chart-container">
+  <div class="chart-container">
     <div v-show="!dataSources" class="warning data-view-warning">
       There is no data to build a chart. Run your SQL query and make sure the
       result is not empty.
     </div>
-    <div
+    <splitpanes
+      :before="{ size: 70, max: 100 }"
+      :after="{ size: 30, max: 50, hidden: !showValueViewer }"
+      :default="{ before: 70, after: 30 }"
       class="chart"
       :style="{ height: !dataSources ? 'calc(100% - 40px)' : '100%' }"
     >
+      <template #left-pane>
+        <div ref="chartContainer" :style="{ height: '100%' }">
           <PlotlyEditor
             ref="plotlyEditor"
             :data="state.data"
@@ -25,6 +30,16 @@
             @render="onRender"
           />
         </div>
+      </template>
+      <template v-if="showValueViewer" #right-pane>
+        <value-viewer
+          :empty="!selectedItem"
+          emptyMessage="No points selected to view"
+          :value="JSON.stringify(selectedItem)"
+          defaultFormat="json"
+        />
+      </template>
+    </splitpanes>
   </div>
 </template>
 
@@ -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,7 +81,9 @@ export default {
   data() {
     return {
       plotly,
-      state: this.initOptions || {
+      state: this.initOptions
+        ? JSON.parse(JSON.stringify(this.initOptions))
+        : {
             data: [],
             layout: { autosize: true },
             frames: []
@@ -71,7 +94,8 @@ export default {
         modeBarButtonsToRemove: ['toImage']
       },
       resizeObserver: null,
-      useResizeHandler: this.$store.state.isWorkspaceVisible
+      useResizeHandler: this.$store.state.isWorkspaceVisible,
+      selectedItem: null
     }
   },
   computed: {
@@ -115,13 +139,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.selectedItem = 1
+      }
+    })
+    plotlyDiv?.on('plotly_deselect', () => {
+      this.selectedItem = null
+    })
   },
   activated() {
     this.useResizeHandler = true
@@ -144,6 +179,10 @@ 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)
+      }
       this.state = { data, layout, frames }
       this.$emit('update')
     },

src/components/DataView.vue

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

src/components/Graph/CirclePackLayoutSettings.vue

@@ -28,7 +28,7 @@
     </multiselect>
   </Field>
 
-  <Field label="Seed value">
+  <Field label="Seed value" fieldContainerClassName="test_seed_value">
     <NumericInput
       :value="modelValue.seedValue"
       @update="update('seedValue', $event)"

src/components/Graph/EdgeColorSettings.vue

@@ -102,7 +102,7 @@ export default {
       ]),
       сolorscaleDirections: markRaw([
         { label: 'Normal', value: 'normal' },
-        { label: 'Recersed', value: 'reversed' }
+        { label: 'Reversed', value: 'reversed' }
       ]),
       colorSourceUsageOptions: markRaw([
         { label: 'Direct', value: 'direct' },

src/components/Graph/NodeColorSettings.vue

@@ -139,7 +139,7 @@ export default {
       ]),
       сolorscaleDirections: markRaw([
         { label: 'Normal', value: 'normal' },
-        { label: 'Recersed', value: 'reversed' }
+        { label: 'Reversed', value: 'reversed' }
       ]),
       colorSourceUsageOptions: markRaw([
         { label: 'Direct', value: 'direct' },

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')"
       />

tests/components/Graph/GraphEditor.spec.js

@@ -1628,7 +1628,7 @@ describe('GraphEditor', () => {
       .nodes.map(node => `x:${node.attributes.x},y:${node.attributes.y}`)
       .join()
 
-    // Change initial algorithm
+    // Change initial algorithm to Random
     await wrapper
       .find(
         '.test_fa2_initial_layout_algorithm_select .dropdown-container .Select__indicator'
@@ -1655,8 +1655,8 @@ describe('GraphEditor', () => {
       .nodes.map(node => `x:${node.attributes.x},y:${node.attributes.y}`)
       .join()
 
-    // Change seed value
-    const seedValueInput = wrapper.find('.test_seed_value input')
+    // Change seed value to 123
+    let seedValueInput = wrapper.find('.test_seed_value input')
     await seedValueInput.setValue(123)
     seedValueInput.wrapperElement.dispatchEvent(
       new Event('blur', { bubbles: true })
@@ -1694,9 +1694,336 @@ describe('GraphEditor', () => {
       .nodes.map(node => `x:${node.attributes.x},y:${node.attributes.y}`)
       .join()
 
+    // Change initial algorithm to CirclePack
+    await wrapper
+      .find(
+        '.test_fa2_initial_layout_algorithm_select .dropdown-container .Select__indicator'
+      )
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    await wrapper.findAll('.Select__menu .Select__option')[2].trigger('click')
+    await nextTick()
+
+    // Change seed value to 456
+    seedValueInput = wrapper.find('.test_seed_value input')
+    await seedValueInput.setValue(456)
+    seedValueInput.wrapperElement.dispatchEvent(
+      new Event('blur', { bubbles: true })
+    )
+    await nextTick()
+
+    // Set another hierarchy
+    const hierarchyInput = wrapper.find(
+      '.multiselect.sqliteviz-select .multiselect__select'
+    )
+    await hierarchyInput.trigger('mousedown')
+    await wrapper
+      .find('ul.multiselect__content')
+      .findAll('li')[2]
+      .find('span')
+      .trigger('click')
+    await nextTick()
+
+    // Click Restart
+    await restartButton.trigger('click')
+    // Wait until restarting finished
+    await waitCondition(() => stopSpy.callCount === 5)
+
+    const circlePackCoordinates = graph
+      .export()
+      .nodes.map(node => `x:${node.attributes.x},y:${node.attributes.y}`)
+      .join()
+
     expect(initialCoordinates).not.to.equal(randomCoordinates1)
     expect(randomCoordinates1).not.to.equal(randomCoordinates2)
     expect(randomCoordinates1).to.equal(randomCoordinates1After)
+    expect(circlePackCoordinates).not.to.equal(randomCoordinates1After)
+    expect(circlePackCoordinates).not.to.equal(initialCoordinates)
+
+    wrapper.unmount()
+  })
+
+  it('FA2: restore previously set parameters for initial layout', async () => {
+    const wrapper = mount(GraphEditor, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"type": 0, "node_id": 1}',
+            '{"type": 0, "node_id": 2}',
+            '{"type": 1, "source": 1, "target": 2, "wgt": 15}'
+          ]
+        },
+        initOptions: {
+          ...defaultInitOptions,
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          },
+          layout: {
+            type: 'forceAtlas2',
+            options: {
+              initialAlgorithm: 'circular',
+              initialIterationsAmount: 55,
+              gravity: 1.5,
+              scalingRatio: 1.2,
+              adjustSizes: true,
+              barnesHutOptimize: true,
+              barnesHutTheta: 0.5,
+              strongGravityMode: false,
+              linLogMode: true,
+              outboundAttractionDistribution: false,
+              slowDown: 1,
+              weightSource: 'wgt',
+              edgeWeightInfluence: 0.5
+            }
+          }
+        },
+        showViewSettings: true
+      },
+      global: {
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
+    await styleMenuItem.trigger('click')
+
+    const layoutMenuItem = wrapper.findAll('.sidebar__item')[4]
+    await layoutMenuItem.trigger('click')
+
+    // Change initial algorithm to Random
+    await wrapper
+      .find(
+        '.test_fa2_initial_layout_algorithm_select .dropdown-container .Select__indicator'
+      )
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    await wrapper.findAll('.Select__menu .Select__option')[1].trigger('click')
+    await nextTick()
+
+    expect(wrapper.vm.settings.layout.options).to.eql({
+      initialAlgorithm: 'random',
+      seedValue: 1,
+      initialIterationsAmount: 55,
+      gravity: 1.5,
+      scalingRatio: 1.2,
+      adjustSizes: true,
+      barnesHutOptimize: true,
+      barnesHutTheta: 0.5,
+      strongGravityMode: false,
+      linLogMode: true,
+      outboundAttractionDistribution: false,
+      slowDown: 1,
+      weightSource: 'wgt',
+      edgeWeightInfluence: 0.5
+    })
+
+    // Change seed value to 123
+    let seedValueInput = wrapper.find('.test_seed_value input')
+    await seedValueInput.setValue(123)
+    seedValueInput.wrapperElement.dispatchEvent(
+      new Event('blur', { bubbles: true })
+    )
+    await nextTick()
+
+    expect(wrapper.vm.settings.layout.options).to.eql({
+      initialAlgorithm: 'random',
+      seedValue: 123,
+      initialIterationsAmount: 55,
+      gravity: 1.5,
+      scalingRatio: 1.2,
+      adjustSizes: true,
+      barnesHutOptimize: true,
+      barnesHutTheta: 0.5,
+      strongGravityMode: false,
+      linLogMode: true,
+      outboundAttractionDistribution: false,
+      slowDown: 1,
+      weightSource: 'wgt',
+      edgeWeightInfluence: 0.5
+    })
+
+    // Change initial algorithm to CirclePack
+    await wrapper
+      .find(
+        '.test_fa2_initial_layout_algorithm_select .dropdown-container .Select__indicator'
+      )
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    await wrapper.findAll('.Select__menu .Select__option')[2].trigger('click')
+    await nextTick()
+
+    expect(wrapper.vm.settings.layout.options).to.eql({
+      initialAlgorithm: 'circlepack',
+      seedValue: 1,
+      hierarchyAttributes: [],
+      initialIterationsAmount: 55,
+      gravity: 1.5,
+      scalingRatio: 1.2,
+      adjustSizes: true,
+      barnesHutOptimize: true,
+      barnesHutTheta: 0.5,
+      strongGravityMode: false,
+      linLogMode: true,
+      outboundAttractionDistribution: false,
+      slowDown: 1,
+      weightSource: 'wgt',
+      edgeWeightInfluence: 0.5
+    })
+
+    // Change seed value to 456
+    seedValueInput = wrapper.find('.test_seed_value input')
+    await seedValueInput.setValue(456)
+    seedValueInput.wrapperElement.dispatchEvent(
+      new Event('blur', { bubbles: true })
+    )
+    await nextTick()
+
+    expect(wrapper.vm.settings.layout.options).to.eql({
+      initialAlgorithm: 'circlepack',
+      seedValue: 456,
+      hierarchyAttributes: [],
+      initialIterationsAmount: 55,
+      gravity: 1.5,
+      scalingRatio: 1.2,
+      adjustSizes: true,
+      barnesHutOptimize: true,
+      barnesHutTheta: 0.5,
+      strongGravityMode: false,
+      linLogMode: true,
+      outboundAttractionDistribution: false,
+      slowDown: 1,
+      weightSource: 'wgt',
+      edgeWeightInfluence: 0.5
+    })
+
+    // Set another hierarchy
+    const hierarchyInput = wrapper.find(
+      '.multiselect.sqliteviz-select .multiselect__select'
+    )
+    await hierarchyInput.trigger('mousedown')
+    await wrapper
+      .find('ul.multiselect__content')
+      .findAll('li')[1]
+      .find('span')
+      .trigger('click')
+    await nextTick()
+
+    expect(wrapper.vm.settings.layout.options).to.eql({
+      initialAlgorithm: 'circlepack',
+      seedValue: 456,
+      hierarchyAttributes: ['node_id'],
+      initialIterationsAmount: 55,
+      gravity: 1.5,
+      scalingRatio: 1.2,
+      adjustSizes: true,
+      barnesHutOptimize: true,
+      barnesHutTheta: 0.5,
+      strongGravityMode: false,
+      linLogMode: true,
+      outboundAttractionDistribution: false,
+      slowDown: 1,
+      weightSource: 'wgt',
+      edgeWeightInfluence: 0.5
+    })
+
+    // Change initial algorithm to Random
+    await wrapper
+      .find(
+        '.test_fa2_initial_layout_algorithm_select .dropdown-container .Select__indicator'
+      )
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    await wrapper.findAll('.Select__menu .Select__option')[1].trigger('click')
+    await nextTick()
+
+    expect(wrapper.vm.settings.layout.options).to.eql({
+      initialAlgorithm: 'random',
+      seedValue: 123,
+      initialIterationsAmount: 55,
+      gravity: 1.5,
+      scalingRatio: 1.2,
+      adjustSizes: true,
+      barnesHutOptimize: true,
+      barnesHutTheta: 0.5,
+      strongGravityMode: false,
+      linLogMode: true,
+      outboundAttractionDistribution: false,
+      slowDown: 1,
+      weightSource: 'wgt',
+      edgeWeightInfluence: 0.5
+    })
+
+    // Change initial algorithm to Circular
+    await wrapper
+      .find(
+        '.test_fa2_initial_layout_algorithm_select .dropdown-container .Select__indicator'
+      )
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    await wrapper.findAll('.Select__menu .Select__option')[0].trigger('click')
+    await nextTick()
+
+    expect(wrapper.vm.settings.layout.options).to.eql({
+      initialAlgorithm: 'circular',
+      initialIterationsAmount: 55,
+      gravity: 1.5,
+      scalingRatio: 1.2,
+      adjustSizes: true,
+      barnesHutOptimize: true,
+      barnesHutTheta: 0.5,
+      strongGravityMode: false,
+      linLogMode: true,
+      outboundAttractionDistribution: false,
+      slowDown: 1,
+      weightSource: 'wgt',
+      edgeWeightInfluence: 0.5
+    })
+
+    // Change initial algorithm to CirclePack
+    await wrapper
+      .find(
+        '.test_fa2_initial_layout_algorithm_select .dropdown-container .Select__indicator'
+      )
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    await wrapper.findAll('.Select__menu .Select__option')[2].trigger('click')
+    await nextTick()
+
+    expect(wrapper.vm.settings.layout.options).to.eql({
+      initialAlgorithm: 'circlepack',
+      seedValue: 456,
+      hierarchyAttributes: ['node_id'],
+      initialIterationsAmount: 55,
+      gravity: 1.5,
+      scalingRatio: 1.2,
+      adjustSizes: true,
+      barnesHutOptimize: true,
+      barnesHutTheta: 0.5,
+      strongGravityMode: false,
+      linLogMode: true,
+      outboundAttractionDistribution: false,
+      slowDown: 1,
+      weightSource: 'wgt',
+      edgeWeightInfluence: 0.5
+    })
 
     wrapper.unmount()
   })

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()
+  })
+})