Merge pull request #410 from Vizzuality/feature/pu-grid-2

More layers and lock status improvements
Vizzuality · Aug 5, 2021 · 299c697 · 299c697
2 parents dcae996 + c5229f8
commit 299c697
Show file tree

Hide file tree

Showing 11 changed files with 144 additions and 71 deletions.
diff --git a/app/components/scenarios/item/component.tsx b/app/components/scenarios/item/component.tsx
@@ -71,13 +71,13 @@ export const Item: React.FC<ItemProps> = ({
     const run = jobs.find((j) => j.kind === 'run');
     const planningUnitsInclusion = jobs.find((j) => j.kind === 'planningUnitsInclusion');
 
+    if (planningUnitsInclusion && planningUnitsInclusion.status === 'running') return 'pu-running';
+    if (planningUnitsInclusion && planningUnitsInclusion.status === 'failure') return 'pu-failure';
+
     if (run && run.status === 'running') return 'run-running';
     if (run && run.status === 'failure') return 'run-failure';
     if (run && run.status === 'done') return 'run-done';
 
-    if (planningUnitsInclusion && planningUnitsInclusion.status === 'running') return 'pu-running';
-    if (planningUnitsInclusion && planningUnitsInclusion.status === 'failure') return 'pu-failure';
-
     return 'draft';
   }, [jobs]);
 

diff --git a/app/hooks/map/index.ts b/app/hooks/map/index.ts
@@ -252,6 +252,7 @@ export function usePUGridLayer({
     if (type === 'analysis' && subtype === 'analysis-gap-analysis') return 'features';
     if (type === 'analysis' && subtype === 'analysis-cost-surface') return 'cost';
     if (type === 'analysis' && subtype === 'analysis-adjust-planning-units') return 'lock-status';
+    if (type === 'solutions') return 'results';
 
     return 'protection';
   }, [type, subtype]);
@@ -288,6 +289,8 @@ export function usePUGridLayer({
             paint: {
               'line-color': '#00BFFF',
               'line-opacity': 1,
+              'line-width': 1,
+              'line-offset': 0.5,
             },
           },
 
@@ -338,13 +341,15 @@ export function usePUGridLayer({
               type: 'fill',
               'source-layer': 'layer0',
               paint: {
-                'fill-color': {
-                  property: 'costValue',
-                  stops: [
-                    [0, '#FFBFB7'],
-                    [1, '#C21701'],
-                  ],
-                },
+                'fill-color': [
+                  'interpolate',
+                  ['linear'],
+                  ['get', 'costValue'],
+                  0,
+                  '#FFBFB7',
+                  1,
+                  '#C21701',
+                ],
                 'fill-opacity': 0.75,
               },
             },
@@ -362,7 +367,8 @@ export function usePUGridLayer({
               paint: {
                 'line-color': '#0F0',
                 'line-opacity': 1,
-                'line-width': 2,
+                'line-width': 1.5,
+                'line-offset': 0.75,
               },
             },
           ] : [],
@@ -377,10 +383,44 @@ export function usePUGridLayer({
               paint: {
                 'line-color': '#F00',
                 'line-opacity': 1,
-                'line-width': 2,
+                'line-width': 1.5,
+                'line-offset': 0.75,
               },
             },
           ] : [],
+
+          // SOLUTIONS - FREQUENCY
+          ...type === 'solutions' ? [
+            {
+              type: 'fill',
+              'source-layer': 'layer0',
+              paint: {
+                'fill-color': [
+                  'interpolate',
+                  ['linear'],
+                  ['get', 'frequencyValue'],
+                  0,
+                  '#FCA107',
+                  100,
+                  '#7F3121',
+                ],
+                'fill-opacity': 0.75,
+              },
+            },
+            {
+              type: 'fill',
+              'source-layer': 'layer0',
+              filter: [
+                'all',
+                ['in', '-2-', ['get', 'valuePosition']],
+              ],
+              paint: {
+                'fill-color': '#00F',
+                'fill-opacity': 0.75,
+              },
+            },
+          ] : [],
+
         ],
       },
     };

diff --git a/app/hooks/scenarios/index.ts b/app/hooks/scenarios/index.ts
@@ -366,6 +366,8 @@ export function useScenarioPU(sid) {
     return response.data;
   }), {
     enabled: !!sid,
+    refetchOnMount: 'always',
+    refetchOnWindowFocus: false,
   });
 
   const { data } = query;

diff --git a/app/layout/scenarios/map/component.tsx b/app/layout/scenarios/map/component.tsx
@@ -42,7 +42,7 @@ export const ScenariosMap: React.FC<ScenariosMapProps> = () => {
   } = useSelectedFeatures(sid, {});
 
   const scenarioSlice = getScenarioEditSlice(sid);
-  const { setPuIncludedValue, setPuExcludedValue } = scenarioSlice.actions;
+  const { setTmpPuIncludedValue, setTmpPuExcludedValue } = scenarioSlice.actions;
 
   const dispatch = useDispatch();
   const {
@@ -58,8 +58,8 @@ export const ScenariosMap: React.FC<ScenariosMapProps> = () => {
     // Adjust planning units
     clicking,
     puAction,
-    puIncludedValue,
-    puExcludedValue,
+    puTmpIncludedValue,
+    puTmpExcludedValue,
   } = useSelector((state) => state[`/scenarios/${sid}/edit`]);
 
   const minZoom = 2;
@@ -93,8 +93,8 @@ export const ScenariosMap: React.FC<ScenariosMapProps> = () => {
     options: {
       wdpaThreshold,
       puAction,
-      puIncludedValue,
-      puExcludedValue,
+      puIncludedValue: puTmpIncludedValue,
+      puExcludedValue: puTmpExcludedValue,
     },
   });
 
@@ -141,28 +141,37 @@ export const ScenariosMap: React.FC<ScenariosMapProps> = () => {
         const { properties } = pUGridLayer;
         const { scenarioPuId } = properties;
 
-        const newClickingValue = puAction === 'include' ? [...puIncludedValue] : [...puExcludedValue];
-        const newAction = puAction === 'include' ? setPuIncludedValue : setPuExcludedValue;
+        const newClickingValue = puAction === 'include' ? [...puTmpIncludedValue] : [...puTmpExcludedValue];
+        const newAction = puAction === 'include' ? setTmpPuIncludedValue : setTmpPuExcludedValue;
+
+        const newOpositeClickingValue = puAction !== 'include' ? [...puTmpIncludedValue] : [...puTmpExcludedValue];
+        const newOpositeAction = puAction !== 'include' ? setTmpPuIncludedValue : setTmpPuExcludedValue;
 
         const index = newClickingValue.findIndex((s) => s === scenarioPuId);
+        const indexOposite = newOpositeClickingValue.findIndex((s) => s === scenarioPuId);
 
         if (index > -1) {
           newClickingValue.splice(index, 1);
         } else {
           newClickingValue.push(scenarioPuId);
         }
 
+        if (indexOposite > -1) {
+          newOpositeClickingValue.splice(indexOposite, 1);
+          dispatch(newOpositeAction(newOpositeClickingValue));
+        }
+
         dispatch(newAction(newClickingValue));
       }
     }
   }, [
     clicking,
     puAction,
-    puIncludedValue,
-    puExcludedValue,
+    puTmpIncludedValue,
+    puTmpExcludedValue,
     dispatch,
-    setPuIncludedValue,
-    setPuExcludedValue,
+    setTmpPuIncludedValue,
+    setTmpPuExcludedValue,
     cache,
   ]);
 

diff --git a/app/layout/scenarios/map/drawing-manager/component.tsx b/app/layout/scenarios/map/drawing-manager/component.tsx
@@ -42,20 +42,20 @@ export const ScenariosDrawingManager: React.FC<ScenariosDrawingManagerProps> = (
   useEffect(() => {
     const EDITOR = editorRef?.current;
 
-    if ((!drawing && !uploading) && !!EDITOR) {
-      EDITOR.deleteFeatures(drawingValue || uploadingValue);
+    if ((!drawing) && !!EDITOR) {
+      EDITOR.deleteFeatures(drawingValue);
       dispatch(setDrawingValue(null));
+    }
+  }, [drawing, drawingValue]); // eslint-disable-line
+
+  useEffect(() => {
+    const EDITOR = editorRef?.current;
+
+    if (!uploading && !!EDITOR) {
+      EDITOR.deleteFeatures(uploadingValue);
       dispatch(setUploadingValue(null));
     }
-  }, [
-    drawing,
-    uploading,
-    drawingValue,
-    uploadingValue,
-    dispatch,
-    setDrawingValue,
-    setUploadingValue,
-  ]);
+  }, [uploading, uploadingValue]); // eslint-disable-line
 
   // Delete feature as soon as you unmount this component
   useEffect(() => {
@@ -65,6 +65,7 @@ export const ScenariosDrawingManager: React.FC<ScenariosDrawingManagerProps> = (
       if (EDITOR) {
         EDITOR.deleteFeatures(drawingValue || uploadingValue);
         dispatch(setDrawingValue(null));
+        dispatch(setUploadingValue(null));
       }
     };
   }, []); // eslint-disable-line

diff --git a/app/layout/scenarios/sidebar/analysis/adjust-planning-units/buttons/clicking/component.tsx b/app/layout/scenarios/sidebar/analysis/adjust-planning-units/buttons/clicking/component.tsx
@@ -35,21 +35,23 @@ export const AnalysisAdjustClicking: React.FC<AnalysisAdjustClickingProps> = ({
 
   const scenarioSlice = getScenarioEditSlice(sid);
   const {
-    setClicking, setCache,
+    setClicking, setCache, setTmpPuIncludedValue, setTmpPuExcludedValue,
   } = scenarioSlice.actions;
 
   const dispatch = useDispatch();
-  const { puIncludedValue, puExcludedValue } = useSelector((state) => state[`/scenarios/${sid}/edit`]);
+  const {
+    puIncludedValue, puExcludedValue, puTmpIncludedValue, puTmpExcludedValue,
+  } = useSelector((state) => state[`/scenarios/${sid}/edit`]);
 
   const scenarioPUMutation = useSaveScenarioPU({});
 
   const INITIAL_VALUES = useMemo(() => {
     return {
       type,
-      puIncludedValue,
-      puExcludedValue,
+      puTmpIncludedValue,
+      puTmpExcludedValue,
     };
-  }, [type, puIncludedValue, puExcludedValue]);
+  }, [type, puTmpIncludedValue, puTmpExcludedValue]);
 
   // Effects
   useEffect(() => {
@@ -59,6 +61,8 @@ export const AnalysisAdjustClicking: React.FC<AnalysisAdjustClickingProps> = ({
 
     if (!selected) {
       dispatch(setClicking(false));
+      dispatch(setTmpPuIncludedValue(puIncludedValue));
+      dispatch(setTmpPuExcludedValue(puExcludedValue));
     }
 
     // Unmount
@@ -74,9 +78,9 @@ export const AnalysisAdjustClicking: React.FC<AnalysisAdjustClickingProps> = ({
       id: `${sid}`,
       data: {
         byId: {
-          include: values.puIncludedValue,
-          exclude: values.puExcludedValue,
-          [values.type]: values.type === 'include' ? values.puIncludedValue : values.puExcludedValue,
+          include: values.puTmpIncludedValue,
+          exclude: values.puTmpExcludedValue,
+          [values.type]: values.type === 'include' ? values.puTmpIncludedValue : values.puTmpExcludedValue,
         },
       },
     }, {
@@ -89,7 +93,7 @@ export const AnalysisAdjustClicking: React.FC<AnalysisAdjustClickingProps> = ({
           <>
             <h2 className="font-medium">Success!</h2>
             <ul className="text-sm">
-              <li>Planning units saved</li>
+              <li>Planning units lock status saved</li>
             </ul>
           </>
         ), {
@@ -118,6 +122,20 @@ export const AnalysisAdjustClicking: React.FC<AnalysisAdjustClickingProps> = ({
     addToast,
   ]);
 
+  const onCancel = useCallback(() => {
+    onSelected(null);
+
+    dispatch(setTmpPuIncludedValue(puIncludedValue));
+    dispatch(setTmpPuExcludedValue(puExcludedValue));
+  }, [
+    onSelected,
+    puIncludedValue,
+    puExcludedValue,
+    dispatch,
+    setTmpPuIncludedValue,
+    setTmpPuExcludedValue,
+  ]);
+
   return (
     <FormRFF
       key="clicking-form"
@@ -158,9 +176,7 @@ export const AnalysisAdjustClicking: React.FC<AnalysisAdjustClickingProps> = ({
                   <Button
                     theme="secondary-alt"
                     size="s"
-                    onClickCapture={() => {
-                      onSelected(null);
-                    }}
+                    onClickCapture={onCancel}
                   >
                     Cancel
                   </Button>
@@ -172,18 +188,6 @@ export const AnalysisAdjustClicking: React.FC<AnalysisAdjustClickingProps> = ({
                   >
                     Save
                   </Button>
-                  {/* <button
-                    type="button"
-                    className="flex items-center justify-center h-5 pl-5 pr-1 focus:outline-none"
-                    onClickCapture={() => {
-                      setSelected(null);
-                    }}
-                  >
-                    <Icon
-                      className="w-3 h-3 text-primary-500"
-                      icon={ARROW_UP_SVG}
-                    />
-                  </button> */}
                 </div>
               )}
             </header>

diff --git a/app/layout/scenarios/sidebar/analysis/adjust-planning-units/buttons/component.tsx b/app/layout/scenarios/sidebar/analysis/adjust-planning-units/buttons/component.tsx
@@ -29,14 +29,14 @@ export const AnalysisAdjustButtons: React.FC<AnalysisAdjustButtonsProps> = ({
   ];
 
   return (
-    <div key={type} className="flex flex-col w-full space-y-2">
+    <div className="flex flex-col w-full space-y-2">
       {BUTTONS.map((b) => {
         const { id, Component } = b;
         const active = selected === b.id;
 
         return (
           <Component
-            key={`${id}-${type}`}
+            key={`${id}`}
             type={type}
             selected={active}
             onSelected={(s) => setSelected(s)}

diff --git a/app/layout/scenarios/sidebar/analysis/adjust-planning-units/buttons/drawing/component.tsx b/app/layout/scenarios/sidebar/analysis/adjust-planning-units/buttons/drawing/component.tsx
@@ -98,7 +98,7 @@ export const AnalysisAdjustDrawing: React.FC<AnalysisAdjustDrawingProps> = ({
           <>
             <h2 className="font-medium">Success!</h2>
             <ul className="text-sm">
-              <li>Planning units saved</li>
+              <li>Planning units lock status saved</li>
             </ul>
           </>
         ), {

diff --git a/app/layout/scenarios/sidebar/analysis/adjust-planning-units/buttons/uploading/component.tsx b/app/layout/scenarios/sidebar/analysis/adjust-planning-units/buttons/uploading/component.tsx
@@ -74,6 +74,7 @@ export const AnalysisAdjustUploading: React.FC<AnalysisAdjustUploadingProps> = (
 
     // Unmount
     return () => {
+      setSuccessFile(null);
       dispatch(setUploading(false));
       dispatch(setUploadingValue(null));
     };
@@ -180,12 +181,13 @@ export const AnalysisAdjustUploading: React.FC<AnalysisAdjustUploadingProps> = (
         dispatch(setCache(Date.now()));
         dispatch(setUploading(false));
         dispatch(setUploadingValue(null));
+        setSuccessFile(null);
 
         addToast('adjust-planning-units-success', (
           <>
             <h2 className="font-medium">Success!</h2>
             <ul className="text-sm">
-              <li>Planning units saved</li>
+              <li>Planning units lock status saved</li>
             </ul>
           </>
         ), {