small refactor

music_graph/src/MusicGraph.js

@@ -1,18 +1,6 @@
 import * as d3 from 'd3'
 import icons from './icons'
-
+import {MusicGraphApi} from './MusicGraphApi'
-export const nodeUtils = {
-    getNodeType: function (labels) {
-        if (labels.find(l => l === 'Tag')) {
-            return 'Tag'
-        } else if (labels.find(l => l === 'Group')) {
-            return 'Group'
-        } else if (labels.find(l => l === 'Artist')) {
-            return 'Artist'
-        }
-        return undefined
-    }
-}
 
 // TODO: export somewhere else
 const arc = function (radius, itemNumber, itemCount, width) {
@@ -39,11 +27,14 @@ export function MusicGraph(data) {
     this.nodes = []
     this.links = []
     this._originSet = false
+    this.api = new MusicGraphApi()
 
-    this.svg = d3.select('#mm')
+    this.simulation = d3.forceSimulation()
-        .append('svg')
+        .force('charge', d3.forceManyBody())
-        .attr('width', width)
+        .force('collide', d3.forceCollide()
-        .attr('height', height)
+            .radius(50)
+            .strength(1))
+        .force('center', d3.forceCenter(width / 2, height / 2))
 
     this.zoomed = () => {
         this.container.attr('transform', d3.event.transform)
@@ -52,10 +43,17 @@ export function MusicGraph(data) {
     this.dismiss = () => {
         this.menu.remove()
         this.nodes.forEach(d => {
+            d.fx = null
+            d.fy = null
             d.menu = null
         })
     }
 
+    this.svg = d3.select('#mm')
+        .append('svg')
+        .attr('width', width)
+        .attr('height', height)
+
     this.svg.append('rect')
         .attr('width', width)
         .attr('height', height)
@@ -74,16 +72,15 @@ export function MusicGraph(data) {
 
     this.container = this.svg.append('g').attr('id', 'container')
 
-    this.container.append('g')
+    this.container.append('g').attr('id', 'links')
-        .attr('id', 'links')
+    this.container.append('g').attr('id', 'nodes')
-    this.container.append('g')
+    this.container.append('g').attr('id', 'labels')
-        .attr('id', 'nodes')
+    this.container.append('g').attr('id', 'menu')
-    this.container.append('g')
-        .attr('id', 'labels')
-    this.container.append('g')
-        .attr('id', 'menu')
 
     this.dragStarted = (d) => {
+        if (d.menu) {
+            return
+        }
         if (!d3.event.active) {
             this.simulation.alphaTarget(0.3).restart()
         }
@@ -92,6 +89,9 @@ export function MusicGraph(data) {
     }
 
     this.dragged = (d) => {
+        if (d.menu) {
+            return
+        }
         d.fx = d3.event.x
         d.fy = d3.event.y
     }
@@ -147,17 +147,8 @@ export function MusicGraph(data) {
         this.node.classed('hover', false)
     }
 
-    this.nodeDbClick = (d) => {
+    this.makeMenu = function (d) {
-        if (d.menu) {
+        // Todo global const?
-            return
-        }
-
-        this.svg.classed('menu-mode', true)
-        d.menu = true
-
-        // TODO: Move this somewhere else V V V
-        d.fx = d.x
-        d.fy = d.y
         const items = [
             {idx: 0, icon: icons.expand},
             {idx: 1, icon: icons.release},
@@ -201,33 +192,23 @@ export function MusicGraph(data) {
                 ${57 * Math.cos(2 * Math.PI * d.idx / items.length + angleOffset) - 10},
                  ${57 * Math.sin(2 * Math.PI * d.idx / items.length + angleOffset) - 10})`
             )
-        // ^ ^ ^
-
-        d3.event.preventDefault()
     }
 
-    this.simulation = d3.forceSimulation()
+    this.nodeDbClick = (d) => {
-        .force('charge', d3.forceManyBody())
+        if (d.menu) {
-        .force('collide', d3.forceCollide()
+            return
-            .radius(50)
+        }
-            .strength(1))
-        .force('center', d3.forceCenter(width / 2, height / 2))
 
-    this.simulation.stop()
+        this.svg.classed('menu-mode', true)
+        d.menu = true
 
-    this.simulation.on('tick', () => {
+        // todo: unfreeze node on dismiss
-        this.link
+        d.fx = d.x
-            .attr('x1', d => d.source.x)
+        d.fy = d.y
-            .attr('y1', d => d.source.y)
+
-            .attr('x2', d => d.target.x)
+        this.makeMenu(d)
-            .attr('y2', d => d.target.y)
+        d3.event.preventDefault()
-        this.node
+    }
-            .attr('cx', d => d.x)
-            .attr('cy', d => d.y)
-        this.label
-            .attr('x', d => d.x)
-            .attr('y', d => d.y)
-    })
 
     this.addNode = function (newNode, relations) {
         // Convert {id, id} relation to {node, node}
@@ -300,6 +281,7 @@ export function MusicGraph(data) {
         this.links.push(...linksToAdd)
 
         if (!this._originSet && originId) {
+            this.originArtist = this.nodeById.get(originId)
             this._setOrigin()
             this._originSet = true
         }
@@ -307,9 +289,6 @@ export function MusicGraph(data) {
         this._update()
     }
 
-    /**
-     * Remove nodes from the graph
-     */
     this.removeNodes = function (idsToRemove) {
         let idSetToRemove = new Set(idsToRemove)
 
@@ -431,45 +410,35 @@ export function MusicGraph(data) {
     }
 
     this.expandArtist = function (mbid) {
-        // todo use http client
+        this.api.getRelatedByMbid(mbid)
-        d3.json('http://localhost:3030/artist/related/' + mbid)
+            .then(data => {
-            .then((r) => {
+                this.addNodes(data.newNodes, data.relations, data.node.id)
-                this.originArtist = r.artists.find(a => a.mbid === mbid)
-
-                const nodes = r.artists.map((row) => {
-                    return {
-                        id: row.id,
-                        mbid: row.mbid,
-                        name: row.name,
-                        listeners: row.listeners,
-                        type: nodeUtils.getNodeType(row.labels),
-                        sourceLinks: new Set(),
-                        targetLinks: new Set()
-                    }
-                })
-
-                this.addNodes(nodes, r.relations, this.originArtist.id)
             })
     }
 
     this.addArtistByName = function (name) {
-        // todo use http client
+        this.api.getRelatedByName(name)
-        d3.json('http://localhost:3030/artist/related_by_name/' + name)
+            .then(data => {
-            .then((r) => {
+                this.addNode(data.node, data.relations)
-                const node = r.artists.find(a => a.name === name)
-
-                this.addNode({
-                    id: node.id,
-                    mbid: node.mbid,
-                    name: node.name,
-                    listeners: node.listeners,
-                    type: nodeUtils.getNodeType(node.labels),
-                    sourceLinks: new Set(),
-                    targetLinks: new Set()
-                }, r.relations)
             })
     }
 
+    this.simulation.stop()
+
+    this.simulation.on('tick', () => {
+        this.link
+            .attr('x1', d => d.source.x)
+            .attr('y1', d => d.source.y)
+            .attr('x2', d => d.target.x)
+            .attr('y2', d => d.target.y)
+        this.node
+            .attr('cx', d => d.x)
+            .attr('cy', d => d.y)
+        this.label
+            .attr('x', d => d.x)
+            .attr('y', d => d.y + 5)
+    })
+
     this._update()
     this.setupKeyBindings()
 }

music_graph/src/MusicGraphApi.js

@@ -1,5 +1,62 @@
+import * as d3 from 'd3'
 
-export default function MusicGraphApi() {
+const nodeUtils = {
-    let a = 0
+    getNodeType: function (labels) {
-    console.log(a)
+        if (labels.find(l => l === 'Tag')) {
+            return 'Tag'
+        } else if (labels.find(l => l === 'Group')) {
+            return 'Group'
+        } else if (labels.find(l => l === 'Artist')) {
+            return 'Artist'
+        }
+        return undefined
+    },
+    fromRawDict: function (data) {
+        return {
+            id: data.id,
+            mbid: data.mbid,
+            name: data.name,
+            listeners: data.listeners,
+            type: nodeUtils.getNodeType(data.labels),
+            sourceLinks: new Set(),
+            targetLinks: new Set()
+        }
+    }
+}
+
+export function MusicGraphApi() {
+    this.url = window.location.protocol + '//' + window.location.hostname + '/api'
+    // TODO: rmv
+    this.url = 'http://localhost:3030'
+
+    this.resolveCoverUrl = function(mbid) {
+        return this.url + '/cover/' + mbid
+    }
+
+    this.getArtistDetails = function(mbid) {
+        return d3.json(this.url + '/artist/details/' + mbid)
+    }
+
+    this.getRelatedByName = function (name) {
+        return d3.json(this.url + '/artist/related_by_name/' + name)
+            .then((r) => {
+                return {
+                    node: nodeUtils.fromRawDict(r.artists.find(a => a.name === name)),
+                    // TODO: newNodes is always ignored, remove this?
+                    newNodes: r.artists.map(nodeUtils.fromRawDict),
+                    relations: r.relations
+                }
+            })
+    }
+
+    this.getRelatedByMbid = function (mbid) {
+        return d3.json(this.url + '/artist/related/' + mbid)
+            .then((r) => {
+                return {
+                    node: nodeUtils.fromRawDict(r.artists.find(a => a.mbid === mbid)),
+                    newNodes: r.artists.map(nodeUtils.fromRawDict),
+                    relations: r.relations
+                }
+            })
+    }
 }

music_graph/src/components/AlbumCarousel.vue

@@ -10,7 +10,7 @@
                     alt=""
                     width="128"
                     height="128"
-                    v-bind:src="'http://localhost:3030/cover/' + release.mbid"
+                    v-bind:src="api.resolveCoverUrl(release.mbid)"
                 >
                 <figcaption>{{release.name}} ({{release.year}})</figcaption>
             </figure>
@@ -19,16 +19,17 @@
 </template>
 
 <script>
-let data = {
+import {MusicGraphApi} from '../MusicGraphApi'
-    current: '',
-    index: 0
-}
 
 export default {
     name: 'AlbumCarousel',
     props: ['releases', 'interval'],
     data() {
-        return data
+        return {
+            api: new MusicGraphApi(),
+            current: '',
+            index: 0
+        }
     },
     mounted() {
         setInterval(() => {
@@ -37,17 +38,17 @@ export default {
     },
     watch: {
         releases: () => {
-            data.index = 0
+            this.index = 0
         }
     },
     methods: {
         tick() {
-            if (data.index === this.releases.length - 1) {
+            if (this.index === this.releases.length - 1) {
-                data.index = 0
+                this.index = 0
             }
 
-            data.index += 1
+            this.index += 1
-            data.current = this.releases[data.index].mbid
+            this.current = this.releases[this.index].mbid
         }
     }
 }

music_graph/src/components/ArtistInfo.vue

@@ -7,41 +7,41 @@
             <AlbumCarousel
                 style="float: left"
                 v-bind:releases="artistInfo.releases"
-                interval="750" />
+                interval="750"/>
             <span>Listeners: {{artist.listeners}}</span>
         </div>
     </el-card>
 </template>
 
 <script>
-import Vue from 'vue'
 import AlbumCarousel from './AlbumCarousel'
-
+import {MusicGraphApi} from '../MusicGraphApi'
-let data = {
-    artistInfo: {
-        releases: []
-    }
-}
-
-function reloadInfo(artist) {
-    Vue.http.get('http://localhost:3030/artist/details/' + artist.mbid)
-        .then(response => {
-            response.json().then(info => {
-                data.artistInfo = info
-                data.artistInfo.releases = data.artistInfo.releases.slice(0, 2)
-            })
-        })
-}
 
 export default {
     name: 'ArtistInfo',
     components: {AlbumCarousel},
     props: ['artist'],
     watch: {
-        artist: reloadInfo
+        artist: function (a) {
+            this.reloadInfo(a)
+        }
     },
     data() {
-        return data
+        return {
+            artistInfo: {
+                releases: []
+            },
+            api: new MusicGraphApi()
+        }
+    },
+    methods: {
+        reloadInfo: function (artist) {
+            this.api.getArtistDetails(artist.mbid)
+                .then(info => {
+                    this.artistInfo = info
+                    this.artistInfo.releases = this.artistInfo.releases.slice(0, 2)
+                })
+        }
     }
 }
 </script>