fix(ui): ограничить полные маршруты с сохранением индексов

components/data-grids/route-optimizer-full-routes-data-grid.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+import { DataGridContainer, DataGridScrollArea, DataGridTable, dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
 
-import { useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import {
   type ColumnDef,
   useTable,
@@ -76,13 +76,14 @@ function RouteOptimizerFullRoutesDataGrid({
     () => [
       {
         id: "index",
+        size: 112,
         header: () => <span className="text-[11px] font-medium text-muted-foreground"># Маршрут</span>,
         enableSorting: false,
         cell: ({ row }) => {
           const isBest = row.original.id === bestId || row.original._index === 0
           return (
             <div className="flex items-center gap-2">
-              <span className="text-[10px] font-mono text-muted-foreground w-4">
+              <span className="text-[10px] font-mono text-muted-foreground min-w-6 tabular-nums">
                 {row.original._index + 1}
               </span>
               {isBest && (
@@ -97,6 +98,7 @@ function RouteOptimizerFullRoutesDataGrid({
       },
       {
         id: "wanJh",
+        size: 264,
         header: () => <span className="text-[11px] font-medium text-muted-foreground">WAN → JH</span>,
         enableSorting: false,
         cell: ({ row }) => {
@@ -118,6 +120,7 @@ function RouteOptimizerFullRoutesDataGrid({
       },
       {
         id: "jhExit",
+        size: 240,
         header: () => <span className="text-[11px] font-medium text-muted-foreground">JH → Exit</span>,
         enableSorting: false,
         cell: ({ row }) => {
@@ -139,6 +142,7 @@ function RouteOptimizerFullRoutesDataGrid({
       },
       {
         id: "totalPing",
+        size: 144,
         accessorFn: (row) => row.hw.pingMs + row.je.pingMs,
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Ping модели" className="mx-auto" />
@@ -168,6 +172,7 @@ function RouteOptimizerFullRoutesDataGrid({
       },
       {
         id: "bw",
+        size: 144,
         header: () => (
           <span className="text-[11px] font-medium text-muted-foreground block text-center">
             BW (мин)
@@ -192,6 +197,7 @@ function RouteOptimizerFullRoutesDataGrid({
       },
       {
         id: "score",
+        size: 80,
         accessorKey: "score",
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Score" className="mx-auto" />
@@ -209,6 +215,7 @@ function RouteOptimizerFullRoutesDataGrid({
       },
       {
         id: "prob",
+        size: 104,
         accessorKey: "probabilityOptimal",
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Индекс" className="mx-auto" />
@@ -229,6 +236,7 @@ function RouteOptimizerFullRoutesDataGrid({
       },
       {
         id: "confidence",
+        size: 176,
         accessorKey: "confidence",
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Категория модели" className="mx-auto" />
@@ -250,28 +258,41 @@ function RouteOptimizerFullRoutesDataGrid({
 
   const table = useTable({
     features: dataGridFeatures,
-    manualPagination: true,
+    manualPagination: false,
+    autoResetPageIndex: false,
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["index"], end: [] } },
     data: indexed,
     columns,
     getRowId: (row) => row.id,
   })
 
+  const { pageIndex, pageSize } = table.state.pagination
+  useEffect(() => {
+    const lastPage = Math.max(0, Math.ceil(indexed.length / pageSize) - 1)
+    if (pageIndex > lastPage) table.setPageIndex(lastPage)
+  }, [indexed.length, pageIndex, pageSize, table])
+
   return (
-    <div>
+    <section aria-label="Полные маршруты оптимизатора" className="min-w-0">
       <DataGridShell
         table={table}
         recordCount={visibleRoutes.length}
+        pagination={expanded && (visibleRoutes.length > 50 || pageSize !== 50)}
         tableClassNames={{
           headerRow: "border-b bg-muted/20",
           bodyRow: cn("group/row hover:bg-muted/30", "has-[[data-route-best=true]]:bg-success/5"),
         }}
-        tableLayout={{ dense: true }}
-      />
+        tableLayout={{ dense: true, width: "fixed", columnsPinnable: true }}
+      >
+        <DataGridContainer border={false}>
+          <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
+        </DataGridContainer>
+      </DataGridShell>
       {routes.length > 5 && (
         <button
           type="button"
-          onClick={() => setExpanded((v) => !v)}
-          className="w-full py-2 text-xs text-muted-foreground hover:text-foreground transition-colors border-t flex items-center justify-center gap-1"
+          onClick={() => { setExpanded((v) => !v); table.setPageIndex(0) }}
+          className="w-full min-h-11 py-2 text-xs text-muted-foreground hover:text-foreground transition-colors border-t flex items-center justify-center gap-1"
         >
           {expanded ? (
             <>
@@ -281,12 +302,12 @@ function RouteOptimizerFullRoutesDataGrid({
           ) : (
             <>
               <ChevronDownIcon aria-hidden="true" className="size-3" />
-              Показать все {routes.length} комбинаций
+              {routes.length > 50 ? `Открыть все ${routes.length} комбинаций` : `Показать все ${routes.length} комбинаций`}
             </>
           )}
         </button>
       )}
-    </div>
+    </section>
   )
 }