Add loading state for sections and images to plots webview (#2865)

* add loading state for sections and images to plots webview

* update rule to account for multiple revisions being loaded

Author: mattseddon

extension/src/plots/webview/contract.ts

@@ -119,7 +119,7 @@ export interface TemplatePlotsData {
 }
 
 export type ComparisonPlot = {
-  url: string | undefined
+  url?: string
   revision: string
 }
 

webview/__mocks__/@vscode/webview-ui-toolkit/react.tsx

@@ -24,3 +24,7 @@ type MockCheckboxProps = {
 export const VSCodeCheckbox: React.FC<MockCheckboxProps> = ({ onClick }) => {
   return <input type="checkbox" onClick={onClick} />
 }
+
+export const VSCodeProgressRing: React.FC = () => {
+  return <div />
+}

webview/src/plots/components/App.test.tsx

@@ -247,6 +247,46 @@ describe('App', () => {
     expect(emptyState).toBeInTheDocument()
   })
 
+  it('should render loading section states when given a single revision which has not been fetched', async () => {
+    renderAppWithOptionalData({
+      checkpoint: null,
+      comparison: {
+        plots: [
+          {
+            path: 'training/plots/images/misclassified.jpg',
+            revisions: { ad2b5ec: { revision: 'ad2b5ec' } }
+          }
+        ],
+        revisions: [
+          {
+            displayColor: '#945dd6',
+            fetched: false,
+            group: '[exp-a270a]',
+            id: 'ad2b5ec854a447d00d9dfa9cdf88211a39a17813',
+            revision: 'ad2b5ec'
+          }
+        ],
+        size: PlotSizeNumber.REGULAR
+      },
+      hasPlots: true,
+      hasSelectedPlots: true,
+      sectionCollapsed: DEFAULT_SECTION_COLLAPSED,
+      selectedRevisions: [
+        {
+          displayColor: '#945dd6',
+          fetched: false,
+          group: '[exp-a270a]',
+          id: 'ad2b5ec854a447d00d9dfa9cdf88211a39a17813',
+          revision: 'ad2b5ec'
+        }
+      ],
+      template: null
+    })
+    const loading = await screen.findAllByText('Loading...')
+
+    expect(loading).toHaveLength(3)
+  })
+
   it('should render the get started buttons when no plots or experiments are selected', async () => {
     renderAppWithOptionalData({
       checkpoint: null,

webview/src/plots/components/LoadingSection.tsx

@@ -0,0 +1,11 @@
+import { Revision } from 'dvc/src/plots/webview/contract'
+import React from 'react'
+import { EmptyState } from '../../shared/components/emptyState/EmptyState'
+
+export const sectionIsLoading = (selectedRevisions: Revision[]): boolean =>
+  selectedRevisions.length > 0 &&
+  !selectedRevisions.some(({ fetched }) => fetched)
+
+export const LoadingSection: React.FC = () => (
+  <EmptyState isFullScreen={false}>Loading...</EmptyState>
+)

webview/src/plots/components/checkpointPlots/CheckpointPlots.tsx

@@ -17,6 +17,7 @@ import { VirtualizedGrid } from '../../../shared/components/virtualizedGrid/Virt
 import { shouldUseVirtualizedGrid } from '../util'
 import { PlotsState } from '../../store'
 import { changeOrderWithDraggedInfo } from '../../../util/array'
+import { LoadingSection, sectionIsLoading } from '../LoadingSection'
 
 interface CheckpointPlotsProps {
   plotsIds: string[]
@@ -37,6 +38,10 @@ export const CheckpointPlots: React.FC<CheckpointPlotsProps> = ({
     (state: PlotsState) => state.dragAndDrop.draggedRef
   )
 
+  const selectedRevisions = useSelector(
+    (state: PlotsState) => state.webview.selectedRevisions
+  )
+
   useEffect(() => {
     setOrder(pastOrder => performSimpleOrderedUpdate(pastOrder, plotsIds))
   }, [plotsIds])
@@ -49,6 +54,10 @@ export const CheckpointPlots: React.FC<CheckpointPlotsProps> = ({
     })
   }
 
+  if (sectionIsLoading(selectedRevisions)) {
+    return <LoadingSection />
+  }
+
   if (!hasData) {
     return <EmptyState isFullScreen={false}>No Plots to Display</EmptyState>
   }

webview/src/plots/components/comparisonTable/ComparisonTableCell.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { MessageFromWebviewType } from 'dvc/src/webview/contract'
+import { ComparisonPlot } from 'dvc/src/plots/webview/contract'
+import styles from './styles.module.scss'
+import { RefreshButton } from '../../../shared/components/button/RefreshButton'
+import { sendMessage } from '../../../shared/vscode'
+
+type ComparisonTableCellProps = {
+  path: string
+  plot?: ComparisonPlot & { fetched: boolean }
+}
+
+export const ComparisonTableCell: React.FC<ComparisonTableCellProps> = ({
+  path,
+  plot
+}) => {
+  const missing = plot?.fetched && !plot?.url
+
+  if (!plot?.fetched) {
+    return (
+      <div className={styles.noImageContent}>
+        <p>Loading...</p>
+      </div>
+    )
+  }
+
+  if (missing) {
+    return (
+      <div className={styles.noImageContent}>
+        <p>No Plot to Display.</p>
+        <RefreshButton
+          onClick={() =>
+            sendMessage({
+              payload: plot.revision,
+              type: MessageFromWebviewType.REFRESH_REVISION
+            })
+          }
+        />
+      </div>
+    )
+  }
+
+  return (
+    <img
+      draggable={false}
+      src={plot.url}
+      alt={`Plot of ${path} (${plot.revision})`}
+    />
+  )
+}

webview/src/plots/components/comparisonTable/ComparisonTableRow.test.tsx

@@ -31,7 +31,7 @@ describe('ComparisonTableRow', () => {
       comparisonPlotsFixture.plots.find(
         ({ path }) => path === join('plots', 'acc.png')
       )?.revisions || {}
-    )
+    ).map(revision => ({ ...revision, fetched: true }))
   }
 
   const renderRow = (props = basicProps) =>

webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx

@@ -1,12 +1,10 @@
 import { ComparisonPlot } from 'dvc/src/plots/webview/contract'
-import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import React, { useState } from 'react'
 import cx from 'classnames'
 import { useSelector } from 'react-redux'
 import styles from './styles.module.scss'
+import { ComparisonTableCell } from './ComparisonTableCell'
 import { Icon } from '../../../shared/components/Icon'
-import { RefreshButton } from '../../../shared/components/button/RefreshButton'
-import { sendMessage } from '../../../shared/vscode'
 import { ChevronDown, ChevronRight } from '../../../shared/components/icons'
 import { PlotsState } from '../../store'
 import { CopyButton } from '../../../shared/components/copyButton/CopyButton'
@@ -17,7 +15,7 @@ import Tooltip, {
 
 export interface ComparisonTableRowProps {
   path: string
-  plots: ComparisonPlot[]
+  plots: (ComparisonPlot & { fetched: boolean })[]
   nbColumns: number
   pinnedColumn: string
 }
@@ -64,42 +62,22 @@ export const ComparisonTableRow: React.FC<ComparisonTableRowProps> = ({
         {nbColumns > 1 && pinnedColumn && <td colSpan={nbColumns - 1}></td>}
       </tr>
       <tr>
-        {plots.map((plot: ComparisonPlot) => {
+        {plots.map(plot => {
           const isPinned = pinnedColumn === plot.revision
-          const missing = !plot?.url
-
           return (
             <td
               key={path + plot.revision}
               className={cx({
                 [styles.pinnedColumnCell]: isPinned,
-                [styles.missing]: isShown && missing,
+                [styles.noImage]: isShown && !plot?.url,
                 [styles.draggedColumn]: draggedId === plot.revision
               })}
             >
               <div
                 data-testid="row-images"
                 className={cx(styles.cell, { [styles.cellHidden]: !isShown })}
               >
-                {missing ? (
-                  <div>
-                    <p>No Plot to Display.</p>
-                    <RefreshButton
-                      onClick={() =>
-                        sendMessage({
-                          payload: plot.revision,
-                          type: MessageFromWebviewType.REFRESH_REVISION
-                        })
-                      }
-                    />
-                  </div>
-                ) : (
-                  <img
-                    draggable={false}
-                    src={plot.url}
-                    alt={`Plot of ${path} (${plot.revision})`}
-                  />
-                )}
+                <ComparisonTableCell path={path} plot={plot} />
               </div>
             </td>
           )

webview/src/plots/components/comparisonTable/ComparisonTableRows.tsx

@@ -46,6 +46,7 @@ export const ComparisionTableRows: React.FC<ComparisonTableRowsProps> = ({
           path={path}
           plots={columns.map(column => ({
             ...revs[column.revision],
+            fetched: column.fetched,
             revision: column.revision
           }))}
           nbColumns={columns.length}

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

@@ -88,13 +88,18 @@ $gap: 4px;
   transform: rotate(0deg);
 }
 
-.missing {
+.noImage {
   background-color: $bg-color;
   border-style: solid;
   border-width: thin;
   border-color: $watermark-color;
 }
 
+.noImageContent {
+  padding-top: 25%;
+  padding-bottom: 25%;
+}
+
 .rowToggler {
   border: none;
   background: none;