v0.10.5 - fixes #32

Merge branch 'dev'

Gruntfile.js

@@ -29,7 +29,7 @@ module.exports = function(grunt) {
     },
     watch: {
       files: ['Gruntfile.js', 'js/**/*.js', 'sass/*.scss', 'test/*.js'],
-      tasks: ['compass', 'jshint', 'jasmine']
+      tasks: ['compass', 'jshint']
     },
     useminPrepare: {
       html: 'index.html',

README.md

@@ -31,9 +31,9 @@ These are the contents of the script:
 ```sh
 $ mkdir ~/Spotify ; cd ~/Spotify
 $ rm -rf rama
-$ rm rama_v0.10.2.tar.gz
-$ curl https://github.com/carsy/rama-spotify/releases/download/v0.10.2/rama_v0.10.2.tar.gz
-$ tar -xvf rama_v0.10.2.tar.gz
+$ rm rama_v0.10.5.tar.gz
+$ curl https://github.com/carsy/rama-spotify/releases/download/v0.10.5/rama_v0.10.5.tar.gz
+$ tar -xvf rama_v0.10.5.tar.gz
 $ open spotify:app:rama
 ```
 
@@ -60,6 +60,9 @@ If not, restart Spotify and then open the app by typing spotify:app:rama in the
 [Releases]
 ----
 
+[v0.10.5] - GraphController bug fixes
+  - when data is updated, the graph does not re-render
+
 [v0.10.2] - Tags menu bug fixes
   - nodes inserted by expanding node were not being highlighted by tags
 
@@ -125,6 +128,7 @@ José Bateira
 [here]:https://github.com/carsy/rama-spotify/releases/latest
 [Releases]:https://github.com/carsy/rama-spotify/releases/latest
 [issues]:https://github.com/carsy/rama-spotify/issues
+[v0.10.5]:https://github.com/carsy/rama-spotify/releases/tag/v0.10.5
 [v0.10.2]:https://github.com/carsy/rama-spotify/releases/tag/v0.10.2
 [v0.10]:https://github.com/carsy/rama-spotify/releases/tag/v0.10
 [v0.9.1]:https://github.com/carsy/rama-spotify/releases/tag/v0.9.1

bower.json

@@ -21,7 +21,7 @@
   ],
   "dependencies": {
     "jquery": "^2.1.0",
-    "vis": "^0.7.0",
+    "vis": "^1.0.0",
     "normalize-css": "^3.0.0",
     "underscore": "^1.6.0",
     "mootools": "^1.4.5"

install.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-version="v0.10.2"
+version="v0.10.5"
 
 mkdir ~/Spotify ; cd ~/Spotify
 rm -rf rama-spotify

js/controllers/artistmenu.js

@@ -40,6 +40,7 @@ require([
         this.bindAllEvents();
       });
     },
+
     // Update the UI component given the newArtist parameter
     updateView: function(newArtist) {
       // if no parameter has been given or if it's the same artist
@@ -57,6 +58,8 @@ require([
         .done(this, this.updateInfo.bind(this));
 
       this.updateTags(this.artist);
+
+      this.updateControls(this.artist);
     },
     updateImage: function(artist) {
 
@@ -112,7 +115,7 @@ require([
 
       // albumsAdded - number of added albums
       // used to limit the number of albums added.
-      // sometimes the API returns null albums
+      // note: sometimes the API returns null albums
       for (var i = 0, albumsAdded = 0; i <= albumSnapshot.length &&
         albumsAdded < ArtistMenu.MAX_ALBUMS; ++i) {
         var albumgroup = albumSnapshot.get(i);
@@ -124,16 +127,19 @@ require([
             width: 50,
             height: 50,
             style: 'plain',
+            link: 'auto',
             player: true,
             placeholder: 'album',
-            link: 'auto',
             title: album.name
           });
 
+          // for each album create a DOM element
           var albumElement = document.createElement('span');
-          albumElement.className = 'artist-album artist-album-cover';
+          albumElement.className =
+            'artist-album artist-album-cover';
           albumElement.appendChild(albumImage.node);
 
+          // and append it to the albums wrapper
           jalbums.append(albumElement);
           albumsAdded++;
         }
@@ -146,7 +152,7 @@ require([
     updateTags: function(artist) {
       // Paul Lamere
       // http://developer.echonest.com/forums/thread/353
-      // Artist terms -> 
+      // Artist terms (tags) -> 
       //      what is the difference between weight and frequency
 
       // term frequency is directly proportional to how often 
@@ -178,181 +184,142 @@ require([
         url: url,
         context: this
       }).done(function(data) {
-        this.tags = data.response.terms;
 
+        // clear the displayed tags
         this.elements.tags.reset();
+        this.elements.tagsTitle.reset();
 
-        if (this.tags.length > 0) {
-          this.elements.tagsTitle.html('Tags: <br>');
+        // not a success response
+        if (data.response.status.code !== 0 ||
+          (data.response.terms && data.response.terms.length <= 0))
+          return;
 
-          for (var i = 0, tagsAdded = 0; i < this.tags.length &&
-            tagsAdded < ArtistMenu.MAX_TAGS; ++i) {
+        // the echonest's tags are called terms
+        this.tags = _.sortBy(data.response.terms
+          .splice(0, ArtistMenu.MAX_TAGS), 'name');
 
-            if (this.tags[i]) {
-              var tagElement = document.createElement('span');
-              tagElement.className = 'artist-tag';
-              tagElement.innerHTML = this.tags[i].name;
+        this.elements.tagsTitle.html('Tags: <br>');
 
-              this.elements.tags.jelement.append(tagElement);
-              tagsAdded++;
-            }
-          }
+        for (var i = 0, tagsAdded = 0; i < this.tags.length; ++i) {
+          // for each tag, create a DOM element
+          var tagElement = document.createElement('span');
+          tagElement.className = 'artist-tag';
+          tagElement.innerHTML = this.tags[i].name;
 
-          this.artist.tags = this.tags;
+          // and append it to the tags' wrapper
+          this.elements.tags.jelement.append(tagElement);
         }
 
+        this.artist.tags = this.tags;
+
       }).fail(function() {
         // Temporary fix for requests limit from echonest
         // just... don't show any tags.
-        $(this.selectors.tagsTitle).html('');
+        // Note: since the API key being used has request limits,
+        // sometimes the limit is reached very easily. If so
+        // don't show anything.
+        this.elements.tagsTitle.reset();
       });
-
-    },
-
-    // Events
-
-    bindAllEvents: function() {
-      models.player.addEventListener('change',
-        this.onPlayerChange.bind(this));
-
-      this.graphcontroller.addGraphEvent('click',
-        this.onClickNode.bind(this));
-
-      var controls = {
-        expand: 'onBtnExpandClick',
-        new: 'onBtnNewClick'
-      };
-
-      for (var control in controls) {
-        document.getElementById('control_' + control)
-          .onclick = this[controls[control]].bind(this);
-      }
-
     },
-    onClickNode: function(data) {
+    // control buttons update: shows/hides controls
+    // based on the artist
+    updateControls: function(artist) {
       var node = _.findWhere(
-        this.graphcontroller.artistGraph.data.nodes, {
-          id: parseInt(data.nodes[0])
+        this.graphcontroller.getData().nodes, {
+          label: artist.name
         });
 
-      if (!node || node.artist.uri === this.artist.uri)
+      // no node found for given artist.
+      // This means the artist is not on the graph.
+      if (!node) {
+        this.elements.controls.jelement.show();
+        this.elements.controlNew.jelement.show();
+        this.elements.controlExpand.jelement.hide();
         return;
-
-      if (node.id === 1) {
-        this.jelement.find(this.selectors.controls).hide();
-      } else {
-        $(this.selectors.control_new).show();
-        this.jelement.find(this.selectors.controls).show();
       }
 
-      if (node.isLeaf) {
-        this.jelement.find(this.selectors.control_expand).show();
-      } else {
-        this.jelement.find(this.selectors.control_expand).hide();
+      if (node.isRoot)
+      // if the node is root, hide all the controls
+        this.elements.controls.jelement.hide();
+      else {
+        // else show the new control
+        this.elements.controls.jelement.show();
+        this.elements.controlNew.jelement.show();
       }
 
-      this.updateView(node.artist);
+      // only show the expand control in leaf nodes
+      if (node.isLeaf)
+        this.elements.controlExpand.jelement.show();
+      else
+        this.elements.controlExpand.jelement.hide();
     },
-    onPlayerChange: function() {
-      models.player.load('track').done(this, function(player) {
 
-        var artist = models.Artist.fromURI(
-          models.player.track.artists[0].uri
-        );
+    // Events
+    bindAllEvents: function() {
+      // the artistmenu is always in sync with 
+      // the current playing track
+      models.player.addEventListener('change',
+        this.events.onPlayerChange.bind(this));
 
-        if ((this.artist && this.artist.uri === artist.uri) ||
-          models.player.track.advertisement) {
-          return;
-        }
+      // the artistmenu always updates when a new node
+      // as been selected
+      this.graphcontroller.addGraphEvent('click',
+        this.events.onClickNode.bind(this));
 
-        this.updateView(artist);
+      // Controls' Events
+      this.elements.controlExpand.addDOMEvent({
+        eventName: 'onclick',
+        handler: this.events.onBtnExpandClick,
+        context: this
+      });
 
-        this.jelement.find(this.selectors.controls).show();
-        this.jelement.find(this.selectors.control_new).show();
-        this.jelement.find(this.selectors.control_expand).hide();
+      this.elements.controlNew.addDOMEvent({
+        eventName: 'onclick',
+        handler: this.events.onBtnNewClick,
+        context: this
       });
     },
-    onBtnExpandClick: function(event) {
-      this.graphcontroller.showThrobber();
+    events: {
+      // onclick a graph node event
+      onClickNode: function(data) {
+        var node = _.findWhere(
+          this.graphcontroller.getData().nodes, {
+            id: parseInt(data.nodes[0])
+          });
 
-      var node = _.findWhere(
-        this.graphcontroller.artistGraph.data.nodes, {
-          id: this.artist.nodeid
-        });
+        if (!node)
+          return;
 
-      node.color = {
-        border: '#7fb701',
-        background: '#313336'
-      };
-      node.isLeaf = false;
-
-      this.artist.load('related').done(this, function(artist) {
-        var rootArtist = artist;
-        artist.related.snapshot(0,
-          this.graphcontroller.artistGraph.branching).done(this,
-          function(snapshot) {
-            snapshot.loadAll(['name', 'uri']).each(this, function(artist) {
-              var artistGraph = this.graphcontroller.artistGraph;
-
-              var duplicated = _.findWhere(artistGraph.data.nodes, {
-                label: artist.name
-              });
-
-              if (duplicated && artist.name !== rootArtist.name) {
-                var inverseEdgeExists = _.findWhere(artistGraph.data.edges, {
-                  from: duplicated.id,
-                  to: rootArtist.nodeid
-                });
-                var edgeExists = _.findWhere(artistGraph.data.edges, {
-                  to: duplicated.id,
-                  from: rootArtist.nodeid
-                });
-
-                if (!inverseEdgeExists && !edgeExists) {
-                  var extraEdge = {
-                    from: rootArtist.nodeid,
-                    to: duplicated.id,
-                  };
-
-                  artistGraph.extraEdges.push(extraEdge);
-
-                  if (!artistGraph.treemode)
-                    artistGraph.data.edges.push(extraEdge);
-                }
-              } else {
-                var nodeid = ++artistGraph.currentNodeId;
-
-                artistGraph.data.nodes.push({
-                  id: nodeid,
-                  label: artist.name,
-                  artist: artist,
-                  isLeaf: true
-                });
-
-                artistGraph.data.edges.push({
-                  from: rootArtist.nodeid,
-                  to: nodeid
-                });
-
-                artistGraph.relatedArtists.push(artist);
-
-                artist.nodeid = nodeid;
-              }
-            }).done(this, function() {
-
-              this.graphcontroller.artistGraph.drawGraph(true);
-            });
-          });
-      });
+        this.updateView(node.artist);
+      },
+      // on track change event
+      onPlayerChange: function() {
+        models.player.load('track').done(this, function(player) {
 
-      this.jelement.find(this.selectors.control_expand).hide();
-    },
-    onBtnNewClick: function(event) {
-      this.graphcontroller.setArtistGraph(this.artist);
-      this.jelement.find(this.selectors.control_new).hide();
-      this.jelement.find(this.selectors.control_delete).hide();
-    }
+          var artist = models.Artist.fromURI(
+            models.player.track.artists[0].uri
+          );
 
+          // ignore if it's the same artist or an ad is playing
+          if ((this.artist && this.artist.uri === artist.uri) ||
+            models.player.track.advertisement) {
+            return;
+          }
+
+          this.updateView(artist);
+        });
+      },
+      // Expand control button click event
+      onBtnExpandClick: function(event) {
+        this.graphcontroller.expandNode(this.artist);
+        this.elements.controlExpand.jelement.hide();
+      },
+      // New control button click event
+      onBtnNewClick: function(event) {
+        this.graphcontroller.newGraph(this.artist);
+        this.elements.controlNew.jelement.hide();
+      }
+    }
   });
 
   exports.artistmenu = ArtistMenu;