Skip to content

Commit c13ba17

Browse files
DuologicDuologic
authored
refactor(util/grid): rewrite makegrid() with helper functions (#158)
* test(util/grid): add unit tests for makegrid() * fix(util/grid): pass unit tests for makeGrid() * fix(examples): pass smoke test for runtimeDashboard * refactor(util/grid): rewrite makegrid() with helper functions This also fixes `util.panel.calculateLowestYforPanel()`. * fix(util/grid): pass smoke test for redMethod * fix(examples): pass smoke test for runtimeDashboard * chore: generate older versions
1 parent fb1e6fe commit c13ba17

File tree

12 files changed

+373
-550
lines changed

12 files changed

+373
-550
lines changed

‎custom/util/grid.libsonnet‎

Lines changed: 41 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,13 @@
11
local d = import 'github.com/jsonnet-libs/docsonnet/doc-util/main.libsonnet';
22
local xtd = import 'github.com/jsonnet-libs/xtd/main.libsonnet';
33

4+
local panelUtil = import './panel.libsonnet';
5+
46
{
57
local root = self,
68

7-
local rowPanelHeight = 1,
89
local gridWidth = 24,
910

10-
// Calculates the number of rows for a set of panels.
11-
countRows(panels, panelWidth):
12-
std.ceil(std.length(panels) / std.floor(gridWidth / panelWidth)),
13-
14-
// Calculates gridPos for a panel based on its index, width and height.
15-
gridPosForIndex(index, panelWidth, panelHeight, startY): {
16-
local panelsPerRow = std.floor(gridWidth / panelWidth),
17-
local row = std.floor(index / panelsPerRow),
18-
local col = std.mod(index, panelsPerRow),
19-
gridPos: {
20-
w: panelWidth,
21-
h: panelHeight,
22-
x: panelWidth * col,
23-
y: startY + (panelHeight * row) + row,
24-
},
25-
},
26-
27-
// Configures gridPos for each panel in a grid with equal width and equal height.
28-
makePanelGrid(panels, panelWidth, panelHeight, startY):
29-
std.mapWithIndex(
30-
function(i, panel)
31-
panel + root.gridPosForIndex(i, panelWidth, panelHeight, startY),
32-
panels
33-
),
34-
3511
'#makeGrid':: d.func.new(
3612
|||
3713
`makeGrid` returns an array of `panels` organized in a grid with equal `panelWidth`
@@ -52,90 +28,52 @@ local xtd = import 'github.com/jsonnet-libs/xtd/main.libsonnet';
5228
],
5329
),
5430
makeGrid(panels, panelWidth=8, panelHeight=8, startY=0):
55-
// Get indexes for all Row panels
56-
local rowIndexes =
57-
xtd.array.filterMapWithIndex(
58-
function(i, p) p.type == 'row',
59-
function(i, p) i,
60-
panels,
61-
);
31+
local sanitizePanels(ps) = std.map(
32+
function(p)
33+
local sanePanel = panelUtil.sanitizePanel(p);
34+
(
35+
if p.type == 'row'
36+
then sanePanel + {
37+
panels: sanitizePanels(sanePanel.panels),
38+
}
39+
else sanePanel + {
40+
gridPos+: {
41+
h: panelHeight,
42+
w: panelWidth,
43+
},
44+
}
45+
),
46+
ps
47+
);
6248

63-
// Group panels below each Row panel
64-
local rowGroups =
65-
std.mapWithIndex(
66-
function(i, r) {
67-
header:
68-
{
69-
// Set initial values to ensure a value is set
70-
// may be overridden at per Row panel
71-
collapsed: false,
72-
panels: [],
73-
}
74-
+ panels[r],
75-
panels:
76-
self.header.panels // prepend panels that are part of the Row panel
77-
+ (if i == std.length(rowIndexes) - 1 // last rowIndex
78-
then panels[r + 1:]
79-
else panels[r + 1:rowIndexes[i + 1]]),
80-
rows: root.countRows(self.panels, panelWidth),
81-
},
82-
rowIndexes
83-
);
49+
local sanitizedPanels = sanitizePanels(panels);
8450

85-
// Loop over rowGroups
86-
std.foldl(
87-
function(acc, rowGroup) acc + {
88-
local y = acc.nexty,
89-
nexty: y // previous y
90-
+ (rowGroup.rows * panelHeight) // height of all rows
91-
+ rowGroup.rows // plus 1 for each row
92-
+ acc.lastRowPanelHeight,
51+
local grouped = panelUtil.groupPanelsInRows(sanitizedPanels);
9352

94-
lastRowPanelHeight: rowPanelHeight, // set height for next round
53+
local panelsBeforeRows = panelUtil.getPanelsBeforeNextRow(grouped);
54+
local rowPanels =
55+
std.filter(
56+
function(p) p.type == 'row',
57+
grouped
58+
);
9559

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

99-
panels+:
100-
[
101-
// Add row header aka the Row panel
102-
rowGroup.header + {
103-
gridPos: {
104-
w: gridWidth, // always full length
105-
h: rowPanelHeight, // always 1 height
106-
x: 0, // always at beginning
107-
y: y,
108-
},
109-
panels:
110-
// If row is collapsed, then store panels inside Row panel
111-
if rowGroup.header.collapsed
112-
then panels
113-
else [],
114-
},
115-
]
116-
+ (
117-
// If row is not collapsed, then expose panels directly
118-
if !rowGroup.header.collapsed
119-
then panels
120-
else []
121-
),
122-
},
123-
rowGroups,
124-
{
125-
// Get panels that come before the rowGroups
126-
local panelsBeforeRowGroups =
127-
if std.length(rowIndexes) != 0
128-
then panels[0:rowIndexes[0]]
129-
else panels, // matches all panels if no Row panels found
130-
local rows = root.countRows(panelsBeforeRowGroups, panelWidth),
131-
nexty: startY + (rows * panelHeight) + rows,
65+
local panelsBeforeRowsWithX = std.mapWithIndex(CalculateXforPanel, panelsBeforeRows);
13266

133-
lastRowPanelHeight: 0, // starts without a row panel
67+
local rowPanelsWithX =
68+
std.map(
69+
function(row)
70+
row + { panels: std.mapWithIndex(CalculateXforPanel, row.panels) },
71+
rowPanels
72+
);
13473

135-
// Create a grid for the panels that come before the rowGroups
136-
panels: root.makePanelGrid(panelsBeforeRowGroups, panelWidth, panelHeight, startY),
137-
}
138-
).panels,
74+
local uncollapsed = panelUtil.resolveCollapsedFlagOnRows(panelsBeforeRowsWithX + rowPanelsWithX);
75+
76+
panelUtil.normalizeY(uncollapsed),
13977

14078
'#wrapPanels':: d.func.new(
14179
|||

‎custom/util/panel.libsonnet‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -224,14 +224,15 @@ local xtd = import 'github.com/jsonnet-libs/xtd/main.libsonnet';
224224
]
225225
),
226226
calculateLowestYforPanel(panel, panels):
227-
local x1 = panel.gridPos.x;
228-
local x2 = panel.gridPos.x + panel.gridPos.w;
229227
xtd.number.maxInArray( // the new position is highest value (max) on the Y-scale
230228
std.filterMap(
231229
function(p) // find panels that overlap on X-scale
232-
p.gridPos.x == x1
233-
|| xtd.number.inRange(p.gridPos.x, x1, x2)
234-
|| xtd.number.inRange((p.gridPos.x + p.gridPos.w), x1, x2),
230+
local v1 = panel.gridPos.x;
231+
local v2 = panel.gridPos.x + panel.gridPos.w;
232+
local x1 = p.gridPos.x;
233+
local x2 = p.gridPos.x + p.gridPos.w;
234+
(v1 >= x1 && v1 < x2)
235+
|| (v2 >= x1 && v2 < x2),
235236
function(p) // return new position on Y-scale
236237
p.gridPos.y + p.gridPos.h,
237238
panels,

‎examples/runtimeDashboard/output.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@
232232
"h": 8,
233233
"w": 8,
234234
"x": 0,
235-
"y": 10
235+
"y": 9
236236
},
237237
"id": 5,
238238
"interval": "1m",
@@ -282,7 +282,7 @@
282282
"h": 8,
283283
"w": 8,
284284
"x": 8,
285-
"y": 10
285+
"y": 9
286286
},
287287
"id": 6,
288288
"interval": "1m",
@@ -316,7 +316,7 @@
316316
"h": 1,
317317
"w": 24,
318318
"x": 0,
319-
"y": 18
319+
"y": 17
320320
},
321321
"id": 7,
322322
"panels": [
@@ -329,7 +329,7 @@
329329
"h": 8,
330330
"w": 8,
331331
"x": 0,
332-
"y": 19
332+
"y": 0
333333
},
334334
"id": 8,
335335
"interval": "1m",
@@ -409,7 +409,7 @@
409409
"h": 8,
410410
"w": 8,
411411
"x": 8,
412-
"y": 19
412+
"y": 0
413413
},
414414
"id": 9,
415415
"interval": "1m",
@@ -474,7 +474,7 @@
474474
"h": 8,
475475
"w": 8,
476476
"x": 16,
477-
"y": 19
477+
"y": 0
478478
},
479479
"id": 10,
480480
"interval": "1m",
@@ -521,7 +521,7 @@
521521
"h": 8,
522522
"w": 8,
523523
"x": 0,
524-
"y": 28
524+
"y": 0
525525
},
526526
"id": 11,
527527
"interval": "1m",
@@ -559,7 +559,7 @@
559559
"h": 1,
560560
"w": 24,
561561
"x": 0,
562-
"y": 37
562+
"y": 18
563563
},
564564
"id": 12,
565565
"panels": [
@@ -572,7 +572,7 @@
572572
"h": 8,
573573
"w": 8,
574574
"x": 0,
575-
"y": 38
575+
"y": 0
576576
},
577577
"id": 13,
578578
"interval": "1m",
@@ -652,7 +652,7 @@
652652
"h": 8,
653653
"w": 8,
654654
"x": 8,
655-
"y": 38
655+
"y": 0
656656
},
657657
"id": 14,
658658
"interval": "1m",

0 commit comments

Comments
 (0)