Update plots empty states to reflect dynamic nature of available plots (#2932)

Author: mattseddon

extension/src/plots/paths/model.ts

@@ -8,7 +8,10 @@ import {
 } from './collect'
 import { PathSelectionModel, Status } from '../../path/selection/model'
 import { PersistenceKey } from '../../persistence/constants'
-import { performSimpleOrderedUpdate } from '../../util/array'
+import {
+  definedAndNonEmpty,
+  performSimpleOrderedUpdate
+} from '../../util/array'
 import { MultiSourceEncoding } from '../multiSource/collect'
 import { isDvcError } from '../../cli/dvc/reader'
 import { PlotsOutputOrError } from '../../cli/dvc/contract'
@@ -85,14 +88,21 @@ export class PathsModel extends PathSelectionModel<PlotPath> {
       .map(element => ({ ...element, selected: !!this.status[element.path] }))
   }
 
-  public getSelected() {
-    return (
-      this.data.filter(
-        element =>
-          this.status[element.path] !== Status.UNSELECTED &&
-          this.hasRevisions(element)
-      ) || []
+  public getHasUnselectedPlots() {
+    const revisionPaths = this.data.filter(element =>
+      this.hasRevisions(element)
     )
+
+    if (!definedAndNonEmpty(revisionPaths)) {
+      return false
+    }
+
+    for (const { path } of revisionPaths) {
+      if (this.status[path] === Status.UNSELECTED) {
+        return true
+      }
+    }
+    return false
   }
 
   public getTemplateOrder(): TemplateOrder {

extension/src/plots/webview/contract.ts

@@ -126,8 +126,8 @@ export type ComparisonPlot = {
 export enum PlotsDataKeys {
   COMPARISON = 'comparison',
   CHECKPOINT = 'checkpoint',
+  HAS_UNSELECTED_PLOTS = 'hasUnselectedPlots',
   HAS_PLOTS = 'hasPlots',
-  HAS_SELECTED_PLOTS = 'hasSelectedPlots',
   SELECTED_REVISIONS = 'selectedRevisions',
   TEMPLATE = 'template',
   SECTION_COLLAPSED = 'sectionCollapsed'
@@ -138,7 +138,7 @@ export type PlotsData =
       [PlotsDataKeys.COMPARISON]?: PlotsComparisonData | null
       [PlotsDataKeys.CHECKPOINT]?: CheckpointPlotsData | null
       [PlotsDataKeys.HAS_PLOTS]?: boolean
-      [PlotsDataKeys.HAS_SELECTED_PLOTS]?: boolean
+      [PlotsDataKeys.HAS_UNSELECTED_PLOTS]?: boolean
       [PlotsDataKeys.SELECTED_REVISIONS]?: Revision[]
       [PlotsDataKeys.TEMPLATE]?: TemplatePlotsData | null
       [PlotsDataKeys.SECTION_COLLAPSED]?: SectionCollapsed

extension/src/plots/webview/messages.ts

@@ -21,7 +21,6 @@ import { PlotsModel } from '../model'
 import { PathsModel } from '../paths/model'
 import { BaseWebview } from '../../webview'
 import { getModifiedTime } from '../../fileSystem'
-import { definedAndNonEmpty } from '../../util/array'
 
 export class WebviewMessages {
   private readonly paths: PathsModel
@@ -56,7 +55,7 @@ export class WebviewMessages {
       checkpoint: this.getCheckpointPlots(),
       comparison: this.getComparisonPlots(overrideComparison),
       hasPlots: !!this.paths.hasPaths(),
-      hasSelectedPlots: definedAndNonEmpty(this.paths.getSelected()),
+      hasUnselectedPlots: this.paths.getHasUnselectedPlots(),
       sectionCollapsed: this.plots.getSectionCollapsed(),
       selectedRevisions: overrideRevisions,
       template: this.getTemplatePlots(overrideRevisions)

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

@@ -675,7 +675,7 @@ suite('Plots Test Suite', () => {
         checkpoint: checkpointPlotsFixture,
         comparison: comparisonPlotsFixture,
         hasPlots: true,
-        hasSelectedPlots: true,
+        hasUnselectedPlots: false,
         sectionCollapsed: DEFAULT_SECTION_COLLAPSED,
         selectedRevisions: plotsRevisionsFixture,
         template: templatePlotsFixture

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

@@ -244,7 +244,7 @@ describe('App', () => {
     renderAppWithOptionalData({
       checkpoint: null
     })
-    const emptyState = await screen.findByText('No Plots to Display.')
+    const emptyState = await screen.findByText('No Plots Detected.')
 
     expect(emptyState).toBeInTheDocument()
   })
@@ -271,7 +271,7 @@ describe('App', () => {
         size: PlotSizeNumber.REGULAR
       },
       hasPlots: true,
-      hasSelectedPlots: true,
+      hasUnselectedPlots: false,
       sectionCollapsed: DEFAULT_SECTION_COLLAPSED,
       selectedRevisions: [
         {
@@ -289,21 +289,29 @@ describe('App', () => {
     expect(loading).toHaveLength(3)
   })
 
-  it('should only render the Add Plots get started button when there are experiments but no plots are selected', async () => {
+  it('should render the Add Plots and Add Experiments get started button when there are experiments which have plots that are all unselected', async () => {
     renderAppWithOptionalData({
       checkpoint: null,
       hasPlots: true,
-      hasSelectedPlots: false,
+      hasUnselectedPlots: true,
       selectedRevisions: [{} as Revision]
     })
-    const addExperimentsButton = screen.queryByText('Add Experiments')
+    const addExperimentsButton = await screen.findByText('Add Experiments')
     const addPlotsButton = await screen.findByText('Add Plots')
 
-    expect(addExperimentsButton).not.toBeInTheDocument()
+    expect(addExperimentsButton).toBeInTheDocument()
     expect(addPlotsButton).toBeInTheDocument()
 
     mockPostMessage.mockReset()
 
+    fireEvent.click(addExperimentsButton)
+
+    expect(mockPostMessage).toHaveBeenCalledWith({
+      type: MessageFromWebviewType.SELECT_EXPERIMENTS
+    })
+
+    mockPostMessage.mockReset()
+
     fireEvent.click(addPlotsButton)
 
     expect(mockPostMessage).toHaveBeenCalledWith({
@@ -312,11 +320,11 @@ describe('App', () => {
     mockPostMessage.mockReset()
   })
 
-  it('should only render the Add Experiments get started button when no plots or experiments are selected', async () => {
+  it('should render only the Add Experiments get started button when no experiments are selected', async () => {
     renderAppWithOptionalData({
       checkpoint: null,
       hasPlots: true,
-      hasSelectedPlots: false,
+      hasUnselectedPlots: false,
       selectedRevisions: undefined
     })
     const addExperimentsButton = await screen.findByText('Add Experiments')

webview/src/plots/components/App.tsx

@@ -27,7 +27,7 @@ import {
 import {
   initialize,
   updateHasPlots,
-  updateHasSelectedPlots,
+  updateHasUnselectedPlots,
   updateSelectedRevisions
 } from './webviewSlice'
 import { PlotsDispatch } from '../store'
@@ -71,8 +71,8 @@ export const feedStore = (
         case PlotsDataKeys.HAS_PLOTS:
           dispatch(updateHasPlots(!!data.data[key]))
           continue
-        case PlotsDataKeys.HAS_SELECTED_PLOTS:
-          dispatch(updateHasSelectedPlots(!!data.data[key]))
+        case PlotsDataKeys.HAS_UNSELECTED_PLOTS:
+          dispatch(updateHasUnselectedPlots(!!data.data[key]))
           continue
         case PlotsDataKeys.SELECTED_REVISIONS:
           dispatch(updateSelectedRevisions(data.data[key] as Revision[]))

webview/src/plots/components/GetStarted.tsx

@@ -3,39 +3,37 @@ import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { sendMessage } from '../../shared/vscode'
 import { StartButton } from '../../shared/components/button/StartButton'
 
-const NoPlotsText: React.FC = () => <p>No Plots to Display.</p>
-
 export type AddPlotsProps = {
-  hasSelectedPlots: boolean
+  hasUnselectedPlots: boolean
   hasSelectedRevisions: boolean
 }
 
 export const AddPlots: React.FC<AddPlotsProps> = ({
-  hasSelectedPlots,
-  hasSelectedRevisions
+  hasUnselectedPlots
 }: AddPlotsProps) => (
   <div>
-    <NoPlotsText />
+    <p>No Plots to Display.</p>
     <div>
-      {hasSelectedRevisions && !hasSelectedPlots && (
+      {
         <StartButton
           onClick={() =>
             sendMessage({
-              type: MessageFromWebviewType.SELECT_PLOTS
+              type: MessageFromWebviewType.SELECT_EXPERIMENTS
             })
           }
-          text="Add Plots"
+          text="Add Experiments"
         />
-      )}
-      {!hasSelectedRevisions && (
+      }
+      {hasUnselectedPlots && (
         <StartButton
-          isNested={!hasSelectedPlots}
+          isNested={hasUnselectedPlots}
+          appearance="secondary"
           onClick={() =>
             sendMessage({
-              type: MessageFromWebviewType.SELECT_EXPERIMENTS
+              type: MessageFromWebviewType.SELECT_PLOTS
             })
           }
-          text="Add Experiments"
+          text="Add Plots"
         />
       )}
     </div>
@@ -44,7 +42,15 @@ export const AddPlots: React.FC<AddPlotsProps> = ({
 
 export const Welcome: React.FC = () => (
   <div>
-    <NoPlotsText />
+    <p>No Plots Detected.</p>
+    <StartButton
+      onClick={() =>
+        sendMessage({
+          type: MessageFromWebviewType.SELECT_EXPERIMENTS
+        })
+      }
+      text="Add Experiments"
+    />
     <p>
       Learn how to{' '}
       <a href="https://dvc.org/doc/studio/user-guide/views/visualize-experiments">

webview/src/plots/components/Plots.tsx

@@ -19,7 +19,7 @@ const PlotsContent = () => {
   const {
     hasData,
     hasPlots,
-    hasSelectedPlots,
+    hasUnselectedPlots,
     selectedRevisions,
     zoomedInPlot
   } = useSelector((state: PlotsState) => state.webview)
@@ -57,7 +57,7 @@ const PlotsContent = () => {
       <GetStarted
         addItems={
           <AddPlots
-            hasSelectedPlots={!!hasSelectedPlots}
+            hasUnselectedPlots={hasUnselectedPlots}
             hasSelectedRevisions={!!selectedRevisions?.length}
           />
         }

webview/src/plots/components/webviewSlice.ts

@@ -10,7 +10,7 @@ type ZoomedInPlotState = {
 export interface WebviewState {
   hasData: boolean
   hasPlots: boolean
-  hasSelectedPlots: boolean
+  hasUnselectedPlots: boolean
   selectedRevisions: Revision[]
   zoomedInPlot: ZoomedInPlotState | undefined
   maxPlotSize: number
@@ -19,7 +19,7 @@ export interface WebviewState {
 export const webviewInitialState: WebviewState = {
   hasData: false,
   hasPlots: false,
-  hasSelectedPlots: false,
+  hasUnselectedPlots: false,
   maxPlotSize: 375,
   selectedRevisions: [],
   zoomedInPlot: {
@@ -64,11 +64,11 @@ export const webviewSlice = createSlice({
     ) => {
       state.hasPlots = action.payload
     },
-    updateHasSelectedPlots: (
-      state: { hasSelectedPlots: boolean },
+    updateHasUnselectedPlots: (
+      state: { hasUnselectedPlots: boolean },
       action: PayloadAction<boolean>
     ) => {
-      state.hasSelectedPlots = action.payload
+      state.hasUnselectedPlots = action.payload
     },
     updateSelectedRevisions: (
       state: { selectedRevisions: Revision[] },
@@ -82,7 +82,7 @@ export const webviewSlice = createSlice({
 export const {
   initialize,
   updateHasPlots,
-  updateHasSelectedPlots,
+  updateHasUnselectedPlots,
   updateSelectedRevisions,
   setZoomedInPlot,
   setMaxPlotSize

webview/src/stories/Plots.stories.tsx

@@ -67,7 +67,7 @@ export default {
       checkpoint: checkpointPlotsFixture,
       comparison: comparisonPlotsFixture,
       hasPlots: true,
-      hasSelectedPlots: false,
+      hasUnselectedPlots: false,
       sectionCollapsed: DEFAULT_SECTION_COLLAPSED,
       selectedRevisions: plotsRevisionsFixture,
       template: templatePlotsFixture
@@ -144,7 +144,7 @@ export const WithoutPlotsSelected = Template.bind({})
 WithoutPlotsSelected.args = {
   data: {
     hasPlots: true,
-    hasSelectedPlots: false,
+    hasUnselectedPlots: true,
     sectionCollapsed: DEFAULT_SECTION_COLLAPSED,
     selectedRevisions: plotsRevisionsFixture
   }
@@ -154,22 +154,12 @@ export const WithoutExperimentsSelected = Template.bind({})
 WithoutExperimentsSelected.args = {
   data: {
     hasPlots: true,
-    hasSelectedPlots: true,
+    hasUnselectedPlots: false,
     sectionCollapsed: DEFAULT_SECTION_COLLAPSED,
     selectedRevisions: []
   }
 }
 
-export const WithoutAnySelected = Template.bind({})
-WithoutAnySelected.args = {
-  data: {
-    hasPlots: true,
-    hasSelectedPlots: false,
-    sectionCollapsed: DEFAULT_SECTION_COLLAPSED,
-    selectedRevisions: undefined
-  }
-}
-
 export const WithoutData = Template.bind({})
 WithoutData.args = {
   data: undefined