grnsight 4.0.0 → 6.0.0

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

@@ -9,19 +9,20 @@ import {
   CHARGE_DEFAULT_VALUE,
   DEFAULT_MAX_LOG_FOLD_CHANGE,
   DEFAULT_ZOOM_VALUE,
-  FORCE_GRAPH
+  FORCE_GRAPH,
+  VIEWPORT_INIT
 } from "./constants";
-let currentNetwork = null;
+let currentWorkbook = null;
 
-const annotateLinks = network => {
+const annotateLinks = workbook => {
     // 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 = [];
+    workbook.positiveWeights = [];
+    workbook.negativeWeights = [];
 
-    network.links.forEach(link => {
-        if (network.sheetType === "unweighted" && !link.value) {
+    workbook.links.forEach(link => {
+        if (workbook.sheetType === "unweighted" && !link.value) {
             link.value = 1;
         }
 
@@ -29,39 +30,31 @@ const annotateLinks = network => {
             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);
+            workbook.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);
+            workbook.negativeWeights.push(link.value);
         }
     });
 };
 
-const genePageData = () => {
-
-    // set to be a function for when data is read from .xml
-    return {
-        species: "Saccharomyces_cerevisiae",
-        taxon: "559292"
-    };
-};
-
 export const grnState = {
     name: null,
     simulation: undefined,
-    newNetwork: false,
+    newWorkbook: false,
 
-    get network () {
-        return currentNetwork;
+    get workbook () {
+        return currentWorkbook;
     },
 
-    set network (network) {
-        currentNetwork = network;
+    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(network.positiveWeights.concat(network.negativeWeights));
-        this.newNetwork = true;
+        this.resetNormalizationMax = max(workbook.positiveWeights.concat(workbook.negativeWeights));
+        this.newWorkbook = true;
     },
 
 // Edge Display Parameters
@@ -72,7 +65,7 @@ export const grnState = {
     grayEdgeThreshold: 5,
     dashedLine: false,
 
-    annotateLinks: () => annotateLinks(currentNetwork),
+    annotateLinks: () => annotateLinks(currentWorkbook),
 
 // Zoom Parameter
     zoomValue: DEFAULT_ZOOM_VALUE,
@@ -80,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,
@@ -94,8 +87,36 @@ export const grnState = {
 
 
 // Gene Page data
-    species: genePageData().species,
-    taxon: genePageData().taxon,
+// left defaulting to yeast for tests, until a better solution is found
+// Setting base case to yeast
+    genePageData: {
+        commonName: "Yeast",
+        species: "Saccharomyces_cerevisiae",
+        taxonUniprot: "559292",
+        taxonJaspar: "4932",
+        identified: false,
+        ensembl: "reg",
+        mine: "yeast"
+    },
+
+    nameToTaxon: {
+        // Treating like a dictionary with keys being the english name
+        // and values being a dictionary of (latin name, Uniprot, Jaspar)
+        // some taxon ids are different between the two
+        // changed spec names for common english and will have them formatted before calling an api
+        "Arabidopsis thaliana": { spec: "Arabidopsis_thaliana", jaspar: 3702, uniprot: 3702,
+            ensembl: "plant", mine: "thale"},
+        "Caenorhabditis elegans": { spec: "Caenorhabditis_elegans", jaspar: 6293, uniprot: 6293,
+            ensembl: "reg", mine: "worm"},
+        "Drosophila melanogaster": { spec: "Drosophila_melanogaster", jaspar: 7227, uniprot: 7227,
+            ensembl: "reg", mine: "fly"},
+        "Homo sapiens": { spec: "Homo_sapiens", jaspar: 9606, uniprot: 9606, ensembl: "reg",
+            mine: "fly"},
+        "Mus musculus": { spec: "Mus_musculus", jaspar: 10090, uniprot: 10090, ensembl: "reg",
+            mine: "mouse"},
+        "Saccharomyces cerevisiae": { spec: "Saccharomyces_cerevisiae", jaspar: 4932, uniprot: 559292,
+            ensembl: "reg", mine: "yeast"}
+    },
 
 // Slider Parameters
     slidersLocked: false,
@@ -120,5 +141,8 @@ export const grnState = {
     },
 
 // Graph Layout Parameter
-    graphLayout: FORCE_GRAPH
+    graphLayout: FORCE_GRAPH,
+
+// Viewport Size Parameter
+    viewportSize: VIEWPORT_INIT,
 };

package/web-client/public/js/iframe-coordination.js

@@ -0,0 +1,55 @@
+/* eslint-disable */
+// ^^^^^ Disabled because this code is meant to be run in the host website and explicitly relies
+//       on top-level names like iFrameResize and jQuery ($).
+
+/**
+ * This script is for use by the top-level GRNsight website, in order to coordinate sizing between the
+ * host site and the embedded GRNsight application. It is meant to be executed _in the host site_
+ * via a standard `script` element.
+ *
+ * Prerequisites: jQuery and the iFrame Resizer library (v4.1.1 at this writing) must already be
+ *                loaded into the web browser when this script executes.
+ */
+iFrameResize({
+  checkOrigin: ["https://dondi.github.io", "https://grnsight.cs.lmu.edu"],
+  widthCalculationMethod: "taggedElement",
+  heightCalculationMethod: "taggedElement",
+  sizeWidth: true,
+  minWidth: 1081  // Based on minimum width page body and title elements.
+}, "iframe.embedded-demo");
+
+const HEIGHT_OFFSET = 53;
+const HEIGHT_PADDING = 20;
+
+const SMALL_HEIGHT = 648 + HEIGHT_OFFSET;
+const MEDIUM_HEIGHT = 840 + HEIGHT_OFFSET;
+const LARGE_HEIGHT = 1080 + HEIGHT_OFFSET;
+const FIT_MARGIN = 4;  // A little space so that "fit" isn’t totally flush with window bounds.
+
+const sendDimensions = (destination, origin) => {
+  const iframeOffset = $("iframe.embedded-demo").offset();
+  destination.postMessage(
+    {
+      width: $(window).width() - iframeOffset.left,
+      height: $(window).height() - FIT_MARGIN,
+      top: iframeOffset.top
+    },
+
+    origin
+  );
+};
+
+window.addEventListener("message", event => {
+  if (event.origin.indexOf("https://grnsight.cs.lmu.edu") !== 0) {
+    // Ignore any message that did not originate from the GRNsight web client server.
+    return;
+  }
+
+  if (event.data === "dimensions") {
+    sendDimensions(event.source, event.origin);
+  }
+});
+
+window.addEventListener("resize", () => sendDimensions(
+  document.querySelector("iframe.embedded-demo").contentWindow, "https://grnsight.cs.lmu.edu"
+));

package/web-client/public/js/setup-handlers.js

@@ -1,6 +1,11 @@
-import { updateApp } from "./update-app";
+import { updaters } from "./graph";
+import { updateApp, identifySpeciesMenu } from "./update-app";
+import { saveSvgAsPng } from "save-svg-as-png";
+import * as jsPDF from "jspdf";
+import canvg from "canvg";
 
 import {
+    HOST_SITE,
     FORCE_GRAPH,
     GRID_LAYOUT,
     SET_NORMALIZATION_SIDEBAR,
@@ -19,7 +24,6 @@ import {
     SHOW_ALL_WEIGHTS,
     HIDE_ALL_WEIGHTS,
     COLOR_EDGES,
-    BLACK_EDGES,
     LINK_DIST_SLIDER_SIDEBAR,
     LINK_DIST_MENU,
     CHARGE_SLIDER_SIDEBAR,
@@ -29,9 +33,10 @@ import {
     LOCK_SLIDERS_CLASS,
     RESET_SLIDERS_CLASS,
     UNDO_SLIDERS_RESET_CLASS,
+    FORCE_GRAPH_BUTTON,
+    FORCE_GRAPH_MENU,
     GRID_LAYOUT_BUTTON,
-    GRID_LAYOUT_CLASS,
-    FORCE_GRAPH_CLASS,
+    GRID_LAYOUT_MENU,
     NODE_COLORING_TOGGLE_CLASS,
     AVG_REPLICATE_VALS_TOP_MENU,
     AVG_REPLICATE_VALS_TOP_SIDEBAR,
@@ -44,6 +49,24 @@ import {
     BOTTOM_DATASET_SELECTION_SIDEBAR,
     TOP_DATASET_SELECTION_MENU,
     BOTTOM_DATASET_SELECTION_MENU,
+    ZOOM_DISPLAY_MAXIMUM_SELECTOR,
+    ZOOM_DISPLAY_MAXIMUM_VALUE,
+    ZOOM_DISPLAY_MINIMUM_SELECTOR,
+    ZOOM_DISPLAY_MINIMUM_VALUE,
+    EXPORT_TO_PNG,
+    EXPORT_TO_SVG,
+    EXPORT_TO_PDF,
+    SPECIES_DISPLAY,
+    SPECIES_BUTTON_CRESS,
+    SPECIES_BUTTON_FLY,
+    SPECIES_BUTTON_HUMAN,
+    SPECIES_BUTTON_MOUSE,
+    SPECIES_BUTTON_NEMATODE,
+    SPECIES_BUTTON_YEAST,
+    VIEWPORT_FIT,
+    VIEWPORT_INIT,
+    VIEWPORT_OPTION_CLASS,
+    VIEWPORT_OPTION_CLASS_SIDEBAR
 } from "./constants";
 
 import { setupLoadAndImportHandlers } from "./setup-load-and-import-handlers";
@@ -55,15 +78,151 @@ export const setupHandlers = grnState => {
         return Math.min(max, Math.max(min, value));
     };
 
-    // Grid buttons
-    const setGraphLayout = layout => {
-        grnState.graphLayout = layout;
-        updateApp(grnState);
+    const determineFileType = filename => {
+        if (filename.includes(".xlsx")) {
+            return ".xlsx";
+        } else if (filename.includes(".sif")) {
+            return ".sif";
+        } else if (filename.includes(".graphml")) {
+            return ".graphml";
+        }
+    };
+
+// thank you for the help https://github.com/nytimes/svg-crowbar/blob/gh-pages/svg-crowbar-2.js
+    const setInlineStyles = (svg) => {
+        var emptySvg = window.document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        window.document.body.appendChild(emptySvg);
+        var emptySvgDeclarationComputed = getComputedStyle(emptySvg);
+
+        const traverse = svg => {
+            var tree = [];
+            tree.push(svg);
+            // implement DFS
+            const visit = (node) => {
+                if (node && node.hasChildNodes()) {
+                    var child = node.firstChild;
+                    while (child) {
+                        if (child.nodeType === 1 && child.nodeName !== "SCRIPT") {
+                            tree.push(child);
+                            visit(child);
+                        }
+                        child = child.nextSibling;
+                    }
+                }
+            };
+            visit(svg);
+            return tree;
+        };
+
+        const explicitlySetStyle = element => {
+            const cSSStyleDeclarationComputed = window.getComputedStyle(element);
+            let i;
+            let len;
+            let key;
+            let value;
+            let computedStyleStr = "";
+
+            for (i = 0, len = cSSStyleDeclarationComputed.length; i < len; i++) {
+                key = cSSStyleDeclarationComputed[i];
+                value = cSSStyleDeclarationComputed.getPropertyValue(key);
+                if (value !== emptySvgDeclarationComputed.getPropertyValue(key)) {
+                    // Don't set computed style of width and height. Makes SVG elmements disappear.
+                    if ((key !== "height") && (key !== "width")) {
+                        computedStyleStr += key + ":" + value + ";";
+                    }
+
+                }
+            }
+            element.setAttribute("style", computedStyleStr);
+        };
+
+        // hardcode computed css styles inside svg
+        var allElements = traverse(svg);
+        var i = allElements.length;
+        while (i--) {
+            explicitlySetStyle(allElements[i]);
+        }
+    };
+
+    const sourceAttributeSetter = (svg) => {
+        svg.setAttribute("version", "1.1");
+
+        svg.removeAttribute("xmlns");
+        svg.removeAttribute("xlink");
+
+        if (!svg.hasAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns")) {
+            svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns", "http://www.w3.org/2000/svg");
+        }
+
+        if (!svg.hasAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink")) {
+            svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
+        }
+    };
+
+    const exportSVG = (svgElement, name) => {
+        let source = svgElement;
+
+        sourceAttributeSetter(source);
+        setInlineStyles(source);
+
+        var doctype = "<?xml version=\"1.0\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">"; // eslint-disable-line
+        var sourceString = (new XMLSerializer()).serializeToString(source);
+        const finalSvgString = [doctype + sourceString];
+
+        var svgUrl = window.URL.createObjectURL(new Blob(finalSvgString, { "type" : "image\/svg+xml" }));
+
+        $("#exportAsSvg").attr("href", svgUrl);
+        $("#exportAsSvg").attr("download", name);
     };
 
-    $(GRID_LAYOUT_BUTTON).click(() => setGraphLayout(grnState.graphLayout === FORCE_GRAPH ? GRID_LAYOUT : FORCE_GRAPH));
-    $(FORCE_GRAPH_CLASS).click(() => setGraphLayout(FORCE_GRAPH));
-    $(GRID_LAYOUT_CLASS).click(() => setGraphLayout(GRID_LAYOUT));
+    const exportPDF = (svgElement, name) => {
+        if (svgElement) {
+            svgElement = svgElement.replace(/\r?\n|\r/g, "").trim();
+        }
+
+        let canvas = document.createElement("canvas");
+        canvg(canvas, svgElement);
+        const imgData = canvas.toDataURL("image/png");
+
+        const pdf = new jsPDF("l", "mm", "letter");
+        const width = pdf.internal.pageSize.getWidth();
+        const height = pdf.internal.pageSize.getHeight();
+
+        pdf.addImage(imgData, "PNG", 0, 0, width, height);
+        pdf.save(name);
+    };
+
+    // Grid and Force Graph Layout
+    $(`${FORCE_GRAPH_MENU}, ${FORCE_GRAPH_BUTTON}`).click(() => {
+        updaters.setNodesToForceGraph();
+        grnState.graphLayout = FORCE_GRAPH;
+        updateApp(grnState);
+    });
+
+    $(`${GRID_LAYOUT_MENU}, ${GRID_LAYOUT_BUTTON}`).click(() => {
+        updaters.setNodesToGrid();
+        grnState.graphLayout = GRID_LAYOUT;
+        updateApp(grnState);
+    });
+
+// Image Export
+    $(EXPORT_TO_PNG).click(() => {
+        var svgContainer = document.getElementById("exportContainer");
+        var editedName = grnState.name.replace(determineFileType(grnState.name), "") + ".png";
+        saveSvgAsPng(svgContainer, editedName);
+    });
+
+    $(EXPORT_TO_SVG).click(() => {
+        var svgContainer = document.getElementById("exportContainer");
+        var editedName = grnState.name.replace(determineFileType(grnState.name), "") + ".svg";
+        exportSVG(svgContainer, editedName );
+    });
+
+    $(EXPORT_TO_PDF).click(() => {
+        var svgContainer = document.getElementById("exportContainer").innerHTML;
+        var editedName = grnState.name.replace(determineFileType(grnState.name), "") + ".pdf";
+        exportPDF(svgContainer, editedName);
+    });
 
 // Node Coloring
     $(NODE_COLORING_TOGGLE_CLASS).click(() => {
@@ -151,7 +310,6 @@ export const setupHandlers = grnState => {
     });
 
 // Sliders Code
-
     var linkDistValidator = value => {
         return valueValidator(1, 1000, value);
     };
@@ -184,9 +342,21 @@ export const setupHandlers = grnState => {
         updateApp(grnState);
     });
 
-    // Sliders code
     $(LOCK_SLIDERS_CLASS).click(() => {
         grnState.slidersLocked = !grnState.slidersLocked;
+        if (grnState.slidersLocked) {
+            grnState.showUndoReset = false;
+        }
+        updateApp(grnState);
+    });
+
+    $(VIEWPORT_OPTION_CLASS_SIDEBAR).click(function () {
+        grnState.viewportSize = $(this).val();
+        updateApp(grnState);
+    });
+
+    $(VIEWPORT_OPTION_CLASS).click(function () {
+        grnState.viewportSize = $(this).attr("value");
         updateApp(grnState);
     });
 
@@ -206,7 +376,7 @@ export const setupHandlers = grnState => {
         updateApp(grnState);
     });
 
-// Weights Visualization Handlers
+// Weights Visualization
     $(WEIGHTS_SHOW_ALWAYS_CLASS).click(() => {
         grnState.edgeWeightDisplayOption = SHOW_ALL_WEIGHTS;
         updateApp(grnState);
@@ -238,7 +408,7 @@ export const setupHandlers = grnState => {
         updateApp(grnState);
     });
 
-// Grey Edges Handlers
+// Grey Edges
     $(GREY_EDGES_DASHED_SIDEBAR).change(() => {
         grnState.dashedLine = $(GREY_EDGES_DASHED_SIDEBAR).prop("checked");
         updateApp(grnState);
@@ -265,13 +435,183 @@ export const setupHandlers = grnState => {
     });
 
     $(COLOR_EDGES).click(() => {
-        grnState.colorOptimal = true;
+        grnState.colorOptimal = !grnState.colorOptimal;
+        updateApp(grnState);
+    });
+
+    // Species Selection
+    $(SPECIES_DISPLAY).change(() => {
+        var selection = $(SPECIES_DISPLAY).find(":selected").attr("value");
+        grnState.genePageData.identified = false;
+        identifySpeciesMenu(selection);
         updateApp(grnState);
     });
 
-    $(BLACK_EDGES).click(() => {
-        grnState.colorOptimal = false;
+    $(SPECIES_BUTTON_YEAST).click(function () {
+        var selection = $(SPECIES_BUTTON_YEAST).attr("id");
+        grnState.genePageData.identified = false;
+        identifySpeciesMenu(selection);
         updateApp(grnState);
     });
 
+    $(SPECIES_BUTTON_MOUSE).click(function () {
+        var selection = $(SPECIES_BUTTON_MOUSE).attr("id");
+        grnState.genePageData.identified = false;
+        identifySpeciesMenu(selection);
+        updateApp(grnState);
+    });
+
+    $(SPECIES_BUTTON_HUMAN).click(function () {
+        var selection = $(SPECIES_BUTTON_HUMAN).attr("id");
+        grnState.genePageData.identified = false;
+        identifySpeciesMenu(selection);
+        updateApp(grnState);
+    });
+
+    $(SPECIES_BUTTON_NEMATODE).click(function () {
+        var selection = $(SPECIES_BUTTON_NEMATODE).attr("id");
+        grnState.genePageData.identified = false;
+        identifySpeciesMenu(selection);
+        updateApp(grnState);
+    });
+
+    $(SPECIES_BUTTON_CRESS).click(function () {
+        var selection = $(SPECIES_BUTTON_CRESS).attr("id");
+        grnState.genePageData.identified = false;
+        identifySpeciesMenu(selection);
+        updateApp(grnState);
+    });
+
+    $(SPECIES_BUTTON_FLY).click(function () {
+        var selection = $(SPECIES_BUTTON_FLY).attr("id");
+        grnState.genePageData.identified = false;
+        identifySpeciesMenu(selection);
+        updateApp(grnState);
+    });
+
+    // Allow text-selection for input elements embedded within menu items.
+    //
+    // Partial thank you:
+    //   https://stackoverflow.com/questions/6848140/how-do-i-prevent-drag-on-a-child-but-allow-drag-on-the-parent
+    //
+    // We use function syntax so that internal `this` can be used.
+    $(".dropdown input.keepopen").parent().attr({
+        draggable: false
+    });
+
+    // 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);
+            }
+        },
+
+        "mouseup": function (event) {
+            if ($(event.target).find(".keepopen").length > 0) {
+                $(this).data("closable", $(event.target).closest(".dropdown-toggle").length !== 0);
+            }
+        },
+
+        "hide.bs.dropdown": function () {
+            var hide = $(this).data("closable");
+            $(this).data("closable", true);
+            return hide;
+        }
+    });
+
+    $(ZOOM_DISPLAY_MAXIMUM_SELECTOR).text(ZOOM_DISPLAY_MAXIMUM_VALUE);
+    $(ZOOM_DISPLAY_MINIMUM_SELECTOR).text(ZOOM_DISPLAY_MINIMUM_VALUE);
+
+    // Viewport handling.
+    const setupContainer = function () {
+        const MEDIUM_PAGE_WIDTH = 1500;
+        const LARGE_PAGE_WIDTH = 2200;
+
+        const initializeViewportSize = (width) => {
+            if (width < MEDIUM_PAGE_WIDTH) {
+                grnState.viewportSize = "containerS";
+            } else if (width > MEDIUM_PAGE_WIDTH && width < LARGE_PAGE_WIDTH) {
+                grnState.viewportSize = "containerM";
+            } else {
+                grnState.viewportSize = "containerL";
+            }
+        };
+
+        // For viewport-fit, we create a transient `dimensions` property in `grnState`
+        // which `updateApp` will use to determine the latest size.
+        //
+        // For any other size, we blank out the transient `dimensions`.
+        if (window === window.top) {
+            initializeViewportSize($(window).width());
+            $(window).on("resize", () => {
+                if (grnState.viewportSize === VIEWPORT_FIT) {
+                    grnState.dimensions = {
+                        width: $(window).width(),
+                        height: $(window).height(),
+                        top: 0
+                    };
+
+                    updateApp(grnState);
+                } else {
+                    delete grnState.dimensions;
+                }
+            });
+        } else {
+            window.addEventListener("message", event => {
+                if (event.origin.indexOf(HOST_SITE) !== 0) {
+                    return;
+                }
+
+                // Also filter out all but dimensions messages.
+                const { data } = event;
+                if (typeof(data) !== "object" || (
+                    data.width === undefined ||
+                    data.height === undefined ||
+                    data.top === undefined
+                )) {
+                    return;
+                }
+
+                // Live changes only matter if we are doing Fit to Window or initializing.
+                if ([VIEWPORT_FIT, VIEWPORT_INIT].includes(grnState.viewportSize)) {
+                    if (grnState.viewportSize === VIEWPORT_INIT) {
+                        initializeViewportSize(data.width);
+                    }
+
+                    if (grnState.viewportSize === VIEWPORT_FIT) {
+                        grnState.dimensions = data;
+                    }
+
+                    updateApp(grnState);
+                } else {
+                    delete grnState.dimensions;
+                }
+            });
+        }
+
+        $("#restrict-graph-to-viewport").on("click", function () {
+            if ($(".viewport").prop("checked")) {
+                $("#restrict-graph-to-viewport span").removeClass("glyphicon-ok");
+                $(".viewport").prop("checked", false);
+                $(".viewport").trigger("change");
+            } else {
+                $("#restrict-graph-to-viewport span").addClass("glyphicon-ok");
+                $(".viewport").prop("checked", true).trigger("change");
+            }
+        });
+
+        $("#expressionDB").on("click", function () {
+            if (!$("#expressionDB span").hasClass("glyphicon-ok")) {
+                $("#expressionDB span").addClass("glyphicon-ok");
+                $("#expressionDB").trigger("change");
+            } else {
+                $("#expressionDB span").removeClass("glyphicon-ok");
+                $("#expressionDB").trigger("change");
+            }
+        });
+    };
+
+    setupContainer();
 };