Skip to content

Commit

Permalink
Sprint 2 work
Browse files Browse the repository at this point in the history
  • Loading branch information
@christof-wittreich
christof-wittreich committed Feb 26, 2024
1 parent 6edc653 commit 4322a56
Show file tree
Hide file tree
Showing 11 changed files with 100 additions and 71 deletions.
1 change: 1 addition & 0 deletions config/default/common/config/wv.json/layers/aeronet/AERONET_AOD_500NM.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 0 additions & 3 deletions web/js/components/layer/settings/layer-settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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 (
Expand Down
4 changes: 3 additions & 1 deletion web/js/containers/map-interactions/ol-vector-interactions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -317,6 +317,8 @@ const mapDispatchToProps = (dispatch) => ({
const modalWidth = isMobile ? screenWidth : 445;
const modalHeight = isMobile ? screenHeight - mobileTopOffset : 300;

console.log(vectorDialog);

dispatch(openCustomContent(
dialogId,
{
Expand Down
23 changes: 16 additions & 7 deletions web/js/containers/vector-dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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;
Expand Down Expand Up @@ -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>
Expand Down
120 changes: 73 additions & 47 deletions web/js/map/layerbuilder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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);
Expand All @@ -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({
Expand All @@ -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({
Expand All @@ -640,15 +672,13 @@ 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);
wmsLayer.wv = attributes;
return wmsLayer;
}

// console.log('3a');
return layer;
};

Expand All @@ -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;
Expand Down Expand Up @@ -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({
Expand All @@ -761,15 +789,13 @@ 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);
wmsLayer.wv = attributes;
return wmsLayer;
}

console.log('3');
return layer;
};

Expand Down
4 changes: 4 additions & 0 deletions web/js/mapUI/components/update-date/updateDate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ function UpdateDate(props) {
}

async function updateDate(outOfStepChange, skipTtiler) {
console.log('date updated');
const { createLayer } = ui;

const layerGroup = getActiveLayerGroup(layerState);
Expand All @@ -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'
Expand Down
2 changes: 0 additions & 2 deletions web/js/modules/core/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
1 change: 0 additions & 1 deletion web/js/modules/palettes/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 0 additions & 1 deletion web/js/modules/palettes/selectors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`);
Expand Down
Loading

0 comments on commit 4322a56

Please sign in to comment.