planVisualizer.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
 Copyright (C) 2010-2014 by the Apache Flink project (http://flink.incubator.apache.org)

 Licensed 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>
  <title>Flink Plan Visualizer</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="../resources/web-docs/css/nephelefrontend.css" />
  <link rel="stylesheet" type="text/css" href="../resources/web-docs/css/pactgraphs.css" />
  <link rel="stylesheet" type="text/css" href="../resources/web-docs/css/graph.css" />
  <link rel="stylesheet" type="text/css" href="../resources/web-docs/css/overlay.css" />
  <link rel="stylesheet" type="text/css" href="../resources/web-docs/css/bootstrap.css" /> <!-- Changed stuff -->
  <script type="text/javascript" src="../resources/web-docs/js/jquery-2.1.0.js"></script>
  <script type="text/javascript" src="../resources/web-docs/js/graphCreator.js"></script>
  <script type="text/javascript" src="../resources/web-docs/js/d3.js" charset="utf-8"></script>
  <script type="text/javascript" src="../resources/web-docs/js/dagre-d3.js"></script>
  <script type="text/javascript" src="../resources/web-docs/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="../resources/web-docs/js/jquery.tools.min.js"></script>

<body>
  <div class="mainHeading">
    <h1 style="margin-top:0"><img src="../resources/web-docs/img/FlinkLogo.png" width="326" height="100" alt="Flink Logo" align="middle"/>Flink Plan Visualizer</h1>
  </div>
    <div>
      <div id="mainCanvas" class="canvas boxed">
        <div><h3>Paste the plan data here</h3></div>
        <div align="center"><textarea id="plantext" style="width: 600px; height: 400px;"></textarea></div>
        <div align="center"; style="float: bottom;"> 
          <input id="draw_button" type="button" value="Draw"/> 
        </div>
      </div>
    </div>
    <div class="simple_overlay" id="propertyO">
	  <div id="propertyCanvas" class="propertyCanvas">
	  </div>
	</div>
    <script type="text/javascript">

      $(document).ready(function() {
		
	  	//change height of mainCanvas to maximum
	  	$("#mainCanvas").css("height", $(document).height() - 15 - 105);

        $('#draw_button').click(function () {
          var planData = $("textarea#plantext").val();
          $("#mainCanvas").empty();
          var svgElement = "<div id=\"attach\"><svg id=\"svg-main\" width=500 height=500><g transform=\"translate(20, 20)\"/></svg></div>";
          $("#mainCanvas").append(svgElement);
          var asObject = eval('(' + planData + ')');
          drawGraph(asObject, "#svg-main");
        });

      });
    </script>
</body>
</html>