Skip to content

refactor(util/grid): rewrite makegrid() with helper functions #158

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jan 5, 2024
+373 −550
Merged

refactor(util/grid): rewrite makegrid() with helper functions #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
248870e
test(util/grid): add unit tests for makegrid()
Duologic Jan 5, 2024
d20ef0e
fix(util/grid): pass unit tests for makeGrid()
Duologic Jan 5, 2024
f71954a
fix(examples): pass smoke test for runtimeDashboard
Duologic Jan 5, 2024
e119d38
refactor(util/grid): rewrite makegrid() with helper functions
Duologic Jan 5, 2024
79fe602
fix(util/grid): pass smoke test for redMethod
Duologic Jan 5, 2024
e10e6d8
fix(examples): pass smoke test for runtimeDashboard
Duologic Jan 5, 2024
b486842
chore: generate older versions
Duologic Jan 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 41 additions & 103 deletions custom/util/grid.libsonnet
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,13 @@
local d = import 'github.com/jsonnet-libs/docsonnet/doc-util/main.libsonnet';
local xtd = import 'github.com/jsonnet-libs/xtd/main.libsonnet';

local panelUtil = import './panel.libsonnet';

{
local root = self,

local rowPanelHeight = 1,
local gridWidth = 24,

// Calculates the number of rows for a set of panels.
countRows(panels, panelWidth):
std.ceil(std.length(panels) / std.floor(gridWidth / panelWidth)),

// Calculates gridPos for a panel based on its index, width and height.
gridPosForIndex(index, panelWidth, panelHeight, startY): {
local panelsPerRow = std.floor(gridWidth / panelWidth),
local row = std.floor(index / panelsPerRow),
local col = std.mod(index, panelsPerRow),
gridPos: {
w: panelWidth,
h: panelHeight,
x: panelWidth * col,
y: startY + (panelHeight * row) + row,
},
},

// Configures gridPos for each panel in a grid with equal width and equal height.
makePanelGrid(panels, panelWidth, panelHeight, startY):
std.mapWithIndex(
function(i, panel)
panel + root.gridPosForIndex(i, panelWidth, panelHeight, startY),
panels
),

'#makeGrid':: d.func.new(
|||
`makeGrid` returns an array of `panels` organized in a grid with equal `panelWidth`
Expand All @@ -52,90 +28,52 @@ local xtd = import 'github.com/jsonnet-libs/xtd/main.libsonnet';
],
),
makeGrid(panels, panelWidth=8, panelHeight=8, startY=0):
// Get indexes for all Row panels
local rowIndexes =
xtd.array.filterMapWithIndex(
function(i, p) p.type == 'row',
function(i, p) i,
panels,
);
local sanitizePanels(ps) = std.map(
function(p)
local sanePanel = panelUtil.sanitizePanel(p);
(
if p.type == 'row'
then sanePanel + {
panels: sanitizePanels(sanePanel.panels),
}
else sanePanel + {
gridPos+: {
h: panelHeight,
w: panelWidth,
},
}
),
ps
);

// Group panels below each Row panel
local rowGroups =
std.mapWithIndex(
function(i, r) {
header:
{
// Set initial values to ensure a value is set
// may be overridden at per Row panel
collapsed: false,
panels: [],
}
+ panels[r],
panels:
self.header.panels // prepend panels that are part of the Row panel
+ (if i == std.length(rowIndexes) - 1 // last rowIndex
then panels[r + 1:]
else panels[r + 1:rowIndexes[i + 1]]),
rows: root.countRows(self.panels, panelWidth),
},
rowIndexes
);
local sanitizedPanels = sanitizePanels(panels);

// Loop over rowGroups
std.foldl(
function(acc, rowGroup) acc + {
local y = acc.nexty,
nexty: y // previous y
+ (rowGroup.rows * panelHeight) // height of all rows
+ rowGroup.rows // plus 1 for each row
+ acc.lastRowPanelHeight,
local grouped = panelUtil.groupPanelsInRows(sanitizedPanels);

lastRowPanelHeight: rowPanelHeight, // set height for next round
local panelsBeforeRows = panelUtil.getPanelsBeforeNextRow(grouped);
local rowPanels =
std.filter(
function(p) p.type == 'row',
grouped
);

// Create a grid per group
local panels = root.makePanelGrid(rowGroup.panels, panelWidth, panelHeight, y + 1),
local CalculateXforPanel(index, panel) =
local panelsPerRow = std.floor(gridWidth / panelWidth);
local col = std.mod(index, panelsPerRow);
panel + { gridPos+: { x: panelWidth * col } };

panels+:
[
// Add row header aka the Row panel
rowGroup.header + {
gridPos: {
w: gridWidth, // always full length
h: rowPanelHeight, // always 1 height
x: 0, // always at beginning
y: y,
},
panels:
// If row is collapsed, then store panels inside Row panel
if rowGroup.header.collapsed
then panels
else [],
},
]
+ (
// If row is not collapsed, then expose panels directly
if !rowGroup.header.collapsed
then panels
else []
),
},
rowGroups,
{
// Get panels that come before the rowGroups
local panelsBeforeRowGroups =
if std.length(rowIndexes) != 0
then panels[0:rowIndexes[0]]
else panels, // matches all panels if no Row panels found
local rows = root.countRows(panelsBeforeRowGroups, panelWidth),
nexty: startY + (rows * panelHeight) + rows,
local panelsBeforeRowsWithX = std.mapWithIndex(CalculateXforPanel, panelsBeforeRows);

lastRowPanelHeight: 0, // starts without a row panel
local rowPanelsWithX =
std.map(
function(row)
row + { panels: std.mapWithIndex(CalculateXforPanel, row.panels) },
rowPanels
);

// Create a grid for the panels that come before the rowGroups
panels: root.makePanelGrid(panelsBeforeRowGroups, panelWidth, panelHeight, startY),
}
).panels,
local uncollapsed = panelUtil.resolveCollapsedFlagOnRows(panelsBeforeRowsWithX + rowPanelsWithX);

panelUtil.normalizeY(uncollapsed),

'#wrapPanels':: d.func.new(
|||
Expand Down
11 changes: 6 additions & 5 deletions custom/util/panel.libsonnet
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,14 +224,15 @@ local xtd = import 'github.com/jsonnet-libs/xtd/main.libsonnet';
]
),
calculateLowestYforPanel(panel, panels):
local x1 = panel.gridPos.x;
local x2 = panel.gridPos.x + panel.gridPos.w;
xtd.number.maxInArray( // the new position is highest value (max) on the Y-scale
std.filterMap(
function(p) // find panels that overlap on X-scale
p.gridPos.x == x1
|| xtd.number.inRange(p.gridPos.x, x1, x2)
|| xtd.number.inRange((p.gridPos.x + p.gridPos.w), x1, x2),
local v1 = panel.gridPos.x;
local v2 = panel.gridPos.x + panel.gridPos.w;
local x1 = p.gridPos.x;
local x2 = p.gridPos.x + p.gridPos.w;
(v1 >= x1 && v1 < x2)
|| (v2 >= x1 && v2 < x2),
function(p) // return new position on Y-scale
p.gridPos.y + p.gridPos.h,
panels,
Expand Down
20 changes: 10 additions & 10 deletions examples/runtimeDashboard/output.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@
"h": 8,
"w": 8,
"x": 0,
"y": 10
"y": 9
Copy link
Contributor

@malcolmholmes malcolmholmes Jan 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this is a refactor, how come your output has changed?

Copy link
Contributor Author

@Duologic Duologic Jan 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This happens in commit 3, before the refactoring. Commit 2 fixes a few bugs in makeGrid, these fixes change the output. The refactor happens in commit 4.

Only commit 6 is a change of the output that I didn't fix in commit 2, I'm being pragmatic here.

Also see description of the PR.

},
"id": 5,
"interval": "1m",
Expand Down Expand Up @@ -282,7 +282,7 @@
"h": 8,
"w": 8,
"x": 8,
"y": 10
"y": 9
},
"id": 6,
"interval": "1m",
Expand Down Expand Up @@ -316,7 +316,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 18
"y": 17
},
"id": 7,
"panels": [
Expand All @@ -329,7 +329,7 @@
"h": 8,
"w": 8,
"x": 0,
"y": 19
"y": 0
},
"id": 8,
"interval": "1m",
Expand Down Expand Up @@ -409,7 +409,7 @@
"h": 8,
"w": 8,
"x": 8,
"y": 19
"y": 0
},
"id": 9,
"interval": "1m",
Expand Down Expand Up @@ -474,7 +474,7 @@
"h": 8,
"w": 8,
"x": 16,
"y": 19
"y": 0
},
"id": 10,
"interval": "1m",
Expand Down Expand Up @@ -521,7 +521,7 @@
"h": 8,
"w": 8,
"x": 0,
"y": 28
"y": 0
},
"id": 11,
"interval": "1m",
Expand Down Expand Up @@ -559,7 +559,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 37
"y": 18
},
"id": 12,
"panels": [
Expand All @@ -572,7 +572,7 @@
"h": 8,
"w": 8,
"x": 0,
"y": 38
"y": 0
},
"id": 13,
"interval": "1m",
Expand Down Expand Up @@ -652,7 +652,7 @@
"h": 8,
"w": 8,
"x": 8,
"y": 38
"y": 0
},
"id": 14,
"interval": "1m",
Expand Down
Loading