-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
206 lines (197 loc) · 9.81 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Max Flow Visualization</title>
<link href="vendor/css/bootstrap.min.css" rel="stylesheet" />
<link href="vendor/css/style.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/cy.css" />
<link rel="stylesheet" href="vendor/cytoscape.js-panzoom-master/cytoscape.js-panzoom.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<!-- <img src="./tutorial 1.gif"> -->
<body class="mini-navbar">
<div id="wrapper">
<div id="page-wrapper" class="gray-bg">
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<span class="description">iFlow: Interactive Max-Flow Min-Cut Algorithms Visualizer</span>
<span class="description" id="state">State: Graph Creation</span>
</div>
<div class="navbar-header" style="float: right; margin-right: 30px;">
<a href="https://github.com/Maxflow-Visualization/Maxflow_Visualization"><span
class="description">Github</span></a>
</div>
</nav>
</div>
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-lg-2">
<div class="ibox float-e-margins" style="padding: 0 !important">
<div class="ibox-content">
<div id="helper-text" style="z-index: 9999;">
<b id="instructions-state">Graph Creation:</b>
<ul id="instructions" style="padding-left: 22px;">
<li>In this step, you will construct a graph to run maxflow on.</li>
<li>Double click on the white space to add a node.</li><li>Click an existing node and then press the keyboard's <code>Backspace</code> or <code>Delete</code> (<code>fn</code> + <code>Delete</code> on Mac) to delete that node.</li>
<li>Right click a node to set it as the source/sink.</li>
<li>Hover on/click an existing node n1 to generate a dot on top. Click and drag the dot to another node n2 to generate an edge from n1 to n2.</li>
<li>Click an existing edge and then press the keyboard's <code>Backspace</code> or <code>Delete</code> (<code>fn</code> + <code>Delete</code> on Mac) to delete that edge.</li>
<li>Right click an edge to change its capacity.</li>
<li>Click <code>Clear</code> at the bottom to clear the entire graph. Click <code>Example</code> to bring up the example graph.</li>
<li>You can download the current graph for future convenient importing by clicking <code>Download Edgelist</code>. To import a graph (supports edgelist and csv format), click <code>Choose File</code>.</li>
<li>Once you are ready, click <code>Start Practice</code>!</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-10" id="graph-block">
<div class="ibox float-e-margins" style="padding: 0 !important">
<div class="ibox-content" style="padding: 0 !important">
<div id="cy">
</div>
</div>
</div>
</div>
<div class="col-lg-2" id="finalization-block" style="display: none;">
<div class="ibox float-e-margins" style="padding: 0 !important">
<div class="ibox-content">
<h2>Selected Path(s)</h2>
<div id="history"></div>
<button class="btn btn-primary btn-sm ending-actions" id="confirm-max-flow" type="submit"
style="display: none">
Confirm Max Flow Found!
</button>
<button class="btn btn-primary btn-sm ending-actions" id="validate-min-cut" type="submit"
style="display: none">
Validate Seleted Min Cut
</button>
<button class="btn btn-primary btn-sm ending-actions" id="find-min-cut" type="submit"
style="display: none">
Find Min Cut
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<form method="get" class="form-horizontal" onkeydown="return event.key !== 'Enter';">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<div class="row" id="all-buttons">
<div class="col-md-1">
<div class="form-group has-success">
<label class="col-sm-1 control-label" id="source">Source=</label>
</div>
</div>
<div class="col-md-1">
<div class="form-group has-success">
<label class="col-sm-1 control-label" id="sink">Sink=</label>
</div>
</div>
<div class="col-md-2">
<button class="btn btn-info btn-sm" id="start-practice" type="submit">
Start Practice
</button>
</div>
<div class="col-md-6 buttons" id="graph-creation">
<button class="btn btn-info btn-sm modification" id="example-graph" type="submit">
Example
</button>
<button class="btn btn-danger btn-sm modification" id="clear" type="submit">
Clear
</button>
<label for="fileInput" class="btn btn-sm btn-info">Choose File</label>
<input type="file" id="fileInput" style="display: none;" />
<button id="downloadButton" class="btn btn-sm btn-info">
<i class="fa fa-download"></i> Download
</button>
<select id="layoutChoices" class="btn">
<option value="layered">layered layout</option>
<option value="spring">spring model layout</option>
</select>
</div>
<div class="col-md-4 btn-group buttons" id="select-path">
<button class="btn btn-info btn-sm" id="shortest-path" type="submit" style="display: none;">
Find Shortest Path
</button>
<button class="btn btn-info btn-sm" id="random-path" type="submit" style="display: none;">
Find Random Path
</button>
<button class="btn btn-info btn-sm" id="widest-path" type="submit" style="display: none;">
Find Widest Path
</button>
</div>
<div class="col-md-2 btn-group buttons" id="choose-flow">
<button class="btn btn-info btn-sm" style="display: none;" id="bottleneck" type="submit">
Find Bottleneck Edge
</button>
</div>
<div class="col-md-2 btn-group buttons" id="update-residual-graph">
<button class="btn btn-info btn-sm" style="display: none;" id="auto-complete" type="submit">
Auto Complete
</button>
<button class="btn btn-info btn-sm" style="display: none;" id="undo-updates" type="submit">
Undo All Updates
</button>
</div>
<div class="col-md-2">
<button class="btn btn-primary btn-sm proceed-step" style="display: none;" type="submit">
Confirm Path
</button>
</div>
<div class="col-md-1">
<button class="btn btn-primary btn-sm" style="display: none;" id="applied-capacity" type="submit">
Show Original Capacities and Current Flow
</button>
</div>
</div>
</div>
<div class="col-sm-1"></div>
<div id="floatingText">
<div class="col-md-6">
<input type="number" min="0" oninput="removeLeadingZeros(this)" id="mouse-label"
class="form-control input-sm text-center change-capacity" />
</div>
<div class="col-md-3">
<button type="button" id="mouse-update" class="btn btn-primary btn-sm change-capacity">
Update
</button>
</div>
</div>
<div id="mark-as-source-or-sink" style="display: none; width: 350px; margin: auto;">
<div class="col-md-3">
<button id="mark-as-source" class="btn btn-primary btn-sm">Mark as the Source</button>
</div>
<div class="col-md-2"></div>
<div class="col-md-3">
<button id="mark-as-sink" class="btn btn-primary btn-sm">Mark as the Sink</button>
</div>
<div class="col-md-1"></div>
<div class="col-md-1">
<button id="delete-node" class="btn btn-danger btn-sm">Delete</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="vendor/js/jquery.min.js"></script>
<script src="vendor/js/cytoscape.min.js"></script>
<script src="vendor/js/cytoscape-edgehandles.js"></script>
<script src="vendor/cytoscape.js-panzoom-master/cytoscape-panzoom.js"></script>
<script src="vendor/js/lodash.js"></script>
<script src="js/cytoscape-settings/cytoscape-settings.js"></script>
<script src="js/app.js"></script>
<script src="js/interactivity/interactivity-helper.js"></script>
<script src="js/interactivity/interactivity.js"></script>
<script src="js/model/max-flow.js"></script>
<script src="js/model/priority-queue.js"></script>
<script src="js/utils/file-layout-utils.js"></script>
<script src="js/utils/utils.js"></script>
</body>
</html>