END-722 - map icons overlap

END-723 - update count on delete
END-724 - start ml styling
END-725 - legend styling

src/Map/LastMLRun.jsx

@@ -1,21 +1,39 @@
-import { useLastMLRun } from "../api.js";
+import { startML, useLastMLRun } from "../api.js";
-import {Button, Popover, Tooltip} from "antd";
+import { Button, Popover, Spin, Tooltip } from "antd";
-import {InfoCircleOutlined} from "@ant-design/icons";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { useMemo } from "react";
 
+const TASK_STATUSES = {
+  finished: "Перерасчет ML завершен"
+}
 export function LastMLRun() {
   const { data } = useLastMLRun();
+  const hasFinishedUpdate = useMemo(() => {
+    return data?.task_status === TASK_STATUSES.finished
+  }, [data]);
 
   const lastMLRunRender = () => {
-    return (
+    if (hasFinishedUpdate) return (
       <>
-        <div className="text-xs text-grey z-10 bg-white-background rounded-xl p-2 space-y-3">
+        <div className="text-xs text-grey z-10 bg-white-background rounded-xl px-2 py-0.5 space-y-3">
-          Последний запуск: {new Date(data?.last_time).toLocaleString('ru-RU')}
+          Последний запуск модели
         </div>
-        <div className="text-xs text-grey z-10 bg-white-background rounded-xl p-2 space-y-3">
+        <div className="text-xs text-grey z-10 bg-white-background rounded-xl px-2 py-0.5 space-y-3">
-          {data?.task_status}
+          {new Date(data?.last_time).toLocaleString('ru-RU')}
         </div>
+        <Button type="text" className="flex items-center p-2 text-[#C50000] hover:text-[#C50000] text-xs" onClick={() => startML()}>
+          Обновить систему
+        </Button>
       </>
     );
+
+    return (
+      <div className="flex items-center gap-2">
+        <div>Идет обновление системы...</div>
+        <Spin />
+      </div>
+    )
+
   };
 
   return (
@@ -23,6 +41,7 @@ export function LastMLRun() {
       content={lastMLRunRender}
       trigger="click"
       placement={"leftBottom"}
+      color="#ffffff"
     >
       <Tooltip title="Инфо">
         <Button className="absolute bottom-[64px] right-[20px] flex items-center justify-center p-3">

src/Map/Layers/Layers.jsx

@@ -38,6 +38,8 @@ export const Layers = ({ postGroups, otherGroups }) => {
 
       <SelectedRegion />
 
+      <Points />
+
       <Source
         id="pvz"
         type="vector"
@@ -69,9 +71,6 @@ export const Layers = ({ postGroups, otherGroups }) => {
           );
         })}
       </Source>
-
-
-      <Points />
     </>
   );
 };

src/Map/Legend.jsx

@@ -15,10 +15,12 @@ const LegendPointItem = ({color, imageSrc, name, hideImage, border}) => {
     <div className="flex gap-2 items-center">
       {imageSrc && <Image src={imageSrc} width={18} height={18} className='flex items-center' preview={false}/>}
       {color && !imageSrc && (
-        <span
+        <span className="w-4 h-[100%] flex items-center justify-center">
-          className={`rounded-xl w-3 h-3 inline-block ${border && "border-black border-[1px] border-solid"}`}
+          <span
-          style={{backgroundColor: color}}
+            className={`rounded-xl w-3 h-3 inline-block ${border && "border-black border-[1px] border-solid"}`}
-        />
+            style={{backgroundColor: color}}
+          />
+        </span>
       )}
       {!imageSrc && !color && !hideImage && (
         <Logo width={18} height={18} />

src/Map/MapComponent.jsx

@@ -29,7 +29,6 @@ import {
   RANGE_FILTERS_KEYS,
   RANGE_FILTERS_MAP
 } from "../stores/usePendingPointsFilters.js";
-import { StartML } from "./StartML.jsx";
 
 export const MapComponent = () => {
   const mapRef = useRef(null);
@@ -222,7 +221,6 @@ export const MapComponent = () => {
               <Layers postGroups={filteredPostamatesGroups} otherGroups={filteredOtherGroups} />
 
               <Legend postGroups={filteredPostamatesGroups} otherGroups={filteredOtherGroups} />
-              <StartML />
               <LastMLRun />
               <SignOut />
               <LayersControl postGroups={filteredPostamatesGroups} otherGroups={filteredOtherGroups} />

src/Map/StartML.jsx

@@ -1,14 +0,0 @@
-import { Button, Tooltip } from "antd";
-import { RxUpdate } from "react-icons/all.js";
-import { startML } from "../api.js";
-
-export const StartML = () => {
-
-  return (
-      <Tooltip title="Обновить данные">
-        <Button className="absolute bottom-[108px] right-[20px] flex items-center justify-center p-3" onClick={() => startML()}>
-          <RxUpdate className="w-4 h-4" />
-        </Button>
-      </Tooltip>
-  );
-}

src/api.js

@@ -6,6 +6,7 @@ import { RANGE_FILTERS_KEYS, usePendingPointsFilters } from "./stores/usePending
 import { appendFiltersInUse } from "./utils.js";
 import { useMode } from "./stores/useMode.js";
 import { useMemo } from "react";
+import { useUpdateLayerCounter } from "./stores/useUpdateLayerCounter.js";
 
 export const BASE_URL = import.meta.env.VITE_API_URL;
 
@@ -103,8 +104,9 @@ export const importPoints = async (id) => {
 export const useGetTotalInitialPointsCount = () => {
   const { isImportMode } = useMode();
   const dbTable = useDbTableName();
+  const { updateCounter } = useUpdateLayerCounter();
   return useQuery(
-    ["all-initial-count", dbTable],
+    ["all-initial-count", dbTable, updateCounter],
     async () => {
       const params = new URLSearchParams({
         page: 1,
@@ -121,6 +123,7 @@ export const useGetTotalInitialPointsCount = () => {
 export const useGetFilteredPendingPointsCount = (isMerge) => {
   const { filters, ranges } = usePendingPointsFilters();
   const { isImportMode } = useMode();
+  const { updateCounter } = useUpdateLayerCounter();
   const {
     categories,
     region,
@@ -153,7 +156,7 @@ export const useGetFilteredPendingPointsCount = (isMerge) => {
   const dbTable = useDbTableName();
 
   return useQuery(
-    ["filtered-points", filters, dbTable, includedIds],
+    ["filtered-points", filters, dbTable, includedIds, updateCounter],
     async () => {
       const params = isMerge ? getMergeParams() : getParams();
 
@@ -214,7 +217,7 @@ export const useCanEdit = () => {
 
   const hasFinishedUpdate = useMemo(() => {
     return statusData?.task_status === TASK_STATUSES.finished
-  }, [statusData])
+  }, [statusData]);
 
   return data === "editor" && hasFinishedUpdate;
 };