From f28e544d1429b49b2a0293234fb3e2d26513169c Mon Sep 17 00:00:00 2001
From: Parikshith Mohite <parimohite1@gmail.com>
Date: Sun, 29 Sep 2024 14:15:09 -0400
Subject: [PATCH] Make statistics that are not displayed grey in settings

---
 src/components/NowPlaying.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/NowPlaying.tsx b/src/components/NowPlaying.tsx
index 0e28b01..d4ead14 100644
--- a/src/components/NowPlaying.tsx
+++ b/src/components/NowPlaying.tsx
@@ -18,7 +18,7 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
     songURI: "",        // URI of the currently playing song
     recTarget: "songs", // Recommendations based on either songs or artist
     songMetrics: [], // Current song metric information
-    metricsToDisplay: [], // Current metric information types
+    metricsToDisplay: ["Danceability", "Energy", "Acousticness", "Loudness", "Key", "Tempo"], // Current metric information types
   }
 
   componentDidMount = () => {
@@ -49,13 +49,16 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
 
   // Sets the song metric information based on the type of information that the user wants to be displayed
   setSongMetrics = () => {
+    // this.setState({
+    //   metricsToDisplay: ["Danceability", "Energy", "Acousticness", "Loudness", "Key", "Tempo", "Instrumentalness", "Liveness", "Mode", "Speechiness", "Time_Signature", "Valence"] // TODO: Change so that we get the metrics we want to display dynamically
+    // }, () => {
+    //   this.setState({
+    //     songMetrics: getSongMetrics((this.state.audioFeatures as AudioFeaturesResponse), this.state.metricsToDisplay)
+    //   });
+    // })
     this.setState({
-      metricsToDisplay: ["Danceability", "Energy", "Acousticness", "Loudness", "Key", "Tempo", "Instrumentalness", "Liveness", "Mode", "Speechiness", "Time_Signature", "Valence"] // TODO: Change so that we get the metrics we want to display dynamically
-    }, () => {
-      this.setState({
-        songMetrics: getSongMetrics((this.state.audioFeatures as AudioFeaturesResponse), this.state.metricsToDisplay)
-      });
-    })
+      songMetrics: getSongMetrics((this.state.audioFeatures as AudioFeaturesResponse), this.state.metricsToDisplay)
+    });
   }
 
   // Change the recommendation target
@@ -175,7 +178,7 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
           <div className={styles.settingContainer}>
             <span className={styles.settingLabel}>{"Displayed statistics: "}</span>
             {allMetrics.map((metric: string, i) => {
-              return <button className={styles.recommendationTarget} style={{marginLeft: "5px", fontSize: "15px"}}>{metric}</button>
+              return <button className={styles.recommendationTarget} style={{marginLeft: "5px", fontSize: "15px", backgroundColor: this.state.metricsToDisplay.includes(metric) ? "rgb(81, 126, 97)" : "rgb(105,105,105)"}}>{metric}</button>
             })}
             {/* <button onClick={this.changeRecTarget} className={styles.recommendationTarget}
                     disabled={false} style={{marginLeft: "10px", marginTop: "0px"}}>