fix: Set responsive dimensions on (re)render (#1556)

* fix: Set responsive dimentions on first render

* test: Wait for visualization to fully render

Author: basbroek

src/components/renderer/renderer.tsx

@@ -196,8 +196,8 @@ export default function Renderer(props: RendererProps) {
   );
 
   const initView = useCallback(async () => {
+    const chart = chartRef.current;
     const clearChartContainers = () => {
-      const chart = chartRef.current;
       const portalChart = portalChartRef.current;
       if (chart) chart.innerHTML = '';
       if (portalChart) portalChart.innerHTML = '';
@@ -229,6 +229,7 @@ export default function Renderer(props: RendererProps) {
         hover,
         loader,
         expr: expressionInterpreter ? vegaInterpreter : undefined,
+        container: chart,
       });
       newView.runAfter(runAfter, true);
       newView.logger(dispatchingLogger);

tests/e2e/test-runtime/renderer.test.ts

@@ -443,4 +443,30 @@ test.describe('Visualization Rendering', () => {
     });
     expect(hasUpdatedContent).toBe(true);
   });
+
+  test('should render responsive chart correctly', async () => {
+    const DEFAULT_CHART_WIDTH = '500';
+
+    const responsiveSpec = `{
+  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
+  "width": "container",
+  "data": {"values": [{"a": "A", "b": 28}, {"a": "B", "b": 55}]},
+  "mark": "bar",
+  "encoding": {
+    "x": {"field": "a", "type": "nominal"},
+    "y": {"field": "b", "type": "quantitative"}
+  }
+}`;
+
+    await homePage.typeInEditor(responsiveSpec);
+    await homePage.waitForVisualizationUpdate();
+    await homePage.page.waitForTimeout(2000);
+
+    const svgWidth = await homePage.page
+      .locator('.chart-container svg, .chart-container #vis svg, .vega-embed svg')
+      .first()
+      .getAttribute('width');
+
+    expect(svgWidth).toBe(DEFAULT_CHART_WIDTH);
+  });
 });