pyegeria 5.3.4.5__py3-none-any.whl → 5.3.4.7__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. pyegeria/mermaid_utilities.py +167 -113
  2. pyegeria/test_m.html +131 -181
  3. pyegeria/test_m1.html +273 -0
  4. pyegeria/test_mer.ipynb +596 -0
  5. {pyegeria-5.3.4.5.dist-info → pyegeria-5.3.4.7.dist-info}/METADATA +1 -1
  6. {pyegeria-5.3.4.5.dist-info → pyegeria-5.3.4.7.dist-info}/RECORD +9 -7
  7. {pyegeria-5.3.4.5.dist-info → pyegeria-5.3.4.7.dist-info}/LICENSE +0 -0
  8. {pyegeria-5.3.4.5.dist-info → pyegeria-5.3.4.7.dist-info}/WHEEL +0 -0
  9. {pyegeria-5.3.4.5.dist-info → pyegeria-5.3.4.7.dist-info}/entry_points.txt +0 -0
pyegeria/test_m.html CHANGED
@@ -1,140 +1,94 @@
1
1
 
2
- <!DOCTYPE html>
3
- <html lang="en">
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Mermaid Diagram with Centered Pan and Zoom</title>
8
- <!-- Load Mermaid.js -->
9
- <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
10
- <style>
11
- body {
12
- font-family: Arial, sans-serif;
13
- background-color: #f4f4f4;
14
- margin: 0;
15
- padding: 0;
16
- display: flex;
17
- justify-content: center;
18
- align-items: center;
19
- height: 100vh;
20
- }
21
- .diagram-container {
22
- width: 90%;
23
- max-width: 800px;
24
- padding: 20px;
25
- border: 1px solid #ddd;
26
- border-radius: 12px;
27
- background-color: white;
28
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
29
- text-align: center;
30
- position: relative;
31
- }
32
- .diagram-header {
33
- margin-bottom: 20px;
34
- font-size: 1.8rem;
35
- font-weight: bold;
36
- color: #007acc;
37
- }
38
- .pan-zoom-container {
39
- position: relative;
40
- width: 100%;
41
- height: 500px;
42
- overflow: hidden;
43
- border: 1px solid #ccc;
44
- background-color: #f9f9f9;
45
- cursor: grab;
46
- }
47
- .pan-zoom-content {
48
- position: absolute;
49
- transform-origin: 0 0;
50
- cursor: grab;
51
- }
52
- .pan-zoom-content:active {
53
- cursor: grabbing;
54
- }
55
- </style>
56
- </head>
57
- <body>
58
- <div class="diagram-container">
59
- <h2 class='diagram-header'>Component for Solution Blueprint - Clinical Trial Management Solution Blueprint </h2>
60
- GUID: c4f8d707-7c85-4125-b5fd-c3257a2ef2ef
61
- <div class="pan-zoom-container">
62
- <div id="Component_for_Solution_Blueprint_-_Clinical_Trial_Management_Solution_Blueprint_" class="mermaid pan-zoom-content">
63
- flowchart TD
64
- %%{init: {"flowchart": {"htmlLabels": false}} }%%
2
+ <div id="Component_for_Solution_Blueprint_-_Clinical_Trial_Management_Solution_Blueprint_-container" class="diagram-container"
3
+ style="width: 90%; max-width: 800px; margin: auto; padding: 20px;
4
+ background: white; border: 1px solid #ddd;
5
+ border-radius: 12px; position: relative;">
6
+
7
+ <h2 style="text-align: center; color: #007acc; margin-bottom: 16px;">
8
+ Component for Solution Blueprint - Clinical Trial Management Solution Blueprint
9
+ </h2>
10
+
11
+ <div class="pan-zoom-container"
12
+ style="width: 100%; height: 500px; overflow: hidden;
13
+ position: relative; background: #f9f9f9;
14
+ border: 1px solid #ccc; cursor: grab;">
15
+ <div id="Component_for_Solution_Blueprint_-_Clinical_Trial_Management_Solution_Blueprint_" class="mermaid pan-zoom-content"
16
+ style="position: absolute; transform-origin: 0 0;">
17
+ flowchart TD
18
+ %%{init: {&quot;flowchart&quot;: {&quot;htmlLabels&quot;: false}} }%%
65
19
 
66
20
  subgraph c4f8d707-7c85-4125-b5fd-c3257a2ef2ef [Components and Actors]
67
- fc2de77f-7320-48ea-8750-d434c6e870db@{ shape: text, label: "*Description*
68
- **A description of how a clinical trial is managed in Coco Pharmaceuticals.**"}
69
- 37b8560d-84d4-434b-9b0d-105420fcc924@{ shape: subproc, label: "*Solution Component*
70
- **Certify Hospital**"}
71
- f37f3735-28a1-4e03-9ff5-3fe2f137f661@{ shape: trap-t, label: "*Solution Actor Role*
72
- **Clinical Trial Manager**"}
73
- f37f3735-28a1-4e03-9ff5-3fe2f137f661-->|"Certifier"|37b8560d-84d4-434b-9b0d-105420fcc924
74
- 72a86eec-9734-4bc0-babb-4fec0aa7c9ff@{ shape: docs, label: "*Solution Component*
75
- **Assemble Treatment Assessment Report**"}
76
- 48bc201e-3d4e-4beb-bdb2-0fd9d134f6d5@{ shape: rect, label: "*Solution Component*
77
- **Treatment Efficacy Evidence**"}
78
- 48bc201e-3d4e-4beb-bdb2-0fd9d134f6d5-->|"Solution Linking Wire"|72a86eec-9734-4bc0-babb-4fec0aa7c9ff
79
- f37f3735-28a1-4e03-9ff5-3fe2f137f661-->|"Author"|72a86eec-9734-4bc0-babb-4fec0aa7c9ff
80
- b5c8da4c-f925-4cf1-8294-e43cd2c1a584@{ shape: rect, label: "*Solution Component*
81
- **Analyse Patient Data**"}
82
- b5c8da4c-f925-4cf1-8294-e43cd2c1a584-->|"Solution Linking Wire"|48bc201e-3d4e-4beb-bdb2-0fd9d134f6d5
83
- 7f5dca65-50b4-4103-9ac7-3a406a09047a@{ shape: subproc, label: "*Solution Component*
84
- **Weekly Measurements Onboarding Pipeline**"}
85
- 07705e15-efff-4f80-8992-f04ac85e0ef1@{ shape: rect, label: "*Solution Component*
86
- **Landing Folder Cataloguer**"}
87
- 07705e15-efff-4f80-8992-f04ac85e0ef1-->|"Solution Linking Wire"|7f5dca65-50b4-4103-9ac7-3a406a09047a
88
- f37f3735-28a1-4e03-9ff5-3fe2f137f661-->|"Steward"|7f5dca65-50b4-4103-9ac7-3a406a09047a
89
- b0290339-c96c-4b05-904f-12fc98e54e14@{ shape: trap-t, label: "*Solution Actor Role*
90
- **Certified Data Engineer**"}
91
- b0290339-c96c-4b05-904f-12fc98e54e14-->|"Steward"|7f5dca65-50b4-4103-9ac7-3a406a09047a
92
- d48f579f-76d3-4c49-b1b4-575f5645a9d0@{ shape: lin-cyl, label: "*Solution Component*
93
- **Treatment Validation Sandbox**"}
94
- 26c07ca4-3b8e-484b-812b-36c1ace4b275@{ shape: rect, label: "*Solution Component*
95
- **Populate Sandbox**"}
96
- 26c07ca4-3b8e-484b-812b-36c1ace4b275-->|"Solution Linking Wire"|d48f579f-76d3-4c49-b1b4-575f5645a9d0
97
- ee2bb773-e630-4cf9-bdf1-7c2dd64fe4ec@{ shape: processes, label: "*Solution Component*
98
- **Hospital Processes**"}
99
- a8bd84ca-0aae-4534-b0e8-87e8659467a6@{ shape: trap-t, label: "*Solution Actor Role*
100
- **Clinical Trial Participating Hospital Coordinator**"}
101
- a8bd84ca-0aae-4534-b0e8-87e8659467a6-->|"Coordinator on behalf of hospital"|ee2bb773-e630-4cf9-bdf1-7c2dd64fe4ec
102
- 30adaab5-8870-47a8-8ae9-facbf84cb05a@{ shape: trap-t, label: "*Solution Actor Role*
103
- **Clinical Trial Participating Hospital**"}
104
- 30adaab5-8870-47a8-8ae9-facbf84cb05a-->|"Owner"|ee2bb773-e630-4cf9-bdf1-7c2dd64fe4ec
105
- d48f579f-76d3-4c49-b1b4-575f5645a9d0-->|"Solution Linking Wire"|b5c8da4c-f925-4cf1-8294-e43cd2c1a584
106
- ece17806-836c-4756-b3a2-2d12dde215f6@{ shape: trap-t, label: "*Solution Actor Role*
107
- **New Treatment Data Scientist**"}
108
- ece17806-836c-4756-b3a2-2d12dde215f6-->|"Data Analyser"|b5c8da4c-f925-4cf1-8294-e43cd2c1a584
109
- 0c757e35-8a42-4d5f-b01b-c72a6cea65cc@{ shape: trap-t, label: "*Solution Actor Role*
110
- **New Treatment Researcher.**"}
111
- 0c757e35-8a42-4d5f-b01b-c72a6cea65cc-->|"Results Interpreter"|b5c8da4c-f925-4cf1-8294-e43cd2c1a584
112
- e9c2f911-ffcb-40c6-aeee-8c4d43811576@{ shape: subproc, label: "*Solution Component*
113
- **Onboard Hospital**"}
114
- b0290339-c96c-4b05-904f-12fc98e54e14-->|"Initiator"|e9c2f911-ffcb-40c6-aeee-8c4d43811576
115
- 849b0b42-f465-452b-813c-477d6398e082@{ shape: subproc, label: "*Solution Component*
116
- **Set up clinical trial**"}
117
- f37f3735-28a1-4e03-9ff5-3fe2f137f661-->|"Initiator"|849b0b42-f465-452b-813c-477d6398e082
118
- a5d4d638-6836-47e5-99d0-fdcde637e13f@{ shape: lin-cyl, label: "*Solution Component*
119
- **Weekly Measurements Data Lake Folder**"}
120
- 7f5dca65-50b4-4103-9ac7-3a406a09047a-->|"Solution Linking Wire"|a5d4d638-6836-47e5-99d0-fdcde637e13f
121
- 0bf2547c-937c-41b6-814f-6284849271a1@{ shape: odd, label: "*Solution Component*
122
- **Treatment Assessment Report Validation and Delivery**"}
123
- 72a86eec-9734-4bc0-babb-4fec0aa7c9ff-->|"Solution Linking Wire"|0bf2547c-937c-41b6-814f-6284849271a1
124
- f6bc847b-868d-43cc-b767-41f5fe3e47d1@{ shape: trap-t, label: "*Solution Actor Role*
125
- **Clinical Trial Sponsor**"}
126
- f6bc847b-868d-43cc-b767-41f5fe3e47d1-->|"Reviewer"|0bf2547c-937c-41b6-814f-6284849271a1
127
- a5d4d638-6836-47e5-99d0-fdcde637e13f-->|"Solution Linking Wire"|26c07ca4-3b8e-484b-812b-36c1ace4b275
128
- fb32bef2-e79f-4893-b500-2e547f24d482@{ shape: subproc, label: "*Solution Component*
129
- **Set up Data Lake Folder**"}
130
- b0290339-c96c-4b05-904f-12fc98e54e14-->|"Initiator"|fb32bef2-e79f-4893-b500-2e547f24d482
131
- 1c150d6e-30cf-481c-9afb-3b06c9c9e78f@{ shape: lin-cyl, label: "*Solution Component*
132
- **Hospital Landing Area Folder**"}
133
- ee2bb773-e630-4cf9-bdf1-7c2dd64fe4ec-->|"Solution Linking Wire"|1c150d6e-30cf-481c-9afb-3b06c9c9e78f
134
- 1c150d6e-30cf-481c-9afb-3b06c9c9e78f-->|"Solution Linking Wire"|07705e15-efff-4f80-8992-f04ac85e0ef1
135
- 11c7c850-c67c-41cc-9423-d74db47cbf3a@{ shape: subproc, label: "*Solution Component*
136
- **Nominate Hospital**"}
137
- f37f3735-28a1-4e03-9ff5-3fe2f137f661-->|"Initiator"|11c7c850-c67c-41cc-9423-d74db47cbf3a
21
+ fc2de77f-7320-48ea-8750-d434c6e870db@{ shape: text, label: &quot;*Description*
22
+ **A description of how a clinical trial is managed in Coco Pharmaceuticals.**&quot;}
23
+ 37b8560d-84d4-434b-9b0d-105420fcc924@{ shape: subproc, label: &quot;*Solution Component*
24
+ **Certify Hospital**&quot;}
25
+ f37f3735-28a1-4e03-9ff5-3fe2f137f661@{ shape: trap-t, label: &quot;*Solution Actor Role*
26
+ **Clinical Trial Manager**&quot;}
27
+ f37f3735-28a1-4e03-9ff5-3fe2f137f661--&gt;|&quot;Certifier&quot;|37b8560d-84d4-434b-9b0d-105420fcc924
28
+ 72a86eec-9734-4bc0-babb-4fec0aa7c9ff@{ shape: docs, label: &quot;*Solution Component*
29
+ **Assemble Treatment Assessment Report**&quot;}
30
+ 48bc201e-3d4e-4beb-bdb2-0fd9d134f6d5@{ shape: rect, label: &quot;*Solution Component*
31
+ **Treatment Efficacy Evidence**&quot;}
32
+ 48bc201e-3d4e-4beb-bdb2-0fd9d134f6d5--&gt;|&quot;Solution Linking Wire&quot;|72a86eec-9734-4bc0-babb-4fec0aa7c9ff
33
+ f37f3735-28a1-4e03-9ff5-3fe2f137f661--&gt;|&quot;Author&quot;|72a86eec-9734-4bc0-babb-4fec0aa7c9ff
34
+ b5c8da4c-f925-4cf1-8294-e43cd2c1a584@{ shape: rect, label: &quot;*Solution Component*
35
+ **Analyse Patient Data**&quot;}
36
+ b5c8da4c-f925-4cf1-8294-e43cd2c1a584--&gt;|&quot;Solution Linking Wire&quot;|48bc201e-3d4e-4beb-bdb2-0fd9d134f6d5
37
+ 7f5dca65-50b4-4103-9ac7-3a406a09047a@{ shape: subproc, label: &quot;*Solution Component*
38
+ **Weekly Measurements Onboarding Pipeline**&quot;}
39
+ 07705e15-efff-4f80-8992-f04ac85e0ef1@{ shape: rect, label: &quot;*Solution Component*
40
+ **Landing Folder Cataloguer**&quot;}
41
+ 07705e15-efff-4f80-8992-f04ac85e0ef1--&gt;|&quot;Solution Linking Wire&quot;|7f5dca65-50b4-4103-9ac7-3a406a09047a
42
+ f37f3735-28a1-4e03-9ff5-3fe2f137f661--&gt;|&quot;Steward&quot;|7f5dca65-50b4-4103-9ac7-3a406a09047a
43
+ b0290339-c96c-4b05-904f-12fc98e54e14@{ shape: trap-t, label: &quot;*Solution Actor Role*
44
+ **Certified Data Engineer**&quot;}
45
+ b0290339-c96c-4b05-904f-12fc98e54e14--&gt;|&quot;Steward&quot;|7f5dca65-50b4-4103-9ac7-3a406a09047a
46
+ d48f579f-76d3-4c49-b1b4-575f5645a9d0@{ shape: lin-cyl, label: &quot;*Solution Component*
47
+ **Treatment Validation Sandbox**&quot;}
48
+ 26c07ca4-3b8e-484b-812b-36c1ace4b275@{ shape: rect, label: &quot;*Solution Component*
49
+ **Populate Sandbox**&quot;}
50
+ 26c07ca4-3b8e-484b-812b-36c1ace4b275--&gt;|&quot;Solution Linking Wire&quot;|d48f579f-76d3-4c49-b1b4-575f5645a9d0
51
+ ee2bb773-e630-4cf9-bdf1-7c2dd64fe4ec@{ shape: processes, label: &quot;*Solution Component*
52
+ **Hospital Processes**&quot;}
53
+ a8bd84ca-0aae-4534-b0e8-87e8659467a6@{ shape: trap-t, label: &quot;*Solution Actor Role*
54
+ **Clinical Trial Participating Hospital Coordinator**&quot;}
55
+ a8bd84ca-0aae-4534-b0e8-87e8659467a6--&gt;|&quot;Coordinator on behalf of hospital&quot;|ee2bb773-e630-4cf9-bdf1-7c2dd64fe4ec
56
+ 30adaab5-8870-47a8-8ae9-facbf84cb05a@{ shape: trap-t, label: &quot;*Solution Actor Role*
57
+ **Clinical Trial Participating Hospital**&quot;}
58
+ 30adaab5-8870-47a8-8ae9-facbf84cb05a--&gt;|&quot;Owner&quot;|ee2bb773-e630-4cf9-bdf1-7c2dd64fe4ec
59
+ d48f579f-76d3-4c49-b1b4-575f5645a9d0--&gt;|&quot;Solution Linking Wire&quot;|b5c8da4c-f925-4cf1-8294-e43cd2c1a584
60
+ ece17806-836c-4756-b3a2-2d12dde215f6@{ shape: trap-t, label: &quot;*Solution Actor Role*
61
+ **New Treatment Data Scientist**&quot;}
62
+ ece17806-836c-4756-b3a2-2d12dde215f6--&gt;|&quot;Data Analyser&quot;|b5c8da4c-f925-4cf1-8294-e43cd2c1a584
63
+ 0c757e35-8a42-4d5f-b01b-c72a6cea65cc@{ shape: trap-t, label: &quot;*Solution Actor Role*
64
+ **New Treatment Researcher.**&quot;}
65
+ 0c757e35-8a42-4d5f-b01b-c72a6cea65cc--&gt;|&quot;Results Interpreter&quot;|b5c8da4c-f925-4cf1-8294-e43cd2c1a584
66
+ e9c2f911-ffcb-40c6-aeee-8c4d43811576@{ shape: subproc, label: &quot;*Solution Component*
67
+ **Onboard Hospital**&quot;}
68
+ b0290339-c96c-4b05-904f-12fc98e54e14--&gt;|&quot;Initiator&quot;|e9c2f911-ffcb-40c6-aeee-8c4d43811576
69
+ 849b0b42-f465-452b-813c-477d6398e082@{ shape: subproc, label: &quot;*Solution Component*
70
+ **Set up clinical trial**&quot;}
71
+ f37f3735-28a1-4e03-9ff5-3fe2f137f661--&gt;|&quot;Initiator&quot;|849b0b42-f465-452b-813c-477d6398e082
72
+ a5d4d638-6836-47e5-99d0-fdcde637e13f@{ shape: lin-cyl, label: &quot;*Solution Component*
73
+ **Weekly Measurements Data Lake Folder**&quot;}
74
+ 7f5dca65-50b4-4103-9ac7-3a406a09047a--&gt;|&quot;Solution Linking Wire&quot;|a5d4d638-6836-47e5-99d0-fdcde637e13f
75
+ 0bf2547c-937c-41b6-814f-6284849271a1@{ shape: odd, label: &quot;*Solution Component*
76
+ **Treatment Assessment Report Validation and Delivery**&quot;}
77
+ 72a86eec-9734-4bc0-babb-4fec0aa7c9ff--&gt;|&quot;Solution Linking Wire&quot;|0bf2547c-937c-41b6-814f-6284849271a1
78
+ f6bc847b-868d-43cc-b767-41f5fe3e47d1@{ shape: trap-t, label: &quot;*Solution Actor Role*
79
+ **Clinical Trial Sponsor**&quot;}
80
+ f6bc847b-868d-43cc-b767-41f5fe3e47d1--&gt;|&quot;Reviewer&quot;|0bf2547c-937c-41b6-814f-6284849271a1
81
+ a5d4d638-6836-47e5-99d0-fdcde637e13f--&gt;|&quot;Solution Linking Wire&quot;|26c07ca4-3b8e-484b-812b-36c1ace4b275
82
+ fb32bef2-e79f-4893-b500-2e547f24d482@{ shape: subproc, label: &quot;*Solution Component*
83
+ **Set up Data Lake Folder**&quot;}
84
+ b0290339-c96c-4b05-904f-12fc98e54e14--&gt;|&quot;Initiator&quot;|fb32bef2-e79f-4893-b500-2e547f24d482
85
+ 1c150d6e-30cf-481c-9afb-3b06c9c9e78f@{ shape: lin-cyl, label: &quot;*Solution Component*
86
+ **Hospital Landing Area Folder**&quot;}
87
+ ee2bb773-e630-4cf9-bdf1-7c2dd64fe4ec--&gt;|&quot;Solution Linking Wire&quot;|1c150d6e-30cf-481c-9afb-3b06c9c9e78f
88
+ 1c150d6e-30cf-481c-9afb-3b06c9c9e78f--&gt;|&quot;Solution Linking Wire&quot;|07705e15-efff-4f80-8992-f04ac85e0ef1
89
+ 11c7c850-c67c-41cc-9423-d74db47cbf3a@{ shape: subproc, label: &quot;*Solution Component*
90
+ **Nominate Hospital**&quot;}
91
+ f37f3735-28a1-4e03-9ff5-3fe2f137f661--&gt;|&quot;Initiator&quot;|11c7c850-c67c-41cc-9423-d74db47cbf3a
138
92
  end
139
93
  style 48bc201e-3d4e-4beb-bdb2-0fd9d134f6d5 color:#FFFFFF, fill:#838cc7, stroke:#3079ab
140
94
  style ece17806-836c-4756-b3a2-2d12dde215f6 color:#FFFFFF, fill:#AA00FF, stroke:#E1D5E7
@@ -161,92 +115,90 @@ style f6bc847b-868d-43cc-b767-41f5fe3e47d1 color:#FFFFFF, fill:#AA00FF, stroke:#
161
115
  style d48f579f-76d3-4c49-b1b4-575f5645a9d0 color:#FFFFFF, fill:#838cc7, stroke:#3079ab
162
116
  style f37f3735-28a1-4e03-9ff5-3fe2f137f661 color:#FFFFFF, fill:#AA00FF, stroke:#E1D5E7
163
117
  style fb32bef2-e79f-4893-b500-2e547f24d482 color:#FFFFFF, fill:#838cc7, stroke:#3079ab
164
- </div>
165
118
  </div>
166
119
  </div>
120
+ </div>
121
+
122
+ <script>
123
+ (function() {
124
+ // Check if Mermaid.js is already loaded; load if not
125
+ if (typeof mermaid === "undefined") {
126
+ const script = document.createElement('script');
127
+ script.src = "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js";
128
+ script.onload = () => initializeMermaid();
129
+ document.head.appendChild(script);
130
+ } else {
131
+ initializeMermaid();
132
+ }
167
133
 
168
- <script>
169
- document.addEventListener("DOMContentLoaded", function() {
170
- // Initialize Mermaid.js
171
- console.log("Initializing Mermaid...");
134
+ function initializeMermaid() {
135
+ // Re-render the Mermaid chart
172
136
  mermaid.initialize({ startOnLoad: true });
137
+ mermaid.init(undefined, document.querySelector("#Component_for_Solution_Blueprint_-_Clinical_Trial_Management_Solution_Blueprint_"));
173
138
 
139
+ // Add interactivity for pan and zoom
174
140
  const container = document.querySelector('.pan-zoom-container');
175
141
  const content = document.querySelector('.pan-zoom-content');
176
- let rect; // Bounding box of the rendered diagram
177
- let scale = 1; // Current zoom level
178
- let panX = 0; // Pan offset in X direction
179
- let panY = 0; // Pan offset in Y direction
142
+
143
+ let scale = 1; // Current zoom level
144
+ let panX = 0; // X-axis pan
145
+ let panY = 0; // Y-axis pan
180
146
  let isDragging = false;
181
147
  let startX, startY;
182
148
 
183
- // Helper: Apply transformations
149
+ // Apply Transformations
184
150
  const applyTransform = () => {
185
151
  content.style.transform = `translate(${panX}px, ${panY}px) scale(${scale})`;
186
152
  };
187
153
 
188
- // Helper: Center the diagram and fit it to the container
154
+ // Center Diagram on Load
189
155
  const centerAndFitDiagram = () => {
190
- rect = content.getBoundingClientRect();
191
156
  const containerRect = container.getBoundingClientRect();
157
+ const rect = content.getBoundingClientRect();
192
158
 
193
- // Calculate the required scale to fit the diagram
194
159
  scale = Math.min(
195
160
  containerRect.width / rect.width,
196
161
  containerRect.height / rect.height
197
162
  );
198
163
 
199
- // Adjust pan to center the diagram
200
164
  panX = (containerRect.width - rect.width * scale) / 2;
201
165
  panY = (containerRect.height - rect.height * scale) / 2;
202
166
 
203
167
  applyTransform();
204
- console.log("Diagram centered and fitted to container.");
205
168
  };
206
169
 
207
- // Add pan/zoom functionality
208
- const zoomCenteredOnDiagram = (event, deltaZoom) => {
209
- rect = content.getBoundingClientRect();
210
- const containerRect = container.getBoundingClientRect();
211
-
212
- // Center of the diagram
213
- const diagramCenterX = rect.left + rect.width / 2;
214
- const diagramCenterY = rect.top + rect.height / 2;
170
+ setTimeout(centerAndFitDiagram, 200); // Allow rendering time
215
171
 
216
- const zoomX = (diagramCenterX - containerRect.left) * deltaZoom;
217
- const zoomY = (diagramCenterY - containerRect.top) * deltaZoom;
218
-
219
- panX -= zoomX;
220
- panY -= zoomY;
221
- };
222
-
223
- container.addEventListener('wheel', function(event) {
172
+ // Enable Mouse-Wheel Zoom
173
+ container.addEventListener('wheel', (event) => {
224
174
  event.preventDefault();
225
175
  const zoomSpeed = 0.1;
226
176
  const previousScale = scale;
227
177
 
228
- // Zoom in or out
229
178
  if (event.deltaY < 0) {
230
- scale = Math.min(scale + zoomSpeed, 4); // Limit zoom-in
179
+ scale = Math.min(scale + zoomSpeed, 4);
231
180
  } else {
232
- scale = Math.max(scale - zoomSpeed, 0.5); // Limit zoom-out
181
+ scale = Math.max(scale - zoomSpeed, 0.5);
233
182
  }
234
183
 
235
- // Calculate deltaZoom and adjust pan
236
- const deltaZoom = scale / previousScale - 1;
237
- zoomCenteredOnDiagram(event, deltaZoom);
184
+ const zoomRatio = scale / previousScale;
185
+ const clientRect = container.getBoundingClientRect();
186
+
187
+ panX -= (event.clientX - clientRect.left) * (zoomRatio - 1);
188
+ panY -= (event.clientY - clientRect.top) * (zoomRatio - 1);
238
189
 
239
190
  applyTransform();
240
191
  });
241
192
 
242
- container.addEventListener('mousedown', function(event) {
193
+ // Enable Drag-to-Pan
194
+ container.addEventListener('mousedown', (event) => {
243
195
  isDragging = true;
244
196
  startX = event.clientX - panX;
245
197
  startY = event.clientY - panY;
246
198
  container.style.cursor = "grabbing";
247
199
  });
248
200
 
249
- container.addEventListener('mousemove', function(event) {
201
+ container.addEventListener('mousemove', (event) => {
250
202
  if (!isDragging) return;
251
203
 
252
204
  panX = event.clientX - startX;
@@ -255,19 +207,17 @@ style fb32bef2-e79f-4893-b500-2e547f24d482 color:#FFFFFF, fill:#838cc7, stroke:#
255
207
  applyTransform();
256
208
  });
257
209
 
258
- container.addEventListener('mouseup', function() {
210
+ container.addEventListener('mouseup', () => {
259
211
  isDragging = false;
260
212
  container.style.cursor = "grab";
261
213
  });
262
214
 
263
- container.addEventListener('mouseleave', function() {
215
+ container.addEventListener('mouseleave', () => {
264
216
  isDragging = false;
265
217
  container.style.cursor = "grab";
266
218
  });
219
+ }
220
+ })();
221
+ </script>
267
222
 
268
- // Ensure Mermaid renders the diagram, then fit and center it
269
- setTimeout(centerAndFitDiagram, 100); // Delay to ensure Mermaid.js rendering is complete
270
- });
271
- </script>
272
- </body>
273
- </html>
223
+