| <!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. |
| --> |
| |
| <meta charset="utf-8"> |
| <title>SAMZA Visualizer</title> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> |
| |
| <script src="js/d3.v3.min.js" charset="utf-8"></script> |
| <script type="text/javascript" src="js/dagre-d3.min.js"></script> |
| <script type="text/javascript" src="js/planToDagre.js"></script> |
| <script type="text/javascript" src="plan.json"></script> |
| <script type="text/javascript" src="../plan/plan.json"></script> |
| |
| <h1>SAMZA Visualizer</h1> |
| |
| <style id="css"> |
| body { |
| font: 300 14px 'Helvetica Neue', Helvetica; |
| } |
| |
| svg { |
| margin-top: 30px; |
| } |
| |
| .node rect { |
| stroke: #999; |
| fill: #E8E8EE; |
| stroke-width: 1.5px; |
| } |
| |
| .node ellipse { |
| stroke: #999; |
| fill: #fff; |
| stroke-width: 1.5px; |
| } |
| |
| .edgePath path { |
| stroke: #333; |
| stroke-width: 1.5px; |
| } |
| |
| g.source > ellipse { |
| fill: #BDEDFF; |
| } |
| |
| g.sink > ellipse { |
| fill: #BDEDFF; |
| } |
| |
| g.intermediate > ellipse { |
| fill: #C3FDB8; |
| } |
| |
| .topbar { |
| text-align: center; |
| border-bottom: solid; |
| border-bottom-color: #cdcfd2; |
| border-bottom-width: 1px; |
| } |
| |
| .detailBox{ |
| margin-top: -10px; |
| } |
| </style> |
| |
| <section> |
| <p id="summary"/> |
| </section> |
| |
| <svg id="svg-canvas" width=1920 height=1200><g/></svg> |
| |
| <script id="js"> |
| var data = JSON.parse(plan); |
| var g = planToDagre(data); |
| |
| var summary = "A visualization of application <b>" + data.applicationName + "-" + data.applicationId + "</b>"; |
| summary += ", which consists of " + data.jobs.length + " job(s), "; |
| summary += Object.keys(data.sourceStreams).length + " input stream(s), and "; |
| summary += Object.keys(data.sinkStreams).length + " output stream(s)."; |
| document.getElementById("summary").innerHTML = summary; |
| |
| // Set up an SVG group so that we can translate the final graph. |
| var svg = d3.select("svg"), |
| inner = svg.select("g"); |
| |
| // Set up zoom support |
| var zoom = d3.behavior.zoom().on("zoom", function() { |
| inner.attr("transform", "translate(" + d3.event.translate + ")" + |
| "scale(" + d3.event.scale + ")"); |
| }); |
| svg.call(zoom); |
| |
| // Create the renderer |
| var render = new dagreD3.render(); |
| |
| // Run the renderer. This is what draws the final graph. |
| render(inner, g); |
| |
| var initialScale = 0.75; |
| zoom.scale(initialScale).event(svg); |
| svg.attr('height', g.graph().height * initialScale + 100); |
| </script> |
