diff --git a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsight.module.css b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsight.module.css index cb646a2365..03fd61411e 100644 --- a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsight.module.css +++ b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsight.module.css @@ -85,3 +85,19 @@ top: 0.4rem; margin-left: var(--space-XS); } + +.insightContainer .collapsable { + justify-content: flex-start; +} + +.insightContainer .collapsable::before { + display: none; + content: ''; +} + +.insightContainer .collapsableLabel { + padding-left: 0; + font: var(--font-M); + color: var(--color-primary-blue); + text-transform: none; +} diff --git a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightCoverage.tsx b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightCoverage.tsx index 3034f3bd69..985df1657d 100644 --- a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightCoverage.tsx +++ b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightCoverage.tsx @@ -1,8 +1,10 @@ import { useTranslation } from 'react-i18next' import { useGetVesselGroupInsightQuery } from 'queries/vessel-insight-api' +import { useSelector } from 'react-redux' 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 './VesselGroupReportInsight.module.css' import VesselGroupReportInsightCoverageGraph from './VesselGroupReportInsightCoverageGraph' @@ -11,22 +13,10 @@ const VesselGroupReportInsightCoveragePlaceholder = () => { return
} -const VesselGroupReportInsightCoverage = ({ - vesselGroupId, - start, - end, -}: { - vesselGroupId: string - start: string - end: string -}) => { +const VesselGroupReportInsightCoverage = () => { const { t } = useTranslation() - const { data, error, isLoading } = useGetVesselGroupInsightQuery({ - vesselGroupId: vesselGroupId, - insight: 'COVERAGE', - start, - end, - }) + const fetchParams = useSelector(selectFetchVesselGroupReportCoverageParams) + const { data, error, isLoading } = useGetVesselGroupInsightQuery(fetchParams) return (