chore: fix small transactio graph UI (#101)

- Change tab title from Graph to Visual - Fix connection to ancestor's sibings - Fix the gap in transaction connectors
algorandfoundation · Jun 17, 2024 · 59dc025 · 59dc025
1 parent 0c27a7c
commit 59dc025
Show file tree

Hide file tree

Showing 9 changed files with 1,366 additions and 143 deletions.
diff --git a/..._/application-transaction-graph.INDQXWQXHF22SO45EZY7V6FFNI6WUD5FHRVDV6NCU6HD424BJGGA.html b/..._/application-transaction-graph.INDQXWQXHF22SO45EZY7V6FFNI6WUD5FHRVDV6NCU6HD424BJGGA.html
@@ -397,10 +397,6 @@
     <div
       class="p-0 relative pr-8"
     >
-      <div
-        class="h-full border-primary absolute"
-        style="margin-left: -20px; border-left-width: 2px;"
-      />
       <div
         class="relative h-full p-0 flex items-center px-0"
         style="margin-left: 0px;"
@@ -422,7 +418,7 @@
         </div>
         <div
           class="border-primary absolute left-0"
-          style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
+          style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
         />
       </div>
     </div>
@@ -532,10 +528,6 @@
     <div
       class="p-0 relative pr-8"
     >
-      <div
-        class="h-full border-primary absolute"
-        style="margin-left: -20px; border-left-width: 2px;"
-      />
       <div
         class="relative h-full p-0 flex items-center px-0"
         style="margin-left: 0px;"
@@ -557,7 +549,7 @@
         </div>
         <div
           class="border-primary absolute left-0"
-          style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
+          style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
         />
         <div
           class="w-2 border-primary rounded-tl absolute left-0"
@@ -645,10 +637,6 @@
     <div
       class="p-0 relative pr-8"
     >
-      <div
-        class="h-full border-primary absolute"
-        style="margin-left: -20px; border-left-width: 2px;"
-      />
       <div
         class="h-full border-primary absolute"
         style="margin-left: 0px; border-left-width: 2px;"
@@ -774,10 +762,6 @@
     <div
       class="p-0 relative pr-8"
     >
-      <div
-        class="h-full border-primary absolute"
-        style="margin-left: -20px; border-left-width: 2px;"
-      />
       <div
         class="relative h-full p-0 flex items-center px-0"
         style="margin-left: 0px;"
@@ -799,7 +783,7 @@
         </div>
         <div
           class="border-primary absolute left-0"
-          style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
+          style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
         />
       </div>
     </div>
@@ -903,10 +887,6 @@
     <div
       class="p-0 relative pr-8"
     >
-      <div
-        class="h-full border-primary absolute"
-        style="margin-left: -20px; border-left-width: 2px;"
-      />
       <div
         class="relative h-full p-0 flex items-center px-0"
         style="margin-left: 0px;"
@@ -928,7 +908,7 @@
         </div>
         <div
           class="border-primary absolute left-0"
-          style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
+          style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
         />
         <div
           class="w-2 border-primary rounded-tl absolute left-0"
@@ -1016,10 +996,6 @@
     <div
       class="p-0 relative pr-8"
     >
-      <div
-        class="h-full border-primary absolute"
-        style="margin-left: -20px; border-left-width: 2px;"
-      />
       <div
         class="h-full border-primary absolute"
         style="margin-left: 0px; border-left-width: 2px;"
@@ -1145,10 +1121,6 @@
     <div
       class="p-0 relative pr-8"
     >
-      <div
-        class="h-full border-primary absolute"
-        style="margin-left: -20px; border-left-width: 2px;"
-      />
       <div
         class="relative h-full p-0 flex items-center px-0"
         style="margin-left: 0px;"
@@ -1170,7 +1142,7 @@
         </div>
         <div
           class="border-primary absolute left-0"
-          style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
+          style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
         />
       </div>
     </div>
@@ -1273,10 +1245,6 @@
     <div
       class="p-0 relative pr-8"
     >
-      <div
-        class="h-full border-primary absolute"
-        style="margin-left: -20px; border-left-width: 2px;"
-      />
       <div
         class="relative h-full p-0 flex items-center px-0"
         style="margin-left: 0px;"
@@ -1298,7 +1266,7 @@
         </div>
         <div
           class="border-primary absolute left-0"
-          style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
+          style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
         />
         <div
           class="w-2 border-primary rounded-tl absolute left-0"
@@ -1386,10 +1354,6 @@
     <div
       class="p-0 relative pr-8"
     >
-      <div
-        class="h-full border-primary absolute"
-        style="margin-left: -20px; border-left-width: 2px;"
-      />
       <div
         class="h-full border-primary absolute"
         style="margin-left: 0px; border-left-width: 2px;"
@@ -1515,10 +1479,6 @@
     <div
       class="p-0 relative pr-8"
     >
-      <div
-        class="h-full border-primary absolute"
-        style="margin-left: -20px; border-left-width: 2px;"
-      />
       <div
         class="relative h-full p-0 flex items-center px-0"
         style="margin-left: 0px;"
@@ -1540,7 +1500,7 @@
         </div>
         <div
           class="border-primary absolute left-0"
-          style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
+          style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
         />
       </div>
     </div>
@@ -1642,10 +1602,6 @@
     <div
       class="p-0 relative pr-8"
     >
-      <div
-        class="h-full border-primary absolute"
-        style="margin-left: -20px; border-left-width: 2px;"
-      />
       <div
         class="relative h-full p-0 flex items-center px-0"
         style="margin-left: 0px;"
@@ -1667,7 +1623,7 @@
         </div>
         <div
           class="border-primary absolute left-0"
-          style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
+          style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
         />
         <div
           class="w-2 border-primary rounded-tl absolute left-0"
@@ -1752,10 +1708,6 @@
     <div
       class="p-0 relative pr-8"
     >
-      <div
-        class="h-full border-primary absolute"
-        style="margin-left: -20px; border-left-width: 2px;"
-      />
       <div
         class="h-full border-primary absolute"
         style="margin-left: 0px; border-left-width: 2px;"
@@ -1882,10 +1834,6 @@
     <div
       class="p-0 relative pr-8"
     >
-      <div
-        class="h-full border-primary absolute"
-        style="margin-left: -20px; border-left-width: 2px;"
-      />
       <div
         class="relative h-full p-0 flex items-center px-0"
         style="margin-left: 0px;"

diff --git a/..._/application-transaction-graph.KMNBSQ4ZFX252G7S4VYR4ZDZ3RXIET5CNYQVJUO5OXXPMHAMJCCQ.html b/..._/application-transaction-graph.KMNBSQ4ZFX252G7S4VYR4ZDZ3RXIET5CNYQVJUO5OXXPMHAMJCCQ.html
@@ -239,10 +239,6 @@
     <div
       class="p-0 relative pr-8"
     >
-      <div
-        class="h-full border-primary absolute"
-        style="margin-left: -20px; border-left-width: 2px;"
-      />
       <div
         class="relative h-full p-0 flex items-center px-0"
         style="margin-left: 0px;"
@@ -264,7 +260,7 @@
         </div>
         <div
           class="border-primary absolute left-0"
-          style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
+          style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
         />
       </div>
     </div>
@@ -370,10 +366,6 @@
     <div
       class="p-0 relative pr-8"
     >
-      <div
-        class="h-full border-primary absolute"
-        style="margin-left: -20px; border-left-width: 2px;"
-      />
       <div
         class="relative h-full p-0 flex items-center px-0"
         style="margin-left: 0px;"