Heat Map with Backend Data

client/js/genre.js

@@ -1,24 +1,23 @@
 /**
- * fetches youtube api calls from YoutubeServlet.java
+ * @file fetches youtube api calls from YoutubeServlet.java
  * and displays on youtube-genre.html
  */
 
 
 /**
- * fetches genre count hashmap from /api/youtube and updates html
+ * fetches and returns genre analysis object from /api/youtube
+ *
+ * @returns {Promise<object>} obj containing Youtube genre data and stats
  */
-async function displayMusicGenre() {
-  const genreBlock = document.getElementById('genres');
-
-  // keep track of num_videos in URL w/o reload
-  history.pushState('', '', `youtube-genre.html`);
-
-  const response = await fetch(`/api/youtube`);
+async function fetchMusicGenre() {
+  const response = await fetch('/api/youtube');
   if (response.status == 401) {
     // no oauth login so redirect to new page
     window.open('/api/oauth/login/youtube');
   }
 
   const genreCount = await response.text();
-  genreBlock.innerHTML = genreCount;
+  return JSON.parse(genreCount);
 }
+
+export const GENRE_ANALYSIS_PROMISE = fetchMusicGenre();

client/js/heat.js

@@ -1,3 +1,5 @@
+import {GENRE_ANALYSIS} from '/js/genre.js';
+
 class HeatMapRow {
   /**
    * format for a row for heat map values obj
@@ -35,28 +37,26 @@ function makeBinaryArr(arr, total) {
 /**
  * turns array of data into heat map
  * @param {number[]} data array of all 0s/1s heat map data
- * @param {number} dataLength size of data array
  * @returns {HeatMapRow[]} square matrix of HeatMapValues for HeatMap
  */
-function createHeatMapValues(data, dataLength) {
+function createHeatMapValues(data) {
   // heat map should have equal length and width
-  const numRows = Math.ceil(Math.sqrt(dataLength));
+  const numRows = Math.ceil(Math.sqrt(data.length));
 
   const heatMapValues = [];
-  for (let i = 0; i < dataLength; i += numRows) {
+  for (let i = 0; i < data.length; i += numRows) {
     heatMapValues.push(new HeatMapRow(data.slice(i, i + numRows)));
   }
   return heatMapValues.reverse();
 }
 
 /**
  * renders heat map onto html
- * @param {number[]} data array of all 0s/1s heat map data
- * @param {number} dataLength size of data array
+ * @param {number[]} allBinaryData array of all 0s/1s heat map data
  */
-function createHeatMap(data, dataLength) {
+function createHeatMap(allBinaryData) {
   const options = {
-    series: createHeatMapValues(data, dataLength),
+    series: createHeatMapValues(allBinaryData),
     chart: {
       height: '100%',
       width: '100%',
@@ -88,4 +88,9 @@ function createHeatMap(data, dataLength) {
   chart.render();
 }
 
-createHeatMap(likedMusicBinaryHist, TOTAL_LIKED);
+GENRE_ANALYSIS.then((genreAnalysisInfo) => {
+  const LIKED_MUSIC_BINARY_HIST = makeBinaryArr(
+      genreAnalysisInfo.likedMusicHistory,
+      genreAnalysisInfo.totalLiked);
+  createHeatMap(LIKED_MUSIC_BINARY_HIST);
+});

client/youtube-genre.html

@@ -36,7 +36,7 @@ <h1>Youtube Liked Video Heat Map</h1>
     </main>
   </body>
   <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-  <script src="js/genre.js"></script>
-  <script src="js/bar.js"></script>
-  <script src="js/heat.js"></script>
+  <script type="module" src="js/genre.js"></script>
+  <script type="module" src="js/bar.js"></script>
+  <script type="module" src="js/heat.js"></script>
 </html>