Show "Custom" section in "Get Started" screen

extension/src/plots/model/index.ts

@@ -17,7 +17,8 @@ import { getRevisionFirstThreeColumns } from './util'
 import {
   checkForCustomPlotOptions,
   cleanupOldOrderValue,
-  CustomPlotsOrderValue
+  CustomPlotsOrderValue,
+  isCheckpointValue
 } from './custom'
 import {
   CheckpointPlot,
@@ -175,12 +176,21 @@ export class PlotsModel extends ModelWithPersistence {
       return
     }
 
+    const orderHasCheckpointPlots = plotsOrderValues.some(({ type }) =>
+      isCheckpointValue(type)
+    )
+    const plotsHaveCheckpointPlots = plots.some(({ type }) =>
+      isCheckpointValue(type)
+    )
+
     return {
       colors,
       enablePlotCreation: checkForCustomPlotOptions(
         this.experiments.getColumnTerminalNodes(),
         plotsOrderValues
       ),
+      hasMissingCheckpointData:
+        orderHasCheckpointPlots && !plotsHaveCheckpointPlots,
       height,
       nbItemsPerRow,
       plots

extension/src/plots/webview/contract.ts

@@ -118,6 +118,7 @@ export type CustomPlotsData = {
   nbItemsPerRow: number
   colors: ColorScale | undefined
   enablePlotCreation: boolean
+  hasMissingCheckpointData: boolean
   height: PlotHeight
 }
 

extension/src/test/fixtures/expShow/base/customPlots.ts

@@ -205,6 +205,7 @@ const data: CustomPlotsData = {
     range: [colors[2], colors[3], colors[4]]
   },
   enablePlotCreation: true,
+  hasMissingCheckpointData: false,
   plots: [
     {
       id: 'custom-summary.json:loss-params.yaml:dropout',

extension/src/test/suite/experiments/model/tree.test.ts

@@ -120,6 +120,7 @@ suite('Experiments Tree Test Suite', () => {
         custom: {
           ...customPlotsFixture,
           colors: undefined,
+          hasMissingCheckpointData: true,
           plots: customPlotsFixture.plots.filter(
             plot => plot.type !== CustomPlotType.CHECKPOINT
           )

extension/src/test/suite/plots/util.ts

@@ -144,6 +144,7 @@ export const getExpectedCustomPlotsData = (
         range
       },
       enablePlotCreation,
+      hasMissingCheckpointData: false,
       height,
       nbItemsPerRow,
       plots: plots.map(plot => ({

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

@@ -334,14 +334,14 @@ describe('App', () => {
     })
   })
 
-  it('should render an empty state given a message with only custom plots data', () => {
+  it('should render get started along with custom plots given a message with only custom plots data', () => {
     renderAppWithOptionalData({
       custom: customPlotsFixture
     })
 
     expect(screen.queryByText('Loading Plots...')).not.toBeInTheDocument()
     const addExperimentsButton = screen.queryByText('Add Experiments')
-
+    expect(screen.getByText('Custom')).toBeInTheDocument()
     expect(addExperimentsButton).toBeInTheDocument()
   })
 
@@ -358,19 +358,36 @@ describe('App', () => {
 
   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.queryByText('No Plots to Display')).not.toBeInTheDocument()
     expect(screen.getByText('Custom')).toBeInTheDocument()
-    expect(screen.getByText('No Plots to Display')).toBeInTheDocument()
     expect(screen.getByText('No Plots Added')).toBeInTheDocument()
   })
 
+  it('should render custom with a message when there are no selected experiments', () => {
+    renderAppWithOptionalData({
+      custom: {
+        ...customPlotsFixture,
+        hasMissingCheckpointData: true
+      }
+    })
+
+    expect(screen.queryByText('Loading Plots...')).not.toBeInTheDocument()
+    expect(screen.queryByText('No Plots to Display')).not.toBeInTheDocument()
+    expect(screen.getByText('Custom')).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        'Select a checkpoint experiment to display checkpoint trend plots.'
+      )
+    ).toBeInTheDocument()
+  })
+
   it('should render the comparison table when given a message with comparison plots data', () => {
     const expectedSectionName = 'Images'
 
@@ -404,24 +421,18 @@ describe('App', () => {
     expect(emptyState).toBeInTheDocument()
   })
 
-  it('should remove custom plots given a message showing custom plots as null', async () => {
-    const emptyStateText = 'No Plots to Display'
-
+  it('should remove custom plots given a message showing custom plots as null', () => {
     renderAppWithOptionalData({
-      comparison: comparisonTableFixture,
-      custom: customPlotsFixture,
-      template: templatePlotsFixture
+      custom: customPlotsFixture
     })
 
-    expect(screen.queryByText(emptyStateText)).not.toBeInTheDocument()
+    expect(screen.getByText('Custom')).toBeInTheDocument()
 
     sendSetDataMessage({
       custom: null
     })
 
-    const emptyState = await screen.findByText(emptyStateText)
-
-    expect(emptyState).toBeInTheDocument()
+    expect(screen.queryByText('Custom')).not.toBeInTheDocument()
   })
 
   it('should remove all sections from the document if there is no data provided', () => {
@@ -440,7 +451,6 @@ describe('App', () => {
 
   it('should toggle the custom plots section in state when its header is clicked', async () => {
     renderAppWithOptionalData({
-      comparison: comparisonTableFixture,
       custom: customPlotsFixture
     })
 
@@ -475,7 +485,6 @@ describe('App', () => {
 
   it('should not toggle the custom plots section when its header is clicked and its title is selected', async () => {
     renderAppWithOptionalData({
-      comparison: comparisonTableFixture,
       custom: customPlotsFixture
     })
 
@@ -542,7 +551,6 @@ describe('App', () => {
 
   it('should not toggle the custom plots section when its header is clicked and the content of its tooltip is selected', async () => {
     renderAppWithOptionalData({
-      comparison: comparisonTableFixture,
       custom: customPlotsFixture
     })
 
@@ -597,12 +605,11 @@ describe('App', () => {
 
   it('should display a slider to pick the number of items per row if there are items and the action is available', () => {
     const store = renderAppWithOptionalData({
-      comparison: comparisonTableFixture,
       custom: customPlotsFixture
     })
     setWrapperSize(store)
 
-    expect(screen.getAllByTestId('size-sliders')[1]).toBeInTheDocument()
+    expect(screen.getByTestId('size-sliders')).toBeInTheDocument()
   })
 
   it('should not display a slider to pick the number of items per row if there are no items', () => {
@@ -614,7 +621,6 @@ describe('App', () => {
 
   it('should not display a slider to pick the number of items per row if the only width available for one item per row or less', () => {
     const store = renderAppWithOptionalData({
-      comparison: comparisonTableFixture,
       custom: customPlotsFixture
     })
     setWrapperSize(store, 400)
@@ -637,13 +643,12 @@ describe('App', () => {
 
   it('should display both size sliders for custom plots', () => {
     const store = renderAppWithOptionalData({
-      custom: customPlotsFixture,
-      template: templatePlotsFixture
+      custom: customPlotsFixture
     })
     setWrapperSize(store)
 
     const plotResizers = within(
-      screen.getAllByTestId('size-sliders')[1]
+      screen.getByTestId('size-sliders')
     ).getAllByRole('slider')
 
     expect(plotResizers.length).toBe(2)
@@ -664,14 +669,13 @@ describe('App', () => {
 
   it('should send a message to the extension with the selected size when changing the width of plots', () => {
     const store = renderAppWithOptionalData({
-      comparison: comparisonTableFixture,
       custom: customPlotsFixture
     })
     setWrapperSize(store)
 
-    const plotResizer = within(
-      screen.getAllByTestId('size-sliders')[1]
-    ).getAllByRole('slider')[0]
+    const plotResizer = within(screen.getByTestId('size-sliders')).getAllByRole(
+      'slider'
+    )[0]
 
     fireEvent.change(plotResizer, { target: { value: -3 } })
     expect(mockPostMessage).toHaveBeenCalledWith({
@@ -686,14 +690,13 @@ describe('App', () => {
 
   it('should send a message to the extension with the selected size when changing the height of plots', () => {
     const store = renderAppWithOptionalData({
-      comparison: comparisonTableFixture,
       custom: customPlotsFixture
     })
     setWrapperSize(store)
 
-    const plotResizer = within(
-      screen.getAllByTestId('size-sliders')[1]
-    ).getAllByRole('slider')[1]
+    const plotResizer = within(screen.getByTestId('size-sliders')).getAllByRole(
+      'slider'
+    )[1]
 
     fireEvent.change(plotResizer, { target: { value: 3 } })
     expect(mockPostMessage).toHaveBeenCalledWith({
@@ -735,7 +738,6 @@ describe('App', () => {
 
   it('should send a message to the extension when the custom plots are reordered', () => {
     renderAppWithOptionalData({
-      comparison: comparisonTableFixture,
       custom: customPlotsFixture
     })
 
@@ -770,7 +772,6 @@ describe('App', () => {
 
   it('should add a custom plot if a user creates a custom plot', () => {
     renderAppWithOptionalData({
-      comparison: comparisonTableFixture,
       custom: {
         ...customPlotsFixture,
         plots: customPlotsFixture.plots.slice(0, 3)
@@ -801,7 +802,6 @@ describe('App', () => {
 
   it('should remove a custom plot if a user deletes a custom plot', () => {
     renderAppWithOptionalData({
-      comparison: comparisonTableFixture,
       custom: customPlotsFixture
     })
 
@@ -1315,7 +1315,6 @@ describe('App', () => {
 
   it('should open a modal with the plot zoomed in when clicking a custom plot', () => {
     renderAppWithOptionalData({
-      comparison: comparisonTableFixture,
       custom: customPlotsFixture
     })
 
@@ -1452,7 +1451,7 @@ describe('App', () => {
     describe('Large plots', () => {
       it('should  wrap the custom plots in a big grid (virtualize them) when there are more than eight large plots', async () => {
         await renderAppAndChangeSize(
-          { comparison: comparisonTableFixture, custom: createCustomPlots(9) },
+          { custom: createCustomPlots(9) },
           1,
           PlotsSection.CUSTOM_PLOTS
         )
@@ -1470,7 +1469,7 @@ describe('App', () => {
 
       it('should not wrap the custom plots in a big grid (virtualize them) when there are eight or fewer large plots', async () => {
         await renderAppAndChangeSize(
-          { comparison: comparisonTableFixture, custom: createCustomPlots(8) },
+          { custom: createCustomPlots(8) },
           1,
           PlotsSection.CUSTOM_PLOTS
         )
@@ -1579,7 +1578,7 @@ describe('App', () => {
     describe('Regular plots', () => {
       it('should  wrap the custom plots in a big grid (virtualize them) when there are more than fourteen regular plots', async () => {
         await renderAppAndChangeSize(
-          { comparison: comparisonTableFixture, custom: createCustomPlots(15) },
+          { custom: createCustomPlots(15) },
           DEFAULT_NB_ITEMS_PER_ROW,
           PlotsSection.CUSTOM_PLOTS
         )
@@ -1589,7 +1588,7 @@ describe('App', () => {
 
       it('should not wrap the custom plots in a big grid (virtualize them) when there are fourteen regular plots', async () => {
         await renderAppAndChangeSize(
-          { comparison: comparisonTableFixture, custom: createCustomPlots(14) },
+          { custom: createCustomPlots(14) },
           DEFAULT_NB_ITEMS_PER_ROW,
           PlotsSection.CUSTOM_PLOTS
         )
@@ -1676,7 +1675,7 @@ describe('App', () => {
     describe('Smaller plots', () => {
       it('should  wrap the custom plots in a big grid (virtualize them) when there are more than twenty small plots', async () => {
         await renderAppAndChangeSize(
-          { comparison: comparisonTableFixture, custom: createCustomPlots(21) },
+          { custom: createCustomPlots(21) },
           4,
           PlotsSection.CUSTOM_PLOTS
         )
@@ -1686,7 +1685,7 @@ describe('App', () => {
 
       it('should not wrap the custom plots in a big grid (virtualize them) when there are twenty or fewer small plots', async () => {
         await renderAppAndChangeSize(
-          { comparison: comparisonTableFixture, custom: createCustomPlots(20) },
+          { custom: createCustomPlots(20) },
           4,
           PlotsSection.CUSTOM_PLOTS
         )

webview/src/plots/components/GetStarted.tsx

@@ -11,7 +11,7 @@ export const AddPlots: React.FC<AddPlotsProps> = ({
   hasUnselectedPlots
 }: AddPlotsProps) => (
   <div>
-    <p>No Plots to Display.</p>
+    <p>There are no selected plots or experiments.</p>
     <div>
       <StartButton
         onClick={() =>