tests

src/components/Graph/EdgeColorSettings.vue

@@ -1,18 +1,21 @@
 <template>
-  <Field label="Color">
+  <Field label="Color" fieldContainerClassName="test_edge_color">
     <RadioBlocks
       :options="edgeColorTypeOptions"
       :activeOption="modelValue.type"
       @option-change="updateColorType"
     />
-    <Field v-if="modelValue.type === 'constant'">
+    <Field
+      v-if="modelValue.type === 'constant'"
+      fieldContainerClassName="test_edge_color_value"
+    >
       <ColorPicker
         :selectedColor="modelValue.value"
         @color-change="updateSettings('value', $event)"
       />
     </Field>
     <template v-else>
-      <Field>
+      <Field fieldContainerClassName="test_edge_color_value">
         <Dropdown
           v-if="modelValue.type === 'variable'"
           :options="keyOptions"
@@ -21,7 +24,7 @@
         />
       </Field>
 
-      <Field>
+      <Field fieldContainerClassName="test_edge_color_mapping_mode">
         <RadioBlocks
           :options="colorSourceUsageOptions"
           :activeOption="modelValue.sourceUsage"
@@ -42,6 +45,7 @@
   <Field
     v-if="modelValue.type !== 'constant' && modelValue.sourceUsage === 'map_to'"
     label="Color as"
+    fieldContainerClassName="test_edge_color_as"
   >
     <RadioBlocks
       :options="сolorAsOptions"
@@ -53,6 +57,7 @@
   <Field
     v-if="modelValue.type !== 'constant' && modelValue.sourceUsage === 'map_to'"
     label="Colorscale direction"
+    fieldContainerClassName="test_edge_color_colorscale_direction"
   >
     <RadioBlocks
       :options="сolorscaleDirections"

src/components/Graph/EdgeSizeSettings.vue

@@ -1,12 +1,12 @@
 <template>
-  <Field label="Size">
+  <Field label="Size" fieldContainerClassName="test_edge_size">
     <RadioBlocks
       :options="edgeSizeTypeOptions"
       :activeOption="modelValue.type"
       @option-change="updateSizeType"
     />
 
-    <Field>
+    <Field fieldContainerClassName="test_edge_size_value">
       <NumericInput
         v-if="modelValue.type === 'constant'"
         :value="modelValue.value"
@@ -23,14 +23,14 @@
   </Field>
 
   <template v-if="modelValue.type !== 'constant'">
-    <Field label="Size scale">
+    <Field label="Size scale" fieldContainerClassName="test_edge_size_scale">
       <NumericInput
         :value="modelValue.scale"
         @update="updateSettings('scale', $event)"
       />
     </Field>
 
-    <Field label="Minimum size">
+    <Field label="Minimum size" fieldContainerClassName="test_edge_size_min">
       <NumericInput
         :value="modelValue.min"
         @update="updateSettings('min', $event)"

src/components/Graph/GraphEditor.vue

@@ -11,10 +11,11 @@
                 documentation</a
               >.
             </Field>
-            <Field label="Object type">
+            <Field label="Object type" ref="objectTypeField">
               <Dropdown
                 :options="keysOptions"
                 :value="settings.structure.objectType"
+                className="test_object_type_select"
                 @change="updateStructure('objectType', $event)"
               />
               <Field>
@@ -27,6 +28,7 @@
               <Dropdown
                 :options="keysOptions"
                 :value="settings.structure.nodeId"
+                className="test_node_id_select"
                 @change="updateStructure('nodeId', $event)"
               />
               <Field> A field keeping unique node identifier. </Field>
@@ -36,6 +38,7 @@
               <Dropdown
                 :options="keysOptions"
                 :value="settings.structure.edgeSource"
+                className="test_edge_source_select"
                 @change="updateStructure('edgeSource', $event)"
               />
               <Field>
@@ -47,6 +50,7 @@
               <Dropdown
                 :options="keysOptions"
                 :value="settings.structure.edgeTarget"
+                className="test_edge_target_select"
                 @change="updateStructure('edgeTarget', $event)"
               />
               <Field>
@@ -71,6 +75,7 @@
               <Dropdown
                 :options="keysOptions"
                 :value="settings.style.nodes.label.source"
+                className="test_label_select"
                 @change="updateNodes('label.source', $event)"
               />
             </Field>
@@ -97,7 +102,10 @@
 
         <Panel group="Style" name="Edges">
           <Fold name="Edges">
-            <Field label="Direction">
+            <Field
+              label="Direction"
+              fieldContainerClassName="test_edge_direction"
+            >
               <RadioBlocks
                 :options="visibilityOptions"
                 :activeOption="settings.style.edges.showDirection"
@@ -109,6 +117,7 @@
               <Dropdown
                 :options="keysOptions"
                 :value="settings.style.edges.label.source"
+                className="test_edge_label_select"
                 @change="updateEdges('label.source', $event)"
               />
             </Field>
@@ -139,6 +148,7 @@
               <Dropdown
                 :options="layoutOptions"
                 :value="settings.layout.type"
+                :clearable="false"
                 @change="updateLayout($event)"
               />
             </Field>
@@ -183,6 +193,7 @@
 
     <div
       ref="graph"
+      class="test_graph_output"
       :style="{
         height: '100%',
         width: '100%',
@@ -416,9 +427,7 @@ export default {
       this.updateLayout(this.settings.layout.type)
       this.renderer = new Sigma(this.graph, this.$refs.graph, {
         renderEdgeLabels: true,
-        allowInvalidContainer: true,
+        allowInvalidContainer: true
-        labelColor: { attribute: 'labelColor', color: '#444444' },
-        edgeLabelColor: { attribute: 'labelColor', color: '#a2b1c6' }
       })
       if (this.settings.layout.type === 'forceAtlas2') {
         this.autoRunFA2Layout()

src/components/Graph/NodeColorSettings.vue

@@ -1,18 +1,21 @@
 <template>
-  <Field label="Color">
+  <Field label="Color" fieldContainerClassName="test_node_color">
     <RadioBlocks
       :options="nodeColorTypeOptions"
       :activeOption="modelValue.type"
       @option-change="updateColorType"
     />
-    <Field v-if="modelValue.type === 'constant'">
+    <Field
+      v-if="modelValue.type === 'constant'"
+      fieldContainerClassName="test_node_color_value"
+    >
       <ColorPicker
         :selectedColor="modelValue.value"
         @color-change="updateSettings('value', $event)"
       />
     </Field>
     <template v-else>
-      <Field>
+      <Field fieldContainerClassName="test_node_color_value">
         <Dropdown
           v-if="modelValue.type === 'variable'"
           :options="keyOptions"
@@ -23,11 +26,15 @@
           v-if="modelValue.type === 'calculated'"
           :options="nodeCalculatedColorMethodOptions"
           :value="modelValue.method"
+          :clearable="false"
           @change="updateSettings('method', $event)"
         />
       </Field>
 
-      <Field v-if="modelValue.type === 'variable'">
+      <Field
+        v-if="modelValue.type === 'variable'"
+        fieldContainerClassName="test_node_color_mapping_mode"
+      >
         <RadioBlocks
           :options="colorSourceUsageOptions"
           :activeOption="modelValue.sourceUsage"
@@ -55,6 +62,7 @@
       modelValue.sourceUsage === 'map_to' || modelValue.type === 'calculated'
     "
     label="Color as"
+    fieldContainerClassName="test_node_color_as"
   >
     <RadioBlocks
       :options="сolorAsOptions"
@@ -68,6 +76,7 @@
       modelValue.sourceUsage === 'map_to' || modelValue.type === 'calculated'
     "
     label="Colorscale direction"
+    fieldContainerClassName="test_node_color_colorscale_direction"
   >
     <RadioBlocks
       :options="сolorscaleDirections"

src/components/Graph/NodeSizeSettings.vue

@@ -1,16 +1,17 @@
 <template>
-  <Field label="Size">
+  <Field label="Size" fieldContainerClassName="test_node_size">
     <RadioBlocks
       :options="nodeSizeTypeOptions"
       :activeOption="modelValue.type"
       @option-change="updateSizeType"
     />
 
-    <Field>
+    <Field fieldContainerClassName="test_node_size_value">
       <NumericInput
         v-if="modelValue.type === 'constant'"
         :value="modelValue.value"
         :min="1"
+        class="test_node_size_value"
         @update="updateSettings('value', $event)"
       />
       <Dropdown
@@ -23,20 +24,21 @@
         v-if="modelValue.type === 'calculated'"
         :options="nodeCalculatedSizeMethodOptions"
         :value="modelValue.method"
+        :clearable="false"
         @change="updateSettings('method', $event)"
       />
     </Field>
   </Field>
 
   <template v-if="modelValue.type !== 'constant'">
-    <Field label="Size scale">
+    <Field label="Size scale" fieldContainerClassName="test_node_size_scale">
       <NumericInput
         :value="modelValue.scale"
         @update="updateSettings('scale', $event)"
       />
     </Field>
 
-    <Field label="Size mode">
+    <Field label="Size mode" fieldContainerClassName="test_node_size_mode">
       <RadioBlocks
         :options="nodeSizeModeOptions"
         :activeOption="modelValue.mode"
@@ -44,7 +46,7 @@
       />
     </Field>
 
-    <Field label="Minimum size">
+    <Field label="Minimum size" fieldContainerClassName="test_node_size_min">
       <NumericInput
         :value="modelValue.min"
         @update="updateSettings('min', $event)"

src/views/MainView/Workspace/Tabs/Tab/DataView/Chart/index.vue

@@ -120,8 +120,8 @@ export default {
     this.resizeObserver.observe(this.$refs.chartContainer)
     if (this.dataSources) {
       dereference.default(this.state.data, this.dataSources)
-      this.updatePlotly()
     }
+    this.handleResize()
   },
   activated() {
     this.useResizeHandler = true
@@ -134,6 +134,10 @@ export default {
   },
   methods: {
     async handleResize() {
+      // Call updatePlotly twice because there is a small gap (for scrolling?)
+      //  on right and bottom of the plot.
+      // After the second call it's good.
+      this.updatePlotly()
       this.updatePlotly()
     },
     onRender() {

src/views/MainView/Workspace/Tabs/Tab/DataView/Graph/index.vue

@@ -1,10 +1,13 @@
 <template>
   <div ref="graphContainer" class="graph-container">
-    <div v-show="!dataSources" class="warning data-view-warning">
+    <div v-show="!dataSources" class="warning data-view-warning no-data">
       There is no data to build a graph. Run your SQL query and make sure the
       result is not empty.
     </div>
-    <div v-show="!dataSourceIsValid" class="warning data-view-warning">
+    <div
+      v-show="!dataSourceIsValid"
+      class="warning data-view-warning invalid-data"
+    >
       Result set is invalid for graph visualisation. Learn more in
       <a href="https://sqliteviz.com/docs/graph/" target="_blank">
         documentation</a
@@ -30,7 +33,7 @@
 
 <script>
 import 'react-chart-editor/lib/react-chart-editor.css'
-import GraphEditor from './GraphEditor.vue'
+import GraphEditor from '@/components/Graph/GraphEditor.vue'
 import { dataSourceIsValid } from '@/lib/graphHelper'
 
 export default {
@@ -47,6 +50,8 @@ export default {
   emits: [
     'update:exportToSvgEnabled',
     'update:exportToHtmlEnabled',
+    'update:exportToPngEnabled',
+    'update:exportToClipboardEnabled',
     'update',
     'loadingImageCompleted'
   ],
@@ -58,6 +63,8 @@ export default {
   created() {
     this.$emit('update:exportToSvgEnabled', false)
     this.$emit('update:exportToHtmlEnabled', false)
+    this.$emit('update:exportToPngEnabled', !!this.dataSources)
+    this.$emit('update:exportToClipboardEnabled', !!this.dataSources)
   },
   mounted() {
     this.resizeObserver = new ResizeObserver(this.handleResize)
@@ -70,6 +77,10 @@ export default {
     async showViewSettings() {
       await this.$nextTick()
       this.handleResize()
+    },
+    dataSources() {
+      this.$emit('update:exportToPngEnabled', !!this.dataSources)
+      this.$emit('update:exportToClipboardEnabled', !!this.dataSources)
     }
   },
   computed: {
@@ -85,8 +96,8 @@ export default {
       await this.$refs.graphEditor.saveAsPng()
       this.$emit('loadingImageCompleted')
     },
-    async prepareCopy() {
+    prepareCopy() {
-      return await this.$refs.graphEditor.prepareCopy()
+      return this.$refs.graphEditor.prepareCopy()
     },
     async handleResize() {
       const renderer = this.$refs.graphEditor.renderer

src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/index.vue

@@ -227,12 +227,12 @@ export default {
 
     async prepareCopy() {
       if (this.viewCustomChart) {
-        return await this.$refs.customChart.prepareCopy()
+        return this.$refs.customChart.prepareCopy()
       }
       if (this.viewStandartChart) {
-        return await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
+        return chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
       }
-      return await pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
+      return pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
     },
 
     async saveAsSvg() {

src/views/MainView/Workspace/Tabs/Tab/DataView/index.vue

@@ -7,6 +7,7 @@
         v-model:exportToPngEnabled="exportToPngEnabled"
         v-model:exportToSvgEnabled="exportToSvgEnabled"
         v-model:exportToHtmlEnabled="exportToHtmlEnabled"
+        v-model:exportToClipboardEnabled="exportToClipboardEnabled"
         :initOptions="initOptionsByMode[mode]"
         :data-sources="dataSource"
         :showViewSettings="showViewSettings"
@@ -88,6 +89,7 @@
       </icon-button>
       <icon-button
         ref="copyToClipboardBtn"
+        :disabled="!exportToClipboardEnabled"
         :loading="copyingImage"
         tooltip="Copy visualisation to clipboard"
         tooltipPosition="top-left"
@@ -159,6 +161,7 @@ export default {
       exportToPngEnabled: true,
       exportToSvgEnabled: true,
       exportToHtmlEnabled: true,
+      exportToClipboardEnabled: true,
       loadingImage: false,
       copyingImage: false,
       preparingCopy: false,
@@ -181,6 +184,7 @@ export default {
     mode(newMode, oldMode) {
       this.$emit('update')
       this.exportToPngEnabled = true
+      this.exportToClipboardEnabled = true
       this.initOptionsByMode[oldMode] = this.getOptionsForSave()
     }
   },

tests/components/Graph/GraphEditor.spec.js

@@ -0,0 +1,892 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import GraphEditor from '@/components/Graph/GraphEditor.vue'
+import { nextTick } from 'vue'
+
+const defaultInitOptions = {
+  structure: {
+    nodeId: null,
+    objectType: null,
+    edgeSource: null,
+    edgeTarget: null
+  },
+  style: {
+    backgroundColor: 'white',
+    nodes: {
+      size: {
+        type: 'constant',
+        value: 10
+      },
+      color: {
+        type: 'constant',
+        value: '#1F77B4'
+      },
+      label: {
+        source: null,
+        color: '#444444'
+      }
+    },
+    edges: {
+      showDirection: true,
+      size: {
+        type: 'constant',
+        value: 2
+      },
+      color: {
+        type: 'constant',
+        value: '#a2b1c6'
+      },
+      label: {
+        source: null,
+        color: '#a2b1c6'
+      }
+    }
+  },
+  layout: {
+    type: 'circular',
+    options: null
+  }
+}
+
+describe('GraphEditor', () => {
+  it('sets graph structure', async () => {
+    const wrapper = mount(GraphEditor, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"object_type": 0, "node_id": 1}',
+            '{"object_type": 0, "node_id": 2}',
+            '{"object_type": 1, "source": 1, "target": 2}'
+          ]
+        },
+        showViewSettings: true
+      },
+      global: {
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const graph = wrapper.vm.graph
+
+    await wrapper
+      .find('.test_object_type_select.dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    let options = wrapper.findAll('.Select__menu .Select__option')
+    expect(options.length).to.equal(4)
+    expect(wrapper.find('.Select__menu').text()).to.contain(
+      'object_type' + 'node_id' + 'source' + 'target'
+    )
+
+    await options[0].trigger('click')
+    expect(graph.export().nodes.length).to.equal(0)
+    expect(graph.export().edges.length).to.equal(0)
+
+    await wrapper
+      .find('.test_node_id_select.dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    options = wrapper.findAll('.Select__menu .Select__option')
+    await options[1].trigger('click')
+    expect(graph.export().nodes.length).to.equal(2)
+    expect(graph.export().edges.length).to.equal(0)
+
+    await wrapper
+      .find('.test_edge_source_select.dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    options = wrapper.findAll('.Select__menu .Select__option')
+    await options[2].trigger('click')
+
+    await wrapper
+      .find('.test_edge_target_select.dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    options = wrapper.findAll('.Select__menu .Select__option')
+    await options[3].trigger('click')
+    expect(graph.export().nodes.length).to.equal(2)
+    expect(graph.export().edges.length).to.equal(1)
+
+    wrapper.unmount()
+  })
+
+  it('changes background color', async () => {
+    const wrapper = mount(GraphEditor, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: []
+        },
+        showViewSettings: true
+      },
+      global: {
+        provide: {
+          tabLayout: { dataView: 'above' }
+        },
+        stubs: {
+          ColorPicker: true
+        }
+      }
+    })
+
+    const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
+    await styleMenuItem.trigger('click')
+
+    const generalMenuItem = wrapper.findAll('.sidebar__item')[1]
+    await generalMenuItem.trigger('click')
+    await wrapper
+      .findComponent({ name: 'ColorPicker' })
+      .vm.$emit('colorChange', '#ff00ff')
+
+    expect(
+      wrapper.find('.test_graph_output').wrapperElement.style.backgroundColor
+    ).to.equal('rgb(255, 0, 255)')
+    wrapper.unmount()
+  })
+
+  it('sets node labels', async () => {
+    const wrapper = mount(GraphEditor, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"object_type": 0, "node_id": 1, "name": "foo"}',
+            '{"object_type": 0, "node_id": 2, "name": "bar"}',
+            '{"object_type": 1, "source": 1, "target": 2}'
+          ]
+        },
+        initOptions: {
+          ...defaultInitOptions,
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          }
+        },
+        showViewSettings: true
+      },
+      global: {
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const graph = wrapper.vm.graph
+
+    const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
+    await styleMenuItem.trigger('click')
+
+    const nodesMenuItem = wrapper.findAll('.sidebar__item')[2]
+    await nodesMenuItem.trigger('click')
+
+    await wrapper
+      .find('.test_label_select.dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    await wrapper.findAll('.Select__menu .Select__option')[2].trigger('click')
+
+    expect(graph.export().nodes[0].attributes.label).to.equal('foo')
+    expect(graph.export().nodes[1].attributes.label).to.equal('bar')
+
+    wrapper.unmount()
+  })
+
+  it('sets node label color', async () => {
+    const wrapper = mount(GraphEditor, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"object_type": 0, "node_id": 1, "name": "foo"}',
+            '{"object_type": 0, "node_id": 2, "name": "bar"}',
+            '{"object_type": 1, "source": 1, "target": 2}'
+          ]
+        },
+        initOptions: {
+          ...defaultInitOptions,
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          }
+        },
+        showViewSettings: true
+      },
+      global: {
+        provide: {
+          tabLayout: { dataView: 'above' }
+        },
+        stubs: {
+          ColorPicker: true
+        }
+      }
+    })
+
+    const graph = wrapper.vm.graph
+
+    const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
+    await styleMenuItem.trigger('click')
+
+    const nodesMenuItem = wrapper.findAll('.sidebar__item')[2]
+    await nodesMenuItem.trigger('click')
+
+    await wrapper
+      .findComponent({ name: 'ColorPicker' })
+      .vm.$emit('colorChange', '#ff00ff')
+
+    expect(graph.export().nodes[0].attributes.labelColor).to.equal('#ff00ff')
+    expect(graph.export().nodes[1].attributes.labelColor).to.equal('#ff00ff')
+
+    wrapper.unmount()
+  })
+
+  it('sets node size', async () => {
+    const wrapper = mount(GraphEditor, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"object_type": 0, "node_id": 1, "points": 32}',
+            '{"object_type": 0, "node_id": 2, "points": 8}',
+            '{"object_type": 1, "source": 1, "target": 2}',
+            '{"object_type": 1, "source": 1, "target": 2}',
+            '{"object_type": 1, "source": 1, "target": 2}',
+            '{"object_type": 1, "source": 1, "target": 2}',
+            '{"object_type": 1, "source": 2, "target": 1}'
+          ]
+        },
+        initOptions: {
+          ...defaultInitOptions,
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          }
+        },
+        showViewSettings: true
+      },
+      global: {
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const graph = wrapper.vm.graph
+
+    const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
+    await styleMenuItem.trigger('click')
+
+    const nodesMenuItem = wrapper.findAll('.sidebar__item')[2]
+    await nodesMenuItem.trigger('click')
+
+    // Set constant size = 50
+    const sizeInput = wrapper.find('.test_node_size_value input')
+    await sizeInput.setValue(50)
+    sizeInput.wrapperElement.dispatchEvent(new Event('blur', { bubbles: true }))
+    // Call nextTick after setting number input,
+    // otherwise the value will be changed beck to initial for some reason
+    await nextTick()
+
+    expect(graph.export().nodes[0].attributes.size).to.equal(50)
+    expect(graph.export().nodes[1].attributes.size).to.equal(50)
+
+    // Switch to Variable
+    const variable = wrapper.findAll('.test_node_size .radio-block__option')[1]
+    await variable.trigger('click')
+
+    // Select points as size source
+    await wrapper
+      .find('.test_node_size_value .dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    await wrapper.findAll('.Select__menu .Select__option')[2].trigger('click')
+
+    expect(graph.export().nodes[0].attributes.size).to.equal(16)
+    expect(graph.export().nodes[1].attributes.size).to.equal(4)
+
+    // Set size scale
+    const sizeScale = wrapper.find('.test_node_size_scale input')
+    sizeScale.wrapperElement.value = 4
+    sizeScale.wrapperElement.dispatchEvent(new Event('blur', { bubbles: true }))
+    await nextTick()
+
+    expect(graph.export().nodes[0].attributes.size).to.equal(64)
+    expect(graph.export().nodes[1].attributes.size).to.equal(16)
+
+    // Switch to Area
+    const mode = wrapper.findAll('.test_node_size_mode .radio-block__option')[0]
+    await mode.trigger('click')
+
+    expect(graph.export().nodes[0].attributes.size).to.equal(8)
+    expect(graph.export().nodes[1].attributes.size).to.equal(4)
+
+    // Set min
+    const sizeMin = wrapper.find('.test_node_size_min input')
+    await sizeMin.setValue(12)
+    sizeMin.wrapperElement.dispatchEvent(new Event('blur', { bubbles: true }))
+    await nextTick()
+
+    expect(graph.export().nodes[0].attributes.size).to.equal(8)
+    expect(graph.export().nodes[1].attributes.size).to.equal(6)
+
+    // Switch to Calculated
+    const calculated = wrapper.findAll(
+      '.test_node_size .radio-block__option'
+    )[2]
+    await calculated.trigger('click')
+    expect(graph.export().nodes[0].attributes.size).to.equal(2.5)
+    expect(graph.export().nodes[1].attributes.size).to.equal(2.5)
+    await nextTick()
+
+    // Choose in-degree
+    await wrapper
+      .find('.test_node_size_value .dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    await wrapper.findAll('.Select__menu .Select__option')[1].trigger('click')
+
+    expect(graph.export().nodes[0].attributes.size).to.equal(0.5)
+    expect(graph.export().nodes[1].attributes.size).to.equal(2)
+
+    // Switch to Variable
+    await variable.trigger('click')
+
+    // The latest settings from variable mode are applied
+    expect(graph.export().nodes[0].attributes.size).to.equal(8)
+    expect(graph.export().nodes[1].attributes.size).to.equal(6)
+
+    // Switch to Constant
+    const constant = wrapper.findAll('.test_node_size .radio-block__option')[0]
+    await constant.trigger('click')
+
+    // The latest settings from constant mode are applied
+    expect(graph.export().nodes[0].attributes.size).to.equal(50)
+    expect(graph.export().nodes[1].attributes.size).to.equal(50)
+
+    wrapper.unmount()
+  })
+
+  it('sets node color', async () => {
+    const wrapper = mount(GraphEditor, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"type": 0, "node_id": 1, "color": "#ff0000", "points": 5}',
+            '{"type": 0, "node_id": 2, "color": "#abcdff", "points": 15}',
+            '{"type": 0, "node_id": 3, "color": "#123456", "points": 10}',
+            '{"type": 1, "source": 2, "target": 3}'
+          ]
+        },
+        initOptions: {
+          ...defaultInitOptions,
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          }
+        },
+        showViewSettings: true
+      },
+      global: {
+        provide: {
+          tabLayout: { dataView: 'above' }
+        },
+        stubs: {
+          ColorPicker: true
+        }
+      }
+    })
+
+    const graph = wrapper.vm.graph
+
+    const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
+    await styleMenuItem.trigger('click')
+
+    const nodesMenuItem = wrapper.findAll('.sidebar__item')[2]
+    await nodesMenuItem.trigger('click')
+
+    // Set constant color
+    await wrapper
+      .findAllComponents({ name: 'ColorPicker' })[1]
+      .vm.$emit('colorChange', '#ff00ff')
+
+    expect(graph.export().nodes[0].attributes.color).to.equal('#ff00ff')
+    expect(graph.export().nodes[1].attributes.color).to.equal('#ff00ff')
+    expect(graph.export().nodes[2].attributes.color).to.equal('#ff00ff')
+
+    // Switch to Variable
+    const variable = wrapper.findAll('.test_node_color .radio-block__option')[1]
+    await variable.trigger('click')
+
+    // Select "color" as color source
+    await wrapper
+      .find('.test_node_color_value .dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    await wrapper.findAll('.Select__menu .Select__option')[2].trigger('click')
+
+    expect(graph.export().nodes[0].attributes.color).to.equal('#fafa6e')
+    expect(graph.export().nodes[1].attributes.color).to.equal('#bdea75')
+    expect(graph.export().nodes[2].attributes.color).to.equal('#86d780')
+
+    // Select Direct mapping
+    await wrapper
+      .find('.test_node_color_mapping_mode .radio-block__option')
+      .trigger('click')
+
+    expect(graph.export().nodes[0].attributes.color).to.equal('#ff0000')
+    expect(graph.export().nodes[1].attributes.color).to.equal('#abcdff')
+    expect(graph.export().nodes[2].attributes.color).to.equal('#123456')
+
+    // Switch to Calculated
+    const calculated = wrapper.findAll(
+      '.test_node_color .radio-block__option'
+    )[2]
+    await calculated.trigger('click')
+    expect(graph.export().nodes[0].attributes.color).to.equal('#fafa6e')
+    expect(graph.export().nodes[1].attributes.color).to.equal('#2a4858')
+    expect(graph.export().nodes[2].attributes.color).to.equal('#2a4858')
+    await nextTick()
+
+    // Choose in-degree
+    await wrapper
+      .find('.test_node_color_value .dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    await wrapper.findAll('.Select__menu .Select__option')[1].trigger('click')
+
+    expect(graph.export().nodes[0].attributes.color).to.equal('#fafa6e')
+    expect(graph.export().nodes[1].attributes.color).to.equal('#fafa6e')
+    expect(graph.export().nodes[2].attributes.color).to.equal('#2a4858')
+    await nextTick()
+
+    // Set Color as to Categorical
+    await wrapper
+      .findAll('.test_node_color_as .radio-block__option')[1]
+      .trigger('click')
+    expect(graph.export().nodes[0].attributes.color).to.equal('#fafa6e')
+    expect(graph.export().nodes[1].attributes.color).to.equal('#fafa6e')
+    expect(graph.export().nodes[2].attributes.color).to.equal('#bdea75')
+    await nextTick()
+
+    // Change colorscale direction
+    await wrapper
+      .findAll('.test_node_color_colorscale_direction .radio-block__option')[1]
+      .trigger('click')
+    expect(graph.export().nodes[0].attributes.color).to.equal('#2a4858')
+    expect(graph.export().nodes[1].attributes.color).to.equal('#2a4858')
+    expect(graph.export().nodes[2].attributes.color).to.equal('#1f5f70')
+    await nextTick()
+
+    // Switch to Variable
+    await variable.trigger('click')
+
+    // The latest settings from variable mode are applied
+    expect(graph.export().nodes[0].attributes.color).to.equal('#ff0000')
+    expect(graph.export().nodes[1].attributes.color).to.equal('#abcdff')
+    expect(graph.export().nodes[2].attributes.color).to.equal('#123456')
+
+    // Switch to Constant
+    const constant = wrapper.findAll('.test_node_color .radio-block__option')[0]
+    await constant.trigger('click')
+
+    // The latest settings from constant mode are applied
+    expect(graph.export().nodes[0].attributes.color).to.equal('#ff00ff')
+    expect(graph.export().nodes[1].attributes.color).to.equal('#ff00ff')
+    expect(graph.export().nodes[2].attributes.color).to.equal('#ff00ff')
+
+    wrapper.unmount()
+  })
+
+  it('shows and hide arrows', async () => {
+    const wrapper = mount(GraphEditor, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"object_type": 0, "node_id": 1}',
+            '{"object_type": 0, "node_id": 2}',
+            '{"object_type": 1, "source": 1, "target": 2}'
+          ]
+        },
+        initOptions: {
+          ...defaultInitOptions,
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          }
+        },
+        showViewSettings: true
+      },
+      global: {
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const graph = wrapper.vm.graph
+
+    expect(graph.export().edges[0].attributes.type).to.equal('arrow')
+
+    const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
+    await styleMenuItem.trigger('click')
+
+    const edgesMenuItem = wrapper.findAll('.sidebar__item')[3]
+    await edgesMenuItem.trigger('click')
+
+    // Switch showing direction
+    const variable = wrapper.findAll(
+      '.test_edge_direction .radio-block__option'
+    )[1]
+    await variable.trigger('click')
+
+    expect(graph.export().edges[0].attributes.type).to.equal('line')
+  })
+
+  it('sets edge labels', async () => {
+    const wrapper = mount(GraphEditor, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"object_type": 0, "node_id": 1}',
+            '{"object_type": 0, "node_id": 2}',
+            '{"object_type": 1, "source": 1, "target": 2, "name": "bar"}'
+          ]
+        },
+        initOptions: {
+          ...defaultInitOptions,
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          }
+        },
+        showViewSettings: true
+      },
+      global: {
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const graph = wrapper.vm.graph
+    expect(graph.export().edges[0].attributes.label).to.equal('')
+
+    const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
+    await styleMenuItem.trigger('click')
+
+    const edgesMenuItem = wrapper.findAll('.sidebar__item')[3]
+    await edgesMenuItem.trigger('click')
+
+    await wrapper
+      .find('.test_edge_label_select.dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    await wrapper.findAll('.Select__menu .Select__option')[4].trigger('click')
+
+    expect(graph.export().edges[0].attributes.label).to.equal('bar')
+
+    wrapper.unmount()
+  })
+
+  it('sets edge label color', async () => {
+    const wrapper = mount(GraphEditor, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"object_type": 0, "node_id": 1, "name": "foo"}',
+            '{"object_type": 0, "node_id": 2, "name": "bar"}',
+            '{"object_type": 1, "source": 1, "target": 2}'
+          ]
+        },
+        initOptions: {
+          ...defaultInitOptions,
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          }
+        },
+        showViewSettings: true
+      },
+      global: {
+        provide: {
+          tabLayout: { dataView: 'above' }
+        },
+        stubs: {
+          ColorPicker: true
+        }
+      }
+    })
+
+    const graph = wrapper.vm.graph
+
+    const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
+    await styleMenuItem.trigger('click')
+
+    const edgesMenuItem = wrapper.findAll('.sidebar__item')[3]
+    await edgesMenuItem.trigger('click')
+
+    await wrapper
+      .findComponent({ name: 'ColorPicker' })
+      .vm.$emit('colorChange', '#ff00ff')
+
+    expect(graph.export().edges[0].attributes.labelColor).to.equal('#ff00ff')
+
+    wrapper.unmount()
+  })
+
+  it('sets edge size', async () => {
+    const wrapper = mount(GraphEditor, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"object_type": 0, "node_id": 1}',
+            '{"object_type": 0, "node_id": 2}',
+            '{"object_type": 1, "source": 1, "target": 2, "weight": 1}',
+            '{"object_type": 1, "source": 2, "target": 1, "weight": 15}'
+          ]
+        },
+        initOptions: {
+          ...defaultInitOptions,
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          }
+        },
+        showViewSettings: true
+      },
+      global: {
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const graph = wrapper.vm.graph
+
+    const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
+    await styleMenuItem.trigger('click')
+
+    const edgeMenuItem = wrapper.findAll('.sidebar__item')[3]
+    await edgeMenuItem.trigger('click')
+
+    // Set constant size = 50
+    const sizeInput = wrapper.find('.test_edge_size_value input')
+    await sizeInput.setValue(50)
+    sizeInput.wrapperElement.dispatchEvent(new Event('blur', { bubbles: true }))
+    // Call nextTick after setting number input,
+    // otherwise the value will be changed beck to initial for some reason
+    await nextTick()
+
+    expect(graph.export().edges[0].attributes.size).to.equal(50)
+    expect(graph.export().edges[1].attributes.size).to.equal(50)
+
+    // Switch to Variable
+    const variable = wrapper.findAll('.test_edge_size .radio-block__option')[1]
+    await variable.trigger('click')
+
+    // Select points as size source
+    await wrapper
+      .find('.test_edge_size_value .dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+    await wrapper.findAll('.Select__menu .Select__option')[4].trigger('click')
+
+    expect(graph.export().edges[0].attributes.size).to.equal(1)
+    expect(graph.export().edges[1].attributes.size).to.equal(15)
+
+    // Set size scale
+    const sizeScale = wrapper.find('.test_edge_size_scale input')
+    sizeScale.wrapperElement.value = 4
+    sizeScale.wrapperElement.dispatchEvent(new Event('blur', { bubbles: true }))
+    await nextTick()
+
+    expect(graph.export().edges[0].attributes.size).to.equal(4)
+    expect(graph.export().edges[1].attributes.size).to.equal(60)
+
+    // Set min
+    const sizeMin = wrapper.find('.test_edge_size_min input')
+    await sizeMin.setValue(12)
+    sizeMin.wrapperElement.dispatchEvent(new Event('blur', { bubbles: true }))
+    await nextTick()
+
+    expect(graph.export().edges[0].attributes.size).to.equal(12)
+    expect(graph.export().edges[1].attributes.size).to.equal(60)
+
+    // Switch to Constant
+    const constant = wrapper.findAll('.test_edge_size .radio-block__option')[0]
+    await constant.trigger('click')
+
+    // The latest settings from constant mode are applied
+    expect(graph.export().edges[0].attributes.size).to.equal(50)
+    expect(graph.export().edges[1].attributes.size).to.equal(50)
+
+    wrapper.unmount()
+  })
+
+  it('sets edge color', async () => {
+    const wrapper = mount(GraphEditor, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"type": 0, "node_id": 1}',
+            '{"type": 0, "node_id": 2}',
+            '{"type": 0, "node_id": 3}',
+            '{"type": 1, "source": 1, "target": 3, "color": "#ff0000", "weight": 1}',
+            '{"type": 1, "source": 2, "target": 3, "color": "#abcdff", "weight": 5}',
+            '{"type": 1, "source": 1, "target": 2, "color": "#123456", "weight": 10}'
+          ]
+        },
+        initOptions: {
+          ...defaultInitOptions,
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          }
+        },
+        showViewSettings: true
+      },
+      global: {
+        provide: {
+          tabLayout: { dataView: 'above' }
+        },
+        stubs: {
+          ColorPicker: true
+        }
+      }
+    })
+
+    const graph = wrapper.vm.graph
+
+    const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
+    await styleMenuItem.trigger('click')
+
+    const edgesMenuItem = wrapper.findAll('.sidebar__item')[3]
+    await edgesMenuItem.trigger('click')
+
+    // Set constant color
+    await wrapper
+      .findAllComponents({ name: 'ColorPicker' })[1]
+      .vm.$emit('colorChange', '#ff00ff')
+
+    expect(graph.export().edges[0].attributes.color).to.equal('#ff00ff')
+    expect(graph.export().edges[1].attributes.color).to.equal('#ff00ff')
+    expect(graph.export().edges[2].attributes.color).to.equal('#ff00ff')
+
+    // Switch to Variable
+    const variable = wrapper.findAll('.test_edge_color .radio-block__option')[1]
+    await variable.trigger('click')
+
+    // Select "weight" as color source
+    await wrapper
+      .find('.test_edge_color_value .dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+    await wrapper.findAll('.Select__menu .Select__option')[5].trigger('click')
+
+    expect(graph.export().edges[0].attributes.color).to.equal('#fafa6e')
+    expect(graph.export().edges[1].attributes.color).to.equal('#bdea75')
+    expect(graph.export().edges[2].attributes.color).to.equal('#86d780')
+
+    // Set Color as to Continious
+    await wrapper
+      .findAll('.test_edge_color_as .radio-block__option')[0]
+      .trigger('click')
+    expect(graph.export().edges[0].attributes.color).to.equal('#fafa6e')
+    expect(graph.export().edges[1].attributes.color).to.equal('#39b48d')
+    expect(graph.export().edges[2].attributes.color).to.equal('#2a4858')
+    await nextTick()
+
+    // Change colorscale direction
+    await wrapper
+      .findAll('.test_edge_color_colorscale_direction .radio-block__option')[1]
+      .trigger('click')
+    expect(graph.export().edges[0].attributes.color).to.equal('#2a4858')
+    expect(graph.export().edges[1].attributes.color).to.equal('#139f8e')
+    expect(graph.export().edges[2].attributes.color).to.equal('#fafa6e')
+    await nextTick()
+
+    // Clear color source
+    await wrapper
+      .find('.test_edge_color_value .dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    // Select "color" as color source
+    await wrapper
+      .find('.test_edge_color_value .dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    await wrapper.findAll('.Select__menu .Select__option')[4].trigger('click')
+
+    // Select Direct mapping
+    await wrapper
+      .find('.test_edge_color_mapping_mode .radio-block__option')
+      .trigger('click')
+
+    expect(graph.export().edges[0].attributes.color).to.equal('#ff0000')
+    expect(graph.export().edges[1].attributes.color).to.equal('#abcdff')
+    expect(graph.export().edges[2].attributes.color).to.equal('#123456')
+
+    // Switch to Constant
+    const constant = wrapper.findAll('.test_edge_color .radio-block__option')[0]
+    await constant.trigger('click')
+
+    // The latest settings from constant mode are applied
+    expect(graph.export().edges[0].attributes.color).to.equal('#ff00ff')
+    expect(graph.export().edges[1].attributes.color).to.equal('#ff00ff')
+    expect(graph.export().edges[2].attributes.color).to.equal('#ff00ff')
+
+    wrapper.unmount()
+  })
+})

tests/views/MainView/Workspace/Tabs/Tab/DataView/Chart/Chart.spec.js

@@ -210,7 +210,8 @@ describe('Chart.vue', () => {
     const wrapper = mount(Chart, {
       attachTo: document.body,
       props: {
-        dataSources: null
+        dataSources: null,
+        showViewSettings: false
       },
       global: {
         mocks: { $store }
@@ -222,7 +223,7 @@ describe('Chart.vue', () => {
     await nextTick()
 
     const plot = wrapper.find('.svg-container').wrapperElement
-
+    await flushPromises()
     const initialPlotWidth = plot.scrollWidth
     const initialPlotHeight = plot.scrollHeight
 
@@ -235,7 +236,7 @@ describe('Chart.vue', () => {
     await flushPromises()
 
     expect(plot.scrollWidth).not.to.equal(initialPlotWidth)
-    expect(plot.scrollHeight).not.to.equal(initialPlotHeight)
+    expect(plot.scrollHeight).to.equal(initialPlotHeight)
     expect(wrapper.find('.plotly_editor .editor_controls').exists()).to.equal(
       true
     )

tests/views/MainView/Workspace/Tabs/Tab/DataView/DataView.spec.js

@@ -195,6 +195,11 @@ describe('DataView.vue', () => {
     const graphBtn = wrapper.findComponent({ ref: 'graphBtn' })
     await graphBtn.trigger('click')
 
+    // Save as png is disabled because there is no data
+    expect(pngBtn.attributes('disabled')).to.not.equal(undefined)
+
+    await wrapper.setProps({ dataSource: { doc: [] } })
+
     // Find graph and stub the method
     const graph = wrapper.findComponent({ name: 'graph' }).vm
     sinon.stub(graph, 'saveAsPng').callsFake(() => {

tests/views/MainView/Workspace/Tabs/Tab/DataView/Graph/Graph.spec.js

@@ -0,0 +1,294 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount, flushPromises } from '@vue/test-utils'
+import Graph from '@/views/MainView/Workspace/Tabs/Tab/DataView/Graph/index.vue'
+
+describe('Graph.vue', () => {
+  const $store = { state: { isWorkspaceVisible: true } }
+
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('shows message when no data', () => {
+    const wrapper = mount(Graph, {
+      global: {
+        stubs: {
+          GraphEditor: true
+        }
+      },
+      attachTo: document.body
+    })
+    expect(wrapper.find('.no-data').isVisible()).to.equal(true)
+    expect(wrapper.find('.invalid-data').isVisible()).to.equal(false)
+    wrapper.unmount()
+  })
+
+  it('shows message when data is invalid', () => {
+    const wrapper = mount(Graph, {
+      props: {
+        dataSources: {
+          column1: ['value1', 'value2']
+        }
+      },
+      global: {
+        stubs: {
+          GraphEditor: true
+        }
+      },
+      attachTo: document.body
+    })
+    expect(wrapper.find('.no-data').isVisible()).to.equal(false)
+    expect(wrapper.find('.invalid-data').isVisible()).to.equal(true)
+    wrapper.unmount()
+  })
+
+  it('emits update when graph editor updates', async () => {
+    const wrapper = mount(Graph, {
+      global: {
+        stubs: {
+          GraphEditor: true
+        }
+      }
+    })
+    wrapper.findComponent({ ref: 'graphEditor' }).vm.$emit('update')
+    expect(wrapper.emitted('update')).to.have.lengthOf(1)
+  })
+
+  it('the graph resizes when the container resizes', async () => {
+    const wrapper = mount(Graph, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"object_type":0,"node_id":"Gryffindor"}',
+            '{"object_type":0,"node_id":"Hufflepuff"}'
+          ]
+        },
+        initOptions: {
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          },
+          style: {
+            backgroundColor: 'white',
+            nodes: {
+              size: {
+                type: 'constant',
+                value: 10
+              },
+              color: {
+                type: 'constant',
+                value: '#1F77B4'
+              },
+              label: {
+                source: null,
+                color: '#444444'
+              }
+            },
+            edges: {
+              showDirection: true,
+              size: {
+                type: 'constant',
+                value: 2
+              },
+              color: {
+                type: 'constant',
+                value: '#a2b1c6'
+              },
+              label: {
+                source: null,
+                color: '#a2b1c6'
+              }
+            }
+          },
+          layout: {
+            type: 'circular',
+            options: null
+          }
+        }
+      },
+      global: {
+        mocks: { $store },
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const container =
+      wrapper.find('.graph-container').wrapperElement.parentElement
+    const canvas = wrapper.find('canvas.sigma-nodes').wrapperElement
+
+    const initialContainerWidth = container.scrollWidth
+    const initialContainerHeight = container.scrollHeight
+
+    const initialCanvasWidth = canvas.scrollWidth
+    const initialCanvasHeight = canvas.scrollHeight
+
+    const newContainerWidth = initialContainerWidth * 2 || 1000
+    const newContainerHeight = initialContainerHeight * 2 || 2000
+
+    container.style.width = `${newContainerWidth}px`
+    container.style.height = `${newContainerHeight}px`
+
+    await flushPromises()
+
+    expect(canvas.scrollWidth).not.to.equal(initialCanvasWidth)
+    expect(canvas.scrollHeight).not.to.equal(initialCanvasHeight)
+
+    wrapper.unmount()
+  })
+
+  it('saveAsPng', async () => {
+    const wrapper = mount(Graph, {
+      props: {
+        dataSources: {
+          doc: [
+            '{"object_type":0,"node_id":"Gryffindor"}',
+            '{"object_type":0,"node_id":"Hufflepuff"}'
+          ]
+        },
+        initOptions: {
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          },
+          style: {
+            backgroundColor: 'white',
+            nodes: {
+              size: {
+                type: 'constant',
+                value: 10
+              },
+              color: {
+                type: 'constant',
+                value: '#1F77B4'
+              },
+              label: {
+                source: null,
+                color: '#444444'
+              }
+            },
+            edges: {
+              showDirection: true,
+              size: {
+                type: 'constant',
+                value: 2
+              },
+              color: {
+                type: 'constant',
+                value: '#a2b1c6'
+              },
+              label: {
+                source: null,
+                color: '#a2b1c6'
+              }
+            }
+          },
+          layout: {
+            type: 'circular',
+            options: null
+          }
+        }
+      },
+      global: {
+        mocks: { $store },
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+    sinon.stub(wrapper.vm.$refs.graphEditor, 'saveAsPng')
+    await wrapper.vm.saveAsPng()
+    expect(wrapper.emitted().loadingImageCompleted.length).to.equal(1)
+  })
+
+  it('hides and shows controls depending on showViewSettings and resizes the graph', async () => {
+    const wrapper = mount(Graph, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"object_type":0,"node_id":"Gryffindor"}',
+            '{"object_type":0,"node_id":"Hufflepuff"}'
+          ]
+        },
+        initOptions: {
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'object_type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          },
+          style: {
+            backgroundColor: 'white',
+            nodes: {
+              size: {
+                type: 'constant',
+                value: 10
+              },
+              color: {
+                type: 'constant',
+                value: '#1F77B4'
+              },
+              label: {
+                source: null,
+                color: '#444444'
+              }
+            },
+            edges: {
+              showDirection: true,
+              size: {
+                type: 'constant',
+                value: 2
+              },
+              color: {
+                type: 'constant',
+                value: '#a2b1c6'
+              },
+              label: {
+                source: null,
+                color: '#a2b1c6'
+              }
+            }
+          },
+          layout: {
+            type: 'circular',
+            options: null
+          }
+        }
+      },
+      global: {
+        mocks: { $store },
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const canvas = wrapper.find('canvas.sigma-nodes').wrapperElement
+
+    const initialPlotWidth = canvas.scrollWidth
+    const initialPlotHeight = canvas.scrollHeight
+
+    expect(
+      wrapper.find('.plotly_editor .editor_controls').isVisible()
+    ).to.equal(false)
+
+    await wrapper.setProps({ showViewSettings: true })
+
+    await flushPromises()
+
+    expect(canvas.scrollWidth).not.to.equal(initialPlotWidth)
+    expect(canvas.scrollHeight).to.equal(initialPlotHeight)
+    expect(
+      wrapper.find('.plotly_editor .editor_controls').isVisible()
+    ).to.equal(true)
+    wrapper.unmount()
+  })
+})