insight-view-visualization height

[hxnets]

Hi!

We found this height and InsightView during the test. At the end of loading, because there was no height, the content could not be displayed.

@gooddata/sdk-ui-ext/esm/insightView/InsightView.js

React.createElement("div", { className: "insight-view-visualization",
// make the visualization div 0 height so that the loading component can take up the whole area
style: isLoadingShown ? { height: 0 } : {height: '400px'} },

If you set a fixed height, it will be displayed normally after loading, but if it is undefined, it will be blank after loading. Should you add a height parameter to InsightView?

export function MyComponent() {
const style = {height: 400};
return (

);
}

[TheRPMko]

Hi there,

Radek from the GD Technical support team here - you're right that the InsightView requires a set height, however this is (somewhat) intentional. It fits with the rest of the embedding features, most of our embedding actually requires or at least benefits from a set height, but it was overall considered okay to leave this up to the frontend devs using the features.

Hope this helps!

[hxnets]

Hi there,

Radek from the GD Technical support team here - you're right that the InsightView requires a set height, however this is (somewhat) intentional. It fits with the rest of the embedding features, most of our embedding actually requires or at least benefits from a set height, but it was overall considered okay to leave this up to the frontend devs using the features.

Hope this helps!

Thanks for your reply
At present, there is no relevant height parameter for insight-view-visualization. According to my observation, when the page is initialized and opened, data can be displayed, but at the same time, it will enter the loading state, and data cannot be displayed after loading again. I tried to set the height to auto but it didn't work, so I must give a fixed height. At present, I use

There is a height in the code generated in the workspace, but this is the height of div, which doesn't seem to be helpful for the display.There is a height in the code generated in the workspace, but this is the height of div, which doesn't seem to be helpful for the display.

it as follows:

const style = {height: 400};

export function MyComponent() {

return (
    <div style={style}>
        <BackendProvider backend={backend}>
            <WorkspaceProvider workspace={workspace}>
                <InsightView
                    insight={insight}
                    showTitle={showTitle}
                />
            </WorkspaceProvider>
        </BackendProvider>
    </div>
);

}

[TheRPMko]

That's interesting for sure - I will have to review whether this is an oversight in the design, or maybe some functionality that got changed over time without the UI code generation keeping up with this. Please bear with me here as it is the holiday period, it will likely take me a little longer to get back!