Make edge hist bin ct. configurable for user #232

Other changes in this commit:

-Changed up the JS to not enable/disable the cullEdges stuff (since
 that will only be available if the filter edges stuff is available
 -- therefore, no need to worry about enabling/disabling sub-controls
 within the edge filtering dialog).
-Encapsulated the new bin ct. UI element and the cullEdges UI element
 in Bootstrap cols and a row, making the edge filtering dialog's
 formatting look a lot nicer than before.
-Moved the edge weight histogram drawing stuff into its own
 function to facilitate ease of redrawing the histogram.

Next up for #232 is improving the general UI of this (e.g. using
enter to redraw the histogram), maybe flipping the UI elements
so the buttons are on the right of the text inputs (would match
the search bar), making the chart look prettier (fixing occasional
bar spacing issues, removing floating-point tick values, making
sure that the max edge weight is still included in other bins (?),
etc.), and adding graphical filtering functionality.

viewer/index.html

@@ -1159,22 +1159,42 @@ <h4 class="modal-title">Filter edges by weight</h4>
                         <svg id="edgeWeightChart" width="550" height="200">
                         </svg>
 
+                        <div class="container-fluid">
+                        <div class="row">
+                        <div class="col-lg-6">
+                        <div class='input-group input-group-sm'>
+                            <span class='input-group-btn'>
+                                <button class='btn btn-default'
+                                    onclick='drawEdgeWeightHistogram();'
+                                    type="button" id="setBinCountButton">
+                                    <span class="glyphicon glyphicon-resize-horizontal"
+                                        aria-hidden="true"></span> &nbsp;
+                                    Change histogram bin count
+                                </button>
+                            </span>
+                            <input type='text' class='form-control'
+                                id="binCountInput" value="20">
+                        </div>
+                        </div> <!-- end col 1 -->
+                        <div class="col-lg-6">
                         <!-- NOTE this feature doesn't work very well with
                             collapsing yet -->
                         <div class='input-group input-group-sm'>
                             <span class='input-group-btn'>
-                                <button class='btn btn-default disabled'
-                                    disabled="disabled" onclick='cullEdges();'
+                                <button class='btn btn-default'
+                                    onclick='cullEdges();'
                                     type="button" id="cullEdgesButton">
                                     <span class="glyphicon glyphicon-remove"
                                         aria-hidden="true"></span> &nbsp;
                                     Hide edges below a weight of
                                 </button>
                             </span>
                             <input type='text' class='form-control'
-                                id="cullEdgesInput" value="0"
-                                disabled="disabled">
+                                id="cullEdgesInput" value="0">
                         </div>
+                        </div> <!-- end col 2 -->
+                        </div> <!-- end row -->
+                        </div> <!-- end container-fluid -->
                     </div> <!-- end modal-body div -->
                     <div class="modal-footer">
                         <button type="button" class="btn btn-default"

viewer/js/xdot2cy.js

@@ -1387,9 +1387,6 @@ function disableVolatileControls() {
     disableButton("xmlFileselectButton");
     $("#searchInput").prop("disabled", true);
     $("#layoutInput").prop("disabled", true);
-    $("#cullEdgesInput").prop("disabled", true);
-    $("#cullEdgesInput").val("0"); // reset to avoid confusion
-    disableButton("cullEdgesButton");
     disableButton("filterEdgesButton");
     disableButton("reduceEdgesButton");
     disableButton("layoutButton");
@@ -2029,10 +2026,8 @@ function finishDrawComponent(cmpRank, componentNodeCount, componentEdgeCount,
         $("#searchInput").prop("disabled", false);
         $("#layoutInput").prop("disabled", false);
         if (ASM_FILETYPE === "LastGraph" || ASM_FILETYPE === "GML") {
-            // Only enable the edge culling features for graphs that have edge
-            // weights (multiplicity or bundle size)
-            $("#cullEdgesInput").prop("disabled", false);
-            enableButton("cullEdgesButton");
+            // Only enable the edge filtering features for graphs that have
+            // edge weights (multiplicity or bundle size)
             enableButton("filterEdgesButton");
         }
         if (componentEdgeCount > 0) {
@@ -2418,12 +2413,16 @@ function exportGraphView() {
     }
 }
 
-/* Opens the dialog for filtering edges.
- * This code was mostly taken from Mike Bostock's example of d3.js' histogram
- * generation, available at https://gist.github.com/mbostock/3048450.
- */
+/* Opens the dialog for filtering edges. */
 function openEdgeFilteringDialog() {
     $("#edgeFilteringDialog").modal();
+    drawEdgeWeightHistogram();
+}
+
+/* This code was mostly taken from Mike Bostock's example of d3.js' histogram
+ * generation, available at https://gist.github.com/mbostock/3048450.
+ */
+function drawEdgeWeightHistogram() {
     var formatCount = d3.format(",.0f");
     // note could probably find this inline to simplify computation time
     var max = d3.max(COMPONENT_EDGE_WEIGHTS); 
@@ -2442,11 +2441,10 @@ function openEdgeFilteringDialog() {
     var g = chartSvg.append("g")
         .attr("transform","translate(" + margin.left + "," + margin.top + ")");
     var x = d3.scaleLinear().domain([0, max * 1.1]).rangeRound([0, width]);
-    // TODO make this user-selectable
-    var BIN_COUNT = 20;
+    var bin_count = + $("#binCountInput").val();
     var bins = d3.histogram()
         .domain(x.domain())
-        .thresholds(x.ticks(BIN_COUNT))(COMPONENT_EDGE_WEIGHTS);
+        .thresholds(x.ticks(bin_count))(COMPONENT_EDGE_WEIGHTS);
     var y = d3.scaleLinear()
         .domain([0, d3.max(bins, function(b) { return b.length; })])
         .range([height, 0]);
@@ -2487,8 +2485,8 @@ function openEdgeFilteringDialog() {
         .attr("dy", "1em")
         .style("text-anchor", "middle")
         .text("Frequency");
-    // TODO: make BIN_COUNT configurable; ensure that there's space between
-    // every bar; ensure that the y-axis only has ticks for integer values
+    // TODO: ensure that there's space between every bar; ensure that the
+    // y-axis only has ticks for integer values
 }
 
 /* Hides edges below a minimum edge weight (multiplicity or bundle size,