atuin
Version:
An RDF and SPARQL editor with graph visualization
20 lines (18 loc) • 9.44 kB
HTML
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Atuin - SemWeb Syntax Editor</title><link rel="stylesheet" href="css/main.css"><link rel="stylesheet" href="css/editor.css"><link rel="stylesheet" href="css/graph.css"><link rel="stylesheet" href="css/settings.css"><style>.file-controls {
display: flex;
align-items: center;
margin-right: 10px;
}
.file-input-container {
position: relative;
display: inline-block;
}
.file-input-container input[type="file"] {
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}</style><script defer="defer" src="bundle.js"></script></head><body><header><div class="logo"><img src="img/turtle.svg" alt="Turtle Logo"/><h1>Atuin</h1></div><div id="message-queue"></div></header><div class="main-container"><div class="toolbar"><div class="file-controls"><div class="file-input-container"><input type="file" id="load-file" accept=".ttl,.turtle,.rq,.sparql" style="display: none;"> <button id="load-file-btn" class="btn" title="Load file"><span class="icon">📂</span> Load File</button></div><div class="file-save-container"><button id="save-file-btn" class="btn" title="Save file"><span class="icon">💾</span> Save File</button></div></div><div class="view-controls"><button id="split-button">Split View</button><div class="toggle-group"><input type="checkbox" id="hide-nodes" class="toggle" checked="checked"> <label for="hide-nodes">Hide defaults</label></div><div class="toggle-group"><input type="checkbox" id="freeze" class="toggle"> <label for="freeze">Freeze</label></div><div class="cluster-controls"><button id="cluster" class="icon-button">+</button> <button id="decluster" class="icon-button">-</button> <label>Clustering</label></div></div><div id="syntax-check"><p id="syntax-check-failed" style="display: none"><span class="status-icon error"></span> <span class="status">Syntax Error</span></p><p id="syntax-check-working" style="display: none"><span class="status-icon working"></span> <span class="status">Syntax checker working.</span></p><p id="syntax-check-pending"><span class="status-icon pending"></span> <span class="status">Syntax check pending...</span></p><p id="syntax-check-off" style="display: none"><span class="status-icon off"></span> <span class="status">Syntax checking disabled. Click to enable.</span></p><p id="syntax-check-passed" style="display: none"><span class="status-icon passed"></span> <span class="status">Syntax OK</span></p></div></div><div class="split-container"><div id="editor-container" class="split-pane"><div class="tab-bar" style="display: flex; border-bottom: 1px solid #ccc; margin-bottom: 4px;"><button id="tab-turtle" class="tab active" style="flex:1; padding: 6px; border:none; background:#f7f7f7; cursor:pointer; border-bottom:2px solid #0074D9;">Turtle</button> <button id="tab-sparql" class="tab" style="flex:1; padding: 6px; border:none; background:#f7f7f7; cursor:pointer;">SPARQL</button></div><div id="turtle-editor-pane"><textarea id="input-contents" placeholder="Enter Turtle RDF content here"></textarea></div><div id="sparql-editor-pane" style="display:none;"><div id="sparql-endpoint-selector" class="endpoint-selector"><label for="sparql-endpoint-quick-select">Endpoint:</label> <select id="sparql-endpoint-quick-select" class="endpoint-select"><option value="">No endpoints configured</option></select> <button id="sparql-endpoint-add" class="btn btn-sm" title="Add new endpoint">+</button> <button id="sparql-endpoint-manage" class="btn btn-sm btn-default" title="Manage endpoints">⚙</button></div><textarea id="sparql-contents" placeholder="Enter SPARQL query here"></textarea><div id="sparql-toolbar" class="editor-toolbar"><button id="run-sparql-query" class="btn btn-primary">Run</button> <button id="store-sparql-query" class="btn btn-default">Store</button> <button id="clips-sparql-query" class="btn btn-default">Clips</button></div></div></div><div id="divider" class="split-divider"></div><div id="right-panel" class="split-pane"><div class="tab-bar" style="display: flex; border-bottom: 1px solid #ccc; margin-bottom: 4px;"><button id="tab-view" class="tab active" style="flex:1; padding: 6px; border:none; background:#f7f7f7; cursor:pointer; border-bottom:2px solid #0074D9;">View</button> <button id="tab-settings" class="tab" style="flex:1; padding: 6px; border:none; background:#f7f7f7; cursor:pointer;">Settings</button></div><div id="view-pane"><div id="graph-container"></div><div id="sparql-results-container" style="display:none;"><h3 style="padding: 0 10px;">SPARQL Results</h3><div id="sparql-results-table-wrapper" style="flex-grow: 1; overflow: auto; padding: 0 10px 10px 10px;"></div></div></div><div id="settings-pane" style="display:none; padding: 10px;"><h3>Settings</h3><div class="settings-group"><h4>SPARQL Endpoints</h4><div class="setting-item"><label for="sparql-endpoint-url">Endpoint URL:</label> <input type="url" id="sparql-endpoint-url" placeholder="Enter SPARQL endpoint URL" style="flex-grow: 1; margin-right: 5px;"> <button id="add-sparql-endpoint" class="btn">Add</button></div><div class="setting-item"><label for="sparql-endpoint-select">Active Endpoint:</label> <select id="sparql-endpoint-select" style="flex-grow: 1; margin-right: 5px;"></select> <button id="remove-sparql-endpoint" class="btn btn-danger">Remove</button></div></div><div class="settings-group"><h4>Visualization</h4><div class="setting-item"><label for="node-size">Node Size:</label> <input type="range" id="node-size" min="10" max="50" value="20" step="5"> <span id="node-size-value">20</span></div><div class="setting-item"><label for="edge-width">Edge Width:</label> <input type="range" id="edge-width" min="1" max="10" value="2"></div><div class="setting-item"><label for="physics-enabled">Physics:</label> <input type="checkbox" id="physics-enabled" checked="checked"></div></div><div class="settings-group"><h4>Editor</h4><div class="setting-item"><label for="font-size">Font Size:</label> <select id="font-size"><option value="12">12px</option><option value="14" selected="selected">14px</option><option value="16">16px</option><option value="18">18px</option></select></div><div class="setting-item"><label for="auto-complete">Auto-Complete:</label> <input type="checkbox" id="auto-complete" checked="checked"></div></div></div></div></div><div id="about"><div class="open-source-info"><div class="left-info"><strong><a href="about.html">About</a></strong> <a href="https://opensource.org/licenses/MIT" target="_blank" title="MIT License"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="MIT License" class="license-badge"> </a><a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" title="Creative Commons Attribution"><img src="https://img.shields.io/badge/Content-CC%20BY-lightgrey.svg" alt="CC BY" class="license-badge"> </a><a href="https://github.com/danja/atuin" target="_blank" title="GitHub Repository"><img src="https://img.shields.io/badge/GitHub-Repository-black.svg?logo=github" alt="GitHub" class="github-badge"></a></div><div class="right-info"><span><em>a <strong><a href="https://hyperdata.it" target="_blank">hyperdata.it</a></strong> project</em></span> <span><em>© <strong><a href="https://danny.ayers.name">Danny Ayers</a></strong> 2025</em></span></div></div></div></div><div id="network-popUp" class="popup" style="display: none"><div class="popup-content"><h3 id="operation">Edit</h3><div class="form-group"><label for="label">Label</label> <input id="label"></div><div class="form-actions"><button id="saveButton" class="btn btn-primary">Save</button> <button id="cancelButton" class="btn">Cancel</button></div></div></div><div id="dialog" class="dialog" style="display: none"><div class="dialog-content"><p>Are you sure you want to delete this item?</p><div class="dialog-actions"><button id="dialog-yes" class="btn btn-danger">YES</button> <button id="dialog-no" class="btn">NO</button> <button id="dialog-cancel" class="btn btn-primary">Cancel</button></div></div></div><div id="sparql-store-dialog" class="dialog" style="display: none"><div class="dialog-content"><h3>Store SPARQL Query</h3><div class="form-group"><label for="sparql-clip-name">Name:</label> <input id="sparql-clip-name" placeholder="Enter a name for this query"></div><div class="dialog-actions"><button id="sparql-store-save" class="btn btn-primary">Save</button> <button id="sparql-store-cancel" class="btn btn-default">Cancel</button></div></div></div><div id="sparql-clips-dialog" class="dialog" style="display: none"><div class="dialog-content"><h3>SPARQL Clips</h3><div id="sparql-clips-list"></div><div class="dialog-actions"><button id="sparql-clips-close" class="btn btn-default">Close</button></div></div></div><div id="sparql-endpoint-add-dialog" class="dialog" style="display: none"><div class="dialog-content"><h3>Add SPARQL Endpoint</h3><div class="form-group"><label for="sparql-endpoint-quick-url">Endpoint URL:</label> <input type="url" id="sparql-endpoint-quick-url" placeholder="Enter SPARQL endpoint URL"></div><div class="dialog-actions"><button id="sparql-endpoint-quick-save" class="btn btn-primary">Add</button> <button id="sparql-endpoint-quick-cancel" class="btn btn-default">Cancel</button></div></div></div></body></html>