GoldenLayout, how to hide/show component?

Question

I have an application based on GoldenLayout (1.5.9). The layout is a Row containing two Columns. See below the configuration of the column I'm interested in.

let config = {
    content: [
        {
            type: "row",
            content: [
                {
                    type: "column",
                    width: 31,
                    content: [
                        {
                            type: "stack",
                            isClosable: false,
                            content: [...]
                        },
                        {
                            type: "component",
                            height: 30,
                            title: "Filters",
                            componentName: "templateComponent"
                        }
                    ]
                },
                ...
            ]
        }
    ]
}

Now I want to be able to close or hide the Component and made it reappears pushing a toolbar button (i.e. programmatically). I made various unsuccessful attempts:

1. If I close the component using the x button, the parent Column magically disappears so a subsequent addChild on the component parent (saved somewhere) adds the component as a child of the Stack. Not what I intended.

2. If I hide the component.element, the component disappears, but an hole remains. That is, the Stack does not resize.

3. I don't find anywhere the documented hide() method on the Component, even if I wrap it in a Row, Column or Stack.

4. If I manually move the separator between the Stack and the Component way down I obtain what I want (that is, to give to the Stack almost all the height) but no combination of setSize(?, ?) seems to do the same programmatically.

Any idea? Thanks!

UPDATE: If I wrap the component into another Stack, the container Column does not disappears so I can add it back:

{
    type: "stack",
    height: 30,
    id: "filtersFrame",
    isClosable: true,
    content: [
        {
            type: "component",
            title: "Filters",
            componentName: "templateComponent",
            componentState: { template: "filter-template" }
        }
    ]
}

Simply the height is ignored (the new stack is always 50% in height) and the knockout template is there but it is not run through knockout. But this is another problem.

Answer 1

A similar use case:

1. User pressed a button
2. Component hides
3. User sees blank area but size in maintained.

Now I want to be able to close or hide the Component and made it reappears pushing a toolbar button (i.e. programmatically).

What I would do in this case is have a column or row with a stack inside it. Hide the stacks headers via the headerhieght itemconfig dimension setting. This stack has 2 items inside, one of which is empty. Then when the user clicks the button you set the empty item to be active. Then when you want it to reappear then just set the original to active.

The other use case is pretty simple where you are programmatically closing one and everything else around it resizes taking up the space. Bringing it back is also just adding it back in. I don't think you are referring to this one. Let me know.

Answer 2

I came across this same issue and found an easy solution: Note that I'm using Angular5, so this is in typescript, but the code is easily translatable to vanilla JS.

I found that if you simply call show/hide, the updateSize doesn't do anything, leaving a large empty hole, so you should set the size to 0/[whatever], too.

If you set the size to 0 and call updateSize() without calling hide(), the element will become thin strip.

You must do both for the full effect.

    let smartFormsRow = this._goldenLayout.root.getItemsById("smartformsrow");
    var isHidden = smartFormsRow[0].config.height == 0;
    if (isHidden) {
        smartFormsRow[0].element.show(); //jquery hide
        smartFormsRow[0].config.height = 30; //30%
    } else {
        smartFormsRow[0].element.hide(); //jquery show
        smartFormsRow[0].config.height = 0;
    }

    this._goldenLayout.updateSize();