Skip to content

Commit

Permalink
Sitemap NLCD Classes (#26)
Browse files Browse the repository at this point in the history
* sitemap show nlcd class in location popup

* sitemap show NLCD class in table view

* sitemap grouped overlays support with nlcd layers

* clean up grouped layer control presentation

* overlay legend support

* NLCD Impervious Surface support with legend

* bump version to v1.5.5
  • Loading branch information
Frencil authored Oct 12, 2020
1 parent 14708ac commit e96ee5e
Show file tree
Hide file tree
Showing 20 changed files with 4,047 additions and 3,435 deletions.
346 changes: 312 additions & 34 deletions lib/components/SiteMap/SiteMapContainer.js

Large diffs are not rendered by default.

13 changes: 9 additions & 4 deletions lib/components/SiteMap/SiteMapContext.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ declare namespace Provider {
unusableVerticalSpace: PropTypes.Requireable<number>;
mapCenter: PropTypes.Requireable<(number | null | undefined)[]>;
mapZoom: PropTypes.Requireable<number>;
mapTileLayer: PropTypes.Requireable<string>;
mapBaseLayer: PropTypes.Requireable<string>;
location: PropTypes.Requireable<string>;
selection: PropTypes.Requireable<string>;
selectedItems: PropTypes.Requireable<(string | null | undefined)[]>;
Expand Down Expand Up @@ -50,6 +50,7 @@ declare function useSiteMapContext(): any[] | {
status: null;
error: null;
};
isAtCenter: boolean;
};
aspectRatio: {
currentValue: null;
Expand All @@ -69,8 +70,9 @@ declare function useSiteMapContext(): any[] | {
zoom: null;
center: never[];
bounds: null;
tileLayer: null;
tileLayerAutoChangedAbove17: boolean;
baseLayer: null;
baseLayerAutoChangedAbove17: boolean;
overlays: Set<any>;
zoomedIcons: {};
repositionOpenPopupFunc: null;
};
Expand Down Expand Up @@ -98,14 +100,17 @@ declare function useSiteMapContext(): any[] | {
sites: {};
filters: {
search: null;
legendOpen: boolean;
features: {
open: boolean;
available: {};
visible: {
[k: string]: boolean;
};
collapsed: Set<any>;
};
overlays: {
expanded: Set<any>;
};
};
fullscreen: boolean;
};
Expand Down
118 changes: 99 additions & 19 deletions lib/components/SiteMap/SiteMapContext.js
Original file line number Diff line number Diff line change
Expand Up @@ -169,10 +169,30 @@ var centerIsValid = function centerIsValid(center) {
return Array.isArray(center) && center.length === 2 && center.every(function (v) {
return typeof v === 'number';
});
};
}; // Creates fetch objects with an AWAITING_CALL status based on current state.
// New fetches are created for all fetchable feature data found to be active (the feature is
// available and visible), within the current bounds of the map, and not already fetched.
// Optionally include required sites to consider "in bounds" (useful for when a focus location
// is a site feature like a plot far from the site center so the site itself may not be seen as
// "in bounds").


var calculateFeatureDataFetches = function calculateFeatureDataFetches(state) {
var requiredSites = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
var sitesInMap = (0, _SiteMapUtils.calculateLocationsInMap)(state.sites, state.map.bounds, true, 0.06);
var requiredSitesArray = [];

if (requiredSites) {
requiredSitesArray = (Array.isArray(requiredSites) ? requiredSites : [requiredSites]).filter(function (siteCode) {
return Object.keys(state.sites).includes(siteCode);
});
}

requiredSitesArray.forEach(function (siteCode) {
if (!sitesInMap.includes(siteCode)) {
sitesInMap.push(siteCode);
}
});

if (!sitesInMap.length) {
return state;
Expand Down Expand Up @@ -397,6 +417,7 @@ var calculateFeatureDataFetches = function calculateFeatureDataFetches(state) {

var reducer = function reducer(state, action) {
var setMethod = null;
var calculateFetchesRequiredSites = null;

var newState = _extends({}, state);

Expand Down Expand Up @@ -661,14 +682,14 @@ var reducer = function reducer(state, action) {


var updateMapTileWithZoom = function updateMapTileWithZoom() {
if (newState.map.zoom <= 17 && state.map.tileLayer !== _SiteMapUtils.TILE_LAYERS.NATGEO_WORLD_MAP.KEY && state.map.tileLayerAutoChangedAbove17) {
newState.map.tileLayer = _SiteMapUtils.TILE_LAYERS.NATGEO_WORLD_MAP.KEY;
newState.map.tileLayerAutoChangedAbove17 = false;
if (newState.map.zoom <= 17 && state.map.baseLayer !== _SiteMapUtils.BASE_LAYERS.NATGEO_WORLD_MAP.KEY && state.map.baseLayerAutoChangedAbove17) {
newState.map.baseLayer = _SiteMapUtils.BASE_LAYERS.NATGEO_WORLD_MAP.KEY;
newState.map.baseLayerAutoChangedAbove17 = false;
}

if (newState.map.zoom >= 17 && state.map.tileLayer === _SiteMapUtils.TILE_LAYERS.NATGEO_WORLD_MAP.KEY) {
newState.map.tileLayer = _SiteMapUtils.TILE_LAYERS.WORLD_IMAGERY.KEY;
newState.map.tileLayerAutoChangedAbove17 = true;
if (newState.map.zoom >= 17 && state.map.baseLayer === _SiteMapUtils.BASE_LAYERS.NATGEO_WORLD_MAP.KEY) {
newState.map.baseLayer = _SiteMapUtils.BASE_LAYERS.WORLD_IMAGERY.KEY;
newState.map.baseLayerAutoChangedAbove17 = true;
}
}; // Shortcuts for deailing with hierarchies

Expand Down Expand Up @@ -731,6 +752,7 @@ var reducer = function reducer(state, action) {
}

newState.map.zoom = action.zoom;
newState.focusLocation.isAtCenter = false;

if (centerIsValid(action.center)) {
newState.map.center = action.center;
Expand All @@ -749,6 +771,7 @@ var reducer = function reducer(state, action) {
newState.map.bounds = action.bounds;
}

newState.focusLocation.isAtCenter = false;
return calculateFeatureDataFetches(newState);

case 'setMapCenter':
Expand All @@ -761,14 +784,44 @@ var reducer = function reducer(state, action) {
}

newState.map.center = _toConsumableArray(action.center);
newState.focusLocation.isAtCenter = false;
return calculateFeatureDataFetches(newState);

case 'setMapTileLayer':
if (!Object.keys(_SiteMapUtils.TILE_LAYERS).includes(action.tileLayer)) {
case 'setMapBaseLayer':
if (action.baseLayer !== null && !Object.keys(_SiteMapUtils.BASE_LAYERS).includes(action.baseLayer)) {
return state;
}

newState.map.baseLayer = action.baseLayer;
return newState;

case 'setMapOverlayVisibility':
if (!_SiteMapUtils.OVERLAYS[action.overlay]) {
return state;
}

newState.map.tileLayer = action.tileLayer;
if (action.visible) {
newState.map.overlays.add(action.overlay);
newState.filters.overlays.expanded.add(action.overlay);
} else {
newState.map.overlays.delete(action.overlay);
newState.filters.overlays.expanded.delete(action.overlay);
}

return newState;

case 'setMapOverlays':
if (!Array.isArray(action.overlays) || !action.overlays.every(function (o) {
return _SiteMapUtils.OVERLAYS[o];
})) {
return state;
}

newState.map.overlays = new Set(action.overlays);
newState.filters.overlays.expanded = new Set();
action.overlays.forEach(function (overlay) {
newState.filters.overlays.expanded.add(overlay);
});
return newState;

case 'setMapRepositionOpenPopupFunc':
Expand All @@ -778,14 +831,15 @@ var reducer = function reducer(state, action) {
case 'showFullObservatory':
newState.map.center = _SiteMapUtils.OBSERVATORY_CENTER;
newState.map.zoom = (0, _SiteMapUtils.deriveFullObservatoryZoomLevel)(action.mapRef);
newState.focusLocation.isAtCenter = false;
return newState;
// Features

case 'setFilterFeaturesOpen':
newState.filters.features.open = !!action.open;
case 'setLegendOpen':
newState.filters.legendOpen = !!action.open;
return newState;

case 'setFilterFeatureVisibility':
case 'setLegendFeatureOptionVisibility':
if (!Object.keys(_SiteMapUtils.FEATURES).includes(action.feature) || typeof action.visible !== 'boolean') {
return state;
}
Expand All @@ -794,21 +848,37 @@ var reducer = function reducer(state, action) {
applyFeatureVisibilityToParents(action.feature);
return calculateFeatureDataFetches(newState);

case 'setFilterFeatureCollapsed':
case 'setLegendFeatureOptionCollapsed':
if (!Object.keys(_SiteMapUtils.FEATURES).includes(action.feature)) {
return state;
}

newState.filters.features.collapsed.add(action.feature);
return newState;

case 'setFilterFeatureExpanded':
case 'setLegendFeatureOptionExpanded':
if (!Object.keys(_SiteMapUtils.FEATURES).includes(action.feature)) {
return state;
}

newState.filters.features.collapsed.delete(action.feature);
return newState;

case 'setLegendOverlayOptionCollapsed':
if (!Object.keys(_SiteMapUtils.OVERLAYS).includes(action.overlay)) {
return state;
}

newState.filters.overlays.expanded.delete(action.overlay);
return newState;

case 'setLegendOverlayOptionExpanded':
if (!Object.keys(_SiteMapUtils.OVERLAYS).includes(action.overlay)) {
return state;
}

newState.filters.overlays.expanded.add(action.overlay);
return newState;
// Focus Location

case 'setNewFocusLocation':
Expand Down Expand Up @@ -864,7 +934,12 @@ var reducer = function reducer(state, action) {
completeOverallFetch();
newState.map = (0, _SiteMapUtils.getMapStateForFocusLocation)(newState);
updateMapTileWithZoom();
return calculateFeatureDataFetches((0, _SiteMapUtils.calculateFeatureAvailability)(newState));

if (newState.focusLocation.data && newState.focusLocation.data.siteCode) {
calculateFetchesRequiredSites = [newState.focusLocation.data.siteCode];
}

return calculateFeatureDataFetches((0, _SiteMapUtils.calculateFeatureAvailability)(newState), calculateFetchesRequiredSites);
// Fetch and Import

case 'awaitingFeatureDataFetchesTriggered':
Expand Down Expand Up @@ -912,7 +987,12 @@ var reducer = function reducer(state, action) {

newState.overallFetch.pendingHierarchy -= 1;
completeOverallFetch();
return calculateFeatureDataFetches(newState);

if (state.focusLocation.isAtCenter && state.focusLocation.data && state.focusLocation.data.siteCode) {
calculateFetchesRequiredSites = [state.focusLocation.data.siteCode];
}

return calculateFeatureDataFetches(newState, calculateFetchesRequiredSites);

case 'setDomainLocationHierarchyFetchFailed':
/* eslint-disable max-len */
Expand Down Expand Up @@ -1033,7 +1113,7 @@ var Provider = function Provider(props) {
fullscreen = props.fullscreen,
mapZoom = props.mapZoom,
mapCenter = props.mapCenter,
mapTileLayer = props.mapTileLayer,
mapBaseLayer = props.mapBaseLayer,
locationProp = props.location,
selection = props.selection,
validItems = props.validItems,
Expand All @@ -1060,7 +1140,7 @@ var Provider = function Provider(props) {
initialState.map = _extends({}, initialState.map, {
zoom: initialMapZoom,
center: mapCenter,
tileLayer: mapTileLayer
baseLayer: mapBaseLayer
});

if (typeof locationProp === 'string') {
Expand Down
67 changes: 64 additions & 3 deletions lib/components/SiteMap/SiteMapFeature.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _HelpOutline = _interopRequireDefault(require("@material-ui/icons/HelpOutline"));

var _TouchApp = _interopRequireDefault(require("@material-ui/icons/TouchApp"));

var _Terrain = _interopRequireDefault(require("@material-ui/icons/Terrain"));
Expand Down Expand Up @@ -213,6 +215,14 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
},
unselectable: {
filter: 'saturate(0.3) brightness(2)'
},
nlcdClass: {
width: '36px',
height: '12px',
border: '1px solid black',
marginLeft: theme.spacing(1.5),
marginBottom: '-2px',
display: 'inline-block'
}
};
});
Expand Down Expand Up @@ -678,7 +688,7 @@ var SiteMapFeature = function SiteMapFeature(props) {
"data-selenium": "sitemap-map-popup-plotSlope"
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
variant: "subtitle2"
}, "Plot Slope"), renderNumericalValue(loc.slopeAspect, 'Aspect', '�', 2, 'Slope Aspect', right), renderNumericalValue(loc.slopeGradient, 'Gradient', '%', 2, 'Slope Gradient', right));
}, "Plot Slope"), renderNumericalValue(loc.slopeAspect, 'Aspect', "\xB0", 2, 'Slope Aspect', right), renderNumericalValue(loc.slopeGradient, 'Gradient', '%', 2, 'Slope Gradient', right));
};
/**
Render: Plot Sampling Modules
Expand Down Expand Up @@ -721,7 +731,7 @@ var SiteMapFeature = function SiteMapFeature(props) {
variant: "subtitle2"
}, "Area"), /*#__PURE__*/_react.default.createElement("div", {
className: classes.startFlex
}, renderNumericalValue(areaKm2, null, 'km²', 2, 'Area (km²)'), areaAcres === null ? null : /*#__PURE__*/_react.default.createElement("div", {
}, renderNumericalValue(areaKm2, null, "km\xB2", 2, "Area (km\xB2)"), areaAcres === null ? null : /*#__PURE__*/_react.default.createElement("div", {
style: {
marginLeft: _Theme.default.spacing(1)
}
Expand Down Expand Up @@ -816,6 +826,57 @@ var SiteMapFeature = function SiteMapFeature(props) {
variant: "caption"
}, (loc.children || []).length));
};
/**
Render: Popup Row; NLCD Classes (nationalLandCoverDatabase2001)
*/


var renderNlcdClass = function renderNlcdClass(loc) {
var nlcd = /*#__PURE__*/_react.default.createElement("i", null, "n/a");

var titleStyle = {};

if (loc.nlcdClass) {
nlcd = loc.nlcdClass;

if (_SiteMapUtils.NLCD_CLASSES[loc.nlcdClass]) {
titleStyle.marginBottom = '-4px';
var tooltip = "".concat(_SiteMapUtils.NLCD_CLASSES[loc.nlcdClass].name, " - ").concat(_SiteMapUtils.NLCD_CLASSES[loc.nlcdClass].description);
nlcd = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _SiteMapUtils.NLCD_CLASSES[loc.nlcdClass].name, /*#__PURE__*/_react.default.createElement("div", {
className: classes.nlcdClass,
title: _SiteMapUtils.NLCD_CLASSES[loc.nlcdClass].name,
style: {
backgroundColor: _SiteMapUtils.NLCD_CLASSES[loc.nlcdClass].color
}
}), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
title: tooltip
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
size: "small",
style: {
marginLeft: _Theme.default.spacing(0.5),
marginBottom: '1px'
},
"aria-label": "NLCD Class Description"
}, /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
style: {
fontSize: '1rem'
}
}))));
}
}

return /*#__PURE__*/_react.default.createElement(_Grid.default, {
key: "nlcdClass",
item: true,
xs: 12,
"data-selenium": "sitemap-map-popup-nlcdClass"
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
variant: "subtitle2",
style: titleStyle
}, "NLCD Class"), /*#__PURE__*/_react.default.createElement(_Typography.default, {
variant: "caption"
}, nlcd));
};
/**
Render: Popup Row; Location Site and Domain
*/
Expand Down Expand Up @@ -881,7 +942,7 @@ var SiteMapFeature = function SiteMapFeature(props) {
spacing: 1
}, renderCoordsAndElevation(loc), additionalRows.map(function (row) {
return typeof row === 'function' ? row(loc) : row;
}), renderLocationSiteAndDomain(siteCode)));
}), loc.nlcdClass ? renderNlcdClass(loc) : null, renderLocationSiteAndDomain(siteCode)));
};
/**
Render: Boundary popup
Expand Down
Loading

0 comments on commit e96ee5e

Please sign in to comment.