sayou-visualizer 0.0.9__py3-none-any.whl → 0.0.11__py3-none-any.whl

sayou/visualizer/pipeline.py

@@ -1,6 +1,7 @@
 from sayou.core.base_component import BaseComponent
 
-from .renderer.kg_renderer import KGRenderer
+from .renderer.analytic_kg_renderer import AnalyticKGRenderer
+from .renderer.showcase_kg_renderer import ShowcaseKGRenderer
 from .renderer.pyvis_renderer import PyVisRenderer
 from .tracer.graph_tracer import GraphTracer
 from .tracer.rich_tracer import RichConsoleTracer
@@ -81,11 +82,20 @@ 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"):
+    def render_analytic_kg(self, json_path: str, output_path: str = "kg_view.html"):
         """
         Visualizes the OUTPUT JSON (Knowledge Graph).
         """
-        self._kg_renderer = KGRenderer()
+        self._kg_renderer = AnalyticKGRenderer()
+        self._kg_renderer.render(json_path, output_path)
+
+    def render_showcase_kg(
+        self, json_path: str, output_path: str = "showcase_kg_view.html"
+    ):
+        """
+        Visualizes the OUTPUT JSON (Knowledge Graph).
+        """
+        self._kg_renderer = ShowcaseKGRenderer()
         self._kg_renderer.render(json_path, output_path)
 
     def save_live_log(self, output_path="live_status.html"):

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/renderer/showcase_kg_renderer.py

@@ -0,0 +1,291 @@
+import json
+import os
+from sayou.core.base_component import BaseComponent
+
+
+class ShowcaseKGRenderer(BaseComponent):
+    """
+    Renders the Final Stable 3D Knowledge Graph.
+    - [Architecture] Removed unstable Post-Processing shaders to fix physics crash.
+    - [Visuals] Uses native 'Emissive' materials for Neon aesthetics.
+    - [Topology] Distinguishes 'Imports' (Gold/Bright) vs 'Hierarchy' (Dark/Blue).
+    """
+
+    component_name = "ShowcaseKGRenderer"
+
+    def render(self, json_path: str, output_path: str = "sayou_showcase_3d.html"):
+        if not os.path.exists(json_path):
+            return
+
+        with open(json_path, "r", encoding="utf-8") as f:
+            raw_data = json.load(f)
+
+        nodes = []
+        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", {})
+            n_cls = node.get("node_class", "unknown").lower()
+
+            group = "Chunk"
+            color = "#4a69bd"
+            val = 3
+
+            if "file" in n_cls or "package" in n_cls:
+                group = "Document"
+                color = "#00d2d3"  # Cyan
+                val = 20
+            elif "class" in n_cls:
+                group = "Header"
+                color = "#ff6b81"  # Pink
+                val = 12
+            elif "method" in n_cls or "function" in n_cls:
+                group = "Code"
+                color = "#feca57"  # Gold
+                val = 6
+            elif "library" in n_cls:
+                group = "Library"
+                color = "#2ed573"  # Green
+                val = 10
+
+            label = attrs.get("label") or node.get("friendly_name") or node_id
+            if group == "Document":
+                label = os.path.basename(attrs.get("sayou:filePath", label))
+
+            clean_attrs = {}
+            for k, v in attrs.items():
+                if isinstance(v, str) and len(v) > 200:
+                    clean_attrs[k] = v[:200] + "..."
+                elif not k.startswith("sayou:"):
+                    clean_attrs[k] = v
+
+            nodes.append(
+                {
+                    "id": node_id,
+                    "label": label,
+                    "group": group,
+                    "color": color,
+                    "val": val,
+                    "attributes": clean_attrs,
+                }
+            )
+
+        # [2] Edge data processing
+        for edge in raw_data.get("edges", []):
+            src = edge.get("source")
+            tgt = edge.get("target")
+
+            if src in existing_ids and tgt in existing_ids:
+                e_type = edge.get("type", "relates")
+                is_import = "import" in e_type or "calls" in e_type
+
+                links.append(
+                    {
+                        "source": src,
+                        "target": tgt,
+                        "type": e_type,
+                        "is_import": is_import,
+                    }
+                )
+
+        graph_data = {"nodes": nodes, "links": links}
+        self._generate_html(graph_data, output_path)
+        self._log(f"✅ Final Visual Showcase generated at: {output_path}")
+
+    def _generate_html(self, graph_data, output_path):
+        json_str = json.dumps(graph_data)
+
+        html_content = f"""
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Sayou Dataverse</title>
+    <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>
+    <style>
+        body {{ margin: 0; background-color: #020202; overflow: hidden; font-family: sans-serif; }}
+        #graph {{ width: 100%; height: 100vh; }}
+        #info {{
+            position: absolute; top: 30px; right: 30px; width: 300px;
+            background: rgba(15, 20, 30, 0.9);
+            border: 1px solid #444; border-left: 4px solid #00d2d3;
+            box-shadow: 0 0 20px rgba(0,0,0,0.8);
+            color: #fff; padding: 20px; font-size:13px;
+            backdrop-filter: blur(5px); display: none; border-radius: 4px; pointer-events: none;
+        }}
+        .tag {{ display: inline-block; padding: 3px 6px; border-radius: 4px; color: #000; font-weight:bold; font-size:10px; margin-bottom:10px; }}
+        h2 {{ margin:0 0 10px 0; font-size:16px; color:#eee; }}
+        .row {{ margin-bottom:4px; color:#aaa; border-bottom:1px solid #333; padding-bottom:2px; }}
+        .key {{ color:#00d2d3; margin-right:5px; }}
+    </style>
+</head>
+<body>
+    <div id="graph"></div>
+    <div id="info"></div>
+
+    <script>
+        const gData = {json_str};
+        const infoDiv = document.getElementById('info');
+        
+        // [State]
+        const highlightNodes = new Set();
+        const highlightLinks = new Set();
+        let hoverNode = null;
+        let isFlying = false;
+
+        // [Init] Big Bang
+        gData.nodes.forEach(node => {{
+            node.x = Math.random() * 2000 - 1000;
+            node.y = Math.random() * 2000 - 1000;
+            node.z = Math.random() * 2000 - 1000;
+        }});
+
+        // [Graph Init]
+        const Graph = ForceGraph3D()(document.getElementById('graph'))
+            .graphData(gData)
+            .backgroundColor('#050505')
+            .showNavInfo(false)
+            .nodeLabel(null)
+            .cooldownTicks(50);
+
+        // [Physics]
+        Graph.d3Force('charge').strength(-100);
+        Graph.d3Force('link').distance(link => link.is_import ? 10 : 100);
+
+        // [Visuals]
+        Graph
+            .nodeThreeObject(node => {{
+                let isDimmed = false;
+                let isTarget = false;
+                if (hoverNode) {{
+                    if (hoverNode === node || highlightNodes.has(node)) isTarget = true;
+                    else isDimmed = true;
+                }}
+                const baseColor = node.color;
+                const opacity = isDimmed ? 0.1 : 0.9;
+                const emissiveInt = isTarget ? 1.5 : (isDimmed ? 0 : 0.6);
+
+                const material = new THREE.MeshPhongMaterial({{
+                    color: baseColor,
+                    emissive: baseColor,
+                    emissiveIntensity: emissiveInt,
+                    transparent: true,
+                    opacity: opacity,
+                    shininess: 90
+                }});
+
+                if (node.group === "Document") {{
+                    const s = node.val;
+                    const geometry = new THREE.BoxGeometry(s, s, s);
+                    const edges = new THREE.EdgesGeometry(geometry);
+                    const lineMat = new THREE.LineBasicMaterial({{ color: baseColor, transparent:true, opacity: isDimmed ? 0.05 : 0.4 }});
+                    const wireframe = new THREE.LineSegments(edges, lineMat);
+                    wireframe.add(new THREE.Mesh(new THREE.BoxGeometry(s*0.4, s*0.4, s*0.4), material));
+                    return wireframe;
+                }}
+                else if (node.group === "Header") return new THREE.Mesh(new THREE.OctahedronGeometry(node.val * 0.7), material);
+                else return new THREE.Mesh(new THREE.IcosahedronGeometry(node.val * 0.6, 2), material);
+            }})
+            .linkWidth(link => {{
+                if (highlightLinks.has(link)) return 3;
+                if (hoverNode && !highlightLinks.has(link)) return 0; 
+                return link.is_import ? 1.5 : 0.5;
+            }})
+            .linkColor(link => {{
+                if (highlightLinks.has(link)) return link.is_import ? '#feca57' : '#00d2d3'; 
+                return link.is_import ? 'rgba(254, 202, 87, 0.4)' : 'rgba(44, 62, 80, 0.3)';
+            }})
+            .linkDirectionalParticles(link => highlightLinks.has(link) ? 3 : 0)
+            .linkDirectionalParticleWidth(3)
+            .onNodeHover(node => {{
+                if ((!node && !hoverNode) || (node && hoverNode === node)) return;
+                
+                highlightNodes.clear(); highlightLinks.clear();
+                if (node) {{
+                    highlightNodes.add(node);
+                    gData.links.forEach(link => {{
+                        if (link.source.id === node.id) {{ highlightNodes.add(link.target); highlightLinks.add(link); }}
+                        else if (link.target.id === node.id) {{ highlightNodes.add(link.source); highlightLinks.add(link); }}
+                    }});
+                }}
+                hoverNode = node || null;
+                requestAnimationFrame(() => {{
+                    Graph
+                        .nodeThreeObject(Graph.nodeThreeObject())
+                        .linkWidth(Graph.linkWidth())
+                        .linkColor(Graph.linkColor())
+                        .linkDirectionalParticles(Graph.linkDirectionalParticles());
+                }});
+                
+                document.body.style.cursor = node ? 'crosshair' : null;
+                if (node) {{
+                    infoDiv.style.display = 'block';
+                    let html = `<span class='tag' style='background:${{node.color}}'>${{node.group}}</span><h2>${{node.label}}</h2>`;
+                    if (node.attributes) {{
+                        for (const [k, v] of Object.entries(node.attributes)) {{
+                            if(k!=='type') html += `<div class='row'><span class='key'>${{k.split(':').pop()}}:</span> ${{v}}</div>`;
+                        }}
+                    }}
+                    infoDiv.innerHTML = html;
+                }} else infoDiv.style.display = 'none';
+            }})
+            .onNodeClick(node => {{
+                if (!node) return;
+                isFlying = true;
+                const dist = 150;
+                const distRatio = 1 + dist/Math.hypot(node.x, node.y, node.z);
+                Graph.cameraPosition(
+                    {{ x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }},
+                    node,
+                    2000
+                );
+                setTimeout(() => {{ isFlying = false; }}, 2000);
+            }});
+
+        // [Env]
+        const scene = Graph.scene();
+        const starsGeo = new THREE.BufferGeometry();
+        const pos = new Float32Array(2000 * 3);
+        for(let i=0; i<2000*3; i++) pos[i] = (Math.random()-0.5) * 4000;
+        starsGeo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
+        scene.add(new THREE.Points(starsGeo, new THREE.PointsMaterial({{size:2, color:0xffffff, opacity:0.5, transparent:true}})));
+        scene.add(new THREE.AmbientLight(0x222222));
+        const light = new THREE.DirectionalLight(0xffffff, 1);
+        light.position.set(100, 100, 100);
+        scene.add(light);
+
+        // [Manual Orbit Engine]
+        setInterval(() => {{
+            if (hoverNode || isFlying) return;
+            const cam = Graph.camera();
+            const controls = Graph.controls();
+            if (!controls) return;
+
+            const target = controls.target;
+            const relX = cam.position.x - target.x;
+            const relZ = cam.position.z - target.z;
+            const r = Math.sqrt(relX*relX + relZ*relZ);
+            let theta = Math.atan2(relZ, relX);
+            
+            theta += 0.0015;
+
+            const newX = target.x + r * Math.cos(theta);
+            const newZ = target.z + r * Math.sin(theta);
+
+            Graph.cameraPosition(
+                {{ x: newX, y: cam.position.y, z: newZ }},
+                target,
+                0
+            );
+        }}, 15);
+
+    </script>
+</body>
+</html>
+"""
+        with open(output_path, "w", encoding="utf-8") as f:
+            f.write(html_content)

{sayou_visualizer-0.0.9.dist-info → sayou_visualizer-0.0.11.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: sayou-visualizer
-Version: 0.0.9
+Version: 0.0.11
 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.9.dist-info → sayou_visualizer-0.0.11.dist-info}/RECORD

@@ -1,13 +1,14 @@
 sayou/visualizer/__init__.py,sha256=DRv-5qzP6nal7qXVf7Zl67CQx3Kf3mTZhlLKl-vs_G0,82
-sayou/visualizer/pipeline.py,sha256=HCNxVEVO_XfhCIX5ZmTlab36EDmSx22J_916enSVGL8,3727
+sayou/visualizer/pipeline.py,sha256=LduZlz5jGqTfzRRuv3W-IFfj1VxjjTkXAwXL6zs-yQE,4116
 sayou/visualizer/core/exceptions.py,sha256=Mk5UtIfim7i9688c4qAKP7kB1GpLPM29t94HbQM9fhw,99
 sayou/visualizer/core/schemas.py,sha256=qn44BINevFZF_ALBhh20DS4GyMo5HV3UzqY4UTh_p3A,381
 sayou/visualizer/interfaces/base_renderer.py,sha256=orllTXlqM4-wDemOWbcZX8zF708KOdWFgoqZh8MeAzE,760
-sayou/visualizer/renderer/kg_renderer.py,sha256=78co3QBwmEjcLGiDkEt1s_wPYlCa1tIQQ7-6uPjhK20,11573
+sayou/visualizer/renderer/analytic_kg_renderer.py,sha256=I5ccv7JUCGvPE79c2d1O-XuYwrK3fxk9qj4Xzyx_WLg,16404
 sayou/visualizer/renderer/pyvis_renderer.py,sha256=2HKv_qAKKNHMKLwC7xoIn3EZ5oFLpgds7LPgK4EeXfA,2408
+sayou/visualizer/renderer/showcase_kg_renderer.py,sha256=_K9GjAPuKzA-BKbJYDK0Ku0U8tThusuqgwAwhdtaprU,11643
 sayou/visualizer/tracer/graph_tracer.py,sha256=j0dqd0_67ZnQCNjn5siKHXXsXasWim9olYqUQA2jKxk,3638
 sayou/visualizer/tracer/rich_tracer.py,sha256=ik7J1P7AMTN47lkjMLE7iTlRuksUpwSKluvWdpY6kdQ,2406
 sayou/visualizer/tracer/websocket_tracer.py,sha256=OZLg4jTfuxp6IwDacmAACKZ_0FirZFhyLysqh9QyrJA,1626
-sayou_visualizer-0.0.9.dist-info/METADATA,sha256=ygbD1biZ6YTS54Q4C_UwWoonAZHuXShezzgmMLL0vv0,16680
-sayou_visualizer-0.0.9.dist-info/WHEEL,sha256=WLgqFyCfm_KASv4WHyYy0P3pM_m7J5L9k2skdKLirC8,87
-sayou_visualizer-0.0.9.dist-info/RECORD,,
+sayou_visualizer-0.0.11.dist-info/METADATA,sha256=0wlBaqJxYAqGoTx4B7vRusfBxQIwSKJFnrt36ad74bw,16681
+sayou_visualizer-0.0.11.dist-info/WHEEL,sha256=WLgqFyCfm_KASv4WHyYy0P3pM_m7J5L9k2skdKLirC8,87
+sayou_visualizer-0.0.11.dist-info/RECORD,,

sayou/visualizer/renderer/kg_renderer.py

@@ -1,300 +0,0 @@
-import json
-import os
-from collections import defaultdict
-
-from sayou.core.base_component import BaseComponent
-
-
-class KGRenderer(BaseComponent):
-    """
-    Renders 3D KG with 'Virtual Hierarchy'.
-    Injects missing Parent Nodes based on metadata and applies Semantic Styling.
-    """
-
-    component_name = "KGRenderer"
-
-    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}")