change VesselGroupReport with VGR prefix

apps/fishing-map/features/vessel-group-report/VesselGroupReport.tsx

@@ -12,28 +12,24 @@ import {
   useTimebarVesselGroupConnect,
   useTimebarVisualisationConnect,
 } from 'features/timebar/timebar.hooks'
-import { selectVesselGroupReportDataview } from 'features/dataviews/selectors/dataviews.selectors'
+import { selectActiveVesselGroupDataviews } from 'features/dataviews/selectors/dataviews.selectors'
 import VGREvents from 'features/vessel-group-report/events/VGREvents'
 import { useFetchVesselGroupReport } from './vessel-group-report.hooks'
-import {
-  selectVesselGroupReportData,
-  selectVesselGroupReportStatus,
-} from './vessel-group-report.slice'
-import VesselGroupReportError from './VesselGroupReportError'
+import { selectVGRData, selectVGRStatus } from './vessel-group-report.slice'
 import VesselGroupReportTitle from './VesselGroupReportTitle'
 import VesselGroupReportVessels from './vessels/VesselGroupReportVessels'
-import { selectVesselGroupReportSection } from './vessel-group.config.selectors'
-import VesselGroupReportInsights from './insights/VesselGroupReportInsights'
+import { selectVGRSection } from './vessel-group.config.selectors'
+import VesselGroupReportInsights from './insights/VGRInsights'
 
 function VesselGroupReport() {
   const { t } = useTranslation()
   const { dispatchQueryParams } = useLocationConnect()
   const fetchVesselGroupReport = useFetchVesselGroupReport()
   const vesselGroupId = useSelector(selectReportVesselGroupId)
-  const vesselGroup = useSelector(selectVesselGroupReportData)!
-  const reportStatus = useSelector(selectVesselGroupReportStatus)
-  const reportSection = useSelector(selectVesselGroupReportSection)
-  const reportDataview = useSelector(selectVesselGroupReportDataview)
+  const vesselGroup = useSelector(selectVGRData)!
+  const reportStatus = useSelector(selectVGRStatus)
+  const reportSection = useSelector(selectVGRSection)
+  const reportDataview = useSelector(selectActiveVesselGroupDataviews)
   const { dispatchTimebarVisualisation } = useTimebarVisualisationConnect()
   const { dispatchTimebarSelectedVGId } = useTimebarVesselGroupConnect()
 

apps/fishing-map/features/vessel-group-report/VesselGroupReportError.tsx

@@ -3,15 +3,12 @@ import { Trans, useTranslation } from 'react-i18next'
 import { AsyncReducerStatus } from 'utils/async-slice'
 import LocalStorageLoginLink from 'routes/LoginLink'
 import styles from './VesselGroupReport.module.css'
-import {
-  selectVesselGroupReportError,
-  selectVesselGroupReportStatus,
-} from './vessel-group-report.slice'
+import { selectVGRError, selectVGRStatus } from './vessel-group-report.slice'
 
 function VesselGroupReportError() {
   const { t } = useTranslation()
-  const reportStatus = useSelector(selectVesselGroupReportStatus)
-  const reportError = useSelector(selectVesselGroupReportError)
+  const reportStatus = useSelector(selectVGRStatus)
+  const reportError = useSelector(selectVGRError)
 
   if (reportStatus !== AsyncReducerStatus.Error) {
     return null

apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightCoverage.tsx → apps/fishing-map/features/vessel-group-report/insights/VGRInsightCoverage.tsx

@@ -5,8 +5,8 @@ import { ParsedAPIError } from '@globalfishingwatch/api-client'
 import InsightError from 'features/vessel/insights/InsightErrorMessage'
 import DataTerminology from 'features/vessel/identity/DataTerminology'
 import { selectFetchVesselGroupReportCoverageParams } from '../vessel-group-report.selectors'
-import styles from './VesselGroupReportInsights.module.css'
-import VesselGroupReportInsightCoverageGraph from './VesselGroupReportInsightCoverageGraph'
+import styles from './VGRInsights.module.css'
+import VesselGroupReportInsightCoverageGraph from './VGRInsightCoverageGraph'
 
 const VesselGroupReportInsightCoveragePlaceholder = () => {
   // TODO graph bar placeholder

apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightCoverageGraph.tsx → apps/fishing-map/features/vessel-group-report/insights/VGRInsightCoverageGraph.tsx

@@ -3,8 +3,9 @@ import { useSelector } from 'react-redux'
 import { BarChart, Bar, XAxis, ResponsiveContainer, LabelList } from 'recharts'
 import { groupBy } from 'es-toolkit'
 import { VesselGroupInsightResponse } from '@globalfishingwatch/api-types'
-import { selectVesselGroupReportDataview } from '../vessel-group-report.selectors'
-import styles from './VesselGroupReportInsightCoverageGraph.module.css'
+import { COLOR_PRIMARY_BLUE } from 'features/app/app.config'
+import { selectVGRDataview } from '../vessel-group-report.selectors'
+import styles from './VGRInsightCoverageGraph.module.css'
 
 const CustomTick = (props: any) => {
   const { x, y, payload } = props
@@ -61,7 +62,7 @@ export default function VesselGroupReportInsightCoverageGraph({
   data: VesselGroupInsightResponse['coverage']
 }) {
   const dataGrouped = useMemo(() => parseCoverageGraphData(data), [data])
-  const reportDataview = useSelector(selectVesselGroupReportDataview)
+  const reportDataview = useSelector(selectVGRDataview)
   return (
     <Fragment>
       <div className={styles.graph} data-test="report-vessels-graph">
@@ -81,7 +82,7 @@ export default function VesselGroupReportInsightCoverageGraph({
               <Bar
                 className={styles.bar}
                 dataKey="value"
-                fill={reportDataview?.config?.color || 'rgb(22, 63, 137)'}
+                fill={reportDataview?.config?.color || COLOR_PRIMARY_BLUE}
               >
                 <LabelList position="top" valueAccessor={(entry: any) => entry.value} />
               </Bar>

apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightFishing.tsx → apps/fishing-map/features/vessel-group-report/insights/VGRInsightFishing.tsx

@@ -8,14 +8,14 @@ import { Collapsable } from '@globalfishingwatch/ui-components'
 import InsightError from 'features/vessel/insights/InsightErrorMessage'
 import DataTerminology from 'features/vessel/identity/DataTerminology'
 import { formatInfoField } from 'utils/info'
-import { selectVesselGroupReportData } from '../vessel-group-report.slice'
+import { selectVGRData } from '../vessel-group-report.slice'
 import { selectFetchVesselGroupReportFishingParams } from '../vessel-group-report.selectors'
-import styles from './VesselGroupReportInsights.module.css'
-import VesselGroupReportInsightPlaceholder from './VesselGroupReportInsightsPlaceholders'
-import VesselGroupReportInsightVesselEvents from './VesselGroupReportInsightVesselEvents'
+import styles from './VGRInsights.module.css'
+import VesselGroupReportInsightPlaceholder from './VGRInsightsPlaceholders'
+import VesselGroupReportInsightVesselEvents from './VGRInsightVesselEvents'
 import {
-  selectVesselGroupReportVesselsWithNoTakeMpas,
-  selectVesselGroupReportVesselsInRfmoWithoutKnownAuthorization,
+  selectVGRVesselsWithNoTakeMpas,
+  selectVGRVesselsInRfmoWithoutKnownAuthorization,
   VesselGroupReportInsightVessel,
 } from './vessel-group-report-insights.selectors'
 
@@ -24,15 +24,15 @@ const VesselGroupReportInsightFishing = () => {
   const [isMPAExpanded, setIsMPAExpanded] = useState(false)
   const [isRFMOExpanded, setIsRFMOExpanded] = useState(false)
   const [expandedVesselIds, setExpandedVesselIds] = useState<string[]>([])
-  const vesselGroup = useSelector(selectVesselGroupReportData)
+  const vesselGroup = useSelector(selectVGRData)
   const reportFishingParams = useSelector(selectFetchVesselGroupReportFishingParams)
 
   const { error, isLoading } = useGetVesselGroupInsightQuery(reportFishingParams, {
     skip: !vesselGroup,
   })
-  const vesselsWithNoTakeMpas = useSelector(selectVesselGroupReportVesselsWithNoTakeMpas)
+  const vesselsWithNoTakeMpas = useSelector(selectVGRVesselsWithNoTakeMpas)
   const vesselsInRfmoWithoutKnownAuthorization = useSelector(
-    selectVesselGroupReportVesselsInRfmoWithoutKnownAuthorization
+    selectVGRVesselsInRfmoWithoutKnownAuthorization
   )
 
   const onMPAToggle = (isOpen: boolean) => {

apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightFlagChange.tsx → apps/fishing-map/features/vessel-group-report/insights/VGRInsightFlagChange.tsx

@@ -10,24 +10,24 @@ import DataTerminology from 'features/vessel/identity/DataTerminology'
 import { formatInfoField } from 'utils/info'
 import VesselIdentityFieldLogin from 'features/vessel/identity/VesselIdentityFieldLogin'
 import { selectIsGuestUser } from 'features/user/selectors/user.selectors'
-import { selectVesselGroupReportData } from '../vessel-group-report.slice'
+import { selectVGRData } from '../vessel-group-report.slice'
 import { selectFetchVesselGroupReportFlagChangeParams } from '../vessel-group-report.selectors'
-import styles from './VesselGroupReportInsights.module.css'
-import VesselGroupReportInsightPlaceholder from './VesselGroupReportInsightsPlaceholders'
-import { selectVesselGroupReportFlagChangesVessels } from './vessel-group-report-insights.selectors'
+import styles from './VGRInsights.module.css'
+import VesselGroupReportInsightPlaceholder from './VGRInsightsPlaceholders'
+import { selectVGRFlagChangesVessels } from './vessel-group-report-insights.selectors'
 
 const VesselGroupReportInsightFlagChange = () => {
   const { t } = useTranslation()
   const [isExpanded, setIsExpanded] = useState(false)
   const guestUser = useSelector(selectIsGuestUser)
-  const vesselGroup = useSelector(selectVesselGroupReportData)
+  const vesselGroup = useSelector(selectVGRData)
   const fetchVesselGroupParams = useSelector(selectFetchVesselGroupReportFlagChangeParams)
 
   const { error, isLoading } = useGetVesselGroupInsightQuery(fetchVesselGroupParams, {
     skip: !vesselGroup,
   })
 
-  const vesselsWithFlagChanges = useSelector(selectVesselGroupReportFlagChangesVessels)
+  const vesselsWithFlagChanges = useSelector(selectVGRFlagChangesVessels)
 
   return (
     <div id="vessel-group-flags" className={styles.insightContainer}>

apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightGaps.tsx → apps/fishing-map/features/vessel-group-report/insights/VGRInsightGaps.tsx

@@ -8,24 +8,24 @@ import { Collapsable } from '@globalfishingwatch/ui-components'
 import InsightError from 'features/vessel/insights/InsightErrorMessage'
 import DataTerminology from 'features/vessel/identity/DataTerminology'
 import { formatInfoField } from 'utils/info'
-import { selectVesselGroupReportData } from '../vessel-group-report.slice'
+import { selectVGRData } from '../vessel-group-report.slice'
 import { selectFetchVesselGroupReportGapParams } from '../vessel-group-report.selectors'
-import styles from './VesselGroupReportInsights.module.css'
-import VesselGroupReportInsightPlaceholder from './VesselGroupReportInsightsPlaceholders'
-import VesselGroupReportInsightVesselEvents from './VesselGroupReportInsightVesselEvents'
-import { selectVesselGroupReportGapVessels } from './vessel-group-report-insights.selectors'
+import styles from './VGRInsights.module.css'
+import VesselGroupReportInsightPlaceholder from './VGRInsightsPlaceholders'
+import VesselGroupReportInsightVesselEvents from './VGRInsightVesselEvents'
+import { selectVGRGapVessels } from './vessel-group-report-insights.selectors'
 
 const VesselGroupReportInsightGap = () => {
   const { t } = useTranslation()
   const [isExpanded, setIsExpanded] = useState(false)
   const [expandedVesselIds, setExpandedVesselIds] = useState<string[]>([])
-  const vesselGroup = useSelector(selectVesselGroupReportData)
+  const vesselGroup = useSelector(selectVGRData)
   const fetchVesselGroupParams = useSelector(selectFetchVesselGroupReportGapParams)
 
   const { error, isLoading } = useGetVesselGroupInsightQuery(fetchVesselGroupParams, {
     skip: !vesselGroup,
   })
-  const vesselsWithGaps = useSelector(selectVesselGroupReportGapVessels)
+  const vesselsWithGaps = useSelector(selectVGRGapVessels)
 
   return (
     <div id="vessel-group-gaps" className={styles.insightContainer}>

apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightIUU.tsx → apps/fishing-map/features/vessel-group-report/insights/VGRInsightIUU.tsx

@@ -7,23 +7,23 @@ import { ParsedAPIError } from '@globalfishingwatch/api-client'
 import { Collapsable } from '@globalfishingwatch/ui-components'
 import InsightError from 'features/vessel/insights/InsightErrorMessage'
 import DataTerminology from 'features/vessel/identity/DataTerminology'
-import { selectVesselGroupReportData } from '../vessel-group-report.slice'
+import { selectVGRData } from '../vessel-group-report.slice'
 import { selectFetchVesselGroupReportIUUParams } from '../vessel-group-report.selectors'
-import styles from './VesselGroupReportInsights.module.css'
-import VesselGroupReportInsightPlaceholder from './VesselGroupReportInsightsPlaceholders'
-import { selectVesselGroupReportIUUVessels } from './vessel-group-report-insights.selectors'
-import VesselGroupReportInsightVesselTable from './VesselGroupReportInsightVesselsTable'
+import styles from './VGRInsights.module.css'
+import VesselGroupReportInsightPlaceholder from './VGRInsightsPlaceholders'
+import { selectVGRIUUVessels } from './vessel-group-report-insights.selectors'
+import VesselGroupReportInsightVesselTable from './VGRInsightVesselsTable'
 
 const VesselGroupReportInsightIUU = () => {
   const { t } = useTranslation()
   const [isExpanded, setIsExpanded] = useState(false)
-  const vesselGroup = useSelector(selectVesselGroupReportData)
+  const vesselGroup = useSelector(selectVGRData)
   const fetchVesselGroupParams = useSelector(selectFetchVesselGroupReportIUUParams)
 
   const { error, isLoading } = useGetVesselGroupInsightQuery(fetchVesselGroupParams, {
     skip: !vesselGroup,
   })
-  const vesselsWithIIU = useSelector(selectVesselGroupReportIUUVessels)
+  const vesselsWithIIU = useSelector(selectVGRIUUVessels)
 
   return (
     <div id="vessel-group-iuu" className={styles.insightContainer}>

apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightMOU.tsx → apps/fishing-map/features/vessel-group-report/insights/VGRInsightMOU.tsx

@@ -11,16 +11,16 @@ import DataTerminology from 'features/vessel/identity/DataTerminology'
 import { selectIsGuestUser } from 'features/user/selectors/user.selectors'
 import VesselIdentityFieldLogin from 'features/vessel/identity/VesselIdentityFieldLogin'
 import { formatInfoField } from 'utils/info'
-import { selectVesselGroupReportData } from '../vessel-group-report.slice'
+import { selectVGRData } from '../vessel-group-report.slice'
 import { selectFetchVesselGroupReportMOUParams } from '../vessel-group-report.selectors'
-import styles from './VesselGroupReportInsights.module.css'
-import VesselGroupReportInsightPlaceholder from './VesselGroupReportInsightsPlaceholders'
+import styles from './VGRInsights.module.css'
+import VesselGroupReportInsightPlaceholder from './VGRInsightsPlaceholders'
 import {
   MOUInsightCountry,
   MOUInsightList,
   MouVesselByCategoryInsight,
   MOUVesselByList,
-  selectVesselGroupReportMOUVesselsGrouped,
+  selectVGRMOUVesselsGrouped,
 } from './vessel-group-report-insights.selectors'
 
 type ExpandedMOUInsights = `${MOUInsightCountry}-${MOUInsightList}`
@@ -66,14 +66,14 @@ const VesselGroupReportInsightMOU = () => {
   const { t } = useTranslation()
   const guestUser = useSelector(selectIsGuestUser)
   const [insightsExpanded, setInsightsExpanded] = useState<ExpandedMOUInsights[]>([])
-  const vesselGroup = useSelector(selectVesselGroupReportData)
+  const vesselGroup = useSelector(selectVGRData)
   const fetchVesselGroupParams = useSelector(selectFetchVesselGroupReportMOUParams)
 
   const { error, isLoading } = useGetVesselGroupInsightQuery(fetchVesselGroupParams, {
     skip: !vesselGroup,
   })
 
-  const MOUVesselsGrouped = useSelector(selectVesselGroupReportMOUVesselsGrouped) || {}
+  const MOUVesselsGrouped = useSelector(selectVGRMOUVesselsGrouped) || {}
 
   const hasVesselsInParisMOU = MOUVesselsGrouped?.paris
     ? Object.values(MOUVesselsGrouped?.paris).some((vessels) => vessels.length > 0)

apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightVesselEvents.tsx → apps/fishing-map/features/vessel-group-report/insights/VGRInsightVesselEvents.tsx

@@ -1,7 +1,7 @@
 import { useGetVesselEventsQuery } from 'queries/vessel-events-api'
 import { Spinner } from '@globalfishingwatch/ui-components'
 import VesselEvent from 'features/vessel/activity/event/Event'
-import styles from './VesselGroupReportInsights.module.css'
+import styles from './VGRInsights.module.css'
 
 const VesselGroupReportInsightVesselEvents = ({
   ids,
@@ -16,13 +16,16 @@ const VesselGroupReportInsightVesselEvents = ({
   start: string
   end: string
 }) => {
-  const { data, isLoading } = useGetVesselEventsQuery({
-    ...(vesselId && { vessels: [vesselId] }),
-    ...(ids && { ids: ids }),
-    datasets: [datasetId],
-    'start-date': start,
-    'end-date': end,
-  })
+  const { data, isLoading } = useGetVesselEventsQuery(
+    {
+      ...(vesselId && { vessels: [vesselId] }),
+      ...(ids && { ids: ids }),
+      datasets: [datasetId],
+      'start-date': start,
+      'end-date': end,
+    },
+    { skip: !ids && !vesselId }
+  )
   if (isLoading) {
     return <Spinner size="small" />
   }

apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightVesselsTable.tsx → apps/fishing-map/features/vessel-group-report/insights/VGRInsightVesselsTable.tsx

@@ -3,7 +3,7 @@ import cx from 'classnames'
 import { Fragment } from 'react'
 import VesselLink from 'features/vessel/VesselLink'
 import { EMPTY_FIELD_PLACEHOLDER, formatInfoField, getVesselGearTypeLabel } from 'utils/info'
-import styles from './VesselGroupReportInsightVesselsTable.module.css'
+import styles from './VGRInsightVesselsTable.module.css'
 import { VesselGroupReportInsightVessel } from './vessel-group-report-insights.selectors'
 
 const VesselGroupReportInsightVesselTable = ({

apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsights.tsx → apps/fishing-map/features/vessel-group-report/insights/VGRInsights.tsx

@@ -6,13 +6,13 @@ import { selectTimeRange } from 'features/app/selectors/app.timebar.selectors'
 import { formatI18nDate } from 'features/i18n/i18nDate'
 import DataTerminology from 'features/vessel/identity/DataTerminology'
 import { MIN_INSIGHTS_YEAR } from 'features/vessel/insights/insights.config'
-import styles from './VesselGroupReportInsights.module.css'
-import VesselGroupReportInsightCoverage from './VesselGroupReportInsightCoverage'
-import VesselGroupReportInsightGap from './VesselGroupReportInsightGaps'
-import VesselGroupReportInsightIUU from './VesselGroupReportInsightIUU'
-import VesselGroupReportInsightFishing from './VesselGroupReportInsightFishing'
-import VesselGroupReportInsightFlagChange from './VesselGroupReportInsightFlagChange'
-import VesselGroupReportInsightMOU from './VesselGroupReportInsightMOU'
+import styles from './VGRInsights.module.css'
+import VesselGroupReportInsightCoverage from './VGRInsightCoverage'
+import VesselGroupReportInsightGap from './VGRInsightGaps'
+import VesselGroupReportInsightIUU from './VGRInsightIUU'
+import VesselGroupReportInsightFishing from './VGRInsightFishing'
+import VesselGroupReportInsightFlagChange from './VGRInsightFlagChange'
+import VesselGroupReportInsightMOU from './VGRInsightMOU'
 
 const VesselGroupReportInsights = () => {
   const { t } = useTranslation()

apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightsPlaceholders.tsx → apps/fishing-map/features/vessel-group-report/insights/VGRInsightsPlaceholders.tsx

@@ -1,4 +1,4 @@
-import styles from './VesselGroupReportInsightsPlaceholders.module.css'
+import styles from './VGRInsightsPlaceholders.module.css'
 
 // TODO graph bar placeholder
 export const VesselGroupReportInsightPlaceholder = () => {