sayou-visualizer 0.0.10__py3-none-any.whl → 0.0.12__py3-none-any.whl

sayou/visualizer/core/styles.py

@@ -0,0 +1,223 @@
+from sayou.core.ontology import SayouClass
+
+HIDDEN_ATTR_PREFIXES = ["sayou:", "meta:", "schema:"]
+
+# =========================================================
+# 1. 3D Showcase Styles (Original Design Restored)
+# =========================================================
+SHOWCASE_STYLE_MAP = {
+    "default": {"group": "Chunk", "color": "#4a69bd", "val": 3},
+    # [Original Design Colors]
+    SayouClass.FILE: {"group": "Document", "color": "#00d2d3", "val": 20},  # Cyan
+    SayouClass.CLASS: {"group": "Header", "color": "#ff6b81", "val": 12},  # Pink
+    SayouClass.METHOD: {"group": "Code", "color": "#feca57", "val": 6},  # Gold
+    SayouClass.FUNCTION: {"group": "Code", "color": "#feca57", "val": 6},  # Gold
+    SayouClass.LIBRARY: {"group": "Library", "color": "#2ed573", "val": 10},  # Green
+    # [New] YouTube Domain (Compatible Theme)
+    SayouClass.VIDEO: {"group": "Video", "color": "#e84118", "val": 40},  # Deep Red
+    SayouClass.VIDEO_SEGMENT: {
+        "group": "Segment",
+        "color": "#dcdde1",
+        "val": 4,
+    },  # Gray
+}
+
+# 동적 크기 계산 규칙
+DYNAMIC_SIZING_RULES = {
+    SayouClass.VIDEO_SEGMENT: {
+        "attr_start": "sayou:startTime",
+        "attr_end": "sayou:endTime",
+        "base_val": 4,
+        "scale_factor": 0.5,
+    }
+}
+
+# =========================================================
+# 2. 2D Analyst Styles (Original Design + Interactions Restored)
+# =========================================================
+ANALYST_TYPE_MAPPING = {
+    SayouClass.FILE: "file",
+    SayouClass.CLASS: "class",
+    SayouClass.METHOD: "method",
+    SayouClass.FUNCTION: "function",
+    SayouClass.LIBRARY: "library",
+    SayouClass.CODE_BLOCK: "code_block",
+    SayouClass.VIDEO: "video",
+    SayouClass.VIDEO_SEGMENT: "segment",
+}
+
+ANALYST_STYLE_SHEET = [
+    # [Global]
+    {
+        "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",
+        },
+    },
+    # [Original Node Shapes/Colors]
+    {
+        "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",
+        },
+    },
+    {
+        "selector": "node[type='class']",
+        "style": {
+            "shape": "diamond",
+            "background-color": "#8e44ad",
+            "width": 40,
+            "height": 40,
+        },
+    },
+    {
+        "selector": "node[type='method'], node[type='function']",
+        "style": {
+            "shape": "ellipse",
+            "background-color": "#e67e22",
+            "width": 25,
+            "height": 25,
+        },
+    },
+    {
+        "selector": "node[type='code_block']",
+        "style": {
+            "shape": "round-rectangle",
+            "background-color": "#7f8c8d",
+            "width": 15,
+            "height": 15,
+            "label": "",
+        },
+    },
+    {
+        "selector": "node[type='library']",
+        "style": {
+            "shape": "hexagon",
+            "background-color": "#16a085",
+            "width": 50,
+            "height": 50,
+        },
+    },
+    # [New YouTube Nodes]
+    {
+        "selector": "node[type='video']",
+        "style": {
+            "shape": "rectangle",
+            "background-color": "#c0392b",
+            "width": 80,
+            "height": 80,
+            "border-width": 4,
+            "border-color": "#e74c3c",
+        },
+    },
+    {
+        "selector": "node[type='segment']",
+        "style": {
+            "shape": "round-rectangle",
+            "background-color": "#bdc3c7",
+            "width": 40,
+            "height": 20,
+            "color": "#2c3e50",
+            "font-size": "8px",
+        },
+    },
+    # [Original Edges]
+    {
+        "selector": "edge",
+        "style": {
+            "width": 1,
+            "curve-style": "bezier",
+            "opacity": 0.6,
+            "arrow-scale": 1,
+        },
+    },
+    {
+        "selector": "edge[edgeType='sayou:contains']",
+        "style": {
+            "line-color": "#7f8c8d",
+            "target-arrow-shape": "circle",
+            "line-style": "dashed",
+            "width": 1.5,
+            "opacity": 0.7,
+        },
+    },
+    {
+        "selector": "edge[edgeType='sayou:imports']",
+        "style": {
+            "line-color": "#00d2d3",
+            "target-arrow-shape": "triangle",
+            "line-style": "dashed",
+            "width": 2,
+            "opacity": 0.9,
+        },
+    },
+    {
+        "selector": "edge[edgeType='sayou:inherits']",
+        "style": {
+            "line-color": "#ff6b6b",
+            "target-arrow-shape": "triangle",
+            "width": 3,
+        },
+    },
+    {
+        "selector": "edge[edgeType='sayou:next']",
+        "style": {
+            "line-color": "#f39c12",
+            "target-arrow-shape": "triangle",
+            "width": 2,
+        },
+    },
+    # =========================================================
+    # [CRITICAL FIX] Restored Interaction Styles
+    # =========================================================
+    {
+        "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"},
+    },
+]

sayou/visualizer/pipeline.py

@@ -1,7 +1,8 @@
 from sayou.core.base_component import BaseComponent
 
-from .renderer.kg_renderer import KGRenderer
+from .renderer.analytic_kg_renderer import AnalyticKGRenderer
 from .renderer.pyvis_renderer import PyVisRenderer
+from .renderer.showcase_kg_renderer import ShowcaseKGRenderer
 from .tracer.graph_tracer import GraphTracer
 from .tracer.rich_tracer import RichConsoleTracer
 from .tracer.websocket_tracer import WebSocketTracer
@@ -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

@@ -3,6 +3,8 @@ import os
 
 from sayou.core.base_component import BaseComponent
 
+from ..core.styles import ANALYST_STYLE_SHEET, ANALYST_TYPE_MAPPING
+
 
 class AnalyticKGRenderer(BaseComponent):
     """
@@ -15,158 +17,7 @@ class AnalyticKGRenderer(BaseComponent):
 
     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"},
-        },
-    ]
+    STYLE_SHEET = ANALYST_STYLE_SHEET
 
     def render(self, json_path: str, output_path: str = "sayou_analyst_view.html"):
         if not os.path.exists(json_path):
@@ -177,57 +28,38 @@ class AnalyticKGRenderer(BaseComponent):
 
         elements = []
 
-        # 1. Nodes (No Parents logic)
+        # 1. Nodes Processing
         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", "")
+            n_cls = node.get("node_class", "unknown")
+
+            # [Pure Config Lookup]
+            cy_type = ANALYST_TYPE_MAPPING.get(n_cls, "unknown")
+
+            # [No Logic] Builder가 준 라벨을 그대로 사용
+            label = node.get("friendly_name") or attrs.get("label") or node_id
+
             cy_data = {
                 "id": node_id,
                 "label": label,
                 "type": cy_type,
-                "code": code_text,
+                "code": attrs.get("schema:text", ""),
                 "meta": attrs,
             }
             elements.append({"group": "nodes", "data": cy_data})
 
-        # 2. Edges
+        # 2. Edges Processing
         for edge in raw_data.get("edges", []):
+            e_type = edge.get("type", "relates")
             elements.append(
                 {
                     "group": "edges",
                     "data": {
                         "source": edge.get("source"),
                         "target": edge.get("target"),
-                        "edgeType": edge.get("type", "relates"),
-                        "label": edge.get("type", "").split(":")[-1],
+                        "edgeType": e_type,
+                        "label": e_type.split(":")[-1],
                     },
                 }
             )

sayou/visualizer/renderer/showcase_kg_renderer.py

@@ -1,298 +1,284 @@
 import json
 import os
-from collections import defaultdict
 
 from sayou.core.base_component import BaseComponent
 
+from ..core.styles import HIDDEN_ATTR_PREFIXES, SHOWCASE_STYLE_MAP
+
 
 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.
+    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 = "kg_view_3d.html"):
+    def render(self, json_path: str, output_path: str = "sayou_showcase_3d.html"):
         if not os.path.exists(json_path):
-            self._log(f"Output file not found: {json_path}", level="error")
+            self._log(f"❌ 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 = []
-
+        nodes = []
+        links = []
         existing_ids = set()
 
+        # 1. Nodes Processing
         for node in raw_data.get("nodes", []):
             node_id = node.get("node_id")
+            if not node_id:
+                continue
             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,
-                }
-            )
+            n_cls = node.get("node_class", "unknown")
 
-        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"),
-                }
-            )
+            style = SHOWCASE_STYLE_MAP.get(n_cls, SHOWCASE_STYLE_MAP["default"])
 
-        for source_name, child_ids in nodes_by_source.items():
-            if source_name in existing_ids:
-                continue
+            val = attrs.get("val", style["val"])
 
-            virtual_doc_id = f"VIRTUAL_DOC:{source_name}"
+            label = node.get("friendly_name") or attrs.get("label") or node_id
 
-            final_nodes.append(
+            clean_attrs = self._clean_attributes(attrs)
+
+            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,
+                    "id": node_id,
+                    "label": label,
+                    "group": style["group"],
+                    "color": style["color"],
+                    "val": val,
+                    "attributes": clean_attrs,
                 }
             )
 
-            for child_id in child_ids:
-                final_links.append(
+        # 2. Edges 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 = any(
+                    k in e_type for k in ["import", "calls", "next", "contains"]
+                )
+                links.append(
                     {
-                        "source": virtual_doc_id,
-                        "target": child_id,
-                        "relation": "CONTAINS",
+                        "source": src,
+                        "target": tgt,
+                        "type": e_type,
+                        "is_import": is_import,
                     }
                 )
 
-        graph_data = {"nodes": final_nodes, "links": final_links}
-        self._log(f"Rendering KG with Virtual Hierarchy ({len(final_nodes)} nodes)...")
+        graph_data = {"nodes": nodes, "links": links}
+        self._generate_html(graph_data, output_path)
+        self._log(f"✅ Final Visual Showcase generated at: {output_path}")
+
+    def _clean_attributes(self, attrs):
+        """설정 파일 기반 속성 정제"""
+        clean = {}
+        for k, v in attrs.items():
+            if any(k.startswith(prefix) for prefix in HIDDEN_ATTR_PREFIXES):
+                continue
+            s = str(v)
+            if len(s) > 200:
+                clean[k] = s[:200] + "..."
+            else:
+                clean[k] = v
+        return clean
+
+    def _generate_html(self, graph_data, output_path):
+        json_str = json.dumps(graph_data)
 
-        # ---------------------------------------------------------
-        # [JS Logic] Renderer
-        # ---------------------------------------------------------
         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: #000205; overflow: hidden; }}
+        body {{ margin: 0; background-color: #020202; overflow: hidden; font-family: sans-serif; }}
         #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;
+            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;
         }}
-        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; }}
+        .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>
-    <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 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('#000205')
+            .backgroundColor('#050505')
             .showNavInfo(false)
-            
-            // [Design Logic]
+            .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 geometry, material;
-                
-                // 1. Virtual Document
+                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 size = node.val;
-                    geometry = new THREE.BoxGeometry(size, size, size);
-                    
+                    const s = node.val;
+                    const geometry = new THREE.BoxGeometry(s, s, s);
                     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));
-                    
+                    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;
                 
-                // 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 
+                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());
+                }});
                 
-                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>`;
-                    
+                    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' || k === 'child_count') continue;
-                            let key = k.includes(':') ? k.split(':').pop() : k;
-                            html += `<div class='row'><span class='key'>${{key}}:</span> ${{v}}</div>`;
+                            if(k!=='type') html += `<div class='row'><span class='key'>${{k.split(':').pop()}}:</span> ${{v}}</div>`;
                         }}
                     }}
                     infoDiv.innerHTML = html;
-                }} else {{
-                    infoDiv.style.display = 'none';
-                }}
+                }} 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);
+                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);
             }});
 
-        // [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);
+        // [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);
 
-        // [Physics]
-        Graph.d3Force('charge').strength(-50);
-        Graph.d3Force('link').distance(link => link.relation === "CONTAINS" ? 60 : 30);
+        // [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>
@@ -300,4 +286,3 @@ class ShowcaseKGRenderer(BaseComponent):
 """
         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.dist-info → sayou_visualizer-0.0.12.dist-info}/METADATA

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

@@ -1,14 +1,15 @@
 sayou/visualizer/__init__.py,sha256=DRv-5qzP6nal7qXVf7Zl67CQx3Kf3mTZhlLKl-vs_G0,82
-sayou/visualizer/pipeline.py,sha256=HCNxVEVO_XfhCIX5ZmTlab36EDmSx22J_916enSVGL8,3727
+sayou/visualizer/pipeline.py,sha256=NWeIwQqp6ctP-xnhYEPdRwcLQ0RkYSmGRX-my_898GE,4116
 sayou/visualizer/core/exceptions.py,sha256=Mk5UtIfim7i9688c4qAKP7kB1GpLPM29t94HbQM9fhw,99
 sayou/visualizer/core/schemas.py,sha256=qn44BINevFZF_ALBhh20DS4GyMo5HV3UzqY4UTh_p3A,381
+sayou/visualizer/core/styles.py,sha256=ZyMqzu9Xk-TY1xpkHeGZb0qkElG7MyHyYEpqFWXig2U,6285
 sayou/visualizer/interfaces/base_renderer.py,sha256=orllTXlqM4-wDemOWbcZX8zF708KOdWFgoqZh8MeAzE,760
-sayou/visualizer/renderer/analytic_kg_renderer.py,sha256=I5ccv7JUCGvPE79c2d1O-XuYwrK3fxk9qj4Xzyx_WLg,16404
+sayou/visualizer/renderer/analytic_kg_renderer.py,sha256=5lNhllAe4WLf3-vc_Gg1DEpRbKWGCFBEvAwZGpncRWU,11246
 sayou/visualizer/renderer/pyvis_renderer.py,sha256=2HKv_qAKKNHMKLwC7xoIn3EZ5oFLpgds7LPgK4EeXfA,2408
-sayou/visualizer/renderer/showcase_kg_renderer.py,sha256=vbVWP3XTVOrmybv9ok57dig0PszXM28Fd7cRudonfHw,11803
+sayou/visualizer/renderer/showcase_kg_renderer.py,sha256=P1OoKOsmAJFdP1weWWOD6EIINY_prfB135j5PFQ9a4E,11489
 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.10.dist-info/METADATA,sha256=HOeqPwEwHpHZ29VQ_473xYTYn3ff4RSvg0s-4g1qPUc,16681
-sayou_visualizer-0.0.10.dist-info/WHEEL,sha256=WLgqFyCfm_KASv4WHyYy0P3pM_m7J5L9k2skdKLirC8,87
-sayou_visualizer-0.0.10.dist-info/RECORD,,
+sayou_visualizer-0.0.12.dist-info/METADATA,sha256=l6O1MyvZrMebDZ5OGY9wbEJSVj2B7gUCiz_0wOVzTXA,16681
+sayou_visualizer-0.0.12.dist-info/WHEEL,sha256=WLgqFyCfm_KASv4WHyYy0P3pM_m7J5L9k2skdKLirC8,87
+sayou_visualizer-0.0.12.dist-info/RECORD,,