WV-3590 - Chart Window Additions (#6054)

* Added chart window changes

* Added leading 0 in dates

* UI tweaks

* Adjusted UI for requested changes

* Merge branch 'develop' into wv-3590-charting-minimap

* Alignment fixes

* Expand/collapse ui changes

* Feedback changes

* Remove mock data

Author: christof-wittreich

web/js/components/charting/chart-component.js

@@ -1,15 +1,38 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { connect } from 'react-redux';
 import {
   LineChart, Line, XAxis, YAxis, Legend, Tooltip,
 } from 'recharts';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import OlMap from 'ol/Map';
+import OlView from 'ol/View';
+import OlLayerGroup from 'ol/layer/Group';
+import OlLayerTile from 'ol/layer/Tile';
+import OlFeature from 'ol/Feature';
+import { fromExtent } from 'ol/geom/Polygon';
+import { Vector as OlVectorLayer } from 'ol/layer';
+import { Vector as OlVectorSource } from 'ol/source';
+import { getCenter } from 'ol/extent';
+import { inAndOut } from 'ol/easing';
+import {
+  Fill as OlStyleFill,
+  Stroke as OlStyleStroke,
+  Style as OlStyle,
+} from 'ol/style';
+import util from '../../util/util';
 
 function ChartComponent (props) {
   const {
     liveData,
+    mapView,
+    createLayer,
+    overviewMapLayerDef,
   } = props;
 
+  const [errorCollapsed, setErrorCollapsed] = useState(true);
+  const mapInstanceRef = useRef(null);
+
   const {
     data,
     unit,
@@ -19,8 +42,13 @@ function ChartComponent (props) {
     isTruncated,
     title,
     numPoints,
+    coordinates,
+    errors,
   } = liveData;
 
+  const errorDaysArr = errors?.error_days?.replaceAll(/('|\[|\])/gi, '').split(', ') || [];
+  const format = util.getCoordinateFormat();
+
   // Arbitrary array of colors to use
   const lineColors = ['#A3905D', '#82CA9D', 'orange', 'pink', 'green', 'red', 'yellow', 'aqua', 'maroon'];
   const formattedUnit = unit ? ` (${unit})` : '';
@@ -182,6 +210,75 @@ function ChartComponent (props) {
     );
   }
 
+  useEffect(() => {
+    const boxFeature = new OlFeature({
+      geometry: fromExtent(coordinates),
+    });
+    boxFeature.setStyle(new OlStyle({
+      stroke: new OlStyleStroke({
+        color: 'rgba(255, 255, 255, .6)',
+        width: 1,
+      }),
+      fill: new OlStyleFill({
+        color: 'rgba(255, 255, 255, .3)',
+      }),
+    }));
+    const boxLayer = new OlVectorLayer({
+      source: new OlVectorSource({
+        features: [boxFeature],
+      }),
+    });
+
+    const createLayerWrapper = async () => {
+      const backgroundLayerGroup = await createLayer(overviewMapLayerDef);
+      backgroundLayerGroup.setVisible(true);
+
+      const layersList = [];
+      backgroundLayerGroup.getLayers().getArray().forEach((layer) => {
+        layersList.push(new OlLayerTile({
+          source: layer.getSource(),
+        }));
+      });
+      const copiedLayerGroup = new OlLayerGroup({
+        layers: layersList,
+      });
+
+      mapInstanceRef.current = new OlMap({
+        view: new OlView({
+          center: mapView.getCenter(),
+          zoom: mapView.getZoom(),
+          projection: mapView.getProjection(),
+        }),
+        layers: [copiedLayerGroup, boxLayer],
+        target: 'charting-minimap-inner',
+        interactions: [],
+      });
+
+      const minimapView = mapInstanceRef.current.getView();
+      minimapView.fit(boxFeature.getGeometry().getExtent(), { padding: [50, 50, 50, 50] });
+
+      mapInstanceRef.current.on('moveend', () => {
+        const boxCenter = getCenter(boxFeature.getGeometry().getExtent());
+        const minimapCenter = minimapView.getCenter();
+        if (boxCenter[0] === minimapCenter[0] && boxCenter[1] === minimapCenter[1]) {
+          return;
+        }
+        minimapView.animate({
+          center: boxCenter,
+          duration: 350,
+          easing: inAndOut,
+        });
+      });
+    };
+
+    createLayerWrapper();
+
+    return () => {
+      mapInstanceRef.current.setTarget(null);
+      mapInstanceRef.current = null;
+    };
+  }, [overviewMapLayerDef]);
+
   return (
     <div className="charting-chart-container">
       <div className="charting-chart-inner">
@@ -217,56 +314,141 @@ function ChartComponent (props) {
           </LineChart>
         </div>
         <div className="charting-stat-text">
-          <h3>
-            <b>
-              Average Statistics
-              {formattedUnit}
-            </b>
-          </h3>
-          <br />
-          {getQuickStatistics(data)}
-        </div>
-      </div>
-      <div className="charting-disclaimer">
-        <strong className="charting-disclaimer-pre">Note: </strong>
-        <span>Numerical analyses performed on imagery should only be used for initial basic exploratory purposes.</span>
-        {isTruncated
-        && (
-          <div className="charting-disclaimer-lower">
-            <FontAwesomeIcon
-              icon="exclamation-triangle"
-              className="wv-alert-icon"
-              size="1x"
-              widthAuto
-            />
-            <i className="charting-disclaimer-block">
-              As part of this beta feature release, the number of data points plotted between
+          <div id="charting-stats-container">
+            <h3>
               <b>
-                {` ${startDate} `}
+                Average Statistics
+                {formattedUnit}
               </b>
-              and
-              <b>
-                {` ${endDate} `}
-              </b>
-              have been reduced from
-              <b>
-                {` ${numRangeDays} `}
-              </b>
-              to
+            </h3>
+            <br />
+            {getQuickStatistics(data)}
+          </div>
+          <div id="charting-minimap-container">
+            <div id="charting-minimap-inner" />
+          </div>
+          <div />
+          <div id="charting-coordinates-container">
+            <h3>
               <b>
-                {` ${numPoints}`}
+                Coordinates
               </b>
-              .
-            </i>
+            </h3>
+            <br />
+            <div className="charting-coordinates-inner">
+              <div />
+              <div className="coordinate-center coordinate-subheader">Latitude</div>
+              <div className="coordinate-center coordinate-subheader">Longitude</div>
+              <div>Top Right:</div>
+              <div className="coordinate-mono">{util.formatCoordinate([coordinates[2], coordinates[3]], format).split(', ')[0]}</div>
+              <div className="coordinate-mono">{util.formatCoordinate([coordinates[2], coordinates[3]], format).split(', ')[1]}</div>
+              <div>Bottom Left:</div>
+              <div className="coordinate-mono">{util.formatCoordinate([coordinates[0], coordinates[1]], format).split(', ')[0]}</div>
+              <div className="coordinate-mono">{util.formatCoordinate([coordinates[0], coordinates[1]], format).split(', ')[1]}</div>
+            </div>
           </div>
-        )}
+        </div>
+        <div className="charting-disclaimer">
+          <strong className="charting-disclaimer-pre">Note: </strong>
+          <span>Numerical analyses performed on imagery should only be used for initial basic exploratory purposes.</span>
+          {isTruncated
+          && (
+            <div className="charting-disclaimer-upper">
+              <FontAwesomeIcon
+                icon="exclamation-triangle"
+                className="wv-alert-icon"
+                size="1x"
+                widthAuto
+              />
+              <i className="charting-disclaimer-block">
+                As part of this beta feature release, the number of data points plotted between
+                <b>
+                  {` ${startDate} `}
+                </b>
+                and
+                <b>
+                  {` ${endDate} `}
+                </b>
+                have been reduced from
+                <b>
+                  {` ${numRangeDays} `}
+                </b>
+                to
+                <b>
+                  {` ${numPoints}`}
+                </b>
+                .
+              </i>
+            </div>
+          )}
+          {errors && errors.error_count > 0
+          && (
+            <div className="charting-disclaimer-lower">
+              <FontAwesomeIcon
+                icon="exclamation-triangle"
+                className="wv-alert-icon"
+                size="1x"
+                widthAuto
+              />
+              <i className="charting-disclaimer-block">
+                {`${errors.error_count} `}
+                dates requested have no data, so are not shown in the chart.
+              </i>
+              {!errorCollapsed
+              && (
+                <div className="charting-disclaimer-dates">
+                  <i className="charting-disclaimer-block">
+                    {errorDaysArr.map((date, index) => (
+                      <>
+                        {date.split('T')[0]}
+                        {index < errorDaysArr.length - 1 && ', '}
+                        &nbsp;&nbsp;
+                      </>
+                    ))}
+                  </i>
+                </div>
+              )}
+              <div className="error-expand-button">
+                <span className="error-expand-button-inner" onClick={() => setErrorCollapsed(!errorCollapsed)}>
+                  {errorCollapsed ? 'more' : 'less'}
+                  <FontAwesomeIcon
+                    className="layer-group-collapse"
+                    icon={!errorCollapsed ? 'caret-up' : 'caret-down'}
+                    widthAuto
+                  />
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
 }
 
+const mapStateToProps = (state) => {
+  const {
+    map,
+    layers,
+  } = state;
+
+  const {
+    ui,
+  } = map;
+
+  const layerId = 'Coastlines_15m';
+
+  return {
+    mapView: ui.selected.getView(),
+    createLayer: ui.createLayer,
+    overviewMapLayerDef: layers.layerConfig[layerId],
+  };
+};
+
 ChartComponent.propTypes = {
   liveData: PropTypes.object,
 };
 
-export default ChartComponent;
+export default connect(
+  mapStateToProps,
+)(ChartComponent);

web/js/components/sidebar/charting-mode-options.js

@@ -88,6 +88,7 @@ function ChartingModeOptions(props) {
 
   const isMounted = useRef(false);
   const [isPostRender, setIsPostRender] = useState(false);
+  const [doRenderChart, setDoRenderChart] = useState(false);
   const [mapViewChecked, setMapViewChecked] = useState(false);
   const [isWithinWings, setIsWithinWings] = useState(false);
   const [boundaries, setBoundaries] = useState({
@@ -411,17 +412,23 @@ function ChartingModeOptions(props) {
       if (timeSpanSelection === 'range') {
         const rechartsData = formatGIBSDataForRecharts(dataToRender);
         const numRangeDays = Math.floor((Date.parse(initialEndDate) - Date.parse(initialStartDate)) / 86400000);
+        const startDateFormatted = `${initialStartDate.getFullYear()}-${`0${initialStartDate.getMonth() + 1}`.slice(-2)}-${`0${initialStartDate.getDate()}`.slice(-2)}`;
+        const endDateFormatted = `${initialEndDate.getFullYear()}-${`0${initialEndDate.getMonth() + 1}`.slice(-2)}-${`0${initialEndDate.getDate()}`.slice(-2)}`;
         const numPoints = STEP_NUM - (data?.body?.errors?.error_count > 0 ? data.body.errors.error_count : 0);
         displayChart({
           title: dataToRender.title,
           subtitle: dataToRender.subtitle,
           unit: dataToRender.unit,
+          errors: dataToRender.errors,
           data: rechartsData,
           startDate: primaryDate,
           endDate: secondaryDate,
+          startDateFormatted,
+          endDateFormatted,
           numRangeDays,
           isTruncated: numRangeDays > STEP_NUM,
           numPoints,
+          coordinates: [...bottomLeftLatLong, ...topRightLatLong],
         });
         updateChartRequestStatus(false);
       } else {
@@ -434,13 +441,19 @@ function ChartingModeOptions(props) {
     }
   }
 
+  useEffect(() => {
+    if (doRenderChart && isPostRender) {
+      onRequestChartClick();
+    }
+  }, [doRenderChart, isPostRender]);
+
   useEffect(() => {
     const isOpen = (modalId === 'CHARTING-CHART' || modalId === 'CHARTING-STATS-MODAL') && isModalOpen;
     if (isChartOpen && !isOpen && Object.keys(renderedPalettes).length > 0) {
       const layerInfo = getActiveChartingLayer();
       const paletteName = layerInfo.palette.id;
       if (renderedPalettes[paletteName]) {
-        onRequestChartClick();
+        setDoRenderChart(true);
       }
     }
   }, [isChartOpen, renderedPalettes]);
@@ -845,16 +858,29 @@ const mapDispatchToProps = (dispatch) => ({
   displayChart: (liveData) => {
     dispatch(
       openCustomContent('CHARTING-CHART', {
-        headerText: `BETA | ${liveData.title} - ${liveData.subtitle}${liveData.unit ? ` (${liveData.unit})` : ''}`,
+        headerText: (
+          <>
+            BETA |
+            {` ${liveData.title} `}
+            -
+            {` ${liveData.subtitle}${liveData.unit ? ` (${liveData.unit})` : ''}`}
+            <span className="charting-chart-subheader">
+              from &nbsp;
+              {liveData.startDateFormatted}
+              &nbsp; to &nbsp;
+              {liveData.endDateFormatted}
+            </span>
+          </>
+        ),
         backdrop: false,
         bodyComponent: ChartComponent,
         wrapClassName: 'unclickable-behind-modal',
         modalClassName: 'chart-dialog',
         isDraggable: true,
         dragHandle: '.modal-header',
-        offsetLeft: 'calc(50% - 425px)',
+        offsetLeft: 'calc(50% - 575px)',
         offsetTop: 50,
-        width: 850,
+        width: 1150,
         height: 420,
         stayOnscreen: true,
         type: 'selection', // This forces the user to specifically close the modal