Handle missing items in drag and drop container (#5054)

Co-authored-by: Stephanie Roy <[email protected]>

Author: mattseddon

webview/src/plots/components/comparisonTable/ComparisonTable.test.tsx

@@ -388,6 +388,25 @@ describe('ComparisonTable', () => {
     expect(aHeader.style.top).not.toBe('')
   })
 
+  it('should not throw an error when an image is removed from the data', () => {
+    const { rerender } = renderTable()
+
+    const plotsWithMissingImage = comparisonTableFixture.plots.slice(1)
+    expect(plotsWithMissingImage.length).toStrictEqual(
+      comparisonTableFixture.plots.length - 1
+    )
+
+    expect(() =>
+      renderTable(
+        {
+          ...comparisonTableFixture,
+          plots: plotsWithMissingImage
+        },
+        rerender
+      )
+    ).not.toThrow()
+  })
+
   describe('Columns drag and drop', () => {
     const pinSecondColumn = () => {
       const secondColumn = getPin(screen.getByText(revisions[1]))

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"

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)