feat: cache delete + empty snapshot + route page

src/pages/Route/RouteListPage/index.tsx

@@ -6,10 +6,10 @@ import { observer } from "mobx-react-lite";
 import { Map, Pencil, Trash2, Minus, Monitor } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";
-import { Box, CircularProgress } from "@mui/material";
+import { Box, CircularProgress, Tooltip } from "@mui/material";
 
 export const RouteListPage = observer(() => {
-  const { routes, getRoutes, deleteRoute } = routeStore;
+  const { routes, getRoutes, deleteRoute, sightCounts, stationCounts, countsLoading, loadCounts } = routeStore;
   const { carriers, getCarriers } = carrierStore;
   const navigate = useNavigate();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -38,6 +38,9 @@ export const RouteListPage = observer(() => {
       await getCarriers("zh");
       await getRoutes();
       setIsLoading(false);
+
+      const routeIds = routeStore.routes.data.map((r) => r.id);
+      loadCounts(routeIds);
     };
     fetchData();
   }, [language]);
@@ -128,6 +131,42 @@ export const RouteListPage = observer(() => {
         );
       },
     },
+    {
+      field: "sightCount",
+      headerName: "Достопримечательности",
+      width: 180,
+      align: "center" as const,
+      headerAlign: "center" as const,
+      sortable: true,
+      renderHeader: (params: any) => (
+        <Tooltip title="Количество привязанных достопримечательностей">
+          <span>{params.colDef.headerName}</span>
+        </Tooltip>
+      ),
+      renderCell: (params: GridRenderCellParams) => (
+        <div className="w-full h-full flex items-center justify-center">
+          {params.value === null ? <CircularProgress size={14} /> : params.value}
+        </div>
+      ),
+    },
+    {
+      field: "stationCount",
+      headerName: "Остановки",
+      width: 120,
+      align: "center" as const,
+      headerAlign: "center" as const,
+      sortable: true,
+      renderHeader: (params: any) => (
+        <Tooltip title="Количество привязанных остановок">
+          <span>{params.colDef.headerName}</span>
+        </Tooltip>
+      ),
+      renderCell: (params: GridRenderCellParams) => (
+        <div className="w-full h-full flex items-center justify-center">
+          {params.value === null ? <CircularProgress size={14} /> : params.value}
+        </div>
+      ),
+    },
     ...(canShowActionsColumn ? [{
       field: "actions",
       headerName: "Действия",
@@ -195,8 +234,10 @@ export const RouteListPage = observer(() => {
         route_sys_number: route.route_sys_number,
         route_direction: route.route_direction ? "Прямой" : "Обратный",
         route_name: route.route_name,
+        sightCount: sightCounts.has(route.id) ? sightCounts.get(route.id) : null,
+        stationCount: stationCounts.has(route.id) ? stationCounts.get(route.id) : null,
       }));
-  }, [routes.data, carriers["ru"].data, selectedCityStore.selectedCityId, searchQuery]);
+  }, [routes.data, carriers["ru"].data, selectedCityStore.selectedCityId, searchQuery, sightCounts.size, stationCounts.size, countsLoading]);
 
   return (
     <>

src/pages/Route/route-preview/webgl-prototype/WebGLRouteMapPrototype.tsx

@@ -1910,7 +1910,8 @@ export const WebGLRouteMapPrototype = observer(() => {
 
       const stationIconSizePercent =
         liveStationIconSizes.get(station.id) ??
-        (typeof station.icon_size === "number" && Number.isFinite(station.icon_size)
+        (typeof station.icon_size === "number" &&
+        Number.isFinite(station.icon_size)
           ? station.icon_size
           : 100);
       const iconSizePx = Math.max(
@@ -2277,6 +2278,7 @@ export const WebGLRouteMapPrototype = observer(() => {
             position: "absolute",
             inset: 0,
             pointerEvents: "none",
+            zIndex: 1,
           }}
         >
           {stationData.ru.map((station, index) => {
@@ -2706,13 +2708,14 @@ export const WebGLRouteMapPrototype = observer(() => {
               ? camera.scale /
                 Math.max(customSightIconBaseScaleRef.current ?? 1, 1e-6)
               : 1;
-            const sightIconSizePercent = sight.is_default_icon === false
-              ? (liveSightIconSizes.get(sight.id) ??
-                (typeof sight.icon_size === "number" &&
-                Number.isFinite(sight.icon_size)
-                  ? sight.icon_size
-                  : 100))
-              : (routeData?.icon_size ?? originalRouteData?.icon_size ?? 100);
+            const sightIconSizePercent =
+              sight.is_default_icon === false
+                ? (liveSightIconSizes.get(sight.id) ??
+                  (typeof sight.icon_size === "number" &&
+                  Number.isFinite(sight.icon_size)
+                    ? sight.icon_size
+                    : 100))
+                : (routeData?.icon_size ?? originalRouteData?.icon_size ?? 100);
             const iconSize =
               30 *
               clamp(sightIconSizePercent / 100, 0.1, 10) *
@@ -2723,7 +2726,10 @@ export const WebGLRouteMapPrototype = observer(() => {
                 resizingSightIconId === sight.id);
             const iconLeft = cssX - iconSize;
             const iconTop = cssY - iconSize;
-            const sightZoomClampedScale = Math.min(Math.max(camera.scale, 1), 3);
+            const sightZoomClampedScale = Math.min(
+              Math.max(camera.scale, 1),
+              3,
+            );
             const sightScaleFactor = 1 + (sightZoomClampedScale - 1) * 0.4;
             const labelHeight = 24 * sightScaleFactor;
             const labelPadding = 6 * sightScaleFactor;