From 323410ead78afc3c3f0e7cbb000863137b38d707 Mon Sep 17 00:00:00 2001
From: Alina <alina@MacBook-Air-Alina.local>
Date: Tue, 17 Feb 2026 23:45:18 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=BB=D0=B0=D1=81=D1=81=D0=BE-=D0=B2?=
 =?UTF-8?q?=D1=8B=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=BE?=
 =?UTF-8?q?=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B5,=20=D1=80=D0=B0=D0=B7?=
 =?UTF-8?q?=D0=BD=D0=B5=D1=81=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=BE=D1=80?=
 =?UTF-8?q?=D1=82=D0=BE=D0=B2=20=D0=BA=D0=B0=D1=80=D1=82/=D1=83=D1=81?=
 =?UTF-8?q?=D1=82=D1=80=D0=BE=D0=B9=D1=81=D1=82=D0=B2,=20=D1=83=D0=B4?=
 =?UTF-8?q?=D0=B2=D0=BE=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BC=D0=BE=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Лассо (rubberband) отключено по умолчанию, включается кнопкой в тулбаре
- Порты устройств с картами позиционируются ниже карт (absolute positioning)
- Высота устройств с картами и портами: сумма вместо max
- Мок данные удвоены: +4 сайта, +26 устройств, +6 карт, ~130 портов, ~30 линий

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/Toolbar/Toolbar.tsx   |  11 +
 .../src/features/schema/graph/initGraph.ts    |   2 +-
 .../src/features/schema/helpers/dataMapper.ts |  41 +-
 .../src/features/schema/layout/autoLayout.ts  |   5 +-
 .../src/features/schema/ports/portConfig.ts   |   2 +
 frontend/src/mock/schemaData.ts               | 656 ++++++++++++++++++
 frontend/src/store/schemaStore.ts             |  15 +
 7 files changed, 726 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Toolbar/Toolbar.tsx b/frontend/src/components/Toolbar/Toolbar.tsx
index 280ab14..d3d5b5f 100644
--- a/frontend/src/components/Toolbar/Toolbar.tsx
+++ b/frontend/src/components/Toolbar/Toolbar.tsx
@@ -11,6 +11,7 @@ import {
   NodeIndexOutlined,
   EyeOutlined,
   EditOutlined,
+  GatewayOutlined,
 } from '@ant-design/icons';
 import { useSchemaStore } from '../../store/schemaStore.ts';
 
@@ -23,6 +24,8 @@ export function Toolbar() {
   const toggleMinimap = useSchemaStore((s) => s.toggleMinimap);
   const switchLineType = useSchemaStore((s) => s.switchLineType);
   const toggleLabels = useSchemaStore((s) => s.toggleLabels);
+  const lassoActive = useSchemaStore((s) => s.lassoActive);
+  const toggleLasso = useSchemaStore((s) => s.toggleLasso);
 
   const zoom = graph ? Math.round(graph.zoom() * 100) : 100;
 
@@ -121,6 +124,14 @@ export function Toolbar() {
             onClick={() => message.info('В разработке')}
           />
         </Tooltip>
+        <Tooltip title="Выделение лассо">
+          <Button
+            size="small"
+            type={lassoActive ? 'primary' : 'default'}
+            icon={<GatewayOutlined />}
+            onClick={toggleLasso}
+          />
+        </Tooltip>
         <Tooltip title="Экспорт PNG">
           <Button
             size="small"
diff --git a/frontend/src/features/schema/graph/initGraph.ts b/frontend/src/features/schema/graph/initGraph.ts
index 0037bb0..9a823d8 100644
--- a/frontend/src/features/schema/graph/initGraph.ts
+++ b/frontend/src/features/schema/graph/initGraph.ts
@@ -166,7 +166,7 @@ export function initGraph(
     new Selection({
       enabled: true,
       multiple: true,
-      rubberband: true,
+      rubberband: false,
       movable: true,
       showNodeSelectionBox: true,
     }),
diff --git a/frontend/src/features/schema/helpers/dataMapper.ts b/frontend/src/features/schema/helpers/dataMapper.ts
index f84e096..adb4467 100644
--- a/frontend/src/features/schema/helpers/dataMapper.ts
+++ b/frontend/src/features/schema/helpers/dataMapper.ts
@@ -53,7 +53,10 @@ function getDeviceSize(
   }
   const portHeight = Math.max(portCount * 22, 60);
   const cardsHeight = cardCount > 0 ? cardCount * (CARD_HEIGHT + 6) + 8 : 0;
-  const bodyHeight = Math.max(portHeight, cardsHeight);
+  // When device has both cards and ports, stack them vertically to avoid overlap
+  const bodyHeight = cardCount > 0 && portCount > 0
+    ? cardsHeight + portHeight
+    : Math.max(portHeight, cardsHeight);
   return {
     width: DEVICE_MIN_WIDTH,
     height: Math.max(DEVICE_MIN_HEIGHT, DEVICE_HEADER_HEIGHT + bodyHeight + 10),
@@ -112,12 +115,42 @@ export function buildGraphData(
     const deviceCards = data.cards.filter((c) => c.deviceId === device.id && c.visible);
     const size = getDeviceSize(device.category, device.name, device.marking, devicePorts.length, deviceCards.length);
 
+    // When device has cards, position device-level ports below cards area
+    const hasCards = deviceCards.length > 0;
+    const cardsEndY = hasCards
+      ? DEVICE_HEADER_HEIGHT + deviceCards.length * (CARD_HEIGHT + 6) + 8
+      : 0;
+
+    // Group device ports by resolved side for Y offset calculation
+    const leftDevicePorts = devicePorts.filter(
+      (p) => (portSideMap.get(p.id) ?? p.side) === 'left',
+    );
+    const rightDevicePorts = devicePorts.filter(
+      (p) => (portSideMap.get(p.id) ?? p.side) === 'right',
+    );
+
     const portItems = devicePorts.map((port) => {
       const resolvedSide = portSideMap.get(port.id) ?? port.side;
       const label = port.slotName ? `${port.slotName}:${port.name}` : port.name;
-      return createPortItem(port.id, resolvedSide, label, port.labelColor || undefined);
+
+      let portArgs: { x: number; y: number } | undefined;
+      if (hasCards) {
+        const sameSidePorts = resolvedSide === 'left' ? leftDevicePorts : rightDevicePorts;
+        const indexInSide = sameSidePorts.indexOf(port);
+        const portSpacing = 22;
+        portArgs = {
+          x: resolvedSide === 'left' ? 0 : size.width,
+          y: cardsEndY + portSpacing * (indexInSide + 0.5),
+        };
+      }
+
+      return createPortItem(port.id, resolvedSide, label, port.labelColor || undefined, portArgs);
     });
 
+    // Use absolute positioning when device has cards to avoid overlap with card ports
+    const leftPosition = hasCards ? 'absolute' : 'left';
+    const rightPosition = hasCards ? 'absolute' : 'right';
+
     const node: GraphNodeConfig = {
       id: device.id,
       shape,
@@ -141,7 +174,7 @@ export function buildGraphData(
       ports: {
         groups: {
           left: {
-            position: 'left',
+            position: leftPosition,
             attrs: {
               circle: {
                 r: 6,
@@ -156,7 +189,7 @@ export function buildGraphData(
             },
           },
           right: {
-            position: 'right',
+            position: rightPosition,
             attrs: {
               circle: {
                 r: 6,
diff --git a/frontend/src/features/schema/layout/autoLayout.ts b/frontend/src/features/schema/layout/autoLayout.ts
index 386c283..e3fc722 100644
--- a/frontend/src/features/schema/layout/autoLayout.ts
+++ b/frontend/src/features/schema/layout/autoLayout.ts
@@ -38,7 +38,10 @@ function getDeviceSize(device: Device, portCount: number, cardCount: number): {
   // Dynamic height based on port count + header + cards
   const portHeight = Math.max(portCount * 22, 60);
   const cardsHeight = cardCount > 0 ? cardCount * (CARD_HEIGHT + 6) + 8 : 0;
-  const bodyHeight = Math.max(portHeight, cardsHeight);
+  // When device has both cards and ports, stack them vertically to avoid overlap
+  const bodyHeight = cardCount > 0 && portCount > 0
+    ? cardsHeight + portHeight
+    : Math.max(portHeight, cardsHeight);
   return {
     width: DEVICE_MIN_WIDTH,
     height: Math.max(DEVICE_MIN_HEIGHT, DEVICE_HEADER_HEIGHT + bodyHeight + 10),
diff --git a/frontend/src/features/schema/ports/portConfig.ts b/frontend/src/features/schema/ports/portConfig.ts
index ca3aa08..502fd92 100644
--- a/frontend/src/features/schema/ports/portConfig.ts
+++ b/frontend/src/features/schema/ports/portConfig.ts
@@ -44,10 +44,12 @@ export function createPortItem(
   side: 'left' | 'right',
   label: string,
   labelColor?: string,
+  args?: { x: number; y: number },
 ) {
   return {
     id: portId,
     group: side,
+    args,
     attrs: {
       text: {
         text: label,
diff --git a/frontend/src/mock/schemaData.ts b/frontend/src/mock/schemaData.ts
index 60dca24..e47ac3d 100644
--- a/frontend/src/mock/schemaData.ts
+++ b/frontend/src/mock/schemaData.ts
@@ -64,6 +64,42 @@ export const mockData: SchemaData = {
       status: EntityStatus.UnderConstruction,
       parentSiteId: 'site-2',
     },
+    {
+      id: 'site-4',
+      name: 'Узел связи Западный',
+      address: 'ул. Гагарина, 7',
+      erpCode: 'ERP-007',
+      code1C: '1C-007',
+      status: EntityStatus.Active,
+      parentSiteId: null,
+    },
+    {
+      id: 'site-4-1',
+      name: 'Подузел Промышленный',
+      address: 'ул. Гагарина, 7а',
+      erpCode: 'ERP-008',
+      code1C: '1C-008',
+      status: EntityStatus.Active,
+      parentSiteId: 'site-4',
+    },
+    {
+      id: 'site-5',
+      name: 'Узел связи Дальний',
+      address: 'ул. Космонавтов, 22',
+      erpCode: 'ERP-009',
+      code1C: '1C-009',
+      status: EntityStatus.Active,
+      parentSiteId: null,
+    },
+    {
+      id: 'site-5-1',
+      name: 'Подузел Пригородный',
+      address: 'ул. Космонавтов, 22б',
+      erpCode: 'ERP-010',
+      code1C: '1C-010',
+      status: EntityStatus.Planned,
+      parentSiteId: 'site-5',
+    },
   ],
 
   devices: [
@@ -487,6 +523,362 @@ export const mockData: SchemaData = {
       status: EntityStatus.Active,
       siteId: 'site-3',
     },
+
+    // ===== Site 4: Западный =====
+    // Layer 1 — кроссы
+    {
+      id: 'dev-cross-7',
+      name: 'Кросс оптический ОРШ-7',
+      networkName: 'ORS-7',
+      ipAddress: '',
+      marking: 'ОРШ-48',
+      id1: 'INV-041',
+      id2: 'SN-041',
+      group: DeviceGroup.Passive,
+      category: DeviceCategory.CrossOptical,
+      status: EntityStatus.Active,
+      siteId: 'site-4',
+    },
+    {
+      id: 'dev-cross-8',
+      name: 'Кросс оптический ОРШ-8',
+      networkName: 'ORS-8',
+      ipAddress: '',
+      marking: 'ОРШ-16',
+      id1: 'INV-042',
+      id2: 'SN-042',
+      group: DeviceGroup.Passive,
+      category: DeviceCategory.CrossOptical,
+      status: EntityStatus.Planned,
+      siteId: 'site-4',
+    },
+    {
+      id: 'dev-cross-9',
+      name: 'Кросс медный КРТ-2',
+      networkName: 'KRT-2',
+      ipAddress: '',
+      marking: 'КРТ-50',
+      id1: 'INV-043',
+      id2: 'SN-043',
+      group: DeviceGroup.Passive,
+      category: DeviceCategory.CrossCopper,
+      status: EntityStatus.Active,
+      siteId: 'site-4',
+    },
+    // Layer 2 — DWDM
+    {
+      id: 'dev-dwdm-4',
+      name: 'DWDM Nokia 1830 PSS',
+      networkName: 'DWDM-NOK-01',
+      ipAddress: '10.0.4.10',
+      marking: '',
+      id1: 'INV-044',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.DWDM,
+      status: EntityStatus.Active,
+      siteId: 'site-4',
+    },
+    // Layer 3 — MEN
+    {
+      id: 'dev-men-1',
+      name: 'MEN Cisco ME 3600X',
+      networkName: 'MEN-CISCO-01',
+      ipAddress: '10.0.4.30',
+      marking: '',
+      id1: 'INV-045',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.MEN,
+      status: EntityStatus.Active,
+      siteId: 'site-4',
+    },
+    // Layer 4 — IP / LAN
+    {
+      id: 'dev-router-5',
+      name: 'Маршрутизатор Huawei NE40E',
+      networkName: 'RTR-HW-01',
+      ipAddress: '10.0.4.1',
+      marking: '',
+      id1: 'INV-046',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.IP,
+      status: EntityStatus.Active,
+      siteId: 'site-4',
+    },
+    {
+      id: 'dev-router-6',
+      name: 'Маршрутизатор MikroTik CCR2004',
+      networkName: 'RTR-MT-01',
+      ipAddress: '10.0.4.3',
+      marking: '',
+      id1: 'INV-047',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.IP,
+      status: EntityStatus.Active,
+      siteId: 'site-4',
+    },
+    {
+      id: 'dev-switch-5',
+      name: 'Коммутатор Cisco Nexus 5548',
+      networkName: 'SW-NX-01',
+      ipAddress: '10.0.4.2',
+      marking: '',
+      id1: 'INV-048',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.LanWlan,
+      status: EntityStatus.Active,
+      siteId: 'site-4',
+    },
+    {
+      id: 'dev-switch-6',
+      name: 'Коммутатор Eltex MES2324',
+      networkName: 'SW-ELT-02',
+      ipAddress: '10.0.4.4',
+      marking: '',
+      id1: 'INV-049',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.LanWlan,
+      status: EntityStatus.Reserved,
+      siteId: 'site-4',
+    },
+    // Layer 5
+    {
+      id: 'dev-server-4',
+      name: 'Сервер AAA',
+      networkName: 'SRV-AAA-01',
+      ipAddress: '10.0.4.100',
+      marking: '',
+      id1: 'INV-050',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.Server,
+      status: EntityStatus.Active,
+      siteId: 'site-4',
+    },
+    {
+      id: 'dev-sorm-2',
+      name: 'СОРМ-3 Omega',
+      networkName: 'SORM-02',
+      ipAddress: '10.0.4.200',
+      marking: '',
+      id1: 'INV-051',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.SORM,
+      status: EntityStatus.Active,
+      siteId: 'site-4',
+    },
+    // Layer 6
+    {
+      id: 'dev-voip-2',
+      name: 'Шлюз VoIP Eltex TAU-36',
+      networkName: 'VOIP-ELT-02',
+      ipAddress: '10.0.4.50',
+      marking: '',
+      id1: 'INV-052',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.VOIP,
+      status: EntityStatus.Active,
+      siteId: 'site-4',
+    },
+    {
+      id: 'dev-xdsl-2',
+      name: 'DSLAM Huawei MA5616',
+      networkName: 'DSLAM-HW-01',
+      ipAddress: '10.0.4.20',
+      marking: '',
+      id1: 'INV-053',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.xDSL,
+      status: EntityStatus.Faulty,
+      siteId: 'site-4',
+    },
+
+    // ===== Site 4-1: Подузел Промышленный =====
+    {
+      id: 'dev-splice-4',
+      name: 'Муфта МТОК-72',
+      networkName: '',
+      ipAddress: '',
+      marking: 'МТОК-72',
+      id1: 'INV-054',
+      id2: 'SN-054',
+      group: DeviceGroup.Passive,
+      category: DeviceCategory.Unknown,
+      status: EntityStatus.Active,
+      siteId: 'site-4-1',
+    },
+    {
+      id: 'dev-switch-7',
+      name: 'Коммутатор D-Link DGS-1210',
+      networkName: 'SW-DL-01',
+      ipAddress: '10.0.4.62',
+      marking: '',
+      id1: 'INV-055',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.LanWlan,
+      status: EntityStatus.Active,
+      siteId: 'site-4-1',
+    },
+
+    // ===== Site 5: Дальний =====
+    // Layer 1 — кроссы
+    {
+      id: 'dev-cross-10',
+      name: 'Кросс оптический ОРШ-10',
+      networkName: 'ORS-10',
+      ipAddress: '',
+      marking: 'ОРШ-64',
+      id1: 'INV-056',
+      id2: 'SN-056',
+      group: DeviceGroup.Passive,
+      category: DeviceCategory.CrossOptical,
+      status: EntityStatus.Active,
+      siteId: 'site-5',
+    },
+    {
+      id: 'dev-cross-11',
+      name: 'Кросс оптический ОРШ-11',
+      networkName: 'ORS-11',
+      ipAddress: '',
+      marking: 'ОРШ-32',
+      id1: 'INV-057',
+      id2: 'SN-057',
+      group: DeviceGroup.Passive,
+      category: DeviceCategory.CrossOptical,
+      status: EntityStatus.UnderConstruction,
+      siteId: 'site-5',
+    },
+    // Layer 2 — DWDM
+    {
+      id: 'dev-dwdm-5',
+      name: 'DWDM Infinera GX G42',
+      networkName: 'DWDM-INF-01',
+      ipAddress: '10.0.5.10',
+      marking: '',
+      id1: 'INV-058',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.DWDM,
+      status: EntityStatus.Active,
+      siteId: 'site-5',
+    },
+    // Layer 4 — IP / LAN
+    {
+      id: 'dev-router-7',
+      name: 'Маршрутизатор Cisco ASR 920',
+      networkName: 'RTR-CISCO-02',
+      ipAddress: '10.0.5.1',
+      marking: '',
+      id1: 'INV-059',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.IP,
+      status: EntityStatus.Active,
+      siteId: 'site-5',
+    },
+    {
+      id: 'dev-router-8',
+      name: 'Маршрутизатор Juniper ACX7100',
+      networkName: 'RTR-JUN-02',
+      ipAddress: '10.0.5.3',
+      marking: '',
+      id1: 'INV-060',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.IP,
+      status: EntityStatus.Planned,
+      siteId: 'site-5',
+    },
+    {
+      id: 'dev-switch-8',
+      name: 'Коммутатор Aruba CX 6300',
+      networkName: 'SW-ARU-01',
+      ipAddress: '10.0.5.2',
+      marking: '',
+      id1: 'INV-061',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.LanWlan,
+      status: EntityStatus.Active,
+      siteId: 'site-5',
+    },
+    // Layer 5 — серверы
+    {
+      id: 'dev-server-5',
+      name: 'Сервер DNS',
+      networkName: 'SRV-DNS-01',
+      ipAddress: '10.0.5.100',
+      marking: '',
+      id1: 'INV-062',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.Server,
+      status: EntityStatus.Active,
+      siteId: 'site-5',
+    },
+    {
+      id: 'dev-server-6',
+      name: 'Сервер NTP',
+      networkName: 'SRV-NTP-01',
+      ipAddress: '10.0.5.101',
+      marking: '',
+      id1: 'INV-063',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.Server,
+      status: EntityStatus.Active,
+      siteId: 'site-5',
+    },
+
+    // ===== Site 5-1: Подузел Пригородный =====
+    {
+      id: 'dev-rrl-2',
+      name: 'РРС NEC iPASOLINK',
+      networkName: 'RRL-NEC-01',
+      ipAddress: '10.0.5.60',
+      marking: '',
+      id1: 'INV-064',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.RRL,
+      status: EntityStatus.Active,
+      siteId: 'site-5-1',
+    },
+    {
+      id: 'dev-splice-5',
+      name: 'Муфта МТОК-24',
+      networkName: '',
+      ipAddress: '',
+      marking: 'МТОК-24',
+      id1: 'INV-065',
+      id2: 'SN-065',
+      group: DeviceGroup.Passive,
+      category: DeviceCategory.Unknown,
+      status: EntityStatus.Planned,
+      siteId: 'site-5-1',
+    },
+    {
+      id: 'dev-ran-bs-2',
+      name: 'БС Nokia Flexi BTS',
+      networkName: 'RAN-BS-02',
+      ipAddress: '10.0.5.70',
+      marking: '',
+      id1: 'INV-066',
+      id2: '',
+      group: DeviceGroup.Active,
+      category: DeviceCategory.RanBaseStation,
+      status: EntityStatus.Active,
+      siteId: 'site-5-1',
+    },
   ],
 
   cards: [
@@ -508,6 +900,16 @@ export const mockData: SchemaData = {
     { id: 'card-10', slotName: '2', networkName: 'MOTR', status: EntityStatus.Active, visible: true, deviceId: 'dev-dwdm-3' },
     // Router-4 cards
     { id: 'card-11', slotName: '1', networkName: 'IMM-12', status: EntityStatus.Active, visible: true, deviceId: 'dev-router-4' },
+    // DWDM-4 cards
+    { id: 'card-12', slotName: '1', networkName: 'OTU2e', status: EntityStatus.Active, visible: true, deviceId: 'dev-dwdm-4' },
+    { id: 'card-13', slotName: '2', networkName: 'WSS-9', status: EntityStatus.Active, visible: true, deviceId: 'dev-dwdm-4' },
+    // Router-5 cards
+    { id: 'card-14', slotName: '1', networkName: 'CR5D00E1NF', status: EntityStatus.Active, visible: true, deviceId: 'dev-router-5' },
+    { id: 'card-15', slotName: '2', networkName: 'CR5D0LAXF', status: EntityStatus.Active, visible: true, deviceId: 'dev-router-5' },
+    // DWDM-5 cards
+    { id: 'card-16', slotName: '1', networkName: 'TOM-100G', status: EntityStatus.Active, visible: true, deviceId: 'dev-dwdm-5' },
+    // Router-7 cards
+    { id: 'card-17', slotName: '1', networkName: 'A920-FAN', status: EntityStatus.Active, visible: true, deviceId: 'dev-router-7' },
   ],
 
   ports: [
@@ -745,6 +1147,191 @@ export const mockData: SchemaData = {
     { id: 'p-sp3-2', name: '2', slotName: '0', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-splice-3', cardId: null },
     { id: 'p-sp3-3', name: '3', slotName: '0', side: 'left', sortOrder: 3, labelColor: '', deviceId: 'dev-splice-3', cardId: null },
     { id: 'p-sp3-4', name: '4', slotName: '0', side: 'right', sortOrder: 4, labelColor: '', deviceId: 'dev-splice-3', cardId: null },
+
+    // ===== Cross 7 (6L + 6S) =====
+    { id: 'p-c7-l1', name: 'L1', slotName: 'L', side: 'left', sortOrder: 1, labelColor: '#1890ff', deviceId: 'dev-cross-7', cardId: null },
+    { id: 'p-c7-l2', name: 'L2', slotName: 'L', side: 'left', sortOrder: 2, labelColor: '#1890ff', deviceId: 'dev-cross-7', cardId: null },
+    { id: 'p-c7-l3', name: 'L3', slotName: 'L', side: 'left', sortOrder: 3, labelColor: '#1890ff', deviceId: 'dev-cross-7', cardId: null },
+    { id: 'p-c7-l4', name: 'L4', slotName: 'L', side: 'left', sortOrder: 4, labelColor: '#1890ff', deviceId: 'dev-cross-7', cardId: null },
+    { id: 'p-c7-l5', name: 'L5', slotName: 'L', side: 'left', sortOrder: 5, labelColor: '#1890ff', deviceId: 'dev-cross-7', cardId: null },
+    { id: 'p-c7-l6', name: 'L6', slotName: 'L', side: 'left', sortOrder: 6, labelColor: '#1890ff', deviceId: 'dev-cross-7', cardId: null },
+    { id: 'p-c7-s1', name: 'S1', slotName: 'S', side: 'right', sortOrder: 1, labelColor: '#52c41a', deviceId: 'dev-cross-7', cardId: null },
+    { id: 'p-c7-s2', name: 'S2', slotName: 'S', side: 'right', sortOrder: 2, labelColor: '#52c41a', deviceId: 'dev-cross-7', cardId: null },
+    { id: 'p-c7-s3', name: 'S3', slotName: 'S', side: 'right', sortOrder: 3, labelColor: '#52c41a', deviceId: 'dev-cross-7', cardId: null },
+    { id: 'p-c7-s4', name: 'S4', slotName: 'S', side: 'right', sortOrder: 4, labelColor: '#52c41a', deviceId: 'dev-cross-7', cardId: null },
+    { id: 'p-c7-s5', name: 'S5', slotName: 'S', side: 'right', sortOrder: 5, labelColor: '#52c41a', deviceId: 'dev-cross-7', cardId: null },
+    { id: 'p-c7-s6', name: 'S6', slotName: 'S', side: 'right', sortOrder: 6, labelColor: '#52c41a', deviceId: 'dev-cross-7', cardId: null },
+
+    // ===== Cross 8 (4L + 4S) =====
+    { id: 'p-c8-l1', name: 'L1', slotName: 'L', side: 'left', sortOrder: 1, labelColor: '#1890ff', deviceId: 'dev-cross-8', cardId: null },
+    { id: 'p-c8-l2', name: 'L2', slotName: 'L', side: 'left', sortOrder: 2, labelColor: '#1890ff', deviceId: 'dev-cross-8', cardId: null },
+    { id: 'p-c8-l3', name: 'L3', slotName: 'L', side: 'left', sortOrder: 3, labelColor: '#1890ff', deviceId: 'dev-cross-8', cardId: null },
+    { id: 'p-c8-l4', name: 'L4', slotName: 'L', side: 'left', sortOrder: 4, labelColor: '#1890ff', deviceId: 'dev-cross-8', cardId: null },
+    { id: 'p-c8-s1', name: 'S1', slotName: 'S', side: 'right', sortOrder: 1, labelColor: '#52c41a', deviceId: 'dev-cross-8', cardId: null },
+    { id: 'p-c8-s2', name: 'S2', slotName: 'S', side: 'right', sortOrder: 2, labelColor: '#52c41a', deviceId: 'dev-cross-8', cardId: null },
+    { id: 'p-c8-s3', name: 'S3', slotName: 'S', side: 'right', sortOrder: 3, labelColor: '#52c41a', deviceId: 'dev-cross-8', cardId: null },
+    { id: 'p-c8-s4', name: 'S4', slotName: 'S', side: 'right', sortOrder: 4, labelColor: '#52c41a', deviceId: 'dev-cross-8', cardId: null },
+
+    // ===== Cross 9 copper (4L + 4S) =====
+    { id: 'p-c9-l1', name: 'L1', slotName: 'L', side: 'left', sortOrder: 1, labelColor: '#fa8c16', deviceId: 'dev-cross-9', cardId: null },
+    { id: 'p-c9-l2', name: 'L2', slotName: 'L', side: 'left', sortOrder: 2, labelColor: '#fa8c16', deviceId: 'dev-cross-9', cardId: null },
+    { id: 'p-c9-l3', name: 'L3', slotName: 'L', side: 'left', sortOrder: 3, labelColor: '#fa8c16', deviceId: 'dev-cross-9', cardId: null },
+    { id: 'p-c9-l4', name: 'L4', slotName: 'L', side: 'left', sortOrder: 4, labelColor: '#fa8c16', deviceId: 'dev-cross-9', cardId: null },
+    { id: 'p-c9-s1', name: 'S1', slotName: 'S', side: 'right', sortOrder: 1, labelColor: '#eb2f96', deviceId: 'dev-cross-9', cardId: null },
+    { id: 'p-c9-s2', name: 'S2', slotName: 'S', side: 'right', sortOrder: 2, labelColor: '#eb2f96', deviceId: 'dev-cross-9', cardId: null },
+    { id: 'p-c9-s3', name: 'S3', slotName: 'S', side: 'right', sortOrder: 3, labelColor: '#eb2f96', deviceId: 'dev-cross-9', cardId: null },
+    { id: 'p-c9-s4', name: 'S4', slotName: 'S', side: 'right', sortOrder: 4, labelColor: '#eb2f96', deviceId: 'dev-cross-9', cardId: null },
+
+    // ===== DWDM-4 card ports =====
+    { id: 'p-dw4-c12-1', name: 'IN', slotName: '1', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-dwdm-4', cardId: 'card-12' },
+    { id: 'p-dw4-c12-2', name: 'OUT', slotName: '1', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-dwdm-4', cardId: 'card-12' },
+    { id: 'p-dw4-c13-1', name: 'IN', slotName: '2', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-dwdm-4', cardId: 'card-13' },
+    { id: 'p-dw4-c13-2', name: 'OUT', slotName: '2', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-dwdm-4', cardId: 'card-13' },
+    // DWDM-4 device ports
+    { id: 'p-dw4-1', name: 'Ge0/0/1', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-dwdm-4', cardId: null },
+    { id: 'p-dw4-2', name: 'Ge0/0/2', slotName: '0', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-dwdm-4', cardId: null },
+
+    // ===== MEN-1 ports =====
+    { id: 'p-men-1', name: 'Ge0/1', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-men-1', cardId: null },
+    { id: 'p-men-2', name: 'Ge0/2', slotName: '0', side: 'left', sortOrder: 2, labelColor: '', deviceId: 'dev-men-1', cardId: null },
+    { id: 'p-men-3', name: 'Ge0/3', slotName: '0', side: 'right', sortOrder: 3, labelColor: '', deviceId: 'dev-men-1', cardId: null },
+    { id: 'p-men-4', name: 'Ge0/4', slotName: '0', side: 'right', sortOrder: 4, labelColor: '', deviceId: 'dev-men-1', cardId: null },
+
+    // ===== Router-5 card ports =====
+    { id: 'p-rtr5-c14-1', name: 'Te0/0/0/0', slotName: '1', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-router-5', cardId: 'card-14' },
+    { id: 'p-rtr5-c14-2', name: 'Te0/0/0/1', slotName: '1', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-router-5', cardId: 'card-14' },
+    { id: 'p-rtr5-c15-1', name: 'Te0/1/0/0', slotName: '2', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-router-5', cardId: 'card-15' },
+    { id: 'p-rtr5-c15-2', name: 'Te0/1/0/1', slotName: '2', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-router-5', cardId: 'card-15' },
+    // Router-5 device ports
+    { id: 'p-rtr5-1', name: 'Ge0/0/0', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-router-5', cardId: null },
+    { id: 'p-rtr5-2', name: 'Ge0/0/1', slotName: '0', side: 'left', sortOrder: 2, labelColor: '', deviceId: 'dev-router-5', cardId: null },
+    { id: 'p-rtr5-3', name: 'Ge0/0/2', slotName: '0', side: 'right', sortOrder: 3, labelColor: '', deviceId: 'dev-router-5', cardId: null },
+    { id: 'p-rtr5-4', name: 'Ge0/0/3', slotName: '0', side: 'right', sortOrder: 4, labelColor: '', deviceId: 'dev-router-5', cardId: null },
+
+    // ===== Router-6 ports =====
+    { id: 'p-rtr6-1', name: 'ether1', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-router-6', cardId: null },
+    { id: 'p-rtr6-2', name: 'ether2', slotName: '0', side: 'left', sortOrder: 2, labelColor: '', deviceId: 'dev-router-6', cardId: null },
+    { id: 'p-rtr6-3', name: 'ether3', slotName: '0', side: 'right', sortOrder: 3, labelColor: '', deviceId: 'dev-router-6', cardId: null },
+    { id: 'p-rtr6-4', name: 'ether4', slotName: '0', side: 'right', sortOrder: 4, labelColor: '', deviceId: 'dev-router-6', cardId: null },
+
+    // ===== Switch-5 ports =====
+    { id: 'p-sw5-1', name: 'Eth1/1', slotName: '1', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-switch-5', cardId: null },
+    { id: 'p-sw5-2', name: 'Eth1/2', slotName: '1', side: 'left', sortOrder: 2, labelColor: '', deviceId: 'dev-switch-5', cardId: null },
+    { id: 'p-sw5-3', name: 'Eth1/3', slotName: '1', side: 'right', sortOrder: 3, labelColor: '', deviceId: 'dev-switch-5', cardId: null },
+    { id: 'p-sw5-4', name: 'Eth1/4', slotName: '1', side: 'right', sortOrder: 4, labelColor: '', deviceId: 'dev-switch-5', cardId: null },
+
+    // ===== Switch-6 ports =====
+    { id: 'p-sw6-1', name: 'Ge0/1', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-switch-6', cardId: null },
+    { id: 'p-sw6-2', name: 'Ge0/2', slotName: '0', side: 'left', sortOrder: 2, labelColor: '', deviceId: 'dev-switch-6', cardId: null },
+    { id: 'p-sw6-3', name: 'Ge0/3', slotName: '0', side: 'right', sortOrder: 3, labelColor: '', deviceId: 'dev-switch-6', cardId: null },
+    { id: 'p-sw6-4', name: 'Ge0/4', slotName: '0', side: 'right', sortOrder: 4, labelColor: '', deviceId: 'dev-switch-6', cardId: null },
+
+    // ===== Server-4 ports =====
+    { id: 'p-srv4-1', name: 'eth0', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-server-4', cardId: null },
+    { id: 'p-srv4-2', name: 'eth1', slotName: '0', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-server-4', cardId: null },
+
+    // ===== SORM-2 ports =====
+    { id: 'p-sorm2-1', name: 'eth0', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-sorm-2', cardId: null },
+    { id: 'p-sorm2-2', name: 'eth1', slotName: '0', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-sorm-2', cardId: null },
+
+    // ===== VoIP-2 ports =====
+    { id: 'p-voip2-1', name: 'WAN', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-voip-2', cardId: null },
+    { id: 'p-voip2-2', name: 'FXS1', slotName: '0', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-voip-2', cardId: null },
+    { id: 'p-voip2-3', name: 'FXS2', slotName: '0', side: 'right', sortOrder: 3, labelColor: '', deviceId: 'dev-voip-2', cardId: null },
+
+    // ===== xDSL-2 ports =====
+    { id: 'p-xdsl2-1', name: 'ADSL0/0', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-xdsl-2', cardId: null },
+    { id: 'p-xdsl2-2', name: 'ADSL0/1', slotName: '0', side: 'left', sortOrder: 2, labelColor: '', deviceId: 'dev-xdsl-2', cardId: null },
+    { id: 'p-xdsl2-3', name: 'Uplink1', slotName: '0', side: 'right', sortOrder: 3, labelColor: '', deviceId: 'dev-xdsl-2', cardId: null },
+    { id: 'p-xdsl2-4', name: 'Uplink2', slotName: '0', side: 'right', sortOrder: 4, labelColor: '', deviceId: 'dev-xdsl-2', cardId: null },
+
+    // ===== Splice-4 ports =====
+    { id: 'p-sp4-1', name: '1', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-splice-4', cardId: null },
+    { id: 'p-sp4-2', name: '2', slotName: '0', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-splice-4', cardId: null },
+    { id: 'p-sp4-3', name: '3', slotName: '0', side: 'left', sortOrder: 3, labelColor: '', deviceId: 'dev-splice-4', cardId: null },
+    { id: 'p-sp4-4', name: '4', slotName: '0', side: 'right', sortOrder: 4, labelColor: '', deviceId: 'dev-splice-4', cardId: null },
+
+    // ===== Switch-7 ports =====
+    { id: 'p-sw7-1', name: 'Ge1', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-switch-7', cardId: null },
+    { id: 'p-sw7-2', name: 'Ge2', slotName: '0', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-switch-7', cardId: null },
+    { id: 'p-sw7-3', name: 'Ge3', slotName: '0', side: 'left', sortOrder: 3, labelColor: '', deviceId: 'dev-switch-7', cardId: null },
+    { id: 'p-sw7-4', name: 'Ge4', slotName: '0', side: 'right', sortOrder: 4, labelColor: '', deviceId: 'dev-switch-7', cardId: null },
+
+    // ===== Cross 10 (6L + 6S) =====
+    { id: 'p-c10-l1', name: 'L1', slotName: 'L', side: 'left', sortOrder: 1, labelColor: '#1890ff', deviceId: 'dev-cross-10', cardId: null },
+    { id: 'p-c10-l2', name: 'L2', slotName: 'L', side: 'left', sortOrder: 2, labelColor: '#1890ff', deviceId: 'dev-cross-10', cardId: null },
+    { id: 'p-c10-l3', name: 'L3', slotName: 'L', side: 'left', sortOrder: 3, labelColor: '#1890ff', deviceId: 'dev-cross-10', cardId: null },
+    { id: 'p-c10-l4', name: 'L4', slotName: 'L', side: 'left', sortOrder: 4, labelColor: '#1890ff', deviceId: 'dev-cross-10', cardId: null },
+    { id: 'p-c10-l5', name: 'L5', slotName: 'L', side: 'left', sortOrder: 5, labelColor: '#1890ff', deviceId: 'dev-cross-10', cardId: null },
+    { id: 'p-c10-l6', name: 'L6', slotName: 'L', side: 'left', sortOrder: 6, labelColor: '#1890ff', deviceId: 'dev-cross-10', cardId: null },
+    { id: 'p-c10-s1', name: 'S1', slotName: 'S', side: 'right', sortOrder: 1, labelColor: '#52c41a', deviceId: 'dev-cross-10', cardId: null },
+    { id: 'p-c10-s2', name: 'S2', slotName: 'S', side: 'right', sortOrder: 2, labelColor: '#52c41a', deviceId: 'dev-cross-10', cardId: null },
+    { id: 'p-c10-s3', name: 'S3', slotName: 'S', side: 'right', sortOrder: 3, labelColor: '#52c41a', deviceId: 'dev-cross-10', cardId: null },
+    { id: 'p-c10-s4', name: 'S4', slotName: 'S', side: 'right', sortOrder: 4, labelColor: '#52c41a', deviceId: 'dev-cross-10', cardId: null },
+    { id: 'p-c10-s5', name: 'S5', slotName: 'S', side: 'right', sortOrder: 5, labelColor: '#52c41a', deviceId: 'dev-cross-10', cardId: null },
+    { id: 'p-c10-s6', name: 'S6', slotName: 'S', side: 'right', sortOrder: 6, labelColor: '#52c41a', deviceId: 'dev-cross-10', cardId: null },
+
+    // ===== Cross 11 (4L + 4S) =====
+    { id: 'p-c11-l1', name: 'L1', slotName: 'L', side: 'left', sortOrder: 1, labelColor: '#1890ff', deviceId: 'dev-cross-11', cardId: null },
+    { id: 'p-c11-l2', name: 'L2', slotName: 'L', side: 'left', sortOrder: 2, labelColor: '#1890ff', deviceId: 'dev-cross-11', cardId: null },
+    { id: 'p-c11-l3', name: 'L3', slotName: 'L', side: 'left', sortOrder: 3, labelColor: '#1890ff', deviceId: 'dev-cross-11', cardId: null },
+    { id: 'p-c11-l4', name: 'L4', slotName: 'L', side: 'left', sortOrder: 4, labelColor: '#1890ff', deviceId: 'dev-cross-11', cardId: null },
+    { id: 'p-c11-s1', name: 'S1', slotName: 'S', side: 'right', sortOrder: 1, labelColor: '#52c41a', deviceId: 'dev-cross-11', cardId: null },
+    { id: 'p-c11-s2', name: 'S2', slotName: 'S', side: 'right', sortOrder: 2, labelColor: '#52c41a', deviceId: 'dev-cross-11', cardId: null },
+    { id: 'p-c11-s3', name: 'S3', slotName: 'S', side: 'right', sortOrder: 3, labelColor: '#52c41a', deviceId: 'dev-cross-11', cardId: null },
+    { id: 'p-c11-s4', name: 'S4', slotName: 'S', side: 'right', sortOrder: 4, labelColor: '#52c41a', deviceId: 'dev-cross-11', cardId: null },
+
+    // ===== DWDM-5 card ports =====
+    { id: 'p-dw5-c16-1', name: 'IN', slotName: '1', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-dwdm-5', cardId: 'card-16' },
+    { id: 'p-dw5-c16-2', name: 'OUT', slotName: '1', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-dwdm-5', cardId: 'card-16' },
+    // DWDM-5 device ports
+    { id: 'p-dw5-1', name: 'Ge0/0/1', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-dwdm-5', cardId: null },
+    { id: 'p-dw5-2', name: 'Ge0/0/2', slotName: '0', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-dwdm-5', cardId: null },
+
+    // ===== Router-7 card ports =====
+    { id: 'p-rtr7-c17-1', name: 'Te0/0/24', slotName: '1', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-router-7', cardId: 'card-17' },
+    { id: 'p-rtr7-c17-2', name: 'Te0/0/25', slotName: '1', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-router-7', cardId: 'card-17' },
+    // Router-7 device ports
+    { id: 'p-rtr7-1', name: 'Ge0/0/0', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-router-7', cardId: null },
+    { id: 'p-rtr7-2', name: 'Ge0/0/1', slotName: '0', side: 'left', sortOrder: 2, labelColor: '', deviceId: 'dev-router-7', cardId: null },
+    { id: 'p-rtr7-3', name: 'Ge0/0/2', slotName: '0', side: 'right', sortOrder: 3, labelColor: '', deviceId: 'dev-router-7', cardId: null },
+    { id: 'p-rtr7-4', name: 'Ge0/0/3', slotName: '0', side: 'right', sortOrder: 4, labelColor: '', deviceId: 'dev-router-7', cardId: null },
+
+    // ===== Router-8 ports =====
+    { id: 'p-rtr8-1', name: 'et-0/0/0', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-router-8', cardId: null },
+    { id: 'p-rtr8-2', name: 'et-0/0/1', slotName: '0', side: 'left', sortOrder: 2, labelColor: '', deviceId: 'dev-router-8', cardId: null },
+    { id: 'p-rtr8-3', name: 'et-0/0/2', slotName: '0', side: 'right', sortOrder: 3, labelColor: '', deviceId: 'dev-router-8', cardId: null },
+    { id: 'p-rtr8-4', name: 'et-0/0/3', slotName: '0', side: 'right', sortOrder: 4, labelColor: '', deviceId: 'dev-router-8', cardId: null },
+
+    // ===== Switch-8 ports =====
+    { id: 'p-sw8-1', name: '1/1/1', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-switch-8', cardId: null },
+    { id: 'p-sw8-2', name: '1/1/2', slotName: '0', side: 'left', sortOrder: 2, labelColor: '', deviceId: 'dev-switch-8', cardId: null },
+    { id: 'p-sw8-3', name: '1/1/3', slotName: '0', side: 'right', sortOrder: 3, labelColor: '', deviceId: 'dev-switch-8', cardId: null },
+    { id: 'p-sw8-4', name: '1/1/4', slotName: '0', side: 'right', sortOrder: 4, labelColor: '', deviceId: 'dev-switch-8', cardId: null },
+
+    // ===== Server-5 ports =====
+    { id: 'p-srv5-1', name: 'eth0', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-server-5', cardId: null },
+    { id: 'p-srv5-2', name: 'eth1', slotName: '0', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-server-5', cardId: null },
+
+    // ===== Server-6 ports =====
+    { id: 'p-srv6-1', name: 'eth0', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-server-6', cardId: null },
+    { id: 'p-srv6-2', name: 'eth1', slotName: '0', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-server-6', cardId: null },
+
+    // ===== RRL-2 ports =====
+    { id: 'p-rrl2-1', name: 'ETH-1', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-rrl-2', cardId: null },
+    { id: 'p-rrl2-2', name: 'ETH-2', slotName: '0', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-rrl-2', cardId: null },
+    { id: 'p-rrl2-3', name: 'RF', slotName: '0', side: 'right', sortOrder: 3, labelColor: '', deviceId: 'dev-rrl-2', cardId: null },
+
+    // ===== Splice-5 ports =====
+    { id: 'p-sp5-1', name: '1', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-splice-5', cardId: null },
+    { id: 'p-sp5-2', name: '2', slotName: '0', side: 'right', sortOrder: 2, labelColor: '', deviceId: 'dev-splice-5', cardId: null },
+    { id: 'p-sp5-3', name: '3', slotName: '0', side: 'left', sortOrder: 3, labelColor: '', deviceId: 'dev-splice-5', cardId: null },
+    { id: 'p-sp5-4', name: '4', slotName: '0', side: 'right', sortOrder: 4, labelColor: '', deviceId: 'dev-splice-5', cardId: null },
+
+    // ===== RAN-BS-2 ports =====
+    { id: 'p-ran2-1', name: 'CPRI-1', slotName: '0', side: 'left', sortOrder: 1, labelColor: '', deviceId: 'dev-ran-bs-2', cardId: null },
+    { id: 'p-ran2-2', name: 'CPRI-2', slotName: '0', side: 'left', sortOrder: 2, labelColor: '', deviceId: 'dev-ran-bs-2', cardId: null },
+    { id: 'p-ran2-3', name: 'ETH', slotName: '0', side: 'right', sortOrder: 3, labelColor: '', deviceId: 'dev-ran-bs-2', cardId: null },
   ],
 
   lines: [
@@ -844,6 +1431,75 @@ export const mockData: SchemaData = {
 
     // ===== Cross-site unknown status =====
     { id: 'line-15', name: 'Транзит SW1-OLT', templateName: '', status: EntityStatus.Unknown, type: LineType.Simple, medium: Medium.Copper, lineStyle: LineStyle.Dotted, portAId: 'p-sw-4', portZId: 'p-olt-4' },
+
+    // ===== Site 4 internal =====
+    // Cross7 → DWDM-4 (optical)
+    { id: 'line-s4-1', name: 'ВОК Кросс7-DWDM4 (1)', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Solid, portAId: 'p-c7-s1', portZId: 'p-dw4-c12-1' },
+    { id: 'line-s4-1b', name: 'ВОК Кросс7-DWDM4 (2)', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Solid, portAId: 'p-c7-s2', portZId: 'p-dw4-c13-1' },
+    // Cross7 → Cross8 (optical)
+    { id: 'line-s4-2', name: 'Кросс7-Кросс8', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Solid, portAId: 'p-c7-s3', portZId: 'p-c8-l1' },
+    // Cross7 → MEN (optical)
+    { id: 'line-s4-3', name: 'ВОК Кросс7-MEN', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Solid, portAId: 'p-c7-s4', portZId: 'p-men-1' },
+    // DWDM-4 → Router-5 (optical)
+    { id: 'line-s4-4', name: 'Транзит DWDM4-RTR5', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Solid, portAId: 'p-dw4-c12-2', portZId: 'p-rtr5-c14-1' },
+    // DWDM-4 → Router-6 (optical)
+    { id: 'line-s4-4b', name: 'Транзит DWDM4-RTR6', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Solid, portAId: 'p-dw4-c13-2', portZId: 'p-rtr6-1' },
+    // Router-5 → Switch-5 (copper)
+    { id: 'line-s4-5', name: 'LAN RTR5-SW5', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Copper, lineStyle: LineStyle.Solid, portAId: 'p-rtr5-3', portZId: 'p-sw5-1' },
+    // Router-5 → Switch-6 (copper)
+    { id: 'line-s4-5b', name: 'LAN RTR5-SW6', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Copper, lineStyle: LineStyle.Solid, portAId: 'p-rtr5-4', portZId: 'p-sw6-1' },
+    // Router-5 ↔ Router-6 (copper peering)
+    { id: 'line-s4-6', name: 'Peering RTR5-RTR6', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Copper, lineStyle: LineStyle.Solid, portAId: 'p-rtr5-1', portZId: 'p-rtr6-2' },
+    // Switch-5 → Server-4 (copper)
+    { id: 'line-s4-7', name: 'LAN SW5-SRV4', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Copper, lineStyle: LineStyle.Solid, portAId: 'p-sw5-3', portZId: 'p-srv4-1' },
+    // Switch-6 → SORM-2 (copper)
+    { id: 'line-s4-7b', name: 'LAN SW6-SORM2', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Copper, lineStyle: LineStyle.Solid, portAId: 'p-sw6-3', portZId: 'p-sorm2-1' },
+    // Cross9 → VoIP-2 (copper)
+    { id: 'line-s4-8', name: 'Медь КРТ2-VoIP2', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Copper, lineStyle: LineStyle.Solid, portAId: 'p-c9-s1', portZId: 'p-voip2-1' },
+    // Cross9 → xDSL-2 (copper)
+    { id: 'line-s4-8b', name: 'Медь КРТ2-DSLAM2', templateName: '', status: EntityStatus.Faulty, type: LineType.Simple, medium: Medium.Copper, lineStyle: LineStyle.Solid, portAId: 'p-c9-s2', portZId: 'p-xdsl2-3' },
+    // Cross8 → Router-5 (optical, reserved)
+    { id: 'line-s4-9', name: 'Резерв Кросс8-RTR5', templateName: '', status: EntityStatus.Reserved, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Dotted, portAId: 'p-c8-s1', portZId: 'p-rtr5-c15-1' },
+    // MEN → Router-6 (copper)
+    { id: 'line-s4-10', name: 'MEN-RTR6', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Copper, lineStyle: LineStyle.Solid, portAId: 'p-men-3', portZId: 'p-rtr6-3' },
+
+    // ===== Site 4 → Site 4-1 =====
+    { id: 'line-s4-11', name: 'ВОК Западный-Муфта4', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Solid, portAId: 'p-c7-s5', portZId: 'p-sp4-1' },
+    // Splice-4 → Switch-7 (copper)
+    { id: 'line-s4-12', name: 'LAN Муфта4-SW7', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Copper, lineStyle: LineStyle.Solid, portAId: 'p-sp4-2', portZId: 'p-sw7-1' },
+
+    // ===== Site 5 internal =====
+    // Cross10 → DWDM-5 (optical)
+    { id: 'line-s5-1', name: 'ВОК Кросс10-DWDM5 (1)', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Solid, portAId: 'p-c10-s1', portZId: 'p-dw5-c16-1' },
+    { id: 'line-s5-1b', name: 'ВОК Кросс10-DWDM5 (2)', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Solid, portAId: 'p-c10-s2', portZId: 'p-dw5-1' },
+    // Cross10 → Cross11 (optical)
+    { id: 'line-s5-2', name: 'Кросс10-Кросс11', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Solid, portAId: 'p-c10-s3', portZId: 'p-c11-l1' },
+    // DWDM-5 → Router-7 (optical)
+    { id: 'line-s5-3', name: 'Транзит DWDM5-RTR7', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Solid, portAId: 'p-dw5-c16-2', portZId: 'p-rtr7-c17-1' },
+    // Router-7 → Switch-8 (copper)
+    { id: 'line-s5-4', name: 'LAN RTR7-SW8', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Copper, lineStyle: LineStyle.Solid, portAId: 'p-rtr7-3', portZId: 'p-sw8-1' },
+    // Switch-8 → Server-5 (copper)
+    { id: 'line-s5-5', name: 'LAN SW8-SRV5', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Copper, lineStyle: LineStyle.Solid, portAId: 'p-sw8-3', portZId: 'p-srv5-1' },
+    // Switch-8 → Server-6 (copper)
+    { id: 'line-s5-5b', name: 'LAN SW8-SRV6', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Copper, lineStyle: LineStyle.Solid, portAId: 'p-sw8-4', portZId: 'p-srv6-1' },
+    // Router-7 ↔ Router-8 (copper peering)
+    { id: 'line-s5-6', name: 'Peering RTR7-RTR8', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Copper, lineStyle: LineStyle.Solid, portAId: 'p-rtr7-4', portZId: 'p-rtr8-1' },
+
+    // ===== Site 5 → Site 5-1 =====
+    { id: 'line-s5-7', name: 'ВОК Дальний-Муфта5', templateName: '', status: EntityStatus.Planned, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Dashed, portAId: 'p-c10-s5', portZId: 'p-sp5-1' },
+    // RRL-2 → Cross11 (wireless)
+    { id: 'line-s5-8', name: 'РРС канал 2', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Wireless, lineStyle: LineStyle.Dotted, portAId: 'p-rrl2-3', portZId: 'p-c11-l2' },
+    // Splice-5 → RAN-BS-2 (optical)
+    { id: 'line-s5-9', name: 'ВОК Муфта5-БС2', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Solid, portAId: 'p-sp5-3', portZId: 'p-ran2-1' },
+
+    // ===== Cross-site: Site 1 → Site 4 =====
+    { id: 'line-cs-1-4', name: 'ВОК Центр-Западный', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Solid, portAId: 'p-c1-l7', portZId: 'p-c7-l1' },
+    // ===== Cross-site: Site 4 → Site 5 =====
+    { id: 'line-cs-4-5', name: 'ВОК Западный-Дальний', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Solid, portAId: 'p-c7-l5', portZId: 'p-c10-l1' },
+    // ===== Cross-site: Site 3 → Site 5 =====
+    { id: 'line-cs-3-5', name: 'ВОК Южный-Дальний', templateName: '', status: EntityStatus.Planned, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Dashed, portAId: 'p-c6-l5', portZId: 'p-c10-l2' },
+    // ===== Cross-site: Site 2 → Site 4 =====
+    { id: 'line-cs-2-4', name: 'ВОК Северный-Западный', templateName: '', status: EntityStatus.Active, type: LineType.Simple, medium: Medium.Optical, lineStyle: LineStyle.Solid, portAId: 'p-c3-l3', portZId: 'p-c7-l2' },
   ],
 
   fibers: [
diff --git a/frontend/src/store/schemaStore.ts b/frontend/src/store/schemaStore.ts
index 2f00eb3..4e7031b 100644
--- a/frontend/src/store/schemaStore.ts
+++ b/frontend/src/store/schemaStore.ts
@@ -26,6 +26,7 @@ interface SchemaStore {
   rightPanelData: Record<string, unknown> | null;
   connectionsPanelData: Record<string, unknown> | null;
   connectionsPanelVisible: boolean;
+  lassoActive: boolean;
 
   setGraph: (graph: Graph) => void;
   setMode: (mode: 'view' | 'edit') => void;
@@ -39,6 +40,7 @@ interface SchemaStore {
   setRightPanelData: (data: Record<string, unknown> | null) => void;
   setConnectionsPanelData: (data: Record<string, unknown> | null) => void;
   setConnectionsPanelVisible: (visible: boolean) => void;
+  toggleLasso: () => void;
 }
 
 export const useSchemaStore = create<SchemaStore>((set) => ({
@@ -56,6 +58,7 @@ export const useSchemaStore = create<SchemaStore>((set) => ({
   rightPanelData: null,
   connectionsPanelData: null,
   connectionsPanelVisible: false,
+  lassoActive: false,
 
   setGraph: (graph) => set({ graph }),
   setMode: (mode) => set({ mode }),
@@ -101,4 +104,16 @@ export const useSchemaStore = create<SchemaStore>((set) => ({
   setConnectionsPanelData: (data) => set({ connectionsPanelData: data }),
   setConnectionsPanelVisible: (visible) =>
     set({ connectionsPanelVisible: visible }),
+  toggleLasso: () =>
+    set((state) => {
+      const next = !state.lassoActive;
+      if (state.graph) {
+        if (next) {
+          state.graph.enableRubberband();
+        } else {
+          state.graph.disableRubberband();
+        }
+      }
+      return { lassoActive: next };
+    }),
 }));