fix: Update map with tables fixes

src/pages/Route/route-preview/index.tsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState } from "react";
-
+import { Widgets } from "./Widgets";
 import { Application, extend } from "@pixi/react";
 import {
   Container,
@@ -14,16 +14,18 @@ import { MapDataProvider, useMapData } from "./MapDataContext";
 import { TransformProvider, useTransform } from "./TransformContext";
 import { InfiniteCanvas } from "./InfiniteCanvas";
 
-import { UP_SCALE } from "./Constants";
-import { Station } from "./Station";
 import { TravelPath } from "./TravelPath";
 import { LeftSidebar } from "./LeftSidebar";
 import { RightSidebar } from "./RightSidebar";
-import { Widgets } from "./Widgets";
+
 import { coordinatesToLocal } from "./utils";
 import { LanguageSwitcher } from "@widgets";
 import { languageStore } from "@shared";
 import { observer } from "mobx-react-lite";
+import { Sight } from "./Sight";
+import { SightData } from "./types";
+import { Station } from "./Station";
+import { UP_SCALE } from "./Constants";
 
 extend({
   Container,
@@ -43,8 +45,8 @@ export const RoutePreview = () => {
 
           <LeftSidebar />
           <Stack direction="row" flex={1} position="relative" height="100%">
-            <Widgets />
             <RouteMap />
+            <Widgets />
             <RightSidebar />
           </Stack>
         </Stack>
@@ -55,15 +57,27 @@ export const RoutePreview = () => {
 
 export const RouteMap = observer(() => {
   const { language } = languageStore;
-  const { setPosition, screenToLocal, setTransform, screenCenter } =
-    useTransform();
-  const { routeData, stationData, sightData, originalRouteData } = useMapData();
-  console.log(stationData);
+  const { setPosition, setTransform, screenCenter } = useTransform();
+  const {
+    routeData,
+    stationData,
+    sightData,
+    originalRouteData,
+    originalSightData,
+  } = useMapData();
+
   const [points, setPoints] = useState<{ x: number; y: number }[]>([]);
   const [isSetup, setIsSetup] = useState(false);
 
   const parentRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, []);
+
   useEffect(() => {
     if (originalRouteData) {
       const path = originalRouteData?.path;
@@ -146,20 +160,14 @@ export const RouteMap = observer(() => {
               key={obj.id}
               ruLabel={
                 language === "ru"
-                  ? stationData.en[index].name
+                  ? stationData.ru[index].name
                   : stationData.ru[index].name
               }
             />
           ))}
-
-          <pixiGraphics
-            draw={(g) => {
-              g.clear();
-              const localCenter = screenToLocal(0, 0);
-              g.circle(localCenter.x, localCenter.y, 10);
-              g.fill("#fff");
-            }}
-          />
+          {originalSightData?.map((sight: SightData, index: number) => {
+            return <Sight sight={sight} id={index} key={sight.id} />;
+          })}
         </InfiniteCanvas>
       </Application>
     </div>