From 9124d451a54040c05972f786fa6d67ed193cb34a Mon Sep 17 00:00:00 2001 From: Denozordec Date: Sun, 4 Oct 2026 15:52:07 +0700 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=D0=BE=D0=B3=D1=80=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D1=87=D0=B8=D1=82=D1=8C=20=D0=B3=D1=80=D1=83=D0=BF=D0=BF=D1=8B?= =?UTF-8?q?=20=D0=B8=20=D0=B4=D0=B5=D1=82=D0=B0=D0=BB=D0=B8=20=D1=80=D0=B5?= =?UTF-8?q?=D0=BA=D1=83=D1=80=D1=81=D0=B8=D0=B2=D0=BD=D1=8B=D1=85=20=D0=BC?= =?UTF-8?q?=D0=B0=D1=80=D1=88=D1=80=D1=83=D1=82=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-grids/recursive-routes-data-grid.tsx | 68 ++++++++++++++---- docs/ux-ui-performance.md | 7 +- docs/ux-ui-plan.md | 2 +- docs/ux-ui-progress.md | 8 +++ docs/ux-ui-stage-12.md | 9 +++ .../screens/large-recursive-endpoints-320.png | Bin 0 -> 77767 bytes .../screens/large-recursive-groups-320.png | Bin 0 -> 64067 bytes tests/e2e/large-recursive-routes.spec.ts | 52 ++++++++++++++ 8 files changed, 127 insertions(+), 19 deletions(-) create mode 100644 docs/ux-ui/screens/large-recursive-endpoints-320.png create mode 100644 docs/ux-ui/screens/large-recursive-groups-320.png create mode 100644 tests/e2e/large-recursive-routes.spec.ts diff --git a/components/data-grids/recursive-routes-data-grid.tsx b/components/data-grids/recursive-routes-data-grid.tsx index 524949c9..c993d381 100644 --- a/components/data-grids/recursive-routes-data-grid.tsx +++ b/components/data-grids/recursive-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, useRef, useState } from "react" import { type ColumnDef, useTable, @@ -67,9 +67,14 @@ function inferCountry(name: string): string | null { } function RouteGroupExpandedDetail({ group }: { group: RecursiveRouteGroup }) { - const sorted = [...group.endpoints].sort((a, b) => a.distance - b.distance) + const [page, setPage] = useState(0) + const sorted = useMemo(() => [...group.endpoints].sort((a, b) => a.distance - b.distance), [group.endpoints]) + const lastPage = Math.max(0, Math.ceil(sorted.length / 50) - 1) + if (page > lastPage) setPage(lastPage) + const currentPage = Math.min(page, lastPage) + const offset = currentPage * 50 return ( -
+
Route: {group.dstAddress} @@ -81,15 +86,15 @@ function RouteGroupExpandedDetail({ group }: { group: RecursiveRouteGroup }) { {group.comment && {group.comment}}
- {sorted.map((ep, idx) => ( -
+ {sorted.slice(offset, offset + 50).map((ep, idx) => ( +
{ep.country && ( )} - Endpoint {idx + 1} + Endpoint {offset + idx + 1}
distance: {ep.distance} @@ -104,6 +109,11 @@ function RouteGroupExpandedDetail({ group }: { group: RecursiveRouteGroup }) {
))}
+ {sorted.length > 50 &&
+ Конечные точки {offset + 1}–{Math.min(offset + 50, sorted.length)} из {sorted.length} + + +
}
) } @@ -139,6 +149,7 @@ function RecursiveRoutesDataGrid({ () => [ { id: "route", + size: 176, accessorKey: "dstAddress", header: ({ column }) => ( @@ -147,7 +158,7 @@ function RecursiveRoutesDataGrid({ const g = row.original const isExpanded = expandedKey === g.key return ( -