From db93db65e88ccbfe4a911bb858aee063ff00a30a Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Thu, 26 Oct 2023 21:40:23 +0300
Subject: [PATCH] fix: graph items coordinates

---
 src/pages/QuestionsMap/elements.ts | 323 ++---------------------------
 src/pages/QuestionsMap/graph.tsx   |   5 -
 src/pages/QuestionsMap/helper.ts   |  85 +++-----
 3 files changed, 44 insertions(+), 369 deletions(-)

diff --git a/src/pages/QuestionsMap/elements.ts b/src/pages/QuestionsMap/elements.ts
index bb773aa8..c96380d0 100644
--- a/src/pages/QuestionsMap/elements.ts
+++ b/src/pages/QuestionsMap/elements.ts
@@ -26,6 +26,7 @@ export const VERTICES: Vertex[] = [
       "point_11",
       "point_12",
       "point_13",
+      "point_333",
     ],
   },
   {
@@ -51,8 +52,8 @@ export const VERTICES: Vertex[] = [
   { id: "point_334", label: "Вопрос 334", level: 2 },
   { id: "point_335", label: "Вопрос 335", level: 2 },
   { id: "point_336", label: "Вопрос 336", level: 2 },
-  { id: "point_337", label: "Вопрос 337", level: 2 },
-  { id: "point_338", label: "Вопрос 338", level: 2 },
+  // { id: "point_337", label: "Вопрос 337", level: 2 },
+  // { id: "point_338", label: "Вопрос 338", level: 2 },
   { id: "point_339", label: "Вопрос 339", level: 2 },
   { id: "point_340", label: "Вопрос 340", level: 2 },
   { id: "point_341", label: "Вопрос 341", level: 2 },
@@ -128,7 +129,12 @@ export const VERTICES: Vertex[] = [
   { id: "point_24", label: "Вопрос 24", level: 3 },
   { id: "point_25", label: "Вопрос 25", level: 3 },
   { id: "point_26", label: "Вопрос 26", level: 3 },
-  { id: "point_27", label: "Вопрос 27", level: 3 },
+  {
+    id: "point_27",
+    label: "Вопрос 27",
+    level: 3,
+    edges: ["point_38", "point_39", "point_40", "point_41"],
+  },
   { id: "point_28", label: "Вопрос 28", level: 3 },
   { id: "point_29", label: "Вопрос 29", level: 3 },
   { id: "point_30", label: "Вопрос 30", level: 3 },
@@ -138,12 +144,7 @@ export const VERTICES: Vertex[] = [
   { id: "point_34", label: "Вопрос 34", level: 3 },
   { id: "point_35", label: "Вопрос 35", level: 3 },
   { id: "point_36", label: "Вопрос 36", level: 3 },
-  {
-    id: "point_37",
-    label: "Вопрос 37",
-    level: 3,
-    edges: ["point_38", "point_39", "point_40", "point_41"],
-  },
+  { id: "point_37", label: "Вопрос 37", level: 3 },
   { id: "point_45", label: "Вопрос 45", level: 3 },
   { id: "point_46", label: "Вопрос 46", level: 3 },
   { id: "point_47", label: "Вопрос 47", level: 3 },
@@ -156,14 +157,20 @@ export const VERTICES: Vertex[] = [
   { id: "point_54", label: "Вопрос 54", level: 3 },
   { id: "point_55", label: "Вопрос 55", level: 3 },
   { id: "point_61", label: "Вопрос 61", level: 4 },
-  { id: "point_62", label: "Вопрос 62", level: 4 },
+  { id: "point_62", label: "Вопрос 62", level: 4, edges: ["point_56"] },
   { id: "point_63", label: "Вопрос 63", level: 4 },
   { id: "point_38", label: "Вопрос 38", level: 4 },
   {
     id: "point_39",
     label: "Вопрос 39",
     level: 4,
-    edges: ["point_56", "point_57", "point_58", "point_59", "point_60"],
+    edges: [
+      // "point_56",
+      "point_57",
+      "point_58",
+      "point_59",
+      "point_60",
+    ],
   },
   { id: "point_40", label: "Вопрос 40", level: 4 },
   { id: "point_41", label: "Вопрос 41", level: 4 },
@@ -177,297 +184,3 @@ export const VERTICES: Vertex[] = [
   { id: "point_60", label: "Вопрос 60", level: 5 },
   // { id: "point_", label: "Вопрос " },
 ];
-
-const POINTS: ElementDefinition[] = [
-  { data: { id: "point_1", label: "Вопрос 1" } },
-  { data: { id: "point_2", label: "Вопрос 2" } },
-  { data: { id: "point_3", label: "Вопрос 3" } },
-  { data: { id: "point_4", label: "Вопрос 4" } },
-  { data: { id: "point_5", label: "Вопрос 5" } },
-  { data: { id: "point_6", label: "Вопрос 6" } },
-  { data: { id: "point_7", label: "Вопрос 7" } },
-  { data: { id: "point_8", label: "Вопрос 8" } },
-  { data: { id: "point_9", label: "Вопрос 9" } },
-  { data: { id: "point_10", label: "Вопрос 10" } },
-  { data: { id: "point_11", label: "Вопрос 11" } },
-  { data: { id: "point_12", label: "Вопрос 12" } },
-  { data: { id: "point_13", label: "Вопрос 13" } },
-  { data: { id: "point_14", label: "Вопрос 14" } },
-  { data: { id: "point_15", label: "Вопрос 15" } },
-  { data: { id: "point_16", label: "Вопрос 16" } },
-  { data: { id: "point_17", label: "Вопрос 17" } },
-  { data: { id: "point_18", label: "Вопрос 18" } },
-  { data: { id: "point_19", label: "Вопрос 19" } },
-  { data: { id: "point_20", label: "Вопрос 20" } },
-  { data: { id: "point_21", label: "Вопрос 21" } },
-  { data: { id: "point_22", label: "Вопрос 22" } },
-  { data: { id: "point_23", label: "Вопрос 23" } },
-  { data: { id: "point_24", label: "Вопрос 24" } },
-  { data: { id: "point_25", label: "Вопрос 25" } },
-  { data: { id: "point_26", label: "Вопрос 26" } },
-  { data: { id: "point_27", label: "Вопрос 27" } },
-  // { data: { id: "point_28", label: "Вопрос 28" } },
-  // { data: { id: "point_29", label: "Вопрос 29" } },
-  // { data: { id: "point_30", label: "Вопрос 30" } },
-  // { data: { id: "point_31", label: "Вопрос 31" } },
-  // { data: { id: "point_32", label: "Вопрос 32" } },
-  // { data: { id: "point_33", label: "Вопрос 33" } },
-  // { data: { id: "point_34", label: "Вопрос 34" } },
-  // { data: { id: "point_35", label: "Вопрос 35" } },
-  // { data: { id: "point_36", label: "Вопрос 36" } },
-  // { data: { id: "point_37", label: "Вопрос 37" } },
-  // { data: { id: "point_38", label: "Вопрос 38" } },
-  // { data: { id: "point_39", label: "Вопрос 39" } },
-  // { data: { id: "point_40", label: "Вопрос 40" } },
-  // { data: { id: "point_41", label: "Вопрос 41" } },
-  // { data: { id: "point_42", label: "Вопрос 42" } },
-  // { data: { id: "point_43", label: "Вопрос 43" } },
-  // { data: { id: "point_44", label: "Вопрос 44" } },
-  // { data: { id: "point_45", label: "Вопрос 45" } },
-  // { data: { id: "point_46", label: "Вопрос 46" } },
-  // { data: { id: "point_47", label: "Вопрос 47" } },
-  // { data: { id: "point_48", label: "Вопрос 48" } },
-  // { data: { id: "point_49", label: "Вопрос 49" } },
-  // { data: { id: "point_50", label: "Вопрос 50" } },
-  // { data: { id: "point_51", label: "Вопрос 51" } },
-  // { data: { id: "point_52", label: "Вопрос 52" } },
-  // { data: { id: "point_53", label: "Вопрос 53" } },
-  // { data: { id: "point_54", label: "Вопрос 54" } },
-  // { data: { id: "point_55", label: "Вопрос 55" } },
-  // { data: { id: "point_56", label: "Вопрос 56" } },
-  // { data: { id: "point_57", label: "Вопрос 57" } },
-  // { data: { id: "point_58", label: "Вопрос 58" } },
-  // { data: { id: "point_59", label: "Вопрос 59" } },
-  // { data: { id: "point_60", label: "Вопрос 60" } },
-  // { data: { id: "point_61", label: "Вопрос 61" } },
-  // { data: { id: "point_62", label: "Вопрос 62" } },
-  // { data: { id: "point_63", label: "Вопрос 63" } },
-  // { data: { id: "point_64", label: "Вопрос 64" } },
-  // { data: { id: "point_65", label: "Вопрос 65" } },
-  // { data: { id: "point_66", label: "Вопрос 66" } },
-  // { data: { id: "point_67", label: "Вопрос 67" } },
-  // { data: { id: "point_68", label: "Вопрос 68" } },
-  // { data: { id: "point_69", label: "Вопрос 69" } },
-  // { data: { id: "point_70", label: "Вопрос 70" } },
-  // { data: { id: "point_71", label: "Вопрос 71" } },
-  // { data: { id: "point_72", label: "Вопрос 72" } },
-  // { data: { id: "point_73", label: "Вопрос 73" } },
-  // { data: { id: "point_74", label: "Вопрос 74" } },
-  // { data: { id: "point_75", label: "Вопрос 75" } },
-  // { data: { id: "point_76", label: "Вопрос 76" } },
-  // { data: { id: "point_77", label: "Вопрос 77" } },
-  // { data: { id: "point_78", label: "Вопрос 78" } },
-  // { data: { id: "point_79", label: "Вопрос 79" } },
-  // { data: { id: "point_80", label: "Вопрос 80" } },
-  // { data: { id: "point_81", label: "Вопрос 81" } },
-  // { data: { id: "point_82", label: "Вопрос 82" } },
-  // { data: { id: "point_83", label: "Вопрос 83" } },
-  // { data: { id: "point_84", label: "Вопрос 84" } },
-  // { data: { id: "point_85", label: "Вопрос 85" } },
-  // { data: { id: "point_86", label: "Вопрос 86" } },
-  // { data: { id: "point_87", label: "Вопрос 87" } },
-  // { data: { id: "point_88", label: "Вопрос 88" } },
-  // { data: { id: "point_89", label: "Вопрос 89" } },
-  // { data: { id: "point_90", label: "Вопрос 90" } },
-  // { data: { id: "point_91", label: "Вопрос 91" } },
-  // { data: { id: "point_92", label: "Вопрос 92" } },
-  // { data: { id: "point_93", label: "Вопрос 93" } },
-  // { data: { id: "point_94", label: "Вопрос 94" } },
-  // { data: { id: "point_95", label: "Вопрос 95" } },
-  // { data: { id: "point_96", label: "Вопрос 96" } },
-  // { data: { id: "point_97", label: "Вопрос 97" } },
-  // { data: { id: "point_98", label: "Вопрос 98" } },
-  // { data: { id: "point_99", label: "Вопрос 99" } },
-  // { data: { id: "point_100", label: "Вопрос 100" } },
-  // { data: { id: "point_101", label: "Вопрос 101" } },
-  // { data: { id: "point_102", label: "Вопрос 102" } },
-  // { data: { id: "point_103", label: "Вопрос 103" } },
-  // { data: { id: "point_104", label: "Вопрос 104" } },
-  // { data: { id: "point_105", label: "Вопрос 105" } },
-  // { data: { id: "point_106", label: "Вопрос 106" } },
-  // { data: { id: "point_107", label: "Вопрос 107" } },
-  // { data: { id: "point_108", label: "Вопрос 108" } },
-  // { data: { id: "point_109", label: "Вопрос 109" } },
-  // { data: { id: "point_110", label: "Вопрос 110" } },
-  // { data: { id: "point_111", label: "Вопрос 111" } },
-  // { data: { id: "point_112", label: "Вопрос 112" } },
-  // { data: { id: "point_113", label: "Вопрос 113" } },
-  // { data: { id: "point_114", label: "Вопрос 114" } },
-  // { data: { id: "point_115", label: "Вопрос 115" } },
-  // { data: { id: "point_116", label: "Вопрос 116" } },
-  // { data: { id: "point_117", label: "Вопрос 117" } },
-  // { data: { id: "point_118", label: "Вопрос 118" } },
-  // { data: { id: "point_119", label: "Вопрос 119" } },
-  // { data: { id: "point_120", label: "Вопрос 120" } },
-  // { data: { id: "point_121", label: "Вопрос 121" } },
-  // { data: { id: "point_122", label: "Вопрос 122" } },
-  // { data: { id: "point_123", label: "Вопрос 123" } },
-  // { data: { id: "point_124", label: "Вопрос 124" } },
-  // { data: { id: "point_125", label: "Вопрос 125" } },
-  // { data: { id: "point_126", label: "Вопрос 126" } },
-  // { data: { id: "point_127", label: "Вопрос 127" } },
-  // { data: { id: "point_128", label: "Вопрос 128" } },
-  // { data: { id: "point_129", label: "Вопрос 129" } },
-  // { data: { id: "point_130", label: "Вопрос 130" } },
-  // { data: { id: "point_131", label: "Вопрос 131" } },
-  // { data: { id: "point_132", label: "Вопрос 132" } },
-  // { data: { id: "point_133", label: "Вопрос 133" } },
-  // { data: { id: "point_134", label: "Вопрос 134" } },
-  // { data: { id: "point_135", label: "Вопрос 135" } },
-  // { data: { id: "point_136", label: "Вопрос 136" } },
-  // { data: { id: "point_137", label: "Вопрос 137" } },
-  // { data: { id: "point_138", label: "Вопрос 138" } },
-  // { data: { id: "point_139", label: "Вопрос 139" } },
-  // { data: { id: "point_140", label: "Вопрос 140" } },
-  // { data: { id: "point_141", label: "Вопрос 141" } },
-  // { data: { id: "point_142", label: "Вопрос 142" } },
-];
-
-const BRIDGES: ElementDefinition[] = [
-  { data: { source: "point_1", target: "point_2" } },
-  { data: { source: "point_1", target: "point_3" } },
-  { data: { source: "point_1", target: "point_4" } },
-  { data: { source: "point_1", target: "point_5" } },
-  { data: { source: "point_1", target: "point_6" } },
-  { data: { source: "point_1", target: "point_7" } },
-  { data: { source: "point_1", target: "point_7" } },
-  { data: { source: "point_1", target: "point_8" } },
-  { data: { source: "point_1", target: "point_9" } },
-  { data: { source: "point_1", target: "point_10" } },
-  { data: { source: "point_1", target: "point_11" } },
-  { data: { source: "point_1", target: "point_12" } },
-  { data: { source: "point_2", target: "point_13" } },
-  { data: { source: "point_2", target: "point_14" } },
-  { data: { source: "point_2", target: "point_15" } },
-  { data: { source: "point_2", target: "point_16" } },
-  { data: { source: "point_2", target: "point_17" } },
-  { data: { source: "point_2", target: "point_18" } },
-  { data: { source: "point_2", target: "point_19" } },
-  { data: { source: "point_2", target: "point_20" } },
-  { data: { source: "point_2", target: "point_21" } },
-  { data: { source: "point_2", target: "point_22" } },
-  { data: { source: "point_2", target: "point_23" } },
-  { data: { source: "point_2", target: "point_24" } },
-  { data: { source: "point_3", target: "point_25" } },
-  { data: { source: "point_3", target: "point_26" } },
-  { data: { source: "point_3", target: "point_27" } },
-  // { data: { source: "point_3", target: "point_28" } },
-  // { data: { source: "point_3", target: "point_29" } },
-  // { data: { source: "point_3", target: "point_30" } },
-  // { data: { source: "point_3", target: "point_31" } },
-  // { data: { source: "point_3", target: "point_32" } },
-  // { data: { source: "point_3", target: "point_33" } },
-  // { data: { source: "point_3", target: "point_34" } },
-  // { data: { source: "point_3", target: "point_35" } },
-  // { data: { source: "point_3", target: "point_36" } },
-  // { data: { source: "point_4", target: "point_37" } },
-  // { data: { source: "point_4", target: "point_38" } },
-  // { data: { source: "point_4", target: "point_39" } },
-  // { data: { source: "point_4", target: "point_40" } },
-  // { data: { source: "point_4", target: "point_41" } },
-  // { data: { source: "point_4", target: "point_42" } },
-  // { data: { source: "point_4", target: "point_43" } },
-  // { data: { source: "point_4", target: "point_44" } },
-  // { data: { source: "point_4", target: "point_45" } },
-  // { data: { source: "point_4", target: "point_46" } },
-  // { data: { source: "point_4", target: "point_47" } },
-  // { data: { source: "point_4", target: "point_48" } },
-  // { data: { source: "point_5", target: "point_49" } },
-  // { data: { source: "point_5", target: "point_50" } },
-  // { data: { source: "point_5", target: "point_51" } },
-  // { data: { source: "point_5", target: "point_52" } },
-  // { data: { source: "point_5", target: "point_53" } },
-  // { data: { source: "point_5", target: "point_54" } },
-  // { data: { source: "point_5", target: "point_55" } },
-  // { data: { source: "point_5", target: "point_56" } },
-  // { data: { source: "point_5", target: "point_57" } },
-  // { data: { source: "point_5", target: "point_58" } },
-  // { data: { source: "point_5", target: "point_59" } },
-  // { data: { source: "point_5", target: "point_60" } },
-  // { data: { source: "point_6", target: "point_61" } },
-  // { data: { source: "point_6", target: "point_62" } },
-  // { data: { source: "point_6", target: "point_63" } },
-  // { data: { source: "point_6", target: "point_64" } },
-  // { data: { source: "point_6", target: "point_65" } },
-  // { data: { source: "point_6", target: "point_66" } },
-  // { data: { source: "point_6", target: "point_67" } },
-  // { data: { source: "point_6", target: "point_68" } },
-  // { data: { source: "point_6", target: "point_69" } },
-  // { data: { source: "point_6", target: "point_70" } },
-  // { data: { source: "point_6", target: "point_71" } },
-  // { data: { source: "point_6", target: "point_72" } },
-  // { data: { source: "point_7", target: "point_73" } },
-  // { data: { source: "point_7", target: "point_74" } },
-  // { data: { source: "point_7", target: "point_75" } },
-  // { data: { source: "point_7", target: "point_76" } },
-  // { data: { source: "point_7", target: "point_77" } },
-  // { data: { source: "point_7", target: "point_78" } },
-  // { data: { source: "point_7", target: "point_79" } },
-  // { data: { source: "point_7", target: "point_80" } },
-  // { data: { source: "point_7", target: "point_81" } },
-  // { data: { source: "point_7", target: "point_82" } },
-  // { data: { source: "point_7", target: "point_83" } },
-  // { data: { source: "point_7", target: "point_84" } },
-  // { data: { source: "point_8", target: "point_85" } },
-  // { data: { source: "point_8", target: "point_86" } },
-  // { data: { source: "point_8", target: "point_87" } },
-  // { data: { source: "point_8", target: "point_88" } },
-  // { data: { source: "point_8", target: "point_89" } },
-  // { data: { source: "point_8", target: "point_90" } },
-  // { data: { source: "point_8", target: "point_91" } },
-  // { data: { source: "point_8", target: "point_92" } },
-  // { data: { source: "point_8", target: "point_93" } },
-  // { data: { source: "point_8", target: "point_94" } },
-  // { data: { source: "point_8", target: "point_95" } },
-  // { data: { source: "point_8", target: "point_96" } },
-  // { data: { source: "point_9", target: "point_97" } },
-  // { data: { source: "point_9", target: "point_98" } },
-  // { data: { source: "point_9", target: "point_99" } },
-  // { data: { source: "point_9", target: "point_100" } },
-  // { data: { source: "point_9", target: "point_101" } },
-  // { data: { source: "point_9", target: "point_102" } },
-  // { data: { source: "point_9", target: "point_103" } },
-  // { data: { source: "point_9", target: "point_104" } },
-  // { data: { source: "point_9", target: "point_105" } },
-  // { data: { source: "point_9", target: "point_106" } },
-  // { data: { source: "point_9", target: "point_107" } },
-  // { data: { source: "point_9", target: "point_108" } },
-  // { data: { source: "point_10", target: "point_109" } },
-  // { data: { source: "point_10", target: "point_110" } },
-  // { data: { source: "point_10", target: "point_111" } },
-  // { data: { source: "point_10", target: "point_112" } },
-  // { data: { source: "point_10", target: "point_113" } },
-  // { data: { source: "point_10", target: "point_114" } },
-  // { data: { source: "point_10", target: "point_115" } },
-  // { data: { source: "point_10", target: "point_116" } },
-  // { data: { source: "point_10", target: "point_117" } },
-  // { data: { source: "point_10", target: "point_118" } },
-  // { data: { source: "point_10", target: "point_119" } },
-  // { data: { source: "point_10", target: "point_120" } },
-  // { data: { source: "point_11", target: "point_121" } },
-  // { data: { source: "point_11", target: "point_122" } },
-  // { data: { source: "point_11", target: "point_123" } },
-  // { data: { source: "point_11", target: "point_124" } },
-  // { data: { source: "point_11", target: "point_125" } },
-  // { data: { source: "point_11", target: "point_126" } },
-  // { data: { source: "point_11", target: "point_127" } },
-  // { data: { source: "point_11", target: "point_128" } },
-  // { data: { source: "point_11", target: "point_129" } },
-  // { data: { source: "point_11", target: "point_130" } },
-  // { data: { source: "point_11", target: "point_131" } },
-  // { data: { source: "point_11", target: "point_132" } },
-  // { data: { source: "point_12", target: "point_132" } },
-  // { data: { source: "point_12", target: "point_133" } },
-  // { data: { source: "point_12", target: "point_134" } },
-  // { data: { source: "point_12", target: "point_135" } },
-  // { data: { source: "point_12", target: "point_136" } },
-  // { data: { source: "point_12", target: "point_137" } },
-  // { data: { source: "point_12", target: "point_138" } },
-  // { data: { source: "point_12", target: "point_139" } },
-  // { data: { source: "point_12", target: "point_140" } },
-  // { data: { source: "point_12", target: "point_141" } },
-  // { data: { source: "point_12", target: "point_142" } },
-  // { data: { source: "point_12", target: "point_142" } },
-];
-
-export const ELEMENTS: ElementDefinition[] = [...POINTS, ...BRIDGES];
diff --git a/src/pages/QuestionsMap/graph.tsx b/src/pages/QuestionsMap/graph.tsx
index d5bc0cca..864ef39c 100644
--- a/src/pages/QuestionsMap/graph.tsx
+++ b/src/pages/QuestionsMap/graph.tsx
@@ -14,11 +14,6 @@ const stylesheet: Stylesheet[] = [
       width: 130,
       height: 130,
       backgroundColor: "#FFFFFF",
-    },
-  },
-  {
-    selector: "node[label]",
-    style: {
       label: "data(label)",
       "font-size": "16",
       color: "#4D4D4D",
diff --git a/src/pages/QuestionsMap/helper.ts b/src/pages/QuestionsMap/helper.ts
index e3e669c5..22576456 100644
--- a/src/pages/QuestionsMap/helper.ts
+++ b/src/pages/QuestionsMap/helper.ts
@@ -19,72 +19,33 @@ const getCurrentIndent = (
   id: string,
   edges: string[] | undefined,
   vertices: Vertex[]
-): number => {
+): [number, number] => {
   let currentIndent = 0;
+  let bottomIndent = 0;
 
   if (!edges?.length) {
-    return 100;
+    return [100, 0];
   }
 
-  const calculatePointIndent = (pointId: string) => {
+  const calculatePointIndent = (pointId: string, subIndent = false) => {
     const point = vertices.find(({ id }) => pointId === id);
 
     if (point?.edges) {
-      currentIndent += point.edges.length * 100;
+      if (!subIndent) {
+        currentIndent += point.edges.length * 100;
+      } else {
+        bottomIndent += point.edges.length * 100;
+      }
 
       point.edges.forEach((edge) => {
-        console.log(id, currentIndent);
-        calculatePointIndent(edge);
+        calculatePointIndent(edge, true);
       });
     }
   };
 
   calculatePointIndent(id);
 
-  return currentIndent;
-};
-
-const getVertexIndent = (
-  elements: ElementDefinition[],
-  vertices: Vertex[],
-  id: string,
-  indent: number,
-  currentIndent: number,
-  level: number
-): number => {
-  let topIndent = indent + currentIndent;
-  let indentResult: number = 0;
-
-  for (const { data, position } of elements) {
-    const isEmptyVertex =
-      position?.y === topIndent &&
-      position?.x === (level - 1) * 250 &&
-      vertices.find((item) => item.id === data.id && !item.edges?.length);
-
-    if (!isEmptyVertex) {
-      continue;
-    }
-
-    const parentVertex = vertices.find(({ edges }) => edges?.includes(id));
-    const parentElement = elements.find(
-      ({ data }) => parentVertex?.id === data.id
-    );
-
-    if (parentElement?.position?.y && parentVertex?.edges?.length) {
-      const minTopIndent =
-        parentElement.position.y - (parentVertex.edges.length || 0) * 100;
-
-      topIndent += 200;
-
-      if (indent < minTopIndent) {
-        indentResult = minTopIndent;
-
-        break;
-      }
-    }
-  }
-
-  return indentResult;
+  return [currentIndent, bottomIndent];
 };
 
 export const createGraphElements = (
@@ -98,17 +59,23 @@ export const createGraphElements = (
     let indent = 0;
 
     vertexItems.forEach(({ id, label, level, edges }) => {
-      const currentIndent = getCurrentIndent(id, edges, vertices);
-      const emptyVertexIndent = getVertexIndent(
-        elements,
-        vertices,
+      const [currentIndent, bottomIndent] = getCurrentIndent(
         id,
-        indent,
-        currentIndent,
-        level
+        edges,
+        vertices
+      );
+      const parentVertex = vertices.find(({ edges }) => edges?.includes(id));
+      const parentElement = elements.find(
+        ({ data }) => parentVertex?.id === data.id
       );
 
-      indent = emptyVertexIndent || indent;
+      const minTopIndent =
+        (parentElement?.position?.y || 0) -
+        (parentVertex?.edges?.length || 0) * 100;
+
+      if (minTopIndent > indent) {
+        indent = minTopIndent;
+      }
 
       elements.push({
         data: { id, label },
@@ -124,7 +91,7 @@ export const createGraphElements = (
         });
       });
 
-      indent += currentIndent * 2;
+      indent += currentIndent * 2 + bottomIndent;
     });
   });