grnsight 4.0.0 → 6.0.0

package/web-client/public/gene/info.js

@@ -28,11 +28,16 @@
         }, 200);
     });
 
-    const search = location.search.substring(1);
+    // object for gene page API calls
+    // Thank you https://gist.github.com/pirate/9298155edda679510723
+    const query = new URLSearchParams(location.search);
     const obj = {
-        symbol: search.match(/symbol=(.*?)(?=&)/)[1],
-        species: search.match(/species=(.*?)(?=&)/)[1],
-        taxon: search.match(/taxon=(.*?)/)[1]
+        symbol: query.get("symbol"),
+        species: query.get("species"),
+        jaspar: query.get("jaspar"),
+        uniprot: query.get("uniprot"),
+        ensembl: query.get("ensembl"),
+        mine: query.get("mine")
     };
 
     document.title = "GRNsight - " + obj.symbol;
@@ -60,11 +65,17 @@
             $(".ncbi-link").attr({ href: ncbiHrefTemplate + ncbiId });
         }
 
-        const ensemblHrefTemplate = "https://www.ensembl.org/Saccharomyces_cerevisiae/Gene/Summary?g=";
+        const ensemblHrefTemplate = "https://www.ensembl.org/" + obj.species + "/Gene/Summary?g=";
+        const ensemblPlantHrefTemplate = "https://www.plants.ensembl.org/ " + obj.species + "/Gene/Summary?g=";
         const ensemblId = locusTag;
+        // console.log("ensembl id: " + ensemblId)
         $(".ensembl-link").text(ensemblId);
         if (ensemblId !== "Not found") {
-            $(".ensembl-link").attr({ href: ensemblHrefTemplate + ensemblId });
+            if ( obj.ensembl === "plant") {
+                $(".ensembl-link").attr({ href: ensemblPlantHrefTemplate + ensemblId });
+            } else {
+                $(".ensembl-link").attr({ href: ensemblHrefTemplate + ensemblId });
+            }
         }
 
         const uniprotHrefTemplate = "http://www.uniprot.org/uniprot/";
@@ -86,8 +97,8 @@
         $(".geneDescription").text(geneDescription).attr({ href: sgdHrefTemplate + geneDescription });
 
 
-        const uniSpecies = gene.uniprot.species;
-        $(".uniProtSpecies").text(uniSpecies).attr({ href: uniprotHrefTemplate + uniSpecies });
+        const GRNSightSpecies = obj.species.replace("_", " "); // change to make species display work
+        $(".uniProtSpecies").text(GRNSightSpecies).attr({ href: uniprotHrefTemplate + GRNSightSpecies });
 
         // This has been moved to top of function
         $(".ncbiLocusTag").text(locusTag).attr({ href: ncbiHrefTemplate + locusTag });

package/web-client/public/js/api/grnsight-api.js

@@ -0,0 +1,124 @@
+import {responseCustomWorkbookData} from "../setup-load-and-import-handlers";
+
+// Expression DB Access Functions
+const buildExpressionTimepointsString = function (selection) {
+    let timepoints = "";
+    selection.timepoints.forEach(x => timepoints += (x + ","));
+    return timepoints.substring(0, timepoints.length - 1);
+};
+const buildExpressionGeneQuery = function (workbookGenes) {
+    let genes = "";
+    workbookGenes.forEach(x => genes += (x.name + ","));
+    return genes.substring(0, genes.length - 1);
+};
+
+const buildExpressionURL = function (selection, genes) {
+    const baseQuery = `expressiondb?dataset=${selection.dataset}&genes=${buildExpressionGeneQuery(genes)}`;
+    return selection.timepoints ?
+    `${baseQuery}&timepoints=${buildExpressionTimepointsString(selection)}` :
+    baseQuery;
+};
+
+const responseExpressionData = (formData, queryURL) => {
+    return new Promise(function (resolve) {
+        const uploadRoute = queryURL;
+        const fullUrl = [ $(".service-root").val(), uploadRoute ].join("/");
+        (formData ?
+            $.ajax({
+                url: fullUrl,
+                data: formData,
+                processData: false,
+                contentType: false,
+                type: "GET",
+                crossDomain: true
+            }) :
+            $.getJSON(fullUrl)
+            ).done((expressionData) => {
+                resolve(expressionData);
+            }).error(console.log("Error in accessing expression database. Result may just be loading."));
+    });
+};
+
+const queryExpressionDatabase = (query) => {
+    let queryURL = buildExpressionURL({dataset: query.dataset}, query.genes);
+    return responseExpressionData("", queryURL);
+};
+
+// Network DB Access Functions
+
+const buildNetworkGenesQuery = (genes) => {
+    let result = "";
+    for (let gene in genes) {
+        result += `${gene},`;
+    }
+    return result.substring(0, result.length - 1);
+};
+
+const buildNetworkURL = function (queryType, queryInfo) {
+    let baseQuery = `networkdb?type=${queryType}`;
+    if (queryInfo !== null) {
+        for (let header in queryInfo) {
+            if (header === "genes") {
+                baseQuery += `&${header}=${buildNetworkGenesQuery(queryInfo[header])}`;
+            } else {
+                baseQuery += `&${header}=${queryInfo[header]}`;
+            }
+        }
+    }
+    return baseQuery;
+};
+
+const responseNetworkData = (formData, queryURL) => {
+    return new Promise(function (resolve) {
+        const uploadRoute = queryURL;
+        const fullUrl = [ $(".service-root").val(), uploadRoute ].join("/");
+        (formData ?
+            $.ajax({
+                url: fullUrl,
+                data: formData,
+                processData: false,
+                contentType: false,
+                type: "GET",
+                crossDomain: true
+            }) :
+            $.getJSON(fullUrl)
+            ).done((networkData) => {
+                resolve(networkData);
+            }).error(console.log("Error in accessing network database. Result may just be loading."));
+    });
+};
+
+const queryNetworkDatabase = (query) => {
+    let queryURL = buildNetworkURL(query.type, query.info);
+    return responseNetworkData("", queryURL);
+};
+
+// Upload Custom Workbook Functions
+const buildCustomWorkbookURL = (name, genes, links) => {
+    let baseQuery = `upload-custom-workbook?name=${name}`;
+    let genesString = "";
+    let linksString = "";
+    let genesByIndex = {};
+    let i = 0;
+    for (let gene in genes) {
+        genesString += `${genes[gene]},`;
+        genesByIndex[gene] = i;
+        i++;
+    }
+    for (let regulator in links) {
+        for (let target of links[regulator]) {
+            linksString += `${genesByIndex[regulator]}->${genesByIndex[target]},`;
+        }
+    }
+    baseQuery += `&genes=${genesString.substring(0, genesString.length - 1)}`;
+    baseQuery += `&links=${linksString.substring(0, linksString.length - 1)}`;
+    return baseQuery;
+};
+
+const uploadCustomWorkbook = (workbook, grnState) => {
+    let queryURL = buildCustomWorkbookURL(workbook.name, workbook.genes, workbook.links);
+    return responseCustomWorkbookData(grnState, queryURL, workbook.name);
+};
+
+
+export {queryExpressionDatabase, queryNetworkDatabase, uploadCustomWorkbook};

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

@@ -1,19 +1,37 @@
+export const HOST_SITE = "https://dondi.github.io";
+
+export const FILE_NAME = "#fileName";
+
 export const GREY_EDGES_DASHED_MENU = "#grey-edges-dashed-menu";
 export const GREY_EDGES_DASHED_SIDEBAR = "#dashedGrayLineButton";
 
-export const UNWEIGHTED_DEMO_ID   = "#unweighted";
+export const CREATE_NETWORK_CLASS = ".create-network";
+export const CREATE_NETWORK_MODAL = "#createNetworkModal";
+
+export const UNWEIGHTED_DEMO_ID   = ".unweighted";
 export const UNWEIGHTED_DEMO_PATH = "demo/unweighted";
-export const UNWEIGHTED_DEMO_NAME = "Demo #1: Unweighted GRN (21 genes, 50 edges)";
-export const WEIGHTED_DEMO_ID     = "#weighted";
+export const UNWEIGHTED_DEMO_NAME = "Demo #1: Unweighted GRN (15 genes, 28 edges)";
+export const WEIGHTED_DEMO_ID     = ".weighted";
 export const WEIGHTED_DEMO_PATH   = "demo/weighted";
-export const WEIGHTED_DEMO_NAME   = "Demo #2: Weighted GRN (21 genes, 50 edges, Dahlquist Lab unpublished data)";
-export const SCHADE_INPUT_ID      = "#schadeInput";
+export const WEIGHTED_DEMO_NAME   = "Demo #2: Weighted GRN (15 genes, 28 edges, Dahlquist Lab unpublished data)";
+export const SCHADE_INPUT_ID      = ".schadeInput";
 export const SCHADE_INPUT_PATH    = "demo/schadeInput";
 export const SCHADE_INPUT_NAME    = "Demo #3: Unweighted GRN (21 genes, 31 edges)";
-export const SCHADE_OUTPUT_ID     = "#schadeOutput";
-export const SCHADE_OUTPUT_PATH   = "demo/schadeOutput";
+export const SCHADE_OUTPUT_ID     = ".schadeOutput";
+export const SCHADE_OUTPUT_PATH = "demo/schadeOutput";
 export const SCHADE_OUTPUT_NAME   = "Demo #4: Weighted GRN (21 genes, 31 edges, Schade et al. 2004 data)";
 
+export const EXPORT_TO_EXCEL            = "#exportAsExcelWkbk";
+export const EXPORT_TO_UNWEIGHTED_SIF   = "#exportAsUnweightedSif";
+export const EXPORT_TO_WEIGHTED_SIF     = "#exportAsWeightedSif";
+export const EXPORT_TO_UNWEIGHTED_GML   = "#exportAsUnweightedGraphMl";
+export const EXPORT_TO_WEIGHTED_GML     = "#exportAsWeightedGraphMl";
+export const EXPORT_TO_PNG              = "#exportAsPng";
+export const EXPORT_TO_SVG              = "#exportAsSvg";
+export const EXPORT_TO_PDF              = "#exportAsPdf";
+export const EXPORT_WEIGHTED_CLASS      = ".weighted.export";
+export const EXPRESSION_SOURCE          = "#expressionSource";
+
 export const DEMO_INFORMATION = [
     [ WEIGHTED_DEMO_ID,   WEIGHTED_DEMO_PATH,   WEIGHTED_DEMO_NAME   ],
     [ UNWEIGHTED_DEMO_ID, UNWEIGHTED_DEMO_PATH, UNWEIGHTED_DEMO_NAME ],
@@ -24,7 +42,7 @@ export const DEMO_INFORMATION = [
 export const MIN_EDGE_WEIGHT_NORMALIZATION      = 0.0001;
 export const MAX_EDGE_WEIGHT_NORMALIZATION      = 1000;
 
-export const DEFAULT_ZOOM_VALUE                 = 4;
+export const DEFAULT_ZOOM_VALUE                 = 100;
 
 export const GREY_EDGE_THRESHOLD_MENU           = "#gray-edge-threshold-menu";
 export const GREY_EDGE_THRESHOLD_SLIDER_SIDEBAR = "#grayThresholdInput";
@@ -50,9 +68,10 @@ export const SHOW_WEIGHTS_MOUSEOVER             = "showWeightsMouseover";
 export const SHOW_ALL_WEIGHTS                   = "showAllWeights";
 export const HIDE_ALL_WEIGHTS                   = "hideAllWeights";
 
-export const COLOR_EDGES                        = "#colorEdges";
-export const BLACK_EDGES                        = "#blackEdges";
+export const COLOR_EDGES                        = ".colorEdges";
 export const ACTIVE_COLOR_OPTION                = "active";
+export const COLOR_EDGES_MENU                   = "#colorEdges";
+export const COLOR_EDGES_SIDEBAR                = "#colorEdgesSidebar";
 
 export const GRAVITY_LENGTH_WITHOUT_ZERO = 3;
 export const LOCK_SLIDERS_CLASS          = ".lockSliders";
@@ -79,17 +98,33 @@ export const CHARGE_DEFAULT_VALUE       = -50;
 
 export const GRID_LAYOUT                = "GRID_LAYOUT";
 export const FORCE_GRAPH                = "FORCE_GRAPH";
+export const FORCE_GRAPH_BUTTON         = "#forceGraphButton";
 export const GRID_LAYOUT_BUTTON         = "#gridLayoutButton";
-export const FORCE_GRAPH_CLASS          = "#forceGraph";
-export const GRID_LAYOUT_CLASS          = "#gridLayout";
+export const FORCE_GRAPH_MENU          = "#forceGraph";
+export const GRID_LAYOUT_MENU          = "#gridLayout";
 
 export const MINIMUM_MAX_LOG_FOLD_CHANGE                = 0;
 export const MAXIMUM_MAX_LOG_FOLD_CHANGE                = 100;
 export const DEFAULT_MAX_LOG_FOLD_CHANGE                = 3;
 export const MAX_NUM_CHARACTERS_DROPDOWN                = 24;
+export const LAYOUT_SIDEBAR_PANEL                       = "#layoutSidebarPanel";
+export const EDGE_WEIGHT_MENU_CLASS                     = ".weightedGraphOptionsMenu";
+export const EDGE_WEIGHT_SIDEBAR                        = ".edge-weight-sidebar";
+export const EDGE_WEIGHT_SIDEBAR_HEADER_LINK            = "#edgeWeightHeaderLink";
+export const EXPRESSION_DB_MENU                         = ".data-sidebar";
+export const EXPRESSION_DB_MENU_HEADER_LINK             = "#dataSidebarLink";
+export const EXPRESSION_DB_SIDEBAR_PANEL                = "#dataSidebarPanel";
+export const EXPRESSION_DB_LOADER                       = ".expression-db-loader";
+export const EXPRESSION_DB_LOADER_TEXT                  = ".expression-db-loader-text";
+export const DATA_SET_SELECT                            = "#data-set-select";
 export const NODE_COLORING_MENU                         = ".node-coloring";
 export const NODE_COLORING_MENU_CLASS                   = ".node-coloring-menu";
-export const NODE_COLORING_TOGGLE_SIDEBAR               = "#nodeColoringToggle";
+export const NODE_COLORING_SIDEBAR_PANEL                = "#nodeColoringSidebarPanel";
+export const NODE_COLORING_SIDEBAR_HEADER_LINK          = "#nodeColoringHeaderLink";
+export const NODE_COLORING_SIDEBAR_BODY                 = ".nodeColoringSidebarBody";
+export const DATA_SIDEBAR_BODY                          = ".dataSidebarBody";
+export const NODE_COLORING_SIDEBAR_HEADER               = "#sidebarPanelHeader";
+export const NODE_COLORING_TOGGLE_SIDEBAR               = "#nodeColoringToggleSidebar";
 export const AVG_REPLICATE_VALS_BOTTOM_SIDEBAR          = "#averageDataBottom";
 export const AVG_REPLICATE_VALS_TOP_SIDEBAR             = "#averageDataTop";
 export const AVG_REPLICATE_VALS_TOP_MENU                = "#averageDataTopMenu";
@@ -97,6 +132,7 @@ export const AVG_REPLICATE_VALS_BOTTOM_MENU             = "#averageDataBottomMen
 export const NODE_COLORING_TOGGLE_MENU                  = "#node-coloring-toggle-menu";
 export const NODE_COLORING_TOGGLE_CLASS                 = ".nodeColoringToggle";
 export const LOG_FOLD_CHANGE_MAX_VALUE_CLASS            = ".logFoldChangeMaxValue";
+export const LOG_FOLD_CHANGE_MAX_VALUE_HEADER           = "#logFoldChangeMaxValue";
 export const LOG_FOLD_CHANGE_MAX_VALUE_SIDEBAR_INPUT    = "#log-fold-change-max-value-sidebar";
 export const LOG_FOLD_CHANGE_MAX_VALUE_SIDEBAR_BUTTON   = "#log-fold-change-button";
 export const LOG_FOLD_CHANGE_MAX_VALUE_MENU             = "#log-fold-change-max-value-menu";
@@ -106,7 +142,44 @@ export const TOP_DATASET_SELECTION_SIDEBAR              = "#dataset-top";
 export const BOTTOM_DATASET_SELECTION_MENU              = "#bottomDatasetDropdownMenu";
 export const BOTTOM_DATASET_SELECTION_SIDEBAR           = "#dataset-bottom";
 
-export const ZOOM_CONTROL = ".zoom";
-export const ZOOM_SLIDER = "#zoomSlider";
-export const ZOOM_INPUT = "#zoomInput";
-export const ZOOM_PERCENT = "#zoomPercent";
+export const SPECIES_IDENTIFIED_NAME                    = "#speciesName";
+export const SPECIES_DISPLAY                            = "#speciesDropdown";
+export const SPECIES_BUTTON_YEAST                       = "#Saccharomyces_cerevisiae";
+export const SPECIES_BUTTON_HUMAN                       = "#Homo_sapiens";
+export const SPECIES_BUTTON_FLY                         = "#Drosophila_melanogaster";
+export const SPECIES_BUTTON_NEMATODE                    = "#Caenorhabditis_elegans";
+export const SPECIES_BUTTON_MOUSE                       = "#Mus_musculus";
+export const SPECIES_BUTTON_CRESS                       = "#Arabidopsis_thaliana";
+
+export const NODE_COLORING_USING_EXPRESSION_DATA        = "#expressionDB";
+
+export const ZOOM_CONTROL                               = ".zoom";
+export const ZOOM_DISPLAY_MAXIMUM_SELECTOR              = ".maximum-zoom-display";
+export const ZOOM_DISPLAY_MAXIMUM_VALUE                 = 200;
+export const ZOOM_DISPLAY_MINIMUM_SELECTOR              = ".minimum-zoom-display";
+export const ZOOM_DISPLAY_MINIMUM_VALUE                 = 25;
+export const ZOOM_DISPLAY_MIDDLE                        = 100;
+export const ZOOM_ADAPTIVE_MAX_SCALE                    = 4;
+export const ZOOM_SLIDER                                = "#zoomSlider";
+export const ZOOM_INPUT                                 = "#zoomInput";
+export const ZOOM_PERCENT                               = "#zoomPercent";
+
+export const VIEWPORT_INIT                              = "containerInit";
+export const VIEWPORT_FIT                               = "containerFit";
+export const VIEWPORT_S                               = "containerS";
+export const VIEWPORT_M                               = "containerM";
+export const VIEWPORT_L                               = "containerL";
+
+export const VIEWPORT_SIZE_S_DROPDOWN                   = "#viewport-size-s";
+export const VIEWPORT_SIZE_M_DROPDOWN                   = "#viewport-size-m";
+export const VIEWPORT_SIZE_L_DROPDOWN                   = "#viewport-size-l";
+export const VIEWPORT_SIZE_FIT_DROPDOWN                 = "#viewport-size-fit";
+export const VIEWPORT_SIZE_S_SIDEBAR                    = "#boundBoxS";
+export const VIEWPORT_SIZE_M_SIDEBAR                    = "#boundBoxM";
+export const VIEWPORT_SIZE_L_SIDEBAR                    = "#boundBoxL";
+export const VIEWPORT_SIZE_FIT_SIDEBAR                  = "#boundBoxFit";
+export const VIEWPORT_OPTION_CLASS                      = ".viewportOption";
+export const VIEWPORT_OPTION_CLASS_SIDEBAR              = ".boundBoxSize";
+
+
+

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

@@ -0,0 +1,195 @@
+import {CREATE_NETWORK_CLASS, CREATE_NETWORK_MODAL} from "./constants";
+import { queryNetworkDatabase, uploadCustomWorkbook } from "./api/grnsight-api";
+import { grnState } from "./grnstate";
+
+export const createNetwork = function () {
+    const createHTMLforForm = (sources) => {
+        let result =  `
+            <div id=\'createNetworkFormContainer\' '>
+                <h2 id=\'createNetwork\'>Create Network</h2>
+        <div class=\'form-group\'>
+            <label for=\'network-source\' id=\'network-source-label\'>Network Source</label>
+            <select class=\'network-dropdown btn btn-default\' id=\'network-source\'>
+            `;
+        if (sources.length !== 1) {
+            result += "<option value=\'none\' selected=\'true\' disabled>Select Network Source</option>";
+            for (let source in sources) {
+                result += `
+                            <option value=\'${sources[source]}\'>${sources[source]}</option>
+                `;
+            }
+        } else {
+            result += `
+                        <option value=\'${sources[0]}\' selected=\'true\' disabled hidden>${sources[0]}</option>
+            `;
+        }
+        result += `</select>
+                   <p>Warning: changing network source will remove all current genes in network</p>
+                </div>
+        <div class=\'form-group\' id=\'getNetworkGenesForm\'>
+            <form id=\'getNetworkGenesForm\'>
+                <label for=\'network-search-bar\' id=\'network-source-label\'>Select genes</label>
+                <input type=\'text\' id=\'network-search-bar\' name=\'network-search-bar\'></input>
+                <button id=\'enter-search\' type=\'submit\' class=\'search-button btn btn-default\'>
+                    <span class=\'glyphicon glyphicon-search\'></span>
+                </button>
+            </form>
+        </div>
+        <div id=\'selected-genes-container\'>
+            <div id=\'selected-genes\'>
+                <p>Added genes go here! Click on a gene to remove it</p>
+            </div>
+        </div>
+        <button id=\'submit-network\' class=\'btn btn-default\'>Create Network</input>
+            </div>
+        `;
+        return result;
+    };
+    const createGeneButtons = function () {
+        let result =  `<div id=\'selected-genes\'>
+                        <p>Added genes go below! Click on a gene to remove it.</p>
+                        <div id=\'custom-network-genes-container\'>
+        `;
+        for (let gene in grnState.customWorkbook.genes) {
+            result += `
+                <div class=\'custom-network-gene\' id=${gene}>
+                    <p class=\'custom-network-gene-display-id\'>
+                        ${grnState.customWorkbook.genes[gene]}
+                    </p>
+                    <p class=\'custom-network-gene-id\'>
+                        (${gene})
+                    </p>
+                </div>
+            `;
+        }
+
+        result += "</div></div>";
+        return result;
+    };
+    const displayCurrentGenes = function () {
+        $("#selected-genes").remove();
+        $("#selected-genes-container").append(createGeneButtons());
+        for (let gene in grnState.customWorkbook.genes) {
+            $(`#${gene}`).on("click", (ev) => {
+                ev.stopPropagation();
+                $(`#${gene}`).remove();
+                delete grnState.customWorkbook.genes[gene];
+            });
+        }
+    };
+
+    const addGene = function () {
+        let gene = `${$("#network-search-bar").val()}`.toUpperCase();
+        $("#network-search-bar").val("");
+        if (!(/^[A-Z0-9_-]{1,12}$/.test(gene))) {
+            alert(`Gene: ${gene} is not to GRNsight specifications. Genes must be 12 characters or less,
+containing "-", "_", and alpha-numeric characters only`);
+        } else {
+            let source = grnState.customWorkbook.source;
+            let headers = {
+                type:"NetworkGeneFromSource",
+                info: {
+                    gene: gene,
+                    source:grnState.customWorkbook.sources[source].source,
+                    timestamp:grnState.customWorkbook.sources[source].timestamp.substring(0, 19).replace("T", " ")
+                }
+            };
+            queryNetworkDatabase(headers).then(function (response) {
+                if (response.geneId !== null && response.displayGeneId !== null) {
+                    grnState.customWorkbook.genes[response.geneId] = response.displayGeneId;
+                    displayCurrentGenes();
+                } else {
+                    alert(`Gene: ${gene} was not found in this database. Please check for any typos and try again.`);
+                }
+            }).catch(function (error) {
+                console.log(error.stack);
+                console.log(error.name);
+                console.log(error.message);
+            });
+
+        }
+    };
+
+    const displayCreateNetworkModal = function () {
+        $("#createNetworkFormContainer").remove();
+        grnState.customWorkbook = {
+            genes : {},
+            source : null
+        };
+    // get sources from database
+        queryNetworkDatabase({type:"NetworkSource", info:null}).then(function (response) {
+            $("#createNetworkQuestions-container").append(createHTMLforForm(Object.keys(response.sources)));
+            grnState.customWorkbook.sources = response.sources;
+            grnState.customWorkbook.source = Object.keys(response.sources).length === 1 ?
+                Object.keys(response.sources)[0] : null;
+        }).catch(function (error) {
+            console.log(error.stack);
+            console.log(error.name);
+            console.log(error.message);
+        });
+        $(CREATE_NETWORK_MODAL).modal("show");
+    };
+
+    $("body").on("click", CREATE_NETWORK_CLASS, function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        displayCreateNetworkModal();
+    });
+
+    $("body").on("change", "#network-source", function (event) {
+        grnState.customWorkbook.source = $("#network-source").val();
+        grnState.customWorkbook.genes = {};
+        event.stopPropagation();
+        displayCurrentGenes();
+    });
+    $("body").on("click", "#submit-network", function () {
+        let genesAmount = Object.keys(grnState.customWorkbook.genes).length;
+        if (genesAmount === 0 ) {
+            alert("Network must have at least 1 gene");
+        } else if (genesAmount > 75) {
+            alert(`GRNsight is only capable of handling 75 genes at most. Your proposed network contains
+ ${genesAmount} genes. Please remove some genes from your proposed network.`);
+        } else {
+
+            let source = grnState.customWorkbook.source;
+            let headers = {
+                type:"CreateNetwork",
+                info: {
+                    genes: grnState.customWorkbook.genes,
+                    source:grnState.customWorkbook.sources[source].source,
+                    timestamp:grnState.customWorkbook.sources[source].timestamp.substring(0, 19).replace("T", " ")
+                }
+            };
+            queryNetworkDatabase(headers).then(function (response) {
+                grnState.customWorkbook.links = response.links;
+                let genes = grnState.customWorkbook.genes;
+                let links = grnState.customWorkbook.links;
+                let genesAmount = Object.keys(genes).length;
+                let edgesAmount = Object.keys(links).length;
+                if (edgesAmount > 100) {
+                    alert(`GRNsight is only capable of handling 100 edges at most. Your proposed network contains
+ ${edgesAmount} regulatory connections. Please remove some genes from your proposed network.`);
+                } else {
+                    let name = `Custom Workbook: UnweightedGRN(${genesAmount} genes, ${edgesAmount} edges)`;
+                    let workbook = {name, genes, links};
+                    uploadCustomWorkbook(workbook, grnState);
+                    $(CREATE_NETWORK_MODAL).modal("hide");
+                }
+            }).catch(function (error) {
+                console.log(error.stack);
+                console.log(error.name);
+                console.log(error.message);
+            });
+        }
+    });
+
+    $("body").on("click", "#enter-search", function (event) {
+        try {
+            event.preventDefault();
+            event.stopPropagation();
+            addGene();
+        } catch (error) {
+            console.log(error);
+        }
+    });
+};

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

@@ -1,17 +1,17 @@
-var displayStatistics = function (network) { // eslint-disable-line no-unused-vars
+var displayStatistics = function (workbook) { // eslint-disable-line no-unused-vars
     var $container = $(".graph-statistics-container").removeClass("hidden");
     var $thead = $container.find("thead");
     var $tbody = $container.find("tbody").empty();
 
     // TODO Still quick-and-dirty, needs robustness and optimization.
     var betweennessCentralityFor = function (geneName) {
-        return network.graphStatisticsReport.betweennessCentrality.filter(function (bcItem) {
+        return workbook.graphStatisticsReport.betweennessCentrality.filter(function (bcItem) {
             return bcItem.gene.name === geneName;
         })[0].betweennessCentrality;
     };
 
     var shortestPath = function (sourceName, targetName) {
-        var rawResult = network.graphStatisticsReport.shortestPath.filter(function (spItem) {
+        var rawResult = workbook.graphStatisticsReport.shortestPath.filter(function (spItem) {
             return spItem.source === sourceName && spItem.pathData.target === targetName;
         })[0].pathData.shortestPath;
 
@@ -20,20 +20,20 @@ var displayStatistics = function (network) { // eslint-disable-line no-unused-va
 
     var populateHead = function () {
         $thead.find(".shortest-path-column-headers").empty().append(
-            network.genes.map(function (gene) {
+            workbook.genes.map(function (gene) {
                 return $("<th></th>").text(gene.name);
             })
         );
 
-        $thead.find(".shortest-path-header").attr({ colspan: network.genes.length });
+        $thead.find(".shortest-path-header").attr({ colspan: workbook.genes.length });
     };
 
     var populateBody = function () {
-        $tbody.append(network.genes.map(function (gene) {
+        $tbody.append(workbook.genes.map(function (gene) {
             return $("<tr></tr>")
                 .append($("<th></th>").text(gene.name))
                 .append($("<td></td>").text(betweennessCentralityFor(gene.name)))
-                .append(network.genes.map(function (targetGene) {
+                .append(workbook.genes.map(function (targetGene) {
                     return $("<td></td>").text(shortestPath(gene.name, targetGene.name));
                 }));
         }));