pyegeria 5.3.4.13__tar.gz → 5.3.4.14__tar.gz

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

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

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

@@ -226,124 +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: 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} 
+        <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="{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>
-</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>
-        document.addEventListener("DOMContentLoaded", () => {{
-            // Initialize Mermaid and Pan-Zoom functionality
+        (function() {{
             const graph_id = "{graph_id}";
+            let panZoomInstance; // Store reference to the panZoom instance
 
+            // Function to initialize Mermaid
             function initializeMermaid(graph_id) {{
-                const containerElement = document.getElementById(`${{graph_id}}-container`);
-                
-                if (!containerElement) {{
-                    console.error(`Container with ID "${{graph_id}}-container" not found.`);
+                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;
                 }}
 
-                // Configure Mermaid
-                mermaid.initialize({{ startOnLoad: false, logLevel: "debug" }});
-                mermaid.init(undefined, `#${{graph_id}}`);
+                // 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 = containerElement.querySelector("svg");
+                    const svg = container.querySelector("svg");
                     if (!svg) {{
-                        console.error(`SVG not rendered for ID "${{graph_id}}".`);
+                        console.error(`SVG not found for graph ID "${{graph_id}}"`);
                         return;
                     }}
 
-                    // Set initial size
+                    // 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";
 
-                    // Initialize Pan-Zoom
-                    const panZoom = svgPanZoom(svg, {{
+                    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,
+                        controlIconsEnabled: false, // Use custom controls
                         fit: true,
                         center: true,
+                        contain: true,
                         minZoom: 0.5,
-                        maxZoom: 10,
-                        contain: true
+                        maxZoom: 10
                     }});
 
                     // Add custom controls
                     const controlsContainer = document.createElement("div");
-                    controlsContainer.className = "svg-pan-zoom_controls";
+                    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>
+                        <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>
                     `;
-                    containerElement.appendChild(controlsContainer);
+                    container.appendChild(controlsContainer);
 
-                    // Handle controls
-                    document.getElementById(`${{graph_id}}-zoom-in`).addEventListener("click", () => panZoom.zoomIn());
-                    document.getElementById(`${{graph_id}}-zoom-out`).addEventListener("click", () => panZoom.zoomOut());
+                    // 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", () => {{
-                        panZoom.resetZoom();
-                        panZoom.center();
+                        if (panZoomInstance) {{
+                            panZoomInstance.resetZoom();
+                            panZoomInstance.center();
+                        }}
                     }});
-                }}, 500);
+                }}, 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');
+                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
+
+#     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-5.3.4.13 → pyegeria-5.3.4.14}/pyegeria/test_m.html

@@ -1,42 +1,53 @@
 
-<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="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
+        <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;">
+                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]
@@ -136,79 +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/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
+        (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 containerElement = document.getElementById(`${graph_id}-container`);
-                
-                if (!containerElement) {
-                    console.error(`Container with ID "${graph_id}-container" not found.`);
+                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;
                 }
 
-                // Configure Mermaid
-                mermaid.initialize({ startOnLoad: false, logLevel: "debug" });
-                mermaid.init(undefined, `#${graph_id}`);
+                // 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 = containerElement.querySelector("svg");
+                    const svg = container.querySelector("svg");
                     if (!svg) {
-                        console.error(`SVG not rendered for ID "${graph_id}".`);
+                        console.error(`SVG not found for graph ID "${graph_id}"`);
                         return;
                     }
 
-                    // Set initial size
+                    // 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";
 
-                    // Initialize Pan-Zoom
-                    const panZoom = svgPanZoom(svg, {
+                    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,
+                        controlIconsEnabled: false, // Use custom controls
                         fit: true,
                         center: true,
+                        contain: true,
                         minZoom: 0.5,
-                        maxZoom: 10,
-                        contain: true
+                        maxZoom: 10
                     });
 
                     // Add custom controls
                     const controlsContainer = document.createElement("div");
-                    controlsContainer.className = "svg-pan-zoom_controls";
+                    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>
+                        <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>
                     `;
-                    containerElement.appendChild(controlsContainer);
+                    container.appendChild(controlsContainer);
 
-                    // Handle controls
-                    document.getElementById(`${graph_id}-zoom-in`).addEventListener("click", () => panZoom.zoomIn());
-                    document.getElementById(`${graph_id}-zoom-out`).addEventListener("click", () => panZoom.zoomOut());
+                    // 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", () => {
-                        panZoom.resetZoom();
-                        panZoom.center();
+                        if (panZoomInstance) {
+                            panZoomInstance.resetZoom();
+                            panZoomInstance.center();
+                        }
                     });
-                }, 500);
+                }, 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');
+                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.13 → pyegeria-5.3.4.14}/pyproject.toml

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