Introduce workaround for vega height bug (#31461)

Author: flash1293

src/legacy/core_plugins/vega/public/__tests__/vega_visualization.js

@@ -188,6 +188,49 @@ describe('VegaVisualizations', () => {
 
     });
 
+    it('should add a small subpixel value to the height of the canvas to avoid getting it set to 0', async () => {
+      let vegaVis;
+      try {
+
+        vegaVis = new VegaVisualization(domNode, vis);
+        const vegaParser = new VegaParser(`{
+            "$schema": "https://vega.github.io/schema/vega/v3.json",
+            "marks": [
+              {
+                "type": "text",
+                "encode": {
+                  "update": {
+                    "text": {
+                      "value": "Test"
+                    },
+                    "align": {"value": "center"},
+                    "baseline": {"value": "middle"},
+                    "xc": {"signal": "width/2"},
+                    "yc": {"signal": "height/2"}
+                    fontSize: {value: "14"}
+                  }
+                }
+              }
+            ]
+          }`, new SearchCache());
+        await vegaParser.parseAsync();
+
+        domNode.style.width = '256px';
+        domNode.style.height = '256px';
+
+        await vegaVis.render(vegaParser, { data: true });
+        const vegaView = vegaVis._vegaView._view;
+        expect(vegaView.height()).to.be(250.00000001);
+
+        vegaView.height(250);
+        await vegaView.runAsync();
+        // as soon as this test fails, the workaround with the subpixel value can be removed.
+        expect(vegaView.height()).to.be(0);
+      } finally {
+        vegaVis.destroy();
+      }
+    });
+
   });
 
 

src/legacy/core_plugins/vega/public/vega_view/vega_base_view.js

@@ -195,8 +195,13 @@ export class VegaBaseView {
     const heightExtraPadding = 6;
     const width = Math.max(0, this._$container.width() - this._parser.paddingWidth);
     const height = Math.max(0, this._$container.height() - this._parser.paddingHeight) - heightExtraPadding;
-    if (view.width() !== width || view.height() !== height) {
-      view.width(width).height(height);
+    // Somehow the `height` signal in vega becomes zero if the height is set exactly to
+    // an even number. This is a dirty workaround for this.
+    // when vega itself is updated again, it should be checked whether this is still
+    // necessary.
+    const adjustedHeight = height + 0.00000001;
+    if (view.width() !== width || view.height() !== adjustedHeight) {
+      view.width(width).height(adjustedHeight);
       return true;
     }
     return false;