pyegeria 5.3.4.12__py3-none-any.whl → 5.3.4.14__py3-none-any.whl

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>

pyegeria/test_m.html

@@ -1,130 +1,53 @@
 
-<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 = "mermaid-graph-c4f8d707-7c85-4125-b5fd-c3257a2ef2ef";
-
-        // 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;
-            }
-
-            // Configure Mermaid
-            mermaid.initialize({ startOnLoad: false, logLevel: "debug" });
-            mermaid.init(undefined, `#${graph_id}`);
-
-            setTimeout(() => {
-                const svg = containerElement.querySelector("svg");
-
-                // Ensure SVG exists
-                if (!svg) {
-                    console.error(`SVG not rendered 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
+        /* 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 */
         }
 
-        // 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");
-                initializeMermaid(graph_id);
-            });
-        } else {
-            initializeMermaid(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;
         }
-    });
-</script>
-
-<div id="mermaid-graph-c4f8d707-7c85-4125-b5fd-c3257a2ef2ef-container" class="diagram-container">
-    <!-- Mermaid diagram will be dynamically rendered here -->
-    <div id="mermaid-graph-c4f8d707-7c85-4125-b5fd-c3257a2ef2ef" class="mermaid">
-        flowchart TD
+        .svg-pan-zoom-controls button:hover {
+            background-color: #0056b3;
+        }
+    </style>
+
+    <div id="mermaid-graph-c4f8d707-7c85-4125-b5fd-c3257a2ef2ef-container" class="diagram-container">
+        <!-- Title/Heading (optional; include as needed) -->
+        
+            <h3 id="mermaid-graph-c4f8d707-7c85-4125-b5fd-c3257a2ef2ef-heading" style="margin: 20px 0; font-size: 1.5em; text-align: center;">
+                Component for Solution Blueprint - Clinical Trial Management Solution Blueprint 
+            </h3>
+            <p id="mermaid-graph-c4f8d707-7c85-4125-b5fd-c3257a2ef2ef-subheading" style="margin: 0; padding: 5px; font-size: 1em; text-align: center; color: gray; flex: 0 0 auto;">
+                GUID: c4f8d707-7c85-4125-b5fd-c3257a2ef2ef
+            </p>
+            
+        <!-- Mermaid rendering area -->
+        <div id="mermaid-graph-c4f8d707-7c85-4125-b5fd-c3257a2ef2ef" class="mermaid">
+            flowchart TD
 %%{init: {"flowchart": {"htmlLabels": false}} }%%
 
 subgraph c4f8d707-7c85-4125-b5fd-c3257a2ef2ef [Components and Actors]
@@ -224,6 +147,97 @@ style b5c8da4c-f925-4cf1-8294-e43cd2c1a584 color:#FFFFFF, fill:#838cc7, stroke:#
 style f6bc847b-868d-43cc-b767-41f5fe3e47d1 color:#FFFFFF, fill:#AA00FF, stroke:#E1D5E7
 style d48f579f-76d3-4c49-b1b4-575f5645a9d0 color:#FFFFFF, fill:#838cc7, stroke:#3079ab
 style f37f3735-28a1-4e03-9ff5-3fe2f137f661 color:#FFFFFF, fill:#AA00FF, stroke:#E1D5E7
-style fb32bef2-e79f-4893-b500-2e547f24d482 color:#FFFFFF, fill:#838cc7, stroke:#3079ab 
+style fb32bef2-e79f-4893-b500-2e547f24d482 color:#FFFFFF, fill:#838cc7, stroke:#3079ab
+        </div>
     </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>
+        (function() {
+            const graph_id = "mermaid-graph-c4f8d707-7c85-4125-b5fd-c3257a2ef2ef";
+            let panZoomInstance; // Store reference to the panZoom instance
+
+            // 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;
+                }
+
+                // 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 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);
+            }
+        })();
+    </script>
+    

{pyegeria-5.3.4.12.dist-info → pyegeria-5.3.4.14.dist-info}/METADATA

@@ -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.dist-info → pyegeria-5.3.4.14.dist-info}/RECORD

@@ -245,7 +245,7 @@ pyegeria/full_omag_server_config.py,sha256=CQqLCy_3DZFvJZEOcGf50HWdFaWpiAIs6z-kK
 pyegeria/glossary_browser_omvs.py,sha256=ci57LXFjIAXWw6XXFu8pIbeR_3y4hl_x4F2-HHdy7VM,93585
 pyegeria/glossary_manager_omvs.py,sha256=GJQo5E3bxv8JL84wTGqJKMrMo7QqNAPtyJJgvGpI_lU,132558
 pyegeria/m_test.py,sha256=BDKRLsHsAWnwCbzHkkvfsc8ZIJ0k-jmwPPNuTSgW6Qo,7659
-pyegeria/mermaid_utilities.py,sha256=zuGag6ffjkO22kiJtarhy_x18Yx5x_t4DSgbsC0SxKU,34433
+pyegeria/mermaid_utilities.py,sha256=hDLpCOmLDsh9gkqmx2jTEXRjUGYgN3wkkWzpmiN-HoA,40281
 pyegeria/metadata_explorer_omvs.py,sha256=xHnZTQKbd6XwOhYia-RiIisrvZcqHi0SL1l6OCf04Gk,86911
 pyegeria/my_profile_omvs.py,sha256=d0oJYCJG7pS9BINPuGciVa00ac0jwPHNANXDCLginEc,34720
 pyegeria/platform_services.py,sha256=xlF5p5HPKDGTFFDsuxm2RLhr8vjZPv4T7e2qCkDgKXE,41654
@@ -255,14 +255,14 @@ pyegeria/runtime_manager_omvs.py,sha256=Z5wY9ignNjil8O6yjihZftxkGoh9A4PQDcXhoIsO
 pyegeria/server_operations.py,sha256=vmiUDU_Xa0U8pa0Fdb-QKkoeSqs7WfMwIpG_XU3xgeI,16784
 pyegeria/solution_architect_omvs.py,sha256=x6CfPTyn1l2DFYVEFP0t_rT9uVjoFr596hBBeuVaMRg,22093
 pyegeria/template_manager_omvs.py,sha256=PfJ9dOfmBvf59DgRdZ9Dl1Kl_UYqjF-JncXVnbCqLZU,42408
-pyegeria/test_m.html,sha256=YAGz3VoCvEydXuRJMwoajOWkuB7sJO6WTZKNkCfXzgw,12239
+pyegeria/test_m.html,sha256=equ-hAZ8yn8g5pzzmslQaO_k75GWaWg9OxeHpCBG_4U,13531
 pyegeria/test_m1.html,sha256=XS_1IAtfG4ZlZk45QTkrFWWpjQMVlO21ScDMX2Frl3g,14086
 pyegeria/test_mer.ipynb,sha256=G7hpHn07IXnt_VKvnTDvljwwHB7RfC0etOMyZKt1icQ,30809
 pyegeria/utils.py,sha256=GCt1C0bp0Xng1ahzbZhzV9qQwH7Dj93IaCt2dvWb-sg,5417
 pyegeria/valid_metadata_omvs.py,sha256=kL3bEkoBtNCaQKjziFwRAqQyleu-i2ua_REIogfulFw,65031
 pyegeria/x_action_author_omvs.py,sha256=6b725SPsC52AI7ols7Qq8MsBlZuAXr_BgJ_-ychVRCw,6386
-pyegeria-5.3.4.12.dist-info/LICENSE,sha256=xx0jnfkXJvxRnG63LTGOxlggYnIysveWIZ6H3PNdCrQ,11357
-pyegeria-5.3.4.12.dist-info/METADATA,sha256=PDGeRm1VV0p86nMWqtX-0MXYdRZ4UKI7eYYgPY_ZWN0,2736
-pyegeria-5.3.4.12.dist-info/WHEEL,sha256=IYZQI976HJqqOpQU6PHkJ8fb3tMNBFjg-Cn-pwAbaFM,88
-pyegeria-5.3.4.12.dist-info/entry_points.txt,sha256=LS9g5JPSBL0whnyAcGhLZCAyUp6PkPU6fjHP9Aso1V4,6176
-pyegeria-5.3.4.12.dist-info/RECORD,,
+pyegeria-5.3.4.14.dist-info/LICENSE,sha256=xx0jnfkXJvxRnG63LTGOxlggYnIysveWIZ6H3PNdCrQ,11357
+pyegeria-5.3.4.14.dist-info/METADATA,sha256=FftxyngR6Meq7NLfYJODC0jOAA3LLqja0sulciEPzcs,2736
+pyegeria-5.3.4.14.dist-info/WHEEL,sha256=IYZQI976HJqqOpQU6PHkJ8fb3tMNBFjg-Cn-pwAbaFM,88
+pyegeria-5.3.4.14.dist-info/entry_points.txt,sha256=LS9g5JPSBL0whnyAcGhLZCAyUp6PkPU6fjHP9Aso1V4,6176
+pyegeria-5.3.4.14.dist-info/RECORD,,