Add placeholder when image is missing from comparison table data (#1699)

* add placeholder when image is missing from comparison table data * add basic story for missing data * change image to plot in error message
iterative · May 12, 2022 · 1f933ed · 1f933ed
1 parent 73bb281
commit 1f933ed
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 8 deletions.
diff --git a/webview/src/plots/components/comparisonTable/ComparisonTable.tsx b/webview/src/plots/components/comparisonTable/ComparisonTable.tsx
@@ -95,7 +95,7 @@ export const ComparisonTable: React.FC<ComparisonTableProps> = ({
         <ComparisonTableRow
           key={path}
           path={path}
-          plots={columns.map(column => revs[column.revision]).filter(Boolean)}
+          plots={columns.map(column => revs[column.revision])}
           nbColumns={columns.length}
           pinnedColumn={pinnedColumn.current}
         />

diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx
@@ -35,21 +35,25 @@ export const ComparisonTableRow: React.FC<ComparisonTableRowProps> = ({
         {nbColumns > 1 && <td colSpan={nbColumns - 1}></td>}
       </tr>
       <tr>
-        {plots.map((plot: ComparisonPlot) => {
-          const isPinned = pinnedColumn === plot.revision
+        {plots.map((plot: ComparisonPlot | undefined) => {
+          const isPinned = pinnedColumn === plot?.revision
 
           return (
             <td
-              key={path + plot.revision}
+              key={path + plot?.revision || 'missing'}
               className={cx({ [styles.pinnedColumnCell]: isPinned })}
             >
               <div
                 className={cx(styles.cell, { [styles.cellHidden]: !isShown })}
               >
-                <img
-                  src={plot.url}
-                  alt={`Plot of ${path} (${plot.revision})`}
-                />
+                {!plot?.url ? (
+                  <p>No plot to display.</p>
+                ) : (
+                  <img
+                    src={plot.url}
+                    alt={`Plot of ${path} (${plot.revision})`}
+                  />
+                )}
               </div>
             </td>
           )

diff --git a/webview/src/plots/components/comparisonTable/styles.module.scss b/webview/src/plots/components/comparisonTable/styles.module.scss
@@ -134,6 +134,7 @@ $gap: 4px;
   transform: scaleY(1);
   transform-origin: top;
   transition: max-height 0.3s;
+  text-align: center;
 }
 
 .cellHidden {

diff --git a/webview/src/stories/ComparisonTable.stories.tsx b/webview/src/stories/ComparisonTable.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, Story } from '@storybook/react/types-6-0'
 import React from 'react'
+import { ComparisonRevisionData } from 'dvc/src/plots/webview/contract'
 import comparisonTableFixture from 'dvc/src/test/fixtures/plotsDiff/comparison'
 import {
   ComparisonTable,
@@ -34,3 +35,25 @@ WithPinnedColumn.args = {
   ...comparisonTableFixture,
   currentPinnedColumn: 'main'
 }
+
+const removeSingleImage = (
+  path: string,
+  revisionsData: ComparisonRevisionData
+): ComparisonRevisionData => {
+  const filteredRevisionData: ComparisonRevisionData = {}
+  for (const [revision, data] of Object.entries(revisionsData)) {
+    if (path !== comparisonTableFixture.plots[0].path || revision !== 'main') {
+      filteredRevisionData[revision] = data
+    }
+  }
+  return filteredRevisionData
+}
+
+export const WithMissingData = Template.bind({})
+WithMissingData.args = {
+  ...comparisonTableFixture,
+  plots: comparisonTableFixture.plots.map(({ path, revisions }) => ({
+    path,
+    revisions: removeSingleImage(path, revisions)
+  }))
+}