diff --git a/webview/src/plots/components/App.test.tsx b/webview/src/plots/components/App.test.tsx index 1862f3d525..1614605d20 100644 --- 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 index 10696cc259..6ff1f38361 100644 --- 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 = ({ 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 = ({ } }, [addDisabled, removeDisabled, disableClick]) - const setEntriesOrder = (order: string[]) => - setSectionEntries(groupIndex, order) + const [items, setItems] = useState([]) - 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 = ({ /> ) - }), - [entries, plotClassName, addEventsOnViewReady, nbItemsPerRow, multiView] - ) + }) + ) + }, [entries, addEventsOnViewReady, nbItemsPerRow, multiView, revisionsLength]) + + const setEntriesOrder = (order: string[]) => + setSectionEntries(groupIndex, order) return (