feat: add Chronological sort mode for expanded packet groups

Pure timestamp order, no grouping — shows propagation sequence.
This commit is contained in:
you
2026-03-21 23:32:05 +00:00
parent 45df19b51b
commit a259891007
2 changed files with 10 additions and 3 deletions
+1 -1
View File
@@ -84,7 +84,7 @@
<script src="hop-resolver.js?v=1774126708"></script>
<script src="app.js?v=1774126708"></script>
<script src="home.js?v=1774042199"></script>
<script src="packets.js?v=1774135881"></script>
<script src="packets.js?v=1774135925"></script>
<script src="map.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
<script src="channels.js?v=1774331200" onerror="console.error('Failed to load:', this.src)"></script>
<script src="nodes.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
+9 -2
View File
@@ -702,7 +702,8 @@
const sortMode = groupSortModes[p.hash] || SORT_OBSERVER;
const obsLabel = sortMode === SORT_OBSERVER ? '<strong>Observer</strong>' : 'Observer';
const pathLabel = sortMode === SORT_PATH_LENGTH ? '<strong>Path length</strong>' : 'Path length';
html += `<tr class="group-sort-bar"><td colspan="10" style="padding:2px 8px;font-size:0.8em;color:var(--text-muted)">Sort: <a href="#" data-action="sort-group" data-value="${p.hash}" data-sort="${SORT_OBSERVER}" style="color:var(--primary);cursor:pointer">${obsLabel}</a> · <a href="#" data-action="sort-group" data-value="${p.hash}" data-sort="${SORT_PATH_LENGTH}" style="color:var(--primary);cursor:pointer">${pathLabel}</a></td></tr>`;
const chronoLabel = sortMode === SORT_CHRONO ? '<strong>Chronological</strong>' : 'Chronological';
html += `<tr class="group-sort-bar"><td colspan="10" style="padding:2px 8px;font-size:0.8em;color:var(--text-muted)">Sort: <a href="#" data-action="sort-group" data-value="${p.hash}" data-sort="${SORT_OBSERVER}" style="color:var(--primary);cursor:pointer">${obsLabel}</a> · <a href="#" data-action="sort-group" data-value="${p.hash}" data-sort="${SORT_PATH_LENGTH}" style="color:var(--primary);cursor:pointer">${pathLabel}</a> · <a href="#" data-action="sort-group" data-value="${p.hash}" data-sort="${SORT_CHRONO}" style="color:var(--primary);cursor:pointer">${chronoLabel}</a></td></tr>`;
for (const c of p._children) {
const typeName = payloadTypeName(c.payload_type);
const typeClass = payloadTypeColor(c.payload_type);
@@ -1251,6 +1252,7 @@
// Observation sort modes
const SORT_OBSERVER = 'observer';
const SORT_PATH_LENGTH = 'path';
const SORT_CHRONO = 'chrono';
const groupSortModes = {}; // hash → sort mode
function getPathHopCount(c) {
@@ -1261,7 +1263,12 @@
if (!group || !group._children) return;
const mode = groupSortModes[group.hash] || SORT_OBSERVER;
if (mode === SORT_PATH_LENGTH) {
if (mode === SORT_CHRONO) {
group._children.sort((a, b) => {
const tA = a.timestamp || '', tB = b.timestamp || '';
return tA < tB ? -1 : tA > tB ? 1 : 0;
});
} else if (mode === SORT_PATH_LENGTH) {
group._children.sort((a, b) => {
const lenA = getPathHopCount(a), lenB = getPathHopCount(b);
if (lenA !== lenB) return lenA - lenB;