From f1d0b8904f698e43e8eb370188b7ad335182ed6c Mon Sep 17 00:00:00 2001
From: Jose Buitron <jose.buitron@gmail.com>
Date: Thu, 7 Sep 2023 12:11:41 -0500
Subject: [PATCH 1/4] fix: Draggable fixes

---
 .../VisualizationConfigForm/AnnotateStep.js   | 84 +++++++++++--------
 1 file changed, 51 insertions(+), 33 deletions(-)

diff --git a/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js b/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js
index 0ea61e58c..878ef4f32 100644
--- a/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js
+++ b/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js
@@ -82,6 +82,22 @@ const FORM_FIELDS = [
   },
 ];
 
+// Work around for react-beautiful-dnd issue. See: https://stackoverflow.com/a/75807063
+const StrictModeDroppable = ({ children, ...props }) => {
+  const [enabled, setEnabled] = useState(false);
+  useEffect(() => {
+    const animation = requestAnimationFrame(() => setEnabled(true));
+    return () => {
+      cancelAnimationFrame(animation);
+      setEnabled(false);
+    };
+  }, []);
+  if (!enabled) {
+    return null;
+  }
+  return <Droppable {...props}>{children}</Droppable>;
+};
+
 const DataPoints = props => {
   const { t } = useTranslation();
   const { value, onChange } = props.field;
@@ -167,7 +183,7 @@ const DataPoints = props => {
         onDragEnd={onDragEnd}
         onBeforeCapture={() => setDragging(true)}
       >
-        <Droppable droppableId="droppable-list">
+        <StrictModeDroppable droppableId="droppable-list">
           {provided => (
             <List
               aria-labelledby="data-points-description"
@@ -175,42 +191,44 @@ const DataPoints = props => {
               {...provided.droppableProps}
             >
               {dataPoints.map((dataPoint, index) => (
-                <Draggable
-                  key={dataPoint.column}
-                  draggableId={dataPoint.column}
-                  index={index}
-                >
-                  {(provided, snapshot) => (
-                    <ListItem
-                      ref={provided.innerRef}
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}
-                    >
-                      <ListItemAvatar>
-                        <DragHandleIcon />
-                      </ListItemAvatar>
-                      <OutlinedInput
-                        inputProps={{
-                          'aria-label': t(
-                            'sharedData.form_step_annotate_data_points_input_label',
-                            {
-                              index: index + 1,
-                            }
-                          ),
-                        }}
-                        fullWidth
-                        placeholder={dataPoint.column}
-                        value={dataPoint.label || ''}
-                        onChange={onLabelChange(index)}
-                      />
-                    </ListItem>
-                  )}
-                </Draggable>
+                <React.Fragment key={dataPoint.column}>
+                  <Draggable
+                    key={dataPoint.column}
+                    draggableId={dataPoint.column}
+                    index={index}
+                  >
+                    {(provided, snapshot) => (
+                      <ListItem
+                        ref={provided.innerRef}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                      >
+                        <ListItemAvatar>
+                          <DragHandleIcon />
+                        </ListItemAvatar>
+                        <OutlinedInput
+                          inputProps={{
+                            'aria-label': t(
+                              'sharedData.form_step_annotate_data_points_input_label',
+                              {
+                                index: index + 1,
+                              }
+                            ),
+                          }}
+                          fullWidth
+                          placeholder={dataPoint.column}
+                          value={dataPoint.label || ''}
+                          onChange={onLabelChange(index)}
+                        />
+                      </ListItem>
+                    )}
+                  </Draggable>
+                </React.Fragment>
               ))}
               {dragging && provided.placeholder}
             </List>
           )}
-        </Droppable>
+        </StrictModeDroppable>
       </DragDropContext>
     </>
   );

From 7ec5c24d3f1b6f442fedbd36be777e54d1214e02 Mon Sep 17 00:00:00 2001
From: Jose Buitron <jose.buitron@gmail.com>
Date: Thu, 7 Sep 2023 12:33:46 -0500
Subject: [PATCH 2/4] fix: Only add popup if not opened

---
 src/sharedData/visualization/components/Visualization.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/sharedData/visualization/components/Visualization.js b/src/sharedData/visualization/components/Visualization.js
index 96ed1e3cd..aa783e203 100644
--- a/src/sharedData/visualization/components/Visualization.js
+++ b/src/sharedData/visualization/components/Visualization.js
@@ -278,7 +278,10 @@ const MapboxLayer = props => {
     if (!map || !popupData?.coordinates) {
       return;
     }
-    popup.setLngLat(popupData?.coordinates).addTo(map);
+    popup.setLngLat(popupData?.coordinates);
+    if (!popup.isOpen()) {
+      popup.addTo(map);
+    }
   }, [popup, popupData?.coordinates, map]);
 
   useEffect(() => {

From 8c20e36646648912f8446ca845968d9139ac189d Mon Sep 17 00:00:00 2001
From: Jose Buitron <jose.buitron@gmail.com>
Date: Thu, 7 Sep 2023 16:03:05 -0500
Subject: [PATCH 3/4] fix: added missing function to popup test

---
 .../components/LandscapeSharedDataVisualization.test.js          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/landscape/components/LandscapeSharedDataVisualization.test.js b/src/landscape/components/LandscapeSharedDataVisualization.test.js
index 3d16b72e5..ad55c6798 100644
--- a/src/landscape/components/LandscapeSharedDataVisualization.test.js
+++ b/src/landscape/components/LandscapeSharedDataVisualization.test.js
@@ -75,6 +75,7 @@ test('LandscapeSharedDataVisualization: Display visualization', async () => {
     setDOMContent: jest.fn().mockReturnThis(),
     addTo: jest.fn().mockReturnThis(),
     remove: jest.fn(),
+    isOpen: jest.fn(),
   };
   mapboxgl.Popup.mockReturnValue(Popup);
   const events = {};

From 208c02faec1a29bf52016a4590d59fc7ef6b7855 Mon Sep 17 00:00:00 2001
From: Jose Buitron <jose.buitron@gmail.com>
Date: Fri, 8 Sep 2023 11:03:20 -0500
Subject: [PATCH 4/4] fix: Added more deatils for drag and drop issue

---
 .../components/VisualizationConfigForm/AnnotateStep.js     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js b/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js
index 878ef4f32..a3b165eb8 100644
--- a/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js
+++ b/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js
@@ -82,7 +82,12 @@ const FORM_FIELDS = [
   },
 ];
 
-// Work around for react-beautiful-dnd issue. See: https://stackoverflow.com/a/75807063
+// Work around for react-beautiful-dnd issue. The issues is that the
+// Droppable component is not compatible with React.StrictMode.
+// StricMode is used in the development environment by default.
+// See:
+// - https://stackoverflow.com/a/75807063
+// - https://github.com/atlassian/react-beautiful-dnd/issues/2396
 const StrictModeDroppable = ({ children, ...props }) => {
   const [enabled, setEnabled] = useState(false);
   useEffect(() => {