feat: hover to display node properties

docs/.vuepress/config.js

@@ -9,17 +9,17 @@ module.exports = {
         color: d => {
           switch(true) {
             case d.regularPath.includes('/House Stark/'):
-              return 'rgb(109, 110, 113)';
+              return '#98999C';
             case d.regularPath.includes('/House Targaryen/'):
-              return 'rgb(224, 102, 104)';
+              return '#E06668';
             case d.regularPath.includes('/House Baratheon/'):
-              return 'rgb(153, 135, 123)';
+              return '#A39388';
             case d.regularPath.includes('/House Tyrell/'):
-              return 'rgb(235, 152, 63)';
+              return '#EB983F';
             case d.regularPath.includes('/House Lannister/'):
-              return 'rgb(233, 201, 102)';
+              return '#E9C966';
             case d.regularPath.includes('/House Tully/'):
-              return 'rgb(87, 181, 194)';
+              return '#57B5C2';
             default: return '#C28229';
           }
         }

lib/CatalogGraph.vue → lib/components/CatalogGraph.vue

@@ -1,20 +1,32 @@
 <template>
   <div class='catalog-graph'>
+    <div class='property-box'>
+      <template v-if="currentNode">
+        <PropertyTag :style='tagStyle'
+          v-for="(property, index) in nodeProperties"
+            :key="index"
+            :tag-key="property.name"
+            :tag-value="property.value">
+        </PropertyTag>
+      </template>
+    </div>
+
     <svg class='catalog-graph-svg'></svg>
   </div>
 </template>
 
 <script>
 import * as d3 from 'd3'
 import merge from 'lodash/merge'
-import GraphTree from './graph/GraphTree'
-import fallback from './graph/fallback'
+import GraphTree from '../graph/GraphTree'
+import fallback from '../graph/fallback'
 
 export default {
   name: 'catalog-graph',
   data() {
     return {
-      options: fallback
+      options: fallback,
+      currentNode: null
     }
   },
   props: {
@@ -67,7 +79,7 @@ export default {
   },
   methods: {
     // don't quite understand, but it adds the simulation to drag and drop events
-    drag: function(simulation) {
+    drag(simulation) {
       function dragstarted(d) {
         if (!d3.event.active) simulation.alphaTarget(0.3).restart();
         d.fx = d.x;
@@ -90,7 +102,7 @@ export default {
         .on('drag', dragged)
         .on('end', dragended);
     },
-    initSimulation: function(nodes, links, width, height) {
+    initSimulation(nodes, links, width, height) {
       const simulation = d3.forceSimulation(nodes)
         // a force for each relationship
         .force('link', d3.forceLink(links).id(node => node.id))
@@ -101,7 +113,7 @@ export default {
 
       return simulation;
     },
-    initNodes: function(svg, options, nodes) {
+    initNodes(svg, options, nodes) {
       return svg.append('g')
           .attr('stroke', options.borderColor)
           .attr('stroke-width', options.borderWidth)
@@ -111,7 +123,7 @@ export default {
           .attr('r', options.radius)
           .attr('fill', options.color);
     },
-    initLines: function(svg, options, links) {
+    initLines(svg, options, links) {
       return svg.append('g')
           .attr('stroke', options.color)
           .attr('stroke-opacity', options.opacity)
@@ -120,14 +132,49 @@ export default {
         .join('line')
           .attr('stroke-width', options.width);
     },
-    nodeEnhance: function(nodeElements, options, simulation) {
+    nodeEnhance(nodeElements, options, simulation) {
 
       nodeElements.append('title').text(options.title);
 
+      nodeElements.on('mouseenter', d => this.currentNode = d );
+
+      nodeElements.on('mouseleave', d => this.currentNode = null );
+
       nodeElements.on('dblclick', d => options.dblclick(d, this.$router));
 
       nodeElements.call(this.drag(simulation));
     }
+  },
+  computed: {
+    nodeProperties() {
+      const node = this.currentNode;
+      let properties = [{name: 'title', value: node.title}];
+
+      if(node.frontmatter.hasOwnProperty('catalogGraph')) {
+        for(let graphProperty of node.frontmatter['catalogGraph']) {
+          for (let [key, value] of Object.entries(graphProperty)) {
+            if(key === 'target') {
+              const tmp = value.split('/');
+              if(value.endsWith('html')) value = tmp[tmp.length - 1].split('.')[0]
+              else value = tmp[tmp.length - 2];
+            }
+            properties.push({name: key, value: value});
+          }
+        }
+      }
+      return properties;
+    },
+    tagStyle() {
+      return {
+        '--property-tag-color': this.options.node.color(this.currentNode)
+      }
+    }
   }
 }
 </script>
+
+<style scoped>
+.property-box{
+  height: 3rem;
+}
+</style>

lib/components/PropertyTag.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="property-tag">
+    <b>{{ tagKey }}</b>: {{ tagValue }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'property-tag',
+  props: {
+    tagKey: [String, Number],
+    tagValue: [String, Number]
+  }
+}
+</script>
+
+<style scoped>
+.property-tag {
+  font-size: 0.9rem;
+  border: 1px solid rgb(100, 100, 100);
+  background-color: var(--property-tag-color);
+  width: fit-content;
+  padding: 5px 10px;
+  display: inline-block;
+  margin-right: 5px;
+  margin-top: 5px;
+}
+</style>

lib/enhanceAppFile.js

@@ -1,5 +1,7 @@
-import CatalogGraph from './CatalogGraph.vue'
+import CatalogGraph from './components/CatalogGraph.vue'
+import PropertyTag from './components/PropertyTag.vue'
 
 export default ({ Vue }) => {
   Vue.component('CatalogGraph', CatalogGraph);
+  Vue.component('PropertyTag', PropertyTag);
 }