go/sliding-sync
go/sliding-sync
1
0
Fork 0
mirror of https://github.com/matrix-org/sliding-sync.git synced 2025-03-10 13:37:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

client: Add svg visualisation of the sliding window ranges

Browse Source
This commit is contained in:
Kegan Dougal 2022-02-22 19:04:19 +00:00
parent 2e53b357d9
commit 817b9b0442
2 changed files with 48 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/index.html
View File

@ -6,7 +6,8 @@
</head>
<body>
<div class="statsheader">
<span id="txrx">0 KB Tx / 0 KB Rx</span>
<span id="txrx" title="Total sizes of uncompressed HTTP bodies without HTTP headers">0 KB Tx / 0 KB Rx</span>
<div id="listgraph" title="Room lists tracked, blue=in range"></div>
</div>
<div class="page">
<div class="leftSide">

47
client/index.js
View File

@ -430,7 +430,7 @@ const doSyncLoop = async (accessToken, sessionId) => {
// if this is the first request on this session, send sticky request data which never changes
if (!currentPos) {
l.required_state = requiredStateEventsInList;
l.timeline_limit = 20;
l.timeline_limit = 1;
l.sort = ["by_highlight_count", "by_notification_count", "by_recency"];
}
return l;
@ -620,6 +620,8 @@ const doSyncLoop = async (accessToken, sessionId) => {
);
}
});
svgify();
}
console.log("active session: ", activeSessionId, " this session: ", sessionId, " terminating.");
};
@ -729,6 +731,49 @@ const randomName = (i, long) => {
}
};
const svgify = () => {
const horizontalPixelWidth = 10;
const listgraph = document.getElementById("listgraph");
while (listgraph.firstChild) {
listgraph.removeChild(listgraph.firstChild);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("style", "background-color:black;");
// column 0 = list[0], column 2 = list[1], etc...
// 1 pixel per room so svg is however many rooms the user has
svg.setAttribute("width", 2 * activeLists.length * horizontalPixelWidth);
let height = 1;
activeLists.forEach((al) => {
if (al.joinedCount > height) {
height = al.joinedCount;
}
})
svg.setAttribute("height", height);
const colorInWindow = "#2020f0";
const colorPlaceholder = "#404040";
activeLists.forEach((al, index) => {
const placeholders = document.createElementNS("http://www.w3.org/2000/svg",'rect');
placeholders.setAttribute("x", index*2*horizontalPixelWidth);
placeholders.setAttribute("y", 0);
placeholders.setAttribute("width", horizontalPixelWidth);
placeholders.setAttribute("height", al.joinedCount);
placeholders.setAttribute('fill', colorPlaceholder);
svg.appendChild(placeholders);
// [[0, 20], [50,60]];
al.activeRanges.forEach((range) => {
const rect = document.createElementNS("http://www.w3.org/2000/svg",'rect');
rect.setAttribute('x',index*2*horizontalPixelWidth);
rect.setAttribute('y',range[0]);
rect.setAttribute('width',horizontalPixelWidth);
rect.setAttribute('height',range[1]-range[0]);
rect.setAttribute('fill',colorInWindow);
svg.appendChild(rect);
})
});
listgraph.appendChild(svg);
}
const zeroPad = (n) => {
if (n < 10) {
return "0" + n;