From 26d8b9d63046a24930ffb9d0dde96ecc02c5e441 Mon Sep 17 00:00:00 2001
From: Irwan Fathurrahman <meomancer@gmail.com>
Date: Fri, 1 Nov 2024 15:51:57 +0700
Subject: [PATCH] Multi references bug fixing (#316)

* Fix view selector for available layers

* Update centroid
---
 .../src/components/Input/Autocomplete.jsx     |  7 +++--
 .../index.jsx                                 | 23 +++++++++++-----
 .../pages/Admin/ModalSelector/GeorepoView.jsx | 27 ++++++++++++-------
 .../ModalSelector/InputSelector/index.js      |  4 ++-
 .../src/pages/Admin/ModalSelector/style.scss  | 19 ++++++++-----
 .../MapLibre/ReferenceLayerCentroid/index.jsx | 15 ++++++++---
 6 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/django_project/frontend/src/components/Input/Autocomplete.jsx b/django_project/frontend/src/components/Input/Autocomplete.jsx
index 95766ac49..ea88a6e0b 100644
--- a/django_project/frontend/src/components/Input/Autocomplete.jsx
+++ b/django_project/frontend/src/components/Input/Autocomplete.jsx
@@ -16,10 +16,13 @@
 import React from 'react';
 import ReactAutocomplete from '@mui/material/Autocomplete';
 import { ArrowDownwardIcon } from "../Icons";
+import { isArray } from "chart.js/helpers";
 
 export default function Autocomplete({ ...props }) {
-  if (props.value && !props.options.includes(props.value)) {
-    props.options.push(props.value)
+  if (!isArray((props.value))) {
+    if (props.value && !props.options.includes(props.value)) {
+      props.options.push(props.value)
+    }
   }
   return <ReactAutocomplete
     {...props}
diff --git a/django_project/frontend/src/pages/Admin/Components/Input/ReferenceLayerLevelConfiguration/index.jsx b/django_project/frontend/src/pages/Admin/Components/Input/ReferenceLayerLevelConfiguration/index.jsx
index 8d0e7ef03..912cacb60 100644
--- a/django_project/frontend/src/pages/Admin/Components/Input/ReferenceLayerLevelConfiguration/index.jsx
+++ b/django_project/frontend/src/pages/Admin/Components/Input/ReferenceLayerLevelConfiguration/index.jsx
@@ -59,9 +59,16 @@ export const ViewLevelConfiguration = forwardRef(
     useEffect(() => {
       if (datasetLevels) {
         let updated = false
-        let levels = data.levels ? data.levels : []
+
+        // Update levels
+        let levels = data.levels ? datasetLevels.filter(
+          datasetLevel => data.levels.includes(datasetLevel.level)
+        ).map(level => level.level) : [];
+
         let default_level = data.default_level ? data.default_level : 0
-        if (!data.levels) {
+
+        // Check levels is on the dataset levels
+        if (JSON.stringify(data.levels) !== JSON.stringify(levels)) {
           levels = datasetLevels.map(level => level.level)
           updated = true
         }
@@ -99,8 +106,10 @@ export const ViewLevelConfiguration = forwardRef(
         ableToSelectReferenceLayer ?
           <div className="ReferenceLayerLevelConfigurationView">
             <label className="form-label" htmlFor="group">View</label>
-            <Grid container spacing={2}
-                  className='ReferenceLayerLevelConfigurationCheckbox'>
+            <Grid
+              container spacing={2}
+              className='ReferenceLayerLevelConfigurationCheckbox'
+            >
               <Grid item>
                 <FormGroup>
                   <FormControlLabel
@@ -116,8 +125,10 @@ export const ViewLevelConfiguration = forwardRef(
                     label=''/>
                 </FormGroup>
               </Grid>
-              <Grid item
-                    className='ReferenceLayerLevelConfigurationViewSelector'>
+              <Grid
+                item
+                className='ReferenceLayerLevelConfigurationViewSelector'
+              >
                 <div className="BasicFormSection">
                   <div className='ReferenceDatasetSection'>
                     <GeorepoViewInputSelector
diff --git a/django_project/frontend/src/pages/Admin/ModalSelector/GeorepoView.jsx b/django_project/frontend/src/pages/Admin/ModalSelector/GeorepoView.jsx
index b96f3d9fc..040afd344 100644
--- a/django_project/frontend/src/pages/Admin/ModalSelector/GeorepoView.jsx
+++ b/django_project/frontend/src/pages/Admin/ModalSelector/GeorepoView.jsx
@@ -32,6 +32,9 @@ import { Session } from "../../../utils/Sessions";
 import './style.scss';
 
 
+const VALUE_REMOTE = 'Remote'
+const VALUE_LOCAL = 'Local'
+
 const columns = [
   { field: 'id', headerName: 'id', hide: true },
   { field: 'name', headerName: 'Name', flex: 1 },
@@ -62,7 +65,7 @@ export default function GeorepoViewSelector(
     otherContent = null
   }
 ) {
-  const [sourceType, setSourceType] = useState(localReferenceDatasetEnabled ? 'local' : 'remote')
+  const [sourceType, setSourceType] = useState(localReferenceDatasetEnabled ? VALUE_LOCAL : VALUE_REMOTE)
   const [inputData, setInputData] = useState(null)
 
   // This is for remote data
@@ -96,7 +99,7 @@ export default function GeorepoViewSelector(
   /** On references loaded */
   useEffect(
     () => {
-      if (sourceType === 'remote') {
+      if (sourceType === VALUE_REMOTE) {
         if (!reference && references[0]) {
           setReference(references[0].value)
         }
@@ -108,7 +111,7 @@ export default function GeorepoViewSelector(
   useEffect(
     () => {
       // Change to local module
-      if (sourceType === 'local') {
+      if (sourceType === VALUE_LOCAL) {
         setReference(LocalReferenceDatasetIdentifier)
       } else {
         if (references[0]) {
@@ -167,7 +170,8 @@ export default function GeorepoViewSelector(
       isMultiple={isMultiple}
       showSelected={showSelected}
       beforeChildren={
-        <>
+        <div
+          className={'ReferenceLayerSelector ' + (localReferenceDatasetEnabled ? 'localReferenceDatasetEnabled' : '')}>
           {
             localReferenceDatasetEnabled ?
               <FormControl className='RadioButtonControl'>
@@ -176,15 +180,20 @@ export default function GeorepoViewSelector(
                   onChange={evt => setSourceType(evt.target.value)}
                 >
                   <FormControlLabel
-                    value="local" control={<Radio/>} label="Local"/>
+                    control={<Radio/>}
+                    value={VALUE_LOCAL}
+                    label={VALUE_LOCAL}
+                  />
                   <FormControlLabel
-                    value="remote" control={<Radio/>} label="Remote"/>
+                    control={<Radio/>}
+                    value={VALUE_REMOTE}
+                    label={VALUE_REMOTE}/>
                 </RadioGroup>
               </FormControl> : null
           }
           {
-            !localReferenceDatasetEnabled || sourceType === 'remote' ?
-              <FormControl className='InputControl'>
+            !localReferenceDatasetEnabled || sourceType === VALUE_REMOTE ?
+              <FormControl className='InputControl DatasetSelector'>
                 <SelectWithList
                   placeholder={references ? 'Select dataset' : 'Loading'}
                   list={references}
@@ -195,7 +204,7 @@ export default function GeorepoViewSelector(
                 />
               </FormControl> : null
           }
-        </>
+        </div>
       }
     />
     {otherContent ? otherContent : null}
diff --git a/django_project/frontend/src/pages/Admin/ModalSelector/InputSelector/index.js b/django_project/frontend/src/pages/Admin/ModalSelector/InputSelector/index.js
index 18ce6c93f..15f5ecdf8 100644
--- a/django_project/frontend/src/pages/Admin/ModalSelector/InputSelector/index.js
+++ b/django_project/frontend/src/pages/Admin/ModalSelector/InputSelector/index.js
@@ -166,7 +166,9 @@ export function GeorepoViewInputSelector(
   }
 ) {
   return <ModalInputSelector
-    placeholder={'Select view ' + (isMultiple ? '(s)' : '')}
+    placeholder={
+      data[0] ? 'Loading' : 'Select view ' + (isMultiple ? '(s)' : '')
+    }
     data={data}
     setData={setData}
     isMultiple={isMultiple}
diff --git a/django_project/frontend/src/pages/Admin/ModalSelector/style.scss b/django_project/frontend/src/pages/Admin/ModalSelector/style.scss
index 9a4d86da7..de7aed93f 100644
--- a/django_project/frontend/src/pages/Admin/ModalSelector/style.scss
+++ b/django_project/frontend/src/pages/Admin/ModalSelector/style.scss
@@ -38,15 +38,20 @@
     }
   }
 
-  .RadioButtonControl {
-    background-color: unset !important;
+  .ReferenceLayerSelector {
+    &.localReferenceDatasetEnabled .DatasetSelector {
+      margin-top: 1rem !important;
+    }
+
+    .RadioButtonControl {
+      background-color: unset !important;
 
-    .MuiRadioGroup-root {
-      flex-direction: row;
-      margin-bottom: 1rem;
+      .MuiRadioGroup-root {
+        flex-direction: row;
 
-      label {
-        margin-left: 0;
+        label {
+          margin-left: 0;
+        }
       }
     }
   }
diff --git a/django_project/frontend/src/pages/Dashboard/MapLibre/ReferenceLayerCentroid/index.jsx b/django_project/frontend/src/pages/Dashboard/MapLibre/ReferenceLayerCentroid/index.jsx
index 220a15fcb..4cae91340 100644
--- a/django_project/frontend/src/pages/Dashboard/MapLibre/ReferenceLayerCentroid/index.jsx
+++ b/django_project/frontend/src/pages/Dashboard/MapLibre/ReferenceLayerCentroid/index.jsx
@@ -65,7 +65,6 @@ export default function ReferenceLayerCentroid({ map }) {
   const [geometries, setGeometries] = useState({});
 
   const where = returnWhere(filtersData ? filtersData : [])
-
   // When reference layer changed, fetch features
   useEffect(() => {
     const currGeometries = {}
@@ -142,8 +141,7 @@ export default function ReferenceLayerCentroid({ map }) {
     showIndicatorMapLabel
   ]);
 
-  // When everything changed
-  useEffect(() => {
+  const updateCentroid = () => {
     if (!map) {
       return;
     }
@@ -373,17 +371,26 @@ export default function ReferenceLayerCentroid({ map }) {
         renderLabel(map, [], labelConfig)
         return;
       }
+      const currRequest = new Date().getTime()
+      lastRequest = currRequest
+
       ExecuteWebWorker(
         worker, {
           geometriesData,
           mapGeometryValue,
           usedFilteredGeometries
         }, (features) => {
-          renderLabel(map, features, labelConfig)
+          if (currRequest === lastRequest) {
+            renderLabel(map, features, labelConfig)
+          }
         }
       )
     }
+  }
 
+  // When everything changed
+  useEffect(() => {
+    updateCentroid()
   }, [
     geometries, filteredGeometries, indicatorsData,
     indicatorShow, indicatorLayers,