Updates COG rendering (#319)

* Fix COG onreview by refresh not rendering * Bump commit version
unicef-drp · Nov 13, 2024 · ed66fc9 · ed66fc9
1 parent 6c2073b
commit ed66fc9
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 33 deletions.
diff --git a/django_project/_commit_hash.txt b/django_project/_commit_hash.txt
@@ -1 +1 @@
-0b044429cb4fda6ef2939f5e8ea987f83ae429fc
+24aac4bc3175037479ab01decf2b01e9f0e5e42e
diff --git a/django_project/frontend/src/components/Input/ColorPaletteSelector/index.jsx b/django_project/frontend/src/components/Input/ColorPaletteSelector/index.jsx
@@ -15,14 +15,13 @@
 
 import React, { useEffect, useState } from 'react';
 import { SelectWithList } from "../SelectWithList";
-import { fetchingData } from "../../../Requests";
 import Grid from "@mui/material/Grid";
 import Checkbox from "@mui/material/Checkbox";
-
-import './style.scss';
 import { dictDeepCopy } from "../../../utils/main";
 import { updateColorPaletteData } from "../../../utils/Style";
 
+import './style.scss';
+
 /**
  * Color Palette Selector
  * @param colorPalette Color palette value
@@ -38,23 +37,16 @@ export default function ColorPaletteSelector(
 ) {
   const [colorPalettes, setColorPalettes] = useState([]);
 
-
   // On init
   useEffect(() => {
     (
       async () => {
-        await fetchingData(
-          `/api/color/palette/list`,
-          {}, {}, (response, error) => {
-            if (response) {
-              updateColorPaletteData(response)
-              setColorPalettes(response);
-              if (!colorPalette) {
-                onChange(preferences.default_color_palette ? preferences.default_color_palette : response[0]?.id)
-              }
-            }
+        await updateColorPaletteData().then(response => {
+          setColorPalettes(response);
+          if (!colorPalette) {
+            onChange(preferences.default_color_palette ? preferences.default_color_palette : response[0]?.id)
           }
-        )
+        })
       }
     )()
   }, [])

diff --git a/django_project/frontend/src/pages/Admin/ContextLayer/StyleConfig/Map.jsx b/django_project/frontend/src/pages/Admin/ContextLayer/StyleConfig/Map.jsx
@@ -30,6 +30,7 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 // Initialize cog
 import { cogProtocol } from "@geomatico/maplibre-cog-protocol";
 import { Variables } from "../../../../utils/Variables";
+import { updateColorPaletteData } from "../../../../utils/Style";
 
 maplibregl.addProtocol('cog', cogProtocol);
 
@@ -94,10 +95,18 @@ export default function MapConfig({ data, layerInput }) {
   useEffect(() => {
     if (map) {
       const id = data.id ? `context-layer-${data.id}` : 'context-layer'
-      if ([Variables.LAYER.TYPE.RASTER_COG].includes(data.layer_type)) {
-        removeLayer(map, id)
+      if (Variables.LAYER.LIST.LAYERS_NEED_PALETTE.includes(data.layer_type)) {
+        removeLayer(map, id);
+        // Await color palette
+        (
+          async () => {
+            await updateColorPaletteData()
+            contextLayerRendering(id, data, layerInput, map)
+          }
+        )()
+      } else {
+        contextLayerRendering(id, data, layerInput, map)
       }
-      contextLayerRendering(id, data, layerInput, map)
     }
   }, [map, layerInput]);
 

diff --git a/django_project/frontend/src/store/dashboard/reducers/dashboard/actions.jsx b/django_project/frontend/src/store/dashboard/reducers/dashboard/actions.jsx
@@ -131,16 +131,12 @@ function receive(data, error = null) {
  */
 export function fetch(dispatch) {
   fetchingData(
-    urls.dashboardData, {}, {}, function (response, error) {
-      fetchingData(
-        // Fetch palette color first
-        `/api/color/palette/list`,
-        {}, {}, (palettes, paletteError) => {
-          updateColorPaletteData(palettes)
-          const recError = !error && paletteError ? paletteError : error
-          dispatch(receive(response, recError))
-        }
-      )
+    urls.dashboardData, {}, {}, async function (response, error) {
+      await updateColorPaletteData().then(palettes => {
+        dispatch(receive(response, null))
+      }).catch(error => {
+        dispatch(receive(response, error))
+      })
     }
   )
   return request();

diff --git a/django_project/frontend/src/utils/Style.js b/django_project/frontend/src/utils/Style.js
@@ -16,6 +16,7 @@ import { isArray } from "chart.js/helpers";
 import { dictDeepCopy } from "./main";
 import { NO_DATA_RULE } from "../pages/Admin/Style/Form/StyleRules";
 import { getLayerDataCleaned, SingleIndicatorTypes } from "./indicatorLayer";
+import { fetchingData } from "../Requests";
 
 
 export const STYLE_FORM_LIBRARY = 'Style from library.'
@@ -38,10 +39,25 @@ export let COLOR_PALETTE_DATA = null
 
 /**
  * Update color data
- * @param data
  */
-export function updateColorPaletteData(data) {
-  COLOR_PALETTE_DATA = data
+export async function updateColorPaletteData() {
+  return new Promise((resolve, reject) => {
+    if (!COLOR_PALETTE_DATA) {
+      fetchingData(
+        `/api/color/palette/list`,
+        {}, {}, (response, error) => {
+          if (response) {
+            COLOR_PALETTE_DATA = response
+            resolve(response)
+          } else {
+            reject(error)
+          }
+        }
+      )
+    } else {
+      resolve(COLOR_PALETTE_DATA)
+    }
+  });
 }
 
 /** Return layer style config */

diff --git a/django_project/frontend/src/utils/Variables.jsx b/django_project/frontend/src/utils/Variables.jsx
@@ -35,7 +35,8 @@ export const Variables = {
     LIST: {
       VECTOR_TILE_TYPES: [RELATED_TABLE, VECTOR_TILE, CLOUD_NATIVE_GIS],
       RASTER_TYPES: [RASTER_COG, RASTER_TILE],
-      OVERRIDE_STYLES: [ARCGIS]
+      OVERRIDE_STYLES: [ARCGIS],
+      LAYERS_NEED_PALETTE: [RASTER_COG],
     }
   }
 }