sayou-visualizer 0.0.11__tar.gz → 0.1.0__tar.gz

{sayou_visualizer-0.0.11 → sayou_visualizer-0.1.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: sayou-visualizer
-Version: 0.0.11
+Version: 0.1.0
 Summary: Visualizer components for the Sayou Data Platform
 Project-URL: Homepage, https://www.sayouzone.com/
 Project-URL: Documentation, https://sayouzone.github.io/sayou-fabric/
@@ -209,15 +209,15 @@ License:                                  Apache License
            limitations under the License.
 Classifier: License :: OSI Approved :: Apache Software License
 Classifier: Operating System :: OS Independent
-Classifier: Programming Language :: Python :: 3.9
-Classifier: Programming Language :: Python :: 3.10
 Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Classifier: Programming Language :: Python :: 3.13
 Classifier: Topic :: Software Development :: Libraries :: Application Frameworks
-Requires-Python: >=3.9
+Requires-Python: >=3.11
 Requires-Dist: networkx==3.2.1
 Requires-Dist: pyvis==0.3.2
 Requires-Dist: rich==14.2.0
-Requires-Dist: sayou-core~=0.3.0
+Requires-Dist: sayou-core~=0.4.0
 Requires-Dist: websocket-client==1.9.0
 Description-Content-Type: text/markdown
 
@@ -228,67 +228,123 @@ Description-Content-Type: text/markdown
 
 **The Interactive Observability Engine for Sayou Fabric.**
 
-`sayou-visualizer` provides a transparent layer to monitor and visualize the execution flow of Sayou components. By attaching to any pipeline, it transforms invisible execution logs into intuitive, interactive **HTML Knowledge Graphs**.
+`sayou-visualizer` provides transparency to the "Black Box" of data pipelines. It transforms invisible execution logs and complex graph data structures into intuitive, interactive **3D Holographic Knowledge Graphs**.
 
-It separates the logic of **Observation** (Tracer) from **Presentation** (Renderer), allowing you to debug complex pipelines and visualize data lineage without modifying your core logic.
+It serves two distinct purposes: **Pipeline Telemetry** (Debugging flow) and **Knowledge Rendering** (Showcasing data topology).
 
-## 💡 Core Philosophy
+---
 
-**"Trace the Process, Render the Insight."**
+## 1. Architecture & Role
 
-Observability should not be an afterthought. We decouple the responsibility into two roles:
+The Visualizer operates as a separate layer that can attach to a running pipeline (Tracer) or read static data (Renderer) to generate HTML artifacts.
 
-1. **Tracer (Recorder)**: The "Camera". It silently observes events (`on_start`, `on_finish`) from the pipeline via the Callback system and builds an internal graph structure.
+```mermaid
+graph LR
+    Data[Pipeline / JSON] --> Pipeline[Visualizer Pipeline]
+    
+    subgraph Renderers
+        Tracer[DAG Tracer]
+        Analyst[Analyst KG View]
+        Showcase[Showcase 3D View]
+    end
+    
+    Pipeline --> Renderers
+    Renderers --> HTML[Interactive HTML]
+```
+
+### 1.1. Core Features
+* **Non-Intrusive Monitoring**: Attaches to any Sayou pipeline via the callback system to visualize execution flow without modifying code.
+* **Deterministic Layout**: Uses physics-based rendering (Cytoscape/Force-Graph) to reveal clusters and outliers in your data.
+* **Interactive Inspection**: Click on nodes to inspect raw attributes, source code, or relationships in real-time.
+
+---
 
-2. **Renderer (Painter)**: The "Canvas". It takes the recorded graph and generates human-readable artifacts (e.g., Interactive HTML, Static Images).
+## 2. Available Strategies
 
-This separation enables a Non-intrusive Monitoring experience, where visualization is just a plug-and-play feature.
+`sayou-visualizer` offers specialized views depending on who is looking at the data.
 
-## 📦 Installation
+| Strategy Key | Target Audience | Description |
+| :--- | :--- | :--- |
+| **`tracer`** | Data Engineer | Visualizes the **Pipeline Execution Flow** (DAG). Shows which components triggered which tasks. |
+| **`analyst`** | QA / Researcher | **2D Analytic View**. Focuses on strict schema validation, attribute inspection, and debugging specific relationships. |
+| **`showcase`** | Stakeholder | **3D Holographic View**. A visually stunning, high-performance renderer for presenting the scale and topology of the Knowledge Graph. |
+
+---
+
+## 3. Installation
 
 ```bash
 pip install sayou-visualizer
 ```
 
-## ⚡ Quick Start
+---
+
+## 4. Usage
 
-The `VisualizerPipeline` acts as a facade, easily attaching to other pipelines to generate reports.
+The `VisualizerPipeline` is the entry point. You can use it to render existing graph files or attach it to live pipelines.
+
+### Case A: Rendering a Knowledge Graph (3D Showcase)
+
+Visualizes the output of `sayou-assembler` as an interactive 3D galaxy.
 
 ```python
-from sayou.connector.pipeline import ConnectorPipeline
-from sayou.visualizer.pipeline import VisualizerPipeline
+from sayou.visualizer import VisualizerPipeline
+
+viz = VisualizerPipeline()
+
+kg_file_path = "./output/graph_data.json"
+
+viz.process(
+    source=kg_file_path,
+    destination="./output/report_showcase.html",
+    strategy="showcase"
+)
 
-def main():
-    connector = ConnectorPipeline()
+print("Report generated. Open 'report_showcase.html' in your browser.")
+```
+
+### Case B: Debugging Graph Data (2D Analyst)
+
+Generates a detailed 2D view for inspecting node attributes and edge types.
+
+```python
+viz.process(
+    source=kg_file_path,
+    destination="./output/report_analyst.html",
+    strategy="analyst"
+)
+```
+
+### Case C: Pipeline Tracing (Live Monitoring)
+
+Attaches to a running Connector pipeline to visualize the crawling process.
+
+```python
+from sayou.connector import ConnectorPipeline
+from sayou.visualizer import VisualizerPipeline
 
-    viz = VisualizerPipeline()
-    viz.attach_to(connector)
+connector = ConnectorPipeline()
 
-    print("🚀 Running Pipeline...")
-    iterator = connector.run("http://example.com")
-    for packet in iterator:
-        print(f"Processed: {packet.task.uri}")
+viz = VisualizerPipeline()
+viz.attach_to(connector)
 
-    print("🎨 Generating Report...")
-    viz.report("examples/pipeline_flow.html")
+connector.process(source="https://news.daum.net/tech", strategy="web")
 
-if __name__ == "__main__":
-    main()
+viz.report("pipeline_trace.html")
 ```
 
-## 🔑 Key Concepts
+---
 
-### Tracers
-* **`GraphTracer`**: Listens to pipeline events and constructs a `NetworkX` Directed Acyclic Graph (DAG) in real-time. It distinguishes between Components (Generator/Fetcher) and Data (Tasks).
+## 5. Configuration Keys
 
-### Renderers
-* **`PyVisRenderer`**: Converts the internal graph into an interactive HTML file powered by `Vis.js`. Features physics-based layout and modern dark UI.
-* **`RichRenderer`** (_Planned_): Displays a tree-structure summary directly in the console using the `Rich` library.
+Customize the visual appearance via the `config` dictionary.
 
-## 🤝 Contributing
+* **`showcase`**: `node_color_by` (e.g., class), `particle_speed`, `background_color`.
+* **`analyst`**: `layout_algorithm` (dagre/concentric), `show_attributes` (bool).
+* **`tracer`**: `include_data_payload` (bool), `max_events`.
 
-We welcome contributions for new Renderers (e.g., `MatplotlibRenderer`, `StreamlitRenderer`) or specialized Tracers for new components!
+---
 
-## 📜 License
+## 6. License
 
-Apache 2.0 License © 2025 Sayouzone
+Apache 2.0 License © 2026 **Sayouzone**

sayou_visualizer-0.1.0/README.md

@@ -0,0 +1,127 @@
+# sayou-visualizer
+
+[![PyPI version](https://img.shields.io/pypi/v/sayou-visualizer.svg?color=blue)](https://pypi.org/project/sayou-visualizer/)
+[![License](https://img.shields.io/badge/License-Apache%202.0-red.svg)](https://www.apache.org/licenses/LICENSE-2.0)
+
+**The Interactive Observability Engine for Sayou Fabric.**
+
+`sayou-visualizer` provides transparency to the "Black Box" of data pipelines. It transforms invisible execution logs and complex graph data structures into intuitive, interactive **3D Holographic Knowledge Graphs**.
+
+It serves two distinct purposes: **Pipeline Telemetry** (Debugging flow) and **Knowledge Rendering** (Showcasing data topology).
+
+---
+
+## 1. Architecture & Role
+
+The Visualizer operates as a separate layer that can attach to a running pipeline (Tracer) or read static data (Renderer) to generate HTML artifacts.
+
+```mermaid
+graph LR
+    Data[Pipeline / JSON] --> Pipeline[Visualizer Pipeline]
+    
+    subgraph Renderers
+        Tracer[DAG Tracer]
+        Analyst[Analyst KG View]
+        Showcase[Showcase 3D View]
+    end
+    
+    Pipeline --> Renderers
+    Renderers --> HTML[Interactive HTML]
+```
+
+### 1.1. Core Features
+* **Non-Intrusive Monitoring**: Attaches to any Sayou pipeline via the callback system to visualize execution flow without modifying code.
+* **Deterministic Layout**: Uses physics-based rendering (Cytoscape/Force-Graph) to reveal clusters and outliers in your data.
+* **Interactive Inspection**: Click on nodes to inspect raw attributes, source code, or relationships in real-time.
+
+---
+
+## 2. Available Strategies
+
+`sayou-visualizer` offers specialized views depending on who is looking at the data.
+
+| Strategy Key | Target Audience | Description |
+| :--- | :--- | :--- |
+| **`tracer`** | Data Engineer | Visualizes the **Pipeline Execution Flow** (DAG). Shows which components triggered which tasks. |
+| **`analyst`** | QA / Researcher | **2D Analytic View**. Focuses on strict schema validation, attribute inspection, and debugging specific relationships. |
+| **`showcase`** | Stakeholder | **3D Holographic View**. A visually stunning, high-performance renderer for presenting the scale and topology of the Knowledge Graph. |
+
+---
+
+## 3. Installation
+
+```bash
+pip install sayou-visualizer
+```
+
+---
+
+## 4. Usage
+
+The `VisualizerPipeline` is the entry point. You can use it to render existing graph files or attach it to live pipelines.
+
+### Case A: Rendering a Knowledge Graph (3D Showcase)
+
+Visualizes the output of `sayou-assembler` as an interactive 3D galaxy.
+
+```python
+from sayou.visualizer import VisualizerPipeline
+
+viz = VisualizerPipeline()
+
+kg_file_path = "./output/graph_data.json"
+
+viz.process(
+    source=kg_file_path,
+    destination="./output/report_showcase.html",
+    strategy="showcase"
+)
+
+print("Report generated. Open 'report_showcase.html' in your browser.")
+```
+
+### Case B: Debugging Graph Data (2D Analyst)
+
+Generates a detailed 2D view for inspecting node attributes and edge types.
+
+```python
+viz.process(
+    source=kg_file_path,
+    destination="./output/report_analyst.html",
+    strategy="analyst"
+)
+```
+
+### Case C: Pipeline Tracing (Live Monitoring)
+
+Attaches to a running Connector pipeline to visualize the crawling process.
+
+```python
+from sayou.connector import ConnectorPipeline
+from sayou.visualizer import VisualizerPipeline
+
+connector = ConnectorPipeline()
+
+viz = VisualizerPipeline()
+viz.attach_to(connector)
+
+connector.process(source="https://news.daum.net/tech", strategy="web")
+
+viz.report("pipeline_trace.html")
+```
+
+---
+
+## 5. Configuration Keys
+
+Customize the visual appearance via the `config` dictionary.
+
+* **`showcase`**: `node_color_by` (e.g., class), `particle_speed`, `background_color`.
+* **`analyst`**: `layout_algorithm` (dagre/concentric), `show_attributes` (bool).
+* **`tracer`**: `include_data_payload` (bool), `max_events`.
+
+---
+
+## 6. License
+
+Apache 2.0 License © 2026 **Sayouzone**

{sayou_visualizer-0.0.11 → sayou_visualizer-0.1.0}/pyproject.toml

@@ -7,24 +7,24 @@ build-backend = "hatchling.build"
 # -----------------
 [project]
 name = "sayou-visualizer"
-version = "0.0.11"
+version = "0.1.0"
 authors = [
     { name = "Sayouzone", email = "contact@sayouzone.com" },
 ]
 description = "Visualizer components for the Sayou Data Platform"
 readme = "README.md"
 license = { file = "../../LICENSE" }
-requires-python = ">=3.9"
+requires-python = ">=3.11"
 classifiers = [
-    "Programming Language :: Python :: 3.9",
-    "Programming Language :: Python :: 3.10",
     "Programming Language :: Python :: 3.11",
+    "Programming Language :: Python :: 3.12",
+    "Programming Language :: Python :: 3.13",
     "License :: OSI Approved :: Apache Software License",
     "Operating System :: OS Independent",
     "Topic :: Software Development :: Libraries :: Application Frameworks",
 ]
 dependencies = [
-    "sayou-core ~= 0.3.0",
+    "sayou-core ~= 0.4.0",
     "networkx == 3.2.1",
     "pyvis == 0.3.2",
     "rich == 14.2.0",

sayou_visualizer-0.1.0/src/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-0.0.11 → sayou_visualizer-0.1.0}/src/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-0.0.11 → sayou_visualizer-0.1.0}/src/sayou/visualizer/renderer/showcase_kg_renderer.py

@@ -1,7 +1,10 @@
 import json
 import os
+
 from sayou.core.base_component import BaseComponent
 
+from ..core.styles import HIDDEN_ATTR_PREFIXES, SHOWCASE_STYLE_MAP
+
 
 class ShowcaseKGRenderer(BaseComponent):
     """
@@ -15,6 +18,7 @@ class ShowcaseKGRenderer(BaseComponent):
 
     def render(self, json_path: str, output_path: str = "sayou_showcase_3d.html"):
         if not os.path.exists(json_path):
+            self._log(f"❌ File not found: {json_path}", level="error")
             return
 
         with open(json_path, "r", encoding="utf-8") as f:
@@ -24,64 +28,44 @@ class ShowcaseKGRenderer(BaseComponent):
         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", {})
-            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
+            n_cls = node.get("node_class", "unknown")
+
+            style = SHOWCASE_STYLE_MAP.get(n_cls, SHOWCASE_STYLE_MAP["default"])
+
+            val = attrs.get("val", style["val"])
+
+            label = node.get("friendly_name") or attrs.get("label") or node_id
+
+            clean_attrs = self._clean_attributes(attrs)
 
             nodes.append(
                 {
                     "id": node_id,
                     "label": label,
-                    "group": group,
-                    "color": color,
+                    "group": style["group"],
+                    "color": style["color"],
                     "val": val,
                     "attributes": clean_attrs,
                 }
             )
 
-        # [2] Edge data processing
+        # 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 = "import" in e_type or "calls" in e_type
-
+                is_import = any(
+                    k in e_type for k in ["import", "calls", "next", "contains"]
+                )
                 links.append(
                     {
                         "source": src,
@@ -95,6 +79,19 @@ class ShowcaseKGRenderer(BaseComponent):
         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)
 

sayou_visualizer-0.0.11/README.md

@@ -1,71 +0,0 @@
-# sayou-visualizer
-
-[![PyPI version](https://img.shields.io/pypi/v/sayou-visualizer.svg?color=blue)](https://pypi.org/project/sayou-visualizer/)
-[![License](https://img.shields.io/badge/License-Apache%202.0-red.svg)](https://www.apache.org/licenses/LICENSE-2.0)
-
-**The Interactive Observability Engine for Sayou Fabric.**
-
-`sayou-visualizer` provides a transparent layer to monitor and visualize the execution flow of Sayou components. By attaching to any pipeline, it transforms invisible execution logs into intuitive, interactive **HTML Knowledge Graphs**.
-
-It separates the logic of **Observation** (Tracer) from **Presentation** (Renderer), allowing you to debug complex pipelines and visualize data lineage without modifying your core logic.
-
-## 💡 Core Philosophy
-
-**"Trace the Process, Render the Insight."**
-
-Observability should not be an afterthought. We decouple the responsibility into two roles:
-
-1. **Tracer (Recorder)**: The "Camera". It silently observes events (`on_start`, `on_finish`) from the pipeline via the Callback system and builds an internal graph structure.
-
-2. **Renderer (Painter)**: The "Canvas". It takes the recorded graph and generates human-readable artifacts (e.g., Interactive HTML, Static Images).
-
-This separation enables a Non-intrusive Monitoring experience, where visualization is just a plug-and-play feature.
-
-## 📦 Installation
-
-```bash
-pip install sayou-visualizer
-```
-
-## ⚡ Quick Start
-
-The `VisualizerPipeline` acts as a facade, easily attaching to other pipelines to generate reports.
-
-```python
-from sayou.connector.pipeline import ConnectorPipeline
-from sayou.visualizer.pipeline import VisualizerPipeline
-
-def main():
-    connector = ConnectorPipeline()
-
-    viz = VisualizerPipeline()
-    viz.attach_to(connector)
-
-    print("🚀 Running Pipeline...")
-    iterator = connector.run("http://example.com")
-    for packet in iterator:
-        print(f"Processed: {packet.task.uri}")
-
-    print("🎨 Generating Report...")
-    viz.report("examples/pipeline_flow.html")
-
-if __name__ == "__main__":
-    main()
-```
-
-## 🔑 Key Concepts
-
-### Tracers
-* **`GraphTracer`**: Listens to pipeline events and constructs a `NetworkX` Directed Acyclic Graph (DAG) in real-time. It distinguishes between Components (Generator/Fetcher) and Data (Tasks).
-
-### Renderers
-* **`PyVisRenderer`**: Converts the internal graph into an interactive HTML file powered by `Vis.js`. Features physics-based layout and modern dark UI.
-* **`RichRenderer`** (_Planned_): Displays a tree-structure summary directly in the console using the `Rich` library.
-
-## 🤝 Contributing
-
-We welcome contributions for new Renderers (e.g., `MatplotlibRenderer`, `StreamlitRenderer`) or specialized Tracers for new components!
-
-## 📜 License
-
-Apache 2.0 License © 2025 Sayouzone

{sayou_visualizer-0.0.11 → sayou_visualizer-0.1.0}/src/sayou/visualizer/pipeline.py

@@ -1,8 +1,8 @@
 from sayou.core.base_component import BaseComponent
 
 from .renderer.analytic_kg_renderer import AnalyticKGRenderer
-from .renderer.showcase_kg_renderer import ShowcaseKGRenderer
 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