datacontract-cli 0.10.26__py3-none-any.whl → 0.10.28__py3-none-any.whl

datacontract/templates/datacontract.html

@@ -5,6 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   {# <script src="https://cdn.tailwindcss.com"></script> #}
+  <script src="https://unpkg.com/@panzoom/panzoom@4.6.0/dist/panzoom.min.js"></script>
+
   <style>
     {{ style | safe }}
   </style>
@@ -29,7 +31,6 @@
       </div>
     </div>
   </nav>
-
   <main class="pb-7">
 
     <div class="pt-5 mx-auto max-w-7xl sm:px-6 lg:px-8">
@@ -40,6 +41,10 @@
               Data Contract</h2>
             <div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
               {{ datacontract.id }}
+
+              <span class="inline-flex items-center rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-gray-800 mr-1">
+                <span>Data Contract Specification v{{ datacontract.dataContractSpecification }}</span>
+              </span>
             </div>
             <div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
               {% if datacontract.tags %}
@@ -77,7 +82,6 @@
             {{ render_partial('partials/datacontract_information.html', datacontract = datacontract) }}
           </section>
 
-
           {% if datacontract.servers %}
           <section id="servers">
             <div class="px-4 sm:px-0">
@@ -103,6 +107,52 @@
           </section>
           {% endif %}
 
+          <section id="diagram" class="mt-6">
+            <div class="px-4 sm:px-0">
+              <h1 class="text-base font-semibold leading-6 text-gray-900">Entity Relationship
+                Diagram</h1>
+              <p class="text-sm text-gray-500">Visual representation of data model relationships</p>
+            </div>
+            <div class="mt-3">
+              <div class="overflow-hidden bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg">
+                <div class="diagram-container p-4 w-full" id="diagram-container">
+                  <pre class="mermaid">
+                    {{ mermaid_diagram }}
+                  </pre>
+                </div>
+              </div>
+            </div>
+            <script type="module">
+              import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+
+              mermaid.initialize({
+                startOnLoad: false,
+                theme: 'neutral'
+              });
+              await mermaid.run({
+                querySelector: '.mermaid',
+                postRenderCallback: (id) => {
+                  const container = document.getElementById("diagram-container");
+                  const svgElement = container.querySelector("svg");
+
+                  if (svgElement) {
+                    // Initialize Panzoom
+                    const panzoomInstance = Panzoom(svgElement, {
+                      maxScale: 5,
+                      minScale: 0.5,
+                      step: 0.1,
+                    });
+
+                    // Mouse wheel zoom
+                    container.addEventListener("wheel", (event) => {
+                      event.preventDefault();
+                      panzoomInstance.zoomWithWheel(event);
+                    });
+                  }
+                }
+              });
+            </script>
+          </section>
 
           <section id="models">
             <div class="flex justify-between">