Update "No Plots" section message (#4793)

extension/package.json

@@ -1558,7 +1558,7 @@
       },
       {
         "view": "dvc.views.plotsPathsTree",
-        "contents": "No Plots to Display."
+        "contents": "No Plots or Data to Display."
       },
       {
         "view": "dvc.views.experimentsSortByTree",

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

@@ -580,7 +580,7 @@ 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', () => {
+  it('should render template with "No Plots or Data to Display" message and "Add Plot" button if there is no template data and no unselected plots', () => {
     renderAppWithOptionalData({
       comparison: comparisonTableFixture,
       custom: customPlotsFixture,
@@ -589,7 +589,7 @@ describe('App', () => {
     })
 
     expect(screen.queryByText('Loading Plots...')).not.toBeInTheDocument()
-    expect(screen.getByText('No Plots to Display')).toBeInTheDocument()
+    expect(screen.getByText('No Plots or Data to Display')).toBeInTheDocument()
 
     const templateSection = screen.getByTestId('template-plots-section-details')
 
@@ -606,7 +606,7 @@ describe('App', () => {
     })
   })
 
-  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', () => {
+  it('should render template with "No Plots or Data 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,
@@ -615,7 +615,7 @@ describe('App', () => {
     })
 
     expect(screen.queryByText('Loading Plots...')).not.toBeInTheDocument()
-    expect(screen.getByText('No Plots to Display')).toBeInTheDocument()
+    expect(screen.getByText('No Plots or Data to Display')).toBeInTheDocument()
 
     const templateSection = screen.getByTestId('template-plots-section-details')
     const selectPlotsButton = within(templateSection).getByText('Select Plots')

webview/src/plots/components/comparisonTable/ComparisonTable.tsx

@@ -12,6 +12,7 @@ import { withScale, withVariant } from '../../../util/styles'
 import { PlotsState } from '../../store'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 import { reorderComparisonPlots } from '../../util/messages'
+import { WaitForPlotsInfo } from '../emptyState/WaitForPlotsInfo'
 
 export const ComparisonTable: React.FC = () => {
   const { revisions, plots, width } = useSelector(
@@ -54,7 +55,12 @@ export const ComparisonTable: React.FC = () => {
   }, [plots])
 
   if (!plots || plots.length === 0) {
-    return <EmptyState isFullScreen={false}>No Images to Compare</EmptyState>
+    return (
+      <EmptyState isFullScreen={false}>
+        No Images to Compare
+        <WaitForPlotsInfo />
+      </EmptyState>
+    )
   }
 
   const setColumnsOrder = (order: string[]) => {

webview/src/plots/components/emptyState/AddPlots.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { WaitForPlotsInfo } from './WaitForPlotsInfo'
 import { addPlot, selectPlots, selectRevisions } from '../../util/messages'
 import { StartButton } from '../../../shared/components/button/StartButton'
 
@@ -10,7 +11,8 @@ export const AddPlots: React.FC<AddPlotsProps> = ({
   hasUnselectedPlots
 }: AddPlotsProps) => (
   <div>
-    <p>No Plots to Display</p>
+    <p>No Plots or Data to Display</p>
+    <WaitForPlotsInfo />
     <div>
       <StartButton onClick={selectRevisions} text="Add Experiments" />
       {hasUnselectedPlots && (

webview/src/plots/components/emptyState/ErrorState.tsx

@@ -12,7 +12,7 @@ export const ErrorState: React.FC<{
 }> = ({ cliError, hasCustomPlots, modal }) => (
   <EmptyState hasCustomPlots={hasCustomPlots} modal={modal}>
     <ErrorIcon error={cliError} size={96} />
-    <p>No Plots to Display</p>
+    <p>No Plots or Data to Display</p>
     <div>
       <StartButton onClick={selectRevisions} text="Add Experiments" />
       {!hasCustomPlots && (

webview/src/plots/components/emptyState/WaitForPlotsInfo.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './styles.module.scss'
+import { Icon } from '../../../shared/components/Icon'
+import { Info } from '../../../shared/components/icons'
+
+export const WaitForPlotsInfo: React.FC = () => (
+  <p className={styles.infoText}>
+    <Icon icon={Info} width={16} height={16} />
+    If you have selected experiments that have just started, you might need to
+    wait while plots are produced. The screen will be updated automatically if
+    plots are setup correctly in this case.
+  </p>
+)

webview/src/plots/components/emptyState/styles.module.scss

@@ -1,3 +1,5 @@
+@import '../../../shared/variables';
+
 .emptyStateWrapper {
   display: flex;
   flex-direction: column;
@@ -8,3 +10,13 @@
     flex-grow: 1;
   }
 }
+
+.infoText {
+  font-size: 0.8rem;
+
+  svg {
+    fill: $accent-color;
+    vertical-align: text-bottom;
+    margin-right: 4px;
+  }
+}

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

@@ -4,14 +4,16 @@ import { StartButton } from '../../../shared/components/button/StartButton'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 import { addPlot, selectPlots } from '../../util/messages'
 import { PlotsState } from '../../store'
+import { WaitForPlotsInfo } from '../emptyState/WaitForPlotsInfo'
 
 export const NoPlotsToDisplay: React.FC = () => {
   const { hasUnselectedPlots } = useSelector(
     (state: PlotsState) => state.webview
   )
   return (
     <EmptyState isFullScreen={false}>
-      <p>No Plots to Display</p>
+      <p>No Plots or Data to Display</p>
+      <WaitForPlotsInfo />
       {hasUnselectedPlots ? (
         <div>
           <StartButton