From 94fcfbcdff6e52262415f203b15cff46c11929d6 Mon Sep 17 00:00:00 2001 From: mluena Date: Mon, 22 Apr 2024 17:41:52 +0200 Subject: [PATCH] disclaimer no layers --- src/components/widget-controls/info/index.tsx | 2 - src/containers/datasets/alerts/hooks.tsx | 4 +- .../protected-areas/layer.tsx | 2 +- .../customize-widgets-deck/widget.tsx | 2 - src/containers/datasets/index.tsx | 8 ++-- .../datasets/restoration-sites/hooks.tsx | 34 +++++++++++++-- .../datasets/restoration-sites/layer.tsx | 6 +-- .../datasets/restoration-sites/map-legend.tsx | 14 +++---- .../datasets/restoration-sites/widget.tsx | 20 +++++---- .../datasets/restoration/map-legend.tsx | 32 +++++++-------- src/containers/layers/constants.tsx | 6 +-- src/containers/location-widget/index.tsx | 2 +- src/containers/map/layer-manager/index.tsx | 18 ++++---- src/containers/map/legend/item/index.tsx | 41 ++++++++++++------- src/containers/navigation/menu/index.tsx | 2 +- src/containers/widget/index.tsx | 2 +- src/containers/widgets/constants.ts | 8 ++-- src/containers/widgets/index.tsx | 11 +++++ src/layouts/desktop/index.tsx | 1 - src/svgs/ui/alert.svg | 3 ++ src/types/widget.ts | 2 +- 21 files changed, 135 insertions(+), 85 deletions(-) create mode 100644 src/svgs/ui/alert.svg diff --git a/src/components/widget-controls/info/index.tsx b/src/components/widget-controls/info/index.tsx index 96b5ec745..ea43fefca 100644 --- a/src/components/widget-controls/info/index.tsx +++ b/src/components/widget-controls/info/index.tsx @@ -8,8 +8,6 @@ import INFO_SVG from 'svgs/ui/info.svg?sprite'; const Info = ({ id, content }) => { const Info = INFO[id]; - console.log(Info); - if (!Info && !content) return null; return (
diff --git a/src/containers/datasets/alerts/hooks.tsx b/src/containers/datasets/alerts/hooks.tsx index 906903a24..f9bbf8123 100644 --- a/src/containers/datasets/alerts/hooks.tsx +++ b/src/containers/datasets/alerts/hooks.tsx @@ -208,7 +208,7 @@ export function useAlerts( return useMemo(() => { const alertsTotal = getTotal(dataFiltered); - const dataLimitOverflow = dataFiltered.length > 16; + const dataLimitOverflow = dataFiltered.length > 12; const config = { data: chartData, @@ -234,7 +234,7 @@ export function useAlerts( xAxis: { tick: TickSmall, ...(dataLimitOverflow && { ticks: Array.from(new Set(chartData.map((d) => d.year))) }), - interval: dataLimitOverflow ? 'preserveStartEnd' : 0, + interval: dataLimitOverflow ? 0 : 'preserveStart', type: 'category', }, yAxis: { diff --git a/src/containers/datasets/contextual-layers/protected-areas/layer.tsx b/src/containers/datasets/contextual-layers/protected-areas/layer.tsx index 8c2b7e796..365546ae8 100644 --- a/src/containers/datasets/contextual-layers/protected-areas/layer.tsx +++ b/src/containers/datasets/contextual-layers/protected-areas/layer.tsx @@ -24,7 +24,7 @@ const MangrovesProtectedAreasLayer = ({ beforeId, id, onAdd, onRemove }: LayerPr const ids = LAYERS.map((layer) => layer.id); onAdd(ids); return () => onRemove(ids); - }, [onAdd, onRemove]); + }, [onAdd, onRemove, LAYERS]); if (!SOURCE || !LAYERS) return null; return ( diff --git a/src/containers/datasets/customize-widgets-deck/widget.tsx b/src/containers/datasets/customize-widgets-deck/widget.tsx index 17334aac3..d34685540 100644 --- a/src/containers/datasets/customize-widgets-deck/widget.tsx +++ b/src/containers/datasets/customize-widgets-deck/widget.tsx @@ -63,9 +63,7 @@ const CustomizeWidgetsDeck = () => {

Widgets deck settings

- -
diff --git a/src/containers/datasets/index.tsx b/src/containers/datasets/index.tsx index c25888ca0..32410483f 100644 --- a/src/containers/datasets/index.tsx +++ b/src/containers/datasets/index.tsx @@ -131,7 +131,7 @@ export const WIDGETS: WidgetsCollection = { mangrove_international_status: InternationalStatusWidget, mangrove_carbon_market_potential: CarbonMarketPotentialWidget, mangrove_emissions_mitigation: EmissionsMitigationWidget, - mangrove_restoration_sites: RestorationSitesWidget, + mangrove_rest_sites: RestorationSitesWidget, mangrove_restoration: RestorationWidget, mangrove_national_dashboard: NationalDashboardWidget, mangrove_flood_protection: FloodProtectionWidget, @@ -164,7 +164,7 @@ export const LAYERS = { // contextual layers 'country-boundaries': CountryBoundariesLayer, mangrove_protected_areas: ProtectedAreasLayer, - mangrove_restoration_sites: RestorationSitesLayer, + mangrove_rest_sites: RestorationSitesLayer, mangrove_coastal_protection_area: FloodProtectionAreaLayer, mangrove_coastal_protection_population: FloodProtectionPopulationLayer, mangrove_coastal_protection_stock: FloodProtectionStockLayer, @@ -200,7 +200,7 @@ export const MAP_LEGENDS = { mangrove_coastal_protection_area: FloodProtectionAreaMapLegend, mangrove_coastal_protection_population: FloodProtectionPopulationMapLegend, mangrove_coastal_protection_stock: FloodProtectionStockMapLegend, - mangrove_restoration_sites: RestorationSitesMapLegend, + mangrove_rest_sites: RestorationSitesMapLegend, mangrove_iucn_ecoregion: IUCNEcoregionsMapLegend, mangrove_national_dashboard_layer: NationalDashboardMapLegend, }; @@ -225,7 +225,7 @@ export const INFO = { mangrove_emissions_mitigation: EmissionsMitigationInfo, mangrove_carbon_market_potential: CarbonMarketPotentialInfo, mangrove_international_status: InternationalStatusInfo, - mangrove_restoration_sites: RestorationSitesInfo, + mangrove_rest_sites: RestorationSitesInfo, mangrove_national_dashboard: NationalDashboardInfo, mangrove_flood_protection: FloodProtectionInfo, mangrove_iucn_ecoregion: IUCNEcoregionInfo, diff --git a/src/containers/datasets/restoration-sites/hooks.tsx b/src/containers/datasets/restoration-sites/hooks.tsx index d4542b205..c1d113e67 100644 --- a/src/containers/datasets/restoration-sites/hooks.tsx +++ b/src/containers/datasets/restoration-sites/hooks.tsx @@ -101,6 +101,7 @@ export function useSource(): SourceProps { .map(({ site_centroid, landscape_name, organizations, site_name }) => { if (site_centroid) { return { + type: 'Feature', geometry: JSON.parse(site_centroid), properties: { landscape_name, @@ -111,8 +112,9 @@ export function useSource(): SourceProps { } }); + if (!restorationSiteFeatures) return null; return { - id: 'restoration-sites', + id: 'mangrove_rest_sites', type: 'geojson', data: { type: 'FeatureCollection', @@ -133,8 +135,10 @@ export function useLayer({ return [ { id: `${id}-clusters`, + metadata: { + position: 'top', + }, type: 'circle', - source: 'restoration-sites', filter: ['has', 'point_count'], paint: { 'circle-color': '#CC61B0', @@ -150,8 +154,10 @@ export function useLayer({ }, { id: `${id}-clusters-points`, + metadata: { + position: 'top', + }, type: 'circle', - source: 'restoration-sites', filter: ['!', ['has', 'point_count']], paint: { 'circle-color': '#CC61B0', @@ -165,10 +171,30 @@ export function useLayer({ visibility, }, }, + { + id: `${id}-cluster-text`, + metadata: { + position: 'top', + }, + type: 'symbol', + filter: ['!', ['has', 'point_count']], + layout: { + 'text-field': ['get', 'site_name'], + 'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'], + 'text-size': 12, + visibility, + }, + paint: { + 'text-color': '#ffffff', + 'text-opacity': opacity, + }, + }, { id: `${id}-cluster-count`, + metadata: { + position: 'top', + }, type: 'symbol', - source: 'restoration-sites', filter: ['has', 'point_count'], layout: { 'text-field': ['get', 'point_count_abbreviated'], diff --git a/src/containers/datasets/restoration-sites/layer.tsx b/src/containers/datasets/restoration-sites/layer.tsx index c39ed4bfe..29a143141 100644 --- a/src/containers/datasets/restoration-sites/layer.tsx +++ b/src/containers/datasets/restoration-sites/layer.tsx @@ -8,9 +8,9 @@ import type { LayerProps } from 'types/layers'; import { useLayer, useSource } from './hooks'; -const MangrovesLayer = ({ beforeId, id }: LayerProps) => { +const MangrovesRestorationSitesLayer = ({ beforeId, id }: LayerProps) => { const activeLayers = useRecoilValue(activeLayersAtom); - const activeLayer = activeLayers.find((l) => l.id === 'mangrove_restoration_sites'); + const activeLayer = activeLayers.find((l) => l.id === 'mangrove_rest_sites'); const SOURCE = useSource(); const LAYERS = useLayer({ @@ -29,4 +29,4 @@ const MangrovesLayer = ({ beforeId, id }: LayerProps) => { ); }; -export default MangrovesLayer; +export default MangrovesRestorationSitesLayer; diff --git a/src/containers/datasets/restoration-sites/map-legend.tsx b/src/containers/datasets/restoration-sites/map-legend.tsx index 3a5566f94..8488498da 100644 --- a/src/containers/datasets/restoration-sites/map-legend.tsx +++ b/src/containers/datasets/restoration-sites/map-legend.tsx @@ -1,10 +1,8 @@ -const RestorationSitesMapLegend = () => { - return ( -
-
- Restoration sites -
- ); -}; +const RestorationSitesMapLegend = () => ( +
+
+ Restoration sites +
+); export default RestorationSitesMapLegend; diff --git a/src/containers/datasets/restoration-sites/widget.tsx b/src/containers/datasets/restoration-sites/widget.tsx index 95100ec81..c75f7da8f 100644 --- a/src/containers/datasets/restoration-sites/widget.tsx +++ b/src/containers/datasets/restoration-sites/widget.tsx @@ -68,18 +68,24 @@ const RestorationSitesWidget = () => { if (!filtersData) return null; - if (isFetched && data?.data.length === 0) return ; - return (
{isFetched && data && (
-

- There are {data.data?.length} restoration sites in{' '} - {data.location} - {!areFiltersEmpty && ' that match your criteria'}. -

+ {data.data?.length > 0 && ( +

+ There are {data.data?.length} restoration sites in{' '} + {data.location} + {!areFiltersEmpty && ' that match your criteria'}. +

+ )} + {data.data?.length === 0 && ( +

+ Sorry there are no results for this selection of filters for this area. Try another + one +

+ )}
{ - return ( -
-
-

0%

-

100%

-
- -
+const RestorationMapLegend = () => ( +
+
+

0%

+

100%

- ); -}; + +
+
+); export default RestorationMapLegend; diff --git a/src/containers/layers/constants.tsx b/src/containers/layers/constants.tsx index a7407a718..22c8368d0 100644 --- a/src/containers/layers/constants.tsx +++ b/src/containers/layers/constants.tsx @@ -34,8 +34,8 @@ export const LAYERS = [ id: 'mangrove_biomass', }, { - name: 'Mangrove Restoration Sites', - id: 'mangrove_restoration_sites', + name: 'Restoration Sites', + id: 'mangrove_rest_sites', }, { name: 'Mangrove restoration', @@ -120,7 +120,7 @@ export const LAYERS_ORDER = [ 'mangrove_height', 'mangrove_biomass', 'mangrove_protection', - 'mangrove_restoration_sites', + 'mangrove_rest_sites', 'mangrove_species_distribution', 'mangrove_species_location', 'mangrove_alerts', diff --git a/src/containers/location-widget/index.tsx b/src/containers/location-widget/index.tsx index aa79a48d8..facdbea52 100644 --- a/src/containers/location-widget/index.tsx +++ b/src/containers/location-widget/index.tsx @@ -85,7 +85,7 @@ const LocationWidget = () => { return ( <> -
+
)} - + - -

- {title} -

+ + @@ -154,7 +159,13 @@ const LegendItem = ({ overlay={false} >
- +
@@ -172,14 +183,16 @@ const LegendItem = ({ message="Use the settings of each layer to obtain detailed information, manage the opacity, hide or show it or to remove it from the map." >
- + - - + + { onClick={() => setSection('main')} className="flex items-center space-x-2" > - + Menu diff --git a/src/containers/widget/index.tsx b/src/containers/widget/index.tsx index 0a0a7143d..7f0d5b152 100644 --- a/src/containers/widget/index.tsx +++ b/src/containers/widget/index.tsx @@ -101,7 +101,7 @@ const WidgetWrapper: FC = (props: WidgetLayoutProps) => { {applicability && (

{ > +

+ +

+ Disclaimer: Some layers and widgets are not available for certain locations. +

+
{ draggable={false} /> -
{isPrintingMode && (
diff --git a/src/svgs/ui/alert.svg b/src/svgs/ui/alert.svg new file mode 100644 index 000000000..4941101ae --- /dev/null +++ b/src/svgs/ui/alert.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/types/widget.ts b/src/types/widget.ts index 886440cca..a0cfab5ee 100644 --- a/src/types/widget.ts +++ b/src/types/widget.ts @@ -25,7 +25,7 @@ export type WidgetSlugType = | 'mangrove_blue_carbon' | 'mangrove_protection' | 'mangrove_restoration' - | 'mangrove_restoration_sites' + | 'mangrove_rest_sites' | 'mangrove_species_distribution' | 'mangrove_species_threatened' | 'mangrove_species_location'