Handle missing items in drag and drop container

iterative · Nov 30, 2023 · ac060c7 · ac060c7
1 parent 935a4c2
commit ac060c7
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 26 deletions.
diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableRows.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableRows.tsx
@@ -37,31 +37,33 @@ export const ComparisonTableRows: React.FC<ComparisonTableRowsProps> = ({
     dispatch(changeRowHeight(firstRowHeight))
   }
 
-  const rows = rowsOrder.map((path, i) => {
-    const plot = plots.find(p => p.path === path)
-    if (!plot) {
-      return
-    }
-    const revs = plot.revisions
-    return (
-      <tbody
-        data-testid="comparison-table-body"
-        key={path}
-        id={path}
-        ref={i === 0 ? firstRowRef : undefined}
-      >
-        <ComparisonTableRow
-          path={path}
-          plots={columns.map(column => ({
-            id: column.id,
-            imgs: revs[column.id]?.imgs
-          }))}
-          nbColumns={columns.length}
-          pinnedColumn={pinnedColumn}
-        />
-      </tbody>
-    )
-  })
+  const rows = rowsOrder
+    .map((path, i) => {
+      const plot = plots.find(p => p.path === path)
+      if (!plot) {
+        return
+      }
+      const revs = plot.revisions
+      return (
+        <tbody
+          data-testid="comparison-table-body"
+          key={path}
+          id={path}
+          ref={i === 0 ? firstRowRef : undefined}
+        >
+          <ComparisonTableRow
+            path={path}
+            plots={columns.map(column => ({
+              id: column.id,
+              imgs: revs[column.id]?.imgs
+            }))}
+            nbColumns={columns.length}
+            pinnedColumn={pinnedColumn}
+          />
+        </tbody>
+      )
+    })
+    .filter(Boolean) as JSX.Element[]
 
   const changeRowsOrder = (order: string[]) => {
     setRowsOrder(order)
@@ -70,7 +72,7 @@ export const ComparisonTableRows: React.FC<ComparisonTableRowsProps> = ({
 
   return (
     <DragDropContainer
-      items={rows as JSX.Element[]}
+      items={rows}
       order={rowsOrder}
       setOrder={changeRowsOrder}
       group="comparison-table"

diff --git a/webview/src/shared/components/dragDrop/DragDropContainer.tsx b/webview/src/shared/components/dragDrop/DragDropContainer.tsx
@@ -297,6 +297,9 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
 
   const wrappedItems = items
     .map(draggable => {
+      if (!draggable) {
+        return
+      }
       const id = draggable.props.id
       const isDraggedOver =
         id === draggedOverId && (hoveringSomething || !parentDraggedOver)