diff --git a/frontend/src/containers/map/content/map/index.tsx b/frontend/src/containers/map/content/map/index.tsx index 7e65340e..994add74 100644 --- a/frontend/src/containers/map/content/map/index.tsx +++ b/frontend/src/containers/map/content/map/index.tsx @@ -9,10 +9,10 @@ import { useAtomValue, useSetAtom } from 'jotai'; import Map, { ZoomControls, Attributions } from '@/components/map'; import { DEFAULT_VIEW_STATE } from '@/components/map/constants'; -import Analysis from '@/containers/map/content/map/analysis'; import DrawControls from '@/containers/map/content/map/draw-controls'; import LabelsManager from '@/containers/map/content/map/labels-manager'; import LayersToolbox from '@/containers/map/content/map/layers-toolbox'; +import Modelling from '@/containers/map/content/map/modelling'; import Popup from '@/containers/map/content/map/popup'; import { useSyncMapSettings } from '@/containers/map/content/map/sync-settings'; import { sidebarAtom } from '@/containers/map/store'; @@ -219,7 +219,7 @@ const MainMap: React.FC = () => { - + > diff --git a/frontend/src/containers/map/content/map/analysis/index.tsx b/frontend/src/containers/map/content/map/modelling/index.tsx similarity index 53% rename from frontend/src/containers/map/content/map/analysis/index.tsx rename to frontend/src/containers/map/content/map/modelling/index.tsx index 49c81a34..512f02a6 100644 --- a/frontend/src/containers/map/content/map/analysis/index.tsx +++ b/frontend/src/containers/map/content/map/modelling/index.tsx @@ -5,20 +5,20 @@ import axios from 'axios'; import type { Feature } from 'geojson'; import { useAtomValue, useSetAtom } from 'jotai'; -import { analysisAtom, drawStateAtom } from '@/containers/map/store'; -import { AnalysisData } from '@/types/analysis'; +import { modellingAtom, drawStateAtom } from '@/containers/map/store'; +import { ModellingData } from '@/types/modelling'; -const fetchAnalysis = async (feature: Feature) => { - return axios.post(process.env.NEXT_PUBLIC_ANALYSIS_CF_URL, feature); +const fetchModelling = async (feature: Feature) => { + return axios.post(process.env.NEXT_PUBLIC_ANALYSIS_CF_URL, feature); }; -const Analysis = () => { +const Modelling = () => { const { feature } = useAtomValue(drawStateAtom); - const setAnalysisState = useSetAtom(analysisAtom); + const setModellingState = useSetAtom(modellingAtom); const { isFetching, isSuccess, data, isError } = useQuery( - ['analysis', feature], - () => fetchAnalysis(feature), + ['modelling', feature], + () => fetchModelling(feature), { enabled: Boolean(feature), select: ({ data }) => data, @@ -26,15 +26,15 @@ const Analysis = () => { ); useEffect(() => { - setAnalysisState((prevState) => ({ + setModellingState((prevState) => ({ ...prevState, ...(isSuccess && { status: 'success', data }), ...(isFetching && { status: 'running' }), ...(isError && { status: 'error' }), })); - }, [setAnalysisState, isFetching, isSuccess, data, isError]); + }, [setModellingState, isFetching, isSuccess, data, isError]); return null; }; -export default Analysis; +export default Modelling; diff --git a/frontend/src/containers/map/sidebar/analysis/index.tsx b/frontend/src/containers/map/sidebar/analysis/index.tsx deleted file mode 100644 index 3e291d9e..00000000 --- a/frontend/src/containers/map/sidebar/analysis/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useAtomValue } from 'jotai'; - -import { analysisAtom } from '../../store'; - -import AnalysisButtons from './analysis-buttons'; -import AnalysisIntro from './analysis-intro'; -import BackButton from './back-button'; -import AnalysisWidget from './widget'; - -const SidebarAnalysis: React.FC = () => { - const { status: analysisStatus } = useAtomValue(analysisAtom); - - const showIntro = analysisStatus === 'idle'; - const showButtons = ['success', 'error'].includes(analysisStatus); - - return ( - <> - - - - {showIntro ? 'Marine Conservation Modelling' : 'Custom Area'} - - {showButtons && } - - {showIntro && } - {!showIntro && } - - - - - > - ); -}; - -export default SidebarAnalysis; diff --git a/frontend/src/containers/map/sidebar/index.tsx b/frontend/src/containers/map/sidebar/index.tsx index b0e9b4d6..f994e3f8 100644 --- a/frontend/src/containers/map/sidebar/index.tsx +++ b/frontend/src/containers/map/sidebar/index.tsx @@ -1,34 +1,34 @@ import { useCallback } from 'react'; import { useAtom } from 'jotai'; -import { LuChevronLeft, LuChevronRight } from 'react-icons/lu'; +import { LuChevronLeft } from 'react-icons/lu'; import { Button } from '@/components/ui/button'; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'; -import { analysisAtom, sidebarAtom } from '@/containers/map/store'; +import { modellingAtom, sidebarAtom } from '@/containers/map/store'; import { cn } from '@/lib/classnames'; import { useSyncMapContentSettings } from '../sync-settings'; -import Analysis from './analysis'; import Details from './details'; +import Modelling from './modelling'; const MapSidebar: React.FC = () => { const [isSidebarOpen, setSidebarOpen] = useAtom(sidebarAtom); - const [{ active: isAnalysisActive }, setAnalysisActive] = useAtom(analysisAtom); + const [{ active: isModellingActive }, setModellingActive] = useAtom(modellingAtom); const [{ showDetails }] = useSyncMapContentSettings(); - const onClickAnalysis = useCallback(() => { - setAnalysisActive((prevState) => ({ + const onClickModelling = useCallback(() => { + setModellingActive((prevState) => ({ ...prevState, active: true, })); - }, [setAnalysisActive]); + }, [setModellingActive]); - const analysisFeatureActive = process.env.NEXT_PUBLIC_FEATURE_FLAG_ANALYSIS === 'true'; - const showAnalysisButton = analysisFeatureActive && !isAnalysisActive && !showDetails; - const showAnalysisSidebar = analysisFeatureActive && isAnalysisActive; - const showDetailsSidebar = !showAnalysisSidebar; + const modellingFeatureActive = process.env.NEXT_PUBLIC_FEATURE_FLAG_ANALYSIS === 'true'; + const showModellingButton = modellingFeatureActive && !isModellingActive && !showDetails; + const showModellingSidebar = modellingFeatureActive && isModellingActive; + const showDetailsSidebar = !showModellingSidebar; return ( { open={isSidebarOpen} onOpenChange={setSidebarOpen} > - {showAnalysisButton && ( + {showModellingButton && ( Marine Conservation Modelling - )} @@ -69,7 +68,7 @@ const MapSidebar: React.FC = () => { - {showAnalysisSidebar && } + {showModellingSidebar && } {showDetailsSidebar && } diff --git a/frontend/src/containers/map/sidebar/analysis/back-button/index.tsx b/frontend/src/containers/map/sidebar/modelling/back-button/index.tsx similarity index 76% rename from frontend/src/containers/map/sidebar/analysis/back-button/index.tsx rename to frontend/src/containers/map/sidebar/modelling/back-button/index.tsx index a77204d4..e95756b6 100644 --- a/frontend/src/containers/map/sidebar/analysis/back-button/index.tsx +++ b/frontend/src/containers/map/sidebar/modelling/back-button/index.tsx @@ -4,16 +4,16 @@ import { useResetAtom } from 'jotai/utils'; import { LuChevronLeft } from 'react-icons/lu'; import { Button } from '@/components/ui/button'; -import { analysisAtom, drawStateAtom } from '@/containers/map/store'; +import { modellingAtom, drawStateAtom } from '@/containers/map/store'; const BackButton: React.FC = () => { - const resetAnalysis = useResetAtom(analysisAtom); + const resetModelling = useResetAtom(modellingAtom); const resetDrawState = useResetAtom(drawStateAtom); const onClickBack = useCallback(() => { resetDrawState(); - resetAnalysis(); - }, [resetAnalysis, resetDrawState]); + resetModelling(); + }, [resetModelling, resetDrawState]); return ( { + const { status: modellingStatus } = useAtomValue(modellingAtom); + + const showIntro = modellingStatus === 'idle'; + const showButtons = ['success', 'error'].includes(modellingStatus); + + return ( + <> + + + + {showIntro ? 'Marine Conservation Modelling' : 'Custom Area'} + + {showButtons && } + + {showIntro && } + {!showIntro && } + + + + + > + ); +}; + +export default SidebarModelling; diff --git a/frontend/src/containers/map/sidebar/analysis/analysis-buttons/index.tsx b/frontend/src/containers/map/sidebar/modelling/modelling-buttons/index.tsx similarity index 57% rename from frontend/src/containers/map/sidebar/analysis/analysis-buttons/index.tsx rename to frontend/src/containers/map/sidebar/modelling/modelling-buttons/index.tsx index a8e6aefa..77dbf39c 100644 --- a/frontend/src/containers/map/sidebar/analysis/analysis-buttons/index.tsx +++ b/frontend/src/containers/map/sidebar/modelling/modelling-buttons/index.tsx @@ -4,23 +4,23 @@ import { useSetAtom } from 'jotai'; import { useResetAtom } from 'jotai/utils'; import { Button } from '@/components/ui/button'; -import { analysisAtom, drawStateAtom } from '@/containers/map/store'; +import { modellingAtom, drawStateAtom } from '@/containers/map/store'; -const AnalysisButtons: React.FC = () => { - const setAnalysis = useSetAtom(analysisAtom); - const resetAnalysis = useResetAtom(analysisAtom); +const ModellingButtons: React.FC = () => { + const setModelling = useSetAtom(modellingAtom); + const resetModelling = useResetAtom(modellingAtom); const resetDrawState = useResetAtom(drawStateAtom); - const onClickClearAnalysis = useCallback(() => { + const onClickClearModelling = useCallback(() => { resetDrawState(); - resetAnalysis(); - }, [resetAnalysis, resetDrawState]); + resetModelling(); + }, [resetModelling, resetDrawState]); const onClickRedraw = useCallback(() => { resetDrawState(); - resetAnalysis(); - setAnalysis((prevState) => ({ ...prevState, active: true })); - }, [resetAnalysis, resetDrawState, setAnalysis]); + resetModelling(); + setModelling((prevState) => ({ ...prevState, active: true })); + }, [resetModelling, resetDrawState, setModelling]); return ( @@ -29,9 +29,9 @@ const AnalysisButtons: React.FC = () => { className="m-0 p-0" variant="text-link" size="sm" - onClick={onClickClearAnalysis} + onClick={onClickClearModelling} > - Clear analysis + Clear model { ); }; -export default AnalysisButtons; +export default ModellingButtons; diff --git a/frontend/src/containers/map/sidebar/analysis/analysis-intro/index.tsx b/frontend/src/containers/map/sidebar/modelling/modelling-intro/index.tsx similarity index 87% rename from frontend/src/containers/map/sidebar/analysis/analysis-intro/index.tsx rename to frontend/src/containers/map/sidebar/modelling/modelling-intro/index.tsx index 836a90f3..213515d9 100644 --- a/frontend/src/containers/map/sidebar/analysis/analysis-intro/index.tsx +++ b/frontend/src/containers/map/sidebar/modelling/modelling-intro/index.tsx @@ -9,7 +9,7 @@ import VideoPlayer from '@/components/video-player'; import { drawStateAtom } from '@/containers/map/store'; import Graph from '@/styles/icons/graph.svg?sprite'; -const AnalysisIntro: React.FC = () => { +const ModellingIntro: React.FC = () => { const [{ active: isDrawStateActive }, setDrawState] = useAtom(drawStateAtom); const resetDrawState = useResetAtom(drawStateAtom); @@ -24,14 +24,14 @@ const AnalysisIntro: React.FC = () => { - Start analysing yor own custom area. + Start modelling yor own custom area. - Draw in the map the area you want to analyse through on-the-fly calculations. + Draw in the map the area you want to model through on-the-fly calculations. {isDrawStateActive && ( { ); }; -export default AnalysisIntro; +export default ModellingIntro; diff --git a/frontend/src/containers/map/sidebar/analysis/useTooltips.ts b/frontend/src/containers/map/sidebar/modelling/useTooltips.ts similarity index 100% rename from frontend/src/containers/map/sidebar/analysis/useTooltips.ts rename to frontend/src/containers/map/sidebar/modelling/useTooltips.ts diff --git a/frontend/src/containers/map/sidebar/analysis/widget/index.tsx b/frontend/src/containers/map/sidebar/modelling/widget/index.tsx similarity index 81% rename from frontend/src/containers/map/sidebar/analysis/widget/index.tsx rename to frontend/src/containers/map/sidebar/modelling/widget/index.tsx index e451ca3e..8b860ea2 100644 --- a/frontend/src/containers/map/sidebar/analysis/widget/index.tsx +++ b/frontend/src/containers/map/sidebar/modelling/widget/index.tsx @@ -5,7 +5,7 @@ import { useAtomValue } from 'jotai'; import HorizontalBarChart from '@/components/charts/horizontal-bar-chart'; import TooltipButton from '@/components/tooltip-button'; import Widget from '@/components/widget'; -import { analysisAtom } from '@/containers/map/store'; +import { modellingAtom } from '@/containers/map/store'; import { cn } from '@/lib/classnames'; import { useGetLocations } from '@/types/generated/location'; @@ -37,15 +37,15 @@ const WidgetSectionWidgetTitle: React.FC = ({ tit ); }; -const AnalysisWidget: React.FC = () => { +const ModellingWidget: React.FC = () => { const chartsProps = DEFAULT_CHART_PROPS; - const { status: analysisStatus, data: analysisData } = useAtomValue(analysisAtom); + const { status: modellingStatus, data: modellingData } = useAtomValue(modellingAtom); // Tooltips with mapping const tooltips = useTooltips(); - // Get all locations in order to get country names for analysis data + // Get all locations in order to get country names for modelling data const { data: locationsData } = useGetLocations( { 'pagination[limit]': -1, @@ -61,13 +61,13 @@ const AnalysisWidget: React.FC = () => { // Build contribution details details for the charts const contributionDetailsData = useMemo(() => { - if (!locationsData.length || !analysisData) return null; + if (!locationsData.length || !modellingData) return null; - const analysisLocations = analysisData?.locations_area; + const modellingLocations = modellingData?.locations_area; - const chartData = analysisLocations.map((analysisLocation) => { + const chartData = modellingLocations.map((modellingLocation) => { const location = locationsData?.find( - ({ attributes }) => analysisLocation.code === attributes?.code + ({ attributes }) => modellingLocation.code === attributes?.code )?.attributes; if (!location) return null; @@ -77,13 +77,13 @@ const AnalysisWidget: React.FC = () => { return { ...DEFAULT_CHART_DATA, title: name, - protectedArea: analysisLocation.protected_area, + protectedArea: modellingLocation.protected_area, totalArea: totalMarineArea, }; }); return chartData; - }, [analysisData, locationsData]); + }, [modellingData, locationsData]); // Build global contribution details for the charts const globalContributionData = useMemo(() => { @@ -95,15 +95,15 @@ const AnalysisWidget: React.FC = () => { return { ...DEFAULT_CHART_DATA, - protectedArea: analysisData?.total_protected_area, + protectedArea: modellingData?.total_protected_area, totalArea: location?.totalMarineArea, }; - }, [analysisData, locationsData]); + }, [modellingData, locationsData]); const administrativeBoundaries = contributionDetailsData?.map(({ title }) => title); - const loading = analysisStatus === 'running'; - const error = analysisStatus === 'error'; + const loading = modellingStatus === 'running'; + const error = modellingStatus === 'error'; return ( { ); }; -export default AnalysisWidget; +export default ModellingWidget; diff --git a/frontend/src/containers/map/store.ts b/frontend/src/containers/map/store.ts index 8a5904f9..52da49fa 100644 --- a/frontend/src/containers/map/store.ts +++ b/frontend/src/containers/map/store.ts @@ -5,8 +5,8 @@ import { atom } from 'jotai'; import { atomWithReset } from 'jotai/utils'; import { CustomMapProps } from '@/components/map/types'; -import type { AnalysisData } from '@/types/analysis'; import { LayerResponseDataObject } from '@/types/generated/strapi.schemas'; +import type { ModellingData } from '@/types/modelling'; export const sidebarAtom = atom(true); @@ -25,11 +25,11 @@ export const drawStateAtom = atomWithReset<{ feature: null, }); -// ? analysis state -export const analysisAtom = atomWithReset<{ +// ? modelling state +export const modellingAtom = atomWithReset<{ active: boolean; status: 'idle' | 'running' | 'success' | 'error'; - data: AnalysisData; + data: ModellingData; }>({ active: false, status: 'idle', diff --git a/frontend/src/types/analysis.ts b/frontend/src/types/analysis.ts deleted file mode 100644 index ea1cf62c..00000000 --- a/frontend/src/types/analysis.ts +++ /dev/null @@ -1,10 +0,0 @@ -export type AnalysisLocationArea = { - code: string; - protected_area: number; -}; - -export type AnalysisData = { - locations_area: AnalysisLocationArea[]; - total_area: number; - total_protected_area: number; -}; diff --git a/frontend/src/types/modelling.ts b/frontend/src/types/modelling.ts new file mode 100644 index 00000000..19880c5d --- /dev/null +++ b/frontend/src/types/modelling.ts @@ -0,0 +1,10 @@ +export type ModellingLocationArea = { + code: string; + protected_area: number; +}; + +export type ModellingData = { + locations_area: ModellingLocationArea[]; + total_area: number; + total_protected_area: number; +};
Draw in the map the area you want to analyse through on-the-fly calculations.
Draw in the map the area you want to model through on-the-fly calculations.