grnsight 3.0.0 → 5.1.0

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

@@ -1,43 +1,27 @@
-export const upload = function (sliderObject, sliderGroupController, drawGraph, nodeColoringController) {
-  // Slider Values
-    var LINK_DIST_SLIDER_ID   = "#linkDistInput";
-    var LINK_DIST_VALUE       = "#linkDistVal";
-    var LINK_DIST_DEFAULT     = 500;
-    var CHARGE_SLIDER_ID      = "#chargeInput";
-    var CHARGE_VALUE          = "#chargeVal";
-    var CHARGE_DEFAULT        = -50;
-    var TOOLTIP_SHOW_DELAY    = 700;
-    var TOOLTIP_HIDE_DELAY    = 100;
+// TODO Likely a temporary location, while things are being moved to their "true" homes.
+//      But placed here for now so that the true MVC cycle of grnState, updateApp, and the
+//      controller code installed by setupHandlers can access them.
 
-  // Demo Stuff
-    var UNWEIGHTED_DEMO_ID   = "#unweighted";
-    var UNWEIGHTED_DEMO_PATH = "demo/unweighted";
-    var UNWEIGHTED_DEMO_NAME = "Demo #1: Unweighted GRN (21 genes, 50 edges)";
-    var WEIGHTED_DEMO_ID     = "#weighted";
-    var WEIGHTED_DEMO_PATH   = "demo/weighted";
-    var WEIGHTED_DEMO_NAME   = "Demo #2: Weighted GRN (21 genes, 50 edges, Dahlquist Lab unpublished data)";
-    var SCHADE_INPUT_ID      = "#schadeInput";
-    var SCHADE_INPUT_PATH    = "demo/schadeInput";
-    var SCHADE_INPUT_NAME    = "Demo #3: Unweighted GRN (21 genes, 31 edges)";
-    var SCHADE_OUTPUT_ID     = "#schadeOutput";
-    var SCHADE_OUTPUT_PATH   = "demo/schadeOutput";
-    var SCHADE_OUTPUT_NAME   = "Demo #4: Weighted GRN (21 genes, 31 edges, Schade et al. 2004 data)";
+/* eslint-disable max-len */
+import { grnState } from "./grnstate";
 
-  // Settings Stuff
-    var COLOR_PREFERENCES_CLASS = ".colorPreferences";
-    var ACTIVE_COLOR_OPTION     = "active";
+import {
+    buildURL,
+    responseData,
+    stopLoadingIcon
+} from "./update-app";
 
-  // Weights Stuff
-    var WEIGHTS_SHOW_MOUSE_OVER_MENU  = "#weightsMouseOverMenu";
-    var WEIGHTS_SHOW_ALWAYS_MENU      = "#weightsAlwaysMenu";
-    var WEIGHTS_HIDE_MENU             = "#weightsNeverMenu";
-    var WEIGHTS_SHOW_MOUSE_OVER_SIDE  = "#weightsMouseOverSide";
-    var WEIGHTS_SHOW_ALWAYS_SIDE      = "#weightsAlwaysSide";
-    var WEIGHTS_HIDE_SIDE             = "#weightsNeverSide";
-    var WEIGHTS_SHOW_MOUSE_OVER_CLASS = ".weightsMouseOver";
-    var WEIGHTS_SHOW_ALWAYS_CLASS     = ".weightsAlways";
-    var WEIGHTS_HIDE_CLASS            = ".weightsNever";
+export const uploadState = {
+    currentWorkbook: null,
+};
+
+export const upload = function () {
+
+  // Values
+    var TOOLTIP_SHOW_DELAY    = 700;
+    var TOOLTIP_HIDE_DELAY    = 100;
 
+  // Settings Stuff
     var styleLabelTooltips = function () {
         $(".info").tooltip({
             placement: "top",
@@ -47,285 +31,7 @@ export const upload = function (sliderObject, sliderGroupController, drawGraph,
 
     styleLabelTooltips();
 
-    var nodeColoring = nodeColoringController;
-    nodeColoring.configureNodeColoringHandlers();
-    nodeColoring.initialize();
-
-    var linkDistanceSlider = new sliderObject(LINK_DIST_SLIDER_ID, LINK_DIST_VALUE, LINK_DIST_DEFAULT, false);
-    var chargeSlider = new sliderObject(CHARGE_SLIDER_ID, CHARGE_VALUE, CHARGE_DEFAULT, false);
-    var sliders = new sliderGroupController([chargeSlider, linkDistanceSlider]);
-    sliders.setSliderHandlers();
-    sliders.updateValues();
-    sliders.configureSliderControllers();
-
-    var currentNetwork = null;
-
-    var displayWarnings = function (warnings) {
-        $("#warningIntro").html("There were " + warnings.length + " warning(s) detected in this file. " +
-      "The graph will be loaded, but may not be displayed accurately. " +
-      "We recommend you review your file and ensure that it is formatted correctly. " +
-      "To view the details of the warning(s), please click on the \"Warnings List\" below.");
-
-        var warningsString = "";
-    // printed = [MISSING_SOURCE,MISSING_TARGET,INVALID_DATA,RANDOM_DATA,
-    // EMPTY_ROW,INVALID_NETWORK_SIZE,INVALID_CELL_DATA_TYPE]
-
-        var NUM_POSSIBLE_WARNINGS = 11;
-
-    // Fill printed with 0s programatically
-        var printed = [];
-        for (var i = 0; i < NUM_POSSIBLE_WARNINGS; i++) {
-            printed.push(0);
-        }
-
-        var missingSourceCount = warnings.filter(function (x) {
-            return x.warningCode === "MISSING_SOURCE";
-        });
-        var missingTargetCount = warnings.filter(function (x) {
-            return x.warningCode === "MISSING_TARGET";
-        });
-        var invalidDataCount = warnings.filter(function (x) {
-            return x.warningCode === "INVALID_DATA";
-        });
-        var randomDataCount = warnings.filter(function (x) {
-            return x.warningCode === "RANDOM_DATA";
-        });
-        var emptyRowCount = warnings.filter(function (x) {
-            return x.warningCode === "EMPTY_ROW";
-        });
-        var invalidNetworkSizeCount = warnings.filter(function (x) {
-            return x.warningCode === "INVALID_NETWORK_SIZE";
-        });
-        var extraneousDataCount = warnings.filter(function (x) {
-            return x.warningCode === "EXTRANEOUS_DATA";
-        });
-        var edgesWithoutWeightsCount = warnings.filter(function (x) {
-            return x.warningCode === "EDGES_WITHOUT_WEIGHTS";
-        });
-        var edgeDefaultNotDirectedCount = warnings.filter(function (x) {
-            return x.warningCode === "EDGE_DEFAULT_NOT_DIRECTED";
-        });
-        var sifFormatWarningCount = warnings.filter(function (x) {
-            return x.warningCode === "SIF_FORMAT_WARNING";
-        });
-        var incorrectlyNamedSheetWarningCount = warnings.filter(function (x) {
-            return x.warningCode === "INCORRECTLY_NAMED_SHEET";
-        });
-
-        var appendWarning = function (warning) {
-            warningsString += warning.errorDescription + "<br><br>";
-        };
-
-        var createWarningsString = function (warningCount, index) {
-            for (var i = 0; i < warningCount.length; i++) {
-                if (warningCount.length <= 3) {
-                    appendWarning(warningCount[i]);
-                } else if (printed[index] < 3) {
-                    appendWarning(warningCount[i]);
-                    printed[index]++;
-                } else {
-                    warningsString += "<i> " + (+warningCount.length - 3) +
-                    " more warning(s) like this exist. </i> <br><br>";
-                    break;
-                }
-            }
-        };
-
-        createWarningsString(missingSourceCount, 0);
-        createWarningsString(missingTargetCount, 1);
-        createWarningsString(invalidDataCount, 2);
-        createWarningsString(randomDataCount, 3);
-        createWarningsString(emptyRowCount, 4);
-        createWarningsString(invalidNetworkSizeCount, 5);
-        createWarningsString(extraneousDataCount, 6);
-        createWarningsString(edgesWithoutWeightsCount, 7);
-        createWarningsString(edgeDefaultNotDirectedCount, 8);
-        createWarningsString(sifFormatWarningCount, 9);
-        createWarningsString(incorrectlyNamedSheetWarningCount, 10);
-
-        $("#warningsList").html(warningsString);
-
-        var screenHeight = $(window).height();
-        var MIN_SCREEN_HEIGHT = 600;
-        var BORDER = 425;
-        var setPanel = (screenHeight - BORDER) + "px";
-        var minPanel = (MIN_SCREEN_HEIGHT - BORDER) + "px";
-        if (screenHeight > MIN_SCREEN_HEIGHT) {
-            $("#list-frame").css({height: setPanel});
-        } else {
-            $("#list-frame").css({height: minPanel});
-        }
-
-        $("#warningsModal").modal("show");
-    };
-
-    var displayNetwork = function (network, name) {
-        nodeColoring.reload(network, name);
-        if (document.getElementById("zoomSlider").disabled) {
-            document.getElementById("zoomSlider").disabled = false;
-        }
-
-        currentNetwork = network;
-        console.log("Network: ", network); // Display the network in the console
-        $("#graph-metadata").html(network.genes.length + " nodes<br>" + network.links.length + " edges");
-
-        if (network.warnings.length > 0) {
-            displayWarnings(network.warnings);
-        }
-
-
-        $("#fileName").text(name); // Set the name of the file to display in the top bar
-        $("input[type='range']").off("input"); // I have no idea why I do this. Investigate later.
-
-    // If more things need to be turned off, we'll add them to this array
-        [ "#resetSliders", "#resetSlidersMenu", "#undoReset", "#undoResetMenu" ].forEach(function (selector) {
-            $(selector).off("click");
-        });
-        drawGraph(network, sliders, nodeColoring);
-    };
-
-    var networkErrorDisplayer = function (xhr) {
-        // Deleted status, error for argument because it was never used
-        var err = JSON.parse(xhr.responseText);
-        var errorString = "Your graph failed to load.<br><br>";
-
-        if (!err.errors) { // will be falsy if an error was thrown before the network was generated
-            errorString += err;
-        } else {
-            console.log(err.errors);
-            errorString = err.errors.reduce(function (currentErrorString, currentError) {
-                return currentErrorString + currentError.possibleCause + " " + currentError.suggestedFix + "<br><br>";
-            }, errorString);
-        }
-
-        $("#error").html(errorString);
-        $("#errorModal").modal("show");
-    };
-
-    var reloader = function () { };
-
-    var loadGrn = function (url, name, formData) {
-    // The presence of formData is taken to indicate a POST.
-        var fullUrl = [ $("#service-root").val(), url ].join("/");
-        (formData ?
-      $.ajax({
-          url: fullUrl,
-          data: formData,
-          processData: false,
-          contentType: false,
-          type: "POST",
-          crossDomain: true
-      }) :
-      $.getJSON(fullUrl)
-    ).done(function (network, textStatus, jqXhr) {
-        console.log(network); // Display the network in the console
-        displayNetwork(network, name || jqXhr.getResponseHeader("X-GRNsight-Filename"));
-        reloader = function () {
-            loadGrn(url, name, formData);
-        };
-      // displayStatistics(network);
-    }).error(networkErrorDisplayer);
-    };
-
-    var loadDemo = function (url) {
-        loadGrn(url);
-        reloader = function () {
-            loadGrn(url);
-        };
-
-        $("a.upload > input[type=file]").val("");
-    };
-
-    var initializeDemoFile = function (demoId, demoPath, demoName) {
-        $(demoId).on("click", function () {
-            // Deleted parameter event
-            loadDemo(demoPath, demoName);
-        });
-    };
-
-    var demoInformation = [ [ WEIGHTED_DEMO_ID,   WEIGHTED_DEMO_PATH,   WEIGHTED_DEMO_NAME   ],
-                          [ UNWEIGHTED_DEMO_ID, UNWEIGHTED_DEMO_PATH, UNWEIGHTED_DEMO_NAME ],
-                          [ SCHADE_INPUT_ID,    SCHADE_INPUT_PATH,    SCHADE_INPUT_NAME    ],
-                          [ SCHADE_OUTPUT_ID,   SCHADE_OUTPUT_PATH,   SCHADE_OUTPUT_NAME   ] ];
-    demoInformation.forEach(function (demoInfo) {
-        initializeDemoFile.apply(null, demoInfo);
-    });
-
-    var settingsController = function () {
-        this.color = true;
-
-        this.setupSettingsHandlers = function () {
-            $(COLOR_PREFERENCES_CLASS).on("click", function () {
-                $(COLOR_PREFERENCES_CLASS).toggleClass(ACTIVE_COLOR_OPTION);
-                $(COLOR_PREFERENCES_CLASS + ">span").toggleClass("glyphicon-ok invisible");
-            });
-        };
-    };
-
-    var settings = new settingsController();
-    settings.setupSettingsHandlers();
-
-    var lockForce = function (disable) {
-        $("#linkDistInput").prop("disabled", disable);
-        $("#chargeInput").prop("disabled", disable);
-        $("#resetSlidersButton").prop("disabled", disable);
-        $("#lockSlidersButton").prop("checked", disable);
-    };
-
-    var toggleLayout = function (on, off) {
-        if (!$(on).prop("checked")) {
-            $(on).prop("checked", true);
-            $(off).prop("checked", false);
-            $(off + " span").removeClass("glyphicon-ok");
-            $(on + " span").addClass("glyphicon-ok");
-            if (on === "#gridLayout") {
-                lockForce(true);
-                $("#lockSlidersMenu").parent().addClass("disabled");
-                $("#resetSlidersMenu").parent().addClass("disabled");
-                $("#link-distance").parent().addClass("disabled");
-                $("#charge").parent().addClass("disabled");
-            } else {
-                lockForce(false);
-                $("#lockSlidersMenu").parent().removeClass("disabled");
-                $("#resetSlidersMenu").parent().removeClass("disabled");
-                $("#link-distance").parent().removeClass("disabled");
-                $("#charge").parent().removeClass("disabled");
-            }
-            if (!$(on).hasClass("called")) {
-                $("#gridLayoutButton").trigger("click");
-            }
-        }
-    };
-
-    $("#gridLayout").on("click", function () {
-        toggleLayout("#gridLayout", "#forceGraph");
-    });
-
-    $("#forceGraph").on("click", function () {
-        toggleLayout("#forceGraph", "#gridLayout");
-    });
-
-  // TODO: Make this less bad
-    $("#upload-sif").on("click", function () {
-        // deleted event parameter
-        $("#launchFileOpen").off("click").on("click", function () {
-            $("#upload-sif").click();
-        });
-    });
-    $("#upload-graphml").on("click", function () {
-        // deleted event parameter
-        $("#launchFileOpen").off("click").on("click", function () {
-            $("#upload-graphml").click();
-        });
-    });
-    $("#upload").on("click", function () {
-        // deleted event parameter
-        $("#launchFileOpen").off("click").on("click", function () {
-            $("#upload").click();
-        });
-    });
-
-    $("#printGraph").on("click", function () {
+    $("#printGraph").click( function () {
         if (!$(".startDisabled").hasClass("disabled")) {
             window.print();
         }
@@ -337,242 +43,14 @@ export const upload = function (sliderObject, sliderGroupController, drawGraph,
         delay: { show: 700, hide: 100 }
     });
 
-    // Normalization Controller
-    var MIN_EDGE_WEIGHT_NORMALIZATION = 0.0001;
-    var MAX_EDGE_WEIGHT_NORMALIZATION = 1000;
-
-    var valueValidator = function (min, max, value) {
-        return Math.min(max, Math.max(min, value));
-    };
-
-    var edgeWeightNormalizationInputValidation = function (value) {
-        return value === "" ? "" : valueValidator(MIN_EDGE_WEIGHT_NORMALIZATION, MAX_EDGE_WEIGHT_NORMALIZATION, value);
-    };
-
-    var synchronizeNormalizationValues = function (value) {
-        var validated = edgeWeightNormalizationInputValidation(value);
-        $("#normalization-max").val(validated);
-        $("#edge-weight-normalization-factor-menu").val(validated);
-        drawGraph(currentNetwork, sliders, nodeColoring);
-    };
-
-    $("#normalization-button").click(function () {
-        synchronizeNormalizationValues($("#normalization-max").val());
-    });
-
-    $("#reset-normalization-factor-menu, #resetNormalizationButton").click(function () {
-        synchronizeNormalizationValues("");
-    });
-
-    $("#edge-weight-normalization-factor-menu").on("change", function () {
-        synchronizeNormalizationValues($("#edge-weight-normalization-factor-menu").val());
-    });
-
-    var GREY_EDGE_THRESHOLD_MENU = "#gray-edge-threshold-menu";
-    var GREY_EDGE_THRESHOLD_SLIDER_SIDEBAR = "#grayThresholdInput";
-    var GREY_EDGE_THRESHOLD_TEXT_SIDEBAR = "#grayThresholdValue";
-
-    // Gray Edge Controller
-
-    var grayEdgeInputValidator = function (value) {
-        return valueValidator(0, 100, value);
-    };
-
-    var updateGrayEdgeValues = function (value) {
-        var validatedInput = grayEdgeInputValidator(value);
-        $(GREY_EDGE_THRESHOLD_TEXT_SIDEBAR).text(validatedInput + "%");
-        $(GREY_EDGE_THRESHOLD_MENU).val(validatedInput);
-        $(GREY_EDGE_THRESHOLD_SLIDER_SIDEBAR).val(validatedInput / 100);
-        drawGraph(currentNetwork, sliders, nodeColoring);
-    };
-
-    $(GREY_EDGE_THRESHOLD_MENU).on("change", function () {
-        var value = Math.round(($(GREY_EDGE_THRESHOLD_MENU).val()));
-        updateGrayEdgeValues(value);
-    });
-
-    $(GREY_EDGE_THRESHOLD_SLIDER_SIDEBAR).on("change", function () {
-        var value = Math.round(($(GREY_EDGE_THRESHOLD_SLIDER_SIDEBAR).val() * 100));
-        updateGrayEdgeValues(value);
-    });
-
-    // Dashed Gray Line Controller
-
-    var GREY_EDGES_DASHED_MENU = "#grey-edges-dashed-menu";
-    var GREY_EDGES_DASHED_SIDEBAR = "#dashedGrayLineButton";
-
-    var syncGreyEdgesAsDashedOptions = function (showAsDashed) {
-        if (showAsDashed) {
-            $(GREY_EDGES_DASHED_MENU + " span").addClass("glyphicon-ok");
-            $(GREY_EDGES_DASHED_MENU).prop("checked", "checked");
-            $(GREY_EDGES_DASHED_SIDEBAR).prop("checked", "checked");
-        } else {
-            $(GREY_EDGES_DASHED_MENU + " span").removeClass("glyphicon-ok");
-            $(GREY_EDGES_DASHED_MENU).removeProp("checked");
-            $(GREY_EDGES_DASHED_SIDEBAR).removeProp("checked");
-        }
-        drawGraph(currentNetwork, sliders, nodeColoring);
-    };
-
-    $(GREY_EDGES_DASHED_MENU).click(function () {
-        syncGreyEdgesAsDashedOptions(!$(GREY_EDGES_DASHED_MENU).prop("checked"));
-    });
-
-    $(GREY_EDGES_DASHED_SIDEBAR).on("change", function () {
-        syncGreyEdgesAsDashedOptions($(GREY_EDGES_DASHED_SIDEBAR).prop("checked"));
-    });
-
-    var annotateLinks = function (network) {
-    // TODO This duplicates logic that is done on the server side for an .xlsx spreadsheet.
-    //      Think of a way to consolidate it. Having discovered this, it seems like this should
-    //      be done on the client side because it rearranges data redundantly, for ease of display.
-        network.positiveWeights = [];
-        network.negativeWeights = [];
-
-        network.links.forEach(function (link) {
-            if (network.sheetType === "unweighted" && !link.value) {
-                link.value = 1;
-            }
-
-            if (link.value > 0) {
-                link.type = "arrowhead";
-                // link.stroke = "MediumVioletRed";   // GRNsight v1 magenta edge color
-                link.stroke = "rgb(195, 61, 61)";     // Node coloring-consistent red edge color
-                network.positiveWeights.push(link.value);
-            } else {
-                link.type = "repressor";
-                // link.stroke = "DarkTurquoise";     // GRNsight v1 cyan edge color
-                link.stroke = "rgb(51, 124, 183)";    // Node coloring-consistent blue edge color
-                network.negativeWeights.push(link.value);
-            }
-        });
-    };
-
-  /*
-   * Thanks to http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery
-   * for helping to resolve this.
-   */
-
-  // TODO Some opportunity for unification with loadGrn?
-    var importGrn = function (uploadRoute, filename, formData) {
-        var fullUrl = [ $("#service-root").val(), uploadRoute ].join("/");
-        $.ajax({
-            url: fullUrl,
-            data: formData,
-            processData: false,
-            contentType: false,
-            type: "POST",
-            crossDomain: true
-        }).done(function (network) {
-            annotateLinks(network);
-            displayNetwork(network, filename);
-            reloader = function () {
-                importGrn(uploadRoute, filename, formData);
-            };
-        }).error(networkErrorDisplayer);
-    };
-
-    var submittedFilename = function ($upload) {
-        var path = $upload.val();
-        var fakePathCheck = path.search("\\\\") + 1;
-
-        while (fakePathCheck) {
-            path = path.substring(fakePathCheck);
-            fakePathCheck = path.search("\\\\") + 1;
-        }
-
-        return path;
-    };
-
-    var createFileForm = function ($upload) {
-        var formData = new FormData();
-        formData.append("file", $upload[0].files[0]);
-        return formData;
-    };
-
-    var uploadEpilogue = function (event) {
-        if (window.ga) {
-            window.ga("send", "pageview", {
-                page: "/GRNsight/upload",
-                sessionControl: "start"
-            });
-        }
-
-        $("a.upload > input[type=file]").val("");
-        event.preventDefault();
-    };
-
-    var uploadHandler = function (uploadRoute, uploader) {
-        return function (event) {
-            var $upload = $(this);
-            var filename = submittedFilename($upload);
-            var formData = createFileForm($upload);
-            uploader(uploadRoute, filename, formData);
-            uploadEpilogue(event);
-        };
-    };
-
-    $("#upload").on("change", uploadHandler("upload", loadGrn));
-    $("#upload-sif").on("change", uploadHandler("upload-sif", importGrn));
-    $("#upload-graphml").on("change", uploadHandler("upload-graphml", importGrn));
-
     $("#warningsModal").on("hidden.bs.modal", function () {
         if ($("#warningsInfo").hasClass("in")) {
             $("#warningsInfo").removeClass("in");
         }
     });
 
-    $(WEIGHTS_SHOW_MOUSE_OVER_CLASS).click(function () {
-        $(WEIGHTS_SHOW_MOUSE_OVER_MENU + " span").addClass("glyphicon-ok");
-        $(WEIGHTS_SHOW_ALWAYS_MENU + " span").removeClass("glyphicon-ok");
-        $(WEIGHTS_HIDE_MENU + " span").removeClass("glyphicon-ok");
-
-        $(WEIGHTS_SHOW_MOUSE_OVER_SIDE).prop("checked", "checked");
-        $(WEIGHTS_SHOW_ALWAYS_SIDE).removeProp("checked");
-        $(WEIGHTS_HIDE_SIDE).removeProp("checked");
-
-        $(WEIGHTS_SHOW_MOUSE_OVER_CLASS).addClass("selected");
-        $(WEIGHTS_SHOW_ALWAYS_CLASS).removeClass("selected");
-        $(WEIGHTS_HIDE_CLASS).removeClass("selected");
-    });
-
-    $(WEIGHTS_SHOW_ALWAYS_CLASS).click(function () {
-        $(WEIGHTS_SHOW_MOUSE_OVER_MENU + " span").removeClass("glyphicon-ok");
-        $(WEIGHTS_SHOW_ALWAYS_MENU + " span").addClass("glyphicon-ok");
-        $(WEIGHTS_HIDE_MENU + " span").removeClass("glyphicon-ok");
-
-        $(WEIGHTS_SHOW_MOUSE_OVER_SIDE).removeProp("checked");
-        $(WEIGHTS_SHOW_ALWAYS_SIDE).prop("checked", "checked");
-        $(WEIGHTS_HIDE_SIDE).removeProp("checked");
-
-        $(WEIGHTS_SHOW_MOUSE_OVER_CLASS).removeClass("selected");
-        $(WEIGHTS_SHOW_ALWAYS_CLASS).addClass("selected");
-        $(WEIGHTS_HIDE_CLASS).removeClass("selected");
-    });
-
-    $(WEIGHTS_HIDE_CLASS).click(function () {
-        $(WEIGHTS_SHOW_MOUSE_OVER_MENU + " span").removeClass("glyphicon-ok");
-        $(WEIGHTS_SHOW_ALWAYS_MENU + " span").removeClass("glyphicon-ok");
-        $(WEIGHTS_HIDE_MENU + " span").addClass("glyphicon-ok");
-
-        $(WEIGHTS_SHOW_MOUSE_OVER_SIDE).removeProp("checked");
-        $(WEIGHTS_SHOW_ALWAYS_SIDE).removeProp("checked");
-        $(WEIGHTS_HIDE_SIDE).prop("checked", "checked");
-
-        $(WEIGHTS_SHOW_MOUSE_OVER_CLASS).removeClass("selected");
-        $(WEIGHTS_SHOW_ALWAYS_CLASS).removeClass("selected");
-        $(WEIGHTS_HIDE_CLASS).addClass("selected");
-    });
-
-    $("#printGraph").click(function () {
-        // Deleted event parameter
-        if (!$(this).parent().hasClass("disabled")) {
-            window.print();
-        }
-    });
-
-    var flattenNetwork = function (network, sheetType) {
-        var result = $.extend(true, { }, network, { sheetType: sheetType });
+    var flattenWorkbook = function (workbook, sheetType) {
+        var result = $.extend(true, { }, workbook, { sheetType: sheetType });
         result.links.forEach(function (link) {
             link.source = link.source.index;
             link.target = link.target.index;
@@ -587,7 +65,6 @@ export const upload = function (sliderObject, sliderGroupController, drawGraph,
         if (currentExtension && currentExtension.length) {
             filename = filename.substr(0, filename.length - currentExtension[0].length);
         }
-
         if (suffix) {
             filename = filename + "_" + suffix;
         }
@@ -595,14 +72,44 @@ export const upload = function (sliderObject, sliderGroupController, drawGraph,
         return filename + "." + extension;
     };
 
-    var performExport = function (route, extension, sheetType) {
-        return function () {
-            // Deleted event parameter
+    const handleExportExcelButtonExport = (route, extension, sheetType, source) => {
+        grnState.workbook.exportNetworkType = sheetType;
+        const expressionSheets = $("input[name=expressionSheets]:checked");
+        var chosenSheets = [];
+        for (const [key, value] of Object.entries(expressionSheets)) {
+            if (!isNaN(parseInt(key, 10))) {
+                if (value.value === "select all") {
+                    const allExpressionSheets = $("input[name=expressionSheets]");
+                    chosenSheets = [];
+                    for (const [k, v] of Object.entries(allExpressionSheets)) {
+                        if (!isNaN(parseInt(k, 10))) {
+                            if (v.value !== "select all") {
+                                chosenSheets.push(v.value);
+                            }
+                        }
+                    }
+                    break;
+                } else {
+                    chosenSheets.push(value.value);
+                }
+            }
+        }
+        const exportSheets = {};
+
+        if (source === "userInput" && grnState.workbook.expression) {
+            // source is from user speadsheet
+            // parse through grnState expression sheets and collect the sheets to be exported
+            for (let sheet of chosenSheets) {
+                if (grnState.workbook.expression[sheet]) {
+                    exportSheets[sheet] = grnState.workbook.expression[sheet];
+                }
+            }
+            grnState.workbook.exportExpression = exportSheets;
             if (!$(this).parent().hasClass("disabled")) {
-                var networkToExport = flattenNetwork(currentNetwork, sheetType);
-                var networkFilename = filenameWithExtension(sheetType !== currentNetwork.sheetType ?
+                var workbookToExport = flattenWorkbook(uploadState.currentWorkbook, sheetType);
+                var workbookFilename = filenameWithExtension(sheetType !== uploadState.currentWorkbook.sheetType ?
                     sheetType : "", extension);
-                networkToExport.filename = networkFilename;
+                workbookToExport.filename = workbookFilename;
 
                 var exportForm = $("<form></form>").attr({
                     method: "POST",
@@ -610,46 +117,313 @@ export const upload = function (sliderObject, sliderGroupController, drawGraph,
                 }).append($("<input></input>").attr({
                     type: "hidden",
                     name: "filename",
-                    value: networkFilename
+                    value: workbookFilename
                 })).append($("<input></input>").attr({
                     type: "hidden",
-                    name: "network",
-                    value: JSON.stringify(networkToExport)
+                    name: "workbook",
+                    value: JSON.stringify(workbookToExport)
                 }));
                 $("body").append(exportForm);
                 exportForm.submit();
                 exportForm.remove();
             }
-        };
+            $("#exportExcelModal").modal("hide");
+        } else {
+            // source is from database so lets query her up
+            for (let sheet of chosenSheets) {
+                let queryURL = buildURL({ dataset: sheet });
+                responseData("", queryURL).then(function (response) {
+                    exportSheets[sheet] = response;
+                    if (exportSheets[sheet]) {
+                        stopLoadingIcon();
+                        if (Object.keys(exportSheets).length === chosenSheets.length) {
+                            // we have all of the sheets so lets initilize the export process
+                            const finalExportSheets = {};
+                            Object.keys(exportSheets).forEach((sheet) => {
+                                // make sure that the sheets we queried are populated with the correct data
+                                if (exportSheets[sheet].data && exportSheets[sheet].timePoints) {
+                                    // if the resulting query contains both the timePoint data and
+                                    // the gene data then export it. If not don't :)
+                                    finalExportSheets[sheet] = exportSheets[sheet];
+                                }
+                            });
+                            grnState.workbook.exportExpression = finalExportSheets;
+                            if (!$(this).parent().hasClass("disabled")) {
+                                var workbookToExport = flattenWorkbook(uploadState.currentWorkbook, sheetType);
+                                var workbookFilename = filenameWithExtension(sheetType !== uploadState.currentWorkbook.sheetType ?
+                                    sheetType : "", extension);
+                                workbookToExport.filename = workbookFilename;
+                                var exportForm = $("<form></form>").attr({
+                                    method: "POST",
+                                    action: $("#service-root").val() + "/" + route
+                                }).append($("<input></input>").attr({
+                                    type: "hidden",
+                                    name: "filename",
+                                    value: workbookFilename
+                                })).append($("<input></input>").attr({
+                                    type: "hidden",
+                                    name: "workbook",
+                                    value: JSON.stringify(workbookToExport)
+                                }));
+                                $("body").append(exportForm);
+                                exportForm.submit();
+                                exportForm.remove();
+                            }
+                            $("#exportExcelModal").modal("hide");
+                        }
+                    }
+                }).catch(function (error) {
+                    console.log(error.stack);
+                    console.log(error.name);
+                    console.log(error.message);
+                });
+            }
+        }
     };
 
-    $("#exportAsUnweightedSif").click(performExport("export-to-sif", "sif", "unweighted"));
-    $("#exportAsWeightedSif").click(performExport("export-to-sif", "sif", "weighted"));
-    $("#exportAsUnweightedGraphMl").click(performExport("export-to-graphml", "graphml", "unweighted"));
-    $("#exportAsWeightedGraphMl").click(performExport("export-to-graphml", "graphml", "weighted"));
+    var performExport = function (route, extension, sheetType, source) {
+        return function () {
+            // Deleted event parameter
+            if (route === "export-to-excel" && source) {
+                handleExportExcelButtonExport(route, extension, sheetType, source);
+            } else {
+                if (!$(this).parent().hasClass("disabled")) {
+                    var workbookToExport = flattenWorkbook(uploadState.currentWorkbook, sheetType);
+                    var workbookFilename = filenameWithExtension(sheetType !== uploadState.currentWorkbook.sheetType ?
+                        sheetType : "", extension);
+                    workbookToExport.filename = workbookFilename;
+
+                    var exportForm = $("<form></form>").attr({
+                        method: "POST",
+                        action: $("#service-root").val() + "/" + route
+                    }).append($("<input></input>").attr({
+                        type: "hidden",
+                        name: "filename",
+                        value: workbookFilename
+                    })).append($("<input></input>").attr({
+                        type: "hidden",
+                        name: "workbook",
+                        value: JSON.stringify(workbookToExport)
+                    }));
+                    $("body").append(exportForm);
+                    exportForm.submit();
+                    exportForm.remove();
+                }
 
-    $("#reload").click(function () {
-        // Deleted event parameter
-        if (!$(this).parent().hasClass("disabled")) {
-            if ($.isFunction(reloader)) {
-                reloader();
             }
+        };
+    };
+
+    const createHTMLforForm1 = () => {
+        return `
+            <form id=\'exportExcelForm1\'>
+                <div class=\'form-group\'>
+                    <p id=\'exportExcelNetwork\'></p>
+                    <ul class=\'export-radio-group\' id=\'export-excel-weights-list\' style=\"list-style-type:none;\"> </ul>
+                </div>
+                <div class=\'form-group\'>
+                    <p id=\'exportExcelExpressionSources\'> </p>
+                    <ul class=\'export-radio-group\' id=\'export-excel-expression-source-list\' style=\"list-style-type:none;\">
+                        <li>
+                            <input type=\'radio\' name=\'expressionSource\' checked=\"true\" value=\"userInput\" id=\'exportExcelExpressionSource-userInputRadio\' class=\'export-radio\' />
+                            <label for=\'exportExcelExpressionSource-userInputRadio\' id=\'exportExcelExpressionSource-userInput\' class=\'export-radio-label\'> </label>
+                        </li>
+                        <li>
+                            <input type=\'radio\' name=\'expressionSource\' value=\"Dahlquist_2018\" id=\'exportExcelExpressionSource-DahlquistRadio\' class=\'export-radio\' />
+                            <label for=\'exportExcelExpressionSource-DahlquistRadio\' id=\'exportExcelExpressionSource-Dahlquist\' class=\'export-radio-label\'>  </label>
+                        </li>
+                        <li>
+                            <input type=\'radio\' name=\'expressionSource\' value=\"Kitagawa_2002\" id=\'exportExcelExpressionSource-KitagawaRadio\' class=\'export-radio\' />
+                            <label for=\'exportExcelExpressionSource-KitagawaRadio\' id=\'exportExcelExpressionSource-Kitagawa\' class=\'export-radio-label\'> </label>
+                        </li>
+                        <li>
+                            <input type=\'radio\' name=\'expressionSource\' value=\"Thorsen_2007\" id=\'exportExcelExpressionSource-ThorsenRadio\' class=\'export-radio\' />
+                            <label for=\'exportExcelExpressionSource-ThorsenRadio\' id=\'exportExcelExpressionSource-Thorsen\' class=\'export-radio-label\'> </label>
+                        </li>
+                        <li>
+                            <input type=\'radio\' name=\'expressionSource\' value=\"Barreto_2012\" id=\'exportExcelExpressionSource-BarretoRadio\' class=\'export-radio\' />
+                            <label for=\'exportExcelExpressionSource-BarretoRadio\' id=\'exportExcelExpressionSource-Barreto\' class=\'export-radio-label\'> </label>
+                        </li>
+                    </ul>
+                </div>
+                <button type=\'submit\' class=\'btn btn-default\' id=\'exportExcelContinueButton\'> Continue </button>
+            </form>
+        `;
+    };
+
+    const createHTMLforForm2 = () => {
+        return `
+        <form id=\'exportExcelForm2\'>
+            <div class=\'form-group\'>
+                <p id=\'exportExcelExpressionSheets\'></p>
+                <ul class=\'exportExcelExpressionSheets\' id=\'export-excel-expression-sheet-list\' style=\"list-style-type:none;\"> </ul>
+            </div>
+            <input type=\'button\' class=\'btn btn-default\' id=\'exportExcelButton\' value=\'Export Workbook\' />
+        </form>
+        `;
+    };
+    const createHTMLforWeights = () => {
+        $(".export-excel-weighted-option").remove();
+        if (grnState.workbook.sheetType !== "weighted") {
+            return `
+            <li class=\'export-excel-weighted-option\'>
+                <input type=\'radio\' checked=\"true\" name=\'network-weights\' value=\"unweighted\" id=\'exportExcelUnweightedRadio\' class=\'export-radio\' />
+                <label for=\'exportExcelUnweightedRadio\' id=\'exportExcelUnweighted\' class=\'export-radio-label\' >
+                    Unweighted
+                </label>
+            </li>`;
+        } else {
+            return `
+            <li class=\'export-excel-weighted-option\'>
+                <input type=\'radio\' checked=\"true\" name=\'network-weights\' value=\"weighted\" id=\'exportExcelWeightedRadio\' class=\'export-radio\' />
+                <label for=\'exportExcelWeightedRadio\' id=\'exportExcelWeighted\' class=\'export-radio-label\' >
+                    Weighted
+                </label>
+            </li>
+            <li class=\'export-excel-weighted-option\'>
+                <input type=\'radio\' name=\'network-weights\' value=\"unweighted\" id=\'exportExcelUnweightedRadio\' class=\'export-radio\' />
+                <label for=\'exportExcelUnweightedRadio\' id=\'exportExcelUnweighted\' class=\'export-radio-label\' >
+                    Unweighted
+                </label>
+            </li>
+            `;
         }
-    });
+    };
 
-    // Prevent Bootstrap dropdown from closing on clicks in menu input boxes
-    // https://stackoverflow.com/a/27759926
-    $(".dropdown").on({
-        "click": function (event) {
-            if ($(event.target).hasClass("keepopen")) {
-                $(this).data("closable", $(event.target).closest(".dropdown-toggle").length !== 0);
+    const createHTMLforExpressionSheets = (source) => {
+        $(".export-excel-expression-sheet-option").remove();
+        // check if user updated data is selected
+        let result =  `
+            <li class=\'export-excel-expression-sheet-option\'>
+                <input type=\'checkbox\' name=\'expressionSheets\' checked=\"true\" value=\"select all\" id=\'exportExcelExpression-All\' class=\'export-checkbox\' />
+                <label for=\'exportExcelExpression-All\' id=\'exportExcelExpression-All-label\' class=\'export-checkbox-label\' >
+                    All Expression Sheets
+                </label>
+            </li>
+            `;
+        if (source === "userInput") {
+            for (let expression in grnState.workbook.expression) {
+                result = result + `
+                <li class=\'export-excel-expression-sheet-option\'>
+                    <input type=\'checkbox\' name=\'expressionSheets\' checked=\"true\" value=\"${expression}\" id=\'exportExcelExpression-${expression}\' class=\'export-checkbox\' />
+                    <label for=\'exportExcelExpression-${expression}\' id=\'exportExcelExpression-${expression}-label\' class=\'export-checkbox-label\' >
+                        ${expression}
+                    </label>
+                </li>
+                `;
             }
-        },
-        "hide.bs.dropdown": function () {
-            var hide = $(this).data("closable");
-            $(this).data("closable", true);
-            return hide;
+        } else if (source === "Dahlquist_2018") {
+            // if the source is from a database
+            result = result +  `
+            <li class=\'export-excel-expression-sheet-option\'>
+                <input type=\'checkbox\' name=\'expressionSheets\' checked=\"true\" value=\"Dahlquist_2018_dcin5\" id=\'exportExcelExpression-Dahlquist_2018_dcin5\' class=\'export-checkbox\' />
+                <label for=\'exportExcelExpression-Dahlquist_2018_dcin5\' id=\'exportExcelExpression-Dahlquist_2018_dcin5-label\' class=\'export-checkbox-label\' >
+                    Dahlquist_2018_dcin5
+                </label>
+            </li>
+            <li class=\'export-excel-expression-sheet-option\'>
+                <input type=\'checkbox\' checked=\"true\" name=\'expressionSheets\' value=\"Dahlquist_2018_dgln3\" id=\'exportExcelExpression-Dahlquist_2018_dgln3\' class=\'export-checkbox\' />
+                <label for=\'exportExcelExpression-Dahlquist_2018_dgln3\' id=\'exportExcelExpression-Dahlquist_2018_dgln3-label\' class=\'export-checkbox-label\' >
+                    Dahlquist_2018_dgln3
+                </label>
+            </li>
+            <li class=\'export-excel-expression-sheet-option\'>
+                <input type=\'checkbox\' checked=\"true\" name=\'expressionSheets\' value=\"Dahlquist_2018_dhap4\" id=\'exportExcelExpression-Dahlquist_2018_dhap4\' class=\'export-checkbox\' />
+                <label for=\'exportExcelExpression-Dahlquist_2018_dhap4\' id=\'exportExcelExpression-Dahlquist_2018_dhap4-label\' class=\'export-checkbox-label\' >
+                    Dahlquist_2018_dhap4
+                </label>
+            </li>
+            <li class=\'export-excel-expression-sheet-option\'>
+                <input type=\'checkbox\' checked=\"true\" name=\'expressionSheets\' value=\"Dahlquist_2018_dzap1\" id=\'exportExcelExpression-Dahlquist_2018_dzap1\' class=\'export-checkbox\' />
+                <label for=\'exportExcelExpression-Dahlquist_2018_dzap1\' id=\'exportExcelExpression-Dahlquist_2018_dzap1-label\' class=\'export-checkbox-label\' >
+                    Dahlquist_2018_dzap1
+                </label>
+            </li>
+            <div class=\'expression-db-loader\'></div>
+            <div class=\'expression-db-loader-text\'>Expression Database is Loading</div>
+            `;
+        } else if (source === "Kitagawa_2002") {
+            // if the source is from a database
+            result = result +  `
+            <li class=\'export-excel-expression-sheet-option\'>
+                <input type=\'checkbox\' checked=\"true\" name=\'expressionSheets\' value=\"Kitagawa_2002_wt\" id=\'exportExcelExpression-Kitagawa_2002_wt\' class=\'export-checkbox\' />
+                <label for=\'exportExcelExpression-Kitagawa_2002_wt\' id=\'exportExcelExpression-Kitagawa_2002_wt-label\' class=\'export-checkbox-label\' >
+                    Kitagawa_2002_wt
+                </label>
+            </li>
+            <div class=\'expression-db-loader\'></div>
+            <div class=\'expression-db-loader-text\'>Expression Database is Loading</div>
+            `;
+        } else if (source === "Thorsen_2007") {
+            // if the source is from a database
+            result = result +  `
+            <li class=\'export-excel-expression-sheet-option\'>
+                <input type=\'checkbox\' checked=\"true\" name=\'expressionSheets\' value=\"Thorsen_2007_wt\" id=\'exportExcelExpression-Thorsen_2007_wt\' class=\'export-checkbox\' />
+                <label for=\'exportExcelExpression-Thorsen_2007_wt\' id=\'exportExcelExpression-Thorsen_2007_wt-label\' class=\'export-checkbox-label\' >
+                    Thorsen_2007_wt
+                </label>
+            </li>
+            <div class=\'expression-db-loader\'></div>
+            <div class=\'expression-db-loader-text\'>Expression Database is Loading</div>
+            `;
+        } else if (source === "Barreto_2012") {
+            // if the source is from a database
+            result = result + `
+            <li class=\'export-excel-expression-sheet-option\'>
+                <input type=\'checkbox\' checked=\"true\" name=\'expressionSheets\' value=\"Barreto_2012_wt\" id=\'exportExcelExpression-Barreto_2012_wt\' class=\'export-checkbox\' />
+                <label for=\'exportExcelExpression-Barreto_2012_wt\' id=\'exportExcelExpression-Barreto_2012_wt-label\' class=\'export-checkbox-label\' >
+                Barreto_2012_wt
+                </label>
+            </li>
+            <div class=\'expression-db-loader\'></div>
+            <div class=\'expression-db-loader-text\'>Expression Database is Loading</div>
+            `;
         }
-    });
+        return result;
+    };
+
+    const handleExportExcelButtonContinue = () => {
+        const weight = $("input[name=network-weights]:checked")[0].value;
+        const source = $("input[name=expressionSource]:checked")[0].value;
+        $("#exportExcelForm1").remove();
+        // $("#exportExcelForm1")[0].style = "display:none;";
+        $("#exportExcelQuestions-containter").append(createHTMLforForm2);
+        $("#exportExcelExpressionSheets").html("Select Expression Sheets:");
+        $("#export-excel-expression-sheet-list").append(createHTMLforExpressionSheets(source));
+        $("#exportExcelButton").on("click", performExport("export-to-excel", "xlsx", weight, source));
+    };
+
+    var displayExportExcelModal = function () {
+        $("#exportExcelForm2").remove();
+        $("#exportExcelQuestions-containter").append(createHTMLforForm1);
+        $("#exportExcelNetwork").html("Select the workbooks export type:");
+        $("#export-excel-weights-list").append(createHTMLforWeights());
+
+        $("#exportExcelExpressionSources").html("Select the Expression Data Source:");
+        $("#exportExcelExpressionSource-userInput").html(grnState.name);
+        $("#exportExcelExpressionSource-Dahlquist").html("Dahlquist_2018");
+        $("#exportExcelExpressionSource-Kitagawa").html("Kitagawa_2002");
+        $("#exportExcelExpressionSource-Thorsen").html("Thorsen_2007");
+        $("#exportExcelExpressionSource-Barreto").html("Barreto_2012");
+        $("#exportExcelContinueButton").on("click", () => handleExportExcelButtonContinue());
+        $("#exportExcelModal").modal("show");
+    };
+
+    var performExcelExport = function () {
+        return function () {
+            if (!$(this).parent().hasClass("disabled")) {
+                displayExportExcelModal();
+            }
+        };
+    };
+
+    // $("#exportAsExcelWkbk").click(performExport("export-to-excel", "xlsx", "unweighted"));
+    $("#exportAsUnweightedSif").on("click", performExport("export-to-sif", "sif", "unweighted"));
+    $("#exportAsWeightedSif").on("click", performExport("export-to-sif", "sif", "weighted"));
+    $("#exportAsUnweightedGraphMl").on("click", performExport("export-to-graphml", "graphml", "unweighted"));
+    $("#exportAsWeightedGraphMl").on("click", performExport("export-to-graphml", "graphml", "weighted"));
+    // $("#exportAsUnweightedExcel").on("click", performExport("export-to-excel", "xlsx", "unweighted"));
+    // $("#exportAsWeightedExcel").on("click", performExport("export-to-excel", "xlsx", "weighted"));
+    $("#exportAsExcel").on("click", performExcelExport());
 
 };