shorten file and variable names

GlobalFishingWatch · Sep 18, 2024 · eb2a145 · eb2a145
1 parent 6777809
commit eb2a145
Show file tree

Hide file tree

Showing 13 changed files with 97 additions and 117 deletions.
diff --git a/apps/fishing-map/features/vessel-group-report/VesselGroupReport.tsx b/apps/fishing-map/features/vessel-group-report/VesselGroupReport.tsx
@@ -13,7 +13,7 @@ import {
   useTimebarVisualisationConnect,
 } from 'features/timebar/timebar.hooks'
 import { selectVesselGroupReportDataview } from 'features/dataviews/selectors/dataviews.selectors'
-import VesselGroupReportEvents from 'features/vessel-group-report/events/VesselGroupReportEvents'
+import VGREvents from 'features/vessel-group-report/events/VGREvents'
 import { useFetchVesselGroupReport } from './vessel-group-report.hooks'
 import {
   selectVesselGroupReportData,
@@ -83,7 +83,7 @@ function VesselGroupReport() {
       {
         id: 'events',
         title: t('common.events', 'Events'),
-        content: <VesselGroupReportEvents />,
+        content: <VGREvents />,
       },
     ],
     [t]

diff --git a/...events/VesselGroupReportEvents.module.css → ...-group-report/events/VGREvents.module.css b/...events/VesselGroupReportEvents.module.css → ...-group-report/events/VGREvents.module.css
diff --git a/...report/events/VesselGroupReportEvents.tsx → .../vessel-group-report/events/VGREvents.tsx b/...report/events/VesselGroupReportEvents.tsx → .../vessel-group-report/events/VGREvents.tsx
@@ -8,12 +8,12 @@ import {
 } from 'queries/vessel-group-events-stats-api'
 import { useTranslation } from 'react-i18next'
 import { getFourwingsInterval } from '@globalfishingwatch/deck-loaders'
-import VesselGroupReportEventsSubsectionSelector from 'features/vessel-group-report/events/VesselGroupReportEventsSubsectionSelector'
-import VesselGroupReportEventsGraph from 'features/vessel-group-report/events/VesselGroupReportEventsGraph'
+import VGREventsSubsectionSelector from 'features/vessel-group-report/events/VGREventsSubsectionSelector'
+import VGREventsGraph from 'features/vessel-group-report/events/VGREventsGraph'
 import {
-  selectVesselGroupReportEventsSubsection,
-  selectVesselGroupReportEventsVesselFilter,
-  selectVesselGroupReportEventsVesselsProperty,
+  selectVGREventsSubsection,
+  selectVGREventsVesselFilter,
+  selectVGREventsVesselsProperty,
 } from 'features/vessel-group-report/vessel-group.config.selectors'
 import { selectEventsDataviews } from 'features/dataviews/selectors/dataviews.categories.selectors'
 import { useDataviewInstancesConnect } from 'features/workspace/workspace.hook'
@@ -22,19 +22,19 @@ import { useTimerangeConnect } from 'features/timebar/timebar.hooks'
 import VesselGroupReportVesselsGraph from 'features/vessel-group-report/vessels/VesselGroupReportVesselsGraph'
 import { ENCOUNTER_EVENTS_SOURCE_ID } from 'features/dataviews/dataviews.utils'
 import { formatI18nDate } from 'features/i18n/i18nDate'
-import VesselGroupReportEventsVesselPropertySelector from 'features/vessel-group-report/events/VesselGroupReportEventsVesselPropertySelector'
-import VesselGroupReportEventsVesselsTable from 'features/vessel-group-report/events/VesselGroupReportEventsVesselsTable'
+import VGREventsVesselPropertySelector from 'features/vessel-group-report/events/VGREventsVesselPropertySelector'
+import VGREventsVesselsTable from 'features/vessel-group-report/events/VGREventsVesselsTable'
 import ReportVesselsFilter from 'features/area-report/vessels/ReportVesselsFilter'
-import styles from './VesselGroupReportEvents.module.css'
+import styles from './VGREvents.module.css'
 
-function VesselGroupReportEvents() {
+function VGREvents() {
   const { t } = useTranslation()
   const vesselGroupId = useSelector(selectReportVesselGroupId)
-  const filter = useSelector(selectVesselGroupReportEventsVesselFilter)
-  const eventsSubsection = useSelector(selectVesselGroupReportEventsSubsection)
+  const filter = useSelector(selectVGREventsVesselFilter)
+  const eventsSubsection = useSelector(selectVGREventsSubsection)
   const eventsDataviews = useSelector(selectEventsDataviews)
   const eventsDataview = eventsDataviews.find(({ id }) => id === eventsSubsection)
-  const vesselsGroupByProperty = useSelector(selectVesselGroupReportEventsVesselsProperty)
+  const vesselsGroupByProperty = useSelector(selectVGREventsVesselsProperty)
   const { upsertDataviewInstance } = useDataviewInstancesConnect()
   useEffect(() => {
     if (eventsDataview) {
@@ -87,7 +87,7 @@ function VesselGroupReportEvents() {
   return (
     <Fragment>
       <div className={styles.container}>
-        <VesselGroupReportEventsSubsectionSelector />
+        <VGREventsSubsectionSelector />
         <h2 className={styles.summary}>
           {parse(
             t('vesselGroup.summaryEvents', {
@@ -109,7 +109,7 @@ function VesselGroupReportEvents() {
             })
           )}
         </h2>
-        <VesselGroupReportEventsGraph
+        <VGREventsGraph
           color={color}
           start={start}
           end={end}
@@ -120,24 +120,24 @@ function VesselGroupReportEvents() {
       <div className={styles.container}>
         <div className={styles.flex}>
           <label>{t('common.vessels', 'Vessels')}</label>
-          <VesselGroupReportEventsVesselPropertySelector />
+          <VGREventsVesselPropertySelector />
         </div>
         <VesselGroupReportVesselsGraph
           data={filteredGroups as VesselGroupEventsStatsResponseGroups}
           color={eventsDataview?.config?.color}
           property={vesselsGroupByProperty}
-          filterQueryParam="vesselGroupReportEventsVesselFilter"
-          pageQueryParam="vesselGroupReportEventsVesselPage"
+          filterQueryParam="vGREventsVesselFilter"
+          pageQueryParam="vGREventsVesselPage"
         />
         <ReportVesselsFilter
           filter={filter}
-          filterQueryParam="vesselGroupReportEventsVesselFilter"
-          pageQueryParam="vesselGroupReportEventsVesselPage"
+          filterQueryParam="vGREventsVesselFilter"
+          pageQueryParam="vGREventsVesselPage"
         />
-        <VesselGroupReportEventsVesselsTable />
+        <VGREventsVesselsTable />
       </div>
     </Fragment>
   )
 }
 
-export default VesselGroupReportEvents
+export default VGREvents
diff --git a/...s/VesselGroupReportEventsGraph.module.css → ...p-report/events/VGREventsGraph.module.css b/...s/VesselGroupReportEventsGraph.module.css → ...p-report/events/VGREventsGraph.module.css
diff --git a/...t/events/VesselGroupReportEventsGraph.tsx → ...el-group-report/events/VGREventsGraph.tsx b/...t/events/VesselGroupReportEventsGraph.tsx → ...el-group-report/events/VGREventsGraph.tsx
@@ -17,9 +17,9 @@ import i18n from 'features/i18n/i18n'
 import { formatDateForInterval, getUTCDateTime } from 'utils/dates'
 import { formatI18nNumber } from 'features/i18n/i18nNumber'
 import { tickFormatter } from 'features/area-report/reports.utils'
-import styles from './VesselGroupReportEventsGraph.module.css'
+import styles from './VGREventsGraph.module.css'
 
-type VesselGroupReportEventsGraphTooltipProps = {
+type VGREventsGraphTooltipProps = {
   active: boolean
   payload: {
     name: string
@@ -35,8 +35,7 @@ type VesselGroupReportEventsGraphTooltipProps = {
 }
 
 const ReportGraphTooltip = (props: any) => {
-  const { active, payload, label, timeChunkInterval } =
-    props as VesselGroupReportEventsGraphTooltipProps
+  const { active, payload, label, timeChunkInterval } = props as VGREventsGraphTooltipProps
 
   if (active && payload && payload.length) {
     const date = getUTCDateTime(label).setLocale(i18n.language)
@@ -61,7 +60,7 @@ const formatDateTicks = (tick: string, timeChunkInterval: FourwingsInterval) =>
 
 const graphMargin = { top: 0, right: 0, left: -20, bottom: -10 }
 
-export default function VesselGroupReportEventsGraph({
+export default function VGREventsGraph({
   color = 'rgb(22, 63, 137)',
   end,
   interval,

diff --git a/...elGroupReportEventsSubsectionSelector.tsx → ...rt/events/VGREventsSubsectionSelector.tsx b/...elGroupReportEventsSubsectionSelector.tsx → ...rt/events/VGREventsSubsectionSelector.tsx
@@ -4,16 +4,16 @@ import { Choice, ChoiceOption } from '@globalfishingwatch/ui-components'
 import { useLocationConnect } from 'routes/routes.hook'
 import { selectVesselGroupReportStatus } from 'features/vessel-group-report/vessel-group-report.slice'
 import { AsyncReducerStatus } from 'utils/async-slice'
-import { VesselGroupReportEventsSubsection } from 'features/vessel-groups/vessel-groups.types'
-import { selectVesselGroupReportEventsSubsection } from '../vessel-group.config.selectors'
+import { VGREventsSubsection } from 'features/vessel-groups/vessel-groups.types'
+import { selectVGREventsSubsection } from '../vessel-group.config.selectors'
 
 function VesselGroupReportEventsSubsectionSelector() {
   const { t } = useTranslation()
   const { dispatchQueryParams } = useLocationConnect()
   const vesselGroupReportStatus = useSelector(selectVesselGroupReportStatus)
-  const subsection = useSelector(selectVesselGroupReportEventsSubsection)
+  const subsection = useSelector(selectVGREventsSubsection)
   const loading = vesselGroupReportStatus === AsyncReducerStatus.Loading
-  const options: ChoiceOption<VesselGroupReportEventsSubsection>[] = [
+  const options: ChoiceOption<VGREventsSubsection>[] = [
     {
       id: 'encounter-events',
       label: t('event.encounter_other', 'Encounters'),
@@ -42,13 +42,13 @@ function VesselGroupReportEventsSubsectionSelector() {
     },
   ]
 
-  const onSelectSubsection = (option: ChoiceOption<VesselGroupReportEventsSubsection>) => {
+  const onSelectSubsection = (option: ChoiceOption<VGREventsSubsection>) => {
     if (subsection !== option.id) {
       // trackEvent({
       //   category: TrackCategory.Analysis,
       //   action: `Click on ${option.id} activity graph`,
       // })
-      dispatchQueryParams({ vesselGroupReportEventsSubsection: option.id })
+      dispatchQueryParams({ vGREventsSubsection: option.id })
     }
   }
 

diff --git a/...oupReportEventsVesselPropertySelector.tsx → ...vents/VGREventsVesselPropertySelector.tsx b/...oupReportEventsVesselPropertySelector.tsx → ...vents/VGREventsVesselPropertySelector.tsx
@@ -2,14 +2,14 @@ import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { Choice, ChoiceOption } from '@globalfishingwatch/ui-components'
 import { useLocationConnect } from 'routes/routes.hook'
-import { VesselGroupReportEventsVesselsProperty } from 'features/vessel-groups/vessel-groups.types'
-import { selectVesselGroupReportEventsVesselsProperty } from '../vessel-group.config.selectors'
+import { VGREventsVesselsProperty } from 'features/vessel-groups/vessel-groups.types'
+import { selectVGREventsVesselsProperty } from '../vessel-group.config.selectors'
 
 function VesselGroupReportEventsVesselPropertySelector() {
   const { t } = useTranslation()
   const { dispatchQueryParams } = useLocationConnect()
-  const property = useSelector(selectVesselGroupReportEventsVesselsProperty)
-  const options: ChoiceOption<VesselGroupReportEventsVesselsProperty>[] = [
+  const property = useSelector(selectVGREventsVesselsProperty)
+  const options: ChoiceOption<VGREventsVesselsProperty>[] = [
     {
       id: 'flag',
       label: t('common.flag', 'Flag'),
@@ -20,9 +20,9 @@ function VesselGroupReportEventsVesselPropertySelector() {
     },
   ]
 
-  const onSelectSubsection = (option: ChoiceOption<VesselGroupReportEventsVesselsProperty>) => {
+  const onSelectSubsection = (option: ChoiceOption<VGREventsVesselsProperty>) => {
     if (property !== option.id) {
-      dispatchQueryParams({ vesselGroupReportEventsVesselsProperty: option.id })
+      dispatchQueryParams({ vGREventsVesselsProperty: option.id })
     }
   }
 

diff --git a/...s/VesselGroupReportEventsVesselsTable.tsx → ...p-report/events/VGREventsVesselsTable.tsx b/...s/VesselGroupReportEventsVesselsTable.tsx → ...p-report/events/VGREventsVesselsTable.tsx
@@ -13,24 +13,24 @@ import VesselPin from 'features/vessel/VesselPin'
 import { selectWorkspaceStatus } from 'features/workspace/workspace.selectors'
 import { AsyncReducerStatus } from 'utils/async-slice'
 import {
-  selectFetchVesselGroupReportEventsVesselsParams,
-  selectVesselGroupReportEventsVesselsPaginated,
-} from 'features/vessel-group-report/events/vessel-group-report-events.selectors'
-import VesselGroupReportEventsVesselsTableFooter from 'features/vessel-group-report/events/VesselGroupReportEventsVesselsTableFooter'
+  selectFetchVGREventsVesselsParams,
+  selectVGREventsVesselsPaginated,
+} from 'features/vessel-group-report/events/vgr-events.selectors'
+import VGREventsVesselsTableFooter from 'features/vessel-group-report/events/VGREventsVesselsTableFooter'
 import styles from '../vessels/VesselGroupReportVesselsTable.module.css'
 
 export default function VesselGroupReportEventsVesselsTable() {
   const { t } = useTranslation()
   const { dispatchQueryParams } = useLocationConnect()
-  const params = useSelector(selectFetchVesselGroupReportEventsVesselsParams)
+  const params = useSelector(selectFetchVGREventsVesselsParams)
   const workspaceStatus = useSelector(selectWorkspaceStatus)
   const { error, isLoading } = useGetVesselGroupEventsVesselsQuery(
     params as VesselGroupEventsVesselsParams,
     {
       skip: !params,
     }
   )
-  const vessels = useSelector(selectVesselGroupReportEventsVesselsPaginated)
+  const vessels = useSelector(selectVGREventsVesselsPaginated)
 
   const onPinClick = () => {
     dispatchQueryParams({ viewOnlyVesselGroup: false })
@@ -95,7 +95,7 @@ export default function VesselGroupReportEventsVesselsTable() {
           })}
         </div>
       </div>
-      <VesselGroupReportEventsVesselsTableFooter />
+      <VGREventsVesselsTableFooter />
     </Fragment>
   )
 }
diff --git a/...elGroupReportEventsVesselsTableFooter.tsx → ...rt/events/VGREventsVesselsTableFooter.tsx b/...elGroupReportEventsVesselsTableFooter.tsx → ...rt/events/VGREventsVesselsTableFooter.tsx
@@ -12,19 +12,19 @@ import { REPORT_SHOW_MORE_VESSELS_PER_PAGE, REPORT_VESSELS_PER_PAGE } from 'data
 import { selectVesselGroupReportData } from 'features/vessel-group-report/vessel-group-report.slice'
 import { formatInfoField } from 'utils/info'
 import {
-  selectVesselGroupReportEventsVessels,
-  selectVesselGroupReportEventsVesselsPagination,
-} from 'features/vessel-group-report/events/vessel-group-report-events.selectors'
-import { selectVesselGroupReportEventsVesselFilter } from '../vessel-group.config.selectors'
+  selectVGREventsVessels,
+  selectVGREventsVesselsPagination,
+} from 'features/vessel-group-report/events/vgr-events.selectors'
+import { selectVGREventsVesselFilter } from '../vessel-group.config.selectors'
 import styles from '../vessels/VesselGroupReportVesselsTableFooter.module.css'
 
 export default function VesselGroupReportVesselsTableFooter() {
   const { t } = useTranslation()
   const { dispatchQueryParams } = useLocationConnect()
   const vesselGroup = useSelector(selectVesselGroupReportData)
-  const allVessels = useSelector(selectVesselGroupReportEventsVessels)
-  const reportVesselFilter = useSelector(selectVesselGroupReportEventsVesselFilter)
-  const pagination = useSelector(selectVesselGroupReportEventsVesselsPagination)
+  const allVessels = useSelector(selectVGREventsVessels)
+  const reportVesselFilter = useSelector(selectVGREventsVesselFilter)
+  const pagination = useSelector(selectVGREventsVesselsPagination)
   const { start, end } = useSelector(selectTimeRange)
 
   if (!allVessels?.length) return null
@@ -47,15 +47,15 @@ export default function VesselGroupReportVesselsTableFooter() {
   }
 
   const onPrevPageClick = () => {
-    dispatchQueryParams({ vesselGroupReportEventsVesselPage: pagination.page - 1 })
+    dispatchQueryParams({ vGREventsVesselPage: pagination.page - 1 })
   }
   const onNextPageClick = () => {
-    dispatchQueryParams({ vesselGroupReportEventsVesselPage: pagination.page + 1 })
+    dispatchQueryParams({ vGREventsVesselPage: pagination.page + 1 })
   }
   const onShowMoreClick = () => {
     dispatchQueryParams({
-      vesselGroupReportEventsResultsPerPage: REPORT_SHOW_MORE_VESSELS_PER_PAGE,
-      vesselGroupReportEventsVesselPage: 0,
+      vGREventsResultsPerPage: REPORT_SHOW_MORE_VESSELS_PER_PAGE,
+      vGREventsVesselPage: 0,
     })
     // trackEvent({
     //   category: TrackCategory.Analysis,
@@ -64,7 +64,7 @@ export default function VesselGroupReportVesselsTableFooter() {
   }
   const onShowLessClick = () => {
     dispatchQueryParams({
-      vesselGroupReportEventsResultsPerPage: REPORT_VESSELS_PER_PAGE,
+      vGREventsResultsPerPage: REPORT_VESSELS_PER_PAGE,
       reportVesselPage: 0,
     })
     // trackEvent({