First Label item in GridLayout not displayed

[Audrius-St]

Hello,

Please find below a minimum working example that demonstrates the issue raised in Julia Discourse:

https://discourse.julialang.org/t/makie-first-item-in-gridlayout-not-displayed/81353

using GLMakie
using ModernGL

# General display parameters
GLMakie.activate!()

set_window_config!(
    float=true,
    framerate = 60.0,
    title = "Test Display")

# Figure for GLMakie display
noto_sans = assetpath("NotoSans-Regular.ttf")

figure = Figure(
            backgroundcolor = :black,
            resolution = (1920, 1040), 
            font = noto_sans)

# Top level grid layout
top_level_grid_layout = figure[1, 1:3] = GridLayout()

# Dummy control panel grid layout
test_padding = 16
test_panel_grid_layout = top_level_grid_layout[1, 1][4, 1] = GridLayout() 
first_panel_grid_layout = test_panel_grid_layout[1, 1] = GridLayout()
second_panel_grid_layout = test_panel_grid_layout[2, 1] = GridLayout()
third_panel_grid_layout = test_panel_grid_layout[3, 1] = GridLayout()
fourth_panel_grid_layout = test_panel_grid_layout[4, 1] = GridLayout()

# Dummuy image display grid layout
displays_grid_layout = top_level_grid_layout[1:2, 2:3] = GridLayout() 
top_left_grid_layout = displays_grid_layout[1, 1]  = GridLayout()
top_right_grid_layout = displays_grid_layout[1, 2]  = GridLayout()
bottom_left_grid_layout = displays_grid_layout[2, 1]  = GridLayout()
bottom_right_grid_layout = displays_grid_layout[2, 2]  = GridLayout()

# Dummy control panel
# 1st Label
first_string = 
string(
    "This is the 1st Label string\n\n",
    "\t\t\tThis is a test.\n",
    "\t\t\tThis is only a test.\n",
    "\t\t\tThis is a miminal working example.\n",
    "\t\t\tWritten to demonstrate the issue.\n",
    "\t\t\tThe issue being the 1st missing Label.\n",
    "\n\n")

first_text_panel = 
Axis(
    first_panel_grid_layout[1,1],
    backgroundcolor = :grey10)

hidedecorations!.(first_text_panel)

Label(
    first_panel_grid_layout[1, 1], 
    text = first_string,
    color = :gray80,
    halign = :left,
    valign = :center,
    justification = :left,
    lineheight = 1.3,
    padding = (14.0f0, 16.0f0, 16.0f0, 16.0f0),
    tellheight = true,
    tellwidth = true,
    textsize = 16)

# 2nd Label
second_string = 
string(
    "This is the 2nd Label string\n\n",
    "\t\t\tThis is a test.\n",
    "\t\t\tThis is only a test.\n",
    "\t\t\tThis is a miminal working example.\n",
    "\t\t\tWritten to demonstrate the issue.\n",
    "\t\t\tThe issue being the 1st missing Label.\n",
    "\n\n")

second_text_panel = 
Axis(
    second_panel_grid_layout[1,1],
    backgroundcolor = :grey10)

hidedecorations!.(second_text_panel)

Label(
    second_panel_grid_layout[1, 1], 
    text = second_string,
    color = :gray80,
    halign = :left,
    valign = :center,
    justification = :left,
    lineheight = 1.3,
    padding = (14.0f0, 16.0f0, 16.0f0, 16.0f0),
    tellheight = true,
    tellwidth = true,
    textsize = 16)

# 3rd Label
third_string = 
string(
    "This is the 3rd Label string\n\n",
    "\t\t\tThis is a test.\n",
    "\t\t\tThis is only a test.\n",
    "\t\t\tThis is a miminal working example.\n",
    "\t\t\tWritten to demonstrate the issue.\n",
    "\t\t\tThe issue being the 1st missing Label.\n",
    "\n\n")

third_text_panel = 
Axis(
    third_panel_grid_layout[1,1],
    backgroundcolor = :grey10)

hidedecorations!.(third_text_panel)

Label(
    third_panel_grid_layout[1, 1], 
    text = third_string,
    color = :gray80,
    halign = :left,
    valign = :center,
    justification = :left,
    lineheight = 1.3,
    padding = (14.0f0, 16.0f0, 16.0f0, 16.0f0),
    tellheight = true,
    tellwidth = true,
    textsize = 16)

# 4th Label
fourth_string = 
string(
    "This is the 4th Label string\n\n",
    "\t\t\tThis is a test.\n",
    "\t\t\tThis is only a test.\n",
    "\t\t\tThis is a miminal working example.\n",
    "\t\t\tWritten to demonstrate the issue.\n",
    "\t\t\tThe issue being the 1st missing Label.\n",
    "\n\n")

fourth_text_panel = 
Axis(
    fourth_panel_grid_layout[1,1],
    backgroundcolor = :grey10)

hidedecorations!.(fourth_text_panel)

Label(
    fourth_panel_grid_layout[1, 1], 
    text = fourth_string,
    color = :gray80,
    halign = :left,
    valign = :center,
    justification = :left,
    lineheight = 1.3,
    padding = (14.0f0, 16.0f0, 16.0f0, 16.0f0),
    tellheight = true,
    tellwidth = true,
    textsize = 16)

# Dummy image displays
Box(
    top_left_grid_layout[1, 1], 
    color = :orangered1)
Box(
    top_right_grid_layout[1, 1], 
    color = :lime)
Box(
    bottom_left_grid_layout[1, 1], 
    color = :blue1)
Box(
    bottom_right_grid_layout[1, 1], 
    color = :gray41)

# Display
display(figure)

The output displayed: by the above MWE:

[jkrumbiegel]

This is a problem with your GridLayout setup. It could be that because the alignment behavior of GridLayoutBase changed a while ago that this only became visible for you now. Basically, if an element was bigger than its layout cell, a while ago the inner layout would be aligned top/left. Now it's center because that's more useful in standard cases.

The main issue was the unnecessary rows/columns and nesting levels. This caused the assembly with your labels to be vertically centered around some cell at the top left (not the whole left column) thereby hiding the first label. It's still there, you can see its lower border. Here's a simplified version of your gridlayout:

# Top level grid layout
top_level_grid_layout = figure[1, 1] = GridLayout()

# Dummy control panel grid layout
test_padding = 16
test_panel_grid_layout = top_level_grid_layout[1, 1] = GridLayout(tellheight = false) 
first_panel_grid_layout = test_panel_grid_layout[1, 1] = GridLayout()
second_panel_grid_layout = test_panel_grid_layout[2, 1] = GridLayout()
third_panel_grid_layout = test_panel_grid_layout[3, 1] = GridLayout()
fourth_panel_grid_layout = test_panel_grid_layout[4, 1] = GridLayout()

# Dummuy image display grid layout
displays_grid_layout = top_level_grid_layout[1, 2] = GridLayout() 
top_left_grid_layout = displays_grid_layout[1, 1]  = GridLayout()
top_right_grid_layout = displays_grid_layout[1, 2]  = GridLayout()
bottom_left_grid_layout = displays_grid_layout[2, 1]  = GridLayout()
bottom_right_grid_layout = displays_grid_layout[2, 2]  = GridLayout()

[Audrius-St]

This is a problem with your GridLayout setup. It could be that because the alignment behavior of GridLayoutBase changed a while ago that this only became visible for you now.

Yes, I think that was the cause.

Basically, if an element was bigger than its layout cell, a while ago the inner layout would be aligned top/left. Now it's center because that's more useful in standard cases.

Understood.

The main issue was the unnecessary rows/columns and nesting levels. This caused the assembly with your labels to be vertically centered around some cell at the top left (not the whole left column) thereby hiding the first label. It's still there, you can see its lower border. Here's a simplified version of your gridlayout:

Thank your for your explanation and the refactored minimum working example. Much appreciated.