Skip to content

Commit 59dc025

Browse files
PatrickDinhPatrickDinh
authored
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
1 parent 0c27a7c commit 59dc025

9 files changed

+1366
-143
lines changed

‎src/features/transactions-graph/components/__snapshots__/application-transaction-graph.INDQXWQXHF22SO45EZY7V6FFNI6WUD5FHRVDV6NCU6HD424BJGGA.html

Lines changed: 8 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -397,10 +397,6 @@
397397
<div
398398
class="p-0 relative pr-8"
399399
>
400-
<div
401-
class="h-full border-primary absolute"
402-
style="margin-left: -20px; border-left-width: 2px;"
403-
/>
404400
<div
405401
class="relative h-full p-0 flex items-center px-0"
406402
style="margin-left: 0px;"
@@ -422,7 +418,7 @@
422418
</div>
423419
<div
424420
class="border-primary absolute left-0"
425-
style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
421+
style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
426422
/>
427423
</div>
428424
</div>
@@ -532,10 +528,6 @@
532528
<div
533529
class="p-0 relative pr-8"
534530
>
535-
<div
536-
class="h-full border-primary absolute"
537-
style="margin-left: -20px; border-left-width: 2px;"
538-
/>
539531
<div
540532
class="relative h-full p-0 flex items-center px-0"
541533
style="margin-left: 0px;"
@@ -557,7 +549,7 @@
557549
</div>
558550
<div
559551
class="border-primary absolute left-0"
560-
style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
552+
style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
561553
/>
562554
<div
563555
class="w-2 border-primary rounded-tl absolute left-0"
@@ -645,10 +637,6 @@
645637
<div
646638
class="p-0 relative pr-8"
647639
>
648-
<div
649-
class="h-full border-primary absolute"
650-
style="margin-left: -20px; border-left-width: 2px;"
651-
/>
652640
<div
653641
class="h-full border-primary absolute"
654642
style="margin-left: 0px; border-left-width: 2px;"
@@ -774,10 +762,6 @@
774762
<div
775763
class="p-0 relative pr-8"
776764
>
777-
<div
778-
class="h-full border-primary absolute"
779-
style="margin-left: -20px; border-left-width: 2px;"
780-
/>
781765
<div
782766
class="relative h-full p-0 flex items-center px-0"
783767
style="margin-left: 0px;"
@@ -799,7 +783,7 @@
799783
</div>
800784
<div
801785
class="border-primary absolute left-0"
802-
style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
786+
style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
803787
/>
804788
</div>
805789
</div>
@@ -903,10 +887,6 @@
903887
<div
904888
class="p-0 relative pr-8"
905889
>
906-
<div
907-
class="h-full border-primary absolute"
908-
style="margin-left: -20px; border-left-width: 2px;"
909-
/>
910890
<div
911891
class="relative h-full p-0 flex items-center px-0"
912892
style="margin-left: 0px;"
@@ -928,7 +908,7 @@
928908
</div>
929909
<div
930910
class="border-primary absolute left-0"
931-
style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
911+
style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
932912
/>
933913
<div
934914
class="w-2 border-primary rounded-tl absolute left-0"
@@ -1016,10 +996,6 @@
1016996
<div
1017997
class="p-0 relative pr-8"
1018998
>
1019-
<div
1020-
class="h-full border-primary absolute"
1021-
style="margin-left: -20px; border-left-width: 2px;"
1022-
/>
1023999
<div
10241000
class="h-full border-primary absolute"
10251001
style="margin-left: 0px; border-left-width: 2px;"
@@ -1145,10 +1121,6 @@
11451121
<div
11461122
class="p-0 relative pr-8"
11471123
>
1148-
<div
1149-
class="h-full border-primary absolute"
1150-
style="margin-left: -20px; border-left-width: 2px;"
1151-
/>
11521124
<div
11531125
class="relative h-full p-0 flex items-center px-0"
11541126
style="margin-left: 0px;"
@@ -1170,7 +1142,7 @@
11701142
</div>
11711143
<div
11721144
class="border-primary absolute left-0"
1173-
style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
1145+
style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
11741146
/>
11751147
</div>
11761148
</div>
@@ -1273,10 +1245,6 @@
12731245
<div
12741246
class="p-0 relative pr-8"
12751247
>
1276-
<div
1277-
class="h-full border-primary absolute"
1278-
style="margin-left: -20px; border-left-width: 2px;"
1279-
/>
12801248
<div
12811249
class="relative h-full p-0 flex items-center px-0"
12821250
style="margin-left: 0px;"
@@ -1298,7 +1266,7 @@
12981266
</div>
12991267
<div
13001268
class="border-primary absolute left-0"
1301-
style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
1269+
style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
13021270
/>
13031271
<div
13041272
class="w-2 border-primary rounded-tl absolute left-0"
@@ -1386,10 +1354,6 @@
13861354
<div
13871355
class="p-0 relative pr-8"
13881356
>
1389-
<div
1390-
class="h-full border-primary absolute"
1391-
style="margin-left: -20px; border-left-width: 2px;"
1392-
/>
13931357
<div
13941358
class="h-full border-primary absolute"
13951359
style="margin-left: 0px; border-left-width: 2px;"
@@ -1515,10 +1479,6 @@
15151479
<div
15161480
class="p-0 relative pr-8"
15171481
>
1518-
<div
1519-
class="h-full border-primary absolute"
1520-
style="margin-left: -20px; border-left-width: 2px;"
1521-
/>
15221482
<div
15231483
class="relative h-full p-0 flex items-center px-0"
15241484
style="margin-left: 0px;"
@@ -1540,7 +1500,7 @@
15401500
</div>
15411501
<div
15421502
class="border-primary absolute left-0"
1543-
style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
1503+
style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
15441504
/>
15451505
</div>
15461506
</div>
@@ -1642,10 +1602,6 @@
16421602
<div
16431603
class="p-0 relative pr-8"
16441604
>
1645-
<div
1646-
class="h-full border-primary absolute"
1647-
style="margin-left: -20px; border-left-width: 2px;"
1648-
/>
16491605
<div
16501606
class="relative h-full p-0 flex items-center px-0"
16511607
style="margin-left: 0px;"
@@ -1667,7 +1623,7 @@
16671623
</div>
16681624
<div
16691625
class="border-primary absolute left-0"
1670-
style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
1626+
style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
16711627
/>
16721628
<div
16731629
class="w-2 border-primary rounded-tl absolute left-0"
@@ -1752,10 +1708,6 @@
17521708
<div
17531709
class="p-0 relative pr-8"
17541710
>
1755-
<div
1756-
class="h-full border-primary absolute"
1757-
style="margin-left: -20px; border-left-width: 2px;"
1758-
/>
17591711
<div
17601712
class="h-full border-primary absolute"
17611713
style="margin-left: 0px; border-left-width: 2px;"
@@ -1882,10 +1834,6 @@
18821834
<div
18831835
class="p-0 relative pr-8"
18841836
>
1885-
<div
1886-
class="h-full border-primary absolute"
1887-
style="margin-left: -20px; border-left-width: 2px;"
1888-
/>
18891837
<div
18901838
class="relative h-full p-0 flex items-center px-0"
18911839
style="margin-left: 0px;"

‎src/features/transactions-graph/components/__snapshots__/application-transaction-graph.KMNBSQ4ZFX252G7S4VYR4ZDZ3RXIET5CNYQVJUO5OXXPMHAMJCCQ.html

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -239,10 +239,6 @@
239239
<div
240240
class="p-0 relative pr-8"
241241
>
242-
<div
243-
class="h-full border-primary absolute"
244-
style="margin-left: -20px; border-left-width: 2px;"
245-
/>
246242
<div
247243
class="relative h-full p-0 flex items-center px-0"
248244
style="margin-left: 0px;"
@@ -264,7 +260,7 @@
264260
</div>
265261
<div
266262
class="border-primary absolute left-0"
267-
style="width: 28px; border-left-width: 2px; height: calc(50% + 2px); top: calc(50% - 2px);"
263+
style="width: 28px; border-left-width: 2px; height: calc(50% + 4px); top: calc(50% - 4px);"
268264
/>
269265
</div>
270266
</div>
@@ -370,10 +366,6 @@
370366
<div
371367
class="p-0 relative pr-8"
372368
>
373-
<div
374-
class="h-full border-primary absolute"
375-
style="margin-left: -20px; border-left-width: 2px;"
376-
/>
377369
<div
378370
class="relative h-full p-0 flex items-center px-0"
379371
style="margin-left: 0px;"

0 commit comments

Comments
 (0)