diff --git a/music_graph/src/MusicGraph.js b/music_graph/src/MusicGraph.js
index 6f631ee..100e0ef 100644
--- a/music_graph/src/MusicGraph.js
+++ b/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', () => {
diff --git a/music_graph/src/MusicGraphApi.js b/music_graph/src/MusicGraphApi.js
index 9fb8164..570279f 100644
--- a/music_graph/src/MusicGraphApi.js
+++ b/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) => {
diff --git a/music_graph/src/components/ArtistInfo.vue b/music_graph/src/components/ArtistInfo.vue
index 3c4891b..b01f8b6 100644
--- a/music_graph/src/components/ArtistInfo.vue
+++ b/music_graph/src/components/ArtistInfo.vue
@@ -18,6 +18,9 @@
{{tag.name}}
@@ -29,6 +32,7 @@