From 4e6b06ed1785bfc0072be8d978483801230b7799 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Mon, 9 Oct 2023 16:54:40 -0500
Subject: [PATCH 1/2] Attempt a different message

---
 webview/src/plots/components/emptyState/AddPlots.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/webview/src/plots/components/emptyState/AddPlots.tsx b/webview/src/plots/components/emptyState/AddPlots.tsx
index 5ddcc8b2f1..188ea02b2b 100644
--- a/webview/src/plots/components/emptyState/AddPlots.tsx
+++ b/webview/src/plots/components/emptyState/AddPlots.tsx
@@ -10,7 +10,10 @@ export const AddPlots: React.FC<AddPlotsProps> = ({
   hasUnselectedPlots
 }: AddPlotsProps) => (
   <div>
-    <p>No Plots to Display</p>
+    <p>
+      No Plots to Display (Plots take longer to appear when being created for
+      the first time.)
+    </p>
     <div>
       <StartButton onClick={selectRevisions} text="Add Experiments" />
       {hasUnselectedPlots && (

From 51842db17d4958a1d9cafa8feb4de6d1e631064a Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Fri, 13 Oct 2023 19:01:41 -0500
Subject: [PATCH 2/2] Update text

---
 extension/package.json                              |  2 +-
 webview/src/plots/components/App.test.tsx           |  8 ++++----
 .../components/comparisonTable/ComparisonTable.tsx  |  8 +++++++-
 .../src/plots/components/emptyState/AddPlots.tsx    |  7 +++----
 .../src/plots/components/emptyState/ErrorState.tsx  |  2 +-
 .../components/emptyState/WaitForPlotsInfo.tsx      | 13 +++++++++++++
 .../plots/components/emptyState/styles.module.scss  | 12 ++++++++++++
 .../components/templatePlots/NoPlotsToDisplay.tsx   |  4 +++-
 8 files changed, 44 insertions(+), 12 deletions(-)
 create mode 100644 webview/src/plots/components/emptyState/WaitForPlotsInfo.tsx

diff --git a/extension/package.json b/extension/package.json
index 501ebfbc5c..6abd238617 100644
--- a/extension/package.json
+++ b/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",
diff --git a/webview/src/plots/components/App.test.tsx b/webview/src/plots/components/App.test.tsx
index 39795f19e7..74af9b206d 100644
--- a/webview/src/plots/components/App.test.tsx
+++ b/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')
diff --git a/webview/src/plots/components/comparisonTable/ComparisonTable.tsx b/webview/src/plots/components/comparisonTable/ComparisonTable.tsx
index 4754b760c9..7138e376e2 100644
--- a/webview/src/plots/components/comparisonTable/ComparisonTable.tsx
+++ b/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[]) => {
diff --git a/webview/src/plots/components/emptyState/AddPlots.tsx b/webview/src/plots/components/emptyState/AddPlots.tsx
index 188ea02b2b..ee56761649 100644
--- a/webview/src/plots/components/emptyState/AddPlots.tsx
+++ b/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,10 +11,8 @@ export const AddPlots: React.FC<AddPlotsProps> = ({
   hasUnselectedPlots
 }: AddPlotsProps) => (
   <div>
-    <p>
-      No Plots to Display (Plots take longer to appear when being created for
-      the first time.)
-    </p>
+    <p>No Plots or Data to Display</p>
+    <WaitForPlotsInfo />
     <div>
       <StartButton onClick={selectRevisions} text="Add Experiments" />
       {hasUnselectedPlots && (
diff --git a/webview/src/plots/components/emptyState/ErrorState.tsx b/webview/src/plots/components/emptyState/ErrorState.tsx
index fed4b17bca..4f197dfe85 100644
--- a/webview/src/plots/components/emptyState/ErrorState.tsx
+++ b/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 && (
diff --git a/webview/src/plots/components/emptyState/WaitForPlotsInfo.tsx b/webview/src/plots/components/emptyState/WaitForPlotsInfo.tsx
new file mode 100644
index 0000000000..d1dedd88b6
--- /dev/null
+++ b/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>
+)
diff --git a/webview/src/plots/components/emptyState/styles.module.scss b/webview/src/plots/components/emptyState/styles.module.scss
index 6949860542..90e4463253 100644
--- a/webview/src/plots/components/emptyState/styles.module.scss
+++ b/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;
+  }
+}
diff --git a/webview/src/plots/components/templatePlots/NoPlotsToDisplay.tsx b/webview/src/plots/components/templatePlots/NoPlotsToDisplay.tsx
index c7640ae653..d5e873a0e1 100644
--- a/webview/src/plots/components/templatePlots/NoPlotsToDisplay.tsx
+++ b/webview/src/plots/components/templatePlots/NoPlotsToDisplay.tsx
@@ -4,6 +4,7 @@ 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(
@@ -11,7 +12,8 @@ export const NoPlotsToDisplay: React.FC = () => {
   )
   return (
     <EmptyState isFullScreen={false}>
-      <p>No Plots to Display</p>
+      <p>No Plots or Data to Display</p>
+      <WaitForPlotsInfo />
       {hasUnselectedPlots ? (
         <div>
           <StartButton