unified search and menu

public/js/menu.js

@@ -10,14 +10,30 @@ class Menu{
 
         this.openIcon = '/muvin/images/open.svg';
         this.closeIcon = '/muvin/images/close.svg';
-
-        this.search = new Search()
-
     }
 
     init() {
         const _this = this;
-        this.search.init()
+        let eventSource;   
+
+        this.div.select("#nodes-input")
+            .on('keydown', () => eventSource = d3.event.key ? 'key' : 'list')
+            .on('input', function() {
+                if (eventSource === 'key') {
+                    if (this.value.length > 2) 
+                        _this.updateAutocomplete(this.value.toLowerCase())
+                } else _this.chart.data.add(this.value)
+            })
+
+
+        this.div.select('#items-input')
+            .on('keydown', () => eventSource = d3.event.key ? 'key' : 'list')
+            .on('input', function() {
+                if (eventSource === 'key') return;
+                _this.chart.nodes.highlightItem(this.value)
+            })
+
+        this.div.select('#items-input-clear').on('click', () => this.chart.nodes.clearHighlight())
 
         this.div.select('#toggle-best-of')
             .on('change', function() { _this.chart.toggleBestOf(this.checked) })
@@ -29,6 +45,7 @@ class Menu{
             .on('change', function() { 
                 _this.changeDataset(this.value)
              })
+
     }
 
     changeDataset(value) {
@@ -43,17 +60,47 @@ class Menu{
         this.chart.data.clear()
         this.chart.data.getNodesLabels(value)
     }
+
+    updateItemsSearch(data) {
+        this.data = data
+
+        let songNames = this.data.map(d => d.name)
+        songNames = songNames.filter((d,i) => songNames.indexOf(d) === i)
+        songNames.sort((a,b) => a.localeCompare(b))
+
+        d3.select(this.chart.shadowRoot.querySelector('#items-list'))
+            .selectAll('option')
+            .data(songNames)
+            .join(
+                enter => enter.append('option'),
+                update => update,
+                exit => exit.remove()
+            ).attr('value', d => d)
+
+    }
+
+    updateAutocomplete(value) {
+
+        let labels = this.chart.data.nodeLabels.filter(d => d.name.value.toLowerCase().includes(value))
+        labels.sort( (a,b) => a.name.value.localeCompare(b.name.value))
+
+        d3.select(this.chart.shadowRoot.querySelector('#nodes-list'))
+            .selectAll('option')
+            .data(labels)
+            .join(
+                enter => enter.append('option'),
+                update => update,
+                exit => exit.remove()
+            ).attr('value', d => d.name.value)
+
+    }
 
     displayViewSettings() {
         this.div.select('#view-controls').style('display', 'block')
-
-        this.div.select('#best-of').style('display', this.chart.getAttribute('wasabi') ? 'block' : 'none')
     }
 
     hideViewSettings() {
         this.div.select('#view-controls').style('display', 'none')
-
-        this.div.select('#best-of').style('display', 'none')
     }
 
     open() {

public/js/muvin.js

@@ -108,7 +108,7 @@ class Muvin extends HTMLElement {
 
         this.legend.update()
 
-        this.menu.search.update(this.data.items.filter(d => nodes.includes(d.artist.name)))
+        this.menu.updateItemsSearch(this.data.items.filter(d => nodes.includes(d.artist.name)))
 
         this.legend.update()
         this.xAxis.set()
@@ -549,14 +549,6 @@ template.innerHTML = `
                         <datalist id='items-list'></datalist>
                         <button id='items-input-clear'>Clear</button>
                     </div>
-                    <table>
-                        <tr id="best-of" style="display: none;">
-                            <td><input type="checkbox" id="toggle-best-of"></td>
-                            <td>Display Best-Of Albums</td>
-                            <td><img src="/muvin/images/info.svg"  width="15" height="15" class="info-icon" title="By default, only the original discography of artists is displayed.\nCheck this box to show all production.">
-                            </img></td>
-                        </tr>
-                    </table>
                 </div>
             </div>
         </div>

public/js/nodes.js

@@ -194,4 +194,43 @@ class NodesGroup {
             .attr('opacity', d => this.opacity(d) )
             .attr('stroke-width', 1)
     }
+
+    highlightItem(name){
+        let packGroups = d3.selectAll(this.chart.shadowRoot.querySelectorAll('.item-circle'))
+            .filter(d => this.opacity(d) ? true : false)
+
+        let selection = packGroups.filter(d => d.name === name)
+
+        if (selection.size()) {
+            let data = []
+            selection.each(function() {
+                let d = d3.select(this).datum()
+
+                data.push({
+                    cx: d.x,
+                    cy: d.y,
+                    r: d.r 
+                })
+            })   
+
+            d3.select(this.chart.shadowRoot.querySelector('#chart-group'))
+                .selectAll('.highlight')
+                .data(data)
+                .join(
+                    enter => enter.append('circle')
+                        .attr('fill', 'none')
+                        .classed('highlight high-item', true),
+                    update => update,
+                    exit => exit.remove()
+                )
+                .attrs(d => d)
+        } else {
+            d3.selectAll(this.chart.shadowRoot.querySelectorAll('.highlight')).classed('high-item', false)
+        }
+    }
+
+    clearHighlight() {
+        this.chart.shadowRoot.querySelector('#items-input').value = '';
+        this.highlightItem('')
+    }
 }

views/index.ejs

@@ -22,7 +22,6 @@
     <script src="/muvin/js/dataModel.js"></script>
     <script src="/muvin/js/timeaxis.js"></script>
     <script src="/muvin/js/nodesaxis.js"></script>
-    <script src="/muvin/js/search.js"></script>
     <script src="/muvin/js/profile.js"></script>
     <script src="/muvin/js/links.js"></script>
     <script src="/muvin/js/node-links.js"></script>