Skip to content

New studio #3485

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lvca merged 8 commits into from
Feb 19, 2026
Merged

New studio #3485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dcc6340
feat: improved query panel, added saved queries + reference
lvca Feb 19, 2026
e35bed2
Refreshed Database Schema
lvca Feb 19, 2026
74a1eed
studio: removed footer
lvca Feb 19, 2026
d85fa14
fix: studio api + info new content
lvca Feb 19, 2026
e41c7fc
studio, new layout
lvca Feb 19, 2026
b0a8036
studio: multiple improvements in the layout
lvca Feb 19, 2026
26ebebd
studio: new record editor to update/delete a record. Works from the t…
lvca Feb 19, 2026
c7f4f46
studio, minor layout fixes
lvca Feb 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
712 changes: 597 additions & 115 deletions studio/src/main/resources/static/api.html
View file
Open in desktop

Large diffs are not rendered by default.

2,506 changes: 2,474 additions & 32 deletions studio/src/main/resources/static/css/studio.css
View file
Open in desktop

Large diffs are not rendered by default.

215 changes: 81 additions & 134 deletions studio/src/main/resources/static/database.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,161 +1,108 @@
<div class="tab-pane fade" id="tab-database" role="tabpanel">
<div class="row">
<div class="col-12">
<h4><i class="fa fa-database"></i> Database</h4>
<div class="tab-pane fade d-flex flex-column" id="tab-database" role="tabpanel">
<div class="d-flex align-items-center justify-content-between flex-shrink-0" style="padding: 10px 12px 6px;">
<div class="d-flex align-items-center gap-2">
<i class="fa fa-database" style="font-size: 1.2rem; color: #00aeee;"></i>
<label>Connected as&nbsp;</label><label id="databaseUser"></label>@
<select id="schemaInputDatabase" class="inputDatabase form-select form-select-sm" style="width: auto; display: inline-block;"></select>
</div>
<div class="d-flex gap-2">
<button class="btn btn-sm db-action-btn" onclick="createDatabase()"><i class="fa fa-plus"></i> Create</button>
<button class="btn btn-sm db-action-btn db-action-btn-danger" onclick="dropDatabase()"><i class="fa fa-trash"></i> Drop</button>
<button class="btn btn-sm db-action-btn" onclick="resetDatabase()"><i class="fa fa-rotate"></i> Reset</button>
<button class="btn btn-sm db-action-btn" onclick="backupDatabase()"><i class="fa fa-box-archive"></i> Backup</button>
</div>
</div>

<div class="d-flex justify-content-between">
<div>
<div class="form-inline">
<div class="form-group">
<label>Connected as&nbsp;</label><label for="schemaInputDatabase" id="databaseUser"></label>@
<select id="schemaInputDatabase" class="inputDatabase form-select"></select>
<ul class="nav nav-tabs flex-shrink-0" id="tabs-database" style="padding: 0 12px;">
<li class="nav-item"><a data-toggle="tab" href="#tab-schema" class="active show nav-link" id="tab-schema-sel">Schema</a></li>
<li class="nav-item"><a data-toggle="tab" href="#tab-db-settings" class="nav-link" id="tab-db-settings-sel">Settings</a></li>
<li class="nav-item"><a data-toggle="tab" href="#tab-db-backup" class="nav-link" id="tab-db-backup-sel">Backup</a></li>
</ul>

<div class="tab-content" style="flex: 1; min-height: 0; position: relative;">
<!-- Schema Tab -->
<div class="tab-pane fade show active d-flex flex-column" id="tab-schema" role="tabpanel">
<div class="d-flex" style="flex: 1; min-height: 0;">
<!-- Type Badge Sidebar -->
<div id="dbTypeSidebar">
<div class="sidebar-header">
<span class="sidebar-title">Types</span>
<button class="btn btn-sm btn-light sidebar-refresh-btn" onclick="displaySchema()" title="Refresh">
<i class="fa fa-sync"></i>
</button>
</div>
<div id="dbTypeBadges">
<div class="sidebar-empty">Loading...</div>
</div>
</div>
<!-- Type Detail Panel -->
<div id="dbTypeDetail" style="flex: 1; min-width: 0; overflow-y: auto; padding: 16px 20px;">
<div class="db-type-empty">
<i class="fa fa-database" style="font-size: 2rem; color: #ddd; margin-bottom: 12px; display: block;"></i>
Select a type from the sidebar to view its schema.
</div>
</div>
</div>
</div>
<div>
<button class="btn btn-pill" onclick="createDatabase()"><i class="fa fa-plus"></i> Create</button>
<button class="btn btn-pill" onclick="dropDatabase()"><i class="fa fa-minus"></i> Drop</button>
<button class="btn btn-pill" onclick="resetDatabase()"><i class="fa fa-sync"></i> Reset</button>
<button class="btn btn-pill" onclick="backupDatabase()"><i class="fa fa-archive"></i> Backup</button>
</div>
</div>

<hr />

<div class="row">
<div class="col-6">
<button class="btn btn-pill" onclick="updateDatabases()">Refresh <i class="fa fa-sync"></i></button>
</div>
<div class="col-6">
<ul class="nav nav-tabs text-center" id="tabs-database" style="float: right">
<li class="nav-item"><a data-toggle="tab" href="#tab-schema" class="active show nav-link" id="tab-schema-sel">Database Schema</a></li>
<li class="nav-item text-center"><a data-toggle="tab" href="#tab-db-settings" class="nav-link" id="tab-db-settings-sel">Database Settings</a></li>
<li class="nav-item text-center"><a data-toggle="tab" href="#tab-db-backup" class="nav-link" id="tab-db-backup-sel">Backup</a></li>
</ul>
<!-- Settings Tab -->
<div class="tab-pane fade" id="tab-db-settings" role="tabpanel">
<div style="padding: 16px;">
<div class="table-responsive">
<table id="dbSettings" class="table table-striped table-sm" style="width: 100%; table-layout: fixed"></table>
</div>
</div>
</div>
<div class="col-12">
<div class="tab-content">
<div class="tab-pane fade show active" id="tab-schema" role="tabpanel">
<div class="col-12">
<ul class="nav nav-tabs" id="tabs-schema">
<li class="nav-item text-center"><a data-toggle="tab" href="#tab-vertices" class="active show nav-link" id="tab-vertices-sel">Vertices</a></li>
<li class="nav-item text-center"><a data-toggle="tab" href="#tab-edges" class="nav-link" id="tab-edges-sel">Edges</a></li>
<li class="nav-item text-center"><a data-toggle="tab" href="#tab-documents" class="nav-link" id="tab-documents-sel">Documents</a></li>
</ul>
</div>

<br />

<!-- Backup Tab -->
<div class="tab-pane fade" id="tab-db-backup" role="tabpanel">
<div style="padding: 16px;">
<div class="row mb-3">
<div class="col-12">
<div class="tab-content">
<div class="tab-pane show active" id="tab-vertices" role="tabpanel">
<div class="row">
<div class="col-12">
<br />Below you can find the declared Vertex Types with the number of defined properties in parentheses. Click on the type on the left to
display it properties and indexes.<br /><br />
</div>
</div>
<div class="row">
<div class="col-2">
<ul id="vTypesTabs" class="nav nav-tabs"></ul>
</div>
<div class="col-10">
<div id="vTypesPanels" class="tab-content"></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-edges" role="tabpanel">
<div class="row">
<div class="col-12">
<br />Below you can find the declared Edge Types with the number of defined properties in parentheses. Click on the type on the left to
display it properties and indexes.<br /><br />
</div>
</div>
<div class="row">
<div class="col-2">
<ul id="eTypesTabs" class="nav nav-tabs"></ul>
</div>
<div class="col-10">
<div id="eTypesPanels" class="tab-content"></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-documents" role="tabpanel">
<div class="row">
<div class="col-12">
<br />Below you can find the declared Document Types with the number of defined properties in parentheses. Click on the type on the left to
display it properties and indexes.<br /><br />
</div>
</div>
<div class="row">
<div class="col-2">
<ul id="dTypesTabs" class="nav nav-tabs"></ul>
</div>
<div class="col-10">
<div id="dTypesPanels" class="tab-content"></div>
</div>
</div>
<div class="d-flex justify-content-between align-items-center">
<h5><i class="fa fa-box-archive"></i> Database Backups</h5>
<div class="d-flex gap-2">
<button class="btn btn-sm db-action-btn" onclick="loadDatabaseBackups()">
<i class="fa fa-sync"></i> Refresh
</button>
<button class="btn btn-sm db-action-btn" style="background-color: #00aeee; color: #fff;" onclick="triggerDatabaseBackup()">
<i class="fa fa-play"></i> Backup Now
</button>
</div>
</div>
</div>
</div>

<div class="tab-pane fade" id="tab-db-settings" role="tabpanel">
<div class="table-responsive">
<table id="dbSettings" class="table table-striped table-sm" style="width: 100%; table-layout: fixed"></table>
</div>
</div>

<div class="tab-pane fade" id="tab-db-backup" role="tabpanel">
<div class="row mb-3">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center">
<h5><i class="fa fa-archive"></i> Database Backups</h5>
<div>
<button class="btn btn-sm btn-outline-primary" onclick="loadDatabaseBackups()">
<i class="fa fa-sync"></i> Refresh
</button>
<button class="btn btn-sm btn-success" onclick="triggerDatabaseBackup()">
<i class="fa fa-play"></i> Backup Now
</button>
<div class="card mb-3">
<div class="card-header">Backup Configuration &amp; Statistics</div>
<div class="card-body">
<div class="row">
<div class="col-md-8">
<div id="dbBackupConfigInfo">
<p class="text-muted">Loading configuration...</p>
</div>
</div>
</div>
</div>

<div class="card mb-3">
<div class="card-header">Backup Configuration &amp; Statistics</div>
<div class="card-body">
<div class="row">
<div class="col-md-8">
<div id="dbBackupConfigInfo">
<p class="text-muted">Loading configuration...</p>
<div class="col-md-4">
<div class="row text-center">
<div class="col-6">
<div class="text-muted small">Total Backups</div>
<div class="fs-4" id="dbBackupTotalCount">-</div>
</div>
</div>
<div class="col-md-4">
<div class="row text-center">
<div class="col-6">
<div class="text-muted small">Total Backups</div>
<div class="fs-4" id="dbBackupTotalCount">-</div>
</div>
<div class="col-6">
<div class="text-muted small">Total Size</div>
<div class="fs-4" id="dbBackupTotalSize">-</div>
</div>
<div class="col-6">
<div class="text-muted small">Total Size</div>
<div class="fs-4" id="dbBackupTotalSize">-</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="card">
<div class="card-header">Available Backups</div>
<div class="card-body">
<div class="table-responsive">
<table id="dbBackupList" class="table table-striped table-sm" style="width: 100%"></table>
</div>
<div class="card">
<div class="card-header">Available Backups</div>
<div class="card-body">
<div class="table-responsive">
<table id="dbBackupList" class="table table-striped table-sm" style="width: 100%"></table>
</div>
</div>
</div>
Expand Down
Loading
Loading