Feature/1534 issues cog layer rendering

django_project/frontend/src/pages/Admin/ContextLayer/StyleConfig/Map.jsx

@@ -17,7 +17,8 @@
    MAP CONFIG CONTAINER
    ========================================================================== */
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, {useEffect, useState, useRef, useMemo} from 'react';
+import { debounce } from '@mui/material/utils';
 import maplibregl from 'maplibre-gl';
 import { removeLayer, removeSource } from "../../../Dashboard/MapLibre/utils";
 import {
@@ -36,10 +37,21 @@ maplibregl.addProtocol('cog', cogProtocol);
 /**
  * Map Config component.
  */
-export default function MapConfig({ data, setData, layerInput }) {
+export default function MapConfig({ data, setData, layerInput, setLoading }) {
   const [map, setMap] = useState(null);
   const [isInit, setIsInit] = useState(true);
-  const requestSent = useRef(false);
+  const prevData  = useRef()
+
+  const renderContextLayer = useMemo(
+    () =>
+      debounce(
+        (id, data, layerInput, map, contextLayerOrder, setData, isInit, setIsInit, prevData, setLoading) => {
+          contextLayerRendering(id, data, layerInput, map, contextLayerOrder, setData, isInit, setIsInit, prevData, setLoading)
+        },
+        400
+      ),
+    []
+  )
 
   /***
    * Render layer to maplibre
@@ -102,15 +114,14 @@ export default function MapConfig({ data, setData, layerInput }) {
         (
           async () => {
             await updateColorPaletteData()
-            contextLayerRendering(id, data, layerInput, map, null, setData, isInit, setIsInit, requestSent)
+            renderContextLayer(id, data, layerInput, map, null, setData, isInit, setIsInit, prevData, setLoading)
           }
         )()
       } else {
-        contextLayerRendering(id, data, layerInput, map, null, setData, isInit, setIsInit, requestSent)
+        contextLayerRendering(id, data, layerInput, map, null, setData, isInit, setIsInit, prevData, setLoading)
       }
     }
   }, [map, layerInput]);
 
   return <div id="StyleMapConfig"></div>
-}
-
+}

django_project/frontend/src/pages/Admin/ContextLayer/StyleConfig/RasterCogLayer/index.jsx

@@ -126,59 +126,62 @@ export default function RasterCogLayer(
       />
       <br/>
       <br/>
-      <Grid
-        container
-        flexDirection={'row'}
-        spacing={1}
-      >
-        <Grid item md={4} xl={4} lg={4}>
-          <div>
-            <div>NoData Value</div>
-            <input
-              placeholder='NoData Value' type='text'
-              value={styles.nodata}
-              disabled={true}
-            />
-          </div>
+      {
+        styles.dynamic_classification == 'Equidistant.' ? null :
+        <Grid
+          container
+          flexDirection={'row'}
+          spacing={1}
+        >
+          <Grid item md={4} xl={4} lg={4}>
+            <div>
+              <div>NoData Value</div>
+              <input
+                placeholder='NoData Value' type='text'
+                value={styles.nodata}
+                disabled={true}
+              />
+            </div>
+          </Grid>
+          <Grid item md={4} xl={4} lg={4}>
+            <div>
+              <div>Additional NoData</div>
+              <input
+                placeholder='Additional NoData' type='number'
+                value={styles.additional_nodata}
+                onChange={evt => {
+                  setData({
+                    ...data,
+                    styles: {
+                      ...styles,
+                      additional_nodata: evt.target.value
+                    }
+                  })
+                }}
+              />
+            </div>
+          </Grid>
+          <Grid item md={4} xl={4} lg={4}>
+            <div>
+              <div>NoData Color</div>
+              <ColorPickerWithAlpha
+                color={styles.nodata_color}
+                opacity={styles.nodata_opacity}
+                setColor={val => {
+                  setData({
+                    ...data,
+                    styles: {
+                      ...styles,
+                      nodata_color: rgbaToHex(val),
+                      nodata_opacity: parseFloat(val.a * 100)
+                    }
+                  })
+                }}
+              />
+            </div>
+          </Grid>
         </Grid>
-        <Grid item md={4} xl={4} lg={4}>
-          <div>
-            <div>Additional NoData</div>
-            <input
-              placeholder='Additional NoData' type='number'
-              value={styles.additional_nodata}
-              onChange={evt => {
-                setData({
-                  ...data,
-                  styles: {
-                    ...styles,
-                    additional_nodata: evt.target.value
-                  }
-                })
-              }}
-            />
-          </div>
-        </Grid>
-        <Grid item md={4} xl={4} lg={4}>
-          <div>
-            <div>NoData Color</div>
-            <ColorPickerWithAlpha
-              color={styles.nodata_color}
-              opacity={styles.nodata_opacity}
-              setColor={val => {
-                setData({
-                  ...data,
-                  styles: {
-                    ...styles,
-                    nodata_color: rgbaToHex(val),
-                    nodata_opacity: parseFloat(val.a * 100)
-                  }
-                })
-              }}
-            />
-          </div>
-        </Grid>
-      </Grid>
+      }
       <br/>
       {/*  Palette */}
       <ColorPaletteStyleConfig
@@ -206,4 +209,4 @@ export default function RasterCogLayer(
       />
     </FormControl>
   </>
-}
+}

django_project/frontend/src/pages/Admin/ContextLayer/StyleConfig/index.jsx

@@ -13,8 +13,8 @@
  * __copyright__ = ('Copyright 2023, Unicef')
  */
 
-import React, { Fragment, useEffect, useState } from 'react';
-import { Checkbox, FormControlLabel, FormGroup } from "@mui/material";
+import React, {Fragment, useEffect, useRef, useState} from 'react';
+import { Checkbox, FormControlLabel, FormGroup, Modal, Typography, Box, CircularProgress } from "@mui/material";
 import MapConfig from './Map'
 import ArcgisConfig from './Arcgis'
 import { useDispatch } from "react-redux";
@@ -59,6 +59,7 @@ export default function StyleConfig(
 
   const [layerData, setLayerData] = useState(null);
   const [layerDataClass, setLayerDataClass] = useState(null);
+  const [isMapLoading, setIsMapLoading] = useState(false);
   const [tab, setTab] = useState(data.layer_type === Variables.LAYER.TYPE.ARCGIS ? FIELDS : PREVIEW);
 
   useEffect(() => {
@@ -139,6 +140,20 @@ export default function StyleConfig(
               </Fragment> : ""
           }
         </div>
+        {
+          isMapLoading && data.layer_type === Variables.LAYER.TYPE.RASTER_COG &&
+            <Modal
+              id={'Modal-Loading-Style-Config'}
+              open={true}
+            >
+              <Box>
+                <Typography id="modal-modal-title" variant="h6" component="h2">
+                  Getting color classification from API.
+                </Typography>
+                <CircularProgress/>
+              </Box>
+            </Modal>
+        }
         <div id='ContextLayerConfig'
              className={"BasicFormSection " + (data.layer_type === Variables.LAYER.TYPE.ARCGIS ? 'ShowStyle' : '')}
         >
@@ -164,6 +179,7 @@ export default function StyleConfig(
                     layer_type: data.layer_type,
                     render: true
                   }}
+                  setLoading={setIsMapLoading}
                 />
               </div> : null
           }

django_project/frontend/src/pages/Admin/ContextLayer/StyleConfig/style.scss

@@ -280,4 +280,19 @@
   cursor: pointer;
   padding: 3px 6px;
   width: fit-content;
+}
+
+#Modal-Loading-Style-Config {
+  .MuiBox-root {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 400;
+    background-color: white;
+    border: 2px solid #000;
+    box-shadow: 24;
+    p: 4;
+    text-align: center;
+  }
 }

django_project/frontend/src/pages/Admin/Style/Form/DynamicStyleConfig/Palette.jsx

@@ -38,6 +38,7 @@ export default function ColorPaletteStyleConfig(
     options = dynamicClassificationChoices
   }
 ) {
+  const classification = options.find(type => type.value === styleConfig.dynamic_classification)
   return <>
     <ColorPaletteSelector
       colorPalette={styleConfig.color_palette}
@@ -59,7 +60,7 @@ export default function ColorPaletteStyleConfig(
         <div className='RuleTable-Title'>Classification</div>
         <Select
           options={options}
-          value={options.find(type => type.value === styleConfig.dynamic_classification)}
+          value={classification ? classification : options.find(type => type.label === 'Equidistant')}
           name='dynamic_classification'
           onChange={evt => {
             styleConfig.dynamic_classification = evt.value