UI tweaks

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) {

music_graph/src/components/AboutPage.vue

@@ -1,7 +1,7 @@
 <template>
     <el-main>
         <span>This is the about page</span>
-        <object data="/static/diagram.svg" type="image/svg+xml"></object>
+        <object data="/static/data.svg" type="image/svg+xml"></object>
     </el-main>
 </template>
 

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;

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;
     }
 

music_graph/src/components/InputBar.vue

@@ -10,7 +10,7 @@
         >
             <template slot-scope="{ item }">
                 <div class="value" v-bind:class="{tag: item.type === 'tag'}">{{ item.value }} <span class="year"
-                                                           v-if="item.year">[{{item.year}}]</span>
+                                                                                                    v-if="item.year">[{{item.year}}]</span>
                     <span v-if="item.type === 'tag'" class="year">[tag]</span>
                 </div>
                 <span class="comment" v-if="item.comment">{{ item.comment }}</span>
@@ -77,12 +77,20 @@ export default {
     .inline-input {
         width: 50%;
     }
+
+    @media only screen and (max-width: 600px) {
+        .inline-input {
+            width: 80%;
+        }
+    }
+
     .comment {
         color: #919ba3;
         margin-top: -0.8em;
         padding-left: 0.3em;
         display: block;
     }
+
     .year {
         color: #828c94;
         font-size: 85%;

music_graph/src/components/Watermark.vue

@@ -15,7 +15,7 @@ export default {
     #watermark {
         position: fixed;
         top: calc(100% - 30px);
-        left: 1%;
+        left: 20px;
         pointer-events: none;
         color: rgba(0,0,0,0.67);
         font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;