Show empty state when final comparison plot is deselected (#2290)

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

Author: mattseddon

webview/src/plots/components/App.test.tsx

@@ -291,7 +291,46 @@ describe('App', () => {
     expect(screen.getByText(expectedSectionName)).toBeInTheDocument()
   })
 
-  it('should remove checkpoint plots given a message showing checkpoint plots as null', () => {
+  it('should remove image plots given a message showing image plots as null', async () => {
+    const emptyStateText = 'No Images to Compare'
+
+    renderAppWithOptionalData({
+      checkpoint: checkpointPlotsFixture,
+      comparison: comparisonTableFixture
+    })
+
+    expect(screen.queryByText(emptyStateText)).not.toBeInTheDocument()
+
+    sendSetDataMessage({
+      comparison: null
+    })
+
+    const emptyState = await screen.findByText(emptyStateText)
+
+    expect(emptyState).toBeInTheDocument()
+  })
+
+  it('should remove checkpoint plots given a message showing checkpoint plots as null', async () => {
+    const emptyStateText = 'No Plots to Display'
+
+    renderAppWithOptionalData({
+      checkpoint: checkpointPlotsFixture,
+      comparison: comparisonTableFixture,
+      template: templatePlotsFixture
+    })
+
+    expect(screen.queryByText(emptyStateText)).not.toBeInTheDocument()
+
+    sendSetDataMessage({
+      checkpoint: null
+    })
+
+    const emptyState = await screen.findByText(emptyStateText)
+
+    expect(emptyState).toBeInTheDocument()
+  })
+
+  it('should remove all sections from the document if there is no data provided', () => {
     renderAppWithOptionalData({
       checkpoint: checkpointPlotsFixture
     })

webview/src/plots/components/checkpointPlots/checkpointPlotsSlice.ts

@@ -40,20 +40,20 @@ export const checkpointPlotsSlice = createSlice({
       state.isCollapsed = action.payload
     },
     update: (state, action: PayloadAction<CheckpointPlotsData>) => {
-      if (action.payload) {
-        const { plots, ...statePayload } = action.payload
-        const plotsIds = plots?.map(plot => plot.title) || []
-        const snapShots = addCheckpointPlotsWithSnapshots(plots)
-        removeCheckpointPlots(plotsIds)
-        return {
-          ...state,
-          ...statePayload,
-          hasData: !!action.payload,
-          plotsIds: plots?.map(plot => plot.title) || [],
-          plotsSnapshots: snapShots
-        }
+      if (!action.payload) {
+        return checkpointPlotsInitialState
+      }
+      const { plots, ...statePayload } = action.payload
+      const plotsIds = plots?.map(plot => plot.title) || []
+      const snapShots = addCheckpointPlotsWithSnapshots(plots)
+      removeCheckpointPlots(plotsIds)
+      return {
+        ...state,
+        ...statePayload,
+        hasData: !!action.payload,
+        plotsIds: plots?.map(plot => plot.title) || [],
+        plotsSnapshots: snapShots
       }
-      return checkpointPlotsInitialState
     }
   }
 })

webview/src/plots/components/comparisonTable/comparisonTableSlice.ts

@@ -30,6 +30,9 @@ export const comparisonTableSlice = createSlice({
       state.isCollapsed = action.payload
     },
     update: (state, action: PayloadAction<PlotsComparisonData>) => {
+      if (!action.payload) {
+        return comparisonTableInitialState
+      }
       return {
         ...state,
         ...action.payload,