Merge branch 'main' into remove-checkpoints-from-collection

iterative · Apr 5, 2023 · d74fb97 · d74fb97
2 parents 879ccdc + 4127ace
commit d74fb97
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 21 deletions.
diff --git a/webview/src/plots/components/App.test.tsx b/webview/src/plots/components/App.test.tsx
@@ -1484,6 +1484,38 @@ describe('App', () => {
     ).not.toBeInTheDocument()
   })
 
+  it('should update the scale of multiview plots when the number of revisions change', () => {
+    renderAppWithOptionalData({
+      template: complexTemplatePlotsFixture
+    })
+
+    const multiViewId = join('other', 'multiview.tsv')
+    const multiViewPlot = screen.getByTestId(`plot_${multiViewId}`)
+
+    expect(multiViewPlot).toHaveStyle('--scale: 5')
+
+    sendSetDataMessage({
+      template: {
+        ...complexTemplatePlotsFixture,
+        plots: [
+          complexTemplatePlotsFixture.plots[0],
+          {
+            entries: [
+              {
+                ...templatePlot,
+                id: join('other', 'multiview.tsv'),
+                revisions: ['a', 'b']
+              }
+            ],
+            group: TemplatePlotGroup.MULTI_VIEW
+          }
+        ]
+      }
+    })
+
+    expect(multiViewPlot).toHaveStyle('--scale: 2')
+  })
+
   describe('Virtualization', () => {
     const createCustomPlots = (nbOfPlots: number): CustomPlotsData => {
       const plots = []

diff --git a/webview/src/plots/components/templatePlots/TemplatePlotsGrid.tsx b/webview/src/plots/components/templatePlots/TemplatePlotsGrid.tsx
@@ -1,6 +1,6 @@
 import cx from 'classnames'
 import { PlotsSection } from 'dvc/src/plots/webview/contract'
-import React, { useEffect, useCallback, useMemo } from 'react'
+import React, { useEffect, useCallback, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { changeDisabledDragIds } from './templatePlotsSlice'
 import { VirtualizedGrid } from '../../../shared/components/virtualizedGrid/VirtualizedGrid'
@@ -63,16 +63,14 @@ export const TemplatePlotsGrid: React.FC<TemplatePlotsGridProps> = ({
     e.stopPropagation()
   }, [])
 
-  useEffect(() => {
-    const panels = document.querySelectorAll('.vega-bindings')
-    return () => {
-      for (const panel of Object.values(panels)) {
-        panel.removeEventListener('mouseenter', addDisabled)
-        panel.removeEventListener('mouseleave', removeDisabled)
-        panel.removeEventListener('click', disableClick)
-      }
-    }
-  }, [addDisabled, removeDisabled, disableClick])
+  const revisionsLength = multiView
+    ? entries
+        .map(
+          entry =>
+            plotDataStore[PlotsSection.TEMPLATE_PLOTS][entry].revisions?.length
+        )
+        .join('')
+    : ''
 
   const addEventsOnViewReady = useCallback(() => {
     const panels = document.querySelectorAll('.vega-bindings')
@@ -83,15 +81,14 @@ export const TemplatePlotsGrid: React.FC<TemplatePlotsGridProps> = ({
     }
   }, [addDisabled, removeDisabled, disableClick])
 
-  const setEntriesOrder = (order: string[]) =>
-    setSectionEntries(groupIndex, order)
+  const [items, setItems] = useState<JSX.Element[]>([])
 
-  const plotClassName = cx(styles.plot, {
-    [styles.multiViewPlot]: multiView
-  })
+  useEffect(() => {
+    const plotClassName = cx(styles.plot, {
+      [styles.multiViewPlot]: multiView
+    })
 
-  const items = useMemo(
-    () =>
+    setItems(
       entries.map((plot: string) => {
         const colSpan =
           (multiView &&
@@ -117,9 +114,12 @@ export const TemplatePlotsGrid: React.FC<TemplatePlotsGridProps> = ({
             />
           </div>
         )
-      }),
-    [entries, plotClassName, addEventsOnViewReady, nbItemsPerRow, multiView]
-  )
+      })
+    )
+  }, [entries, addEventsOnViewReady, nbItemsPerRow, multiView, revisionsLength])
+
+  const setEntriesOrder = (order: string[]) =>
+    setSectionEntries(groupIndex, order)
 
   return (
     <DragDropContainer