SQL Lab container div not showing because height is 0px

[jwoodb]

Bug description

The bug is that I...

1. Cloned the superset repo to my local machine
2. Ran docker compose up --build
3. Logged in and accessed the SQL Lab tab.
4. The page was blank except for the query tabs (see screenshot)

Expected behaviour: The full UI shows.

Screenshots/recordings

No response

Superset version

master / latest-dev

Python version

Not applicable

Node version

18 or greater

Browser

Chrome

Additional context

No issues were logged in the superset_app docker container.

There were no errors in the JS console in the browser, only this:

I took a look at the markup and I could see it was all there, but collapsed. It appears that this div was the culprit because it did not set a height:

<div data-test="SqlLabApp" class="App SqlLab css-6pihn3">

I add the height: 100vh to the SqlLabStyles CSS in the following file: superset-frontend/src/SqlLab/components/App/index.tsx

const SqlLabStyles = styled.div`
  ${({ theme }) => css`
    &.SqlLab {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 0 ${theme.gridUnit * 2}px;
      height: 100vh; // Add this new rule
     ...

And, the page displays as expected.

I have no idea why this wasn't working for me without me having to add this additional CSS rule.

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

Hey @jwoodb! 👋 I'm here to help you with any bugs, questions, or contributions you have for Apache Superset. Let's work together to resolve this issue!

The issue you're experiencing with the SqlLabApp component having a height of 0px might be related to the dynamic height adjustment logic in the component. The SqlLabApp component uses JavaScript logic to dynamically adjust its height based on the window size and user interactions. This is done using the useEffect hook, which recalculates the height on window resize events ^[1].

If this logic isn't functioning as expected, it could result in the component not displaying correctly. Adding height: 100vh to the CSS is a workaround that forces the component to occupy the full viewport height, which is why it resolves the issue for you.

To further investigate, you might want to check if the JavaScript logic responsible for setting the height is being executed correctly. Ensure that there are no errors or issues with the event listeners or the functions that calculate and set the height. Additionally, verify that all dependencies and configurations are correctly set up, as they might affect the execution of this logic.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[hainenber]

I'm currently at commit 732de4a and the SQL Lab page shows properly to me. Can you pull the latest master and retry?

[rusackas]

There was a layout glitch that was fixed on master so I'll call this closed/resolved. If you pull the latest master code and still experience this, let us know and we'll reopen it.