Fix graph visualizer by downgrading Mermaid and improving subgraph generation logic

Author: DerekGooding

output/graph_debug.png

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "playwright": "^1.58.2"
+  }
+}

output/graph_debug_no_subgraphs.png

@@ -0,0 +1,54 @@
+import re
+import os
+
+def check_integrity(file_path):
+    with open(file_path, 'r', encoding='utf-8') as f:
+        content = f.read()
+    
+    # Extract mermaid section
+    match = re.search(r'<div class="mermaid">\s*(.*?)\s*</div>', content, re.DOTALL)
+    if not match:
+        print("Could not find mermaid section in HTML.")
+        return
+    
+    mermaid_code = match.group(1)
+    lines = mermaid_code.split('\n')
+    
+    defined_nodes = set()
+    referenced_nodes = set()
+    
+    # Simple regex for node definition: id["Label"]:::style or id["Label"] or id
+    # Note: id can be anything alphanumeric + underscores in this project
+    node_def_re = re.compile(r'^(\w+)\[".*?"\](:::(\w+))?')
+    # Simple regex for edges: id1 -- edge -- id2
+    edge_re = re.compile(r'(\w+)\s*([-=.][->ox]+|--o|--x|==>|-.->)\s*(\|".*?"\|)?\s*(\w+)')
+    
+    for line in lines:
+        line = line.strip()
+        if not line or line.startswith('graph') or line.startswith('classDef') or line.startswith('subgraph') or line.startswith('end'):
+            continue
+            
+        m = node_def_re.match(line)
+        if m:
+            defined_nodes.add(m.group(1))
+            continue
+            
+        m = edge_re.search(line)
+        if m:
+            referenced_nodes.add(m.group(1))
+            referenced_nodes.add(m.group(4))
+    
+    missing = referenced_nodes - defined_nodes
+    if missing:
+        print(f"Found {len(missing)} referenced nodes that are NOT defined:")
+        for m in sorted(missing):
+            # Some nodes might be "stat_*" which are defined later or implicitly
+            # Let's check if they are defined anywhere in the file
+            if f'{m}["' in mermaid_code or f'{m}:::' in mermaid_code:
+                continue
+            print(f"  - {m}")
+    else:
+        print("All referenced nodes are defined.")
+
+if __name__ == "__main__":
+    check_integrity("output/graph_visualizer_test.html")

output/graph_visualizer.html output/graph_test_no_subgraphs.htmloutput/graph_visualizer.html renamed to output/graph_test_no_subgraphs.html

@@ -1,13 +1,22 @@
 import json
 import os
 import sys
+import re
 
 GRAPH_FILE = "Mythril.Blazor/wwwroot/data/content_graph.json"
 
 def load_graph():
     with open(GRAPH_FILE, 'r', encoding='utf-8') as f:
         return json.load(f)
 
+def clean_label(label):
+    if not label: return "Untitled"
+    # Rigorous cleaning
+    label = label.replace('"', "'").replace(":", "-").replace("[", "(").replace("]", ")")
+    label = "".join(c for c in label if c.isprintable() or c == " ")
+    label = " ".join(label.split()).strip()
+    return label if label else "Untitled"
+
 def generate_mermaid():
     nodes = load_graph()
 
@@ -32,114 +41,127 @@ def generate_mermaid():
                         cadence_map[edge["targetId"]] = node["name"]
 
     # 2. Group nodes
-    by_location = {} # LocName -> [NodeLines]
-    by_cadence = {}  # CadName -> [NodeLines]
-    globals = []
+    by_location = {} # LocName -> [NodeIDs]
+    by_cadence = {}  # CadName -> [NodeIDs]
 
-    lines = ["graph TD"]
+    lines = ["flowchart TD"]
 
     # Styles
-    lines.append("classDef quest fill:#4b0082,stroke:#f9f,stroke-width:2px,color:#fff;")
-    lines.append("classDef location fill:#00008b,stroke:#ccf,stroke-width:2px,color:#fff;")
-    lines.append("classDef cadence fill:#006400,stroke:#cfc,stroke-width:2px,color:#fff;")
-    lines.append("classDef item fill:#444,stroke:#fff,stroke-width:1px,color:#fff;")
-    lines.append("classDef stat fill:#8b4513,stroke:#ff8c00,stroke-width:1px,color:#fff;")
-    lines.append("classDef ability fill:#2f4f4f,stroke:#00ced1,stroke-width:1px,color:#fff;")
-    lines.append("classDef refinement fill:#ff4500,stroke:#fff,stroke-width:1px,color:#fff;")
-    lines.append("classDef root fill:#8b8b00,stroke:#ff9,stroke-width:4px,color:#fff;")
+    lines.append("classDef quest fill:#4b0082,stroke:#f9f,stroke-width:2px,color:#fff")
+    lines.append("classDef location fill:#00008b,stroke:#ccf,stroke-width:2px,color:#fff")
+    lines.append("classDef cadence fill:#006400,stroke:#cfc,stroke-width:2px,color:#fff")
+    lines.append("classDef item fill:#444,stroke:#fff,stroke-width:1px,color:#fff")
+    lines.append("classDef stat fill:#8b4513,stroke:#ff8c00,stroke-width:1px,color:#fff")
+    lines.append("classDef ability fill:#2f4f4f,stroke:#00ced1,stroke-width:1px,color:#fff")
+    lines.append("classDef refinement fill:#ff4500,stroke:#fff,stroke-width:1px,color:#fff")
+    lines.append("classDef root fill:#8b8b00,stroke:#ff9,stroke-width:4px,color:#fff")
 
     edge_lines = []
+    processed_ids = set()
+    node_defs = []
+    
+    # Pre-define stat nodes
+    for stat in ["Strength", "Vitality", "Magic", "Speed"]:
+        stat_id = f"stat_{stat.lower()}"
+        node_defs.append(f'{stat_id}["{stat}"]:::stat')
+        processed_ids.add(stat_id)
 
     for node in nodes:
         nid = node["id"].strip()
         ntype = node["type"]
-        # Rigorous cleaning
-        raw_name = node["name"].replace('"', "'").replace(":", "-")
-        name = "".join(c for c in raw_name if c.isprintable() or c == " ")
-        name = " ".join(name.split()).strip()
 
         # IGNORE GOLD
         if nid == "item_gold":
             continue
 
+        name = clean_label(node["name"])
         style = ntype.lower()
         if nid == "quest_prologue": style = "root"
 
         node_def = f'{nid}["{name}"]:::{style}'
+        node_defs.append(node_def)
+        processed_ids.add(nid)
 
         # Assign to group
         if ntype == "Quest" and nid in location_map:
-            raw_loc = location_map[nid].replace(":", "-")
-            loc = "".join(c for c in raw_loc if c.isprintable() or c == " ")
-            loc = " ".join(loc.split()).strip()
+            loc = clean_label(location_map[nid])
             if loc not in by_location: by_location[loc] = []
-            by_location[loc].append(node_def)
+            by_location[loc].append(nid)
         elif ntype == "Ability" and nid in cadence_map:
-            raw_cad = cadence_map[nid].replace(":", "-")
-            cad = "".join(c for c in raw_cad if c.isprintable() or c == " ")
-            cad = " ".join(cad.split()).strip()
+            cad = clean_label(cadence_map[nid])
             if cad not in by_cadence: by_cadence[cad] = []
-            by_cadence[cad].append(node_def)
-        else:
-            globals.append(node_def)
+            by_cadence[cad].append(nid)
 
-        # Edges
+        # Edges (same as before)
         in_edges = node.get("in_edges", {})
         out_edges = node.get("out_edges", {})
 
         if "requires_quest" in in_edges:
             for req_id in in_edges["requires_quest"]:
                 label = "Enables" if ntype == "Location" else "Requires"
-                edge_lines.append(f"{req_id} -->|{label}| {nid}")
+                edge_lines.append(f'{req_id} -->|"{label}"| {nid}')
 
         if "requires_ability" in in_edges:
             for req_id in in_edges["requires_ability"]:
-                edge_lines.append(f"{req_id} -.->|Allows| {nid}")
+                edge_lines.append(f'{req_id} -->|"Allows"| {nid}')
 
         if "requires_stat" in in_edges:
             for stat_name, val in in_edges["requires_stat"].items():
                 stat_id = f"stat_{stat_name.lower()}"
-                edge_lines.append(f"{stat_id} -.->|Req {val}| {nid}")
+                edge_lines.append(f'{stat_id} -->|"Req {val}"| {nid}')
 
         for unlock_type in ["unlocks_cadence", "unlocks_ability", "provides_ability", "unlocks_location"]:
             if unlock_type in out_edges:
                 for edge in out_edges[unlock_type]:
-                    edge_lines.append(f"{nid} ==>|Unlocks| {edge['targetId']}")
+                    edge_lines.append(f'{nid} -->|"Unlocks"| {edge["targetId"]}')
 
         for reward_type in ["rewards", "produces", "rewards_item"]:
             if reward_type in out_edges:
                 for edge in out_edges[reward_type]:
                     target_id = edge["targetId"]
-                    # IGNORE GOLD EDGES
                     if target_id == "item_gold": continue
-                    
                     qty = edge.get("quantity", 1)
-                    edge_lines.append(f"{nid} --o|Gives {qty}| {target_id}")
+                    edge_lines.append(f'{nid} --o|"Gives {qty}"| {target_id}')
 
         if "consumes" in out_edges:
             for edge in out_edges["consumes"]:
                 target_id = edge["targetId"]
-                # IGNORE GOLD EDGES
                 if target_id == "item_gold": continue
-                
                 qty = edge.get("quantity", 1)
-                edge_lines.append(f"{target_id} --x|Consumes {qty}| {nid}")
+                edge_lines.append(f'{target_id} --x|"Consumes {qty}"| {nid}')
 
     # Build final output
-    for node_def in globals:
-        lines.append(node_def)
+    lines.extend(node_defs)
 
     for loc, nodes_in_loc in by_location.items():
-        lines.append(f'subgraph "Location - {loc}"')
+        # Sanitize loc for ID
+        loc_id = "loc_" + re.sub(r'\W+', '_', loc.lower())
+        lines.append(f'subgraph {loc_id} ["Location - {loc}"]')
         lines.extend(nodes_in_loc)
         lines.append("end")
 
     for cad, nodes_in_cad in by_cadence.items():
-        lines.append(f'subgraph "Cadence - {cad}"')
+        # Sanitize cad for ID
+        cad_id = "cad_" + re.sub(r'\W+', '_', cad.lower())
+        lines.append(f'subgraph {cad_id} ["Cadence - {cad}"]')
         lines.extend(nodes_in_cad)
         lines.append("end")
 
-    lines.extend(edge_lines)
+    # Final filter to ensure no edges to missing nodes and no self-edges
+    valid_edges = []
+    for edge in edge_lines:
+        # Simple extraction of IDs from "id1 --o|...| id2" or "id1 --x|...| id2" or "id1 -->|...| id2"
+        match = re.search(r'^(\w+)\s*--[->ox]\s*\|".*?"\|\s*(\w+)$', edge)
+        if match:
+            source_id = match.group(1)
+            target_id = match.group(2)
+            if source_id in processed_ids and target_id in processed_ids:
+                if source_id != target_id:
+                    valid_edges.append(edge)
+                else:
+                    print(f"Filtered out self-edge: {source_id} --> {target_id}")
+    
+    lines.extend(valid_edges)
 
     return "\n".join(lines)
 

output/graph_visualizer_test.html

@@ -0,0 +1,35 @@
+import os
+import sys
+from export_graph_mermaid import generate_mermaid
+from visualize_graph import generate_html
+
+def main():
+    print("Generating Clustered Mermaid graph HTML only...")
+    try:
+        mermaid_code = generate_mermaid()
+        html = generate_html(mermaid_code)
+        
+        output_dir = "output"
+        if not os.path.exists(output_dir):
+            os.makedirs(output_dir)
+            
+        file_path = os.path.join(output_dir, "graph_visualizer_test.html")
+        with open(file_path, "w", encoding="utf-8") as f:
+            f.write(html)
+            
+        abs_path = os.path.abspath(file_path)
+        print(f"Graph generated: {abs_path}")
+        
+        if os.path.exists(file_path) and os.path.getsize(file_path) > 0:
+            print("[SUCCESS] HTML file generated and is not empty.")
+            sys.exit(0)
+        else:
+            print("[FAIL] HTML file was not generated or is empty.")
+            sys.exit(1)
+            
+    except Exception as e:
+        print(f"Error: {e}")
+        sys.exit(1)
+
+if __name__ == "__main__":
+    main()

package-lock.json

@@ -0,0 +1,39 @@
+const { chromium } = require('playwright');
+const path = require('path');
+const fs = require('fs');
+
+(async () => {
+    const browser = await chromium.launch();
+    const context = await browser.newContext();
+    const page = await context.newPage();
+    
+    page.on('console', msg => {
+        console.log(`PAGE LOG [${msg.type()}]: ${msg.text()}`);
+    });
+
+    const filePath = path.resolve('output/graph_visualizer_test.html');
+    const url = 'file://' + filePath;
+    console.log('Loading ' + url);
+    
+    await page.goto(url);
+    
+    // Wait for either the SVG or the error message
+    console.log('Waiting for mermaid output...');
+    await page.waitForTimeout(5000); // Give it plenty of time
+    
+    // Take a full page screenshot
+    const screenshotPath = 'output/graph_debug.png';
+    await page.screenshot({ path: screenshotPath, fullPage: true });
+    console.log(`Screenshot saved to ${screenshotPath}`);
+    
+    // Check for error text in the page
+    const content = await page.content();
+    if (content.includes('Syntax error') || content.includes('Parser error')) {
+        console.log('[FAIL] Syntax error detected in page content.');
+    } else {
+        const svgExists = await page.locator('.mermaid svg').count() > 0;
+        console.log(`SVG element exists: ${svgExists}`);
+    }
+
+    await browser.close();
+})();