.. назва: Аналізатор розподілу пулу балансувальника навантаження
.. slug: load-balancer-pool-distribution-analyzer
.. дата: 2026-03-26 12:00:00 UTC
.. теги: мережа, балансувальник навантаження, інструмент, калькулятор
.. категорія: Інструменти
.. посилання:
.. опис: візуалізуйте, як алгоритми балансування навантаження розподіляють трафік між учасниками пулу. Імітуйте циклічне хешування, хешування IP-адреси джерела, зважене та узгоджене хешування за звичайних і несправних умов.
.. тип: текст
<style>
    .calc-container {
        max-width: 900px;
        margin: 20px auto;
        padding: 20px;
    }

    .calc-header {
        margin-bottom: 30px;
        padding: 25px;
        background: linear-gradient(135deg, #FF6B6B 0%, #C92A2A 100%);
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        color: white;
    }

    .calc-header h2 {
        margin-top: 0;
        color: white;
        font-size: 28px;
        margin-bottom: 10px;
    }

    .calc-header p {
        margin: 10px 0 20px 0;
        opacity: 0.95;
        font-size: 15px;
    }

    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-top: 20px;
    }

    .form-grid-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;
        margin-top: 15px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .form-group label {
        font-weight: 600;
        font-size: 14px;
        color: white;
    }

    .form-group input,
    .form-group select {
        padding: 12px;
        font-size: 15px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        background: rgba(255,255,255,0.95);
        transition: all 0.3s ease;
        font-family: 'Courier New', monospace;
    }

    .form-group input:focus,
    .form-group select:focus {
        outline: none;
        border-color: #4CAF50;
        background: white;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
    }

    .form-group select {
        cursor: pointer;
        font-family: inherit;
    }

    .submit-btn {
        padding: 14px 35px;
        font-size: 16px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        margin-top: 15px;
        width: 100%;
    }

    .submit-btn:hover {
        background: #45a049;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .submit-btn:active {
        background: #3d8b40;
        transform: translateY(0);
    }

    .secondary-btn {
        padding: 10px 20px;
        font-size: 14px;
        background: rgba(255,255,255,0.2);
        color: white;
        border: 2px solid rgba(255,255,255,0.5);
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    .secondary-btn:hover {
        background: rgba(255,255,255,0.35);
        border-color: white;
    }

    .danger-btn {
        padding: 8px 14px;
        font-size: 13px;
        background: #e53935;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s ease;
    }

    .danger-btn:hover {
        background: #c62828;
    }

    .result-section {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-top: 20px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        display: none;
    }

    .result-section.show {
        display: block;
    }

    .result-section:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .section-header {
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        color: white;
        padding: 15px 20px;
    }

    .section-header h3 {
        margin: 0;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .section-content {
        padding: 20px;
        background: #fafafa;
    }

    .data-row {
        display: flex;
        margin: 12px 0;
        padding: 10px;
        background: white;
        border-radius: 4px;
        border-left: 3px solid #4CAF50;
        align-items: center;
    }

    .data-label {
        font-weight: bold;
        color: #555;
        min-width: 220px;
        flex-shrink: 0;
        font-size: 14px;
    }

    .data-value {
        color: #333;
        font-family: 'Courier New', monospace;
        word-break: break-word;
        font-size: 18px;
    }

    .data-value.highlight {
        color: #4CAF50;
        font-weight: bold;
        font-size: 22px;
    }

    .data-value.warning {
        color: #FF6B6B;
        font-weight: bold;
        font-size: 22px;
    }

    .help-text {
        margin-top: 15px;
        font-size: 14px;
        color: rgba(255,255,255,0.9);
        background: rgba(0,0,0,0.1);
        padding: 10px 15px;
        border-radius: 4px;
    }

    .help-text strong {
        color: white;
    }

    /* Member list table */
    .member-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        font-size: 14px;
    }

    .member-table th {
        background: #f0f0f0;
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        color: #444;
        border-bottom: 2px solid #ddd;
    }

    .member-table td {
        padding: 10px 12px;
        border-bottom: 1px solid #eee;
        vertical-align: middle;
    }

    .member-table tr:last-child td {
        border-bottom: none;
    }

    .member-table tr:hover td {
        background: #f9f9f9;
    }

    /* Status badge */
    .status-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .status-badge.up {
        background: #e8f5e9;
        color: #2e7d32;
        border: 1px solid #a5d6a7;
    }

    .status-badge.down {
        background: #ffebee;
        color: #c62828;
        border: 1px solid #ef9a9a;
    }

    /* Balance score ring */
    .balance-score-container {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 15px;
        background: white;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        margin-bottom: 15px;
    }

    .balance-score-ring {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: bold;
        color: white;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    .balance-score-ring.excellent {
        background: linear-gradient(135deg, #43a047, #1b5e20);
    }

    .balance-score-ring.good {
        background: linear-gradient(135deg, #7cb342, #558b2f);
    }

    .balance-score-ring.fair {
        background: linear-gradient(135deg, #fb8c00, #e65100);
    }

    .balance-score-ring.poor {
        background: linear-gradient(135deg, #e53935, #b71c1c);
    }

    .balance-score-info {
        flex: 1;
    }

    .balance-score-info h4 {
        margin: 0 0 5px 0;
        font-size: 18px;
        color: #333;
    }

    .balance-score-info p {
        margin: 0;
        font-size: 13px;
        color: #666;
        line-height: 1.5;
    }

    /* Metrics grid */
    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }

    .metric-card {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 15px;
        text-align: center;
        border-top: 3px solid #4CAF50;
    }

    .metric-card .metric-value {
        font-size: 22px;
        font-weight: bold;
        color: #333;
        font-family: 'Courier New', monospace;
    }

    .metric-card .metric-label {
        font-size: 12px;
        color: #888;
        margin-top: 4px;
    }

    /* Chart container */
    .chart-wrapper {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }

    .chart-wrapper h4 {
        margin: 0 0 15px 0;
        color: #444;
        font-size: 15px;
        font-weight: 600;
    }

    /* Algorithm explanation */
    .algo-explanation {
        background: #fff8e1;
        border: 1px solid #ffe082;
        border-radius: 6px;
        padding: 12px 15px;
        font-size: 13px;
        color: #5d4037;
        line-height: 1.6;
        margin-top: 10px;
    }

    .algo-explanation strong {
        color: #3e2723;
    }

    /* Hash ring visualization */
    .ring-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }

    #hashRingCanvas {
        border: 1px solid #e0e0e0;
        border-radius: 50%;
        display: block;
        flex-shrink: 0;
    }

    .ring-legend {
        flex: 1;
    }

    .ring-legend-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 0;
        font-size: 13px;
        border-bottom: 1px solid #f0f0f0;
    }

    .ring-legend-dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* Redistribution info */
    .redistribution-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: white;
        border-radius: 4px;
        border-left: 3px solid #FF6B6B;
        margin-bottom: 6px;
        font-size: 14px;
    }

    .redistribution-row .arrow {
        color: #FF6B6B;
        font-size: 18px;
        flex-shrink: 0;
    }

    .redistribution-row .move-label {
        color: #555;
        flex: 1;
    }

    .redistribution-row .move-count {
        font-family: 'Courier New', monospace;
        font-weight: bold;
        color: #333;
    }

    /* Slider styling */
    .slider-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 5px;
    }

    .slider-group label {
        font-weight: 600;
        font-size: 14px;
        color: white;
        display: flex;
        justify-content: space-between;
    }

    .slider-group label span {
        font-family: 'Courier New', monospace;
        background: rgba(0,0,0,0.2);
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 13px;
    }

    input[type="range"] {
        width: 100%;
        accent-color: #4CAF50;
        height: 6px;
        cursor: pointer;
    }

    /* Controls area inside header */
    .header-controls {
        margin-top: 20px;
    }

    .control-group-label {
        font-weight: 600;
        font-size: 13px;
        color: rgba(255,255,255,0.8);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        margin-top: 18px;
    }

    .add-member-row {
        display: flex;
        gap: 8px;
        align-items: flex-end;
        flex-wrap: wrap;
    }

    .add-member-row .form-group {
        flex: 1;
        min-width: 120px;
    }

    /* Failure simulation section */
    .failure-section {
        background: rgba(0,0,0,0.1);
        border-radius: 8px;
        padding: 15px;
        margin-top: 18px;
    }

    .failure-section .control-group-label {
        margin-top: 0;
    }

    .failure-row {
        display: flex;
        gap: 10px;
        align-items: flex-end;
        flex-wrap: wrap;
    }

    .failure-row .form-group {
        flex: 1;
        min-width: 140px;
    }

    .failure-btn-group {
        display: flex;
        gap: 8px;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .form-grid,
        .form-grid-3 {
            grid-template-columns: 1fr;
        }

        .metrics-grid {
            grid-template-columns: 1fr 1fr;
        }

        .data-row {
            flex-direction: column;
            align-items: flex-start;
        }

        .data-label {
            margin-bottom: 4px;
            min-width: auto;
        }

        .ring-wrapper {
            flex-direction: column;
        }

        #hashRingCanvas {
            width: 220px !important;
            height: 220px !important;
            align-self: center;
        }

        .balance-score-container {
            flex-direction: column;
            text-align: center;
        }

        .add-member-row {
            flex-direction: column;
        }

        .add-member-row .form-group {
            min-width: auto;
            width: 100%;
        }

        .failure-row {
            flex-direction: column;
        }
    }

    @media (max-width: 480px) {
        .calc-header h2 {
            font-size: 22px;
        }

        .metrics-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
CDN Chart.js
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<div class="calc-container">
========== ЗАГОЛОВОК / ЕЛЕМЕНТИ КЕРУВАННЯ ==========
<div class="calc-header">
<h2>Аналізатор розподілу пулу балансувальника навантаження</h2>
<p>Змоделюйте, як різні алгоритми балансування навантаження розподіляють трафік між учасниками пулу. Змоделюйте сценарії відмови та порівняйте ефективність перерозподілу.</p>
<div class="header-controls">
Алгоритм і кількість сеансів
<div class="form-grid">
<div class="form-group">
<label for="algorithmSelect">Алгоритм балансування навантаження:</label>
<select id="algorithmSelect">
<option value="roundRobin">Кругова система</option>
<option selected="" value="sourceIpHash">Хеш IP-адреси джерела</option>
<option value="weighted">Зважений</option>
<option value="consistentHash">Послідовне хешування (кільце)</option>
</select>
</div>
<div class="form-group">
<label for="virtualNodes">Віртуальні вузли (послідовний хеш):</label>
<select id="virtualNodes">
<option value="10">10 віртуальних вузлів</option>
<option selected="" value="50">50 віртуальних вузлів</option>
<option value="150">150 віртуальних вузлів</option>
<option value="300">300 віртуальних вузлів</option>
</select>
</div>
</div>
Повзунок підрахунку сеансів
<div class="control-group-label">Обсяг трафіку</div>
<div class="slider-group">
<label for="sessionSlider">Сеанси для моделювання:<span id="sessionCountLabel">1000</span>
</label>
<input id="sessionSlider" max="10000" min="100" oninput="updateSessionLabel(this.value)" step="100" type="range" value="1000"/>
</div>
Керування учасниками пулу
<div class="control-group-label">Члени пулу</div>
<div class="add-member-row">
<div class="form-group">
<label for="newMemberIp">IP-адреса учасника:</label>
<input id="newMemberIp" placeholder="10.0.1.10" type="text" value="10.0.1.10"/>
</div>
<div class="form-group">
<label for="newMemberPort">Порт:</label>
<input id="newMemberPort" placeholder="8080" type="text" value="8080"/>
</div>
<div class="form-group">
<label for="newMemberWeight">Вага (1-100):</label>
<input id="newMemberWeight" max="100" min="1" type="number" value="1"/>
</div>
<div class="form-group" style="justify-content: flex-end;">
<label> </label>
<button class="secondary-btn" onclick="addMember()">+ Додати учасника</button>
</div>
</div>
Симуляція відмови
<div class="failure-section">
<div class="control-group-label">Симуляція сценарію відмови</div>
<div class="failure-row">
<div class="form-group">
<label for="failureSelect">Цільовий член:</label>
<select id="failureSelect">
<option value="">-- Виберіть учасника --</option>
</select>
</div>
<div class="failure-btn-group">
<button class="secondary-btn" onclick="setMemberDown()" style="background:rgba(229,57,53,0.4); border-color:rgba(229,57,53,0.8);">Позначити вниз</button>
<button class="secondary-btn" onclick="setMemberUp()" style="background:rgba(67,160,71,0.4); border-color:rgba(67,160,71,0.8);">Виховати</button>
</div>
</div>
</div>
<button class="submit-btn" onclick="runSimulation()">Запустіть моделювання</button>
<div class="help-text">
<strong>Як це працює:</strong>IP-адреси клієнтів беруться з підмережі /16 (10.0.0.0/16).
                Для хешування на основі джерела кожна унікальна IP-адреса клієнта детерміновано відображається на члена.
                Round robin ігнорує IP-адресу клієнта та розподіляє послідовно. Weighted використовує пропорційне
                випадкове призначення. Послідовне хешування розміщує клієнтів і учасників у віртуальному кільці.</div>
</div>
</div>
========== ТАБЛИЦЯ ЧЛЕНІВ ==========
<div class="result-section show" id="memberTableSection">
<div class="section-header">
<h3>Члени пулу</h3>
</div>
<div class="section-content" style="padding: 0;">
<table class="member-table" id="memberTable">
<thead>
<tr>
<th>ID</th>
<th>IP:Порт</th>
<th>вага</th>
<th>Статус</th>
<th>Дії</th>
</tr>
</thead>
<tbody id="memberTableBody">
заповнений JS
</tbody>
</table>
</div>
</div>
========== РЕЗУЛЬТАТИ РОЗПОЗИЦІЇ ==========
<div class="result-section" id="resultsSection">
<div class="section-header">
<h3>Результати розподілу</h3>
</div>
<div class="section-content">
Оцінка балансу + пояснення алгоритму
<div class="balance-score-container" id="balanceScoreContainer"></div>
<div class="algo-explanation" id="algoExplanation"></div>
Метрична сітка
<div class="metrics-grid" id="metricsGrid" style="margin-top: 20px;"></div>
Гістограма
<div class="chart-wrapper">
<h4>Розподіл сеансів на учасника</h4>
<canvas height="120" id="distributionChart"></canvas>
</div>
Рядки деталей члена
<div id="memberDetailRows"></div>
</div>
</div>
========== ПОМИЛКА ПЕРЕРОЗПОДІЛУ ==========
<div class="result-section" id="redistributionSection">
<div class="section-header" style="background: linear-gradient(135deg, #FF6B6B 0%, #C92A2A 100%);">
<h3>Аналіз перерозподілу відмов</h3>
</div>
<div class="section-content">
<div id="redistributionContent"></div>
</div>
</div>
========== ВІЗУАЛІЗАЦІЯ HESH RING ==========
<div class="result-section" id="hashRingSection">
<div class="section-header">
<h3>Послідовне хеш-кільце</h3>
</div>
<div class="section-content">
<div class="ring-wrapper">
<canvas height="260" id="hashRingCanvas" width="260"></canvas>
<div class="ring-legend" id="ringLegend"></div>
</div>
<div class="algo-explanation" style="margin-top: 15px;">
<strong>Читання кільця:</strong>Кожен учасник розміщується в кількох точках навколо кільця
                (віртуальні вузли). IP-адреса клієнта хешується до позиції в кільці, а потім надсилається запит
                до найближчого члена за годинниковою стрілкою. Додавання або видалення члена впливає лише на арку
                дзвонити як власник — мінімізуючи переривання сеансу.</div>
</div>
</div>
========== ДОПОМОГА / КОНЦЕПЦІЇ ==========
<div class="result-section show" style="margin-top: 20px;">
<div class="section-header">
<h3>Довідник по алгоритму</h3>
</div>
<div class="section-content">
<div class="data-row">
<div class="data-label">Кругова система</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">Сеанси призначаються послідовно: учасник 1, 2, 3, ..., N, 1, 2, ... Кожен учасник
                    отримує рівно 1/N усіх запитів. Ігнорує потужність сервера та клієнтську приналежність.
                    Простий і передбачуваний, але зазнає серйозних збоїв на різнорідному обладнанні.</div>
</div>
<div class="data-row">
<div class="data-label">Хеш IP-адреси джерела</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">Хеш IP-адреси клієнта за модулем кількості учасників вибирає серверну частину. Той самий клієнт
                    завжди досягає того самого члена — корисно для додатків із збереженням стану. Додавання або видалення
                    учасник змінюється<em>все</em>зіставлення клієнта (N змінено на (N-1)/N усіх сеансів).</div>
</div>
<div class="data-row">
<div class="data-label">Зважений</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">Кожен учасник отримує частку, пропорційну його вазі відносно загальної ваги
                    басейн. Учасник із вагою=4 отримує в 4 рази більше сеансів, ніж учасник з вагою=1. Використовується для моделювання
                    гетерогенна потужність серверної частини (наприклад, віртуальна машина проти сервера без використання).</div>
</div>
<div class="data-row">
<div class="data-label">Послідовне хешування</div>
<div class="data-value" style="font-family: inherit; font-size: 14px; color: #555;">Учасники та клієнти відображаються на круговому кільці за допомогою хешування. Кожен клієнт йде
                    до найближчого члена за годинниковою стрілкою на кільці. Віртуальні вузли (репліки на учасника)
                    поліпшити рівномірність розподілу. Коли учасник виходить з ладу, лише його сесії переходять до
                    наступний учасник кільця — 1/N сеансів порушено проти 100% для хешування за модулем.</div>
</div>
</div>
</div>
</div>
<script>
/* =========================================================
   Load Balancer Pool Distribution Analyzer
   Algorithms: round robin, source IP hash, weighted,
               consistent hashing (virtual node ring)
   ========================================================= */

// ---- State -----------------------------------------------

/** @type {{ id: string, ip: string, port: number, weight: number, status: 'up'|'down' }[]} */
let members = [
    { id: 'member_1', ip: '10.0.1.10', port: 8080, weight: 1, status: 'up' },
    { id: 'member_2', ip: '10.0.1.11', port: 8080, weight: 2, status: 'up' },
    { id: 'member_3', ip: '10.0.1.12', port: 8080, weight: 1, status: 'up' },
    { id: 'member_4', ip: '10.0.1.13', port: 8080, weight: 1, status: 'up' },
];

let memberCounter = 5;
let distributionChart = null;

// ---- Hash utilities --------------------------------------

/**
 * FNV-1a 32-bit hash (deterministic, fast, good avalanche).
 * Returns a positive integer in [0, 2^32).
 * @param {string} str
 * @returns {number}
 */
function fnv1a32(str) {
    let hash = 2166136261; // FNV offset basis
    for (let i = 0; i < str.length; i++) {
        hash ^= str.charCodeAt(i);
        // Multiply by FNV prime (32-bit) using safe integer arithmetic
        hash = (hash * 16777619) >>> 0;
    }
    return hash;
}

/**
 * Convert dotted-decimal IPv4 string to a 32-bit integer.
 * @param {string} ip  e.g. "192.168.1.1"
 * @returns {number}
 */
function ipToInt(ip) {
    const parts = ip.split('.').map(Number);
    if (parts.length !== 4 || parts.some(p => isNaN(p) || p < 0 || p > 255)) return 0;
    return ((parts[0] * 256 + parts[1]) * 256 + parts[2]) * 256 + parts[3];
}

/**
 * Convert 32-bit integer to dotted-decimal IPv4.
 * @param {number} n
 * @returns {string}
 */
function intToIp(n) {
    return [
        (n >>> 24) & 0xff,
        (n >>> 16) & 0xff,
        (n >>>  8) & 0xff,
         n         & 0xff,
    ].join('.');
}

// ---- Traffic generation ----------------------------------

/**
 * Generate an array of client IP strings sampled from 10.0.0.0/16
 * with a realistic Zipfian-ish distribution (some clients appear
 * more often than others, modelling hotspots).
 * @param {number} sessionCount
 * @returns {string[]}
 */
function generateClientIps(sessionCount) {
    // Pre-build a pool of unique client IPs (up to 500 distinct sources)
    const poolSize = Math.min(500, sessionCount);
    const clientPool = [];
    const baseIp = ipToInt('10.0.0.1');
    for (let i = 0; i < poolSize; i++) {
        clientPool.push(intToIp(baseIp + i));
    }

    // Zipfian weights: client i has weight proportional to 1/(i+1)
    // Pre-compute cumulative weights for sampling
    const cumWeights = new Float64Array(poolSize);
    let total = 0;
    for (let i = 0; i < poolSize; i++) {
        total += 1 / (i + 1);
        cumWeights[i] = total;
    }

    // Sample sessions using a simple LCG random so results are
    // reproducible across runs with the same sessionCount.
    const ips = [];
    let seed = sessionCount ^ 0xdeadbeef;
    function lcgRand() {
        // LCG: Numerical Recipes parameters
        seed = (Math.imul(1664525, seed) + 1013904223) >>> 0;
        return seed / 0x100000000;
    }

    for (let s = 0; s < sessionCount; s++) {
        const r = lcgRand() * total;
        // Binary search in cumWeights
        let lo = 0, hi = poolSize - 1;
        while (lo < hi) {
            const mid = (lo + hi) >> 1;
            if (cumWeights[mid] < r) lo = mid + 1;
            else hi = mid;
        }
        ips.push(clientPool[lo]);
    }
    return ips;
}

// ---- Algorithm implementations ---------------------------

/**
 * Round Robin: session index mod active member count.
 * @param {typeof members} activeMembers
 * @param {string[]} clientIps
 * @returns {Map<string, number>} memberId -> sessionCount
 */
function algorithmRoundRobin(activeMembers, clientIps) {
    const counts = new Map(activeMembers.map(m => [m.id, 0]));
    const n = activeMembers.length;
    for (let i = 0; i < clientIps.length; i++) {
        const memberId = activeMembers[i % n].id;
        counts.set(memberId, counts.get(memberId) + 1);
    }
    return counts;
}

/**
 * Source IP Hash: fnv1a(clientIp) mod active member count.
 * Same client always hits the same member (given a fixed member set).
 * @param {typeof members} activeMembers
 * @param {string[]} clientIps
 * @returns {Map<string, number>}
 */
function algorithmSourceIpHash(activeMembers, clientIps) {
    const counts = new Map(activeMembers.map(m => [m.id, 0]));
    const n = activeMembers.length;
    for (const ip of clientIps) {
        const idx = fnv1a32(ip) % n;
        const memberId = activeMembers[idx].id;
        counts.set(memberId, counts.get(memberId) + 1);
    }
    return counts;
}

/**
 * Weighted: member selection proportional to weight.
 * Uses a deterministic seeded random so reruns are consistent.
 * @param {typeof members} activeMembers
 * @param {string[]} clientIps
 * @returns {Map<string, number>}
 */
function algorithmWeighted(activeMembers, clientIps) {
    const counts = new Map(activeMembers.map(m => [m.id, 0]));
    const totalWeight = activeMembers.reduce((s, m) => s + m.weight, 0);

    // Build cumulative weight array for O(log N) lookup
    const cumWeights = [];
    let acc = 0;
    for (const m of activeMembers) {
        acc += m.weight;
        cumWeights.push({ threshold: acc, id: m.id });
    }

    for (const ip of clientIps) {
        // Use hash of IP as a deterministic random value in [0, totalWeight)
        const r = fnv1a32(ip + '_w') % totalWeight;
        for (const { threshold, id } of cumWeights) {
            if (r < threshold) {
                counts.set(id, counts.get(id) + 1);
                break;
            }
        }
    }
    return counts;
}

/**
 * Build a consistent hash ring with virtual nodes.
 * @param {typeof members} activeMembers
 * @param {number} virtualNodes - number of virtual replicas per member
 * @returns {{ position: number, memberId: string }[]} sorted ring
 */
function buildHashRing(activeMembers, virtualNodes) {
    const ring = [];
    for (const m of activeMembers) {
        for (let v = 0; v < virtualNodes; v++) {
            const position = fnv1a32(`${m.id}#vnode${v}`);
            ring.push({ position, memberId: m.id });
        }
    }
    // Sort by position for binary search
    ring.sort((a, b) => a.position - b.position);
    return ring;
}

/**
 * Find the nearest member clockwise on the ring for a given hash.
 * @param {number} hash
 * @param {{ position: number, memberId: string }[]} ring
 * @returns {string} memberId
 */
function findNearestOnRing(hash, ring) {
    if (ring.length === 0) return '';
    // Binary search for first position >= hash
    let lo = 0, hi = ring.length - 1;
    while (lo < hi) {
        const mid = (lo + hi) >> 1;
        if (ring[mid].position < hash) lo = mid + 1;
        else hi = mid;
    }
    // If hash > all positions, wrap around to ring[0]
    if (ring[lo].position < hash) lo = 0;
    return ring[lo].memberId;
}

/**
 * Consistent Hashing: place clients and members on a virtual ring.
 * @param {typeof members} activeMembers
 * @param {string[]} clientIps
 * @param {number} virtualNodes
 * @returns {Map<string, number>}
 */
function algorithmConsistentHash(activeMembers, clientIps, virtualNodes) {
    const counts = new Map(activeMembers.map(m => [m.id, 0]));
    const ring = buildHashRing(activeMembers, virtualNodes);

    for (const ip of clientIps) {
        const hash = fnv1a32(ip);
        const memberId = findNearestOnRing(hash, ring);
        if (counts.has(memberId)) {
            counts.set(memberId, counts.get(memberId) + 1);
        }
    }
    return counts;
}

// ---- Dispatch to correct algorithm -----------------------

/**
 * Run the selected algorithm and return session counts per member.
 * @param {typeof members} activeMembers
 * @param {string[]} clientIps
 * @param {string} algorithm
 * @param {number} virtualNodes
 * @returns {Map<string, number>}
 */
function runAlgorithm(activeMembers, clientIps, algorithm, virtualNodes) {
    switch (algorithm) {
        case 'roundRobin':     return algorithmRoundRobin(activeMembers, clientIps);
        case 'sourceIpHash':   return algorithmSourceIpHash(activeMembers, clientIps);
        case 'weighted':       return algorithmWeighted(activeMembers, clientIps);
        case 'consistentHash': return algorithmConsistentHash(activeMembers, clientIps, virtualNodes);
        default:               return algorithmSourceIpHash(activeMembers, clientIps);
    }
}

// ---- Metrics computation ---------------------------------

/**
 * @param {Map<string, number>} distribution - memberId -> sessionCount
 * @param {typeof members} activeMembers
 * @param {number} totalSessions
 * @returns {{ stdDev: number, maxPct: number, minPct: number, balanceScore: number }}
 */
function computeMetrics(distribution, activeMembers, totalSessions) {
    if (activeMembers.length === 0 || totalSessions === 0) {
        return { stdDev: 0, maxPct: 0, minPct: 0, balanceScore: 100 };
    }

    const values = activeMembers.map(m => distribution.get(m.id) ?? 0);
    const mean = totalSessions / activeMembers.length;

    // Population standard deviation (in sessions)
    const variance = values.reduce((s, v) => s + (v - mean) ** 2, 0) / values.length;
    const stdDev = Math.sqrt(variance);

    const maxCount = Math.max(...values);
    const minCount = Math.min(...values);
    const maxPct = (maxCount / totalSessions) * 100;
    const minPct = (minCount / totalSessions) * 100;

    // Balance score: 100 means perfectly even; 0 means all sessions on one member.
    // Coefficient of Variation normalized to [0,100].
    const cv = mean > 0 ? stdDev / mean : 0;
    const idealCv = 0; // perfect balance
    // Max CV ≈ sqrt(N-1) when all sessions on one member; clamp at 1 for score calc
    const balanceScore = Math.max(0, Math.round((1 - Math.min(cv, 1)) * 100));

    return { stdDev, maxPct, minPct, balanceScore };
}

// ---- Failure redistribution analysis ---------------------

/**
 * Compare distributions before and after a member failure.
 * Returns per-surviving-member session gains.
 * @param {Map<string, number>} before
 * @param {Map<string, number>} after
 * @param {string} failedId
 * @returns {{ memberId: string, gained: number }[]}
 */
function computeRedistribution(before, after, failedId) {
    const result = [];
    for (const [id, afterCount] of after.entries()) {
        const beforeCount = before.get(id) ?? 0;
        const gained = afterCount - beforeCount;
        if (gained !== 0) {
            result.push({ memberId: id, gained });
        }
    }
    return result;
}

// ---- UI helpers ------------------------------------------

function updateSessionLabel(value) {
    document.getElementById('sessionCountLabel').textContent = Number(value).toLocaleString();
}

function renderMemberTable() {
    const tbody = document.getElementById('memberTableBody');
    tbody.innerHTML = '';

    // Also rebuild failure select
    const failureSelect = document.getElementById('failureSelect');
    const currentFailureVal = failureSelect.value;
    failureSelect.innerHTML = '<option value="">-- Select member --</option>';

    members.forEach(m => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td style="font-family:monospace;font-size:13px;color:#666;">${m.id}</td>
            <td><strong>${m.ip}</strong>:${m.port}</td>
            <td>${m.weight}</td>
            <td><span class="status-badge ${m.status}">${m.status.toUpperCase()}</span></td>
            <td>
                <button class="danger-btn" onclick="removeMember('${m.id}')">Remove</button>
            </td>
        `;
        tbody.appendChild(tr);

        const opt = document.createElement('option');
        opt.value = m.id;
        opt.textContent = `${m.id} (${m.ip}:${m.port}) — ${m.status}`;
        failureSelect.appendChild(opt);
    });

    // Restore selection if still valid
    if ([...failureSelect.options].some(o => o.value === currentFailureVal)) {
        failureSelect.value = currentFailureVal;
    }
}

function addMember() {
    const ip = document.getElementById('newMemberIp').value.trim();
    const port = parseInt(document.getElementById('newMemberPort').value.trim(), 10);
    const weight = Math.max(1, Math.min(100, parseInt(document.getElementById('newMemberWeight').value, 10) || 1));

    // Basic IP validation
    const ipParts = ip.split('.');
    if (ipParts.length !== 4 || ipParts.some(p => isNaN(Number(p)) || Number(p) < 0 || Number(p) > 255)) {
        alert('Please enter a valid IPv4 address (e.g., 10.0.1.20).');
        return;
    }
    if (isNaN(port) || port < 1 || port > 65535) {
        alert('Please enter a valid port number (1–65535).');
        return;
    }
    if (members.some(m => m.ip === ip && m.port === port)) {
        alert(`Member ${ip}:${port} already exists.`);
        return;
    }

    members.push({
        id: `member_${memberCounter++}`,
        ip,
        port,
        weight,
        status: 'up',
    });

    // Auto-increment the IP for convenience
    const lastOctet = parseInt(ipParts[3], 10);
    if (!isNaN(lastOctet) && lastOctet < 254) {
        ipParts[3] = String(lastOctet + 1);
        document.getElementById('newMemberIp').value = ipParts.join('.');
    }

    renderMemberTable();
}

function removeMember(id) {
    members = members.filter(m => m.id !== id);
    renderMemberTable();
}

function setMemberDown() {
    const id = document.getElementById('failureSelect').value;
    if (!id) { alert('Select a member first.'); return; }
    const m = members.find(m => m.id === id);
    if (m) m.status = 'down';
    renderMemberTable();
}

function setMemberUp() {
    const id = document.getElementById('failureSelect').value;
    if (!id) { alert('Select a member first.'); return; }
    const m = members.find(m => m.id === id);
    if (m) m.status = 'up';
    renderMemberTable();
}

// ---- Color helpers ---------------------------------------

/**
 * Map a load percentage to a CSS color.
 * Green = balanced, Yellow = slightly over, Red = overloaded.
 * @param {number} pct  0–100
 * @param {number} idealPct  expected even share
 * @returns {string} hex color
 */
function loadColor(pct, idealPct) {
    const ratio = idealPct > 0 ? pct / idealPct : 1;
    if (ratio <= 1.15)  return '#4CAF50'; // green  — within 15% of ideal
    if (ratio <= 1.35)  return '#FFC107'; // amber  — 15–35% over
    if (ratio <= 1.60)  return '#FF9800'; // orange — 35–60% over
    return '#F44336'; // red — >60% over ideal
}

const CHART_COLORS_POOL = [
    '#4CAF50','#2196F3','#9C27B0','#FF9800',
    '#00BCD4','#E91E63','#8BC34A','#FF5722',
];

// ---- Chart rendering -------------------------------------

/**
 * Render or update the bar chart.
 * @param {string[]} labels
 * @param {number[]} sessionCounts
 * @param {number} idealPct
 * @param {number} totalSessions
 */
function renderChart(labels, sessionCounts, idealPct, totalSessions) {
    const ctx = document.getElementById('distributionChart').getContext('2d');

    const colors = sessionCounts.map((count, i) => {
        const pct = totalSessions > 0 ? (count / totalSessions) * 100 : 0;
        return loadColor(pct, idealPct);
    });

    if (distributionChart) {
        distributionChart.data.labels = labels;
        distributionChart.data.datasets[0].data = sessionCounts;
        distributionChart.data.datasets[0].backgroundColor = colors;
        distributionChart.update();
        return;
    }

    distributionChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels,
            datasets: [{
                label: 'Sessions',
                data: sessionCounts,
                backgroundColor: colors,
                borderColor: colors.map(c => c + 'cc'),
                borderWidth: 1,
                borderRadius: 4,
            }],
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label(ctx) {
                            const count = ctx.parsed.y;
                            const pct = totalSessions > 0
                                ? ((count / totalSessions) * 100).toFixed(1)
                                : '0.0';
                            return ` ${count.toLocaleString()} sessions (${pct}%)`;
                        },
                    },
                },
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: { display: true, text: 'Sessions', color: '#666', font: { size: 12 } },
                },
                x: {
                    title: { display: true, text: 'Pool Member', color: '#666', font: { size: 12 } },
                },
            },
        },
    });
}

// ---- Hash ring canvas ------------------------------------

/**
 * Draw the consistent hash ring visualization on a canvas.
 * @param {typeof members} activeMembers
 * @param {number} virtualNodes
 * @param {Map<string, number>} distribution
 */
function renderHashRing(activeMembers, virtualNodes, distribution) {
    const canvas = document.getElementById('hashRingCanvas');
    const ctx = canvas.getContext('2d');
    const W = canvas.width;
    const H = canvas.height;
    const cx = W / 2;
    const cy = H / 2;
    const ringR = Math.min(W, H) * 0.40;
    const nodeR = 5;

    ctx.clearRect(0, 0, W, H);

    // Draw ring background
    ctx.strokeStyle = '#e0e0e0';
    ctx.lineWidth = 12;
    ctx.beginPath();
    ctx.arc(cx, cy, ringR, 0, Math.PI * 2);
    ctx.stroke();

    // Assign colors to members
    const colorMap = new Map();
    activeMembers.forEach((m, i) => {
        colorMap.set(m.id, CHART_COLORS_POOL[i % CHART_COLORS_POOL.length]);
    });

    // Draw arc segments for each member's territory
    const ring = buildHashRing(activeMembers, virtualNodes);
    const MAX32 = 0x100000000;
    const TWOPI = Math.PI * 2;

    // For each consecutive pair of virtual nodes, draw a colored arc
    if (ring.length > 0) {
        for (let i = 0; i < ring.length; i++) {
            const next = ring[(i + 1) % ring.length];
            const currAngle = (ring[i].position / MAX32) * TWOPI - Math.PI / 2;
            const nextAngle = (next.position / MAX32) * TWOPI - Math.PI / 2;
            const color = colorMap.get(ring[i].memberId) ?? '#ccc';
            ctx.strokeStyle = color + 'aa';
            ctx.lineWidth = 10;
            ctx.beginPath();
            // Arc from current to next (always clockwise)
            const startA = currAngle;
            let endA = nextAngle;
            if (endA <= startA) endA += TWOPI;
            ctx.arc(cx, cy, ringR, startA, endA);
            ctx.stroke();
        }
    }

    // Draw ring outline (thin)
    ctx.strokeStyle = '#bbb';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.arc(cx, cy, ringR, 0, TWOPI);
    ctx.stroke();

    // Draw virtual nodes as small dots
    for (const node of ring) {
        const angle = (node.position / MAX32) * TWOPI - Math.PI / 2;
        const x = cx + ringR * Math.cos(angle);
        const y = cy + ringR * Math.sin(angle);
        ctx.fillStyle = colorMap.get(node.memberId) ?? '#ccc';
        ctx.beginPath();
        ctx.arc(x, y, nodeR, 0, TWOPI);
        ctx.fill();
    }

    // Center label
    ctx.fillStyle = '#555';
    ctx.font = 'bold 12px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(`${virtualNodes} VN`, cx, cy - 8);
    ctx.font = '11px sans-serif';
    ctx.fillStyle = '#888';
    ctx.fillText('per member', cx, cy + 8);

    // Legend
    const legendEl = document.getElementById('ringLegend');
    legendEl.innerHTML = '';
    activeMembers.forEach(m => {
        const sessions = distribution.get(m.id) ?? 0;
        const color = colorMap.get(m.id) ?? '#ccc';
        const item = document.createElement('div');
        item.className = 'ring-legend-item';
        item.innerHTML = `
            <div class="ring-legend-dot" style="background:${color};"></div>
            <div>
                <strong>${m.id}</strong> — ${m.ip}:${m.port}<br>
                <span style="font-size:12px;color:#888;">${sessions.toLocaleString()} sessions</span>
            </div>
        `;
        legendEl.appendChild(item);
    });
}

// ---- Algorithm explanation text --------------------------

const ALGO_EXPLANATIONS = {
    roundRobin: `<strong>Round Robin:</strong> Each incoming session is assigned to the next member in a fixed sequence, cycling through all active members. Session ${1} goes to member 1, session 2 to member 2, ..., session N+1 back to member 1. Result: perfectly even distribution regardless of client source. Standard deviation approaches zero with large session counts.`,
    sourceIpHash: `<strong>Source IP Hash:</strong> A 32-bit FNV-1a hash of the client IP address is computed, then taken modulo the active member count. The same client IP always maps to the same member — providing session affinity at the cost of distribution uniformity. Skewed client populations (Zipfian traffic) may produce uneven loads.`,
    weighted: `<strong>Weighted Distribution:</strong> Members receive traffic proportional to their configured weight. A member with weight 4 receives 4x the sessions of a weight-1 member. Selection is deterministic per client IP (using a seeded hash), so a client consistently reaches the same high-capacity member.`,
    consistentHash: `<strong>Consistent Hashing:</strong> Members are placed at multiple positions on a 2^32 virtual ring (virtual nodes). Client IPs are hashed to a ring position; the request is forwarded to the next clockwise member. When a member is removed, only the sessions in that member's arc are redistributed — minimising disruption compared to modulo hashing.`,
};

// ---- Main simulation -------------------------------------

function runSimulation() {
    const algorithm = document.getElementById('algorithmSelect').value;
    const sessionCount = parseInt(document.getElementById('sessionSlider').value, 10);
    const virtualNodes = parseInt(document.getElementById('virtualNodes').value, 10);

    const activeMembers = members.filter(m => m.status === 'up');

    if (activeMembers.length === 0) {
        alert('No active (up) pool members. Please add members or bring some back up.');
        return;
    }

    // --- Normal distribution ---
    const clientIps = generateClientIps(sessionCount);
    const distribution = runAlgorithm(activeMembers, clientIps, algorithm, virtualNodes);
    const metrics = computeMetrics(distribution, activeMembers, sessionCount);
    const idealPct = 100 / activeMembers.length;

    // --- Failure redistribution ---
    const downMembers = members.filter(m => m.status === 'down');
    let redistributionHtml = '';

    if (downMembers.length > 0) {
        // For each down member, simulate what WOULD have been assigned to it
        // if it were up, then compute how those sessions redistribute now.
        for (const failed of downMembers) {
            const withFailed = [...activeMembers, failed];
            const beforeDist = runAlgorithm(withFailed, clientIps, algorithm, virtualNodes);
            const afterDist = distribution;
            const redistribution = computeRedistribution(beforeDist, afterDist, failed.id);
            const failedSessionCount = beforeDist.get(failed.id) ?? 0;
            const failedPct = sessionCount > 0 ? ((failedSessionCount / sessionCount) * 100).toFixed(1) : '0.0';

            redistributionHtml += `
                <div class="data-row" style="border-left-color:#FF6B6B; margin-bottom:10px;">
                    <div class="data-label" style="color:#c62828;">${failed.id} (${failed.ip}) DOWN</div>
                    <div class="data-value" style="font-size:15px; font-family:inherit; color:#555;">
                        ${failedSessionCount.toLocaleString()} sessions (${failedPct}%) need redistribution
                    </div>
                </div>
            `;

            redistribution.sort((a, b) => b.gained - a.gained);
            redistribution.forEach(({ memberId, gained }) => {
                const receiver = members.find(m => m.id === memberId);
                const receiverLabel = receiver ? `${memberId} (${receiver.ip})` : memberId;
                const arrow = gained > 0 ? '&rarr;' : '&larr;';
                const sign = gained > 0 ? '+' : '';
                redistributionHtml += `
                    <div class="redistribution-row">
                        <span class="arrow">${arrow}</span>
                        <span class="move-label">${receiverLabel} absorbs</span>
                        <span class="move-count">${sign}${gained.toLocaleString()} sessions</span>
                    </div>
                `;
            });

            // Algorithm-specific note
            let algoNote = '';
            if (algorithm === 'consistentHash') {
                algoNote = `<div style="margin-top:10px;font-size:13px;color:#5d4037;background:#fff8e1;padding:8px 12px;border-radius:4px;border:1px solid #ffe082;">
                    Consistent hashing: only the ${failedPct}% of sessions owned by the failed member's ring arcs are affected.
                    The next clockwise member absorbs each arc. All other sessions remain pinned to their original members.
                </div>`;
            } else if (algorithm === 'sourceIpHash') {
                algoNote = `<div style="margin-top:10px;font-size:13px;color:#5d4037;background:#fff8e1;padding:8px 12px;border-radius:4px;border:1px solid #ffe082;">
                    Source IP hash (modulo): removing one member changes the modulo divisor from ${withFailed.length} to ${activeMembers.length},
                    causing ALL sessions to be rehashed — not just those belonging to the failed member.
                    <strong>~${(((withFailed.length - activeMembers.length) / withFailed.length) * 100).toFixed(0)}% of clients</strong> land on a different member.
                </div>`;
            } else if (algorithm === 'roundRobin') {
                algoNote = `<div style="margin-top:10px;font-size:13px;color:#5d4037;background:#fff8e1;padding:8px 12px;border-radius:4px;border:1px solid #ffe082;">
                    Round robin redistributes evenly — the ${failedSessionCount.toLocaleString()} sessions are shared equally across all surviving members.
                </div>`;
            } else if (algorithm === 'weighted') {
                algoNote = `<div style="margin-top:10px;font-size:13px;color:#5d4037;background:#fff8e1;padding:8px 12px;border-radius:4px;border:1px solid #ffe082;">
                    Weighted redistribution: sessions from the failed member flow to surviving members proportional to their weights,
                    matching the configured capacity ratios.
                </div>`;
            }
            redistributionHtml += algoNote;
            redistributionHtml += '<hr style="margin:15px 0; border:none; border-top:1px solid #eee;">';
        }
    } else {
        redistributionHtml = `<div style="color:#888;font-size:14px;padding:10px;">
            No members are currently marked DOWN. Use the failure simulation controls in the header to mark a member down,
            then re-run the simulation to see redistribution analysis.
        </div>`;
    }

    // ---- Render balance score ----
    const { balanceScore } = metrics;
    let scoreClass = 'excellent';
    let scoreLabel = 'Excellent';
    if (balanceScore < 40) { scoreClass = 'poor';      scoreLabel = 'Poor'; }
    else if (balanceScore < 65) { scoreClass = 'fair'; scoreLabel = 'Fair'; }
    else if (balanceScore < 85) { scoreClass = 'good'; scoreLabel = 'Good'; }

    document.getElementById('balanceScoreContainer').innerHTML = `
        <div class="balance-score-ring ${scoreClass}">${balanceScore}</div>
        <div class="balance-score-info">
            <h4>Balance Score: ${scoreLabel}</h4>
            <p>
                Score 0–100 where 100 = perfectly even distribution.<br>
                Calculated from the coefficient of variation (std dev / mean) across active members.
                A score above 85 is considered production-acceptable for most workloads.
            </p>
        </div>
    `;

    document.getElementById('algoExplanation').innerHTML = ALGO_EXPLANATIONS[algorithm] ?? '';

    // ---- Render metrics grid ----
    document.getElementById('metricsGrid').innerHTML = `
        <div class="metric-card">
            <div class="metric-value">${sessionCount.toLocaleString()}</div>
            <div class="metric-label">Total Sessions</div>
        </div>
        <div class="metric-card">
            <div class="metric-value">${metrics.stdDev.toFixed(1)}</div>
            <div class="metric-label">Std Deviation (sessions)</div>
        </div>
        <div class="metric-card">
            <div class="metric-value">${metrics.maxPct.toFixed(1)}%</div>
            <div class="metric-label">Max Member Load</div>
        </div>
        <div class="metric-card">
            <div class="metric-value">${metrics.minPct.toFixed(1)}%</div>
            <div class="metric-label">Min Member Load</div>
        </div>
    `;

    // ---- Render chart ----
    const labels = activeMembers.map(m => `${m.id}\n${m.ip}`);
    const sessionCounts = activeMembers.map(m => distribution.get(m.id) ?? 0);
    renderChart(labels, sessionCounts, idealPct, sessionCount);

    // ---- Render member detail rows ----
    let detailHtml = '';
    activeMembers.forEach(m => {
        const count = distribution.get(m.id) ?? 0;
        const pct = sessionCount > 0 ? ((count / sessionCount) * 100).toFixed(1) : '0.0';
        const barColor = loadColor(parseFloat(pct), idealPct);
        const barWidth = sessionCount > 0 ? Math.round((count / sessionCount) * 100) : 0;
        detailHtml += `
            <div class="data-row" style="border-left-color: ${barColor}; flex-direction: column; align-items: stretch; padding: 12px 15px;">
                <div style="display:flex; justify-content:space-between; margin-bottom:6px; flex-wrap:wrap; gap:6px;">
                    <span style="font-weight:bold; color:#444; font-size:14px;">${m.id} — ${m.ip}:${m.port}</span>
                    <span style="font-family:monospace; color:${barColor}; font-weight:bold; font-size:15px;">${count.toLocaleString()} sessions (${pct}%)</span>
                </div>
                <div style="background:#f0f0f0; border-radius:4px; height:8px; overflow:hidden;">
                    <div style="width:${barWidth}%; background:${barColor}; height:100%; border-radius:4px; transition:width 0.4s ease;"></div>
                </div>
                <div style="font-size:12px; color:#999; margin-top:4px;">
                    Weight: ${m.weight} &nbsp;|&nbsp; Ideal: ${idealPct.toFixed(1)}%
                </div>
            </div>
        `;
    });
    document.getElementById('memberDetailRows').innerHTML = detailHtml;

    // ---- Redistribution section ----
    document.getElementById('redistributionContent').innerHTML = redistributionHtml;
    document.getElementById('redistributionSection').classList.add('show');

    // ---- Hash ring section ----
    if (algorithm === 'consistentHash') {
        renderHashRing(activeMembers, virtualNodes, distribution);
        document.getElementById('hashRingSection').classList.add('show');
    } else {
        document.getElementById('hashRingSection').classList.remove('show');
    }

    // ---- Show results ----
    const resultsSection = document.getElementById('resultsSection');
    resultsSection.classList.add('show');
    resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

// ---- Initialization --------------------------------------

document.addEventListener('DOMContentLoaded', () => {
    renderMemberTable();
});
</script>