diff --git a/src/pastebin/pastebin.css b/src/pastebin/pastebin.css
index 21598b71..996df78e 100644
--- a/src/pastebin/pastebin.css
+++ b/src/pastebin/pastebin.css
@@ -70,6 +70,7 @@
 }
 
 #visualization-container{
+    height: 100%;
     padding-top: 5px;
 }
 
@@ -275,4 +276,4 @@ ul.nav .active a, ul.nav .active a:focus, ul.nav .active a:hover{
 
 #play-toolbar button{
     padding-top: 3px;
-}
\ No newline at end of file
+}
diff --git a/src/pastebin/pastebin.html b/src/pastebin/pastebin.html
index e3947ef0..35f59ea7 100644
--- a/src/pastebin/pastebin.html
+++ b/src/pastebin/pastebin.html
@@ -66,8 +66,10 @@
             <div id = "visualization-container" class = "tab-pane fade"  role = "tabpanel" aria-labelledby="visualizationTab">
               <trace-player tracePlayer.bind = "traceViewController.tracePlayer"></trace-player>
               <trace-search trace-search.bind = "traceSearch"></trace-search>
+              <div style=" min-height: 100% !important;height: 100% !important;">
               <vis-viewer vis-viewer.bind = "visViewer"></vis-viewer>
             </div>
+            </div>
           </div>
         </div>
 
diff --git a/src/visViewer/vis-viewer.css b/src/visViewer/vis-viewer.css
index 0ed050b7..1a4b1ebc 100644
--- a/src/visViewer/vis-viewer.css
+++ b/src/visViewer/vis-viewer.css
@@ -1,8 +1,20 @@
+vis-viewer{
+  position: relative;
+}
+vis-viewer >.panel{
+  bottom:0;
+  position: absolute;
+  height: 80%;
+  min-width: 100%;
+}
+
 #seePanelBody > div{
     padding-bottom: 4px;
+    bottom: 0;
 }
 
 .vis-container {
+    padding: none;
     padding-top: 4px;
     box-shadow: 1px 1px 1px 1px #eee;
 }
@@ -24,4 +36,4 @@
  }
  .call-graph{
       overflow: visible;
- }
\ No newline at end of file
+ }
diff --git a/src/visViewer/vis-viewer.html b/src/visViewer/vis-viewer.html
index 710b4297..0225cae1 100644
--- a/src/visViewer/vis-viewer.html
+++ b/src/visViewer/vis-viewer.html
@@ -1,7 +1,7 @@
 <template bindable="visViewer">
     <require from = "./vis-viewer.css"></require>
     <require from="visualization/visualization.html"></require>
-    <div class="panel panel-debug">
+    <div class="panel panel-debug" style=" min-height: 100% !important;height: 100% !important;">
         <div class="panel-heading w3-row-padding">
             <div id ="seePanelHeading" class="w3-col panel-heading-title" style="width:115px" data-toggle="collapse" href="#seePanelBody">
                <span class='glyphicon glyphicon-dashboard'></span>&#160;Visualizations
@@ -13,7 +13,7 @@
                 </select>
             </div>
         </div>
-        <div id="seePanelBody" class="panel-body container-fluid collapse in">
+        <div id="seePanelBody" class="panel-body collapse in" style=" min-height: 100% !important;height: 100% !important;">
             <div class="w3-row-padding" if.bind="visViewer.visualizations.length">
                 <div class="vis-container" repeat.for="visualization of visViewer.visualizations">
                     <visualization visualization.bind="visualization"></visualization>
diff --git a/src/visualization/call-graph.js b/src/visualization/call-graph.js
index c06949bb..a270349f 100644
--- a/src/visualization/call-graph.js
+++ b/src/visualization/call-graph.js
@@ -85,7 +85,7 @@ export class CallGraph {
   		};
 
       this.renderFx  =  function renderFx(formattedTrace, divElement, query, queryType, aceUtils, aceMarkerManager) {
-          if (!formattedTrace){
+          if (!formattedTrace ){
               return;
           }
 
@@ -126,36 +126,92 @@ export class CallGraph {
 
           d3.select(divElement).html("");
 
-          let margin = {top: 20, right: 20, bottom: 30, left: 40},
-          width = 400 - margin.left - margin.right,
-          height = 250 - margin.top - margin.bottom;
+          console.log($("#seePanelBody").offset())
+
+
+          let width = $("#right-splitter").width();//margin.left - margin.right;
+          let height;
+          // let height = $("#seePanelBody .vis-container").height();//$(".tab-content").height() ;//- $(#seePanelBody).offset() - $("#console-window").height();
+          //
+          console.log("spb w3")
+          console.log($("#seePanelBody .vis-container").height())
+          //
+          // $("#seePanelBody .vis-container").css("min-height", 420);
+          // $("#seePanelBody .vis-container").css("height", window.innerHeight * 0.5);
+          // $("#seePanelBody.w3-row-padding.vis-container").height(height);
 
           let rectWidth = 100,
               rectHeight = 40;
 
           let tree = d3.tree()
-              .nodeSize([160, 200]);
+              .nodeSize([160, 80]);
 
           let diagonal = self.directionManager[self.currentDirection].linkRenderer;
-
           let nodeRenderer = self.directionManager[self.currentDirection].nodeRenderer;
 
           d3.select(divElement).select("svg").remove();
 
+          let prevX;
+          let prevY;
+
+          // $("#seePanelBody.w3-row-padding.vis-container").css("padding","none");//,"box-shadow":"none"});
+          // $(".vis-container").css("box-shadow","none");//,"box-shadow":"none"});
+
           let svg = d3.select(divElement).append("svg")
               .attr("width", width)
               .attr("height", height)
               .attr("position","relative")
               .call(d3.zoom()
-            .on("zoom", function () {
+              .scaleExtent([0.3,2])
+              // .translateExtent([[0,0],activeDimensions])
+            .on("zoom", function() {
               svg.attr("transform", function() {
-                  let devent = d3.event.transform;
+                let devent = d3.event.transform;
+
+                if(isNaN(devent.x)) {
+                  devent.x = prevX;
+                }
+                else {
+                  prevX = devent.x;
+                }
+
+                if(isNaN(devent.y)) {
+                  devent.y = prevY;
+                }
+                else {
+                  prevY = devent.y;
+                }
+
+                console.log("y")
+                console.log(devent.y)
+
+                console.log(prevY)
+
+                // console.log(devent)
                 return "translate(" + devent.x + ", " + devent.y + ") scale(" + devent.k +")";
               });
             }))
               .append("g");
 
-          svg.attr("transform","translate(100,0)");
+          console.log("sdfsdf")
+
+          // let zoom = d3.zoom()
+          //   .scaleExtent([0.3,2])
+          //   .on("zoom", function() {
+          //     let e = d3.event.transform;
+          //     zoom.translate([tx, ty]);
+          //     svg.attr("transform", "translate(" + e.x + ", " + e.y + ") scale(" + e.k +")");
+          //   })
+
+          $(window).resize(function() {
+            width = $("#right-splitter").width();
+            // $("#seePanelBody .vis-container").css("height", window.innerHeight * 0.5);
+            // height = $("#console-window").offset().top - $("#seePanelBody").offset().top + ($("#traceSearchPanelBody").offset().top- $("trace-search .panel-heading").offset().top);//- $("#seePanelBody").offset().top - 52;
+            // console.log(());
+            d3.select(divElement).select("svg").attr("width", width);
+            d3.select(divElement).select("svg").attr("height", height);
+            trans();
+          });
 
           let root = d3.hierarchy(formattedTrace),
               nodes = root.descendants(),
@@ -268,7 +324,7 @@ export class CallGraph {
 
               filteredNodes.append("rect")
                   .attr("width", rectWidth)
-                  .attr("height", rectHeight)
+                  .attr("height", rectHeight-20)
                   .attr("transform", "translate(" + (-1 * rectWidth/2) + ",0)")
                   .style("fill","#fff")
                   .style("stroke","steelblue")
@@ -294,13 +350,32 @@ export class CallGraph {
                     .attr("transform", "translate(0," + rectHeight/2 + ")");
 
               filteredNodes.append("text")
-                  .attr("dy", 22.5)
+                  .attr("dy", 14)
                   .attr("text-anchor", "middle")
                   .text(function(d) { return d.data.name; });
+
+
+              function trans() {
+                svg.selectAll(".node").selectAll("rect").attr("transform","translate(" + (width/2 - rectWidth/2) + ",5)");
+                svg.selectAll(".node").selectAll("text").attr("transform","translate(" + width/2 + ",5)");
+                svg.selectAll(".link").attr("transform","translate(" + width/2 + ",5)");
+              }
+
+              function activeDimensions() {
+                var largestX = 0;
+                var largestY = 0;
+                node.forEach(function(d, i){
+                  if(d.x > largestX) largestX = d.x;
+                  if(d.y > largestY) largestY = d.y;
+                })
+                console.log([largestX,largestY])
+                return [largestX, largestY];
+              }
+              trans();
               }
 
               // update();
-              d3.select(self.frameElement).style("height", 200 + "px");
+              // d3.select(self.frameElement).style("height", 100 + "px");
     }
 
 
diff --git a/src/visualization/visualization.html b/src/visualization/visualization.html
index 67498e3b..b4496c10 100644
--- a/src/visualization/visualization.html
+++ b/src/visualization/visualization.html
@@ -1,6 +1,6 @@
 <template bindable="visualization">
   <div id="${visualization.id}" class = "${visualization.styleClass}">
-    <div class="visualization-title">${visualization.title}</div>
+    <!-- <div class="visualization-title">${visualization.title}</div> -->
     <div if.bind="visualization.hasError" class="alert alert-danger" role="alert">${visualization.errorMessage}</div>
     <div if.bind="visualization.type === 'DataTable'">
       <label for = "${visualization.buttonId}">
diff --git a/src/visualization/visualization.js b/src/visualization/visualization.js
index 34cb29a1..30168502 100644
--- a/src/visualization/visualization.js
+++ b/src/visualization/visualization.js
@@ -47,6 +47,7 @@ export class Visualization {
     });
 
     ea.subscribe('searchBoxChanged', payload => {
+      // console.log($(`#${this.contentId}`).offset())
       this.query = payload.searchTermText;
       this.queryType = payload.searchFilterId;
       this.renderVisualization();