refactor extending vega lite

iterative · Sep 29, 2023 · db935bb · db935bb
1 parent 3368c7b
commit db935bb
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 50 deletions.
diff --git a/webview/src/plots/components/ZoomablePlot.tsx b/webview/src/plots/components/ZoomablePlot.tsx
@@ -2,15 +2,14 @@ import { AnyAction } from '@reduxjs/toolkit'
 import { PlotsSection } from 'dvc/src/plots/webview/contract'
 import React, { useRef } from 'react'
 import { useDispatch } from 'react-redux'
-import { VegaLiteProps } from 'react-vega/lib/VegaLite'
-import { TemplateVegaLite } from './templatePlots/TemplateVegaLite'
+import { VisualizationSpec } from 'react-vega'
+import { ExtendedVegaLite } from './vegaLite/ExtendedVegaLite'
 import { setZoomedInPlot } from './webviewSlice'
 import styles from './styles.module.scss'
 import { zoomPlot } from '../util/messages'
 import { useGetPlot } from '../hooks/useGetPlot'
 import { GripIcon } from '../../shared/components/dragDrop/GripIcon'
 import { Ellipsis } from '../../shared/components/icons'
-import { getVegaLiteProps } from '../util/vega'
 
 interface ZoomablePlotProps {
   id: string
@@ -28,10 +27,9 @@ export const ZoomablePlot: React.FC<ZoomablePlotProps> = ({
 }) => {
   const spec = useGetPlot(section, id)
   const dispatch = useDispatch()
-  const currentPlotProps = useRef<VegaLiteProps>()
+  const currentPlotProps = useRef<VisualizationSpec>()
 
-  const vegaLiteProps = getVegaLiteProps(id, spec, false)
-  currentPlotProps.current = vegaLiteProps
+  currentPlotProps.current = spec
 
   const handleOnClick = (openActionsMenu?: boolean) => {
     zoomPlot()
@@ -74,10 +72,11 @@ export const ZoomablePlot: React.FC<ZoomablePlotProps> = ({
         <Ellipsis />
       </span>
       {currentPlotProps.current && (
-        <TemplateVegaLite
-          vegaLiteProps={vegaLiteProps}
+        <ExtendedVegaLite
           id={id}
           onNewView={onNewView}
+          spec={spec}
+          actions={false}
         />
       )}
     </button>

diff --git a/webview/src/plots/components/ZoomedInPlot.tsx b/webview/src/plots/components/ZoomedInPlot.tsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useRef } from 'react'
 import { PlotHeight, PlotsSection } from 'dvc/src/plots/webview/contract'
-import { TemplateVegaLite } from './templatePlots/TemplateVegaLite'
+import { ExtendedVegaLite } from './vegaLite/ExtendedVegaLite'
 import styles from './styles.module.scss'
 import { plotDataStore } from './plotDataStore'
+import { fillTemplate } from './vegaLite/util'
 import {
   exportPlotDataAsCsv,
   exportPlotDataAsJson,
   exportPlotDataAsTsv
 } from '../util/messages'
-import { fillTemplate, getVegaLiteProps } from '../util/vega'
 
 type ZoomedInPlotProps = {
   id: string
@@ -72,23 +72,23 @@ export const ZoomedInPlot: React.FC<ZoomedInPlotProps> = ({
   if (!spec) {
     return
   }
-  const vegaLiteProps = getVegaLiteProps(id, spec, {
-    compiled: false,
-    editor: false,
-    export: true,
-    source: false
-  })
 
   return (
     <div
       className={styles.zoomedInPlot}
       data-testid="zoomed-in-plot"
       ref={zoomedInPlotRef}
     >
-      <TemplateVegaLite
+      <ExtendedVegaLite
+        actions={{
+          compiled: false,
+          editor: false,
+          export: true,
+          source: false
+        }}
         id={id}
-        vegaLiteProps={vegaLiteProps}
         onNewView={onNewView}
+        spec={spec}
       />
     </div>
   )

diff --git a/...onents/templatePlots/TemplateVegaLite.tsx → .../components/vegaLite/ExtendedVegaLite.tsx b/...onents/templatePlots/TemplateVegaLite.tsx → .../components/vegaLite/ExtendedVegaLite.tsx
@@ -1,24 +1,42 @@
 import React, { useEffect, useRef } from 'react'
 import VegaLite, { VegaLiteProps } from 'react-vega/lib/VegaLite'
 import { useSelector } from 'react-redux'
-import { View } from 'react-vega'
+import { View, VisualizationSpec } from 'react-vega'
 import { PlotsState } from '../../store'
 import { setSmoothPlotValues } from '../../util/messages'
+import { config } from '../constants'
 
 interface VegaState {
   signals?: { [name: string]: number | undefined }
   data?: unknown
 }
 
-export const TemplateVegaLite = ({
+export const ExtendedVegaLite = ({
+  actions,
   id,
   onNewView,
-  vegaLiteProps
+  spec
 }: {
+  actions:
+    | false
+    | {
+        compiled: false
+        editor: false
+        export: true
+        source: false
+      }
   id: string
   onNewView: () => void
-  vegaLiteProps: VegaLiteProps
+  spec: VisualizationSpec
 }) => {
+  const vegaLiteProps: VegaLiteProps = {
+    actions,
+    config,
+    'data-testid': `${id}-vega`,
+    renderer: 'svg',
+    spec: spec || {}
+  } as VegaLiteProps
+
   const vegaView = useRef<View>()
   const plotWrapperEl = useRef<HTMLSpanElement>(null)
   const smoothPlotValues = useSelector(

diff --git a/webview/src/plots/util/vega.ts → ...iew/src/plots/components/vegaLite/util.ts b/webview/src/plots/util/vega.ts → ...iew/src/plots/components/vegaLite/util.ts
@@ -1,29 +1,7 @@
-import { VegaLiteProps } from 'react-vega/lib/VegaLite'
 import { AnchorDefinitions } from 'dvc/src/cli/dvc/contract'
 import { DEFAULT_NB_ITEMS_PER_ROW } from 'dvc/src/plots/webview/contract'
 import { VisualizationSpec } from 'react-vega'
 import { truncate } from 'vega-util'
-import { config } from '../components/constants'
-
-export const getVegaLiteProps = (
-  id: string,
-  spec: VisualizationSpec | undefined,
-  actions:
-    | false
-    | {
-        compiled: false
-        editor: false
-        export: true
-        source: false
-      }
-) =>
-  ({
-    actions,
-    config,
-    'data-testid': `${id}-vega`,
-    renderer: 'svg',
-    spec: spec || {}
-  }) as VegaLiteProps
 
 export const fillTemplate = (
   plot:

diff --git a/webview/src/plots/hooks/useGetPlot.ts b/webview/src/plots/hooks/useGetPlot.ts
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
 import { VisualizationSpec } from 'react-vega'
 import { plotDataStore } from '../components/plotDataStore'
 import { PlotsState } from '../store'
-import { fillTemplate } from '../util/vega'
+import { fillTemplate } from '../components/vegaLite/util'
 
 export const useGetPlot = (section: PlotsSection, id: string) => {
   const isTemplatePlot = section === PlotsSection.TEMPLATE_PLOTS
@@ -24,11 +24,7 @@ export const useGetPlot = (section: PlotsSection, id: string) => {
       return
     }
 
-    setSpec({
-      ...spec,
-      height: 'container',
-      width: 'container'
-    } as VisualizationSpec)
+    setSpec(spec)
   }, [section, id, nbItemsPerRow, height])
 
   useEffect(() => {