Layout Renders odd in Ranet HTML5

I have some overrides to manage connection string and then dynamically load page. I essentially just want the page to be empty so one can drag and drop relevant dimension attributes and measure values.

For example I have:


var injector = window.angular.element(document.getElementById("@applicationId")).injector();
var api = injector.get('ranetAngularInstance');

var page = {
id: "0",
caption: "@Model.CubeName",
cubeName: "@Model.CubeName",
autoExecuteMdxQuery: true,
placementLayoutModeQueryDesigner: 0,
showMetadataAndQueryDesigner: true,
layout: { filters: [], columns: [], rows: [], data: []},
queryDesignerSetting: {
generateCustomCalculated: false,
hideEmptyColumns: true,
hideEmptyRows: false,
includeAllMembers: true,
includeCustomCalculationsInDrillDown: false,
subsetCount: 0,
useVisualTotals: true
}
};

api.config({
connection: "@Model.CubeConnectionString", //this works, which is not in documentation
connectionString: "@Model.CubeConnectionString", //this property does not seem to work
defaultConnection: "@Model.CubeConnectionString", //this property does not seem to work
idDefaultPage: "0",
toolbar: [{ name: "editConnectionButton", isVisible: false }] });

api.addNewPage(page);
api.setSelectedPage("0");


You can see what is rendered in the attached file.