diff --git a/.nuxt/store.js b/.nuxt/store.js
index 88eac3a..004c59c 100644
--- a/.nuxt/store.js
+++ b/.nuxt/store.js
@@ -18,7 +18,10 @@ void (function updateModules() {
   // Enforce store modules
   store.modules = store.modules || {}
 
+  resolveStoreModules(require('../store/state.js'), 'state.js')
   resolveStoreModules(require('../store/storeRoute.js'), 'storeRoute.js')
+  resolveStoreModules(require('../store/modules/coordinates.js'), 'modules/coordinates.js')
+  resolveStoreModules(require('../store/modules/display.js'), 'modules/display.js')
 
   // If the environment supports hot reloading...
 
@@ -26,7 +29,10 @@ void (function updateModules() {
     // Whenever any Vuex module is updated...
     module.hot.accept([
       '../store/index.js',
+      '../store/state.js',
       '../store/storeRoute.js',
+      '../store/modules/coordinates.js',
+      '../store/modules/display.js',
     ], () => {
       // Update `root.modules` with the latest definitions.
       updateModules()
diff --git a/components/DisplayMixin.js b/components/DisplayMixin.js
deleted file mode 100644
index 825d137..0000000
--- a/components/DisplayMixin.js
+++ /dev/null
@@ -1,86 +0,0 @@
-export const DisplayMixin = {
-  // Should probably store display variable in data{} of this file...
-  methods: {
-    // Modifier functions
-    scaler(input, scale=+this.$store.state.scale){ // –> scale #s of any given input.
-      switch(input.constructor){
-        case Number:
-          return input * scale
-        case String:
-          return +input * scale
-        case Array:
-          if (input[0].constructor==Array){ // 2D
-            return input.map(xy => [xy[0]*scale, xy[1]*scale])
-          } else { // 1D
-            return input.map(el => el * scale)
-          }
-        case Object: // assuming {'C': [x1,y1, x2,y2, x,y]}
-          Object.keys(input).map(function(key, index) {
-            input[key] = input[key].map(el => el*scale)
-          })
-          return input
-      }
-    },
-
-    // Independant functions
-    getXDisp(xConst, action, xDisp){ // –> # 
-      xConst = xConst.reduce((a, b) => a + b, 0) //children branches [1,2] x=0+dx of 2. etc
-      const y = action['y']
-      const dx = Array.isArray(y) ? y[0] : 0
-      return this.scaler(xDisp+dx, 50) 
-      // remove 50 so scale uniformly could make x&y scales... added to to-do
-    },
-    getYDisp(key, action){ // –> #
-      switch(+this.$store.state.display) {
-        case 1:
-          return this.scaler(+key)
-        case 2:
-          // future cases
-        default: 
-          const y = action['y']
-          const yDisp = Array.isArray(y) ? y[1] : y
-          return this.scaler(yDisp)
-      }
-    },
-
-    // Dependent Functions - More than necessary, but there if needed
-    getXYDisp(key, xConst, xDisp, action){ // –> [x, y] 
-      var xDisp = this.getXDisp(xConst, action, xDisp)
-      var yDisp = this.getYDisp(key, action)
-      return [xDisp, yDisp]
-    },
-
-    getXDispPath(bItems){ // –> [x1, x2, ...]
-      const xConst = bItems.x
-      var xDisp = this.$store.getters.solveXDisp(xConst)
-      const path = Object.values(bItems.path)
-      return path.map(actions => this.getXDisp(xConst, actions, xDisp))
-    },
-    getYDispPath(bItems){ // –> [y1, y2, ...]
-      const kv = Object.entries(bItems.path)
-      return kv.map(kv => this.getYDisp(kv[0], kv[1]))
-    },
-    getDispPath(bItems){ // –> [[x, y], ...]
-      const xConst = bItems.x
-      var xDisp = this.$store.getters.solveXDisp(xConst)
-      const kvArr = Object.entries(bItems.path)
-      return kvArr.map(kv => this.getXYDisp(kv[0], xConst, xDisp, kv[1]))
-    },
-
-    // Relative Link Function
-    getLink(link) {
-      if (Object.keys(this._$).includes(link.coord[0])) {
-        // relative link - if given branch exists
-        var [branchName, event] = link.coord
-        var branch = this._$[branchName]
-        var action = branch.path[event]
-        var xDisp = this.$store.getters.solveXDisp(branch['x'])
-        var XYLink = this.getXYDisp(event, branch['x'], xDisp, action)
-      } else {
-        // hard link
-        var XYLink = this.scaler(link.coord)
-      }
-      return XYLink
-    },
-  }
-}
\ No newline at end of file
diff --git a/components/Glyphs.vue b/components/Glyphs.vue
index dd85b58..e75c0bf 100755
--- a/components/Glyphs.vue
+++ b/components/Glyphs.vue
@@ -1,8 +1,8 @@
 <template>
   <component 
     :is="i.glyph? i.glyph: 'Dot'" 
-    :x="getXDisp(items.x, i, $store.getters.solveXDisp(items.x))"
-    :y="getYDisp(turn, i)"
+    :x="coords[0]"
+    :y="coords[1]"
     :color="items.color"
   />
 </template>
@@ -11,11 +11,9 @@
 import _ from "lodash";
 import Dot from "./Glyphs/Dot.vue";
 import Book from "./Glyphs/Book.vue";
-import { DisplayMixin } from "~/components/DisplayMixin.js";
 
 export default {
-  props:['items', 'i', 'turn'],
-  mixins: [DisplayMixin],
+  props:['items', 'i', 'coords'],
   components: {
     Dot: Dot,
     Book: Book
diff --git a/components/Links.vue b/components/Links.vue
index 1c48c96..03a05d2 100644
--- a/components/Links.vue
+++ b/components/Links.vue
@@ -2,20 +2,18 @@
   <component
     :is="i.link.type"
     v-if="Object.keys($options.components).includes(i.link.type)"
-    :x="getXDisp(items.x, i, $store.getters.solveXDisp(items.x))"
-    :y="getYDisp(turn, i)"
-    :XYLink="getLink(i.link)"
+    :x="coords[0]"
+    :y="coords[1]"
+    :XYLink="$store.getters.getLink(i.link)"
     :color="items.color"
   />
 </template>
 
 <script>
 import Dotted from "./Links/Dotted.vue";
-import { DisplayMixin } from "~/components/DisplayMixin.js";
 
 export default {
-  props:['items', 'i', 'turn'],
-  mixins: [DisplayMixin],
+  props:['items', 'i', 'coords'],
   components: {
     Dotted: Dotted,
   }, 
diff --git a/components/Paths.vue b/components/Paths.vue
index 90c9162..dbb296f 100644
--- a/components/Paths.vue
+++ b/components/Paths.vue
@@ -1,10 +1,10 @@
 <template>
   <path 
     :class="{active: isActive}"
-    v-on:dblclick="toggleChildren(items.children)"
+    v-on:click="toggleChildren(items.children)"
 
     :id="branchName"
-    :d="dString(items)" 
+    :d="dString()" 
     fill="none" 
     :stroke="items.color" 
     stroke-width="7"
@@ -14,27 +14,36 @@
 <script>
 import _ from "lodash";
 import { PathsMixin } from "./Paths/PathsMixin.js";
-import { DisplayMixin } from "~/components/DisplayMixin.js";
 
 export default {
-  props: ['items', 'branchName'],
-  mixins: [PathsMixin, DisplayMixin],
+  props: ['items', 'branchName', 'coords'],
+  mixins: [PathsMixin],
   computed: {
     isActive() {
-      var display = this.$store.state.show
-      return !this.items.children.every((val) => val in display)
-    }
+      if (_.isEmpty(this._Display.filtered)){
+        var display = this._Display.show
+        return !this.items.children.every((val) => val in display)
+      } else {return false} 
+    },
+    getPath() { // –> [[x, y], ...]
+      // continuity data is held in 'y' of path items 
+      // it is used in dString logic.
+      const xConst = this.items.x.reduce((a, b) => a + b, 0)
+      const yArr = _.map(this.items.path, 'y')
+      const coords = yArr.map(i => Array.isArray(i) ? [xConst+i[0], i[1]] : [xConst, i])
+      return coords
+    },
   },
   methods: {
     toggleChildren(children) {
       if (children.length) {
         if (this.isActive === true) {
           //var payload = {branches:children, parent:this.branchName}
-          this.$store.commit('addVisible', children) // payload
+          this.$store.dispatch('addVisible', children) // payload
         } else {
           for (var key of children){
-            var subChild = this._$[key].children
-            var show = this.$store.state.show
+            var subChild = this._Branches[key].children
+            var show = this._Display.show
             var activeChildren = subChild.filter(branch => branch in show)
             // Recusrion for children with descendants
             if (activeChildren.length>0){
@@ -44,23 +53,15 @@ export default {
             this.$store.commit('removeVisible', key)
           }
         }
-        console.log("state.show: ", this.$store.state.show)
+        //console.log("_Display.show: ", this._Display.show)
+        this.$store.dispatch('updateCache') // cant update 1 branch due to down stream effects.
       }
     },
 
-    getPath(bItems) { // –> [[x, y], ...]
-      // continuity data is held in 'y' of path items 
-      // it is used in dString logic.
-      const xConst = bItems.x.reduce((a, b) => a + b, 0) // sum here?
-      const yArr = _.map(bItems.path, 'y')
-      const coords = yArr.map(i => Array.isArray(i) ? [xConst+i[0], i[1]] : [xConst, i])
-      return coords
-    },
-
-    dString(bItems) {
+    dString() {
       var d = [];
-      var path = this.getPath(bItems)
-      var dispCoords = this.getDispPath(bItems)
+      var path = this.getPath
+      var dispCoords = Object.values(this.coords)
 
       for (var i of _.range(path.length)) {
         let [x, y] = path[i] // Logic variables
@@ -83,7 +84,7 @@ export default {
         }
 
         // In-path link: Prefix link dStrting at given point if type==path
-        var XYLink = this.inPathLink(bItems, i)
+        var XYLink = this.inPathLink(this.items, i)
         if (XYLink !== false) { 
           this.moveTo(d, ...XYLink)
           this.Branch(d, xDisp, yDisp, XYLink)
diff --git a/components/Paths/PathsMixin.js b/components/Paths/PathsMixin.js
index 2b63545..0c9d0f2 100644
--- a/components/Paths/PathsMixin.js
+++ b/components/Paths/PathsMixin.js
@@ -1,35 +1,41 @@
 export const PathsMixin = {
   methods: {
+    ExtendOrReplace(d, x, y, marker, string) {
+      // If repeat, overwrite. Otherwise, extened dString.
+      let last_index = d.length-1
+      if (d.length>0 && d[last_index][0] === marker) {
+        d[last_index] = (string) // Overwrite repeat
+        return d
+      } else {
+        return d.push(string) // Extend dString
+      }
+    },
     moveTo(d, x, y){
-      return d.push(`M${x} ${y}`)
-    }, 
+      const marker = 'M'
+      const string = `${marker}${x} ${y}`
+      return this.ExtendOrReplace(d, x, y, marker, string)
+    },
     Branch(d, x, y, priorXYDisp, scale) {
       var [xprior, yprior] = priorXYDisp;
-      var maxHeight = yprior + +this.$store.state.scale
+      var maxHeight = yprior + +this._Display.scale
       var midY = (yprior + maxHeight) / 2;
       d.push(`C${xprior} ${midY} ${x} ${midY} ${x} ${maxHeight}`);
-      if (maxHeight<y){
-        this.Line(d, x, y)
-      } else(this.Line(d, x, y)) 
+      this.Line(d, x, y)
       // zero length line necessary for animation. 
       // Otherwise its not the same path
       return d
     },
     Line(d, x ,y) {
-      let last_index = d.length-1
-      if (d[last_index][0] === "L") {
-        d[last_index] = (`L${x} ${y}`) // Extend prior line
-        return d
-      } else {
-        return d.push(`L${x} ${y}`) // Start new line
-      }
+      const marker = 'L'
+      const string = `${marker}${x} ${y}`
+      return this.ExtendOrReplace(d, x, y, marker, string)
     }, 
 
     // In-path Link
     inPathLink(bItems, index){
       var link = Object.values(bItems.path)[index].link
       if (Object.keys(link).length > 0 && link.type==="Path"){
-        return this.getLink(link)
+        return this.$store.getters.getLink(link)
       } else {
         return false
       }
diff --git a/components/CollapseState.vue b/components/UI/CollapseState.vue
similarity index 77%
rename from components/CollapseState.vue
rename to components/UI/CollapseState.vue
index dbe3eb6..ff24f36 100644
--- a/components/CollapseState.vue
+++ b/components/UI/CollapseState.vue
@@ -15,10 +15,10 @@ export default {
       return Object.keys(this.$store.getters.rootBranches).sort()
     },
     all(){
-      return Object.keys(this._$).sort()
+      return Object.keys(this._Branches).sort()
     },
     branchState(){
-      var show = Object.keys(this.$store.state.show).sort()
+      var show = Object.keys(this._Display.show).sort()
       if ( _.isEqual(show, this.roots) ){
         return 0
       } else if ( _.isEqual(show, this.all)) {
@@ -30,10 +30,10 @@ export default {
   },
   methods: {
     collapse() {
-      this.$store.commit('setVisible', this.roots)
+      this.$store.dispatch('setVisible', this.roots)
     },
     expand() {
-      this.$store.commit('setVisible', this.all)
+      this.$store.dispatch('setVisible', this.all)
     },
     onChg(e) {
       switch(+e.target.value) {
@@ -46,6 +46,7 @@ export default {
         default: 
           break
       }
+      this.$store.dispatch('updateCache')
     }
   }
 }
diff --git a/components/UI/DisplaySlider.vue b/components/UI/DisplaySlider.vue
new file mode 100644
index 0000000..9617b4f
--- /dev/null
+++ b/components/UI/DisplaySlider.vue
@@ -0,0 +1,9 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+};
+</script>
\ No newline at end of file
diff --git a/components/UI/Search.vue b/components/UI/Search.vue
new file mode 100644
index 0000000..defa056
--- /dev/null
+++ b/components/UI/Search.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="dropdown">
+    <input 
+      class="dropdown-input"
+      @focus="initQuery()" @blur="dropdown=false"
+      @keyup.enter="selectOption(filteredList[0])"
+      type="text" v-model="search"
+      placeholder="Search branches..." />
+
+    <transition-group name="fade" tag="div"
+      class="dropdown-content" v-show="dropdown"
+      >
+      <div
+        class="dropdown-item"
+        @mousedown="selectOption(option)"
+        v-for="(option, index) in filteredList"
+        :key="option" :style="'transition: all .3s '+300*index/(filteredList.length)+'ms'">
+          {{ option }}
+      </div>
+    </transition-group>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dropdown: false,
+      search:'',
+      selected:false
+    }
+  },
+  computed: {
+    filteredList() {
+      var filtered = []
+      if(this.selected){
+        filtered.push(this.selected)
+      } else {
+        filtered = Object.keys(this._Branches).filter(k => {
+          return k.toLowerCase().includes(this.search.toLowerCase())
+        })
+      }
+      this.$store.dispatch('setFiltered', this.search!==""?filtered:false)
+      this.$store.dispatch('updateCache')
+      return filtered
+    }
+  },
+  methods:{
+    selectOption(option) {
+      this.search = option
+      this.selected = option
+      this.dropdown=false
+    },
+    initQuery(){
+      this.dropdown = true
+      this.selected = false
+    }
+  }
+}
+</script>
+
+<style>
+.fade-enter, .fade-leave-to{
+  opacity: 0;
+}
+.fade.enter{
+  opacity: 1;
+}
+
+.dropdown{
+  width: 200px;
+}
+.dropdown-input{
+  z-index: 11;
+  width: 100%;
+  position: relative;
+}
+.dropdown-content{
+  z-index: 10;
+  background-color: azure;
+  display: inherit;
+  position: absolute;
+  width: 200px;
+}
+.dropdown-item:hover{
+  transition-duration: .3s;
+  transition-delay: 50ms !important;
+  background-color: cornflowerblue;
+}
+</style>
\ No newline at end of file
diff --git a/components/VGitGraph.vue b/components/VGitGraph.vue
index f2b5ac4..bf69ecd 100644
--- a/components/VGitGraph.vue
+++ b/components/VGitGraph.vue
@@ -7,29 +7,29 @@
         Transition group doesnt work as v-show=false yeilds x&y=0. 
         Thus, they appear from the top left corner of the screen.
       -->
-      <g :id="'g-'+branchName" v-for="(items, branchName) in _$" :key="'path-'+branchName"
-         v-show="branchName in $store.state.show">
+      <g :id="'g-'+branchName" v-for="(items, branchName) in _Branches" :key="'path-'+branchName"
+         v-show="display(branchName)">
         <Paths
-          class="transition-move"
-          :items="items" :branchName="branchName"
+          class="transition-move" :style="cssProps"
+          :items="items" :branchName="branchName" :coords="branchCache[branchName]"
         />
       </g>
 
-      <g :id="branchName+'-Links'" v-for="(items, branchName) in _$" :key="'link-'+branchName">
+      <g :id="branchName+'-Links'" v-for="(items, branchName) in _Branches" :key="'link-'+branchName">
         <Links
-          v-show="branchName in $store.state.show"
-          class="transition-move"
+          v-show="display(branchName)"
+          class="transition-move" :style="cssProps"
           v-for="(actions, turn) in filterLinks(items.path)" :key="turn" 
-          :items="items" :i="actions" :turn="turn"
+          :items="items" :i="actions" :coords="branchCache[branchName][turn]"
         />
       </g>
 
-      <g :id="branchName+'-Glyphs'" v-for="(items, branchName) in _$" :key="'glyph-'+branchName"
-         v-show="branchName in $store.state.show">
+      <g :id="branchName+'-Glyphs'" v-for="(items, branchName) in _Branches" :key="'glyph-'+branchName"
+         v-show="display(branchName)">
         <Glyphs
-          class="transition-move"
+          class="transition-move" :style="cssProps"
           v-for="(actions, turn) in items.path" :key="turn"
-          :items="items" :i="actions" :turn="turn"
+          :items="items" :i="actions" :coords="branchCache[branchName][turn]"
         />
       </g>
 
@@ -51,10 +51,21 @@ export default {
     Glyphs
   },
   created() {
+    this.$store.dispatch('initTimeArr')
     this.initRoots()
     this.initDisplacement()
     // dx must be defined before any x values are calculated. Nan causes SSR err.
     // if in paths.vue, dx may not be defined when links or glyph call it
+    this.$store.dispatch('updateCache') // call last, after initializations
+    //console.log('cache: ', this._Coords.cache)
+  },
+  computed:{
+    cssProps() { 
+      return {'--duration': `${this._Display.scaling}s`}
+    },
+    branchCache() {
+      return this._Coords.cache[this._Display.display]
+    }
   },
   methods: {
     filterLinks(path) {
@@ -65,22 +76,30 @@ export default {
     },
     initRoots() {
       var filtered = Object.keys(this.$store.getters.rootBranches)
-      this.$store.commit('addVisible', filtered)
-      console.log('otp: ', this.$store.state.show)
+      this.$store.dispatch('addVisible', filtered)
+      //console.log('otp: ', this._Display.show)
     },
     initDisplacement() {
-      _.forEach(this._$, (v,branchName) => {
+      _.forEach(this._Branches, (v, branchName) => {
         const displacement = this.$store.getters.maxDx(branchName)
         this.$store.commit('dxCreate', {key:branchName, value:displacement})
       })
+      //console.log('displacement:', this._Coords.displacement)
     },
-
+    display(branchName) {
+      if(!_.isEmpty(this._Display.filtered)) {
+        return branchName in this._Display.filtered
+      } else {
+        return branchName in this._Display.show
+      }
+    }
   }
 };
 </script>
 
 <style>
 .transition-move {
-  transition: all 1s;
+  transition-property: all; 
+  transition-duration: var(--duration);
 }
 </style>
\ No newline at end of file
diff --git a/components/VInterface.vue b/components/VInterface.vue
new file mode 100644
index 0000000..2245176
--- /dev/null
+++ b/components/VInterface.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="UI">
+    <div>
+      <label>Scale</label>
+      <input 
+        v-model="scale" type="range" min="20" max="80" 
+        @mousedown="setDuration(1)" 
+        @mousemove="setDuration(0)" 
+        @mouseleave="setDuration(1)"
+      />
+      <span>{{ _Display.scale }}</span>
+    </div>
+
+    <div>
+      <label>Display</label>
+      <input v-model="display" type="range" min="0" max="2" />
+      <span>{{ ['Paths', 'Turns', 'Time'][_Display.display] }}</span>
+    </div>
+
+    <CollapseState />
+
+    <Search/>
+
+  </div>
+</template>
+
+<script>
+import CollapseState from "~/components/UI/CollapseState.vue";
+import Search from "~/components/UI/Search.vue";
+
+export default {
+  components: {
+    CollapseState,
+    Search,
+  },
+  methods: {
+    setDuration(sec) {
+      this.$store.commit('set',{key:'scaling', value: sec})
+    }
+  },
+  computed: {
+    scale: {
+      get () {
+        return this._Display.scale
+      },
+      set (value) {
+        this.$store.commit('set', {key: "scale", value: value})
+      }
+    },
+    display: {
+      get () {
+        return this._Display.display
+      },
+      set (value) {
+        this.$store.commit('set', {key: "display", value: value})
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+*{
+  text-align: left;
+}
+
+.UI {
+ position: absolute;
+ z-index: 500;
+ /* * */
+ width: 300px;
+ height: 140px;
+ background-color: lightblue;
+ padding: 12px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+</style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 0b069e2..f785d9f 100755
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -29,8 +29,9 @@ html {
   min-height: 100vh;
   display: flex;
   justify-content: center;
-  align-items: center;
+  /* align-items: center; */
   text-align: center;
+  overflow: scroll;
 }
 
 .button--green {
diff --git a/pages/index.vue b/pages/index.vue
index cf9d8c3..ae7b9d1 100755
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,32 +1,36 @@
 <template>
   <div>
+    <VInterface/>
+<br><br>
     <div>
-      <label>Display</label>
-      <input v-model="$store.state.display" type="range" min="0" max="2" />
-      <span>{{ ['Paths', 'Turns', 'Time'][$store.state.display] }}</span>
+      <VGitGraph/>
+      <svg overflow="visible" v-if="+_Display.display===2">
+        <text v-for="(unix, index) in _Coords.timeSet" :key="unix"
+        x="0" :y="$store.getters.scaler(index)" dy="6" class="small"
+        > 
+          {{ new Date(unix*1000).toLocaleDateString("en-US") }}
+        </text>
+      </svg>
     </div>
-
-    <CollapseState/>
-
-    <div>
-      <label>Scale</label>
-      <input v-model="$store.state.scale" type="range" min="20" max="80" />
-      <span>{{ $store.state.scale }}</span>
-    </div>
-
-    <VGitGraph/>
-
+<br><br>
+    <p style="pointer-events: none;">
+      Scale: {{_Display.scale }} 
+      Scaling: {{_Display.scaling}} 
+      Display: {{_Display.display}}
+      {{_Coords.cache}}
+    </p>
   </div>
 </template>
 
 <script>
 import VGitGraph from "~/components/VGitGraph.vue";
-import CollapseState from "~/components/CollapseState.vue";
+import VInterface from "~/components/VInterface";
 
 export default {
   components: {
     VGitGraph,
-    CollapseState
+    VInterface
   },
 }
-</script>
+
+</script>
\ No newline at end of file
diff --git a/store/index.js b/store/index.js
index d7d1edc..a63f747 100755
--- a/store/index.js
+++ b/store/index.js
@@ -1,380 +1,29 @@
-export const strict = false;
-
-/* Due to the need of relative links when y-display changes, I need a key 
-to reference an event so i can get the coordinates.
-
-I have chosen "turn" to be the key, as globaly it is the most intuitive to 
-sort and search by. However, it doesnt make the methods any simpler...
-
-Alternative:
-I believe using "y" as the key would improve simplicity. I would lose the 
-x-override however, I would make this a dx key to shift from the xConst of 
-the branch:
-x=xConst
-path: {
-    y: {turn:0, dx:"if applicable", ...}
-}
-i'll play around with this as well later. 
-If i can figure out general coordinate functions/methods, this will be
-easier as json and that file are the only ones that need editing.
-perhaps a mixin? I think this makes sense.
-*/
-
-export const state = () => ({  
-  display: 0, 
-  scale: 50,
-  show: {},
-  displacement: {},
-  branches: {
-    "P1": {
-      x: [1],
-      children: ["P1.1"],
-      color:'#f00fff',
-      path: {
-        1: { y: 1, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { coord: [0, 0], type: "Path" } // hard link
-        },
-        5: { y: [1, 2], unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        8: { y: [1, 3], unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        11: { y: [0, 4], unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        14: { y: [0, 5], unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        }
-      },
-    },
-    "P1.1": {
-      x: [2, 1],
-      children: [],
-      color:'#000864',
-      path: {
-        8: { y: 3, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { coord: ["P1", 5], type: "Path" } // hard link
-        },
-        11: { y: [0, 4], unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        14: { y: [1,5], unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        17: { y: 6, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        }
-      }
-    },
-    "P0": {
-      x: [0],
-      children: ["P0.1", "P0.-1"],
-      color:'#6f0606',
-      path: {
-        0: { y: [0, 0], unix: 1569580240,
-          glyph: "Book", event: "url",
-          link: { }
-        },
-        5: { y: 1, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        8: { y: 2, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        11: { y: 3, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        14: { y: 4, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        }
-      },
-    },
-    "P0.1": {
-      x: [0, 1],
-      children: [],
-      color:'#000864',
-      path: {
-        8: { y: 4, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { coord: ["P0", 5], type: "Path" } // hard link
-        },
-        11: { y: 5, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        14: { y: 6, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        17: { y: 7, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        }
-      }
-    },
-    "P0.-1": {
-      x: [0, -1],
-      children: [],
-      color:'#000864',
-      path: {
-        8: { y: 4, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { coord: ["P0", 5], type: "Path" } // hard link
-        },
-        11: { y: 5, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        14: { y: 6, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        17: { y: 7, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        }
-      }
-    },
-    "P3": {
-      x: [-3],
-      children: ["P3.1"],
-      color:'#6f0fff',
-      path: {
-        1: { y: 2, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { coord: [0, 0], type: "Path" } // hard link
-        },
-        5: { y: 3, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        8: { y: 4, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        11: { y: 5, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        14: { y: 6, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        }
-      },
-    },
-    "P3.1": {
-      x: [-3, 1],
-      children: [],
-      color:'#000864',
-      path: {
-        8: { y: 4, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { coord: ["P3", 5], type: "Path" } // hard link
-        },
-        11: { y: 5, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        14: { y: 6, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        17: { y: 7, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        }
-      }
-    },
-    "P2": {
-      x: [3],
-      children: ["P2.-1", "P2.-2"],
-      color:'#6f0fff',
-      path: {
-        1: { y: 2, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { coord: [0, 0], type: "Path" } // hard link
-        },
-        5: { y: 3, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        8: { y: 4, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        11: { y: 5, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        14: { y: 6, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        }
-      },
-    },
-    "P2.-1": {
-      x: [3, -1],
-      children: ["P2.-1.-1"],
-      color:'#000864',
-      path: {
-        8: { y: 4, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { coord: ["P2", 5], type: "Path" } // hard link
-        },
-        11: { y: 5, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        14: { y: 6, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        17: { y: 7, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        }
-      }
-    },
-    "P2.-2": {
-      x: [3, -2],
-      children: [],
-      color:'#000864',
-      path: {
-        8: { y: 4, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { coord: ["P2", 5], type: "Path" } // hard link
-        },
-        11: { y: 5, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        14: { y: 6, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        17: { y: 7, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        }
-      }
-    },
-    "P2.-1.-1": {
-      x: [3, -1, -1],
-      children: [],
-      color:'#000864',
-      path: {
-        14: { y: 6, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { coord: ["P2.-1", 11], type: "Path" }
-        },
-        17: { y: 7, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        }
-      }
-    },
-    "GM": {
-      x: [-1],
-      children: ['GM2'],
-      color: '#008fb5',
-      path: {
-        /* 0: { y: [1, 0], unix: 1569580240,
-          glyph: "Book", event: "url",
-          link: { }
-        }, */
-        2: { y: 1, unix: 1569580240,
-          glyph: "", event: "url",
-          link: {coord:['P0', 0], type: "Path" }
-        },
-        4: { y: 2, unix: 1569580240,
-          glyph: "", event: "url",
-          link: { }
-        },
-        7: { y: 3, unix: 1569580240,
-          glyph: "", event: "url",
-          link: {coord:['P1', 11], type:"Dotted" } // relative link
-        },
-        13: { y: 5, unix: 1569580240,
-          glyph: "", event: "url",
-          link: {coord:['P1', 11], type:"Dotted" } // relative link
-        }
-      },
-    },
-    "GM2": {
-      x: [-2],
-      children: [],
-      color:'#0fb500',
-      path: {
-        3: { y: 2, unix: 1569580240,
-          glyph: "Dot", event: "url",
-          link: { coord: ['GM', 2], type: "Path" } // relative link
-        },
-        6: { y: 3, unix: 1569580240,
-          glyph: "Dot", event: "url",
-          link: { }
-        },
-        9: { y: 4, unix: 1569580240,
-          glyph: "Dot", event: "url",
-          link: { }
-        },
-        12: { y: 5, unix: 1569580240,
-          glyph: "Dot", event: "url",
-          link: { }
-        },
-        15: { y: 6, unix: 1569580240,
-          glyph: "Dot", event: "url",
-          link: { }
-        }
-      }
-    }
-  }
-});
-
 import Vue from "vue";
 import _ from "lodash";
 
-export const mutations = {
-  addVisible (state, key) { // show: {bName: x, ...}
-    for (var k of key) {
-      Vue.set(state.show, k, state.branches[k].x)
-    }
-  },
-  removeVisible (state, key) {
-    if (key in state.show) {
-      Vue.delete(state.show, key)
-    }
-  },
-  setVisible (state, keyArr) {
-    state.show = {} 
-    mutations.addVisible(state, keyArr)
-  },
-  dxCreate (state, payload) {	
-    state.displacement[payload.key] = payload.value	
-  }
-}
+// Root stuff
+import state from "./state.js"
+
+// Modules
+import Coordinates from "./modules/coordinates.js"
+import Display from "./modules/display.js"
+export const modules = {
+  Coordinates,
+  Display
+}  
+
+//export const strict = false;
 
 export const getters = {
+  // Init functions
   rootBranches: state => {
     var filtered = _.pickBy(state.branches, function(branch) {
       return branch.x.length===1;
     });
     return filtered
   }, 
-  compareX(arr1, arr2) { 
+  // Helper functions
+  compareX: () => (arr1, arr2) => { 
     const ln = Math.max(arr1.length, arr2.length)
     for(var i=0; i<ln; i++) {
       var sign = Math.sign(arr1[i]-arr2[i])
@@ -397,23 +46,23 @@ export const getters = {
       }
     }
   },
-  solveXDisp: (state) => (xConst) => {
-    const sign = getters.compareX(xConst, [0])
-    // Get prior Branches. (cant loop through just show as x is needed)
-    const xArr = _.pickBy(state.show, (x,k) => (
-      (!_.isEqual(xConst, [0]) && _.isEqual(x, [0])) || // shift all but 0 by 1
-      getters.compareX(x, [0]) === sign &&  //  +/- from [0]
-      getters.compareX(xConst, x) === sign  // prior branches closer to zero = sign
-    ))
-    // sum displacement of prior branches
-    const sum = _.sum(_.map(xArr, (v,k)=>sign * state.displacement[k]))
-    return sum
+  scaler: ( state, getters, rootGetters ) => (input, scale=state.Display.scale) => { // –> scale #s of any given input.
+    switch(input.constructor){
+      case Number:
+        return input * scale
+      case String:
+        return +input * scale
+      case Array:
+        if (input[0].constructor==Array){ // 2D
+          return input.map(xy => [xy[0]*scale, xy[1]*scale])
+        } else { // 1D
+          return input.map(el => el * scale)
+        }
+      case Object: // assuming {'C': [x1,y1, x2,y2, x,y]}
+        Object.keys(input).map(function(key, index) {
+          input[key] = input[key].map(el => el*scale)
+        })
+        return input
+    }
   },
-  maxDx: (state) => (key) => {
-    const path = state.branches[key].path
-    const dxArr = _.mapValues(path, function(o) { 
-        return o.y.length==2? Math.abs(o.y[0])+1:1
-      })
-    return _.max(_.values(dxArr))
-  }
 }
diff --git a/store/modules/coordinates.js b/store/modules/coordinates.js
new file mode 100644
index 0000000..90533e9
--- /dev/null
+++ b/store/modules/coordinates.js
@@ -0,0 +1,130 @@
+import Vue from "vue";
+import _ from "lodash";
+
+export default {
+  state() {
+    return {
+      cache: {},
+      timeSet: {},
+      displacement: {},
+    }
+  },
+
+  getters:{
+    pseudoZero: () => (displayObject, sign) => {
+      // not empty and seearch results.len > 1
+      if (_.keys(displayObject).length>1){ 
+        // if x=[0] is in displayObject
+        return '0' in _.invert(displayObject)? 0 : sign
+      } else {return 0}
+    },
+    solveXDisp: (state, getters, rootState, rootGetters) => (xConst) => {
+      const sign = rootGetters.compareX(xConst, [0])
+      // Get prior Branches. (cant loop through just show as x is needed)
+      var displayed = _.isEmpty(rootState.Display.filtered)?rootState.Display.show:rootState.Display.filtered
+      const xArr = _.pickBy(displayed, (x,k) => (
+        (!_.isEqual(xConst, [0]) && _.isEqual(x, [0])) || // shift all but 0 by 1
+        rootGetters.compareX(x, [0]) === sign &&  //  +/- from [0]
+        rootGetters.compareX(xConst, x) === sign  // prior branches closer to zero = sign
+      ))
+      // sum displacement of prior branches
+      const sum = _.sum(_.map(xArr, (v,k)=>sign * state.displacement[k]))
+      return sum + getters.pseudoZero(state.filtered, sign) // mod displacement for search results
+    },
+    maxDx: (state, getters, rootState) => (key) => {
+      const path = rootState.branches[key].path
+      const dxArr = _.mapValues(path, function(o) { 
+          return o.y.length==2? Math.abs(o.y[0])+1:1
+        })
+      return _.max(_.values(dxArr))
+    },
+    // Independant functions
+    getXDisp: ( state, getters, rootGetters ) =>  (xConst, action, xDisp) => { // –> # 
+      xConst = xConst.reduce((a, b) => a + b, 0) //children branches [1,2] x=0+dx of 2. etc
+      const y = action['y']
+      const dx = Array.isArray(y) ? y[0] : 0
+      return getters.scaler(xDisp+dx, 50)
+      // remove 50 so scale uniformly could make x&y scales... added to to-do
+    },
+    getYDisp: ( state, getters, rootState ) => (key, action) => { // –> #
+      switch(+rootState.Display.display) {
+        case 1:
+          return getters.scaler(+key)
+        case 2:
+          const yUnix = state.timeSet.indexOf(action.unix)
+          return getters.scaler(yUnix)
+        case 3:
+          // future cases
+        default:
+          const y = action['y']
+          const yDisp = Array.isArray(y) ? y[1] : y
+          return getters.scaler(yDisp)
+      }
+    },
+    // Dependent Functions
+    getXYDisp: ( state, getters, rootGetters ) => (key, xConst, xDisp, action) => { // –> [x, y] 
+      var xDisp = getters.getXDisp(xConst, action, xDisp)
+      var yDisp = getters.getYDisp(key, action)
+      return [xDisp, yDisp]
+    },
+    cacheCalc: ( state, getters, rootGetters ) => (bItems) =>{ // –> [[x, y], ...]
+      // necessary to cache between svg layers (psths, links, & glyphs).
+      const xConst = bItems.x
+      var xDisp = getters.solveXDisp(xConst)
+      const kvArr = Object.entries(bItems.path)
+      let output = Object.fromEntries( 
+                      // Path data should be an array, can revert to getDispPath() once implemented.
+                      kvArr.map(([k, v]) => [k, getters.getXYDisp(k, xConst, xDisp, v)])
+                   )
+      return output
+    },
+    // Relative Link Function
+    getLink: ( state, getters, rootState ) => (link) => {
+      if (Object.keys(rootState.branches).includes(link.coord[0])) {
+        // relative link - if given branch exists
+        var [branchName, event] = link.coord
+        var branch = rootState.branches[branchName]
+        var action = branch.path[event]
+        var xDisp = getters.solveXDisp(branch['x'])
+        var XYLink = getters.getXYDisp(event, branch['x'], xDisp, action)
+      } else {
+        // hard link
+        var XYLink = getters.scaler(link.coord)
+      }
+      return XYLink
+    },
+  },
+
+  mutations: {
+    dxCreate (state, payload) {	
+      state.displacement[payload.key] = payload.value	
+    },
+    updateBranch(state, payload) {
+      var display = payload.display
+      if (!(display in state.cache)) {
+        //init display cache if necessary
+        Vue.set(state.cache, display, {})
+      }
+      Vue.set(state.cache[display], payload.key, payload.val)
+    },
+    setTime(state, arr){
+      Vue.set(state, 'timeSet', arr)
+    }
+  },
+
+  actions: {
+    updateCache({ commit, getters, rootState }) {
+      for(let [key, bItems] of  Object.entries(rootState.branches)) {
+        var Payload = {key: key, val: getters.cacheCalc(bItems), display: rootState.Display.display }
+        commit('updateBranch', Payload)
+      }
+    },
+    initTimeArr({commit, state, rootState}) {
+      var timeArr = _.map(rootState.branches, (branch) => {
+        return _.map(branch.path, 'unix')
+      })
+      var timeSet = _.sortedUniq(_.flatten(timeArr).sort())
+      commit('setTime', timeSet)
+    },
+  }
+}
\ No newline at end of file
diff --git a/store/modules/display.js b/store/modules/display.js
new file mode 100644
index 0000000..0dff9fd
--- /dev/null
+++ b/store/modules/display.js
@@ -0,0 +1,52 @@
+import Vue from "vue";
+import _ from "lodash";
+
+export default {
+  state() {
+    return {
+      scale: 50,
+      scaling:1,
+      display: 0,
+      show: {},
+      filtered: false,
+    }
+  },
+
+  mutations: {
+    removeVisible(state, key) {
+      if (key in state.show) {
+        Vue.delete(state.show, key)
+      }
+    },
+    set(state, payload) {
+      Vue.set(state, payload.key, payload.value)
+      //state[payload.key] = payload.value;
+    },
+    show(state, payload) {
+      Vue.set(state.show, payload.key, payload.value)
+    },
+    filtered(state, payload) {
+      Vue.set(state.filtered, payload.key, payload.value)
+    }
+  },
+  
+  actions: {
+    setFiltered({commit, state, rootState}, keyArr) {
+      commit('set', {key: 'filtered', value: {}})
+      if (keyArr){
+        for (var k of keyArr) {
+          commit('filtered', {key: k, value: rootState.branches[k].x})
+        }
+      }
+    },
+    addVisible({commit, state, rootState}, key) { // show: {bName: x, ...}
+      for (var k of key) {
+        commit('show', {key: k, value: rootState.branches[k].x})
+      }
+    },
+    setVisible({commit, dispatch, state}, keyArr) {
+      commit('set', {key: 'show', value: {}})
+      dispatch('addVisible', keyArr)
+    },
+  }
+}
diff --git a/store/state.js b/store/state.js
new file mode 100644
index 0000000..5dc6463
--- /dev/null
+++ b/store/state.js
@@ -0,0 +1,339 @@
+/* Due to the need of relative links when y-display changes, I need a key 
+to reference an event so i can get the coordinates.
+
+I have chosen "turn" to be the key, as globaly it is the most intuitive to 
+sort and search by. However, it doesnt make the methods any simpler...
+
+Alternative:
+I believe using "y" as the key would improve simplicity. I would lose the 
+x-override however, I would make this a dx key to shift from the xConst of 
+the branch:
+x=xConst
+path: {
+    y: {turn:0, dx:"if applicable", ...}
+}
+i'll play around with this as well later. 
+If i can figure out general coordinate functions/methods, this will be
+easier as json and that file are the only ones that need editing.
+perhaps a mixin? I think this makes sense.
+*/
+export default () => ({
+    branches: {
+      "P1": {
+        x: [1],
+        children: ["P1.1"],
+        color:'#f00fff',
+        path: {
+          1: { y: 1, unix: 1568160000,
+            glyph: "", event: "url",
+            link: { coord: [0, 0], type: "Path" } // hard link
+          },
+          5: { y: [1, 2], unix: 1568505600,
+            glyph: "", event: "url",
+            link: { }
+          },
+          8: { y: [1, 3], unix: 1568764800,
+            glyph: "", event: "url",
+            link: { }
+          },
+          11: { y: [0, 4], unix: 1569024000,
+            glyph: "", event: "url",
+            link: { }
+          },
+          14: { y: [0, 5], unix: 1569283200,
+            glyph: "", event: "url",
+            link: { }
+          }
+        },
+      },
+      "P1.1": {
+        x: [2, 1],
+        children: [],
+        color:'#000864',
+        path: {
+          8: { y: 3, unix: 1568764800,
+            glyph: "", event: "url",
+            link: { coord: ["P1", 5], type: "Path" } // hard link
+          },
+          11: { y: [0, 4], unix: 1569024000,
+            glyph: "", event: "url",
+            link: { }
+          },
+          14: { y: [1,5], unix: 1569283200,
+            glyph: "", event: "url",
+            link: { }
+          },
+          17: { y: 6, unix: 1569542400,
+            glyph: "", event: "url",
+            link: { }
+          }
+        }
+      },
+      "P0": {
+        x: [0],
+        children: ["P0.1", "P0.-1"],
+        color:'#6f0606',
+        path: {
+          0: { y: [0, 0], unix: 1568073600,
+            glyph: "Book", event: "url",
+            link: { }
+          },
+          5: { y: 1, unix: 1568505600,
+            glyph: "", event: "url",
+            link: { }
+          },
+          8: { y: 2, unix: 1568764800,
+            glyph: "", event: "url",
+            link: { }
+          },
+          11: { y: 3, unix: 1569024000,
+            glyph: "", event: "url",
+            link: { }
+          },
+          14: { y: 4, unix: 1569283200,
+            glyph: "", event: "url",
+            link: { }
+          }
+        },
+      },
+      "P0.1": {
+        x: [0, 1],
+        children: [],
+        color:'#000864',
+        path: {
+          8: { y: 4, unix: 1568764800,
+            glyph: "", event: "url",
+            link: { coord: ["P0", 5], type: "Path" } // hard link
+          },
+          11: { y: 5, unix: 1569024000,
+            glyph: "", event: "url",
+            link: { }
+          },
+          14: { y: 6, unix: 1569283200,
+            glyph: "", event: "url",
+            link: { }
+          },
+          17: { y: 7, unix: 1569542400,
+            glyph: "", event: "url",
+            link: { }
+          }
+        }
+      },
+      "P0.-1": {
+        x: [0, -1],
+        children: [],
+        color:'#000864',
+        path: {
+          8: { y: 4, unix: 1568764800,
+            glyph: "", event: "url",
+            link: { coord: ["P0", 5], type: "Path" } // hard link
+          },
+          11: { y: 5, unix: 1569024000,
+            glyph: "", event: "url",
+            link: { }
+          },
+          14: { y: 6, unix: 1569283200,
+            glyph: "", event: "url",
+            link: { }
+          },
+          17: { y: 7, unix: 1569542400,
+            glyph: "", event: "url",
+            link: { }
+          }
+        }
+      },
+      "P3": {
+        x: [-3],
+        children: ["P3.1"],
+        color:'#6f0fff',
+        path: {
+          1: { y: 2, unix: 1568160000,
+            glyph: "", event: "url",
+            link: { coord: [0, 0], type: "Path" } // hard link
+          },
+          5: { y: 3, unix: 1568505600,
+            glyph: "", event: "url",
+            link: { }
+          },
+          8: { y: 4, unix: 1568764800,
+            glyph: "", event: "url",
+            link: { }
+          },
+          11: { y: 5, unix: 1569024000,
+            glyph: "", event: "url",
+            link: { }
+          },
+          14: { y: 6, unix: 1569283200,
+            glyph: "", event: "url",
+            link: { }
+          }
+        },
+      },
+      "P3.1": {
+        x: [-3, 1],
+        children: [],
+        color:'#000864',
+        path: {
+          8: { y: 4, unix: 1568764800,
+            glyph: "", event: "url",
+            link: { coord: ["P3", 5], type: "Path" } // hard link
+          },
+          11: { y: 5, unix: 1569024000,
+            glyph: "", event: "url",
+            link: { }
+          },
+          14: { y: 6, unix: 1569283200,
+            glyph: "", event: "url",
+            link: { }
+          },
+          17: { y: 7, unix: 1569542400,
+            glyph: "", event: "url",
+            link: { }
+          }
+        }
+      },
+      "P2": {
+        x: [3],
+        children: ["P2.-1", "P2.-2"],
+        color:'#6f0fff',
+        path: {
+          1: { y: 2, unix: 1568160000,
+            glyph: "", event: "url",
+            link: { coord: [0, 0], type: "Path" } // hard link
+          },
+          5: { y: 3, unix: 1568505600,
+            glyph: "", event: "url",
+            link: { }
+          },
+          8: { y: 4, unix: 1568764800,
+            glyph: "", event: "url",
+            link: { }
+          },
+          11: { y: 5, unix: 1569024000,
+            glyph: "", event: "url",
+            link: { }
+          },
+          14: { y: 6, unix: 1569283200,
+            glyph: "", event: "url",
+            link: { }
+          }
+        },
+      },
+      "P2.-1": {
+        x: [3, -1],
+        children: ["P2.-1.-1"],
+        color:'#000864',
+        path: {
+          8: { y: 4, unix: 1568764800,
+            glyph: "", event: "url",
+            link: { coord: ["P2", 5], type: "Path" } // hard link
+          },
+          11: { y: 5, unix: 1569024000,
+            glyph: "", event: "url",
+            link: { }
+          },
+          14: { y: 6, unix: 1569283200,
+            glyph: "", event: "url",
+            link: { }
+          },
+          17: { y: 7, unix: 1569542400,
+            glyph: "", event: "url",
+            link: { }
+          }
+        }
+      },
+      "P2.-2": {
+        x: [3, -2],
+        children: [],
+        color:'#000864',
+        path: {
+          8: { y: 4, unix: 1568764800,
+            glyph: "", event: "url",
+            link: { coord: ["P2", 5], type: "Path" } // hard link
+          },
+          11: { y: 5, unix: 1569024000,
+            glyph: "", event: "url",
+            link: { }
+          },
+          14: { y: 6, unix: 1569283200,
+            glyph: "", event: "url",
+            link: { }
+          },
+          17: { y: 7, unix: 1569542400,
+            glyph: "", event: "url",
+            link: { }
+          }
+        }
+      },
+      "P2.-1.-1": {
+        x: [3, -1, -1],
+        children: [],
+        color:'#000864',
+        path: {
+          14: { y: 6, unix: 1569283200,
+            glyph: "", event: "url",
+            link: { coord: ["P2.-1", 11], type: "Path" }
+          },
+          17: { y: 7, unix: 1569542400,
+            glyph: "", event: "url",
+            link: { }
+          }
+        }
+      },
+      "GM": {
+        x: [-1],
+        children: ['GM2'],
+        color: '#008fb5',
+        path: {
+          /* 0: { y: [1, 0], unix: 1569580240,
+            glyph: "Book", event: "url",
+            link: { }
+          }, */
+          2: { y: 1, unix: 1568246400,
+            glyph: "", event: "url",
+            link: {coord:['P0', 0], type: "Path" }
+          },
+          4: { y: 2, unix: 1568419200,
+            glyph: "", event: "url",
+            link: { }
+          },
+          7: { y: 3, unix: 1568678400,
+            glyph: "", event: "url",
+            link: {coord:['P1', 11], type:"Dotted" } // relative link
+          },
+          13: { y: 5, unix: 1569196800,
+            glyph: "", event: "url",
+            link: {coord:['P1', 11], type:"Dotted" } // relative link
+          }
+        },
+      },
+      "GM2": {
+        x: [-2],
+        children: [],
+        color:'#0fb500',
+        path: {
+          3: { y: 2, unix: 1568332800,
+            glyph: "Dot", event: "url",
+            link: { coord: ['GM', 2], type: "Path" } // relative link
+          },
+          6: { y: 3, unix: 1568592000,
+            glyph: "Dot", event: "url",
+            link: { }
+          },
+          9: { y: 4, unix: 1568851200,
+            glyph: "Dot", event: "url",
+            link: { }
+          },
+          12: { y: 5, unix: 1569110400,
+            glyph: "Dot", event: "url",
+            link: { }
+          },
+          15: { y: 6, unix: 1569369600,
+            glyph: "Dot", event: "url",
+            link: { }
+          }
+        }
+      }
+    }
+  }
+)
\ No newline at end of file
diff --git a/store/storeRoute.js b/store/storeRoute.js
index 39aebb0..4f884dd 100755
--- a/store/storeRoute.js
+++ b/store/storeRoute.js
@@ -2,8 +2,14 @@ import Vue from "vue";
 
 Vue.mixin({
   computed: {
-    _$() {
+    _Branches() {
       return this.$store.state.branches;
+    },
+    _Display() {
+      return this.$store.state.Display;
+    },
+    _Coords() {
+      return this.$store.state.Coordinates;
     }
   }
 });