Merge pull request #177 from Vizzuality/SKY30-245-change-wording-from…

…-analysis-to-modelling-in-the-modelling-panel

[SKY30-245] Change wording from analysis to modelling in the modelling panel

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 = () => {
           <ZoomControls />
           <DrawControls />
           <LayerManager cursor={cursor} />
-          <Analysis />
+          <Modelling />
           <Attributions />
         </>
       </Map>

frontend/src/containers/map/content/map/analysis/index.tsx → frontend/src/containers/map/content/map/modelling/index.tsx

@@ -5,36 +5,36 @@ 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<AnalysisData>(process.env.NEXT_PUBLIC_ANALYSIS_CF_URL, feature);
+const fetchModelling = async (feature: Feature) => {
+  return axios.post<ModellingData>(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,
     }
   );
 
   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;

frontend/src/containers/map/sidebar/index.tsx

@@ -1,57 +1,56 @@
 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 (
     <Collapsible
       className="h-full overflow-hidden"
       open={isSidebarOpen}
       onOpenChange={setSidebarOpen}
     >
-      {showAnalysisButton && (
+      {showModellingButton && (
         <Button
           type="button"
           variant="white"
           className={cn(
-            'absolute top-0 z-10 flex h-12 items-center space-x-2 border-l-0 border-t-0 px-6 py-3 font-mono text-xs',
+            'absolute top-0 z-10 flex h-10 items-center space-x-2 border-l-0 border-t-0 px-6 py-3 font-mono text-xs',
             {
               'hidden md:flex': true,
               'left-0': !isSidebarOpen,
               'left-[460px] transition-[left] delay-500': isSidebarOpen,
             }
           )}
-          onClick={onClickAnalysis}
+          onClick={onClickModelling}
         >
           <span>Marine Conservation Modelling</span>
-          <LuChevronRight className="h-6 w-6 -translate-y-[1px]" />
         </Button>
       )}
       <CollapsibleTrigger asChild>
@@ -69,7 +68,7 @@ const MapSidebar: React.FC = () => {
         </Button>
       </CollapsibleTrigger>
       <CollapsibleContent className="relative top-0 left-0 z-20 h-full flex-shrink-0 bg-white fill-mode-none md:w-[460px]">
-        {showAnalysisSidebar && <Analysis />}
+        {showModellingSidebar && <Modelling />}
         {showDetailsSidebar && <Details />}
       </CollapsibleContent>
     </Collapsible>

frontend/src/containers/map/sidebar/analysis/back-button/index.tsx → 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 (
     <Button

frontend/src/containers/map/sidebar/modelling/index.tsx

@@ -0,0 +1,35 @@
+import { useAtomValue } from 'jotai';
+
+import { modellingAtom } from '../../store';
+
+import BackButton from './back-button';
+import ModellingButtons from './modelling-buttons';
+import ModellingIntro from './modelling-intro';
+import ModellingWidget from './widget';
+
+const SidebarModelling: React.FC = () => {
+  const { status: modellingStatus } = useAtomValue(modellingAtom);
+
+  const showIntro = modellingStatus === 'idle';
+  const showButtons = ['success', 'error'].includes(modellingStatus);
+
+  return (
+    <>
+      <div className="h-full w-full overflow-y-scroll border-x border-black pb-12">
+        <div className="border-b border-black px-4 pt-4 pb-2 md:px-8">
+          <h1 className="text-5xl font-black">
+            {showIntro ? 'Marine Conservation Modelling' : 'Custom Area'}
+          </h1>
+          <div className="my-2">{showButtons && <ModellingButtons />}</div>
+        </div>
+        {showIntro && <ModellingIntro />}
+        {!showIntro && <ModellingWidget />}
+      </div>
+      <div className="absolute bottom-0 left-px">
+        <BackButton />
+      </div>
+    </>
+  );
+};
+
+export default SidebarModelling;

frontend/src/containers/map/sidebar/analysis/analysis-buttons/index.tsx → 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 (
     <div className="mt-4 flex gap-4 py-1 font-mono text-sm font-semibold uppercase underline">
@@ -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
       </Button>
       <Button
         type="button"
@@ -46,4 +46,4 @@ const AnalysisButtons: React.FC = () => {
   );
 };
 
-export default AnalysisButtons;
+export default ModellingButtons;

frontend/src/containers/map/sidebar/analysis/analysis-intro/index.tsx → 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 = () => {
     <div className="flex flex-col gap-4 py-4 px-4 md:px-8">
       <span className="flex items-center font-bold">
         <Icon icon={Graph} className="mr-2.5 inline h-4 w-5 fill-black" />
-        Start analysing yor own <span className="ml-1.5 text-blue">custom area</span>.
+        Start modelling yor own <span className="ml-1.5 text-blue">custom area</span>.
       </span>
       <VideoPlayer
         source="/videos/modelling-instructions.mp4"
         stillImage="/images/video-stills/modelling-instructions.png"
         type="video/mp4"
       />
-      <p>Draw in the map the area you want to analyse through on-the-fly calculations.</p>
+      <p>Draw in the map the area you want to model through on-the-fly calculations.</p>
       <span>
         {isDrawStateActive && (
           <Button
@@ -58,4 +58,4 @@ const AnalysisIntro: React.FC = () => {
   );
 };
 
-export default AnalysisIntro;
+export default ModellingIntro;