mirror of
https://github.com/penpot/penpot.git
synced 2026-08-15 17:29:00 +00:00
294 lines
8.6 KiB
Cheetah
294 lines
8.6 KiB
Cheetah
{% extends "app/templates/base.tmpl" %}
|
|
|
|
{% block title %}
|
|
Graph Console
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<nav>
|
|
<div class="title">
|
|
<h1>GRAPH CONSOLE (VERSION: {{version}})</h1>
|
|
</div>
|
|
</nav>
|
|
<main class="dashboard">
|
|
<section class="widget">
|
|
<p><a href="/dbg">← Back to debug</a></p>
|
|
|
|
<fieldset>
|
|
<legend>Load graph in memory</legend>
|
|
<desc>
|
|
Projects the Penpot file into an in-memory Ladybug database for this
|
|
admin session. Loading a new file replaces the previous one.
|
|
</desc>
|
|
<form method="post" action="/dbg/actions/graph-load">
|
|
<div class="row">
|
|
<input type="text" style="width:420px" name="file-id"
|
|
placeholder="file-id"
|
|
value="{% if session %}{{session.file-id}}{% endif %}" />
|
|
</div>
|
|
<div class="row">
|
|
<input type="submit" value="Load" />
|
|
</div>
|
|
</form>
|
|
{% if session %}
|
|
<form method="post" action="/dbg/actions/graph-unload">
|
|
<div class="row">
|
|
<input type="submit" value="Unload" />
|
|
</div>
|
|
</form>
|
|
{% endif %}
|
|
</fieldset>
|
|
|
|
{% if session %}
|
|
<fieldset>
|
|
<legend>Loaded session</legend>
|
|
<desc>
|
|
<p>
|
|
File: <b>{{session.name}}</b> ({{session.file-id}})<br />
|
|
Revision: <b id="graph-session-revn">{{session.revn}}</b><br />
|
|
Schema: <b>{{session.schema-version}}</b><br />
|
|
Loaded at: <b>{{session.loaded-at}}</b>
|
|
</p>
|
|
<p id="graph-sync-status">
|
|
Sync: <b id="graph-ws-status">connecting…</b>
|
|
<span id="graph-stale-badge" style="display:none; margin-left: 1em; color: #b45309;">
|
|
graph stale (file revn <b id="graph-current-revn"></b>)
|
|
</span>
|
|
</p>
|
|
<form id="graph-reload-form" method="post" action="/dbg/actions/graph-reload" style="display:none;">
|
|
<input type="submit" value="Reload graph" />
|
|
</form>
|
|
{% if session.projection.stats %}
|
|
<p>
|
|
Projection:
|
|
documents={{session.projection.stats.documents}},
|
|
pages={{session.projection.stats.pages}},
|
|
shapes={{session.projection.stats.shapes}}
|
|
</p>
|
|
{% endif %}
|
|
</desc>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>File changes (live)</legend>
|
|
<desc>
|
|
Subscribes to the same WebSocket channel the workspace uses
|
|
(<code>:subscribe-file</code> → <code>:file-change</code> via msgbus).
|
|
Edits from other tabs or users appear here; the in-memory graph stays at
|
|
the loaded revision until you reload it.
|
|
</desc>
|
|
<div id="graph-changelog-empty" style="color: #666;">Waiting for changes…</div>
|
|
<table id="graph-changelog" border="1" cellpadding="4" cellspacing="0"
|
|
style="border-collapse: collapse; width: 100%; display: none;">
|
|
<thead>
|
|
<tr>
|
|
<th>revn</th>
|
|
<th>changes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="graph-changelog-body"></tbody>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Cypher query</legend>
|
|
<form method="post" action="/dbg/actions/graph-query">
|
|
<div class="row">
|
|
<textarea name="query" rows="8" style="width:100%; font-family: monospace;">{{query}}</textarea>
|
|
</div>
|
|
<div class="row">
|
|
<input type="submit" value="Run query" />
|
|
</div>
|
|
</form>
|
|
</fieldset>
|
|
{% endif %}
|
|
|
|
{% if error %}
|
|
<fieldset>
|
|
<legend>Error</legend>
|
|
<pre>{{error}}</pre>
|
|
</fieldset>
|
|
{% endif %}
|
|
|
|
{% if query-result %}
|
|
<fieldset>
|
|
<legend>Results ({{query-result.row-count}} rows{% if query-result.truncated? %}, truncated{% endif %})</legend>
|
|
<table border="1" cellpadding="4" cellspacing="0" style="border-collapse: collapse; width: 100%;">
|
|
<thead>
|
|
<tr>
|
|
{% for column in query-result.columns %}
|
|
<th>{{column}}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in query-result.rows %}
|
|
<tr>
|
|
{% for cell in row %}
|
|
<td><code>{{cell}}</code></td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</fieldset>
|
|
{% endif %}
|
|
</section>
|
|
</main>
|
|
|
|
{% if session %}
|
|
<script>
|
|
(function () {
|
|
const fileId = "{{session.file-id}}";
|
|
const sessionRevn = {{session.revn}};
|
|
const sessionId = crypto.randomUUID();
|
|
const wsScheme = location.protocol === "https:" ? "wss:" : "ws:";
|
|
const wsUrl = wsScheme + "//" + location.host
|
|
+ "/ws/notifications?session-id=" + sessionId;
|
|
|
|
const wsStatus = document.getElementById("graph-ws-status");
|
|
const staleBadge = document.getElementById("graph-stale-badge");
|
|
const currentRevnEl = document.getElementById("graph-current-revn");
|
|
const reloadForm = document.getElementById("graph-reload-form");
|
|
const changelog = document.getElementById("graph-changelog");
|
|
const changelogBody = document.getElementById("graph-changelog-body");
|
|
const changelogEmpty = document.getElementById("graph-changelog-empty");
|
|
|
|
let latestRevn = sessionRevn;
|
|
let ws = null;
|
|
|
|
function encodeTransitUuid(uuid) {
|
|
return "~u" + uuid;
|
|
}
|
|
|
|
function encodeSubscribe(fileId) {
|
|
return JSON.stringify({
|
|
"~:type": "~:subscribe-file",
|
|
"~:file-id": encodeTransitUuid(fileId)
|
|
});
|
|
}
|
|
|
|
function encodeUnsubscribe(fileId) {
|
|
return JSON.stringify({
|
|
"~:type": "~:unsubscribe-file",
|
|
"~:file-id": encodeTransitUuid(fileId)
|
|
});
|
|
}
|
|
|
|
function parseTransitValue(value) {
|
|
if (typeof value === "string") {
|
|
if (value.startsWith("~:")) return value.slice(2);
|
|
if (value.startsWith("~u")) return value.slice(2);
|
|
}
|
|
if (Array.isArray(value)) return value.map(parseTransitValue);
|
|
if (value && typeof value === "object") return parseTransitMap(value);
|
|
return value;
|
|
}
|
|
|
|
function parseTransitMap(obj) {
|
|
const out = {};
|
|
for (const [key, value] of Object.entries(obj)) {
|
|
const name = key.startsWith("~:") ? key.slice(2) : key;
|
|
out[name] = parseTransitValue(value);
|
|
}
|
|
return out;
|
|
}
|
|
|
|
function summarizeChange(change) {
|
|
const parts = [change.type];
|
|
if (change.id) parts.push("id=" + change.id);
|
|
if (change.obj && change.obj.type) parts.push("shape=" + change.obj.type);
|
|
if (change.operations && change.operations.length) {
|
|
const attrs = change.operations
|
|
.map(function (op) { return op.attr; })
|
|
.filter(Boolean);
|
|
if (attrs.length) parts.push("attrs=" + attrs.join(","));
|
|
}
|
|
return parts.join(" ");
|
|
}
|
|
|
|
function summarizeChanges(changes) {
|
|
if (!changes || !changes.length) return "(empty)";
|
|
return changes.map(summarizeChange).join("; ");
|
|
}
|
|
|
|
function updateStaleUi() {
|
|
const stale = latestRevn > sessionRevn;
|
|
staleBadge.style.display = stale ? "inline" : "none";
|
|
reloadForm.style.display = stale ? "block" : "none";
|
|
currentRevnEl.textContent = String(latestRevn);
|
|
}
|
|
|
|
function appendChange(revn, summary) {
|
|
changelogEmpty.style.display = "none";
|
|
changelog.style.display = "table";
|
|
|
|
const row = document.createElement("tr");
|
|
const revnCell = document.createElement("td");
|
|
const changesCell = document.createElement("td");
|
|
|
|
revnCell.textContent = String(revn);
|
|
changesCell.textContent = summary;
|
|
row.appendChild(revnCell);
|
|
row.appendChild(changesCell);
|
|
changelogBody.appendChild(row);
|
|
row.scrollIntoView({ block: "nearest" });
|
|
}
|
|
|
|
function handleMessage(raw) {
|
|
let msg;
|
|
try {
|
|
msg = parseTransitMap(JSON.parse(raw));
|
|
} catch (_err) {
|
|
return;
|
|
}
|
|
|
|
if (msg.type !== "file-change" || msg["file-id"] !== fileId) return;
|
|
|
|
latestRevn = Math.max(latestRevn, msg.revn || latestRevn);
|
|
updateStaleUi();
|
|
appendChange(msg.revn, summarizeChanges(msg.changes));
|
|
}
|
|
|
|
function subscribe() {
|
|
if (ws && ws.readyState === WebSocket.OPEN) {
|
|
ws.send(encodeSubscribe(fileId));
|
|
}
|
|
}
|
|
|
|
function connect() {
|
|
ws = new WebSocket(wsUrl);
|
|
wsStatus.textContent = "connecting…";
|
|
|
|
ws.addEventListener("open", function () {
|
|
wsStatus.textContent = "subscribed";
|
|
subscribe();
|
|
});
|
|
|
|
ws.addEventListener("message", function (event) {
|
|
handleMessage(event.data);
|
|
});
|
|
|
|
ws.addEventListener("close", function () {
|
|
wsStatus.textContent = "disconnected";
|
|
});
|
|
|
|
ws.addEventListener("error", function () {
|
|
wsStatus.textContent = "error";
|
|
});
|
|
}
|
|
|
|
updateStaleUi();
|
|
connect();
|
|
|
|
window.addEventListener("beforeunload", function () {
|
|
if (ws && ws.readyState === WebSocket.OPEN) {
|
|
ws.send(encodeUnsubscribe(fileId));
|
|
ws.close();
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %}
|