Make the multiview template size dynamic for each plot inside

extension/src/plots/model/collect.ts

@@ -269,16 +269,16 @@ const transformRevisionData = (
 ): { revisions: string[]; datapoints: unknown[] } => {
   const field = multiSourceEncodingUpdate.strokeDash?.field
   const isMultiSource = !!field
-  const availableRevisions = selectedRevisions.filter(rev =>
-    Object.keys(revisionData).includes(rev)
+  const availableRevisions = selectedRevisions.filter(
+    rev => revisionData[rev]?.[path]
   )
   const transformNeeded =
     isMultiSource && (isMultiView || isConcatenatedField(field))
 
   if (!transformNeeded) {
     return {
       datapoints: selectedRevisions
-        .flatMap(revision => revisionData?.[revision]?.[path])
+        .flatMap(revision => revisionData[revision]?.[path])
         .filter(Boolean),
       revisions: availableRevisions
     }
@@ -316,10 +316,14 @@ const transformRevisionData = (
 
 const fillTemplate = (
   template: string,
-  datapoints: unknown[]
+  datapoints: unknown[],
+  size: [number, number]
 ): TopLevelSpec => {
   return JSON.parse(
-    template.replace('"<DVC_METRIC_DATA>"', JSON.stringify(datapoints))
+    template
+      .replace('"<DVC_METRIC_DATA>"', JSON.stringify(datapoints))
+      .replace('"width":300', `"width":${size[0]}`)
+      .replace('"height":300', `"height":${size[1]}`)
   ) as TopLevelSpec
 }
 
@@ -332,7 +336,8 @@ const collectTemplatePlot = (
   nbItemsPerRow: number,
   height: number,
   revisionColors: ColorScale | undefined,
-  multiSourceEncoding: MultiSourceEncoding
+  multiSourceEncoding: MultiSourceEncoding,
+  screenDimensions: [number, number]
 ) => {
   const isMultiView = isMultiViewPlot(
     JSON.parse(template) as TopLevelSpec | VisualizationSpec
@@ -350,8 +355,12 @@ const collectTemplatePlot = (
     return
   }
 
+  const plotWidth = screenDimensions[0] / nbItemsPerRow
+  const ratios = [2, 9 / 5, 4 / 3, 1, 3 / 4, 3 / 5]
+  const plotHeight = plotWidth / ratios[height]
+
   const content = extendVegaSpec(
-    fillTemplate(template, datapoints),
+    fillTemplate(template, datapoints, [plotWidth, plotHeight]),
     nbItemsPerRow,
     height,
     {
@@ -377,7 +386,8 @@ const collectTemplateGroup = (
   nbItemsPerRow: number,
   height: number,
   revisionColors: ColorScale | undefined,
-  multiSourceEncoding: MultiSourceEncoding
+  multiSourceEncoding: MultiSourceEncoding,
+  screenDimensions: [number, number]
 ): TemplatePlotEntry[] => {
   const acc: TemplatePlotEntry[] = []
   for (const path of paths) {
@@ -396,7 +406,8 @@ const collectTemplateGroup = (
       nbItemsPerRow,
       height,
       revisionColors,
-      multiSourceEncoding
+      multiSourceEncoding,
+      screenDimensions
     )
   }
   return acc
@@ -410,7 +421,8 @@ export const collectSelectedTemplatePlots = (
   nbItemsPerRow: number,
   height: number,
   revisionColors: ColorScale | undefined,
-  multiSourceEncoding: MultiSourceEncoding
+  multiSourceEncoding: MultiSourceEncoding,
+  screenDimensions: [number, number]
 ): TemplatePlotSection[] | undefined => {
   const acc: TemplatePlotSection[] = []
   for (const templateGroup of order) {
@@ -423,7 +435,8 @@ export const collectSelectedTemplatePlots = (
       nbItemsPerRow,
       height,
       revisionColors,
-      multiSourceEncoding
+      multiSourceEncoding,
+      screenDimensions
     )
     if (!definedAndNonEmpty(entries)) {
       continue

extension/src/plots/model/index.ts

@@ -75,6 +75,7 @@ export class PlotsModel extends ModelWithPersistence {
   private templates: TemplateAccumulator = {}
   private multiSourceVariations: MultiSourceVariations = {}
   private multiSourceEncoding: MultiSourceEncoding = {}
+  private screenDimensions: [number, number] = [1000, 500]
 
   constructor(
     dvcRoot: string,
@@ -335,6 +336,14 @@ export class PlotsModel extends ModelWithPersistence {
     return this.multiSourceEncoding
   }
 
+  public setScreenDimensions(dimensions: [number, number]) {
+    this.screenDimensions = dimensions
+  }
+
+  public getScreenDimensions() {
+    return this.screenDimensions
+  }
+
   private handleCliError() {
     this.comparisonData = {}
     this.revisionData = {}
@@ -437,7 +446,8 @@ export class PlotsModel extends ModelWithPersistence {
       this.getNbItemsPerRowOrWidth(PlotsSection.TEMPLATE_PLOTS),
       this.getHeight(PlotsSection.TEMPLATE_PLOTS),
       this.getRevisionColors(),
-      this.multiSourceEncoding
+      this.multiSourceEncoding,
+      this.screenDimensions
     )
   }
 }

extension/src/plots/webview/messages.ts

@@ -39,6 +39,8 @@ export class WebviewMessages {
   private readonly selectPlots: () => Promise<void>
   private readonly updateData: () => Promise<void>
 
+  private sendPlotsBackTimeout: NodeJS.Timeout | undefined
+
   constructor(
     paths: PathsModel,
     plots: PlotsModel,
@@ -116,11 +118,18 @@ export class WebviewMessages {
           { isImage: !!message.payload },
           undefined
         )
+      case MessageFromWebviewType.SET_PLOTS_SCREEN_DIMENSIONS:
+        return this.setScreenDimensions(message.payload)
       default:
         Logger.error(`Unexpected message: ${JSON.stringify(message)}`)
     }
   }
 
+  private setScreenDimensions(dimensions: [number, number]) {
+    this.plots.setScreenDimensions(dimensions)
+    this.debounceSendPlotsBack(PlotsSection.TEMPLATE_PLOTS)
+  }
+
   private setPlotSize(
     section: PlotsSection,
     nbItemsPerRow: number,
@@ -134,18 +143,25 @@ export class WebviewMessages {
       undefined
     )
 
-    switch (section) {
-      case PlotsSection.COMPARISON_TABLE:
-        this.sendComparisonPlots()
-        break
-      case PlotsSection.CUSTOM_PLOTS:
-        this.sendCustomPlots()
-        break
-      case PlotsSection.TEMPLATE_PLOTS:
-        this.sendTemplatePlots()
-        break
-      default:
-    }
+    this.debounceSendPlotsBack(section)
+  }
+
+  private debounceSendPlotsBack(section: string) {
+    clearTimeout(this.sendPlotsBackTimeout)
+    this.sendPlotsBackTimeout = setTimeout(() => {
+      switch (section) {
+        case PlotsSection.COMPARISON_TABLE:
+          this.sendComparisonPlots()
+          break
+        case PlotsSection.CUSTOM_PLOTS:
+          this.sendCustomPlots()
+          break
+        case PlotsSection.TEMPLATE_PLOTS:
+          this.sendTemplatePlots()
+          break
+        default:
+      }
+    }, 500)
   }
 
   private setSectionCollapsed(collapsed: Partial<SectionCollapsed>) {

extension/src/webview/contract.ts

@@ -52,6 +52,7 @@ export enum MessageFromWebviewType {
   SET_STUDIO_SHARE_EXPERIMENTS_LIVE = 'set-studio-share-experiments-live',
   SHARE_EXPERIMENT_AS_BRANCH = 'share-experiment-as-branch',
   SHARE_EXPERIMENT_AS_COMMIT = 'share-experiment-as-commit',
+  SET_PLOTS_SCREEN_DIMENSIONS = 'set-plots-screen-dimensions',
   TOGGLE_PLOTS_SECTION = 'toggle-plots-section',
   REMOVE_CUSTOM_PLOTS = 'remove-custom-plots',
   REMOVE_STUDIO_TOKEN = 'remove-studio-token',
@@ -238,6 +239,10 @@ export type MessageFromWebview =
   | { type: MessageFromWebviewType.SWITCH_BRANCHES_VIEW }
   | { type: MessageFromWebviewType.SWITCH_COMMITS_VIEW }
   | { type: MessageFromWebviewType.SELECT_BRANCHES }
+  | {
+      type: MessageFromWebviewType.SET_PLOTS_SCREEN_DIMENSIONS
+      payload: [number, number]
+    }
 
 export type MessageToWebview<T extends WebviewData> = {
   type: MessageToWebviewType.SET_DATA

webview/src/plots/components/Plots.tsx

@@ -13,6 +13,7 @@ import { Modal } from '../../shared/components/modal/Modal'
 import { WebviewWrapper } from '../../shared/components/webviewWrapper/WebviewWrapper'
 import { GetStarted } from '../../shared/components/getStarted/GetStarted'
 import { PlotsState } from '../store'
+import { sendDimensions } from './messages'
 
 const PlotsContent = () => {
   const dispatch = useDispatch()
@@ -31,15 +32,18 @@ const PlotsContent = () => {
 
   useLayoutEffect(() => {
     const onResize = () => {
-      wrapperRef.current &&
-        dispatch(
-          setMaxNbPlotsPerRow(
-            // Plots grid have a 20px margin around it, we subtract 20 * 2 from the wrapper width to get the max available space
-            wrapperRef.current.getBoundingClientRect().width - 40
-          )
-        )
+      if (wrapperRef.current) {
+        // Plots grid have a 20px margin around it, we subtract 20 * 2 from the wrapper width to get the max available space
+        const wrapperClientRect = wrapperRef.current.getBoundingClientRect()
+        const width = wrapperClientRect.width - 40
+        const height = wrapperClientRect.height
+
+        dispatch(setMaxNbPlotsPerRow(width))
+        sendDimensions(width, height)
+      }
     }
     window.addEventListener('resize', onResize)
+    onResize()
 
     return () => {
       window.removeEventListener('resize', onResize)

webview/src/plots/components/messages.ts

@@ -21,3 +21,9 @@ export const selectRevisions = () => {
     type: MessageFromWebviewType.SELECT_EXPERIMENTS
   })
 }
+
+export const sendDimensions = (width: number, height: number) =>
+  sendMessage({
+    payload: [width, height],
+    type: MessageFromWebviewType.SET_PLOTS_SCREEN_DIMENSIONS
+  })

webview/src/plots/components/styles.module.scss

@@ -74,6 +74,10 @@ $gap: 20px;
   }
 }
 
+:global(.ReactVirtualized__Grid) {
+  width: max-content !important;
+}
+
 :global(.ReactVirtualized__Grid__innerScrollContainer),
 .noBigGrid {
   width: calc(100% - $gap * 2) !important;
@@ -135,27 +139,27 @@ $gap: 20px;
 }
 
 .ratioSmaller .plot {
-  aspect-ratio: 2 / 1;
+  aspect-ratio: calc(var(--scale) * 2 / 1);
 }
 
 .ratioSmall .plot {
-  aspect-ratio: 9 / 5;
+  aspect-ratio: calc(var(--scale) * 9 / 5);
 }
 
 .ratioRegular .plot {
-  aspect-ratio: 4 / 3;
+  aspect-ratio: calc(var(--scale) * 4 / 3);
 }
 
 .ratioSquare .plot {
-  aspect-ratio: 1;
+  aspect-ratio: var(--scale);
 }
 
 .ratioVerticalNormal .plot {
-  aspect-ratio: 3 / 4;
+  aspect-ratio: calc(var(--scale) * 3 / 4);
 }
 
 .ratioVerticalLarger .plot {
-  aspect-ratio: 3 / 5;
+  aspect-ratio: calc(var(--scale) * 3 / 5);
 }
 
 .plot img,
@@ -166,7 +170,6 @@ $gap: 20px;
 }
 
 .plot.multiViewPlot {
-  aspect-ratio: calc(0.8 * var(--scale) + 0.2);
   grid-column: span var(--scale);
 }