Minor refactoring and updates

README.md

@@ -1,7 +1,6 @@
 # music-graph-ui
 
 [![CodeFactor](https://www.codefactor.io/repository/github/simon987/music-graph-ui/badge)](https://www.codefactor.io/repository/github/simon987/music-graph-ui)
-[![Build Status](https://ci.simon987.net/buildStatus/icon?job=music_graph)](https://ci.simon987.net/job/music_graph/)
 
 ![demo](demo.png)
 

jenkins/Jenkinsfile

@@ -1,46 +0,0 @@
-def remote = [:]
-remote.name = 'remote'
-remote.host = env.DEPLOY_HOST
-remote.user = env.DEPLOY_USER
-remote.identityFile = '/var/lib/jenkins/.ssh/id_rsa'
-remote.knownHosts = '/var/lib/jenkins/.ssh/known_hosts'
-remote.allowAnyHosts = true
-remote.retryCount = 3
-remote.retryWaitSec = 3
-remote.port = 2299
-logLevel = 'FINER'
-
-pipeline {
-    agent none
-    environment {
-        HOME='.'
-    }
-    stages {
-        stage('Build') {
-            agent {
-                docker {
-                    image 'node:10-alpine'
-                    args '--network "host"'
-                }
-            }
-            steps {
-                sh 'cd music_graph/ && npm install && npm run build'
-                sh 'mv music_graph/dist webroot'
-                stash includes: 'webroot/', name: 'webdist'
-            }
-        }
-        stage('Deploy') {
-            agent none
-            steps {
-                node('master') {
-                    unstash 'webdist'
-                    sshCommand remote: remote, command: "cd /srv/music-graph && rm -rf /srv/webroot/* deploy.sh"
-                    sshPut remote: remote, from: 'webroot/', into: '/srv/music-graph'
-                    sshPut remote: remote, from: 'jenkins/deploy.sh', into: '/srv/music-graph/'
-                    sshCommand remote: remote, command: 'chmod +x /srv/music-graph/deploy.sh && /srv/music-graph/deploy.sh'
-                }
-            }
-        }
-    }
-}
-

jenkins/build.sh

@@ -1 +0,0 @@
-#!/usr/bin/env bash

jenkins/deploy.sh

@@ -1,5 +0,0 @@
-#!/usr/bin/env bash
-
-export MGROOT="/srv/music-graph"
-
-chmod 755 -R "${MGROOT}/webroot"

music_graph/package.json

@@ -1,8 +1,8 @@
 {
     "name": "music_graph",
-    "version": "1.0.0",
-    "description": "wip",
-    "author": "simon987 <>",
+    "version": "1.1.0",
+    "description": "Mobile-friendly frontend UI for music-graph ",
+    "author": "simon987 <me@simon987.net>",
     "private": true,
     "scripts": {
         "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
@@ -11,11 +11,11 @@
         "build": "node build/build.js"
     },
     "dependencies": {
-        "d3": "^5.9.7",
+        "d3": "^5.16.0",
         "d3-force": "^2.0.1",
-        "d3-path": "^1.0.7",
-        "element-ui": "^2.10.1",
-        "lodash": "^4.17.14",
+        "d3-path": "^1.0.9",
+        "element-ui": "^2.13.2",
+        "lodash": "^4.17.15",
         "vue": "^2.6.10",
         "vue-resource": "^1.5.1",
         "vue-router": "^3.0.7"

music_graph/src/App.vue

@@ -11,11 +11,11 @@ export default {
 </script>
 
 <style>
-    body {
-        padding: 0;
-        margin: 0;
-    }
+body {
+    padding: 0;
+    margin: 0;
+}
 
-    #app {
-    }
+#app {
+}
 </style>

music_graph/src/MusicGraph.js

@@ -1,6 +1,7 @@
 import * as d3 from 'd3'
 import icons from './icons'
 import {fitCaptionIntoCircle} from './graphGeometry'
+import config from './graphConfig'
 
 // TODO: export somewhere else
 const arc = function (radius, itemNumber, itemCount, width) {
@@ -40,7 +41,7 @@ export function MusicGraph(data) {
 
     this.nodeById = new Map()
     this.expandedNodes = new Set()
-    this.graphSize = 0
+    this.nodeCount = 0
     this.nodes = []
     this.links = []
     this._originSet = false
@@ -90,7 +91,7 @@ export function MusicGraph(data) {
         .classed('pan-rect', true)
         .style('fill', 'none')
         .call(d3.zoom()
-            .scaleExtent([1 / 10, 5])
+            .scaleExtent(config.scaleExtent)
             .on('zoom', this.zoomed)
         )
         .on('click', this.dismiss)
@@ -108,7 +109,7 @@ export function MusicGraph(data) {
             return
         }
         if (!d3.event.active) {
-            this.simulation.alphaTarget(0.3).restart()
+            this.simulation.alphaTarget(config.initialAlphaTarget).restart()
         }
         d.fx = d.x
         d.fy = d.y
@@ -426,16 +427,8 @@ export function MusicGraph(data) {
             }
         }
 
-        if (nodesToAdd.length > 0) {
-            this.graphSize++
-        }
-        if (nodesToAdd.length > 100) {
-            // That's a lot of nodes, increase spacing
-            this.graphSize++
-        }
-        if (nodesToAdd.length > 200) {
-            this.graphSize++
-        }
+        this.nodeCount += nodesToAdd.length
+
         this.nodes.push(...nodesToAdd)
         this.links.push(...linksToAdd)
 
@@ -481,7 +474,7 @@ export function MusicGraph(data) {
             this.nodeById.delete(id)
             if (this.expandedNodes.has(id)) {
                 this.expandedNodes.delete(id)
-                this.graphSize--
+                this.nodeCount--
             }
             if (this._data.hoverArtist && id === this._data.hoverArtist.id) {
                 this._data.hoverArtist = undefined
@@ -489,6 +482,8 @@ export function MusicGraph(data) {
         })
         this.nodes = this.nodes.filter(d => !idSetToRemove.has(d.id))
 
+        this.nodeCount -= idSetToRemove.size
+
         this._update()
     }
 
@@ -497,11 +492,11 @@ export function MusicGraph(data) {
         this.simulation
             .force('link', d3.forceLink(this.links)
                 .id(d => d.id)
-                .strength(l => l.weight)
-                .distance(d => (1.12 / d.weight) * 30 * (this.graphSize))
+                .strength(d => config.linkStrength(d, this.nodeCount))
+                .distance(d => config.linkDistance(d, this.nodeCount))
             )
 
-        this.simulation.alphaTarget(0.03).restart()
+        this.simulation.alphaTarget(config.restartAlphaTarget).restart()
 
         // Add new links
         this.link = this.container.select('#links')
@@ -584,7 +579,6 @@ export function MusicGraph(data) {
 
         // Remember that we expanded origin node
         this.expandedNodes.add(this.originNode.id)
-        this.graphSize++
     }
 
     this._getNodeColor = function (node) {

music_graph/src/graphConfig.js

@@ -0,0 +1,31 @@
+let GRAPH_SIZE_FACTOR = 0.3
+let INITIAL_DISTANCE = 50
+
+window.addEventListener('keydown', e => {
+    if (e.key === 'ArrowUp') {
+        // GRAPH_SIZE_FACTOR += 0.1
+        INITIAL_DISTANCE += 10
+    }
+
+    if (e.key === 'ArrowDown') {
+        INITIAL_DISTANCE -= 10
+    }
+    console.log(INITIAL_DISTANCE)
+})
+
+export default {
+    scaleExtent: [1 / 10, 5],
+    initialAlphaTarget: 0.3,
+    restartAlphaTarget: 0.03,
+    linkStrength: (link, totalNodeCount) => {
+        // https://github.com/d3/d3-force#link_strength
+        const sourceNeighbors = link.source.sourceLinks.size + link.source.targetLinks.size
+        const targetNeighbors = link.target.sourceLinks.size + link.target.targetLinks.size
+        const weight = link.weight
+        return Math.min(weight, 0.9) / (Math.min(sourceNeighbors, targetNeighbors))
+    },
+
+    linkDistance: (link, totalNodeCount) => {
+        return (1 / link.weight) * INITIAL_DISTANCE + (totalNodeCount * GRAPH_SIZE_FACTOR)
+    }
+}