Add plots error message below ribbon

extension/src/plots/errors/model.ts

@@ -10,6 +10,7 @@ import { Disposable } from '../../class/dispose'
 import { DvcError, PlotsOutputOrError } from '../../cli/dvc/contract'
 import { isDvcError } from '../../cli/dvc/reader'
 import { getCliErrorLabel } from '../../tree'
+import { PlotErrors } from '../webview/contract'
 
 export class ErrorsModel extends Disposable {
   private readonly dvcRoot: string
@@ -66,6 +67,17 @@ export class ErrorsModel extends Disposable {
     return [...acc]
   }
 
+  public getErrorsByPath(paths: string[], selectedRevisions: string[]) {
+    const errors: PlotErrors = []
+    for (const path of paths) {
+      const pathErrors = this.getPathErrors(path, selectedRevisions)
+      if (pathErrors) {
+        errors.push({ path, revs: pathErrors })
+      }
+    }
+    return errors
+  }
+
   public hasCliError() {
     return !!this.getCliError()
   }

extension/src/plots/paths/model.ts

@@ -142,6 +142,22 @@ export class PathsModel extends PathSelectionModel<PlotPath> {
     return false
   }
 
+  public getSelectedPlotPaths() {
+    const revisionPaths = this.data.filter(element =>
+      this.hasRevisions(element)
+    )
+
+    const paths: string[] = []
+
+    for (const { path } of revisionPaths) {
+      if (this.status[path] === Status.SELECTED) {
+        paths.push(path)
+      }
+    }
+
+    return paths
+  }
+
   public getTemplateOrder(): TemplateOrder {
     return collectTemplateOrder(
       this.getPathsByType(PathType.TEMPLATE_SINGLE),

extension/src/plots/webview/contract.ts

@@ -163,12 +163,18 @@ export type ComparisonPlot = {
   imgs: ComparisonPlotImg[]
 }
 
+export type PlotErrors = {
+  path: string
+  revs: { rev: string; msg: string }[]
+}[]
+
 export enum PlotsDataKeys {
   COMPARISON = 'comparison',
   CLI_ERROR = 'cliError',
   CUSTOM = 'custom',
   HAS_UNSELECTED_PLOTS = 'hasUnselectedPlots',
   HAS_PLOTS = 'hasPlots',
+  PLOT_ERRORS = 'plotErrors',
   SELECTED_REVISIONS = 'selectedRevisions',
   TEMPLATE = 'template',
   SECTION_COLLAPSED = 'sectionCollapsed',
@@ -188,6 +194,7 @@ export type PlotsData =
       [PlotsDataKeys.SECTION_COLLAPSED]?: SectionCollapsed
       [PlotsDataKeys.SHOW_TOO_MANY_TEMPLATE_PLOTS]?: boolean
       [PlotsDataKeys.SHOW_TOO_MANY_COMPARISON_IMAGES]?: boolean
+      [PlotsDataKeys.PLOT_ERRORS]?: PlotErrors
     }
   | undefined
 

extension/src/plots/webview/messages.ts

@@ -174,15 +174,20 @@ export class WebviewMessages {
       hasPlots,
       hasUnselectedPlots,
       sectionCollapsed,
-      template
+      template,
+      plotErrors
     ] = await Promise.all([
       this.errors.getCliError()?.error || null,
       this.getComparisonPlots(),
       this.getCustomPlots(),
       !!this.paths.hasPaths(),
       this.paths.getHasUnselectedPlots(),
       this.plots.getSectionCollapsed(),
-      this.getTemplatePlots(selectedRevisions)
+      this.getTemplatePlots(selectedRevisions),
+      this.errors.getErrorsByPath(
+        this.paths.getSelectedPlotPaths(),
+        this.plots.getSelectedRevisionIds()
+      )
     ])
     const shouldShowTooManyTemplatePlotsMessage =
       this.shouldShowTooManyPlotsMessage([
@@ -198,6 +203,7 @@ export class WebviewMessages {
       custom,
       hasPlots,
       hasUnselectedPlots,
+      plotErrors,
       sectionCollapsed,
       selectedRevisions,
       shouldShowTooManyComparisonImagesMessage,

webview/src/plots/components/App.tsx

@@ -30,6 +30,7 @@ import {
   updateCliError,
   updateHasPlots,
   updateHasUnselectedPlots,
+  updatePlotErrors,
   updateSelectedRevisions
 } from './webviewSlice'
 import { PlotsDispatch } from '../store'
@@ -81,6 +82,9 @@ export const feedStore = (
         case PlotsDataKeys.HAS_UNSELECTED_PLOTS:
           dispatch(updateHasUnselectedPlots(!!data.data[key]))
           continue
+        case PlotsDataKeys.PLOT_ERRORS:
+          dispatch(updatePlotErrors(data.data[key]))
+          continue
         case PlotsDataKeys.SELECTED_REVISIONS:
           dispatch(updateSelectedRevisions(data.data[key]))
           continue

webview/src/plots/components/Errors.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import styles from './styles.module.scss'
+import { PlotsState } from '../store'
+import { Error } from '../../shared/components/icons'
+
+export const Errors: React.FC<{
+  errors: PlotsState['webview']['plotErrors']
+}> = ({ errors }) => {
+  if (errors.length === 0) {
+    return
+  }
+
+  return (
+    <div className={styles.errors}>
+      <h3 className={styles.errorsTitle}>
+        <Error className={styles.errorsIcon} width="16" height="16" />
+        Errors
+      </h3>
+      <table>
+        <tbody>
+          {errors.map(({ path, revs }) => (
+            <>
+              <tr>
+                <th colSpan={2} className={styles.errorsPlot}>
+                  {path}
+                </th>
+              </tr>
+              {revs.map(({ rev, msg }) => (
+                <tr key={rev}>
+                  <td className={styles.errorsRev}>{rev}</td>
+                  <td className={styles.errorsMsgs}>{msg}</td>
+                </tr>
+              ))}
+            </>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

webview/src/plots/components/PlotsContent.tsx

@@ -7,6 +7,7 @@ import { CustomPlotsWrapper } from './customPlots/CustomPlotsWrapper'
 import { TemplatePlotsWrapper } from './templatePlots/TemplatePlotsWrapper'
 import { ComparisonTableWrapper } from './comparisonTable/ComparisonTableWrapper'
 import { Ribbon } from './ribbon/Ribbon'
+import { Errors } from './Errors'
 import { setMaxNbPlotsPerRow, setZoomedInPlot } from './webviewSlice'
 import styles from './styles.module.scss'
 import { EmptyState } from '../../shared/components/emptyState/EmptyState'
@@ -15,8 +16,14 @@ import { PlotsState } from '../store'
 
 export const PlotsContent = () => {
   const dispatch = useDispatch()
-  const { hasData, hasPlots, hasUnselectedPlots, zoomedInPlot, cliError } =
-    useSelector((state: PlotsState) => state.webview)
+  const {
+    hasData,
+    hasPlots,
+    hasUnselectedPlots,
+    plotErrors,
+    zoomedInPlot,
+    cliError
+  } = useSelector((state: PlotsState) => state.webview)
   const hasComparisonData = useSelector(
     (state: PlotsState) => state.comparison.hasData
   )
@@ -89,6 +96,7 @@ export const PlotsContent = () => {
   return (
     <div ref={wrapperRef} className={styles.plotsContent}>
       <Ribbon />
+      <Errors errors={plotErrors} />
       <TemplatePlotsWrapper />
       <ComparisonTableWrapper />
       <CustomPlotsWrapper />

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

@@ -3,6 +3,38 @@
 
 $gap: 20px;
 
+.errors {
+  padding: 20px 0;
+  margin: 20px 20px 0;
+  color: $error-color;
+  border-top: 1px solid $error-color;
+  border-bottom: 1px solid $error-color;
+}
+
+.errorsTitle {
+  margin: 0;
+}
+
+.errorsIcon {
+  margin-right: 3px;
+  vertical-align: text-top;
+  fill: $error-color;
+}
+
+.errorsPlot {
+  text-align: left;
+  padding: 15px 0;
+  font-weight: 600;
+}
+
+.errorsRev {
+  padding: 0 20px 0 0;
+}
+
+.errorsMsgs {
+  width: 100%;
+}
+
 .plots {
   width: 100%;
   height: 100%;

webview/src/plots/components/webviewSlice.ts

@@ -1,6 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { PlotsSection, Revision } from 'dvc/src/plots/webview/contract'
+import {
+  PlotErrors,
+  PlotsSection,
+  Revision
+} from 'dvc/src/plots/webview/contract'
 
 type ZoomedInPlotState = {
   section: PlotsSection
@@ -16,6 +20,7 @@ export interface WebviewState {
   selectedRevisions: Revision[]
   zoomedInPlot: ZoomedInPlotState | undefined
   maxNbPlotsPerRow: number
+  plotErrors: PlotErrors
 }
 
 export const webviewInitialState: WebviewState = {
@@ -24,6 +29,7 @@ export const webviewInitialState: WebviewState = {
   hasPlots: false,
   hasUnselectedPlots: false,
   maxNbPlotsPerRow: 4,
+  plotErrors: [],
   selectedRevisions: [],
   zoomedInPlot: {
     id: '',
@@ -88,6 +94,12 @@ export const webviewSlice = createSlice({
     ) => {
       state.hasUnselectedPlots = action.payload
     },
+    updatePlotErrors: (
+      state: { plotErrors: PlotErrors },
+      action: PayloadAction<PlotErrors | undefined>
+    ) => {
+      state.plotErrors = action.payload || []
+    },
     updateSelectedRevisions: (
       state: { selectedRevisions: Revision[] },
       action: PayloadAction<Revision[] | undefined>
@@ -102,6 +114,7 @@ export const {
   updateCliError,
   updateHasPlots,
   updateHasUnselectedPlots,
+  updatePlotErrors,
   updateSelectedRevisions,
   setZoomedInPlot,
   setMaxNbPlotsPerRow