snatching amp's walkthrough for my own purposes mwhahaha
traverse.dunkirk.sh/diagram/6121f05c-a5ef-4ecf-8ffc-02534c5e767c
chore: move og node count over to the top right
+34
-49
+34
-49
src/og.ts
+34
-49
src/og.ts
···
44
44
fontFamily: "Inter",
45
45
},
46
46
children: [
47
-
// Top: Traverse label
47
+
// Top: Traverse label + node count
48
48
{
49
49
type: "div",
50
50
props: {
51
51
style: {
52
52
display: "flex",
53
53
alignItems: "center",
54
-
gap: "10px",
54
+
justifyContent: "space-between",
55
55
},
56
56
children: [
57
57
{
···
67
67
children: "Traverse",
68
68
},
69
69
},
70
+
{
71
+
type: "div",
72
+
props: {
73
+
style: {
74
+
fontSize: "16px",
75
+
color: "#666",
76
+
},
77
+
children: `${nodeCount} node${nodeCount !== 1 ? "s" : ""}`,
78
+
},
79
+
},
70
80
],
71
81
},
72
82
},
···
99
109
],
100
110
},
101
111
},
102
-
// Bottom: Node pills + count
112
+
// Bottom: Node pills
103
113
{
104
114
type: "div",
105
115
props: {
106
116
style: {
107
117
display: "flex",
108
-
alignItems: "center",
109
-
justifyContent: "space-between",
110
-
gap: "16px",
118
+
flexWrap: "wrap",
119
+
gap: "8px",
111
120
},
112
121
children: [
113
-
{
122
+
...displayNodes.map((name) => ({
114
123
type: "div",
115
124
props: {
116
125
style: {
117
-
display: "flex",
118
-
flexWrap: "wrap",
119
-
gap: "8px",
120
-
flex: 1,
126
+
fontSize: "14px",
127
+
color: "#a3a3a3",
128
+
backgroundColor: "#1c1c1e",
129
+
padding: "4px 12px",
130
+
borderRadius: "6px",
131
+
border: "1px solid #262626",
121
132
},
122
-
children: [
123
-
...displayNodes.map((name) => ({
133
+
children: name,
134
+
},
135
+
})),
136
+
...(extra > 0
137
+
? [
138
+
{
124
139
type: "div",
125
140
props: {
126
141
style: {
127
142
fontSize: "14px",
128
-
color: "#a3a3a3",
129
-
backgroundColor: "#1c1c1e",
130
-
padding: "4px 12px",
131
-
borderRadius: "6px",
132
-
border: "1px solid #262626",
143
+
color: "#666",
144
+
padding: "4px 8px",
133
145
},
134
-
children: name,
146
+
children: `+${extra} more`,
135
147
},
136
-
})),
137
-
...(extra > 0
138
-
? [
139
-
{
140
-
type: "div",
141
-
props: {
142
-
style: {
143
-
fontSize: "14px",
144
-
color: "#666",
145
-
padding: "4px 8px",
146
-
},
147
-
children: `+${extra} more`,
148
-
},
149
-
},
150
-
]
151
-
: []),
152
-
],
153
-
},
154
-
},
155
-
{
156
-
type: "div",
157
-
props: {
158
-
style: {
159
-
fontSize: "16px",
160
-
color: "#666",
161
-
flexShrink: 0,
162
-
},
163
-
children: `${nodeCount} node${nodeCount !== 1 ? "s" : ""}`,
164
-
},
165
-
},
148
+
},
149
+
]
150
+
: []),
166
151
],
167
152
},
168
153
},