alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add graph filter by entity type/running state and fix duplicate API calls

Browse Source 
- Add entity type toggle pills and running/stopped filter to graph filter bar
- DataCache: return cached data if fresh, skip redundant fetches on page load
- Entity events: use force-fetch instead of invalidate+fetch to avoid stale gap
- Add no-cache middleware for static JS/CSS/JSON to prevent stale browser cache
- Reduces API calls on page load from ~70 to ~30

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-03-14 21:56:46 +03:00
parent a922c6e052
commit dd92af9913
8 changed files with 157 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
server/src/wled_controller/static/js/features/graph-editor.js
View File

@@ -32,6 +32,8 @@ let _searchItems = [];
let _loading = false;
let _filterVisible = false;
let _filterQuery = ''; // current active filter text
let _filterKinds = new Set(); // empty = all kinds shown
let _filterRunning = null; // null = all, true = running only, false = stopped only
// Node drag state
let _dragState = null; // { nodeId, el, startClient, startNode, dragging }
@@ -268,32 +270,47 @@ export function toggleGraphFilter() {
if (_filterVisible) {
const input = bar.querySelector('.graph-filter-input');
if (input) { input.value = _filterQuery; input.focus(); }
// Restore pill active states
bar.querySelectorAll('.graph-filter-pill[data-kind]').forEach(p => {
p.classList.toggle('active', _filterKinds.has(p.dataset.kind));
});
bar.querySelectorAll('.graph-filter-pill[data-running]').forEach(p => {
p.classList.toggle('active', _filterRunning !== null && String(_filterRunning) === p.dataset.running);
});
} else {
_filterKinds.clear();
_filterRunning = null;
_applyFilter('');
}
}
function _applyFilter(query) {
_filterQuery = query;
const q = query.toLowerCase().trim();
if (query !== undefined) _filterQuery = query;
const q = _filterQuery.toLowerCase().trim();
const nodeGroup = document.querySelector('.graph-nodes');
const edgeGroup = document.querySelector('.graph-edges');
const mm = document.querySelector('.graph-minimap');
if (!_nodeMap) return;
const hasTextFilter = !!q;
const hasKindFilter = _filterKinds.size > 0;
const hasRunningFilter = _filterRunning !== null;
const hasAny = hasTextFilter || hasKindFilter || hasRunningFilter;
// Build set of matching node IDs
const matchIds = new Set();
for (const node of _nodeMap.values()) {
if (!q || node.name.toLowerCase().includes(q) || node.kind.includes(q) || (node.subtype || '').toLowerCase().includes(q)) {
matchIds.add(node.id);
}
const textMatch = !hasTextFilter || node.name.toLowerCase().includes(q) || node.kind.includes(q) || (node.subtype || '').toLowerCase().includes(q);
const kindMatch = !hasKindFilter || _filterKinds.has(node.kind);
const runMatch = !hasRunningFilter || (node.running === _filterRunning);
if (textMatch && kindMatch && runMatch) matchIds.add(node.id);
}
// Apply filtered-out class to nodes
if (nodeGroup) {
nodeGroup.querySelectorAll('.graph-node').forEach(el => {
el.classList.toggle('graph-filtered-out', !!q && !matchIds.has(el.getAttribute('data-id')));
el.classList.toggle('graph-filtered-out', hasAny && !matchIds.has(el.getAttribute('data-id')));
});
}
@@ -302,7 +319,7 @@ function _applyFilter(query) {
edgeGroup.querySelectorAll('.graph-edge').forEach(el => {
const from = el.getAttribute('data-from');
const to = el.getAttribute('data-to');
el.classList.toggle('graph-filtered-out', !!q && (!matchIds.has(from) || !matchIds.has(to)));
el.classList.toggle('graph-filtered-out', hasAny && (!matchIds.has(from) || !matchIds.has(to)));
});
}
@@ -310,13 +327,13 @@ function _applyFilter(query) {
if (mm) {
mm.querySelectorAll('.graph-minimap-node').forEach(el => {
const id = el.getAttribute('data-id');
el.setAttribute('opacity', (!q || matchIds.has(id)) ? '0.7' : '0.07');
el.setAttribute('opacity', (!hasAny || matchIds.has(id)) ? '0.7' : '0.07');
});
}
// Update filter button active state
const btn = document.querySelector('.graph-filter-btn');
if (btn) btn.classList.toggle('active', !!q);
if (btn) btn.classList.toggle('active', hasAny);
}
export function graphFitAll() {
@@ -618,14 +635,52 @@ function _renderGraph(container) {
if (filterClear) {
filterClear.addEventListener('click', () => {
if (filterInput) filterInput.value = '';
_filterKinds.clear();
_filterRunning = null;
container.querySelectorAll('.graph-filter-pill').forEach(p => p.classList.remove('active'));
_applyFilter('');
});
}
// Entity type pills
container.querySelectorAll('.graph-filter-pill[data-kind]').forEach(pill => {
pill.addEventListener('click', () => {
const kind = pill.dataset.kind;
if (_filterKinds.has(kind)) { _filterKinds.delete(kind); pill.classList.remove('active'); }
else { _filterKinds.add(kind); pill.classList.add('active'); }
_applyFilter();
});
});
// Running/stopped pills
container.querySelectorAll('.graph-filter-pill[data-running]').forEach(pill => {
pill.addEventListener('click', () => {
const val = pill.dataset.running === 'true';
if (_filterRunning === val) {
_filterRunning = null;
pill.classList.remove('active');
} else {
_filterRunning = val;
// Deactivate sibling running pills, activate this one
container.querySelectorAll('.graph-filter-pill[data-running]').forEach(p => p.classList.remove('active'));
pill.classList.add('active');
}
_applyFilter();
});
});
// Restore active filter if re-rendering
if (_filterQuery && _filterVisible) {
if ((_filterQuery || _filterKinds.size || _filterRunning !== null) && _filterVisible) {
const bar = container.querySelector('.graph-filter');
if (bar) bar.classList.add('visible');
if (bar) {
bar.classList.add('visible');
bar.querySelectorAll('.graph-filter-pill[data-kind]').forEach(p => {
p.classList.toggle('active', _filterKinds.has(p.dataset.kind));
});
bar.querySelectorAll('.graph-filter-pill[data-running]').forEach(p => {
p.classList.toggle('active', _filterRunning !== null && String(_filterRunning) === p.dataset.running);
});
}
_applyFilter(_filterQuery);
}
@@ -735,9 +790,19 @@ function _graphHTML() {
</div>
<div class="graph-filter">
<svg class="graph-filter-icon" viewBox="0 0 24 24" width="16" height="16"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
<input class="graph-filter-input" placeholder="${t('graph.filter_placeholder')}" autocomplete="off">
<button class="graph-filter-clear" title="${t('graph.filter_clear')}">&times;</button>
<div class="graph-filter-row">
<svg class="graph-filter-icon" viewBox="0 0 24 24" width="16" height="16"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
<input class="graph-filter-input" placeholder="${t('graph.filter_placeholder')}" autocomplete="off">
<button class="graph-filter-clear" title="${t('graph.filter_clear')}">&times;</button>
</div>
<div class="graph-filter-pills">
${Object.entries(ENTITY_LABELS).map(([kind, label]) =>
`<button class="graph-filter-pill" data-kind="${kind}" style="--pill-color:${ENTITY_COLORS[kind] || '#666'}" title="${label}">${label}</button>`
).join('')}
<span class="graph-filter-sep"></span>
<button class="graph-filter-pill graph-filter-running" data-running="true" style="--pill-color:var(--success-color)" title="${t('graph.filter_running') || 'Running'}">${t('graph.filter_running') || 'Running'}</button>
<button class="graph-filter-pill graph-filter-running" data-running="false" style="--pill-color:var(--text-muted)" title="${t('graph.filter_stopped') || 'Stopped'}">${t('graph.filter_stopped') || 'Stopped'}</button>
</div>
</div>
<svg class="graph-svg" xmlns="http://www.w3.org/2000/svg">