Displaying differences for changeset
 
display as  

config.yml

@@ -10,7 +10,7 @@
 # The current version of your application.  This will be advertised
 # through your REST API, and should take the form
 # "<major_version>.<minor_version>.<patch>".
-version: 0.3.1
+version: 0.3.2
 
 # The kind of application.  Currently eRAMS supports two kinds of applications, `system` and `app`.
 # System apps have pre-configured installation and configurations, while all `app` applications are

static/er2_watershedpriority/js/actions/aoi.js

@@ -1,25 +1,42 @@
 // @flow
 import * as types from '../constants/action_types'
 import stringify from 'json-stringify-safe'
-import { setTabbedPanelWindowState } from 'catena/er2_map_userlayers/js/actions/tabbed_panel'
+import { setTabbedPanelWindowState } from '@owsi/catena/er2_map_userlayers/js/actions/tabbed_panel'
 import { updateAppState } from './server_state'
 import { onSetModelRunStatus } from './mcda'
 import { setErrorMessage } from './error'
 
-export const onSetRegion = initialState => (dispatch: Function, getState: Function) => {
+export const onSetRegion = (initialState) => (
+    dispatch: Function,
+    getState: Function,
+) => {
     dispatch({ type: types.RESET_AOI })
     dispatch({ type: types.SET_AOI_SELECT_STATE, initialState })
 }
 
-const isFetchingSubRegions = isFetching => (dispatch: Function, getState: Function) => {
+const isFetchingSubRegions = (isFetching) => (
+    dispatch: Function,
+    getState: Function,
+) => {
     // Pass the indicators reducer to MCDA so it can access indicatorLookup
     const indicators = getState().indicators
     dispatch({ type: types.SET_FETCHING_SUBREGION, isFetching, indicators })
 }
-const hasFetchedSubRegions = fetched => ({ type: types.SET_FETCHED_SUBREGION, fetched })
-const setSubRegions = (regionGeometry, result, subRegionType) => ({ type: types.SET_SUBREGION, regionGeometry, result, subRegionType })
+const hasFetchedSubRegions = (fetched) => ({
+    type: types.SET_FETCHED_SUBREGION,
+    fetched,
+})
+const setSubRegions = (regionGeometry, result, subRegionType) => ({
+    type: types.SET_SUBREGION,
+    regionGeometry,
+    result,
+    subRegionType,
+})
 
-export const onGetSubRegions = (regionGeometry, subRegionType) => (dispatch: Function, getState: Function) => {
+export const onGetSubRegions = (regionGeometry, subRegionType) => (
+    dispatch: Function,
+    getState: Function,
+) => {
     const token = getState().token.value
 
     dispatch(isFetchingSubRegions(true))
@@ -28,13 +45,15 @@
         method: 'POST',
         body: stringify({ token, regionGeometry, subRegionType }),
     })
-        .then(response => response.json())
+        .then((response) => response.json())
         .then((json) => {
             if (json.error) {
                 dispatch(setErrorMessage(json.error))
                 dispatch(hasFetchedSubRegions(false))
             } else {
-                dispatch(setSubRegions(regionGeometry, json.result, subRegionType))
+                dispatch(
+                    setSubRegions(regionGeometry, json.result, subRegionType),
+                )
                 dispatch(hasFetchedSubRegions(true))
                 dispatch(updateAppState(['watershedTool', 'aoi']))
             }
@@ -43,4 +62,7 @@
         })
 }
 
-export const onSelectSubunit = subunit => ({ type: types.SET_SELECTED_SUBUNIT, subunit })
+export const onSelectSubunit = (subunit) => ({
+    type: types.SET_SELECTED_SUBUNIT,
+    subunit,
+})

static/er2_watershedpriority/js/actions/data_layer.js

@@ -1,8 +1,11 @@
 // @flow
-import { setTabbedPanelWindowState } from 'catena/er2_map_userlayers/js/actions/tabbed_panel'
+import { setTabbedPanelWindowState } from '@owsi/catena/er2_map_userlayers/js/actions/tabbed_panel'
 import * as types from '../constants/action_types'
 
-const setFetchingDrHuc8s = isFetching => ({ type: types.SET_FETCHING_DR_HUC8S, isFetching })
+const setFetchingDrHuc8s = (isFetching) => ({
+    type: types.SET_FETCHING_DR_HUC8S,
+    isFetching,
+})
 export const onGetDrHuc8s = () => (dispatch: Function, getState: Function) => {
     const token = getState().token.value
     const map = getState().map
@@ -15,14 +18,17 @@
             extent: map.mapView.extent,
         }),
     })
-        .then(response => response.json())
+        .then((response) => response.json())
         .then((json) => {
             dispatch({ type: types.SET_DR_HUC8S, drHuc8Data: json })
             dispatch(setFetchingDrHuc8s(false))
         })
 }
 
-const setFetchingDrHuc10s = isFetching => ({ type: types.SET_FETCHING_DR_HUC10S, isFetching })
+const setFetchingDrHuc10s = (isFetching) => ({
+    type: types.SET_FETCHING_DR_HUC10S,
+    isFetching,
+})
 export const onGetDrHuc10s = () => (dispatch: Function, getState: Function) => {
     const token = getState().token.value
     const map = getState().map
@@ -35,14 +41,17 @@
             extent: map.mapView.extent,
         }),
     })
-        .then(response => response.json())
+        .then((response) => response.json())
         .then((json) => {
             dispatch({ type: types.SET_DR_HUC10S, drHuc10Data: json })
             dispatch(setFetchingDrHuc10s(false))
         })
 }
 
-const setFetchingDrHuc12s = isFetching => ({ type: types.SET_FETCHING_DR_HUC12S, isFetching })
+const setFetchingDrHuc12s = (isFetching) => ({
+    type: types.SET_FETCHING_DR_HUC12S,
+    isFetching,
+})
 export const onGetDrHuc12s = () => (dispatch: Function, getState: Function) => {
     const token = getState().token.value
     const map = getState().map
@@ -55,19 +64,28 @@
             extent: map.mapView.extent,
         }),
     })
-        .then(response => response.json())
+        .then((response) => response.json())
         .then((json) => {
             dispatch({ type: types.SET_DR_HUC12S, drHuc12Data: json })
             dispatch(setFetchingDrHuc12s(false))
         })
 }
 
-const setFetchingDrCounties = isFetching => ({ type: types.SET_FETCHING_DR_COUNTIES, isFetching })
-export const onGetDrCounties = () => (dispatch: Function, getState: Function) => {
+const setFetchingDrCounties = (isFetching) => ({
+    type: types.SET_FETCHING_DR_COUNTIES,
+    isFetching,
+})
+export const onGetDrCounties = () => (
+    dispatch: Function,
+    getState: Function,
+) => {
     const token = getState().token.value
     const map = getState().map
 
-    dispatch({ type: types.SET_DR_COUNTIES, drCountyData: { watersheds: null } })
+    dispatch({
+        type: types.SET_DR_COUNTIES,
+        drCountyData: { watersheds: null },
+    })
     dispatch(setFetchingDrCounties(true))
     fetch(`/${getState().meta.name}/api/v1/dl/drCountyLayer/?token=${token}`, {
         method: 'POST',
@@ -75,19 +93,28 @@
             extent: map.mapView.extent,
         }),
     })
-        .then(response => response.json())
+        .then((response) => response.json())
         .then((json) => {
             dispatch({ type: types.SET_DR_COUNTIES, drCountyData: json })
             dispatch(setFetchingDrCounties(false))
         })
 }
 
-const setFetchingMunDrHuc8s = isFetching => ({ type: types.SET_FETCHING_MUN_DR_HUC8S, isFetching })
-export const onGetMunDrHuc8s = () => (dispatch: Function, getState: Function) => {
+const setFetchingMunDrHuc8s = (isFetching) => ({
+    type: types.SET_FETCHING_MUN_DR_HUC8S,
+    isFetching,
+})
+export const onGetMunDrHuc8s = () => (
+    dispatch: Function,
+    getState: Function,
+) => {
     const token = getState().token.value
     const map = getState().map
 
-    dispatch({ type: types.SET_MUN_DR_HUC8S, munDrHuc8Data: { watersheds: null } })
+    dispatch({
+        type: types.SET_MUN_DR_HUC8S,
+        munDrHuc8Data: { watersheds: null },
+    })
     dispatch(setFetchingMunDrHuc8s(true))
     fetch(`/${getState().meta.name}/api/v1/dl/munDrHuc8Layer/?token=${token}`, {
         method: 'POST',
@@ -95,154 +122,248 @@
             extent: map.mapView.extent,
         }),
     })
-        .then(response => response.json())
+        .then((response) => response.json())
         .then((json) => {
             dispatch({ type: types.SET_MUN_DR_HUC8S, munDrHuc8Data: json })
             dispatch(setFetchingMunDrHuc8s(false))
         })
 }
 
-const setFetchingMunDrHuc10s = isFetching => ({ type: types.SET_FETCHING_MUN_DR_HUC10S, isFetching })
-export const onGetMunDrHuc10s = () => (dispatch: Function, getState: Function) => {
+const setFetchingMunDrHuc10s = (isFetching) => ({
+    type: types.SET_FETCHING_MUN_DR_HUC10S,
+    isFetching,
+})
+export const onGetMunDrHuc10s = () => (
+    dispatch: Function,
+    getState: Function,
+) => {
     const token = getState().token.value
     const map = getState().map
 
-    dispatch({ type: types.SET_MUN_DR_HUC10S, munDrHuc10Data: { watersheds: null } })
+    dispatch({
+        type: types.SET_MUN_DR_HUC10S,
+        munDrHuc10Data: { watersheds: null },
+    })
     dispatch(setFetchingMunDrHuc10s(true))
-    fetch(`/${getState().meta.name}/api/v1/dl/munDrHuc10Layer/?token=${token}`, {
-        method: 'POST',
-        body: JSON.stringify({
-            extent: map.mapView.extent,
-        }),
-    })
-        .then(response => response.json())
+    fetch(
+        `/${getState().meta.name}/api/v1/dl/munDrHuc10Layer/?token=${token}`,
+        {
+            method: 'POST',
+            body: JSON.stringify({
+                extent: map.mapView.extent,
+            }),
+        },
+    )
+        .then((response) => response.json())
         .then((json) => {
             dispatch({ type: types.SET_MUN_DR_HUC10S, munDrHuc10Data: json })
             dispatch(setFetchingMunDrHuc10s(false))
         })
 }
 
-const setFetchingMunDrHuc12s = isFetching => ({ type: types.SET_FETCHING_MUN_DR_HUC12S, isFetching })
-export const onGetMunDrHuc12s = () => (dispatch: Function, getState: Function) => {
+const setFetchingMunDrHuc12s = (isFetching) => ({
+    type: types.SET_FETCHING_MUN_DR_HUC12S,
+    isFetching,
+})
+export const onGetMunDrHuc12s = () => (
+    dispatch: Function,
+    getState: Function,
+) => {
     const token = getState().token.value
     const map = getState().map
 
-    dispatch({ type: types.SET_MUN_DR_HUC12S, munDrHuc12Data: { watersheds: null } })
+    dispatch({
+        type: types.SET_MUN_DR_HUC12S,
+        munDrHuc12Data: { watersheds: null },
+    })
     dispatch(setFetchingMunDrHuc12s(true))
-    fetch(`/${getState().meta.name}/api/v1/dl/munDrHuc12Layer/?token=${token}`, {
-        method: 'POST',
-        body: JSON.stringify({
-            extent: map.mapView.extent,
-        }),
-    })
-        .then(response => response.json())
+    fetch(
+        `/${getState().meta.name}/api/v1/dl/munDrHuc12Layer/?token=${token}`,
+        {
+            method: 'POST',
+            body: JSON.stringify({
+                extent: map.mapView.extent,
+            }),
+        },
+    )
+        .then((response) => response.json())
         .then((json) => {
             dispatch({ type: types.SET_MUN_DR_HUC12S, munDrHuc12Data: json })
             dispatch(setFetchingMunDrHuc12s(false))
         })
 }
 
-const setFetchingMunDrCounties = isFetching => ({ type: types.SET_FETCHING_MUN_DR_COUNTIES, isFetching })
-export const onGetMunDrCounties = () => (dispatch: Function, getState: Function) => {
+const setFetchingMunDrCounties = (isFetching) => ({
+    type: types.SET_FETCHING_MUN_DR_COUNTIES,
+    isFetching,
+})
+export const onGetMunDrCounties = () => (
+    dispatch: Function,
+    getState: Function,
+) => {
     const token = getState().token.value
     const map = getState().map
 
-    dispatch({ type: types.SET_MUN_DR_COUNTIES, munDrCountyData: { watersheds: null } })
+    dispatch({
+        type: types.SET_MUN_DR_COUNTIES,
+        munDrCountyData: { watersheds: null },
+    })
     dispatch(setFetchingMunDrCounties(true))
-    fetch(`/${getState().meta.name}/api/v1/dl/munDrCountyLayer/?token=${token}`, {
-        method: 'POST',
-        body: JSON.stringify({
-            extent: map.mapView.extent,
-        }),
-    })
-        .then(response => response.json())
+    fetch(
+        `/${getState().meta.name}/api/v1/dl/munDrCountyLayer/?token=${token}`,
+        {
+            method: 'POST',
+            body: JSON.stringify({
+                extent: map.mapView.extent,
+            }),
+        },
+    )
+        .then((response) => response.json())
         .then((json) => {
             dispatch({ type: types.SET_MUN_DR_COUNTIES, munDrCountyData: json })
             dispatch(setFetchingMunDrCounties(false))
         })
 }
 
-const setFetchingCoEcoregions = isFetching => ({ type: types.SET_FETCHING_CO_ECOREGIONS, isFetching })
-export const onGetCoEcoregions = () => (dispatch: Function, getState: Function) => {
+const setFetchingCoEcoregions = (isFetching) => ({
+    type: types.SET_FETCHING_CO_ECOREGIONS,
+    isFetching,
+})
+export const onGetCoEcoregions = () => (
+    dispatch: Function,
+    getState: Function,
+) => {
     const token = getState().token.value
     const map = getState().map
 
-    dispatch({ type: types.SET_CO_ECOREGIONS, coEcoregionsData: { areas: null } })
+    dispatch({
+        type: types.SET_CO_ECOREGIONS,
+        coEcoregionsData: { areas: null },
+    })
     dispatch(setFetchingCoEcoregions(true))
-    fetch(`/${getState().meta.name}/api/v1/dl/coEcoRegionsLayer/?token=${token}`, {
-        method: 'POST',
-        body: JSON.stringify({
-            extent: map.mapView.extent,
-        }),
-    })
-        .then(response => response.json())
+    fetch(
+        `/${getState().meta.name}/api/v1/dl/coEcoRegionsLayer/?token=${token}`,
+        {
+            method: 'POST',
+            body: JSON.stringify({
+                extent: map.mapView.extent,
+            }),
+        },
+    )
+        .then((response) => response.json())
         .then((json) => {
             dispatch({ type: types.SET_CO_ECOREGIONS, coEcoregionsData: json })
             dispatch(setFetchingCoEcoregions(false))
         })
 }
 
-const setFetchingCoLandOwnership = isFetching => ({ type: types.SET_FETCHING_CO_LAND_OWNERSHIP, isFetching })
-export const onGetCoLandOwnership = () => (dispatch: Function, getState: Function) => {
+const setFetchingCoLandOwnership = (isFetching) => ({
+    type: types.SET_FETCHING_CO_LAND_OWNERSHIP,
+    isFetching,
+})
+export const onGetCoLandOwnership = () => (
+    dispatch: Function,
+    getState: Function,
+) => {
     const token = getState().token.value
     const map = getState().map
 
-    dispatch({ type: types.SET_CO_LAND_OWNERSHIP, colandOwnerData: { areas: null } })
+    dispatch({
+        type: types.SET_CO_LAND_OWNERSHIP,
+        colandOwnerData: { areas: null },
+    })
     dispatch(setFetchingCoLandOwnership(true))
-    fetch(`/${getState().meta.name}/api/v1/dl/coLandOwnershipLayer/?token=${token}`, {
-        method: 'POST',
-        body: JSON.stringify({
-            extent: map.mapView.extent,
-        }),
-    })
-        .then(response => response.json())
+    fetch(
+        `/${
+            getState().meta.name
+        }/api/v1/dl/coLandOwnershipLayer/?token=${token}`,
+        {
+            method: 'POST',
+            body: JSON.stringify({
+                extent: map.mapView.extent,
+            }),
+        },
+    )
+        .then((response) => response.json())
         .then((json) => {
-            dispatch({ type: types.SET_CO_LAND_OWNERSHIP, colandOwnerData: json })
+            dispatch({
+                type: types.SET_CO_LAND_OWNERSHIP,
+                colandOwnerData: json,
+            })
             dispatch(setFetchingCoLandOwnership(false))
         })
 }
 
-const setFetchingCoWatershedPlans = isFetching => ({ type: types.SET_FETCHING_CO_WATERSHED_PLANS, isFetching })
-export const onGetCoWatershedPlans = () => (dispatch: Function, getState: Function) => {
+const setFetchingCoWatershedPlans = (isFetching) => ({
+    type: types.SET_FETCHING_CO_WATERSHED_PLANS,
+    isFetching,
+})
+export const onGetCoWatershedPlans = () => (
+    dispatch: Function,
+    getState: Function,
+) => {
     const token = getState().token.value
     const map = getState().map
 
-    dispatch({ type: types.SET_CO_WATERSHED_PLANS, coWatershedPlanData: { areas: null } })
+    dispatch({
+        type: types.SET_CO_WATERSHED_PLANS,
+        coWatershedPlanData: { areas: null },
+    })
     dispatch(setFetchingCoWatershedPlans(true))
-    fetch(`/${getState().meta.name}/api/v1/dl/coWatershedPlansLayer/?token=${token}`, {
-        method: 'POST',
-        body: JSON.stringify({
-            extent: map.mapView.extent,
-        }),
-    })
-        .then(response => response.json())
+    fetch(
+        `/${
+            getState().meta.name
+        }/api/v1/dl/coWatershedPlansLayer/?token=${token}`,
+        {
+            method: 'POST',
+            body: JSON.stringify({
+                extent: map.mapView.extent,
+            }),
+        },
+    )
+        .then((response) => response.json())
         .then((json) => {
-            dispatch({ type: types.SET_CO_WATERSHED_PLANS, coWatershedPlanData: json })
+            dispatch({
+                type: types.SET_CO_WATERSHED_PLANS,
+                coWatershedPlanData: json,
+            })
             dispatch(setFetchingCoWatershedPlans(false))
         })
 }
 
-const setFetchingUrbanAreas = isFetching => ({ type: types.SET_FETCHING_URBAN_AREAS, isFetching })
-export const onGetMs4UrbanAreas = () => (dispatch: Function, getState: Function) => {
+const setFetchingUrbanAreas = (isFetching) => ({
+    type: types.SET_FETCHING_URBAN_AREAS,
+    isFetching,
+})
+export const onGetMs4UrbanAreas = () => (
+    dispatch: Function,
+    getState: Function,
+) => {
     const token = getState().token.value
     const map = getState().map
 
     dispatch({ type: types.SET_URBAN_AREAS, urbanAreaData: { areas: null } })
     dispatch(setFetchingUrbanAreas(true))
-    fetch(`/${getState().meta.name}/api/v1/dl/urbanAreaDataLayer/?token=${token}`, {
-        method: 'POST',
-        body: JSON.stringify({
-            extent: map.mapView.extent,
-        }),
-    })
-        .then(response => response.json())
+    fetch(
+        `/${getState().meta.name}/api/v1/dl/urbanAreaDataLayer/?token=${token}`,
+        {
+            method: 'POST',
+            body: JSON.stringify({
+                extent: map.mapView.extent,
+            }),
+        },
+    )
+        .then((response) => response.json())
         .then((json) => {
             dispatch({ type: types.SET_URBAN_AREAS, urbanAreaData: json })
             dispatch(setFetchingUrbanAreas(false))
         })
 }
 
-const setFetchingWwtfs = isFetching => ({ type: types.SET_FETCHING_WWTFS, isFetching })
+const setFetchingWwtfs = (isFetching) => ({
+    type: types.SET_FETCHING_WWTFS,
+    isFetching,
+})
 export const onGetWwtfs = () => (dispatch: Function, getState: Function) => {
     const token = getState().token.value
     const map = getState().map
@@ -255,15 +376,18 @@
             extent: map.mapView.extent,
         }),
     })
-        .then(response => response.json())
+        .then((response) => response.json())
         .then((json) => {
             dispatch({ type: types.SET_WWTFS, wwtfsData: json })
             dispatch(setFetchingWwtfs(false))
         })
 }
 
-export const onDisplayWwtfDetails = (currentItem, wwtf) => (dispatch: Function, getState: Function) => {
+export const onDisplayWwtfDetails = (currentItem, wwtf) => (
+    dispatch: Function,
+    getState: Function,
+) => {
     dispatch({ type: types.SET_WWTF_CURRENT, currentItem, wwtf })
     dispatch(setTabbedPanelWindowState('maximized'))
     dispatch(onSetLayerType(7))
-}
\ No newline at end of file
+}

static/er2_watershedpriority/js/actions/index.js

@@ -1,5 +1,5 @@
-export * from 'catena/er2_map_userlayers/js/actions'
-export * from 'catena/er2_map_services/js/actions'
+export * from '@owsi/catena/er2_map_userlayers/js/actions'
+export * from '@owsi/catena/er2_map_services/js/actions'
 export {
     onChangeInput,
     onClickGeoBarItem,
@@ -26,7 +26,7 @@
     setGeoBarFetchedOperation,
     setGeoBarFetchingOperation,
     setGeoBarFetchedOperationError,
-} from 'catena/er2_ui'
+} from '@owsi/catena/er2_ui'
 export { onClickContextBarItem } from './context_bar'
 export { fetchState, setShowDisclaimer, updateAppState } from './server_state'
 export { onSetRegion, onGetSubRegions, onSelectSubunit } from './aoi'

static/er2_watershedpriority/js/actions/mcda.js

@@ -1,6 +1,7 @@
 // @flow
 import stringify from 'json-stringify-safe'
-import { setMapError } from 'catena/er2_map_userlayers/js/actions'
+import { setMapError } from '@owsi/catena/er2_map_userlayers/js/actions'
+import { setTabbedPanelWindowState } from '@owsi/catena/er2_map_userlayers/js/actions/tabbed_panel'
 import * as types from '../constants/action_types'
 import { updateAppState } from './server_state'
 import type { MCDAtype } from '../reducers/mcda'
@@ -24,7 +25,7 @@
     weight,
     indicatorOrCategory,
 })
-export const onChangeMCDAType = mcdaType => (
+export const onChangeMCDAType = (mcdaType) => (
     dispatch: Function,
     getState: Function,
 ) => {
@@ -33,15 +34,15 @@
     dispatch({ type: types.SET_MCDA_TYPE, mcdaType, indicators })
 }
 
-const onSetRunningState = isRunning => ({
+const onSetRunningState = (isRunning) => ({
     type: types.SET_MODEL_RUNNING_STATE,
     isRunning,
 })
-export const onSetModelRunStatus = runStatus => ({
+export const onSetModelRunStatus = (runStatus) => ({
     type: types.SET_MODEL_RUN_STATUS,
     runStatus,
 })
-const onSetMcdaResults = json => ({ type: types.SET_MODEL_RUN_RESULTS, json })
+const onSetMcdaResults = (json) => ({ type: types.SET_MODEL_RUN_RESULTS, json })
 
 export const onRunModel = (
     mcda: MCDAtype,
@@ -61,7 +62,7 @@
             aoi,
         }),
     })
-        .then(response => response.json())
+        .then((response) => response.json())
         .then((json) => {
             dispatch(onSetRunningState(false))
             if (json.error) {
@@ -71,6 +72,7 @@
                 dispatch(onSetMcdaResults(json))
                 dispatch(onSetModelRunStatus(true))
                 dispatch(updateAppState(['mcda', 'aoi']))
+                dispatch(setTabbedPanelWindowState('opened'))
             }
         })
 }

static/er2_watershedpriority/js/actions/server_state.js

@@ -1,43 +1,66 @@
 // @flow
-import { setMapExtent } from 'catena/er2_map_userlayers/js/actions/map'
-import { onFetchMapState, setTabbedPanelWindowState } from 'catena/er2_map_userlayers/js/actions'
+import { setMapExtent } from '@owsi/catena/er2_map_userlayers/js/actions/map'
+import {
+    onFetchMapState,
+    setTabbedPanelWindowState,
+} from '@owsi/catena/er2_map_userlayers/js/actions'
 import * as types from '../constants/action_types'
 
-const setFetchingState = (isFetching: boolean) =>
-    ({ type: types.SET_FETCHING_STATE, isFetching })
+const setFetchingState = (isFetching: boolean) => ({
+    type: types.SET_FETCHING_STATE,
+    isFetching,
+})
 
-const setFetchedState = (isFetched: boolean, state: { token: { value: string } }, meta: { version: string }) =>
-    ({ type: types.SET_FETCHED_STATE, isFetched, state, meta })
+const setFetchedState = (
+    isFetched: boolean,
+    state: { token: { value: string } },
+    meta: { version: string },
+) => ({ type: types.SET_FETCHED_STATE, isFetched, state, meta })
 
-export const setShowDisclaimer = show => ({ type: types.SHOW_DISCLAIMER, show })
+export const setShowDisclaimer = (show) => ({
+    type: types.SHOW_DISCLAIMER,
+    show,
+})
 
-const setPostFetchedState = state =>
-    ({ type: types.SET_FETCHED_STATE_POST, state })
+const setPostFetchedState = (state) => ({
+    type: types.SET_FETCHED_STATE_POST,
+    state,
+})
 
 // Fetches server state, e.g. to initialize the application.
-export const fetchState = (location: { params: {} }) => (dispatch, getState) => {
+export const fetchState = (location: { params: {} }) => (
+    dispatch,
+    getState,
+) => {
     let fetchError = false
-    const token = location.params.token ? location.params.token : getState().token.value
+    const token = location.params.token
+        ? location.params.token
+        : getState().token.value
     const query = token ? `?token=${token}` : ''
     dispatch(setFetchingState(true))
-    fetch(`/${getState().meta.name}/api/v1/state/${query}`).then((response) => {
-        fetchError = !response.ok
-        return response.json()
-    }).then((json) => {
-        dispatch(setFetchingState(false))
-        if (fetchError) {
-            dispatch(setFetchedState(true, {}))
-        } else {
-            dispatch(setFetchedState(true, json.state, json.meta))
-            dispatch(onFetchMapState())
-            // Zoom to Colorado
-            dispatch(setMapExtent([-11992293, 4470150, -11507377, 4980749]))
-            // Open up south panel if there are results
-            if (json.state.appState.mcda.results && json.state.appState.mcda.results.length) {
-                dispatch(setTabbedPanelWindowState('opened'))
+    fetch(`/${getState().meta.name}/api/v1/state/${query}`)
+        .then((response) => {
+            fetchError = !response.ok
+            return response.json()
+        })
+        .then((json) => {
+            dispatch(setFetchingState(false))
+            if (fetchError) {
+                dispatch(setFetchedState(true, {}))
+            } else {
+                dispatch(setFetchedState(true, json.state, json.meta))
+                dispatch(onFetchMapState())
+                // Zoom to Colorado
+                dispatch(setMapExtent([-11992293, 4470150, -11507377, 4980749]))
+                // Open up south panel if there are results
+                if (
+                    json.state.appState.mcda.results &&
+                    json.state.appState.mcda.results.length
+                ) {
+                    dispatch(setTabbedPanelWindowState('opened'))
+                }
             }
-        }
-    })
+        })
 }
 
 export const updateAppState = (which, fnSaved) => (dispatch, getState) => {
@@ -45,25 +68,29 @@
         appState: {},
     }
     if (Array.isArray(which)) {
-        which.forEach(w => {
+        which.forEach((w) => {
             newState.appState[w] = getState()[w]
         })
     } else {
         newState.appState[which] = getState()[which]
     }
     const body = JSON.stringify(newState)
-    fetch(`/${getState().meta.name}/api/v1/state/?token=${getState().token.value}`,
+    fetch(
+        `/${getState().meta.name}/api/v1/state/?token=${
+            getState().token.value
+        }`,
         {
             body,
             method: 'PATCH',
             headers: {
                 'Content-Type': 'application/json',
             },
-        })
+        },
+    )
         .then((ret) => {
             if (fnSaved) fnSaved()
         })
-        .catch(ret => alert(ret))
+        .catch((ret) => alert(ret))
 }
 
 export default fetchState

static/er2_watershedpriority/js/components/aoi_map.js

@@ -1,4 +1,4 @@
-  // @flow
+// @flow
 import * as React from 'react'
 import OlGeoJSON from 'ol/format/GeoJSON'
 import OlVectorLayer from 'ol/layer/Vector'
@@ -6,8 +6,8 @@
 import OlStyleFill from 'ol/style/Fill'
 import OlStyleStroke from 'ol/style/Stroke'
 import Text from 'ol/style/Text'
-import Map from 'catena/er2_map/src/map'
-import { olUtils, styles } from 'catena/er2_ui'
+import Map from '@owsi/catena/er2_map/src/map'
+import { olUtils, styles } from '@owsi/catena/er2_ui'
 import SelectInteraction from 'ol/interaction/Select'
 import { click } from 'ol/events/condition'
 import * as d3 from 'd3-scale'
@@ -54,8 +54,11 @@
     const max = subRegionCount
     let range = range2
     if (max < 3) range = range1
-    const colorScale = d3.scaleLinear().domain([min, (max -
-        min) / 2, max]).range(range).nice()
+    const colorScale = d3
+        .scaleLinear()
+        .domain([min, (max - min) / 2, max])
+        .range(range)
+        .nice()
     const color = colorScale(rank)
     return color
 }
@@ -68,7 +71,13 @@
  * Displays the Leaflet map canvas containing flow analysis areas
  */
 class AOIMap extends React.Component<Props> {
+    constructor(props) {
+        super(props)
+        this.mapRef = React.createRef()
+    }
+
     componentDidMount() {
+        this.mapApp = this.mapRef.current
         this.addMapLayer(regionLayerName)
         this.addMapLayer(subRegionLayerName)
         this.updateAoi()
@@ -79,11 +88,16 @@
         if (this.props.aoi.regionGeometry !== prevProps.aoi.regionGeometry) {
             this.updateAoi()
         }
-        if ((this.props.aoi.subRegion !== prevProps.aoi.subRegion)
-            || (this.props.mcda.runStatus !== prevProps.mcda.runStatus)) {
+        if (
+            this.props.aoi.subRegion !== prevProps.aoi.subRegion ||
+            this.props.mcda.runStatus !== prevProps.mcda.runStatus
+        ) {
             this.updateSubRegion()
         }
-        if (this.props.watershedTool.selectedSubunit !== prevProps.watershedTool.selectedSubunit) {
+        if (
+            this.props.watershedTool.selectedSubunit !==
+            prevProps.watershedTool.selectedSubunit
+        ) {
             this.updateSelection()
         }
     }
@@ -96,19 +110,25 @@
             const subLayer = this.getMapLayer(subRegionLayerName)
             if (subLayer) subLayer.getSource().clear()
         }
-        if (regionGeometry !== undefined && regionGeometry) {
+        if (regionGeometry) {
             if (regionGeometry.type === 'Feature') {
                 const feature = new OlGeoJSON().readFeature(regionGeometry, {
                     featureProjection: 'EPSG:3857',
                     dataProjection: 'EPSG:4326',
                 })
                 layer.getSource().addFeature(feature)
-            } else if (regionGeometry.type === 'FeatureCollection' && regionGeometry.features) {
+            } else if (
+                regionGeometry.type === 'FeatureCollection' &&
+                regionGeometry.features
+            ) {
                 for (let i = 0; i < regionGeometry.features.length; i += 1) {
-                    const feature = new OlGeoJSON().readFeature(regionGeometry.features[i], {
-                        featureProjection: 'EPSG:3857',
-                        dataProjection: 'EPSG:4326',
-                    })
+                    const feature = new OlGeoJSON().readFeature(
+                        regionGeometry.features[i],
+                        {
+                            featureProjection: 'EPSG:3857',
+                            dataProjection: 'EPSG:4326',
+                        },
+                    )
                     layer.getSource().addFeature(feature)
                 }
             }
@@ -119,7 +139,12 @@
         const subRegionGeometry = this.props.aoi.subRegion
         const layer = this.getMapLayer(subRegionLayerName)
         if (layer) layer.getSource().clear()
-        if (subRegionGeometry !== undefined && subRegionGeometry && subRegionGeometry.features !== undefined && subRegionGeometry.features.length > 0) {
+        if (
+            subRegionGeometry !== undefined &&
+            subRegionGeometry &&
+            subRegionGeometry.features !== undefined &&
+            subRegionGeometry.features.length > 0
+        ) {
             subRegionGeometry.features.forEach((feature) => {
                 const subReionfeature = new OlGeoJSON().readFeature(feature, {
                     featureProjection: 'EPSG:3857',
@@ -133,35 +158,43 @@
     updateSelection() {
         const layer = this.getMapLayer(subRegionLayerName)
         const source = layer.getSource()
-        const feat = source.getFeatures().find(f => f.get('name') === this.props.watershedTool.selectedSubunit)
+        const feat = source
+            .getFeatures()
+            .find(
+                (f) =>
+                    f.get('name') === this.props.watershedTool.selectedSubunit,
+            )
         console.log('updating selection')
+        const feats = this.select.getFeatures()
         if (feat) {
-            const feats = this.select.getFeatures()
             if (feats.getLength() > 0) {
-                if (feats.item(0).get('name') !== feat.get('name')) {
-                    feats.clear()
-                    feats.push(feat)
-                }
+                feats.clear()
+                feats.push(feat)
             } else {
                 feats.push(feat)
             }
         } else if (this.props.watershedTool.selectedSubunit === null) {
-            const feats = this.select.getFeatures()
             feats.clear()
         }
     }
 
     getStyle = (feat, res) => {
         const mcda = this.props.mcda
-        if (this.props.aoi && this.props.aoi.subRegion && this.props.aoi.subRegion.features
-            && this.props.aoi.subRegion.features.length > 0) {
+        if (
+            this.props.aoi &&
+            this.props.aoi.subRegion &&
+            this.props.aoi.subRegion.features &&
+            this.props.aoi.subRegion.features.length > 0
+        ) {
             const subRegionCount = this.props.aoi.subRegion.features.length
             const featureName = feat.get('name_huc')
             if (mcda.runStatus) {
                 const rank = feat.get('rank')
                 return olUtils.getOlStyles({
                     fill: new OlStyleFill({
-                        color: rank ? getRankColor(subRegionCount, rank) : 'rgba(0, 200, 0, 0.25)',
+                        color: rank
+                            ? getRankColor(subRegionCount, rank)
+                            : 'rgba(0, 200, 0, 0.25)',
                     }),
                     stroke: new OlStyleStroke({
                         color: 'black',
@@ -170,7 +203,12 @@
                         backgroundFill: new OlStyleFill({ color: 'white' }),
                         font: '14px "Roboto Condensed", sans-serif',
                         placement: 'point',
-                        text: `${parseInt(rank).toString()} ${feat.get('name_huc')}`,
+                        text:
+                            rank !== undefined
+                                ? `${parseInt(rank).toString()} ${feat.get(
+                                      'name_huc',
+                                  )}`
+                                : '',
                         textAlign: 'left',
                     }),
                 })
@@ -246,17 +284,27 @@
     render() {
         const classes = [this.props.theme.mapCtr]
         classes.push(this.props.theme.headerPanelOpen)
-        classes.push(this.props.analysisPanelClosed ? this.props.theme.analysisPanelClosed : this.props.theme.analysisPanelOpen)
-        classes.push(this.props.contextBarClosed ? this.props.theme.contextBarClosed : this.props.theme.contextBarOpen)
-        classes.push(this.props.mapToolbarClosed ? this.props.theme.mapToolbarPanelClosed : this.props.theme.mapToolbarPanelOpen)
+        classes.push(
+            this.props.analysisPanelClosed
+                ? this.props.theme.analysisPanelClosed
+                : this.props.theme.analysisPanelOpen,
+        )
+        classes.push(
+            this.props.contextBarClosed
+                ? this.props.theme.contextBarClosed
+                : this.props.theme.contextBarOpen,
+        )
+        classes.push(
+            this.props.mapToolbarClosed
+                ? this.props.theme.mapToolbarPanelClosed
+                : this.props.theme.mapToolbarPanelOpen,
+        )
         return (
-            <div className={classes.join(' ')} >
+            <div className={classes.join(' ')}>
                 <Map
                     {...this.props}
-                    onChangeView={ex => this.props.onUpdateMapView(ex)}
-                    ref={(mapApp) => {
-                        this.mapApp = mapApp
-                    }}
+                    onChangeView={(ex) => this.props.onUpdateMapView(ex)}
+                    ref={this.mapRef}
                     theme={this.props.theme}
                 />
             </div>

static/er2_watershedpriority/js/components/data_layer.js

@@ -2,7 +2,7 @@
 import React from 'react'
 import Grid from '@material-ui/core/Grid'
 import List from '@material-ui/core/List'
-import Map from 'catena/er2_map/src/map'
+import Map from '@owsi/catena/er2_map/src/map'
 import type { DataLayerType } from '../reducers/data_layer'
 import { helpDescriptionStyle } from '../styles/wptCommon'
 import Help from './common/Help'
@@ -20,7 +20,6 @@
 import CoEcoregions from './datalayer/CoEcoregions'
 import CoWatershedPlans from './datalayer/CoWatershedPlans'
 
-
 type PropsType = {
     dataLayer: DataLayerType,
     catenaMap: Map,
@@ -69,8 +68,16 @@
 
     render = () => {
         return (
-            <div className={this.props.theme.controlBar} style={{ overflowY: 'scroll' }}>
-                <Help description={'Please zoom in on the map to activate the checkboxes.'} header={'Data layers'} />
+            <div
+                className={this.props.theme.controlBar}
+                style={{ overflowY: 'scroll' }}
+            >
+                <Help
+                    description={
+                        'Please zoom in on the map to activate the checkboxes.'
+                    }
+                    header={'Data layers'}
+                />
                 <List dense>
                     <DrinkingWaterHuc8
                         dataLayer={this.props.dataLayer}
@@ -125,7 +132,9 @@
                         dataLayer={this.props.dataLayer}
                         mapView={this.props.map.mapView}
                         catenaMap={this.props.catenaMap}
-                        onGetMunDrCounties={this.props.actions.onGetMunDrCounties}
+                        onGetMunDrCounties={
+                            this.props.actions.onGetMunDrCounties
+                        }
                         zoomedIn={this.state.zoomedIn}
                     />
                     <CoEcoregions
@@ -139,28 +148,36 @@
                         dataLayer={this.props.dataLayer}
                         mapView={this.props.map.mapView}
                         catenaMap={this.props.catenaMap}
-                        onGetCoLandOwnership={this.props.actions.onGetCoLandOwnership}
+                        onGetCoLandOwnership={
+                            this.props.actions.onGetCoLandOwnership
+                        }
                         zoomedIn={this.state.zoomedIn}
                     />
                     <UrbanAreas
                         dataLayer={this.props.dataLayer}
                         mapView={this.props.map.mapView}
                         catenaMap={this.props.catenaMap}
-                        onGetMs4UrbanAreas={this.props.actions.onGetMs4UrbanAreas}
+                        onGetMs4UrbanAreas={
+                            this.props.actions.onGetMs4UrbanAreas
+                        }
                         zoomedIn={this.state.zoomedIn}
                     />
                     <CoWatershedPlans
                         dataLayer={this.props.dataLayer}
                         mapView={this.props.map.mapView}
                         catenaMap={this.props.catenaMap}
-                        onGetCoWatershedPlans={this.props.actions.onGetCoWatershedPlans}
+                        onGetCoWatershedPlans={
+                            this.props.actions.onGetCoWatershedPlans
+                        }
                         zoomedIn={this.state.zoomedIn}
                     />
                     <Wwtfs
                         dataLayer={this.props.dataLayer}
                         mapView={this.props.map.mapView}
                         catenaMap={this.props.catenaMap}
-                        onDisplayWwtfDetails={this.props.actions.onDisplayWwtfDetails}
+                        onDisplayWwtfDetails={
+                            this.props.actions.onDisplayWwtfDetails
+                        }
                         onGetWwtfs={this.props.actions.onGetWwtfs}
                         zoomedIn={this.state.zoomedIn}
                     />
@@ -172,9 +189,24 @@
     renderHelperText = () => {
         return (
             <Grid container direction={'column'}>
-                <Grid item>{this.renderHelperText('Activate the checkboxes: ', 'Please zoom in on the map to activate the checkboxes.')}</Grid>
-                <Grid item>{this.renderHelperTextRow('Display a layer on map: ', 'Click on the checkbox present besides the layer name to display the layer on the map.')}</Grid>
-                <Grid item>{this.renderHelperTextRow('Hide a layer on map: ', 'Uncheck the checkbox by clicking on it to hide the layer on the map.')}</Grid>
+                <Grid item>
+                    {this.renderHelperText(
+                        'Activate the checkboxes: ',
+                        'Please zoom in on the map to activate the checkboxes.',
+                    )}
+                </Grid>
+                <Grid item>
+                    {this.renderHelperTextRow(
+                        'Display a layer on map: ',
+                        'Click on the checkbox present besides the layer name to display the layer on the map.',
+                    )}
+                </Grid>
+                <Grid item>
+                    {this.renderHelperTextRow(
+                        'Hide a layer on map: ',
+                        'Uncheck the checkbox by clicking on it to hide the layer on the map.',
+                    )}
+                </Grid>
             </Grid>
         )
     }
@@ -183,7 +215,11 @@
         return (
             <Grid container direction={'row'}>
                 <Grid item>
-                    <span style={{ ...helpDescriptionStyle, textWeight: 'bold' }}>{action}</span>
+                    <span
+                        style={{ ...helpDescriptionStyle, textWeight: 'bold' }}
+                    >
+                        {action}
+                    </span>
                 </Grid>
                 <Grid item>
                     <span style={helpDescriptionStyle}>{how}</span>

static/er2_watershedpriority/js/components/datalayer/CoEcoregions.js

@@ -5,7 +5,7 @@
 import Checkbox from '@material-ui/core/Checkbox'
 import ListItem from '@material-ui/core/ListItem'
 import Collapse from '@material-ui/core/Collapse'
-import Map from 'catena/er2_map/src/map'
+import Map from '@owsi/catena/er2_map/src/map'
 import type { DataLayerType } from '../../reducers/data_layer'
 import {
     addEcoregionMapLayer,
@@ -30,12 +30,20 @@
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.state.isChecked !== prevState.isChecked) this.addCoEcoregionMapLayer()
-        if (this.props.dataLayer.coEcoregionsLayer.areas !== prevProps.dataLayer.coEcoregionsLayer.areas) this.addCoEcoregionMapLayer()
+        if (this.state.isChecked !== prevState.isChecked)
+            this.addCoEcoregionMapLayer()
+        if (
+            this.props.dataLayer.coEcoregionsLayer.areas !==
+            prevProps.dataLayer.coEcoregionsLayer.areas
+        )
+            this.addCoEcoregionMapLayer()
 
         if (this.state.isChecked) {
-            if (this.props.mapView.resolution !== prevProps.mapView.resolution ||
-                this.props.mapView.extent !== prevProps.mapView.extent) {
+            if (
+                this.props.mapView.resolution !==
+                    prevProps.mapView.resolution ||
+                this.props.mapView.extent !== prevProps.mapView.extent
+            ) {
                 if (this.props.mapView.resolution < 1250) {
                     this.props.onGetCoEcoregions()
                 }
@@ -50,10 +58,15 @@
         if (this.state.isChecked) {
             removeMapLayer(olmap, areasMapLayerName)
             if (areas) {
-                addEcoregionMapLayer(olmap, getOLFeatureListfromGeoJSON({
-                    features: areas,
-                    type: 'FeatureCollection',
-                }), areasMapLayerName, 'CoEcoregions')
+                addEcoregionMapLayer(
+                    olmap,
+                    getOLFeatureListfromGeoJSON({
+                        features: areas,
+                        type: 'FeatureCollection',
+                    }),
+                    areasMapLayerName,
+                    'CoEcoregions',
+                )
                 updateInteractions(this.props)
             }
         } else {
@@ -75,7 +88,8 @@
                     </Grid>
                 </ListItem>
                 <Divider />
-                {!this.props.zoomedIn && this.renderExpandCollapse(layer, hasFeaturesList)}
+                {!this.props.zoomedIn &&
+                    this.renderExpandCollapse(layer, hasFeaturesList)}
             </div>
         )
     }
@@ -103,8 +117,15 @@
     renderLegend = (hasFeaturesList) => {
         if (!hasFeaturesList) {
             return (
-                <span style={{...inputFontStyle, fontSize: '14px', marginLeft: '5px'}}>
-                    No EPA Ecoregions for this part of Colorado in the current map extent.
+                <span
+                    style={{
+                        ...inputFontStyle,
+                        fontSize: '14px',
+                        marginLeft: '5px',
+                    }}
+                >
+                    No EPA Ecoregions for this part of Colorado in the current
+                    map extent.
                 </span>
             )
         }

static/er2_watershedpriority/js/components/datalayer/CoLandOwnership.js

@@ -5,7 +5,7 @@
 import Checkbox from '@material-ui/core/Checkbox'
 import ListItem from '@material-ui/core/ListItem'
 import Collapse from '@material-ui/core/Collapse'
-import Map from 'catena/er2_map/src/map'
+import Map from '@owsi/catena/er2_map/src/map'
 import type { DataLayerType } from '../../reducers/data_layer'
 import {
     addOwnershipMapLayer,
@@ -30,12 +30,20 @@
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.state.isChecked !== prevState.isChecked) this.addCoLandOwnershipMapLayer()
-        if (this.props.dataLayer.coLandOwnershipLayer.areas !== prevProps.dataLayer.coLandOwnershipLayer.areas) this.addCoLandOwnershipMapLayer()
+        if (this.state.isChecked !== prevState.isChecked)
+            this.addCoLandOwnershipMapLayer()
+        if (
+            this.props.dataLayer.coLandOwnershipLayer.areas !==
+            prevProps.dataLayer.coLandOwnershipLayer.areas
+        )
+            this.addCoLandOwnershipMapLayer()
 
         if (this.state.isChecked) {
-            if (this.props.mapView.resolution !== prevProps.mapView.resolution ||
-                this.props.mapView.extent !== prevProps.mapView.extent) {
+            if (
+                this.props.mapView.resolution !==
+                    prevProps.mapView.resolution ||
+                this.props.mapView.extent !== prevProps.mapView.extent
+            ) {
                 if (this.props.mapView.resolution < 78) {
                     this.props.onGetCoLandOwnership()
                 }
@@ -50,10 +58,15 @@
         if (this.state.isChecked) {
             removeMapLayer(olmap, areasMapLayerName)
             if (areas) {
-                addOwnershipMapLayer(olmap, getOLFeatureListfromGeoJSON({
-                    features: areas,
-                    type: 'FeatureCollection',
-                }), areasMapLayerName, 'CoLandOwnership')
+                addOwnershipMapLayer(
+                    olmap,
+                    getOLFeatureListfromGeoJSON({
+                        features: areas,
+                        type: 'FeatureCollection',
+                    }),
+                    areasMapLayerName,
+                    'CoLandOwnership',
+                )
                 updateInteractions(this.props)
             }
         } else {
@@ -75,7 +88,8 @@
                     </Grid>
                 </ListItem>
                 <Divider />
-                {!this.props.zoomedIn && this.renderExpandCollapse(layer, hasFeaturesList)}
+                {!this.props.zoomedIn &&
+                    this.renderExpandCollapse(layer, hasFeaturesList)}
             </div>
         )
     }
@@ -103,8 +117,15 @@
     renderLegend = (hasFeaturesList) => {
         if (!hasFeaturesList) {
             return (
-                <span style={{...inputFontStyle, fontSize: '14px', marginLeft: '5px'}}>
-                    No Colorado land ownership areas found in the current map extent.
+                <span
+                    style={{
+                        ...inputFontStyle,
+                        fontSize: '14px',
+                        marginLeft: '5px',
+                    }}
+                >
+                    No Colorado land ownership areas found in the current map
+                    extent.
                 </span>
             )
         }

static/er2_watershedpriority/js/components/datalayer/CoWatershedPlans.js

@@ -5,7 +5,7 @@
 import Checkbox from '@material-ui/core/Checkbox'
 import ListItem from '@material-ui/core/ListItem'
 import Collapse from '@material-ui/core/Collapse'
-import Map from 'catena/er2_map/src/map'
+import Map from '@owsi/catena/er2_map/src/map'
 import type { DataLayerType } from '../../reducers/data_layer'
 import {
     addWatershedPlansLayer,
@@ -30,12 +30,20 @@
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.state.isChecked !== prevState.isChecked) this.addCoWatershedPlansMapLayer()
-        if (this.props.dataLayer.coWatershedPlansLayer.areas !== prevProps.dataLayer.coWatershedPlansLayer.areas) this.addCoWatershedPlansMapLayer()
+        if (this.state.isChecked !== prevState.isChecked)
+            this.addCoWatershedPlansMapLayer()
+        if (
+            this.props.dataLayer.coWatershedPlansLayer.areas !==
+            prevProps.dataLayer.coWatershedPlansLayer.areas
+        )
+            this.addCoWatershedPlansMapLayer()
 
         if (this.state.isChecked) {
-            if (this.props.mapView.resolution !== prevProps.mapView.resolution ||
-                this.props.mapView.extent !== prevProps.mapView.extent) {
+            if (
+                this.props.mapView.resolution !==
+                    prevProps.mapView.resolution ||
+                this.props.mapView.extent !== prevProps.mapView.extent
+            ) {
                 if (this.props.mapView.resolution < 1250) {
                     this.props.onGetCoWatershedPlans()
                 }
@@ -50,10 +58,15 @@
         if (this.state.isChecked) {
             removeMapLayer(olmap, areasMapLayerName)
             if (areas) {
-                addWatershedPlansLayer(olmap, getOLFeatureListfromGeoJSON({
-                    features: areas,
-                    type: 'FeatureCollection',
-                }), areasMapLayerName, 'CoWatershedPlans')
+                addWatershedPlansLayer(
+                    olmap,
+                    getOLFeatureListfromGeoJSON({
+                        features: areas,
+                        type: 'FeatureCollection',
+                    }),
+                    areasMapLayerName,
+                    'CoWatershedPlans',
+                )
                 updateInteractions(this.props)
             }
         } else {
@@ -75,7 +88,8 @@
                     </Grid>
                 </ListItem>
                 <Divider />
-                {!this.props.zoomedIn && this.renderExpandCollapse(layer, hasFeaturesList)}
+                {!this.props.zoomedIn &&
+                    this.renderExpandCollapse(layer, hasFeaturesList)}
             </div>
         )
     }
@@ -103,7 +117,13 @@
     renderLegend = (hasFeaturesList) => {
         if (!hasFeaturesList) {
             return (
-                <span style={{...inputFontStyle, fontSize: '14px', marginLeft: '5px'}}>
+                <span
+                    style={{
+                        ...inputFontStyle,
+                        fontSize: '14px',
+                        marginLeft: '5px',
+                    }}
+                >
                     No Colorado watershed plans found in the current map extent.
                 </span>
             )

static/er2_watershedpriority/js/components/datalayer/DrinkingWaterCounty.js

@@ -5,7 +5,7 @@
 import Checkbox from '@material-ui/core/Checkbox'
 import ListItem from '@material-ui/core/ListItem'
 import Collapse from '@material-ui/core/Collapse'
-import Map from 'catena/er2_map/src/map'
+import Map from '@owsi/catena/er2_map/src/map'
 import type { DataLayerType } from '../../reducers/data_layer'
 import {
     addDrinkingWaterMapLayer,
@@ -30,12 +30,20 @@
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.state.isChecked !== prevState.isChecked) this.addDrinkingWaterCountyLayer()
-        if (this.props.dataLayer.drCountyLayer.watersheds !== prevProps.dataLayer.drCountyLayer.watersheds) this.addDrinkingWaterCountyLayer()
+        if (this.state.isChecked !== prevState.isChecked)
+            this.addDrinkingWaterCountyLayer()
+        if (
+            this.props.dataLayer.drCountyLayer.watersheds !==
+            prevProps.dataLayer.drCountyLayer.watersheds
+        )
+            this.addDrinkingWaterCountyLayer()
 
         if (this.state.isChecked) {
-            if (this.props.mapView.resolution !== prevProps.mapView.resolution ||
-                this.props.mapView.extent !== prevProps.mapView.extent) {
+            if (
+                this.props.mapView.resolution !==
+                    prevProps.mapView.resolution ||
+                this.props.mapView.extent !== prevProps.mapView.extent
+            ) {
                 if (this.props.mapView.resolution < 1250) {
                     this.props.onGetDrCounties()
                 }
@@ -50,10 +58,17 @@
         if (this.state.isChecked) {
             removeMapLayer(olmap, drCountyMapLayerName)
             if (counties) {
-                addDrinkingWaterMapLayer(olmap, getOLFeatureListfromGeoJSON({
-                    features: counties,
-                    type: 'FeatureCollection',
-                }), drCountyMapLayerName, 'DrCounties', 'gnis_name', null)
+                addDrinkingWaterMapLayer(
+                    olmap,
+                    getOLFeatureListfromGeoJSON({
+                        features: counties,
+                        type: 'FeatureCollection',
+                    }),
+                    drCountyMapLayerName,
+                    'DrCounties',
+                    'gnis_name',
+                    null,
+                )
                 updateInteractions(this.props)
             }
         } else {
@@ -75,7 +90,8 @@
                     </Grid>
                 </ListItem>
                 <Divider />
-                {!this.props.zoomedIn && this.renderExpandCollapse(layer, hasFeaturesList)}
+                {!this.props.zoomedIn &&
+                    this.renderExpandCollapse(layer, hasFeaturesList)}
             </div>
         )
     }
@@ -103,7 +119,13 @@
     renderLegend = (hasFeaturesList) => {
         if (!hasFeaturesList) {
             return (
-                <span style={{...inputFontStyle, fontSize: '14px', marginLeft: '5px'}}>
+                <span
+                    style={{
+                        ...inputFontStyle,
+                        fontSize: '14px',
+                        marginLeft: '5px',
+                    }}
+                >
                     No Counties found in the current map extent.
                 </span>
             )

static/er2_watershedpriority/js/components/datalayer/DrinkingWaterHuc10.js

@@ -5,7 +5,7 @@
 import Checkbox from '@material-ui/core/Checkbox'
 import ListItem from '@material-ui/core/ListItem'
 import Collapse from '@material-ui/core/Collapse'
-import Map from 'catena/er2_map/src/map'
+import Map from '@owsi/catena/er2_map/src/map'
 import type { DataLayerType } from '../../reducers/data_layer'
 import {
     addDrinkingWaterMapLayer,
@@ -30,12 +30,20 @@
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.state.isChecked !== prevState.isChecked) this.addDrinkingWaterHuc10Layer()
-        if (this.props.dataLayer.drHuc10Layer.watersheds !== prevProps.dataLayer.drHuc10Layer.watersheds) this.addDrinkingWaterHuc10Layer()
+        if (this.state.isChecked !== prevState.isChecked)
+            this.addDrinkingWaterHuc10Layer()
+        if (
+            this.props.dataLayer.drHuc10Layer.watersheds !==
+            prevProps.dataLayer.drHuc10Layer.watersheds
+        )
+            this.addDrinkingWaterHuc10Layer()
 
         if (this.state.isChecked) {
-            if (this.props.mapView.resolution !== prevProps.mapView.resolution ||
-                this.props.mapView.extent !== prevProps.mapView.extent) {
+            if (
+                this.props.mapView.resolution !==
+                    prevProps.mapView.resolution ||
+                this.props.mapView.extent !== prevProps.mapView.extent
+            ) {
                 if (this.props.mapView.resolution < 1250) {
                     this.props.onGetDrHuc10s()
                 }
@@ -50,10 +58,17 @@
         if (this.state.isChecked) {
             removeMapLayer(olmap, drHuc10MapLayerName)
             if (huc10s) {
-                addDrinkingWaterMapLayer(olmap, getOLFeatureListfromGeoJSON({
-                    features: huc10s,
-                    type: 'FeatureCollection',
-                }), drHuc10MapLayerName, 'DrHuc10s', 'name', 'huc10')
+                addDrinkingWaterMapLayer(
+                    olmap,
+                    getOLFeatureListfromGeoJSON({
+                        features: huc10s,
+                        type: 'FeatureCollection',
+                    }),
+                    drHuc10MapLayerName,
+                    'DrHuc10s',
+                    'name',
+                    'huc10',
+                )
                 updateInteractions(this.props)
             }
         } else {
@@ -75,7 +90,8 @@
                     </Grid>
                 </ListItem>
                 <Divider />
-                {!this.props.zoomedIn && this.renderExpandCollapse(layer, hasFeaturesList)}
+                {!this.props.zoomedIn &&
+                    this.renderExpandCollapse(layer, hasFeaturesList)}
             </div>
         )
     }
@@ -103,7 +119,13 @@
     renderLegend = (hasFeaturesList) => {
         if (!hasFeaturesList) {
             return (
-                <span style={{...inputFontStyle, fontSize: '14px', marginLeft: '5px'}}>
+                <span
+                    style={{
+                        ...inputFontStyle,
+                        fontSize: '14px',
+                        marginLeft: '5px',
+                    }}
+                >
                     No HUC10 watersheds found in the current map extent.
                 </span>
             )

static/er2_watershedpriority/js/components/datalayer/DrinkingWaterHuc12.js

@@ -5,7 +5,7 @@
 import Checkbox from '@material-ui/core/Checkbox'
 import ListItem from '@material-ui/core/ListItem'
 import Collapse from '@material-ui/core/Collapse'
-import Map from 'catena/er2_map/src/map'
+import Map from '@owsi/catena/er2_map/src/map'
 import type { DataLayerType } from '../../reducers/data_layer'
 import {
     addDrinkingWaterMapLayer,
@@ -30,12 +30,20 @@
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.state.isChecked !== prevState.isChecked) this.addDrinkingWaterHuc12Layer()
-        if (this.props.dataLayer.drHuc12Layer.watersheds !== prevProps.dataLayer.drHuc12Layer.watersheds) this.addDrinkingWaterHuc12Layer()
+        if (this.state.isChecked !== prevState.isChecked)
+            this.addDrinkingWaterHuc12Layer()
+        if (
+            this.props.dataLayer.drHuc12Layer.watersheds !==
+            prevProps.dataLayer.drHuc12Layer.watersheds
+        )
+            this.addDrinkingWaterHuc12Layer()
 
         if (this.state.isChecked) {
-            if (this.props.mapView.resolution !== prevProps.mapView.resolution ||
-                this.props.mapView.extent !== prevProps.mapView.extent) {
+            if (
+                this.props.mapView.resolution !==
+                    prevProps.mapView.resolution ||
+                this.props.mapView.extent !== prevProps.mapView.extent
+            ) {
                 if (this.props.mapView.resolution < 1250) {
                     this.props.onGetDrHuc12s()
                 }
@@ -50,10 +58,17 @@
         if (this.state.isChecked) {
             removeMapLayer(olmap, drHuc12MapLayerName)
             if (huc12s) {
-                addDrinkingWaterMapLayer(olmap, getOLFeatureListfromGeoJSON({
-                    features: huc12s,
-                    type: 'FeatureCollection',
-                }), drHuc12MapLayerName, 'DrHuc12s', 'name','huc12')
+                addDrinkingWaterMapLayer(
+                    olmap,
+                    getOLFeatureListfromGeoJSON({
+                        features: huc12s,
+                        type: 'FeatureCollection',
+                    }),
+                    drHuc12MapLayerName,
+                    'DrHuc12s',
+                    'name',
+                    'huc12',
+                )
                 updateInteractions(this.props)
             }
         } else {
@@ -75,7 +90,8 @@
                     </Grid>
                 </ListItem>
                 <Divider />
-                {!this.props.zoomedIn && this.renderExpandCollapse(layer, hasFeaturesList)}
+                {!this.props.zoomedIn &&
+                    this.renderExpandCollapse(layer, hasFeaturesList)}
             </div>
         )
     }
@@ -103,7 +119,13 @@
     renderLegend = (hasFeaturesList) => {
         if (!hasFeaturesList) {
             return (
-                <span style={{...inputFontStyle, fontSize: '14px', marginLeft: '5px'}}>
+                <span
+                    style={{
+                        ...inputFontStyle,
+                        fontSize: '14px',
+                        marginLeft: '5px',
+                    }}
+                >
                     No HUC12 watersheds found in the current map extent.
                 </span>
             )

static/er2_watershedpriority/js/components/datalayer/DrinkingWaterHuc8.js

@@ -5,7 +5,7 @@
 import Checkbox from '@material-ui/core/Checkbox'
 import ListItem from '@material-ui/core/ListItem'
 import Collapse from '@material-ui/core/Collapse'
-import Map from 'catena/er2_map/src/map'
+import Map from '@owsi/catena/er2_map/src/map'
 import type { DataLayerType } from '../../reducers/data_layer'
 import {
     addDrinkingWaterMapLayer,
@@ -30,12 +30,20 @@
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.state.isChecked !== prevState.isChecked) this.addDrinkingWaterHuc8Layer()
-        if (this.props.dataLayer.drHuc8Layer.watersheds !== prevProps.dataLayer.drHuc8Layer.watersheds) this.addDrinkingWaterHuc8Layer()
+        if (this.state.isChecked !== prevState.isChecked)
+            this.addDrinkingWaterHuc8Layer()
+        if (
+            this.props.dataLayer.drHuc8Layer.watersheds !==
+            prevProps.dataLayer.drHuc8Layer.watersheds
+        )
+            this.addDrinkingWaterHuc8Layer()
 
         if (this.state.isChecked) {
-            if (this.props.mapView.resolution !== prevProps.mapView.resolution ||
-                this.props.mapView.extent !== prevProps.mapView.extent) {
+            if (
+                this.props.mapView.resolution !==
+                    prevProps.mapView.resolution ||
+                this.props.mapView.extent !== prevProps.mapView.extent
+            ) {
                 if (this.props.mapView.resolution < 1250) {
                     this.props.onGetDrHuc8s()
                 }
@@ -50,10 +58,17 @@
         if (this.state.isChecked) {
             removeMapLayer(olmap, drHuc8MapLayerName)
             if (huc8s) {
-                addDrinkingWaterMapLayer(olmap, getOLFeatureListfromGeoJSON({
-                    features: huc8s,
-                    type: 'FeatureCollection',
-                }), drHuc8MapLayerName, 'DrHuc8s', 'name', 'huc8')
+                addDrinkingWaterMapLayer(
+                    olmap,
+                    getOLFeatureListfromGeoJSON({
+                        features: huc8s,
+                        type: 'FeatureCollection',
+                    }),
+                    drHuc8MapLayerName,
+                    'DrHuc8s',
+                    'name',
+                    'huc8',
+                )
                 updateInteractions(this.props)
             }
         } else {
@@ -75,7 +90,8 @@
                     </Grid>
                 </ListItem>
                 <Divider />
-                {!this.props.zoomedIn && this.renderExpandCollapse(layer, hasFeaturesList)}
+                {!this.props.zoomedIn &&
+                    this.renderExpandCollapse(layer, hasFeaturesList)}
             </div>
         )
     }
@@ -103,7 +119,13 @@
     renderLegend = (hasFeaturesList) => {
         if (!hasFeaturesList) {
             return (
-                <span style={{...inputFontStyle, fontSize: '14px', marginLeft: '5px'}}>
+                <span
+                    style={{
+                        ...inputFontStyle,
+                        fontSize: '14px',
+                        marginLeft: '5px',
+                    }}
+                >
                     No HUC8 watersheds found in the current map extent.
                 </span>
             )

static/er2_watershedpriority/js/components/datalayer/MunicipalDrinkingWaterCounty.js

@@ -5,7 +5,7 @@
 import Checkbox from '@material-ui/core/Checkbox'
 import ListItem from '@material-ui/core/ListItem'
 import Collapse from '@material-ui/core/Collapse'
-import Map from 'catena/er2_map/src/map'
+import Map from '@owsi/catena/er2_map/src/map'
 import type { DataLayerType } from '../../reducers/data_layer'
 import {
     addMunicipalDrinkingWaterMapLayer,
@@ -30,12 +30,20 @@
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.state.isChecked !== prevState.isChecked) this.addMunicipalDrinkingWaterCountyLayer()
-        if (this.props.dataLayer.munDrCountyLayer.watersheds !== prevProps.dataLayer.munDrCountyLayer.watersheds) this.addMunicipalDrinkingWaterCountyLayer()
+        if (this.state.isChecked !== prevState.isChecked)
+            this.addMunicipalDrinkingWaterCountyLayer()
+        if (
+            this.props.dataLayer.munDrCountyLayer.watersheds !==
+            prevProps.dataLayer.munDrCountyLayer.watersheds
+        )
+            this.addMunicipalDrinkingWaterCountyLayer()
 
         if (this.state.isChecked) {
-            if (this.props.mapView.resolution !== prevProps.mapView.resolution ||
-                this.props.mapView.extent !== prevProps.mapView.extent) {
+            if (
+                this.props.mapView.resolution !==
+                    prevProps.mapView.resolution ||
+                this.props.mapView.extent !== prevProps.mapView.extent
+            ) {
                 if (this.props.mapView.resolution < 1250) {
                     this.props.onGetMunDrCounties()
                 }
@@ -46,14 +54,22 @@
     addMunicipalDrinkingWaterCountyLayer = () => {
         const olmap = this.props.catenaMap.map.olmap
         const counties = this.props.dataLayer.munDrCountyLayer.watersheds
-        const munDrCountyMapLayerName = 'Municipal Drinking Water Intake Source Areas: Counties'
+        const munDrCountyMapLayerName =
+            'Municipal Drinking Water Intake Source Areas: Counties'
         if (this.state.isChecked) {
             removeMapLayer(olmap, munDrCountyMapLayerName)
             if (counties) {
-                addMunicipalDrinkingWaterMapLayer(olmap, getOLFeatureListfromGeoJSON({
-                    features: counties,
-                    type: 'FeatureCollection',
-                }), munDrCountyMapLayerName, 'MunDrCounties', 'gnis_name', null)
+                addMunicipalDrinkingWaterMapLayer(
+                    olmap,
+                    getOLFeatureListfromGeoJSON({
+                        features: counties,
+                        type: 'FeatureCollection',
+                    }),
+                    munDrCountyMapLayerName,
+                    'MunDrCounties',
+                    'gnis_name',
+                    null,
+                )
                 updateInteractions(this.props)
             }
         } else {
@@ -75,7 +91,8 @@
                     </Grid>
                 </ListItem>
                 <Divider />
-                {!this.props.zoomedIn && this.renderExpandCollapse(layer, hasFeaturesList)}
+                {!this.props.zoomedIn &&
+                    this.renderExpandCollapse(layer, hasFeaturesList)}
             </div>
         )
     }
@@ -103,7 +120,13 @@
     renderLegend = (hasFeaturesList) => {
         if (!hasFeaturesList) {
             return (
-                <span style={{...inputFontStyle, fontSize: '14px', marginLeft: '5px'}}>
+                <span
+                    style={{
+                        ...inputFontStyle,
+                        fontSize: '14px',
+                        marginLeft: '5px',
+                    }}
+                >
                     No Counties found in the current map extent.
                 </span>
             )

static/er2_watershedpriority/js/components/datalayer/MunicipalDrinkingWaterHuc10.js

@@ -5,7 +5,7 @@
 import Checkbox from '@material-ui/core/Checkbox'
 import ListItem from '@material-ui/core/ListItem'
 import Collapse from '@material-ui/core/Collapse'
-import Map from 'catena/er2_map/src/map'
+import Map from '@owsi/catena/er2_map/src/map'
 import type { DataLayerType } from '../../reducers/data_layer'
 import {
     addMunicipalDrinkingWaterMapLayer,
@@ -30,12 +30,20 @@
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.state.isChecked !== prevState.isChecked) this.addMunicipalDrinkingWaterHuc10Layer()
-        if (this.props.dataLayer.munDrHuc10Layer.watersheds !== prevProps.dataLayer.munDrHuc10Layer.watersheds) this.addMunicipalDrinkingWaterHuc10Layer()
+        if (this.state.isChecked !== prevState.isChecked)
+            this.addMunicipalDrinkingWaterHuc10Layer()
+        if (
+            this.props.dataLayer.munDrHuc10Layer.watersheds !==
+            prevProps.dataLayer.munDrHuc10Layer.watersheds
+        )
+            this.addMunicipalDrinkingWaterHuc10Layer()
 
         if (this.state.isChecked) {
-            if (this.props.mapView.resolution !== prevProps.mapView.resolution ||
-                this.props.mapView.extent !== prevProps.mapView.extent) {
+            if (
+                this.props.mapView.resolution !==
+                    prevProps.mapView.resolution ||
+                this.props.mapView.extent !== prevProps.mapView.extent
+            ) {
                 if (this.props.mapView.resolution < 1250) {
                     this.props.onGetMunDrHuc10s()
                 }
@@ -46,14 +54,22 @@
     addMunicipalDrinkingWaterHuc10Layer = () => {
         const olmap = this.props.catenaMap.map.olmap
         const huc10s = this.props.dataLayer.munDrHuc10Layer.watersheds
-        const munDrHuc10MapLayerName = 'Municipal Drinking Water Intake Source Areas: HUC10s'
+        const munDrHuc10MapLayerName =
+            'Municipal Drinking Water Intake Source Areas: HUC10s'
         if (this.state.isChecked) {
             removeMapLayer(olmap, munDrHuc10MapLayerName)
             if (huc10s) {
-                addMunicipalDrinkingWaterMapLayer(olmap, getOLFeatureListfromGeoJSON({
-                    features: huc10s,
-                    type: 'FeatureCollection',
-                }), munDrHuc10MapLayerName, 'MunDrHuc10s', 'name', 'huc10')
+                addMunicipalDrinkingWaterMapLayer(
+                    olmap,
+                    getOLFeatureListfromGeoJSON({
+                        features: huc10s,
+                        type: 'FeatureCollection',
+                    }),
+                    munDrHuc10MapLayerName,
+                    'MunDrHuc10s',
+                    'name',
+                    'huc10',
+                )
                 updateInteractions(this.props)
             }
         } else {
@@ -75,7 +91,8 @@
                     </Grid>
                 </ListItem>
                 <Divider />
-                {!this.props.zoomedIn && this.renderExpandCollapse(layer, hasFeaturesList)}
+                {!this.props.zoomedIn &&
+                    this.renderExpandCollapse(layer, hasFeaturesList)}
             </div>
         )
     }
@@ -103,7 +120,13 @@
     renderLegend = (hasFeaturesList) => {
         if (!hasFeaturesList) {
             return (
-                <span style={{...inputFontStyle, fontSize: '14px', marginLeft: '5px'}}>
+                <span
+                    style={{
+                        ...inputFontStyle,
+                        fontSize: '14px',
+                        marginLeft: '5px',
+                    }}
+                >
                     No HUC10 watersheds found in the current map extent.
                 </span>
             )

static/er2_watershedpriority/js/components/datalayer/MunicipalDrinkingWaterHuc12.js

@@ -5,7 +5,7 @@
 import Checkbox from '@material-ui/core/Checkbox'
 import ListItem from '@material-ui/core/ListItem'
 import Collapse from '@material-ui/core/Collapse'
-import Map from 'catena/er2_map/src/map'
+import Map from '@owsi/catena/er2_map/src/map'
 import type { DataLayerType } from '../../reducers/data_layer'
 import {
     addMunicipalDrinkingWaterMapLayer,
@@ -30,12 +30,20 @@
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.state.isChecked !== prevState.isChecked) this.addMunicipalDrinkingWaterHuc12Layer()
-        if (this.props.dataLayer.munDrHuc12Layer.watersheds !== prevProps.dataLayer.munDrHuc12Layer.watersheds) this.addMunicipalDrinkingWaterHuc12Layer()
+        if (this.state.isChecked !== prevState.isChecked)
+            this.addMunicipalDrinkingWaterHuc12Layer()
+        if (
+            this.props.dataLayer.munDrHuc12Layer.watersheds !==
+            prevProps.dataLayer.munDrHuc12Layer.watersheds
+        )
+            this.addMunicipalDrinkingWaterHuc12Layer()
 
         if (this.state.isChecked) {
-            if (this.props.mapView.resolution !== prevProps.mapView.resolution ||
-                this.props.mapView.extent !== prevProps.mapView.extent) {
+            if (
+                this.props.mapView.resolution !==
+                    prevProps.mapView.resolution ||
+                this.props.mapView.extent !== prevProps.mapView.extent
+            ) {
                 if (this.props.mapView.resolution < 1250) {
                     this.props.onGetMunDrHuc12s()
                 }
@@ -46,14 +54,22 @@
     addMunicipalDrinkingWaterHuc12Layer = () => {
         const olmap = this.props.catenaMap.map.olmap
         const huc12s = this.props.dataLayer.munDrHuc12Layer.watersheds
-        const munDrHuc12MapLayerName = 'Municipal Drinking Water Intake Source Areas: HUC12s'
+        const munDrHuc12MapLayerName =
+            'Municipal Drinking Water Intake Source Areas: HUC12s'
         if (this.state.isChecked) {
             removeMapLayer(olmap, munDrHuc12MapLayerName)
             if (huc12s) {
-                addMunicipalDrinkingWaterMapLayer(olmap, getOLFeatureListfromGeoJSON({
-                    features: huc12s,
-                    type: 'FeatureCollection',
-                }), munDrHuc12MapLayerName, 'MunDrHuc12s', 'name','huc12')
+                addMunicipalDrinkingWaterMapLayer(
+                    olmap,
+                    getOLFeatureListfromGeoJSON({
+                        features: huc12s,
+                        type: 'FeatureCollection',
+                    }),
+                    munDrHuc12MapLayerName,
+                    'MunDrHuc12s',
+                    'name',
+                    'huc12',
+                )
                 updateInteractions(this.props)
             }
         } else {
@@ -75,7 +91,8 @@
                     </Grid>
                 </ListItem>
                 <Divider />
-                {!this.props.zoomedIn && this.renderExpandCollapse(layer, hasFeaturesList)}
+                {!this.props.zoomedIn &&
+                    this.renderExpandCollapse(layer, hasFeaturesList)}
             </div>
         )
     }
@@ -103,7 +120,13 @@
     renderLegend = (hasFeaturesList) => {
         if (!hasFeaturesList) {
             return (
-                <span style={{...inputFontStyle, fontSize: '14px', marginLeft: '5px'}}>
+                <span
+                    style={{
+                        ...inputFontStyle,
+                        fontSize: '14px',
+                        marginLeft: '5px',
+                    }}
+                >
                     No HUC12 watersheds found in the current map extent.
                 </span>
             )

static/er2_watershedpriority/js/components/datalayer/MunicipalDrinkingWaterHuc8.js

@@ -5,7 +5,7 @@
 import Checkbox from '@material-ui/core/Checkbox'
 import ListItem from '@material-ui/core/ListItem'
 import Collapse from '@material-ui/core/Collapse'
-import Map from 'catena/er2_map/src/map'
+import Map from '@owsi/catena/er2_map/src/map'
 import type { DataLayerType } from '../../reducers/data_layer'
 import {
     addMunicipalDrinkingWaterMapLayer,
@@ -30,12 +30,20 @@
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.state.isChecked !== prevState.isChecked) this.addMunicipalDrinkingWaterHuc8Layer()
-        if (this.props.dataLayer.munDrHuc8Layer.watersheds !== prevProps.dataLayer.munDrHuc8Layer.watersheds) this.addMunicipalDrinkingWaterHuc8Layer()
+        if (this.state.isChecked !== prevState.isChecked)
+            this.addMunicipalDrinkingWaterHuc8Layer()
+        if (
+            this.props.dataLayer.munDrHuc8Layer.watersheds !==
+            prevProps.dataLayer.munDrHuc8Layer.watersheds
+        )
+            this.addMunicipalDrinkingWaterHuc8Layer()
 
         if (this.state.isChecked) {
-            if (this.props.mapView.resolution !== prevProps.mapView.resolution ||
-                this.props.mapView.extent !== prevProps.mapView.extent) {
+            if (
+                this.props.mapView.resolution !==
+                    prevProps.mapView.resolution ||
+                this.props.mapView.extent !== prevProps.mapView.extent
+            ) {
                 if (this.props.mapView.resolution < 1250) {
                     this.props.onGetMunDrHuc8s()
                 }
@@ -46,14 +54,22 @@
     addMunicipalDrinkingWaterHuc8Layer = () => {
         const olmap = this.props.catenaMap.map.olmap
         const huc8s = this.props.dataLayer.munDrHuc8Layer.watersheds
-        const munDrHuc8MapLayerName = 'Municipal Drinking Water Intake Source Areas: HUC8s'
+        const munDrHuc8MapLayerName =
+            'Municipal Drinking Water Intake Source Areas: HUC8s'
         if (this.state.isChecked) {
             removeMapLayer(olmap, munDrHuc8MapLayerName)
             if (huc8s) {
-                addMunicipalDrinkingWaterMapLayer(olmap, getOLFeatureListfromGeoJSON({
-                    features: huc8s,
-                    type: 'FeatureCollection',
-                }), munDrHuc8MapLayerName, 'MunDrHuc8s', 'name', 'huc8')
+                addMunicipalDrinkingWaterMapLayer(
+                    olmap,
+                    getOLFeatureListfromGeoJSON({
+                        features: huc8s,
+                        type: 'FeatureCollection',
+                    }),
+                    munDrHuc8MapLayerName,
+                    'MunDrHuc8s',
+                    'name',
+                    'huc8',
+                )
                 updateInteractions(this.props)
             }
         } else {
@@ -75,7 +91,8 @@
                     </Grid>
                 </ListItem>
                 <Divider />
-                {!this.props.zoomedIn && this.renderExpandCollapse(layer, hasFeaturesList)}
+                {!this.props.zoomedIn &&
+                    this.renderExpandCollapse(layer, hasFeaturesList)}
             </div>
         )
     }
@@ -103,7 +120,13 @@
     renderLegend = (hasFeaturesList) => {
         if (!hasFeaturesList) {
             return (
-                <span style={{...inputFontStyle, fontSize: '14px', marginLeft: '5px'}}>
+                <span
+                    style={{
+                        ...inputFontStyle,
+                        fontSize: '14px',
+                        marginLeft: '5px',
+                    }}
+                >
                     No HUC8 watersheds found in the current map extent.
                 </span>
             )

static/er2_watershedpriority/js/components/datalayer/UrbanAreas.js

@@ -5,7 +5,7 @@
 import Checkbox from '@material-ui/core/Checkbox'
 import ListItem from '@material-ui/core/ListItem'
 import Collapse from '@material-ui/core/Collapse'
-import Map from 'catena/er2_map/src/map'
+import Map from '@owsi/catena/er2_map/src/map'
 import type { DataLayerType } from '../../reducers/data_layer'
 import {
     addRiverMapLayer,
@@ -30,12 +30,20 @@
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.state.isChecked !== prevState.isChecked) this.addUrbanAreaMapLayer()
-        if (this.props.dataLayer.urbanAreaLayer.areas !== prevProps.dataLayer.urbanAreaLayer.areas) this.addUrbanAreaMapLayer()
+        if (this.state.isChecked !== prevState.isChecked)
+            this.addUrbanAreaMapLayer()
+        if (
+            this.props.dataLayer.urbanAreaLayer.areas !==
+            prevProps.dataLayer.urbanAreaLayer.areas
+        )
+            this.addUrbanAreaMapLayer()
 
         if (this.state.isChecked) {
-            if (this.props.mapView.resolution !== prevProps.mapView.resolution ||
-                this.props.mapView.extent !== prevProps.mapView.extent) {
+            if (
+                this.props.mapView.resolution !==
+                    prevProps.mapView.resolution ||
+                this.props.mapView.extent !== prevProps.mapView.extent
+            ) {
                 if (this.props.mapView.resolution < 1250) {
                     this.props.onGetMs4UrbanAreas()
                 }
@@ -50,10 +58,15 @@
         if (this.state.isChecked) {
             removeMapLayer(olmap, areasMapLayerName)
             if (urbanAreas) {
-                addRiverMapLayer(olmap, getOLFeatureListfromGeoJSON({
-                    features: urbanAreas,
-                    type: 'FeatureCollection',
-                }), areasMapLayerName, 'UrbanAreas')
+                addRiverMapLayer(
+                    olmap,
+                    getOLFeatureListfromGeoJSON({
+                        features: urbanAreas,
+                        type: 'FeatureCollection',
+                    }),
+                    areasMapLayerName,
+                    'UrbanAreas',
+                )
                 updateInteractions(this.props)
             }
         } else {
@@ -75,7 +88,8 @@
                     </Grid>
                 </ListItem>
                 <Divider />
-                {!this.props.zoomedIn && this.renderExpandCollapse(layer, hasFeaturesList)}
+                {!this.props.zoomedIn &&
+                    this.renderExpandCollapse(layer, hasFeaturesList)}
             </div>
         )
     }
@@ -103,7 +117,13 @@
     renderLegend = (hasFeaturesList) => {
         if (!hasFeaturesList) {
             return (
-                <span style={{...inputFontStyle, fontSize: '14px', marginLeft: '5px'}}>
+                <span
+                    style={{
+                        ...inputFontStyle,
+                        fontSize: '14px',
+                        marginLeft: '5px',
+                    }}
+                >
                     No MS4 urban areas found in the current map extent.
                 </span>
             )

static/er2_watershedpriority/js/components/datalayer/Wwtfs.js

@@ -5,7 +5,7 @@
 import Checkbox from '@material-ui/core/Checkbox'
 import ListItem from '@material-ui/core/ListItem'
 import Collapse from '@material-ui/core/Collapse'
-import Map from 'catena/er2_map/src/map'
+import Map from '@owsi/catena/er2_map/src/map'
 import type { DataLayerType } from '../../reducers/data_layer'
 import {
     addMapLayer,
@@ -31,12 +31,20 @@
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.state.isChecked !== prevState.isChecked) this.addWwtfsMapLayer()
-        if (this.props.dataLayer.wwtfsDataLayer.wwtfs !== prevProps.dataLayer.wwtfsDataLayer.wwtfs) this.addWwtfsMapLayer()
+        if (this.state.isChecked !== prevState.isChecked)
+            this.addWwtfsMapLayer()
+        if (
+            this.props.dataLayer.wwtfsDataLayer.wwtfs !==
+            prevProps.dataLayer.wwtfsDataLayer.wwtfs
+        )
+            this.addWwtfsMapLayer()
 
         if (this.state.isChecked) {
-            if (this.props.mapView.resolution !== prevProps.mapView.resolution ||
-                this.props.mapView.extent !== prevProps.mapView.extent) {
+            if (
+                this.props.mapView.resolution !==
+                    prevProps.mapView.resolution ||
+                this.props.mapView.extent !== prevProps.mapView.extent
+            ) {
                 if (this.props.mapView.resolution < 1250) {
                     this.props.onGetWwtfs()
                 }
@@ -51,7 +59,13 @@
         if (this.state.isChecked) {
             removeMapLayer(olmap, wwtfsMapLayerName)
             if (wwtfs) {
-                addMapLayer(olmap, getOLFeatureList(wwtfs), wwtfsMapLayerName, 'wwtfs', 'facility')
+                addMapLayer(
+                    olmap,
+                    getOLFeatureList(wwtfs),
+                    wwtfsMapLayerName,
+                    'wwtfs',
+                    'facility',
+                )
                 updateInteractions(this.props)
             }
         } else {
@@ -65,10 +79,10 @@
         const wwtfFeatures = layer.wwtfs ? layer.wwtfs : null
         let hasNoFeatures = true
         try {
-            if (wwtfFeatures && wwtfFeatures.length){
+            if (wwtfFeatures && wwtfFeatures.length) {
                 hasNoFeatures = false
             }
-        } catch(err) {
+        } catch (err) {
             //array has no 'length()'
             const temp = 1
         }
@@ -80,7 +94,8 @@
                     </Grid>
                 </ListItem>
                 <Divider />
-                {!this.props.zoomedIn && this.renderExpandCollapse(layer, hasNoFeatures)}
+                {!this.props.zoomedIn &&
+                    this.renderExpandCollapse(layer, hasNoFeatures)}
             </div>
         )
     }
@@ -108,7 +123,13 @@
     renderLegend = (hasNoFeatures) => {
         if (hasNoFeatures) {
             return (
-                <span style={{...inputFontStyle, fontSize: '14px', marginLeft: '5px'}}>
+                <span
+                    style={{
+                        ...inputFontStyle,
+                        fontSize: '14px',
+                        marginLeft: '5px',
+                    }}
+                >
                     No CO. Reg. 85 WWTFs found in the current map extent.
                 </span>
             )

static/er2_watershedpriority/js/components/datalayer/utils.js

@@ -11,7 +11,7 @@
 import OlStyleStroke from 'ol/style/Stroke'
 import OlStyleText from 'ol/style/Text'
 import { click } from 'ol/events/condition'
-import { olUtils, styles } from 'catena/er2_ui'
+import { olUtils, styles } from '@owsi/catena/er2_ui'
 import OLVectorLayer from 'ol/layer/Vector'
 import OLVectorSource from 'ol/source/Vector'
 import Text from 'ol/style/Text'
@@ -34,17 +34,17 @@
 }
 export const CoLandOwnershipIconColor = '#006400'
 export const CoLandOwnershipFillColor = {
-    'BLM': '#ffffbe',
-    'Federal': '#c29ed7',
-    'Local': '#bee8ff',
+    BLM: '#ffffbe',
+    Federal: '#c29ed7',
+    Local: '#bee8ff',
     'NGO/Land Trust': '#730000',
-    'NPS': '#704489',
-    'Private': '#ffffff',
+    NPS: '#704489',
+    Private: '#ffffff',
     'Private Conservation': '#ffaa00',
-    'State': '#6699cd',
-    'Tribal': '#d7c29e',
-    'USFS': '#b4d79e',
-    'USFWS': '#00734c',
+    State: '#6699cd',
+    Tribal: '#d7c29e',
+    USFS: '#b4d79e',
+    USFWS: '#00734c',
 }
 export const CoWatershedPlansIconColor = '#000000'
 export const CoWatershedPlansFillColor = '#6495ED'
@@ -64,12 +64,11 @@
 
 function clearInteractions(olmap) {
     // Clear interactions
-    olmap.getInteractions()
-        .forEach((interaction) => {
-            if (interaction instanceof OLSelect) {
-                olmap.removeInteraction(interaction)
-            }
-        })
+    olmap.getInteractions().forEach((interaction) => {
+        if (interaction instanceof OLSelect) {
+            olmap.removeInteraction(interaction)
+        }
+    })
 }
 
 export function updateInteractions(props) {
@@ -134,46 +133,53 @@
     },
 }
 
-const getMapTextFillColor = label => mapColors[label].textFillColor
+const getMapTextFillColor = (label) => mapColors[label].textFillColor
 
-const getMapTextStrokeColor = label => mapColors[label].textStrokeColor
+const getMapTextStrokeColor = (label) => mapColors[label].textStrokeColor
 
-const getMapIconFillColor = label => mapColors[label].iconFillColor
+const getMapIconFillColor = (label) => mapColors[label].iconFillColor
 
-const getMapIconStrokeColor = label => mapColors[label].iconStrokeColor
+const getMapIconStrokeColor = (label) => mapColors[label].iconStrokeColor
 
-export const getOLFeatureList = stations => (
+export const getOLFeatureList = (stations) =>
     stations.map((f) => {
-        const geometry =
-            new OLPoint([parseFloat(f.longitude), parseFloat(f.latitude)]).transform('EPSG:4326', 'EPSG:3857')
+        const geometry = new OLPoint([
+            parseFloat(f.longitude),
+            parseFloat(f.latitude),
+        ]).transform('EPSG:4326', 'EPSG:3857')
         return new OLFeature({ geometry, ...f })
     })
-)
 
 export const getOLFeatureListfromGeoJSON = (data) => {
     const featureProjection = 'EPSG:3857'
     const dataProjection = 'EPSG:4326'
-    return (
-        new OLGeoJSON().readFeatures(data, {
-            featureProjection,
-            dataProjection,
-        })
-    )
+    return new OLGeoJSON().readFeatures(data, {
+        featureProjection,
+        dataProjection,
+    })
 }
 
 export const removeMapLayer = (olmap, layerName) => {
-    olmap.getLayers()
-        .forEach((layer) => {
-            if (layer !== undefined) {
-                if (layer.get('name') !== undefined && layer.get('name') === layerName) {
-                    olmap.removeLayer(layer)
-                }
+    olmap.getLayers().forEach((layer) => {
+        if (layer !== undefined) {
+            if (
+                layer.get('name') !== undefined &&
+                layer.get('name') === layerName
+            ) {
+                olmap.removeLayer(layer)
             }
-        })
+        }
+    })
 }
 
-export const addMapLayer = (olmap, features, layerName, colorParamName, textParamName) => {
-    const getLabel = f => f.get(textParamName)
+export const addMapLayer = (
+    olmap,
+    features,
+    layerName,
+    colorParamName,
+    textParamName,
+) => {
+    const getLabel = (f) => f.get(textParamName)
     function style(f, resolution) {
         let textStyle
         if (resolution < 40) {
@@ -207,7 +213,6 @@
         })
     }
 
-
     removeMapLayer(olmap, layerName)
     const layer = new OLVectorLayer({
         source: new OLVectorSource({ features }),
@@ -219,20 +224,26 @@
     olmap.addLayer(layer)
 }
 
-export const addEcoregionMapLayer = (olmap, features, layerName, colorParamName) => {
-    const vectorSource = new OLVectorSource({features})
+export const addEcoregionMapLayer = (
+    olmap,
+    features,
+    layerName,
+    colorParamName,
+) => {
+    const vectorSource = new OLVectorSource({ features })
 
     function style(f) {
         return olUtils.getOlStyles({
             fill: new OlStyleFill({
-                color: mapColors[colorParamName].iconFillColor[f.get('us_l3name')],
+                color:
+                    mapColors[colorParamName].iconFillColor[f.get('us_l3name')],
             }),
             stroke: new OlStyleStroke({
                 color: getMapIconStrokeColor(colorParamName),
                 width: 2,
             }),
             text: new Text({
-                backgroundFill: new OlStyleFill({color: 'white'}),
+                backgroundFill: new OlStyleFill({ color: 'white' }),
                 font: '14px "Roboto Condensed", sans-serif',
                 placement: 'point',
                 // stroke: new Stroke(olUtils.styles.text.stroke),
@@ -254,8 +265,13 @@
     olmap.addLayer(layer)
 }
 
-export const addOwnershipMapLayer = (olmap, features, layerName, colorParamName) => {
-    const vectorSource = new OLVectorSource({features})
+export const addOwnershipMapLayer = (
+    olmap,
+    features,
+    layerName,
+    colorParamName,
+) => {
+    const vectorSource = new OLVectorSource({ features })
 
     function style(f) {
         return olUtils.getOlStyles({
@@ -267,7 +283,7 @@
                 width: 2,
             }),
             text: new Text({
-                backgroundFill: new OlStyleFill({color: 'white'}),
+                backgroundFill: new OlStyleFill({ color: 'white' }),
                 font: '14px "Roboto Condensed", sans-serif',
                 placement: 'point',
                 // stroke: new Stroke(olUtils.styles.text.stroke),
@@ -289,8 +305,13 @@
     olmap.addLayer(layer)
 }
 
-export const addWatershedPlansLayer = (olmap, features, layerName, colorParamName) => {
-    const vectorSource = new OLVectorSource({features})
+export const addWatershedPlansLayer = (
+    olmap,
+    features,
+    layerName,
+    colorParamName,
+) => {
+    const vectorSource = new OLVectorSource({ features })
 
     function style(f) {
         return olUtils.getOlStyles({
@@ -302,7 +323,7 @@
                 width: 1,
             }),
             text: new Text({
-                backgroundFill: new OlStyleFill({color: 'white'}),
+                backgroundFill: new OlStyleFill({ color: 'white' }),
                 font: '14px "Roboto Condensed", sans-serif',
                 placement: 'point',
                 // stroke: new Stroke(olUtils.styles.text.stroke),
@@ -324,7 +345,12 @@
     olmap.addLayer(layer)
 }
 
-export const addRiverMapLayer = (olmap, features, layerName, colorParamName) => {
+export const addRiverMapLayer = (
+    olmap,
+    features,
+    layerName,
+    colorParamName,
+) => {
     const vectorSource = new OLVectorSource({ features })
 
     function style(f) {
@@ -359,13 +385,30 @@
     olmap.addLayer(layer)
 }
 
-export const addDrinkingWaterMapLayer = (olmap, features, layerName, colorParamName, label1, label2) => {
+export const addDrinkingWaterMapLayer = (
+    olmap,
+    features,
+    layerName,
+    colorParamName,
+    label1,
+    label2,
+) => {
     const vectorSource = new OLVectorSource({ features })
 
     function style(f) {
-        let textLabel = f.get(label1) + ': ' + f.get('inf_srcwtr') + ' Drinking Water Intakes'
+        let textLabel =
+            f.get(label1) +
+            ': ' +
+            f.get('inf_srcwtr') +
+            ' Drinking Water Intakes'
         if (label2) {
-            textLabel = f.get(label1) + ' (' + f.get(label2) + '): ' + f.get('inf_srcwtr') + ' Drinking Water Intakes'
+            textLabel =
+                f.get(label1) +
+                ' (' +
+                f.get(label2) +
+                '): ' +
+                f.get('inf_srcwtr') +
+                ' Drinking Water Intakes'
         }
         return olUtils.getOlStyles({
             fill: new OlStyleFill({
@@ -398,13 +441,30 @@
     olmap.addLayer(layer)
 }
 
-export const addMunicipalDrinkingWaterMapLayer = (olmap, features, layerName, colorParamName, label1, label2) => {
+export const addMunicipalDrinkingWaterMapLayer = (
+    olmap,
+    features,
+    layerName,
+    colorParamName,
+    label1,
+    label2,
+) => {
     const vectorSource = new OLVectorSource({ features })
 
     function style(f) {
-        let textLabel = f.get(label1) + ': ' + f.get('inf_srcwtr') + ' Municipal Drinking Water Intakes'
+        let textLabel =
+            f.get(label1) +
+            ': ' +
+            f.get('inf_srcwtr') +
+            ' Municipal Drinking Water Intakes'
         if (label2) {
-            textLabel = f.get(label1) + ' (' + f.get(label2) + '): ' + f.get('inf_srcwtr') + ' Municipal Drinking Water Intakes'
+            textLabel =
+                f.get(label1) +
+                ' (' +
+                f.get(label2) +
+                '): ' +
+                f.get('inf_srcwtr') +
+                ' Municipal Drinking Water Intakes'
         }
         return olUtils.getOlStyles({
             fill: new OlStyleFill({
@@ -435,4 +495,4 @@
     })
 
     olmap.addLayer(layer)
-}
\ No newline at end of file
+}

static/er2_watershedpriority/js/components/instructions.js

@@ -2,7 +2,7 @@
 import * as React from 'react'
 import { withRouter } from 'react-router-dom'
 import { withStyles } from '@material-ui/core/styles'
-import { TokenNavLink } from 'catena/er2_ui'
+import { TokenNavLink } from '@owsi/catena/er2_ui'
 import { parseLocation } from 'er2_web_utils'
 
 import * as ids from '../constants/ids'
@@ -48,25 +48,56 @@
         const { classes } = this.props
         const tokenClasses = `${this.props.theme.link}`
         return (
-            <div className={this.props.theme.instructions} style={{ fontSize: 'larger' }}>
+            <div
+                className={this.props.theme.instructions}
+                style={{ fontSize: 'larger' }}
+            >
                 <h2 className={classes.title}>
-                    Watershed Prioritization Tool
+                    Non-Point Source Prioritization Tool
                 </h2>
                 <TokenNavLink
                     className={tokenClasses}
                     to={routes.INSTRUCTIONS_INTRODUCTION}
                     token={this.props.token}
                 >
-                    <h3 id={ids.INSTRUCTIONS_INTRODUCTION} style={{ display: 'inline-block'}}>Introduction</h3>
+                    <h3
+                        id={ids.INSTRUCTIONS_INTRODUCTION}
+                        style={{ display: 'inline-block' }}
+                    >
+                        Introduction
+                    </h3>
                 </TokenNavLink>
                 <p className={classes.p}>
-                    This tool allows users to explore Colorado water systems and prioritize or rank particular watersheds or locations within them, based on a range of user-selected criteria to assist with decision making at the state-or-local level.
-                </p><p className={classes.p}>
-                    The Watershed Prioritization Dashboard (WPD) was developed to assist the Colorado Department of Public Health and the Environment (CDPHE) prioritize watersheds for conservation, restoration, and preservation.
-                </p><p className={classes.p}>
-                    The WPD uses a Multi-Criteria Decision Analysis (MCDA) approach to assist with tactical decision making by allowing users to build customized analysis scenarios and identify critical watersheds in the specified region. Using a geospatial interface, users are able to select from three pre-populated analyses with default values to reflect the indicators identified by the Environmental Protection Agency (EPA) Health Watersheds Assessment Program and the CDPHE.
-                </p><p className={classes.p}>
-                    Users can customize the both level of importance and either maximize or minimize the significance of numerous assessment indicators ranging from landscape and biological condition to water quality and contamination, to land use and climate change.  Multiple analyses can be conducted and compared within the dashboard.  Results and raw data can be exported as a spreadsheet and the interactive graphing features help visualize the model outputs.
+                    This tool allows users to explore Colorado water systems and
+                    prioritize or rank particular watersheds or locations within
+                    them, based on a range of user-selected criteria to assist
+                    with decision making at the state-or-local level.
+                </p>
+                <p className={classes.p}>
+                    The Non-Point Source Prioritization Dashboard (NPSPD) was
+                    developed to assist the Colorado Department of Public Health
+                    and the Environment (CDPHE) prioritize watersheds for
+                    conservation, restoration, and preservation.
+                </p>
+                <p className={classes.p}>
+                    The NPSPD uses a Multi-Criteria Decision Analysis (MCDA)
+                    approach to assist with tactical decision making by allowing
+                    users to build customized analysis scenarios and identify
+                    critical watersheds in the specified region. Using a
+                    geospatial interface, users are able to select from three
+                    pre-populated analyses with default values to reflect the
+                    indicators identified by the Environmental Protection Agency
+                    (EPA) Health Watersheds Assessment Program and the CDPHE.
+                </p>
+                <p className={classes.p}>
+                    Users can customize the both level of importance and either
+                    maximize or minimize the significance of numerous assessment
+                    indicators ranging from landscape and biological condition
+                    to water quality and contamination, to land use and climate
+                    change. Multiple analyses can be conducted and compared
+                    within the dashboard. Results and raw data can be exported
+                    as a spreadsheet and the interactive graphing features help
+                    visualize the model outputs.
                 </p>
             </div>
         )

static/er2_watershedpriority/js/components/table_of_contents_bar_item.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react'
-import { TokenNavLink } from 'catena/er2_ui'
+import { TokenNavLink } from '@owsi/catena/er2_ui'
 
 type Props = {
     idx: number,
@@ -13,7 +13,9 @@
 
 // Displays buttons or links associated with a table of contents
 function TableOfContentsBarItem(props: Props) {
-    const classNames = `${props.theme.tableOfContentsBarItem} ${props.theme.link}
+    const classNames = `${props.theme.tableOfContentsBarItem} ${
+        props.theme.link
+    }
         ${props.active ? props.theme.active : ''}`
     return (
         <TokenNavLink

static/er2_watershedpriority/js/components/watershed/MCDALegend.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react'
-import { windowStates } from 'catena/er2_map_userlayers/js/components/window_state'
+import { windowStates } from '@owsi/catena/er2_map_userlayers/js/components/window_state'
 
 function MCDALegend(props) {
     return (

static/er2_watershedpriority/js/components/watershed/aoi.js

@@ -9,12 +9,12 @@
 import StepConnector from '@material-ui/core/StepConnector'
 import Button from '@material-ui/core/Button'
 import { withStyles } from '@material-ui/core/styles'
-import CatenaMap from 'catena/er2_map/src/map'
-import AOISelect from 'catena/er2_map_userlayers/js/components/aoi_select'
+import CatenaMap from '@owsi/catena/er2_map/src/map'
+import AOISelect from '@owsi/catena/er2_map_userlayers/js/components/aoi_select'
 import OlStyleFill from 'ol/style/Fill'
 import OlStyleStroke from 'ol/style/Stroke'
 import { parse, stringify } from 'query-string'
-import type { AOIstate } from 'catena/er2_map_userlayers/js/components/aoi_select'
+import type { AOIstate } from '@owsi/catena/er2_map_userlayers/js/components/aoi_select'
 import { FetchSpinner } from '../common/commonComps'
 import RadioGroupComponent from '../common/RadioGroupComponent'
 import type { AOIType } from '../../reducers/aoi'
@@ -72,18 +72,24 @@
     }
 
     render = () => (
-        <div className={this.props.theme.controlBar} style={{ overflowY: 'scroll' }}>
-            <Stepper activeStep={this.state.activeStep} orientation="vertical" connector={<StyledStepConnector />}>
-                {this.getSteps()
-                    .map((label, index) => (
-                        <Step key={index.toString()}>
-                            <StepLabel>{label}</StepLabel>
-                            <StepContent>
-                                {this.renderStep1()}
-                                {this.renderStep2()}
-                            </StepContent>
-                        </Step>
-                    ))}
+        <div
+            className={this.props.theme.controlBar}
+            style={{ overflowY: 'scroll' }}
+        >
+            <Stepper
+                activeStep={this.state.activeStep}
+                orientation="vertical"
+                connector={<StyledStepConnector />}
+            >
+                {this.getSteps().map((label, index) => (
+                    <Step key={index.toString()}>
+                        <StepLabel>{label}</StepLabel>
+                        <StepContent>
+                            {this.renderStep1()}
+                            {this.renderStep2()}
+                        </StepContent>
+                    </Step>
+                ))}
             </Stepper>
         </div>
     )
@@ -122,10 +128,11 @@
                     toolLabel={''}
                     initialState={this.props.aoi}
                 />
-                {
-                    this.props.aoi.aoiSelectInitialState.aoiFeature &&
-                    <div style={{ textAlign: 'right', paddingTop: '7px' }}>{this.renderNextButton()}</div>
-                }
+                {this.props.aoi.aoiSelectInitialState.aoiFeature && (
+                    <div style={{ textAlign: 'right', paddingTop: '7px' }}>
+                        {this.renderNextButton()}
+                    </div>
+                )}
             </div>
         )
     }
@@ -141,16 +148,30 @@
                 <Grid container direction={'column'} spacing={3}>
                     <Grid item>
                         <RadioGroupComponent
-                            menuItemList={['None', 'huc8', 'huc10', 'huc12', 'County']}
+                            menuItemList={[
+                                'None',
+                                'huc8',
+                                'huc10',
+                                'huc12',
+                                'County',
+                            ]}
                             onSelect={this.handleSelectSubRegionType}
                             selectIntValue={this.props.aoi.subRegion.type}
                         />
                     </Grid>
                     <Grid item>{this.renderSelectSubRegion()}</Grid>
                     <Grid item>
-                        <Grid container direction={'row'} justify="space-between" alignItems="center">
+                        <Grid
+                            container
+                            direction={'row'}
+                            justify="space-between"
+                            alignItems="center"
+                        >
                             <Grid item>{this.renderBackButton()}</Grid>
-                            <Grid item>{this.props.aoi.subRegion.features !== undefined && this.renderNextButton()}</Grid>
+                            <Grid item>
+                                {this.props.aoi.subRegion.features !==
+                                    undefined && this.renderNextButton()}
+                            </Grid>
                         </Grid>
                     </Grid>
                 </Grid>
@@ -159,17 +180,25 @@
     }
 
     handleSelectSubRegionType = (subRegionType) => {
-        if (subRegionType !== 'None') this.props.actions.onGetSubRegions(this.props.aoi.aoiSelectInitialState.aoiFeature, subRegionType)
+        if (subRegionType !== 'None')
+            this.props.actions.onGetSubRegions(
+                this.props.aoi.aoiSelectInitialState.aoiFeature,
+                subRegionType,
+            )
     }
 
     renderSelectSubRegion = () => {
-        if (this.props.aoi.subRegion.isFetching) return <FetchSpinner message={'Fetching subregions'} />
+        if (this.props.aoi.subRegion.isFetching)
+            return <FetchSpinner message={'Fetching subregions'} />
         return null
     }
 
     renderBackButton = () => (
         <Tooltip title={'Previous step'}>
-            <Button onClick={this.handleBack} style={{ color: 'rgb(43, 84, 162)' }}>
+            <Button
+                onClick={this.handleBack}
+                style={{ color: 'rgb(43, 84, 162)' }}
+            >
                 <i className=" fas fa-arrow-left" style={{ padding: '3px' }} />
                 Back
             </Button>
@@ -178,7 +207,10 @@
 
     renderNextButton = () => (
         <Tooltip title={'Next step'}>
-            <Button onClick={this.handleNext} style={{ color: 'rgb(43, 84, 162)' }}>
+            <Button
+                onClick={this.handleNext}
+                style={{ color: 'rgb(43, 84, 162)' }}
+            >
                 Next
                 <i className="fa fa-arrow-right" style={{ padding: '3px' }} />
             </Button>

static/er2_watershedpriority/js/components/watershed/mcda.js

@@ -2,7 +2,7 @@
 import React from 'react'
 import RcSlider from 'rc-slider'
 import RcTooltip from 'rc-tooltip'
-import htmlToImage from 'html-to-image'
+import { toPng } from 'html-to-image'
 import {
     Button,
     Checkbox,
@@ -21,7 +21,7 @@
 import MaximizeIcon from '@material-ui/icons/ArrowUpward'
 import MinimizeIcon from '@material-ui/icons/ArrowDownward'
 import { withStyles } from '@material-ui/core/styles'
-import CatenaMap from 'catena/er2_map/src/map'
+import CatenaMap from '@owsi/catena/er2_map/src/map'
 import { FetchSpinner, SliderLabel } from '../common/commonComps'
 import { inpComponentFontStyle } from '../../styles/wptInput'
 import type { IndicatorsType } from '../../reducers/indicators'
@@ -109,7 +109,7 @@
             expanded: {},
         }
         this.props.indicators.categories.forEach(
-            c => (this.state.expanded[c] = false),
+            (c) => (this.state.expanded[c] = false),
         )
     }
 
@@ -158,7 +158,7 @@
             legendNode.style.gridRow = 'initial'
             legendNode.style.gridColumnStart = 'initial'
             legendNode.style.zIndex = 111
-            const dataUrl = await htmlToImage.toPng(legendNode)
+            const dataUrl = await toPng(legendNode)
             const legendImg = dataUrl.substr(22, dataUrl.length)
 
             this.props.actions.onGenerateReport(
@@ -186,7 +186,7 @@
         )
     }
 
-    renderMCDATypeSelection = mcdaType => (
+    renderMCDATypeSelection = (mcdaType) => (
         <Grid
             container
             direction={'row'}
@@ -198,7 +198,7 @@
                 <FormControl>
                     <RadioGroup
                         value={mcdaType}
-                        onChange={event =>
+                        onChange={(event) =>
                             this.props.actions.onChangeMCDAType(
                                 event.target.value,
                             )
@@ -266,7 +266,7 @@
     )
 
     renderAccordion = (categoriesList, mcda, mcdaType) =>
-        categoriesList.map(category => (
+        categoriesList.map((category) => (
             <Accordion key={category} expanded={this.state.expanded[category]}>
                 {this.renderAccordionSummary(category, mcda)}
                 {this.renderAccordionDetails(category, mcda, mcdaType)}
@@ -292,7 +292,7 @@
                             <Grid item style={{ paddingBottom: 0 }}>
                                 <StyledCheckbox
                                     checked={isCategoryEnabled}
-                                    onClick={event =>
+                                    onClick={(event) =>
                                         this.handleOnCheckboxChange(
                                             event,
                                             category,
@@ -315,7 +315,7 @@
                             spacing={0}
                         >
                             <Grid item xs={12} style={{ margin: 20 }}>
-                                <div onClick={e => e.stopPropagation()}>
+                                <div onClick={(e) => e.stopPropagation()}>
                                     <RcSlider
                                         dots
                                         disabled={!isCategoryEnabled}
@@ -324,7 +324,7 @@
                                         max={4}
                                         step={1}
                                         value={categoryWeight}
-                                        onChange={event =>
+                                        onChange={(event) =>
                                             this.handleOnSliderChange(
                                                 category,
                                                 event,
@@ -357,7 +357,7 @@
                 </Grid>
                 {this.props.indicators.categoryIndicators[
                     category
-                ].map(indicator =>
+                ].map((indicator) =>
                     this.renderIndicatorSlider(
                         category,
                         indicator,
@@ -419,7 +419,7 @@
                             control={
                                 <StyledCheckbox
                                     checked={isChecked}
-                                    onChange={event =>
+                                    onChange={(event) =>
                                         this.handleOnCheckboxChange(
                                             event,
                                             id,
@@ -442,7 +442,7 @@
                             max={4}
                             step={1}
                             value={weight}
-                            onChange={event =>
+                            onChange={(event) =>
                                 this.handleOnSliderChange(id, event)
                             }
                             style={{ maxWidth: '60px' }}
@@ -458,7 +458,7 @@
                                 classes={{
                                     sizeSmall: this.props.theme.minMaxButton,
                                 }}
-                                onClick={event =>
+                                onClick={(event) =>
                                     this.handleOnChangeMinMax('max', id)
                                 }
                                 size={'small'}
@@ -484,7 +484,7 @@
                                 classes={{
                                     sizeSmall: this.props.theme.minMaxButton,
                                 }}
-                                onClick={event =>
+                                onClick={(event) =>
                                     this.handleOnChangeMinMax('min', id)
                                 }
                                 size={'small'}

static/er2_watershedpriority/js/containers/app.js

@@ -34,26 +34,31 @@
 import DialogTitle from '@material-ui/core/DialogTitle'
 import Typography from '@material-ui/core/Typography'
 import Snackbar from '@material-ui/core/Snackbar'
-import { Breadcrumbs, ContextBar, Header, TokenNavLink } from 'catena/er2_ui'
+import {
+    Breadcrumbs,
+    ContextBar,
+    Header,
+    TokenNavLink,
+} from '@owsi/catena/er2_ui'
 import exportData from 'highcharts/modules/export-data'
 import { parseLocation } from 'er2_web_utils'
-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 AttributeTable from '@owsi/catena/er2_map_userlayers/js/components/attribute_table/attribute_table_stable'
+import TabbedPanel from '@owsi/catena/er2_map_userlayers/js/components/tabbed_panel'
+import UserLayersContainer from '@owsi/catena/er2_map_userlayers/js/containers/userlayers'
 import WindowState, {
     windowStates,
-} from 'catena/er2_map_userlayers/js/components/window_state'
-import muiTheme, { customMuiTheme } from 'catena/er2_styles/mui'
-import Theme from 'catena/er2_styles'
-import type { AttributeTablesType } from 'catena/er2_map_userlayers/js/reducers/attribute_tables'
-import type { GeoBarType, MapToolbarType } from 'catena/er2_ui'
-import type { IdentifyType } from 'catena/er2_map_userlayers/js/reducers/identify'
-import type { LoggerType } from 'catena/er2_map_userlayers/js/reducers/logger'
-import type { MapType } from 'catena/er2_map_userlayers/js/reducers/map'
-import type { MapsourcesType } from 'catena/er2_map_userlayers/js/reducers/mapsources'
-import type { MapBaseLayerType } from 'catena/er2_map_userlayers/js/reducers/mapbaselayer'
-import type { ServicesType } from 'catena/er2_map_services/js/reducers/services'
-import type { TabbedPanelType } from 'catena/er2_map_userlayers/js/reducers/tabbed_panel'
+} from '@owsi/catena/er2_map_userlayers/js/components/window_state'
+import muiTheme, { customMuiTheme } from '@owsi/catena/er2_styles/mui'
+import Theme from '@owsi/catena/er2_styles'
+import type { AttributeTablesType } from '@owsi/catena/er2_map_userlayers/js/reducers/attribute_tables'
+import type { GeoBarType, MapToolbarType } from '@owsi/catena/er2_ui'
+import type { IdentifyType } from '@owsi/catena/er2_map_userlayers/js/reducers/identify'
+import type { LoggerType } from '@owsi/catena/er2_map_userlayers/js/reducers/logger'
+import type { MapType } from '@owsi/catena/er2_map_userlayers/js/reducers/map'
+import type { MapsourcesType } from '@owsi/catena/er2_map_userlayers/js/reducers/mapsources'
+import type { MapBaseLayerType } from '@owsi/catena/er2_map_userlayers/js/reducers/mapbaselayer'
+import type { ServicesType } from '@owsi/catena/er2_map_services/js/reducers/services'
+import type { TabbedPanelType } from '@owsi/catena/er2_map_userlayers/js/reducers/tabbed_panel'
 import * as colors from '../styles/colors'
 import styles from '../styles'
 import * as Actions from '../actions'
@@ -192,7 +197,7 @@
     const parsedLoc = parseLocation(location)
     // Set to null rather than undefined so that tabbedPanel set gridColEnd correctly.
     const activeMapToolbarPanel =
-        theprops.mapToolbar.items.find(item => item.active) || null
+        theprops.mapToolbar.items.find((item) => item.active) || null
 
     const showCatenaPanel = true
     const tocVisible =
@@ -220,7 +225,7 @@
 
                 // Check if the route doesn't match anything
                 const pathnames = Object.entries(routes).map(
-                    entry => entry[1],
+                    (entry) => entry[1],
                 )
                 if (!pathnames.includes(theprops.location.pathname)) {
                     theprops.history.push({
@@ -247,7 +252,7 @@
                                 to={routes.HOME}
                             >
                                 <span className={classes.logo}>
-                                    Watershed Prioritization Dashboard
+                                    Non-Point Source Prioritization Dashboard
                                 </span>
                                 <span className={classes.logoVersion}>
                                     v. {version}
@@ -261,7 +266,7 @@
                                 to={routes.HOME}
                             >
                                 <span className={classes.logo}>
-                                    Watershed Prioritization Dashboard
+                                    Non-Point Source Prioritization Dashboard
                                 </span>
                                 <span className={classes.logoVersion}>
                                     v. {version}
@@ -413,11 +418,11 @@
                 </DialogTitle>
                 <DialogContent>
                     <Typography gutterBottom>
-                        The Watershed Prioritization Dashboard (WPD) is still
-                        undergoing testing and development. As such, some
+                        The Non-Point Source Prioritization Dashboard (NPSPD) is
+                        still undergoing testing and development. As such, some
                         features and methodologies may change or be removed at
                         any time without prior notice. For any further questions
-                        about WPD, please contact Estella Moore (
+                        about NPSPD, please contact Estella Moore (
                         <a
                             href={'mailto:estella.moore@state.co.us'}
                             target={'_blank'}
@@ -457,7 +462,7 @@
 
     const getAnalysisPanelContents = () => {
         const attributeTables = theprops.attributeTables.attributeTables.map(
-            t => (
+            (t) => (
                 <AttributeTable
                     attributeTable={t}
                     buttons={[
@@ -557,7 +562,7 @@
     }
 
     const renderCatenaMap = () => {
-        const sub = s => s.substr(1, s.length - 2)
+        const sub = (s) => s.substr(1, s.length - 2)
         const mapPath = `/(${sub(routes.SPECIFY_INPUTS)}|${sub(
             routes.MCDA,
         )}|${sub(routes.DATALAYER)})`
@@ -606,7 +611,7 @@
         />
     )
 
-    const renderTabbedPanel = analysisPanelContents => (
+    const renderTabbedPanel = (analysisPanelContents) => (
         <React.Fragment>
             <WindowState
                 windowState={theprops.tabbedPanel.windowState}
@@ -774,7 +779,7 @@
     tableOfContents: { items: [] },
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
     aoi: state.aoi,
     attributeTables: state.attributeTables,
     contextBar: state.contextBar,
@@ -800,7 +805,7 @@
     watershedTool: state.watershedTool,
 })
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
     actions: bindActionCreators(Actions, dispatch),
 })
 

static/er2_watershedpriority/js/reducers/aoi.js

@@ -1,5 +1,5 @@
 // @flow
-import type { AOIstate } from 'catena/er2_map_userlayers/js/components/aoi_select'
+import type { AOIstate } from '@owsi/catena/er2_map_userlayers/js/components/aoi_select'
 import * as actionTypes from '../constants/action_types'
 
 type FeatureType = {
@@ -45,7 +45,11 @@
     } else if (action.type === actionTypes.RESET_AOI) {
         ret = initialState
     } else if (action.type === actionTypes.SET_AOI_SELECT_STATE) {
-        ret = { ...state, aoiSelectInitialState: action.initialState, regionGeometry: action.initialState.aoiFeature }
+        ret = {
+            ...state,
+            aoiSelectInitialState: action.initialState,
+            regionGeometry: action.initialState.aoiFeature,
+        }
     } else if (action.type === actionTypes.SET_SUBREGION) {
         ret = {
             ...state,

static/er2_watershedpriority/js/reducers/data_layer.js

@@ -1,5 +1,5 @@
 // @flow
-import * as er2MapActionTypes from 'catena/er2_map_userlayers/js/constants/action_types'
+import * as er2MapActionTypes from '@owsi/catena/er2_map_userlayers/js/constants/action_types'
 import * as actionTypes from '../constants/action_types'
 
 export type WaterTreatmentFacilityType = {
@@ -97,118 +97,284 @@
     whichLayer: 0,
     drHuc8Layer: {
         fetchingLayer: false,
-        watersheds: []
+        watersheds: [],
     },
     drHuc10Layer: {
         fetchingLayer: false,
-        watersheds: []
+        watersheds: [],
     },
     drHuc12Layer: {
         fetchingLayer: false,
-        watersheds: []
+        watersheds: [],
     },
     drCountyLayer: {
         fetchingLayer: false,
-        watersheds: []
+        watersheds: [],
     },
     munDrHuc8Layer: {
         fetchingLayer: false,
-        watersheds: []
+        watersheds: [],
     },
     munDrHuc10Layer: {
         fetchingLayer: false,
-        watersheds: []
+        watersheds: [],
     },
     munDrHuc12Layer: {
         fetchingLayer: false,
-        watersheds: []
+        watersheds: [],
     },
     munDrCountyLayer: {
         fetchingLayer: false,
-        watersheds: []
+        watersheds: [],
     },
     coEcoregionsLayer: {
         fetchingLayer: false,
-        areas: []
+        areas: [],
     },
     coLandOwnershipLayer: {
         fetchingLayer: false,
-        areas: []
+        areas: [],
     },
     coWatershedPlansLayer: {
         fetchingLayer: false,
-        areas: []
+        areas: [],
     },
     urbanAreaLayer: {
         fetchingLayer: false,
-        areas: []
+        areas: [],
     },
     wwtfsDataLayer: {
         fetchingLayer: false,
-        wwtfs: []
+        wwtfs: [],
     },
 }
 
-const getWwtfIndex = (state, database, stationid) => state.wwtfs[database].findIndex(s => s.stationid === stationid)
+const getWwtfIndex = (state, database, stationid) =>
+    state.wwtfs[database].findIndex((s) => s.stationid === stationid)
 
-export default function dataLayer(state: DataLayerType = initialState, action: any) {
+export default function dataLayer(
+    state: DataLayerType = initialState,
+    action: any,
+) {
     let ret = state
     if (action.type === actionTypes.SET_DATA_LAYER) {
         ret = { ...state, whichLayer: action.layerType }
     } else if (action.type === actionTypes.SET_CO_ECOREGIONS) {
-        ret = { ...state, coEcoregionsLayer: { ...state.coEcoregionsLayer, areas: action.coEcoregionsData.co_ecoregions_layer } }
+        ret = {
+            ...state,
+            coEcoregionsLayer: {
+                ...state.coEcoregionsLayer,
+                areas: action.coEcoregionsData.co_ecoregions_layer,
+            },
+        }
     } else if (action.type === actionTypes.SET_FETCHING_CO_ECOREGIONS) {
-        ret = {...state, coEcoregionsLayer: {...state.coEcoregionsLayer, fetchingLayer: action.isFetching}}
+        ret = {
+            ...state,
+            coEcoregionsLayer: {
+                ...state.coEcoregionsLayer,
+                fetchingLayer: action.isFetching,
+            },
+        }
     } else if (action.type === actionTypes.SET_CO_LAND_OWNERSHIP) {
-        ret = { ...state, coLandOwnershipLayer: { ...state.coLandOwnershipLayer, areas: action.colandOwnerData.co_land_own_layer } }
+        ret = {
+            ...state,
+            coLandOwnershipLayer: {
+                ...state.coLandOwnershipLayer,
+                areas: action.colandOwnerData.co_land_own_layer,
+            },
+        }
     } else if (action.type === actionTypes.SET_FETCHING_CO_LAND_OWNERSHIP) {
-        ret = {...state, coLandOwnershipLayer: {...state.coLandOwnershipLayer, fetchingLayer: action.isFetching}}
+        ret = {
+            ...state,
+            coLandOwnershipLayer: {
+                ...state.coLandOwnershipLayer,
+                fetchingLayer: action.isFetching,
+            },
+        }
     } else if (action.type === actionTypes.SET_CO_WATERSHED_PLANS) {
-        ret = { ...state, coWatershedPlansLayer: { ...state.coWatershedPlansLayer, areas: action.coWatershedPlanData.co_watershed_plan_layer } }
+        ret = {
+            ...state,
+            coWatershedPlansLayer: {
+                ...state.coWatershedPlansLayer,
+                areas: action.coWatershedPlanData.co_watershed_plan_layer,
+            },
+        }
     } else if (action.type === actionTypes.SET_FETCHING_CO_WATERSHED_PLANS) {
-        ret = {...state, coWatershedPlansLayer: {...state.coWatershedPlansLayer, fetchingLayer: action.isFetching}}
+        ret = {
+            ...state,
+            coWatershedPlansLayer: {
+                ...state.coWatershedPlansLayer,
+                fetchingLayer: action.isFetching,
+            },
+        }
     } else if (action.type === actionTypes.SET_DR_HUC8S) {
-        ret = { ...state, drHuc8Layer: { ...state.drHuc8Layer, watersheds: action.drHuc8Data.dr_layer } }
+        ret = {
+            ...state,
+            drHuc8Layer: {
+                ...state.drHuc8Layer,
+                watersheds: action.drHuc8Data.dr_layer,
+            },
+        }
     } else if (action.type === actionTypes.SET_FETCHING_DR_HUC8S) {
-        ret = { ...state, drHuc8Layer: { ...state.drHuc8Layer, fetchingLayer: action.isFetching } }
+        ret = {
+            ...state,
+            drHuc8Layer: {
+                ...state.drHuc8Layer,
+                fetchingLayer: action.isFetching,
+            },
+        }
     } else if (action.type === actionTypes.SET_DR_HUC10S) {
-        ret = { ...state, drHuc10Layer: { ...state.drHuc10Layer, watersheds: action.drHuc10Data.dr_layer } }
+        ret = {
+            ...state,
+            drHuc10Layer: {
+                ...state.drHuc10Layer,
+                watersheds: action.drHuc10Data.dr_layer,
+            },
+        }
     } else if (action.type === actionTypes.SET_FETCHING_DR_HUC10S) {
-        ret = { ...state, drHuc10Layer: { ...state.drHuc10Layer, fetchingLayer: action.isFetching } }
+        ret = {
+            ...state,
+            drHuc10Layer: {
+                ...state.drHuc10Layer,
+                fetchingLayer: action.isFetching,
+            },
+        }
     } else if (action.type === actionTypes.SET_DR_HUC12S) {
-        ret = { ...state, drHuc12Layer: { ...state.drHuc12Layer, watersheds: action.drHuc12Data.dr_layer } }
+        ret = {
+            ...state,
+            drHuc12Layer: {
+                ...state.drHuc12Layer,
+                watersheds: action.drHuc12Data.dr_layer,
+            },
+        }
     } else if (action.type === actionTypes.SET_FETCHING_DR_HUC12S) {
-        ret = { ...state, drHuc12Layer: { ...state.drHuc12Layer, fetchingLayer: action.isFetching } }
+        ret = {
+            ...state,
+            drHuc12Layer: {
+                ...state.drHuc12Layer,
+                fetchingLayer: action.isFetching,
+            },
+        }
     } else if (action.type === actionTypes.SET_DR_COUNTIES) {
-        ret = { ...state, drCountyLayer: { ...state.drCountyLayer, watersheds: action.drCountyData.dr_layer } }
+        ret = {
+            ...state,
+            drCountyLayer: {
+                ...state.drCountyLayer,
+                watersheds: action.drCountyData.dr_layer,
+            },
+        }
     } else if (action.type === actionTypes.SET_FETCHING_DR_COUNTIES) {
-        ret = { ...state, drCountyLayer: { ...state.drCountyLayer, fetchingLayer: action.isFetching } }
+        ret = {
+            ...state,
+            drCountyLayer: {
+                ...state.drCountyLayer,
+                fetchingLayer: action.isFetching,
+            },
+        }
     } else if (action.type === actionTypes.SET_MUN_DR_HUC8S) {
-        ret = { ...state, munDrHuc8Layer: { ...state.munDrHuc8Layer, watersheds: action.munDrHuc8Data.dr_layer } }
+        ret = {
+            ...state,
+            munDrHuc8Layer: {
+                ...state.munDrHuc8Layer,
+                watersheds: action.munDrHuc8Data.dr_layer,
+            },
+        }
     } else if (action.type === actionTypes.SET_FETCHING_MUN_DR_HUC8S) {
-        ret = { ...state, munDrHuc8Layer: { ...state.munDrHuc8Layer, fetchingLayer: action.isFetching } }
+        ret = {
+            ...state,
+            munDrHuc8Layer: {
+                ...state.munDrHuc8Layer,
+                fetchingLayer: action.isFetching,
+            },
+        }
     } else if (action.type === actionTypes.SET_MUN_DR_HUC10S) {
-        ret = { ...state, munDrHuc10Layer: { ...state.munDrHuc10Layer, watersheds: action.munDrHuc10Data.dr_layer } }
+        ret = {
+            ...state,
+            munDrHuc10Layer: {
+                ...state.munDrHuc10Layer,
+                watersheds: action.munDrHuc10Data.dr_layer,
+            },
+        }
     } else if (action.type === actionTypes.SET_FETCHING_MUN_DR_HUC10S) {
-        ret = { ...state, munDrHuc10Layer: { ...state.munDrHuc10Layer, fetchingLayer: action.isFetching } }
+        ret = {
+            ...state,
+            munDrHuc10Layer: {
+                ...state.munDrHuc10Layer,
+                fetchingLayer: action.isFetching,
+            },
+        }
     } else if (action.type === actionTypes.SET_MUN_DR_HUC12S) {
-        ret = { ...state, munDrHuc12Layer: { ...state.munDrHuc12Layer, watersheds: action.munDrHuc12Data.dr_layer } }
+        ret = {
+            ...state,
+            munDrHuc12Layer: {
+                ...state.munDrHuc12Layer,
+                watersheds: action.munDrHuc12Data.dr_layer,
+            },
+        }
     } else if (action.type === actionTypes.SET_FETCHING_MUN_DR_HUC12S) {
-        ret = { ...state, munDrHuc12Layer: { ...state.munDrHuc12Layer, fetchingLayer: action.isFetching } }
+        ret = {
+            ...state,
+            munDrHuc12Layer: {
+                ...state.munDrHuc12Layer,
+                fetchingLayer: action.isFetching,
+            },
+        }
     } else if (action.type === actionTypes.SET_MUN_DR_COUNTIES) {
-        ret = { ...state, munDrCountyLayer: { ...state.munDrCountyLayer, watersheds: action.munDrCountyData.dr_layer } }
+        ret = {
+            ...state,
+            munDrCountyLayer: {
+                ...state.munDrCountyLayer,
+                watersheds: action.munDrCountyData.dr_layer,
+            },
+        }
     } else if (action.type === actionTypes.SET_FETCHING_MUN_DR_COUNTIES) {
-        ret = { ...state, munDrCountyLayer: { ...state.munDrCountyLayer, fetchingLayer: action.isFetching } }
+        ret = {
+            ...state,
+            munDrCountyLayer: {
+                ...state.munDrCountyLayer,
+                fetchingLayer: action.isFetching,
+            },
+        }
     } else if (action.type === actionTypes.SET_URBAN_AREAS) {
-        ret = { ...state, urbanAreaLayer: { ...state.urbanAreaLayer, areas: action.urbanAreaData.urbanareas } }
+        ret = {
+            ...state,
+            urbanAreaLayer: {
+                ...state.urbanAreaLayer,
+                areas: action.urbanAreaData.urbanareas,
+            },
+        }
     } else if (action.type === actionTypes.SET_FETCHING_URBAN_AREAS) {
-        ret = { ...state, urbanAreaLayer: { ...state.urbanAreaLayer, fetchingLayer: action.isFetching } }
+        ret = {
+            ...state,
+            urbanAreaLayer: {
+                ...state.urbanAreaLayer,
+                fetchingLayer: action.isFetching,
+            },
+        }
     } else if (action.type === actionTypes.SET_WWTFS) {
-        ret = { ...state, wwtfsDataLayer: { ...state.wwtfsDataLayer, wwtfs: action.wwtfsData.wwtfs } }
+        ret = {
+            ...state,
+            wwtfsDataLayer: {
+                ...state.wwtfsDataLayer,
+                wwtfs: action.wwtfsData.wwtfs,
+            },
+        }
     } else if (action.type === actionTypes.SET_FETCHING_WWTFS) {
-        ret = { ...state, wwtfsDataLayer: { ...state.wwtfsDataLayer, fetchingLayer: action.isFetching } }
+        ret = {
+            ...state,
+            wwtfsDataLayer: {
+                ...state.wwtfsDataLayer,
+                fetchingLayer: action.isFetching,
+            },
+        }
     } else if (action.type === actionTypes.SET_WWTF_CURRENT) {
-        ret = { ...state, wwtfsDataLayer: { ...state.wwtfsDataLayer, current: { properties: action.currentItem.properties } } }
+        ret = {
+            ...state,
+            wwtfsDataLayer: {
+                ...state.wwtfsDataLayer,
+                current: { properties: action.currentItem.properties },
+            },
+        }
     }
     return ret
 }

static/er2_watershedpriority/js/reducers/index.js

@@ -10,10 +10,14 @@
     publicSites,
     tabbedPanel,
     theme,
-} from 'catena/er2_map_userlayers/js/reducers'
-import { geoBarReducer, mapToolbarReducer, userReducer } from 'catena/er2_ui'
-import geoBar from 'catena/er2_ui/reducers/geo_bar'
-import services from 'catena/er2_map_services/js/reducers/services'
+} from '@owsi/catena/er2_map_userlayers/js/reducers'
+import {
+    geoBarReducer,
+    mapToolbarReducer,
+    userReducer,
+} from '@owsi/catena/er2_ui'
+import geoBar from '@owsi/catena/er2_ui/reducers/geo_bar'
+import services from '@owsi/catena/er2_map_services/js/reducers/services'
 import aoi from './aoi'
 import contextBar from './context_bar'
 import dataLayer from './data_layer'

static/er2_watershedpriority/js/reducers/indicators.js

@@ -1,11 +1,11 @@
 // @flow
 import * as actionTypes from '../constants/action_types'
-import type { AOIstate } from 'catena/er2_map_userlayers/js/components/aoi_select'
+import type { AOIstate } from '@owsi/catena/er2_map_userlayers/js/components/aoi_select'
 
 export type CategoryType = {
     name: string,
-    protect: {value: number, min_max: string},
-    restore: {value: number, min_max: string},
+    protect: { value: number, min_max: string },
+    restore: { value: number, min_max: string },
     unit: string,
 }
 
@@ -25,7 +25,10 @@
     indicators: null,
 }
 
-export default function indicators(state: IndicatorsType = initialState, action: any) {
+export default function indicators(
+    state: IndicatorsType = initialState,
+    action: any,
+) {
     let ret = state
     if (action.type === actionTypes.SET_FETCHED_STATE) {
         ret = { ...state, ...action.state.appState.indicatorList }

static/er2_watershedpriority/js/reducers/map_toolbar.js

@@ -1,22 +1,29 @@
 // @flow
 // Manages state for all actions related to the MapToolBar
-import mapToolbarReducer, { initialState as mapToolbarInitialState } from 'catena/er2_ui/reducers/map_toolbar'
-import type { MapToolbarType, MapToolbarActionType } from 'catena/er2_ui'
-import * as ids from 'catena/er2_ui/constants/ids'
+import mapToolbarReducer, {
+    initialState as mapToolbarInitialState,
+} from '@owsi/catena/er2_ui/reducers/map_toolbar'
+import type { MapToolbarType, MapToolbarActionType } from '@owsi/catena/er2_ui'
+import * as ids from '@owsi/catena/er2_ui/constants/ids'
 
 // Override the behavior of the geo bar, or disable it here
 const initialState = Object.assign({}, mapToolbarInitialState, {
-    items: [{
-        active: false,
-        icon: { default: 'fa fa-cog' },
-        id: ids.SELECT_BASE_LAYERS,
-        name: 'Base Layer Selection and Settings',
-    }],
+    items: [
+        {
+            active: false,
+            icon: { default: 'fa fa-cog' },
+            id: ids.SELECT_BASE_LAYERS,
+            name: 'Base Layer Selection and Settings',
+        },
+    ],
     panel: {
         visible: false,
     },
 })
 
-export default function mapToolbarChild(state: MapToolbarType = initialState, action: MapToolbarActionType) {
+export default function mapToolbarChild(
+    state: MapToolbarType = initialState,
+    action: MapToolbarActionType,
+) {
     return mapToolbarReducer(state, action)
 }

static/er2_watershedpriority/js/styles/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import baseStyles from 'catena/er2_styles'
+import baseStyles from '@owsi/catena/er2_styles'
 
 const parentStyles = {
     ...baseStyles,

static/package.json

@@ -1,12 +1,11 @@
 {
   "name": "er2_watershedpriority",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "target": "web",
   "module": "index.js",
   "license": "MIT",
   "scripts": {
-    "dash": "./node_modules/.bin/webpack-dashboard -- webpack --config webpack.dev.js --watch",
-    "dev": "./node_modules/.bin/webpack --mode development --progress --config webpack.dev.js --watch",
+    "dev": "webpack --mode development --progress --config webpack.dev.js --watch",
     "build": "webpack --progress --config webpack.prod.js"
   },
   "resolve": {
@@ -16,7 +15,11 @@
       "main"
     ]
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "mini-css-extract-plugin": "^1.2.1",
+    "webpack": "^5.0.0",
+    "webpack-cli": "^4.1.0"
+  },
   "dependencies": {
     "@devexpress/dx-react-core": "^1.11.0",
     "@devexpress/dx-react-grid": "^1.11.0",

static/webpack.common.js

@@ -5,7 +5,7 @@
 const path = require('path')
 
 // Writes the CSS code processed by Webpack into its own CSS-file and not into the generated bundle JavaScript file.
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 module.exports = {
     context: __dirname + '/er2_watershedpriority',
@@ -13,30 +13,56 @@
     output: {
         path: __dirname + '/er2_watershedpriority/dist',
         filename: 'index.min.js',
-        sourceMapFilename: 'index.js.map',
     },
     module: {
         rules: [
-            {  // Compile all Javascript using Babel (with React and Flow), targeting the 2 most recent browsers
+            {
+                test: /\.m?js$/,
+                resolve: {
+                    fullySpecified: false,
+                },
+            },
+            {
+                // Compile all Javascript using Babel (with React and Flow), targeting the 2 most recent browsers
                 test: /\.js$/,
                 exclude: /node_modules/,
-                loader: "babel-loader"
-            }, {
+                loader: 'babel-loader',
+            },
+            {
                 test: /\.css$/,
                 use: [
-                    "style-loader",
-                    MiniCssExtractPlugin.loader,
-                    "css-loader",
+                    {
+                        loader: MiniCssExtractPlugin.loader,
+                        options: {
+                            publicPath: (resourcePath, context) => {
+                                // publicPath is the relative path of the resource to the context
+                                // e.g. for ./css/admin/main.css the publicPath will be ../../
+                                // while for ./css/main.css the publicPath will be ../
+                                return (
+                                    path.relative(
+                                        path.dirname(resourcePath),
+                                        context,
+                                    ) + '/'
+                                )
+                            },
+                        },
+                    },
+                    'css-loader',
                 ],
-            }, {
+            },
+            {
                 test: /\.(png|svg|jpg|gif)$/,
-                use: [
-                    'file-loader'
-                ]
+                use: ['file-loader'],
             },
-            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
-            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
-        ]
+            {
+                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+                loader: 'file-loader',
+            },
+            {
+                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+                loader: 'file-loader',
+            },
+        ],
     },
     plugins: [
         new MiniCssExtractPlugin({
@@ -45,7 +71,6 @@
             filename: '[name].css',
             chunkFilename: '[id].css',
         }),
-        new webpack.optimize.OccurrenceOrderPlugin(),
         new webpack.DefinePlugin({
             PRODUCTION: JSON.stringify(!debug),
             APP_VERSION: JSON.stringify(version),
@@ -53,16 +78,7 @@
     ],
     resolve: {
         alias: {
-            catena: path.resolve(__dirname, '../../er2_map/static/er2_map/packages'),
-            ol: path.resolve(__dirname, './node_modules/ol'),
-            '@material-ui/core': path.resolve(__dirname, '../../er2_map/static/node_modules/@material-ui/core'),
-            '@material-ui/styles': path.resolve(__dirname, '../../er2_map/static/node_modules/@material-ui/styles'),
-            '@material-ui/icons': path.resolve(__dirname, '../../er2_map/static/node_modules/@material-ui/icons'),
-            // This fixes "TokenNavLink used outside of router'
-            'react': path.resolve(__dirname, '../../er2_map/static/node_modules/react'),
-            'react-dom': path.resolve(__dirname, '../../er2_map/static/node_modules/react-dom'),
-            'react-router': path.resolve(__dirname, '../../er2_map/static/node_modules/react-router'),
-            'react-router-dom': path.resolve(__dirname, '../../er2_map/static/node_modules/react-router-dom'),
+            path: 'path-browserify',
         },
     },
 }

static/webpack.dev.js

@@ -1,17 +1,8 @@
 /* eslint-disable */
 const merge = require('webpack-merge')
 const common = require('./webpack.common.js')
-// Super cool webpack build dashboard
-const DashboardPlugin = require('webpack-dashboard/plugin')
 
 module.exports = merge(common, {
-    devtool: 'inline-sourcemap',
-    plugins: [
-        new DashboardPlugin(),
-    ],
-    watchOptions: {
-        ignored: /node_modules/,
-        aggregateTimeout: 300,
-        poll: 500
-    }
+    devtool: 'source-map',
+    mode: 'development',
 })

static/webpack.prod.js

@@ -4,7 +4,6 @@
 const webpack = require('webpack')
 
 module.exports = merge(common, {
-    devtool: 'hidden-source-map',
-    plugins: [
-    ],
+    mode: 'production',
+    plugins: [],
 })