tzzr/hst-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Graph sidebar shows only categories present in current data

Browse Source 
- Count tags per category before rendering sidebar
- Only display categories that have tags in current view
- Show count next to each category name

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
ARCHITECT
2026-01-17 22:19:24 +00:00
parent 4f3a7e7949
commit 76d15a9de6
1 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@@ -1252,8 +1252,15 @@ const GraphView = {
area.innerHTML = '<div class="graph-container"></div>'; area.innerHTML = '<div class="graph-container"></div>';
const container = area.querySelector(".graph-container"); const container = area.querySelector(".graph-container");
// Count tags per category
const categoryCounts = new Map();
tags.forEach(tag => {
const cat = Utils.getCategory(tag);
categoryCounts.set(cat, (categoryCounts.get(cat) || 0) + 1);
});
this.renderSVG(container, nodes, links); this.renderSVG(container, nodes, links);
this.renderSidebar(container, nodes.length, links.length); this.renderSidebar(container, nodes.length, links.length, categoryCounts);
this.renderControls(container); this.renderControls(container);
this.renderLegend(container); this.renderLegend(container);
}, },
@@ -1330,10 +1337,19 @@ const GraphView = {
.on("end", (e, d) => { if (!e.active) sim.alphaTarget(0); d.fx = null; d.fy = null; }); .on("end", (e, d) => { if (!e.active) sim.alphaTarget(0); d.fx = null; d.fy = null; });
}, },
renderSidebar(container, nodeCount, edgeCount) { renderSidebar(container, nodeCount, edgeCount, categoryCounts) {
const { graphFilters, graphSettings } = State.get(); const { graphFilters, graphSettings } = State.get();
const sidebar = document.createElement("div"); const sidebar = document.createElement("div");
sidebar.className = "graph-sidebar"; sidebar.className = "graph-sidebar";
// Only show categories that have tags in current data
const categoryHTML = Object.entries(CONFIG.CATEGORIES)
.filter(([key]) => categoryCounts.has(key) && categoryCounts.get(key) > 0)
.map(([key, val]) => {
const count = categoryCounts.get(key) || 0;
return `<label class="graph-checkbox"><input type="checkbox" data-category="${key}" ${graphFilters.categories.has(key) ? "checked" : ""}><span class="color-dot" style="background:${val.color}"></span>${Utils.escapeHtml(val.name)} (${count})</label>`;
}).join("");
sidebar.innerHTML = ` sidebar.innerHTML = `
<div class="graph-section"> <div class="graph-section">
<div class="graph-section__title">Stats</div> <div class="graph-section__title">Stats</div>
@@ -1342,7 +1358,7 @@ const GraphView = {
</div> </div>
<div class="graph-section"> <div class="graph-section">
<div class="graph-section__title">Categorías</div> <div class="graph-section__title">Categorías</div>
${Object.entries(CONFIG.CATEGORIES).map(([key, val]) => `<label class="graph-checkbox"><input type="checkbox" data-category="${key}" ${graphFilters.categories.has(key) ? "checked" : ""}><span class="color-dot" style="background:${val.color}"></span>${Utils.escapeHtml(val.name)}</label>`).join("")} ${categoryHTML || '<span class="empty">Sin categorías</span>'}
</div> </div>
<div class="graph-section"> <div class="graph-section">
<div class="graph-section__title">Relaciones</div> <div class="graph-section__title">Relaciones</div>