Add padding between main, in-extract and out-extract graphs.

Change: 117444098
trangtv57 · Mar 18, 2016 · 307f58c · 307f58c
1 parent ff37e66
commit 307f58c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/tensorflow/tensorboard/components/tf-graph-common/lib/layout.ts b/tensorflow/tensorboard/components/tf-graph-common/lib/layout.ts
@@ -87,7 +87,7 @@ export const PARAMS = {
        */
       labelHeight: 20,
       /** X-space between each extracted node and the core graph. */
-      extractXOffset: 50,
+      extractXOffset: 15,
       /** Y-space between each extracted node. */
       extractYOffset: 20
     },
@@ -486,9 +486,24 @@ function layoutMetanode(renderNodeInfo: render.RenderGroupNodeInfo): void {
       return height + yOffset + child.height;
     }, 0);
 
+  // Compute the total padding between the core graph, in-extract and
+  // out-extract boxes.
+  let numParts = 0;
+  if (renderNodeInfo.isolatedInExtract.length > 0) {
+    numParts++;
+  }
+  if (renderNodeInfo.isolatedOutExtract.length > 0) {
+    numParts++;
+  }
+  if (renderNodeInfo.coreGraph.nodeCount() > 0) {
+    numParts++;
+  }
+  let offset = PARAMS.subscene.meta.extractXOffset;
+  let padding = numParts <= 1 ? 0 : (numParts  <= 2 ? offset : 2 * offset);
+
   // Add the in-extract and out-extract width to the core box width.
   renderNodeInfo.coreBox.width += renderNodeInfo.inExtractBox.width +
-      renderNodeInfo.outExtractBox.width;
+      renderNodeInfo.outExtractBox.width + padding;
   renderNodeInfo.coreBox.height =
     params.labelHeight +
     Math.max(

diff --git a/tensorflow/tensorboard/components/tf-graph-common/lib/render.ts b/tensorflow/tensorboard/components/tf-graph-common/lib/render.ts
@@ -964,8 +964,6 @@ export class RenderNodeInfo {
 
   /** Label vertical offset from the center of node shape */
   labelOffset: number;
-  /** X-space between each extracted node and the core graph. */
-  extractXOffset: number;
   /** Rectangle radius (for making rounded rectangle) */
   radius: number;
 
@@ -1027,7 +1025,6 @@ export class RenderNodeInfo {
 
     // Params for node box.
     this.labelOffset = 0;
-    this.extractXOffset = 0;
     this.radius = 0;
 
     // Params for expanded node

diff --git a/tensorflow/tensorboard/components/tf-graph-common/lib/scene/scene.ts b/tensorflow/tensorboard/components/tf-graph-common/lib/scene/scene.ts
@@ -321,15 +321,18 @@ function position(sceneGroup, renderNode: render.RenderGroupNodeInfo) {
 
   // in-extract
   let hasInExtract = renderNode.isolatedInExtract.length > 0;
+  let hasOutExtract = renderNode.isolatedOutExtract.length > 0;
+
   if (hasInExtract) {
+    let offset = layout.PARAMS.subscene.meta.extractXOffset;
     let inExtractX = renderNode.coreBox.width -
-      renderNode.inExtractBox.width / 2 - renderNode.outExtractBox.width;
+      renderNode.inExtractBox.width / 2 - renderNode.outExtractBox.width -
+          (hasOutExtract ? offset : 0);
     translate(selectChild(sceneGroup, "g", Class.Scene.INEXTRACT),
                     inExtractX, yTranslate);
   }
 
   // out-extract
-  let hasOutExtract = renderNode.isolatedOutExtract.length > 0;
   if (hasOutExtract) {
     let outExtractX = renderNode.coreBox.width -
       renderNode.outExtractBox.width / 2;