Resizing plots horizontally (#2747)

* Add resizers to plots grid

* Resize plots horizontally

* Fix tests

* Fix linting issues

* Get plot container size correctly

* Fix tests

* Fix resizing items from postitions other than first

* Apply review comments

Author: sroy3

.eslintrc.js

@@ -28,7 +28,8 @@ module.exports = {
         '@typescript-eslint/no-unsafe-return': 'off',
         'no-undef': 'off',
         'sonarjs/no-duplicate-string': 'off',
-        'testing-library/no-render-in-setup': 'off'
+        'testing-library/no-render-in-setup': 'off',
+        'testing-library/render-result-naming-convention': 'off'
       }
     },
     {

extension/src/plots/model/index.ts

@@ -287,7 +287,18 @@ export class PlotsModel extends ModelWithPersistence {
   }
 
   public getPlotSize(section: Section) {
-    return this.plotSizes[section] || PlotSizeNumber.REGULAR
+    if (
+      this.plotSizes[section] &&
+      [
+        PlotSizeNumber.LARGE,
+        PlotSizeNumber.REGULAR,
+        PlotSizeNumber.SMALL,
+        PlotSizeNumber.SMALLER
+      ].includes(this.plotSizes[section])
+    ) {
+      return this.plotSizes[section]
+    }
+    return PlotSizeNumber.REGULAR
   }
 
   public setSectionCollapsed(newState: Partial<SectionCollapsed>) {

extension/src/plots/vega/util.test.ts

@@ -139,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, 500)
+    const updatedSpec = extendVegaSpec(spec, PlotSizeNumber.LARGE)
 
     const truncatedTitle = '…-many-many-characters-at-least-seventy-characters'
     const truncatedHorizontalTitle =
@@ -191,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, 300)
+    const updatedSpec = extendVegaSpec(spec, PlotSizeNumber.SMALL)
 
     const truncatedTitle = '…s-at-least-seventy-characters'
     const truncatedHorizontalTitle = '…at-least-seventy-characters-x'
@@ -221,7 +221,7 @@ describe('extendVegaSpec', () => {
       text: repeatedTitle
     })
 
-    const updatedSpec = extendVegaSpec(spec, 300)
+    const updatedSpec = extendVegaSpec(spec, PlotSizeNumber.SMALL)
 
     const truncatedTitle = '…ghijklmnopqrstuvwyz1234567890'
 
@@ -238,7 +238,7 @@ describe('extendVegaSpec', () => {
     const repeatedTitle = 'abcdefghijklmnopqrstuvwyz1234567890'
     const spec = withLongTemplatePlotTitle([repeatedTitle, repeatedTitle])
 
-    const updatedSpec = extendVegaSpec(spec, 300)
+    const updatedSpec = extendVegaSpec(spec, PlotSizeNumber.SMALL)
 
     const truncatedTitle = '…ghijklmnopqrstuvwyz1234567890'
 
@@ -258,7 +258,7 @@ describe('extendVegaSpec', () => {
       text: [repeatedTitle, repeatedTitle]
     })
 
-    const updatedSpec = extendVegaSpec(spec, 300)
+    const updatedSpec = extendVegaSpec(spec, PlotSizeNumber.SMALL)
 
     const truncatedTitle = '…ghijklmnopqrstuvwyz1234567890'
 
@@ -272,13 +272,17 @@ 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, 500, {
-      color: { domain: [], range: [] },
-      shape: {
-        field: 'field',
-        scale: { domain: [], range: [] }
+    const updatedSpec = extendVegaSpec(
+      multiSourceTemplate,
+      PlotSizeNumber.LARGE,
+      {
+        color: { domain: [], range: [] },
+        shape: {
+          field: 'field',
+          scale: { domain: [], range: [] }
+        }
       }
-    })
+    )
 
     expect(updatedSpec.encoding).not.toBeUndefined()
     expect(updatedSpec.layer[1].layer[0].encoding.shape).toBeNull()

extension/src/plots/vega/util.ts

@@ -216,7 +216,8 @@ const truncateTitleAsArrayOrString = (title: Text, size: number) => {
 const TitleLimit = {
   [PlotSizeNumber.LARGE]: 50,
   [PlotSizeNumber.REGULAR]: 50,
-  [PlotSizeNumber.SMALL]: 30
+  [PlotSizeNumber.SMALL]: 30,
+  [PlotSizeNumber.SMALLER]: 30
 }
 
 const truncateTitlePart = (

extension/src/plots/webview/contract.ts

@@ -2,9 +2,10 @@ import { VisualizationSpec } from 'react-vega'
 import { Color } from '../../experiments/model/status/colors'
 
 export const PlotSizeNumber = {
-  LARGE: 500,
-  REGULAR: 400,
-  SMALL: 300
+  LARGE: 1,
+  REGULAR: 2,
+  SMALL: 3,
+  SMALLER: 4
 }
 
 export enum Section {