pyegeria 5.3.4.15__tar.gz → 5.3.4.17__tar.gz

{pyegeria-5.3.4.15 → pyegeria-5.3.4.17}/PKG-INFO

@@ -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 → pyegeria-5.3.4.17}/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 */