From b888d6b7f0b6aaa1c699a0db158cbcc3c9e45401 Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Wed, 25 Oct 2023 12:13:18 +0300
Subject: [PATCH] fix: placement

---
 src/pages/QuestionsMap/graph.tsx | 42 +++++++++++++++-----------------
 src/pages/QuestionsMap/helper.ts | 12 ++++-----
 2 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/pages/QuestionsMap/graph.tsx b/src/pages/QuestionsMap/graph.tsx
index ef5bf9e5..d5bc0cca 100644
--- a/src/pages/QuestionsMap/graph.tsx
+++ b/src/pages/QuestionsMap/graph.tsx
@@ -32,7 +32,7 @@ const stylesheet: Stylesheet[] = [
       width: 30,
       "line-color": "#DEDFE7",
       "curve-style": "taxi",
-      "taxi-direction": "vertical",
+      "taxi-direction": "horizontal",
       "taxi-turn": 60,
     },
   },
@@ -46,24 +46,22 @@ const stylesheet: Stylesheet[] = [
   },
 ];
 
-export const Graph = () => {
-  return (
-    <Box
-      sx={{
-        padding: "20px",
-        background: "#FFFFFF",
-        borderRadius: "12px",
-        boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
-        marginTop: "30px",
-      }}
-    >
-      <Cytoscape
-        wheelSensitivity={0.1}
-        elements={createGraphElements(VERTICES)}
-        style={{ height: "480px", background: "#F2F3F7" }}
-        layout={{ name: "preset" }}
-        stylesheet={stylesheet}
-      />
-    </Box>
-  );
-};
+export const Graph = () => (
+  <Box
+    sx={{
+      padding: "20px",
+      background: "#FFFFFF",
+      borderRadius: "12px",
+      boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
+      marginTop: "30px",
+    }}
+  >
+    <Cytoscape
+      wheelSensitivity={0.1}
+      elements={createGraphElements(VERTICES)}
+      style={{ height: "480px", background: "#F2F3F7" }}
+      layout={{ name: "preset" }}
+      stylesheet={stylesheet}
+    />
+  </Box>
+);
diff --git a/src/pages/QuestionsMap/helper.ts b/src/pages/QuestionsMap/helper.ts
index 9719c0ad..4e19e9e9 100644
--- a/src/pages/QuestionsMap/helper.ts
+++ b/src/pages/QuestionsMap/helper.ts
@@ -22,16 +22,16 @@ const getEmptyVerticesAboveAmount = (
   currentIndent: number,
   level: number
 ): number => {
-  let leftIndent = indent + currentIndent;
+  let topIndent = indent + currentIndent;
 
   return elements.filter(({ data, position }) => {
     const isEmptyVertex =
-      position?.x === leftIndent &&
-      position?.y === level * 250 - 250 &&
+      position?.y === topIndent &&
+      position?.x === level * 250 - 250 &&
       vertices.find((item) => item.id === data.id && !item.edges?.length);
 
     if (isEmptyVertex) {
-      leftIndent += 200;
+      topIndent += 200;
     }
 
     return isEmptyVertex;
@@ -63,8 +63,8 @@ export const createGraphElements = (
       elements.push({
         data: { id, label },
         position: {
-          x: indent + currentIndent,
-          y: level * 250,
+          x: level * 250,
+          y: indent + currentIndent,
         },
       });