From ef7ffaa252368be84edcb1844971f385de2834ae Mon Sep 17 00:00:00 2001
From: Christos Botsikas <cbotsikas@gmail.com>
Date: Mon, 15 Jul 2019 22:51:20 +0200
Subject: [PATCH] New fileBrowser & url param support
 https://github.com/aegisbigdata/documentation/issues/195

---
 Cells/cell01.html     |   4 +
 Cells/cell02.py       |   6 +-
 Cells/cell03.html     | 191 ++++++++++++++++++++++++++++++++++++---
 QueryBuilder_v1.ipynb | 201 +++++++++++++++++++++++++++++++++++++++---
 4 files changed, 374 insertions(+), 28 deletions(-)

diff --git a/Cells/cell01.html b/Cells/cell01.html
index 29c15b0..79483ff 100644
--- a/Cells/cell01.html
+++ b/Cells/cell01.html
@@ -54,6 +54,10 @@
         height: auto;
     }
 
+    .aegis #fileBrowser option[dir="true"] {
+        font-weight: bold;
+    }
+
     .aegis input[type=checkbox] {
         height: 28px;
     }
diff --git a/Cells/cell02.py b/Cells/cell02.py
index b6dae9c..055a5c0 100644
--- a/Cells/cell02.py
+++ b/Cells/cell02.py
@@ -330,12 +330,14 @@ def apply_filters(applied_filters):
             return
     return filters_success
 
-def read_dataset(selectedFile,separator):
+def read_dataset(selectedFile, separator):
     global tempDF
     global query
     global g
+    if selectedFile.startswith('/'):
+        selectedFile = "hdfs://" + myhdfs.host + ":" + str(myhdfs.port) + selectedFile
     try:
-        tempDF = spark.read.csv(selectedFile,header=True, inferSchema=True, sep=separator)
+        tempDF = spark.read.csv(selectedFile, header=True, inferSchema=True, sep=separator)
     except Exception as e:
         g=e
     query=query_init
diff --git a/Cells/cell03.html b/Cells/cell03.html
index 25dfd65..44c00ca 100644
--- a/Cells/cell03.html
+++ b/Cells/cell03.html
@@ -3,6 +3,23 @@
 <div class="aegis">
     <div id="cbrowser">
         <div class="form-group row form-horizontal">
+            <label class="col-sm-2 control-label">File:</label>
+            <div class="col-sm-10">
+                <div class="input-group widget-dropdown">
+                    <select id="fileBrowser" class="form-control">
+                    </select>
+                    <span class="input-group-btn">
+                        <button type="button" style="display:none" class="btn jupyter-button mod-primary" onclick="fileBrowserOpen()">
+                            Open
+                        </button>
+                        <button type="button" class="btn jupyter-button mod-primary" onclick="forceFileBrowserRefresh()">
+                            Refresh list
+                        </button>
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="form-group row form-horizontal" style="display:none">
             <label class="col-sm-2 control-label">Available Datasets:</label>
             <div class="col-sm-10">
                 <div class="input-group widget-dropdown">
@@ -19,7 +36,7 @@
                 </div>
             </div>
         </div>
-        <div class="form-group row form-horizontal">
+        <div class="form-group row form-horizontal" style="display:none">
             <label class="col-sm-2 control-label">Available Files:</label>
             <div class="col-sm-10">
                 <div class="widget-dropdown">
@@ -53,8 +70,11 @@
         </div>
         <div class="form-group row form-horizontal">
             <div class="col-sm-offset-2 col-sm-10">
-                <button type="button" class="jupyter-button jupyter-widgets mod-primary widget-button"
+                <button type="button" class="jupyter-button jupyter-widgets mod-primary widget-button" style="display:none"
                     onclick="selectDatafile()"> Open file </button>
+                <button id="fileBrowserOpenBtn" type="button" class="btn jupyter-button mod-primary" onclick="fileBrowserOpen()">
+                    Open
+                </button>
             </div>
         </div>
     </div>
@@ -1374,8 +1394,28 @@ <h3>Save Configuration</h3>
 </div>
 <script>
     $(document).ready(function () {
+        $("#fileBrowser").on('change', function() {
+            updateFileBrowserOpenBtn();
+        });
+        paramDataset = new URL(window.location).searchParams.get("dataset");
+        if (paramDataset !== null) {
+            paramDataset = "/" + paramDataset;
+            QB.currentPath = paramDataset.substring(0, paramDataset.lastIndexOf("/")+1);
+        }
         showCurrentBrowser();
+        findCurrentProjectID()
+            .done(function (projectId) {
+                QB.currentProjectId = projectId;
+            })
+            .done(function () {
+                fileBrowserRefresh(paramDataset);
+            });
     });
+    var QB = {
+        currentProjectId: null,
+        currentPath: "/",
+        browser: {"/":[]}
+    }
     var tempDF_columns = []
     var datafile_options = []
     var filter_divs = ["null-filterType", "filterType_joinApproxTime", "filterType_join",
@@ -1395,7 +1435,6 @@ <h3>Save Configuration</h3>
     var filter_count = 0
     var successfulFilters = []
     var successfulFiltersPermanent = [] //< !--temporary solution, to be removed -->
-    var currentDFpath = ""
 
     function show_filters() {
         $("#show-filters").empty()
@@ -1429,16 +1468,19 @@ <h3>Save Configuration</h3>
 
     // call python to read file from hdfs, reset filter dropdown and populate column dropdowns -->
     function selectDatafile() {
+        dataset = document.getElementById('fileSelect').value;
+        separator = document.getElementById('sepSelect').value;
+        loadDataFile(dataset, separator);
+    }
+
+    function loadDataFile(path, separator) {
         var kernel = IPython.notebook.kernel;
         var callbacks = {
             iopub: {
                 output: handle_output,
             }
         }
-        dataset = document.getElementById('fileSelect').value;
-        currentDFpath = document.getElementById('fileSelect').value;
-        separator = document.getElementById('sepSelect').value;
-        var msg_id = kernel.execute('read_dataset("' + dataset + '","' + separator + '")', callbacks);
+        var msg_id = kernel.execute('read_dataset("' + path + '","' + separator + '")', callbacks);
         divVisibility("null-filterType");
         document.getElementById("filter-application-buttons").style.display = "block"; //because now we have a tempDF
         visibleDivId = null;
@@ -1511,7 +1553,6 @@ <h3>Save Configuration</h3>
     function populateAvailableDatasetsList(data) {
         $.get("/hopsworks-api/api/project/" + data.content.text + "/dataset/getContent", function (data, status) {
             var user_datasets = []
-            var x = document.getElementById("cbrowser");
 
             skipthem = ["Jupyter", "Logs", "Models", "notebook", "Resources"]
             data.forEach(function (element) {
@@ -1533,10 +1574,137 @@ <h3>Save Configuration</h3>
         })
     }
 
+    function fileBrowserOpen() {
+        var dropl = document.getElementById("fileBrowser");
+        if (dropl.options[dropl.selectedIndex].getAttribute("dir") === "true") {
+            QB.currentPath = dropl.value;
+            fileBrowserRefresh();
+        } else {
+            console.log("Open file: " + dropl.options[dropl.selectedIndex].getAttribute("path"));
+            dataset = dropl.options[dropl.selectedIndex].getAttribute("path");
+            separator = document.getElementById('sepSelect').value;
+            loadDataFile(dataset, separator);
+        }
+    }
 
-    function showCurrentBrowser() {
-        var x = document.getElementById("cbrowser");
+    function updateFileBrowserOpenBtn() {
+        var dropl = document.getElementById("fileBrowser");
+        if (dropl.options[dropl.selectedIndex].getAttribute("dir") === "true") {
+            $("#fileBrowserOpenBtn").text("Open Folder");
+        } else {
+            $("#fileBrowserOpenBtn").text("Open File");
+        }
+    }
+
+    function forceFileBrowserRefresh() {
+        var path = QB.currentPath || "/";
+        if (path.substr(-1) !== "/") path = path + "/";
+        
+        QB.browser[path] = [];
+        console.log("force reload files " + path);
+        fileBrowserRefresh();
+    }
+
+    function fileBrowserRefresh(selectedDataset) {
+        var path = QB.currentPath || "/";
+        if (path.substr(-1) !== "/") path = path + "/";
+
+        if (!QB.browser[path]) {
+            QB.browser[path] = [];
+        }
+
+        var b = QB.browser[path];
+
+        if (QB.browser[path].length > 0) {
+            console.log("retrieve cached folder: " + path)
+            populateFileBrowser(b, selectedDataset);
+            return;
+        }
+        console.log("retrieve folder: " + path)
+        $.get(`/hopsworks-api/api/project/${QB.currentProjectId}/dataset/getContent${path}`, function (data, status) {
+            if (path !== "/") {
+                var relativePath = path.split("/");
+                relativePath.pop();
+                relativePath.pop();
+                b.push({
+                    label: "..",
+                    relativePath: relativePath.join("/") + "/",
+                    dir: true 
+                })
+            }
+
+            var shared = path.indexOf("::") > 0;
+            skipthem = ["Jupyter", "Logs", "Models", "notebook", "Resources"]
+            data.forEach(function (element) {
+                if (element.dir && (skipthem.includes(element.name) || element.name.endsWith(".db"))) {
+                    return;
+                }
+                if (!element.dir && element.name.substr(-4) !== ".csv") {
+                    return;
+                }
+                b.push({
+                    label: element.name,
+                    path: element.path,
+                    relativePath: `${path}${element.name}`,
+                    dir: element.dir
+                });
+            });
+            b.sort(browserSort);
+            populateFileBrowser(b, selectedDataset);
+        });
+    }
+    function populateFileBrowser(b, selectedDataset) {
+        var dropl = document.getElementById("fileBrowser");
+        dropl.options.length = 0;
+        b.forEach(function(bb) {
+            dropl.options.add(new Option(bb.label, bb.relativePath));
+            dropl.options[dropl.options.length-1].setAttribute("dir", bb.dir);
+            if (!bb.dir)
+                dropl.options[dropl.options.length-1].setAttribute("path", bb.path);
+            if (selectedDataset && selectedDataset === bb.relativePath)
+                dropl.options[dropl.options.length-1].selected = true;
+        });
+        updateFileBrowserOpenBtn();
+    }
+    // Will sort firt the directories, then the files, sorted by label.
+    function browserSort(a, b) {
+        if (~a.dir < ~b.dir) {
+            return -1;
+        }
+        if (~a.dir > ~b.dir) {
+            return 1;
+        }
+        if (a.label.toLowerCase() < b.label.toLowerCase()) {
+            return -1;
+        }
+        if (a.label.toLowerCase() > b.label.toLowerCase()) {
+            return 1;
+        }
+        return 0;
+    }
+    function findCurrentProjectID() {
+        var deferred = jQuery.Deferred();
+        $.get("/hopsworks-api/api/project", function (data, status) {
+            var pdict = {}
+            data.forEach(function (e) {
+                pdict[e.project.name] = e.project.id;
+            });
+            var kernel = IPython.notebook.kernel;
+            var callbacks = {
+                iopub: {
+                    output: function(data) {
+                        var projectId = data.content.text;
+                        deferred.resolve(projectId);
+                    },
+                }
+            }
+            var pdict_parameter = (JSON.stringify(pdict))
+            var msg_id = kernel.execute('find_current_projectID(\'' + pdict_parameter + '\')', callbacks);
+        });
+        return deferred.promise();
+    }
 
+    function showCurrentBrowser() {
         $.get("/hopsworks-api/api/project", function (data, status) {
             var pdict = {}
             data.forEach(function (e) {
@@ -1551,14 +1719,13 @@ <h3>Save Configuration</h3>
             var pdict_parameter = (JSON.stringify(pdict))
             var msg_id = kernel.execute('find_current_projectID(\'' + pdict_parameter + '\')', callbacks);
         })
-
     }
 
     function datafilesObtained(options) {
         var dropl = document.getElementById("fileSelect");
         dropl.options.length = 0;
         for (opt in options) {
-            dropl.options[dropl.options.length] = new Option(options[opt]);
+            dropl.options[dropl.options.length] = new Option(options[opt].substring(options[opt].lastIndexOf("/") + 1), options[opt]);
         }
     }
 
diff --git a/QueryBuilder_v1.ipynb b/QueryBuilder_v1.ipynb
index 17bf149..80aa986 100644
--- a/QueryBuilder_v1.ipynb
+++ b/QueryBuilder_v1.ipynb
@@ -79,6 +79,10 @@
     "        height: auto;\n",
     "    }\n",
     "\n",
+    "    .aegis #fileBrowser option[dir=\"true\"] {\n",
+    "        font-weight: bold;\n",
+    "    }\n",
+    "\n",
     "    .aegis input[type=checkbox] {\n",
     "        height: 28px;\n",
     "    }\n",
@@ -469,12 +473,14 @@
     "            return\n",
     "    return filters_success\n",
     "\n",
-    "def read_dataset(selectedFile,separator):\n",
+    "def read_dataset(selectedFile, separator):\n",
     "    global tempDF\n",
     "    global query\n",
     "    global g\n",
+    "    if selectedFile.startswith('/'):\n",
+    "        selectedFile = \"hdfs://\" + myhdfs.host + \":\" + str(myhdfs.port) + selectedFile\n",
     "    try:\n",
-    "        tempDF = spark.read.csv(selectedFile,header=True, inferSchema=True, sep=separator)\n",
+    "        tempDF = spark.read.csv(selectedFile, header=True, inferSchema=True, sep=separator)\n",
     "    except Exception as e:\n",
     "        g=e\n",
     "    query=query_init\n",
@@ -542,6 +548,23 @@
     "<div class=\"aegis\">\n",
     "    <div id=\"cbrowser\">\n",
     "        <div class=\"form-group row form-horizontal\">\n",
+    "            <label class=\"col-sm-2 control-label\">File:</label>\n",
+    "            <div class=\"col-sm-10\">\n",
+    "                <div class=\"input-group widget-dropdown\">\n",
+    "                    <select id=\"fileBrowser\" class=\"form-control\">\n",
+    "                    </select>\n",
+    "                    <span class=\"input-group-btn\">\n",
+    "                        <button type=\"button\" style=\"display:none\" class=\"btn jupyter-button mod-primary\" onclick=\"fileBrowserOpen()\">\n",
+    "                            Open\n",
+    "                        </button>\n",
+    "                        <button type=\"button\" class=\"btn jupyter-button mod-primary\" onclick=\"forceFileBrowserRefresh()\">\n",
+    "                            Refresh list\n",
+    "                        </button>\n",
+    "                    </span>\n",
+    "                </div>\n",
+    "            </div>\n",
+    "        </div>\n",
+    "        <div class=\"form-group row form-horizontal\" style=\"display:none\">\n",
     "            <label class=\"col-sm-2 control-label\">Available Datasets:</label>\n",
     "            <div class=\"col-sm-10\">\n",
     "                <div class=\"input-group widget-dropdown\">\n",
@@ -558,7 +581,7 @@
     "                </div>\n",
     "            </div>\n",
     "        </div>\n",
-    "        <div class=\"form-group row form-horizontal\">\n",
+    "        <div class=\"form-group row form-horizontal\" style=\"display:none\">\n",
     "            <label class=\"col-sm-2 control-label\">Available Files:</label>\n",
     "            <div class=\"col-sm-10\">\n",
     "                <div class=\"widget-dropdown\">\n",
@@ -592,8 +615,11 @@
     "        </div>\n",
     "        <div class=\"form-group row form-horizontal\">\n",
     "            <div class=\"col-sm-offset-2 col-sm-10\">\n",
-    "                <button type=\"button\" class=\"jupyter-button jupyter-widgets mod-primary widget-button\"\n",
+    "                <button type=\"button\" class=\"jupyter-button jupyter-widgets mod-primary widget-button\" style=\"display:none\"\n",
     "                    onclick=\"selectDatafile()\"> Open file </button>\n",
+    "                <button id=\"fileBrowserOpenBtn\" type=\"button\" class=\"btn jupyter-button mod-primary\" onclick=\"fileBrowserOpen()\">\n",
+    "                    Open\n",
+    "                </button>\n",
     "            </div>\n",
     "        </div>\n",
     "    </div>\n",
@@ -1913,8 +1939,28 @@
     "</div>\n",
     "<script>\n",
     "    $(document).ready(function () {\n",
+    "        $(\"#fileBrowser\").on('change', function() {\n",
+    "            updateFileBrowserOpenBtn();\n",
+    "        });\n",
+    "        paramDataset = new URL(window.location).searchParams.get(\"dataset\");\n",
+    "        if (paramDataset !== null) {\n",
+    "            paramDataset = \"/\" + paramDataset;\n",
+    "            QB.currentPath = paramDataset.substring(0, paramDataset.lastIndexOf(\"/\")+1);\n",
+    "        }\n",
     "        showCurrentBrowser();\n",
+    "        findCurrentProjectID()\n",
+    "            .done(function (projectId) {\n",
+    "                QB.currentProjectId = projectId;\n",
+    "            })\n",
+    "            .done(function () {\n",
+    "                fileBrowserRefresh(paramDataset);\n",
+    "            });\n",
     "    });\n",
+    "    var QB = {\n",
+    "        currentProjectId: null,\n",
+    "        currentPath: \"/\",\n",
+    "        browser: {\"/\":[]}\n",
+    "    }\n",
     "    var tempDF_columns = []\n",
     "    var datafile_options = []\n",
     "    var filter_divs = [\"null-filterType\", \"filterType_joinApproxTime\", \"filterType_join\",\n",
@@ -1934,7 +1980,6 @@
     "    var filter_count = 0\n",
     "    var successfulFilters = []\n",
     "    var successfulFiltersPermanent = [] //< !--temporary solution, to be removed -->\n",
-    "    var currentDFpath = \"\"\n",
     "\n",
     "    function show_filters() {\n",
     "        $(\"#show-filters\").empty()\n",
@@ -1968,16 +2013,19 @@
     "\n",
     "    // call python to read file from hdfs, reset filter dropdown and populate column dropdowns -->\n",
     "    function selectDatafile() {\n",
+    "        dataset = document.getElementById('fileSelect').value;\n",
+    "        separator = document.getElementById('sepSelect').value;\n",
+    "        loadDataFile(dataset, separator);\n",
+    "    }\n",
+    "\n",
+    "    function loadDataFile(path, separator) {\n",
     "        var kernel = IPython.notebook.kernel;\n",
     "        var callbacks = {\n",
     "            iopub: {\n",
     "                output: handle_output,\n",
     "            }\n",
     "        }\n",
-    "        dataset = document.getElementById('fileSelect').value;\n",
-    "        currentDFpath = document.getElementById('fileSelect').value;\n",
-    "        separator = document.getElementById('sepSelect').value;\n",
-    "        var msg_id = kernel.execute('read_dataset(\"' + dataset + '\",\"' + separator + '\")', callbacks);\n",
+    "        var msg_id = kernel.execute('read_dataset(\"' + path + '\",\"' + separator + '\")', callbacks);\n",
     "        divVisibility(\"null-filterType\");\n",
     "        document.getElementById(\"filter-application-buttons\").style.display = \"block\"; //because now we have a tempDF\n",
     "        visibleDivId = null;\n",
@@ -2050,7 +2098,6 @@
     "    function populateAvailableDatasetsList(data) {\n",
     "        $.get(\"/hopsworks-api/api/project/\" + data.content.text + \"/dataset/getContent\", function (data, status) {\n",
     "            var user_datasets = []\n",
-    "            var x = document.getElementById(\"cbrowser\");\n",
     "\n",
     "            skipthem = [\"Jupyter\", \"Logs\", \"Models\", \"notebook\", \"Resources\"]\n",
     "            data.forEach(function (element) {\n",
@@ -2072,10 +2119,137 @@
     "        })\n",
     "    }\n",
     "\n",
+    "    function fileBrowserOpen() {\n",
+    "        var dropl = document.getElementById(\"fileBrowser\");\n",
+    "        if (dropl.options[dropl.selectedIndex].getAttribute(\"dir\") === \"true\") {\n",
+    "            QB.currentPath = dropl.value;\n",
+    "            fileBrowserRefresh();\n",
+    "        } else {\n",
+    "            console.log(\"Open file: \" + dropl.options[dropl.selectedIndex].getAttribute(\"path\"));\n",
+    "            dataset = dropl.options[dropl.selectedIndex].getAttribute(\"path\");\n",
+    "            separator = document.getElementById('sepSelect').value;\n",
+    "            loadDataFile(dataset, separator);\n",
+    "        }\n",
+    "    }\n",
     "\n",
-    "    function showCurrentBrowser() {\n",
-    "        var x = document.getElementById(\"cbrowser\");\n",
+    "    function updateFileBrowserOpenBtn() {\n",
+    "        var dropl = document.getElementById(\"fileBrowser\");\n",
+    "        if (dropl.options[dropl.selectedIndex].getAttribute(\"dir\") === \"true\") {\n",
+    "            $(\"#fileBrowserOpenBtn\").text(\"Open Folder\");\n",
+    "        } else {\n",
+    "            $(\"#fileBrowserOpenBtn\").text(\"Open File\");\n",
+    "        }\n",
+    "    }\n",
+    "\n",
+    "    function forceFileBrowserRefresh() {\n",
+    "        var path = QB.currentPath || \"/\";\n",
+    "        if (path.substr(-1) !== \"/\") path = path + \"/\";\n",
+    "        \n",
+    "        QB.browser[path] = [];\n",
+    "        console.log(\"force reload files \" + path);\n",
+    "        fileBrowserRefresh();\n",
+    "    }\n",
+    "\n",
+    "    function fileBrowserRefresh(selectedDataset) {\n",
+    "        var path = QB.currentPath || \"/\";\n",
+    "        if (path.substr(-1) !== \"/\") path = path + \"/\";\n",
+    "\n",
+    "        if (!QB.browser[path]) {\n",
+    "            QB.browser[path] = [];\n",
+    "        }\n",
+    "\n",
+    "        var b = QB.browser[path];\n",
     "\n",
+    "        if (QB.browser[path].length > 0) {\n",
+    "            console.log(\"retrieve cached folder: \" + path)\n",
+    "            populateFileBrowser(b, selectedDataset);\n",
+    "            return;\n",
+    "        }\n",
+    "        console.log(\"retrieve folder: \" + path)\n",
+    "        $.get(`/hopsworks-api/api/project/${QB.currentProjectId}/dataset/getContent${path}`, function (data, status) {\n",
+    "            if (path !== \"/\") {\n",
+    "                var relativePath = path.split(\"/\");\n",
+    "                relativePath.pop();\n",
+    "                relativePath.pop();\n",
+    "                b.push({\n",
+    "                    label: \"..\",\n",
+    "                    relativePath: relativePath.join(\"/\") + \"/\",\n",
+    "                    dir: true \n",
+    "                })\n",
+    "            }\n",
+    "\n",
+    "            var shared = path.indexOf(\"::\") > 0;\n",
+    "            skipthem = [\"Jupyter\", \"Logs\", \"Models\", \"notebook\", \"Resources\"]\n",
+    "            data.forEach(function (element) {\n",
+    "                if (element.dir && (skipthem.includes(element.name) || element.name.endsWith(\".db\"))) {\n",
+    "                    return;\n",
+    "                }\n",
+    "                if (!element.dir && element.name.substr(-4) !== \".csv\") {\n",
+    "                    return;\n",
+    "                }\n",
+    "                b.push({\n",
+    "                    label: element.name,\n",
+    "                    path: element.path,\n",
+    "                    relativePath: `${path}${element.name}`,\n",
+    "                    dir: element.dir\n",
+    "                });\n",
+    "            });\n",
+    "            b.sort(browserSort);\n",
+    "            populateFileBrowser(b, selectedDataset);\n",
+    "        });\n",
+    "    }\n",
+    "    function populateFileBrowser(b, selectedDataset) {\n",
+    "        var dropl = document.getElementById(\"fileBrowser\");\n",
+    "        dropl.options.length = 0;\n",
+    "        b.forEach(function(bb) {\n",
+    "            dropl.options.add(new Option(bb.label, bb.relativePath));\n",
+    "            dropl.options[dropl.options.length-1].setAttribute(\"dir\", bb.dir);\n",
+    "            if (!bb.dir)\n",
+    "                dropl.options[dropl.options.length-1].setAttribute(\"path\", bb.path);\n",
+    "            if (selectedDataset && selectedDataset === bb.relativePath)\n",
+    "                dropl.options[dropl.options.length-1].selected = true;\n",
+    "        });\n",
+    "        updateFileBrowserOpenBtn();\n",
+    "    }\n",
+    "    // Will sort firt the directories, then the files, sorted by label.\n",
+    "    function browserSort(a, b) {\n",
+    "        if (~a.dir < ~b.dir) {\n",
+    "            return -1;\n",
+    "        }\n",
+    "        if (~a.dir > ~b.dir) {\n",
+    "            return 1;\n",
+    "        }\n",
+    "        if (a.label.toLowerCase() < b.label.toLowerCase()) {\n",
+    "            return -1;\n",
+    "        }\n",
+    "        if (a.label.toLowerCase() > b.label.toLowerCase()) {\n",
+    "            return 1;\n",
+    "        }\n",
+    "        return 0;\n",
+    "    }\n",
+    "    function findCurrentProjectID() {\n",
+    "        var deferred = jQuery.Deferred();\n",
+    "        $.get(\"/hopsworks-api/api/project\", function (data, status) {\n",
+    "            var pdict = {}\n",
+    "            data.forEach(function (e) {\n",
+    "                pdict[e.project.name] = e.project.id;\n",
+    "            });\n",
+    "            var kernel = IPython.notebook.kernel;\n",
+    "            var callbacks = {\n",
+    "                iopub: {\n",
+    "                    output: function(data) {\n",
+    "                        var projectId = data.content.text;\n",
+    "                        deferred.resolve(projectId);\n",
+    "                    },\n",
+    "                }\n",
+    "            }\n",
+    "            var pdict_parameter = (JSON.stringify(pdict))\n",
+    "            var msg_id = kernel.execute('find_current_projectID(\\'' + pdict_parameter + '\\')', callbacks);\n",
+    "        });\n",
+    "        return deferred.promise();\n",
+    "    }\n",
+    "\n",
+    "    function showCurrentBrowser() {\n",
     "        $.get(\"/hopsworks-api/api/project\", function (data, status) {\n",
     "            var pdict = {}\n",
     "            data.forEach(function (e) {\n",
@@ -2090,14 +2264,13 @@
     "            var pdict_parameter = (JSON.stringify(pdict))\n",
     "            var msg_id = kernel.execute('find_current_projectID(\\'' + pdict_parameter + '\\')', callbacks);\n",
     "        })\n",
-    "\n",
     "    }\n",
     "\n",
     "    function datafilesObtained(options) {\n",
     "        var dropl = document.getElementById(\"fileSelect\");\n",
     "        dropl.options.length = 0;\n",
     "        for (opt in options) {\n",
-    "            dropl.options[dropl.options.length] = new Option(options[opt]);\n",
+    "            dropl.options[dropl.options.length] = new Option(options[opt].substring(options[opt].lastIndexOf(\"/\") + 1), options[opt]);\n",
     "        }\n",
     "    }\n",
     "\n",