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

Add storage category and separate relation type filters

Browse Source 
- Add 'storage' category with orange color (#FF6F00)
- Split single relations checkbox into 3 separate checkboxes:
  - FK (Foreign Key) - blue
  - Ref (Reference) - orange
  - Logical - gray dashed
- Each relation type can be toggled independently

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
ARCHITECT
2026-01-17 22:57:04 +00:00
parent f0d949c2a6
commit aa4fb69013
1 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/views/TablesGraph.ts
View File

@@ -34,7 +34,7 @@ export class TablesGraph {
private svg: D3Selection | null = null; private svg: D3Selection | null = null;
private g: D3Selection | null = null; private g: D3Selection | null = null;
private showCategories: Set<TableSchema['category']>; private showCategories: Set<TableSchema['category']>;
private showRelations = true; private showRelationTypes: Set<TableRelation['type']> = new Set(['fk', 'ref', 'logical']);
private nodeSize = 35; private nodeSize = 35;
private linkDist = 100; private linkDist = 100;
@@ -95,16 +95,14 @@ export class TablesGraph {
id: t.name id: t.name
})); }));
// Build edges (only between visible tables, if relations are enabled) // Build edges (only between visible tables and enabled relation types)
const edges: TableEdge[] = this.showRelations const edges: TableEdge[] = this.schema.relations
? this.schema.relations .filter(r => tableNames.has(r.from) && tableNames.has(r.to) && this.showRelationTypes.has(r.type))
.filter(r => tableNames.has(r.from) && tableNames.has(r.to))
.map(r => ({ .map(r => ({
source: r.from, source: r.from,
target: r.to, target: r.to,
type: r.type type: r.type
})) }));
: [];
if (nodes.length === 0) { if (nodes.length === 0) {
this.container.innerHTML = '<div class="empty">Sin tablas para mostrar</div>'; this.container.innerHTML = '<div class="empty">Sin tablas para mostrar</div>';
@@ -292,21 +290,20 @@ export class TablesGraph {
<div class="graph-section"> <div class="graph-section">
<div class="graph-section-title">Relaciones</div> <div class="graph-section-title">Relaciones</div>
<label class="graph-checkbox"> <label class="graph-checkbox">
<input type="checkbox" id="toggle-relations" ${this.showRelations ? 'checked' : ''}> <input type="checkbox" data-rel="fk" ${this.showRelationTypes.has('fk') ? 'checked' : ''}>
<span>Mostrar relaciones</span>
</label>
<div class="legend-item">
<span class="color-line" style="background: #2196F3"></span> <span class="color-line" style="background: #2196F3"></span>
<span>FK (Foreign Key)</span> <span>FK (Foreign Key)</span>
</div> </label>
<div class="legend-item"> <label class="graph-checkbox">
<input type="checkbox" data-rel="ref" ${this.showRelationTypes.has('ref') ? 'checked' : ''}>
<span class="color-line" style="background: #FF9800"></span> <span class="color-line" style="background: #FF9800"></span>
<span>Ref (Reference)</span> <span>Ref (Reference)</span>
</div> </label>
<div class="legend-item"> <label class="graph-checkbox">
<input type="checkbox" data-rel="logical" ${this.showRelationTypes.has('logical') ? 'checked' : ''}>
<span class="color-line dashed" style="background: #9E9E9E"></span> <span class="color-line dashed" style="background: #9E9E9E"></span>
<span>Logical</span> <span>Logical</span>
</div> </label>
</div> </div>
<div class="graph-section"> <div class="graph-section">
@@ -345,14 +342,18 @@ export class TablesGraph {
}; };
}); });
// Toggle relations // Relation type checkboxes
const toggleRelations = sidebar.querySelector<HTMLInputElement>('#toggle-relations'); sidebar.querySelectorAll<HTMLInputElement>('[data-rel]').forEach(cb => {
if (toggleRelations) { cb.onchange = () => {
toggleRelations.onchange = () => { const relType = cb.dataset.rel as TableRelation['type'];
this.showRelations = toggleRelations.checked; if (cb.checked) {
this.showRelationTypes.add(relType);
} else {
this.showRelationTypes.delete(relType);
}
this.render(); this.render();
}; };
} });
// Node size // Node size
const nodeSize = sidebar.querySelector<HTMLInputElement>('#graph-node-size'); const nodeSize = sidebar.querySelector<HTMLInputElement>('#graph-node-size');