Backend for Heat Map

client/js/genre.js

@@ -3,12 +3,13 @@
  * and displays on youtube-genre.html
  */
 
-const genreBlock = document.getElementById('genres');
 
 /**
  * fetches genre count hashmap from /api/youtube and updates html
  */
 async function displayMusicGenre() {
+  const genreBlock = document.getElementById('genres');
+
   // keep track of num_videos in URL w/o reload
   history.pushState('', '', `youtube-genre.html`);
 
@@ -21,4 +22,3 @@ async function displayMusicGenre() {
   const genreCount = await response.text();
   genreBlock.innerHTML = genreCount;
 }
-

client/youtube-genre.html

@@ -15,6 +15,7 @@ <h1>What music do you listen to on youtube?</h1>
           <input type="submit" onclick="displayMusicGenre()"/>
         </p>
       </div>
+      <div id='genres'></div>
     </div>
     <main>
       <div class='hero'>

server/src/main/java/com/google/musicanalysis/site/YoutubeGenres.java

@@ -4,6 +4,7 @@
 import com.google.gson.JsonObject;
 import com.google.gson.JsonArray;
 import com.google.gson.Gson;
+import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.Map;
 import java.lang.Math;
@@ -22,6 +23,9 @@ public class YoutubeGenres {
   public HashMap<String, Integer> genreData = new HashMap<String, Integer>();
   public int totalMusic = 0;
   public int maxGenreCount = 0;
+  // element of value x means xth latest video is music
+  // needed for heat map
+  public ArrayList<Integer> likedMusicHistory = new ArrayList<Integer>();
 
   public YoutubeGenres() {
 
@@ -31,9 +35,12 @@ public YoutubeGenres() {
  * parses through youtube liked videos json array,
  * updates hash map to contain frequency count of each music genre
  * @param videos json array of youtube liked videos
+ * @param firstVideoCount the number of videos retrieved before this http call
+ * @return number of videos retrieved in this call
  */
-  protected void calculateMusicCount(JsonArray videos) {
-    for (int i = 0; i < videos.size(); i++) {
+  protected int calculateMusicCount(JsonArray videos, int firstVideoCount) {
+    int videosSize = videos.size();
+    for (int i = 0; i < videosSize; i++) {
         JsonObject video = videos.get(i).getAsJsonObject();
         JsonObject topicDetails = video.getAsJsonObject("topicDetails");
 
@@ -68,12 +75,17 @@ protected void calculateMusicCount(JsonArray videos) {
             }
         }
 
-        if (isMusic && totalSubgenres == 0) {
+        if (isMusic) {
+          // likedMusicHistory records video numbers that are music
+          likedMusicHistory.add(firstVideoCount + i);
+
+          if (totalSubgenres == 0) {
             // video only classified as Music so we update as "Other music"
-            this.updateGenre("Other music");
+            this.updateGenre("Other music");            
+          }
         }
     }
-    return;
+    return videosSize;
   }
 
 /**

server/src/main/java/com/google/musicanalysis/site/YoutubeServlet.java

@@ -96,9 +96,13 @@ protected void doGet(HttpServletRequest req, HttpServletResponse res)
         JsonObject likedVideoRes;
         JsonArray videos;
         YoutubeGenres genreAnalysis = new YoutubeGenres();
+        // needed to keep track of likedMusicHistory for heat map
+        int videosRetrieved = 0;
 
         // next Page Token must be an empty string for first http call
         String nextPageToken = "";
+        // Make multiple paginated calls to youtube API. 
+        // Each call has a new page token
         while (nextPageToken != null) {
             youtubeResBody = getYoutubeRes(API_KEY, 
                                             accessToken.toString(), 
@@ -111,7 +115,9 @@ protected void doGet(HttpServletRequest req, HttpServletResponse res)
             }
 
             videos = likedVideoRes.getAsJsonArray("items");
-            genreAnalysis.calculateMusicCount(videos);
+            // videosRetrieved keeps track of music video order in genreAnalysis
+            videosRetrieved += genreAnalysis
+                                .calculateMusicCount(videos, videosRetrieved);
 
             nextPageToken = getNextPageToken(likedVideoRes);
         }