From 97d13f5e41716347e1f1ff5eb34b255b4ce5258e Mon Sep 17 00:00:00 2001
From: Alex Yatskov <alex@foosoft.net>
Date: Fri, 31 Oct 2014 11:51:11 +0900
Subject: [PATCH] More cleanup

---
 client/html/index.html        | 69 +++++++++++++++++------------------
 client/scripts/application.js | 16 +++++---
 client/scripts/grapher.js     | 10 ++---
 3 files changed, 49 insertions(+), 46 deletions(-)

diff --git a/client/html/index.html b/client/html/index.html
index 3dc7d5f..913b238 100644
--- a/client/html/index.html
+++ b/client/html/index.html
@@ -14,39 +14,39 @@
             </div>
 
             <!-- query input -->
-            <!-- <div id="input" class="form-horizontal"> -->
-            <!--     <div class="form-group"> -->
-            <!--         <label for="keywordsToSearch" class="col-md-2 control-label">Keywords</label> -->
-            <!--         <div class="col-md-10"> -->
-            <!--             <select id="keywordsToSearch" class="form-control" multiple="multiple" data-max-options="4" data-live-search="data-live-search"></select> -->
-            <!--         </div> -->
-            <!--     </div> -->
-            <!--     <div class="form-group"> -->
-            <!--         <label for="minScore" class="col-md-2 control-label">Minimum score</label> -->
-            <!--         <div class="col-md-10"> -->
-            <!--             <input class="form-control" type="number" step="any" value="0.25" id="minScore"> -->
-            <!--         </div> -->
-            <!--     </div> -->
-            <!--     <div class="form-group"> -->
-            <!--         <label for="hintSteps" class="col-md-2 control-label">Hint steps</label> -->
-            <!--         <div class="col-md-10"> -->
-            <!--             <input class="form-control" type="number" value="20" id="hintSteps"> -->
-            <!--         </div> -->
-            <!--     </div> -->
-            <!--     <div class="form-group"> -->
-            <!--         <label for="maxResults" class="col-md-2 control-label">Max results</label> -->
-            <!--         <div class="col-md-10"> -->
-            <!--             <input class="form-control" type="number" value="100" id="maxResults"> -->
-            <!--         </div> -->
-            <!--     </div> -->
-            <!--     <div class="form-group"> -->
-            <!--         <div class="col-md-offset-2 col-md-10"> -->
-            <!--             <button class="btn btn-primary" id="searchKeywords" type="button" disabled="disabled"> -->
-            <!--                 <span class="glyphicon glyphicon-search"></span> Search -->
-            <!--             </button> -->
-            <!--         </div> -->
-            <!--     </div> -->
-            <!-- </div> -->
+            <div id="input" class="form-horizontal">
+                <div class="form-group">
+                    <label for="keywordsToSearch" class="col-md-2 control-label">Keywords</label>
+                    <div class="col-md-10">
+                        <select id="keywordsToSearch" class="form-control" multiple="multiple" data-max-options="4" data-live-search="data-live-search"></select>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="minScore" class="col-md-2 control-label">Minimum score</label>
+                    <div class="col-md-10">
+                        <input class="form-control" type="number" step="any" value="0.25" id="minScore">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="hintSteps" class="col-md-2 control-label">Hint steps</label>
+                    <div class="col-md-10">
+                        <input class="form-control" type="number" value="20" id="hintSteps">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="maxResults" class="col-md-2 control-label">Max results</label>
+                    <div class="col-md-10">
+                        <input class="form-control" type="number" value="100" id="maxResults">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <div class="col-md-offset-2 col-md-10">
+                        <button class="btn btn-primary" id="searchKeywords" type="button" disabled="disabled">
+                            <span class="glyphicon glyphicon-search"></span> Search
+                        </button>
+                    </div>
+                </div>
+            </div>
 
             <!-- options dialog -->
             <div class="modal fade" id="optionsDialog" tabindex="-1">
@@ -130,9 +130,6 @@
                 </symbol>
 
                 <use xlink:href="#graph" x="0" y="0"/>
-                <use xlink:href="#graph" x="110" y="0"/>
-                <use xlink:href="#graph" x="220" y="0"/>
-                <use xlink:href="#graph" x="330" y="0"/>
             </svg>
 
             <!-- query output -->
diff --git a/client/scripts/application.js b/client/scripts/application.js
index b4e4697..7aff541 100644
--- a/client/scripts/application.js
+++ b/client/scripts/application.js
@@ -48,7 +48,7 @@
     }
 
     function onSearch() {
-        var keywords     = $('#keywordsToSearch').val() || [];
+        var keywords = $('#keywordsToSearch').val() || [];
         var searchParams = {};
 
         for (var i = 0, count = keywords.length; i < count; ++i) {
@@ -70,7 +70,13 @@
             ctx.hintSteps    = query.hintSteps;
             ctx.maxResults   = query.maxResults;
 
-            ctx.grapher = new grapher.Grapher('grapher', ctx.searchRange, 150, true, true);
+            ctx.grapher = new grapher.Grapher({
+                canvas:           null,
+                columnRange:      ctx.searchRange,
+                columnWidth:      150,
+                useLocalScale:    true,
+                useRelativeScale: true
+            });
             ctx.grapher.setColumns(results.columns);
             ctx.grapher.setValueChangedListener(onAdjust);
 
@@ -86,9 +92,9 @@
                 var useRelativeScale = $('#useRelativeScale').is(':checked');
                 ctx.grapher.setUseRelativeScale(useRelativeScale);
             });
-            $('#input').fadeOut(function() {
-                $('#output').fadeIn();
-            });
+            // $('#input').fadeOut(function() {
+            //     $('#output').fadeIn();
+            // });
         });
     }
 
diff --git a/client/scripts/grapher.js b/client/scripts/grapher.js
index 5d209d6..abaafa1 100644
--- a/client/scripts/grapher.js
+++ b/client/scripts/grapher.js
@@ -238,7 +238,7 @@
             for (var name in columns) {
                 var data = columns[name];
                 if (useLocalScale) {
-                    scale = this.computeLocalScale(column.hints);
+                    scale = this.computeLocalScale(data.hints);
                 }
 
                 var column = this.columns[name];
@@ -246,13 +246,13 @@
                     column.update(data, scale);
                 }
                 else {
-                    this.columns.push(new Column({
+                    this.columns[name] = new Column({
                         canvas: this.canvas,
                         data:   column,
                         name:   name,
                         range:  this.range,
                         scale:  scale,
-                    }));
+                    });
                 }
             }
         };
@@ -300,9 +300,9 @@
 
         this.canvas           = params.canvas;
         this.columnData       = null;
-        this.columnPadding    = 10;
+        this.columnPadding    = params.columnPadding || 10;
         this.columnRange      = new Range(-1.0, 1.0);
-        this.columnWidth      = 100;
+        this.columnWidth      = params.columnWidth || 100;
         this.columns          = {};
         this.useLocalScale    = params.useLocalScale || true;
         this.useRelativeScale = params.useRelativeScale || true;