Autocomplete artist names

music_graph/.eslintrc.js

@@ -30,5 +30,6 @@ module.exports = {
         "no-underscore-dangle": 0,
         "no-trailing-spaces": 0,
         "space-before-function-paren": 0,
+        "standard/no-callback-literal": 0,
     }
 };

music_graph/src/MusicGraph.js

@@ -498,8 +498,8 @@ export function MusicGraph(data) {
         return null
     }
 
-    this.addArtistByName = function (name) {
+    this.addArtistByMbid = function (mbid) {
-        this.api.getRelatedByName(name)
+        this.api.getRelatedByMbid(mbid)
             .then(data => {
                 this.addNode(data.node, data.relations)
             })

music_graph/src/MusicGraphApi.js

@@ -63,18 +63,6 @@ export function MusicGraphApi() {
         return d3.json(this.url + '/artist/details/' + mbid)
     }
 
-    this.getRelatedByName = function (name) {
-        return d3.json(this.url + '/artist/related_by_name/' + name.replace(/ /g, '+'))
-            .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.getGroupMembers = function (mbid, originId) {
         return d3.json(this.url + '/artist/members/' + mbid)
             .then((r) => {
@@ -149,6 +137,7 @@ export function MusicGraphApi() {
         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
                 }
@@ -172,4 +161,11 @@ export function MusicGraphApi() {
                 }
             })
     }
+
+    this.autoComplete = function (prefix) {
+        prefix = prefix.replace(/[^\w.\-!?& ]/g, '_').toUpperCase()
+        prefix = prefix.replace(/ /g, '+')
+
+        return d3.json(this.url + '/artist/autocomplete/' + prefix)
+    }
 }

music_graph/src/components/HelloWorld.vue

@@ -24,13 +24,11 @@ export default {
     },
     methods: {
         onQuery: function (e) {
-            console.log(e)
+            this.mm.addArtistByMbid(e)
-            this.mm.addArtistByName(e)
         }
     },
     mounted() {
         this.mm = new MusicGraph(data)
-        this.mm.addArtistByName('Tool')
     }
 }
 </script>

music_graph/src/components/InputBar.vue

@@ -1,33 +1,62 @@
 <template>
     <div class="bar-wrapper">
-        <el-input
+        <el-autocomplete
+            class="inline-input"
             v-model="query"
-            @keyup.enter.native="onSubmit"
+            :fetch-suggestions="fetchSuggestions"
             placeholder="Add nodes"
-        ></el-input>
+            :trigger-on-focus="false"
+            @select="onSubmit"
+        >
+            <template slot-scope="{ item }">
+                <div class="value" >{{ item.value }} <span class="year"
+                                                           v-if="item.year !== 0">[{{item.year}}]</span></div>
+                <span class="comment" v-if="item.comment">{{ item.comment }}</span>
+            </template>
+        </el-autocomplete>
     </div>
 </template>
 
 <script>
 import * as _ from 'lodash'
+import {MusicGraphApi} from '../MusicGraphApi'
 
 export default {
     name: 'InputBar',
     data: () => {
         return {
-            query: ''
+            query: '',
+            api: new MusicGraphApi()
         }
     },
     watch: {
         query: _.debounce(function () {
-            // todo: autocomplete
+            if (this.query.length >= 3) {
-
+                this.api.autoComplete(this.query)
-        }, 125)
+            }
+        }, 500)
     },
     methods: {
-        onSubmit: function () {
+        onSubmit: function (artist) {
-            this.$emit('query', this.query)
+            this.$emit('query', artist.mbid)
             this.query = ''
+        },
+        fetchSuggestions: function (query, callback) {
+            if (this.query.length >= 3) {
+                this.api.autoComplete(query)
+                    .then(data => {
+                        callback(data.artists.map(a => {
+                            return {
+                                'value': a.name,
+                                'year': a.year,
+                                'comment': a.comment,
+                                'mbid': a.mbid
+                            }
+                        }))
+                    })
+            } else {
+                callback([])
+            }
         }
     }
 }
@@ -39,7 +68,19 @@ export default {
         padding: 2em 0;
     }
 
-    .el-input {
+    .inline-input {
         width: 50%;
     }
+    .comment {
+        color: #919ba3;
+        margin-top: -0.8em;
+        padding-left: 0.3em;
+        display: block;
+    }
+    .year {
+        color: #828c94;
+        font-size: 85%;
+        margin-left: 0.1em;
+        vertical-align: top;
+    }
 </style>