fix: Data map annotate step fixes (#1166)

techmatters · Sep 8, 2023 · 9c5c70d · 9c5c70d
1 parent 1825d05
commit 9c5c70d
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 34 deletions.
diff --git 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 = {};

diff --git 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(() => {

diff --git a/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js b/src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js
@@ -82,6 +82,27 @@ const FORM_FIELDS = [
   },
 ];
 
+// 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(() => {
+    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,50 +188,52 @@ const DataPoints = props => {
         onDragEnd={onDragEnd}
         onBeforeCapture={() => setDragging(true)}
       >
-        <Droppable droppableId="droppable-list">
+        <StrictModeDroppable droppableId="droppable-list">
           {provided => (
             <List
               aria-labelledby="data-points-description"
               ref={provided.innerRef}
               {...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>
     </>
   );