christoph/statespaces
1
Fork 0
Code Actions Packages Activity

Implement Dummy Graph-View

Browse Source
This commit is contained in:
Christoph Urlacher
2025-08-29 20:17:20 +02:00
parent 1d2233ece4
commit 0767a8be17
7 changed files with 1640 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
index.html Normal file
View File

@ -0,0 +1,59 @@
<!doctype html>
<html>
<!-- TODO: We want a toolbar at the top, the model visualization on the left -->
<!-- and the graph on the right. -->
<!-- The toolbar should have a model selector, an initial state editor, -->
<!-- an initial state selector (from presets) and a generate button. -->
<body style="margin: 5px">
<div
id="toolbar"
style="
width: fit-content;
height: 26px;
margin-top: 0px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
display: flex;
gap: 5px;
"
>
<button id="select_model_button">Select Model</button>
<button id="select_state_button">Select State</button>
<button id="generate_graph_button">Generate Graph</button>
<button id="reset_view_button">Reset View</button>
<button id="clear_graph_button">Clear Graph</button>
</div>
<div id="columns" style="display: flex">
<div
id="model"
style="
/* Body m-left / 2 + graph m-left / 2 + body m-right / 2 + borders x4 / 2 */
/* 2.5px + 2.5px + 2.5px + 2px */
width: calc(50vw - 9.5px);
/* Bar height + body m-top + bar m-bot + body m-bot + border x2 */
/* 26px + 5px + 5px + 5px + 2px */
height: calc(100vh - 43px);
border-style: solid;
border-color: black;
border-width: 1px;
"
></div>
<div
id="graph"
style="
width: calc(50vw - 7.5px);
height: calc(100vh - 43px);
margin-left: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
"
></div>
</div>
<!-- Load the script last, such that the dom is populated beforehand -->
<script type="module" src="/src/main.js"></script>
</body>
</html>