Add tag on click

music_graph/src/MusicGraph.js

@@ -144,10 +144,6 @@ export function MusicGraph(data) {
             n.node.id === d.id)
 
         this.node.classed('hover', n => n.id === d.id)
-
-        if (d.type === 'Group' || d.type === 'Artist') {
-            this._data.hoverArtist = d
-        }
     }
 
     this.nodeOut = () => {
@@ -296,6 +292,17 @@ export function MusicGraph(data) {
         d3.event.preventDefault()
     }
 
+    this.nodeClick = (d) => {
+        if (d.type === 'Group' || d.type === 'Artist') {
+            // Toggle artistInfo
+            if (this._data.hoverArtist === d) {
+                this._data.hoverArtist = undefined
+            } else {
+                this._data.hoverArtist = d
+            }
+        }
+    }
+
     this.addNode = function (newNode, relations) {
         // Convert {id, id} relation to {node, node}
         if (this.nodeById.has(newNode.id)) {
@@ -446,8 +453,8 @@ export function MusicGraph(data) {
                 .on('end', this.dragEnded))
             .on('mouseover', this.nodeHover)
             .on('mouseout', this.nodeOut)
-            .on('dblclick', this.nodeDbClick)
             .on('contextmenu', this.nodeDbClick)
+            .on('click', this.nodeClick)
 
         // Add new labels
         this.label = this.container.select('#labels')
@@ -505,6 +512,16 @@ export function MusicGraph(data) {
             })
     }
 
+    this.addTagById = function(tagid) {
+        if (this.nodeById.has(tagid)) {
+            return
+        }
+        this.api.getRelatedByTag(tagid)
+            .then(data => {
+                this.addNode(data.node, data.relations)
+            })
+    }
+
     this.simulation.stop()
 
     this.simulation.on('tick', () => {

music_graph/src/MusicGraphApi.js

@@ -2,7 +2,7 @@ import * as d3 from 'd3'
 import {genres} from './genres'
 
 const IGNORE_DATES_TAG = true
-const ONLY_GENRE_TAGS = true
+const ONLY_GENRE_TAGS = false
 
 const nodeUtils = {
     getNodeType: function (labels) {
@@ -144,6 +144,21 @@ export function MusicGraphApi() {
             })
     }
 
+    this.getRelatedByTag = function(tagid) {
+        return d3.json(this.url + '/tag/related/' + tagid)
+            .then((r) => {
+                return {
+                    node: nodeUtils.fromRawDict({
+                        labels: ['Tag'],
+                        id: r.tag.id,
+                        name: r.tag.name
+                    }),
+                    newNodes: r.artists.map(nodeUtils.fromRawDict),
+                    relations: r.relations
+                }
+            })
+    }
+
     this.getReleaseDetails = function (mbid, originId) {
         return d3.json(this.url + '/release/details/' + mbid)
             .then((r) => {

music_graph/src/components/ArtistInfo.vue

@@ -18,6 +18,9 @@
                 <el-tag
                     v-for="tag in artistInfo.tags"
                     v-bind:key="tag.id"
+                    v-bind:type="tag.type"
+                    v-on:click="onTagClick(tag.id)"
+                    title="Add tag to graph"
                     size="small"
                 >{{tag.name}}
                 </el-tag>
@@ -29,6 +32,7 @@
 <script>
 import AlbumCarousel from './AlbumCarousel'
 import {MusicGraphApi} from '../MusicGraphApi'
+import {genres} from '../genres'
 
 export default {
     name: 'ArtistInfo',
@@ -36,8 +40,10 @@ export default {
     props: ['artist'],
     watch: {
         artist: function (a) {
+            if (a !== undefined) {
                 this.reloadInfo(a)
             }
+        }
     },
     data() {
         return {
@@ -54,8 +60,14 @@ export default {
                     this.artistInfo = info
                     this.artistInfo.releases = this.artistInfo.releases.filter(r =>
                         r.labels.indexOf('Album') !== -1 || r.labels.indexOf('EP') !== -1)
-                    this.artistInfo.tags = info.tags.sort((a, b) => b.weight - a.weight).splice(0, 6)
+                    this.artistInfo.tags = info.tags.sort((a, b) => b.weight - a.weight).splice(0, 6).map(t => {
+                        t.type = genres.has(t.name) ? '' : 'info'
+                        return t
                     })
+                })
+        },
+        onTagClick: function(tag) {
+            this.$emit('addTag', tag)
         }
     }
 }
@@ -84,6 +96,11 @@ export default {
     .el-tag {
         margin-left: 4px;
         margin-bottom: 4px;
+        cursor: pointer;
+    }
+
+    .el-tag:hover {
+        text-decoration: underline;
     }
 
     .year {

music_graph/src/components/HelloWorld.vue

@@ -2,7 +2,10 @@
     <div>
         <div id="mm"></div>
         <InputBar v-on:query="onQuery($event)"></InputBar>
-        <ArtistInfo v-bind:artist="hoverArtist"/>
+        <ArtistInfo
+            v-bind:artist="hoverArtist"
+            v-on:addTag="onAddTag($event)"
+        />
         <canvas id="textMeasurementCanvas"></canvas>
     </div>
 </template>
@@ -25,6 +28,9 @@ export default {
     methods: {
         onQuery: function (e) {
             this.mm.addArtistByMbid(e)
+        },
+        onAddTag: function(e) {
+            this.mm.addTagById(e)
         }
     },
     mounted() {