mirror of
https://github.com/olehomelchenko/astrolabe-nvc.git
synced 2025-12-21 21:22:23 +00:00
Add Dataset Manager functionality with IndexedDB support
- Introduced a new modal for managing datasets, including options to create, view, and delete datasets. - Implemented IndexedDB for persistent storage of datasets, allowing for efficient data retrieval and management. - Added UI components for dataset details, including statistics and preview. - Enhanced the app's JavaScript to handle dataset operations such as saving, updating, and deleting datasets. - Integrated dataset reference resolution in the visualization editor to support dynamic data sources. - Updated styles for the new modal and dataset management UI for improved user experience.
This commit is contained in:
134
index.html
134
index.html
@@ -21,6 +21,7 @@
|
||||
<div class="header-links">
|
||||
<span class="header-link" id="import-link">Import</span>
|
||||
<span class="header-link" id="export-link">Export</span>
|
||||
<span class="header-link" id="datasets-link">Datasets</span>
|
||||
<span class="header-link" id="help-link">Help</span>
|
||||
<input type="file" id="import-file-input" accept=".json" style="display: none;" />
|
||||
</div>
|
||||
@@ -38,6 +39,9 @@
|
||||
<button class="toggle-btn active" id="toggle-preview-panel" title="Toggle Preview Panel">
|
||||
👁️
|
||||
</button>
|
||||
<button class="toggle-btn" id="toggle-datasets" title="Datasets">
|
||||
📁
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="main-panels">
|
||||
@@ -144,8 +148,138 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dataset Manager Modal -->
|
||||
<div id="dataset-modal" class="modal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">Dataset Manager</span>
|
||||
<button class="modal-close" id="dataset-modal-close">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- List View (default) -->
|
||||
<div id="dataset-list-view" class="dataset-view">
|
||||
<div class="dataset-list-header">
|
||||
<button class="modal-btn primary" id="new-dataset-btn">New Dataset</button>
|
||||
</div>
|
||||
<div class="dataset-container">
|
||||
<div class="dataset-list" id="dataset-list">
|
||||
<!-- Dynamically populated by renderDatasetList() -->
|
||||
</div>
|
||||
<div class="dataset-details" id="dataset-details" style="display: none;">
|
||||
<div class="dataset-detail-section">
|
||||
<div class="dataset-detail-header">Name</div>
|
||||
<input type="text" id="dataset-detail-name" class="dataset-input" placeholder="Dataset name..." />
|
||||
|
||||
<div class="dataset-detail-header">Comment</div>
|
||||
<textarea id="dataset-detail-comment" class="dataset-textarea" placeholder="Add a comment..." rows="3"></textarea>
|
||||
|
||||
<div class="dataset-detail-header-row">
|
||||
<span class="dataset-detail-header">Statistics</span>
|
||||
<button class="dataset-refresh-btn" id="refresh-metadata-btn" style="display: none;" title="Refresh metadata from URL">🔄</button>
|
||||
</div>
|
||||
<div class="dataset-stats">
|
||||
<div class="dataset-stat-item">
|
||||
<span class="dataset-stat-label">Rows:</span>
|
||||
<span id="dataset-detail-rows">0</span>
|
||||
</div>
|
||||
<div class="dataset-stat-item">
|
||||
<span class="dataset-stat-label">Columns:</span>
|
||||
<span id="dataset-detail-columns">0</span>
|
||||
</div>
|
||||
<div class="dataset-stat-item">
|
||||
<span class="dataset-stat-label">Size:</span>
|
||||
<span id="dataset-detail-size">0 B</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dataset-detail-header">Timestamps</div>
|
||||
<div class="dataset-stats">
|
||||
<div class="dataset-stat-item">
|
||||
<span class="dataset-stat-label">Created:</span>
|
||||
<span id="dataset-detail-created">-</span>
|
||||
</div>
|
||||
<div class="dataset-stat-item">
|
||||
<span class="dataset-stat-label">Modified:</span>
|
||||
<span id="dataset-detail-modified">-</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dataset-detail-header">Preview</div>
|
||||
<pre id="dataset-preview" class="dataset-preview-box"></pre>
|
||||
|
||||
<div class="dataset-actions">
|
||||
<button class="modal-btn" id="copy-reference-btn">Copy Reference</button>
|
||||
<button class="modal-btn delete-btn" id="delete-dataset-btn">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form View (for creating new datasets) -->
|
||||
<div id="dataset-form-view" class="dataset-view" style="display: none;">
|
||||
<div class="dataset-form">
|
||||
<div class="dataset-form-header">Create New Dataset</div>
|
||||
|
||||
<div class="dataset-form-group">
|
||||
<label class="dataset-form-label">Name *</label>
|
||||
<input type="text" id="dataset-form-name" class="dataset-input" placeholder="Enter dataset name..." />
|
||||
</div>
|
||||
|
||||
<div class="dataset-form-group">
|
||||
<div class="dataset-toggle-row">
|
||||
<div class="dataset-toggle-section">
|
||||
<span class="dataset-toggle-label">Source:</span>
|
||||
<div class="dataset-toggle-group">
|
||||
<button class="dataset-toggle-btn active" data-source="inline" type="button">Inline</button>
|
||||
<button class="dataset-toggle-btn" data-source="url" type="button">URL</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dataset-toggle-section">
|
||||
<span class="dataset-toggle-label">Format:</span>
|
||||
<div class="dataset-toggle-group">
|
||||
<button class="dataset-toggle-btn active" data-format="json" type="button">JSON</button>
|
||||
<button class="dataset-toggle-btn" data-format="csv" type="button">CSV</button>
|
||||
<button class="dataset-toggle-btn" data-format="tsv" type="button">TSV</button>
|
||||
<button class="dataset-toggle-btn" data-format="topojson" type="button">TopoJSON</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dataset-form-group" id="dataset-url-group" style="display: none;">
|
||||
<label class="dataset-form-label">URL *</label>
|
||||
<input type="text" id="dataset-form-url" class="dataset-input" placeholder="https://example.com/data.csv" />
|
||||
</div>
|
||||
|
||||
<div class="dataset-form-group" id="dataset-data-group">
|
||||
<label class="dataset-form-label">Data *</label>
|
||||
<div class="dataset-format-hint" id="dataset-format-hint">
|
||||
JSON array of objects: [{"col1": "value", "col2": 123}, ...]
|
||||
</div>
|
||||
<textarea id="dataset-form-data" class="dataset-textarea" placeholder='[{"col1": "value", "col2": 123}, ...]' rows="12"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="dataset-form-group">
|
||||
<label class="dataset-form-label">Comment</label>
|
||||
<textarea id="dataset-form-comment" class="dataset-textarea" placeholder="Optional description..." rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="dataset-form-error" id="dataset-form-error"></div>
|
||||
|
||||
<div class="dataset-form-actions">
|
||||
<button class="modal-btn primary" id="save-dataset-btn">Save Dataset</button>
|
||||
<button class="modal-btn" id="cancel-dataset-btn">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="src/js/config.js"></script>
|
||||
<script src="src/js/snippet-manager.js"></script>
|
||||
<script src="src/js/dataset-manager.js"></script>
|
||||
<script src="src/js/panel-manager.js"></script>
|
||||
<script src="src/js/editor.js"></script>
|
||||
<script src="src/js/app.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user