@@ -60,8 +60,8 @@ rendered side by side for the selected experiments. alt="Experiments View" width="49%" />
-Real-time **Trends** based on scalar [metrics] from the **Experiments Table** -are available when you use [checkpoints]. +Automatically generated and updated **Trends** that show scalar [metrics] value +per epoch if [checkpoints] are enabled. [metrics]: https://dvc.org/doc/command-reference/metrics [checkpoints]: https://dvc.org/doc/user-guide/experiment-management/checkpoints diff --git a/webview/src/plots/components/App.test.tsx b/webview/src/plots/components/App.test.tsx index 2a49ab78a4..4c70b46669 100644 --- a/webview/src/plots/components/App.test.tsx +++ b/webview/src/plots/components/App.test.tsx @@ -1,6 +1,6 @@ import { join } from 'dvc/src/test/util/path' import { configureStore } from '@reduxjs/toolkit' -import React, { ReactElement } from 'react' +import React from 'react' import { Provider } from 'react-redux' import { cleanup, @@ -1291,30 +1291,14 @@ describe('App', () => { const [templateInfo, comparisonInfo, checkpointInfo] = screen.getAllByTestId('info-tooltip-toggle') - const getSectionText = (sectionNode: ReactElement) => - // eslint-disable-next-line testing-library/no-node-access - sectionNode.props.children || '' - fireEvent.mouseEnter(templateInfo, { bubbles: true }) - expect( - screen.getByText( - getSectionText(SectionDescription[Section.TEMPLATE_PLOTS]) - ) - ).toBeInTheDocument() + expect(screen.getByTestId('tooltip-template-plots')).toBeInTheDocument() fireEvent.mouseEnter(comparisonInfo, { bubbles: true }) - expect( - screen.getByText( - getSectionText(SectionDescription[Section.COMPARISON_TABLE]) - ) - ).toBeInTheDocument() + expect(screen.getByTestId('tooltip-comparison-plots')).toBeInTheDocument() fireEvent.mouseEnter(checkpointInfo, { bubbles: true }) - expect( - screen.getByText( - getSectionText(SectionDescription[Section.CHECKPOINT_PLOTS]) - ) - ).toBeInTheDocument() + expect(screen.getByTestId('tooltip-checkpoint-plots')).toBeInTheDocument() }) it('should dismiss a tooltip by pressing esc', () => { @@ -1326,29 +1310,15 @@ describe('App', () => { const [templateInfo] = screen.getAllByTestId('info-tooltip-toggle') - const getSectionText = (sectionNode: ReactElement) => - // eslint-disable-next-line testing-library/no-node-access - sectionNode.props.children || '' - fireEvent.mouseEnter(templateInfo, { bubbles: true }) - expect( - screen.getByText( - getSectionText(SectionDescription[Section.TEMPLATE_PLOTS]) - ) - ).toBeInTheDocument() + expect(screen.getByTestId('tooltip-template-plots')).toBeInTheDocument() fireEvent.keyDown(templateInfo, { bubbles: true, key: 'Space' }) - expect( - screen.getByText( - getSectionText(SectionDescription[Section.TEMPLATE_PLOTS]) - ) - ).toBeInTheDocument() + expect(screen.getByTestId('tooltip-template-plots')).toBeInTheDocument() fireEvent.keyDown(templateInfo, { bubbles: true, key: 'Escape' }) expect( - screen.queryByText( - getSectionText(SectionDescription[Section.TEMPLATE_PLOTS]) - ) + screen.queryByTestId('tooltip-template-plots') ).not.toBeInTheDocument() }) diff --git a/webview/src/plots/components/PlotsContainer.tsx b/webview/src/plots/components/PlotsContainer.tsx index 66bb250fd9..5858d9a396 100644 --- a/webview/src/plots/components/PlotsContainer.tsx +++ b/webview/src/plots/components/PlotsContainer.tsx @@ -35,17 +35,40 @@ export interface PlotsContainerProps extends CommonPlotsContainerProps { export const SectionDescription = { // "Trends" [Section.CHECKPOINT_PLOTS]: ( - Real-time plots based on metrics from the Experiments Table + + Automatically generated and updated linear plots that show metric value + per epoch if{' '} + + checkpoints + {' '} + are enabled. + ), // "Images" [Section.COMPARISON_TABLE]: ( - Displays image plots side by side across experiments. + + Images (e.g. any.jpg, .svg, or
+ .png file) rendered side by side across experiments. They
+ should be registered as{' '}
+
+ plots
+
+ .
+
),
// "Data Series"
[Section.TEMPLATE_PLOTS]: (
-
- Plots of JSON, YAML, CSV, or TSV files, visualized using `dvc plots`
- templates
+
+ Any JSON, YAML, CSV, or{' '}
+ TSV file(s) with data points, visualized using{' '}
+
+ plot templates
+
+ . Either predefenined (e.g. confusion matrix, linear) or{' '}
+
+ custom Vega-lite templates
+
+ .
)
}
diff --git a/webview/src/plots/components/styles.module.scss b/webview/src/plots/components/styles.module.scss
index 798293c2ab..96124e5667 100644
--- a/webview/src/plots/components/styles.module.scss
+++ b/webview/src/plots/components/styles.module.scss
@@ -20,10 +20,7 @@ $gap: 20px;
display: flex;
align-items: center;
width: max-content;
-
- svg {
- cursor: pointer;
- }
+ cursor: pointer;
}
}
@@ -370,17 +367,24 @@ $gap: 20px;
}
.infoTooltip {
- max-width: 220px;
- padding: 7px 3px;
+ max-width: 340px;
+ margin-left: 5px;
white-space: normal;
display: flex;
gap: 4px;
- font-size: 0.8125rem;
+ line-height: 16px;
+ font-size: 13px;
+ font-weight: 400;
+ cursor: auto;
svg {
min-width: 16px;
min-height: 16px;
}
+
+ a {
+ text-decoration: none;
+ }
}
:global(.has-actions) {