From accc9c886496c313caec4c0185ff3b546e75f84a Mon Sep 17 00:00:00 2001 From: Stephanie Roy Date: Fri, 17 Mar 2023 14:49:20 -0400 Subject: [PATCH] Calculate the default nbOrItemsPerRow from the screen size --- extension/src/plots/model/collect.ts | 6 +++--- extension/src/plots/model/index.ts | 2 +- extension/src/plots/vega/util.test.ts | 19 ++++--------------- extension/src/plots/vega/util.ts | 12 ++++++------ extension/src/plots/webview/contract.ts | 10 +++++----- .../src/test/fixtures/plotsDiff/index.ts | 2 +- .../src/test/suite/experiments/index.test.ts | 3 +-- webview/src/plots/components/App.test.tsx | 10 +++++----- .../checkpointPlots/CheckpointPlot.tsx | 4 +++- .../checkpointPlots/CheckpointPlots.tsx | 6 ++++-- .../CheckpointPlotsWrapper.tsx | 4 +++- .../comparisonTable/ComparisonTable.test.tsx | 7 +++++-- .../ComparisonTableWrapper.tsx | 2 +- .../comparisonTable/comparisonTableSlice.ts | 8 ++++++-- .../components/customPlots/CustomPlot.tsx | 4 +++- .../components/customPlots/CustomPlots.tsx | 6 ++++-- .../customPlots/CustomPlotsWrapper.tsx | 5 ++++- .../templatePlots/TemplatePlots.tsx | 6 ++++-- .../templatePlots/TemplatePlotsWrapper.tsx | 4 +++- .../hooks/useNumberOfItemsPerRowOrWidth.ts | 12 ++++++++++++ .../src/shared/components/slider/Slider.tsx | 13 ++++++++++++- .../virtualizedGrid/VirtualizedGrid.tsx | 3 +-- webview/src/stories/Plots.stories.tsx | 12 ++---------- 23 files changed, 93 insertions(+), 67 deletions(-) create mode 100644 webview/src/plots/hooks/useNumberOfItemsPerRowOrWidth.ts diff --git a/extension/src/plots/model/collect.ts b/extension/src/plots/model/collect.ts index e38f72075b..93d874829f 100644 --- a/extension/src/plots/model/collect.ts +++ b/extension/src/plots/model/collect.ts @@ -585,7 +585,7 @@ const collectTemplatePlot = ( path: string, template: string, revisionData: RevisionData, - nbItemsPerRow: number, + nbItemsPerRow: number | undefined, height: number, revisionColors: ColorScale | undefined, multiSourceEncoding: MultiSourceEncoding @@ -630,7 +630,7 @@ const collectTemplateGroup = ( selectedRevisions: string[], templates: TemplateAccumulator, revisionData: RevisionData, - nbItemsPerRow: number, + nbItemsPerRow: number | undefined, height: number, revisionColors: ColorScale | undefined, multiSourceEncoding: MultiSourceEncoding @@ -663,7 +663,7 @@ export const collectSelectedTemplatePlots = ( selectedRevisions: string[], templates: TemplateAccumulator, revisionData: RevisionData, - nbItemsPerRow: number, + nbItemsPerRow: number | undefined, height: number, revisionColors: ColorScale | undefined, multiSourceEncoding: MultiSourceEncoding diff --git a/extension/src/plots/model/index.ts b/extension/src/plots/model/index.ts index 580b5e9296..c2a82a61b5 100644 --- a/extension/src/plots/model/index.ts +++ b/extension/src/plots/model/index.ts @@ -56,7 +56,7 @@ export type CustomPlotsOrderValue = { metric: string; param: string } export class PlotsModel extends ModelWithPersistence { private readonly experiments: Experiments - private nbItemsPerRowOrWidth: Record + private nbItemsPerRowOrWidth: Record private height: Record private customPlotsOrder: CustomPlotsOrderValue[] private sectionCollapsed: SectionCollapsed diff --git a/extension/src/plots/vega/util.test.ts b/extension/src/plots/vega/util.test.ts index 24987d410b..0f95038773 100644 --- a/extension/src/plots/vega/util.test.ts +++ b/extension/src/plots/vega/util.test.ts @@ -19,10 +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_ROW, - DEFAULT_PLOT_HEIGHT -} from '../webview/contract' +import { DEFAULT_PLOT_HEIGHT } from '../webview/contract' describe('isMultiViewPlot', () => { it('should recognize the confusion matrix template as a multi view plot', () => { @@ -87,11 +84,7 @@ describe('getColorScale', () => { describe('extendVegaSpec', () => { it('should not add encoding if no color scale is provided', () => { - const extendedSpec = extendVegaSpec( - linearTemplate, - DEFAULT_NB_ITEMS_PER_ROW, - DEFAULT_PLOT_HEIGHT - ) + const extendedSpec = extendVegaSpec(linearTemplate, 2, DEFAULT_PLOT_HEIGHT) expect(extendedSpec.encoding).toBeUndefined() }) @@ -102,7 +95,7 @@ describe('extendVegaSpec', () => { } const extendedSpec = extendVegaSpec( linearTemplate, - DEFAULT_NB_ITEMS_PER_ROW, + 2, DEFAULT_PLOT_HEIGHT, { color: colorScale @@ -174,11 +167,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_ROW, - DEFAULT_PLOT_HEIGHT - ) + const updatedSpec = extendVegaSpec(spec, 2, DEFAULT_PLOT_HEIGHT) 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 b1d1e3d0b6..08ebd51d68 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_ROW } from '../webview/contract' +import { ColorScale } from '../webview/contract' import { ShapeEncoding, StrokeDashEncoding } from '../multiSource/constants' import { Color } from '../../experiments/model/status/colors' @@ -255,8 +255,8 @@ const truncateTitle = ( export const truncateVerticalTitle = ( title: Text | Title, - width: number, - height: number + width = 2, + height = 2 ) => truncateTitle(title, Math.floor((50 - (width - height) * 5) * 0.75)) const isEndValue = (valueType: string) => @@ -264,7 +264,7 @@ const isEndValue = (valueType: string) => export const truncateTitles = ( spec: TopLevelSpec, - width: number, + width = 2, height: number, vertical?: boolean // eslint-disable-next-line sonarjs/cognitive-complexity @@ -286,7 +286,7 @@ export const truncateTitles = ( const title = value as unknown as Title specCopy[key] = vertical ? truncateVerticalTitle(title, width, height) - : truncateTitle(title, width > DEFAULT_NB_ITEMS_PER_ROW ? 30 : 50) + : truncateTitle(title, width > 2 ? 30 : 50) } else if (isEndValue(valueType)) { specCopy[key] = value } else if (Array.isArray(value)) { @@ -306,7 +306,7 @@ export const truncateTitles = ( export const extendVegaSpec = ( spec: TopLevelSpec, - width: number, + width: number | undefined, height: number, encoding?: { color?: ColorScale diff --git a/extension/src/plots/webview/contract.ts b/extension/src/plots/webview/contract.ts index 67c6b82040..db1e934b8e 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_ROW = 2 +export const DEFAULT_NB_ITEMS_PER_ROW = undefined export enum PlotHeight { SMALLER, @@ -71,7 +71,7 @@ export type Revision = { export interface PlotsComparisonData { plots: ComparisonPlots - width: number + width: number | undefined height: PlotHeight revisions: Revision[] } @@ -104,7 +104,7 @@ export type CustomPlotData = { export type CustomPlotsData = { plots: CustomPlotData[] - nbItemsPerRow: number + nbItemsPerRow: number | undefined height: PlotHeight } @@ -113,7 +113,7 @@ export type CheckpointPlotData = CheckpointPlot & { title: string } export type CheckpointPlotsData = { plots: CheckpointPlotData[] colors: ColorScale - nbItemsPerRow: number + nbItemsPerRow: number | undefined height: PlotHeight selectedMetrics?: string[] } @@ -162,7 +162,7 @@ export type TemplatePlotSection = { export interface TemplatePlotsData { plots: TemplatePlotSection[] - nbItemsPerRow: number + nbItemsPerRow: number | undefined height: PlotHeight } diff --git a/extension/src/test/fixtures/plotsDiff/index.ts b/extension/src/test/fixtures/plotsDiff/index.ts index fe44d3e839..f05218919e 100644 --- a/extension/src/test/fixtures/plotsDiff/index.ts +++ b/extension/src/test/fixtures/plotsDiff/index.ts @@ -498,7 +498,7 @@ const extendedSpecs = (plotsOutput: TemplatePlots): TemplatePlotSection[] => { ) || [] } } as TopLevelSpec, - DEFAULT_NB_ITEMS_PER_ROW, + 2, DEFAULT_PLOT_HEIGHT, { color: { diff --git a/extension/src/test/suite/experiments/index.test.ts b/extension/src/test/suite/experiments/index.test.ts index 54c11a00bb..3ef4f9bf04 100644 --- a/extension/src/test/suite/experiments/index.test.ts +++ b/extension/src/test/suite/experiments/index.test.ts @@ -80,7 +80,6 @@ import * as FileSystem from '../../../fileSystem' import * as ProcessExecution from '../../../process/execution' import { DvcReader } from '../../../cli/dvc/reader' import { DvcViewer } from '../../../cli/dvc/viewer' -import { DEFAULT_NB_ITEMS_PER_ROW } from '../../../plots/webview/contract' const { openFileInEditor } = FileSystem @@ -338,7 +337,7 @@ suite('Experiments Test Suite', () => { ).returns(undefined) const mockColumnId = 'params:params.yaml:lr' - const mockWidth = DEFAULT_NB_ITEMS_PER_ROW + const mockWidth = 2 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 b18cfb7fa7..f2a468bc61 100644 --- a/webview/src/plots/components/App.test.tsx +++ b/webview/src/plots/components/App.test.tsx @@ -1764,7 +1764,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_ROW, + 2, PlotsSection.CHECKPOINT_PLOTS ) @@ -1774,7 +1774,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_ROW, + 2, PlotsSection.CHECKPOINT_PLOTS ) @@ -1784,7 +1784,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_ROW, + 2, PlotsSection.TEMPLATE_PLOTS ) @@ -1794,7 +1794,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_ROW, + 2, PlotsSection.TEMPLATE_PLOTS ) @@ -1808,7 +1808,7 @@ describe('App', () => { beforeEach(async () => { store = await renderAppAndChangeSize( { checkpoint }, - DEFAULT_NB_ITEMS_PER_ROW, + 2, PlotsSection.CHECKPOINT_PLOTS ) }) diff --git a/webview/src/plots/components/checkpointPlots/CheckpointPlot.tsx b/webview/src/plots/components/checkpointPlots/CheckpointPlot.tsx index f837dc1815..f206d40f36 100644 --- a/webview/src/plots/components/checkpointPlots/CheckpointPlot.tsx +++ b/webview/src/plots/components/checkpointPlots/CheckpointPlot.tsx @@ -8,6 +8,7 @@ import styles from '../styles.module.scss' import { withScale } from '../../../util/styles' import { plotDataStore } from '../plotDataStore' import { PlotsState } from '../../store' +import { useNbOfItemsPerRow } from '../../hooks/useNumberOfItemsPerRowOrWidth' interface CheckpointPlotProps { id: string @@ -27,6 +28,7 @@ export const CheckpointPlot: React.FC = ({ const nbItemsPerRow = useSelector( (state: PlotsState) => state.checkpoint.nbItemsPerRow ) + const nbItemsPerRowOrDefault = useNbOfItemsPerRow(nbItemsPerRow) const spec = useMemo(() => { const title = plot?.title @@ -52,7 +54,7 @@ export const CheckpointPlot: React.FC = ({ spec={spec} id={id} changeDisabledDragIds={changeDisabledDragIds} - currentSnapPoint={nbItemsPerRow} + currentSnapPoint={nbItemsPerRowOrDefault} section={PlotsSection.CHECKPOINT_PLOTS} /> diff --git a/webview/src/plots/components/checkpointPlots/CheckpointPlots.tsx b/webview/src/plots/components/checkpointPlots/CheckpointPlots.tsx index 5b6048b64d..b57e3d414a 100644 --- a/webview/src/plots/components/checkpointPlots/CheckpointPlots.tsx +++ b/webview/src/plots/components/checkpointPlots/CheckpointPlots.tsx @@ -18,6 +18,7 @@ import { shouldUseVirtualizedGrid } from '../util' import { PlotsState } from '../../store' import { changeOrderWithDraggedInfo } from '../../../util/array' import { LoadingSection, sectionIsLoading } from '../LoadingSection' +import { useNbOfItemsPerRow } from '../../hooks/useNumberOfItemsPerRowOrWidth' interface CheckpointPlotsProps { plotsIds: string[] @@ -32,6 +33,7 @@ export const CheckpointPlots: React.FC = ({ const { nbItemsPerRow, hasData, disabledDragPlotIds } = useSelector( (state: PlotsState) => state.checkpoint ) + const nbItemsPerRowOrDefault = useNbOfItemsPerRow(nbItemsPerRow) const [onSection, setOnSection] = useState(false) const draggedRef = useSelector( (state: PlotsState) => state.dragAndDrop.draggedRef @@ -69,7 +71,7 @@ export const CheckpointPlots: React.FC = ({ const useVirtualizedGrid = shouldUseVirtualizedGrid( items.length, - nbItemsPerRow + nbItemsPerRowOrDefault ) const handleDropAtTheEnd = () => { @@ -104,7 +106,7 @@ export const CheckpointPlots: React.FC = ({ useVirtualizedGrid ? { component: VirtualizedGrid as React.FC, - props: { nbItemsPerRow } + props: { nbItemsPerRow: nbItemsPerRowOrDefault } } : undefined } diff --git a/webview/src/plots/components/checkpointPlots/CheckpointPlotsWrapper.tsx b/webview/src/plots/components/checkpointPlots/CheckpointPlotsWrapper.tsx index 140c4900ba..523e51770c 100644 --- a/webview/src/plots/components/checkpointPlots/CheckpointPlotsWrapper.tsx +++ b/webview/src/plots/components/checkpointPlots/CheckpointPlotsWrapper.tsx @@ -7,6 +7,7 @@ import { changeSize } from './checkpointPlotsSlice' import { PlotsContainer } from '../PlotsContainer' import { sendMessage } from '../../../shared/vscode' import { PlotsState } from '../../store' +import { useNbOfItemsPerRow } from '../../hooks/useNumberOfItemsPerRowOrWidth' export const CheckpointPlotsWrapper: React.FC = () => { const { @@ -19,6 +20,7 @@ export const CheckpointPlotsWrapper: React.FC = () => { } = useSelector((state: PlotsState) => state.checkpoint) const [metrics, setMetrics] = useState([]) const [selectedPlots, setSelectedPlots] = useState([]) + const nbItemsPerRowOrDefault = useNbOfItemsPerRow(nbItemsPerRow) useEffect(() => { setMetrics([...plotsIds].sort()) @@ -48,7 +50,7 @@ export const CheckpointPlotsWrapper: React.FC = () => { title="Trends" sectionKey={PlotsSection.CHECKPOINT_PLOTS} menu={menu} - nbItemsPerRowOrWidth={nbItemsPerRow} + nbItemsPerRowOrWidth={nbItemsPerRowOrDefault} sectionCollapsed={isCollapsed} changeSize={changeSize} hasItems={hasItems} diff --git a/webview/src/plots/components/comparisonTable/ComparisonTable.test.tsx b/webview/src/plots/components/comparisonTable/ComparisonTable.test.tsx index 187be4fcfe..4dea33a31c 100644 --- a/webview/src/plots/components/comparisonTable/ComparisonTable.test.tsx +++ b/webview/src/plots/components/comparisonTable/ComparisonTable.test.tsx @@ -16,7 +16,10 @@ import React from 'react' import { Revision } from 'dvc/src/plots/webview/contract' import { act } from 'react-dom/test-utils' import { ComparisonTable } from './ComparisonTable' -import { comparisonTableInitialState } from './comparisonTableSlice' +import { + comparisonTableInitialState, + ComparisonTableState +} from './comparisonTableSlice' import { createBubbledEvent, dragAndDrop, @@ -73,7 +76,7 @@ describe('ComparisonTable', () => { comparison: { ...comparisonTableInitialState, ...props - }, + } as ComparisonTableState, webview: { ...webviewInitialState, zoomedInPlot: undefined diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableWrapper.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableWrapper.tsx index ab2ca3dbf3..41d970bfd1 100644 --- a/webview/src/plots/components/comparisonTable/ComparisonTableWrapper.tsx +++ b/webview/src/plots/components/comparisonTable/ComparisonTableWrapper.tsx @@ -15,7 +15,7 @@ export const ComparisonTableWrapper: React.FC = () => { = ({ id }) => { const nbItemsPerRow = useSelector( (state: PlotsState) => state.custom.nbItemsPerRow ) + const nbItemsPerRowOrDefault = useNbOfItemsPerRow(nbItemsPerRow) const spec = useMemo(() => { if (plot) { @@ -44,7 +46,7 @@ export const CustomPlot: React.FC = ({ id }) => { spec={spec} id={id} changeDisabledDragIds={changeDisabledDragIds} - currentSnapPoint={nbItemsPerRow} + currentSnapPoint={nbItemsPerRowOrDefault} section={PlotsSection.CUSTOM_PLOTS} /> diff --git a/webview/src/plots/components/customPlots/CustomPlots.tsx b/webview/src/plots/components/customPlots/CustomPlots.tsx index 6bb54ef9a4..6b3edd51f4 100644 --- a/webview/src/plots/components/customPlots/CustomPlots.tsx +++ b/webview/src/plots/components/customPlots/CustomPlots.tsx @@ -16,6 +16,7 @@ import { shouldUseVirtualizedGrid } from '../util' import { PlotsState } from '../../store' import { sendMessage } from '../../../shared/vscode' import { changeOrderWithDraggedInfo } from '../../../util/array' +import { useNbOfItemsPerRow } from '../../hooks/useNumberOfItemsPerRowOrWidth' interface CustomPlotsProps { plotsIds: string[] @@ -26,6 +27,7 @@ export const CustomPlots: React.FC = ({ plotsIds }) => { const { nbItemsPerRow, hasData, disabledDragPlotIds } = useSelector( (state: PlotsState) => state.custom ) + const nbItemsPerRowOrDefault = useNbOfItemsPerRow(nbItemsPerRow) const [onSection, setOnSection] = useState(false) const draggedRef = useSelector( (state: PlotsState) => state.dragAndDrop.draggedRef @@ -59,7 +61,7 @@ export const CustomPlots: React.FC = ({ plotsIds }) => { const useVirtualizedGrid = shouldUseVirtualizedGrid( items.length, - nbItemsPerRow + nbItemsPerRowOrDefault ) const handleDragOver = (e: DragEvent) => { @@ -93,7 +95,7 @@ export const CustomPlots: React.FC = ({ plotsIds }) => { useVirtualizedGrid ? { component: VirtualizedGrid as React.FC, - props: { nbItemsPerRow } + props: { nbItemsPerRow: nbItemsPerRowOrDefault } } : undefined } diff --git a/webview/src/plots/components/customPlots/CustomPlotsWrapper.tsx b/webview/src/plots/components/customPlots/CustomPlotsWrapper.tsx index eabf1219a1..0fb51a518b 100644 --- a/webview/src/plots/components/customPlots/CustomPlotsWrapper.tsx +++ b/webview/src/plots/components/customPlots/CustomPlotsWrapper.tsx @@ -7,12 +7,15 @@ import { changeSize } from './customPlotsSlice' import { PlotsContainer } from '../PlotsContainer' import { PlotsState } from '../../store' import { sendMessage } from '../../../shared/vscode' +import { useNbOfItemsPerRow } from '../../hooks/useNumberOfItemsPerRowOrWidth' export const CustomPlotsWrapper: React.FC = () => { const { plotsIds, nbItemsPerRow, isCollapsed, height } = useSelector( (state: PlotsState) => state.custom ) const [selectedPlots, setSelectedPlots] = useState([]) + const nbItemsPerRowOrDefault = useNbOfItemsPerRow(nbItemsPerRow) + useEffect(() => { setSelectedPlots(plotsIds) }, [plotsIds, setSelectedPlots]) @@ -30,7 +33,7 @@ export const CustomPlotsWrapper: React.FC = () => { { const { nbItemsPerRow, sections } = useSelector( (state: PlotsState) => state.template ) + const nbItemsPerRowOrDefault = useNbOfItemsPerRow(nbItemsPerRow) const draggedOverGroup = useSelector( (state: PlotsState) => state.dragAndDrop.draggedOverGroup ) @@ -166,7 +168,7 @@ export const TemplatePlots: React.FC = () => { const groupId = createIDWithIndex(section.group, i) const useVirtualizedGrid = shouldUseVirtualizedGrid( Object.keys(section.entries).length, - nbItemsPerRow + nbItemsPerRowOrDefault ) const isMultiView = section.group === TemplatePlotGroup.MULTI_VIEW @@ -225,7 +227,7 @@ export const TemplatePlots: React.FC = () => { multiView={isMultiView} setSectionEntries={setSectionEntries} useVirtualizedGrid={useVirtualizedGrid} - nbItemsPerRow={nbItemsPerRow} + nbItemsPerRow={nbItemsPerRowOrDefault} parentDraggedOver={draggedOverGroup === groupId} /> diff --git a/webview/src/plots/components/templatePlots/TemplatePlotsWrapper.tsx b/webview/src/plots/components/templatePlots/TemplatePlotsWrapper.tsx index a32ae16ccc..9cba15450e 100644 --- a/webview/src/plots/components/templatePlots/TemplatePlotsWrapper.tsx +++ b/webview/src/plots/components/templatePlots/TemplatePlotsWrapper.tsx @@ -5,6 +5,7 @@ import { TemplatePlots } from './TemplatePlots' import { changeSize } from './templatePlotsSlice' import { PlotsContainer } from '../PlotsContainer' import { PlotsState } from '../../store' +import { useNbOfItemsPerRow } from '../../hooks/useNumberOfItemsPerRowOrWidth' export const TemplatePlotsWrapper: React.FC = () => { const { nbItemsPerRow, isCollapsed, height } = useSelector( @@ -13,12 +14,13 @@ export const TemplatePlotsWrapper: React.FC = () => { const hasItems = useSelector( (state: PlotsState) => Object.keys(state.template.plotsSnapshots).length > 0 ) + const nbItemsPerRowOrDefault = useNbOfItemsPerRow(nbItemsPerRow) return ( { + const maxNbPlotsPerRow = useSelector( + (state: PlotsState) => state.webview.maxNbPlotsPerRow + ) + + return currentNbItemsPerRow || Math.floor(maxNbPlotsPerRow / 2) +} diff --git a/webview/src/shared/components/slider/Slider.tsx b/webview/src/shared/components/slider/Slider.tsx index 2a454100b3..bd2f0cdb04 100644 --- a/webview/src/shared/components/slider/Slider.tsx +++ b/webview/src/shared/components/slider/Slider.tsx @@ -1,4 +1,4 @@ -import React, { FormEvent, MouseEvent } from 'react' +import React, { createRef, FormEvent, MouseEvent, useEffect } from 'react' import styles from './styles.module.scss' interface SliderProps { @@ -18,6 +18,16 @@ export const Slider: React.FC = ({ label, onChange }) => { + const sliderRef = createRef() + + useEffect(() => { + if ( + sliderRef.current && + defaultValue !== Number.parseFloat(sliderRef.current.value) + ) { + sliderRef.current.value = defaultValue.toString() + } + }, [defaultValue, sliderRef]) const handleOnChange = (e: FormEvent) => { onChange(Number.parseFloat(e.currentTarget.value)) } @@ -27,6 +37,7 @@ export const Slider: React.FC = ({ {label} = ({ items, - nbItemsPerRow = DEFAULT_NB_ITEMS_PER_ROW + nbItemsPerRow }) => { const cache = useRef( new CellMeasurerCache({ diff --git a/webview/src/stories/Plots.stories.tsx b/webview/src/stories/Plots.stories.tsx index 117bb962c0..addae81bf3 100644 --- a/webview/src/stories/Plots.stories.tsx +++ b/webview/src/stories/Plots.stories.tsx @@ -37,11 +37,7 @@ const smallCheckpointPlotsFixture = { nbItemsPerRow: 3, plots: checkpointPlotsFixture.plots.map(plot => ({ ...plot, - title: truncateVerticalTitle( - plot.title, - DEFAULT_NB_ITEMS_PER_ROW, - DEFAULT_PLOT_HEIGHT - ) as string + title: truncateVerticalTitle(plot.title, 2, DEFAULT_PLOT_HEIGHT) as string })) } @@ -52,11 +48,7 @@ const manyCheckpointPlots = (length: number) => return { ...plot, id, - title: truncateVerticalTitle( - id, - DEFAULT_NB_ITEMS_PER_ROW, - DEFAULT_PLOT_HEIGHT - ) as string + title: truncateVerticalTitle(id, 2, DEFAULT_PLOT_HEIGHT) as string } } )