Skip to content

Commit 2636da4

Browse files
webokoweboko
authored
feat: add charts to dogfooding app (#141)
1 parent f7196a4 commit 2636da4

File tree

7 files changed

+468
-3
lines changed

7 files changed

+468
-3
lines changed

‎examples/dogfooding/index.html‎

Lines changed: 62 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,69 @@ <h2>Controls</h2>
5151
</div>
5252
</section>
5353

54+
<section class="charts">
55+
<h2>Discovery Peers Over Time</h2>
56+
<canvas id="discoveryChart"></canvas>
57+
<div id="discoverySummaryTop" class="latency-summary"></div>
58+
<div class="collapsible-header" id="toggleDiscoveryTable">
59+
<h3>Show Discovery Table</h3>
60+
<button id="toggleDiscoveryTableBtn" class="btn">Show</button>
61+
</div>
62+
<div id="discoveryTableContainer" class="collapsible hidden">
63+
<table id="discoveryTable">
64+
<thead>
65+
<tr><th>Time</th><th>Type</th><th>Total Peers</th></tr>
66+
</thead>
67+
<tbody></tbody>
68+
</table>
69+
</div>
70+
</section>
71+
72+
73+
74+
<section class="charts">
75+
<h2>Connected Peers Over Time</h2>
76+
<canvas id="connectionsChart"></canvas>
77+
<div id="ttfcSummary" class="latency-summary"></div>
78+
<div class="collapsible-header" id="toggleConnectionsTable">
79+
<h3>Show Connections Table</h3>
80+
<button id="toggleConnectionsTableBtn" class="btn">Show</button>
81+
</div>
82+
<div id="connectionsTableContainer" class="collapsible hidden">
83+
<table id="connectionsTable">
84+
<thead>
85+
<tr><th>Time</th><th>Connected Peers</th></tr>
86+
</thead>
87+
<tbody></tbody>
88+
</table>
89+
</div>
90+
</section>
91+
92+
<section class="charts">
93+
<h2>Message Delivery Latency</h2>
94+
<canvas id="latencyChart"></canvas>
95+
<div id="latencySummaryTop" class="latency-summary"></div>
96+
<div class="collapsible-header" id="toggleLatencyTable">
97+
<h3>Latency Table</h3>
98+
<button id="toggleLatencyTableBtn" class="btn">Show</button>
99+
</div>
100+
<div id="latencyTableContainer" class="collapsible hidden">
101+
<table id="latencyTable">
102+
<thead>
103+
<tr><th>Message ID</th><th>Sent</th><th>Received</th><th>Latency (ms)</th></tr>
104+
</thead>
105+
<tbody></tbody>
106+
</table>
107+
</div>
108+
</section>
109+
54110
<section class="message-display">
55-
<h2>Message Log</h2>
56-
<div id="messageList" class="message-list">
111+
<div class="collapsible-header" id="toggleLog">
112+
<h2>Message Log</h2>
113+
<button id="toggleLogBtn" class="btn">Show</button>
114+
</div>
115+
<div id="messageLogContainer" class="collapsible hidden">
116+
<div id="messageList" class="message-list"></div>
57117
</div>
58118
</section>
59119
</main>

‎examples/dogfooding/package-lock.json‎

Lines changed: 48 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/dogfooding/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
"@libp2p/crypto": "^5.0.5",
1111
"@multiformats/multiaddr": "^12.3.1",
1212
"@waku/sdk": "0.0.34",
13+
"chart.js": "^4.4.1",
14+
"chartjs-plugin-zoom": "^2.0.1",
1315
"libp2p": "^2.1.10",
1416
"protobufjs": "^7.3.0",
1517
"uint8arrays": "^5.1.0"

‎examples/dogfooding/public/style.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,43 @@ h2 {
115115
padding: 10px;
116116
}
117117

118+
.collapsible-header {
119+
display: flex;
120+
justify-content: space-between;
121+
align-items: center;
122+
}
123+
124+
.collapsible.hidden {
125+
display: none;
126+
}
127+
128+
table {
129+
width: 100%;
130+
border-collapse: collapse;
131+
}
132+
133+
table th, table td {
134+
padding: 8px;
135+
border-bottom: 1px solid #ecf0f1;
136+
text-align: left;
137+
font-size: 0.9em;
138+
}
139+
140+
.latency-summary {
141+
margin-top: 8px;
142+
margin-bottom: 8px;
143+
font-weight: 600;
144+
color: #34495e;
145+
}
146+
147+
/* Scrollable tables */
148+
#discoveryTableContainer,
149+
#connectionsTableContainer,
150+
#latencyTableContainer {
151+
max-height: 260px;
152+
overflow-y: auto;
153+
}
154+
118155
.message-item {
119156
padding: 10px;
120157
margin-bottom: 8px;

‎examples/dogfooding/src/index.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,13 @@ import {
2020
addMessageToLog,
2121
renderMessages,
2222
getSearchTerm,
23+
initCharts,
24+
onDiscoveryUpdate,
25+
onConnectionsUpdate,
26+
wireUiToggles,
27+
trackMessageSent,
28+
trackMessageReceived,
29+
recordLatency,
2330
} from "./ui-manager";
2431

2532
const NUM_MESSAGES_PER_BATCH = 5;
@@ -66,6 +73,7 @@ async function initializeApp() {
6673
console.log(`Message ${i + 1} (ID: ${chatMessage.id}) sent successfully.`);
6774
incrementSentByMe();
6875
addMessageToLog(chatMessage, 'sent');
76+
trackMessageSent(chatMessage.id, chatMessage.timestamp);
6977
} else {
7078
console.warn(`Failed to send message ${i + 1} (ID: ${chatMessage.id}):`, result.failures);
7179
const failureReason = result.failures.length > 0
@@ -133,6 +141,7 @@ async function initializeApp() {
133141
console.log(`Continuous message (ID: ${chatMessage.id}) sent successfully.`);
134142
incrementSentByMe();
135143
addMessageToLog(chatMessage, 'sent');
144+
trackMessageSent(chatMessage.id, chatMessage.timestamp);
136145
} else {
137146
console.warn(`Failed to send continuous message (ID: ${chatMessage.id}):`, result.failures);
138147
}
@@ -184,6 +193,12 @@ async function initializeApp() {
184193
addMessageToLog(chatMessage, 'received-other');
185194
console.log("Received message from other peer:", chatMessage.id);
186195
}
196+
// Use encoded timestamp when available for more accurate latency
197+
if (chatMessage.timestamp) {
198+
recordLatency(chatMessage.id, chatMessage.timestamp, Date.now());
199+
} else {
200+
trackMessageReceived(chatMessage.id, Date.now());
201+
}
187202
} else {
188203
console.warn("Could not decode received Waku message. Payload might be malformed or not a ChatMessage.");
189204
}
@@ -226,6 +241,10 @@ async function initializeApp() {
226241
});
227242
}
228243

244+
initCharts();
245+
(window as any).onDiscoveryUpdate = onDiscoveryUpdate;
246+
(window as any).onConnectionsUpdate = onConnectionsUpdate;
247+
wireUiToggles();
229248
await subscribeToMessages();
230249

231250
console.log("Application setup complete. Click 'Send New Message Batch' to send messages.");

0 commit comments

Comments
 (0)