Fix analysis map issues (#220)

* fix reset difference reference layer in spatial analysis

* fix adding layer for non-logged in user

* fix temporal analysis renders its result

django_project/frontend/src/components/Map/LeftSide/Analysis/AnalysisCustomGeometrySelector.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react';
 import { useSelector } from "react-redux";
 import {FeatureCollection} from "geojson";
 import { combine } from "@turf/combine";
@@ -93,13 +93,22 @@ const styles = [
 ];
 
 /** Custom geometry selector. */
-export default function AnalysisCustomGeometrySelector(
-  { isDrawing, onSelected }: Props
-) {
+export const AnalysisCustomGeometrySelector = forwardRef((
+  { isDrawing, onSelected }: Props, ref
+) => {
     const [map, setMap] = useState<maplibregl.Map>(null);
     const { mapInitiated } = useSelector((state: RootState) => state.mapConfig);
     const drawingRef = useRef(null);
 
+    useImperativeHandle(ref, () => ({
+        /** Remove layer */
+        removeLayer() {
+          if (map) {
+            removeSource(map, CUSTOM_GEOM_ID);
+          }
+        }
+      }));
+
     const checkArea = (geom: FeatureCollection) => {
       try {
         return area(geom)
@@ -195,4 +204,4 @@ export default function AnalysisCustomGeometrySelector(
     }, [map, isDrawing])
 
     return <></>
-}
+})

django_project/frontend/src/components/Map/LeftSide/Analysis/index.tsx

@@ -18,14 +18,13 @@ import AnalysisLandscapeGeometrySelector
   from "./AnalysisLandscapeGeometrySelector";
 import { AppDispatch, RootState } from "../../../../store";
 import { doAnalysis, REFERENCE_LAYER_DIFF_ID, resetAnalysisResult } from "../../../../store/analysisSlice";
-import AnalysisCustomGeometrySelector from "./AnalysisCustomGeometrySelector";
+import { AnalysisCustomGeometrySelector } from "./AnalysisCustomGeometrySelector";
+import { LayerCheckboxProps } from '../Layers';
 
 
-interface Props {
+interface Props extends LayerCheckboxProps {
   landscapes?: Landscape[];
   layers?: Layer[];
-  onLayerChecked: (layer: Layer) => void;
-  onLayerUnchecked: (layer: Layer) => void;
 }
 
 enum MapAnalysisInteraction {
@@ -45,9 +44,15 @@ export default function Analysis({ landscapes, layers, onLayerChecked, onLayerUn
   const { mapConfig } = useSelector((state: RootState) => state.mapConfig);
   const [mapInteraction, setMapInteraction] = useState(MapAnalysisInteraction.NO_INTERACTION);
   const [isGeomError, setGeomError] = useState(false);
+  const geometrySelectorRef = useRef(null);
 
   /** When data changed */
   const triggerAnalysis = () => {
+    dispatch(resetAnalysisResult(data.analysisType))
+    if (data.analysisType !== 'Spatial') {
+      // remove polygon for reference layer diff
+      geometrySelectorRef?.current?.removeLayer();
+    }
     dispatch(doAnalysis(data))
   }
 
@@ -93,7 +98,7 @@ export default function Analysis({ landscapes, layers, onLayerChecked, onLayerUn
         'type': 'raster',
         'url': null
       }
-      onLayerUnchecked(_layer)
+      onLayerUnchecked(_layer, true)
     }
   }, [referenceLayerDiff])
 
@@ -144,6 +149,7 @@ export default function Analysis({ landscapes, layers, onLayerChecked, onLayerUn
           onSelected={(value) => setCommunitySelected(value)}
         />
         <AnalysisCustomGeometrySelector
+        ref={geometrySelectorRef}
           isDrawing={mapInteraction === MapAnalysisInteraction.CUSTOM_GEOMETRY_DRAWING}
           onSelected={(geometry, area) => {
             if (area > mapConfig.spatial_reference_layer_max_area) {
@@ -365,6 +371,7 @@ export default function Analysis({ landscapes, layers, onLayerChecked, onLayerUn
               setData({ analysisType: Types.BASELINE });
               setCommunitySelected(null);
               setMapInteraction(MapAnalysisInteraction.NO_INTERACTION);
+              geometrySelectorRef?.current?.removeLayer();
               dispatch(resetAnalysisResult());
             }}
           >

django_project/frontend/src/components/Map/LeftSide/Layers/index.tsx

@@ -19,7 +19,7 @@ import LeftSideLoading from "../Loading";
 
 export interface LayerCheckboxProps {
   onLayerChecked: (layer: Layer) => void;
-  onLayerUnchecked: (layer: Layer) => void;
+  onLayerUnchecked: (layer: Layer, isRemoveSource?: boolean) => void;
 }
 
 export interface Props extends LayerCheckboxProps {

django_project/frontend/src/components/Map/MapLibre.tsx

@@ -14,6 +14,7 @@ import { hasSource, removeLayer, removeSource } from "./utils";
 import { fetchBaseMaps } from '../../store/baseMapSlice';
 import { fetchMapConfig, mapInitated } from '../../store/mapConfigSlice';
 import { Layer, setSelectedNrtLayer } from '../../store/layerSlice';
+import { selectIsLoggedIn } from "../../store/authSlice";
 import { COMMUNITY_ID } from "./DataTypes";
 
 import 'maplibre-gl/dist/maplibre-gl.css';
@@ -37,6 +38,7 @@ export const MapLibre = forwardRef(
     const { baseMaps } = useSelector((state: RootState) => state.baseMap);
     const { selected: selectedLandscape } = useSelector((state: RootState) => state.landscape);
     const { selectedNrt } = useSelector((state: RootState) => state.layer);
+    const isAuthenticated = useSelector(selectIsLoggedIn);
 
     const doRenderLayer = (layer: Layer) => {
       if (map) {
@@ -81,7 +83,7 @@ export const MapLibre = forwardRef(
             layerStyle['source'] = ID
             layerStyle['id'] = ID
           }
-          map.addLayer(layerStyle, COMMUNITY_ID)
+          map.addLayer(layerStyle, isAuthenticated ? COMMUNITY_ID : null)
         } else if (layer.type === "raster") {
           if (!hasSource(map, ID)) {
             map.addSource(ID, {
@@ -97,17 +99,21 @@ export const MapLibre = forwardRef(
               source: ID,
               type: "raster"
             },
-            COMMUNITY_ID
+            isAuthenticated ? COMMUNITY_ID : null
           )
           legendRef?.current?.renderLayer(layer)
         }
       }
     }
 
-    const doRemoveLayer = (layer: Layer) => {
+    const doRemoveLayer = (layer: Layer, isRemoveSource?: boolean) => {
       if (map) {
         const ID = `layer-${layer.id}`
-        removeLayer(map, ID)
+        if (isRemoveSource) {
+          removeSource(map, ID)
+        } else {
+          removeLayer(map, ID)
+        }
         legendRef?.current?.removeLayer(layer)
       }
     }
@@ -125,8 +131,8 @@ export const MapLibre = forwardRef(
         doRenderLayer(layer)
       },
       /** Hide layer */
-      removeLayer(layer: Layer) {
-        doRemoveLayer(layer)
+      removeLayer(layer: Layer, isRemoveSource?: boolean) {
+        doRemoveLayer(layer, isRemoveSource)
       }
     }));
 

django_project/frontend/src/components/Map/RightSide/AnalysisResult.tsx

@@ -23,9 +23,12 @@ export function BarChart({ analysis }: Props) {
 
   const jsonData = analysis.results[0];
 
-  const labels: number[] = [jsonData.features[0].properties.year, jsonData.features[jsonData.features.length -1].properties.year];
+  let labels: number[] = [jsonData.features[0].properties.year];
+  if (jsonData.features.length > 1) {
+    labels.push(jsonData.features[jsonData.features.length -1].properties.year);
+  }
   const name1 = jsonData.features[0].properties.Name;
-  const name2 = jsonData.features[1].properties.Name;
+  const name2 = jsonData.features.length > 1 ? jsonData.features[1].properties.Name : null;
 
   const dataBar1 = jsonData.features
     .filter((feature:any) => feature.properties.Name === name1)
@@ -42,7 +45,7 @@ export function BarChart({ analysis }: Props) {
     ],
   };
 
-  if (name1 != name2) {
+  if (name2 !== null && name1 != name2) {
     const dataBar2 = jsonData.features
     .filter((feature:any) => feature.properties.Name === name2)
     .map((feature:any) => feature.properties[analysis.data.variable]);

django_project/frontend/src/pages/Map/index.tsx

@@ -34,8 +34,8 @@ export default function MapPage() {
             onLayerChecked={layer => {
               mapLibreRef?.current.renderLayer(layer)
             }}
-            onLayerUnchecked={layer => {
-              mapLibreRef?.current.removeLayer(layer)
+            onLayerUnchecked={(layer, isRemoveSource?) => {
+              mapLibreRef?.current.removeLayer(layer, isRemoveSource)
             }}
           />
           <Box

django_project/frontend/src/store/analysisSlice.ts

@@ -47,9 +47,15 @@ export const analysisSlice = createSlice({
     clearError(state) {
       state.error = null;
     },
-    resetAnalysisResult(state) {
+    resetAnalysisResult(state, action: PayloadAction<string>) {
       state.analysis = null;
-      state.referenceLayerDiff = null;
+      if (action.payload) {
+        if (action.payload !== 'Spatial') {
+          state.referenceLayerDiff = null;
+        } 
+      } else {
+        state.referenceLayerDiff = null;
+      }      
     }
   },
   extraReducers: (builder) => {