Fix plots get started screen (#3382)

Author: julieg18

extension/src/plots/model/index.ts

@@ -200,9 +200,14 @@ export class PlotsModel extends ModelWithPersistence {
   }
 
   public recreateCustomPlots() {
+    const experiments = this.experiments.getExperiments()
+    if (experiments.length === 0) {
+      this.customPlots = undefined
+      return
+    }
     const customPlots: CustomPlotData[] = collectCustomPlotsData(
       this.getCustomPlotsOrder(),
-      this.experiments.getExperiments()
+      experiments
     )
     this.customPlots = customPlots
   }

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

@@ -378,21 +378,18 @@ describe('App', () => {
     expect(screen.getAllByText('No Plots to Display')).toHaveLength(2)
   })
 
-  it('should render other sections given a message with only custom plots data', () => {
+  it('should render an empty state given a message with only custom plots data', () => {
     renderAppWithOptionalData({
       custom: customPlotsFixture
     })
 
     expect(screen.queryByText('Loading Plots...')).not.toBeInTheDocument()
-    expect(screen.getByText('Trends')).toBeInTheDocument()
-    expect(screen.getByText('Data Series')).toBeInTheDocument()
-    expect(screen.getByText('Images')).toBeInTheDocument()
-    expect(screen.getByText('Custom')).toBeInTheDocument()
-    expect(screen.getAllByText('No Plots to Display')).toHaveLength(2)
-    expect(screen.getByText('No Images to Compare')).toBeInTheDocument()
+    const addExperimentsButton = screen.queryByText('Add Experiments')
+
+    expect(addExperimentsButton).toBeInTheDocument()
   })
 
-  it('should render custom even when there is no custom plots data', () => {
+  it('should render custom with "No Plots to Display" message when there is no custom plots data', () => {
     renderAppWithOptionalData({
       comparison: comparisonTableFixture
     })
@@ -402,6 +399,21 @@ describe('App', () => {
     expect(screen.getAllByText('No Plots to Display')).toHaveLength(3)
   })
 
+  it('should render custom with "No Plots Added" message when there are no plots added', () => {
+    renderAppWithOptionalData({
+      comparison: comparisonTableFixture,
+      custom: {
+        ...customPlotsFixture,
+        plots: []
+      }
+    })
+
+    expect(screen.queryByText('Loading Plots...')).not.toBeInTheDocument()
+    expect(screen.getByText('Custom')).toBeInTheDocument()
+    expect(screen.getAllByText('No Plots to Display')).toHaveLength(2)
+    expect(screen.getByText('No Plots Added')).toBeInTheDocument()
+  })
+
   it('should render the comparison table when given a message with comparison plots data', () => {
     const expectedSectionName = 'Images'
 
@@ -837,6 +849,7 @@ describe('App', () => {
 
   it('should add a custom plot if a user creates a custom plot', () => {
     renderAppWithOptionalData({
+      comparison: comparisonTableFixture,
       custom: {
         ...customPlotsFixture,
         plots: customPlotsFixture.plots.slice(1)
@@ -863,6 +876,7 @@ describe('App', () => {
 
   it('should remove a custom plot if a user deletes a custom plot', () => {
     renderAppWithOptionalData({
+      comparison: comparisonTableFixture,
       custom: customPlotsFixture
     })
 

webview/src/plots/components/GetStarted.tsx

@@ -5,7 +5,6 @@ import { StartButton } from '../../shared/components/button/StartButton'
 
 export type AddPlotsProps = {
   hasUnselectedPlots: boolean
-  hasSelectedRevisions: boolean
 }
 
 export const AddPlots: React.FC<AddPlotsProps> = ({
@@ -14,16 +13,14 @@ export const AddPlots: React.FC<AddPlotsProps> = ({
   <div>
     <p>No Plots to Display.</p>
     <div>
-      {
-        <StartButton
-          onClick={() =>
-            sendMessage({
-              type: MessageFromWebviewType.SELECT_EXPERIMENTS
-            })
-          }
-          text="Add Experiments"
-        />
-      }
+      <StartButton
+        onClick={() =>
+          sendMessage({
+            type: MessageFromWebviewType.SELECT_EXPERIMENTS
+          })
+        }
+        text="Add Experiments"
+      />
       {hasUnselectedPlots && (
         <StartButton
           isNested={hasUnselectedPlots}

webview/src/plots/components/Plots.tsx

@@ -17,13 +17,9 @@ import { PlotsState } from '../store'
 // eslint-disable-next-line sonarjs/cognitive-complexity
 const PlotsContent = () => {
   const dispatch = useDispatch()
-  const {
-    hasData,
-    hasPlots,
-    hasUnselectedPlots,
-    selectedRevisions,
-    zoomedInPlot
-  } = useSelector((state: PlotsState) => state.webview)
+  const { hasData, hasPlots, hasUnselectedPlots, zoomedInPlot } = useSelector(
+    (state: PlotsState) => state.webview
+  )
   const hasCheckpointData = useSelector(
     (state: PlotsState) => state.checkpoint.hasData
   )
@@ -33,7 +29,6 @@ const PlotsContent = () => {
   const hasTemplateData = useSelector(
     (state: PlotsState) => state.template.hasData
   )
-  const hasCustomData = useSelector((state: PlotsState) => state.custom.hasData)
   const wrapperRef = createRef<HTMLDivElement>()
 
   useLayoutEffect(() => {
@@ -54,20 +49,10 @@ const PlotsContent = () => {
     return <EmptyState>Loading Plots...</EmptyState>
   }
 
-  if (
-    !hasCheckpointData &&
-    !hasComparisonData &&
-    !hasTemplateData &&
-    !hasCustomData
-  ) {
+  if (!hasCheckpointData && !hasComparisonData && !hasTemplateData) {
     return (
       <GetStarted
-        addItems={
-          <AddPlots
-            hasUnselectedPlots={hasUnselectedPlots}
-            hasSelectedRevisions={!!selectedRevisions?.length}
-          />
-        }
+        addItems={<AddPlots hasUnselectedPlots={hasUnselectedPlots} />}
         showEmpty={!hasPlots}
         welcome={<Welcome />}
       />

webview/src/plots/components/customPlots/CustomPlots.tsx

@@ -47,6 +47,10 @@ export const CustomPlots: React.FC<CustomPlotsProps> = ({ plotsIds }) => {
     return <EmptyState isFullScreen={false}>No Plots to Display</EmptyState>
   }
 
+  if (order.length === 0) {
+    return <EmptyState isFullScreen={false}>No Plots Added</EmptyState>
+  }
+
   const items = order.map(plot => (
     <div key={plot} id={plot}>
       <CustomPlot id={plot} />
@@ -66,8 +70,7 @@ export const CustomPlots: React.FC<CustomPlotsProps> = ({ plotsIds }) => {
   const handleDropAtTheEnd = () => {
     setPlotsIdsOrder(changeOrderWithDraggedInfo(order, draggedRef))
   }
-
-  return items.length > 0 ? (
+  return (
     <div
       data-testid="custom-plots"
       id="custom-plots"
@@ -97,7 +100,5 @@ export const CustomPlots: React.FC<CustomPlotsProps> = ({ plotsIds }) => {
         parentDraggedOver={onSection}
       />
     </div>
-  ) : (
-    <EmptyState isFullScreen={false}>No Plots Added</EmptyState>
   )
 }