mirror of
https://github.com/simon987/music-graph-ui.git
synced 2025-04-20 02:16:42 +00:00
Bug fix
This commit is contained in:
parent
701ee44618
commit
bd5c6d5b77
@ -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 => {
|
||||||
|
@ -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)),
|
||||||
|
Loading…
x
Reference in New Issue
Block a user