grnsight 5.1.0 → 6.0.4

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

@@ -50,6 +50,7 @@ export const grnState = {
     },
 
     set workbook (workbook) {
+        // console.dir(workbook);
         currentWorkbook = workbook;
         // TODO: add colorOptimal so that the rest of the normalization code can get added
         this.resetNormalizationMax = max(workbook.positiveWeights.concat(workbook.negativeWeights));
@@ -72,7 +73,7 @@ export const grnState = {
 // Node Coloring
     nodeColoring: {
         showMenu: false,
-        nodeColoringEnabled: true,
+        nodeColoringEnabled: undefined,
         logFoldChangeMaxValue: DEFAULT_MAX_LOG_FOLD_CHANGE,
         logFoldChangeUpdateTriggered: false,
         averageTopDataset: true,

package/web-client/public/js/setup-load-and-import-handlers.js

@@ -1,180 +1,212 @@
 import { updateApp } from "./update-app";
 
 import {
-    DEMO_INFORMATION,
-    UNWEIGHTED_DEMO_PATH,
-    WEIGHTED_DEMO_PATH,
-    SCHADE_INPUT_PATH,
-    SCHADE_OUTPUT_PATH,
-    WEIGHTED_DEMO_NAME,
-    UNWEIGHTED_DEMO_NAME,
-    SCHADE_INPUT_NAME,
-    SCHADE_OUTPUT_NAME,
+  DEMO_INFORMATION,
+  UNWEIGHTED_DEMO_PATH,
+  WEIGHTED_DEMO_PATH,
+  SCHADE_INPUT_PATH,
+  SCHADE_OUTPUT_PATH,
+  WEIGHTED_DEMO_NAME,
+  UNWEIGHTED_DEMO_NAME,
+  SCHADE_INPUT_NAME,
+  SCHADE_OUTPUT_NAME,
 } from "./constants";
+import { getWorkbookFromForm, getWorkbookFromUrl } from "./api/grnsight-api";
 
-const demoFiles = [UNWEIGHTED_DEMO_PATH, WEIGHTED_DEMO_PATH, SCHADE_INPUT_PATH, SCHADE_OUTPUT_PATH];
+const demoFiles = [
+  UNWEIGHTED_DEMO_PATH,
+  WEIGHTED_DEMO_PATH,
+  SCHADE_INPUT_PATH,
+  SCHADE_OUTPUT_PATH,
+];
 
-const submittedFilename = $upload => {
-    let path = $upload.val();
-    let fakePathCheck = path.search("\\\\") + 1;
+const submittedFilename = ($upload) => {
+  let path = $upload.val();
+  let fakePathCheck = path.search("\\\\") + 1;
 
-    while (fakePathCheck) {
-        path = path.substring(fakePathCheck);
-        fakePathCheck = path.search("\\\\") + 1;
-    }
+  while (fakePathCheck) {
+    path = path.substring(fakePathCheck);
+    fakePathCheck = path.search("\\\\") + 1;
+  }
 
-    return path;
+  return path;
 };
 
-const createFileForm = $upload => {
-    const formData = new FormData();
-    formData.append("file", $upload[0].files[0]);
-    return formData;
+const createFileForm = ($upload) => {
+  const formData = new FormData();
+  formData.append("file", $upload[0].files[0]);
+  return formData;
 };
 
-const uploadEpilogue = event => {
-    if (window.ga) {
-        window.ga("send", "pageview", {
-            page: "/GRNsight/upload",
-            sessionControl: "start"
-        });
-    }
+const uploadEpilogue = (event) => {
+  if (window.ga) {
+    window.ga("send", "pageview", {
+      page: "/GRNsight/upload",
+      sessionControl: "start",
+    });
+  }
 
-    $("a.upload > input[type=file]").val("");
-    event.preventDefault();
+  $("a.upload > input[type=file]").val("");
+  event.preventDefault();
 };
-const disableUpload = state => {
-    $("#upload").attr("disabled", state);
-    $("#upload-sif").attr("disabled", state);
-    $("#upload-graphml").attr("disabled", state);
+const disableUpload = (state) => {
+  $(".upload").attr("disabled", state);
+  $(".upload-sif").attr("disabled", state);
+  $(".upload-graphml").attr("disabled", state);
 };
 
 const uploadHandler = (uploader) => {
-    return function (event) { // Must be `function` due to use of `this`.
-        const $upload = $(this);
-        const filename = submittedFilename($upload); // TODO: remove before master release (beta@4.0.6)
-        if ($upload[0].files[0].size < 2000000) {
-            // disable upload button to prevent multiple uploads
-            disableUpload(true);
-            const formData = createFileForm($upload);
-            uploader(filename, formData);
-            uploadEpilogue(event);
-        } else {
-            let errorString = "The file uploaded is too large. Please try again with a file smaller than 1 MB.";
-            $("#error").html(errorString);
-            $("#errorModal").modal("show");
-        }
-    };
-};
-
-const workbookErrorDisplayer = xhr => {
-    // re-enable upload button
-    disableUpload(false);
-    // Deleted status, error for argument because it was never used
-    const err = JSON.parse(xhr.responseText);
-    let errorString = "Your graph failed to load.<br><br>";
-
-    if (!err.errors) { // will be falsy if an error was thrown before the workbook was generated
-        errorString += err;
+  return function(event) {
+    // Must be `function` due to use of `this`.
+    const $upload = $(this);
+    const filename = submittedFilename($upload); // TODO: remove before master release (beta@4.0.6)
+    if ($upload[0].files[0].size < 2000000) {
+      // disable upload button to prevent multiple uploads
+      disableUpload(true);
+      const formData = createFileForm($upload);
+      uploader(filename, formData);
+      uploadEpilogue(event);
     } else {
-        errorString = err.errors.reduce(
-            (currentErrorString, currentError) =>
-                `${currentErrorString}${currentError.possibleCause} ${currentError.suggestedFix}<br><br>`,
-
-            errorString
-        );
+      let errorString =
+        "The file uploaded is too large. Please try again with a file smaller than 1 MB.";
+      $("#error").html(errorString);
+      $("#errorModal").modal("show");
     }
+  };
+};
 
-    $("#error").html(errorString);
-    $("#errorModal").modal("show");
+const workbookErrorDisplayer = (xhr) => {
+  // re-enable upload button
+  disableUpload(false);
+  // Deleted status, error for argument because it was never used
+  const err = JSON.parse(xhr.responseText);
+  let errorString = "Your graph failed to load.<br><br>";
+
+  if (!err.errors) {
+    // will be falsy if an error was thrown before the workbook was generated
+    errorString += err;
+  } else {
+    errorString = err.errors.reduce(
+      (currentErrorString, currentError) =>
+        `${currentErrorString}${currentError.possibleCause} ${currentError.suggestedFix}<br><br>`,
+
+      errorString
+    );
+  }
+
+  $("#error").html(errorString);
+  $("#errorModal").modal("show");
 };
 
-let reloader = () => { };
-
-const returnUploadRoute = filename => {
-    if (demoFiles.indexOf(filename) !== -1) {
-        return filename;
-    } else if (filename.includes(".xlsx")) {
-        return "upload";
-    } else if (filename.includes(".sif")) {
-        return "upload-sif";
-    } else if (filename.includes(".graphml")) {
-        return "upload-graphml";
-    }
+let reloader = () => {};
+
+const returnUploadRoute = (filename) => {
+  if (demoFiles.indexOf(filename) !== -1) {
+    return filename;
+  } else if (filename.includes(".xlsx")) {
+    return "upload";
+  } else if (filename.includes(".sif")) {
+    return "upload-sif";
+  } else if (filename.includes(".graphml")) {
+    return "upload-graphml";
+  }
 };
 
-export const setupLoadAndImportHandlers = grnState => {
-    const loadGrn = (name, formData) => {
-        const uploadRoute = returnUploadRoute(name);
-        const fullUrl = [ $("#service-root").val(), uploadRoute ].join("/");
-        // The presence of formData is taken to indicate a POST.
-        (formData ?
-            $.ajax({
-                url: fullUrl,
-                data: formData,
-                processData: false,
-                contentType: false,
-                type: "POST",
-                crossDomain: true
-            }) :
-            $.getJSON(fullUrl)
-            ).done((workbook, textStatus, jqXhr) => {
-                grnState.name = name || jqXhr.getResponseHeader("X-GRNsight-Filename");
-                if (demoFiles.indexOf(name) > -1) {
-                    switch (name) {
-                    case WEIGHTED_DEMO_PATH:
-                        grnState.name = WEIGHTED_DEMO_NAME;
-                        break;
-                    case UNWEIGHTED_DEMO_PATH:
-                        grnState.name = UNWEIGHTED_DEMO_NAME;
-                        break;
-                    case SCHADE_INPUT_PATH:
-                        grnState.name = SCHADE_INPUT_NAME;
-                        break;
-                    case SCHADE_OUTPUT_PATH:
-                        grnState.name = SCHADE_OUTPUT_NAME;
-                        break;
-                    }
-                }
-                grnState.workbook = workbook;
-                if (uploadRoute !== "upload") {
-                    grnState.annotateLinks();
-                }
-                reloader = () => loadGrn(name, formData);
-                // re-enable upload button
-                disableUpload(false);
-                updateApp(grnState);
-                // displayStatistics(workbook);
-
-            }).error(workbookErrorDisplayer);
-    };
-    /*
-     * Thanks to http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery
-     * for helping to resolve this.
-     */
-
-    $("#upload").change(uploadHandler(loadGrn));
-
-    const loadDemo = url => {
-        loadGrn(url);
-        reloader = () => loadGrn(url);
-
-        $("a.upload > input[type=file]").val("");
-    };
-
-    const initializeDemoFile = (demoId, demoPath, demoName) => {
-        // Deleted parameter `event`
-        $(demoId).on("click", () => loadDemo(demoPath, demoName));
-    };
-
-    DEMO_INFORMATION.forEach(demoInfo => initializeDemoFile.apply(null, demoInfo));
-
-    $("#reload").click(function () {
-        // Deleted `event` parameter but need `function` because of `this`.
-        if (!$(this).parent().hasClass("disabled")) {
-            if ($.isFunction(reloader)) {
-                reloader();
-            }
+export const setupLoadAndImportHandlers = (grnState) => {
+  const loadGrn = (name, formData) => {
+    const uploadRoute = returnUploadRoute(name);
+    // The presence of formData is taken to indicate a POST.
+    getWorkbookFromForm(formData, uploadRoute)
+      .done((workbook, textStatus, jqXhr) => {
+        grnState.name = name || jqXhr.getResponseHeader("X-GRNsight-Filename");
+        if (demoFiles.indexOf(name) > -1) {
+          switch (name) {
+            case WEIGHTED_DEMO_PATH:
+              grnState.name = WEIGHTED_DEMO_NAME;
+              break;
+            case UNWEIGHTED_DEMO_PATH:
+              grnState.name = UNWEIGHTED_DEMO_NAME;
+              break;
+            case SCHADE_INPUT_PATH:
+              grnState.name = SCHADE_INPUT_NAME;
+              break;
+            case SCHADE_OUTPUT_PATH:
+              grnState.name = SCHADE_OUTPUT_NAME;
+          }
+        }
+        grnState.workbook = workbook;
+        grnState.workbook.expressionNames = Object.keys(workbook.expression);
+        if (uploadRoute !== "upload") {
+          grnState.annotateLinks();
         }
+        reloader = () => loadGrn(name, formData);
+        // re-enable upload button
+        disableUpload(false);
+        updateApp(grnState);
+        // displayStatistics(workbook);
+      })
+      .error(workbookErrorDisplayer);
+  };
+  /*
+   * Thanks to http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery
+   * for helping to resolve this.
+   */
+
+  // $(".upload").change(uploadHandler(loadGrn));
+  $("body").on("change", ".upload", uploadHandler(loadGrn));
+  const loadDemo = (url, value) => {
+    $("#demoSourceDropdown option[value='" + value.substring(1) + "']").prop(
+      "selected",
+      true
+    );
+    loadGrn(url);
+    reloader = () => loadGrn(url);
+
+    $("a.upload > input[type=file]").val("");
+  };
+
+  const initializeDemoFile = (demoClass, demoPath, demoName) => {
+    // Deleted parameter `event`
+    $(demoClass).on("click", () => {
+      loadDemo(demoPath, demoClass, demoName);
     });
+    $("#demoSourceDropdown").on("change", () => {
+      const selected = `.${$("#demoSourceDropdown").val()}`;
+      if (selected === demoClass) {
+        loadDemo(demoPath, demoClass, demoName);
+      }
+    });
+  };
+
+  DEMO_INFORMATION.forEach((demoInfo) =>
+    initializeDemoFile.apply(null, demoInfo)
+  );
+
+  $("body").on("click", ".reload", function() {
+    // Deleted `event` parameter but need `function` because of `this`.
+    if (
+      !$(this)
+        .parent()
+        .hasClass("disabled")
+    ) {
+      if ($.isFunction(reloader)) {
+        reloader();
+      }
+    }
+  });
+};
+
+export const responseCustomWorkbookData = (grnState, queryURL, name) => {
+  const uploadRoute = queryURL;
+  getWorkbookFromUrl(uploadRoute).done((workbook) => {
+    grnState.name = name;
+    grnState.workbook = workbook;
+    // Reset the node coloring dataset selection
+    grnState.nodeColoring.topDataset = undefined;
+    grnState.nodeColoring.bottomDataset = undefined;
+    grnState.annotateLinks();
+    disableUpload(false);
+    updateApp(grnState);
+    reloader = () => responseCustomWorkbookData(grnState, queryURL, name);
+  });
 };

package/web-client/public/js/update-app.js

@@ -107,8 +107,19 @@ import {
 //   EXPRESSION_SOURCE,
 } from "./constants";
 
+import { queryExpressionDatabase } from "./api/grnsight-api.js";
+
 // In this transitory state, updateApp might get called before things are completely set up, so for now
 // we define this wrapper function that guards against uninitialized values.
+
+queryExpressionDatabase({type:"ExpressionDatasets"}).then(function (response) {
+    grnState.database = response;
+}).catch(function (error) {
+    console.log(error.stack);
+    console.log(error.name);
+    console.log(error.message);
+});
+
 const refreshApp = () => {
     if (uploadState && uploadState.currentWorkbook) {
         drawGraph(uploadState.currentWorkbook);
@@ -350,56 +361,17 @@ const updateViewportSize = (currentValue) => {
         requestWindowDimensions();
     }
 };
-// Expression DB Access Functions
-const buildTimepointsString = function (selection) {
-    let timepoints = "";
-    selection.timepoints.forEach(x => timepoints += (x + ","));
-    return timepoints.substring(0, timepoints.length - 1);
-};
-const buildGeneQuery = function () {
-    let genes = "";
-    grnState.workbook.genes.forEach(x => genes += (x.name + ","));
-    return genes.substring(0, genes.length - 1);
-};
 
-const buildURL = function (selection) {
-    const baseQuery = `expressiondb?dataset=${selection.dataset}&genes=${buildGeneQuery()}`;
-    return selection.timepoints ?
-    `${baseQuery}&timepoints=${buildTimepointsString(selection)}` :
-    baseQuery;
-};
 
+// Expression DB Functions
 const startLoadingIcon = function () {
     $(EXPRESSION_DB_LOADER).css("display", "block");
     $(EXPRESSION_DB_LOADER_TEXT).css("display", "block");
 };
-
-const responseData = (formData, queryURL) => {
-    return new Promise(function (resolve) {
-        const uploadRoute = queryURL;
-        const fullUrl = [ $("#service-root").val(), uploadRoute ].join("/");
-        startLoadingIcon();
-        (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 stopLoadingIcon = function () {
     $(EXPRESSION_DB_LOADER).css("display", "none");
     $(EXPRESSION_DB_LOADER_TEXT).css("display", "none");
 };
-
 const enableNodeColoringUI = function () {
     grnState.nodeColoring.nodeColoringEnabled = true;
     $(LOG_FOLD_CHANGE_MAX_VALUE_CLASS).removeClass("hidden");
@@ -407,6 +379,40 @@ const enableNodeColoringUI = function () {
     $(LOG_FOLD_CHANGE_MAX_VALUE_HEADER).removeClass("hidden");
 };
 
+const loadExpressionDatabase = function (isTopDataset) {
+    const dataset = isTopDataset ? grnState.nodeColoring.topDataset : grnState.nodeColoring.bottomDataset;
+    startLoadingIcon();
+    queryExpressionDatabase({
+        type: "ExpressionTimePoints",
+        dataset
+    }).then(function (timepointsResponse) {
+        queryExpressionDatabase({
+            type:"ExpressionData",
+            dataset,
+            genes : grnState.workbook.genes.map(x => {return x.name;}).join(","),
+            timepoints: timepointsResponse[dataset]
+        }).then(function (response) {
+            if (isTopDataset) {
+                grnState.workbook.expression[grnState.nodeColoring.topDataset] = response;
+            } else {
+                grnState.workbook.expression[grnState.nodeColoring.bottomDataset] = response;
+            }
+            enableNodeColoringUI();
+            stopLoadingIcon();
+            updaters.renderNodeColoring();
+        }).catch(function (error) {
+            console.log(error.stack);
+            console.log(error.name);
+            console.log(error.message);
+        });
+    }).catch(function (error) {
+        console.log(error.stack);
+        console.log(error.name);
+        console.log(error.message);
+    });
+};
+
+
 // Sliders Functions
 const updateSliderState = slidersLocked => {
     const forceGraphDisabled = grnState.graphLayout === GRID_LAYOUT || slidersLocked;
@@ -615,10 +621,6 @@ const clearDropdownMenus = () => {
     $(BOTTOM_DATASET_SELECTION_SIDEBAR).html("");
 };
 
-const expressionDBDatasets = ["Barreto_2012_wt", "Dahlquist_2018_dcin5",
-    "Dahlquist_2018_dgln3", "Dahlquist_2018_dhap4", "Dahlquist_2018_dzap1",
-    "Dahlquist_2018_wt", "Kitagawa_2002_wt", "Thorsen_2007_wt"];
-
 const resetDatasetDropdownMenus = (workbook) => {
     clearDropdownMenus();
     $(".dataset-option").remove(); // clear all menu dataset options
@@ -641,7 +643,8 @@ const resetDatasetDropdownMenus = (workbook) => {
     }
 
     // Add expression database options
-    expressionDBDatasets.forEach(option => grnState.nodeColoring.nodeColoringOptions.push({value: [option]}));
+    grnState.database.expressionDatasets.forEach( option =>
+        grnState.nodeColoring.nodeColoringOptions.push({value: [option]}));
 
     $(BOTTOM_DATASET_SELECTION_SIDEBAR).append($("<option>")
             .attr("value", "Same as Top Dataset").text("Same as Top Dataset"));
@@ -713,6 +716,7 @@ if (!grnState.genePageData.identified) {
 
 export const updateApp = grnState => {
     if (grnState.newWorkbook) {
+        grnState.nodeColoring.nodeColoringEnabled = true;
         grnState.normalizationMax = max(grnState.workbook.positiveWeights.concat(grnState.workbook.negativeWeights));
         displayworkbook(grnState.workbook, grnState.name);
         expandLayoutSidebar();
@@ -725,10 +729,15 @@ export const updateApp = grnState => {
             identifySpeciesOrTaxon(workbookSpecies);
             identifySpeciesOrTaxon(workbookTaxon);
         }
+
+        // nodeColoringEnabled will only be set the very first time; because otherwise the user will have
+        // made a choice and we will let the choice stick.
         if (hasExpressionData(grnState.workbook.expression)) {
             resetDatasetDropdownMenus(grnState.workbook);
+            if (grnState.nodeColoring.nodeColoringEnabled === undefined) {
+                grnState.nodeColoring.nodeColoringEnabled = true;
+            }
 
-            grnState.nodeColoring.nodeColoringEnabled = true;
             if (isNewWorkbook(name)) {
                 grnState.nodeColoring.showMenu = true;
                 grnState.nodeColoring.lastDataset = name;
@@ -744,7 +753,9 @@ export const updateApp = grnState => {
                 grnState.nodeColoring.bottomDataSameAsTop = false;
             }
         } else {
-            grnState.nodeColoringEnabled = false;
+            if (grnState.nodeColoring.nodeColoringEnabled === undefined) {
+                grnState.nodeColoringEnabled = false;
+            }
         }
         refreshApp();
 
@@ -802,37 +813,16 @@ export const updateApp = grnState => {
         $(NODE_COLORING_TOGGLE_SIDEBAR).prop("checked", true);
         $(LOG_FOLD_CHANGE_MAX_VALUE_CLASS).val(DEFAULT_MAX_LOG_FOLD_CHANGE);
         $(NODE_COLORING_SIDEBAR_BODY).removeClass("hidden");
-        if (expressionDBDatasets.includes(grnState.nodeColoring.topDataset) &&
+        if (grnState.database.expressionDatasets.includes(grnState.nodeColoring.topDataset) &&
         grnState.workbook.expression[grnState.nodeColoring.topDataset] === undefined) {
             if ($(NODE_COLORING_TOGGLE_SIDEBAR).prop("checked")) {
-                let queryURLTop = buildURL({dataset: grnState.nodeColoring.topDataset});
-
-                responseData("", queryURLTop).then(function (response) {
-                    grnState.workbook.expression[grnState.nodeColoring.topDataset] = response;
-                    enableNodeColoringUI();
-                    stopLoadingIcon();
-                    updaters.renderNodeColoring();
-                }).catch(function (error) {
-                    console.log(error.stack);
-                    console.log(error.name);
-                    console.log(error.message);
-                });
+                loadExpressionDatabase(true);
             }
-        } else if (expressionDBDatasets.includes(grnState.nodeColoring.bottomDataset) &&
+        } else if (grnState.database.expressionDatasets.includes(grnState.nodeColoring.bottomDataset) &&
         !grnState.nodeColoring.bottomDataSameAsTop &&
         grnState.workbook.expression[grnState.nodeColoring.bottomDataset] === undefined) {
             if (!grnState.nodeColoring.bottomDataSameAsTop) {
-                let queryURLBottom = buildURL({dataset: grnState.nodeColoring.bottomDataset});
-                responseData("", queryURLBottom).then(function (response) {
-                    grnState.workbook.expression[grnState.nodeColoring.bottomDataset] = response;
-                    enableNodeColoringUI();
-                    stopLoadingIcon();
-                    updaters.renderNodeColoring();
-                }).catch(function (error) {
-                    console.log(error.stack);
-                    console.log(error.name);
-                    console.log(error.message);
-                });
+                loadExpressionDatabase(false);
             }
         } else {
             updaters.renderNodeColoring();
@@ -847,42 +837,18 @@ export const updateApp = grnState => {
         }
         grnState.nodeColoring.showMenu = true;
         grnState.nodeColoring.topDataset = grnState.nodeColoring.topDataset ?
-        grnState.nodeColoring.topDataset : "Barreto_2012_wt";
+        grnState.nodeColoring.topDataset : "Dahlquist_2018_wt";
         grnState.nodeColoring.bottomDataset = grnState.nodeColoring.bottomDataset ?
-        grnState.nodeColoring.bottomDataset : "Barreto_2012_wt";
+        grnState.nodeColoring.bottomDataset : "Dahlquist_2018_wt";
         $(LOG_FOLD_CHANGE_MAX_VALUE_CLASS).addClass("hidden");
         $(LOG_FOLD_CHANGE_MAX_VALUE_SIDEBAR_BUTTON).addClass("hidden");
         $(LOG_FOLD_CHANGE_MAX_VALUE_HEADER).addClass("hidden");
         if ($(NODE_COLORING_TOGGLE_SIDEBAR).prop("checked")) {
             if (grnState.workbook.expression[grnState.nodeColoring.topDataset] === undefined) {
-                let queryURLTop = buildURL({dataset: grnState.nodeColoring.topDataset});
-
-                responseData("", queryURLTop).then(function (response) {
-                    grnState.workbook.expression[grnState.nodeColoring.topDataset] = response;
-                    enableNodeColoringUI();
-
-                    stopLoadingIcon();
-                    updaters.renderNodeColoring();
-                }).catch(function (error) {
-                    console.log(error.stack);
-                    console.log(error.name);
-                    console.log(error.message);
-                });
+                loadExpressionDatabase(true);
             } else if (!grnState.nodeColoring.bottomDataSameAsTop &&
             grnState.workbook.expression[grnState.nodeColoring.bottomDataset] === undefined) {
-                let queryURLBottom = buildURL({dataset: grnState.nodeColoring.bottomDataset});
-                responseData("", queryURLBottom).then(function (response) {
-                    grnState.workbook.expression[grnState.nodeColoring.bottomDataset] = response;
-                    enableNodeColoringUI();
-
-                    stopLoadingIcon();
-
-                    updaters.renderNodeColoring();
-                }).catch(function (error) {
-                    console.log(error.stack);
-                    console.log(error.name);
-                    console.log(error.message);
-                });
+                loadExpressionDatabase(false);
             } else {
                 enableNodeColoringUI();
                 // There is as problem here! When a dataset from the database is used to do node coloring,
@@ -977,4 +943,4 @@ export const updateApp = grnState => {
 };
 
 
-export {buildURL, responseData, stopLoadingIcon};
+export { stopLoadingIcon, startLoadingIcon};