@@ -19,7 +19,7 @@ |
import exportData from 'highcharts/modules/export-data' |
import { Breadcrumbs, ContextBar, Header, TokenNavLink } from 'catena/er2_ui' |
import { parseLocation } from 'er2_web_utils' |
-import AttributeTable from 'catena/er2_map_userlayers/js/components/attribute_table/attribute_table' |
+import AttributeTable from 'catena/er2_map_userlayers/js/components/attribute_table/attribute_table_stable' |
import TabbedPanel from 'catena/er2_map_userlayers/js/components/tabbed_panel' |
import UserLayersContainer from 'catena/er2_map_userlayers/js/containers/userlayers' |
import WindowState, { windowStates } from 'catena/er2_map_userlayers/js/components/window_state' |
@@ -58,6 +58,9 @@ |
import Impairments from '../components/watershed/Impairments' |
import type { ErrorType } from '../reducers/error' |
import MCDALegend from '../components/watershed/MCDALegend' |
+import DataLayer from '../components/data_layer' |
+import type { DataLayerType } from '../reducers/data_layer' |
+import ISFStreamDetails from '../components/datalayer/ISFStreamDetails' |
|
addMore(ReactHighcharts.Highcharts) |
exporting(ReactHighcharts.Highcharts) |
@@ -72,6 +75,7 @@ |
onChangeMCDAType: Function, |
onChangeSelectedArea: Function, |
onChangeSelectedAreaName: Function, |
+ onDisplayISFDetails: Function, |
onGetSubRegions: Function, |
onPostMakeDataSourcesSelection: Function, |
onRunModel: Function, |
@@ -81,6 +85,7 @@ |
aoi: AOIType, |
attributeTables: AttributeTablesType, |
contextBar: ContextBarType, |
+ dataLayer: DataLayerType, |
error: ErrorType, |
geoBar: GeoBarType, |
history: HistoryType, |
@@ -149,11 +154,9 @@ |
const parsedLoc = parseLocation(location) |
const activeMapToolbarPanel = theprops.mapToolbar.items.find(item => item.active) |
|
- const isSpecifyInputsVisible = parsedLoc.path === routes.SPECIFY_INPUTS // && theprops.selectAreaBar.visible |
- const mapMoveLeft = !isSpecifyInputsVisible && parsedLoc.path !== routes.MCDA |
- |
const showCatenaPanel = true |
- const tocVisible = (location.pathname === routes.SPECIFY_INPUTS) || (location.pathname === routes.MCDA) |
+ const tocVisible = (location.pathname === routes.SPECIFY_INPUTS) || (location.pathname === routes.MCDA) || (location.pathname === routes.DATALAYER) |
+ const mapMoveLeft = !tocVisible |
|
useEffect(() => { |
// Fetch the application state once, on initial load |
@@ -268,6 +271,18 @@ |
theme={classes} |
/>)} |
/> |
+ <Route |
+ path={routes.DATALAYER} |
+ render={() => ( |
+ <Breadcrumbs |
+ theme={classes} |
+ header={{ |
+ id: ids.DATALAYER, |
+ name: 'Data Layers and Mapping', |
+ }} |
+ items={[]} |
+ />)} |
+ /> |
</React.Fragment>) |
} |
|
@@ -436,7 +451,7 @@ |
|
const renderCatenaMap = () => { |
const sub = s => s.substr(1, s.length - 2) |
- const mapPath = `/(${sub(routes.SPECIFY_INPUTS)}|${sub(routes.MCDA)})` |
+ const mapPath = `/(${sub(routes.SPECIFY_INPUTS)}|${sub(routes.MCDA)}|${sub(routes.DATALAYER)})` |
return ( |
<Route |
path={mapPath} |
@@ -543,6 +558,67 @@ |
/> |
) |
|
+ const renderDataLayersCB = () => ( |
+ <Route |
+ path={routes.DATALAYER} |
+ render={() => ( |
+ <DataLayer |
+ dataLayer={theprops.dataLayer} |
+ actions={theprops.actions} |
+ aoi={theprops.aoi} |
+ map={theprops.map} |
+ catenaMap={catenaMap.current.mapApp} |
+ indicators={theprops.indicators} |
+ mcda={theprops.mcda} |
+ theme={classes} |
+ /> |
+ )} |
+ /> |
+ ) |
+ |
+ const renderDataLayerTP = () => { |
+ const contents = [] |
+ if (this.props.dataLayer.whichLayer === 2) { |
+ const streamGages = this.props.dataLayer.streamGages |
+ if (streamGages.currentStation && streamGages.currentStation.uniqueId) { |
+ contents.push(<StreamGageStation |
+ key="Stream Gage" |
+ theme={rootCss} |
+ dataLayer={this.props.dataLayer} |
+ {...this.props.actions} |
+ />) |
+ } |
+ } else if (this.props.dataLayer.whichLayer === 3) { |
+ if (this.props.dataLayer.waterRights.currentStructure !== undefined && this.props.dataLayer.waterRights.currentStructure !== null) { |
+ contents.push(<HydroBaseStructure |
+ key="Water Rights" |
+ theme={rootCss} |
+ {...this.props.actions} |
+ dataLayer={this.props.dataLayer} |
+ />) |
+ } |
+ } else if (this.props.dataLayer.whichLayer === 4) { |
+ if (this.props.dataLayer.cwcbLayer.current !== undefined && this.props.dataLayer.cwcbLayer.current !== null) { |
+ contents.push(<ISFStreamDetails |
+ key="ISF" |
+ theme={rootCss} |
+ {...this.props.actions} |
+ dataLayer={this.props.dataLayer} |
+ />) |
+ } |
+ } |
+ return contents |
+ } |
+ |
+ const isMapReady = () => { |
+ if (catenaMap !== undefined && catenaMap !== null) { |
+ if (catenaMap['mapApp'] !== undefined && catenaMap.mapApp !== null) { |
+ return true |
+ } |
+ } |
+ return false |
+ } |
+ |
if (!theprops.token.value) { |
// Render loading page until the server state is available |
return (<div className={classes.root}> |
@@ -558,6 +634,11 @@ |
const analysisPanelContents = getAnalysisPanelContents() |
const theMuiTheme = muiTheme(colors, null, overrides, palette) |
const hasMap = parsedLoc.path !== routes.INSTRUCTIONS && parsedLoc.path !== routes.HOME |
+ |
+ // TP stands for Tabbed Panel and CB stands for Context Bar |
+ const dataLayerVisible = location.pathname === routes.DATALAYER && theprops.dataLayer.visible && isMapReady() |
+ if (dataLayerVisible) analysisPanelContents = renderDataLayerTP() |
+ |
return ( |
<MuiThemeProvider theme={theMuiTheme}> |
<div className={classes.root}> |
@@ -574,6 +655,7 @@ |
)} |
{catenaMap.current && renderAoiCB()} |
{catenaMap.current && theprops.aoi.subRegion.features !== undefined && renderMcdaCB()} |
+ {catenaMap.current && renderDataLayersCB()} |
{renderPopupDisclaimer()} |
</div> |
</MuiThemeProvider> |
@@ -590,6 +672,7 @@ |
aoi: state.aoi, |
attributeTables: state.attributeTables, |
contextBar: state.contextBar, |
+ dataLayer: state.dataLayer, |
error: state.error, |
geoBar: state.geoBar, |
logger: state.logger, |