| <!DOCTYPE html> |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://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. |
| --> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Graft</title> |
| <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> |
| <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> |
| <link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" /> |
| <link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/default.min.css"> |
| <link rel="stylesheet" href="css/valpanel.css"> |
| <link rel="stylesheet" href="css/slider/slider.css"> |
| <link rel="stylesheet" href="css/app.css"> |
| <!--TODO(vikesh) : * Load all JS files asychronously in a single script - requirejs. |
| * Download external JS files during mvn compile. |
| * Remove http from src to automatically load based on the protocol used to launch this file. |
| --> |
| <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> |
| <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> |
| <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> |
| <script src="http://d3js.org/d3.v3.min.js"></script> |
| <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> |
| <script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script> |
| <script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script> |
| <script src="http://cdn.jsdelivr.net/noty/2.2.2/packaged/jquery.noty.packaged.min.js" /> |
| <script src="js/slider/bootstrap-slider.js"></script> |
| <script src="js/slider/bootstrap-slider.js"></script> |
| <script src="js/utils.js"></script> |
| <script src="js/utils.sampleGraphs.js"></script> |
| <script src="js/editor.core.js"></script> |
| <script src="js/editor.utils.js"></script> |
| <script src="js/valpanel.js"></script> |
| <script src="js/debugger.js"></script> |
| |
| <script type="text/javascript"> |
| var giraphDebugger; |
| var currentSuperstep = -1; |
| |
| $(document).ready(function(){ |
| var currentCodeUrl = null; |
| // Initialize highlighting. |
| hljs.initHighlightingOnLoad(); |
| |
| // Performs syntax highlighting for dynamically loaded content in pre code. |
| function highlightAll() { |
| $('pre code').each(function(i, e) {hljs.highlightBlock(e)}); |
| } |
| |
| /* |
| * Sets the currentCode string and the code-container div. |
| * @param {object} data - data.code is the code content and data.url is the |
| * downloadable link of the code (text/plain with content-disposition). |
| * NOTE: All code setting should be performed through this method to ensure that |
| * currentCodeUrl is set properly. |
| */ |
| function setCode(data) { |
| currentCodeUrl = data ? data.url : null; |
| var code = data ? data.code : null; |
| $('#code-container').html(code); |
| $('#btn-code-download').prop('disabled', code === null); |
| highlightAll(); |
| } |
| |
| function handleTestGraphSuccess(response) { |
| setCode(response); |
| noty({text : 'Fetched the test graph successfully.', type : 'success', timeout: 1000}); |
| } |
| |
| function handleTestGraphFail(responseText) { |
| setCode(); |
| noty({text : 'Failed to fetch the test graph. Message from server : ' + responseText, type : 'error'}); |
| } |
| |
| $("#node-attr-id").keyup(function(event){ |
| if(event.keyCode===13){ |
| $("#btn-node-attr-save").click(); |
| } |
| }); |
| |
| $("#btn-adj-list-get").click(function() { |
| var adjList = Utils.getAdjListStr(editor.getAdjList()); |
| Utils.downloadFile(adjList, 'adjList.txt'); |
| }); |
| |
| // Generate Test Graph - Fetch the test graph and display the code. |
| $('#btn-gen-test-graph').click(function() { |
| Utils.fetchTestGraph(giraphDebugger.debuggerServerRoot, Utils.getAdjListStrForTestGraph(giraphDebugger.editor.getAdjList())) |
| .done(function(response) { |
| handleTestGraphSuccess(response); |
| }) |
| .fail(function(responseText) { |
| handleTestGraphFail(responseText); |
| }); |
| }); |
| |
| giraphDebugger = new GiraphDebugger({ |
| debuggerContainer : '#debugger-container', |
| nodeAttrContainer : '#node-attr-container', |
| superstepControlsContainer : '#controls-container', |
| }); |
| |
| // Attach events to catpure scenario - vertex. |
| giraphDebugger.onCaptureVertex(function(response) { |
| setCode(response); |
| noty({text : 'Fetched the vertex scenario successfully.', type : 'success', timeout: 1000}); |
| }, |
| function(response) { |
| setCode(); |
| noty({text : 'Failed to fetch the vertex scenario. Message from server : ' + response, type : 'error'}); |
| }); |
| |
| // Attach events to catpure scenario - master. |
| giraphDebugger.onCaptureMaster(function(response) { |
| setCode(response); |
| noty({text : 'Fetched the master scenario successfully.', type : 'success', timeout: 1000}); |
| }, |
| function(response) { |
| setCode(); |
| noty({text : 'Failed to fetch the master scenario. Message from server : ' + response, type : 'error'}); |
| }); |
| |
| // Attach events to generate test graph. |
| giraphDebugger.onGenerateTestGraph(handleTestGraphSuccess, handleTestGraphFail); |
| |
| var editor = giraphDebugger.editor; |
| // Undirected behaviour. |
| $(".graph-type").change(function(event) { |
| editor.undirected = event.target.value === "undirected" ? true : false; |
| editor.restartGraph(); |
| }); |
| |
| // Btn attr-view |
| $("#btn-attr-view").click(function() { |
| $("#attr-view-content").empty(); |
| $("#attr-view-content").append("<tr><th>Node ID</th><th>Attributes</th></tr><tr>"); |
| |
| // Attribute view |
| for (var i = 0; i < editor.nodes.length; i++) { |
| $("#attr-view-content").append("<tr></tr>"); |
| } |
| |
| var rows = d3.select("#attr-view-content").selectAll("tr") |
| .filter(function(d,i) { return i!=0; }) |
| .data(editor.nodes); |
| |
| rows.append("td").text(function(d){ return d.id; }); |
| rows.append("td").append("textarea") |
| .attr("class", "form-control") |
| .attr("rows","1") |
| .text(function(d){ return d.attrs.join(); }); |
| |
| // show the dialog |
| $("#attr-view").dialog({ |
| modal:true, |
| title:"Node Attributes View", |
| closeText:"close", |
| maxHeight:600, |
| closeOnEscape:true, |
| hide : {effect : "fade", duration:100} |
| }); |
| |
| $(".ui-widget-overlay").click(function(){ $("#attr-view").dialog("close"); }); |
| }); |
| |
| $("#btn-attr-view-save").unbind("click"); |
| $("#btn-attr-view-save").click(function(){ |
| var rows = $("#attr-view-content textarea"); |
| |
| for(var i=0;i<rows.length;i++) { |
| if (rows[i]!="") { |
| editor.nodes[i].attrs = rows[i].value.split(","); |
| } |
| } |
| editor.restartGraph(); |
| $("#attr-view").dialog("close"); |
| }); |
| |
| $("#btn-attr-view-cancel").unbind("click"); |
| $("#btn-attr-view-cancel").click(function() { |
| $("#attr-view").dialog("close"); |
| }); |
| |
| // Slider for linkDistance |
| $('#slider-link-distance').slider({ |
| min : editor.linkDistance, |
| value : editor.linkDistance, |
| max : 500 |
| }) |
| .on('slideStop', function(ev) { |
| // resize the linkDistance of editor |
| editor.linkDistance = ev.value; |
| editor.restartGraph(); |
| }); |
| |
| // Code select handler. |
| $('#btn-code-select').click(function(event) { |
| selectText('code-container'); |
| }); |
| |
| // Code download handler. |
| $('#btn-code-download').click(function(event) { |
| location.href = currentCodeUrl; |
| }); |
| }); |
| </script> |
| </head> |
| |
| <body> |
| <div id="attr-view" style="display:none"> |
| <div id="attr-view-container"> |
| <table> |
| <tbody id="attr-view-content"> |
| </tbody> |
| </table> |
| </div> |
| <form role="form"> |
| <div class="form-group"> |
| <button type="button" class="btn btn-primary btn-sm editable-submit" id="btn-attr-view-save"><i class="glyphicon glyphicon-ok"></i></button> |
| <button type="button" class="btn btn-default btn-sm editable-cancel" id="btn-attr-view-cancel"><i class="glyphicon glyphicon-remove"></i></button> |
| </div> |
| </form> |
| </div> |
| |
| <div class="container bs-docs-container"> |
| <h1>Graft <small>GUI</small></h1> |
| </div> |
| |
| <div id="debugger-container"> |
| </div> |
| |
| <!--Container begins--> |
| <div class="container bs-docs-container"> |
| <div class="row"> <!--Row1 begins--> |
| <!--Column for left side controls--> |
| <div class="col-md-4"> |
| <!-- This is a row for the directed/undirected controls--> |
| <div class="row"> |
| <!--Internal col begins--> |
| <div class="col-md-12"> |
| <!--Form begins--> |
| <form role="form" class="form-inline editor-controls"> |
| <div class="form-group"> |
| <label> |
| <input type="radio" name="options" id="options_directed" class="graph-type form-control" value="directed" checked /> Directed |
| </label> |
| </div> |
| <div class="form-group"> |
| <label> |
| <input type="radio" name="options" id="options_undirected" class="graph-type form-control" value="undirected" /> Undirected |
| </label> |
| </div> |
| <!--<button type="button" class="btn btn-primary btn-danger form-control btn-sm" id="btn-attr-view">Attribute view</button>--> |
| </form> <!--Form ends--> |
| </div><!--Internal column ends--> |
| </div><!--Directed/Undirected Row ends--> |
| <!-- This is a row for the download buttons--> |
| <div class="row"> |
| <!--Internal column begins--> |
| <div class="col-md-12"> |
| <button type="button" class="btn btn-primary" id="btn-adj-list-get">Download Adjacency List</button> |
| <button type="button" class="btn btn-danger" id="btn-gen-test-graph">Generate Test Graph</button> |
| </div><!--Internal column ends--> |
| </div> |
| </div> |
| <div class="col-md-8"> |
| <!--Debugger Superstep controls container begin--> |
| <div id="controls-container"> |
| </div> |
| <!--Superstep controls end--> |
| </div> |
| </div> <!--Row1 ends--> |
| |
| <!-- Row2 begins--> |
| <div class="row" style="margin-top:20px;"> |
| <div class="col-md-6"> |
| <!-- Slider for linkDistance--> |
| <label>Link Distance : </label> <div class="slider" id="slider-link-distance"></div> |
| </div> |
| </div> <!--Row2 ends--> |
| |
| <hr /> |
| <div style="margin-top:20px;"> |
| <div id="code-controls"> |
| <h3>Test Code</h3> |
| <button type="button" class="btn btn-primary btn-sm" id="btn-code-select">Select All</button> |
| <button type="button" class="btn btn-danger btn-sm" id="btn-code-download" disabled>Download</button> |
| </div> |
| <pre> |
| <code id="code-container"></code> |
| </pre> |
| </div> |
| |
| <!-- Instructions --> |
| <div id="instructions"> |
| <hr style="border-top:1px solid black;" /> |
| <p class="lead"> |
| <mark>Click</mark> in the open space to <strong><mark>add a node</mark></strong>, drag from one node to another to <strong>add an edge</strong>. <br> |
| <mark>Shift-drag</mark> a node to <strong><mark>move</mark></strong> the graph layout. <br> |
| <mark>Click</mark> a node or an edge to <strong><mark>select</mark></strong> it.<br> |
| <mark>Double-click</mark> a node to open the <strong><mark>node editor</mark></strong>.<br> |
| <mark>Click</mark> on the Attributes View to open an editable list of <strong><mark>node attributes</mark></strong>.<br> |
| <mark>Shift-Click</mark> an edge to edit <strong>edge value</strong>. |
| </p> |
| <p class="lead"> |
| When a node is selected: <strong>R</strong> toggles reflexivity, <strong>Delete</strong> removes the node. <br> |
| When an edge is selected: <strong>L</strong>(eft), <strong>R</strong>(ight), <strong>B</strong>(oth) change direction, <strong>Delete</strong> removes the edge.</p> |
| </div> <!-- Instructions end--> |
| </div><!--Container ends--> |
| |
| <!--Footer--> |
| <div id="footer"> |
| <div class="container"> |
| <p class="muted credit"> |
| Based on <a href="http://bl.ocks.org/rkirsling/5001347" target="_blank">Directed Graph Editor</a> by rkirsling. |
| <span style="float:right">Code on <a href="https://github.com/vikeshkhanna/graph-editor" target="_blank">GitHub</a></span> |
| </p> |
| </div> |
| </div><!--Footer--> |
| </body> |
| </html> |
