diff --git a/app/.eslintrc.js b/app/.eslintrc.js
index ec030892531f4cb4b6c9219daf6cb2fa1fb3dc44..f0d6621694f34721996df7cf0505169f567861e5 100644
--- a/app/.eslintrc.js
+++ b/app/.eslintrc.js
@@ -1,14 +1,14 @@
 module.exports = {
   root: true,
   env: {
-    node: true,
+    node: true
   },
   extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: 'babel-eslint'
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-  },
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
 }
diff --git a/app/.prettierrc.js b/app/.prettierrc.js
index 3f714ac456ec4e692b2d0c8eda13d60125bf2cf7..a6b80c2e1549a84f55ed580436bb2cdea319d573 100644
--- a/app/.prettierrc.js
+++ b/app/.prettierrc.js
@@ -1,4 +1,4 @@
 module.exports = {
   singleQuote: true,
-  semi: false,
+  semi: false
 }
diff --git a/app/babel.config.js b/app/babel.config.js
index c1b783eac1d57dcae03a6995db453eeeb1a7d0b6..716b0237c62f442f420a7104934af4cb31d52c39 100644
--- a/app/babel.config.js
+++ b/app/babel.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset'],
+  presets: ['@vue/cli-plugin-babel/preset']
 }
diff --git a/app/src/components/BaseButton.vue b/app/src/components/BaseButton.vue
index 9af3b7bf7f8017ab937d458875abda3a3c70a156..4404fcee9060b45e9506d4d15501a5dd15925232 100644
--- a/app/src/components/BaseButton.vue
+++ b/app/src/components/BaseButton.vue
@@ -11,9 +11,9 @@
 export default {
   props: {
     buttonClass: {
-      type: String,
-    },
-  },
+      type: String
+    }
+  }
 }
 </script>
 
diff --git a/app/src/components/ControlsLayer.vue b/app/src/components/ControlsLayer.vue
index 59a3a9cbee43df9567998002cc50ad9bd38885e7..7401faed630a3a7748931883fa9b82e93869ef56 100644
--- a/app/src/components/ControlsLayer.vue
+++ b/app/src/components/ControlsLayer.vue
@@ -45,8 +45,8 @@ export default {
   },
 
   computed: mapState({
-    myMicrocosm: (state) => state.microcosm,
-    myClient: (state) => state.myclient,
+    myMicrocosm: state => state.microcosm,
+    myClient: state => state.myclient
   }),
   methods: {
     addNode() {
@@ -56,11 +56,11 @@ export default {
       // FIXME: add action here to toggle visiblity
       this.$emit('listView')
     },
-    exportStorage: function () {
+    exportStorage: function() {
       // Save local indexeddb document-store to JSON file
       // or export state.notes to JSON file
     },
-    removeLocal: function () {
+    removeLocal: function() {
       localStorage.removeItem('myNNClient')
       localStorage.removeItem('mylastMicrocosm')
       // Hardcoded as when I set a URL had parameters the reload fails
@@ -76,10 +76,10 @@ export default {
     deleteClient() {
       this.$store.dispatch('deleteClient')
     },
-    handleConnection: function () {
+    handleConnection: function() {
       var ref = this
       if (navigator.onLine) {
-        this.isReachable(this.getServerUrl()).then(function (online) {
+        this.isReachable(this.getServerUrl()).then(function(online) {
           if (online) {
             // handle online status
             console.log('online')
@@ -94,19 +94,19 @@ export default {
         ref.$emit('offlineTriggered')
       }
     },
-    isReachable: function (url) {
+    isReachable: function(url) {
       return fetch(url, { method: 'HEAD', mode: 'no-cors' })
-        .then(function (resp) {
+        .then(function(resp) {
           return resp && (resp.ok || resp.type === 'opaque')
         })
-        .catch(function (err) {
+        .catch(function(err) {
           console.warn('[conn test failure]:', err)
         })
     },
-    getServerUrl: function () {
+    getServerUrl: function() {
       return serverUrl || window.location.origin
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue
index cb5ef6102d705654ead537ae2b22e2bc5de180dc..91e4de6056b4fe890430847f06436f820fbc44d3 100644
--- a/app/src/components/ListLayer.vue
+++ b/app/src/components/ListLayer.vue
@@ -18,17 +18,17 @@ export default {
   name: 'ListLayer',
   props: {
     nodeid: String,
-    nodetext: String,
+    nodetext: String
   },
 
   computed: mapState({
-    myNodes: (state) => state.myNodes,
+    myNodes: state => state.myNodes
   }),
 
   filters: {
     // need to write a reverse data filter I suspect here so new data is at the top of list
-    marked: marked,
-  },
+    marked: marked
+  }
 }
 </script>
 
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index d9e299ac0a22404741b3007bca6fbc3fa2415aa8..fa2c456a44b56d7903e5d3d0b65f2a9bf6c01a7a 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -76,19 +76,19 @@ export default {
     nodetext: String,
     nodewidth: Number,
     nodeheight: Number,
-    deleted: Boolean,
+    deleted: Boolean
   },
 
   data() {
     return {
       pickupz: 99,
       readmode: false,
-      mode: 'Read',
+      mode: 'Read'
     }
   },
 
   filters: {
-    marked: marked,
+    marked: marked
   },
 
   // FIXME: how do we know how to focus on the newest node ?
@@ -106,9 +106,9 @@ export default {
   // },
 
   computed: mapState({
-    myNodes: (state) => state.myNodes,
-    configPositions: (state) => state.configPositions,
-    configEmoji: (state) => state.configEmoji,
+    myNodes: state => state.myNodes,
+    configPositions: state => state.configPositions,
+    configEmoji: state => state.configEmoji
   }),
   methods: {
     onActivated() {
@@ -146,7 +146,7 @@ export default {
         y,
         width,
         height,
-        zindex,
+        zindex
       })
     },
     onDrag(x, y) {
@@ -172,7 +172,7 @@ export default {
         y,
         width,
         height,
-        zindex,
+        zindex
       })
     },
 
@@ -198,8 +198,8 @@ export default {
         this.readmode = true
         this.mode = 'Edit'
       }
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/app/src/components/OnBoard.vue b/app/src/components/OnBoard.vue
index 08af18460e96deceb78e87d61e40a7f4d515e088..d5aa8b094c844a829d22e38cec4b559d42e3db71 100644
--- a/app/src/components/OnBoard.vue
+++ b/app/src/components/OnBoard.vue
@@ -73,13 +73,13 @@ var delaytwo = 100
 import Router from '@/router'
 
 export default {
-  data: function () {
+  data: function() {
     return {
       localmicrocosm: Router.currentRoute.params.microcosm,
       clientid: '',
       parta: true,
       partb: false,
-      partc: false,
+      partc: false
     }
   },
 
@@ -120,8 +120,8 @@ export default {
     },
     readyFocusTwo() {
       this.$refs.objectnametwo.focus()
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/app/src/components/OtherListlayer.vue b/app/src/components/OtherListlayer.vue
index 348f2af0d0410021eaae61a452c4bc821a3bc2a1..c2c267ff8131a96e79f15bfd22b60d634b38673b 100644
--- a/app/src/components/OtherListlayer.vue
+++ b/app/src/components/OtherListlayer.vue
@@ -20,17 +20,17 @@ export default {
   name: 'OtherListlayer',
   props: {
     nodeid: String,
-    nodetext: String,
+    nodetext: String
   },
 
   computed: mapState({
-    otherNodes: (state) => state.otherNodes,
+    otherNodes: state => state.otherNodes
   }),
 
   filters: {
     // need to write a reverse data filter I suspect here so new data is at the top of list
-    marked: marked,
-  },
+    marked: marked
+  }
 }
 </script>
 
diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue
index e3c83a0d3460a2eca769fc6c9dc9d85b9eac9ebc..c874492943468b072f092973739b87603f1988ad 100644
--- a/app/src/components/OtherNodeslayer.vue
+++ b/app/src/components/OtherNodeslayer.vue
@@ -99,32 +99,32 @@ export default {
   name: 'otherNodeslayer',
 
   components: {
-    EmojiPicker,
+    EmojiPicker
   },
   props: {
     nodeid: String,
     nodetext: String,
     nodewidth: Number,
-    nodeheight: Number,
+    nodeheight: Number
   },
 
   data() {
     return {
       input: '',
       search: '',
-      pickupz: 99,
+      pickupz: 99
     }
   },
 
   filters: {
-    marked: marked,
+    marked: marked
   },
 
   mounted() {},
   computed: mapState({
-    otherNodes: (state) => state.otherNodes,
-    configPositions: (state) => state.configPositions,
-    configEmoji: (state) => state.configEmoji,
+    otherNodes: state => state.otherNodes,
+    configPositions: state => state.configPositions,
+    configEmoji: state => state.configEmoji
   }),
   methods: {
     onActivated() {
@@ -162,7 +162,7 @@ export default {
         y,
         width,
         height,
-        zindex,
+        zindex
       })
     },
     onDrag(x, y) {
@@ -188,7 +188,7 @@ export default {
         y,
         width,
         height,
-        zindex,
+        zindex
       })
     },
     append(emoji) {
@@ -199,19 +199,19 @@ export default {
       nodeid = this.nodeid
       this.$store.dispatch('addEmoji', {
         nodeid,
-        emojitext,
+        emojitext
       })
 
       this.input = ''
-    },
+    }
   },
   directives: {
     focus: {
       inserted(el) {
         el.focus()
-      },
-    },
-  },
+      }
+    }
+  }
 }
 </script>
 
diff --git a/app/src/components/mixins/drag.js b/app/src/components/mixins/drag.js
index 04c94bb47a3e6a581059c64915b59585eca4da7c..d270cb77d59810055e4d71631e9e81e821ba28d9 100644
--- a/app/src/components/mixins/drag.js
+++ b/app/src/components/mixins/drag.js
@@ -60,6 +60,6 @@ export const drag = {
       function setTranslate(xPos, yPos, el) {
         el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)'
       }
-    },
-  },
+    }
+  }
 }
diff --git a/app/src/components/mixins/draw.js b/app/src/components/mixins/draw.js
index 2381617ce04759ac818c80988f94163e83165689..9bd5dc3920c911698a80b58d605f5549795cd87c 100644
--- a/app/src/components/mixins/draw.js
+++ b/app/src/components/mixins/draw.js
@@ -25,6 +25,6 @@ export const draw = {
 
       ctx.stroke()
       ctx.setTransform(1, 0, 0, 1, 0, 0)
-    },
-  },
+    }
+  }
 }
diff --git a/app/src/components/mixins/shortcutsMixin.js b/app/src/components/mixins/shortcutsMixin.js
index 281e16440a19270d7a8404eb8ed4a9d286d881a7..1a1f17a635cf23235675cd2664e16848427a570d 100644
--- a/app/src/components/mixins/shortcutsMixin.js
+++ b/app/src/components/mixins/shortcutsMixin.js
@@ -11,6 +11,6 @@ export const shortcutsMixin = {
           this.addNode()
         }
       }
-    },
-  },
+    }
+  }
 }
diff --git a/app/src/experimental/ModeToolbar.vue b/app/src/experimental/ModeToolbar.vue
index 98484e3fc247f966dabcfe4a6df9379f7a5f9588..59ca38d39843e8f4f5916f6e7d023040a9fbf617 100644
--- a/app/src/experimental/ModeToolbar.vue
+++ b/app/src/experimental/ModeToolbar.vue
@@ -6,7 +6,10 @@
       v-bind:key="mode.name"
       v-bind:class="isActive(mode) ? 'active' : 'inactive'"
     >
-      <Icon v-bind:type="mode.icon" v-bind:theme="isActive(mode) ? 'light' : 'dark'" />
+      <Icon
+        v-bind:type="mode.icon"
+        v-bind:theme="isActive(mode) ? 'light' : 'dark'"
+      />
     </button>
   </nav>
 </template>
diff --git a/app/src/experimental/PanZoomContainer.vue b/app/src/experimental/PanZoomContainer.vue
index adc50071c5edc8bfaf76122c52793db7f7dfe8af..3b06ff30db19382de05db4e062f31ef0331ac35e 100644
--- a/app/src/experimental/PanZoomContainer.vue
+++ b/app/src/experimental/PanZoomContainer.vue
@@ -138,7 +138,7 @@ export default {
       if (!this.interaction.origin) {
         return
       }
-  console.log('touch')
+      console.log('touch')
       e.preventDefault()
       const isPinchAction =
         e.touches.length == 2 && this.interaction.origin.points.length > 1
@@ -156,7 +156,7 @@ export default {
       e.preventDefault()
       e.stopPropagation()
 
-        console.log(e)
+      console.log(e)
 
       this.handleWheel(e)
     },
diff --git a/app/src/experimental/icons/library/addNode.vue b/app/src/experimental/icons/library/addNode.vue
index fa6ea56a714bb378ed26cc63abf574c8d238e4a5..0956ca949f128aca93b821cd631509c875b3c13c 100644
--- a/app/src/experimental/icons/library/addNode.vue
+++ b/app/src/experimental/icons/library/addNode.vue
@@ -5,8 +5,16 @@
       clip-rule="evenodd"
       d="M37 15H17.1154V30.8636H37V15ZM15.1154 13V32.8636H39V13H15.1154Z"
     />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M26 27L26 19L28 19L28 27L26 27Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M26 27L26 19L28 19L28 27L26 27Z"
+    />
     <path fill-rule="evenodd" clip-rule="evenodd" d="M31 24H23V22H31V24Z" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M16 16.1364H12V36H35.8846V32H16V16.1364Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16 16.1364H12V36H35.8846V32H16V16.1364Z"
+    />
   </g>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/src/experimental/icons/library/idea.vue b/app/src/experimental/icons/library/idea.vue
index 85778e791216b52b6d6d5dd927b64da1cd57942e..656647e45aecfcf7ea9dd774bfd03d8cdaebd891 100644
--- a/app/src/experimental/icons/library/idea.vue
+++ b/app/src/experimental/icons/library/idea.vue
@@ -19,4 +19,4 @@
       d="M14.0196 13.6294L17.0858 16.6956L15.6716 18.1098L12.6054 15.0436L14.0196 13.6294Z"
     />
   </g>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/src/experimental/icons/library/index.js b/app/src/experimental/icons/library/index.js
index 18ae6eb7d4395f0347fbe0f622efc474350cec7e..1bca010e820798578237dbb2b0b8c7b5363b4531 100644
--- a/app/src/experimental/icons/library/index.js
+++ b/app/src/experimental/icons/library/index.js
@@ -9,4 +9,15 @@ import person from './person'
 import plus from './plus'
 import select from './select'
 
-export { addNode, connection, draw, idea, magnify, minus, move, person, plus, select }
+export {
+  addNode,
+  connection,
+  draw,
+  idea,
+  magnify,
+  minus,
+  move,
+  person,
+  plus,
+  select
+}
diff --git a/app/src/experimental/icons/library/magnify.vue b/app/src/experimental/icons/library/magnify.vue
index 33d4c63d1a2915620864f7b9938844cc556f5d1b..ed297b92d57e243f1ca1a12e6c81da54df0c5a3d 100644
--- a/app/src/experimental/icons/library/magnify.vue
+++ b/app/src/experimental/icons/library/magnify.vue
@@ -1,10 +1,16 @@
 <template>
   <g>
-    <rect x="11" y="36.4246" width="10.5" height="4" transform="rotate(-45 11 36.4246)" />
+    <rect
+      x="11"
+      y="36.4246"
+      width="10.5"
+      height="4"
+      transform="rotate(-45 11 36.4246)"
+    />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M27.3334 32.3333C32.6721 32.3333 37 28.0054 37 22.6667C37 17.3279 32.6721 13 27.3334 13C21.9946 13 17.6667 17.3279 17.6667 22.6667C17.6667 28.0054 21.9946 32.3333 27.3334 32.3333ZM27.3334 34.3333C33.7767 34.3333 39 29.11 39 22.6667C39 16.2233 33.7767 11 27.3334 11C20.89 11 15.6667 16.2233 15.6667 22.6667C15.6667 29.11 20.89 34.3333 27.3334 34.3333Z"
     />
   </g>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/src/experimental/icons/library/minus.vue b/app/src/experimental/icons/library/minus.vue
index 61d1fc0346949f64687e4b1eabf690cf905a0b49..ac48daa035d81b5356b14b82e34f1b627df57179 100644
--- a/app/src/experimental/icons/library/minus.vue
+++ b/app/src/experimental/icons/library/minus.vue
@@ -1,3 +1,3 @@
 <template>
-  <rect x="13" y="24" width="23" height="2"/>
+  <rect x="13" y="24" width="23" height="2" />
 </template>
diff --git a/app/src/experimental/icons/library/move.vue b/app/src/experimental/icons/library/move.vue
index c4cb6eae3e6cae41ce022c548238b37f12b9b6e9..305b7a20883a0a909584e05810c0192a5504b6d8 100644
--- a/app/src/experimental/icons/library/move.vue
+++ b/app/src/experimental/icons/library/move.vue
@@ -1,10 +1,16 @@
 <template>
   <g>
     <rect x="13" y="24" width="23" height="2" />
-    <rect x="23.5" y="36.5" width="23" height="2" transform="rotate(-90 23.5 36.5)" />
+    <rect
+      x="23.5"
+      y="36.5"
+      width="23"
+      height="2"
+      transform="rotate(-90 23.5 36.5)"
+    />
     <path d="M24.5 40L28 35L21 35L24.5 40Z" />
     <path d="M24.5 10L21 15H28L24.5 10Z" />
     <path d="M39.5 25L34.5 21.5L34.5 28.5L39.5 25Z" />
     <path d="M9.5 25L14.5 28.5L14.5 21.5L9.5 25Z" />
   </g>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/src/experimental/icons/library/plus.vue b/app/src/experimental/icons/library/plus.vue
index b76c69be1c9a28f0357826a82e6fc50c2e055612..6abc18ec14a37585bf8e3358cf2810d9bc1b1270 100644
--- a/app/src/experimental/icons/library/plus.vue
+++ b/app/src/experimental/icons/library/plus.vue
@@ -1,6 +1,12 @@
 <template>
   <g>
     <rect x="13" y="24" width="23" height="2" />
-    <rect x="23.5" y="36.5" width="23" height="2" transform="rotate(-90 23.5 36.5)" />
+    <rect
+      x="23.5"
+      y="36.5"
+      width="23"
+      height="2"
+      transform="rotate(-90 23.5 36.5)"
+    />
   </g>
 </template>
diff --git a/app/src/experimental/icons/library/select.vue b/app/src/experimental/icons/library/select.vue
index 4e910b1b19364d48a8b8b3a57d775381fece5d2b..c09bb6c395226c6c1781e5b159a4518d5ac3d1ec 100644
--- a/app/src/experimental/icons/library/select.vue
+++ b/app/src/experimental/icons/library/select.vue
@@ -1,4 +1,3 @@
-
 <template>
   <path
     fill-rule="evenodd"
diff --git a/app/src/experimental/modes/select.js b/app/src/experimental/modes/select.js
index 72ea5874609481997d060e4030cfa51393f76dce..846897c7e5e63598b0fd767877d2908bfd00f4f5 100644
--- a/app/src/experimental/modes/select.js
+++ b/app/src/experimental/modes/select.js
@@ -1,5 +1,3 @@
 export default {
-    mixins: {
-        
-    }
-}
\ No newline at end of file
+  mixins: {}
+}
diff --git a/app/src/experimental/utils/canvas.js b/app/src/experimental/utils/canvas.js
index 48db8b77bbeade8b10fbb49ac1a179c4077188f6..89de73a01e54a03e50433565ff01cf01103526e8 100644
--- a/app/src/experimental/utils/canvas.js
+++ b/app/src/experimental/utils/canvas.js
@@ -1,6 +1,10 @@
 import * as win from '@/experimental/constants/window'
 import { generateLinkHandles } from '@/experimental/utils/nodes'
-import { mapRange, distanceBetween, angleBetween } from '@/experimental/utils/numbers'
+import {
+  mapRange,
+  distanceBetween,
+  angleBetween
+} from '@/experimental/utils/numbers'
 
 //////////////////////////////////////////////////////////////////////
 // CANVAS UTILITIES
diff --git a/app/src/experimental/utils/dom.js b/app/src/experimental/utils/dom.js
index ed1955831c2c2153679093de8f6d85ee156e1057..57cdb7e43efdefdcb442980f2e350aa05eced4c2 100644
--- a/app/src/experimental/utils/dom.js
+++ b/app/src/experimental/utils/dom.js
@@ -18,11 +18,11 @@ export const getInteractionPoint = (target, event) => {
   return {
     x: parseInt(
       ((event.clientX - rect.left) / (rect.right - rect.left)) *
-      target.offsetWidth
+        target.offsetWidth
     ),
     y: parseInt(
       ((event.clientY - rect.top) / (rect.bottom - rect.top)) *
-      target.offsetHeight
+        target.offsetHeight
     )
   }
 }
diff --git a/app/src/experimental/utils/nodes.js b/app/src/experimental/utils/nodes.js
index 4e09101893a3b28cd467b6f759850c48c3593e55..8f2b3470487dec26365b6af49fc315b93bf4da4a 100644
--- a/app/src/experimental/utils/nodes.js
+++ b/app/src/experimental/utils/nodes.js
@@ -186,10 +186,10 @@ export const generateAreaFromNodes = nodes => {
 
 /**
  * Generates a node shape from two given points
- * 
+ *
  * @param {Point} origin
  * @param {Point} target
- * @return {Node} 
+ * @return {Node}
  *  */
 export const generateNode = (origin, target) => {
   const minusX = origin.x > target.x
diff --git a/app/src/experimental/utils/numbers.js b/app/src/experimental/utils/numbers.js
index cdb71341bcd8cae3e43febcdb374a7a445aa34b6..2ab8204ff22de968e83bf5007eb978554196fe80 100644
--- a/app/src/experimental/utils/numbers.js
+++ b/app/src/experimental/utils/numbers.js
@@ -65,30 +65,30 @@ export const angleBetween = (point1, point2) =>
   Math.atan2(point2.y - point1.y, point2.x - point1.x)
 
 /**
-* Constrains a value within a range
-*
-* @param {number} value
-* @param {number} min
-* @param {number} max
-* @return {number}
-*
-*  */
+ * Constrains a value within a range
+ *
+ * @param {number} value
+ * @param {number} min
+ * @param {number} max
+ * @return {number}
+ *
+ *  */
 export const clamp = (value, min, max) => {
   return Math.max(min, Math.min(value, max))
 }
 
 /**
  * ! TODO ! confusing naming
-* Scales a coordinate value
-*/
+ * Scales a coordinate value
+ */
 export const scaleCoordinate = (coordinate, scaleRatio) => {
   return scaleRatio * coordinate - coordinate
 }
 
 /**
  * ! TODO ! confusing naming
-* Scales a @Point
-*/
+ * Scales a @Point
+ */
 export const scalePoint = ({ x, y }, scale) => {
   return {
     x: scaleCoordinate(x, scale),
@@ -110,4 +110,4 @@ export const constrainTranslation = (targetTranslation, translationBounds) => {
     x: clamp(x, xMin, xMax),
     y: clamp(y, yMin, yMax)
   }
-}
\ No newline at end of file
+}
diff --git a/app/src/experimental/utils/view.js b/app/src/experimental/utils/view.js
index 96d46285c0f66f4ea01e29176fcd86463b43f1ad..4b90b005cdbcb54fbbefb5754421cf6a6842d000 100644
--- a/app/src/experimental/utils/view.js
+++ b/app/src/experimental/utils/view.js
@@ -1,4 +1,9 @@
-import { clamp, lerpPoint, scalePoint, distanceBetween } from '@/experimental/utils/numbers'
+import {
+  clamp,
+  lerpPoint,
+  scalePoint,
+  distanceBetween
+} from '@/experimental/utils/numbers'
 
 //////////////////////////////////////////////////////////////////////
 // DOM UTILITIES
@@ -12,123 +17,131 @@ import { clamp, lerpPoint, scalePoint, distanceBetween } from '@/experimental/ut
  * @param {Event} event
  * @param {Object} translation translated board position in {x,y}
  * @param {Number} scale board scale
- * @returns {Object}  
+ * @returns {Object}
  *
  *  */
 export const getNormalisedInteraction = (target, event, translation, scale) => {
-    const rect = target.getBoundingClientRect()
-    const x = event.clientX - parseInt(rect.left, 10)
-    const y = event.clientY - parseInt(rect.top, 10)
+  const rect = target.getBoundingClientRect()
+  const x = event.clientX - parseInt(rect.left, 10)
+  const y = event.clientY - parseInt(rect.top, 10)
 
-    return {
-        relativePoint: { x, y },
-        boardPoint: containerToBoardPoint({ x, y }, translation, scale)
-    }
+  return {
+    relativePoint: { x, y },
+    boardPoint: containerToBoardPoint({ x, y }, translation, scale)
+  }
 }
 
 export const containerToBoardPoint = (containerPoint, translation, scale) => {
-    return {
-        x: parseInt((containerPoint.x + -translation.x) / scale, 10),
-        y: parseInt((containerPoint.y + -translation.y) / scale, 10)
-    }
+  return {
+    x: parseInt((containerPoint.x + -translation.x) / scale, 10),
+    y: parseInt((containerPoint.y + -translation.y) / scale, 10)
+  }
 }
 
 // ! TODO !
 // export const boardToContainerPoint = (boardPoint, translation, scale) => {
 // }
 
-
 /**
  * @param {HTMLElement} target - base element for event
  * @param {Point} point point to transform
  * @param {Object} translation translated board position in {x,y}
- * @returns {Point}  
+ * @returns {Point}
  *
  *  */
-export const getTranslatedPositionFromContainer = (target, point, translation) => {
-    const rect = target.getBoundingClientRect()
+export const getTranslatedPositionFromContainer = (
+  target,
+  point,
+  translation
+) => {
+  const rect = target.getBoundingClientRect()
 
-    return {
-        x: point.x - (rect.left + translation.x),
-        y: point.y - (rect.top + translation.y)
-    }
-} 
+  return {
+    x: point.x - (rect.left + translation.x),
+    y: point.y - (rect.top + translation.y)
+  }
+}
 
-export const changeViewFromWheelEvent = (event, container, { translation, scale, minScale, maxScale }) => {
-    const scaleChange = 2 ** (event.deltaY * 0.002)
-    const newScale = clamp(
-        scale + (1 - scaleChange),
-        minScale,
-        maxScale
-    )
-    const mousePosition = getTranslatedPositionFromContainer(
-        container,
-        { x: event.clientX, y: event.clientY },
-        translation
-    )
+export const changeViewFromWheelEvent = (
+  event,
+  container,
+  { translation, scale, minScale, maxScale }
+) => {
+  const scaleChange = 2 ** (event.deltaY * 0.002)
+  const newScale = clamp(scale + (1 - scaleChange), minScale, maxScale)
+  const mousePosition = getTranslatedPositionFromContainer(
+    container,
+    { x: event.clientX, y: event.clientY },
+    translation
+  )
 
-    const scaleRatio = newScale / (scale != 0 ? scale : 1)
-    const focalPtDelta = scalePoint(mousePosition, scaleRatio)
-    const newTranslation = {
-        x: translation.x - focalPtDelta.x,
-        y: translation.y - focalPtDelta.y
-    }
+  const scaleRatio = newScale / (scale != 0 ? scale : 1)
+  const focalPtDelta = scalePoint(mousePosition, scaleRatio)
+  const newTranslation = {
+    x: translation.x - focalPtDelta.x,
+    y: translation.y - focalPtDelta.y
+  }
 
-    return [newScale, newTranslation]
+  return [newScale, newTranslation]
 }
 
-export const changeViewFromMultiTouch = (startTouches, newTouches, container, {
-    minScale,
-    maxScale,
-    interaction
-}) => {
-    const dist0 = distanceBetween(startTouches[0], startTouches[1])
-    const dist1 = distanceBetween(newTouches[0], newTouches[1])
-    const scaleChange = dist1 / dist0
-    const startScale = interaction.origin.scale
-    const targetScale = startScale + (scaleChange - 1) * startScale
-    const newScale = clamp(targetScale, minScale, maxScale)
+export const changeViewFromMultiTouch = (
+  startTouches,
+  newTouches,
+  container,
+  { minScale, maxScale, interaction }
+) => {
+  const dist0 = distanceBetween(startTouches[0], startTouches[1])
+  const dist1 = distanceBetween(newTouches[0], newTouches[1])
+  const scaleChange = dist1 / dist0
+  const startScale = interaction.origin.scale
+  const targetScale = startScale + (scaleChange - 1) * startScale
+  const newScale = clamp(targetScale, minScale, maxScale)
 
-    // calculate mid points
-    const newMidPoint = lerpPoint(
-        touchPoint(newTouches[0]),
-        touchPoint(newTouches[1]),
-        0.5
-    )
-    const startMidpoint = lerpPoint(
-        touchPoint(startTouches[0]),
-        touchPoint(startTouches[1]),
-        0.5
-    )
-    const dragDelta = {
-        x: newMidPoint.x - startMidpoint.x,
-        y: newMidPoint.y - startMidpoint.y
-    }
-    const scaleRatio = newScale / startScale
-    const focalPoint = getTranslatedPositionFromContainer(
-        container,
-        startMidpoint,
-        interaction.origin.pointer.translation
-    )
-    const focalPointDelta = scalePoint(focalPoint, scaleRatio)
+  // calculate mid points
+  const newMidPoint = lerpPoint(
+    touchPoint(newTouches[0]),
+    touchPoint(newTouches[1]),
+    0.5
+  )
+  const startMidpoint = lerpPoint(
+    touchPoint(startTouches[0]),
+    touchPoint(startTouches[1]),
+    0.5
+  )
+  const dragDelta = {
+    x: newMidPoint.x - startMidpoint.x,
+    y: newMidPoint.y - startMidpoint.y
+  }
+  const scaleRatio = newScale / startScale
+  const focalPoint = getTranslatedPositionFromContainer(
+    container,
+    startMidpoint,
+    interaction.origin.pointer.translation
+  )
+  const focalPointDelta = scalePoint(focalPoint, scaleRatio)
 
-    const newTranslation = {
-        x: interaction.origin.pointer.translation.x - focalPointDelta.x + dragDelta.x,
-        y: interaction.origin.pointer.translation.y - focalPointDelta.y + dragDelta.y
-    }
-    return [newTranslation, newScale]
+  const newTranslation = {
+    x:
+      interaction.origin.pointer.translation.x -
+      focalPointDelta.x +
+      dragDelta.x,
+    y:
+      interaction.origin.pointer.translation.y - focalPointDelta.y + dragDelta.y
+  }
+  return [newTranslation, newScale]
 }
 
 /**
  * Normalises touch event position
  *
  * @param {Event} event
- * @returns {Point}  
+ * @returns {Point}
  *
  *  */
 export const touchPoint = touch => {
-    return {
-        x: touch.clientX,
-        y: touch.clientY
-    }
-}
\ No newline at end of file
+  return {
+    x: touch.clientX,
+    y: touch.clientY
+  }
+}
diff --git a/app/src/main.js b/app/src/main.js
index 25a587fc4951fe3507d1618228ebb74bdc0c612c..b6b5acbe8a83e6548fa5f782b0ecdba9d89294bf 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -20,5 +20,5 @@ new Vue({
   router,
   store,
   files,
-  render: (h) => h(App),
+  render: h => h(App)
 }).$mount('#app')
diff --git a/app/src/router/index.js b/app/src/router/index.js
index ed0ff00391c54a10066fa88804e0dc2128b417af..79aa399f4784a0b7019968b2d85f2974572cd08b 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -9,7 +9,7 @@ export const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home,
+    component: Home
   },
   {
     path: '/sandbox',
@@ -23,12 +23,12 @@ export const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () =>
-      import(/* webpackChunkName: "about" */ '../views/About.vue'),
+      import(/* webpackChunkName: "about" */ '../views/About.vue')
   },
   // dynamic segement `:microcosm` is added to the path
   {
     path: '/microcosm/:microcosm',
-    component: Home,
+    component: Home
   },
 
   {
@@ -38,8 +38,8 @@ export const routes = [
     component: () =>
       import(
         /* webpackChunkName: "NotFoundComponent" */ '../views/NotFound.vue'
-      ),
-  },
+      )
+  }
 ]
 
 const router = new VueRouter({
@@ -47,7 +47,7 @@ const router = new VueRouter({
   //base: 'https://alpha.nodenogg.in/',
   //base: process.env.VUE_APP_HTTP + '://' + process.env.VUE_APP_URL + '',
   //base: process.env.VUE_APP_HTTP,
-  routes,
+  routes
 })
 
 export default router
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 58c9741db86aa2fe69b0b8292fcdc84b938c7be7..896085b6ba3727006ea2612f49fe39c0d182ddf9 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -66,13 +66,13 @@ const store = new Vuex.Store({
     ],
     configEmoji: [
       //{}
-    ],
+    ]
   },
   mutations: {
     CREATE_MICROCOSM(state, doc) {
       // const urldevice = Router.currentRoute.params.device
       const urlmicrocosm = Router.currentRoute.params.microcosm
-      pouchdb.close().then(function () {
+      pouchdb.close().then(function() {
         if (urlmicrocosm != undefined) {
           // myclient = urldevice
           microcosm = urlmicrocosm
@@ -97,14 +97,14 @@ const store = new Vuex.Store({
       pouchdb
         .allDocs({
           include_docs: true,
-          attachments: true,
+          attachments: true
         })
-        .then(function (doc) {
+        .then(function(doc) {
           state.microcosm = microcosm
           state.allNodes = doc.rows
           store.commit('SET_OTHER_NODES')
         })
-        .catch(function (err) {
+        .catch(function(err) {
           console.log(err)
         })
     },
@@ -130,7 +130,7 @@ const store = new Vuex.Store({
             if (state.allNodes[i].doc.nodes[j].deleted != true) {
               const newNode = {
                 node_id: state.allNodes[i].doc.nodes[j].node_id,
-                node_text: state.allNodes[i].doc.nodes[j].node_text,
+                node_text: state.allNodes[i].doc.nodes[j].node_text
               }
 
               state.otherNodes.push(newNode)
@@ -155,7 +155,7 @@ const store = new Vuex.Store({
     GET_MY_NODES(state) {
       pouchdb
         .get(state.myclient)
-        .then(function (doc) {
+        .then(function(doc) {
           var i
           for (i = 0; i < Object.keys(doc.nodes).length; i++) {
             if (doc.nodes[i].deleted == true) {
@@ -164,11 +164,15 @@ const store = new Vuex.Store({
             state.myNodes = doc.nodes
           }
         })
-        .catch(function (err) {
+        .catch(function(err) {
           if (err.status == 404) {
             var uniqueid =
-              Math.random().toString(36).substring(2, 15) +
-              Math.random().toString(36).substring(2, 15)
+              Math.random()
+                .toString(36)
+                .substring(2, 15) +
+              Math.random()
+                .toString(36)
+                .substring(2, 15)
             return pouchdb.put({
               _id: state.myclient,
               _attachments: {},
@@ -183,9 +187,9 @@ const store = new Vuex.Store({
                   content_type: 'sheet',
                   // NOTE: first node is hidden due to no position
                   deleted: true,
-                  attachment_name: '',
-                },
-              ],
+                  attachment_name: ''
+                }
+              ]
             })
           }
         })
@@ -194,15 +198,15 @@ const store = new Vuex.Store({
     GET_POSITIONS(state) {
       pouchdb
         .get(state.global_pos_name)
-        .then(function (doc) {
+        .then(function(doc) {
           state.configPositions = doc.positions
         })
-        .catch(function (err) {
+        .catch(function(err) {
           console.log(err)
           if (err.status == 404) {
             return pouchdb.put({
               _id: state.global_pos_name,
-              positions: [],
+              positions: []
             })
           }
         })
@@ -222,23 +226,23 @@ const store = new Vuex.Store({
 
       pouchdb
         .get(state.global_pos_name)
-        .then(function (doc) {
+        .then(function(doc) {
           //  console.log(doc)
           // put the store into pouchdb
           return pouchdb.bulkDocs([
             {
               _id: state.global_pos_name,
               _rev: doc._rev,
-              positions: state.configPositions,
-            },
+              positions: state.configPositions
+            }
           ])
         })
-        .then(function () {
-          return pouchdb.get(state.global_pos_name).then(function (doc) {
+        .then(function() {
+          return pouchdb.get(state.global_pos_name).then(function(doc) {
             state.configPositions = doc.positions
           })
         })
-        .catch(function (err) {
+        .catch(function(err) {
           if (err.status == 404) {
             // pouchdb.put({  })
           }
@@ -253,11 +257,15 @@ const store = new Vuex.Store({
 
     ADD_NODE(state, e) {
       var uniqueid =
-        Math.random().toString(36).substring(2, 15) +
-        Math.random().toString(36).substring(2, 15)
+        Math.random()
+          .toString(36)
+          .substring(2, 15) +
+        Math.random()
+          .toString(36)
+          .substring(2, 15)
       state.localnodeid = uniqueid
 
-      pouchdb.get(state.myclient).then(function (doc) {
+      pouchdb.get(state.myclient).then(function(doc) {
         if (e == undefined) {
           doc.nodes.push({
             node_id: uniqueid,
@@ -265,7 +273,7 @@ const store = new Vuex.Store({
             node_owner: state.myclient,
             content_type: 'sheet',
             deleted: false,
-            attachment_name: e,
+            attachment_name: e
           })
         }
 
@@ -274,42 +282,42 @@ const store = new Vuex.Store({
             _id: state.myclient,
             _rev: doc._rev,
             _attachments: doc._attachments,
-            nodes: doc.nodes,
+            nodes: doc.nodes
           })
-          .then(function () {
-            return pouchdb.get(state.myclient).then(function (doc) {
+          .then(function() {
+            return pouchdb.get(state.myclient).then(function(doc) {
               state.myNodes = doc.nodes
               var end = Object.keys(state.myNodes).length - 1
               const newNode = {
                 nodeid: state.myNodes[end].id,
-                nodetext: state.myNodes[end].text,
+                nodetext: state.myNodes[end].text
                 //  content_type: state.notes[end].content_type
               }
               state.activeNode = newNode
             })
           })
-          .catch(function (err) {
+          .catch(function(err) {
             if (err.status == 404) {
               // pouchdb.put({  })
             }
           })
       })
-      pouchdb.get(state.global_pos_name).then(function (doc) {
+      pouchdb.get(state.global_pos_name).then(function(doc) {
         doc.positions.push({
           node_id: uniqueid,
           x_pos: 50,
           y_pos: 50,
           width: 200,
           height: 275,
-          z_index: 1,
+          z_index: 1
         })
         return pouchdb
           .put({
             _id: state.global_pos_name,
             _rev: doc._rev,
-            positions: doc.positions,
+            positions: doc.positions
           })
-          .catch(function (err) {
+          .catch(function(err) {
             console.log(err)
           })
       })
@@ -324,7 +332,7 @@ const store = new Vuex.Store({
       }
       pouchdb
         .get(state.myclient)
-        .then(function (doc) {
+        .then(function(doc) {
           // put the store into pouchdb
 
           return pouchdb.bulkDocs([
@@ -332,16 +340,16 @@ const store = new Vuex.Store({
               _id: state.myclient,
               _rev: doc._rev,
               _attachments: doc._attachments,
-              nodes: state.myNodes,
-            },
+              nodes: state.myNodes
+            }
           ])
         })
-        .then(function () {
-          return pouchdb.get(state.myclient).then(function (doc) {
+        .then(function() {
+          return pouchdb.get(state.myclient).then(function(doc) {
             state.myNodes = doc.nodes
           })
         })
-        .catch(function (err) {
+        .catch(function(err) {
           if (err.status == 404) {
             // pouchdb.put({  })
           }
@@ -357,23 +365,23 @@ const store = new Vuex.Store({
       }
       pouchdb
         .get(state.myclient)
-        .then(function (doc) {
+        .then(function(doc) {
           // put the store into pouchdb
           return pouchdb.bulkDocs([
             {
               _id: state.myclient,
               _rev: doc._rev,
               _attachments: doc._attachments,
-              nodes: state.myNodes,
-            },
+              nodes: state.myNodes
+            }
           ])
         })
-        .then(function () {
-          return pouchdb.get(state.myclient).then(function (doc) {
+        .then(function() {
+          return pouchdb.get(state.myclient).then(function(doc) {
             state.myNodes = doc.nodes
           })
         })
-        .catch(function (err) {
+        .catch(function(err) {
           if (err.status == 404) {
             // pouchdb.put({  })
           }
@@ -383,40 +391,44 @@ const store = new Vuex.Store({
       console.log
       pouchdb
         .get(state.global_emoji_name)
-        .then(function (doc) {
+        .then(function(doc) {
           state.configEmoji = doc.emojis
         })
-        .catch(function (err) {
+        .catch(function(err) {
           console.log(err)
           if (err.status == 404) {
             return pouchdb.put({
               _id: state.global_emoji_name,
-              emojis: [],
+              emojis: []
             })
           }
         })
     },
     ADD_EMOJI(state, e) {
       var uniqueid =
-        Math.random().toString(36).substring(2, 15) +
-        Math.random().toString(36).substring(2, 15)
-      pouchdb.get(state.global_emoji_name).then(function (doc) {
+        Math.random()
+          .toString(36)
+          .substring(2, 15) +
+        Math.random()
+          .toString(36)
+          .substring(2, 15)
+      pouchdb.get(state.global_emoji_name).then(function(doc) {
         doc.emojis.push({
           emoji_id: uniqueid,
           node_id: e.nodeid,
-          emoji_text: e.emojitext,
+          emoji_text: e.emojitext
         })
         return pouchdb
           .put({
             _id: state.global_emoji_name,
             _rev: doc._rev,
-            emojis: doc.emojis,
+            emojis: doc.emojis
           })
-          .catch(function (err) {
+          .catch(function(err) {
             console.log(err)
           })
       })
-    },
+    }
   },
 
   actions: {
@@ -427,7 +439,7 @@ const store = new Vuex.Store({
     },
 
     syncDB: () => {
-      pouchdb.replicate.from(remote).on('complete', function () {
+      pouchdb.replicate.from(remote).on('complete', function() {
         store.commit('GET_ALL_NODES')
         store.commit('GET_MY_NODES')
         store.commit('GET_POSITIONS')
@@ -435,29 +447,29 @@ const store = new Vuex.Store({
         // turn on two-way, continuous, retriable sync
         pouchdb
           .sync(remote, { live: true, retry: true, attachments: true })
-          .on('change', function () {
+          .on('change', function() {
             // pop info into function to find out more
             store.commit('GET_ALL_NODES')
             store.commit('GET_MY_NODES')
             store.commit('GET_POSITIONS')
             store.commit('GET_EMOJI')
           })
-          .on('paused', function () {
+          .on('paused', function() {
             // replication paused (e.g. replication up to date, user went offline)
             // console.log('replication paused')
           })
-          .on('active', function () {
+          .on('active', function() {
             // replicate resumed (e.g. new changes replicating, user went back online)
             //console.log('back active')
           })
-          .on('denied', function () {
+          .on('denied', function() {
             // a document failed to replicate (e.g. due to permissions)
           })
-          .on('complete', function () {
+          .on('complete', function() {
             // handle complete
             //console.log('complete')
           })
-          .on('error', function (err) {
+          .on('error', function(err) {
             console.log(err)
           })
       })
@@ -490,9 +502,9 @@ const store = new Vuex.Store({
     addEmoji: ({ commit }, { nodeid, emojitext }) => {
       commit('ADD_EMOJI', {
         nodeid,
-        emojitext,
+        emojitext
       })
-    },
+    }
   },
   modules: {
     ui: uiStore
diff --git a/app/src/views/About.vue b/app/src/views/About.vue
index 503dce51a0d6c7eead68b4514b99dd06d5a52fdb..277e30f3c695076c5421715479892b4c46cc1657 100644
--- a/app/src/views/About.vue
+++ b/app/src/views/About.vue
@@ -86,11 +86,11 @@ import { mapState } from 'vuex'
 export default {
   name: 'About',
 
-  data: function () {
+  data: function() {
     return {}
   },
   computed: mapState({
-    myVersion: (state) => state.version,
-  }),
+    myVersion: state => state.version
+  })
 }
 </script>
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 8515a9c14203be213fbf45a9fa93919a77337dc8..17a3d19b50a6e8d080af79bfa619182a6b4af681 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -25,7 +25,7 @@
         />
 
         <NodesLayer
-          @editTrue="(e) => editTrue(e)"
+          @editTrue="e => editTrue(e)"
           v-for="value in myNodes"
           v-bind:key="value.node_id"
           v-bind:nodeid="value.node_id"
@@ -72,11 +72,11 @@ export default {
     }
   },
 
-  data: function () {
+  data: function() {
     return {
       clientset: false,
       listview: false,
-      offline: false,
+      offline: false
     }
   },
 
@@ -86,12 +86,12 @@ export default {
     OtherNodeslayer,
     ListLayer,
     OtherListlayer,
-    ControlsLayer,
+    ControlsLayer
   },
   computed: mapState({
-    myNodes: (state) => state.myNodes,
-    otherNodes: (state) => state.otherNodes,
-    shortcutstate: (state) => state.shortcutstate,
+    myNodes: state => state.myNodes,
+    otherNodes: state => state.otherNodes,
+    shortcutstate: state => state.shortcutstate
   }),
   methods: {
     clientAdded() {
@@ -120,8 +120,8 @@ export default {
     },
     onlineTriggered() {
       this.offline = false
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/app/vue.config.js b/app/vue.config.js
index 6ca6c2175d64b0b8e645badccdbef0e377f805b5..b377ce6c426742fc1780ab67f87c313afb425c6e 100644
--- a/app/vue.config.js
+++ b/app/vue.config.js
@@ -10,12 +10,12 @@ module.exports = {
             {
               loader: 'file-loader',
               options: {
-                name: 'files/[name].[ext]',
-              },
-            },
-          ],
-        },
-      ],
-    },
-  },
+                name: 'files/[name].[ext]'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
 }