This commit is contained in:
simon 2019-05-25 10:50:58 -04:00
parent 701ee44618
commit bd5c6d5b77
2 changed files with 17 additions and 27 deletions

View File

@ -113,10 +113,9 @@ export function MusicGraph(data) {
} }
this.nodeHover = (d) => { this.nodeHover = (d) => {
this._data.hoverArtist = d
let srcLinks = this.links.filter(link => link.source.id === d.id) let srcLinks = this.links.filter(link => link.source.id === d.id)
let targetLinks = this.links.filter(link => link.target.id === d.id) let targetLinks = this.links.filter(link => link.target.id === d.id)
this._data.hoverLinks = srcLinks.map(l => { this._data.hoverLinks = srcLinks.map(l => {
return { return {
match: (l.weight * 100).toFixed(2) + '%', match: (l.weight * 100).toFixed(2) + '%',
@ -144,6 +143,10 @@ export function MusicGraph(data) {
n.id === d.id) n.id === d.id)
this.node.classed('hover', n => n.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 = () => { this.nodeOut = () => {
@ -155,11 +158,11 @@ export function MusicGraph(data) {
} }
this.makeMenu = function (d) { this.makeMenu = function (d) {
// Todo global const? let items = []
const items = [] let i = 0
if (!d.membersExpanded) { if (!d.membersExpanded) {
items.push({ items.push({
idx: 3, idx: i++,
icon: icons.guitar, icon: icons.guitar,
title: 'Members', title: 'Members',
fn: (d) => { fn: (d) => {
@ -173,7 +176,7 @@ export function MusicGraph(data) {
} }
if (!d.relatedExpanded) { if (!d.relatedExpanded) {
items.push({ items.push({
idx: 0, idx: i++,
icon: icons.expand, icon: icons.expand,
title: 'Related', title: 'Related',
fn: (d) => { fn: (d) => {
@ -191,7 +194,7 @@ export function MusicGraph(data) {
} }
if (!d.releasesExpanded) { if (!d.releasesExpanded) {
items.push({ items.push({
idx: 1, idx: i++,
icon: icons.release, icon: icons.release,
title: 'Releases', title: 'Releases',
fn: (d) => { fn: (d) => {
@ -208,7 +211,7 @@ export function MusicGraph(data) {
} }
if (!d.tagsExpanded) { if (!d.tagsExpanded) {
items.push({ items.push({
idx: 2, idx: i++,
icon: icons.hash, icon: icons.hash,
title: 'Tags', title: 'Tags',
fn: (d) => { fn: (d) => {
@ -224,7 +227,7 @@ export function MusicGraph(data) {
}) })
} }
items.push({ items.push({
idx: 4, idx: i,
icon: icons.delete, icon: icons.delete,
title: 'Remove from graph', title: 'Remove from graph',
fn: (d) => { fn: (d) => {
@ -415,8 +418,8 @@ export function MusicGraph(data) {
this.link = this.link this.link = this.link
.enter() .enter()
.append('line') .append('line')
.classed('link', true)
.merge(this.link) .merge(this.link)
.classed('link', true)
// Add new nodes // Add new nodes
this.node = this.container.select('#nodes') this.node = this.container.select('#nodes')
@ -427,6 +430,7 @@ export function MusicGraph(data) {
this.node = this.node this.node = this.node
.enter() .enter()
.append('circle') .append('circle')
.merge(this.node)
.classed('node', true) .classed('node', true)
.attr('r', d => d.radius) .attr('r', d => d.radius)
.attr('stroke', d => this._getNodeColor(d)) .attr('stroke', d => this._getNodeColor(d))
@ -438,19 +442,18 @@ export function MusicGraph(data) {
.on('mouseout', this.nodeOut) .on('mouseout', this.nodeOut)
.on('dblclick', this.nodeDbClick) .on('dblclick', this.nodeDbClick)
.on('contextmenu', this.nodeDbClick) .on('contextmenu', this.nodeDbClick)
.merge(this.node)
// Add new labels // Add new labels
this.label = this.container.select('#labels') this.label = this.container.select('#labels')
.selectAll('.label') .selectAll('.label')
.data(this.nodes) .data(this.nodes)
this.label.exit().remove(0) this.label.exit().remove()
this.label = this.label this.label = this.label
.enter() .enter()
.append('text') .append('text')
.merge(this.label)
.text(d => d.name) .text(d => d.name)
.classed('label', true) .classed('label', true)
.merge(this.label)
} }
this.setupKeyBindings = function () { this.setupKeyBindings = function () {
@ -487,17 +490,6 @@ export function MusicGraph(data) {
return null return null
} }
this._getNodeRadius = function (node) {
// Unused
}
this.expandArtist = function (mbid) {
this.api.getRelatedByMbid(mbid)
.then(data => {
this.addNodes(data.newNodes, data.relations, data.node.id)
})
}
this.addArtistByName = function (name) { this.addArtistByName = function (name) {
this.api.getRelatedByName(name) this.api.getRelatedByName(name)
.then(data => { .then(data => {

View File

@ -59,8 +59,6 @@ const nodeUtils = {
export function MusicGraphApi() { export function MusicGraphApi() {
this.url = window.location.protocol + '//' + window.location.hostname + '/api' this.url = window.location.protocol + '//' + window.location.hostname + '/api'
// TODO: rmv
this.url = 'http://localhost:3030'
this.resolveCoverUrl = function (mbid) { this.resolveCoverUrl = function (mbid) {
return this.url + '/cover/' + mbid return this.url + '/cover/' + mbid
@ -71,7 +69,7 @@ export function MusicGraphApi() {
} }
this.getRelatedByName = function (name) { this.getRelatedByName = function (name) {
return d3.json(this.url + '/artist/related_by_name/' + name) return d3.json(this.url + '/artist/related_by_name/' + name.replace(/ /g, '+'))
.then((r) => { .then((r) => {
return { return {
node: nodeUtils.fromRawDict(r.artists.find(a => a.name === name)), node: nodeUtils.fromRawDict(r.artists.find(a => a.name === name)),