553 lines
29 KiB
HTML
553 lines
29 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="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>
|
||
</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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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>
|
||
</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: #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>
|
||
|
||
<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>
|
||
</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>
|
||
</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>
|
||
|
||
<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="renderer-refactored.js"></script>
|
||
</body>
|
||
|
||
</html>
|