grnsight 3.0.0 → 5.1.0

package/web-client/public/js/graph.js

@@ -1,5 +1,17 @@
 import Grid from "d3-v4-grid";
-const hasExpressionData = require("./node-coloring").hasExpressionData;
+import { grnState } from "./grnstate";
+import { modifyChargeParameter, modifyLinkDistanceParameter, valueValidator } from "./update-app";
+import {
+    ENDS_IN_EXPRESSION_REGEXP,
+    VIEWPORT_FIT,
+    ZOOM_INPUT,
+    ZOOM_PERCENT,
+    ZOOM_SLIDER,
+    ZOOM_DISPLAY_MINIMUM_VALUE,
+    ZOOM_DISPLAY_MAXIMUM_VALUE,
+    ZOOM_DISPLAY_MIDDLE,
+    ZOOM_ADAPTIVE_MAX_SCALE,
+} from "./constants";
 
 /* globals d3 */
 /* eslint-disable no-use-before-define, func-style */
@@ -17,7 +29,25 @@ const hasExpressionData = require("./node-coloring").hasExpressionData;
 /* eslint no-unused-vars: [2, {"varsIgnorePattern": "text|getMappedValue|manualZoom"}] */
 /* eslint-disable no-unused-vars */
 
-export var drawGraph = function (network, sliderController, nodeColoring) {
+/**
+ * Resize detection logic: to avoid "listener leaks," this is set up a single time here, with an assignable
+ * updateFunction being set when needed.
+ */
+let mutationCallback = null;
+const resizeObserver = new MutationObserver((mutationsList, observer) => {
+    if (typeof(mutationCallback) === "function") {
+        mutationCallback(mutationsList, observer);
+    }
+});
+
+export var updaters = {
+    setNodesToGrid: () => {},
+    setNodesToForceGraph: () => {},
+    renderNodeColoring: () => {},
+    removeNodeColoring: () => {},
+};
+
+export var drawGraph = function (workbook) {
 /* eslint-enable no-unused-vars */
     var $container = $(".grnsight-container");
     d3.selectAll("svg").remove();
@@ -27,39 +57,47 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
     var width = $container.width();
     var height = $container.height();
     var nodeHeight = 30;
-    var colorOptimal = true;
     var grayThreshold = +$("#grayThresholdInput").val();
 
     var dashedLine = $("#dashedGrayLineButton").prop("checked");
 
     var CURSOR_CLASSES = "cursorGrab cursorGrabbing";
 
-    var zoomSliderScale = 1; // Tracks the value of the zoom slider, initally at 100%
-    $("#zoomPercent").html(100 + "%"); // initalize zoom percentage value
-
-    $("#warningMessage").html(network.warnings.length !== 0 ? "Click here in order to view warnings." : "");
+    $("#warningMessage").html(workbook.warnings.length !== 0 ? "Click here in order to view warnings." : "");
 
     var getNodeWidth = function (node) {
         return node.name.length * 12 + 5;
     };
 
-  // If colorOptimal is false, then weighting is ignored, and the lines are all drawn as if it was an unweighted sheet
-    if (!$("#colorEdges").hasClass("active")) {
-        colorOptimal = false;
-    }
-
     var adaptive = !$("input[name='viewport']").prop("checked");
 
-    var MIN_SCALE = 0.25;
-    var ADAPTIVE_MAX_SCALE = 4;
-    var MIDDLE_SCALE = 1;
-    // regardless of whether the viewport is fixed or adaptive, the zoom slider now operates on the same scale
+    /**
+     * The *_SCALE values represent the actual zoom values used to transform the graph.
+     * The *_DISPLAY values represent the value that is shown in the user interface.
+     *
+     * Separating these values allows for flexible configuration of what the user sees vs. the actual scale factor
+     * used in transformations. This "distortion" is done so that "actual size" or 100% can be shown as the midpoint
+     * on the zoom slider, even if the numeric ranges to the left and right of the midpoint are asymmetric (as they
+     * are here).
+     */
+    const createZoomScale = (domainMin, domainMax, rangeMin, rangeMax) => d3.scaleLinear()
+        .domain([domainMin, domainMax])
+        .range([rangeMin, rangeMax])
+        .clamp(true);
 
-    var minimumScale = MIN_SCALE;
+    const MIN_DISPLAY = ZOOM_DISPLAY_MINIMUM_VALUE;
+    const ADAPTIVE_MAX_DISPLAY = ZOOM_DISPLAY_MAXIMUM_VALUE;
+    const MIN_SCALE = 0.25;
+    const MIDDLE_SCALE = 1;
 
-    var allWeights = network.positiveWeights.concat(network.negativeWeights);
+    const zoomScaleLeft = createZoomScale(MIN_DISPLAY, ZOOM_DISPLAY_MIDDLE, MIN_SCALE, MIDDLE_SCALE);
+    const zoomScaleRight = createZoomScale(
+        ZOOM_DISPLAY_MIDDLE, ADAPTIVE_MAX_DISPLAY, MIDDLE_SCALE, ZOOM_ADAPTIVE_MAX_SCALE);
 
-    if (!colorOptimal) {
+    // Create an array of all the network weights
+    var allWeights = workbook.positiveWeights.concat(workbook.negativeWeights);
+    // Assign the entire array weights of 1, if color edges turned off
+    if (!grnState.colorOptimal) {
         for (var i = 0; i < allWeights.length; i++) {
             if ( allWeights[i] !== 0 ) {
                 allWeights[i] = 1;
@@ -71,18 +109,25 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
         }
     }
 
-  // normalization all weights b/w 2-14
+    const maxWeight = Math.max(Math.abs(d3.max(allWeights)), Math.abs(d3.min(allWeights)));
+
+    // Get the largest magnitude weight and set that as the default normalization factor
+    if (grnState.newWorkbook) {
+        grnState.normalizationMax = maxWeight;
+        grnState.resetNormalizationMax = maxWeight;
+    }
+
+    // Normalize all weights b/w 2-14
     var normMax = +$("#normalization-max").val();
     var totalScale = d3.scaleLinear()
-        .domain([0, normMax > 0 ? normMax : d3.max(allWeights)])
+        .domain([0, normMax > 0 ? normMax : maxWeight])
         .range([2, 14])
         .clamp(true);
 
     var unweighted = false;
 
-  // normalization all weights b/w size 2 and size 14
-  // if unweighted, weight is 2
-    if (network.sheetType === "unweighted") {
+    // if unweighted, all weights are 2
+    if (workbook.sheetType === "unweighted") {
         totalScale = d3.scaleQuantile()
             .domain([d3.extent(allWeights)])
             .range(["2"]);
@@ -90,13 +135,12 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
         $(".normalization-form").append("placeholder='unweighted'");
         document.getElementById("edge-weight-normalization-factor-menu").setAttribute("placeholder", "");
     } else {
-        var maxWeight = d3.max(allWeights);
         document.getElementById("normalization-max").setAttribute("placeholder", maxWeight);
         document.getElementById("edge-weight-normalization-factor-menu").setAttribute("placeholder", maxWeight);
     }
 
     var getEdgeThickness = function (edge) {
-        return Math.round(totalScale(Math.abs(edge.value)));
+        return Math.floor(totalScale(Math.abs(edge.value)));
     };
 
     var simulation = d3.forceSimulation()
@@ -153,7 +197,8 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
 
     var svg = d3.select($container[0]).append("svg")
         .attr("width", width)
-        .attr("height", height);
+        .attr("height", height)
+        .attr("id", "exportContainer");
 
     var zoomContainer = svg.append("g") // required for zoom to work
         .attr("class", "boundingBox")
@@ -163,10 +208,12 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
     var boundingBoxContainer = zoomContainer.append("g"); // appended another g here...
 
     var zoom = d3.zoom()
-        .scaleExtent([1 / 2, 4])
+        .scaleExtent([MIN_SCALE, ZOOM_ADAPTIVE_MAX_SCALE])
         .on("zoom", zoomed);
 
-    svg.style("pointer-events", "all").call(zoomDrag);
+    svg.style("pointer-events", "all").call(zoomDrag)
+        .style("font-family", "sans-serif");
+
 
     function zoomed () {
         zoomContainer.attr("transform", d3.event.transform);
@@ -174,14 +221,14 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
 
     d3.select("svg").on("dblclick.zoom", null); // disables double click zooming
 
-  // This rectangle catches all of the mousewheel and pan events, without letting
-  // them bubble up to the body.
+    // This rectangle catches all of the mousewheel and pan events, without letting
+    // them bubble up to the body.
     boundingBoxContainer.append("rect")
         .attr("width", width)
         .attr("height", height)
         .style("fill", "none")
         .style("pointer-events", "all")
-        .attr("stroke", adaptive ? "none" : "#9A9A9A")
+        .attr("stroke", "none" )
         .append("g");
 
     d3.selectAll(".scrollBtn").on("click", null); // Remove event handlers, if there were any.
@@ -193,146 +240,99 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
     });
     d3.select(".center").on("click", center);
 
-    var leftPoints;
-    var rightPoints;
-    var scaleIncreasePerLeftPoint;
-    var scaleIncreasePerRightPoint;
-/*
-    We have to do some mapping so that the zoom slider appears as it should.
-    Zooming out sets the scale to a value between 0 and 1. Zooming in sets it
-    to a value between 1 and infinity. A scale of 0.25 to 5 on a zoom slider
-    without transformations will have 1 at the very far left. However, that's
-    an inaccurate way to represent what's actually happening. So this function
-    maps the scale from 0 to some x, with that x being calculated based on the
-    input scales.
-*/
-    var setupZoomSlider = function (minScale) {
-      // If the maximumScale is 1, we won't need to calculate any values from 1 to maxScale.
-      // So we'll just treat it as 0.
-
-        var maxScale = ADAPTIVE_MAX_SCALE;
-
-      // Each integer on the zoom is equivalent to 100 steps.
-        var NUMBER_POINTS_PER_INT = 100;
-
-      // Get the value that, if multiplied by the minScale value, would return 1. (ex: 0.25 * 4 = 1)
-      // This gives us the equivalent value of this minimum scale, should it be treated
-      // as a scale increase. This mostly allows us to treat this minimum scale as a non-decimal value,
-      // but it also provides a way to compare the total effect this minimum scale would have
-      // in a way that is easier to understand.
-        var minScaleReversed = 100 / (minScale * 100);
-
-      // Number of points required to display the minimum scale, now that's it's been transformed. These
-      // are the points that represent everything on the scale less than one.
-        leftPoints = minScaleReversed * NUMBER_POINTS_PER_INT;
-
-      // We want to end up with a total increase that, once we've gone through all the
-      // left points, produces 1 when added to minscale. So for scale 0.25 with 400
-      // left points, we need to know what we could add to 0.25 400 times to produce 1.
-      // We divide 0.75 by 400  to get that result.
-        scaleIncreasePerLeftPoint = (1 - minScale) / leftPoints;
-
-      // Points representing scales greater than 1.
-        rightPoints = maxScale * NUMBER_POINTS_PER_INT;
-
-      // For the same concept as above, we need to figure out what to add to 1 so
-      // so that we can end up with maxScale. Note that we start at 1 and not 0 because
-      // the scale is beginning at 1.
-        scaleIncreasePerRightPoint = (maxScale - MIDDLE_SCALE) / rightPoints;
-        var totalPoints = leftPoints + rightPoints;
-
-      // Returns the x that we're mapping to. Now we can set up the range slider.
-        var maxRangeValue = totalPoints / 100;
-
-        $(".zoomSlider").attr("min", 0);
-        $(".zoomSlider").attr("max", maxRangeValue);
-        $(".zoomSlider").val(0.01 * leftPoints);
+    const setGraphZoom = zoomScale => {
+        if (zoomScale < MIDDLE_SCALE) {
+            $container.removeClass(CURSOR_CLASSES).addClass("cursorGrab");
+        } else if (!adaptive && zoomScale >= MIDDLE_SCALE) {
+            $container.removeClass(CURSOR_CLASSES);
+        }
+        var container = zoomContainer;
+        zoom.scaleTo(container, zoomScale);
     };
 
-    setupZoomSlider(minimumScale);
+    // See setupZoomElements below to see how these are initialized. They are declared here because
+    // updateAppBasedOnZoomValue uses them (lexical positioning is chosen here for better context).
+    let sliderMidpoint;
+    let zoomScaleSliderLeft;
+    let zoomScaleSliderRight;
 
-    var ZOOM_SLIDER_MAX_VAL = 8;
-    var ZOOM_RANGE = 200;
+    const updateAppBasedOnZoomValue = () => {
 
-    function updateZoomValue (input) {
-        var value = input || Math.round(($(".zoomSlider").val() / ZOOM_SLIDER_MAX_VAL * ZOOM_RANGE));
-        value = value === 0 ? MIDDLE_SCALE : value;
-        $("#zoomPercent").html(value + "%");
-        $("#zoomInput").val(value);
-    }
-
-    function getMappedValue (scale) {
-      // Reverse the calculations from setupZoomSlider to get value from equivalentScale
-        var equivalentPoint;
-        if (scale <= MIDDLE_SCALE) {
-            equivalentPoint = (scale - minimumScale) / (scaleIncreasePerLeftPoint * 100);
-        } else {
-            equivalentPoint = (scale - 1) / scaleIncreasePerRightPoint + leftPoints;
-            equivalentPoint /= 100;
+        if (!adaptive) {
+            grnState.zoomValue = 100.0;
         }
-        $(".zoomSlider").val(equivalentPoint.toFixed(2));
-    }
 
-    var updateViewportZoom = function (value) {
-        var currentPoint = value * 100;
-        var equivalentScale;
-        if (adaptive || (!adaptive && value <= ADAPTIVE_MAX_SCALE)) {
-            if (currentPoint <= leftPoints) {
-                equivalentScale = minimumScale;
-                equivalentScale += scaleIncreasePerLeftPoint * currentPoint;
-            } else {
-                currentPoint = currentPoint - leftPoints;
-                equivalentScale = MIDDLE_SCALE;
-                equivalentScale += scaleIncreasePerRightPoint * currentPoint;
-            }
-            zoomSliderScale = equivalentScale;
-            manualZoomFunction(equivalentScale);
-        } else {
-          // Prohibits zooming past 100% if (!adaptive && value >= ADAPTIVE_MAX_SCALE)
-            $(".zoomSlider").val(ADAPTIVE_MAX_SCALE);
-            manualZoomFunction(MIDDLE_SCALE);
-            updateZoomValue();
+        const zoomDisplay = grnState.zoomValue;
+        setGraphZoom((zoomDisplay <= ZOOM_DISPLAY_MIDDLE ? zoomScaleLeft : zoomScaleRight)(zoomDisplay));
+
+        const finalDisplay = grnState.zoomValue;
+        $(ZOOM_PERCENT).text(`${finalDisplay}%`);
+
+        // Special handling for zoom input field: the user might be in the middle of typing a value that is
+        // _temporarily_ out of range (e.g., "1" while typing "100") and we don’t want to overwrite that.
+        // The special case can be detected if the input element currently has focus.
+        if (document.activeElement !== document.querySelector(ZOOM_INPUT)) {
+            $(ZOOM_INPUT).val(finalDisplay);
         }
+
+        $(ZOOM_SLIDER).val((finalDisplay <= ZOOM_DISPLAY_MIDDLE ? zoomScaleSliderLeft : zoomScaleSliderRight)
+            .invert(finalDisplay));
     };
 
-    var valueValidator = function (min, max, value) {
-        return Math.min(max, Math.max(min, value));
+    /**
+     * To eliminate coupling between how the zoom slider element is defined in markup and how zoom values are
+     * calculated and displayed, we define this function to read the zoom slider for its minimum, maximum, and
+     * midpoint. The slider’s minimum will be shown as MIN_DISPLAY, the slider’s maximum will be shown as
+     * ADAPTIVE_MAX_DISPLAY, and the slider’s midpoint will be shown as ZOOM_DISPLAY_MIDDLE.
+     *
+     * Elements showing minimum and maximum display values are also updated here so that they are consistent
+     * with these constants. This way, all zoom calculations are based on these constants, and changing these
+     * constants should be all that is needed to adjust displayed and actual zoom values.
+     */
+    var setupZoomSlider = () => {
+        const sliderMin = +$(ZOOM_SLIDER).attr("min");
+        const sliderMax = +$(ZOOM_SLIDER).attr("max");
+        sliderMidpoint = (sliderMin + sliderMax) / 2;
+
+        zoomScaleSliderLeft = createZoomScale(sliderMin, sliderMidpoint, MIN_DISPLAY, ZOOM_DISPLAY_MIDDLE);
+        zoomScaleSliderRight = createZoomScale(sliderMidpoint, sliderMax, ZOOM_DISPLAY_MIDDLE, ADAPTIVE_MAX_DISPLAY);
+
+        // Reset the zoom value to the midpoint whenever we load a new workbook.
+        if (grnState.newWorkbook) {
+            grnState.zoomValue = ZOOM_DISPLAY_MIDDLE;
+        }
+
+        updateAppBasedOnZoomValue();
     };
 
+    setupZoomSlider();
+
     var zoomInputValidator = function (value) {
-        return valueValidator(1, 200, value);
+        return valueValidator(MIN_DISPLAY, ADAPTIVE_MAX_DISPLAY, value);
     };
 
-    $("#zoomInput").on("change", function () {
-        var value = zoomInputValidator(+$("#zoomInput").val());
-        var scaledValue = value * (ZOOM_SLIDER_MAX_VAL / ZOOM_RANGE);
-        $(".zoomSlider").val(scaledValue);
-        updateViewportZoom(scaledValue);
-        updateZoomValue(value);
-    });
-
-    d3.select(".zoomSlider").on("input", function () {
-        var value = $(this).val();
-        updateViewportZoom(value);
+    $(ZOOM_INPUT).on("input", () => {
+        grnState.zoomValue = zoomInputValidator(+$(ZOOM_INPUT).val());
+        updateAppBasedOnZoomValue();
+    }).blur(() => $(ZOOM_INPUT).val(grnState.zoomValue));
+
+    d3.select(ZOOM_SLIDER).on("input", function () {
+        const sliderValue = +$(this).val();
+        grnState.zoomValue = Math.floor(
+            (sliderValue <= sliderMidpoint ? zoomScaleSliderLeft : zoomScaleSliderRight)(sliderValue)
+        );
+        updateAppBasedOnZoomValue();
     }).on("mousedown", function () {
         manualZoom = true;
     }).on("mouseup", function () {
         manualZoom = false;
     });
 
+    if (!grnState.newWorkbook) {
+        updateAppBasedOnZoomValue();
+    }
 
-    var manualZoomFunction = function (zoomScale) {
-        if (zoomScale < MIDDLE_SCALE) {
-            $container.removeClass(CURSOR_CLASSES).addClass("cursorGrab");
-        } else if (!adaptive && zoomScale >= MIDDLE_SCALE) {
-            $container.removeClass(CURSOR_CLASSES);
-        }
-        updateZoomValue();
-        var container = zoomContainer;
-        zoom.scaleTo(container, zoomScale);
-    };
-
-    d3.selectAll(".boundBoxSize").on("click", function () {
+    const adjustGraphSize = () => {
         var newWidth = $container.width();
         var newHeight = $container.height();
 
@@ -344,30 +344,40 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
             height = newHeight;
         }
 
-      // Subtract 1 from SVG height if we are fitting to window so as to prevent scrollbars from showing up
-      // Is inconsistent, but I'm tired of fighting with it...
+        // Subtract 1 from SVG height if we are fitting to window so as to prevent scrollbars from showing up
+        // Is inconsistent, but I'm tired of fighting with it...
         d3.select("svg").attr("width", newWidth)
-            .attr("height", $(".grnsight-container").hasClass("containerFit") ? newHeight : newHeight);
+            .attr("height", $(".grnsight-container").hasClass(VIEWPORT_FIT) ? newHeight : newHeight);
         d3.select("rect").attr("width", width).attr("height", height);
         d3.select(".boundingBox").attr("width", width).attr("height", height);
-    });
+    };
+
+    mutationCallback = adjustGraphSize;
+    resizeObserver.disconnect();
+    resizeObserver.observe($container.get(0), { attributes: true });
 
     var restrictGraphToViewport = function (fixed) {
         if (!fixed) {
             $("#restrict-graph-to-viewport span").removeClass("glyphicon-ok");
+            $(document).ready(function () {
+                $(".scale-and-scroll").show();
+            });
             $("input[name=viewport]").removeProp("checked");
-            $container.addClass("cursorGrab");
+            $container.addClass("cursorGrabbing");
             adaptive = true;
             d3.select("rect").attr("stroke", "none");
             center();
         } else if (fixed) {
             $("#restrict-graph-to-viewport span").addClass("glyphicon-ok");
             $("input[name=viewport]").prop("checked", "checked");
+            $(document).ready(function () {
+                $(".scale-and-scroll").hide();
+            });
             adaptive = false;
             $container.removeClass(CURSOR_CLASSES);
-            if (zoomSliderScale > 1) {
-                $(".zoomSlider").val(ADAPTIVE_MAX_SCALE);
-                manualZoomFunction(1);
+            if (grnState.zoomValue > ZOOM_DISPLAY_MIDDLE) {
+                grnState.zoomValue = ZOOM_DISPLAY_MIDDLE;
+                updateAppBasedOnZoomValue();
                 $container.removeClass(CURSOR_CLASSES);
             }
             width = $container.width();
@@ -378,6 +388,7 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
             $(".boundingBox").attr("width", width).attr("height", height);
             center();
         }
+        updateAppBasedOnZoomValue(); // Update zoom value within bounds
     };
 
     d3.select("#restrict-graph-to-viewport").on("click", function () {
@@ -390,22 +401,15 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
         restrictGraphToViewport(fixed);
     });
 
-    $(window).on("resize", function () {
-        if ($container.hasClass("containerFit")) {
-            $(".boundBoxSize").trigger("click");
-        }
-    });
-
     function center () {
         var viewportWidth = $container.width();
         var viewportHeight = $container.height();
         zoom.translateTo(zoomContainer, viewportWidth / 2, viewportHeight / 2);
-        simulation.alphaTarget(0.3).restart();
     }
 
     function move (direction) {
-        var width = direction === "left" ? 50 : (direction === "right" ? -50 : 0);
-        var height = direction === "up" ? 50 : (direction === "down" ? -50 : 0);
+        var width = direction === "left" ? -50 : (direction === "right" ? 50 : 0);
+        var height = direction === "up" ? -50 : (direction === "down" ? 50 : 0);
         zoom.translateBy(zoomContainer, width, height);
     }
 
@@ -416,18 +420,18 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
     var weight = boundingBoxContainer.selectAll(".weight");
 
     simulation
-        .nodes(network.genes)
+        .nodes(workbook.genes)
         .on("tick", tick);
 
     simulation.force("link")
-        .links(network.links);
+        .links(workbook.links);
 
-    link = link.data(network.links)
+    link = link.data(workbook.links)
         .enter().append("g")
         .attr("class", "link")
         .attr("strokeWidth", getEdgeThickness);
 
-    node = node.data(network.genes)
+    node = node.data(workbook.genes)
         .enter().append("g")
         .attr("class", "node")
         .attr("id", function (d) {
@@ -438,13 +442,14 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
         .call(drag)
         .on("dblclick", dblclick);
 
-    if (network.sheetType === "weighted") {
+    if (workbook.sheetType === "weighted") {
         link.append("path")
             .attr("class", "mousezone")
             .style("stroke-width", function (d) {
                 var baseThickness = getEdgeThickness(d);
                 return Math.max(baseThickness, 7);
-            });
+            })
+            .attr("stroke-opacity", "0");
     }
 
     link.append("path")
@@ -452,9 +457,10 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
         .attr("id", function (d) {
             return "path" + d.source.index + "_" + d.target.index;
         }).style("stroke-width", function (d) {
-            return d.strokeWidth = getEdgeThickness(d);
+            d.strokeWidth = grnState.colorOptimal ? getEdgeThickness(d) : 2;
+            return d.strokeWidth;
         }).style("stroke-dasharray", function (d) {
-            if (unweighted || !colorOptimal) {
+            if (unweighted || !grnState.colorOptimal) {
                 return "0";
             } else if (normalize(d) <= grayThreshold && dashedLine === true) {
                 return "6, 9";
@@ -462,7 +468,7 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
                 return "0";
             }
         }).style("stroke", function (d) {
-            if (unweighted || !colorOptimal) {
+            if (unweighted || !grnState.colorOptimal) {
                 return "black";
             } else if (normalize(d) <= grayThreshold) {
                 return "gray";
@@ -480,7 +486,7 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
             var xOffsets;
             var color;
 
-            if (Math.abs(d.value / (d3.max(allWeights))) <= grayThreshold) {
+            if (normalize(d) <= grayThreshold) {
                 minimum = "gray";
             }
             if ( x1 === x2 && y1 === y2 ) {
@@ -493,10 +499,10 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
                 return "url(#" + d.type + selfRef + "_StrokeWidth" + d.strokeWidth + minimum + ")";
             } else {
 
-              // If negative, you need one bar for horizontal and one for vertical.
-              // If the user is not coloring the weighted
-              // sheets, then we make all of the markers arrowheads.
-                if (d.value < 0 && colorOptimal) {
+                // If negative, you need one bar for horizontal and one for vertical.
+                // If the user is not coloring the weighted
+                // sheets, then we make all of the markers arrowheads.
+                if (d.value < 0 && grnState.colorOptimal) {
                     defs.append("marker")
                         .attr("id", "repressor" + selfRef + "_StrokeWidth" + d.strokeWidth + minimum)
                         .attr("refX", function () {
@@ -522,22 +528,22 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
                         })
                         .attr("orient", 180)
                         .append("rect")
-                            .attr("width", function () {
-                                return d.strokeWidth;
-                            })
-                            .attr("height", function () {
-                                return 25 + d.strokeWidth;
-                            })
-                            .attr("rx", 10)
-                            .attr("ry", 10)
-                            .attr("style", function () {
-                                if ( normalize(d) <= grayThreshold) {
-                                    color = "gray";
-                                } else {
-                                    color = d.stroke;
-                                }
-                                return "stroke:" + color + "; fill: " + color + "; stroke-width: 0";
-                            });
+                        .attr("width", function () {
+                            return d.strokeWidth;
+                        })
+                        .attr("height", function () {
+                            return 25 + d.strokeWidth;
+                        })
+                        .attr("rx", 10)
+                        .attr("ry", 10)
+                        .attr("style", function () {
+                            if ( normalize(d) <= grayThreshold) {
+                                color = "gray";
+                            } else {
+                                color = d.stroke;
+                            }
+                            return "stroke:" + color + "; fill: " + color + "; stroke-width: 0";
+                        });
 
                     defs.append("marker")
                         .attr("id", "repressorHorizontal" + selfRef + "_StrokeWidth" + d.strokeWidth + minimum)
@@ -632,16 +638,16 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
                         })
                         .attr("orient", function () {
                             return (x1 === x2 && y1 === y2) ?
-                            {
-                                2: 270, 3: 270, 4: 268, 5: 264, 6: 268, 7: 252,
-                                8: 248, 9: 243, 10: 240, 11: 240, 12: 235, 13: 233,
-                                14: 232
-                            }[d.strokeWidth] : "auto";
+                                {
+                                    2: 270, 3: 270, 4: 268, 5: 264, 6: 268, 7: 252,
+                                    8: 248, 9: 243, 10: 240, 11: 240, 12: 235, 13: 233,
+                                    14: 232
+                                }[d.strokeWidth] : "auto";
                         })
                         .append("path")
                         .attr("d", "M 0 0 L 14 5 L 0 10 Q 6 5 0 0")
                         .attr("style", function () {
-                            if (unweighted || !colorOptimal) {
+                            if (unweighted || !grnState.colorOptimal) {
                                 color = "black";
                             } else if ( normalize(d) <= grayThreshold) {
                                 color = "gray";
@@ -655,25 +661,29 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
             return "url(#" + d.type + selfRef + "_StrokeWidth" + d.strokeWidth + minimum + ")";
         });
 
-    if (network.sheetType === "weighted") {
+    if (workbook.sheetType === "weighted") {
         link.append("text")
-        .attr("class", "weight")
-        .attr("text-anchor", "middle")
-        .attr("text-anchor", "middle")
-        .text(function (d) {
-            return d.value.toPrecision(4);
-        });
+            .attr("class", "weight")
+            .attr("text-anchor", "middle")
+            .attr("text-anchor", "middle")
+            .attr("fill", "rgb(0,0,0)")
+            .style("font-family", "sans-serif")
+            .text(function (d) {
+                return d.value.toPrecision(4);
+            });
 
-        weight = weight.data(network.links)
-        .enter().append("text")
-        .attr("class", "weight")
-        .attr("text-anchor", "middle")
-        .text(function (d) {
-            return d.value.toPrecision(4);
-        })
-        .each(function (d) {
-            d.weightElement = d3.select(this);
-        });
+        weight = weight.data(workbook.links)
+            .enter().append("text")
+            .attr("class", "weight")
+            .attr("text-anchor", "middle")
+            .attr("fill", "rgb(0,0,0)")
+            .style("font-family", "sans-serif")
+            .text(function (d) {
+                return d.value.toPrecision(4);
+            })
+            .each(function (d) {
+                d.weightElement = d3.select(this);
+            });
 
     }
 
@@ -693,6 +703,7 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
     };
 
     var CURVE_THRESHOLD = 200;
+    var EDGE_OFFSET = 20;
     var lineTo = function (d) {
         var node = d3.select("#node" + d.target.index);
         var w = +node.attr("width");
@@ -705,14 +716,14 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
         d.target.centerX = d.target.x + (w / 2);
         d.target.centerY = d.target.y + (h / 2);
 
-          // This function calculates the newX and newY.
+        // This function calculates the newX and newY.
         smartPathEnd(d, w, h);
         x1 = d.source.newX;
         y1 = d.source.newY;
         x2 = d.target.newX;
         y2 = d.target.newY;
 
-          // Unit vectors.
+        // Unit vectors.
         var ux = x2 - x1;
         var uy = y2 - y1;
         var umagnitude = Math.sqrt(ux * ux + uy * uy);
@@ -725,7 +736,7 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
         vx /= vmagnitude;
         vy /= vmagnitude;
 
-          // Check for vector direction.
+        // Check for vector direction.
         if (((d.target.newX > d.source.x) && (d.target.newY > d.source.y)) ||
             ((d.target.newX < d.source.x) && (d.target.newY < d.source.y))) {
             vx = -vx; vy = -vy;
@@ -739,15 +750,16 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
         var cp2x = x2 - inlineOffset * ux + vx * orthoOffset;
         var cp2y = y2 - inlineOffset * uy + vy * orthoOffset;
 
-        d.label = {
-            x: (x1 + cp1x + cp2x + x2) / 4,
-            y: (y1 + cp1y + cp2y + y2) / 4
-        };
-
         cp1x = Math.min(Math.max(0, cp1x), width);
         cp1y = Math.min(Math.max(0, cp1y), height);
         cp2x = Math.min(Math.max(0, cp2x), width);
         cp2y = Math.min(Math.max(0, cp2y), height);
+
+        d.label = {
+            x: Math.min(Math.max((x1 + cp1x + cp2x + x2) / 4, EDGE_OFFSET), width - 2 * EDGE_OFFSET),
+            y: Math.min(Math.max((y1 + cp1y + cp2y + y2) / 4, EDGE_OFFSET), height - EDGE_OFFSET)
+        };
+
         return "C" + cp1x + " " + cp1y + ", " +
             cp2x + " " + cp2y + ", " +
             x2 + " " + y2;
@@ -768,71 +780,71 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
             MINIMUM_DISTANCE = d.strokeWidth > 11 ? 16.5 : 15;
         }
 
-    // Set an offset if the edge is a repressor to make room for the flat arrowhead
+        // Set an offset if the edge is a repressor to make room for the flat arrowhead
         var globalOffset = parseFloat(d.strokeWidth);
 
-        if (d.value < 0 && colorOptimal) {
+        if (d.value < 0 && grnState.colorOptimal) {
             globalOffset = Math.max(globalOffset, MINIMUM_DISTANCE);
         }
 
         var thicknessAdjustment = globalOffset > MINIMUM_DISTANCE ? 1 : 0;
 
-    // We need to work out the (tan of the) angle between the
-    // imaginary horizontal line running through the center of the
-    // target node and the imaginary line connecting the center of
-    // the target node with the top-left corner of the same
-    // node. Of course, this angle is fixed.
+        // We need to work out the (tan of the) angle between the
+        // imaginary horizontal line running through the center of the
+        // target node and the imaginary line connecting the center of
+        // the target node with the top-left corner of the same
+        // node. Of course, this angle is fixed.
         d.tanRatioFixed = (d.target.centerY - d.target.y) / (d.target.centerX - d.target.x);
 
-    // We also need to work out the (tan of the) angle between the
-    // imaginary horizontal line running through the center of the
-    // target node and the imaginary line connecting the center of
-    // the target node with the center of the source node. This
-    // angle changes as the nodes move around the screen.
+        // We also need to work out the (tan of the) angle between the
+        // imaginary horizontal line running through the center of the
+        // target node and the imaginary line connecting the center of
+        // the target node with the center of the source node. This
+        // angle changes as the nodes move around the screen.
         d.tanRatioMoveable = Math.abs(d.target.centerY - d.source.newY) / Math.abs(d.target.centerX - d.source.newX);
         // Note, JavaScript handles division-by-zero by returning
         // Infinity, which in this case is useful, especially
         // since it handles the subsequent Infinity arithmetic
         // correctly.
 
-    // Now work out the intersection point
+        // Now work out the intersection point
         if (d.tanRatioMoveable === d.tanRatioFixed) {
-      // Then path is intersecting at corner of textbox so draw
-      // path to that point
+            // Then path is intersecting at corner of textbox so draw
+            // path to that point
 
-      // By default assume path intersects a left-side corner
+            // By default assume path intersects a left-side corner
             d.target.newX = d.target.x - globalOffset;
 
-      // But...
+            // But...
             if (d.target.centerX < d.source.newX) {
-          // i.e. if target node is to left of the source node
-          // then path intersects a right-side corner
+                // i.e. if target node is to left of the source node
+                // then path intersects a right-side corner
                 d.target.newX = d.target.x + w + globalOffset;
             }
 
-      // By default assume path intersects a top corner
+            // By default assume path intersects a top corner
             d.target.newY = d.target.y - globalOffset;
 
-      // But...
+            // But...
             if (d.target.centerY < d.source.newY) {
-          // i.e. if target node is above the source node
-          // then path intersects a bottom corner
+                // i.e. if target node is above the source node
+                // then path intersects a bottom corner
                 d.target.newY = d.target.y + h + globalOffset;
             }
         }
 
         if (d.tanRatioMoveable < d.tanRatioFixed) {
-      // Then path is intersecting on a vertical side of the
-      // textbox, which means we know the x-coordinate of the
-      // path endpoint but we need to work out the y-coordinate
+            // Then path is intersecting on a vertical side of the
+            // textbox, which means we know the x-coordinate of the
+            // path endpoint but we need to work out the y-coordinate
 
-      // By default assume path intersects left vertical side
+            // By default assume path intersects left vertical side
             d.target.newX = d.target.x - globalOffset;
 
-      // But...
+            // But...
             if (d.target.centerX < d.source.newX) {
-        // i.e. if target node is to left of the source node
-        // then path intersects right vertical side
+                // i.e. if target node is to left of the source node
+                // then path intersects right vertical side
                 if (d.type !== "arrowhead") {
                     d.target.newX = d.target.x + w + globalOffset + 0.25 * d.strokeWidth - thicknessAdjustment;
                 } else {
@@ -840,31 +852,31 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
                 }
             }
 
-      // Now use a bit of trigonometry to work out the y-coord.
+            // Now use a bit of trigonometry to work out the y-coord.
 
-      // By default assume path intersects towards top of node
+            // By default assume path intersects towards top of node
             d.target.newY = d.target.centerY - ((d.target.centerX - d.target.x) * d.tanRatioMoveable);
 
-      // But...
+            // But...
             if (d.target.centerY < d.source.newY) {
-        // i.e. if target node is above the source node
-        // then path intersects towards bottom of the node
+                // i.e. if target node is above the source node
+                // then path intersects towards bottom of the node
                 d.target.newY = (2 * d.target.y) - d.target.newY + h;
             }
         }
 
         if (d.tanRatioMoveable > d.tanRatioFixed) {
-      // Then path is intersecting on a horizontal side of the
-      // textbox, which means we know the y-coordinate of the
-      // path endpoint but we need to work out the x-coordinate
+            // Then path is intersecting on a horizontal side of the
+            // textbox, which means we know the y-coordinate of the
+            // path endpoint but we need to work out the x-coordinate
 
-      // By default assume path intersects top horizontal side
+            // By default assume path intersects top horizontal side
             d.target.newY = d.target.y - globalOffset;
 
-      // But...
+            // But...
             if (d.target.centerY < d.source.newY) {
-        // i.e. if target node is above the source node
-        // then path intersects bottom horizontal side
+                // i.e. if target node is above the source node
+                // then path intersects bottom horizontal side
                 if (d.type !== "arrowhead") {
                     d.target.newY = d.target.y + h + globalOffset + 0.25 * d.strokeWidth - thicknessAdjustment;
                 } else {
@@ -872,15 +884,15 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
                 }
             }
 
-      // Now use a bit of trigonometry to work out the x-coord.
+            // Now use a bit of trigonometry to work out the x-coord.
 
-      // By default assume path intersects towards lefthand side
+            // By default assume path intersects towards lefthand side
             d.target.newX = d.target.centerX - ((d.target.centerY - d.target.y) / d.tanRatioMoveable);
 
-      // But...
+            // But...
             if (d.target.centerX < d.source.newX) {
-        // i.e. if target node is to left of the source node
-        // then path intersects towards the righthand side
+                // i.e. if target node is to left of the source node
+                // then path intersects towards the righthand side
                 d.target.newX = (2 * d.target.x) - d.target.newX + w;
             }
         }
@@ -914,11 +926,12 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
         node.selectAll(".nodeText").remove();
         var text = node.append("text")
             .attr("dy", NODE_HEIGHT)
-            .attr("text-anchor", "middle")
             .attr("class", "nodeText")
+            .attr("fill", "rgb(0, 0, 0)")
+            .style("text-anchor", "middle")
             .style("font-size", "18px")
             .style("stroke-width", "0")
-            .style("fill", "black")
+            .style("font-family", "sans-serif")
             .text(function (d) {
                 return d.name;
             })
@@ -927,7 +940,27 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
                 d.textWidth = textWidth < MINIMUM_NODE_WIDTH ? MINIMUM_NODE_WIDTH : textWidth;
                 return d.textWidth / 2 + NODE_MARGIN;
             })
-            .on("dblclick", nodeTextDblclick);
+            .on("dblclick", nodeTextDblclick)
+
+            // this function triggers the gene page
+            .on("contextmenu", function (gene) {
+                const tempLink = $("<a></a>")
+                    .attr({
+                        href: "info?" + $.param({
+                            symbol: gene.name,
+                            species: grnState.genePageData.species,
+                            jaspar: grnState.genePageData.taxonJaspar,
+                            uniprot: grnState.genePageData.taxonUniprot,
+                            ensembl: grnState.genePageData.ensembl,
+                            mine: grnState.genePageData.mine
+                        }),
+                        target: "_blank"
+                    });
+                $("body").append(tempLink);
+                tempLink.get(0).click();
+                tempLink.remove();
+                d3.event.preventDefault();
+            });
 
         rect
             .attr("width", function (d) {
@@ -944,149 +977,182 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
         return self.indexOf(value) === index;
     }
 
-    var getExpressionData = function (gene, strain, average) {
-        var strainData = network["expression"][strain];
+    const getExpressionData = (gene, strain, average) => {
+        const strainData = grnState.workbook.expression[strain];
         if (average) {
-            var uniqueTimePoints = strainData.time_points.filter(onlyUnique);
-            var avgMap = {};
+            const uniqueTimePoints = strainData.timePoints.filter(onlyUnique);
+            let avgMap = {};
             uniqueTimePoints.forEach(function (key) {
                 avgMap[key] = [];
             });
-            strainData.time_points.forEach(function (time, index) {
+            strainData.timePoints.forEach(function (time, index) {
                 avgMap[time].push(strainData.data[gene][index]);
             });
-            var avgs = [];
+            let avgs = [];
             Object.keys(avgMap).forEach(function (key) {
-                var length = avgMap[key].length;
-                var sum = avgMap[key].reduce(function (partialSum, currentValue) {
+                const length = avgMap[key].length;
+                const sum = avgMap[key].reduce(function (partialSum, currentValue) {
                     return partialSum + currentValue;
                 }, 0);
                 avgs.push(sum / length);
             });
             return {data: avgs, timePoints: uniqueTimePoints};
         }
-        return {data: strainData.data[gene], timePoints: strainData.time_points};
+        return {data: strainData.data[gene], timePoints: strainData.timePoints};
     };
 
     var colorNodes = function (position, dataset, average, logFoldChangeMaxValue) {
         var timePoints = [];
         node.each(function (p) {
             d3.select(this)
-            .append("g")
-            .selectAll(".coloring")
-            .data(function () {
-                var result = getExpressionData(p.name, dataset, average);
-                timePoints = result.timePoints;
-                return result.data;
-            })
-            .attr("class", "coloring")
-            .enter().append("rect")
-            .attr("width", function () {
-                var width = rect.attr("width") / timePoints.length;
-                return width + "px";
-            })
-            .attr("class", "coloring")
-            .attr("height", rect.attr("height") / 2 + "px")
-            .attr("transform", function (d, i) {
-                var yOffset = position === "top" ? 0 : rect.attr("height") / 2;
-                var xOffset = i * (rect.attr("width") / timePoints.length);
-                return "translate(" + xOffset + "," +  yOffset + ")";
-            })
-            .attr("stroke-width", "0px")
-            .style("fill", function (d) {
-                d = d || 0; // missing values are changed to 0
-                var scale = d3.scaleLinear()
-                    .domain([-logFoldChangeMaxValue, logFoldChangeMaxValue])
-                    .range([0, 1]);
-                return d3.interpolateRdBu(scale(-d));
-            })
-            .text(function (d) {
-                return "data " + JSON.stringify(d) + " of " + p.name;
-            });
+                .append("g")
+                .selectAll(".coloring")
+                .data(function () {
+                    if (grnState.workbook.expression[dataset].data[p.name]) {
+                        const result = getExpressionData(p.name, dataset, average);
+                        timePoints = result.timePoints;
+                        return result.data;
+                    } else {
+                        return 0;
+                    }
+                })
+                .attr("class", "coloring")
+                .enter().append("rect")
+                .attr("width", function () {
+                    var width = (p.textWidth + (2 * NODE_MARGIN)) / timePoints.length;
+                    return width + "px";
+                })
+                .attr("class", "coloring")
+                .attr("height", rect.attr("height") / 2 + "px")
+                .attr("transform", function (d, i) {
+                    var yOffset = position === "top" ? 0 : rect.attr("height") / 2;
+                    var xOffset = i * ((p.textWidth + (2 * NODE_MARGIN)) / timePoints.length);
+                    return "translate(" + xOffset + "," +  yOffset + ")";
+                })
+                .attr("stroke-width", "0px")
+                .style("fill", function (d) {
+                    d = d || 0; // missing values are changed to 0
+                    var scale = d3.scaleLinear()
+                        .domain([-logFoldChangeMaxValue, logFoldChangeMaxValue])
+                        .range([0, 1]);
+                    return d3.interpolateRdBu(scale(-d));
+                })
+                .text(function (d) {
+                    return "data " + JSON.stringify(d) + " of " + p.name;
+                });
         });
     };
 
     var renderNodeColoringLegend = function (logFoldChangeMaxValue) {
         var $nodeColoringLegend = $(".node-coloring-legend");
         d3.select($nodeColoringLegend[0]).selectAll("svg").remove();
-        var xMargin = 10;
-        var yMargin = 30;
-        var width = 200;
+        var yMargin = 20;
+        var width = 203;
         var height = 10;
         var textYOffset = 10;
-        var increment = 0.1;
 
         var svg = d3.select($nodeColoringLegend[0])
             .append("svg")
-            .attr("width", width + xMargin * 2)
+            .attr("width", "100%")
             .attr("height", height + yMargin)
             .append("g")
-            .attr("transform", "translate(" + xMargin / 2 + "," + yMargin / 2 + ")");
-
-        var logFoldChangeMaxValueMagnitude = Math.abs(logFoldChangeMaxValue);
-        var gradientValues = d3.range(-logFoldChangeMaxValueMagnitude, logFoldChangeMaxValueMagnitude, increment);
-        gradientValues = logFoldChangeMaxValue < 0 ? gradientValues.reverse() : gradientValues;
-
-        var flippedScale = logFoldChangeMaxValue < 0 ? true : false;
-
-        var coloring = svg.selectAll(".node-coloring-legend")
+            .attr("transform", "translate(0, 5)")
+            .attr("id", "nodeColoringLegendId");
+
+        // Thank you https://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient.html
+        const linearGradientId = "node-coloring-color-scale";
+        var defs = svg.append("defs");
+        var linearGradient = defs.append("linearGradient")
+            .attr("id", linearGradientId)
+            .attr("x1", "0%")
+            .attr("y1", "0%")
+            .attr("x2", "100%")
+            .attr("y2", "0%");
+
+        const increment = Math.abs(logFoldChangeMaxValue) / 50;  // Guarantee 50 steps regardless of the range.
+        var gradientValues = d3.range(-logFoldChangeMaxValue, logFoldChangeMaxValue, increment);
+        var scale = d3.scaleLinear()
+            .domain([-logFoldChangeMaxValue, logFoldChangeMaxValue])
+            .range([0, 1]);
+
+        linearGradient.selectAll("stop")
             .data(gradientValues)
-            .attr("class", "node-coloring-legend");
-
-        coloring.enter().append("rect")
-            .attr("width", width / gradientValues.length + "px")
-            .attr("height", height + "px")
-            .attr("transform", function (d, i) {
-                return "translate(" + (i * (width / gradientValues.length)) + "," + 0 + ")";
+            .enter().append("stop")
+            .attr("offset", function (d, i) {
+                return i / (gradientValues.length - 1);
             })
-            .style("fill", function (d) {
-                var scale = d3.scaleLinear()
-                    .domain([-logFoldChangeMaxValue, logFoldChangeMaxValue])
-                    .range([0, 1]);
-                return d3.interpolateRdBu(scale(flippedScale ? d : -d));
+            .attr("stop-color", function (d) {
+                return d3.interpolateRdBu(scale(-d));
             });
 
+        svg.append("rect")
+            .attr("width", `${width}px`)
+            .attr("height", `${height}px`)
+            .style("fill", `url(#${linearGradientId})`);
+
         var legendLabels = {
-            "left": {
-                "textContent": (flippedScale ? +logFoldChangeMaxValue : -logFoldChangeMaxValue).toFixed(0),
-                "x": -xMargin / 2
+            left: {
+                textAnchor: "start",
+                textContent: (-logFoldChangeMaxValue).toFixed(2),
+                x: 0
             },
-            "center": {
-                "textContent": "0",
-                "x": width / 2
-            },
-            "right": {
-                "textContent": (flippedScale ? -logFoldChangeMaxValue : +logFoldChangeMaxValue).toFixed(0),
-                "x": width - xMargin / 2
+            center: {
+                textAnchor: "middle",
+                textContent: "0",
+                x: width / 2
             },
+            right: {
+                textAnchor: "end",
+                textContent: (logFoldChangeMaxValue).toFixed(2),
+                x: width
+            }
         };
-        var g = document.querySelector("body > div.sidebar > div.node-coloring > div > svg > g");
+        /* eslint-disable max-len */
+        var g = document.getElementById("nodeColoringLegendId");
+        /* eslint-enable max-len */
+
         for (var key in legendLabels) {
             var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
             label.textContent = legendLabels[key].textContent;
             label.setAttribute("font-size", "8px");
+            label.setAttribute("text-anchor", legendLabels[key].textAnchor);
             label.setAttribute("x", legendLabels[key].x);
             label.setAttribute("y", height + textYOffset + "px");
+            label.setAttribute("fill", "rgb(0,0,0)");
+
             g.appendChild(label);
         }
+
     };
 
-    nodeColoring.removeNodeColoring = function () {
-        this.nodeColoringEnabled = false;
+    updaters.removeNodeColoring = function () {
+        grnState.nodeColoring.nodeColoringEnabled = false;
         node.selectAll(".coloring").remove();
     };
 
-    nodeColoring.renderNodeColoring = function () {
-        if (this.nodeColoringEnabled) {
-            colorNodes("top", this.topDataset, this.avgTopDataset, this.logFoldChangeMaxValue);
-            colorNodes("bottom", this.bottomDataset, this.avgBottomDataset, this.logFoldChangeMaxValue);
+    updaters.renderNodeColoring = function () {
+        if (grnState.nodeColoring.nodeColoringEnabled) {
+            colorNodes("top", grnState.nodeColoring.topDataset, grnState.nodeColoring.averageTopDataset,
+                grnState.nodeColoring.logFoldChangeMaxValue);
+            colorNodes("bottom", grnState.nodeColoring.bottomDataset, grnState.nodeColoring.averageBottomDataset,
+                grnState.nodeColoring.logFoldChangeMaxValue);
             renderNodeLabels();
-            renderNodeColoringLegend(this.logFoldChangeMaxValue);
+            renderNodeColoringLegend(grnState.nodeColoring.logFoldChangeMaxValue);
+        }
+    };
+
+    const hasExpressionData = sheets => {
+        for (var property in sheets) {
+            if (property.match(ENDS_IN_EXPRESSION_REGEXP)) {
+                return true;
+            }
         }
+        return false;
     };
 
-    if (!$.isEmptyObject(network.expression) && hasExpressionData(network.expression)) {
-        nodeColoring.renderNodeColoring();
+    if (!$.isEmptyObject(workbook.expression) && hasExpressionData(workbook.expression) &&
+      grnState.nodeColoring.topDataset !== undefined) {
+        updaters.renderNodeColoring();
     }
 
     $(".node").css({
@@ -1105,7 +1171,7 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
 
     var currentWeightVisibilitySetting = null;
 
-    if (network.sheetType === "weighted") {
+    if (workbook.sheetType === "weighted") {
         if ($(".weightedGraphOptions").hasClass("hidden")) {
             $(".weightedGraphOptions").removeClass("hidden");
         }
@@ -1178,7 +1244,6 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
     }
 
     // resets graph options so when new graph is loaded, initial layout is always force graph
-    $("#forceGraph").trigger("click");
 
     const getMarginWidth = function (gridNodes, row) {
         const containerWidth = $container.width();
@@ -1206,52 +1271,34 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
         return name1 > name2 ? 1 : -1;
     };
 
-    let layout = false;
-
-    var GRID_LAYOUT_BUTTON = "#gridLayoutButton";
-    $(GRID_LAYOUT_BUTTON)[0].value = "Grid Layout";
-    $(GRID_LAYOUT_BUTTON).on("click", {handler: this}, function (event) { // eslint-disable-line no-unused-vars
-        let nodeGroup = node._groups[0].sort(sortNode);
-        if (!layout) {
-            $("#gridLayout")
-                .addClass("called")
-                .trigger("click")
-                .removeClass("called");
-            this.value = "Force Graph";
-            layout = true;
-            const margin = 10;
-            const grid = Grid() // create new grid layout
-            .data(network.genes)
+    let nodeGroup = node._groups[0].sort(sortNode);
+    updaters.setNodesToGrid = () => { // eslint-disable-line no-unused-vars
+        const margin = 10;
+        const grid = Grid()  // eslint-disable-line no-undef
+            .data(workbook.genes)
             .bands(true)
             .padding([0.2, 0])
             .size([$container.width() - margin, $container.height() - margin]); // set size of container
-            grid.layout();
-            let gridNodes = grid.nodes();
-            let gridNumRow = grid.cols();
-            let marginWidth = getMarginWidth(gridNodes, gridNumRow);
-            let marginHeight = getMarginHeight(gridNodes);
-            /* eslint-disable block-scoped-var */
-            for (i in nodeGroup) {
-                nodeGroup[i].__data__.fx = marginWidth + gridNodes[i].x;
-                nodeGroup[i].__data__.fy = marginHeight + gridNodes[i].y;
-            }
-        } else {
-            $("#forceGraph")
-                .addClass("called")
-                .trigger("click")
-                .removeClass("called");
-            this.value = "Grid Layout";
-            layout = false;
-            for (i in nodeGroup) {
-                nodeGroup[i].__data__.fx = null;
-                nodeGroup[i].__data__.fy = null;
-            }
+        grid.layout();
+        let gridNodes = grid.nodes();
+        let gridNumRow = grid.cols();
+        let marginWidth = getMarginWidth(gridNodes, gridNumRow);
+        let marginHeight = getMarginHeight(gridNodes);
+        for (var i in nodeGroup) {
+            nodeGroup[i].__data__.fx = marginWidth + gridNodes[i].x;
+            nodeGroup[i].__data__.fy = marginHeight + gridNodes[i].y;
         }
-            /* eslint-enable block-scoped-var */
-    });
+    };
+
+    updaters.setNodesToForceGraph = () => { // eslint-disable-line no-unused-vars
+        for (var i in nodeGroup) {
+            nodeGroup[i].__data__.fx = null;
+            nodeGroup[i].__data__.fy = null;
+        }
+    };
 
-  // Tick only runs while the graph physics are still running.
-  // (I.e. when the graph is completely relaxed, tick stops running.)
+    // Tick only runs while the graph physics are still running.
+    // (I.e. when the graph is completely relaxed, tick stops running.)
     function tick () {
         var getSelfReferringEdge = function (node) {
             return link.select("path")["_groups"][0].map(function (path) {
@@ -1275,7 +1322,7 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
 
                 var selfReferringEdgeWidth = (selfReferringEdge ? getSelfReferringRadius(selfReferringEdge) +
                     selfReferringEdge.strokeWidth + 2 : 0);
-                var rightBoundary = width - d.textWidth - BOUNDARY_MARGIN - selfReferringEdgeWidth;
+                var rightBoundary = width - (d.textWidth + OFFSET_VALUE) - BOUNDARY_MARGIN - selfReferringEdgeWidth;
                 var currentXPos = Math.max(BOUNDARY_MARGIN, Math.min(rightBoundary, d.x));
                 if (adaptive && width < MAX_WIDTH &&
                     (currentXPos === BOUNDARY_MARGIN || currentXPos === rightBoundary)) {
@@ -1301,15 +1348,14 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
             }).attr("y", function (d) {
                 var selfReferringEdge = getSelfReferringEdge(d);
                 var selfReferringEdgeHeight = (selfReferringEdge ? getSelfReferringRadius(selfReferringEdge) +
-            selfReferringEdge.strokeWidth + SELF_REFERRING_Y_OFFSET + 0.5 : 0);
+                  selfReferringEdge.strokeWidth + SELF_REFERRING_Y_OFFSET + 0.5 : 0);
                 var bottomBoundary = height - nodeHeight - BOUNDARY_MARGIN - selfReferringEdgeHeight;
                 var currentYPos = Math.max(BOUNDARY_MARGIN, Math.min(bottomBoundary, d.y));
                 if (adaptive && height < MAX_HEIGHT &&
-             (currentYPos === BOUNDARY_MARGIN || currentYPos === bottomBoundary)) {
+                  (currentYPos === BOUNDARY_MARGIN || currentYPos === bottomBoundary)) {
                     if (!d3.select(this).classed("fixed")) {
                         height += OFFSET_VALUE;
                         boundingBoxContainer.attr("height", height);
-
                         link
                             .attr("y1", function (d) {
                                 return d.source.y;
@@ -1343,7 +1389,7 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
                     var dy = y2 - y1;
                     var dr = Math.sqrt(dx * dx + dy * dy);
 
-              // Defaults for normal edge.
+                    // Defaults for normal edge.
                     var drx = dr;
                     var dry = dr;
                     var xRotation = 0; // degrees
@@ -1351,49 +1397,51 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
                     var sweep = 1;     // 1 or 0
                     var offset = parseFloat(d.strokeWidth);
 
-              // Edge adjustment values when long self-node edges get hidden behind the node.
+                    // Edge adjustment values when long self-node edges get hidden behind the node.
                     var DEFAULT_NODE_SHIFT = 1.033;
                     var SHORT_NODE_LIMIT = 135;
                     var ADDITIONAL_SHIFT = 0.07;
                     var END_POINT_ADJUSTMENT = 1.2;
 
 
-            // Self edge.
+                    // Self edge.
                     if (x1 === x2 && y1 === y2) {
-            // Move the position of the loop.
+                        // Move the position of the loop.
                         x1 = d.source.x + (d.source.textWidth) * DEFAULT_NODE_SHIFT;
                         y1 = d.source.y + (nodeHeight / 2) + SELF_REFERRING_Y_OFFSET;
 
-            // Fiddle with this angle to get loop oriented.
+                        // Fiddle with this angle to get loop oriented.
+                        // (Future: This doesn't appear to change anything?)
                         xRotation = 45;
 
-            // Needs to be 1.
+                        // Needs to be 1.
                         largeArc = 1;
 
-            // Change sweep to change orientation of loop.
+                        // Change sweep to change orientation of loop.
                         sweep = 1;
 
                         drx = getSelfReferringRadius(d);
                         dry = getSelfReferringRadius(d);
 
-            // For whatever reason the arc collapses to a point if the beginning
-            // and ending points of the arc are the same, so kludge it.
+                        // For whatever reason the arc collapses to a point if the beginning
+                        // and ending points of the arc are the same, so kludge it.
                         if (d.source.textWidth > SHORT_NODE_LIMIT) {
                             DEFAULT_NODE_SHIFT += ADDITIONAL_SHIFT;
                         }
                         x2 = d.source.x + d.source.textWidth / END_POINT_ADJUSTMENT * DEFAULT_NODE_SHIFT;
                         y2 = d.source.y + nodeHeight;
 
-                        if (d.value < 0 && colorOptimal) {
+                        if (d.value < 0 && grnState.colorOptimal) {
                             offset = Math.max(10, parseFloat(d.strokeWidth));
                         }
                     }
 
-                    d.label = { x: x1, y: y1 + dry * 3 };
+                    d.label = { x: Math.min(width - (13 * offset), x1), // For 4 decimal places
+                        y: Math.min(height - offset, y1 + dry * 3)};
 
                     return "M" + x1 + "," + y1 +
-                 "A" + drx + "," + dry + " " + xRotation + "," + largeArc + "," + sweep + " " +
-                       x2  + "," + (y2 + offset);
+                        "A" + drx + "," + dry + " " + xRotation + "," + largeArc + "," + sweep + " " +
+                        x2  + "," + (y2 + offset);
                 } else {
                     return moveTo(d) + lineTo(d);
                 }
@@ -1415,7 +1463,7 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
                     selfRef = "_SelfReferential";
                 }
 
-                if (d.type === "repressor" && colorOptimal) {
+                if (d.type === "repressor" && grnState.colorOptimal) {
                     if ((d.tanRatioMoveable > d.tanRatioFixed) || (d.target === d.source)) { // if horizontal repressor
                         return "url(#repressorHorizontal" + selfRef + "_StrokeWidth" + d.strokeWidth + minimum + ")";
                     } else { // otherwise vertical repressor
@@ -1439,7 +1487,7 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
     }
 
     function normalize (d) {
-        return Math.abs(d.value / (d3.max(allWeights)));
+        return Math.abs(d.value / maxWeight).toPrecision(4);
     }
 
     function dragstart (d) {
@@ -1455,57 +1503,13 @@ export var drawGraph = function (network, sliderController, nodeColoring) {
         d.fy = d3.event.y;
     }
 
-    // Configures sliderController
-    sliderController.addForce(simulation);
-    sliderController.configureForceHandlers();
-    sliderController.initializeDefaultForces();
-
-    var changeSliderValue = function (slider, item) {
-        var value = slider === "link" ? linkDistValidator($(item).val()) :
-            chargeValidator($(item).val());
-        sliderController.modifyForceParameter(slider, value);
-        if (slider === "link") {
-            $(LINK_DISTANCE_VALUE).text(value);
-            $(LINK_DISTANCE_INPUT).val(value);
-            $(LINK_DISTANCE_MENU).val(value);
-        } else {
-            $(CHARGE_VALUE).text(value);
-            $(CHARGE_INPUT).val(value);
-            $(CHARGE_MENU).val(value);
-        }
-    };
-
-    var LINK_DISTANCE_MENU = "#link-distance-menu";
-    var LINK_DISTANCE_INPUT = "#linkDistInput";
-    var LINK_DISTANCE_VALUE = "#linkDistVal";
-
-    $(LINK_DISTANCE_MENU).on("change", function () {
-        changeSliderValue("link", LINK_DISTANCE_MENU);
-    });
-
-    $(LINK_DISTANCE_INPUT).on("change", function () {
-        changeSliderValue("link", LINK_DISTANCE_INPUT);
-    });
+    grnState.simulation = simulation;
 
-    var CHARGE_MENU = "#charge-menu";
-    var CHARGE_INPUT = "#chargeInput";
-    var CHARGE_VALUE = "#chargeVal";
+    // The restrict graph state is sometimes carried over across reloads
+    restrictGraphToViewport( $("input[name=viewport]").prop("checked"));
 
-    $(CHARGE_MENU).on("change", function () {
-        changeSliderValue("charge", CHARGE_MENU);
-    });
-
-    $(CHARGE_INPUT).on("change", function () {
-        changeSliderValue("charge", CHARGE_INPUT);
-    });
-
-    var linkDistValidator = function (value) {
-        return valueValidator(1, 1000, value);
-    };
-
-    var chargeValidator = function (value) {
-        return valueValidator(-2000, 0, value);
-    };
+    modifyChargeParameter(grnState.chargeSlider.currentVal);
+    modifyLinkDistanceParameter(grnState.linkDistanceSlider.currentVal);
 
     $(".startDisabled").removeClass("disabled");
 };