diff --git a/extension/src/plots/model/index.test.ts b/extension/src/plots/model/index.test.ts index fb93079713..36215c5e98 100644 --- a/extension/src/plots/model/index.test.ts +++ b/extension/src/plots/model/index.test.ts @@ -1,6 +1,6 @@ import { PlotsModel } from '.' import { - DEFAULT_NB_ITEMS_PER_REOW, + DEFAULT_NB_ITEMS_PER_ROW, DEFAULT_SECTION_COLLAPSED, DEFAULT_SECTION_NB_ITEMS_PER_ROW, Section @@ -69,7 +69,7 @@ describe('plotsModel', () => { it('should change the plotSize when calling setPlotSize', () => { expect(model.getNbItemsPerRow(Section.CHECKPOINT_PLOTS)).toStrictEqual( - DEFAULT_NB_ITEMS_PER_REOW + DEFAULT_NB_ITEMS_PER_ROW ) model.setNbItemsPerRow(Section.CHECKPOINT_PLOTS, 1) diff --git a/extension/src/plots/model/index.ts b/extension/src/plots/model/index.ts index 1ccec4fada..d78f4796af 100644 --- a/extension/src/plots/model/index.ts +++ b/extension/src/plots/model/index.ts @@ -28,7 +28,7 @@ import { SectionCollapsed, CustomPlotData, DEFAULT_HEIGHT, - DEFAULT_NB_ITEMS_PER_REOW + DEFAULT_NB_ITEMS_PER_ROW } from '../webview/contract' import { ExperimentsOutput, @@ -411,7 +411,7 @@ export class PlotsModel extends ModelWithPersistence { if (this.nbItemsPerRow[section]) { return this.nbItemsPerRow[section] } - return DEFAULT_NB_ITEMS_PER_REOW + return DEFAULT_NB_ITEMS_PER_ROW } public setHeight(section: Section, height: number | undefined) { diff --git a/extension/src/plots/vega/util.test.ts b/extension/src/plots/vega/util.test.ts index 3be7f092e0..96daf25fd8 100644 --- a/extension/src/plots/vega/util.test.ts +++ b/extension/src/plots/vega/util.test.ts @@ -19,7 +19,7 @@ import smoothTemplate from '../../test/fixtures/plotsDiff/templates/smooth' import multiSourceTemplate from '../../test/fixtures/plotsDiff/templates/multiSource' import { copyOriginalColors } from '../../experiments/model/status/colors' import { EXPERIMENT_WORKSPACE_ID } from '../../cli/dvc/contract' -import { DEFAULT_NB_ITEMS_PER_REOW } from '../webview/contract' +import { DEFAULT_NB_ITEMS_PER_ROW } from '../webview/contract' describe('isMultiViewPlot', () => { it('should recognize the confusion matrix template as a multi view plot', () => { @@ -86,7 +86,7 @@ describe('extendVegaSpec', () => { it('should not add encoding if no color scale is provided', () => { const extendedSpec = extendVegaSpec( linearTemplate, - DEFAULT_NB_ITEMS_PER_REOW + DEFAULT_NB_ITEMS_PER_ROW ) expect(extendedSpec.encoding).toBeUndefined() }) @@ -98,7 +98,7 @@ describe('extendVegaSpec', () => { } const extendedSpec = extendVegaSpec( linearTemplate, - DEFAULT_NB_ITEMS_PER_REOW, + DEFAULT_NB_ITEMS_PER_ROW, { color: colorScale } @@ -169,7 +169,7 @@ describe('extendVegaSpec', () => { it('should truncate all titles from the left to 50 characters for regular plots', () => { const spec = withLongTemplatePlotTitle() - const updatedSpec = extendVegaSpec(spec, DEFAULT_NB_ITEMS_PER_REOW) + const updatedSpec = extendVegaSpec(spec, DEFAULT_NB_ITEMS_PER_ROW) const truncatedTitle = '…-many-many-characters-at-least-seventy-characters' const truncatedHorizontalTitle = diff --git a/extension/src/plots/vega/util.ts b/extension/src/plots/vega/util.ts index c1c8ecdb05..362101a665 100644 --- a/extension/src/plots/vega/util.ts +++ b/extension/src/plots/vega/util.ts @@ -26,7 +26,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, DEFAULT_NB_ITEMS_PER_REOW } from '../webview/contract' +import { ColorScale, DEFAULT_NB_ITEMS_PER_ROW } from '../webview/contract' import { ShapeEncoding, StrokeDashEncoding } from '../multiSource/constants' import { Color } from '../../experiments/model/status/colors' @@ -282,7 +282,7 @@ export const truncateTitles = ( const title = value as unknown as Title specCopy[key] = vertical ? truncateVerticalTitle(title, size) - : truncateTitle(title, size > DEFAULT_NB_ITEMS_PER_REOW ? 30 : 50) + : truncateTitle(title, size > DEFAULT_NB_ITEMS_PER_ROW ? 30 : 50) } else if (isEndValue(valueType)) { specCopy[key] = value } else if (Array.isArray(value)) { diff --git a/extension/src/plots/webview/contract.ts b/extension/src/plots/webview/contract.ts index eca1fdb3ec..9820d254e2 100644 --- a/extension/src/plots/webview/contract.ts +++ b/extension/src/plots/webview/contract.ts @@ -1,7 +1,7 @@ import { VisualizationSpec } from 'react-vega' import { Color } from '../../experiments/model/status/colors' -export const DEFAULT_NB_ITEMS_PER_REOW = 2 +export const DEFAULT_NB_ITEMS_PER_ROW = 2 export enum Section { CHECKPOINT_PLOTS = 'checkpoint-plots', @@ -11,10 +11,10 @@ export enum Section { } export const DEFAULT_SECTION_NB_ITEMS_PER_ROW = { - [Section.CHECKPOINT_PLOTS]: DEFAULT_NB_ITEMS_PER_REOW, - [Section.TEMPLATE_PLOTS]: DEFAULT_NB_ITEMS_PER_REOW, - [Section.COMPARISON_TABLE]: DEFAULT_NB_ITEMS_PER_REOW, - [Section.CUSTOM_PLOTS]: DEFAULT_NB_ITEMS_PER_REOW + [Section.CHECKPOINT_PLOTS]: DEFAULT_NB_ITEMS_PER_ROW, + [Section.TEMPLATE_PLOTS]: DEFAULT_NB_ITEMS_PER_ROW, + [Section.COMPARISON_TABLE]: DEFAULT_NB_ITEMS_PER_ROW, + [Section.CUSTOM_PLOTS]: DEFAULT_NB_ITEMS_PER_ROW } // Height is undefined by default because it is calculated by ratio of the width it'll fill (calculated by the webview) diff --git a/extension/src/test/fixtures/expShow/base/checkpointPlots.ts b/extension/src/test/fixtures/expShow/base/checkpointPlots.ts index 6e09b5baa8..a04660485f 100644 --- a/extension/src/test/fixtures/expShow/base/checkpointPlots.ts +++ b/extension/src/test/fixtures/expShow/base/checkpointPlots.ts @@ -1,7 +1,7 @@ import { copyOriginalColors } from '../../../../experiments/model/status/colors' import { CheckpointPlotsData, - DEFAULT_NB_ITEMS_PER_REOW + DEFAULT_NB_ITEMS_PER_ROW } from '../../../../plots/webview/contract' const colors = copyOriginalColors() @@ -91,7 +91,7 @@ const data: CheckpointPlotsData = { 'summary.json:val_loss', 'summary.json:val_accuracy' ], - nbItemsPerRow: DEFAULT_NB_ITEMS_PER_REOW, + nbItemsPerRow: DEFAULT_NB_ITEMS_PER_ROW, height: undefined } diff --git a/extension/src/test/fixtures/expShow/base/customPlots.ts b/extension/src/test/fixtures/expShow/base/customPlots.ts index 34700a4958..ea4c8b9d09 100644 --- a/extension/src/test/fixtures/expShow/base/customPlots.ts +++ b/extension/src/test/fixtures/expShow/base/customPlots.ts @@ -1,6 +1,6 @@ import { CustomPlotsData, - DEFAULT_NB_ITEMS_PER_REOW + DEFAULT_NB_ITEMS_PER_ROW } from '../../../../plots/webview/contract' const data: CustomPlotsData = { @@ -50,7 +50,7 @@ const data: CustomPlotsData = { ] } ], - nbItemsPerRow: DEFAULT_NB_ITEMS_PER_REOW, + nbItemsPerRow: DEFAULT_NB_ITEMS_PER_ROW, height: undefined } diff --git a/extension/src/test/fixtures/plotsDiff/index.ts b/extension/src/test/fixtures/plotsDiff/index.ts index 31c3e083b5..5812b6b57f 100644 --- a/extension/src/test/fixtures/plotsDiff/index.ts +++ b/extension/src/test/fixtures/plotsDiff/index.ts @@ -13,7 +13,7 @@ import { TemplatePlots, Revision, PlotsComparisonData, - DEFAULT_NB_ITEMS_PER_REOW + DEFAULT_NB_ITEMS_PER_ROW } from '../../../plots/webview/contract' import { join } from '../../util/path' import { copyOriginalColors } from '../../../experiments/model/status/colors' @@ -499,7 +499,7 @@ const extendedSpecs = (plotsOutput: TemplatePlots): TemplatePlotSection[] => { ) || [] } } as TopLevelSpec, - DEFAULT_NB_ITEMS_PER_REOW, + DEFAULT_NB_ITEMS_PER_ROW, { color: { domain: expectedRevisions, @@ -659,14 +659,14 @@ export const getRevisions = (): Revision[] => { export const getMinimalWebviewMessage = () => ({ plots: extendedSpecs(basicVega), - nbItemsPerRow: DEFAULT_NB_ITEMS_PER_REOW, + nbItemsPerRow: DEFAULT_NB_ITEMS_PER_ROW, height: undefined, revisions: getRevisions() }) export const getTemplateWebviewMessage = (): TemplatePlotsData => ({ plots: extendedSpecs({ ...basicVega, ...require('./vega').default }), - nbItemsPerRow: DEFAULT_NB_ITEMS_PER_REOW, + nbItemsPerRow: DEFAULT_NB_ITEMS_PER_ROW, height: undefined }) @@ -676,7 +676,7 @@ export const getManyTemplatePlotsWebviewMessage = ( plots: extendedSpecs({ ...multipleVega(length) }), - nbItemsPerRow: DEFAULT_NB_ITEMS_PER_REOW, + nbItemsPerRow: DEFAULT_NB_ITEMS_PER_ROW, height: undefined }) @@ -703,7 +703,7 @@ export const getComparisonWebviewMessage = ( return { revisions: getRevisions(), plots: plotAcc, - nbItemsPerRow: DEFAULT_NB_ITEMS_PER_REOW, + nbItemsPerRow: DEFAULT_NB_ITEMS_PER_ROW, height: undefined } } diff --git a/extension/src/test/suite/experiments/index.test.ts b/extension/src/test/suite/experiments/index.test.ts index 4b20c2cd7c..08370d2427 100644 --- a/extension/src/test/suite/experiments/index.test.ts +++ b/extension/src/test/suite/experiments/index.test.ts @@ -81,7 +81,7 @@ import * as ProcessExecution from '../../../process/execution' import { DvcReader } from '../../../cli/dvc/reader' import { Connect } from '../../../connect' import { DvcViewer } from '../../../cli/dvc/viewer' -import { DEFAULT_NB_ITEMS_PER_REOW } from '../../../plots/webview/contract' +import { DEFAULT_NB_ITEMS_PER_ROW } from '../../../plots/webview/contract' const { openFileInEditor } = FileSystem @@ -339,7 +339,7 @@ suite('Experiments Test Suite', () => { ).returns(undefined) const mockColumnId = 'params:params.yaml:lr' - const mockWidth = DEFAULT_NB_ITEMS_PER_REOW + const mockWidth = DEFAULT_NB_ITEMS_PER_ROW mockMessageReceived.fire({ payload: { id: mockColumnId, width: mockWidth }, diff --git a/webview/src/plots/components/App.test.tsx b/webview/src/plots/components/App.test.tsx index 7408c24cfd..d63b75db77 100644 --- a/webview/src/plots/components/App.test.tsx +++ b/webview/src/plots/components/App.test.tsx @@ -28,7 +28,7 @@ import { Section, TemplatePlotGroup, TemplatePlotsData, - DEFAULT_NB_ITEMS_PER_REOW + DEFAULT_NB_ITEMS_PER_ROW } from 'dvc/src/plots/webview/contract' import { MessageFromWebviewType, @@ -263,7 +263,7 @@ describe('App', () => { checkpoint: null, comparison: { height: undefined, - nbItemsPerRow: DEFAULT_NB_ITEMS_PER_REOW, + nbItemsPerRow: DEFAULT_NB_ITEMS_PER_ROW, plots: [ { path: 'training/plots/images/misclassified.jpg', @@ -1673,7 +1673,7 @@ describe('App', () => { it('should wrap the checkpoint plots in a big grid (virtualize them) when there are more than fourteen regular plots', async () => { await renderAppAndChangeSize( { checkpoint: createCheckpointPlots(15) }, - DEFAULT_NB_ITEMS_PER_REOW, + DEFAULT_NB_ITEMS_PER_ROW, Section.CHECKPOINT_PLOTS ) @@ -1683,7 +1683,7 @@ describe('App', () => { it('should not wrap the checkpoint plots in a big grid (virtualize them) when there are fourteen regular plots', async () => { await renderAppAndChangeSize( { checkpoint: createCheckpointPlots(14) }, - DEFAULT_NB_ITEMS_PER_REOW, + DEFAULT_NB_ITEMS_PER_ROW, Section.CHECKPOINT_PLOTS ) @@ -1693,7 +1693,7 @@ describe('App', () => { it('should wrap the template plots in a big grid (virtualize them) when there are more than fourteen regular plots', async () => { await renderAppAndChangeSize( { template: manyTemplatePlots(15) }, - DEFAULT_NB_ITEMS_PER_REOW, + DEFAULT_NB_ITEMS_PER_ROW, Section.TEMPLATE_PLOTS ) @@ -1703,7 +1703,7 @@ describe('App', () => { it('should not wrap the template plots in a big grid (virtualize them) when there are fourteen or fewer regular plots', async () => { await renderAppAndChangeSize( { template: manyTemplatePlots(14) }, - DEFAULT_NB_ITEMS_PER_REOW, + DEFAULT_NB_ITEMS_PER_ROW, Section.TEMPLATE_PLOTS ) @@ -1717,7 +1717,7 @@ describe('App', () => { beforeEach(async () => { store = await renderAppAndChangeSize( { checkpoint }, - DEFAULT_NB_ITEMS_PER_REOW, + DEFAULT_NB_ITEMS_PER_ROW, Section.CHECKPOINT_PLOTS ) }) diff --git a/webview/src/shared/components/virtualizedGrid/VirtualizedGrid.tsx b/webview/src/shared/components/virtualizedGrid/VirtualizedGrid.tsx index 46ac61ac82..cdc5e8eeb5 100644 --- a/webview/src/shared/components/virtualizedGrid/VirtualizedGrid.tsx +++ b/webview/src/shared/components/virtualizedGrid/VirtualizedGrid.tsx @@ -1,4 +1,4 @@ -import { DEFAULT_NB_ITEMS_PER_REOW } from 'dvc/src/plots/webview/contract' +import { DEFAULT_NB_ITEMS_PER_ROW } from 'dvc/src/plots/webview/contract' import React, { useRef } from 'react' import { AutoSizer, @@ -18,7 +18,7 @@ export const OVERSCAN_ROW_COUNT = 15 export const VirtualizedGrid: React.FC = ({ items, - nbItemsPerRow = DEFAULT_NB_ITEMS_PER_REOW + nbItemsPerRow = DEFAULT_NB_ITEMS_PER_ROW }) => { const cache = useRef( new CellMeasurerCache({ diff --git a/webview/src/stories/ComparisonTable.stories.tsx b/webview/src/stories/ComparisonTable.stories.tsx index f747535879..1133c0f9d3 100644 --- a/webview/src/stories/ComparisonTable.stories.tsx +++ b/webview/src/stories/ComparisonTable.stories.tsx @@ -6,7 +6,7 @@ import React from 'react' import { Provider, useDispatch } from 'react-redux' import { ComparisonRevisionData, - DEFAULT_NB_ITEMS_PER_REOW, + DEFAULT_NB_ITEMS_PER_ROW, PlotsComparisonData } from 'dvc/src/plots/webview/contract' import comparisonTableFixture from 'dvc/src/test/fixtures/plotsDiff/comparison' @@ -44,7 +44,7 @@ const Template: Story = ({ plots, revisions }) => { +const manyCheckpointPlots = (length: number, size = DEFAULT_NB_ITEMS_PER_ROW) => Array.from({ length }, () => checkpointPlotsFixture.plots[0]).map( (plot, i) => { const id = plot.id + i.toString() @@ -140,7 +137,7 @@ WithTemplateOnly.args = { selectedRevisions: plotsRevisionsFixture, template: { ...templatePlotsFixture, - nbItemsPerRow: DEFAULT_NB_ITEMS_PER_REOW + nbItemsPerRow: DEFAULT_NB_ITEMS_PER_ROW } } }