diff --git a/music_graph/src/MusicGraph.js b/music_graph/src/MusicGraph.js index a5cc702..27bd958 100644 --- a/music_graph/src/MusicGraph.js +++ b/music_graph/src/MusicGraph.js @@ -40,6 +40,7 @@ export function MusicGraph(data) { this.nodeById = new Map() this.expandedNodes = new Set() + this.graphSize = 0 this.nodes = [] this.links = [] this._originSet = false @@ -197,6 +198,7 @@ export function MusicGraph(data) { .then(data => { if (data.newNodes.length > 0) { this.expandedNodes.add(d.id) + this.graphSize++ this.addNodes(data.newNodes, data.relations, d.id) } }) @@ -428,6 +430,13 @@ export function MusicGraph(data) { } } + if (nodesToAdd.length > 100) { + // That's a lot of nodes, increase spacing + this.graphSize++ + } + if (nodesToAdd.length > 200) { + this.graphSize++ + } this.nodes.push(...nodesToAdd) this.links.push(...linksToAdd) @@ -471,7 +480,10 @@ export function MusicGraph(data) { // Remove nodes idSetToRemove.forEach(id => { this.nodeById.delete(id) - this.expandedNodes.delete(id) + if (this.expandedNodes.has(id)) { + this.expandedNodes.delete(id) + this.graphSize-- + } }) this.nodes = this.nodes.filter(d => !idSetToRemove.has(d.id)) @@ -484,7 +496,7 @@ export function MusicGraph(data) { .force('link', d3.forceLink(this.links) .id(d => d.id) .strength(l => l.weight) - .distance(d => (1.12 / d.weight) * 80 * (this.expandedNodes.size + 1)) + .distance(d => (1.12 / d.weight) * 80 * (this.graphSize)) ) this.simulation.alphaTarget(0.03).restart() @@ -550,6 +562,10 @@ export function MusicGraph(data) { this.svg.classed('pan-mode', false) } } + + document.body.onmouseleave = () => { + this.svg.classed('pan-mode', false) + } } this._setOrigin = function () { @@ -565,6 +581,7 @@ export function MusicGraph(data) { // Remember that we expanded origin node this.expandedNodes.add(this.originNode.id) + this.graphSize++ } this._getNodeColor = function (node) { diff --git a/music_graph/src/components/AboutPage.vue b/music_graph/src/components/AboutPage.vue index ca2afea..b15df35 100644 --- a/music_graph/src/components/AboutPage.vue +++ b/music_graph/src/components/AboutPage.vue @@ -1,7 +1,7 @@ diff --git a/music_graph/src/components/ArtistInfo.vue b/music_graph/src/components/ArtistInfo.vue index 307663b..953cc97 100644 --- a/music_graph/src/components/ArtistInfo.vue +++ b/music_graph/src/components/ArtistInfo.vue @@ -137,7 +137,7 @@ export default { #playing { position: fixed; top: calc(100% - 30px); - left: calc(1% + 12em); + left: calc(20px + 12em); pointer-events: none; color: rgba(255, 23, 68, 0.69); font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace; diff --git a/music_graph/src/components/HelloWorld.vue b/music_graph/src/components/HelloWorld.vue index 5fb0003..56a8c9c 100644 --- a/music_graph/src/components/HelloWorld.vue +++ b/music_graph/src/components/HelloWorld.vue @@ -99,7 +99,6 @@ export default { svg .link { stroke: #FFE082; pointer-events: none; - stroke-opacity: 0.3; stroke-width: 1; } diff --git a/music_graph/src/components/InputBar.vue b/music_graph/src/components/InputBar.vue index 3bf0731..f371e1c 100644 --- a/music_graph/src/components/InputBar.vue +++ b/music_graph/src/components/InputBar.vue @@ -10,7 +10,7 @@ >