pyegeria 5.3.4.6__py3-none-any.whl → 5.3.4.7.dev1__py3-none-any.whl

pyegeria/mermaid_utilities.py

@@ -235,107 +235,239 @@ def construct_mermaid_html(mermaid_str: str) -> str:
     escaped_header = html.escape(title_label) if title_label else ""  # Sanitize the header safely
     escaped_mermaid_code = html.escape(mermaid_code)
 
-    header_html = f"<h2 class='diagram-header'>{escaped_header}</h2>\nGUID: {guid}" if {title_label} else ""
+    # header_html = f"<h2 class='diagram-header'>{escaped_header}</h2>\nGUID: {guid}" if title_label else ""
+    # Header HTML (display only if header exists)
+    header_html = f"""
+        <h2 style="text-align: center; color: #007acc; margin-bottom: 16px;">
+            {escaped_header}
+        </h2>
+        """ if title_label else ""
 
     # Construct the HTML content with Mermaid.js initialization and zoom/pan support
+
+
     mermaid_html = f"""
-    <div class="diagram-container" style="width: 90%; max-width: 800px; margin: auto; padding: 20px; background: white; border: 1px solid #ddd; border-radius: 12px; position: relative;">
+    <div id="{graph_id}-container" class="diagram-container" 
+         style="width: 90%; max-width: 800px; margin: auto; padding: 20px; 
+                background: white; border: 1px solid #ddd; 
+                border-radius: 12px; position: relative;">
         {header_html}
-        <div class="pan-zoom-container" style="width: 100%; height: 500px; overflow: hidden; position: relative; background: #f9f9f9; border: 1px solid #ccc; cursor: grab;">
-            <div id="{graph_id}" class="mermaid pan-zoom-content" style="position: absolute; transform-origin: 0 0; cursor: grab;">
+        <div class="pan-zoom-container" 
+             style="width: 100%; height: 500px; overflow: hidden; 
+                    position: relative; background: #f9f9f9; 
+                    border: 1px solid #ccc; cursor: grab;">
+            <div id="pz-{graph_id}" class="mermaid pan-zoom-content" 
+                 style="position: absolute; transform-origin: 0 0;">
                 {escaped_mermaid_code}
             </div>
         </div>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+
     <script>
-        // Initialize Mermaid.js and set up pan/zoom
-        mermaid.initialize({{ startOnLoad: true }});
-
-        const container = document.querySelector('.pan-zoom-container');
-        const content = document.querySelector('.pan-zoom-content');
-        const rect = content.getBoundingClientRect();
-
-        let scale = 1; // Current zoom level
-        let panX = 0;  // X-axis pan offset
-        let panY = 0;  // Y-axis pan offset
-        let isDragging = false;
-        let startX, startY;
-
-        // Helper: Apply transformations
-        const applyTransform = () => {{
-            content.style.transform = `translate(${{panX}}px, ${{panY}}px) scale(${{scale}})`;
-        }};
-
-        // Helper: Center the diagram and fit it to the container
-        const centerAndFitDiagram = () => {{
-            const containerRect = container.getBoundingClientRect();
-            const rect = content.getBoundingClientRect();
-
-            scale = Math.min(
-                containerRect.width / rect.width,
-                containerRect.height / rect.height
-            );
-
-            panX = (containerRect.width - rect.width * scale) / 2;
-            panY = (containerRect.height - rect.height * scale) / 2;
-
-            applyTransform();
-            console.log("Diagram centered and fitted.");
-        }};
-
-        // Add zoom functionality
-        container.addEventListener('wheel', function(event) {{
-            event.preventDefault();
-            const zoomSpeed = 0.1;
-            const previousScale = scale;
-
-            if (event.deltaY < 0) {{
-                scale = Math.min(scale + zoomSpeed, 4);
+        (function() {{
+            // Check if Mermaid.js is already loaded; load if not
+            if (typeof mermaid === "undefined") {{
+                const script = document.createElement('script');
+                script.src = "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js";
+                script.onload = () => initializeMermaid();
+                document.head.appendChild(script);
             }} else {{
-                scale = Math.max(scale - zoomSpeed, 0.5);
+                initializeMermaid();
             }}
 
-            const zoomRatio = scale / previousScale;
-            panX -= (event.clientX - container.getBoundingClientRect().left) * (zoomRatio - 1);
-            panY -= (event.clientY - container.getBoundingClientRect().top) * (zoomRatio - 1);
-
-            applyTransform();
-        }});
-
-        // Add drag functionality for panning
-        container.addEventListener('mousedown', function(event) {{
-            isDragging = true;
-            startX = event.clientX - panX;
-            startY = event.clientY - panY;
-            container.style.cursor = "grabbing";
-        }});
-
-        container.addEventListener('mousemove', function(event) {{
-            if (!isDragging) return;
-
-            panX = event.clientX - startX;
-            panY = event.clientY - startY;
-
-            applyTransform();
-        }});
-
-        container.addEventListener('mouseup', function() {{
-            isDragging = false;
-            container.style.cursor = "grab";
-        }});
-
-        container.addEventListener('mouseleave', function() {{
-            isDragging = false;
-            container.style.cursor = "grab";
-        }});
-
-        // Center diagram after rendering by Mermaid
-        setTimeout(centerAndFitDiagram, 200);
+            function initializeMermaid() {{
+                // Re-render the Mermaid chart
+                mermaid.initialize({{ startOnLoad: true }});
+                mermaid.init(undefined, document.querySelector("#pz-{graph_id}"));
+
+                // Add interactivity for pan and zoom
+                const container = document.querySelector('.pan-zoom-container');
+                const content = document.querySelector('.pan-zoom-content');
+
+                let scale = 1;  // Current zoom level
+                let panX = 0;   // X-axis pan
+                let panY = 0;   // Y-axis pan
+                let isDragging = false;
+                let startX, startY;
+
+                // Apply Transformations
+                const applyTransform = () => {{
+                    content.style.transform = `translate(${{panX}}px, ${{panY}}px) scale(${{scale}})`;
+                }};
+
+                // Center Diagram on Load
+                const centerAndFitDiagram = () => {{
+                    const containerRect = container.getBoundingClientRect();
+                    const rect = content.getBoundingClientRect();
+
+                    scale = Math.min(
+                        containerRect.width / rect.width,
+                        containerRect.height / rect.height
+                    );
+
+                    panX = (containerRect.width - rect.width * scale) / 2;
+                    panY = (containerRect.height - rect.height * scale) / 2;
+
+                    applyTransform();
+                }};
+
+                setTimeout(centerAndFitDiagram, 200); // Allow rendering time
+
+                // Enable Mouse-Wheel Zoom
+                container.addEventListener('wheel', (event) => {{
+                    event.preventDefault();
+                    const zoomSpeed = 0.1;
+                    const previousScale = scale;
+
+                    if (event.deltaY < 0) {{
+                        scale = Math.min(scale + zoomSpeed, 4);
+                    }} else {{
+                        scale = Math.max(scale - zoomSpeed, 0.5);
+                    }}
+
+                    const zoomRatio = scale / previousScale;
+                    const clientRect = container.getBoundingClientRect();
+
+                    panX -= (event.clientX - clientRect.left) * (zoomRatio - 1);
+                    panY -= (event.clientY - clientRect.top) * (zoomRatio - 1);
+
+                    applyTransform();
+                }});
+
+                // Enable Drag-to-Pan
+                container.addEventListener('mousedown', (event) => {{
+                    isDragging = true;
+                    startX = event.clientX - panX;
+                    startY = event.clientY - panY;
+                    container.style.cursor = "grabbing";
+                }});
+
+                container.addEventListener('mousemove', (event) => {{
+                    if (!isDragging) return;
+
+                    panX = event.clientX - startX;
+                    panY = event.clientY - startY;
+
+                    applyTransform();
+                }});
+
+                container.addEventListener('mouseup', () => {{
+                    isDragging = false;
+                    container.style.cursor = "grab";
+                }});
+
+                container.addEventListener('mouseleave', () => {{
+                    isDragging = false;
+                    container.style.cursor = "grab";
+                }});
+            }}
+        }})();
     </script>
-"""
 
+    """
     return mermaid_html
+    # mermaid_html = f"""
+    #     <h2 style="text-align: center; color: #007acc; margin-bottom: 16px;">
+    #         {escaped_header}
+    #     </h2>
+#         """ if header else ""
+# #     <div class="diagram-container" style="width: 90%; max-width: 800px; margin: auto; padding: 20px; background: white; border: 1px solid #ddd; border-radius: 12px; position: relative;">
+# #         {header_html}
+# #         <div class="pan-zoom-container" style="width: 100%; height: 500px; overflow: hidden; position: relative; background: #f9f9f9; border: 1px solid #ccc; cursor: grab;">
+# #             <div id="{graph_id}" class="mermaid pan-zoom-content" style="position: absolute; transform-origin: 0 0; cursor: grab;">
+# #                 {escaped_mermaid_code}
+# #             </div>
+# #         </div>
+# #     </div>
+# #     <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+# #     <script>
+# #         // Initialize Mermaid.js and set up pan/zoom
+# #         mermaid.initialize({{ startOnLoad: true }});
+# #
+# #         const container = document.querySelector('.pan-zoom-container');
+# #         const content = document.querySelector('.pan-zoom-content');
+# #         const rect = content.getBoundingClientRect();
+# #
+# #         let scale = 1; // Current zoom level
+# #         let panX = 0;  // X-axis pan offset
+# #         let panY = 0;  // Y-axis pan offset
+# #         let isDragging = false;
+# #         let startX, startY;
+# #
+# #         // Helper: Apply transformations
+# #         const applyTransform = () => {{
+# #             content.style.transform = `translate(${{panX}}px, ${{panY}}px) scale(${{scale}})`;
+# #         }};
+# #
+# #         // Helper: Center the diagram and fit it to the container
+# #         const centerAndFitDiagram = () => {{
+# #             const containerRect = container.getBoundingClientRect();
+# #             const rect = content.getBoundingClientRect();
+# #
+# #             scale = Math.min(
+# #                 containerRect.width / rect.width,
+# #                 containerRect.height / rect.height
+# #             );
+# #
+# #             panX = (containerRect.width - rect.width * scale) / 2;
+# #             panY = (containerRect.height - rect.height * scale) / 2;
+# #
+# #             applyTransform();
+# #             console.log("Diagram centered and fitted.");
+# #         }};
+# #
+# #         // Add zoom functionality
+# #         container.addEventListener('wheel', function(event) {{
+# #             event.preventDefault();
+# #             const zoomSpeed = 0.1;
+# #             const previousScale = scale;
+# #
+# #             if (event.deltaY < 0) {{
+# #                 scale = Math.min(scale + zoomSpeed, 4);
+# #             }} else {{
+# #                 scale = Math.max(scale - zoomSpeed, 0.5);
+# #             }}
+# #
+# #             const zoomRatio = scale / previousScale;
+# #             panX -= (event.clientX - container.getBoundingClientRect().left) * (zoomRatio - 1);
+# #             panY -= (event.clientY - container.getBoundingClientRect().top) * (zoomRatio - 1);
+# #
+# #             applyTransform();
+# #         }});
+# #
+# #         // Add drag functionality for panning
+# #         container.addEventListener('mousedown', function(event) {{
+# #             isDragging = true;
+# #             startX = event.clientX - panX;
+# #             startY = event.clientY - panY;
+# #             container.style.cursor = "grabbing";
+# #         }});
+# #
+# #         container.addEventListener('mousemove', function(event) {{
+# #             if (!isDragging) return;
+# #
+# #             panX = event.clientX - startX;
+# #             panY = event.clientY - startY;
+# #
+# #             applyTransform();
+# #         }});
+# #
+# #         container.addEventListener('mouseup', function() {{
+# #             isDragging = false;
+# #             container.style.cursor = "grab";
+# #         }});
+# #
+# #         container.addEventListener('mouseleave', function() {{
+# #             isDragging = false;
+# #             container.style.cursor = "grab";
+# #         }});
+# #
+# #         // Center diagram after rendering by Mermaid
+# #         setTimeout(centerAndFitDiagram, 200);
+# #     </script>
+# # """
+#
+#     return mermaid_html
 
 
 

pyegeria/test_m.html

@@ -1,9 +1,19 @@
 
-    <div class="diagram-container" style="width: 90%; max-width: 800px; margin: auto; padding: 20px; background: white; border: 1px solid #ddd; border-radius: 12px; position: relative;">
-        <h2 class='diagram-header'>Component for Solution Blueprint - Clinical Trial Management Solution Blueprint </h2>
-GUID: c4f8d707-7c85-4125-b5fd-c3257a2ef2ef
-        <div class="pan-zoom-container" style="width: 100%; height: 500px; overflow: hidden; position: relative; background: #f9f9f9; border: 1px solid #ccc; cursor: grab;">
-            <div id="Component_for_Solution_Blueprint_-_Clinical_Trial_Management_Solution_Blueprint_" class="mermaid pan-zoom-content" style="position: absolute; transform-origin: 0 0; cursor: grab;">
+    <div id="Component_for_Solution_Blueprint_-_Clinical_Trial_Management_Solution_Blueprint_-container" class="diagram-container" 
+         style="width: 90%; max-width: 800px; margin: auto; padding: 20px; 
+                background: white; border: 1px solid #ddd; 
+                border-radius: 12px; position: relative;">
+        
+        <h2 style="text-align: center; color: #007acc; margin-bottom: 16px;">
+            Component for Solution Blueprint - Clinical Trial Management Solution Blueprint 
+        </h2>
+        
+        <div class="pan-zoom-container" 
+             style="width: 100%; height: 500px; overflow: hidden; 
+                    position: relative; background: #f9f9f9; 
+                    border: 1px solid #ccc; cursor: grab;">
+            <div id="Component_for_Solution_Blueprint_-_Clinical_Trial_Management_Solution_Blueprint_" class="mermaid pan-zoom-content" 
+                 style="position: absolute; transform-origin: 0 0;">
                 flowchart TD
 %%{init: {&quot;flowchart&quot;: {&quot;htmlLabels&quot;: false}} }%%
 
@@ -108,89 +118,106 @@ style fb32bef2-e79f-4893-b500-2e547f24d482 color:#FFFFFF, fill:#838cc7, stroke:#
             </div>
         </div>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+
     <script>
-        // Initialize Mermaid.js and set up pan/zoom
-        mermaid.initialize({ startOnLoad: true });
-
-        const container = document.querySelector('.pan-zoom-container');
-        const content = document.querySelector('.pan-zoom-content');
-        const rect = content.getBoundingClientRect();
-
-        let scale = 1; // Current zoom level
-        let panX = 0;  // X-axis pan offset
-        let panY = 0;  // Y-axis pan offset
-        let isDragging = false;
-        let startX, startY;
-
-        // Helper: Apply transformations
-        const applyTransform = () => {
-            content.style.transform = `translate(${panX}px, ${panY}px) scale(${scale})`;
-        };
-
-        // Helper: Center the diagram and fit it to the container
-        const centerAndFitDiagram = () => {
-            const containerRect = container.getBoundingClientRect();
-            const rect = content.getBoundingClientRect();
-
-            scale = Math.min(
-                containerRect.width / rect.width,
-                containerRect.height / rect.height
-            );
-
-            panX = (containerRect.width - rect.width * scale) / 2;
-            panY = (containerRect.height - rect.height * scale) / 2;
-
-            applyTransform();
-            console.log("Diagram centered and fitted.");
-        };
-
-        // Add zoom functionality
-        container.addEventListener('wheel', function(event) {
-            event.preventDefault();
-            const zoomSpeed = 0.1;
-            const previousScale = scale;
-
-            if (event.deltaY < 0) {
-                scale = Math.min(scale + zoomSpeed, 4);
+        (function() {
+            // Check if Mermaid.js is already loaded; load if not
+            if (typeof mermaid === "undefined") {
+                const script = document.createElement('script');
+                script.src = "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js";
+                script.onload = () => initializeMermaid();
+                document.head.appendChild(script);
             } else {
-                scale = Math.max(scale - zoomSpeed, 0.5);
+                initializeMermaid();
             }
 
-            const zoomRatio = scale / previousScale;
-            panX -= (event.clientX - container.getBoundingClientRect().left) * (zoomRatio - 1);
-            panY -= (event.clientY - container.getBoundingClientRect().top) * (zoomRatio - 1);
-
-            applyTransform();
-        });
-
-        // Add drag functionality for panning
-        container.addEventListener('mousedown', function(event) {
-            isDragging = true;
-            startX = event.clientX - panX;
-            startY = event.clientY - panY;
-            container.style.cursor = "grabbing";
-        });
-
-        container.addEventListener('mousemove', function(event) {
-            if (!isDragging) return;
-
-            panX = event.clientX - startX;
-            panY = event.clientY - startY;
-
-            applyTransform();
-        });
-
-        container.addEventListener('mouseup', function() {
-            isDragging = false;
-            container.style.cursor = "grab";
-        });
-
-        container.addEventListener('mouseleave', function() {
-            isDragging = false;
-            container.style.cursor = "grab";
-        });
-
-        // Center diagram after rendering by Mermaid
-        setTimeout(centerAndFitDiagram, 200);
+            function initializeMermaid() {
+                // Re-render the Mermaid chart
+                mermaid.initialize({ startOnLoad: true });
+                mermaid.init(undefined, document.querySelector("#Component_for_Solution_Blueprint_-_Clinical_Trial_Management_Solution_Blueprint_"));
+
+                // Add interactivity for pan and zoom
+                const container = document.querySelector('.pan-zoom-container');
+                const content = document.querySelector('.pan-zoom-content');
+
+                let scale = 1;  // Current zoom level
+                let panX = 0;   // X-axis pan
+                let panY = 0;   // Y-axis pan
+                let isDragging = false;
+                let startX, startY;
+
+                // Apply Transformations
+                const applyTransform = () => {
+                    content.style.transform = `translate(${panX}px, ${panY}px) scale(${scale})`;
+                };
+
+                // Center Diagram on Load
+                const centerAndFitDiagram = () => {
+                    const containerRect = container.getBoundingClientRect();
+                    const rect = content.getBoundingClientRect();
+
+                    scale = Math.min(
+                        containerRect.width / rect.width,
+                        containerRect.height / rect.height
+                    );
+
+                    panX = (containerRect.width - rect.width * scale) / 2;
+                    panY = (containerRect.height - rect.height * scale) / 2;
+
+                    applyTransform();
+                };
+
+                setTimeout(centerAndFitDiagram, 200); // Allow rendering time
+
+                // Enable Mouse-Wheel Zoom
+                container.addEventListener('wheel', (event) => {
+                    event.preventDefault();
+                    const zoomSpeed = 0.1;
+                    const previousScale = scale;
+
+                    if (event.deltaY < 0) {
+                        scale = Math.min(scale + zoomSpeed, 4);
+                    } else {
+                        scale = Math.max(scale - zoomSpeed, 0.5);
+                    }
+
+                    const zoomRatio = scale / previousScale;
+                    const clientRect = container.getBoundingClientRect();
+
+                    panX -= (event.clientX - clientRect.left) * (zoomRatio - 1);
+                    panY -= (event.clientY - clientRect.top) * (zoomRatio - 1);
+
+                    applyTransform();
+                });
+
+                // Enable Drag-to-Pan
+                container.addEventListener('mousedown', (event) => {
+                    isDragging = true;
+                    startX = event.clientX - panX;
+                    startY = event.clientY - panY;
+                    container.style.cursor = "grabbing";
+                });
+
+                container.addEventListener('mousemove', (event) => {
+                    if (!isDragging) return;
+
+                    panX = event.clientX - startX;
+                    panY = event.clientY - startY;
+
+                    applyTransform();
+                });
+
+                container.addEventListener('mouseup', () => {
+                    isDragging = false;
+                    container.style.cursor = "grab";
+                });
+
+                container.addEventListener('mouseleave', () => {
+                    isDragging = false;
+                    container.style.cursor = "grab";
+                });
+            }
+        })();
     </script>
+
+