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 && ( )} @@ -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 (