graph/web/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Simple Viewer</title>
  <link rel="icon" href="data:,">
  <style>
    html, body { height:100%; margin:0; font-family:sans-serif; }
    .viewer { height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
    .source { padding:8px; border-bottom:1px solid #ccc; }
    #program { width:min(600px,80vw); vertical-align:middle; }
    #status { margin-top:4px; }
    #graph { min-height:0; overflow:hidden; position:relative; background:#fafbfc; }
    #elk { width:100%; height:100%; }
    #graph svg { display:block; }
    .tools { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:8px; font-size:12px; }
    .hint { color:#616c78; }
    .ctrl { color:#b63838; } .mem { color:#2867b2; } .data { color:#536477; }
    .edge { fill:none; stroke-width:1.5; }
    .edge.CTRL { stroke-width:2; }
    .edge.ASSOC { stroke-dasharray:4 4; }
    .edge.PARSER { stroke-dasharray:5 4; }
    .parser rect { fill:#f6f0ff; stroke:#7956a5; stroke-width:1.5; stroke-dasharray:5 4; }
    .edge.selected { stroke-width:3.5; }
    .node { cursor:pointer; }
    .box { stroke:#758191; stroke-width:1; }
    .node.held .box { stroke-dasharray:5 3; }
    .node.near .box { stroke:#c18221; stroke-width:2; }
    .node.focus .box { stroke:#9c4900; stroke-width:3; }
    .node.selected .box { stroke:#1569b9; stroke-width:3; }
    .node.folded .box { stroke-width:4; }
    .region-box { stroke:#9da9b8; stroke-width:1.5; }
    .fold-btn { cursor:pointer; }
    .fold-btn rect { fill:white; stroke:#596674; }
    .fold-btn text { font-size:14px; fill:#152330; }
    .fold-btn:focus rect { stroke:#1569b9; stroke-width:2; }
    .head { font-size:10px; fill:#596674; }
    .label { font-size:12px; fill:#152330; font-weight:600; }
    .type { font-size:11px; fill:#455768; }
    .port { stroke:#536477; stroke-width:1; }
    .row { stroke:#b6afcf; stroke-width:1; }
    .bind { font-size:12px; fill:#152330; }
    .slot { font-size:10px; fill:#364352; paint-order:stroke; stroke:#fafbfc; stroke-width:3; }
    #detail { position:absolute; top:8px; right:8px; margin:0; padding:12px; max-width:320px;
      max-height:45%; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere;
      background:#fffffff2; border:1px solid #bac5d0; border-radius:4px; font-size:12px; }
    .controls { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; padding:6px; }
    .button { color:white; background:black; font-size:20px; min-width:30px; }
    .button:disabled { background:grey; }
    .count { font-size:20px; min-width:35px; text-align:center; }
    #N { width:6ch; }
    #scrub { width:clamp(120px,35vw,600px); }
  </style>
  <script src="vendor/d3.v7.min.js"></script>
  <script src="vendor/elk-api.js"></script>
  <script src="groups.js"></script>
  <script src="layout.js"></script>
  <script src="render.js"></script>
</head>
<body>
  <div class="viewer">
    <div class="source">
      <label for="program">Simple program:</label><br>
      <textarea id="program" rows="3" autofocus></textarea>
      <button id="compile" type="button" disabled>Compile</button>
      <div id="status" role="status">Connecting to compiler...</div>
      <div class="tools">
        <button id="fit" type="button" disabled>Fit</button>
        <button id="save" type="button" disabled>Save SVG</button>
        <button id="unfold" type="button" disabled>Unfold all</button>
        <label><input id="assocs" type="checkbox"> Associations</label>
        <label><input id="near" type="checkbox" checked> Peep neighborhood</label>
        <span class="ctrl">Control</span><span class="data">Data</span><span class="mem">Memory</span>
        <span class="hint">Scroll to zoom · drag to pan · click a node for details</span>
      </div>
      <div id="event" class="hint" role="status"></div>
    </div>
    <div id="graph"><div id="elk"></div><pre id="detail" hidden></pre></div>
    <div class="controls">
      <button id="doFirst" type="button" onclick="doFirst()" class="button" aria-label="First frame" title="First frame">|&#11164;</button>
      <button id="doPrev" type="button" onclick="doPrev()" class="button" aria-label="Previous frame">&#11164;</button>
      <label for="N">Frame</label>
      <input id="N" class="count" type="number" min="1" max="1" step="1" value="0" disabled title="Enter a frame number">
      <span>/</span>
      <span id="len" class="count">0</span>
      <button id="doNext" type="button" onclick="doNext()" class="button" aria-label="Next frame">&#11166;</button>
      <button id="doLast" type="button" onclick="doLast()" class="button" aria-label="Last frame" title="Last available frame">&#11166;|</button>
      <input id="scrub" type="range" min="1" max="1" step="1" value="1" disabled aria-label="Frame slider">
      <button id="doExit" type="button" onclick="doExit()" class="button">Exit</button>
    </div>
  </div>
  <script src="viewer.js"></script>
</body>
</html>