new grid layout with rows/columns

[gavin-ts]

Summary

Adds a new "grid diagram" layout to place nodes in rows and/or columns.
Use keyword grid-rows: N or grid-columns: N on a container to layout the container's children accordingly.
Edges within grids, and containers in grids are not currently supported.

Details

• fixes specify rows/cols #983
• adds new tests: teleport_grid, dagger_grid, executive_grid, grid_tests
• TODO in follow up: add recursive grid layouts (used by default in a grid) implement nested grid-diagrams #1144

grids can be created by settings rows or columns

layout will attempt to evenly place nodes into the number of rows or columns

with both rows and columns, each row's nodes will be the same height and each column's node the same width

ordering: if rows is set first, nodes will be placed along rows

if you add nodes exceeding the capacity, it is ok, it will just continue the same way

use rows: 3 + node width/height to build desired layout (new executive_grid test)

new teleport_grid test

new dagger_grid test

[ejulio-ts]

About the new d2grid/layout.go file. This is something I try to do, but it may not be possible in some cases.

The first thing in the file is newGrid, followed by Layout, layoutGrid and withoutGrids

But the order of the calls in Layout, withoutGrids, layoutGrid and newGrid. So, when reviewing/reading I had to keep going back and forth to find things. In general, I try to keep them in sequence as they are called. In some cases it makes it easier to follow/understand.

Another one is that, I think we should treat this as we do with clusters in TALA. Within a grid, nodes should have a standard size because of the symmetry it adds to the end result.

Should this handle nested grids? if so, can you add a test case?

Finally, I don't think I saw that no edges to descendants is enforced. If so, I think this is important to raise as an error in the compiler

[alixander]

TODO add compiler validation for nodes in grid container must not have edges or descendants

@donglixiaoche wrote something similar here for edges: #1071

perhaps you could reuse that

[alixander]

just to test its flexibility, can it produce this? (the circled part)

[gavin-ts]

just to test its flexibility, can it produce this? (the circled part)

Here's what it looks like currently. Don't have recursive grids yet, but it should be doable since we don't allow edges within grids.

[alixander]

let's call these "Grid diagrams" https://discord.com/channels/1039184639652265985/1039184640285610147/1093008211600228484

can you make the appropriate namings in the code?

[alixander]

The Universe: {
  columns: 3

  Planets
  Solar Systems
  Galaxies

  Venus
}

[gavin-ts]

The Universe: {
  columns: 3
...

I'm fixing this now, it is the TODO in the pr

Update: Fixed, now the 4 nodes are arranged over 3 columns as specified

[alixander]

The Universe: {
  columns: 3
  rows: 2

  Planets
  Solar Systems
  Galaxies

  Venus
}

[gavin-ts]

With columns specified first here, it places the available nodes along each column first, but there aren't enough nodes. With more nodes it will fill the 3 columns:

[alixander]

let's name the keywords grid-columns and grid-rows to avoid parking another two common keywords, which especially could come up in sql tables.

[alixander]

didn't review algorithms too much, tested and played around with it and works great.

[shykes]

Thanks for the Dagger shoutout 😁❤️