diff --git a/extension/src/plots/model/collect.ts b/extension/src/plots/model/collect.ts index f8df5e1265..187a2581f0 100644 --- a/extension/src/plots/model/collect.ts +++ b/extension/src/plots/model/collect.ts @@ -11,8 +11,7 @@ import { Plot, TemplatePlotEntry, TemplatePlotSection, - PlotsType, - PlotSize + PlotsType } from '../webview/contract' import { ExperimentFieldsOrError, @@ -599,7 +598,7 @@ const collectTemplateGroup = ( selectedRevisions: string[], templates: TemplateAccumulator, revisionData: RevisionData, - size: PlotSize, + size: number, revisionColors: ColorScale | undefined, multiSourceEncoding: MultiSourceEncoding ): TemplatePlotEntry[] => { @@ -640,7 +639,7 @@ export const collectSelectedTemplatePlots = ( selectedRevisions: string[], templates: TemplateAccumulator, revisionData: RevisionData, - size: PlotSize, + size: number, revisionColors: ColorScale | undefined, multiSourceEncoding: MultiSourceEncoding ): TemplatePlotSection[] | undefined => { diff --git a/extension/src/plots/model/index.test.ts b/extension/src/plots/model/index.test.ts index 3213a9511d..c0aca7f906 100644 --- a/extension/src/plots/model/index.test.ts +++ b/extension/src/plots/model/index.test.ts @@ -2,7 +2,7 @@ import { PlotsModel } from '.' import { DEFAULT_SECTION_COLLAPSED, DEFAULT_SECTION_SIZES, - PlotSize, + PlotSizeNumber, Section } from '../webview/contract' import { buildMockMemento } from '../../test/util' @@ -64,25 +64,28 @@ describe('plotsModel', () => { it('should change the plotSize when calling setPlotSize', () => { expect(model.getPlotSize(Section.CHECKPOINT_PLOTS)).toStrictEqual( - PlotSize.REGULAR + PlotSizeNumber.REGULAR ) - model.setPlotSize(Section.CHECKPOINT_PLOTS, PlotSize.LARGE) + model.setPlotSize(Section.CHECKPOINT_PLOTS, PlotSizeNumber.LARGE) expect(model.getPlotSize(Section.CHECKPOINT_PLOTS)).toStrictEqual( - PlotSize.LARGE + PlotSizeNumber.LARGE ) }) it('should update the persisted plot size when calling setPlotSize', () => { const mementoUpdateSpy = jest.spyOn(memento, 'update') - model.setPlotSize(Section.CHECKPOINT_PLOTS, PlotSize.SMALL) + model.setPlotSize(Section.CHECKPOINT_PLOTS, PlotSizeNumber.REGULAR) expect(mementoUpdateSpy).toHaveBeenCalledTimes(1) expect(mementoUpdateSpy).toHaveBeenCalledWith( PersistenceKey.PLOT_SIZES + exampleDvcRoot, - { ...DEFAULT_SECTION_SIZES, [Section.CHECKPOINT_PLOTS]: PlotSize.SMALL } + { + ...DEFAULT_SECTION_SIZES, + [Section.CHECKPOINT_PLOTS]: PlotSizeNumber.REGULAR + } ) }) diff --git a/extension/src/plots/model/index.ts b/extension/src/plots/model/index.ts index e90f89bf40..efb3d32e07 100644 --- a/extension/src/plots/model/index.ts +++ b/extension/src/plots/model/index.ts @@ -21,9 +21,9 @@ import { ComparisonRevisionData, DEFAULT_SECTION_COLLAPSED, DEFAULT_SECTION_SIZES, - PlotSize, Section, - SectionCollapsed + SectionCollapsed, + PlotSizeNumber } from '../webview/contract' import { ExperimentsOutput, PlotsOutput } from '../../cli/dvc/contract' import { Experiments } from '../../experiments' @@ -43,7 +43,7 @@ import { export class PlotsModel extends ModelWithPersistence { private readonly experiments: Experiments - private plotSizes: Record + private plotSizes: Record private sectionCollapsed: SectionCollapsed private branchRevisions: Record = {} private workspaceRunningCheckpoint: string | undefined @@ -281,13 +281,13 @@ export class PlotsModel extends ModelWithPersistence { this.persist(PersistenceKey.PLOT_METRIC_ORDER, this.metricOrder) } - public setPlotSize(section: Section, size: PlotSize) { + public setPlotSize(section: Section, size: number) { this.plotSizes[section] = size this.persist(PersistenceKey.PLOT_SIZES, this.plotSizes) } public getPlotSize(section: Section) { - return this.plotSizes[section] + return this.plotSizes[section] || PlotSizeNumber.REGULAR } public setSectionCollapsed(newState: Partial) { diff --git a/extension/src/plots/vega/util.test.ts b/extension/src/plots/vega/util.test.ts index 30bdca8828..b2106945d5 100644 --- a/extension/src/plots/vega/util.test.ts +++ b/extension/src/plots/vega/util.test.ts @@ -18,7 +18,7 @@ import scatterTemplate from '../../test/fixtures/plotsDiff/templates/scatter' import smoothTemplate from '../../test/fixtures/plotsDiff/templates/smooth' import multiSourceTemplate from '../../test/fixtures/plotsDiff/templates/multiSource' import { copyOriginalColors } from '../../experiments/model/status/colors' -import { PlotSize } from '../webview/contract' +import { PlotSizeNumber } from '../webview/contract' describe('isMultiViewPlot', () => { it('should recognize the confusion matrix template as a multi view plot', () => { @@ -83,7 +83,7 @@ describe('getColorScale', () => { describe('extendVegaSpec', () => { it('should not add encoding if no color scale is provided', () => { - const extendedSpec = extendVegaSpec(linearTemplate, PlotSize.REGULAR) + const extendedSpec = extendVegaSpec(linearTemplate, PlotSizeNumber.REGULAR) expect(extendedSpec.encoding).toBeUndefined() }) @@ -92,9 +92,13 @@ describe('extendVegaSpec', () => { domain: ['workspace', 'main'], range: copyOriginalColors().slice(0, 2) } - const extendedSpec = extendVegaSpec(linearTemplate, PlotSize.REGULAR, { - color: colorScale - }) + const extendedSpec = extendVegaSpec( + linearTemplate, + PlotSizeNumber.REGULAR, + { + color: colorScale + } + ) expect(extendedSpec).not.toStrictEqual(defaultTemplate) expect(extendedSpec.encoding.color).toStrictEqual({ @@ -135,7 +139,7 @@ describe('extendVegaSpec', () => { it('should truncate all titles from the left to 50 characters for large plots', () => { const spec = withLongTemplatePlotTitle() - const updatedSpec = extendVegaSpec(spec, PlotSize.LARGE) + const updatedSpec = extendVegaSpec(spec, 500) const truncatedTitle = '…-many-many-characters-at-least-seventy-characters' const truncatedHorizontalTitle = @@ -161,7 +165,7 @@ describe('extendVegaSpec', () => { it('should truncate all titles from the left to 50 characters for regular plots', () => { const spec = withLongTemplatePlotTitle() - const updatedSpec = extendVegaSpec(spec, PlotSize.REGULAR) + const updatedSpec = extendVegaSpec(spec, PlotSizeNumber.REGULAR) const truncatedTitle = '…-many-many-characters-at-least-seventy-characters' const truncatedHorizontalTitle = @@ -187,7 +191,7 @@ describe('extendVegaSpec', () => { it('should truncate all titles from the left to 30 characters for small plots', () => { const spec = withLongTemplatePlotTitle() - const updatedSpec = extendVegaSpec(spec, PlotSize.SMALL) + const updatedSpec = extendVegaSpec(spec, 300) const truncatedTitle = '…s-at-least-seventy-characters' const truncatedHorizontalTitle = '…at-least-seventy-characters-x' @@ -217,7 +221,7 @@ describe('extendVegaSpec', () => { text: repeatedTitle }) - const updatedSpec = extendVegaSpec(spec, PlotSize.SMALL) + const updatedSpec = extendVegaSpec(spec, 300) const truncatedTitle = '…ghijklmnopqrstuvwyz1234567890' @@ -234,7 +238,7 @@ describe('extendVegaSpec', () => { const repeatedTitle = 'abcdefghijklmnopqrstuvwyz1234567890' const spec = withLongTemplatePlotTitle([repeatedTitle, repeatedTitle]) - const updatedSpec = extendVegaSpec(spec, PlotSize.SMALL) + const updatedSpec = extendVegaSpec(spec, 300) const truncatedTitle = '…ghijklmnopqrstuvwyz1234567890' @@ -254,7 +258,7 @@ describe('extendVegaSpec', () => { text: [repeatedTitle, repeatedTitle] }) - const updatedSpec = extendVegaSpec(spec, PlotSize.SMALL) + const updatedSpec = extendVegaSpec(spec, 300) const truncatedTitle = '…ghijklmnopqrstuvwyz1234567890' @@ -268,7 +272,7 @@ describe('extendVegaSpec', () => { }) it('should update the multi-source template to remove erroneous shape encoding from the vertical line displayed on hover', () => { - const updatedSpec = extendVegaSpec(multiSourceTemplate, PlotSize.LARGE, { + const updatedSpec = extendVegaSpec(multiSourceTemplate, 500, { color: { domain: [], range: [] }, shape: { field: 'field', diff --git a/extension/src/plots/vega/util.ts b/extension/src/plots/vega/util.ts index cce14a7e75..48dfff832d 100644 --- a/extension/src/plots/vega/util.ts +++ b/extension/src/plots/vega/util.ts @@ -20,7 +20,7 @@ import { } from 'vega-lite/build/src/spec/repeat' import { TopLevelUnitSpec } from 'vega-lite/build/src/spec/unit' import isEqual from 'lodash.isequal' -import { ColorScale, PlotSize, Revision } from '../webview/contract' +import { ColorScale, PlotSizeNumber, Revision } from '../webview/contract' import { ShapeEncoding, StrokeDashEncoding } from '../multiSource/constants' const COMMIT_FIELD = 'rev' @@ -214,9 +214,9 @@ const truncateTitleAsArrayOrString = (title: Text, size: number) => { } const TitleLimit = { - [PlotSize.LARGE]: 50, - [PlotSize.REGULAR]: 50, - [PlotSize.SMALL]: 30 + [PlotSizeNumber.LARGE]: 50, + [PlotSizeNumber.REGULAR]: 50, + [PlotSizeNumber.SMALL]: 30 } const truncateTitlePart = ( @@ -252,15 +252,15 @@ const truncateTitle = ( return titleCopy } -export const truncateVerticalTitle = (title: Text | Title, size: PlotSize) => - truncateTitle(title, TitleLimit[size] * 0.75) +export const truncateVerticalTitle = (title: Text | Title, size: number) => + truncateTitle(title, TitleLimit[size as keyof typeof TitleLimit] * 0.75) const isEndValue = (valueType: string) => ['string', 'number', 'boolean'].includes(valueType) export const truncateTitles = ( spec: TopLevelSpec, - size: PlotSize, + size: number, vertical?: boolean // eslint-disable-next-line sonarjs/cognitive-complexity ) => { @@ -281,7 +281,7 @@ export const truncateTitles = ( const title = value as unknown as Title specCopy[key] = vertical ? truncateVerticalTitle(title, size) - : truncateTitle(title, TitleLimit[size]) + : truncateTitle(title, TitleLimit[size as keyof typeof TitleLimit]) } else if (isEndValue(valueType)) { specCopy[key] = value } else if (Array.isArray(value)) { @@ -299,7 +299,7 @@ export const truncateTitles = ( export const extendVegaSpec = ( spec: TopLevelSpec, - size: PlotSize, + size: number, encoding?: { color?: ColorScale strokeDash?: StrokeDashEncoding diff --git a/extension/src/plots/webview/contract.ts b/extension/src/plots/webview/contract.ts index b7892fd04e..492a822a3c 100644 --- a/extension/src/plots/webview/contract.ts +++ b/extension/src/plots/webview/contract.ts @@ -1,15 +1,12 @@ import { VisualizationSpec } from 'react-vega' import { Color } from '../../experiments/model/status/colors' -export const PlotSize = { - LARGE: 'LARGE', - REGULAR: 'REGULAR', - SMALL: 'SMALL' +export const PlotSizeNumber = { + LARGE: 500, + REGULAR: 400, + SMALL: 300 } -type PlotSizeKeys = keyof typeof PlotSize -export type PlotSize = typeof PlotSize[PlotSizeKeys] - export enum Section { CHECKPOINT_PLOTS = 'checkpoint-plots', TEMPLATE_PLOTS = 'template-plots', @@ -17,9 +14,9 @@ export enum Section { } export const DEFAULT_SECTION_SIZES = { - [Section.CHECKPOINT_PLOTS]: PlotSize.REGULAR, - [Section.TEMPLATE_PLOTS]: PlotSize.REGULAR, - [Section.COMPARISON_TABLE]: PlotSize.REGULAR + [Section.CHECKPOINT_PLOTS]: PlotSizeNumber.REGULAR, + [Section.TEMPLATE_PLOTS]: PlotSizeNumber.REGULAR, + [Section.COMPARISON_TABLE]: PlotSizeNumber.REGULAR } export const DEFAULT_SECTION_COLLAPSED = { @@ -46,7 +43,7 @@ export type Revision = { export interface PlotsComparisonData { plots: ComparisonPlots - size: PlotSize + size: number } export type CheckpointPlotValues = { @@ -67,7 +64,7 @@ export type CheckpointPlotData = CheckpointPlot & { title: string } export type CheckpointPlotsData = { plots: CheckpointPlotData[] colors: ColorScale - size: PlotSize + size: number selectedMetrics?: string[] } @@ -115,7 +112,7 @@ export type TemplatePlotSection = { export interface TemplatePlotsData { plots: TemplatePlotSection[] - size: PlotSize + size: number } export type ComparisonPlot = { diff --git a/extension/src/plots/webview/messages.ts b/extension/src/plots/webview/messages.ts index 4056ecc06e..cc268c9963 100644 --- a/extension/src/plots/webview/messages.ts +++ b/extension/src/plots/webview/messages.ts @@ -3,7 +3,6 @@ import { ComparisonPlot, ComparisonRevisionData, PlotsData as TPlotsData, - PlotSize, Section, SectionCollapsed } from './contract' @@ -102,7 +101,7 @@ export class WebviewMessages { this.sendCheckpointPlotsAndEvent(EventName.VIEWS_PLOTS_METRICS_SELECTED) } - private setPlotSize(section: Section, size: PlotSize) { + private setPlotSize(section: Section, size: number) { this.plots.setPlotSize(section, size) sendTelemetryEvent( EventName.VIEWS_PLOTS_SECTION_RESIZED, diff --git a/extension/src/telemetry/constants.ts b/extension/src/telemetry/constants.ts index fe8149ea04..bcb2a590e4 100644 --- a/extension/src/telemetry/constants.ts +++ b/extension/src/telemetry/constants.ts @@ -2,7 +2,7 @@ import { ViewColumn } from 'vscode' import { WorkspaceScale } from './collect' import { RegisteredCliCommands, RegisteredCommands } from '../commands/external' import { SortDefinition } from '../experiments/model/sortBy' -import { PlotSize, Section, SectionCollapsed } from '../plots/webview/contract' +import { Section, SectionCollapsed } from '../plots/webview/contract' export const APPLICATION_INSIGHTS_KEY = '46e8e554-d50a-471a-a53b-4af2b1cd6594' export const EXTENSION_ID = 'iterative.dvc' @@ -236,7 +236,7 @@ export interface IEventNamePropertyMapping { [EventName.VIEWS_PLOTS_METRICS_SELECTED]: undefined [EventName.VIEWS_PLOTS_REVISIONS_REORDERED]: undefined [EventName.VIEWS_PLOTS_COMPARISON_ROWS_REORDERED]: undefined - [EventName.VIEWS_PLOTS_SECTION_RESIZED]: { section: Section; size: PlotSize } + [EventName.VIEWS_PLOTS_SECTION_RESIZED]: { section: Section; size: number } [EventName.VIEWS_PLOTS_SECTION_TOGGLE]: Partial [EventName.VIEWS_PLOTS_SELECT_EXPERIMENTS]: undefined [EventName.VIEWS_PLOTS_SELECT_PLOTS]: undefined diff --git a/extension/src/test/fixtures/expShow/checkpointPlots.ts b/extension/src/test/fixtures/expShow/checkpointPlots.ts index 60ffb75137..bb2cc72531 100644 --- a/extension/src/test/fixtures/expShow/checkpointPlots.ts +++ b/extension/src/test/fixtures/expShow/checkpointPlots.ts @@ -1,5 +1,8 @@ import { copyOriginalColors } from '../../../experiments/model/status/colors' -import { CheckpointPlotsData, PlotSize } from '../../../plots/webview/contract' +import { + CheckpointPlotsData, + PlotSizeNumber +} from '../../../plots/webview/contract' const colors = copyOriginalColors() @@ -88,7 +91,7 @@ const data: CheckpointPlotsData = { 'summary.json:val_loss', 'summary.json:val_accuracy' ], - size: PlotSize.REGULAR + size: PlotSizeNumber.REGULAR } export default data diff --git a/extension/src/test/fixtures/plotsDiff/index.ts b/extension/src/test/fixtures/plotsDiff/index.ts index d5a70022c2..dd89d8c46c 100644 --- a/extension/src/test/fixtures/plotsDiff/index.ts +++ b/extension/src/test/fixtures/plotsDiff/index.ts @@ -6,11 +6,11 @@ import { ComparisonPlots, ComparisonRevisionData, TemplatePlotSection, - PlotSize, PlotsType, TemplatePlotGroup, TemplatePlotsData, - TemplatePlots + TemplatePlots, + PlotSizeNumber } from '../../../plots/webview/contract' import { join } from '../../util/path' import { copyOriginalColors } from '../../../experiments/model/status/colors' @@ -482,7 +482,7 @@ const extendedSpecs = (plotsOutput: TemplatePlots): TemplatePlotSection[] => { ) || [] } } as TopLevelSpec, - PlotSize.REGULAR, + PlotSizeNumber.REGULAR, { color: { domain: expectedRevisions, @@ -539,13 +539,13 @@ export const getRevisions = () => { export const getMinimalWebviewMessage = () => ({ plots: extendedSpecs(basicVega), - size: PlotSize.REGULAR, + size: PlotSizeNumber.REGULAR, revisions: getRevisions() }) export const getTemplateWebviewMessage = (): TemplatePlotsData => ({ plots: extendedSpecs({ ...basicVega, ...require('./vega').default }), - size: PlotSize.REGULAR + size: PlotSizeNumber.REGULAR }) export const getManyTemplatePlotsWebviewMessage = ( @@ -554,7 +554,7 @@ export const getManyTemplatePlotsWebviewMessage = ( plots: extendedSpecs({ ...multipleVega(length) }), - size: PlotSize.REGULAR + size: PlotSizeNumber.REGULAR }) export const MOCK_IMAGE_MTIME = 946684800000 @@ -579,6 +579,6 @@ export const getComparisonWebviewMessage = ( return { plots: plotAcc, - size: PlotSize.REGULAR + size: PlotSizeNumber.REGULAR } } diff --git a/extension/src/test/suite/experiments/index.test.ts b/extension/src/test/suite/experiments/index.test.ts index 146f88e7d3..dfc3c03f0c 100644 --- a/extension/src/test/suite/experiments/index.test.ts +++ b/extension/src/test/suite/experiments/index.test.ts @@ -66,6 +66,7 @@ import { DvcExecutor } from '../../../cli/dvc/executor' import { shortenForLabel } from '../../../util/string' import { GitExecutor } from '../../../cli/git/executor' import { WorkspacePlots } from '../../../plots/workspace' +import { PlotSizeNumber } from '../../../plots/webview/contract' import { RegisteredCommands } from '../../../commands/external' import { ConfigKey } from '../../../vscode/config' @@ -259,7 +260,7 @@ suite('Experiments Test Suite', () => { ).returns(undefined) const mockColumnId = 'params:params.yaml:lr' - const mockWidth = 400 + const mockWidth = PlotSizeNumber.REGULAR mockMessageReceived.fire({ payload: { id: mockColumnId, width: mockWidth }, diff --git a/extension/src/test/suite/plots/index.test.ts b/extension/src/test/suite/plots/index.test.ts index d57be0ea27..0f7c15b92a 100644 --- a/extension/src/test/suite/plots/index.test.ts +++ b/extension/src/test/suite/plots/index.test.ts @@ -25,7 +25,7 @@ import { basePlotsUrl, dvcDemoPath } from '../../util' import { DEFAULT_SECTION_COLLAPSED, PlotsData as TPlotsData, - PlotSize, + PlotSizeNumber, PlotsType, Section, TemplatePlotGroup, @@ -328,21 +328,24 @@ suite('Plots Test Suite', () => { const mockSetPlotSize = stub(plotsModel, 'setPlotSize').returns(undefined) mockMessageReceived.fire({ - payload: { section: Section.TEMPLATE_PLOTS, size: PlotSize.SMALL }, + payload: { + section: Section.TEMPLATE_PLOTS, + size: PlotSizeNumber.SMALL + }, type: MessageFromWebviewType.RESIZE_PLOTS }) expect(mockSetPlotSize).to.be.calledOnce expect(mockSetPlotSize).to.be.calledWithExactly( Section.TEMPLATE_PLOTS, - PlotSize.SMALL + PlotSizeNumber.SMALL ) expect(mockSendTelemetryEvent).to.be.calledOnce expect(mockSendTelemetryEvent).to.be.calledWithExactly( EventName.VIEWS_PLOTS_SECTION_RESIZED, { section: Section.TEMPLATE_PLOTS, - size: PlotSize.SMALL + size: PlotSizeNumber.SMALL }, undefined ) diff --git a/extension/src/webview/contract.ts b/extension/src/webview/contract.ts index d834eafdfd..0754c418b8 100644 --- a/extension/src/webview/contract.ts +++ b/extension/src/webview/contract.ts @@ -2,7 +2,6 @@ import { SortDefinition } from '../experiments/model/sortBy' import { TableData } from '../experiments/webview/contract' import { PlotsData, - PlotSize, Section, SectionCollapsed, TemplatePlotGroup @@ -53,7 +52,7 @@ export type ColumnResizePayload = { id: string width: number } -export type PlotsResizedPayload = { section: Section; size: PlotSize } +export type PlotsResizedPayload = { section: Section; size: number } export type PlotSectionRenamedPayload = { section: Section name: string diff --git a/webview/src/plots/components/App.test.tsx b/webview/src/plots/components/App.test.tsx index cb03575d5c..e955d114ed 100644 --- a/webview/src/plots/components/App.test.tsx +++ b/webview/src/plots/components/App.test.tsx @@ -21,7 +21,7 @@ import manyTemplatePlots from 'dvc/src/test/fixtures/plotsDiff/template/virtuali import { DEFAULT_SECTION_COLLAPSED, PlotsData, - PlotSize, + PlotSizeNumber, Section, TemplatePlotGroup, TemplatePlotsData, @@ -48,6 +48,7 @@ import { import { DragEnterDirection } from '../../shared/components/dragDrop/util' import { clearSelection, createWindowTextSelection } from '../../test/selection' import * as EventCurrentTargetDistances from '../../shared/components/dragDrop/currentTarget' +import { OVERSCAN_ROW_COUNT } from '../../shared/components/virtualizedGrid/VirtualizedGrid' jest.mock('../../shared/components/dragDrop/currentTarget', () => { const actualModule = jest.requireActual( @@ -589,15 +590,21 @@ describe('App', () => { fireEvent.click(smallButton) let wrapper = await getWrapper() - expect(wrapper).toHaveClass('smallPlots') + expect( + JSON.stringify(wrapper.style).includes(`${PlotSizeNumber.SMALL}`) + ).toBe(true) fireEvent.click(regularButton) wrapper = await getWrapper() - expect(wrapper).toHaveClass('regularPlots') + expect( + JSON.stringify(wrapper.style).includes(`${PlotSizeNumber.REGULAR}`) + ).toBe(true) fireEvent.click(largeButton) wrapper = await getWrapper() - expect(wrapper).toHaveClass('largePlots') + expect( + JSON.stringify(wrapper.style).includes(`${PlotSizeNumber.LARGE}`) + ).toBe(true) }) it('should send a message to the extension with the selected size when changing the size of plots', () => { @@ -613,7 +620,10 @@ describe('App', () => { fireEvent.click(largeButton) expect(mockPostMessage).toHaveBeenCalledWith({ - payload: { section: Section.CHECKPOINT_PLOTS, size: PlotSize.LARGE }, + payload: { + section: Section.CHECKPOINT_PLOTS, + size: PlotSizeNumber.LARGE + }, type: MessageFromWebviewType.RESIZE_PLOTS }) @@ -621,7 +631,10 @@ describe('App', () => { fireEvent.click(smallButton) expect(mockPostMessage).toHaveBeenCalledWith({ - payload: { section: Section.CHECKPOINT_PLOTS, size: PlotSize.SMALL }, + payload: { + section: Section.CHECKPOINT_PLOTS, + size: PlotSizeNumber.SMALL + }, type: MessageFromWebviewType.RESIZE_PLOTS }) }) @@ -639,7 +652,10 @@ describe('App', () => { fireEvent.click(largeButton) expect(mockPostMessage).toHaveBeenCalledWith({ - payload: { section: Section.CHECKPOINT_PLOTS, size: PlotSize.LARGE }, + payload: { + section: Section.CHECKPOINT_PLOTS, + size: PlotSizeNumber.LARGE + }, type: MessageFromWebviewType.RESIZE_PLOTS }) @@ -1457,7 +1473,7 @@ describe('App', () => { ) }) - it('should render one large plot per row per 1000px of screen when the screen is larger than 2000px', () => { + it('should render the plots correctly when the screen is larger than 2000px', () => { resizeScreen(3000) let plots = screen.getAllByTestId(/^plot-/) @@ -1473,7 +1489,7 @@ describe('App', () => { expect(plots.length).toBe(checkpoint.plots.length) }) - it('should render three large plot per row when the screen is larger than 1600px (but less than 2000px)', () => { + it('should render the plots correctly when the screen is larger than 1600px (but less than 2000px)', () => { resizeScreen(1849) const plots = screen.getAllByTestId(/^plot-/) @@ -1482,16 +1498,16 @@ describe('App', () => { expect(plots.length).toBe(checkpoint.plots.length) }) - it('should render two large plot per row when the screen is larger than 800px (but less than 1600px)', () => { + it('should render the plots correctly when the screen is larger than 800px (but less than 1600px)', () => { resizeScreen(936) const plots = screen.getAllByTestId(/^plot-/) - expect(plots[24].id).toBe(checkpoint.plots[24].title) - expect(plots.length).toBe(checkpoint.plots.length) + expect(plots[14].id).toBe(checkpoint.plots[14].title) + expect(plots.length).toBe(1 + OVERSCAN_ROW_COUNT) // Only the first and the next lines defined by the overscan row count will be rendered }) - it('should render one large plot per row when the screen is smaller than 800px', () => { + it('should render the plots correctly when the screen is smaller than 800px', () => { resizeScreen(563) const plots = screen.getAllByTestId(/^plot-/) @@ -1553,7 +1569,7 @@ describe('App', () => { ) }) - it('should render one regular plot per row per 800px of screen when the screen is larger than 2000px', () => { + it('should render the plots correctly when the screen is larger than 2000px', () => { resizeScreen(3200) let plots = screen.getAllByTestId(/^plot-/) @@ -1569,7 +1585,7 @@ describe('App', () => { expect(plots.length).toBe(checkpoint.plots.length) }) - it('should render four regular plot per row when the screen is larger than 1600px (but less than 2000px)', () => { + it('should render the plots correctly when the screen is larger than 1600px (but less than 2000px)', () => { resizeScreen(1889) const plots = screen.getAllByTestId(/^plot-/) @@ -1578,7 +1594,7 @@ describe('App', () => { expect(plots.length).toBe(checkpoint.plots.length) }) - it('should render three regular plot per row when the screen is larger than 800px (but less than 1600px)', () => { + it('should render the plots correctly when the screen is larger than 800px (but less than 1600px)', () => { resizeScreen(938) const plots = screen.getAllByTestId(/^plot-/) @@ -1587,7 +1603,7 @@ describe('App', () => { expect(plots.length).toBe(checkpoint.plots.length) }) - it('should render one regular plot per row when the screen is smaller than 800px', () => { + it('should render the plots correctly when the screen is smaller than 800px', () => { resizeScreen(562) const plots = screen.getAllByTestId(/^plot-/) @@ -1649,7 +1665,7 @@ describe('App', () => { ) }) - it('should render one small plot per row per 500px of screen when the screen is larger than 2000px', () => { + it('should render the plots correctly when the screen is larger than 2000px', () => { resizeScreen(3004) let plots = screen.getAllByTestId(/^plot-/) @@ -1665,7 +1681,7 @@ describe('App', () => { expect(plots.length).toBe(checkpoint.plots.length) }) - it('should render six small plot per row when the screen is larger than 1600px (but less than 2000px)', () => { + it('should render the plots correctly when the screen is larger than 1600px (but less than 2000px)', () => { resizeScreen(1839) const plots = screen.getAllByTestId(/^plot-/) @@ -1674,7 +1690,7 @@ describe('App', () => { expect(plots.length).toBe(checkpoint.plots.length) }) - it('should render four small plot per row when the screen is larger than 800px (but less than 1600px)', () => { + it('should render the plots correctly when the screen is larger than 800px (but less than 1600px)', () => { resizeScreen(956) const plots = screen.getAllByTestId(/^plot-/) @@ -1683,7 +1699,7 @@ describe('App', () => { expect(plots.length).toBe(checkpoint.plots.length) }) - it('should render one small plot per row when the screen is smaller than 800px but larger than 600px', () => { + it('should render the plots correctly when the screen is smaller than 800px but larger than 600px', () => { resizeScreen(663) const plots = screen.getAllByTestId(/^plot-/) @@ -1692,7 +1708,7 @@ describe('App', () => { expect(plots.length).toBe(checkpoint.plots.length) }) - it('should render two small plot per row when the screen is smaller than 600px', () => { + it('should render the plots correctly when the screen is smaller than 600px', () => { resizeScreen(569) const plots = screen.getAllByTestId(/^plot-/) diff --git a/webview/src/plots/components/PlotsContainer.tsx b/webview/src/plots/components/PlotsContainer.tsx index beee636082..9457e16255 100644 --- a/webview/src/plots/components/PlotsContainer.tsx +++ b/webview/src/plots/components/PlotsContainer.tsx @@ -1,6 +1,12 @@ import cx from 'classnames' -import React, { MouseEvent, useEffect, useState } from 'react' -import { PlotSize, Section } from 'dvc/src/plots/webview/contract' +import React, { + MouseEvent, + useEffect, + useState, + DetailedHTMLProps, + HTMLAttributes +} from 'react' +import { Section } from 'dvc/src/plots/webview/contract' import { MessageFromWebviewType } from 'dvc/src/webview/contract' import { PlotsPicker, PlotsPickerProps } from './PlotsPicker' import { SizePicker } from './SizePicker' @@ -21,14 +27,14 @@ import { isSelecting } from '../../util/strings' import { EventTargetWithNodeName } from '../../util/objects' export interface CommonPlotsContainerProps { - onResize: (size: PlotSize) => void + onResize: (size: number) => void } export interface PlotsContainerProps extends CommonPlotsContainerProps { sectionCollapsed: boolean sectionKey: Section title: string - currentSize: PlotSize + currentSize: number menu?: PlotsPickerProps children: React.ReactNode } @@ -87,7 +93,7 @@ export const PlotsContainer: React.FC = ({ currentSize, menu }) => { - const [size, setSize] = useState(currentSize) + const [size, setSize] = useState(currentSize || 400) const open = !sectionCollapsed @@ -95,14 +101,7 @@ export const PlotsContainer: React.FC = ({ window.dispatchEvent(new Event('resize')) }, [size]) - const sizeClass = cx({ - [styles.plotsWrapper]: sectionKey !== Section.COMPARISON_TABLE, - [styles.smallPlots]: size === PlotSize.SMALL, - [styles.regularPlots]: size === PlotSize.REGULAR, - [styles.largePlots]: size === PlotSize.LARGE - }) - - const changeSize = (newSize: PlotSize) => { + const changeSize = (newSize: number) => { if (size === newSize) { return } @@ -177,7 +176,21 @@ export const PlotsContainer: React.FC = ({
{open && ( -
+
, + HTMLDivElement + > + } + data-testid="plots-wrapper" + > {children}
)} diff --git a/webview/src/plots/components/SizePicker.tsx b/webview/src/plots/components/SizePicker.tsx index c6f59a69a1..565be2b83f 100644 --- a/webview/src/plots/components/SizePicker.tsx +++ b/webview/src/plots/components/SizePicker.tsx @@ -1,22 +1,38 @@ -import { PlotSize } from 'dvc/src/plots/webview/contract' +import { PlotSizeNumber } from 'dvc/src/plots/webview/contract' import React from 'react' import { SelectMenuOptionProps } from '../../shared/components/selectMenu/SelectMenuOption' import { SingleSelect } from '../../shared/components/selectMenu/SingleSelect' -import { capitalize } from '../../util/strings' + +export const PlotSize = { + LARGE: 'Large', + REGULAR: 'Regular', + SMALL: 'Small' +} + +type PlotSizeKeys = keyof typeof PlotSize +export type PlotSize = typeof PlotSize[PlotSizeKeys] export const SizePicker: React.FC<{ - currentSize: string - setSelectedSize: (selectedSize: string) => void + currentSize: number + setSelectedSize: (selectedSize: number) => void }> = ({ currentSize, setSelectedSize }) => { + const numericalSize = { + [PlotSize.LARGE]: `${PlotSizeNumber.LARGE}`, + [PlotSize.REGULAR]: `${PlotSizeNumber.REGULAR}`, + [PlotSize.SMALL]: `${PlotSizeNumber.SMALL}` + } const options: SelectMenuOptionProps[] = Object.keys(PlotSize).map( plotSize => { const size = PlotSize[plotSize as keyof typeof PlotSize] + const sizeInPixels = numericalSize[size] return { - id: size, - isSelected: currentSize === size, - label: capitalize(size) + id: sizeInPixels, + isSelected: currentSize.toString() === sizeInPixels, + label: size } } ) - return + const handleSizeChange = (size: string) => + setSelectedSize(Number.parseInt(size, 10)) + return } diff --git a/webview/src/plots/components/checkpointPlots/CheckpointPlotsWrapper.tsx b/webview/src/plots/components/checkpointPlots/CheckpointPlotsWrapper.tsx index d8764504bb..708e5194b3 100644 --- a/webview/src/plots/components/checkpointPlots/CheckpointPlotsWrapper.tsx +++ b/webview/src/plots/components/checkpointPlots/CheckpointPlotsWrapper.tsx @@ -1,4 +1,4 @@ -import { PlotSize, Section } from 'dvc/src/plots/webview/contract' +import { Section } from 'dvc/src/plots/webview/contract' import { MessageFromWebviewType } from 'dvc/src/webview/contract' import React, { useEffect, useState } from 'react' import { useSelector, useDispatch } from 'react-redux' @@ -29,7 +29,7 @@ export const CheckpointPlotsWrapper: React.FC = () => { }) } - const handleResize = (size: PlotSize) => { + const handleResize = (size: number) => { dispatch(changeSize(size)) } diff --git a/webview/src/plots/components/checkpointPlots/checkpointPlotsSlice.ts b/webview/src/plots/components/checkpointPlots/checkpointPlotsSlice.ts index 074dce8fd1..3ccb74810c 100644 --- a/webview/src/plots/components/checkpointPlots/checkpointPlotsSlice.ts +++ b/webview/src/plots/components/checkpointPlots/checkpointPlotsSlice.ts @@ -3,7 +3,6 @@ import { CheckpointPlotsData, DEFAULT_SECTION_COLLAPSED, DEFAULT_SECTION_SIZES, - PlotSize, Section } from 'dvc/src/plots/webview/contract' import { @@ -32,7 +31,7 @@ export const checkpointPlotsSlice = createSlice({ initialState: checkpointPlotsInitialState, name: 'checkpoint', reducers: { - changeSize: (state, action: PayloadAction) => { + changeSize: (state, action: PayloadAction) => { state.size = action.payload }, diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableWrapper.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableWrapper.tsx index fef18cae05..e7d07f960f 100644 --- a/webview/src/plots/components/comparisonTable/ComparisonTableWrapper.tsx +++ b/webview/src/plots/components/comparisonTable/ComparisonTableWrapper.tsx @@ -1,4 +1,4 @@ -import { PlotSize, Section } from 'dvc/src/plots/webview/contract' +import { Section } from 'dvc/src/plots/webview/contract' import React from 'react' import { useSelector, useDispatch } from 'react-redux' import { ComparisonTable } from './ComparisonTable' @@ -11,7 +11,7 @@ export const ComparisonTableWrapper: React.FC = () => { const { size, isCollapsed } = useSelector( (state: PlotsState) => state.comparison ) - const handleResize = (size: PlotSize) => { + const handleResize = (size: number) => { dispatch(changeSize(size)) } diff --git a/webview/src/plots/components/comparisonTable/comparisonTableSlice.ts b/webview/src/plots/components/comparisonTable/comparisonTableSlice.ts index 59a262fd07..70a4558512 100644 --- a/webview/src/plots/components/comparisonTable/comparisonTableSlice.ts +++ b/webview/src/plots/components/comparisonTable/comparisonTableSlice.ts @@ -3,7 +3,6 @@ import { DEFAULT_SECTION_COLLAPSED, DEFAULT_SECTION_SIZES, PlotsComparisonData, - PlotSize, Section } from 'dvc/src/plots/webview/contract' @@ -30,7 +29,7 @@ export const comparisonTableSlice = createSlice({ changeRowHeight: (state, action: PayloadAction) => { state.rowHeight = action.payload }, - changeSize: (state, action: PayloadAction) => { + changeSize: (state, action: PayloadAction) => { state.size = action.payload }, setCollapsed: (state, action: PayloadAction) => { diff --git a/webview/src/plots/components/styles.module.scss b/webview/src/plots/components/styles.module.scss index 96124e5667..96e2042a83 100644 --- a/webview/src/plots/components/styles.module.scss +++ b/webview/src/plots/components/styles.module.scss @@ -103,6 +103,7 @@ $gap: 20px; display: grid; gap: $gap; grid-auto-flow: row; + grid-template-columns: repeat(auto-fill, minmax(var(--size), 1fr)); + .singleViewPlotsGrid, + .multiViewPlotsGrid { @@ -110,65 +111,11 @@ $gap: 20px; } // When editing the grid-template-column for any viewport or plot size, `getNbItemsPerRow` in the `./utils.ts` file should also be updated - .largePlots & { - grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); - } - - .regularPlots & { - grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); - } - .smallPlots & { - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - :global(.role-axis-title) text { font-size: 10px; } } - - @media (min-width: 800px) { - .largePlots & { - grid-template-columns: 1fr 1fr; - } - } - - @media (min-width: 1200px) { - .regularPlots & { - grid-template-columns: 1fr 1fr 1fr; - } - - .smallPlots & { - grid-template-columns: 1fr 1fr 1fr 1fr; - } - } - - @media (min-width: 1600px) { - .largePlots & { - grid-template-columns: 1fr 1fr 1fr; - } - - .regularPlots & { - grid-template-columns: 1fr 1fr 1fr 1fr; - } - - .smallPlots & { - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - } - } - - @media (min-width: 2000px) { - .largePlots & { - grid-template-columns: repeat(auto-fill, minmax(1fr, 1000px)); - } - - .regularPlots & { - grid-template-columns: repeat(auto-fill, minmax(1fr, 800px)); - } - - .smallPlots & { - grid-template-columns: repeat(auto-fill, minmax(1fr, 500px)); - } - } } .multiViewPlotsGrid { @@ -221,72 +168,16 @@ $gap: 20px; .plot.multiViewPlot { aspect-ratio: calc(0.8 * var(--scale) + 0.2); grid-column: span var(--scale); - - .largePlots & { - width: max-content; - } - - .regularPlots & { - width: calc(300px * var(--scale)); - } - - .smallPlots & { - width: calc(200px * var(--scale)); - } + width: calc(var(--size) * var(--scale)); + max-width: max-content; } .comparisonTable { table-layout: fixed; - width: 100%; + width: calc(var(--size) * var(--scale)); position: relative; padding: 0 20px; - - .smallPlots & { - width: calc(25% * var(--scale)); - padding-right: $gap; - min-width: calc(300px * var(--scale)); - } - - .regularPlots & { - width: calc(33% * var(--scale)); - padding-right: $gap; - min-width: calc(400px * var(--scale)); - } - - .largePlots & { - width: calc(50% * var(--scale)); - padding-right: $gap; - min-width: calc(500px * var(--scale)); - } - - @media (min-width: 1000px) { - .smallPlots & { - width: calc(20% * var(--scale)); - } - - .regularPlots & { - width: calc(25% * var(--scale)); - } - - .largePlots & { - width: calc(33% * var(--scale)); - } - } - - @media (min-width: 2000px) { - .smallPlots & { - width: calc(15% * var(--scale)); - } - - .regularPlots & { - width: calc(20% * var(--scale)); - } - - .largePlots & { - width: calc(25% * var(--scale)); - padding-right: 0; - } - } + padding-right: $gap; } .dropSectionWrapper { diff --git a/webview/src/plots/components/templatePlots/TemplatePlotsWrapper.tsx b/webview/src/plots/components/templatePlots/TemplatePlotsWrapper.tsx index 82122b2c0f..2b45f58120 100644 --- a/webview/src/plots/components/templatePlots/TemplatePlotsWrapper.tsx +++ b/webview/src/plots/components/templatePlots/TemplatePlotsWrapper.tsx @@ -1,4 +1,4 @@ -import { PlotSize, Section } from 'dvc/src/plots/webview/contract' +import { Section } from 'dvc/src/plots/webview/contract' import React from 'react' import { useSelector, useDispatch } from 'react-redux' import { TemplatePlots } from './TemplatePlots' @@ -12,7 +12,7 @@ export const TemplatePlotsWrapper: React.FC = () => { (state: PlotsState) => state.template ) - const handleResize = (size: PlotSize) => { + const handleResize = (size: number) => { dispatch(changeSize(size)) } diff --git a/webview/src/plots/components/templatePlots/templatePlotsSlice.ts b/webview/src/plots/components/templatePlots/templatePlotsSlice.ts index 0a2209648c..e8255244d6 100644 --- a/webview/src/plots/components/templatePlots/templatePlotsSlice.ts +++ b/webview/src/plots/components/templatePlots/templatePlotsSlice.ts @@ -2,7 +2,6 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit' import { DEFAULT_SECTION_COLLAPSED, DEFAULT_SECTION_SIZES, - PlotSize, Section, TemplatePlotsData } from 'dvc/src/plots/webview/contract' @@ -25,7 +24,7 @@ export const templatePlotsSlice = createSlice({ initialState: templatePlotsInitialState, name: 'template', reducers: { - changeSize: (state, action: PayloadAction) => { + changeSize: (state, action: PayloadAction) => { state.size = action.payload }, setCollapsed: (state, action: PayloadAction) => { diff --git a/webview/src/plots/components/util.ts b/webview/src/plots/components/util.ts index 96bf5e46bf..8945cb714d 100644 --- a/webview/src/plots/components/util.ts +++ b/webview/src/plots/components/util.ts @@ -1,46 +1,18 @@ -import { PlotSize } from 'dvc/src/plots/webview/contract' - -const MaxItemsBeforeVirtualization = { - [PlotSize.LARGE]: 10, - [PlotSize.REGULAR]: 15, - [PlotSize.SMALL]: 20 -} - -const maxPlotSize = { - [PlotSize.LARGE]: 1000, - [PlotSize.REGULAR]: 800, - [PlotSize.SMALL]: 500 -} +import { PlotSizeNumber } from 'dvc/src/plots/webview/contract' export const DEFAULT_NB_ITEMS_PER_ROW = 4 -const w1600NbItemsPerRow = { - [PlotSize.LARGE]: 3, - [PlotSize.REGULAR]: 4, - [PlotSize.SMALL]: 6 -} -const w800NbItemsPerRow = { - [PlotSize.LARGE]: 2, - [PlotSize.REGULAR]: 3, - [PlotSize.SMALL]: 4 -} - -export const getNbItemsPerRow = (size: PlotSize) => { - const { innerWidth } = window - if (innerWidth >= 2000) { - return Math.floor(innerWidth / maxPlotSize[size]) - } - - if (innerWidth >= 1600) { - return w1600NbItemsPerRow[size] - } +export const getNbItemsPerRow = (size: number) => + Math.floor(window.innerWidth / size) - if (innerWidth >= 800) { - return w800NbItemsPerRow[size] - } - - return size === PlotSize.SMALL && innerWidth >= 600 ? 2 : 1 +const MaxItemsBeforeVirtualization = { + [PlotSizeNumber.LARGE]: 10, + [PlotSizeNumber.REGULAR]: 15, + [PlotSizeNumber.SMALL]: 20 } -export const shouldUseVirtualizedGrid = (nbItems: number, size: PlotSize) => - nbItems > MaxItemsBeforeVirtualization[size] +export const shouldUseVirtualizedGrid = (nbItems: number, size: number) => + nbItems > + MaxItemsBeforeVirtualization[ + size as keyof typeof MaxItemsBeforeVirtualization + ] diff --git a/webview/src/plots/hooks/useNbItemsPerRow.ts b/webview/src/plots/hooks/useNbItemsPerRow.ts index c0b235cb31..52f52d315b 100644 --- a/webview/src/plots/hooks/useNbItemsPerRow.ts +++ b/webview/src/plots/hooks/useNbItemsPerRow.ts @@ -1,8 +1,7 @@ -import { PlotSize } from 'dvc/src/plots/webview/contract' import { useCallback, useEffect, useState } from 'react' import { DEFAULT_NB_ITEMS_PER_ROW, getNbItemsPerRow } from '../components/util' -export const useNbItemsPerRow = (size: PlotSize) => { +export const useNbItemsPerRow = (size: number) => { const [nbItemsPerRow, setNbItemsPerRow] = useState(DEFAULT_NB_ITEMS_PER_ROW) const changeNbItemsPerRow = useCallback( diff --git a/webview/src/shared/components/virtualizedGrid/VirtualizedGrid.tsx b/webview/src/shared/components/virtualizedGrid/VirtualizedGrid.tsx index 4c945c58e9..47a0f1c9d4 100644 --- a/webview/src/shared/components/virtualizedGrid/VirtualizedGrid.tsx +++ b/webview/src/shared/components/virtualizedGrid/VirtualizedGrid.tsx @@ -14,6 +14,8 @@ interface VirtualizedGridProps { nbItemsPerRow: number } +export const OVERSCAN_ROW_COUNT = 15 + export const VirtualizedGrid: React.FC = ({ items, nbItemsPerRow = DEFAULT_NB_ITEMS_PER_ROW @@ -59,7 +61,7 @@ export const VirtualizedGrid: React.FC = ({ columnCount={nbItemsPerRow} columnWidth={cache.current.columnWidth} cellRenderer={cellRenderer} - overscanRowCount={15} + overscanRowCount={OVERSCAN_ROW_COUNT} /> )} diff --git a/webview/src/stories/ComparisonTable.stories.tsx b/webview/src/stories/ComparisonTable.stories.tsx index 3b9a2f8708..cef4b25d7e 100644 --- a/webview/src/stories/ComparisonTable.stories.tsx +++ b/webview/src/stories/ComparisonTable.stories.tsx @@ -1,14 +1,14 @@ import { Meta, Story } from '@storybook/react/types-6-0' import { configureStore } from '@reduxjs/toolkit' import { userEvent, within } from '@storybook/testing-library' -import React from 'react' +import React, { DetailedHTMLProps, HTMLAttributes } from 'react' import { Provider, useDispatch } from 'react-redux' import plotsRevisionsFixture from 'dvc/src/test/fixtures/plotsDiff/revisions' import { ComparisonRevisionData, Revision, PlotsComparisonData, - PlotSize + PlotSizeNumber } from 'dvc/src/plots/webview/contract' import comparisonTableFixture from 'dvc/src/test/fixtures/plotsDiff/comparison' import { ComparisonTable } from '../plots/components/comparisonTable/ComparisonTable' @@ -44,12 +44,21 @@ const Template: Story = ({ plots, revisions }) => { - +
, + HTMLDivElement + > + } + > + +
diff --git a/webview/src/stories/Plots.stories.tsx b/webview/src/stories/Plots.stories.tsx index 27a32e1484..0a7be34dff 100644 --- a/webview/src/stories/Plots.stories.tsx +++ b/webview/src/stories/Plots.stories.tsx @@ -6,9 +6,9 @@ import { userEvent, within } from '@storybook/testing-library' import { PlotsData, DEFAULT_SECTION_COLLAPSED, - PlotSize, TemplatePlotGroup, - TemplatePlotSection + TemplatePlotSection, + PlotSizeNumber } from 'dvc/src/plots/webview/contract' import { MessageToWebviewType } from 'dvc/src/webview/contract' import checkpointPlotsFixture from 'dvc/src/test/fixtures/expShow/checkpointPlots' @@ -31,12 +31,12 @@ const smallCheckpointPlotsFixture = { ...checkpointPlotsFixture, plots: checkpointPlotsFixture.plots.map(plot => ({ ...plot, - title: truncateVerticalTitle(plot.title, PlotSize.SMALL) as string + title: truncateVerticalTitle(plot.title, PlotSizeNumber.SMALL) as string })), - size: PlotSize.SMALL + size: PlotSizeNumber.SMALL } -const manyCheckpointPlots = (length: number, size = PlotSize.REGULAR) => +const manyCheckpointPlots = (length: number, size = PlotSizeNumber.REGULAR) => Array.from({ length }, () => checkpointPlotsFixture.plots[0]).map( (plot, i) => { const id = plot.id + i.toString() @@ -118,7 +118,7 @@ WithTemplateOnly.args = { data: { sectionCollapsed: DEFAULT_SECTION_COLLAPSED, selectedRevisions: plotsRevisionsFixture, - template: templatePlotsFixture + template: { ...templatePlotsFixture, size: PlotSizeNumber.REGULAR } } } @@ -178,11 +178,11 @@ WithoutData.args = { export const AllLarge = Template.bind({}) AllLarge.args = { data: { - checkpoint: { ...checkpointPlotsFixture, size: PlotSize.LARGE }, - comparison: { ...comparisonPlotsFixture, size: PlotSize.LARGE }, + checkpoint: { ...checkpointPlotsFixture, size: PlotSizeNumber.LARGE }, + comparison: { ...comparisonPlotsFixture, size: PlotSizeNumber.LARGE }, sectionCollapsed: DEFAULT_SECTION_COLLAPSED, selectedRevisions: plotsRevisionsFixture, - template: { ...templatePlotsFixture, size: PlotSize.LARGE } + template: { ...templatePlotsFixture, size: PlotSizeNumber.LARGE } } } AllLarge.parameters = chromaticParameters @@ -191,10 +191,10 @@ export const AllSmall = Template.bind({}) AllSmall.args = { data: { checkpoint: smallCheckpointPlotsFixture, - comparison: { ...comparisonPlotsFixture, size: PlotSize.SMALL }, + comparison: { ...comparisonPlotsFixture, size: PlotSizeNumber.SMALL }, sectionCollapsed: DEFAULT_SECTION_COLLAPSED, selectedRevisions: plotsRevisionsFixture, - template: { ...templatePlotsFixture, size: PlotSize.SMALL } + template: { ...templatePlotsFixture, size: PlotSizeNumber.SMALL } } } AllSmall.parameters = chromaticParameters diff --git a/webview/src/stories/util.ts b/webview/src/stories/util.ts index d5eef2cf9b..78dd27e679 100644 --- a/webview/src/stories/util.ts +++ b/webview/src/stories/util.ts @@ -40,6 +40,14 @@ export const viewports = { width: '2560px' }, type: 'desktop' + }, + test: { + name: 'Test', + styles: { + height: '1440px', + width: '936px' + }, + type: 'desktop' } } diff --git a/webview/src/util/strings.ts b/webview/src/util/strings.ts index 3cff3619d7..56fdfc79d8 100644 --- a/webview/src/util/strings.ts +++ b/webview/src/util/strings.ts @@ -1,6 +1,3 @@ -export const capitalize = (s: string) => - s[0].toUpperCase() + s.slice(1).toLowerCase() - export const pluralize = (word: string, number: number | undefined) => number === 1 ? word : `${word}s`