From aa4fb690136ae9e192801a59b41c3dd1c5cb8d09 Mon Sep 17 00:00:00 2001
From: ARCHITECT <architect@tzzr.me>
Date: Sat, 17 Jan 2026 22:57:04 +0000
Subject: [PATCH] Add storage category and separate relation type filters

- 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>
---
 src/views/TablesGraph.ts | 53 ++++++++++++++++++++--------------------
 1 file changed, 27 insertions(+), 26 deletions(-)

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