From 4322a5623f1fbe42dfde00a414453cf3ec297bb5 Mon Sep 17 00:00:00 2001
From: christof-wittreich <christof.wittreich@nasa.gov>
Date: Mon, 26 Feb 2024 11:02:57 -0500
Subject: [PATCH] Sprint 2 work

---
 .../layers/aeronet/AERONET_AOD_500NM.json     |   1 +
 .../layer/settings/layer-settings.js          |   3 -
 .../ol-vector-interactions.js                 |   4 +-
 web/js/containers/vector-dialog.js            |  23 +++-
 web/js/map/layerbuilder.js                    | 120 +++++++++++-------
 .../components/update-date/updateDate.js      |   4 +
 web/js/modules/core/actions.js                |   2 -
 web/js/modules/palettes/actions.js            |   1 -
 web/js/modules/palettes/selectors.js          |   1 -
 web/js/modules/vector-styles/selectors.js     |   5 -
 web/js/modules/vector-styles/util.js          |   7 +-
 11 files changed, 100 insertions(+), 71 deletions(-)

diff --git a/config/default/common/config/wv.json/layers/aeronet/AERONET_AOD_500NM.json b/config/default/common/config/wv.json/layers/aeronet/AERONET_AOD_500NM.json
index c65e66eb30..37963e8f26 100644
--- a/config/default/common/config/wv.json/layers/aeronet/AERONET_AOD_500NM.json
+++ b/config/default/common/config/wv.json/layers/aeronet/AERONET_AOD_500NM.json
@@ -5,6 +5,7 @@
       "title": "AERONET AOD 500nm",
       "subtitle": "AERONET",
       "description": "aeronet/AERONET_AOD_500NM",
+      "period": "daily",
       "group": "overlays",
       "tags": "vectors aeronet aod",
       "type": "vector",
diff --git a/web/js/components/layer/settings/layer-settings.js b/web/js/components/layer/settings/layer-settings.js
index d12fe0240d..019a29e232 100644
--- a/web/js/components/layer/settings/layer-settings.js
+++ b/web/js/components/layer/settings/layer-settings.js
@@ -348,8 +348,6 @@ class LayerSettings extends React.Component {
     const granuleMetadata = layer?.enableCMRDataFinder && !(zot?.underZoomValue > 0);
     const layerGroup = layer.layergroup;
 
-    console.log(layer, layerGroup);
-
     if (layer.type !== 'vector') {
       renderCustomizations = customPalettesIsActive && palettedAllowed && layer.palette
         ? this.renderCustomPalettes()
@@ -359,7 +357,6 @@ class LayerSettings extends React.Component {
       // Reference (MGRS/HLS Grid) has no need for palettes
       renderCustomizations = this.renderCustomPalettes();
     }
-    console.log('ggg', layer);
 
     if (!layer.id) return '';
     return (
diff --git a/web/js/containers/map-interactions/ol-vector-interactions.js b/web/js/containers/map-interactions/ol-vector-interactions.js
index c54a98a1bb..b06e1382fe 100644
--- a/web/js/containers/map-interactions/ol-vector-interactions.js
+++ b/web/js/containers/map-interactions/ol-vector-interactions.js
@@ -121,7 +121,6 @@ export class VectorInteractions extends React.Component {
       map.forEachFeatureAtPixel(pixel, (feature, layer) => {
         if (!layer) return;
         const def = lodashGet(layer, 'wv.def');
-        console.log(feature, layer, feature.getGeometry().getType());
         const layerExtent = layer.get('extent');
         const pixelCoords = map.getCoordinateFromPixel(pixel);
         const featureOutsideExtent = layerExtent && !olExtent.containsCoordinate(layerExtent, pixelCoords);
@@ -183,6 +182,7 @@ export class VectorInteractions extends React.Component {
     const isVectorModalOpen = modalState.id.includes('vector_dialog') && modalState.isOpen;
     const pixels = e.pixel;
     const clickObj = getDialogObject(pixels, map);
+    console.log(clickObj);
     const metaArray = clickObj.metaArray || [];
     const selected = clickObj.selected || {};
     const offsetLeft = clickObj.offsetLeft || 10;
@@ -317,6 +317,8 @@ const mapDispatchToProps = (dispatch) => ({
     const modalWidth = isMobile ? screenWidth : 445;
     const modalHeight = isMobile ? screenHeight - mobileTopOffset : 300;
 
+    console.log(vectorDialog);
+
     dispatch(openCustomContent(
       dialogId,
       {
diff --git a/web/js/containers/vector-dialog.js b/web/js/containers/vector-dialog.js
index 4467ed0005..4c66f3dcde 100644
--- a/web/js/containers/vector-dialog.js
+++ b/web/js/containers/vector-dialog.js
@@ -6,7 +6,7 @@ import {
   ModalBody, ModalHeader, Nav, NavItem, NavLink,
 } from 'reactstrap';
 import Scrollbars from '../components/util/scrollbar';
-import VectorMetaTable from '../components/vector-metadata/table';
+// import VectorMetaTable from '../components/vector-metadata/table';
 
 class VectorDialog extends React.Component {
   constructor(props) {
@@ -23,12 +23,14 @@ class VectorDialog extends React.Component {
 
   render() {
     const {
-      toggleWithClose, vectorMetaObject, modalHeight, dialogKey,
+      toggleWithClose, vectorMetaObject, modalHeight,
     } = this.props;
     const { activeIndex } = this.state;
     const navArray = [];
     const keyArray = [];
     let i = 0;
+    console.log(activeIndex);
+    console.log(this.props);
     for (const [key, value] of Object.entries(vectorMetaObject)) {
       const stringLength = 20;
       const title = value[0].title || key;
@@ -66,11 +68,18 @@ class VectorDialog extends React.Component {
 
         <ModalBody>
           <Scrollbars style={{ maxHeight: `${modalHeight - 70}px` }}>
-            <VectorMetaTable
-              id={dialogKey}
-              metaArray={activeMetaArray}
-              title={keyArray[activeIndex]}
-            />
+            <a
+              href={
+                `https://aeronet.gsfc.nasa.gov/new_web/photo_db_v3/
+                ${activeMetaArray[0].features.name}.html`
+              }
+              rel="noreferrer"
+              target="_blank"
+            >
+              https://aeronet.gsfc.nasa.gov/new_web/photo_db_v3/
+              {activeMetaArray[0].features.name}
+              .html
+            </a>
           </Scrollbars>
         </ModalBody>
       </div>
diff --git a/web/js/map/layerbuilder.js b/web/js/map/layerbuilder.js
index 4654b69141..151725f916 100644
--- a/web/js/map/layerbuilder.js
+++ b/web/js/map/layerbuilder.js
@@ -494,7 +494,8 @@ export default function mapLayerBuilder(config, cache, store) {
     * @param {object} attributes
     */
   const createLayerVectorAeronet = function(def, options, day, state, attributes) {
-    console.log(def.id, def, config, config.sources[def.source].matrixSets);
+    console.log(def.id);
+    // console.log(def.id, def, config, config.sources[def.source].matrixSets);
     const { proj, animation } = state;
     let date;
     let gridExtent;
@@ -519,7 +520,7 @@ export default function mapLayerBuilder(config, cache, store) {
       }
     }
 
-    date = options.date || getSelectedDate(state);
+    date = getSelectedDate(state);
 
     if (day && def.wrapadjacentdays) date = util.dateAdd(date, 'day', day);
     const breakPointLayerDef = def.breakPointLayer;
@@ -528,46 +529,73 @@ export default function mapLayerBuilder(config, cache, store) {
     const vectorSource = new OlSourceVector({
       format: new GeoJSON(),
       loader: async () => {
-        const getData = async () => {
-          const urlParameters = `?year=${date.getFullYear()}&month=${date.getMonth() + 1}&day=${date.getDate()}&AOD15=1&AVG=10&if_no_html=1`;
+        const getAllData = async () => {
+          // const url = `https://aeronet.gsfc.nasa.gov/aeronet_locations_v3.txt`;
+          const url = `https://aeronet.gsfc.nasa.gov/Site_Lists_V3/aeronet_locations_v3_${date.getFullYear()}_lev15.txt`;
+          const res = await fetch(url);
+          const data = await res.text();
+          return data;
+        };
+
+        const getActiveData = async () => {
+          const urlParameters = `?year=${date.getFullYear()}&month=${date.getMonth() + 1}&day=${date.getDate()}&year2=${date.getFullYear()}&month2=${date.getMonth() + 1}&day2=${date.getDate()}&AOD15=1&AVG=10&if_no_html=1`;
           const res = await fetch(source.url + urlParameters);
           const data = await res.text();
           return data;
         };
 
-        const data = await getData();
+        const allData = await getAllData();
+        const activeData = await getActiveData();
 
-        const features = [];
-        const takenNames = {};
-        const split = data.split('\n');
-        if (split.length > 5) {
-          const key = split[5].split(',');
-          // console.log('1', key);
-          for (let i = 6; i < split.length; i += 1) {
-            const split2 = split[i].split(',');
+        const featuresObj = [];
+        const takenNamesActive = {};
+        const splitActive = activeData.split('\n');
+        if (splitActive.length > 6) {
+          const key = splitActive[5].split(',');
+          for (let i = 6; i < splitActive.length; i += 1) {
+            const split2 = splitActive[i].split(',');
             const rowObj = {};
             for (let j = 0; j < split2.length; j += 1) {
               rowObj[key[j]] = split2[j];
             }
-            if (!!rowObj.AERONET_Site_Name && rowObj.AERONET_Site_Name !== '' && rowObj.AOD_500nm > 0 && !takenNames[rowObj.AERONET_Site_Name]) {
-              const temp = {};
-              temp.type = 'Feature';
-              temp.geometry = { type: 'Point' };
-              temp.geometry.coordinates = [parseFloat(rowObj['Site_Longitude(Degrees)']), parseFloat(rowObj['Site_Latitude(Degrees)'])];
-              temp.properties = { name: rowObj.AERONET_Site_Name };
-              features.push(temp);
-              takenNames[rowObj.AERONET_Site_Name] = true;
+            if (!!rowObj.AERONET_Site_Name && rowObj.AERONET_Site_Name !== '' && !takenNamesActive[rowObj.AERONET_Site_Name]) {
+              featuresObj[rowObj.AERONET_Site_Name] = {};
+              featuresObj[rowObj.AERONET_Site_Name].type = 'Feature';
+              featuresObj[rowObj.AERONET_Site_Name].geometry = { type: 'Point' };
+              featuresObj[rowObj.AERONET_Site_Name].geometry.coordinates = [parseFloat(rowObj['Site_Longitude(Degrees)']), parseFloat(rowObj['Site_Latitude(Degrees)'])];
+              featuresObj[rowObj.AERONET_Site_Name].properties = { name: rowObj.AERONET_Site_Name, AOD_500nm: rowObj.AOD_500nm };
+              takenNamesActive[rowObj.AERONET_Site_Name] = true;
+            }
+          }
+        }
+
+        const takenNamesAll = {};
+        const splitAll = allData.split('\n');
+        if (splitAll.length > 2) {
+          const key = splitAll[1].split(',');
+          for (let i = 2; i < splitAll.length; i += 1) {
+            const split2 = splitAll[i].split(',');
+            const rowObj = {};
+            for (let j = 0; j < split2.length; j += 1) {
+              rowObj[key[j]] = split2[j];
+            }
+            if (!!rowObj.Site_Name && rowObj.Site_Name !== '' && !takenNamesAll[rowObj.Site_Name]) {
+              if (!featuresObj[rowObj.Site_Name]) {
+                featuresObj[rowObj.Site_Name] = {};
+              }
+              featuresObj[rowObj.Site_Name].type = 'Feature';
+              featuresObj[rowObj.Site_Name].geometry = { type: 'Point' };
+              featuresObj[rowObj.Site_Name].geometry.coordinates = [parseFloat(rowObj['Longitude(decimal_degrees)']), parseFloat(rowObj['Latitude(decimal_degrees)'])];
+              featuresObj[rowObj.Site_Name].properties = { ...featuresObj[rowObj.Site_Name].properties, name: rowObj.Site_Name, active: !!takenNamesActive[rowObj.Site_Name] };
+              takenNamesAll[rowObj.Site_Name] = true;
             }
           }
         }
 
-        features.forEach((feature) => {
-          feature.MAIN_USE = 'Fisheries';
-        });
 
         const geoJson = {
           type: 'FeatureCollection',
-          features,
+          features: Object.values(featuresObj).sort((a, b) => a.properties.active > b.properties.active),
         };
         const formattedFeatures = vectorSource.getFormat().readFeatures(geoJson);
         vectorSource.addFeatures(formattedFeatures);
@@ -586,24 +614,29 @@ export default function mapLayerBuilder(config, cache, store) {
         // Access the properties of the feature
         const featureProperties = feature.getProperties();
         // Extract the feature name
-        const { name } = featureProperties;
+        const { active } = featureProperties;
+        const aod = featureProperties.AOD_500nm;
         // Define styles based on the feature properties
-        const radius = 5;
+        const radius = 7;
         let fillColor;
-        let strokeColor;
-
-        // Because the data we want to filter on is not currently defined as a feature, I arbitrarily split the color coding by first letter of the locaion
-        const firstLetterOfFeatureName = name.charAt(0).toUpperCase();
-
-        if (firstLetterOfFeatureName <= 'H') {
-          fillColor = 'blue';
-          strokeColor = 'white';
-        } else if (name <= 'P') {
-          fillColor = 'green';
-          strokeColor = 'white';
+        const strokeColor = 'white';
+
+        if (active) {
+          if (aod <= 0.1) {
+            fillColor = 'blue';
+          } else if (aod <= 0.2) {
+            fillColor = 'green';
+          } else if (aod <= 0.3) {
+            fillColor = 'yellow';
+          } else if (aod <= 0.4) {
+            fillColor = 'orange';
+          } else if (aod <= 0.5) {
+            fillColor = 'red';
+          } else {
+            fillColor = 'black';
+          }
         } else {
-          fillColor = 'red';
-          strokeColor = 'white';
+          fillColor = 'gray';
         }
         // Return the style for the current feature
         return new Style({
@@ -629,7 +662,6 @@ export default function mapLayerBuilder(config, cache, store) {
     layer.isVector = true;
 
     if (breakPointLayerDef && !animationIsPlaying) {
-      console.log('1a');
       const newDef = { ...def, ...breakPointLayerDef };
       const wmsLayer = createLayerWMS(newDef, options, day, state);
       const layerGroup = new OlLayerGroup({
@@ -640,7 +672,6 @@ export default function mapLayerBuilder(config, cache, store) {
     }
 
     if (breakPointResolution && animationIsPlaying) {
-      // console.log('2a');
       delete breakPointLayerDef.projections[proj.id].resolutionBreakPoint;
       const newDef = { ...def, ...breakPointLayerDef };
       const wmsLayer = createLayerWMS(newDef, options, day, state);
@@ -648,7 +679,6 @@ export default function mapLayerBuilder(config, cache, store) {
       return wmsLayer;
     }
 
-    // console.log('3a');
     return layer;
   };
 
@@ -662,7 +692,6 @@ export default function mapLayerBuilder(config, cache, store) {
     */
   const createLayerVector = function(def, options, day, state, attributes) {
     if (def.source === 'AERONET') {
-      // console.log('aeronet');
       return createLayerVectorAeronet(def, options, day, state, attributes);
     }
     const { proj, animation } = state;
@@ -750,7 +779,6 @@ export default function mapLayerBuilder(config, cache, store) {
     layer.isVector = true;
 
     if (breakPointLayerDef && !animationIsPlaying) {
-      console.log('1');
       const newDef = { ...def, ...breakPointLayerDef };
       const wmsLayer = createLayerWMS(newDef, options, day, state);
       const layerGroup = new OlLayerGroup({
@@ -761,7 +789,6 @@ export default function mapLayerBuilder(config, cache, store) {
     }
 
     if (breakPointResolution && animationIsPlaying) {
-      console.log('2');
       delete breakPointLayerDef.projections[proj.id].resolutionBreakPoint;
       const newDef = { ...def, ...breakPointLayerDef };
       const wmsLayer = createLayerWMS(newDef, options, day, state);
@@ -769,7 +796,6 @@ export default function mapLayerBuilder(config, cache, store) {
       return wmsLayer;
     }
 
-    console.log('3');
     return layer;
   };
 
diff --git a/web/js/mapUI/components/update-date/updateDate.js b/web/js/mapUI/components/update-date/updateDate.js
index 8e30eef9a9..381c7ca3ae 100644
--- a/web/js/mapUI/components/update-date/updateDate.js
+++ b/web/js/mapUI/components/update-date/updateDate.js
@@ -72,6 +72,7 @@ function UpdateDate(props) {
   }
 
   async function updateDate(outOfStepChange, skipTtiler) {
+    console.log('date updated');
     const { createLayer } = ui;
 
     const layerGroup = getActiveLayerGroup(layerState);
@@ -87,13 +88,16 @@ function UpdateDate(props) {
 
     const layerPromises = visibleLayers.map(async (def) => {
       const { id, type } = def;
+      console.log('date', id, def, def.period);
       const temporalLayer = ['subdaily', 'daily', 'monthly', 'yearly']
         .includes(def.period);
       const index = findLayerIndex(def);
       const hasVectorStyles = config.vectorStyles && lodashGet(def, 'vectorStyle.id');
       if (isCompareActive && layers.length) {
+        console.log('date', '1');
         await updateCompareLayer(def, index, mapLayerCollection, layers, skipTtiler);
       } else if (temporalLayer) {
+        console.log('date', '2');
         if (index !== undefined && index !== -1) {
           const layerValue = layers[index];
           const layerOptions = type === 'granule'
diff --git a/web/js/modules/core/actions.js b/web/js/modules/core/actions.js
index efa84404b4..a2d64f6039 100644
--- a/web/js/modules/core/actions.js
+++ b/web/js/modules/core/actions.js
@@ -32,14 +32,12 @@ export async function requestAction(
   dispatch(startRequest(actionName, id));
   try {
     const response = await fetch(url, options);
-    // console.log('hhh', response);
     const data = mimeType === 'application/json'
       ? await response.json()
       : await response.text();
     dispatch(fetchSuccess(actionName, data, id));
     return data;
   } catch (error) {
-    // console.log('hhh', error);
     dispatch(fetchFailure(actionName, error, id));
     console.error(error);
   }
diff --git a/web/js/modules/palettes/actions.js b/web/js/modules/palettes/actions.js
index 74cd3218b7..06060065a3 100644
--- a/web/js/modules/palettes/actions.js
+++ b/web/js/modules/palettes/actions.js
@@ -30,7 +30,6 @@ export function requestPalette(id) {
     const layer = config.layers[id];
     const paletteID = layer.palette.id;
     const location = `config/palettes/${paletteID}.json`;
-    console.log(location, id, layer.palette.id);
     return requestAction(
       dispatch,
       REQUEST_PALETTE,
diff --git a/web/js/modules/palettes/selectors.js b/web/js/modules/palettes/selectors.js
index af2c2350bb..08d317456b 100644
--- a/web/js/modules/palettes/selectors.js
+++ b/web/js/modules/palettes/selectors.js
@@ -13,7 +13,6 @@ import { getMinValue } from './util';
 export function getRenderedPalette(layerId, index, state) {
   const { config, palettes } = state;
   const name = lodashGet(config, `layers['${layerId}'].palette.id`);
-  // console.log(palettes.rendered);
   let palette = palettes.rendered[name];
   if (!palette) {
     throw new Error(`${name} Is not a rendered palette`);
diff --git a/web/js/modules/vector-styles/selectors.js b/web/js/modules/vector-styles/selectors.js
index f527d50a77..bed4411ad9 100644
--- a/web/js/modules/vector-styles/selectors.js
+++ b/web/js/modules/vector-styles/selectors.js
@@ -144,7 +144,6 @@ export function setStyleFunction(def, vectorStyleId, vectorStyles, layer, state,
   const customPalette = def.custom;
 
   let glStyle = vectorStyles[styleId];
-  console.log('setStyleFunction glStyle', glStyle);
   if (customPalette && Object.prototype.hasOwnProperty.call(state, 'palettes')) {
     const hexColor = state.palettes.custom[customPalette].colors[0];
     const rgbPalette = util.hexToRGBA(hexColor);
@@ -176,7 +175,6 @@ export function setStyleFunction(def, vectorStyleId, vectorStyles, layer, state,
 
   // Process style of feature selected/clicked in UI
   if ((glStyle.name !== 'Orbit Tracks') && selectedFeatures) {
-    console.log('selectedFeatures');
     const extentStartX = layer.getExtent()[0];
     const acceptableExtent = extentStartX === 180
       ? [-180, -90, -110, 90]
@@ -204,7 +202,6 @@ export function setStyleFunction(def, vectorStyleId, vectorStyles, layer, state,
 
 export function isActive(layerId, group, state) {
   group = group || state.compare.activeString;
-  console.log('isactive');
   if (state.vectorStyles.custom[layerId]) {
     return state.vectorStyles[group][layerId];
   }
@@ -241,7 +238,6 @@ export function clearStyleFunction(def, vectorStyleId, vectorStyles, layer, stat
     });
   }
   const styleFunction = stylefunction(layer, glStyle, vectorStyleId);
-  console.log('layer', layer);
   if (glStyle.name === 'Orbit Tracks') {
     // Filter time by 5 mins
     layer.setStyle((feature, resolution) => {
@@ -265,7 +261,6 @@ export function clearStyleFunction(def, vectorStyleId, vectorStyles, layer, stat
  * @param {Object} state
  */
 export const applyStyle = (def, olVectorLayer, state) => {
-  console.log('applystyle');
   const { config } = state;
   const { vectorStyles } = config;
   const vectorStyleId = def.vectorStyle.id;
diff --git a/web/js/modules/vector-styles/util.js b/web/js/modules/vector-styles/util.js
index 7673123a89..3a10b0f6ca 100644
--- a/web/js/modules/vector-styles/util.js
+++ b/web/js/modules/vector-styles/util.js
@@ -220,7 +220,6 @@ function getModalContentsAtPixel(mapProps, config, compareState, isMobile) {
   const desktopLimit = 12;
   const mobileLimit = 5;
   const maxLimitOfResults = isMobile ? mobileLimit : desktopLimit;
-  console.log('hi');
   map.forEachFeatureAtPixel(pixels, (feature, layer) => {
     const lengthCheck = (arr) => arr.length >= maxLimitOfResults;
     const featureId = feature.getId();
@@ -238,16 +237,16 @@ function getModalContentsAtPixel(mapProps, config, compareState, isMobile) {
     }
 
     const type = feature.getGeometry().getType();
-    console.log('loop', def, def.vectorData, def.title);
     if (lodashIncludes(def.clickDisabledFeatures, type)
       || !isFromActiveCompareRegion(pixels, layer.wv.group, compareState, swipeOffset)) {
       return;
     }
-    if (def.vectorData && def.vectorData.id && def.title) {
+    // console.log(feature.values_.name, feature, def, config);
+    if (def.vectorStyle && def.vectorStyle.id && def.title) {
       const layerId = def.id;
       if (!selected[layerId]) selected[layerId] = [];
       const features = feature.getProperties();
-      const vectorDataId = def.vectorData.id;
+      const vectorDataId = 'GRanD_Dams';
       const data = config.vectorData[vectorDataId];
       const properties = data.mvt_properties;
       const uniqueIdentifierKey = lodashFind(properties, { Function: 'Identify' }).Identifier;