From 01759c59b304cb1faffaf2eb172a56c7d4bccd6e Mon Sep 17 00:00:00 2001
From: Chris Shyi <chris.shyi@mail.utoronto.ca>
Date: Sat, 30 Jun 2018 18:51:52 -0400
Subject: [PATCH] Fix floating point precision issue in audio feat

The last commit (fc6c30ec32f488c33c0f3e2114886c5de8b19af9) was affected
by a floating point addition/subtraction precision bug. The bug caused
nonsensical categories to appear on the audio feature bar charts. Now
fixed.
---
 .../static/graphs/scripts/audio_feat_graph.js | 22 ++++++++++++++-----
 graphs/templates/graphs/features_graphs.html  | 14 ++++++------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/graphs/static/graphs/scripts/audio_feat_graph.js b/graphs/static/graphs/scripts/audio_feat_graph.js
index 2b3d97e..5be85fb 100644
--- a/graphs/static/graphs/scripts/audio_feat_graph.js
+++ b/graphs/static/graphs/scripts/audio_feat_graph.js
@@ -20,9 +20,9 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSec
     let featureData = {};
     let currentEndPoint = intervalEndPoints.begin; // start at beginning
     // Create the keys first in order
-    while (currentEndPoint !== intervalEndPoints.end) {
+    while (currentEndPoint < intervalEndPoints.end) {
         let startOfRange = currentEndPoint;
-        let endOfRange = startOfRange + intervalEndPoints.step;
+        let endOfRange = precise(startOfRange + intervalEndPoints.step);
 
         let key = `${startOfRange} ~ ${endOfRange}`;
         featureData[key] = 0;
@@ -40,13 +40,14 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSec
         // categorize the data points
         for (let dataPoint of response.data_points) {
             dataPoint = parseFloat(dataPoint);
-            let currLowerBound = intervalEndPoints.end - intervalEndPoints.step;
+            let currLowerBound = precise(intervalEndPoints.end - intervalEndPoints.step);
             let stepSize = intervalEndPoints.step;
             // find the index of the first element greater than dataPoint
-            while (dataPoint < currLowerBound) {
-                currLowerBound -= stepSize;
+            while (dataPoint < currLowerBound && currLowerBound >= intervalEndPoints.begin) {
+                currLowerBound = precise(currLowerBound - stepSize);
             }
-            let upperBound = currLowerBound + stepSize;
+            let upperBound = precise(currLowerBound + stepSize);
+            currLowerBound = precise(currLowerBound);
             let key = `${currLowerBound} ~ ${upperBound}`;
             featureData[key] += 1;
         }
@@ -113,4 +114,13 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSec
  */
 function capFeatureStr(audioFeature) {
     return audioFeature.charAt(0).toUpperCase() + audioFeature.slice(1);
+}
+
+/**
+ * Converts a number to a floating point value with 2 significant figures
+ * @param number: the number to be converted
+ * @returns the input converted to two significant digits
+ */
+function precise(number) {
+    return Number.parseFloat(number.toPrecision(2));
 }
\ No newline at end of file
diff --git a/graphs/templates/graphs/features_graphs.html b/graphs/templates/graphs/features_graphs.html
index d8273af..cf8f01a 100644
--- a/graphs/templates/graphs/features_graphs.html
+++ b/graphs/templates/graphs/features_graphs.html
@@ -24,14 +24,14 @@
         <script src="{% static "graphs/scripts/audio_feat_graph.js" %}"></script>
         <script type="text/javascript">
             let userSecret = "{{ user_secret }}";
-            drawAudioFeatGraph("instrumentalness", {begin: 0, end: 1.0, step: 0.25}, 'body', userSecret);
-            drawAudioFeatGraph("valence", {begin: 0, end: 1.0, step: 0.25}, 'body', userSecret);
-            drawAudioFeatGraph("energy", {begin: 0, end: 1.0, step: 0.25}, 'body', userSecret);
+            drawAudioFeatGraph("instrumentalness", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
+            drawAudioFeatGraph("valence", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
+            drawAudioFeatGraph("energy", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
             drawAudioFeatGraph("tempo", {begin: 0, end: 200, step: 40}, 'body', userSecret);
-            drawAudioFeatGraph("danceability", {begin: 0, end: 1.0, step: 0.25}, 'body', userSecret);
-            drawAudioFeatGraph("acousticness", {begin: 0, end: 1.0, step: 0.25}, 'body', userSecret);
-            drawAudioFeatGraph("loudness", {begin: -60, end: 0, step: 15}, 'body', userSecret);
-            drawAudioFeatGraph("speechiness", {begin: 0, end: 1.0, step: 0.25}, 'body', userSecret);
+            drawAudioFeatGraph("danceability", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
+            drawAudioFeatGraph("acousticness", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
+            drawAudioFeatGraph("loudness", {begin: -60, end: 0, step: 12}, 'body', userSecret);
+            drawAudioFeatGraph("speechiness", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
         </script>
     </body>
 </html>