refactor to cleanup types and follow are-report state config

apps/fishing-map/data/config.ts

@@ -108,12 +108,6 @@ export const DEFAULT_WORKSPACE: WorkspaceState & AppState = {
   visibleEvents: 'all',
   timebarGraph: TimebarGraphs.None,
   bivariateDataviews: undefined,
-  reportActivityGraph: REPORT_ACTIVITY_GRAPH_EVOLUTION,
-  reportCategory: undefined,
-  reportVesselFilter: '',
-  reportVesselGraph: REPORT_VESSELS_GRAPH_FLAG,
-  reportVesselPage: 0,
-  reportResultsPerPage: REPORT_VESSELS_PER_PAGE,
   userTab: UserTab.Info,
 }
 

apps/fishing-map/features/app/App.tsx

@@ -17,6 +17,7 @@ import {
   selectLocationType,
   selectWorkspaceId,
   selectIsMapDrawing,
+  selectIsVesselGroupReportLocation,
 } from 'routes/routes.selectors'
 import menuBgImage from 'assets/images/menubg.jpg'
 import { useLocationConnect, useReplaceLoginUrl } from 'routes/routes.hook'
@@ -54,11 +55,11 @@ import AppModals from 'features/modals/Modals'
 import { useMapFitBounds } from 'features/map/map-bounds.hooks'
 import { useSetMapCoordinates } from 'features/map/map-viewport.hooks'
 import { useDatasetDrag } from 'features/app/drag-dataset.hooks'
-import { selectReportAreaBounds } from 'features/app/selectors/app.reports.selector'
 import { selectIsUserLogged } from 'features/user/selectors/user.selectors'
 import ErrorBoundary from 'features/app/ErrorBoundary'
 import { selectDebugOptions } from 'features/debug/debug.slice'
 import { useFitWorkspaceBounds } from 'features/workspace/workspace.hook'
+import { selectReportAreaBounds } from 'features/area-report/reports.config.selectors'
 import { useAppDispatch } from './app.hooks'
 import { selectReadOnly, selectSidebarOpen } from './selectors/app.selectors'
 import { useAnalytics } from './analytics.hooks'
@@ -76,6 +77,7 @@ declare global {
 
 const Main = () => {
   const isWorkspaceLocation = useSelector(selectIsWorkspaceLocation)
+  const isVesselGroupReportLocation = useSelector(selectIsVesselGroupReportLocation)
   const locationType = useSelector(selectLocationType)
   const reportLocation = useSelector(selectIsAnyReportLocation)
   const workspaceStatus = useSelector(selectWorkspaceStatus)
@@ -87,6 +89,7 @@ const Main = () => {
   const isWorkspacesRouteWithTimebar =
     isWorkspaceLocation ||
     locationType === WORKSPACE_VESSEL ||
+    isVesselGroupReportLocation ||
     (reportLocation && !isTimeComparisonReport)
   const isWorkspaceMapReady = useSelector(selectIsWorkspaceMapReady)
   const showTimebar =
@@ -129,7 +132,7 @@ function App() {
   const i18n = useTranslation()
   const { dispatchQueryParams } = useLocationConnect()
   const [menuOpen, setMenuOpen] = useState(false)
-  const workspaceLocation = useSelector(selectIsWorkspaceLocation)
+  const isWorkspaceLocation = useSelector(selectIsWorkspaceLocation)
   const vesselLocation = useSelector(selectIsVesselLocation)
   const isReportLocation = useSelector(selectIsAnyReportLocation)
   const reportAreaBounds = useSelector(selectReportAreaBounds)
@@ -241,7 +244,7 @@ function App() {
     asideWidth = isReportLocation ? '45%' : '34rem'
   } else if (isAnySearchLocation) {
     asideWidth = '100%'
-  } else if (workspaceLocation) {
+  } else if (isWorkspaceLocation) {
     asideWidth = '39rem'
   }
 
@@ -261,7 +264,7 @@ function App() {
       <ErrorBoundary>
         <SplitView
           isOpen={sidebarOpen && !isMapDrawing}
-          showToggle={workspaceLocation || vesselLocation}
+          showToggle={isWorkspaceLocation || vesselLocation}
           onToggle={onToggle}
           aside={<Sidebar onMenuClick={onMenuClick} />}
           main={<Main />}

apps/fishing-map/features/app/selectors/app.reports.selector.ts

@@ -6,7 +6,6 @@ import {
   selectReportActiveCategories,
 } from 'features/dataviews/selectors/dataviews.selectors'
 import { selectReportById } from 'features/area-report/reports.slice'
-import { selectWorkspaceStateProperty } from 'features/workspace/workspace.selectors'
 import {
   selectLocationAreaId,
   selectLocationDatasetId,
@@ -15,8 +14,16 @@ import {
   selectUrlBufferUnitQuery,
   selectUrlBufferValueQuery,
 } from 'routes/routes.selectors'
-import { BufferOperation, BufferUnit, ReportCategory, ReportVesselGraph } from 'types'
+import { BufferOperation, BufferUnit } from 'types'
 import { createDeepEqualSelector } from 'utils/selectors'
+import {
+  selectReportBufferOperationSelector,
+  selectReportBufferUnitSelector,
+  selectReportBufferValueSelector,
+  selectReportCategorySelector,
+  selectReportVesselGraphSelector,
+} from 'features/area-report/reports.config.selectors'
+import { ReportCategory, ReportVesselGraph } from 'features/area-report/reports.types'
 
 export function isActivityReport(reportCategory: ReportCategory) {
   return reportCategory === ReportCategory.Fishing || reportCategory === ReportCategory.Presence
@@ -44,7 +51,6 @@ export const selectReportAreaId = createSelector(
   }
 )
 
-const selectReportCategorySelector = selectWorkspaceStateProperty('reportCategory')
 export const selectReportCategory = createSelector(
   [selectReportCategorySelector, selectReportActiveCategories],
   (reportCategory, activeCategories): ReportCategory => {
@@ -54,8 +60,6 @@ export const selectReportCategory = createSelector(
   }
 )
 
-export const selectReportAreaBounds = selectWorkspaceStateProperty('reportAreaBounds')
-
 export const selectActiveReportDataviews = createDeepEqualSelector(
   [
     selectReportCategory,
@@ -79,9 +83,6 @@ export const selectActiveReportDataviews = createDeepEqualSelector(
   }
 )
 
-export const selectReportActivityGraph = selectWorkspaceStateProperty('reportActivityGraph')
-const selectReportVesselGraphSelector = selectWorkspaceStateProperty('reportVesselGraph')
-
 export const selectReportVesselGraph = createSelector(
   [selectReportVesselGraphSelector, selectReportCategory],
   (reportVesselGraph, reportCategory): ReportVesselGraph => {
@@ -91,29 +92,20 @@ export const selectReportVesselGraph = createSelector(
     return reportVesselGraph
   }
 )
-
-export const selectReportVesselFilter = selectWorkspaceStateProperty('reportVesselFilter')
-export const selectReportVesselPage = selectWorkspaceStateProperty('reportVesselPage')
-export const selectReportResultsPerPage = selectWorkspaceStateProperty('reportResultsPerPage')
-export const selectReportTimeComparison = selectWorkspaceStateProperty('reportTimeComparison')
-
-const selectReportBufferValueSelector = selectWorkspaceStateProperty('reportBufferValue')
 export const selectReportBufferValue = createSelector(
   [selectReportBufferValueSelector, selectUrlBufferValueQuery],
   (workspaceBufferValue, urlBufferValue): number => {
     return workspaceBufferValue || urlBufferValue
   }
 )
 
-const selectReportBufferUnitSelector = selectWorkspaceStateProperty('reportBufferUnit')
 export const selectReportBufferUnit = createSelector(
   [selectReportBufferUnitSelector, selectUrlBufferUnitQuery],
   (workspaceBufferUnit, urlBufferUnit): BufferUnit => {
     return workspaceBufferUnit || urlBufferUnit
   }
 )
 
-const selectReportBufferOperationSelector = selectWorkspaceStateProperty('reportBufferOperation')
 export const selectReportBufferOperation = createSelector(
   [selectReportBufferOperationSelector, selectUrlBufferOperationQuery],
   (workspaceBufferOperation, urlBufferOperation): BufferOperation => {

apps/fishing-map/features/app/selectors/app.workspace.selectors.ts

@@ -12,14 +12,8 @@ import {
   selectVisibleEvents,
 } from 'features/app/selectors/app.selectors'
 import {
-  selectReportActivityGraph,
-  selectReportAreaBounds,
   selectReportCategory,
-  selectReportResultsPerPage,
-  selectReportTimeComparison,
-  selectReportVesselFilter,
   selectReportVesselGraph,
-  selectReportVesselPage,
   selectReportBufferValue,
   selectReportBufferUnit,
   selectReportBufferOperation,
@@ -36,6 +30,14 @@ import { selectViewport } from 'features/app/selectors/app.viewport.selectors'
 import { selectDataviewInstancesMergedOrdered } from 'features/dataviews/selectors/dataviews.instances.selectors'
 import { selectDaysFromLatest, selectWorkspace } from 'features/workspace/workspace.selectors'
 import { DEFAULT_WORKSPACE_CATEGORY } from 'data/workspaces'
+import {
+  selectReportActivityGraph,
+  selectReportAreaBounds,
+  selectReportResultsPerPage,
+  selectReportTimeComparison,
+  selectReportVesselFilter,
+  selectReportVesselPage,
+} from 'features/area-report/reports.config.selectors'
 
 const selectWorkspaceReportState = createSelector(
   [

apps/fishing-map/features/area-report/Report.tsx

@@ -30,7 +30,7 @@ import {
   selectReportDataviewsWithPermissions,
 } from 'features/area-report/reports.selectors'
 import ReportVesselsPlaceholder from 'features/area-report/placeholders/ReportVesselsPlaceholder'
-import { ReportCategory, TimebarVisualisations } from 'types'
+import { TimebarVisualisations } from 'types'
 import { getDownloadReportSupported } from 'features/download/download.utils'
 import { SUPPORT_EMAIL } from 'data/config'
 import {
@@ -78,6 +78,7 @@ import ReportVessels from './vessels/ReportVessels'
 import ReportDownload from './download/ReportDownload'
 import ReportEnvironment from './environment/ReportEnvironment'
 import styles from './Report.module.css'
+import { ReportCategory } from './reports.types'
 
 export type ReportActivityUnit = 'hour' | 'detection'
 

apps/fishing-map/features/area-report/activity/ReportActivity.tsx

@@ -10,12 +10,12 @@ import {
   useReportFilteredTimeSeries,
 } from 'features/area-report/reports-timeseries.hooks'
 import { selectTimeComparisonValues } from 'features/area-report/reports.selectors'
-import { ReportActivityGraph } from 'types'
-import { selectReportActivityGraph } from 'features/app/selectors/app.reports.selector'
 import ReportActivityPlaceholder from 'features/area-report/placeholders/ReportActivityPlaceholder'
 import ReportActivityPeriodComparison from 'features/area-report/activity/ReportActivityPeriodComparison'
 import ReportActivityPeriodComparisonGraph from 'features/area-report/activity/ReportActivityPeriodComparisonGraph'
 import UserGuideLink from 'features/help/UserGuideLink'
+import { selectReportActivityGraph } from '../reports.config.selectors'
+import { ReportActivityGraph } from '../reports.types'
 import ReportActivityEvolution from './ReportActivityEvolution'
 import ReportActivityBeforeAfter from './ReportActivityBeforeAfter'
 import ReportActivityBeforeAfterGraph from './ReportActivityBeforeAfterGraph'

apps/fishing-map/features/area-report/activity/ReportActivityBeforeAfter.tsx

@@ -3,13 +3,13 @@ import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { InputDate, InputText, Select, SelectOption } from '@globalfishingwatch/ui-components'
 import { useReportTimeCompareConnect } from 'features/area-report/reports-timecomparison.hooks'
-import { selectReportTimeComparison } from 'features/app/selectors/app.reports.selector'
 import { selectActiveActivityAndDetectionsDataviews } from 'features/dataviews/selectors/dataviews.selectors'
 import { getSourcesSelectedInDataview } from 'features/workspace/activity/activity.utils'
 import { selectReportAreaIds } from 'features/area-report/reports.selectors'
 import { selectDatasetAreaDetail } from 'features/areas/areas.slice'
 import { TrackCategory, trackEvent } from 'features/app/analytics.hooks'
 import { MAX_MONTHS_TO_COMPARE, MAX_DAYS_TO_COMPARE } from 'features/area-report/reports.config'
+import { selectReportTimeComparison } from '../reports.config.selectors'
 import styles from './ReportActivityBeforeAfter.module.css'
 
 export default function ReportActivityBeforeAfter() {

apps/fishing-map/features/area-report/activity/ReportActivityBeforeAfterGraph.tsx

@@ -13,14 +13,14 @@ import {
 import { DateTime } from 'luxon'
 import { useSelector } from 'react-redux'
 import { FourwingsInterval } from '@globalfishingwatch/deck-loaders'
-import { selectReportTimeComparison } from 'features/app/selectors/app.reports.selector'
-import { ReportActivityTimeComparison } from 'types'
 import i18n from 'features/i18n/i18n'
 import { COLOR_PRIMARY_BLUE } from 'features/app/app.config'
 import { getUTCDateTime } from 'utils/dates'
 import { formatDate, tickFormatter } from 'features/area-report/reports.utils'
 import { formatI18nNumber } from 'features/i18n/i18nNumber'
 import { toFixed } from 'utils/shared'
+import { selectReportTimeComparison } from '../reports.config.selectors'
+import { ReportActivityTimeComparison } from '../reports.types'
 import styles from './ReportActivityEvolution.module.css'
 
 interface ComparisonGraphData {

apps/fishing-map/features/area-report/activity/ReportActivityGraphSelector.tsx

@@ -8,14 +8,12 @@ import {
   REPORT_ACTIVITY_GRAPH_BEFORE_AFTER,
   REPORT_ACTIVITY_GRAPH_PERIOD_COMPARISON,
 } from 'data/config'
-import {
-  selectActiveReportDataviews,
-  selectReportActivityGraph,
-} from 'features/app/selectors/app.reports.selector'
+import { selectActiveReportDataviews } from 'features/app/selectors/app.reports.selector'
 import { useFitAreaInViewport } from 'features/area-report/reports.hooks'
-import { ReportActivityGraph } from 'types'
 import { useSetReportTimeComparison } from 'features/area-report/reports-timecomparison.hooks'
 import { TrackCategory, trackEvent } from 'features/app/analytics.hooks'
+import { selectReportActivityGraph } from '../reports.config.selectors'
+import { ReportActivityGraph } from '../reports.types'
 
 type ReportActivityGraphSelectorProps = {
   loading: boolean

apps/fishing-map/features/area-report/activity/ReportActivityPeriodComparison.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { InputDate, InputText, Select } from '@globalfishingwatch/ui-components'
 import { useReportTimeCompareConnect } from 'features/area-report/reports-timecomparison.hooks'
-import { selectReportTimeComparison } from 'features/app/selectors/app.reports.selector'
 import { selectActiveActivityAndDetectionsDataviews } from 'features/dataviews/selectors/dataviews.selectors'
 import { getSourcesSelectedInDataview } from 'features/workspace/activity/activity.utils'
 import { selectReportAreaIds } from 'features/area-report/reports.selectors'
@@ -12,6 +11,7 @@ import Hint from 'features/help/Hint'
 import { COLOR_PRIMARY_BLUE } from 'features/app/app.config'
 import { TrackCategory, trackEvent } from 'features/app/analytics.hooks'
 import { MAX_MONTHS_TO_COMPARE, MAX_DAYS_TO_COMPARE } from 'features/area-report/reports.config'
+import { selectReportTimeComparison } from '../reports.config.selectors'
 import styles from './ReportActivityBeforeAfter.module.css'
 
 export default function ReportActivityGraph() {

apps/fishing-map/features/area-report/activity/ReportActivityPeriodComparisonGraph.tsx

@@ -14,12 +14,12 @@ import { Interval as TimeInterval } from 'luxon'
 import { useSelector } from 'react-redux'
 import { FourwingsInterval } from '@globalfishingwatch/deck-loaders'
 import { selectLatestAvailableDataDate } from 'features/app/selectors/app.selectors'
-import { selectReportTimeComparison } from 'features/app/selectors/app.reports.selector'
 import i18n, { t } from 'features/i18n/i18n'
 import { COLOR_GRADIENT, COLOR_PRIMARY_BLUE } from 'features/app/app.config'
 import { getUTCDateTime } from 'utils/dates'
 import { formatDate, formatTooltipValue, tickFormatter } from 'features/area-report/reports.utils'
 import { EMPTY_FIELD_PLACEHOLDER } from 'utils/info'
+import { selectReportTimeComparison } from '../reports.config.selectors'
 import styles from './ReportActivityEvolution.module.css'
 
 const DIFFERENCE = 'difference'

apps/fishing-map/features/area-report/reports-timecomparison.hooks.ts

@@ -3,18 +3,16 @@ import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { DateTime } from 'luxon'
 import { SelectOption } from '@globalfishingwatch/ui-components'
-import { ReportActivityGraph } from 'types'
 import { AVAILABLE_START, AVAILABLE_END } from 'data/config'
-import {
-  selectReportActivityGraph,
-  selectReportTimeComparison,
-} from 'features/app/selectors/app.reports.selector'
+import {} from 'features/app/selectors/app.reports.selector'
 import { useTimerangeConnect } from 'features/timebar/timebar.hooks'
 import { useLocationConnect } from 'routes/routes.hook'
 import { getUTCDateTime } from 'utils/dates'
 import { formatI18nDate } from 'features/i18n/i18nDate'
 import { useFitAreaInViewport } from 'features/area-report/reports.hooks'
 import { MAX_DAYS_TO_COMPARE, MAX_MONTHS_TO_COMPARE } from 'features/area-report/reports.config'
+import { selectReportActivityGraph, selectReportTimeComparison } from './reports.config.selectors'
+import { ReportActivityGraph } from './reports.types'
 
 // TODO get this from start and endDate from datasets
 const MIN_DATE = AVAILABLE_START.slice(0, 10)

apps/fishing-map/features/area-report/reports-timeseries.hooks.ts

@@ -20,9 +20,7 @@ import {
 } from '@globalfishingwatch/deck-loaders'
 import {
   selectActiveReportDataviews,
-  selectReportActivityGraph,
   selectReportCategory,
-  selectReportTimeComparison,
 } from 'features/app/selectors/app.reports.selector'
 import { FilteredPolygons } from 'features/area-report/reports-geo.utils'
 import {
@@ -36,11 +34,12 @@ import {
   selectReportBufferHash,
   selectShowTimeComparison,
 } from 'features/area-report/reports.selectors'
-import { ReportActivityGraph, ReportCategory } from 'types'
 import { selectTimeRange } from 'features/app/selectors/app.timebar.selectors'
 import { AreaGeometry } from 'features/areas/areas.slice'
 import { useFilterCellsByPolygonWorker } from 'features/area-report/reports-geo.utils.workers.hooks'
 import { TimeRange } from 'features/timebar/timebar.slice'
+import { ReportActivityGraph, ReportCategory } from './reports.types'
+import { selectReportActivityGraph, selectReportTimeComparison } from './reports.config.selectors'
 
 interface EvolutionGraphData {
   date: string

apps/fishing-map/features/area-report/reports.config.selectors.ts

@@ -0,0 +1,25 @@
+import { createSelector } from '@reduxjs/toolkit'
+import { selectQueryParam } from 'routes/routes.selectors'
+import { AreaReportState, AreaReportStateProperty } from './reports.types'
+import { DEFAULT_AREA_REPORT_STATE } from './reports.config'
+
+type AreaReportProperty<P extends AreaReportStateProperty> = Required<AreaReportState>[P]
+function selectAreaReportStateProperty<P extends AreaReportStateProperty>(property: P) {
+  return createSelector([selectQueryParam(property)], (urlProperty): AreaReportProperty<P> => {
+    if (urlProperty !== undefined) return urlProperty
+    return DEFAULT_AREA_REPORT_STATE[property] as AreaReportProperty<P>
+  })
+}
+
+export const selectReportCategorySelector = selectAreaReportStateProperty('reportCategory')
+export const selectReportAreaBounds = selectAreaReportStateProperty('reportAreaBounds')
+export const selectReportActivityGraph = selectAreaReportStateProperty('reportActivityGraph')
+export const selectReportVesselGraphSelector = selectAreaReportStateProperty('reportVesselGraph')
+export const selectReportVesselFilter = selectAreaReportStateProperty('reportVesselFilter')
+export const selectReportVesselPage = selectAreaReportStateProperty('reportVesselPage')
+export const selectReportResultsPerPage = selectAreaReportStateProperty('reportResultsPerPage')
+export const selectReportTimeComparison = selectAreaReportStateProperty('reportTimeComparison')
+export const selectReportBufferValueSelector = selectAreaReportStateProperty('reportBufferValue')
+export const selectReportBufferUnitSelector = selectAreaReportStateProperty('reportBufferUnit')
+export const selectReportBufferOperationSelector =
+  selectAreaReportStateProperty('reportBufferOperation')