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;