Merge pull request #10 from RijksICTGilde/develop

Fixes and layout changes
RijksICTGilde · Sep 20, 2024 · 19de76e · 19de76e
2 parents 42f1c69 + 98251e7
commit 19de76e
Show file tree

Hide file tree

Showing 13 changed files with 218 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -25,6 +25,13 @@ Daarnaast is het plan om ook dit te doen:
 Het idee is om alle technologies in markdown bestanden te plaatsen in de folder markdown. Elk bestand
 bevat een json block met metadata. Denk hierbij aan het soort technologie en de plek op de radar.
 
+## Metadata
+
+De metadata bevat o.a. de plek op de radar, maar ook waar in het software proces de technologie voorkomt,
+of en wat de relaties zijn met andere componenten etc.
+
+## Voorlopig opzet
+
 Het is verder een javascript/html oplossing. Nadeel nu is dat handmatig de bestanden uit de technologies
 map moet worden toegevoegd aan het technologies.json document, aangezien er geen backend is om dit
 te automatiseren.

diff --git a/docs/index.html b/docs/index.html
@@ -6,9 +6,21 @@
     <meta name="description" content="RIG Tech Radar: a tool to visualize technology choices.">
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>RIG Tech Radar</title>
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <style>[x-cloak]{display:none}</style>
+    <!-- Include the Alpine library on your page -->
+    <script src="alpine3-14-1.js" defer></script>
+    <!-- Include the TailwindCSS library on your page -->
+    <script src="tailwind345.js"></script>
+    <script type="text/javascript">
+    tailwind.config = {
+        corePlugins: {
+            preflight: false,
+        },
+    }
+    </script>
+ß
     <script
             src="https://code.jquery.com/jquery-3.7.1.min.js"
             integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
@@ -28,6 +40,46 @@
 
 <body>
 
+<div x-data="{ modalOpen: false }"
+     @keydown.escape.window="modalOpen = false"
+     class="relative z-50 w-auto h-auto">
+    <button id="modal-button" @click="modalOpen=true" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none">Open</button>
+    <template x-teleport="body">
+        <div x-show="modalOpen" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen" x-cloak>
+            <div x-show="modalOpen"
+                 x-transition:enter="ease-out duration-300"
+                 x-transition:enter-start="opacity-0"
+                 x-transition:enter-end="opacity-100"
+                 x-transition:leave="ease-in duration-300"
+                 x-transition:leave-start="opacity-100"
+                 x-transition:leave-end="opacity-0"
+                 @click="modalOpen=false" class="absolute inset-0 w-full h-full bg-black bg-opacity-40"></div>
+            <div x-show="modalOpen"
+                 x-trap.inert.noscroll="modalOpen"
+                 x-transition:enter="ease-out duration-300"
+                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                 x-transition:leave="ease-in duration-200"
+                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                 class="relative w-full py-6 bg-white px-7 sm:max-w-4xl sm:rounded-lg">
+                <div class="flex items-center justify-between pb-2">
+                    <h3 class="text-lg font-semibold"><span id="modal-title">Modal Title</span></h3>
+                    <button @click="modalOpen=false" class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-gray-600 rounded-full hover:text-gray-800 hover:bg-gray-50">
+                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+                    </button>
+                </div>
+                <div class="relative w-auto">
+                    <div id="markdown-container" style="max-height: 500px; overflow-y: scroll">
+                        This is the markdown container.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+</div>
+
+
 <h1>Rig Stack-Tech-Radar</h1>
 <p>Welke blokken heb je nodig in je bouwproces, en wat is het adoptie / maturity level van die blokken en kennis daarvan binnen de organsisatie.</p>
 
@@ -41,7 +93,7 @@ <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
         <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body">
-        <div id="markdown-container">
+        <div id="markdown-containeDISABLED">
             This is the markdown container.
         </div>
 
@@ -60,10 +112,9 @@ <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
 
 
 <script>
-    var offcanvas;
-    $(function () {
-        offcanvas = new bootstrap.Offcanvas(document.getElementById("offcanvasExample"));
-    });
+    var clickModal = function() {
+        $("#modal-button").click()
+    }
 
     var drawCounter = 0;
 
@@ -73,7 +124,7 @@ <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
     rings["ASSESS"] = 2;
     rings["HOLD"] = 3;
     rings["DROP"] = 4;
-    var htmlData = [];
+    var technologyData = [];
 
     var technologies_global = [];
 
@@ -83,7 +134,7 @@ <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
         technologies_global = technologies;
 
         for (const technology of technologies) {
-            htmlData[technology["json"]["name"]] = technology["html"];
+            technologyData[technology["json"]["name"]] = technology;
             if (typeof technology["json"]["status"] == "object") {
                 for (var statusObj of technology["json"]["status"]) {
                     radarData.push(
@@ -111,8 +162,7 @@ <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
             }
 
         }
-        console.log(htmlData);
-        console.log(radarData);
+
         radar_visualization({
             svg_id: "radar",
             width: 1450,

diff --git a/docs/radar.css b/docs/radar.css
@@ -33,4 +33,4 @@ td {
   /*overflow-x: scroll;*/
   /*top: 50%;*/
   /*left: 20%;*/
-}
+}
diff --git a/docs/radar.js b/docs/radar.js
@@ -105,6 +105,7 @@ function radar_visualization(config) {
   }
 
   function segment(quadrant, ring) {
+    console.log(quadrant, ring)
     var polar_min = {
       t: quadrants[quadrant].radial_min * Math.PI,
       r: ring === 0 ? 30 : rings[ring - 1].radius
@@ -159,7 +160,7 @@ function radar_visualization(config) {
   for (var quadrant = 0; quadrant < 4; quadrant++) {
     segmented[quadrant] = new Array(4);
     // TODO make this configurable
-    for (var ring = 0; ring < 4; ring++) {
+    for (var ring = 0; ring < config.rings.length; ring++) {
       segmented[quadrant][ring] = [];
     }
   }
@@ -168,10 +169,11 @@ function radar_visualization(config) {
     segmented[entry.quadrant][entry.ring].push(entry);
   }
 
+
   // assign unique sequential id to each entry
   var id = 1;
   for (var quadrant of [2,3,1,0]) {
-    for (var ring = 0; ring < 4; ring++) {
+    for (var ring = 0; ring < config.rings.length; ring++) {
       var entries = segmented[quadrant][ring];
       entries.sort(function(a,b) { return a.label.localeCompare(b.label); })
       for (var i=0; i<entries.length; i++) {
@@ -314,7 +316,7 @@ function radar_visualization(config) {
         .style("font-family", "Arial, Helvetica")
         .style("font-size", "18px")
         .style("font-weight", "bold");
-      for (var ring = 0; ring < 4; ring++) {
+      for (var ring = 0; ring < rings.length; ring++) {
         legend.append("text")
           .attr("transform", legend_transform(quadrant, ring))
           .text(config.rings[ring].name)
@@ -326,7 +328,12 @@ function radar_visualization(config) {
           .data(segmented[quadrant][ring])
           .enter()
             .append("a")
-              .on("click", function(d) { offcanvas.toggle(); $("#markdown-container").html( htmlData[d.link]); return false})
+              .on("click", function(d) {
+                $("#modal-title").html(d.link);
+                $("#markdown-container").html( technologyData[d.link]["html"]);
+                clickModal();
+                return false}
+              )
               // .attr("href", function (d, i) {
               //    return d.link ? d.link : "#"; // stay on same page if no link was provided
               // })
@@ -423,7 +430,13 @@ function radar_visualization(config) {
     var blip = d3.select(this);
 
     // blip link
-    blip.on("click", function(d) { offcanvas.toggle(); $("#markdown-container").html( htmlData[d.link]); return false})
+    blip.on("click", function(d) {
+          $("#modal-title").html(d.link);
+          $("#markdown-container").html(technologyData[d.link]["html"]);
+          clickModal();
+          return false;
+        }
+    )
 
     // if (d.active && Object.prototype.hasOwnProperty.call(d, "link") && d.link) {
     //   blip = blip.append("a")

diff --git a/docs/technologies.txt b/docs/technologies.txt
@@ -9,3 +9,4 @@ php.md
 poetry.md
 python.md
 fastapi.md
+sqlmodel.md
diff --git a/docs/technologies/docker-image.md b/docs/technologies/docker-image.md
@@ -7,6 +7,7 @@ Docker leverages operating system-level virtualization, specifically containeriz
 ## Con
 
 ```
+process: code,create,test,release,deploy,operate
 group: "packaging"
 name: "Docker Image"
 status: "ADOPT"

diff --git a/docs/technologies/fastapi.md b/docs/technologies/fastapi.md
@@ -1,6 +1,6 @@
 # FastAPI
 
-FastAPI isn't just another high-speed Python web framework for building APIs. While it boasts performance on par with languages like Go, its true strength lies in making complex tasks simple. Developers can create clean, readable code for RESTful APIs, with automatic documentation generation based on industry standards. FastAPI leverages Python's type hints for clear, error-resistant code and enforces data validation through Pydantic models. Security is a first-class citizen, allowing for secure authentication. Asynchronous operations ensure smooth handling of long-running tasks, and the framework is flexible enough to be customized with middleware. From basic applications to intricate APIs, FastAPI empowers Python developers to build efficiently across project scales.
+FastAPI is a modern, fast (high-performance), web framework for building APIs with Python based on standard Python type hints.
 
 ## Pro
 
@@ -11,9 +11,14 @@ These include:
 * another challenge
 
 ```
+process: code
 group: "software dependency"
 version: ""
 name: "FastAPI"
+alternatives: "starlette.md"
 status: "ASSESS"
+status-history:
+    - status: HOLD
+    - date: 2024-01-01
 depends-on: "python.md"
 ```
diff --git a/docs/technologies/jib.md b/docs/technologies/jib.md
@@ -13,7 +13,7 @@ For information about the project, see the Jib project README.
 category: "build tools"
 group: "build"
 version: "11"
-name: "Java"
+name: "Jib"
 status: 
 - version: "8"
   status: "HOLD"

diff --git a/docs/technologies/python.md b/docs/technologies/python.md
@@ -16,5 +16,6 @@ status:
 - version: "3"
   status: "ADOPT"
 - version: "2"
-  status: "HOLD"
+  status: "DROP"
+  explanation: "Python 2 is Obsolete. It is no longer supported. Please use v3 instead"
 ```
diff --git a/docs/technologies/sqlmodel.md b/docs/technologies/sqlmodel.md
@@ -0,0 +1,25 @@
+# SQLModel
+
+SQLModel is a library for interacting with SQL databases from Python code, with Python objects. It is designed to be intuitive, easy to use, highly compatible, and robust.
+
+## Pro
+
+## Con
+During a project for the AI Validation team we noticed FastAPI comes with some challenges. 
+
+These include:
+* one challenge
+* another challenge
+
+```
+process: code
+group: "software dependency"
+version: ""
+name: "SQLModel"
+alternatives: "starlette.md"
+status: "HOLD"
+status-history:
+    - status: HOLD
+    - date: 2024-01-01
+depends-on: "python.md"
+```
diff --git a/docs/techradar.js b/docs/techradar.js
@@ -39,9 +39,9 @@ function getPathPrefix() {
 function test() {
     $("#robbert").html("Dit is een test");
 
-    $("#markdown-container").on("click", function (e) {
-        jQuery(this).hide();
-    })
+    // $("#markdown-container").on("click", function (e) {
+    //     jQuery(this).hide();
+    // })
 
     var technologies = [];
 
@@ -55,28 +55,36 @@ function test() {
             return el != null && el !== "";
         });
         for (var fileName of lines) {
-            var request = $.get({
-                url: getPathPrefix() + "/technologies/" + fileName,
-                type: "GET",
-                fileName: fileName,
-                complete: function (jqXHR,status) {
-                    let mdData = jqXHR.responseText;
-                    try {
-                        let regex = /```(.*?)```/gs;
-                        let matches = [...mdData.matchAll(regex)];
-                        let codeBlocks = matches[0][1].trim();
-                        let myJSONBlock = yaml.load(codeBlocks);
-                        myJSONBlock["fileName"] = this.fileName;
-                        technologies.push({"json": myJSONBlock, "html": md.render(mdData)});
-                    } catch (e) {
-                        console.error(mdData);
-                        console.error(e);
+            var request = new Promise((resolve, reject) => {
+                $.get({
+                    url: getPathPrefix() + "/technologies/" + fileName,
+                    type: "GET",
+                    fileName: fileName,
+                    complete: function (jqXHR, status) {
+                        let mdData = jqXHR.responseText;
+                        try {
+                            let regex = /```(.*?)```/gs;
+                            let matches = [...mdData.matchAll(regex)];
+                            let codeBlocks = matches[0][1].trim();
+                            let myJSONBlock = yaml.load(codeBlocks);
+                            mdData = mdData.replaceAll(regex, "")
+                            myJSONBlock["fileName"] = this.fileName;
+                            technologies.push({"json": myJSONBlock, "html": md.render(mdData)});
+                            console.log("Loaded " + this.fileName)
+                            resolve();
+                        } catch (e) {
+                            console.error(mdData);
+                            console.error(e);
+                        }
                     }
-                }
+                });
             });
             promises.push(request)
+            console.log("Promise added for " + fileName);
         }
         $.when.apply(null, promises).done(function () {
+            console.log(promises)
+            console.log("All promises are done")
             drawRadar(technologies);
             drawDependencyFlow(technologies);
         })