Merge branch 'master' into update-mocha

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

@@ -19,7 +19,7 @@ import {
   MessageToWebviewType
 } from 'dvc/src/webview/contract'
 import { App } from './App'
-import Plots from './Plots'
+import { Plots } from './Plots'
 import { vsCodeApi } from '../../shared/api'
 
 jest.mock('../../shared/api')

webview/src/plots/components/App.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import { PlotsData } from 'dvc/src/plots/webview/contract'
 import { MessageToWebview } from 'dvc/src/webview/contract'
-import Plots from './Plots'
+import { Plots } from './Plots'
 import { useAppReducer } from '../hooks/useAppReducer'
 import { useVsCodeMessaging } from '../../shared/hooks/useVsCodeMessaging'
 

webview/src/plots/components/LivePlots.tsx

@@ -0,0 +1,26 @@
+import { LivePlotData, LivePlotsColors } from 'dvc/src/plots/webview/contract'
+import React from 'react'
+import { EmptyState } from './EmptyState'
+import { Plot } from './Plot'
+import styles from './styles.module.scss'
+
+interface LivePlotsProps {
+  plots: LivePlotData[]
+  colors: LivePlotsColors
+}
+
+export const LivePlots: React.FC<LivePlotsProps> = ({ plots, colors }) =>
+  plots.length ? (
+    <div className={styles.singleViewPlotsGrid}>
+      {plots.map(plotData => (
+        <Plot
+          values={plotData.values}
+          title={plotData.title}
+          scale={colors}
+          key={`plot-${plotData.title}`}
+        />
+      ))}
+    </div>
+  ) : (
+    EmptyState('No metrics selected')
+  )

webview/src/plots/components/Plot.tsx

@@ -0,0 +1,32 @@
+import { LivePlotsColors, LivePlotValues } from 'dvc/src/plots/webview/contract'
+import React from 'react'
+import { VegaLite } from 'react-vega'
+import { config, createSpec } from './constants'
+import styles from './styles.module.scss'
+import { withScale } from '../../util/styles'
+
+interface PlotProps {
+  values: LivePlotValues
+  title: string
+  scale?: LivePlotsColors
+}
+
+export const Plot: React.FC<PlotProps> = ({ values, title, scale }) => {
+  const spec = createSpec(title, scale)
+
+  return (
+    <div
+      className={styles.plot}
+      style={withScale(1)}
+      data-testid={`plot-${title}`}
+    >
+      <VegaLite
+        actions={false}
+        config={config}
+        spec={spec}
+        data={{ values }}
+        renderer="svg"
+      />
+    </div>
+  )
+}

webview/src/plots/components/Plots.tsx

@@ -1,113 +1,19 @@
 import React, { Dispatch, useState, useEffect } from 'react'
-import {
-  LivePlotsColors,
-  LivePlotData,
-  PlotSize,
-  Section,
-  LivePlotValues,
-  VegaPlot,
-  VegaPlots
-} from 'dvc/src/plots/webview/contract'
+import { LivePlotData, PlotSize, Section } from 'dvc/src/plots/webview/contract'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
-import { VegaLite, VisualizationSpec } from 'react-vega'
-import cx from 'classnames'
-import { config, createSpec } from './constants'
 import { EmptyState } from './EmptyState'
 import { PlotsContainer } from './PlotsContainer'
-import styles from './styles.module.scss'
 import { ComparisonTable } from './ComparisonTable/ComparisonTable'
+import { LivePlots } from './LivePlots'
+import { StaticPlots } from './StaticPlots'
 import { PlotsReducerAction, PlotsWebviewState } from '../hooks/useAppReducer'
 import { getDisplayNameFromPath } from '../../util/paths'
 import { sendMessage } from '../../shared/vscode'
-import { withScale } from '../../util/styles'
-
-const Plot = ({
-  values,
-  title,
-  scale
-}: {
-  values: LivePlotValues
-  title: string
-  scale?: LivePlotsColors
-}) => {
-  const spec = createSpec(title, scale)
-
-  return (
-    <div
-      className={styles.plot}
-      style={withScale(1)}
-      data-testid={`plot-${title}`}
-    >
-      <VegaLite
-        actions={false}
-        config={config}
-        spec={spec}
-        data={{ values }}
-        renderer="svg"
-      />
-    </div>
-  )
-}
-
-const LivePlots = ({
-  plots,
-  colors
-}: {
-  plots: LivePlotData[]
-  colors: LivePlotsColors
-}) =>
-  plots.length ? (
-    <>
-      {plots.map(plotData => (
-        <Plot
-          values={plotData.values}
-          title={plotData.title}
-          scale={colors}
-          key={`plot-${plotData.title}`}
-        />
-      ))}
-    </>
-  ) : (
-    EmptyState('No metrics selected')
-  )
-
-const StaticPlots = ({ plots }: { plots: VegaPlots }) => (
-  <>
-    {Object.entries(plots).map(([path, plots]) =>
-      plots.map((plot: VegaPlot, i) => {
-        const nbRevisions = (plot.multiView && plot.revisions?.length) || 1
-        const className = cx(styles.plot, {
-          [styles.multiViewPlot]: plot.multiView
-        })
-        return (
-          <div
-            className={className}
-            style={withScale(nbRevisions)}
-            key={`plot-${path}-${i}`}
-          >
-            <VegaLite
-              actions={false}
-              config={config}
-              spec={
-                {
-                  ...plot.content,
-                  height: 'container',
-                  width: 'container'
-                } as VisualizationSpec
-              }
-              renderer="svg"
-            />
-          </div>
-        )
-      })
-    )}
-  </>
-)
 
 const getMetricsFromPlots = (plots?: LivePlotData[]): string[] =>
   plots?.map(plot => getDisplayNameFromPath(plot.title)) || []
 
-const Plots = ({
+export const Plots = ({
   state,
   dispatch
 }: {
@@ -218,5 +124,3 @@ const Plots = ({
     </>
   )
 }
-
-export default Plots

webview/src/plots/components/StaticPlot.tsx

@@ -0,0 +1,35 @@
+import { VegaPlot } from 'dvc/src/plots/webview/contract'
+import React from 'react'
+import cx from 'classnames'
+import { VegaLite, VisualizationSpec } from 'react-vega'
+import { config } from './constants'
+import styles from './styles.module.scss'
+import { withScale } from '../../util/styles'
+
+interface StaticPlotProps {
+  plot: VegaPlot
+}
+
+export const StaticPlot: React.FC<StaticPlotProps> = ({ plot }) => {
+  const nbRevisions = (plot.multiView && plot.revisions?.length) || 1
+  const className = cx(styles.plot, {
+    [styles.multiViewPlot]: plot.multiView
+  })
+
+  return (
+    <div className={className} style={withScale(nbRevisions)}>
+      <VegaLite
+        actions={false}
+        config={config}
+        spec={
+          {
+            ...plot.content,
+            height: 'container',
+            width: 'container'
+          } as VisualizationSpec
+        }
+        renderer="svg"
+      />
+    </div>
+  )
+}

webview/src/plots/components/StaticPlots.tsx

@@ -0,0 +1,57 @@
+import { VegaPlot, VegaPlots } from 'dvc/src/plots/webview/contract'
+import React from 'react'
+import styles from './styles.module.scss'
+import { StaticPlot } from './StaticPlot'
+
+interface StaticPlotsProps {
+  plots: VegaPlots
+}
+
+type StaticPlotAccumulator = {
+  singleViewPlots: VegaPlots
+  multiViewPlots: VegaPlots
+}
+
+export const StaticPlots: React.FC<StaticPlotsProps> = ({ plots }) => {
+  const fillInPlotsType = (
+    plotsType: VegaPlots,
+    path: string,
+    plot: VegaPlot
+  ) => {
+    plotsType[path] = plotsType[path] ? [...plotsType[path], plot] : [plot]
+  }
+
+  const { singleViewPlots, multiViewPlots } = Object.entries(plots).reduce(
+    (acc: StaticPlotAccumulator, [path, plots]) => {
+      plots.forEach(plot => {
+        if (plot.multiView) {
+          fillInPlotsType(acc.multiViewPlots, path, plot)
+          return
+        }
+        fillInPlotsType(acc.singleViewPlots, path, plot)
+      })
+      return acc
+    },
+    { multiViewPlots: {}, singleViewPlots: {} }
+  )
+
+  const makeKey = (path: string, i: number) => `plot-${path}-${i}`
+
+  const renderPlots = (entries: VegaPlots) =>
+    Object.entries(entries).map(([path, plots]) =>
+      plots.map((plot: VegaPlot, i) => (
+        <StaticPlot key={makeKey(path, i)} plot={plot} />
+      ))
+    )
+
+  return (
+    <>
+      <div className={styles.singleViewPlotsGrid}>
+        {renderPlots(singleViewPlots)}
+      </div>
+      <div className={styles.multiViewPlotsGrid}>
+        {renderPlots(multiViewPlots)}
+      </div>
+    </>
+  )
+}