From e7de03dc3966fc02035004ccfd676762943eca02 Mon Sep 17 00:00:00 2001
From: christof-wittreich <christof.wittreich@nasa.gov>
Date: Wed, 9 Oct 2024 13:54:18 -0400
Subject: [PATCH] Feedback changes & info text update

---
 .../components/charting/charting-date-selector.js   |  2 +-
 web/js/components/charting/charting-info.js         | 13 +++++++------
 web/scss/components/button.scss                     |  7 ++++++-
 web/scss/features/sidebar.scss                      |  2 +-
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/web/js/components/charting/charting-date-selector.js b/web/js/components/charting/charting-date-selector.js
index 7043149dcc..ba4a48eee0 100644
--- a/web/js/components/charting/charting-date-selector.js
+++ b/web/js/components/charting/charting-date-selector.js
@@ -37,7 +37,7 @@ function ChartingDateSelector (props) {
   }
 
   return (
-    <div className="charting-date-container">
+    <div className="charting-date-container wv-date-range-selector">
       {/* single date mode */}
       {timeSpanSelection === 'date'
         ? (
diff --git a/web/js/components/charting/charting-info.js b/web/js/components/charting/charting-info.js
index 09d8a9d1e9..413dbda0e8 100644
--- a/web/js/components/charting/charting-info.js
+++ b/web/js/components/charting/charting-info.js
@@ -4,19 +4,20 @@ function ChartingInfo(props) {
   return (
     <div className="charting-info-container">
       <div className="charting-info-text">
-        <p className="charting-info">
-          Click on the pencil icon to click and drag a bounding box on the map to define an Area of Interest (AOI).
-        </p>
+        <p className="charting-info">The Charting Tool provides the option to create a line chart for a date range showing change over time, and statistics for a single date (minimum, maximum, mean, and standard deviation) for an area of interest.</p>
 
-        <p className="charting-info">In Date Range mode (the default mode), select the calendar icon near the bottom of the Layers panel and increment the values in the resulting window to change their dates. To use a single date instead of a range, choose One Date at the bottom of the Layers panel.</p>
+        <p className="charting-info">Select the layer to be charted by clicking on the radio button to the left of the layer name.</p>
 
-        <p className="charting-info">Select the active layer via the toggle icon on its left. Click on Request Chart & you will see additional data as you hover over points on the enlarged chart.</p>
+        <p className="charting-info">The default area of interest is the entire screen, click on the “Entire Screen” button to change to a bounding box area of interest selection. Click on any box at the edge or corner of the selection box to change the size and shape.</p>
 
-        <p className="charting-info">Exit the charting mode by selecting Exit Charting near the botom of the Layers Panel.</p>
+        <p className="charting-info">The default date selection is a date range of the past 7 days. Click on the dates to change the date range in the Charting Mode Date Selection box. Click on the red “Generate Chart” button to generate a chart of change over time.</p>
+
+        <p className="charting-info">To select a single date, select “One Date”. Click on the date to change the date in date selection box.  Click on the red “Generate Statistics” button to generate a list of statistics including min, max, mean, and standard deviation.</p>
 
         <h3>NOTE:</h3>
 
         <p className="charting-disclaimer">Numerical analyses performed on imagery should only be used for initial basic exploratory purposes. Results from these analyses should not be used for formal scientific study since the imagery is generally of lower precision than the original data and has often had additional processing steps applied to it, e.g. projection into a different coordinate system.</p>
+
       </div>
     </div>
   );
diff --git a/web/scss/components/button.scss b/web/scss/components/button.scss
index 9e88d1c331..d9b9c6df1d 100644
--- a/web/scss/components/button.scss
+++ b/web/scss/components/button.scss
@@ -27,6 +27,11 @@
     padding: 3px 13px 4px;
 }
 
+#chart-toggle-button.disabled {
+  color: #fff;
+  pointer-events: auto;
+}
+
 .wv-button.red {
   background: #f64137;
   border-color: #f64137;
@@ -36,7 +41,7 @@
   background: #212121;
 }
 
-.wv-button:hover,
+.wv-button:not(.disabled):hover,
 #compare-toggle-button:hover {
   border-color: #eee;
   background-color: #eee;
diff --git a/web/scss/features/sidebar.scss b/web/scss/features/sidebar.scss
index f704c50629..706db40af3 100644
--- a/web/scss/features/sidebar.scss
+++ b/web/scss/features/sidebar.scss
@@ -625,7 +625,7 @@ div#group-overlays-checkbox-case {
 }
 
 .charting-indicator {
-  font-size: 1.5em;
+  font-size: 1.25em;
   margin: 0;
   position: absolute;
   top: 50%;