| | <!doctype html>
|
| | <html lang="en">
|
| | <head>
|
| | <meta charset="utf-8">
|
| | <meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
| | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
| | <title>Portfolio Optimization - SolverForge for Python</title>
|
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
|
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
|
| | <link rel="stylesheet" href="/webjars/solverforge/css/solverforge-webui.css">
|
| | <link rel="icon" href="/webjars/solverforge/img/solverforge-favicon.svg" type="image/svg+xml">
|
| | <style>
|
| |
|
| | #solvingSpinner {
|
| | display: none;
|
| | width: 1.25rem;
|
| | height: 1.25rem;
|
| | border: 2px solid #10b981;
|
| | border-top-color: transparent;
|
| | border-radius: 50%;
|
| | animation: spin 0.75s linear infinite;
|
| | vertical-align: middle;
|
| | }
|
| | #solvingSpinner.active {
|
| | display: inline-block;
|
| | }
|
| | @keyframes spin {
|
| | to { transform: rotate(360deg); }
|
| | }
|
| |
|
| |
|
| | .sector-badge {
|
| | font-size: 0.75rem;
|
| | padding: 4px 10px;
|
| | border-radius: 12px;
|
| | font-weight: 500;
|
| | }
|
| | .sector-Technology { background: #3b82f6; color: white; }
|
| | .sector-Healthcare { background: #10b981; color: white; }
|
| | .sector-Finance { background: #eab308; color: #1a1a1a; }
|
| | .sector-Energy { background: #ef4444; color: white; }
|
| | .sector-Consumer { background: #a855f7; color: white; }
|
| |
|
| |
|
| | .kpi-card {
|
| | background: white;
|
| | border-radius: 12px;
|
| | padding: 1.5rem;
|
| | text-align: center;
|
| | box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
| | transition: transform 0.2s ease, box-shadow 0.2s ease;
|
| | }
|
| | .kpi-card:hover {
|
| | transform: translateY(-2px);
|
| | box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
| | }
|
| | .kpi-value {
|
| | font-size: 2.5rem;
|
| | font-weight: 700;
|
| | color: #10b981;
|
| | line-height: 1.2;
|
| | transition: all 0.3s ease;
|
| | }
|
| | .kpi-value.updating {
|
| | opacity: 0.5;
|
| | }
|
| | .kpi-value.positive { color: #10b981; }
|
| | .kpi-value.negative { color: #ef4444; }
|
| | .kpi-label {
|
| | font-size: 0.85rem;
|
| | color: #64748b;
|
| | text-transform: uppercase;
|
| | letter-spacing: 0.05em;
|
| | margin-top: 0.5rem;
|
| | }
|
| | .kpi-icon {
|
| | font-size: 1.5rem;
|
| | color: #94a3b8;
|
| | margin-bottom: 0.5rem;
|
| | }
|
| |
|
| |
|
| | .chart-card {
|
| | background: white;
|
| | border-radius: 12px;
|
| | box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
| | height: 100%;
|
| | }
|
| | .chart-card-header {
|
| | padding: 1rem 1.25rem;
|
| | border-bottom: 1px solid #e2e8f0;
|
| | font-weight: 600;
|
| | color: #1e293b;
|
| | }
|
| | .chart-card-body {
|
| | padding: 1rem;
|
| | }
|
| | .chart-container {
|
| | position: relative;
|
| | height: 280px;
|
| | }
|
| |
|
| |
|
| | .stock-table {
|
| | font-size: 0.9rem;
|
| | }
|
| | .stock-table th {
|
| | background: #f8fafc;
|
| | font-weight: 600;
|
| | text-transform: uppercase;
|
| | font-size: 0.75rem;
|
| | letter-spacing: 0.05em;
|
| | color: #64748b;
|
| | border-bottom: 2px solid #e2e8f0;
|
| | cursor: pointer;
|
| | user-select: none;
|
| | }
|
| | .stock-table th:hover {
|
| | background: #f1f5f9;
|
| | }
|
| | .stock-table th i {
|
| | margin-left: 4px;
|
| | opacity: 0.5;
|
| | }
|
| | .stock-table th.sorted i {
|
| | opacity: 1;
|
| | color: #10b981;
|
| | }
|
| | .stock-selected {
|
| | background: #f0fdf4 !important;
|
| | }
|
| | .stock-table tr {
|
| | transition: background-color 0.15s ease;
|
| | }
|
| | .stock-table tbody tr:hover {
|
| | background: #f8fafc;
|
| | }
|
| | .return-positive { color: #10b981; font-weight: 600; }
|
| | .return-negative { color: #ef4444; font-weight: 600; }
|
| |
|
| |
|
| | .score-badge {
|
| | display: inline-block;
|
| | padding: 6px 12px;
|
| | border-radius: 8px;
|
| | font-weight: 600;
|
| | font-size: 0.9rem;
|
| | }
|
| | .score-hard {
|
| | background: #fef2f2;
|
| | color: #dc2626;
|
| | border: 1px solid #fecaca;
|
| | }
|
| | .score-soft {
|
| | background: #f0fdf4;
|
| | color: #16a34a;
|
| | border: 1px solid #bbf7d0;
|
| | }
|
| | .score-feasible {
|
| | background: #f0fdf4;
|
| | color: #16a34a;
|
| | }
|
| | .score-infeasible {
|
| | background: #fef2f2;
|
| | color: #dc2626;
|
| | }
|
| |
|
| |
|
| | .data-selector {
|
| | background: #10b981;
|
| | color: white;
|
| | border: none;
|
| | border-radius: 1.5rem;
|
| | padding: 0.5rem 1rem;
|
| | font-weight: 500;
|
| | }
|
| | .data-selector:focus {
|
| | box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
|
| | }
|
| |
|
| |
|
| | #notificationPanel {
|
| | z-index: 1050;
|
| | }
|
| |
|
| |
|
| | .copy-btn {
|
| | position: absolute;
|
| | top: 0.5rem;
|
| | right: 0.5rem;
|
| | opacity: 0;
|
| | transition: opacity 0.2s;
|
| | }
|
| | .code-block:hover .copy-btn {
|
| | opacity: 1;
|
| | }
|
| | .code-block {
|
| | position: relative;
|
| | }
|
| |
|
| |
|
| | @keyframes pulse {
|
| | 0%, 100% { opacity: 1; }
|
| | 50% { opacity: 0.6; }
|
| | }
|
| | .solving-pulse {
|
| | animation: pulse 1.5s ease-in-out infinite;
|
| | }
|
| |
|
| | |
| | |
| | |
| |
|
| | .settings-card {
|
| | background: white;
|
| | border-radius: 12px;
|
| | box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
| | }
|
| | .settings-card .card-body {
|
| | padding: 1.25rem;
|
| | }
|
| | .form-range::-webkit-slider-thumb {
|
| | background: #10b981;
|
| | }
|
| | .form-range::-moz-range-thumb {
|
| | background: #10b981;
|
| | }
|
| | .preset-badge {
|
| | font-size: 0.7rem;
|
| | padding: 2px 6px;
|
| | border-radius: 4px;
|
| | background: #f1f5f9;
|
| | color: #64748b;
|
| | margin-left: 0.5rem;
|
| | }
|
| | .config-value {
|
| | font-weight: 600;
|
| | color: #10b981;
|
| | }
|
| |
|
| | </style>
|
| | </head>
|
| | <body>
|
| |
|
| | <header id="solverforge-auto-header">
|
| |
|
| | </header>
|
| |
|
| | <div class="tab-content">
|
| |
|
| | <div id="demo" class="tab-pane fade show active container-fluid">
|
| | <div class="sticky-top d-flex justify-content-center align-items-center">
|
| | <div id="notificationPanel" style="position: absolute; top: .5rem;"></div>
|
| | </div>
|
| |
|
| | <h1>Portfolio Optimization</h1>
|
| | <p>Select optimal stocks to maximize expected returns while meeting sector exposure constraints.</p>
|
| |
|
| |
|
| | <div class="container-fluid mb-3">
|
| | <div class="row justify-content-between align-items-center">
|
| | <div class="col-auto">
|
| | <ul class="nav nav-pills" role="tablist">
|
| | <li class="nav-item" role="presentation">
|
| | <button class="nav-link active" id="portfolioTab" data-bs-toggle="tab" data-bs-target="#portfolioPanel"
|
| | type="button" role="tab" aria-controls="portfolioPanel" aria-selected="true">
|
| | <i class="fas fa-chart-pie me-1"></i> Portfolio
|
| | </button>
|
| | </li>
|
| | <li class="nav-item" role="presentation">
|
| | <button class="nav-link" id="stocksTab" data-bs-toggle="tab" data-bs-target="#stocksPanel"
|
| | type="button" role="tab" aria-controls="stocksPanel" aria-selected="false">
|
| | <i class="fas fa-list me-1"></i> All Stocks
|
| | </button>
|
| | </li>
|
| | </ul>
|
| | </div>
|
| | <div class="col-auto">
|
| | <select id="dataSelector" class="data-selector me-2">
|
| | <option value="SMALL">Small (25 stocks)</option>
|
| | <option value="LARGE">Large (51 stocks)</option>
|
| | </select>
|
| | |
| | |
| | |
| | |
| |
|
| | <button class="btn btn-outline-secondary btn-sm me-2" type="button"
|
| | data-bs-toggle="collapse" data-bs-target="#advancedSettings"
|
| | aria-expanded="false" aria-controls="advancedSettings"
|
| | id="advancedSettingsBtn">
|
| | <i class="fas fa-cog"></i> Advanced
|
| | </button>
|
| |
|
| | <button id="solveButton" type="button" class="btn btn-success">
|
| | <i class="fas fa-play"></i> Solve
|
| | </button>
|
| | <button id="stopSolvingButton" type="button" class="btn btn-danger" style="display: none;">
|
| | <i class="fas fa-stop"></i> Stop
|
| | </button>
|
| | <span id="solvingSpinner" class="ms-2"></span>
|
| | <span id="score" class="ms-2 fw-bold">Score: ?</span>
|
| | <button id="analyzeButton" type="button" class="btn btn-secondary ms-2" title="Analyze constraints">
|
| | <i class="fas fa-question"></i>
|
| | </button>
|
| | </div>
|
| | </div>
|
| |
|
| | |
| | |
| | |
| | |
| | |
| | |
| |
|
| | <div class="collapse mt-3" id="advancedSettings">
|
| | <div class="settings-card">
|
| | <div class="card-body">
|
| | <div class="row g-4">
|
| |
|
| | <div class="col-md-3">
|
| | <label class="form-label fw-bold">
|
| | <i class="fas fa-sliders-h me-1 text-muted"></i>Preset
|
| | </label>
|
| | <select id="presetSelector" class="form-select">
|
| | <option value="balanced" selected>Balanced (Default)</option>
|
| | <option value="conservative">Conservative</option>
|
| | <option value="aggressive">Aggressive</option>
|
| | <option value="quick">Quick Test</option>
|
| | <option value="custom">Custom</option>
|
| | </select>
|
| | </div>
|
| |
|
| |
|
| | <div class="col-md-3">
|
| | <label class="form-label">
|
| | Target Stocks: <span id="targetStocksValue" class="config-value">20</span>
|
| | </label>
|
| | <input type="range" class="form-range" id="targetStocksSlider"
|
| | min="5" max="50" value="20">
|
| | <div class="d-flex justify-content-between text-muted" style="font-size: 0.7rem;">
|
| | <span>5</span>
|
| | <span>50</span>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="col-md-3">
|
| | <label class="form-label">
|
| | Max Sector: <span id="maxSectorValue" class="config-value">25%</span>
|
| | </label>
|
| | <input type="range" class="form-range" id="maxSectorSlider"
|
| | min="10" max="50" value="25">
|
| | <div class="d-flex justify-content-between text-muted" style="font-size: 0.7rem;">
|
| | <span>10%</span>
|
| | <span>50%</span>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="col-md-3">
|
| | <label class="form-label">
|
| | Solver Time: <span id="solverTimeValue" class="config-value">30s</span>
|
| | </label>
|
| | <input type="range" class="form-range" id="solverTimeSlider"
|
| | min="10" max="300" step="10" value="30">
|
| | <div class="d-flex justify-content-between text-muted" style="font-size: 0.7rem;">
|
| | <span>10s</span>
|
| | <span>5min</span>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="mt-3 text-muted" style="font-size: 0.85rem;">
|
| | <i class="fas fa-info-circle me-1"></i>
|
| | <span id="presetDescription">Balanced settings for typical portfolio optimization.</span>
|
| | </div>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| | </div>
|
| |
|
| |
|
| | <div class="tab-content">
|
| |
|
| | <div class="tab-pane fade show active" id="portfolioPanel" role="tabpanel" aria-labelledby="portfolioTab">
|
| |
|
| | <div class="row mb-3 g-3">
|
| | <div class="col-md-3 col-sm-6">
|
| | <div class="kpi-card">
|
| | <div class="kpi-icon"><i class="fas fa-check-circle"></i></div>
|
| | <div class="kpi-value" id="selectedCount">0/20</div>
|
| | <div class="kpi-label">Selected Stocks</div>
|
| | </div>
|
| | </div>
|
| | <div class="col-md-3 col-sm-6">
|
| | <div class="kpi-card">
|
| | <div class="kpi-icon"><i class="fas fa-chart-line"></i></div>
|
| | <div class="kpi-value positive" id="expectedReturn">0.00%</div>
|
| | <div class="kpi-label">Expected Return</div>
|
| | </div>
|
| | </div>
|
| | <div class="col-md-3 col-sm-6">
|
| | <div class="kpi-card">
|
| | <div class="kpi-icon"><i class="fas fa-layer-group"></i></div>
|
| | <div class="kpi-value" id="sectorCount">0</div>
|
| | <div class="kpi-label">Sectors</div>
|
| | </div>
|
| | </div>
|
| | <div class="col-md-3 col-sm-6">
|
| | <div class="kpi-card" id="diversificationTooltip" data-bs-toggle="tooltip" title="Higher = more diversified. Based on Herfindahl-Hirschman Index (HHI).">
|
| | <div class="kpi-icon"><i class="fas fa-shuffle"></i></div>
|
| | <div class="kpi-value" id="diversificationScore">0%</div>
|
| | <div class="kpi-label">Diversification <i class="fas fa-info-circle text-muted" style="font-size: 0.7rem;"></i></div>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="row mb-4 g-3">
|
| | <div class="col-md-3 col-sm-6">
|
| | <div class="kpi-card" data-bs-toggle="tooltip" title="Highest single sector weight. Lower is more diversified.">
|
| | <div class="kpi-icon"><i class="fas fa-chart-pie"></i></div>
|
| | <div class="kpi-value" id="maxSectorExposure">0%</div>
|
| | <div class="kpi-label">Max Sector <i class="fas fa-info-circle text-muted" style="font-size: 0.7rem;"></i></div>
|
| | </div>
|
| | </div>
|
| | <div class="col-md-3 col-sm-6">
|
| | <div class="kpi-card" data-bs-toggle="tooltip" title="Standard deviation of predicted returns. Lower = less risk.">
|
| | <div class="kpi-icon"><i class="fas fa-wave-square"></i></div>
|
| | <div class="kpi-value" id="returnVolatility">0.00%</div>
|
| | <div class="kpi-label">Volatility <i class="fas fa-info-circle text-muted" style="font-size: 0.7rem;"></i></div>
|
| | </div>
|
| | </div>
|
| | <div class="col-md-3 col-sm-6">
|
| | <div class="kpi-card" data-bs-toggle="tooltip" title="Return / Volatility ratio. Higher = better risk-adjusted return.">
|
| | <div class="kpi-icon"><i class="fas fa-scale-balanced"></i></div>
|
| | <div class="kpi-value" id="sharpeProxy">0.00</div>
|
| | <div class="kpi-label">Sharpe Proxy <i class="fas fa-info-circle text-muted" style="font-size: 0.7rem;"></i></div>
|
| | </div>
|
| | </div>
|
| | <div class="col-md-3 col-sm-6">
|
| | <div class="kpi-card" data-bs-toggle="tooltip" title="Herfindahl-Hirschman Index. Lower = more diversified. <0.15 is well-diversified.">
|
| | <div class="kpi-icon"><i class="fas fa-bullseye"></i></div>
|
| | <div class="kpi-value" id="herfindahlIndex">0.000</div>
|
| | <div class="kpi-label">HHI <i class="fas fa-info-circle text-muted" style="font-size: 0.7rem;"></i></div>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="row mb-4 g-3">
|
| | <div class="col-md-6">
|
| | <div class="chart-card">
|
| | <div class="chart-card-header">
|
| | <i class="fas fa-chart-pie me-2 text-muted"></i>Sector Allocation
|
| | </div>
|
| | <div class="chart-card-body">
|
| | <div class="chart-container">
|
| | <canvas id="sectorChart"></canvas>
|
| | </div>
|
| | </div>
|
| | </div>
|
| | </div>
|
| | <div class="col-md-6">
|
| | <div class="chart-card">
|
| | <div class="chart-card-header">
|
| | <i class="fas fa-chart-bar me-2 text-muted"></i>Top Returns (Selected)
|
| | </div>
|
| | <div class="chart-card-body">
|
| | <div class="chart-container">
|
| | <canvas id="returnsChart"></canvas>
|
| | </div>
|
| | </div>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="row">
|
| | <div class="col-12">
|
| | <div class="chart-card">
|
| | <div class="chart-card-header d-flex justify-content-between align-items-center">
|
| | <span><i class="fas fa-star me-2 text-warning"></i>Selected Stocks</span>
|
| | <span class="badge bg-success" id="selectedBadge">0 selected</span>
|
| | </div>
|
| | <div class="chart-card-body p-0">
|
| | <div class="table-responsive">
|
| | <table class="table table-hover stock-table mb-0">
|
| | <thead>
|
| | <tr>
|
| | <th>Ticker</th>
|
| | <th>Company</th>
|
| | <th>Sector</th>
|
| | <th>Predicted Return</th>
|
| | <th>Weight</th>
|
| | </tr>
|
| | </thead>
|
| | <tbody id="selectedStocksTable">
|
| | <tr>
|
| | <td colspan="5" class="text-center text-muted py-4">
|
| | <i class="fas fa-info-circle me-2"></i>Click "Solve" to optimize your portfolio
|
| | </td>
|
| | </tr>
|
| | </tbody>
|
| | </table>
|
| | </div>
|
| | </div>
|
| | </div>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="tab-pane fade" id="stocksPanel" role="tabpanel" aria-labelledby="stocksTab">
|
| | <div class="chart-card">
|
| | <div class="chart-card-header d-flex justify-content-between align-items-center">
|
| | <span><i class="fas fa-list me-2 text-muted"></i>All Available Stocks</span>
|
| | <div class="d-flex align-items-center gap-3">
|
| | <div class="form-check form-switch mb-0">
|
| | <input class="form-check-input" type="checkbox" id="showSelectedOnly">
|
| | <label class="form-check-label" for="showSelectedOnly">Selected only</label>
|
| | </div>
|
| | <span class="badge bg-secondary" id="stockCountBadge">0 stocks</span>
|
| | </div>
|
| | </div>
|
| | <div class="chart-card-body p-0">
|
| | <div class="table-responsive" style="max-height: 70vh; overflow-y: auto;">
|
| | <table class="table table-hover stock-table mb-0">
|
| | <thead class="sticky-top">
|
| | <tr>
|
| | <th data-sort="selected">Selected <i class="fas fa-sort"></i></th>
|
| | <th data-sort="stockId">Ticker <i class="fas fa-sort"></i></th>
|
| | <th data-sort="stockName">Company <i class="fas fa-sort"></i></th>
|
| | <th data-sort="sector">Sector <i class="fas fa-sort"></i></th>
|
| | <th data-sort="predictedReturn">Predicted Return <i class="fas fa-sort"></i></th>
|
| | <th>Weight</th>
|
| | </tr>
|
| | </thead>
|
| | <tbody id="allStocksTable">
|
| | <tr>
|
| | <td colspan="6" class="text-center text-muted py-4">
|
| | <i class="fas fa-database me-2"></i>Loading stock data...
|
| | </td>
|
| | </tr>
|
| | </tbody>
|
| | </table>
|
| | </div>
|
| | </div>
|
| | </div>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div id="rest" class="tab-pane fade container-fluid">
|
| | <h2>REST API Guide</h2>
|
| | <p class="text-muted">Use these endpoints to integrate portfolio optimization into your application.</p>
|
| |
|
| | <h3 class="mt-4">1. Load demo data</h3>
|
| | <p>Retrieve a pre-configured portfolio with sample stocks.</p>
|
| | <div class="code-block">
|
| | <button class="btn btn-outline-dark btn-sm copy-btn" onclick="copyCode(this)">
|
| | <i class="fas fa-copy"></i> Copy
|
| | </button>
|
| | <pre><code>curl -X GET http://localhost:8080/demo-data/SMALL</code></pre>
|
| | </div>
|
| |
|
| | <h3 class="mt-4">2. Submit portfolio for optimization</h3>
|
| | <p>Start the solver to find the optimal stock selection.</p>
|
| | <div class="code-block">
|
| | <button class="btn btn-outline-dark btn-sm copy-btn" onclick="copyCode(this)">
|
| | <i class="fas fa-copy"></i> Copy
|
| | </button>
|
| | <pre><code>curl -X POST -H "Content-Type: application/json" \
|
| | -d @portfolio.json \
|
| | http://localhost:8080/portfolios</code></pre>
|
| | </div>
|
| |
|
| | <h3 class="mt-4">3. Get current solution</h3>
|
| | <p>Poll for the latest solution while the solver is running.</p>
|
| | <div class="code-block">
|
| | <button class="btn btn-outline-dark btn-sm copy-btn" onclick="copyCode(this)">
|
| | <i class="fas fa-copy"></i> Copy
|
| | </button>
|
| | <pre><code>curl -X GET http://localhost:8080/portfolios/{jobId}</code></pre>
|
| | </div>
|
| |
|
| | <h3 class="mt-4">4. Stop solving</h3>
|
| | <p>Terminate the solver and retrieve the best solution found.</p>
|
| | <div class="code-block">
|
| | <button class="btn btn-outline-dark btn-sm copy-btn" onclick="copyCode(this)">
|
| | <i class="fas fa-copy"></i> Copy
|
| | </button>
|
| | <pre><code>curl -X DELETE http://localhost:8080/portfolios/{jobId}</code></pre>
|
| | </div>
|
| |
|
| | <h3 class="mt-4">5. Analyze constraints</h3>
|
| | <p>Get a detailed breakdown of constraint scores for a given solution.</p>
|
| | <div class="code-block">
|
| | <button class="btn btn-outline-dark btn-sm copy-btn" onclick="copyCode(this)">
|
| | <i class="fas fa-copy"></i> Copy
|
| | </button>
|
| | <pre><code>curl -X PUT -H "Content-Type: application/json" \
|
| | -d @portfolio.json \
|
| | http://localhost:8080/portfolios/analyze</code></pre>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div id="openapi" class="tab-pane fade container-fluid">
|
| | <h2>OpenAPI Reference</h2>
|
| | <p class="text-muted mb-4">Interactive API documentation powered by Swagger UI.</p>
|
| | <div class="ratio ratio-1x1">
|
| | <iframe src="/q/swagger-ui" title="OpenAPI Documentation"></iframe>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="modal fade" id="weightModal" tabindex="-1" aria-labelledby="weightModalTitle" aria-hidden="true">
|
| | <div class="modal-dialog modal-lg modal-dialog-scrollable">
|
| | <div class="modal-content">
|
| | <div class="modal-header">
|
| | <h5 class="modal-title" id="weightModalTitle">Constraint Analysis</h5>
|
| | <span id="weightModalLabel" class="ms-2 badge bg-secondary"></span>
|
| | <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
| | </div>
|
| | <div class="modal-body">
|
| | <table class="table table-striped" id="weightModalContent">
|
| | <thead>
|
| | <tr>
|
| | <th></th>
|
| | <th>Constraint</th>
|
| | <th>Type</th>
|
| | <th>Weight</th>
|
| | <th>Matches</th>
|
| | <th>Score</th>
|
| | </tr>
|
| | </thead>
|
| | <tbody>
|
| |
|
| | </tbody>
|
| | </table>
|
| | </div>
|
| | <div class="modal-footer">
|
| | <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
| | </div>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| | <footer id="solverforge-auto-footer">
|
| |
|
| | </footer>
|
| |
|
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
|
| | <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
| | <script src="/webjars/solverforge/js/solverforge-webui.js"></script>
|
| | <script src="app.js"></script>
|
| | |
| | |
| | |
| | |
| |
|
| | <script src="config.js"></script>
|
| |
|
| | </body>
|
| | </html>
|
| |
|
