PyPI - pyegeria - Versions diffs - 5.3.4.4.dev6__tar.gz → 5.3.4.4.dev8__tar.gz - Mend

Files changed (521) hide show

{pyegeria-5.3.4.4.dev6 → pyegeria-5.3.4.4.dev8}/pyegeria/mermaid_utilities.py RENAMED Viewed

@@ -10,7 +10,7 @@ A running Egeria environment is needed to run these functions.
 These functions have been tested in a Jupyter notebook - but may work in other environments.
 """
+import html
 import os
 import time
@@ -232,6 +232,10 @@ def construct_mermaid_html(mermaid_str: str) -> str:
     title_label, guid, mermaid_code = parse_mermaid_code(mermaid_str)
     graph_id = title_label.replace(" ", "_")
+    escaped_header = html.escape(title_label) if title_label else ""  # Sanitize the header safely
+    header_html = f"<h2 class='diagram-header'>{escaped_header}</h2>\nGUID: {guid}" if title_label else ""
     # Construct the HTML content with Mermaid.js initialization and zoom/pan support
     mermaid_html = f"""
     <!DOCTYPE html>
@@ -239,55 +243,124 @@ def construct_mermaid_html(mermaid_str: str) -> str:
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Interactive Mermaid Graph</title>
-        <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+        <title>Mermaid Diagram with Centered Pan and Zoom</title>
+        <!-- Load Mermaid.js -->
+        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+        <style>
+            body {{
+                font-family: Arial, sans-serif;
+                background-color: #f4f4f4;
+                margin: 0;
+                padding: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100vh;
+            }}
+            .diagram-container {{
+                width: 90%;
+                max-width: 800px;
+                padding: 20px;
+                border: 1px solid #ddd;
+                border-radius: 12px;
+                background-color: white;
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+                text-align: center;
+                position: relative;
+            }}
+            .diagram-header {{
+                margin-bottom: 20px;
+                font-size: 1.8rem;
+                font-weight: bold;
+                color: #007acc;
+            }}
+            .pan-zoom-container {{
+                position: relative;
+                width: 100%;
+                height: 500px;
+                overflow: hidden;
+                border: 1px solid #ccc;
+                background-color: #f9f9f9;
+                cursor: grab;
+            }}
+            .pan-zoom-content {{
+                position: absolute;
+                transform-origin: center;
+                cursor: grab;
+            }}
+            .pan-zoom-content:active {{
+                cursor: grabbing;
+            }}
+        </style>
+    </head>
+    <body>
+        <div class="diagram-container">
+            {header_html}
+            <div class="pan-zoom-container">
+                <div id="{graph_id}" class="mermaid pan-zoom-content">
+                    {mermaid_code}
+                </div>
+            </div>
+        </div>
         <script>
-            // Initialize Mermaid.js
+            // Initialize Mermaid.js and make the graph pan/zoom enabled
             document.addEventListener("DOMContentLoaded", function() {{
-                const graphContainer = document.getElementById("{graph_id}");
-                // Inject Mermaid code into the container
-                graphContainer.innerHTML = `{mermaid_code}`;
-                // Manually render the Mermaid graph
-                window.mermaid?.run({{ querySelector: "#{graph_id}" }});
-            }});
+                // Initialize Mermaid.js
+                console.log("Initializing Mermaid...");
+                mermaid.initialize({{ startOnLoad: true }});
-            // Enable panning and zooming
-            document.addEventListener("DOMContentLoaded", function() {{
+                // After Mermaid.js renders the diagram, initialize pan/zoom functionality
                 const container = document.querySelector('.pan-zoom-container');
                 const content = document.querySelector('.pan-zoom-content');
-                let scale = 1;
-                let panX = 0;
-                let panY = 0;
+                let scale = 1; // Zoom level
+                let panX = 0;  // X-axis pan
+                let panY = 0;  // Y-axis pan
                 let isDragging = false;
                 let startX, startY;
-                // Mouse wheel zoom with cursor as focal point
+                // Centering logic for zoom behavior
+                const zoomToCenter = (event, deltaZoom) => {{
+                    const rect = content.getBoundingClientRect();
+                    // Get the center point of the container
+                    const containerCenterX = container.clientWidth / 2;
+                    const containerCenterY = container.clientHeight / 2;
+                    // Calculate offset of the content relative to the container center
+                    const offsetX = containerCenterX - (rect.left + rect.width / 2);
+                    const offsetY = containerCenterY - (rect.top + rect.height / 2);
+                    // Adjust pan values based on the zoom delta
+                    panX += offsetX * deltaZoom;
+                    panY += offsetY * deltaZoom;
+                }};
+                // Mouse wheel zoom functionality
                 container.addEventListener('wheel', function(event) {{
                     event.preventDefault();
                     const zoomSpeed = 0.1;
-                    const zoomDelta = event.deltaY > 0 ? -zoomSpeed : zoomSpeed;
                     const previousScale = scale;
-                    // Clamp zoom level between 50% and 400%
-                    scale = Math.min(Math.max(0.5, scale + zoomDelta), 4);
+                    // Increase or decrease scale depending on the scroll direction
+                    if (event.deltaY < 0) {{
+                        scale = Math.min(scale + zoomSpeed, 4); // Limit zoom-in
+                    }} else {{
+                        scale = Math.max(scale - zoomSpeed, 0.5); // Limit zoom-out
+                    }}
-                    // Calculate the focal point for zoom using mouse position
-                    const rect = content.getBoundingClientRect();
-                    const offsetX = event.clientX - rect.left;
-                    const offsetY = event.clientY - rect.top;
+                    // Compute the zoom delta
+                    const deltaZoom = scale / previousScale - 1;
-                    // Adjust pan values to focus zoom on cursor
-                    panX -= (offsetX / previousScale - offsetX / scale);
-                    panY -= (offsetY / previousScale - offsetY / scale);
+                    // Center the zoom on the diagram
+                    zoomToCenter(event, deltaZoom);
                     // Apply transformations
                     content.style.transform = `translate(${{panX}}px, ${{panY}}px) scale(${{scale}})`;
                 }});
-                // Handle panning with mouse drag
+                // Drag-to-pan functionality
                 container.addEventListener('mousedown', function(event) {{
                     isDragging = true;
                     startX = event.clientX - panX;
@@ -313,44 +386,17 @@ def construct_mermaid_html(mermaid_str: str) -> str:
                     isDragging = false;
                     container.style.cursor = "grab";
                 }});
+                console.log("Pan and zoom enabled");
             }});
         </script>
-        <style>
-            body {{
-                margin: 0;
-                padding: 0;
-                font-family: Arial, sans-serif;
-            }}
-            .pan-zoom-container {{
-                overflow: hidden;
-                position: relative;
-                width: 100%;
-                height: 100vh;
-                background-color: #f4f4f4;
-            }}
-            .pan-zoom-content {{
-                display: inline-block;
-                transform-origin: 0 0;
-                cursor: grab;
-            }}
-            .pan-zoom-content:active {{
-                cursor: grabbing;
-            }}
-        </style>
-    </head>
-    <body>
-        <title>{title_label}</title>
-        <h3>{title_label}</h3>
-        GUID : {guid}
-        <div class="pan-zoom-container">
-            <div id="{graph_id}" class="pan-zoom-content mermaid">
-                <!-- Placeholder for Mermaid.js -->
-            </div>
-        </div>
     </body>
     </html>
     """
     return mermaid_html

@@ -1,6 +1,6 @@
 Metadata-Version: 2.3
 Name: pyegeria
-Version: 5.3.4.4.dev6
+Version: 5.3.4.4.dev8
 Summary: A python client for Egeria
 License: Apache 2.0
 Keywords: egeria,metadata,governance

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "pyegeria"
-version = "5.3.4.4-dev6"
+version = "5.3.4.4-dev8"
 license = 'Apache 2.0'
 authors = ["Dan Wolfson <dan.wolfson@pdr-associates.com>"]

pyegeria 5.3.4.4.dev6__tar.gz → 5.3.4.4.dev8__tar.gz

pyegeria 5.3.4.4.dev6tar.gz → 5.3.4.4.dev8tar.gz