From e2b77d366ba948ea924aa735e0448fdaf75c21cd Mon Sep 17 00:00:00 2001
From: Alex Yatskov <alex@foosoft.net>
Date: Tue, 16 Sep 2014 11:17:33 +0900
Subject: [PATCH] Use static width for graph columns

---
 client/application.js |  2 +-
 client/grapher.js     | 22 ++++++++++------------
 client/index.html     |  2 +-
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/client/application.js b/client/application.js
index cb8f764..8b40bc8 100644
--- a/client/application.js
+++ b/client/application.js
@@ -42,7 +42,7 @@
             ctx.hintSteps    = params.hintSteps;
             ctx.maxResults   = params.maxResults;
 
-            ctx.grapher = new Grapher('grapher', ctx.searchRange, true, true);
+            ctx.grapher = new Grapher('grapher', ctx.searchRange, 150, true, true);
             ctx.grapher.setColumns(results.columns);
             ctx.grapher.setValueChangedListener(onAdjust);
 
diff --git a/client/grapher.js b/client/grapher.js
index 76c3a51..753fd2f 100644
--- a/client/grapher.js
+++ b/client/grapher.js
@@ -381,13 +381,10 @@ function Column(canvas, name, params, scale, range, bounds) {
 //  Grapher
 //
 
-function Grapher(canvas, range, useLocalScale, useRelativeScale) {
+function Grapher(canvas, range, columnWidth, useLocalScale, useRelativeScale) {
     this.setColumns = function(columns) {
         this.clearColumns();
 
-        var graphBounds = this.getGraphBounds(this.getCanvasBounds());
-        var columnCount = _.keys(columns).length;
-
         var scale = 0;
         if (!useLocalScale) {
             var hintData = {};
@@ -398,14 +395,16 @@ function Grapher(canvas, range, useLocalScale, useRelativeScale) {
             scale = this.getGlobalScale(hintData);
         }
 
-        var index   = 0;
-        var that    = this;
+        var graphBounds = this.getGraphBounds(this.getCanvasBounds());
+
+        var index = 0;
+        var that  = this;
         _.each(columns, function(columnValue, columnName) {
             if (useLocalScale) {
                 scale = that.getLocalScale(columnValue.hints);
             }
 
-            var columnBounds = that.getColumnBounds(graphBounds, index, columnCount);
+            var columnBounds = that.getColumnBounds(graphBounds, index);
             that.columns.push(new Column(that.canvas, columnName, columnValue, scale, that.range, columnBounds));
             that.indexMap[columnName] = index++;
         });
@@ -517,13 +516,11 @@ function Grapher(canvas, range, useLocalScale, useRelativeScale) {
     }
 
     this.getColumnBounds = function(bounds, index, count) {
-        var secWidth    = bounds.width / count;
-        var columnWidth = secWidth - this.padding * 2;
-
+        var width = this.columnWidth + this.padding * 2;
         return new goog.math.Rect(
-            bounds.left + secWidth * index + this.padding,
+            bounds.left + width * index + this.padding,
             bounds.top,
-            columnWidth,
+            this.columnWidth,
             bounds.height
         );
     }
@@ -573,6 +570,7 @@ function Grapher(canvas, range, useLocalScale, useRelativeScale) {
 
     this.useLocalScale    = useLocalScale;
     this.useRelativeScale = useRelativeScale;
+    this.columnWidth      = columnWidth;
     this.canvas           = new fabric.StaticCanvas(canvas);
     this.range            = new goog.math.Range(range.min, range.max);
     this.padding          = 10;
diff --git a/client/index.html b/client/index.html
index ff7d873..8be3f00 100644
--- a/client/index.html
+++ b/client/index.html
@@ -58,7 +58,7 @@
                     <div class="panel panel-default">
                         <div class="panel-heading"><big>Semantic tweaks to <span id="query" class="text-primary"></span></big></div>
                         <div style="padding: 10px;" class="unselectable">
-                            <canvas id="grapher" width="500" height="550"></canvas><br>
+                            <canvas id="grapher" width="800" height="550"></canvas><br>
                             <label class="checkbox-inline">
                                 <input type="checkbox" id="useLocalScale" name="useLocalScale" checked="checked"> Use local scale
                             </label>