pyegeria 5.3.4.12__tar.gz → 5.3.4.14__tar.gz

{pyegeria-5.3.4.12 → pyegeria-5.3.4.14}/PKG-INFO

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

{pyegeria-5.3.4.12 → pyegeria-5.3.4.14}/pyegeria/mermaid_utilities.py

@@ -226,139 +226,272 @@ def construct_mermaid_html(mermaid_str: str) -> str:
     graph_id = f"mermaid-graph-{guid}"
     escaped_header = html.escape(title_label) if title_label else ""  # Sanitize the header safely
     escaped_mermaid_code = html.escape(mermaid_code)
+    header_html = f"""
+            <h3 id="{graph_id}-heading" style="margin: 20px 0; font-size: 1.5em; text-align: center;">
+                {escaped_header}
+            </h3>
+            <p id="{graph_id}-subheading" style="margin: 0; padding: 5px; font-size: 1em; text-align: center; color: gray; flex: 0 0 auto;">
+                GUID: {guid}
+            </p>
+            """ if title_label else ""
 
     html_content = f"""
-<style>
-    /* Style for the diagram container */
-    .diagram-container {{
-        position: relative;
-        width: 90%; /* Adjust the diagram container width */
-        height: 500px; /* Set a fixed height for the container */
-        margin: 0 auto;
-        border: 1px solid #ccc; /* Optional border for visualization */
-        overflow: hidden; /* Prevent content overflow outside the container */
-    }}
-
-    /* Style for zoom controls */
-    .svg-pan-zoom_controls {{
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-    }}
-    .svg-pan-zoom_controls button {{
-        background-color: #007bff;
-        color: white;
-        border: none;
-        padding: 5px 10px;
-        border-radius: 3px;
-        cursor: pointer;
-        font-size: 14px;
-    }}
-    .svg-pan-zoom_controls button:hover {{
-        background-color: #0056b3;
-    }}
-</style>
-
-<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
-<script>
-    document.addEventListener("DOMContentLoaded", () => {{
-        // Define graph ID dynamically passed via Python
-        const graph_id = "{graph_id}";
-
-        // Function to load external scripts dynamically
-        function loadScript(url, callback) {{
-            const script = document.createElement('script');
-            script.src = url;
-            script.async = true;
-            script.onload = callback;
-            script.onerror = () => console.error("Error loading script:", url);
-            document.head.appendChild(script);
+        <style>
+        /* Style the diagram container */
+        .diagram-container {{
+            position: relative;
+            width: 90%; /* Adjust container width */
+            height: 500px; /* Fixed height */
+            margin: 0 auto;
+            border: 1px solid #ccc;
+            overflow: hidden; /* Prevents content overflow */
         }}
 
-        // Initialize Mermaid
-        function initializeMermaid(graph_id) {{
-            // Look for the container
-            const containerElement = document.getElementById(`${{graph_id}}-container`);
-            if (!containerElement) {{
-                console.error(`Container with ID "${{graph_id}}-container" not found.`);
-                return;
-            }}
+        /* Style custom zoom controls */
+        .svg-pan-zoom-controls {{
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            z-index: 10; /* Ensures controls are above other elements */
+        }}
 
-            // Configure Mermaid
-            mermaid.initialize({{ startOnLoad: false, logLevel: "debug" }});
-            mermaid.init(undefined, `#${{graph_id}}`);
+        .svg-pan-zoom-controls button {{
+            background-color: #007bff;
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 3px;
+            cursor: pointer;
+            font-size: 14px;
+        }}
+        .svg-pan-zoom-controls button:hover {{
+            background-color: #0056b3;
+        }}
+    </style>
+
+    <div id="{graph_id}-container" class="diagram-container">
+        <!-- Title/Heading (optional; include as needed) -->
+        {header_html}
+        <!-- Mermaid rendering area -->
+        <div id="{graph_id}" class="mermaid">
+            {mermaid_code}
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
 
-            setTimeout(() => {{
-                const svg = containerElement.querySelector("svg");
+    <script>
+        (function() {{
+            const graph_id = "{graph_id}";
+            let panZoomInstance; // Store reference to the panZoom instance
 
-                // Ensure SVG exists
-                if (!svg) {{
-                    console.error(`SVG not rendered for ID "${{graph_id}}".`);
+            // Function to initialize Mermaid
+            function initializeMermaid(graph_id) {{
+                const container = document.getElementById(`${{graph_id}}-container`);
+                const diagram = document.getElementById(`${{graph_id}}`);
+
+                if (!container || !diagram) {{
+                    console.error(`Container or diagram not found for ID "${{graph_id}}"`);
                     return;
                 }}
 
-                // Set initial size for SVG
-                svg.setAttribute("width", "100%");
-                svg.setAttribute("height", "100%");
-
-                // Ensure the container fits the diagram properly
-                containerElement.style.overflow = "hidden";
-
-                // Initialize Pan-Zoom
-                const panZoom = svgPanZoom(svg, {{
-                    zoomEnabled: true,
-                    controlIconsEnabled: false, // Disable default controls
-                    fit: true,
-                    center: true,
-                    minZoom: 0.5,
-                    maxZoom: 10,
-                    contain: true // Ensure diagram stays within view
-                }});
-
-                // Add custom controls
-                const controlsContainer = document.createElement("div");
-                controlsContainer.className = "svg-pan-zoom_controls";
-                controlsContainer.innerHTML = `
-                    <button id="${{graph_id}}-zoom-in">+</button>
-                    <button id="${{graph_id}}-zoom-out">-</button>
-                    <button id="${{graph_id}}-reset">Reset</button>
-                `;
-                containerElement.appendChild(controlsContainer);
-
-                // Handle controls
-                document.getElementById(`${{graph_id}}-zoom-in`).addEventListener("click", () => panZoom.zoomIn());
-                document.getElementById(`${{graph_id}}-zoom-out`).addEventListener("click", () => panZoom.zoomOut());
-                document.getElementById(`${{graph_id}}-reset`).addEventListener("click", () => {{
-                    panZoom.resetZoom();
-                    panZoom.center();
-                }});
-            }}, 500); // Delay to ensure Mermaid finishes rendering
-        }}
+                // Initialize Mermaid
+                mermaid.initialize({{ startOnLoad: false }});
+                mermaid.init(undefined, diagram);
+
+                // Set a small delay to allow Mermaid rendering to complete before initializing Pan-Zoom
+                setTimeout(() => {{
+                    const svg = container.querySelector("svg");
+                    if (!svg) {{
+                        console.error(`SVG not found for graph ID "${{graph_id}}"`);
+                        return;
+                    }}
+
+                    // Force the SVG to fit the container by setting width, height, and viewBox
+                    svg.setAttribute("width", "100%");
+                    svg.setAttribute("height", "100%");
+                    svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+                    svg.style.display = "block";
+
+                    if (!svg.hasAttribute("viewBox")) {{
+                        const bbox = svg.getBBox();
+                        svg.setAttribute("viewBox", `0 0 ${{bbox.width}} ${{bbox.height}}`);
+                    }}
+
+                    // Initialize Pan-Zoom functionality
+                    panZoomInstance = svgPanZoom(svg, {{
+                        zoomEnabled: true,
+                        controlIconsEnabled: false, // Use custom controls
+                        fit: true,
+                        center: true,
+                        contain: true,
+                        minZoom: 0.5,
+                        maxZoom: 10
+                    }});
+
+                    // Add custom controls
+                    const controlsContainer = document.createElement("div");
+                    controlsContainer.className = "svg-pan-zoom-controls";
+                    controlsContainer.innerHTML = `
+                        <button type="button" id="${{graph_id}}-zoom-in">+</button>
+                        <button type="button" id="${{graph_id}}-zoom-out">-</button>
+                        <button type="button" id="${{graph_id}}-reset">Reset</button>
+                    `;
+                    container.appendChild(controlsContainer);
+
+                    // Add event listeners for the controls
+                    document.getElementById(`${{graph_id}}-zoom-in`).addEventListener("click", () => {{
+                        if (panZoomInstance) panZoomInstance.zoomIn();
+                    }});
+                    document.getElementById(`${{graph_id}}-zoom-out`).addEventListener("click", () => {{
+                        if (panZoomInstance) panZoomInstance.zoomOut();
+                    }});
+                    document.getElementById(`${{graph_id}}-reset`).addEventListener("click", () => {{
+                        if (panZoomInstance) {{
+                            panZoomInstance.resetZoom();
+                            panZoomInstance.center();
+                        }}
+                    }});
+                }}, 500); // Delay of 500ms for Mermaid and SVG rendering
+            }}
 
-        // Load Mermaid.js externally or initialize
-        if (typeof mermaid === "undefined") {{
-            loadScript("https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js", () => {{
-                console.log("Mermaid.js loaded successfully");
+            // Load Mermaid.js if not already loaded
+            if (typeof mermaid === "undefined") {{
+                const script = document.createElement("script");
+                script.src = "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js";
+                script.onload = () => initializeMermaid(graph_id);
+                document.head.appendChild(script);
+            }} else {{
                 initializeMermaid(graph_id);
-            }});
-        }} else {{
-            initializeMermaid(graph_id);
-        }}
-    }});
-</script>
+            }}
+        }})();
+    </script>
+    """
 
-<div id="{graph_id}-container" class="diagram-container">
-    <!-- Mermaid diagram will be dynamically rendered here -->
-    <div id="{graph_id}" class="mermaid">
-        {mermaid_code} 
-    </div>
-</div>
-"""
 
     return html_content
+
+#     html_content = f"""
+# <style>
+#     /* Style for the diagram container */
+#     .diagram-container {{
+#         position: relative;
+#         width: 100%; /* Adjust the diagram container width */
+#         height: 500px; /* Set a fixed height for the container */
+#         margin: 0 auto;
+#         border: 1px solid #ccc; /* Optional border for visualization */
+#         overflow: hidden; /* Prevent content overflow outside the container */
+#     }}
+#
+#     /* Style for zoom controls */
+#     .svg-pan-zoom_controls {{
+#         position: absolute;
+#         top: 10px;
+#         right: 10px;
+#         display: flex;
+#         flex-direction: column;
+#         gap: 5px;
+#     }}
+#     .svg-pan-zoom_controls button {{
+#         background-color: #007bff;
+#         color: white;
+#         border: none;
+#         padding: 5px 10px;
+#         border-radius: 3px;
+#         cursor: pointer;
+#         font-size: 14px;
+#     }}
+#     .svg-pan-zoom_controls button:hover {{
+#         background-color: #0056b3;
+#     }}
+# </style>
+#
+# <div id="{graph_id}-container" class="diagram-container">
+#     <!-- Mermaid diagram will be dynamically rendered here -->
+#     <div id="{graph_id}" class="mermaid">
+#         {mermaid_code}
+#     </div>
+# </div>
+#
+# <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+#     <script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
+#     <script>
+#         document.addEventListener("DOMContentLoaded", () => {{
+#             // Initialize Mermaid and Pan-Zoom functionality
+#             const graph_id = "{graph_id}";
+#
+#             function initializeMermaid(graph_id) {{
+#                 const containerElement = document.getElementById(`${{graph_id}}-container`);
+#
+#                 if (!containerElement) {{
+#                     console.error(`Container with ID "${{graph_id}}-container" not found.`);
+#                     return;
+#                 }}
+#
+#                 // Configure Mermaid
+#                 mermaid.initialize({{ startOnLoad: false, logLevel: "debug" }});
+#                 mermaid.init(undefined, `#${{graph_id}}`);
+#
+#                 setTimeout(() => {{
+#                     const svg = containerElement.querySelector("svg");
+#                     if (!svg) {{
+#                         console.error(`SVG not rendered for ID "${{graph_id}}".`);
+#                         return;
+#                     }}
+#
+#                     // Set initial size
+#                     svg.setAttribute("width", "100%");
+#                     svg.setAttribute("height", "100%");
+#
+#                     // Initialize Pan-Zoom
+#                     const panZoom = svgPanZoom(svg, {{
+#                         zoomEnabled: true,
+#                         controlIconsEnabled: false,
+#                         fit: true,
+#                         center: true,
+#                         minZoom: 0.5,
+#                         maxZoom: 10,
+#                         contain: true
+#                     }});
+#
+#                     // Add custom controls
+#                     const controlsContainer = document.createElement("div");
+#                     controlsContainer.className = "svg-pan-zoom_controls";
+#                     controlsContainer.innerHTML = `
+#                         <button id="${{graph_id}}-zoom-in">+</button>
+#                         <button id="${{graph_id}}-zoom-out">-</button>
+#                         <button id="${{graph_id}}-reset">Reset</button>
+#                     `;
+#                     containerElement.appendChild(controlsContainer);
+#
+#                     // Handle controls
+#                     document.getElementById(`${{graph_id}}-zoom-in`).addEventListener("click", () => panZoom.zoomIn());
+#                     document.getElementById(`${{graph_id}}-zoom-out`).addEventListener("click", () => panZoom.zoomOut());
+#                     document.getElementById(`${{graph_id}}-reset`).addEventListener("click", () => {{
+#                         panZoom.resetZoom();
+#                         panZoom.center();
+#                     }});
+#                 }}, 500);
+#             }}
+#
+#             if (typeof mermaid === "undefined") {{
+#                 const script = document.createElement('script');
+#                 script.src = "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js";
+#                 script.onload = () => initializeMermaid(graph_id);
+#                 document.head.appendChild(script);
+#             }} else {{
+#                 initializeMermaid(graph_id);
+#             }}
+#         }});
+#     </script>
+#
+# """
+#
+#     return html_content
 # This one almost works - no controls and diagram too small
     # html_content = f"""
 # <!DOCTYPE html>