Add action buttons to empty plot sections

extension/src/plots/model/custom.test.ts

@@ -1,6 +1,4 @@
-import { checkForCustomPlotOptions, cleanupOldOrderValue } from './custom'
-import { customPlotsOrderFixture } from '../../test/fixtures/expShow/base/customPlots'
-import { ColumnType } from '../../experiments/webview/contract'
+import { cleanupOldOrderValue } from './custom'
 
 describe('cleanupOlderValue', () => {
   it('should update value if contents are outdated', () => {
@@ -23,81 +21,3 @@ describe('cleanupOlderValue', () => {
     expect(output).toStrictEqual(value)
   })
 })
-
-describe('checkForCustomPlotOptions', () => {
-  it('should return true if there are plots available', () => {
-    const output = checkForCustomPlotOptions(
-      [
-        {
-          hasChildren: false,
-          label: 'log_file',
-          path: 'params:params.yaml:log_file',
-          type: ColumnType.PARAMS
-        },
-        {
-          hasChildren: false,
-          label: 'log_file',
-          path: 'params:params.yaml:epochs',
-          type: ColumnType.PARAMS
-        },
-        {
-          hasChildren: false,
-          label: 'accuracy',
-          path: 'metrics:summary.json:loss',
-          type: ColumnType.METRICS
-        },
-        {
-          hasChildren: false,
-          label: 'accuracy',
-          path: 'metrics:summary.json:accuracy',
-          type: ColumnType.METRICS
-        }
-      ],
-      customPlotsOrderFixture
-    )
-    expect(output).toStrictEqual(true)
-  })
-
-  it('should return false if there are no plots available', () => {
-    const output = checkForCustomPlotOptions(
-      [
-        {
-          hasChildren: false,
-          label: 'log_file',
-          path: 'params:params.yaml:log_file',
-          type: ColumnType.PARAMS
-        },
-        {
-          hasChildren: false,
-          label: 'log_file',
-          path: 'params:params.yaml:epochs',
-          type: ColumnType.PARAMS
-        },
-        {
-          hasChildren: false,
-          label: 'accuracy',
-          path: 'metrics:summary.json:loss',
-          type: ColumnType.METRICS
-        },
-        {
-          hasChildren: false,
-          label: 'accuracy',
-          path: 'metrics:summary.json:accuracy',
-          type: ColumnType.METRICS
-        }
-      ],
-      [
-        ...customPlotsOrderFixture,
-        {
-          metric: 'summary.json:accuracy',
-          param: 'params.yaml:log_file'
-        },
-        {
-          metric: 'summary.json:loss',
-          param: 'params.yaml:epochs'
-        }
-      ]
-    )
-    expect(output).toStrictEqual(false)
-  })
-})

extension/src/plots/model/custom.ts

@@ -52,24 +52,6 @@ export const getCustomPlotPathsFromColumns = (
   return { metrics, params }
 }
 
-export const checkForCustomPlotOptions = (
-  columns: Column[],
-  customPlotOrder: CustomPlotsOrderValue[]
-): boolean => {
-  const { metrics, params } = getCustomPlotPathsFromColumns(columns)
-  const plotIds = getCustomPlotIds(customPlotOrder)
-
-  for (const metric of metrics) {
-    for (const param of params) {
-      if (!plotIds.has(getCustomPlotId(metric, param))) {
-        return true
-      }
-    }
-  }
-
-  return false
-}
-
 const getSpecDataType = (type: string) =>
   type === 'number' ? 'quantitative' : 'nominal'
 

extension/src/plots/model/index.ts

@@ -16,11 +16,7 @@ import {
   collectSelectedComparisonPlots
 } from './collect'
 import { getRevisionSummaryColumns } from './util'
-import {
-  checkForCustomPlotOptions,
-  cleanupOldOrderValue,
-  CustomPlotsOrderValue
-} from './custom'
+import { cleanupOldOrderValue, CustomPlotsOrderValue } from './custom'
 import {
   Revision,
   DEFAULT_SECTION_COLLAPSED,
@@ -156,10 +152,6 @@ export class PlotsModel extends ModelWithPersistence {
     const experiments = this.experiments.getUnfilteredCommitsAndExperiments()
     const hasUnfilteredExperiments = experiments.length > 0
     const plotsOrderValues = this.getCustomPlotsOrder()
-    const enablePlotCreation = checkForCustomPlotOptions(
-      this.experiments.getColumnTerminalNodes(),
-      plotsOrderValues
-    )
     const height = this.getHeight(PlotsSection.CUSTOM_PLOTS)
     const nbItemsPerRow = this.getNbItemsPerRowOrWidth(
       PlotsSection.CUSTOM_PLOTS
@@ -173,7 +165,6 @@ export class PlotsModel extends ModelWithPersistence {
     )
 
     return {
-      enablePlotCreation,
       hasAddedPlots,
       hasUnfilteredExperiments,
       height,

extension/src/plots/webview/contract.ts

@@ -100,7 +100,6 @@ export type CustomPlotData = CustomPlot & {
 export type CustomPlotsData = {
   plots: CustomPlotData[]
   nbItemsPerRow: number
-  enablePlotCreation: boolean
   height: PlotHeight
   hasUnfilteredExperiments: boolean
   hasAddedPlots: boolean

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

@@ -93,7 +93,6 @@ export const experimentsWithCommits: Experiment[] = [
 ]
 
 const data: CustomPlotsData = {
-  enablePlotCreation: true,
   plots: [
     {
       id: 'custom-summary.json:loss-params.yaml:log_file',

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

@@ -538,7 +538,7 @@ describe('App', () => {
     expect(screen.getByText('No Plots to Display')).toBeInTheDocument()
   })
 
-  it('should render custom with "No Plots Added" message when there are no plots added', () => {
+  it('should render custom with "No Plots Added" message and "Add Plot" button when there are no plots added', () => {
     renderAppWithOptionalData({
       custom: {
         ...customPlotsFixture,
@@ -552,6 +552,16 @@ describe('App', () => {
     expect(screen.queryByText('No Plots to Display')).not.toBeInTheDocument()
     expect(screen.getByText('Custom')).toBeInTheDocument()
     expect(screen.getByText('No Plots Added')).toBeInTheDocument()
+    const customSection = screen.getByTestId('custom-plots-section-details')
+
+    const addPlotButton = within(customSection).getByText('Add Plot')
+
+    expect(addPlotButton).toBeInTheDocument()
+
+    fireEvent.click(addPlotButton)
+    expect(mockPostMessage).toHaveBeenCalledWith({
+      type: MessageFromWebviewType.ADD_CUSTOM_PLOT
+    })
   })
 
   it('should render custom with "No Data to Plot" message when there are added plots but no unfiltered experiments', () => {
@@ -570,6 +580,62 @@ describe('App', () => {
     expect(screen.getByText('No Data to Plot')).toBeInTheDocument()
   })
 
+  it('should render template with "No Plots to Display" message and "Add Plot" button if there is no template data and no unselected plots', () => {
+    renderAppWithOptionalData({
+      comparison: comparisonTableFixture,
+      custom: customPlotsFixture,
+      hasUnselectedPlots: false,
+      template: null
+    })
+
+    expect(screen.queryByText('Loading Plots...')).not.toBeInTheDocument()
+    expect(screen.getByText('No Plots to Display')).toBeInTheDocument()
+
+    const templateSection = screen.getByTestId('template-plots-section-details')
+
+    const addPlotButton = within(templateSection).getByText('Add Plot')
+    const selectPlotsButton =
+      within(templateSection).queryByText('Select Plots')
+
+    expect(selectPlotsButton).not.toBeInTheDocument()
+    expect(addPlotButton).toBeInTheDocument()
+
+    fireEvent.click(addPlotButton)
+    expect(mockPostMessage).toHaveBeenCalledWith({
+      type: MessageFromWebviewType.ADD_PLOT
+    })
+  })
+
+  it('should render template with "No Plots to Display" message and action buttons ("Select Plots" and "Add Plot") if there is no template data and unselected plots', () => {
+    renderAppWithOptionalData({
+      comparison: comparisonTableFixture,
+      custom: customPlotsFixture,
+      hasUnselectedPlots: true,
+      template: null
+    })
+
+    expect(screen.queryByText('Loading Plots...')).not.toBeInTheDocument()
+    expect(screen.getByText('No Plots to Display')).toBeInTheDocument()
+
+    const templateSection = screen.getByTestId('template-plots-section-details')
+    const selectPlotsButton = within(templateSection).getByText('Select Plots')
+    const addPlotButton = within(templateSection).getByText('Add Plot')
+
+    expect(selectPlotsButton).toBeInTheDocument()
+    fireEvent.click(selectPlotsButton)
+    expect(mockPostMessage).toHaveBeenCalledWith({
+      type: MessageFromWebviewType.SELECT_PLOTS
+    })
+
+    mockPostMessage.mockReset()
+
+    expect(addPlotButton).toBeInTheDocument()
+    fireEvent.click(addPlotButton)
+    expect(mockPostMessage).toHaveBeenCalledWith({
+      type: MessageFromWebviewType.ADD_PLOT
+    })
+  })
+
   it('should render the comparison table when given a message with comparison plots data', () => {
     const expectedSectionName = 'Images'
 
@@ -766,25 +832,6 @@ describe('App', () => {
     })
   })
 
-  it('should hide the custom plots add button if there are no more plots to create', () => {
-    renderAppWithOptionalData({
-      comparison: comparisonTableFixture,
-      custom: customPlotsFixture
-    })
-
-    const customSection = screen.getAllByTestId('section-container')[2]
-
-    expect(within(customSection).getByLabelText('Add Plot')).toBeInTheDocument()
-
-    sendSetDataMessage({
-      custom: { ...customPlotsFixture, enablePlotCreation: false }
-    })
-
-    expect(
-      within(customSection).queryByLabelText('Add Plot')
-    ).not.toBeInTheDocument()
-  })
-
   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({
       custom: customPlotsFixture

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

@@ -2,6 +2,7 @@ import React, { DragEvent, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import cx from 'classnames'
 import { CustomPlot } from './CustomPlot'
+import { NoPlotsAdded } from './NoPlotsAdded'
 import styles from '../styles.module.scss'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 import {
@@ -56,7 +57,7 @@ export const CustomPlots: React.FC<CustomPlotsProps> = ({ plotsIds }) => {
   }
 
   if (!hasAddedPlots) {
-    return <EmptyState isFullScreen={false}>No Plots Added</EmptyState>
+    return <NoPlotsAdded />
   }
 
   if (!hasUnfilteredExperiments) {

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

@@ -5,17 +5,11 @@ import { CustomPlots } from './CustomPlots'
 import { changeSize } from './customPlotsSlice'
 import { PlotsContainer } from '../PlotsContainer'
 import { PlotsState } from '../../store'
-import { addCustomPlot, removeCustomPlots } from '../../util/messages'
+import { removeCustomPlots } from '../../util/messages'
 
 export const CustomPlotsWrapper: React.FC = () => {
-  const {
-    plotsIds,
-    nbItemsPerRow,
-    isCollapsed,
-    height,
-    enablePlotCreation,
-    hasAddedPlots
-  } = useSelector((state: PlotsState) => state.custom)
+  const { plotsIds, nbItemsPerRow, isCollapsed, height, hasAddedPlots } =
+    useSelector((state: PlotsState) => state.custom)
   const [selectedPlots, setSelectedPlots] = useState<string[]>([])
   useEffect(() => {
     setSelectedPlots(plotsIds)
@@ -29,9 +23,6 @@ export const CustomPlotsWrapper: React.FC = () => {
       sectionKey={PlotsSection.CUSTOM_PLOTS}
       nbItemsPerRowOrWidth={nbItemsPerRow}
       sectionCollapsed={isCollapsed}
-      addPlotsButton={
-        enablePlotCreation ? { onClick: addCustomPlot } : undefined
-      }
       removePlotsButton={
         hasAddedPlots ? { onClick: removeCustomPlots } : undefined
       }

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import { StartButton } from '../../../shared/components/button/StartButton'
+import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
+import { addCustomPlot } from '../../util/messages'
+
+export const NoPlotsAdded: React.FC = () => {
+  return (
+    <EmptyState isFullScreen={false}>
+      <p>No Plots Added</p>
+      <StartButton onClick={addCustomPlot} text="Add Plot" />
+    </EmptyState>
+  )
+}

webview/src/plots/components/customPlots/customPlotsSlice.ts

@@ -20,7 +20,6 @@ export interface CustomPlotsState extends Omit<CustomPlotsData, 'plots'> {
 
 export const customPlotsInitialState: CustomPlotsState = {
   disabledDragPlotIds: [],
-  enablePlotCreation: true,
   hasAddedPlots: false,
   hasData: false,
   hasItems: false,

webview/src/plots/components/templatePlots/NoPlotsToDisplay.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { StartButton } from '../../../shared/components/button/StartButton'
+import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
+import { addPlot, selectPlots } from '../../util/messages'
+import { PlotsState } from '../../store'
+
+export const NoPlotsToDisplay: React.FC = () => {
+  const { hasUnselectedPlots } = useSelector(
+    (state: PlotsState) => state.webview
+  )
+  return (
+    <EmptyState isFullScreen={false}>
+      <p>No Plots to Display</p>
+      {hasUnselectedPlots ? (
+        <div>
+          <StartButton
+            isNested={true}
+            onClick={selectPlots}
+            text="Select Plots"
+          />
+          <StartButton
+            text="Add Plot"
+            appearance="secondary"
+            isNested={true}
+            onClick={addPlot}
+          />
+        </div>
+      ) : (
+        <StartButton text="Add Plot" onClick={addPlot} />
+      )}
+    </EmptyState>
+  )
+}