diff --git a/webview/src/plots/components/App.test.tsx b/webview/src/plots/components/App.test.tsx index d60ebc27db..c18d5adf24 100644 --- a/webview/src/plots/components/App.test.tsx +++ b/webview/src/plots/components/App.test.tsx @@ -1788,6 +1788,50 @@ describe('App', () => { expect(multiImgRow.draggable).toBe(true) }) + + it('should handle when a revision contains less images than before', () => { + renderAppWithOptionalData({ + comparison: comparisonTableFixture + }) + + const mainImgs = comparisonTableFixture.plots[3].revisions.main.imgs + + const multiImgPlots = screen.getAllByTestId('multi-image-cell') + const slider = within(multiImgPlots[1]).getByRole('slider') + + fireEvent.change(slider, { target: { value: 14 } }) + + expect(within(multiImgPlots[1]).getByRole('img')).toHaveAttribute( + 'src', + mainImgs[14].url + ) + + const dataWithLessMainImages = { + comparison: { + ...comparisonTableFixture, + plots: comparisonTableFixture.plots.map(plot => + plot.path.includes('image') + ? { + ...plot, + revisions: { + ...plot.revisions, + main: { + ...plot.revisions.main, + imgs: plot.revisions.main.imgs.slice(0, 7) + } + } + } + : plot + ) + } + } + + sendSetDataMessage(dataWithLessMainImages) + + expect( + within(multiImgPlots[1]).queryByRole('img') + ).not.toBeInTheDocument() + }) }) describe('Virtualization', () => { diff --git a/webview/src/plots/components/comparisonTable/cell/ComparisonTableMultiCell.tsx b/webview/src/plots/components/comparisonTable/cell/ComparisonTableMultiCell.tsx index 5700b39505..154fcec924 100644 --- a/webview/src/plots/components/comparisonTable/cell/ComparisonTableMultiCell.tsx +++ b/webview/src/plots/components/comparisonTable/cell/ComparisonTableMultiCell.tsx @@ -24,7 +24,16 @@ export const ComparisonTableMultiCell: React.FC<{ <div data-testid="multi-image-cell" className={styles.multiImageWrapper}> <ComparisonTableCell path={path} - plot={{ id: plot.id, imgs: [plot.imgs[currentStep]] }} + plot={{ + id: plot.id, + imgs: [ + plot.imgs[currentStep] || { + errors: undefined, + loading: false, + url: undefined + } + ] + }} imgAlt={`${currentStep} of ${path} (${plot.id})`} /> <div