Связи (эксперимент pixel-web): база — микро-взаимодействия + глубина

Фиксирую накопленные черновики как точку отката перед режимом «Интерактивная паутина»:
- press/pan-bend (резиновые нити при свайпе, тактильное «вдавливание» узла);
- глубина 2-3 уровней (прототип «Вселенная», переключатель в лаборатории);
- прогрессивное раскрытие (глубина скрыта, выплывает по нажатию/наведению).

Ветка pixel-web — экспериментальная (отдельно от pixel-08.06/PR), чтобы можно было откатиться.
Бамп client.version → 1.2.142.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

shine-UI/js/pages/network/lab.js

@@ -4,6 +4,10 @@
 // центрирование и навигацию между пользователями. Используется связанный мульти-граф
 // networkGraphUsers: у каждого пользователя свой набор связей, тап по узлу переключает
 // карту на сеть этого человека (как реальный путь, но локально).
+//
+// + Прототип «Мегамасштаб»: переключатель «Вселенная» процедурно достраивает связи
+//   2-го и 3-го уровней НА ФРОНТЕНДЕ (API отдаёт только прямые связи — его не трогаем).
+//   Это чисто визуальный лабораторный эксперимент на мок-данных.
 
 import { renderHeader } from '../../components/header.js';
 import { networkGraphUsers } from '../../mock-data.js';
@@ -22,6 +26,18 @@ const FILTERS = {
 };
 const FILTER_ORDER = ['all', 'family', 'friends', 'shining'];
 
+// Пул имён для процедурных «дальних» узлов 2-го уровня (3-й уровень — без подписей, точки).
+const DEEP_NAMES = ['Лео', 'Майя', 'Тео', 'Ева', 'Ник', 'Зоя', 'Ян', 'Ада', 'Рик', 'Уна',
+  'Гор', 'Лия', 'Сэм', 'Иня', 'Ким', 'Эль', 'Юта', 'Бьорн', 'Мила', 'Орт'];
+
+// Детерминированный сид 0..1 по строке (без Math.random: одинаковый узел всегда одинаков).
+function seed01(str) {
+  let h = 2166136261;
+  const s = String(str || '');
+  for (let i = 0; i < s.length; i += 1) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }
+  return ((h >>> 0) % 100000) / 100000;
+}
+
 function helpText() {
   return [
     'Лаборатория карты связей (мок-данные, без сервера).',
@@ -30,6 +46,9 @@ function helpText() {
     '• Тап по центральному узлу — здесь открылся бы профиль.',
     '• Долгое нажатие — контекстное меню (в реальном пути «Связи»).',
     '• Чипы под шапкой — фильтры слоёв: Все / Семья / Друзья / Сияющие.',
+    '• Чип «Вселенная» — прототип глубины 2-3 уровней (фейковые связи, для наглядности).',
+    '  По умолчанию дальние связи скрыты. Зажми/наведи узел — его микро-связи выплывают',
+    '  вокруг, отпусти — втягиваются обратно. Перейдёшь на узел — путь до него горит треком.',
     '',
     'Доступные люди: Иван, Алиса, Павел, Елена, Дмитрий, Олег, Нина, Марина, Света, Кирилл.',
   ].join('\n');
@@ -42,6 +61,87 @@ function graphForLogin(login) {
   return { focusUser: { id: key, login: key, name: key, avatar: null, status: '' }, connections: [] };
 }
 
+// Если у фокуса нет прямых связей (например, тапнули по фейковому дальнему узлу) —
+// синтезируем 4-6 связей 1-го уровня, чтобы «вселенная» вокруг него не была пустой.
+function synthTier1(focusId) {
+  const k = 4 + Math.floor(seed01(focusId + ':n') * 3); // 4-6
+  const out = [];
+  for (let i = 0; i < k; i += 1) {
+    const id = `${focusId}__t1_${i}`;
+    const s = seed01(id);
+    out.push({
+      id, login: id, name: DEEP_NAMES[Math.floor(seed01(id + 'n') * DEEP_NAMES.length)],
+      avatar: null, photo: null,
+      relationType: ['family', 'friend', 'business', 'contact'][i % 4],
+      connectionStrength: 0.5 + s * 0.4,
+      status: s > 0.78 ? 'shining' : '',
+      hasOwnConnections: true, tier: 1,
+    });
+  }
+  return out;
+}
+
+// Процедурно достраиваем дальние орбиты: для каждого узла 1-го уровня — 3-5 узлов 2-го уровня,
+// для каждого узла 2-го уровня — 3-5 «микрозвёзд» 3-го уровня. Всё детерминировано по id.
+function addDeepLevels(model) {
+  const focusId = model.focusId;
+  const tier1 = model.nodes.filter((n) => String(n.id) !== String(focusId));
+  const extra = [];
+  tier1.forEach((p) => {
+    const k2 = 3 + Math.floor(seed01(p.id + ':2') * 3); // 3-5
+    for (let i = 0; i < k2; i += 1) {
+      const id2 = `${p.id}__d2_${i}`;
+      const ang2 = (i / k2) * Math.PI * 2 + seed01(p.id) * 0.6;
+      extra.push({
+        id: id2, login: id2, name: DEEP_NAMES[Math.floor(seed01(id2) * DEEP_NAMES.length)],
+        avatar: null, photo: null, relationType: p.relationType || 'contact',
+        strength: 0.4, shining: false, tier: 2, parentId: String(p.id), deepAngle: ang2,
+      });
+      const k3 = 3 + Math.floor(seed01(id2 + ':3') * 3); // 3-5
+      for (let j = 0; j < k3; j += 1) {
+        const id3 = `${id2}_d3_${j}`;
+        const ang3 = (j / k3) * Math.PI * 2 + seed01(id2) * 0.9;
+        extra.push({
+          id: id3, login: id3, name: '', avatar: null, photo: null, relationType: 'contact',
+          strength: 0.2, shining: seed01(id3) > 0.82, tier: 3, parentId: id2, deepAngle: ang3,
+        });
+      }
+    }
+  });
+  return { focusId, nodes: [...model.nodes, ...extra] };
+}
+
+// Полная модель лаборатории для логина: реальные мок-связи (или синтетика для фейковых
+// логинов) + опционально дальние уровни, когда включён режим «Вселенная».
+// fromLogin — предыдущий фокус: остаётся на орбите ярким «треком прохождения» (Иван → Олег → …).
+function buildLabModel(login, deep, fromLogin) {
+  const tz = graphForLogin(login);
+  if (!Array.isArray(tz.connections) || tz.connections.length === 0) {
+    if (deep) tz.connections = synthTier1(String(tz.focusUser?.id || login));
+    else tz.connections = [];
+  }
+  const base = buildModelFromTz(tz);
+
+  // «Трек прохождения»: предыдущий фокус — на орбите, линия к нему горит ярко (не уходит в ghost).
+  if (fromLogin && String(fromLogin).toLowerCase() !== String(login).toLowerCase()) {
+    const fid = String(fromLogin);
+    const found = base.nodes.find((n) => String(n.id).toLowerCase() === fid.toLowerCase()
+      || String(n.login || '').toLowerCase() === fid.toLowerCase());
+    if (found) {
+      found.track = true; // уже среди связей — просто подсветим трек
+    } else {
+      const f = graphForLogin(fromLogin).focusUser || {};
+      base.nodes.push({
+        id: fid, login: f.login || fromLogin, name: f.name || fromLogin,
+        avatar: f.avatar && f.avatar !== 'url_to_image' ? f.avatar : null,
+        photo: f.photo || null, relationType: 'friend', strength: 0.97,
+        shining: false, tier: 1, track: true,
+      });
+    }
+  }
+  return deep ? addDeepLevels(base) : base;
+}
+
 export function renderNetworkLab({ navigate }) {
   const screen = document.createElement('section');
   screen.className = 'network-screen';
@@ -54,17 +154,13 @@ export function renderNetworkLab({ navigate }) {
 
   const header = renderHeader({
     title: 'Связи · лаборатория',
-    leftAction: {
-      label: '←',
-      onClick: () => navigate('network-view'),
-    },
-    rightActions: [
-      { label: '?', onClick: () => window.alert(helpText()) },
-    ],
+    leftAction: { label: '←', onClick: () => navigate('network-view') },
+    rightActions: [{ label: '?', onClick: () => window.alert(helpText()) }],
   });
   header.classList.add('network-header-overlay');
 
-  const model = buildModelFromTz(graphForLogin(START_LOGIN));
+  let centerLogin = START_LOGIN;
+  let deepMode = false;
 
   // Состояние активного слоя (как в network-view): фокус всегда виден.
   let activeFilter = 'all';
@@ -82,15 +178,19 @@ export function renderNetworkLab({ navigate }) {
   stage.append(header);
   screen.append(stage);
 
+  const model = buildLabModel(centerLogin, deepMode);
+
   // Монтируем движок синхронно (не через rAF): размеры сцены движок берёт с запасом
   // (window.innerWidth) и корректирует через ResizeObserver, когда сцена попадёт в DOM.
   const graph = createForceGraph({
     stage,
     model,
-    // тап по узлу — переключаем карту на сеть выбранного человека
+    // тап по узлу — переключаем карту на сеть выбранного человека (или фейкового дальнего узла);
+    // в режиме «Вселенная» вокруг нового центра процедурно генерится дальняя орбита.
     onNodeTap: (node) => {
-      graph.setModel(buildModelFromTz(graphForLogin(node.login)));
-      // сохраняем выбранный слой при переходе на сеть другого человека (как в network-view)
+      const from = centerLogin;                 // предыдущий фокус → трек прохождения
+      centerLogin = node.login || node.id;
+      graph.setModel(buildLabModel(centerLogin, deepMode, from));
       if (activeFilter !== 'all') graph.setFilter(FILTERS[activeFilter].pred);
     },
     onCenterTap: (node) => window.alert(`Профиль: ${node.name || node.login || node.id}`),
@@ -108,8 +208,7 @@ export function renderNetworkLab({ navigate }) {
   // Панель фильтров слоёв — тот же оверлей-стиль (.fg-filter-bar), что и в network-view.
   const filterBar = document.createElement('div');
   filterBar.className = 'fg-filter-bar';
-  // Не даём нажатию на чип «провалиться» в сцену: иначе движок делает setPointerCapture на stage,
-  // а захват указателя перенаправляет нативный click со сцены — и кнопка фильтра не срабатывает.
+  // Не даём нажатию на чип «провалиться» в сцену (иначе сцена перехватит указатель и «съест» click).
   filterBar.addEventListener('pointerdown', (e) => e.stopPropagation());
   FILTER_ORDER.forEach((key) => {
     const chip = document.createElement('button');
@@ -120,6 +219,18 @@ export function renderNetworkLab({ navigate }) {
     filterChips[key] = chip;
     filterBar.append(chip);
   });
+  // Переключатель прототипа «Вселенная» (глубина 2-3 уровней) — отдельный чип.
+  const deepChip = document.createElement('button');
+  deepChip.type = 'button';
+  deepChip.className = 'fg-filter-chip fg-deep-chip';
+  deepChip.textContent = '🌌 Вселенная';
+  deepChip.addEventListener('click', () => {
+    deepMode = !deepMode;
+    deepChip.classList.toggle('is-active', deepMode);
+    graph.setModel(buildLabModel(centerLogin, deepMode));
+    if (activeFilter !== 'all') graph.setFilter(FILTERS[activeFilter].pred);
+  });
+  filterBar.append(deepChip);
   stage.append(filterBar);
 
   screen.cleanup = () => {