We have migrated from old golden-layout to golden-layout 2 in our Angular 17 app, and things are mostly working as expected, however I have one bizarre issue left that I have not been able to solve.
In our app we have dashboards, which contain a golden-layout with some widgets inside the layout. Each widget is a standard wrapper with a (golden-layout) ContentItem inside it.
The configs for each dashboard are stored on back-end, so whenever a dashboard loads, it gets the config from server and initialises golden-layout with this config.
Part of app functionality is user can customise this dashboard and save it as a custom dashboard for only themselves. Process is like this:
- User visits standard dashboard
- User customises dashboard in some way – adding/removing widgets, rearranging them, resizing them, etc and then saves dashboard
- User is then redirected to new custom dashboard
The issue is that if user resizes the widgets on a dashboard and then saves the dashboard, when user is redirected to the custom dashboard, the sizes of the widgets is ignored. Other changes like adding/removing/rearranging the widgets are preserved, it is only the sizes of the widgets that is ignored. But then if user does a refresh in the browser and custom page loads again, then it does have the correct heights as set by the user before saving custom dashboard.
These are some things I checked:
- Correct heights are sent to the back-end when saving the page after resizing – they are.
- Correct heights are returned from the back-end when redirecting to the new
portal page – they are. - New heights are passed into the GoldenLayout
loadLayoutmethod after returned by back-end – they are - I’ve tried clearing the layout with
goldenLayout.clear()before callingloadLayout– made no difference - I’ve tried completely destroying the layout with
goldenLayout.destroy()before callingloadLayout– made no difference - I’ve tried explicitly setting the new heights manually on the components inside the stacks – made no difference
- I’ve tried using the new golden-layout-2
sizeproperty instead of the oldwidth/heightproperties – made no difference
Whether page is loaded from scratch or redirected after saving page we still go through same life-cycle, so config is returned from server, new GoldenLayout() and loadLayout are used both times.
I saved the configs that are returned when loading page from scratch and after being redirected and checked them in Kdiff – they are mostly identical except for height properties and some minor differences like having null instead of empty string for row/column titles.
Here is a copy of config returned by back-end when originally loading a dashboard:
{
"content": [
{
"type": "row",
"content": [
{
"type": "column",
"content": [
{
"type": "stack",
"content": [
{
"type": "component",
"content": null,
"width": null,
"height": null,
"id": null,
"isClosable": true,
"title": "Widget 1",
"componentName": "widget-golden-instance",
"componentState": {},
"widgetLayoutedInstanceId": "1678f085-fd28-403b-b704-3a79eb66ae7a",
"componentType": "widget-golden-instance"
}
],
"width": null,
"height": 27.1869849654493,
"id": "c895ec22-ec21-483b-a050-be9c4c30f580",
"isClosable": true,
"title": "",
"componentName": null,
"componentState": null,
"widgetLayoutedInstanceId": null
},
{
"type": "stack",
"content": [
{
"type": "component",
"content": null,
"width": null,
"height": null,
"id": null,
"isClosable": true,
"title": "Widget 2",
"componentName": "widget-golden-instance",
"componentState": {},
"widgetLayoutedInstanceId": "a2893d62-8d46-44c7-85f8-2962c51a1f2e",
"componentType": "widget-golden-instance"
}
],
"width": null,
"height": 31.9728276435933,
"id": "68c4c539-c387-42f7-ba05-6d8352e6749c",
"isClosable": true,
"title": "",
"componentName": null,
"componentState": null,
"widgetLayoutedInstanceId": null
},
{
"type": "stack",
"content": [
{
"type": "component",
"content": null,
"width": null,
"height": null,
"id": null,
"isClosable": true,
"title": "Widget 3",
"componentName": "widget-golden-instance",
"componentState": {},
"widgetLayoutedInstanceId": "65cd9ba3-6ac1-4b30-8a09-d6c7c66eec44",
"componentType": "widget-golden-instance"
}
],
"width": null,
"height": 40.8401873909574,
"id": "a296858d-2494-4178-a4d6-09f49dae300f",
"isClosable": true,
"title": "",
"componentName": null,
"componentState": null,
"widgetLayoutedInstanceId": null
}
],
"width": 100,
"height": null,
"id": "388d4498-b157-43b1-bf4d-038bd1d5509f",
"isClosable": true,
"title": "",
"componentName": null,
"componentState": null,
"widgetLayoutedInstanceId": null
}
],
"width": 100,
"height": null,
"id": "b167d6ca-f57f-4add-bdcf-1cf5323b3558",
"isClosable": true,
"title": "",
"componentName": null,
"widgetLayoutedInstanceId": null
}
],
"dimensions": {
"defaultMinItemHeight": "60px",
"defaultMinItemWidth": "300px",
"dragProxyWidth": 300,
"dragProxyHeight": 300
},
"settings": {
"hasHeaders": true,
"showPopoutIcon": false
}
}
And here is copy of config returned by back-end after being redirected (when sizes are of items are not correct):
{
"content": [
{
"type": "row",
"content": [
{
"type": "column",
"content": [
{
"type": "stack",
"content": [
{
"type": "component",
"content": null,
"width": null,
"height": null,
"id": null,
"isClosable": true,
"title": "Widget 1",
"componentName": "widget-golden-instance",
"componentState": {},
"widgetLayoutedInstanceId": "1678f085-fd28-403b-b704-3a79eb66ae7a",
"componentType": "widget-golden-instance"
}
],
"width": null,
"height": 41.79549901048402,
"id": "c895ec22-ec21-483b-a050-be9c4c30f580",
"isClosable": true,
"title": "",
"componentName": null,
"componentState": null,
"widgetLayoutedInstanceId": null
},
{
"type": "stack",
"content": [
{
"type": "component",
"content": null,
"width": null,
"height": null,
"id": null,
"isClosable": true,
"title": "Widget 2",
"componentName": "widget-golden-instance",
"componentState": {},
"widgetLayoutedInstanceId": "a2893d62-8d46-44c7-85f8-2962c51a1f2e",
"componentType": "widget-golden-instance"
}
],
"width": null,
"height": 17.36431359855858,
"id": "68c4c539-c387-42f7-ba05-6d8352e6749c",
"isClosable": true,
"title": "",
"componentName": null,
"componentState": null,
"widgetLayoutedInstanceId": null
},
{
"type": "stack",
"content": [
{
"type": "component",
"content": null,
"width": null,
"height": null,
"id": null,
"isClosable": true,
"title": "Widget 3",
"componentName": "widget-golden-instance",
"componentState": {},
"widgetLayoutedInstanceId": "65cd9ba3-6ac1-4b30-8a09-d6c7c66eec44",
"componentType": "widget-golden-instance"
}
],
"width": null,
"height": 40.8401873909574,
"id": "a296858d-2494-4178-a4d6-09f49dae300f",
"isClosable": true,
"title": "",
"componentName": null,
"componentState": null,
"widgetLayoutedInstanceId": null
}
],
"width": 100,
"height": null,
"id": "388d4498-b157-43b1-bf4d-038bd1d5509f",
"isClosable": true,
"title": "",
"componentName": null,
"componentState": null,
"widgetLayoutedInstanceId": null
}
],
"width": 100,
"height": null,
"id": "b167d6ca-f57f-4add-bdcf-1cf5323b3558",
"isClosable": true,
"title": "",
"componentName": null,
"widgetLayoutedInstanceId": null
}
],
"dimensions": {
"defaultMinItemHeight": "60px",
"defaultMinItemWidth": "300px",
"dragProxyWidth": 300,
"dragProxyHeight": 300
},
"settings": {
"hasHeaders": true,
"showPopoutIcon": false
}
}
I’ve pretty much run out things to check/fix at this point – hoping someone can suggest something I may have missed