pyegeria 5.3.4.16__tar.gz → 5.3.4.17__tar.gz

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

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

{pyegeria-5.3.4.16 → pyegeria-5.3.4.17}/pyegeria/mermaid_utilities.py

@@ -236,163 +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">
-        {header_html}
-        <div id="{graph_id}" class="mermaid">
-            {escaped_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-5.3.4.17/pyegeria/test_m.html

@@ -0,0 +1,222 @@
+
+        <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-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-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>
+            
+    <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]
+fc2de77f-7320-48ea-8750-d434c6e870db@{ shape: text, label: "*Description*
+**A description of how a clinical trial is managed in Coco Pharmaceuticals.**"}
+37b8560d-84d4-434b-9b0d-105420fcc924@{ shape: subproc, label: "*Solution Component*
+**Certify Hospital**"}
+f37f3735-28a1-4e03-9ff5-3fe2f137f661@{ shape: trap-t, label: "*Solution Actor Role*
+**Clinical Trial Manager**"}
+f37f3735-28a1-4e03-9ff5-3fe2f137f661-->|"Certifier"|37b8560d-84d4-434b-9b0d-105420fcc924
+72a86eec-9734-4bc0-babb-4fec0aa7c9ff@{ shape: docs, label: "*Solution Component*
+**Assemble Treatment Assessment Report**"}
+48bc201e-3d4e-4beb-bdb2-0fd9d134f6d5@{ shape: rect, label: "*Solution Component*
+**Treatment Efficacy Evidence**"}
+48bc201e-3d4e-4beb-bdb2-0fd9d134f6d5-->|"Solution Linking Wire"|72a86eec-9734-4bc0-babb-4fec0aa7c9ff
+f37f3735-28a1-4e03-9ff5-3fe2f137f661-->|"Author"|72a86eec-9734-4bc0-babb-4fec0aa7c9ff
+b5c8da4c-f925-4cf1-8294-e43cd2c1a584@{ shape: rect, label: "*Solution Component*
+**Analyse Patient Data**"}
+b5c8da4c-f925-4cf1-8294-e43cd2c1a584-->|"Solution Linking Wire"|48bc201e-3d4e-4beb-bdb2-0fd9d134f6d5
+7f5dca65-50b4-4103-9ac7-3a406a09047a@{ shape: subproc, label: "*Solution Component*
+**Weekly Measurements Onboarding Pipeline**"}
+07705e15-efff-4f80-8992-f04ac85e0ef1@{ shape: rect, label: "*Solution Component*
+**Landing Folder Cataloguer**"}
+07705e15-efff-4f80-8992-f04ac85e0ef1-->|"Solution Linking Wire"|7f5dca65-50b4-4103-9ac7-3a406a09047a
+f37f3735-28a1-4e03-9ff5-3fe2f137f661-->|"Steward"|7f5dca65-50b4-4103-9ac7-3a406a09047a
+b0290339-c96c-4b05-904f-12fc98e54e14@{ shape: trap-t, label: "*Solution Actor Role*
+**Certified Data Engineer**"}
+b0290339-c96c-4b05-904f-12fc98e54e14-->|"Steward"|7f5dca65-50b4-4103-9ac7-3a406a09047a
+d48f579f-76d3-4c49-b1b4-575f5645a9d0@{ shape: lin-cyl, label: "*Solution Component*
+**Treatment Validation Sandbox**"}
+26c07ca4-3b8e-484b-812b-36c1ace4b275@{ shape: rect, label: "*Solution Component*
+**Populate Sandbox**"}
+26c07ca4-3b8e-484b-812b-36c1ace4b275-->|"Solution Linking Wire"|d48f579f-76d3-4c49-b1b4-575f5645a9d0
+ee2bb773-e630-4cf9-bdf1-7c2dd64fe4ec@{ shape: processes, label: "*Solution Component*
+**Hospital Processes**"}
+a8bd84ca-0aae-4534-b0e8-87e8659467a6@{ shape: trap-t, label: "*Solution Actor Role*
+**Clinical Trial Participating Hospital Coordinator**"}
+a8bd84ca-0aae-4534-b0e8-87e8659467a6-->|"Coordinator on behalf of hospital"|ee2bb773-e630-4cf9-bdf1-7c2dd64fe4ec
+30adaab5-8870-47a8-8ae9-facbf84cb05a@{ shape: trap-t, label: "*Solution Actor Role*
+**Clinical Trial Participating Hospital**"}
+30adaab5-8870-47a8-8ae9-facbf84cb05a-->|"Owner"|ee2bb773-e630-4cf9-bdf1-7c2dd64fe4ec
+d48f579f-76d3-4c49-b1b4-575f5645a9d0-->|"Solution Linking Wire"|b5c8da4c-f925-4cf1-8294-e43cd2c1a584
+ece17806-836c-4756-b3a2-2d12dde215f6@{ shape: trap-t, label: "*Solution Actor Role*
+**New Treatment Data Scientist**"}
+ece17806-836c-4756-b3a2-2d12dde215f6-->|"Data Analyser"|b5c8da4c-f925-4cf1-8294-e43cd2c1a584
+0c757e35-8a42-4d5f-b01b-c72a6cea65cc@{ shape: trap-t, label: "*Solution Actor Role*
+**New Treatment Researcher.**"}
+0c757e35-8a42-4d5f-b01b-c72a6cea65cc-->|"Results Interpreter"|b5c8da4c-f925-4cf1-8294-e43cd2c1a584
+e9c2f911-ffcb-40c6-aeee-8c4d43811576@{ shape: subproc, label: "*Solution Component*
+**Onboard Hospital**"}
+b0290339-c96c-4b05-904f-12fc98e54e14-->|"Initiator"|e9c2f911-ffcb-40c6-aeee-8c4d43811576
+849b0b42-f465-452b-813c-477d6398e082@{ shape: subproc, label: "*Solution Component*
+**Set up clinical trial**"}
+f37f3735-28a1-4e03-9ff5-3fe2f137f661-->|"Initiator"|849b0b42-f465-452b-813c-477d6398e082
+a5d4d638-6836-47e5-99d0-fdcde637e13f@{ shape: lin-cyl, label: "*Solution Component*
+**Weekly Measurements Data Lake Folder**"}
+7f5dca65-50b4-4103-9ac7-3a406a09047a-->|"Solution Linking Wire"|a5d4d638-6836-47e5-99d0-fdcde637e13f
+0bf2547c-937c-41b6-814f-6284849271a1@{ shape: odd, label: "*Solution Component*
+**Treatment Assessment Report Validation and Delivery**"}
+72a86eec-9734-4bc0-babb-4fec0aa7c9ff-->|"Solution Linking Wire"|0bf2547c-937c-41b6-814f-6284849271a1
+f6bc847b-868d-43cc-b767-41f5fe3e47d1@{ shape: trap-t, label: "*Solution Actor Role*
+**Clinical Trial Sponsor**"}
+f6bc847b-868d-43cc-b767-41f5fe3e47d1-->|"Reviewer"|0bf2547c-937c-41b6-814f-6284849271a1
+a5d4d638-6836-47e5-99d0-fdcde637e13f-->|"Solution Linking Wire"|26c07ca4-3b8e-484b-812b-36c1ace4b275
+fb32bef2-e79f-4893-b500-2e547f24d482@{ shape: subproc, label: "*Solution Component*
+**Set up Data Lake Folder**"}
+b0290339-c96c-4b05-904f-12fc98e54e14-->|"Initiator"|fb32bef2-e79f-4893-b500-2e547f24d482
+1c150d6e-30cf-481c-9afb-3b06c9c9e78f@{ shape: lin-cyl, label: "*Solution Component*
+**Hospital Landing Area Folder**"}
+ee2bb773-e630-4cf9-bdf1-7c2dd64fe4ec-->|"Solution Linking Wire"|1c150d6e-30cf-481c-9afb-3b06c9c9e78f
+1c150d6e-30cf-481c-9afb-3b06c9c9e78f-->|"Solution Linking Wire"|07705e15-efff-4f80-8992-f04ac85e0ef1
+11c7c850-c67c-41cc-9423-d74db47cbf3a@{ shape: subproc, label: "*Solution Component*
+**Nominate Hospital**"}
+f37f3735-28a1-4e03-9ff5-3fe2f137f661-->|"Initiator"|11c7c850-c67c-41cc-9423-d74db47cbf3a
+end
+style 48bc201e-3d4e-4beb-bdb2-0fd9d134f6d5 color:#FFFFFF, fill:#838cc7, stroke:#3079ab
+style ece17806-836c-4756-b3a2-2d12dde215f6 color:#FFFFFF, fill:#AA00FF, stroke:#E1D5E7
+style e9c2f911-ffcb-40c6-aeee-8c4d43811576 color:#FFFFFF, fill:#838cc7, stroke:#3079ab
+style a5d4d638-6836-47e5-99d0-fdcde637e13f color:#FFFFFF, fill:#838cc7, stroke:#3079ab
+style 0bf2547c-937c-41b6-814f-6284849271a1 color:#FFFFFF, fill:#838cc7, stroke:#3079ab
+style 30adaab5-8870-47a8-8ae9-facbf84cb05a color:#FFFFFF, fill:#AA00FF, stroke:#E1D5E7
+style b0290339-c96c-4b05-904f-12fc98e54e14 color:#FFFFFF, fill:#AA00FF, stroke:#E1D5E7
+style 26c07ca4-3b8e-484b-812b-36c1ace4b275 color:#FFFFFF, fill:#838cc7, stroke:#3079ab
+style 1c150d6e-30cf-481c-9afb-3b06c9c9e78f color:#FFFFFF, fill:#838cc7, stroke:#3079ab
+style 07705e15-efff-4f80-8992-f04ac85e0ef1 color:#FFFFFF, fill:#838cc7, stroke:#3079ab
+style a8bd84ca-0aae-4534-b0e8-87e8659467a6 color:#FFFFFF, fill:#AA00FF, stroke:#E1D5E7
+style 0c757e35-8a42-4d5f-b01b-c72a6cea65cc color:#FFFFFF, fill:#AA00FF, stroke:#E1D5E7
+style c4f8d707-7c85-4125-b5fd-c3257a2ef2ef color:#3079ab, fill:#b7c0c7, stroke:#3079ab
+style 37b8560d-84d4-434b-9b0d-105420fcc924 color:#FFFFFF, fill:#838cc7, stroke:#3079ab
+style 11c7c850-c67c-41cc-9423-d74db47cbf3a color:#FFFFFF, fill:#838cc7, stroke:#3079ab
+style fc2de77f-7320-48ea-8750-d434c6e870db color:#000000, fill:#F9F7ED, stroke:#b7c0c7
+style 849b0b42-f465-452b-813c-477d6398e082 color:#FFFFFF, fill:#838cc7, stroke:#3079ab
+style 7f5dca65-50b4-4103-9ac7-3a406a09047a color:#FFFFFF, fill:#838cc7, stroke:#3079ab
+style ee2bb773-e630-4cf9-bdf1-7c2dd64fe4ec color:#FFFFFF, fill:#838cc7, stroke:#3079ab
+style 72a86eec-9734-4bc0-babb-4fec0aa7c9ff color:#FFFFFF, fill:#838cc7, stroke:#3079ab
+style b5c8da4c-f925-4cf1-8294-e43cd2c1a584 color:#FFFFFF, fill:#838cc7, stroke:#3079ab
+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
+    </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 = "mermaid-graph-c4f8d707-7c85-4125-b5fd-c3257a2ef2ef-597f";
+
+            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>
+