1001 lines
55 KiB
HTML
1001 lines
55 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>4DSTAR Bundle Manager</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="main-container">
|
||
<!-- Primary Category Sidebar (Tier 1) -->
|
||
<aside class="primary-sidebar" id="primary-sidebar">
|
||
<div class="primary-sidebar-header">
|
||
<div class="brand-icon">
|
||
<div class="star-icon">✦</div>
|
||
<div class="brand-text">4D</div>
|
||
<h3 class="app-title">STAR</h3>
|
||
</div>
|
||
</div>
|
||
<nav class="category-nav">
|
||
<div class="category-item" data-category="home" title="Home">
|
||
<div class="category-icon" style="background-color: #6366f1;">🏠</div>
|
||
<span class="category-label">Home</span>
|
||
</div>
|
||
<div class="category-item" data-category="libplugin" title="libplugin">
|
||
<div class="category-icon" style="background-color: #3b82f6;">LP</div>
|
||
<span class="category-label">libplugin</span>
|
||
</div>
|
||
<div class="category-item" data-category="libconstants" title="libconstants">
|
||
<div class="category-icon" style="background-color: #10b981;">LC</div>
|
||
<span class="category-label">libconstants</span>
|
||
</div>
|
||
<div class="category-item" data-category="keys" title="Key Management">
|
||
<div class="category-icon" style="background-color: #8b5cf6;">KM</div>
|
||
<span class="category-label">Key Management</span>
|
||
</div>
|
||
<div class="category-item" data-category="opat" title="OPAT Core">
|
||
<div class="category-icon" style="background-color: #f59e0b;">OC</div>
|
||
<span class="category-label">OPAT Core</span>
|
||
</div>
|
||
<div class="category-item" data-category="serif" title="SERiF Libraries">
|
||
<div class="category-icon" style="background-color: #ef4444;">SL</div>
|
||
<span class="category-label">SERiF Libraries</span>
|
||
</div>
|
||
<div class="category-item" data-category="docs" title="Documentation">
|
||
<div class="category-icon" style="background-color: #06b6d4;">📚</div>
|
||
<span class="category-label">Documentation</span>
|
||
</div>
|
||
</nav>
|
||
<div class="primary-sidebar-footer">
|
||
<div class="version-info">v1.0.0</div>
|
||
<button id="info-btn" class="info-button" title="About 4DSTAR">
|
||
<span class="info-icon">ⓘ</span>
|
||
<span class="info-label">Info</span>
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Secondary Content Sidebar (Tier 2) -->
|
||
<aside class="secondary-sidebar" id="secondary-sidebar">
|
||
<!-- libplugin content (existing sidebar content) -->
|
||
<div class="sidebar-content" data-category="libplugin">
|
||
<div class="sidebar-header">
|
||
<h3>Bundle Manager</h3>
|
||
</div>
|
||
<nav class="sidebar-nav">
|
||
<button id="open-bundle-btn" class="nav-button active">Open Bundle</button>
|
||
<button id="create-bundle-btn" class="nav-button">Create Bundle</button>
|
||
</nav>
|
||
|
||
<div class="sidebar-header" style="margin-top: 30px;">
|
||
<h3>Plugin Tools</h3>
|
||
</div>
|
||
<nav class="sidebar-nav">
|
||
<button id="init-plugin-btn" class="nav-button">Initialize Plugin</button>
|
||
<button id="validate-plugin-btn" class="nav-button">Validate Plugin</button>
|
||
<button id="extract-plugin-btn" class="nav-button">Extract Plugin</button>
|
||
<button id="diff-plugin-btn" class="nav-button">Compare Plugins</button>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- libconstants content (empty for now) -->
|
||
<div class="sidebar-content hidden" data-category="libconstants">
|
||
<div class="sidebar-header">
|
||
<h3>Constants</h3>
|
||
</div>
|
||
<div class="empty-state">
|
||
<p>Constants tools coming soon...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Key Management content -->
|
||
<div class="sidebar-content hidden" data-category="keys">
|
||
<div class="sidebar-header">
|
||
<h3>Key Management</h3>
|
||
</div>
|
||
<nav class="sidebar-nav">
|
||
<button id="keys-list-btn" class="nav-button active">Trusted Keys</button>
|
||
<button id="keys-generate-btn" class="nav-button">Generate Key</button>
|
||
<button id="keys-add-btn" class="nav-button">Add Key</button>
|
||
<button id="keys-remotes-btn" class="nav-button">Remote Sources</button>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- OPAT Core content -->
|
||
<div class="sidebar-content hidden" data-category="opat">
|
||
<div class="sidebar-header">
|
||
<h3>OPAT Core</h3>
|
||
</div>
|
||
<nav class="sidebar-nav">
|
||
<input type="file" id="opat-file-input" accept=".opat" class="opat-file-input" style="display: none;"/>
|
||
<button id="opat-browse-btn" class="nav-button active">Open OPAT File</button>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- SERiF Libraries content (empty for now) -->
|
||
<div class="sidebar-content hidden" data-category="serif">
|
||
<div class="sidebar-header">
|
||
<h3>SERiF Libraries</h3>
|
||
</div>
|
||
<div class="empty-state">
|
||
<p>SERiF tools coming soon...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Documentation content -->
|
||
<div class="sidebar-content hidden" data-category="docs">
|
||
<div class="sidebar-header">
|
||
<h3>Documentation</h3>
|
||
</div>
|
||
<div class="docs-search-container">
|
||
<input type="text" id="docs-search" placeholder="Search documentation..." class="docs-search-input">
|
||
</div>
|
||
<div class="docs-categories">
|
||
<div class="docs-category-filter">
|
||
<select id="docs-category-filter" class="docs-category-select">
|
||
<option value="">All Categories</option>
|
||
<option value="Core Libraries">Core Libraries</option>
|
||
<option value="Modeling Tools">Modeling Tools</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="docs-list" id="docs-list">
|
||
<!-- Documentation items will be populated dynamically -->
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="content-area">
|
||
<!-- Main Home Screen -->
|
||
<div id="welcome-screen" class="home-screen">
|
||
<div class="welcome-hero">
|
||
<div class="welcome-logo">
|
||
<div class="star-icon-large">✦</div>
|
||
<h1 class="welcome-title">4DSTAR Toolbox</h1>
|
||
<p class="welcome-subtitle">Toolbox for 4DSTAR related programs</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="welcome-content">
|
||
<div class="welcome-section">
|
||
<h2>Getting Started</h2>
|
||
<p>Choose a tool from the sidebar to begin your analysis:</p>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon" style="background-color: #3b82f6;">LP</div>
|
||
<div class="feature-info">
|
||
<h3>libplugin Bundle Manager</h3>
|
||
<p>Create, open, and manage plugin bundles build with libplugin.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon" style="background-color: #f59e0b;">OC</div>
|
||
<div class="feature-info">
|
||
<h3>OPAT File Inspector</h3>
|
||
<p>Inspect and analyze OPAT (Opacity Table) files. View table data and explore index vectors.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon" style="background-color: #8b5cf6;">KM</div>
|
||
<div class="feature-info">
|
||
<h3>Key Management</h3>
|
||
<p>Manage cryptographic keys for bundle signing and verification.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon" style="background-color: #10b981;">LC</div>
|
||
<div class="feature-info">
|
||
<h3>libconstants</h3>
|
||
<p>Access physical constants as defined in libconstants.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon" style="background-color: #ef4444;">SL</div>
|
||
<div class="feature-info">
|
||
<h3>SERiF Libraries</h3>
|
||
<p>Under Construction....</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="welcome-tips">
|
||
<h3>Quick Tips</h3>
|
||
<ul>
|
||
<li>Use the sidebar navigation to switch between different tools</li>
|
||
<li>Each tool has its own dedicated workspace and features</li>
|
||
<li>File operations and settings are accessible from the top menu bar</li>
|
||
<li>Hover over sidebar icons for quick tool descriptions</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- libplugin Home Screen -->
|
||
<div id="libplugin-home" class="home-screen hidden">
|
||
<div class="category-hero">
|
||
<div class="category-hero-content">
|
||
<div class="category-icon-large" style="background-color: #3b82f6;">LP</div>
|
||
<h1 class="category-title">libplugin Bundle Manager</h1>
|
||
<p class="category-subtitle">Create, manage, and edit plugin bundles build with libplugin.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category-content">
|
||
<div class="feature-section">
|
||
<h2>Bundle Management</h2>
|
||
<div class="action-cards">
|
||
<div class="action-card">
|
||
<h3>📁 Open Bundle</h3>
|
||
<p>Load an existing plugin bundle for analysis and modification.</p>
|
||
</div>
|
||
<div class="action-card">
|
||
<h3>➕ Create Bundle</h3>
|
||
<p>Start a new plugin bundle with custom parameters and configurations.</p>
|
||
</div>
|
||
<div class="action-card">
|
||
<h3>🔧 Build Bundle</h3>
|
||
<p>Compile and execute plugin bundle.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-section">
|
||
<h3>About libplugin</h3>
|
||
<p>The libplugin Bundle Manager provides a comprehensive interface for managing plugin bundles build with libplugin. Users can create new bundles from existing plugins, open and modify existing bundles, and build precompiled dynamic libraries for bundles for other architectures. Docker must be installed and running to build bundles for other architectures.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- OPAT Home Screen -->
|
||
<div id="opat-home" class="home-screen hidden">
|
||
<div class="category-hero">
|
||
<div class="category-hero-content">
|
||
<div class="category-icon-large" style="background-color: #f59e0b;">OC</div>
|
||
<h1 class="category-title">OPAT File Inspector</h1>
|
||
<p class="category-subtitle">Analyze opacity tables and stellar atmosphere data</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category-content">
|
||
<div class="feature-section">
|
||
<h2>OPAT Analysis Tools</h2>
|
||
<div class="action-cards">
|
||
<div class="action-card">
|
||
<h3>📊 Load OPAT File</h3>
|
||
<p>Import and parse OPAT (Opacity Table) files for detailed inspection.</p>
|
||
</div>
|
||
<div class="action-card">
|
||
<h3>🔍 Explore Data</h3>
|
||
<p>Navigate through index vectors and examine table structures and metadata.</p>
|
||
</div>
|
||
<div class="action-card">
|
||
<h3>📈 View Tables</h3>
|
||
<p>Display opacity data in interactive tables with full or filtered views.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-section">
|
||
<h3>About OPAT Files</h3>
|
||
<p>OPAT (Opacity Table) files contain crucial stellar atmosphere data including opacity coefficients, temperature and density grids, and related thermodynamic properties used in stellar evolution calculations.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- libconstants Home Screen -->
|
||
<div id="libconstants-home" class="home-screen hidden">
|
||
<div class="category-hero">
|
||
<div class="category-hero-content">
|
||
<div class="category-icon-large" style="background-color: #10b981;">LC</div>
|
||
<h1 class="category-title">libconstants</h1>
|
||
<p class="category-subtitle">Physical constants and stellar parameters</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category-content">
|
||
<div class="feature-section">
|
||
<h2>Constants Management</h2>
|
||
<div class="action-cards">
|
||
<div class="action-card">
|
||
<h3>🔢 Physical Constants</h3>
|
||
<p>Access fundamental physical constants used in stellar evolution calculations.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-section">
|
||
<h3>About libconstants</h3>
|
||
<p>The libconstants module provides a centralized repository of physical constants, conversion factors, and stellar parameters essential for accurate stellar evolution modeling and analysis.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SERiF Home Screen -->
|
||
<div id="serif-home" class="home-screen hidden">
|
||
<div class="category-hero">
|
||
<div class="category-hero-content">
|
||
<div class="category-icon-large" style="background-color: #ef4444;">SL</div>
|
||
<h1 class="category-title">SERiF Libraries</h1>
|
||
<p class="category-subtitle">Stellar Evolution and Rotation in 4D</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category-content">
|
||
<div class="feature-section">
|
||
<h2>SERiF Tools</h2>
|
||
<div class="action-cards">
|
||
<div class="action-card">
|
||
<h3> 🔨 Under Construction</h3>
|
||
<p>This page will provide a unified installer and help users get started with SERiF and related libraries.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-section">
|
||
<h3>About SERiF</h3>
|
||
<p>SERiF is a stellar structure and evolution program written in C++. This README will eventually provide guidance on how end users (i.e. non SERiF developers) can use the code. However, due to the early stage of development we are in, this README is currently intended only for developers. Its purpose is to provide an overview of the build system, development philosphy, development process, and current state of the code. Further, general information tasks which need doing will also be included (though for more detailed information on this please refer to the issue tracker or the 4DSSE project board)./p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Documentation Home Screen -->
|
||
<div id="docs-home" class="home-screen hidden">
|
||
<div class="category-hero">
|
||
<div class="category-hero-content">
|
||
<div class="category-icon-large" style="background-color: #06b6d4;">📚</div>
|
||
<h1 class="category-title">Documentation Viewer</h1>
|
||
<p class="category-subtitle">Browse and view Doxygen documentation for 4DSTAR libraries</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category-content">
|
||
<div class="feature-section">
|
||
<h2>Available Documentation</h2>
|
||
<div id="docs-grid" class="docs-grid">
|
||
<!-- Documentation cards will be populated dynamically -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-section">
|
||
<h3>About Documentation</h3>
|
||
<p>This viewer provides access to Doxygen-generated documentation for various 4DSTAR libraries and tools. Click on any library below to view its documentation in an integrated viewer.</p>
|
||
|
||
<div class="docs-features">
|
||
<h4>Features:</h4>
|
||
<ul>
|
||
<li>Browse documentation for multiple libraries</li>
|
||
<li>Integrated iframe viewer for seamless experience</li>
|
||
<li>Quick access to GitHub repositories</li>
|
||
<li>Search and filter by category</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Documentation Viewer -->
|
||
<div id="docs-viewer" class="hidden">
|
||
<header class="content-header">
|
||
<h2 id="docs-viewer-title">Documentation Viewer</h2>
|
||
<div class="action-buttons">
|
||
<button id="docs-open-external-btn" class="action-btn" title="Open in external browser">
|
||
<span>🔗</span> External
|
||
</button>
|
||
<button id="docs-github-btn" class="action-btn" title="View on GitHub">
|
||
<span>📁</span> GitHub
|
||
</button>
|
||
<button id="docs-back-btn" class="action-btn">
|
||
<span>←</span> Back
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="docs-viewer-content">
|
||
<div class="docs-info-bar">
|
||
<span id="docs-current-lib" class="docs-current-lib"></span>
|
||
<span id="docs-current-version" class="docs-current-version"></span>
|
||
</div>
|
||
<div class="docs-iframe-container">
|
||
<iframe id="docs-iframe" src="" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups allow-forms"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="opat-view" class="hidden">
|
||
<header class="content-header">
|
||
<h2 id="opat-title">OPAT File Inspector</h2>
|
||
<div class="action-buttons">
|
||
<button id="opat-close-btn">Close File</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="tab-nav">
|
||
<button class="tab-link active" data-tab="opat-overview-tab">File Information</button>
|
||
<button class="tab-link" data-tab="opat-explorer-tab">Data Explorer</button>
|
||
<button class="tab-link" data-tab="opat-plotting-tab">Plotting</button>
|
||
</div>
|
||
|
||
<div id="opat-tab-content">
|
||
<div id="opat-overview-tab" class="tab-pane active">
|
||
<div id="opat-header-info" class="opat-info-content"></div>
|
||
<div class="opat-info-section">
|
||
<h4 class="opat-section-title">All Table Tags</h4>
|
||
<ul id="opat-all-tags-list" class="opat-tags-list"></ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="opat-explorer-tab" class="tab-pane hidden">
|
||
<div class="opat-info-section">
|
||
<h4 class="opat-section-title">Data Card Explorer</h4>
|
||
<div class="opat-selector-group">
|
||
<label for="opat-index-selector" class="opat-label">Select Index Vector:</label>
|
||
<select id="opat-index-selector" class="opat-select">
|
||
<option value="">-- Select an Index Vector --</option>
|
||
</select>
|
||
</div>
|
||
<div id="opat-tables-display" class="opat-tables-display"></div>
|
||
</div>
|
||
|
||
<div class="opat-info-section">
|
||
<h4 class="opat-section-title">Table Viewer</h4>
|
||
<div id="opat-table-data-content" class="opat-table-viewer">
|
||
<p class="opat-placeholder">Click on a table from the 'Data Card Explorer' above to view its data here.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="opat-plotting-tab" class="tab-pane hidden">
|
||
<div class="opat-info-section">
|
||
<h4 class="opat-section-title">Plot Configuration</h4>
|
||
<div class="plot-controls">
|
||
<div class="plot-control-row">
|
||
<div class="plot-control-group">
|
||
<label for="plot-index-selector" class="opat-label">Index Vector:</label>
|
||
<select id="plot-index-selector" class="opat-select">
|
||
<option value="">-- Select an Index Vector --</option>
|
||
</select>
|
||
</div>
|
||
<div class="plot-control-group">
|
||
<label for="plot-table-selector" class="opat-label">Data Table:</label>
|
||
<select id="plot-table-selector" class="opat-select">
|
||
<option value="">-- Select a Table --</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="plot-control-row">
|
||
<div class="plot-control-group">
|
||
<label for="plot-x-axis" class="opat-label">X-Axis:</label>
|
||
<select id="plot-x-axis" class="opat-select">
|
||
<option value="">-- Select X Variable --</option>
|
||
</select>
|
||
</div>
|
||
<div class="plot-control-group">
|
||
<label for="plot-y-axis" class="opat-label">Y-Axis:</label>
|
||
<select id="plot-y-axis" class="opat-select">
|
||
<option value="">-- Select Y Variable --</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="plot-control-row">
|
||
<div class="plot-control-group">
|
||
<label for="plot-type" class="opat-label">Plot Type:</label>
|
||
<select id="plot-type" class="opat-select">
|
||
<option value="scatter">Scatter Plot</option>
|
||
<option value="line">Line Plot</option>
|
||
<option value="heatmap">Heatmap</option>
|
||
<option value="contour">Contour Plot</option>
|
||
</select>
|
||
</div>
|
||
<div class="plot-control-group">
|
||
<label for="plot-title" class="opat-label">Plot Title:</label>
|
||
<input type="text" id="plot-title" class="opat-input" placeholder="Enter plot title">
|
||
</div>
|
||
</div>
|
||
<div class="plot-actions">
|
||
<button id="create-plot-btn" class="action-button primary">Create Plot</button>
|
||
<button id="save-plot-btn" class="action-button secondary" disabled>Save as PNG</button>
|
||
<button id="clear-plot-btn" class="action-button secondary" disabled>Clear Plot</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="opat-info-section">
|
||
<h4 class="opat-section-title">Plot Display</h4>
|
||
<div id="plot-container" class="plot-container">
|
||
<div id="plot-placeholder" class="plot-placeholder">
|
||
<p>Configure your plot settings above and click "Create Plot" to generate a visualization.</p>
|
||
</div>
|
||
<div id="plot-display" class="plot-display hidden"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="bundle-view" class="hidden">
|
||
<header class="content-header">
|
||
<h2 id="bundle-title"></h2>
|
||
<div class="action-buttons">
|
||
<button id="sign-bundle-btn">Sign</button>
|
||
<button id="validate-bundle-btn">Validate</button>
|
||
<button id="clear-bundle-btn">Clear</button>
|
||
<button id="save-metadata-btn" class="hidden">Save Changes</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="tab-nav">
|
||
<button class="tab-link active" data-tab="overview-tab">Overview</button>
|
||
<button class="tab-link" data-tab="plugins-tab">Plugins</button>
|
||
<button class="tab-link" data-tab="fill-tab" id="fill-tab-link">Fill</button>
|
||
<button class="tab-link hidden" data-tab="validation-tab">Validation</button>
|
||
</div>
|
||
|
||
<div id="tab-content">
|
||
<div id="overview-tab" class="tab-pane active">
|
||
<div id="manifest-details"></div>
|
||
</div>
|
||
<div id="plugins-tab" class="tab-pane">
|
||
<div id="plugins-list"></div>
|
||
</div>
|
||
<div id="validation-tab" class="tab-pane">
|
||
<pre id="validation-results"></pre>
|
||
</div>
|
||
<div id="fill-tab" class="tab-pane">
|
||
<div class="fill-header">
|
||
<h3>Fill Bundle with Compiled Binaries</h3>
|
||
<p>Select the targets you want to build and add to the bundle:</p>
|
||
<div class="fill-header-actions">
|
||
<button id="load-fillable-targets-btn" class="action-button primary">Load Available Targets</button>
|
||
</div>
|
||
</div>
|
||
<div id="fill-targets-container">
|
||
<div id="fill-loading" class="hidden">
|
||
<p>Loading available targets...</p>
|
||
</div>
|
||
<div id="fill-no-targets" class="hidden">
|
||
<p>No fillable targets available. The bundle may already be complete.</p>
|
||
</div>
|
||
<div id="fill-targets-content" class="hidden">
|
||
<div id="fill-plugins-tables"></div>
|
||
<div class="fill-actions">
|
||
<button id="select-all-targets" class="action-button secondary">Select All</button>
|
||
<button id="deselect-all-targets" class="action-button secondary">Deselect All</button>
|
||
<button id="start-fill-process" class="action-button primary">Start Building</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="fill-progress-container" class="hidden">
|
||
<h4>Build Progress</h4>
|
||
<div id="fill-progress-content"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Plugin Management Views -->
|
||
<div id="plugin-view" class="hidden">
|
||
<!-- Plugin Initialize View -->
|
||
<div id="plugin-init-view" class="plugin-management-view">
|
||
<div class="plugin-header">
|
||
<h3>Initialize New Plugin</h3>
|
||
<p>Create a new Meson-based C++ plugin project from an interface header.</p>
|
||
</div>
|
||
<div class="plugin-form">
|
||
<div class="form-group">
|
||
<label for="plugin-project-name">Project Name:</label>
|
||
<input type="text" id="plugin-project-name" placeholder="my_plugin" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="plugin-header-file">Interface Header File:</label>
|
||
<div class="file-input-group">
|
||
<input type="file" id="plugin-header-file" accept=".h,.hpp" style="display: none;">
|
||
<button id="plugin-header-browse-btn" class="browse-button">Browse...</button>
|
||
<span id="plugin-header-filename" class="filename-display">No file selected</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" id="plugin-interface-selection" style="display: none;">
|
||
<label for="plugin-interface-select">Select Interface to Implement:</label>
|
||
<select id="plugin-interface-select" class="form-select">
|
||
<option value="">-- Select an Interface --</option>
|
||
</select>
|
||
<div id="plugin-interface-methods" class="interface-methods-preview" style="display: none;">
|
||
<h5>Methods to implement:</h5>
|
||
<ul id="plugin-methods-list"></ul>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="plugin-directory">Output Directory:</label>
|
||
<div class="file-input-group">
|
||
<input type="text" id="plugin-directory" placeholder="." readonly>
|
||
<button id="plugin-directory-browse-btn" class="browse-button">Browse...</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="plugin-version">Version:</label>
|
||
<input type="text" id="plugin-version" placeholder="0.1.0" value="0.1.0">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="plugin-libplugin-rev">libplugin Revision:</label>
|
||
<input type="text" id="plugin-libplugin-rev" placeholder="main" value="main">
|
||
</div>
|
||
<div class="form-actions">
|
||
<button id="plugin-init-execute-btn" class="action-button primary" disabled>Initialize Plugin</button>
|
||
</div>
|
||
</div>
|
||
<div id="plugin-init-results" class="plugin-results hidden"></div>
|
||
</div>
|
||
|
||
<!-- Plugin Validate View -->
|
||
<div id="plugin-validate-view" class="plugin-management-view hidden">
|
||
<div class="plugin-header">
|
||
<h3>Validate Plugin Project</h3>
|
||
<p>Check a plugin project's structure and meson.build file for correctness.</p>
|
||
</div>
|
||
<div class="plugin-form">
|
||
<div class="form-group">
|
||
<label for="validate-plugin-path">Plugin Directory:</label>
|
||
<div class="file-input-group">
|
||
<input type="text" id="validate-plugin-path" placeholder="." readonly>
|
||
<button id="validate-plugin-browse-btn" class="browse-button">Browse...</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button id="plugin-validate-execute-btn" class="action-button primary">Validate Plugin</button>
|
||
</div>
|
||
</div>
|
||
<div id="plugin-validate-results" class="plugin-results hidden"></div>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- Plugin Extract View -->
|
||
<div id="plugin-extract-view" class="plugin-management-view hidden">
|
||
<div class="plugin-header">
|
||
<h3>Extract Plugin from Bundle</h3>
|
||
<p>Extract a plugin's source code from a bundle.</p>
|
||
</div>
|
||
<div class="plugin-form">
|
||
<div class="form-group">
|
||
<label for="extract-plugin-name">Plugin Name:</label>
|
||
<input type="text" id="extract-plugin-name" placeholder="plugin_name" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="extract-bundle-file">Bundle File:</label>
|
||
<div class="file-input-group">
|
||
<input type="file" id="extract-bundle-file" accept=".fbundle" style="display: none;">
|
||
<button id="extract-bundle-browse-btn" class="browse-button">Browse...</button>
|
||
<span id="extract-bundle-filename" class="filename-display">No file selected</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="extract-output-dir">Output Directory:</label>
|
||
<div class="file-input-group">
|
||
<input type="text" id="extract-output-dir" placeholder="." readonly>
|
||
<button id="extract-output-browse-btn" class="browse-button">Browse...</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button id="plugin-extract-execute-btn" class="action-button primary" disabled>Extract Plugin</button>
|
||
</div>
|
||
</div>
|
||
<div id="plugin-extract-results" class="plugin-results hidden"></div>
|
||
</div>
|
||
|
||
<!-- Plugin Diff View -->
|
||
<div id="plugin-diff-view" class="plugin-management-view hidden">
|
||
<div class="plugin-header">
|
||
<h3>Compare Plugin Sources</h3>
|
||
<p>Compare the source code of a plugin between two different bundles.</p>
|
||
</div>
|
||
<div class="plugin-form">
|
||
<div class="form-group">
|
||
<label for="diff-plugin-name">Plugin Name:</label>
|
||
<input type="text" id="diff-plugin-name" placeholder="plugin_name" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="diff-bundle-a">First Bundle:</label>
|
||
<div class="file-input-group">
|
||
<input type="file" id="diff-bundle-a" accept=".fbundle" style="display: none;">
|
||
<button id="diff-bundle-a-browse-btn" class="browse-button">Browse...</button>
|
||
<span id="diff-bundle-a-filename" class="filename-display">No file selected</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="diff-bundle-b">Second Bundle:</label>
|
||
<div class="file-input-group">
|
||
<input type="file" id="diff-bundle-b" accept=".fbundle" style="display: none;">
|
||
<button id="diff-bundle-b-browse-btn" class="browse-button">Browse...</button>
|
||
<span id="diff-bundle-b-filename" class="filename-display">No file selected</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button id="plugin-diff-execute-btn" class="action-button primary" disabled>Compare Plugins</button>
|
||
</div>
|
||
</div>
|
||
<div id="plugin-diff-results" class="plugin-results hidden"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Key Management Views -->
|
||
<div id="keys-view" class="hidden">
|
||
<!-- Trusted Keys View -->
|
||
<div id="keys-list-view" class="key-management-view">
|
||
<div class="keys-header">
|
||
<h3>Trusted Keys</h3>
|
||
<p>Manage cryptographic keys for bundle signing and verification.</p>
|
||
</div>
|
||
<div id="keys-list-container">
|
||
<div class="empty-state">
|
||
<div class="empty-icon">🔑</div>
|
||
<h3>Loading Keys...</h3>
|
||
<p>Please wait while we load your trusted keys.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Generate Key View -->
|
||
<div id="keys-generate-view" class="key-management-view hidden">
|
||
<div class="generate-key-header">
|
||
<h3>Generate New Key Pair</h3>
|
||
<p>Create a new cryptographic key pair for signing bundles.</p>
|
||
</div>
|
||
<div class="generate-key-form">
|
||
<div class="form-group">
|
||
<label for="generate-key-name">Key Name:</label>
|
||
<input type="text" id="generate-key-name" placeholder="author_key" value="author_key">
|
||
<small>Base name for the generated key files</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="generate-key-type">Key Type:</label>
|
||
<select id="generate-key-type">
|
||
<option value="ed25519">Ed25519 (Recommended)</option>
|
||
<option value="rsa">RSA-2048</option>
|
||
</select>
|
||
<small>Ed25519 is faster and more secure than RSA</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="generate-output-dir">Output Directory:</label>
|
||
<input type="text" id="generate-output-dir" placeholder="." value=".">
|
||
<small>Directory where keys will be saved</small>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button id="generate-key-btn" class="action-button primary">Generate Key Pair</button>
|
||
</div>
|
||
<div class="security-notice">
|
||
<div class="warning-banner">
|
||
<span class="warning-icon">⚠️</span>
|
||
<div class="warning-text">
|
||
<strong>Security Notice:</strong> Keep your private key secure and never share it.
|
||
Only share the public key (.pub or .pub.pem files) with others who need to verify your bundles.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add Key View -->
|
||
<div id="keys-add-view" class="key-management-view hidden">
|
||
<div class="add-key-header">
|
||
<h3>Add Trusted Key</h3>
|
||
<p>Add a public key to your trust store for bundle verification.</p>
|
||
</div>
|
||
<div class="add-key-form">
|
||
<div class="form-actions">
|
||
<button id="add-key-file-btn" class="action-button primary">Select Key File</button>
|
||
</div>
|
||
<div class="info-notice">
|
||
<div class="info-banner">
|
||
<span class="info-icon">ℹ️</span>
|
||
<div class="info-text">
|
||
<strong>Supported formats:</strong> .pub, .pub.pem, and .pem files containing public keys.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Remote Sources View -->
|
||
<div id="keys-remotes-view" class="key-management-view hidden">
|
||
<div class="remotes-header">
|
||
<h3>Remote Key Sources</h3>
|
||
<p>Manage Git repositories that contain trusted public keys.</p>
|
||
</div>
|
||
|
||
<div class="add-remote-form">
|
||
<h4>Add New Remote Source</h4>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="remote-name">Name:</label>
|
||
<input type="text" id="remote-name" placeholder="my-keys">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="remote-url">Git Repository URL:</label>
|
||
<input type="text" id="remote-url" placeholder="https://github.com/user/keys.git">
|
||
</div>
|
||
<div class="form-group">
|
||
<button id="add-remote-btn" class="action-button primary">Add Remote</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="remotes-list-container">
|
||
<div class="empty-state">
|
||
<div class="empty-icon">🌐</div>
|
||
<h3>Loading Remote Sources...</h3>
|
||
<p>Please wait while we load your remote key sources.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="create-bundle-form" class="hidden">
|
||
<!-- The create form will be moved into a modal later -->
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Modal for status/error messages -->
|
||
<div id="modal" class="modal-container hidden">
|
||
<div class="modal-content">
|
||
<span id="modal-close-btn" class="modal-close">×</span>
|
||
<h3 id="modal-title"></h3>
|
||
<div id="modal-message"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Spinner Overlay -->
|
||
<div id="spinner-overlay" class="spinner-overlay hidden">
|
||
<div class="spinner"></div>
|
||
<p>Processing...</p>
|
||
</div>
|
||
|
||
<!-- Save Options Modal -->
|
||
<div id="save-options-modal" class="modal-container hidden">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>Save Metadata Changes</h3>
|
||
<button class="modal-close" onclick="hideSaveOptionsModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div id="signature-warning-section" class="signature-warning-section hidden">
|
||
<div class="warning-banner">
|
||
<span class="warning-icon">⚠️</span>
|
||
<div class="warning-text">
|
||
<strong>Signature Warning:</strong> This operation will invalidate the bundle's digital signature.
|
||
You will need to re-sign the bundle using the <strong>Sign</strong> button and a <strong>PEM private key</strong> file.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>How would you like to save your metadata changes?</p>
|
||
<div class="save-options">
|
||
<button id="overwrite-bundle-btn" class="save-option-btn primary">
|
||
<strong>Overwrite Current Bundle</strong>
|
||
<small>Update the existing bundle file</small>
|
||
</button>
|
||
<button id="save-as-new-btn" class="save-option-btn secondary">
|
||
<strong>Save As New Bundle</strong>
|
||
<small>Create a new bundle file with changes</small>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Signature Invalidation Warning Modal -->
|
||
<div id="signature-warning-modal" class="modal-container hidden">
|
||
<div class="modal-content">
|
||
<h2>⚠️ Signature Warning</h2>
|
||
<div class="warning-content">
|
||
<p><strong>This operation will invalidate the bundle's digital signature.</strong></p>
|
||
<p>After making changes, you will need to re-sign the bundle using:</p>
|
||
<ul>
|
||
<li>The <strong>Sign</strong> button in the action bar</li>
|
||
<li>A valid <strong>PEM private key</strong> file</li>
|
||
</ul>
|
||
<p>Do you want to continue?</p>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button id="signature-warning-cancel" class="action-button secondary">Cancel</button>
|
||
<button id="signature-warning-continue" class="action-button primary">Continue</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Info Modal -->
|
||
<div id="info-modal" class="modal-container hidden">
|
||
<div class="modal-content info-modal-content">
|
||
<div class="modal-header">
|
||
<h3>About 4DSTAR</h3>
|
||
<button id="close-info-modal" class="modal-close">×</button>
|
||
</div>
|
||
<div class="info-modal-body">
|
||
<div class="info-tab-nav">
|
||
<button class="info-tab-link active" data-tab="about-info-tab">About</button>
|
||
<button class="info-tab-link" data-tab="license-info-tab">License</button>
|
||
<button class="info-tab-link" data-tab="funding-info-tab">Funding</button>
|
||
<button class="info-tab-link" data-tab="help-info-tab">Help</button>
|
||
</div>
|
||
<div class="info-tab-content">
|
||
<div id="about-info-tab" class="info-tab-pane active">
|
||
<h4>4DSTAR Bundle Manager</h4>
|
||
<p><strong>Author:</strong> Emily M. Boudreaux</p>
|
||
<p><strong>Version:</strong> 1.0.0</p>
|
||
<p><strong>Description:</strong> A modern bundle management tool for 4DSTAR stellar evolution models, providing an intuitive interface for creating, signing, validating, and filling binary bundles.</p>
|
||
<div class="info-links">
|
||
<a href="https://github.com/4D-STAR/fourdst" id="github-link" class="info-link">
|
||
<span class="link-icon">🔗</span>
|
||
View on GitHub
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div id="license-info-tab" class="info-tab-pane">
|
||
<h4>License Information</h4>
|
||
<p><strong>License:</strong> GNU General Public License v3.0</p>
|
||
<div class="license-content">
|
||
<p>This software is licensed under GPL v3. License text will be added here.</p>
|
||
<textarea readonly class="license-text" placeholder="placeholder..."></textarea>
|
||
</div>
|
||
</div>
|
||
<div id="funding-info-tab" class="info-tab-pane">
|
||
<h4>Funding & Support</h4>
|
||
<div class="funding-content">
|
||
<p>GridFire is a part of the 4D-STAR collaboration.
|
||
|
||
4D-STAR is funded by European Research Council (ERC) under the Horizon Europe programme (Synergy Grant agreement No. 101071505: 4D-STAR) Work for this project is funded by the European Union. Views and opinions expressed are however those of the author(s) only and do not necessarily reflect those of the European Union or the European Research Council.</p>
|
||
</div>
|
||
</div>
|
||
<div id="help-info-tab" class="info-tab-pane">
|
||
<h4>Help & Documentation</h4>
|
||
<div class="help-content">
|
||
<h5>Getting Started</h5>
|
||
<ul>
|
||
<li><strong>Open Bundle:</strong> Click "Open Bundle" to load an existing .fbundle file</li>
|
||
<li><strong>Create Bundle:</strong> Click "Create Bundle" to build a new bundle from plugins</li>
|
||
<li><strong>Sign Bundle:</strong> Use the Sign button to digitally sign your bundle with a PEM key</li>
|
||
<li><strong>Fill Bundle:</strong> Use the Fill tab to compile and add binaries for different platforms</li>
|
||
</ul>
|
||
<h5>Bundle Operations</h5>
|
||
<ul>
|
||
<li><strong>Validate:</strong> Check bundle integrity and compatibility</li>
|
||
<li><strong>Edit Metadata:</strong> Click pencil icons to edit version, author, and comments</li>
|
||
<li><strong>Clear:</strong> Remove all compiled binaries from the bundle</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Fill Modal (Legacy - can be removed later) -->
|
||
<div id="fill-modal" class="modal-container hidden">
|
||
<div class="modal-content">
|
||
<span class="close-fill-modal-button">×</span>
|
||
<h2 id="fill-modal-title">Fill Bundle</h2>
|
||
<div id="fill-modal-body">
|
||
<p>Select the targets you want to build:</p>
|
||
<div id="fill-targets-list"></div>
|
||
<button id="start-fill-button">Start Fill</button>
|
||
</div>
|
||
<div id="fill-progress-view" style="display: none;">
|
||
<div id="fill-progress-list"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="spinner" class="spinner hidden"></div>
|
||
|
||
<script src="opatParser.js"></script>
|
||
<script src="node_modules/plotly.js-dist/plotly.js"></script>
|
||
<script src="renderer-refactored.js"></script>
|
||
</body>
|
||
|
||
</html>
|