diff --git a/extension/package.json b/extension/package.json index d90dd60d9f..81604e04e7 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 No Images to Compare + return ( + + No Images to Compare + + + ) } const setColumnsOrder = (order: string[]) => { diff --git a/webview/src/plots/components/emptyState/AddPlots.tsx b/webview/src/plots/components/emptyState/AddPlots.tsx index 5ddcc8b2f1..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,7 +11,8 @@ export const AddPlots: React.FC = ({ hasUnselectedPlots }: AddPlotsProps) => (
-

No Plots to Display

+

No Plots or Data to Display

+
{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 }) => ( -

No Plots to Display

+

No Plots or Data to Display

{!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 = () => ( +

+ + 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. +

+) 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 ( -

No Plots to Display

+

No Plots or Data to Display

+ {hasUnselectedPlots ? (