fix: move observation sort to filter bar dropdown, save to localStorage

- Removed per-group sort bar links (broken navigation)
- Added global 'Sort:' dropdown in filter toolbar
- Persists to localStorage across sessions
- Re-sorts all expanded groups on change
This commit is contained in:
you committed 2026-03-21 23:41:24 +00:00
1 parent 4f66e377d1
commit 7e0cd455ae
2 files changed
+21 -15

No files matched your search

+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=1774135925"></script>
<script src="packets.js?v=1774136484"></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>
+20 -14
View File
@@ -413,6 +413,11 @@
<select id="fType" aria-label="Filter by packet type"><option value="">All Types</option></select>
<button class="btn ${groupByHash ? 'active' : ''}" id="fGroup">Group by Hash</button>
<button class="btn" id="fMyNodes" title="Show only packets from claimed/favorited nodes">★ My Nodes</button>
<select id="fObsSort" aria-label="Observation sort order" title="Sort order for expanded observations">
<option value="observer">Sort: Observer</option>
<option value="path">Sort: Path length</option>
<option value="chrono">Sort: Chronological</option>
</select>
<div class="col-toggle-wrap">
<button class="col-toggle-btn" id="colToggleBtn">Columns ▾</button>
<div class="col-toggle-menu" id="colToggleMenu"></div>
@@ -460,6 +465,19 @@
loadPackets();
});
// Observation sort dropdown
const obsSortSel = document.getElementById('fObsSort');
obsSortSel.value = obsSortMode;
obsSortSel.addEventListener('change', function () {
obsSortMode = this.value;
localStorage.setItem('meshcore-obs-sort', obsSortMode);
// Re-sort all expanded groups
for (const p of packets) {
if (expandedHashes.has(p.hash) && p._children) sortGroupChildren(p);
}
renderTableRows();
});
// Column visibility toggle (#71)
const COL_DEFS = [
{ key: 'region', label: 'Region' },
@@ -600,13 +618,6 @@
if (hash) selectPacket(null, hash);
else selectPacket(Number(value));
}
else if (action === 'sort-group') {
e.preventDefault();
const sortType = btn.dataset.sort;
groupSortModes[value] = sortType;
const group = packets.find(p => p.hash === value);
if (group) { sortGroupChildren(group); renderTableRows(); }
}
else if (action === 'select-observation') {
const parentHash = row.dataset.parentHash;
const group = packets.find(p => p.hash === parentHash);
@@ -699,11 +710,6 @@
</tr>`;
// Child rows (loaded async when expanded)
if (isExpanded && p._children) {
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';
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);
@@ -1253,7 +1259,7 @@
const SORT_OBSERVER = 'observer';
const SORT_PATH_LENGTH = 'path';
const SORT_CHRONO = 'chrono';
const groupSortModes = {}; // hash → sort mode
let obsSortMode = localStorage.getItem('meshcore-obs-sort') || SORT_OBSERVER;
function getPathHopCount(c) {
try { return JSON.parse(c.path_json || '[]').length; } catch { return 0; }
@@ -1261,7 +1267,7 @@
function sortGroupChildren(group) {
if (!group || !group._children) return;
const mode = groupSortModes[group.hash] || SORT_OBSERVER;
const mode = obsSortMode;
if (mode === SORT_CHRONO) {
group._children.sort((a, b) => {