pyegeria 5.3.4.15__py3-none-any.whl → 5.3.4.17__py3-none-any.whl

pyegeria/mermaid_utilities.py

@@ -223,7 +223,7 @@ def construct_mermaid_html(mermaid_str: str) -> str:
     """
     title_label, guid, mermaid_code = parse_mermaid_code(mermaid_str)
 
-    graph_id = f"mermaid-graph-{guid}"
+    graph_id = f"mermaid-graph-{guid}-{str(uuid.uuid4())[:4]}"
     escaped_header = html.escape(title_label) if title_label else ""  # Sanitize the header safely
     escaped_mermaid_code = html.escape(mermaid_code)
     header_html = f"""
@@ -236,162 +236,324 @@ def construct_mermaid_html(mermaid_str: str) -> str:
             """ if title_label else ""
 
     html_content = f"""
-    <style>
-        .diagram-container {{
-            position: relative;
-            width: 90%; /* Adjust container width */
-            height: 500px; /* Fixed height */
-            margin: 20px auto;
-            border: 1px solid #ccc;
-            overflow: hidden; /* Prevents content overflow */
-        }}
-
-        .svg-pan-zoom-controls {{
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            display: flex;
-            flex-direction: column;
-            gap: 5px;
-            z-index: 10;
-        }}
-
-        .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">
-        <div id="{graph_id}" class="mermaid">
-            {mermaid_code}
-        </div>
+        <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 -->
+    {header_html}
+    <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>
-        (function() {{
+        document.addEventListener("DOMContentLoaded", () => {{
+            // Initialize Mermaid and Pan-Zoom functionality
             const graph_id = "{graph_id}";
-            let panZoomInstance; // Reference for svg-pan-zoom instance
 
             function initializeMermaid(graph_id) {{
-                const container = document.getElementById(`${{graph_id}}-container`);
-                const diagram = document.getElementById(`${{graph_id}}`);
+                const containerElement = document.getElementById(`${{graph_id}}-container`);
 
-                if (!container || !diagram) {{
-                    console.error(`Container or diagram not found for ID "${{graph_id}}"`);
+                if (!containerElement) {{
+                    console.error(`Container with ID "${{graph_id}}-container" not found.`);
                     return;
                 }}
 
-                // Initialize Mermaid
-                mermaid.initialize({{ startOnLoad: false }});
-                mermaid.init(undefined, diagram);
+                // Configure Mermaid
+                mermaid.initialize({{ startOnLoad: false, logLevel: "debug" }});
+                mermaid.init(undefined, `#${{graph_id}}`);
 
-                // Set a small delay to allow Mermaid rendering to complete
                 setTimeout(() => {{
-                    const svg = container.querySelector("svg");
-
+                    const svg = containerElement.querySelector("svg");
                     if (!svg) {{
-                        console.error(`SVG not found for graph ID "${{graph_id}}"`);
+                        console.error(`SVG not rendered for ID "${{graph_id}}".`);
                         return;
                     }}
 
-                    // Force SVG to fit the container
+                    // Set initial size
                     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
-                    panZoomInstance = svgPanZoom(svg, {{
+                    const panZoom = svgPanZoom(svg, {{
                         zoomEnabled: true,
-                        controlIconsEnabled: false, // Custom controls
+                        controlIconsEnabled: false,
                         fit: true,
                         center: true,
-                        contain: true,
                         minZoom: 0.5,
-                        maxZoom: 10
+                        maxZoom: 10,
+                        contain: true
                     }});
 
-                    // Add controls
+                    // Add custom controls
                     const controlsContainer = document.createElement("div");
-                    controlsContainer.className = "svg-pan-zoom-controls";
+                    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>
+                        <button id="${{graph_id}}-zoom-in">+</button>
+                        <button id="${{graph_id}}-zoom-out">-</button>
+                        <button id="${{graph_id}}-reset">Reset</button>
                     `;
-                    container.appendChild(controlsContainer);
+                    containerElement.appendChild(controlsContainer);
 
-                    // Attach control event listeners
-                    document.getElementById(`${{graph_id}}-zoom-in`).addEventListener("click", () => {{
-                        if (panZoomInstance) panZoomInstance.zoomIn();
-                    }});
-                    document.getElementById(`${{graph_id}}-zoom-out`).addEventListener("click", () => {{
-                        if (panZoomInstance) panZoomInstance.zoomOut();
-                    }});
+                    // 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", () => {{
-                        if (panZoomInstance) {{
-                            panZoomInstance.resetZoom();
-                            panZoomInstance.center();
-                        }}
+                        panZoom.resetZoom();
+                        panZoom.center();
                     }});
-                }}, 500); // Delay for Mermaid and SVG rendering
+                }}, 500);
             }}
 
-            // Check if Mermaid and SVG-Pan-Zoom are loaded
-            const loadMermaid = typeof mermaid === "undefined";
-            const loadSvgPanZoom = typeof svgPanZoom === "undefined";
-
-            if (loadMermaid || loadSvgPanZoom) {{
-                const promises = [];
-
-                // Load Mermaid.js if not already loaded
-                if (loadMermaid) {{
-                    promises.push(new Promise((resolve) => {{
-                        const script = document.createElement("script");
-                        script.src = "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js";
-                        script.onload = resolve;
-                        document.head.appendChild(script);
-                    }}));
-                }}
-
-                // Load SVG-Pan-Zoom if not already loaded
-                if (loadSvgPanZoom) {{
-                    promises.push(new Promise((resolve) => {{
-                        const script = document.createElement("script");
-                        script.src = "https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js";
-                        script.onload = resolve;
-                        document.head.appendChild(script);
-                    }}));
-                }}
-
-                Promise.all(promises).then(() => initializeMermaid(graph_id));
+            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>
+# <html>
+# <head>
+#     <style>
+#         /* Set consistent sizing and prevent shrinking for the container and parents */
+#         html, body, #{graph_id}-wrapper {{
+#             margin: 0;
+#             padding: 0;
+#             height: 100%; /* Ensure the entire root hierarchy respects 100% height */
+#             width: 100%;
+#         }}
+#
+#         /* Ensure diagram container maintains full height and prevents overflow */
+#         #{graph_id}-container {{
+#             position: relative;
+#             width: 100%;
+#             height: 100%;
+#             overflow: hidden; /* Prevent content from breaking layout */
+#             display: flex;
+#             align-items: center; /* Centers the diagram vertically */
+#             justify-content: center; /* Centers the diagram horizontally */
+#         }}
+#
+#         /* Ensure SVG always stretches to match container */
+#         #{graph_id} svg {{
+#             width: 100%;
+#             height: 100%;
+#             display: block; /* Avoid unwanted inline space issues */
+#         }}
+#
+#         /* Optional custom pan/zoom controls (if dynamically added) */
+#         .svg-pan-zoom_controls {{
+#             position: absolute;
+#             bottom: 10px; /* Adjust based on desired placement */
+#             right: 10px;
+#             z-index: 10;
+#             display: flex;
+#             gap: 5px;
+#         }}
+#
+#         .svg-pan-zoom_controls button {{
+#             border: 1px solid #ccc;
+#             background-color: #fff;
+#             color: #000;
+#             padding: 5px 10px;
+#             cursor: pointer;
+#             font-size: 16px;
+#         }}
+#
+#         .svg-pan-zoom_controls button:hover {{
+#             background-color: #f0f0f0;
+#         }}
+#     </style>
+#     </head>
+#     <body>
+#     <div id="{graph_id}-wrapper">
+#         <!-- Title/Heading (optional; include as needed) -->
+#         {escaped_header if escaped_header else ""}
+#
+#         <!-- Mermaid Diagram Container -->
+#         <div id="{graph_id}-container">
+#             <div id="{graph_id}" class="mermaid">
+#                 {escaped_mermaid_code}
+#             </div>
+#         </div>
+#     </div>
+#
+#     <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 the 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);
+#         }}
+#
+#         // Function to initialize Mermaid
+#         function initializeMermaid(graph_id) {{
+#                                               // Look for the container ID generated dynamically by the template
+#         const containerElement = document.getElementById(`${{graph_id}}-container`);
+#         if (!containerElement) {{
+#         console.error(`Container element with id "${{graph_id}}-container" not found.`);
+#         return;
+#         }}
+#
+#         // Initialize Mermaid.js with default configuration
+#         mermaid.initialize({{ startOnLoad: false, logLevel: "debug" }});
+#         mermaid.init(undefined, `#${{graph_id}}`); // Initialize element with id matching `graph_id`
+#
+#                      // Add a timeout to ensure the SVG is rendered
+#         setTimeout(() => {{
+#             const svg = containerElement.querySelector("svg");
+#
+#         // Handle errors if SVG rendering fails
+#         if (!svg) {{
+#             console.error(`SVG not rendered for ID "${{graph_id}}". Check Mermaid syntax or rendering issues.`);
+#         console.log("Container content:", containerElement.innerHTML); // Log the container's content
+#         return;
+#         }}
+#
+#         // Set SVG attributes for full container fit
+#         svg.setAttribute("width", "100%");
+#         svg.setAttribute("height", "100%");
+#
+#         // Initialize SVG Pan-Zoom functionality
+#         const panZoom = svgPanZoom(svg, {{
+#         zoomEnabled: true,
+#         controlIconsEnabled: true, // Display default controls if enabled
+#         fit: true,  // Fit diagram within the container
+#         center: true, // Center the diagram
+#         minZoom: 0.5, // Prevent too much zooming out
+#         maxZoom: 10,  // Prevent extreme zooming in
+#                                          contain: true // Keep the diagram fully within bounds
+#         }});
+#
+#         // Optional: Add custom pan/zoom controls dynamically
+#             const controlsContainer = document.createElement("div");
+#             controlsContainer.classList.add("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);
+#
+#         // Add event listeners for the custom 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); // Short delay to ensure SVG rendering is complete
+#         }}
+#
+#         // Load Mermaid.js if not already loaded
+#         if (typeof mermaid === "undefined") {{
+#             loadScript("https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js", () => {{
+#             console.log("Mermaid.js loaded successfully");
+#             initializeMermaid(graph_id); // Call initialization after Mermaid.js is loaded
+#         }});
+#             }} else {{
+#                 initializeMermaid(graph_id); // If Mermaid.js is already loaded, proceed immediately
+#             }}
+#         }});
+#     </script>
+#
+#
+#     </body>
+#     </html>
+#     """
+
 
 
 
 
     return html_content
 
+    # // Check if Mermaid and SVG-Pan-Zoom are loaded
+    # const loadMermaid = typeof mermaid === "undefined";
+    # const loadSvgPanZoom = typeof svgPanZoom === "undefined";
+    #
+    # if (loadMermaid || loadSvgPanZoom) {{
+    #     const promises = [];
+    #
+    #     // Load Mermaid.js if not already loaded
+    #     if (loadMermaid) {{
+    #         promises.push(new Promise((resolve) => {{
+    #             const script = document.createElement("script");
+    #             script.src = "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js";
+    #             script.onload = resolve;
+    #             document.head.appendChild(script);
+    #         }}));
+    #     }}
+    #
+    #     // Load SVG-Pan-Zoom if not already loaded
+    #     if (loadSvgPanZoom) {{
+    #         promises.push(new Promise((resolve) => {{
+    #             const script = document.createElement("script");
+    #             script.src = "https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js";
+    #             script.onload = resolve;
+    #             document.head.appendChild(script);
+    #         }}));
+    #     }}
+    #
+    #     Promise.all(promises).then(() => initializeMermaid(graph_id));
+    # }} else {{
+    #     initializeMermaid(graph_id);
+    # }}
+    # }})();
+
+
 #     html_content = f"""
 # <style>
 #     /* Style for the diagram container */

pyegeria/test_m.html

@@ -1,53 +1,50 @@
 
         <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 */
-        }
-
-        /* 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 */
-        }
-
-        .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="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;">
+    /* 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="mermaid-graph-c4f8d707-7c85-4125-b5fd-c3257a2ef2ef-597f-container" class="diagram-container">
+    <!-- Mermaid diagram will be dynamically rendered here -->
+    
+            <h3 id="mermaid-graph-c4f8d707-7c85-4125-b5fd-c3257a2ef2ef-597f-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;">
+            <p id="mermaid-graph-c4f8d707-7c85-4125-b5fd-c3257a2ef2ef-597f-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
+    <div id="mermaid-graph-c4f8d707-7c85-4125-b5fd-c3257a2ef2ef-597f" class="mermaid">
+        flowchart TD
 %%{init: {"flowchart": {"htmlLabels": false}} }%%
 
 subgraph c4f8d707-7c85-4125-b5fd-c3257a2ef2ef [Components and Actors]
@@ -148,96 +145,78 @@ style f6bc847b-868d-43cc-b767-41f5fe3e47d1 color:#FFFFFF, fill:#AA00FF, stroke:#
 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
-        </div>
     </div>
+</div>
 
-    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<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
+        document.addEventListener("DOMContentLoaded", () => {
+            // Initialize Mermaid and Pan-Zoom functionality
+            const graph_id = "mermaid-graph-c4f8d707-7c85-4125-b5fd-c3257a2ef2ef-597f";
 
-            // Function to initialize Mermaid
             function initializeMermaid(graph_id) {
-                const container = document.getElementById(`${graph_id}-container`);
-                const diagram = document.getElementById(`${graph_id}`);
+                const containerElement = document.getElementById(`${graph_id}-container`);
 
-                if (!container || !diagram) {
-                    console.error(`Container or diagram not found for ID "${graph_id}"`);
+                if (!containerElement) {
+                    console.error(`Container with ID "${graph_id}-container" not found.`);
                     return;
                 }
 
-                // Initialize Mermaid
-                mermaid.initialize({ startOnLoad: false });
-                mermaid.init(undefined, diagram);
+                // Configure Mermaid
+                mermaid.initialize({ startOnLoad: false, logLevel: "debug" });
+                mermaid.init(undefined, `#${graph_id}`);
 
-                // Set a small delay to allow Mermaid rendering to complete before initializing Pan-Zoom
                 setTimeout(() => {
-                    const svg = container.querySelector("svg");
+                    const svg = containerElement.querySelector("svg");
                     if (!svg) {
-                        console.error(`SVG not found for graph ID "${graph_id}"`);
+                        console.error(`SVG not rendered for ID "${graph_id}".`);
                         return;
                     }
 
-                    // Force the SVG to fit the container by setting width, height, and viewBox
+                    // Set initial size
                     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, {
+                    // Initialize Pan-Zoom
+                    const panZoom = svgPanZoom(svg, {
                         zoomEnabled: true,
-                        controlIconsEnabled: false, // Use custom controls
+                        controlIconsEnabled: false,
                         fit: true,
                         center: true,
-                        contain: true,
                         minZoom: 0.5,
-                        maxZoom: 10
+                        maxZoom: 10,
+                        contain: true
                     });
 
                     // Add custom controls
                     const controlsContainer = document.createElement("div");
-                    controlsContainer.className = "svg-pan-zoom-controls";
+                    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>
+                        <button id="${graph_id}-zoom-in">+</button>
+                        <button id="${graph_id}-zoom-out">-</button>
+                        <button id="${graph_id}-reset">Reset</button>
                     `;
-                    container.appendChild(controlsContainer);
+                    containerElement.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();
-                    });
+                    // 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", () => {
-                        if (panZoomInstance) {
-                            panZoomInstance.resetZoom();
-                            panZoomInstance.center();
-                        }
+                        panZoom.resetZoom();
+                        panZoom.center();
                     });
-                }, 500); // Delay of 500ms for Mermaid and SVG rendering
+                }, 500);
             }
 
-            // Load Mermaid.js if not already loaded
             if (typeof mermaid === "undefined") {
-                const script = document.createElement("script");
+                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.15.dist-info → pyegeria-5.3.4.17.dist-info}/METADATA

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

{pyegeria-5.3.4.15.dist-info → pyegeria-5.3.4.17.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=eIQ21z8KuoeKWkDLChvU_f3O-33sFah67Vaks0Oaj0g,40651
+pyegeria/mermaid_utilities.py,sha256=kYpvtkkaygmlWxQBQ81Cvg8DmJU9kSQ4TJsatEbJxig,47100
 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=equ-hAZ8yn8g5pzzmslQaO_k75GWaWg9OxeHpCBG_4U,13531
+pyegeria/test_m.html,sha256=soiG6-8OOl9iY8MLM1BohV2ySPn5cKmlubbGPS9WYZ8,12368
 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.15.dist-info/LICENSE,sha256=xx0jnfkXJvxRnG63LTGOxlggYnIysveWIZ6H3PNdCrQ,11357
-pyegeria-5.3.4.15.dist-info/METADATA,sha256=MCI6Baa0OgGreARNDJm282wBYOBxfgw1WoQx-HZgK_E,2736
-pyegeria-5.3.4.15.dist-info/WHEEL,sha256=IYZQI976HJqqOpQU6PHkJ8fb3tMNBFjg-Cn-pwAbaFM,88
-pyegeria-5.3.4.15.dist-info/entry_points.txt,sha256=LS9g5JPSBL0whnyAcGhLZCAyUp6PkPU6fjHP9Aso1V4,6176
-pyegeria-5.3.4.15.dist-info/RECORD,,
+pyegeria-5.3.4.17.dist-info/LICENSE,sha256=xx0jnfkXJvxRnG63LTGOxlggYnIysveWIZ6H3PNdCrQ,11357
+pyegeria-5.3.4.17.dist-info/METADATA,sha256=WENOLlCzIWk66GeM10kKHrcxBP2YjkoAsx0CUfDAbAU,2736
+pyegeria-5.3.4.17.dist-info/WHEEL,sha256=IYZQI976HJqqOpQU6PHkJ8fb3tMNBFjg-Cn-pwAbaFM,88
+pyegeria-5.3.4.17.dist-info/entry_points.txt,sha256=LS9g5JPSBL0whnyAcGhLZCAyUp6PkPU6fjHP9Aso1V4,6176
+pyegeria-5.3.4.17.dist-info/RECORD,,