sayou-visualizer 0.0.8__tar.gz → 0.0.10__tar.gz

{sayou_visualizer-0.0.8 → sayou_visualizer-0.0.10}/.gitignore

@@ -3,6 +3,12 @@ __pycache__/
 *.py[codz]
 *$py.class
 
+sayou-stock/tests/tests_fibo.py
+sayou-stock/tests/tests_ontology.py
+sayou-stock/tests/tests_rsi.py
+sayou-stock/tests/tests_trading.py
+sayou-stock/tests/tests_trading_pip.py
+sayou-stock/src/sayou/stock/ontology/
 # C extensions
 *.so
 
@@ -205,3 +211,7 @@ cython_debug/
 marimo/_static/
 marimo/_lsp/
 __marimo__/
+
+# MacOS
+.DS_Store
+

{sayou_visualizer-0.0.8 → sayou_visualizer-0.0.10}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: sayou-visualizer
-Version: 0.0.8
+Version: 0.0.10
 Summary: Visualizer components for the Sayou Data Platform
 Project-URL: Homepage, https://www.sayouzone.com/
 Project-URL: Documentation, https://sayouzone.github.io/sayou-fabric/

{sayou_visualizer-0.0.8 → sayou_visualizer-0.0.10}/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "hatchling.build"
 # -----------------
 [project]
 name = "sayou-visualizer"
-version = "0.0.8"
+version = "0.0.10"
 authors = [
     { name = "Sayouzone", email = "contact@sayouzone.com" },
 ]

{sayou_visualizer-0.0.8 → sayou_visualizer-0.0.10}/src/sayou/visualizer/pipeline.py

@@ -1,5 +1,6 @@
 from sayou.core.base_component import BaseComponent
 
+from .renderer.kg_renderer import KGRenderer
 from .renderer.pyvis_renderer import PyVisRenderer
 from .tracer.graph_tracer import GraphTracer
 from .tracer.rich_tracer import RichConsoleTracer
@@ -22,30 +23,53 @@ class VisualizerPipeline(BaseComponent):
         self._rich_tracer = None
         self._ws_tracer = None
         self._renderer = None
+        self._kg_renderer = None
 
     def attach_to(self, target_pipeline: BaseComponent, mode: str = "report", **kwargs):
         """
-        Connects this visualizer to a target pipeline (Connector, Refinery, etc.).
+        Connects this visualizer to a target pipeline AND its children recursively.
         """
+        tracer = None
         if mode == "report":
             self._graph_tracer = GraphTracer()
-            target_pipeline.add_callback(self._graph_tracer)
+            tracer = self._graph_tracer
             self._log("Attached GraphTracer for HTML reporting.")
-
         elif mode == "live":
             self._rich_tracer = RichConsoleTracer()
-            target_pipeline.add_callback(self._rich_tracer)
+            tracer = self._rich_tracer
             self._log("Attached RichConsoleTracer for live monitoring.")
-
         elif mode == "websocket":
             url = kwargs.get("url")
             if not url:
-                raise ValueError("WebSocket mode requires a 'url' parameter.")
-
+                raise ValueError("WebSocket mode requires 'url'.")
             self._ws_tracer = WebSocketTracer(server_url=url)
-            target_pipeline.add_callback(self._ws_tracer)
+            tracer = self._ws_tracer
             self._log(f"Attached WebSocketTracer to {url}")
 
+        if tracer:
+            self._recursive_attach(target_pipeline, tracer)
+        else:
+            self._log("No tracer attached. Visualizer will not record events.")
+
+    def _recursive_attach(self, component: BaseComponent, tracer):
+        """
+        Helper to attach tracer to the component and all its sub-components.
+        """
+        if hasattr(component, "_callbacks") and tracer in component._callbacks:
+            return
+
+        component.add_callback(tracer)
+        self._log(f"Attached tracer to {component.component_name}")
+
+        for attr_name, attr_value in component.__dict__.items():
+            if isinstance(attr_value, BaseComponent):
+                self._recursive_attach(attr_value, tracer)
+
+            elif isinstance(attr_value, list):
+                for item in attr_value:
+                    if isinstance(item, BaseComponent):
+                        self._recursive_attach(item, tracer)
+
     def report(self, output_path: str = "report.html", **kwargs):
         if self._graph_tracer.graph.number_of_nodes() == 0:
             self._log("No events recorded. The graph is empty.", level="warning")
@@ -57,6 +81,13 @@ class VisualizerPipeline(BaseComponent):
         self._renderer = PyVisRenderer()
         self._renderer.render(self._graph_tracer.graph, output_path, **kwargs)
 
+    def render_kg(self, json_path: str, output_path: str = "kg_view.html"):
+        """
+        Visualizes the OUTPUT JSON (Knowledge Graph).
+        """
+        self._kg_renderer = KGRenderer()
+        self._kg_renderer.render(json_path, output_path)
+
     def save_live_log(self, output_path="live_status.html"):
         if self._rich_tracer:
             self._rich_tracer.save_html(output_path)

sayou_visualizer-0.0.10/src/sayou/visualizer/renderer/analytic_kg_renderer.py

@@ -0,0 +1,453 @@
+import json
+import os
+
+from sayou.core.base_component import BaseComponent
+
+
+class AnalyticKGRenderer(BaseComponent):
+    """
+    Renders an interactive 2D Knowledge Graph optimized for deep analysis and topology exploration.
+
+    Agnostic to data domains (Code, Subtitles, Text), it visualizes structural relationships
+    using a 'Hub & Spoke' layout. Features interactive filtering, search capabilities,
+    and detailed node inspection (Visual IDE/Viewer) to derive insights from complex connections.
+    """
+
+    component_name = "AnalyticKGRenderer"
+
+    STYLE_SHEET = [
+        # [Global Nodes]
+        {
+            "selector": "node",
+            "style": {
+                "label": "data(label)",
+                "color": "#ecf0f1",
+                "font-size": "10px",
+                "text-valign": "center",
+                "text-halign": "center",
+                "text-wrap": "wrap",
+                "text-max-width": "100px",
+                "background-color": "#95a5a6",
+                "border-width": 1,
+                "border-color": "#7f8c8d",
+            },
+        },
+        # [File Node]
+        {
+            "selector": "node[type='file']",
+            "style": {
+                "shape": "rectangle",
+                "background-color": "#2c3e50",
+                "width": 60,
+                "height": 60,
+                "font-size": "12px",
+                "font-weight": "bold",
+                "border-width": 2,
+                "border-color": "#00d2d3",
+            },
+        },
+        # [Class Node]
+        {
+            "selector": "node[type='class']",
+            "style": {
+                "shape": "diamond",
+                "background-color": "#8e44ad",
+                "width": 40,
+                "height": 40,
+            },
+        },
+        # [Method/Function]
+        {
+            "selector": "node[type='method'], node[type='function']",
+            "style": {
+                "shape": "ellipse",
+                "background-color": "#e67e22",
+                "width": 25,
+                "height": 25,
+            },
+        },
+        # [Code Chunk]
+        {
+            "selector": "node[type='code_block']",
+            "style": {
+                "shape": "round-rectangle",
+                "background-color": "#7f8c8d",
+                "width": 15,
+                "height": 15,
+                "label": "",
+            },
+        },
+        # [Package/Library]
+        {
+            "selector": "node[type='library'], node[type='package']",
+            "style": {
+                "shape": "hexagon",
+                "background-color": "#16a085",
+                "width": 50,
+                "height": 50,
+            },
+        },
+        # [Edges]
+        {
+            "selector": "edge",
+            "style": {
+                "width": 1,
+                "curve-style": "bezier",
+                "opacity": 0.6,
+                "arrow-scale": 1,
+            },
+        },
+        # 1. Structure Line (contains) -> Gray Dashed Line (Skeleton)
+        {
+            "selector": "edge[edgeType='sayou:contains']",
+            "style": {
+                "line-color": "#7f8c8d",
+                "target-arrow-color": "#7f8c8d",
+                "target-arrow-shape": "circle",
+                "width": 1.5,
+                "line-style": "dashed",
+                "opacity": 0.7,
+            },
+        },
+        # 2. Logic Line (imports) -> Cyan Dashed Line (Flow)
+        {
+            "selector": "edge[edgeType='sayou:imports']",
+            "style": {
+                "line-color": "#00d2d3",
+                "target-arrow-color": "#00d2d3",
+                "target-arrow-shape": "triangle",
+                "line-style": "dashed",
+                "width": 2,
+                "opacity": 0.9,
+            },
+        },
+        # 3. Inheritance Line (inherits) -> Red Solid Line
+        {
+            "selector": "edge[edgeType='sayou:inherits']",
+            "style": {
+                "line-color": "#ff6b6b",
+                "target-arrow-color": "#ff6b6b",
+                "target-arrow-shape": "triangle",
+                "width": 3,
+            },
+        },
+        # [Interaction]
+        {
+            "selector": ".highlighted",
+            "style": {
+                "background-color": "#f1c40f",
+                "line-color": "#f1c40f",
+                "target-arrow-color": "#f1c40f",
+                "opacity": 1,
+                "z-index": 999,
+            },
+        },
+        {
+            "selector": ".faded",
+            "style": {"opacity": 0.05, "label": ""},
+        },
+        {
+            "selector": ".found",
+            "style": {
+                "border-width": 4,
+                "border-color": "#e056fd",
+                "background-color": "#e056fd",
+            },
+        },
+        {
+            "selector": "node.no-label",
+            "style": {
+                "text-opacity": 0,
+                "text-background-opacity": 0,
+                "text-border-opacity": 0,
+            },
+        },
+        {
+            "selector": "edge.hidden-edge",
+            "style": {"display": "none"},
+        },
+    ]
+
+    def render(self, json_path: str, output_path: str = "sayou_analyst_view.html"):
+        if not os.path.exists(json_path):
+            return
+
+        with open(json_path, "r", encoding="utf-8") as f:
+            raw_data = json.load(f)
+
+        elements = []
+
+        # 1. Nodes (No Parents logic)
+        for node in raw_data.get("nodes", []):
+            node_id = node.get("node_id")
+            attrs = node.get("attributes", {})
+            n_cls = node.get("node_class", "unknown").lower()
+
+            # Type Check
+            cy_type = "unknown"
+            if "file" in n_cls:
+                cy_type = "file"
+            elif "class" in n_cls:
+                cy_type = "class"
+            elif "method" in n_cls:
+                cy_type = "method"
+            elif "function" in n_cls:
+                cy_type = "function"
+            elif "library" in n_cls:
+                cy_type = "library"
+            elif "code" in n_cls:
+                cy_type = "code_block"
+
+            # Labeling
+            label = attrs.get("label") or node.get("friendly_name") or node_id
+            if cy_type == "file":
+                label = os.path.basename(attrs.get("sayou:filePath", label))
+            elif cy_type == "class":
+                label = attrs.get("meta:class_name", label)
+            elif cy_type in ["method", "function"]:
+                label = attrs.get("function_name", label)
+
+            # Code Text
+            code_text = attrs.get("schema:text", "")
+            cy_data = {
+                "id": node_id,
+                "label": label,
+                "type": cy_type,
+                "code": code_text,
+                "meta": attrs,
+            }
+            elements.append({"group": "nodes", "data": cy_data})
+
+        # 2. Edges
+        for edge in raw_data.get("edges", []):
+            elements.append(
+                {
+                    "group": "edges",
+                    "data": {
+                        "source": edge.get("source"),
+                        "target": edge.get("target"),
+                        "edgeType": edge.get("type", "relates"),
+                        "label": edge.get("type", "").split(":")[-1],
+                    },
+                }
+            )
+
+        self._generate_html(elements, output_path)
+        self._log(f"✅ Pure Graph View saved to: {output_path}")
+
+    def _generate_html(self, elements: list, output_path: str):
+        style_json = json.dumps(self.STYLE_SHEET)
+        elements_json = json.dumps(elements)
+
+        html_content = f"""
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Sayou Code Universe</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>
+    <script src="https://unpkg.com/layout-base/layout-base.js"></script>
+    <script src="https://unpkg.com/cose-base/cose-base.js"></script>
+    <script src="https://unpkg.com/cytoscape-fcose/cytoscape-fcose.js"></script>
+    
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+
+    <style>
+        body {{ font-family: 'Segoe UI', sans-serif; margin: 0; background: #1e272e; color: #dcdde1; overflow: hidden; display: flex; }}
+        #cy {{ flex-grow: 1; height: 100vh; }}
+        
+        /* Sidebar & Controls */
+        #controls {{
+            position: absolute; top: 20px; left: 20px; z-index: 100;
+            background: rgba(47, 54, 64, 0.95); padding: 15px; border-radius: 8px;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.3); border: 1px solid #4b6584; width: 280px;
+        }}
+        #tooltip {{
+            position: absolute;
+            display: none;
+            background: rgba(0, 0, 0, 0.8);
+            color: #fff;
+            padding: 5px 10px;
+            border-radius: 4px;
+            font-size: 11px;
+            pointer-events: none;
+            z-index: 1000;
+            border: 1px solid #00d2d3;
+        }}
+        .search-group {{ display: flex; gap: 5px; margin-bottom: 10px; }}
+        input[type="text"] {{ flex-grow: 1; background: #222; border: 1px solid #57606f; color: white; padding: 6px; border-radius: 4px; }}
+        button {{ background: #4b6584; border: none; color: white; padding: 6px 12px; border-radius: 4px; cursor: pointer; }}
+        button:hover {{ background: #00d2d3; color: #000; }}
+
+        #sidebar {{
+            width: 450px; height: 100vh; background: #2f3640; border-left: 1px solid #4b6584;
+            display: flex; flex-direction: column; transform: translateX(450px); transition: 0.3s;
+            position: absolute; right: 0; top: 0; z-index: 200; box-shadow: -5px 0 15px rgba(0,0,0,0.5);
+        }}
+        #sidebar.open {{ transform: translateX(0); }}
+        .header {{ padding: 20px; border-bottom: 1px solid #4b6584; background: #252a34; }}
+        .node-title {{ font-size: 18px; color: #fff; font-weight: bold; margin: 0; }}
+        .content {{ flex-grow: 1; overflow-y: auto; padding: 0; background: #282c34; }}
+        pre {{ margin: 0; }}
+    </style>
+</head>
+<body>
+    <div id="controls">
+        <div style="font-weight:bold; color:#00d2d3; margin-bottom:10px;">Sayou Graph</div>
+        <div class="search-group">
+            <input type="text" id="search-input" placeholder="Search..." onkeyup="if(event.key === 'Enter') searchNode()">
+            <button onclick="searchNode()">🔍</button>
+        </div>
+        <div style="margin-bottom: 10px; display: flex; gap: 5px;">
+            <button id="btn-label" class="active" onclick="toggleLabels()" style="flex:1;">Labels ON</button>
+            <button id="btn-line" class="active" onclick="toggleLines()" style="flex:1;">Lines ON</button>
+        </div>
+        <div style="font-size:11px; color:#aaa; border-top:1px solid #57606f; padding-top:10px;">
+            <button onclick="runLayout()">Re-Layout</button>
+            <button onclick="resetView()">Reset Cam</button>
+        </div>
+    </div>
+
+    <div id="cy"></div>
+    <div id="tooltip"></div>
+
+    <div id="sidebar">
+        <div class="header">
+            <h2 class="node-title" id="sb-title">Details</h2>
+            <div id="sb-desc" style="font-size:12px; color:#aaa; margin-top:5px;"></div>
+        </div>
+        <div class="content">
+            <pre><code id="sb-code" class="language-python"></code></pre>
+        </div>
+    </div>
+
+    <script>
+        var cy = cytoscape({{
+            container: document.getElementById('cy'),
+            elements: {elements_json},
+            style: {style_json},
+            layout: {{ 
+                name: 'fcose',
+                quality: 'proof',
+                nodeSeparation: 75,
+                idealEdgeLength: edge => edge.data('edgeType') === 'sayou:contains' ? 50 : 200,
+                animate: false 
+            }}
+        }});
+
+        function runLayout() {{
+            cy.layout({{ name: 'fcose', animate: true, animationDuration: 800 }}).run();
+        }}
+
+        // [Search]
+        function searchNode() {{
+            var query = document.getElementById('search-input').value.toLowerCase();
+            if(!query) return;
+            cy.elements().removeClass('found');
+            var found = cy.nodes().filter(ele => ele.data('label').toLowerCase().includes(query));
+            if(found.length > 0) {{
+                found.addClass('found');
+                // cy.animate({{ fit: {{ eles: found, padding: 50 }}, duration: 500 }});
+                // cy.center(found);
+            }}
+        }}
+
+        function resetView() {{
+            cy.elements().removeClass('highlighted faded found');
+            document.getElementById('sidebar').classList.remove('open');
+            cy.animate({{ fit: {{ padding: 50 }} }});
+        }}
+
+        // 1. Label Toggle (ON/OFF)
+        var labelsVisible = true;
+        function toggleLabels() {{
+            labelsVisible = !labelsVisible;
+            var btn = document.getElementById('btn-label');
+            
+            if (labelsVisible) {{
+                cy.nodes().removeClass('no-label');
+                btn.innerText = "Labels ON";
+                btn.style.background = "#4b6584";
+                btn.style.color = "white";
+            }} else {{
+                cy.nodes().addClass('no-label');
+                btn.innerText = "Labels OFF";
+                btn.style.background = "#2f3542";
+                btn.style.color = "#747d8c";
+            }}
+        }}
+
+        // 2. Line Toggle (ON/OFF)
+        var linesVisible = true;
+        function toggleLines() {{
+            linesVisible = !linesVisible;
+            var btn = document.getElementById('btn-line');
+            // var edges = cy.edges('[edgeType="sayou:contains"]');
+            var edges = cy.edges();
+            
+            if (linesVisible) {{
+                edges.removeClass('hidden-edge');
+                btn.innerText = "Lines ON";
+                btn.style.background = "#4b6584";
+                btn.style.color = "white";
+            }} else {{
+                edges.addClass('hidden-edge');
+                btn.innerText = "Lines OFF";
+                btn.style.background = "#2f3542";
+                btn.style.color = "#747d8c";
+            }}
+        }}
+
+        // [Click Interaction]
+        cy.on('tap', 'node', function(evt){{
+            var node = evt.target;
+            
+            // Highlight neighbors
+            cy.elements().removeClass('highlighted faded');
+            var neighbors = node.neighborhood().add(node);
+            cy.elements().addClass('faded');
+            neighbors.removeClass('faded').addClass('highlighted');
+
+            // Sidebar
+            document.getElementById('sidebar').classList.add('open');
+            document.getElementById('sb-title').innerText = node.data('label');
+            document.getElementById('sb-desc').innerText = (node.data('type') || 'Unknown').toUpperCase() + ' | ' + node.id();
+            
+            var codeArea = document.getElementById('sb-code');
+            codeArea.innerText = node.data('code') || JSON.stringify(node.data('meta'), null, 2);
+            hljs.highlightElement(codeArea);
+        }});
+
+        cy.on('tap', function(evt){{
+            if(evt.target === cy) resetView();
+        }});
+
+        var tooltip = document.getElementById('tooltip');
+
+        cy.on('mouseover', 'node', function(evt){{
+            var node = evt.target;
+            var label = node.data('label') || node.data('id');
+            
+            tooltip.style.display = 'block';
+            tooltip.innerText = label;
+            tooltip.style.left = evt.renderedPosition.x + 'px';
+            // var pos = node.renderedPosition();
+            // tooltip.style.left = (pos.x + 10) + 'px';
+            // tooltip.style.top = (pos.y + 10) + 'px';
+        }});
+
+        cy.on('mousemove', function(evt){{
+            tooltip.style.left = (evt.renderedPosition.x + 15) + 'px';
+            tooltip.style.top = (evt.renderedPosition.y + 15) + 'px';
+        }});
+
+        cy.on('mouseout', 'node', function(){{
+            tooltip.style.display = 'none';
+        }});
+    </script>
+</body>
+</html>
+"""
+        with open(output_path, "w", encoding="utf-8") as f:
+            f.write(html_content)

sayou_visualizer-0.0.10/src/sayou/visualizer/renderer/showcase_kg_renderer.py

@@ -0,0 +1,303 @@
+import json
+import os
+from collections import defaultdict
+
+from sayou.core.base_component import BaseComponent
+
+
+class ShowcaseKGRenderer(BaseComponent):
+    """
+    Renders an immersive 3D Knowledge Graph designed for high-level visualization and presentation.
+
+    Focuses on the 'Big Picture' and aesthetic impact using spatial layouts and semantic coloring.
+    Ideal for demonstrating data scale, clustering patterns, and global connectivity (Wow Effect),
+    rather than granular node analysis.
+    """
+
+    component_name = "ShowcaseKGRenderer"
+
+    def render(self, json_path: str, output_path: str = "kg_view_3d.html"):
+        if not os.path.exists(json_path):
+            self._log(f"Output file not found: {json_path}", level="error")
+            return
+
+        with open(json_path, "r", encoding="utf-8") as f:
+            raw_data = json.load(f)
+
+        # ---------------------------------------------------------
+        # [Python Logic]
+        # ---------------------------------------------------------
+        nodes_by_source = defaultdict(list)
+        final_nodes = []
+        final_links = []
+
+        existing_ids = set()
+
+        for node in raw_data.get("nodes", []):
+            node_id = node.get("node_id")
+            existing_ids.add(node_id)
+            attrs = node.get("attributes", {})
+            meta = node.get("metadata", {})
+
+            source = meta.get("source") or attrs.get("sayou:source") or "Unknown Source"
+            nodes_by_source[source].append(node_id)
+
+            sem_type = attrs.get("sayou:semanticType", "text")
+
+            clean_attrs = {}
+            for k, v in attrs.items():
+                if isinstance(v, str) and len(v) > 300:
+                    clean_attrs[k] = v[:200] + "..."
+                else:
+                    clean_attrs[k] = v
+
+            display_label = attrs.get("schema:text", node_id)
+            if len(display_label) > 30:
+                display_label = display_label[:30] + "..."
+
+            group = "Chunk"
+            color = "#1e90ff"
+            val = 5
+
+            if sem_type in ["h1", "h2", "h3", "title"]:
+                group = "Header"
+                color = "#ffa502"
+                val = 12
+            elif "list" in sem_type:
+                group = "List"
+                color = "#2ed573"
+                val = 4
+            elif "table" in sem_type:
+                group = "Table"
+                color = "#a55eea"
+                val = 10
+            elif "code" in sem_type:
+                group = "Code"
+                color = "#ff4757"
+                val = 8
+
+            final_nodes.append(
+                {
+                    "id": node_id,
+                    "label": display_label,
+                    "group": group,
+                    "sem_type": sem_type,
+                    "color": color,
+                    "val": val,
+                    "attributes": clean_attrs,
+                    "source": source,
+                }
+            )
+
+        for edge in raw_data.get("links", []) + raw_data.get("edges", []):
+            final_links.append(
+                {
+                    "source": edge.get("source"),
+                    "target": edge.get("target"),
+                    "relation": edge.get("relation", "relates_to"),
+                }
+            )
+
+        for source_name, child_ids in nodes_by_source.items():
+            if source_name in existing_ids:
+                continue
+
+            virtual_doc_id = f"VIRTUAL_DOC:{source_name}"
+
+            final_nodes.append(
+                {
+                    "id": virtual_doc_id,
+                    "label": source_name,
+                    "group": "Document",
+                    "color": "#ff4757",
+                    "val": 30,
+                    "attributes": {
+                        "type": "Virtual Parent",
+                        "child_count": len(child_ids),
+                    },
+                    "is_virtual": True,
+                }
+            )
+
+            for child_id in child_ids:
+                final_links.append(
+                    {
+                        "source": virtual_doc_id,
+                        "target": child_id,
+                        "relation": "CONTAINS",
+                    }
+                )
+
+        graph_data = {"nodes": final_nodes, "links": final_links}
+        self._log(f"Rendering KG with Virtual Hierarchy ({len(final_nodes)} nodes)...")
+
+        # ---------------------------------------------------------
+        # [JS Logic] Renderer
+        # ---------------------------------------------------------
+        html_content = f"""
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Sayou Dataverse</title>
+    <style>
+        body {{ margin: 0; background-color: #000205; overflow: hidden; }}
+        #graph {{ width: 100%; height: 100vh; }}
+        
+        #info {{
+            position: absolute; top: 20px; right: 20px; width: 300px;
+            background: rgba(5, 10, 20, 0.85);
+            border: 1px solid rgba(0, 242, 255, 0.3);
+            border-left: 3px solid #00f2ff;
+            box-shadow: 0 0 20px rgba(0, 242, 255, 0.1);
+            color: #dff9fb; padding: 20px;
+            font-family: 'Consolas', 'Monaco', monospace;
+            backdrop-filter: blur(5px);
+            display: none; pointer-events: none;
+            border-radius: 0 10px 10px 0;
+        }}
+        .tag {{ 
+            display: inline-block; padding: 2px 8px; border-radius: 2px; 
+            font-size: 9px; font-weight: 800; color: #000; margin-bottom: 12px;
+            text-transform: uppercase; letter-spacing: 1px;
+        }}
+        h3 {{ 
+            margin: 0 0 12px 0; color: #fff; 
+            border-bottom: 1px dashed #576574; padding-bottom: 8px; 
+            font-size: 14px; line-height: 1.4;
+        }}
+        .row {{ font-size: 11px; margin-bottom: 4px; color: #a4b0be; }}
+        .key {{ color: #00d2d3; margin-right: 5px; }}
+    </style>
+    <script src="https://unpkg.com/three@0.160.0/build/three.min.js"></script>
+    <script src="https://unpkg.com/3d-force-graph@1.73.1/dist/3d-force-graph.min.js"></script>
+</head>
+<body>
+    <div id="graph"></div>
+    <div id="info"></div>
+
+    <script>
+        const gData = {json.dumps(graph_data)};
+        const infoDiv = document.getElementById('info');
+
+        const Graph = ForceGraph3D()(document.getElementById('graph'))
+            .graphData(gData)
+            .backgroundColor('#000205')
+            .showNavInfo(false)
+            
+            // [Design Logic]
+            .nodeThreeObject(node => {{
+                let geometry, material;
+                
+                // 1. Virtual Document
+                if (node.group === "Document") {{
+                    const size = node.val;
+                    geometry = new THREE.BoxGeometry(size, size, size);
+                    
+                    const edges = new THREE.EdgesGeometry(geometry);
+                    material = new THREE.LineBasicMaterial({{ 
+                        color: node.color, 
+                        transparent: true, 
+                        opacity: 0.4 
+                    }});
+                    const wireframe = new THREE.LineSegments(edges, material);
+                    
+                    const coreGeo = new THREE.BoxGeometry(size*0.2, size*0.2, size*0.2);
+                    const coreMat = new THREE.MeshBasicMaterial({{ color: node.color, wireframe: true }});
+                    wireframe.add(new THREE.Mesh(coreGeo, coreMat));
+                    
+                    return wireframe;
+                }}
+                
+                // 2. Headers (H1~H3): [발광 다이아몬드]
+                else if (node.group === "Header") {{
+                    geometry = new THREE.OctahedronGeometry(4);
+                    material = new THREE.MeshPhongMaterial({{ 
+                        color: node.color, 
+                        emissive: node.color,
+                        emissiveIntensity: 0.5,
+                        shininess: 100,
+                        flatShading: true
+                    }});
+                }}
+                
+                // 3. Chunk / Text: [데이터 오브]
+                else {{
+                    // 단순 구 대신 Icosahedron(정이십면체)을 써서 디지털 느낌
+                    geometry = new THREE.IcosahedronGeometry(3, 1); 
+                    material = new THREE.MeshLambertMaterial({{ 
+                        color: node.color, 
+                        transparent: true, 
+                        opacity: 0.8 
+                    }});
+                }}
+                
+                return new THREE.Mesh(geometry, material);
+            }})
+            
+            // [Link Design]
+            .linkWidth(link => link.relation === "CONTAINS" ? 0 : 0.5)
+            .linkColor(() => '#2f3542')
+            .linkDirectionalParticles(link => link.relation === "CONTAINS" ? 1 : 3)
+            .linkDirectionalParticleWidth(1.2)
+            .linkDirectionalParticleSpeed(0.006)
+            .linkDirectionalParticleColor(link => link.relation === "CONTAINS" ? '#57606f' : '#00f2ff')
+
+            // [Interaction]
+            .onNodeHover(node => {{
+                document.body.style.cursor = node ? 'crosshair' : null;
+                if (node) {{
+                    infoDiv.style.display = 'block';
+                    
+                    let tagColor = node.color;
+                    if(node.group === 'Document') tagColor = '#ff4757';
+                    
+                    let html = `<span class='tag' style='background:${{tagColor}}'>${{node.group}}</span>`;
+                    if(node.sem_type) html += `<span class='tag' style='background:#2f3542; color:#fff; margin-left:5px'>${{node.sem_type}}</span>`;
+                    
+                    html += `<h3>${{node.label}}</h3>`;
+                    
+                    if (node.attributes) {{
+                        for (const [k, v] of Object.entries(node.attributes)) {{
+                            if(k === 'type' || k === 'child_count') continue;
+                            let key = k.includes(':') ? k.split(':').pop() : k;
+                            html += `<div class='row'><span class='key'>${{key}}:</span> ${{v}}</div>`;
+                        }}
+                    }}
+                    infoDiv.innerHTML = html;
+                }} else {{
+                    infoDiv.style.display = 'none';
+                }}
+            }})
+            .onNodeClick(node => {{
+                const distance = 70;
+                const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
+                const newPos = node.x || node.y || node.z
+                    ? {{ x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }}
+                    : {{ x: 0, y: 0, z: distance }};
+                Graph.cameraPosition(newPos, node, 1500);
+            }});
+
+        // [Lighting]
+        const ambientLight = new THREE.AmbientLight(0x222222); // 어두운 기본광
+        Graph.scene().add(ambientLight);
+        
+        const blueLight = new THREE.PointLight(0x00f2ff, 1, 100); // 청록색 포인트 조명
+        blueLight.position.set(50, 50, 50);
+        Graph.scene().add(blueLight);
+        
+        const pinkLight = new THREE.PointLight(0xff00ff, 0.5, 100); // 핑크색 포인트 조명 (반대편)
+        pinkLight.position.set(-50, -50, -50);
+        Graph.scene().add(pinkLight);
+
+        // [Physics]
+        Graph.d3Force('charge').strength(-50);
+        Graph.d3Force('link').distance(link => link.relation === "CONTAINS" ? 60 : 30);
+
+    </script>
+</body>
+</html>
+"""
+        with open(output_path, "w", encoding="utf-8") as f:
+            f.write(html_content)
+        self._log(f"✅ Semantic 3D KG Showcase saved to: {output_path}")

sayou_visualizer-0.0.10/src/sayou/visualizer/tracer/graph_tracer.py

@@ -0,0 +1,101 @@
+import networkx as nx
+from sayou.core.callbacks import BaseCallback
+
+
+class GraphTracer(BaseCallback):
+    def __init__(self):
+        self.graph = nx.DiGraph()
+        self._execution_stack = ["Root"]
+        self.graph.add_node(
+            "Root",
+            label="Sayou Pipeline",
+            color="#ffffff",
+            shape="dot",
+            size=25,
+            font={"size": 20, "color": "black"},
+        )
+
+    def on_start(self, component_name, input_data, **kwargs):
+        try:
+            comp_node = f"Comp:{component_name}_{len(self._execution_stack)}"
+
+            color = "#a5b1c2"
+            size = 15
+            if "Pipeline" in component_name:
+                color = "#ff6b81"
+                size = 20
+            elif "Generator" in component_name or "Fetcher" in component_name:
+                color = "#2ed573"
+            elif "Parser" in component_name or "Converter" in component_name:
+                color = "#eccc68"
+            elif "Splitter" in component_name:
+                color = "#70a1ff"
+
+            if not self.graph.has_node(comp_node):
+                self.graph.add_node(
+                    comp_node, label=component_name, shape="dot", color=color, size=size
+                )
+            parent_node = self._execution_stack[-1]
+
+            if "Generator" in parent_node and "Pipeline" in component_name:
+                for ancestor in reversed(self._execution_stack):
+                    if "Pipeline" in ancestor and "Connector" not in ancestor:
+                        parent_node = ancestor
+                        break
+            self.graph.add_edge(parent_node, comp_node)
+            self._execution_stack.append(comp_node)
+
+            data_id = self._get_data_id(input_data)
+            if data_id:
+                data_node_id = f"Data:{data_id}"
+                if not self.graph.has_node(data_node_id):
+                    label_text = str(data_id)
+                    if len(label_text) > 20:
+                        label_text = label_text[:17] + "..."
+                    self.graph.add_node(
+                        data_node_id,
+                        label=label_text,
+                        shape="square",
+                        size=8,
+                        color="#57606f",
+                    )
+                self.graph.add_edge(comp_node, data_node_id)
+
+        except Exception as e:
+            print(f"!!! TRACER ERROR: {e}")
+
+    def on_finish(self, component_name, result_data, success, **kwargs):
+        try:
+            if len(self._execution_stack) > 1:
+                if component_name in self._execution_stack[-1]:
+                    self._execution_stack.pop()
+                else:
+                    for i in range(len(self._execution_stack) - 1, 0, -1):
+                        if component_name in self._execution_stack[i]:
+                            self._execution_stack = self._execution_stack[:i]
+                            break
+        except Exception as e:
+            print(f"!!! TRACER POP ERROR: {e}")
+
+    def _get_data_id(self, data):
+        if isinstance(data, dict):
+            return data.get("source") or data.get("uri") or data.get("filename")
+
+        uri = getattr(data, "uri", None)
+        if uri:
+            return uri
+
+        source = getattr(data, "source", None)
+        if source:
+            return source
+
+        filename = getattr(data, "filename", None)
+        if filename:
+            return filename
+
+        return None
+
+    def _get_data_id_from_result(self, data):
+        if hasattr(data, "task") and hasattr(data.task, "uri"):
+            return data.task.uri
+        return None

sayou_visualizer-0.0.8/src/sayou/visualizer/tracer/graph_tracer.py

@@ -1,94 +0,0 @@
-import networkx as nx
-from sayou.core.callbacks import BaseCallback
-
-
-class GraphTracer(BaseCallback):
-    def __init__(self):
-        self.graph = nx.DiGraph()
-        self.graph.add_node(
-            "Root",
-            label="Sayou Pipeline",
-            color="#ffffff",
-            shape="dot",
-            size=25,
-            font={"size": 20, "color": "black"},
-        )
-
-    def on_start(self, component_name, input_data, **kwargs):
-        try:
-            comp_node = f"Comp:{component_name}"
-
-            color = "#a5b1c2"
-            size = 15
-
-            if "ConnectorPipeline" in component_name:
-                color = "#ffffff"
-                size = 20
-            elif "Generator" in component_name:
-                color = "#00d2d3"
-                size = 15
-            elif "Fetcher" in component_name:
-                color = "#ff9f43"
-                size = 15
-
-            if not self.graph.has_node(comp_node):
-                self.graph.add_node(
-                    comp_node, label=component_name, shape="dot", color=color, size=size
-                )
-
-                if "Pipeline" in component_name:
-                    self.graph.add_edge("Root", comp_node)
-                else:
-                    parent = "Comp:ConnectorPipeline"
-                    if not self.graph.has_node(parent):
-                        parent = "Root"
-                    self.graph.add_edge(parent, comp_node)
-
-            data_id = self._get_data_id(input_data)
-            if data_id:
-                label_text = str(data_id)
-                if len(label_text) > 25:
-                    label_text = label_text[:22] + "..."
-
-                node_id = f"Data:{data_id}"
-                if not self.graph.has_node(node_id):
-                    self.graph.add_node(
-                        node_id,
-                        label=label_text,
-                        title=str(data_id),
-                        shape="dot",
-                        size=8,
-                        color={"background": "#57606f", "border": "#57606f"},
-                    )
-
-                self.graph.add_edge(comp_node, node_id)
-
-        except Exception as e:
-            print(f"!!! TRACER ERROR: {e}")
-
-    def on_finish(self, component_name, result_data, success, **kwargs):
-        try:
-            data_id = self._get_data_id_from_result(result_data)
-            if data_id:
-                node_id = f"Data:{data_id}"
-                if self.graph.has_node(node_id):
-                    color = "#54a0ff" if success else "#ff6b6b"
-                    self.graph.nodes[node_id]["color"] = color
-                    self.graph.nodes[node_id]["size"] = 10
-        except Exception as e:
-            print(f"!!! TRACER ERROR in on_finish: {e}")
-            pass
-
-    def _get_data_id(self, data):
-        if isinstance(data, dict):
-            return data.get("source") or data.get("uri")
-        if hasattr(data, "uri"):
-            return data.uri
-        if hasattr(data, "source"):
-            return data.source
-        return None
-
-    def _get_data_id_from_result(self, data):
-        if hasattr(data, "task") and hasattr(data.task, "uri"):
-            return data.task.uri
-        return None