forked from Remyjck/modular_decomposition
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (102 loc) · 5.59 KB
/
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Graph Modular Decomposition</title>
<script src="js/dependencies/cytoscape.js"></script>
<script src="https://unpkg.com/layout-base/layout-base.js"></script>
<script src="https://unpkg.com/cose-base/cose-base.js"></script>
<script src="js/dependencies/cytoscape-cose-bilkent.js"></script>
<link rel="stylesheet" href="css/pico.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Modal -->
<dialog id="modal">
<article>
<a href="#close" aria-label="Close" class="close" onClick="toggleModal()"></a>
<h3 id="modal-title"></h3>
<p id="modal-text"></p>
<footer id="modal-footer">
<a href="#ok" role="button" onClick="toggleModal()">Ok</a>
</footer>
</article>
</dialog>
<script src="js/dependencies/modal.js"></script>
<section class="container">
<hgroup style="text-align: center; margin-top: 20px;">
<h1>Modular Decomposition of Graphs</h1>
<h2>A tool for the manipulation and visualisation of graphs and their structures</h2>
</hgroup>
</section>
<section>
<div id="layout">
<a href="html/logic.html" class="styled-link-og">Go to Logic On Graphs</a>
<div class="col">
<div class="grid">
<button type="button" onclick="clearGraph(cy1)">Clear Graph</button>
<button type="button" onclick="cleanLayout(cy1)">Clean Layout</button>
<button type="button" onclick="cy1.center(); cy1.fit(10)">Center Graph</button>
</div>
<div id="cy1" class="cy"></div>
<div class="grid">
<button type="button" id="download" onclick="exportGraph()">Download Graph</button>
<button type="button" onclick="document.getElementById('upload').click()">Import Graph</button>
<input id="upload" type="file" style="display: none;" />
<button type="button" onclick="undo(cy1)">Undo</button>
</div>
<article style="padding-bottom: 20px; text-align: left; width: 35vw;">
<details>
<summary>Graph Manipulation Instructions</summary>
<ul>
<li>To add nodes: move mouse pointer to where you want to add a node and press a letter or
number on the keyboard</li>
<li>To add edges: click on an unselected node to connect it to a selected nodes</li>
<li>To select a node or an edge: click or shift click to select several</li>
<li>To delete nodes: hit backspace to delete all selected nodes and corresponding edges</li>
<li>To negate nodes: right click selected or single node</li>
</ul>
</details>
</article>
</div>
<div class="col" style="width: 15vw; margin-top: 30vh;">
<button type="button" id="ditoggle" onclick="toggleDirected()">Make graph directed</button>
<button type="button" id="decompose" onclick="decompose(); max_id2 = getMaxId(cy2)">Get Modular
Decomposition</button>
<button type="button" id="recompose" onclick="getGraph()" style="margin-top: 20px;">Get Graph</button>
</div>
<div class="col">
<div class="grid">
<button type="button" onclick="clearGraph(cy2)">Clear Tree</button>
<button type="button" onclick="cy2.center(); cy2.fit(10)">Center Tree</button>
</div>
<div id="cy2" class="cy"></div>
<div class="grid">
<button type="button" id="download2" onclick="exportTree()">Download Tree</button>
<button type="button" onclick="undo(cy2)">Undo</button>
</div>
<article style="padding-bottom: 20px; text-align: left; width: 35vw;">
<details>
<summary>Tree Manipulation Instructions</summary>
<ul>
<li>To add nodes: move mouse pointer to where you want to add a node and press a letter or
number on the keyboard</li>
<li>To add edges: click on an unselected node to connect it to all selected nodes</li>
<li>To select a node or an edge: click or shift click to select several</li>
<li>To delete nodes: hit backspace to delete all selected nodes and corresponding edges</li>
<li>To negate nodes: right click selected or single node</li>
<li>To create a par, press "&". To create a tensor, press "*". To create a before, press
">". To create an arbitrary graph, press "^".</li>
<li>To add a node to a before or an arbitrary graph, either create a node while the
before/graph's background is selected or try to create an edge from the before/graph to
the node.</li>
</ul>
</details>
</article>
</div>
</div>
</section>
<script src="js/code.js"></script>
<script src="_build/default/src/main.bc.js"></script>
</body>
</html>