tests

src/components/Graph/AdvancedForceAtlasLayoutSettings.vue

@@ -1,12 +1,15 @@
 <template>
-  <Field label="Scaling ratio">
+  <Field label="Scaling ratio" fieldContainerClassName="test_fa2_scaling">
     <NumericInput
       :value="modelValue.scalingRatio"
       @update="update('scalingRatio', $event)"
     />
   </Field>
 
-  <Field label="Prevent overlapping">
+  <Field
+    label="Prevent overlapping"
+    fieldContainerClassName="test_fa2_adjustSizes"
+  >
     <RadioBlocks
       :options="booleanOptions"
       :activeOption="modelValue.adjustSizes"
@@ -14,7 +17,10 @@
     />
   </Field>
 
-  <Field label="Barnes-Hut optimize">
+  <Field
+    label="Barnes-Hut optimize"
+    fieldContainerClassName="test_fa2_barnes_hut"
+  >
     <RadioBlocks
       :options="booleanOptions"
       :activeOption="modelValue.barnesHutOptimize"
@@ -22,14 +28,21 @@
     />
   </Field>
 
-  <Field v-show="modelValue.barnesHutOptimize" label="Barnes-Hut Theta">
+  <Field
+    v-show="modelValue.barnesHutOptimize"
+    label="Barnes-Hut Theta"
+    fieldContainerClassName="test_fa2_barnes_theta"
+  >
     <NumericInput
       :value="modelValue.barnesHutTheta"
       @update="update('barnesHutTheta', $event)"
     />
   </Field>
 
-  <Field label="Strong gravity mode">
+  <Field
+    label="Strong gravity mode"
+    fieldContainerClassName="test_fa2_strong_gravity"
+  >
     <RadioBlocks
       :options="booleanOptions"
       :activeOption="modelValue.strongGravityMode"
@@ -37,7 +50,10 @@
     />
   </Field>
 
-  <Field label="Noack's LinLog model">
+  <Field
+    label="Noack's LinLog model"
+    fieldContainerClassName="test_fa2_lin_log"
+  >
     <RadioBlocks
       :options="booleanOptions"
       :activeOption="modelValue.linLogMode"
@@ -45,7 +61,10 @@
     />
   </Field>
 
-  <Field label="Out bound attraction distribution">
+  <Field
+    label="Outbound attraction distribution"
+    fieldContainerClassName="test_fa2_outbound_attraction"
+  >
     <RadioBlocks
       :options="booleanOptions"
       :activeOption="modelValue.outboundAttractionDistribution"
@@ -53,7 +72,7 @@
     />
   </Field>
 
-  <Field label="Slow down">
+  <Field label="Slow down" fieldContainerClassName="test_fa2_slow_down">
     <NumericInput
       :value="modelValue.slowDown"
       :min="0"
@@ -65,10 +84,15 @@
     <Dropdown
       :options="keyOptions"
       :value="modelValue.weightSource"
+      className="test_fa2_weight_source"
       @change="update('weightSource', $event)"
     />
   </Field>
-  <Field v-show="modelValue.weightSource" label="Edge weight influence">
+  <Field
+    v-show="modelValue.weightSource"
+    label="Edge weight influence"
+    fieldContainerClassName="test_fa2_weight_influence"
+  >
     <NumericInput
       :value="modelValue.edgeWeightInfluence"
       @update="update('edgeWeightInfluence', $event)"

src/components/Graph/ForceAtlasLayoutSettings.vue

@@ -1,5 +1,8 @@
 <template>
-  <Field label="Initial iterations">
+  <Field
+    label="Initial iterations"
+    fieldContainerClassName="test_fa2_iteration_amount"
+  >
     <NumericInput
       :value="modelValue.initialIterationsAmount"
       :min="1"
@@ -7,7 +10,7 @@
     />
   </Field>
 
-  <Field label="Gravity">
+  <Field label="Gravity" fieldContainerClassName="test_fa2_gravity">
     <NumericInput
       :value="modelValue.gravity"
       @update="update('gravity', $event)"

src/components/Graph/GraphEditor.vue

@@ -170,10 +170,18 @@
               />
             </Fold>
             <div class="force-atlas-buttons">
-              <Button variant="secondary" @click="resetFA2LayoutSettings">
+              <Button
+                variant="secondary"
+                @click="resetFA2LayoutSettings"
+                class="test_fa2_reset"
+              >
                 Reset
               </Button>
-              <Button variant="primary" @click="toggleFA2Layout">
+              <Button
+                variant="primary"
+                @click="toggleFA2Layout"
+                class="test_fa2_toggle"
+              >
                 <template #node:icon>
                   <div
                     :style="{

tests/components/Graph/GraphEditor.spec.js

@@ -2,6 +2,10 @@ import { expect } from 'chai'
 import { mount } from '@vue/test-utils'
 import GraphEditor from '@/components/Graph/GraphEditor.vue'
 import { nextTick } from 'vue'
+import FA2Layout from 'graphology-layout-forceatlas2/worker'
+import sinon from 'sinon'
+import { waitCondition } from '/tests/testUtils'
+import time from '@/lib/utils/time'
 
 const defaultInitOptions = {
   structure: {
@@ -49,6 +53,9 @@ const defaultInitOptions = {
 }
 
 describe('GraphEditor', () => {
+  afterEach(() => {
+    sinon.restore()
+  })
   it('sets graph structure', async () => {
     const wrapper = mount(GraphEditor, {
       attachTo: document.body,
@@ -1191,4 +1198,446 @@ describe('GraphEditor', () => {
 
     wrapper.unmount()
   })
+
+  it('FA2: runs and stops automatically when switch to FA2', async () => {
+    const stopSpy = sinon.spy(FA2Layout.prototype, 'stop')
+    const startSpy = sinon.spy(FA2Layout.prototype, 'start')
+    const wrapper = mount(GraphEditor, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"type": 0, "node_id": 1, "size": 20}',
+            '{"type": 0, "node_id": 2, "size": 2}',
+            '{"type": 0, "node_id": 3, "size": 2}',
+            '{"type": 0, "node_id": 4, "size": 2}'
+          ]
+        },
+        initOptions: {
+          ...defaultInitOptions,
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          }
+        },
+        showViewSettings: true
+      },
+      global: {
+        provide: {
+          tabLayout: { dataView: 'above' }
+        }
+      }
+    })
+
+    const graph = wrapper.vm.graph
+    const initialCoordinates = graph
+      .export()
+      .nodes.map(node => `x:${node.attributes.x},y:${node.attributes.y}`)
+      .join()
+
+    const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
+    await styleMenuItem.trigger('click')
+
+    const layoutMenuItem = wrapper.findAll('.sidebar__item')[4]
+    await layoutMenuItem.trigger('click')
+
+    // Set FA2 pack layout
+    await wrapper
+      .find(
+        '.test_layout_algorithm_select .dropdown-container .Select__indicator'
+      )
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    await wrapper.findAll('.Select__menu .Select__option')[3].trigger('click')
+
+    expect(startSpy.calledOnce).to.equal(true)
+    await waitCondition(() => stopSpy.callCount === 1)
+    expect(wrapper.text()).to.contain('Start')
+
+    const coordinates = graph
+      .export()
+      .nodes.map(node => `x:${node.attributes.x},y:${node.attributes.y}`)
+      .join()
+
+    expect(coordinates).not.to.equal(initialCoordinates)
+
+    wrapper.unmount()
+  })
+
+  it('FA2: starts, stops and resets parameters to initial', async () => {
+    const stopSpy = sinon.spy(FA2Layout.prototype, 'stop')
+    const startSpy = sinon.spy(FA2Layout.prototype, 'start')
+    const wrapper = mount(GraphEditor, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"type": 0, "node_id": 1, "size": 20}',
+            '{"type": 0, "node_id": 2, "size": 2}',
+            '{"type": 0, "node_id": 3, "size": 2}',
+            '{"type": 0, "node_id": 4, "size": 2}',
+            '{"type": 1, "source": 1, "target": 3, "wgt": 20}',
+            '{"type": 1, "source": 1, "target": 2, "wgt": 15}',
+            '{"type": 1, "source": 1, "target": 4, "wgt": 5}'
+          ]
+        },
+        initOptions: {
+          ...defaultInitOptions,
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          },
+          layout: {
+            type: 'forceAtlas2',
+            options: {
+              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 graph = wrapper.vm.graph
+
+    const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
+    await styleMenuItem.trigger('click')
+
+    const layoutMenuItem = wrapper.findAll('.sidebar__item')[4]
+    await layoutMenuItem.trigger('click')
+
+    expect(startSpy.calledOnce).to.equal(true)
+    await waitCondition(() => stopSpy.callCount === 1)
+    expect(wrapper.text()).to.contain('Start')
+
+    const initialCoordinates = graph
+      .export()
+      .nodes.map(node => `x:${node.attributes.x},y:${node.attributes.y}`)
+      .join()
+
+    // Change gravity
+    const gravityInput = wrapper.find('.test_fa2_gravity input')
+    await gravityInput.setValue(12)
+    gravityInput.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(wrapper.vm.settings.layout.options.gravity).to.equal(12)
+
+    // Algorithm wasn't called
+    expect(startSpy.calledOnce).to.equal(true)
+
+    // Change scaling ratio
+    const scalingInput = wrapper.find('.test_fa2_scaling input')
+    await scalingInput.setValue(2)
+    scalingInput.wrapperElement.dispatchEvent(
+      new Event('blur', { bubbles: true })
+    )
+    await nextTick()
+    expect(wrapper.vm.settings.layout.options.scalingRatio).to.equal(2)
+
+    // Change Prevent overlaping (adjustSizes)
+    await wrapper
+      .findAll('.test_fa2_adjustSizes .radio-block__option')[1]
+      .trigger('click')
+    await nextTick()
+    expect(wrapper.vm.settings.layout.options.adjustSizes).to.equal(false)
+
+    // Change barnes-hut theta
+    const barnesThetaInput = wrapper.find('.test_fa2_barnes_theta input')
+    await barnesThetaInput.setValue(2)
+    barnesThetaInput.wrapperElement.dispatchEvent(
+      new Event('blur', { bubbles: true })
+    )
+    await nextTick()
+    expect(wrapper.vm.settings.layout.options.barnesHutTheta).to.equal(2)
+
+    // Disable barnes-hut
+    await wrapper
+      .findAll('.test_fa2_barnes_hut .radio-block__option')[1]
+      .trigger('click')
+    await nextTick()
+    expect(wrapper.vm.settings.layout.options.barnesHutOptimize).to.equal(false)
+    expect(wrapper.find('.test_fa2_barnes_theta').isVisible()).to.equal(false)
+
+    // Enable strong gravity
+    await wrapper
+      .findAll('.test_fa2_strong_gravity .radio-block__option')[0]
+      .trigger('click')
+    await nextTick()
+    expect(wrapper.vm.settings.layout.options.strongGravityMode).to.equal(true)
+
+    // Disable LinLog
+    await wrapper
+      .findAll('.test_fa2_lin_log .radio-block__option')[1]
+      .trigger('click')
+    await nextTick()
+    expect(wrapper.vm.settings.layout.options.linLogMode).to.equal(false)
+
+    // Enable outbound attraction
+    await wrapper
+      .findAll('.test_fa2_outbound_attraction .radio-block__option')[0]
+      .trigger('click')
+    await nextTick()
+    expect(
+      wrapper.vm.settings.layout.options.outboundAttractionDistribution
+    ).to.equal(true)
+
+    // Change slow down
+    const slowDownInput = wrapper.find('.test_fa2_slow_down input')
+    await slowDownInput.setValue(0.1)
+    slowDownInput.wrapperElement.dispatchEvent(
+      new Event('blur', { bubbles: true })
+    )
+    await nextTick()
+    expect(wrapper.vm.settings.layout.options.slowDown).to.equal(0.1)
+
+    // Change weight influence
+    const weightInfluenceInput = wrapper.find(
+      '.test_fa2_weight_influence input'
+    )
+    await weightInfluenceInput.setValue(0.8)
+    weightInfluenceInput.wrapperElement.dispatchEvent(
+      new Event('blur', { bubbles: true })
+    )
+    await nextTick()
+    expect(wrapper.vm.settings.layout.options.edgeWeightInfluence).to.equal(0.8)
+
+    // Clear weight source
+    await wrapper
+      .find('.test_fa2_weight_source .dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    expect(wrapper.vm.settings.layout.options.weightSource).to.equal(null)
+    expect(wrapper.find('.test_fa2_weight_influence').isVisible()).to.equal(
+      false
+    )
+
+    // Click Start
+    const toggleButton = wrapper.find('button.test_fa2_toggle')
+    await toggleButton.trigger('click')
+    expect(toggleButton.text()).to.contain('Stop')
+    expect(startSpy.callCount).to.equal(2)
+
+    // Wait a bit and click Stop
+    await time.sleep(500)
+    await toggleButton.trigger('click')
+    expect(stopSpy.callCount).to.equal(2)
+
+    const coordinates = graph
+      .export()
+      .nodes.map(node => `x:${node.attributes.x},y:${node.attributes.y}`)
+      .join()
+
+    expect(coordinates).not.to.equal(initialCoordinates)
+
+    // Click Reset
+    await wrapper.find('button.test_fa2_reset').trigger('click')
+    expect(toggleButton.text()).to.contain('Start')
+    expect(startSpy.callCount).to.equal(2)
+    expect(wrapper.vm.settings.layout.options).to.eql({
+      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()
+  })
+
+  it('FA2: resets parameters to default', async () => {
+    const wrapper = mount(GraphEditor, {
+      attachTo: document.body,
+      props: {
+        dataSources: {
+          doc: [
+            '{"type": 0, "node_id": 1, "size": 20}',
+            '{"type": 0, "node_id": 2, "size": 2}',
+            '{"type": 0, "node_id": 3, "size": 2}',
+            '{"type": 0, "node_id": 4, "size": 2}',
+            '{"type": 1, "source": 1, "target": 3, "wgt": 20}',
+            '{"type": 1, "source": 1, "target": 2, "wgt": 15}',
+            '{"type": 1, "source": 1, "target": 4, "wgt": 5}'
+          ]
+        },
+        initOptions: {
+          ...defaultInitOptions,
+          structure: {
+            nodeId: 'node_id',
+            objectType: 'type',
+            edgeSource: 'source',
+            edgeTarget: 'target'
+          }
+        },
+        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')
+
+    // Set FA2 pack layout
+    await wrapper
+      .find(
+        '.test_layout_algorithm_select .dropdown-container .Select__indicator'
+      )
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+
+    await wrapper.findAll('.Select__menu .Select__option')[3].trigger('click')
+
+    const defaultRecommendedSettings = JSON.stringify(
+      wrapper.vm.settings.layout.options
+    )
+
+    // Change initial iteration amount
+    const iterationInput = wrapper.find('.test_fa2_iteration_amount input')
+    await iterationInput.setValue(120)
+    iterationInput.wrapperElement.dispatchEvent(
+      new Event('blur', { bubbles: true })
+    )
+    await nextTick()
+
+    // Change gravity
+    const gravityInput = wrapper.find('.test_fa2_gravity input')
+    await gravityInput.setValue(12)
+    gravityInput.wrapperElement.dispatchEvent(
+      new Event('blur', { bubbles: true })
+    )
+    await nextTick()
+
+    // Change scaling ratio
+    const scalingInput = wrapper.find('.test_fa2_scaling input')
+    await scalingInput.setValue(2)
+    scalingInput.wrapperElement.dispatchEvent(
+      new Event('blur', { bubbles: true })
+    )
+    await nextTick()
+
+    // Change Prevent overlaping (adjustSizes)
+    await wrapper
+      .findAll('.test_fa2_adjustSizes .radio-block__option')[0]
+      .trigger('click')
+
+    // Enable barnes-hut
+    await wrapper
+      .findAll('.test_fa2_barnes_hut .radio-block__option')[0]
+      .trigger('click')
+
+    // Change barnes-hut theta
+    const barnesThetaInput = wrapper.find('.test_fa2_barnes_theta input')
+    await barnesThetaInput.setValue(0.8)
+    barnesThetaInput.wrapperElement.dispatchEvent(
+      new Event('blur', { bubbles: true })
+    )
+    await nextTick()
+
+    // Disable strong gravity
+    await wrapper
+      .findAll('.test_fa2_strong_gravity .radio-block__option')[1]
+      .trigger('click')
+
+    // Enable LinLog
+    await wrapper
+      .findAll('.test_fa2_lin_log .radio-block__option')[0]
+      .trigger('click')
+
+    // Disable outbound attraction
+    await wrapper
+      .findAll('.test_fa2_outbound_attraction .radio-block__option')[1]
+      .trigger('click')
+
+    // Change slow down
+    const slowDownInput = wrapper.find('.test_fa2_slow_down input')
+    await slowDownInput.setValue(3.5)
+    slowDownInput.wrapperElement.dispatchEvent(
+      new Event('blur', { bubbles: true })
+    )
+    await nextTick()
+
+    // Set weight source
+    await wrapper
+      .find('.test_fa2_weight_source .dropdown-container .Select__indicator')
+      .wrapperElement.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true })
+      )
+    await wrapper.findAll('.Select__menu .Select__option')[5].trigger('click')
+
+    // Change weight influence
+    const weightInfluenceInput = wrapper.find(
+      '.test_fa2_weight_influence input'
+    )
+    await weightInfluenceInput.setValue(0.8)
+    weightInfluenceInput.wrapperElement.dispatchEvent(
+      new Event('blur', { bubbles: true })
+    )
+    await nextTick()
+
+    expect(wrapper.vm.settings.layout.options).to.eql({
+      initialIterationsAmount: 120,
+      gravity: 12,
+      scalingRatio: 2,
+      adjustSizes: true,
+      barnesHutOptimize: true,
+      barnesHutTheta: 0.8,
+      strongGravityMode: false,
+      linLogMode: true,
+      outboundAttractionDistribution: false,
+      slowDown: 3.5,
+      weightSource: 'wgt',
+      edgeWeightInfluence: 0.8
+    })
+
+    // Click Reset
+    await wrapper.find('button.test_fa2_reset').trigger('click')
+    expect(wrapper.vm.settings.layout.options).to.eql(
+      JSON.parse(defaultRecommendedSettings)
+    )
+
+    wrapper.unmount()
+  })
 })

tests/testUtils.js

@@ -0,0 +1,20 @@
+export function waitCondition(condition, timeoutMs = 5000) {
+  return new Promise((resolve, reject) => {
+    if (condition()) {
+      resolve()
+      return
+    }
+    const start = new Date().getTime()
+    const interval = setInterval(() => {
+      if (condition()) {
+        clearInterval(interval)
+        resolve()
+      } else {
+        if (new Date().getTime() - start > timeoutMs) {
+          clearInterval(interval)
+          reject()
+        }
+      }
+    }, 500)
+  })
+}