169 lines
7.9 KiB
HTML
169 lines
7.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||
|
|
~ Copyright (c) 2015-2019 Skymind, Inc.
|
||
|
|
~
|
||
|
|
~ This program and the accompanying materials are made available under the
|
||
|
|
~ terms of the Apache License, Version 2.0 which is available at
|
||
|
|
~ https://www.apache.org/licenses/LICENSE-2.0.
|
||
|
|
~
|
||
|
|
~ Unless required by applicable law or agreed to in writing, software
|
||
|
|
~ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||
|
|
~ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||
|
|
~ License for the specific language governing permissions and limitations
|
||
|
|
~ under the License.
|
||
|
|
~
|
||
|
|
~ SPDX-License-Identifier: Apache-2.0
|
||
|
|
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
|
||
|
|
|
||
|
|
<html lang="en" style="height: 100%">
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>SameDiff Graph Visualization</title>
|
||
|
|
<!-- start: Mobile Specific -->
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<!-- end: Mobile Specific -->
|
||
|
|
|
||
|
|
<link id="bootstrap-style" href="/assets/webjars/bootstrap/4.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
|
||
|
|
<link href="/assets/css/samediff/samediff.css" rel="stylesheet">
|
||
|
|
<![endif]-->
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<!-- Start JavaScript-->
|
||
|
|
<script src="/assets/webjars/jquery/2.2.0/jquery.min.js"></script>
|
||
|
|
<script src="/assets/webjars/jquery-ui/1.10.2/ui/minified/jquery-ui.min.js"></script>
|
||
|
|
<script src="/assets/webjars/bootstrap/4.3.1/dist/js/bootstrap.min.js"></script>
|
||
|
|
<script src="/assets/webjars/jquery-cookie/1.4.1-1/jquery.cookie.js"></script>
|
||
|
|
<script src="/assets/webjars/flatbuffers/1.9.0/js/flatbuffers.js"></script>
|
||
|
|
|
||
|
|
<script src="/assets/webjars/cytoscape/3.3.3/dist/cytoscape.min.js"></script>
|
||
|
|
<script src="/assets/webjars/dagre/0.8.4/dist/dagre.min.js"></script>
|
||
|
|
<script src="/assets/webjars/cytoscape-dagre/2.1.0/cytoscape-dagre.js"></script>
|
||
|
|
<script src="/assets/webjars/cytoscape-cose-bilkent/4.0.0/cytoscape-cose-bilkent.js"></script>
|
||
|
|
<script src="/assets/webjars/webcola/3.3.8/WebCola/cola.js"></script>
|
||
|
|
<script src="/assets/webjars/cytoscape-cola/2.3.0/cytoscape-cola.js"></script>
|
||
|
|
<script src="/assets/webjars/cytoscape-euler/1.2.1/cytoscape-euler.js"></script>
|
||
|
|
<script src="/assets/webjars/klayjs/0.4.1/klay.js"></script>
|
||
|
|
<script src="/assets/webjars/cytoscape-klay/3.1.2/cytoscape-klay.js"></script>
|
||
|
|
<script src="/assets/webjars/weaverjs/1.2.0/dist/weaver.js"></script>
|
||
|
|
<script src="/assets/webjars/cytoscape-spread/3.0.0/cytoscape-spread.js"></script>
|
||
|
|
<script src="/assets/webjars/flot/0.8.3/jquery.flot.js"></script>
|
||
|
|
<script src="/assets/webjars/flot/0.8.3/jquery.flot.pie.js"></script>
|
||
|
|
<script src="/assets/webjars/flot/0.8.3/jquery.flot.stack.js"></script>
|
||
|
|
<script src="/assets/webjars/flot/0.8.3/jquery.flot.resize.min.js"></script>
|
||
|
|
<script src="/assets/webjars/flot/0.8.3/jquery.flot.selection.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<script src="/assets/js/samediff/generated/uigraphevents_generated.js"></script>
|
||
|
|
<script src="/assets/js/samediff/generated/uigraphstatic_generated.js"></script>
|
||
|
|
<script src="/assets/js/samediff/generated/array_generated.js"></script>
|
||
|
|
<script src="/assets/js/samediff/generated/utils_generated.js"></script>
|
||
|
|
<script src="/assets/js/samediff/generated/variable_generated.js"></script>
|
||
|
|
|
||
|
|
<script src="/assets/js/samediff/samediff-ui.js"></script>
|
||
|
|
<script src="/assets/js/samediff/samediff-graph.js"></script>
|
||
|
|
<script src="/assets/js/samediff/samediff-plots.js"></script>
|
||
|
|
<script src="/assets/js/samediff/flatbuffers-utils.js"></script>
|
||
|
|
<div class="container-fluid" style="min-height: 100%">
|
||
|
|
<div class="row">
|
||
|
|
<!-- NavBar - Bootstrap classes -->
|
||
|
|
<nav class="navbar navbar-expand navbar-dark bg-dark" style="width: 100pc">
|
||
|
|
<a class="navbar-brand" href="#">SameDiff</a>
|
||
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
|
||
|
|
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
||
|
|
<span class="navbar-toggler-icon"></span>
|
||
|
|
</button>
|
||
|
|
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||
|
|
<div class="navbar-nav">
|
||
|
|
<a id="sdnavgraph" class="nav-item nav-link active" href="#" onclick="samediffSetPage('graph')">
|
||
|
|
Graph</a>
|
||
|
|
<a id="sdnavplots" class="nav-item nav-link" href="#" onclick="samediffSetPage('plots')">
|
||
|
|
Plots</a>
|
||
|
|
<a id="sdnaveval" class="nav-item nav-link" href="#" onclick="samediffSetPage('evaluation')">
|
||
|
|
Evaluation</a>
|
||
|
|
<a id="sdnavperf" class="nav-item nav-link" href="#" onclick="samediffSetPage('performance')">
|
||
|
|
Performance</a>
|
||
|
|
<a class="nav-item nav-link" href="#" onclick="toggleSidebar()">Toggle Sidebar</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row" style="min-height: 100%">
|
||
|
|
<!-- Sidebar -->
|
||
|
|
<div class="col-md-4 col-12"
|
||
|
|
style="min-width: 300px; max-width: 300px; background-color: #e6e6e6; height:100%; min-height:100vh">
|
||
|
|
<div id="sidebartop" class="row p-2">
|
||
|
|
<div style="width:auto">
|
||
|
|
<label class="input-group-btn">
|
||
|
|
<span class="btn btn-secondary btn-sm">
|
||
|
|
Select File<input type="file" id="fileselect" style="display: none;" multiple>
|
||
|
|
</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div id="selectedfile" class="w-100">[No File Loaded]</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="sidebarline"></div>
|
||
|
|
|
||
|
|
<div id="sidebarmid" class="row p-2">
|
||
|
|
<div class="w-100"><b>Selected Node:</b></div>
|
||
|
|
<div id="sidebarmid-content" class="w-100">(None)</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="sidebarline"></div>
|
||
|
|
|
||
|
|
<div id="sidebarmid2" class="row p-2">
|
||
|
|
<div style="width:100%">
|
||
|
|
<b>Find Node:</b><br>
|
||
|
|
</div>
|
||
|
|
<input id="findnodetxt" type="text" oninput="onGraphNodeSearch()">
|
||
|
|
<div id="findnoderesults">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="sidebarline"></div>
|
||
|
|
|
||
|
|
<div id="sidebarbottom" class="row p-2">
|
||
|
|
<br><br>
|
||
|
|
<strong>Graph Layout:</strong>
|
||
|
|
<div class="btn-group btn-group-toggle w-100" data-toggle="buttons" style="height: 40px">
|
||
|
|
<label class="btn btn-secondary active" onclick="setLayout('klay_down')">
|
||
|
|
<input type="radio" name="options" id="option1" autocomplete="off" checked>Down</label>
|
||
|
|
<label class="btn btn-secondary" onclick="setLayout('klay_lr')">
|
||
|
|
<input type="radio" name="options" id="option2" autocomplete="off">Right</label>
|
||
|
|
<label class="btn btn-secondary" onclick="setLayout('dagre')">
|
||
|
|
<input type="radio" name="options" id="option3" autocomplete="off">Alt</label>
|
||
|
|
<label class="btn btn-secondary" onclick="setLayout('cose-bilkent')">
|
||
|
|
<input type="radio" name="options" id="option3" autocomplete="off">Spread</label>
|
||
|
|
</div>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Page Content -->
|
||
|
|
<div id="samediffcontent" class="col-md col-12 main pa-1">
|
||
|
|
<div id="graphdiv" style="height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
display: table"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Execute once on page load -->
|
||
|
|
<script>
|
||
|
|
document.getElementById('fileselect').addEventListener('change', fileSelect, false);
|
||
|
|
$(document).ready(function () {
|
||
|
|
renderSameDiffGraph();
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|