From 2b0e1aae74bf95b5b8c1c018e7bc339866195973 Mon Sep 17 00:00:00 2001
From: Holger Graef <holger.graef@gmail.com>
Date: Thu, 20 Apr 2023 19:27:41 +0200
Subject: [PATCH] [WIP] upgrade to Bootstrap 5

---
 Makefile                      |   5 +-
 app/static/.gitignore         |   3 +-
 app/static/css/sidebars.css   |  91 +++++++++++
 app/templates/base.html       |  71 +++++++--
 app/templates/main/main.html  |   4 +-
 app/templates/racine.html     |  33 ++--
 app/templates/skeleton.html   |   8 +-
 js/package.json               |   5 +-
 js/src/index.js               | 279 +++++++++++++++++-----------------
 js/src/views/main/dragdrop.js |   2 +-
 10 files changed, 322 insertions(+), 179 deletions(-)
 create mode 100644 app/static/css/sidebars.css

diff --git a/Makefile b/Makefile
index 5e63e3177..e1d837146 100644
--- a/Makefile
+++ b/Makefile
@@ -265,7 +265,7 @@ install-mathjax:
 
 install-js-dependencies: install-mathjax api-client
 	mkdir -p app/static/css
-	mkdir -p app/static/fonts
+	mkdir -p app/static/css/fonts
 
 	# install typeahead.js
 	wget -O js/src/typeahead/typeahead.bundle.js \
@@ -288,7 +288,8 @@ install-js-dependencies: install-mathjax api-client
 	cd js && npm install && npx rollup -c
 
 	cp js/node_modules/bootstrap/dist/css/bootstrap.min.css app/static/css/bootstrap.min.css
-	cp js/node_modules/bootstrap/dist/fonts/* app/static/fonts/
+	cp js/node_modules/bootstrap-icons/font/bootstrap-icons.css app/static/css/bootstrap-icons.css
+	cp js/node_modules/bootstrap-icons/font/fonts/* app/static/css/fonts/
 
 	cp js/node_modules/bootstrap-toc/dist/bootstrap-toc.min.css app/static/css/bootstrap-toc.min.css
 
diff --git a/app/static/.gitignore b/app/static/.gitignore
index 34d99c29c..bbfa72ed8 100644
--- a/app/static/.gitignore
+++ b/app/static/.gitignore
@@ -1,11 +1,12 @@
 mathjax/
 
 css/bootstrap.min.css
+css/bootstrap-icons.css
 css/bootstrap-toc.min.css
 css/lightbox.css
 css/typeahead.css
 
-fonts/
+css/fonts/
 
 images/close.png
 images/loading.gif
diff --git a/app/static/css/sidebars.css b/app/static/css/sidebars.css
new file mode 100644
index 000000000..0fdae06b8
--- /dev/null
+++ b/app/static/css/sidebars.css
@@ -0,0 +1,91 @@
+/* from https://getbootstrap.com/docs/5.0/examples/sidebars/sidebars.css */
+
+body {
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+}
+
+html {
+  height: -webkit-fill-available;
+}
+
+main {
+  display: flex;
+  flex-wrap: nowrap;
+  height: 100vh;
+  height: -webkit-fill-available;
+  max-height: 100vh;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.b-example-divider {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, .1);
+  border: solid rgba(0, 0, 0, .15);
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.bi {
+  vertical-align: -.125em;
+  pointer-events: none;
+  fill: currentColor;
+}
+
+.dropdown-toggle { outline: 0; }
+
+.nav-flush .nav-link {
+  border-radius: 0;
+}
+
+.btn-toggle {
+  display: inline-flex;
+  align-items: center;
+  padding: .25rem .5rem;
+  font-weight: 600;
+  color: rgba(0, 0, 0, .65);
+  background-color: transparent;
+  border: 0;
+}
+.btn-toggle:hover,
+.btn-toggle:focus {
+  color: rgba(0, 0, 0, .85);
+  background-color: #d2f4ea;
+}
+
+.btn-toggle::before {
+  width: 1.25em;
+  line-height: 0;
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+  transition: transform .35s ease;
+  transform-origin: .5em 50%;
+}
+
+.btn-toggle[aria-expanded="true"] {
+  color: rgba(0, 0, 0, .85);
+}
+.btn-toggle[aria-expanded="true"]::before {
+  transform: rotate(90deg);
+}
+
+.btn-toggle-nav a {
+  display: inline-flex;
+  padding: .1875rem .5rem;
+  margin-top: .125rem;
+  margin-left: 1.25rem;
+  text-decoration: none;
+}
+.btn-toggle-nav a:hover,
+.btn-toggle-nav a:focus {
+  background-color: #d2f4ea;
+}
+
+.scrollarea {
+  overflow-y: auto;
+}
+
+.fw-semibold { font-weight: 600; }
+.lh-tight { line-height: 1.25; }
diff --git a/app/templates/base.html b/app/templates/base.html
index f80a52e5c..383861b43 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -2,6 +2,7 @@
 
 {% block styles %}
 {{ super() }}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/sidebars.css') }}">
     <style>
     /* TODO: this should be in something like base.css */
     div.sample {
@@ -17,24 +18,74 @@
 {% endblock %}
 
 {% block navbar_top %}
-    <ul class="nav navbar-nav navbar-right">
+    <ul class="navbar-nav navbar-right">
         {% if current_user.is_admin %}
-            <li><a href="/settings/smbresources"><i class="hidden-xs glyphicon glyphicon-wrench" title="Settings"></i><span class="visible-xs-block">Settings</span></a></li>
+            <li class="nav-item"><a class="nav-link" href="/settings/smbresources"><i class="d-none d-sm-block bi-gear" title="Settings"></i><span class="d-sm-none">Settings</span></a></li>
         {% endif %}
-        <li><a href="/print"><i class="hidden-xs glyphicon glyphicon-print" title="Print"></i><span class="visible-xs-block">Print</span></a></li>
-        <li><a href="/profile/changedetails"><i class="hidden-xs glyphicon glyphicon-user" title="Profile"></i><span class="hidden-xs">&nbsp;&nbsp;{{ current_user.username }}</span><span class="visible-xs-block">Profile</span></a></li>
-        <li><a href="{{ url_for('auth.logout') }}"><i class="hidden-xs glyphicon glyphicon-log-out" title="Sign out"></i><span class="visible-xs-block">Sign out</span></a></li>
-        <li><a href="/help"><i class="hidden-xs glyphicon glyphicon-question-sign" title="Help"></i><span class="visible-xs-block">Help</span></a></li>
+        <li class="nav-item"><a class="nav-link" href="/print"><i class="d-none d-sm-block bi-printer" title="Print"></i><span class="d-sm-none">Print</span></a></li>
+        <li class="nav-item"><a class="nav-link" href="/profile/changedetails"><i class="d-none d-sm-inline bi-person" title="Profile"></i><span class="d-none d-sm-inline">&nbsp;&nbsp;{{ current_user.username }}</span><span class="d-sm-none">Profile</span></a></li>
+        <li class="nav-item"><a class="nav-link" href="{{ url_for('auth.logout') }}"><i class="d-none d-sm-block bi-box-arrow-right" title="Sign out"></i><span class="d-sm-none">Sign out</span></a></li>
+        <li class="nav-item"><a class="nav-link" href="/help"><i class="d-none d-sm-block bi-question-circle" title="Help"></i><span class="d-sm-none">Help</span></a></li>
     </ul>
-    <form class="nav navbar-form navbar-right">
+    {# <form class="nav navbar-form navbar-right">
         <input type="text" id="navbar-search" class="form-control" placeholder="Search...">
-    </form>
+    </form>  #}
 {% endblock %}
 
 {% set begin_flashmsg = "<div class='alert alert-warning col-sm-9 col-md-10'><button type='button' class='close' data-dismiss='alert'>&times;</button>" %}
 {% set end_flashmsg = "</div>" %}
 {% block content %}
-    <div class="container-fluid">
+<main>
+<div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
+    <ul class="list-unstyled ps-0">
+      <li class="mb-1">
+        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false">
+          Home
+        </button>
+        <div class="collapse" id="home-collapse" style="">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+            <li><a href="#" class="link-dark rounded">Overview</a></li>
+            <li><a href="#" class="link-dark rounded">Updates</a></li>
+            <li><a href="#" class="link-dark rounded">Reports</a></li>
+          </ul>
+        </div>
+      </li>
+      <li class="mb-1">
+        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
+          Dashboard
+        </button>
+        <div class="collapse" id="dashboard-collapse">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+          </ul>
+        </div>
+      </li>
+      <li class="mb-1">
+        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
+          Orders
+        </button>
+        <div class="collapse" id="orders-collapse">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+          </ul>
+        </div>
+      </li>
+      <li class="border-top my-3"></li>
+      <li class="mb-1">
+        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
+          Account
+        </button>
+        <div class="collapse" id="account-collapse">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+          </ul>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div>
+  {% block page_content %}
+  {% endblock %}
+  </div>
+</main>
+    {# <div class="container-fluid">
       <div class="row">
         {% block sidebarnav %}{% endblock %}
         <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
@@ -54,5 +105,5 @@
       </div>
     </div>
 
-    <div class="content-overlay"></div>
+    <div class="content-overlay"></div> #}
 {% endblock %}
diff --git a/app/templates/main/main.html b/app/templates/main/main.html
index 21c4036b5..0a87fb2d3 100644
--- a/app/templates/main/main.html
+++ b/app/templates/main/main.html
@@ -3,8 +3,8 @@
 {% block styles %}
 {{super()}}
     <link rel="stylesheet" href="{{url_for('static', filename='css/lightbox.css')}}">
-    <link rel="stylesheet" href="{{url_for('static', filename='navbar.css', version='20191215')}}">
-    <link rel="stylesheet" href="{{url_for('static', filename='editor.css', version='20210420')}}">
+    <!--<link rel="stylesheet" href="{{url_for('static', filename='navbar.css', version='20191215')}}">-->
+    <!--<link rel="stylesheet" href="{{url_for('static', filename='editor.css', version='20210420')}}">-->
 {% endblock %}
 
 {% block sidebarnav %}
diff --git a/app/templates/racine.html b/app/templates/racine.html
index f449dd6e4..3f0a42cd1 100644
--- a/app/templates/racine.html
+++ b/app/templates/racine.html
@@ -17,8 +17,8 @@
 {{ super() }}
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
     <link rel="manifest" href="{{ url_for('static', filename='manifest.webmanifest') }}">
-    <link rel="stylesheet" href="{{url_for('static', filename='base.css')}}">
-    <link rel="stylesheet" href="{{url_for('static', filename='css/typeahead.css')}}">
+    {# <link rel="stylesheet" href="{{url_for('static', filename='base.css')}}"> #}
+    {# <link rel="stylesheet" href="{{url_for('static', filename='css/typeahead.css')}}"> #}
     {% if config['DEBUG'] %}
         <style>
             .navbar-fixed-top {
@@ -29,24 +29,19 @@
 {% endblock %}
 
 {% block navbar %}
-    <nav class="navbar navbar-inverse navbar-fixed-top">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
         <div class="container-fluid">
-            <div class="navbar-header">
-                <div class="nav-button nav-button-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-                    <i class="glyphicon glyphicon-option-vertical"></i>
-                </div>
-                <div id="toggle-sidebar" class="nav-button nav-button-left nav-button-toggle">
-                    <i class="glyphicon glyphicon-menu-hamburger"></i>
-                </div>
-                <a class="navbar-brand" href="/">
-                    {% if config['DEBUG'] %}
-                    Racine #DEV#
-                    {% else %}
-                    Racine
-                    {% endif %}
-                </a>
-            </div>
-            <div id="navbar" class="navbar-collapse collapse">
+            <a class="navbar-brand" href="/">Racine</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                </ul>
+                <form class="d-flex">
+                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                    <button class="btn btn-outline-success" type="submit">Search</button>
+                </form>
                 {% block navbar_top %}
                 {% endblock %}
             </div>
diff --git a/app/templates/skeleton.html b/app/templates/skeleton.html
index 37a9044cf..8c9d1acef 100644
--- a/app/templates/skeleton.html
+++ b/app/templates/skeleton.html
@@ -1,15 +1,17 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="en">
   <head>
     {%- block head %}
     <title>{% block title %}{{title|default}}{% endblock title %}</title>
 
     {%- block metas %}
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     {%- endblock metas %}
 
     {%- block styles %}
     <link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap.min.css')}}">
+    <link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap-icons.css')}}">
     {%- endblock styles %}
     {%- endblock head %}
   </head>
diff --git a/js/package.json b/js/package.json
index 0b2a77d26..ff31e1d1b 100644
--- a/js/package.json
+++ b/js/package.json
@@ -6,9 +6,10 @@
   "license": "GPL v3",
   "browser": "index.js",
   "dependencies": {
-    "bootstrap": "3.4.1",
+    "bootstrap": "5.2.3",
+    "bootstrap-icons": "1.10.4",
     "bootstrap-toc": "git+https://github.com/afeld/bootstrap-toc.git#v0.4.1",
-    "jquery": "1.11.3",
+    "jquery": "3.3.1",
     "lightbox2": "2.8.2"
   },
   "devDependencies": {
diff --git a/js/src/index.js b/js/src/index.js
index b3e0b2a7d..1031f5843 100644
--- a/js/src/index.js
+++ b/js/src/index.js
@@ -1,140 +1,141 @@
-import './util/jquery-global.js';
+// import './util/jquery-global.js';
+import 'popper.js';
 import 'bootstrap';
-import './typeahead';
-
-import $ from 'jquery';
-
-import 'bootstrap-toc/bootstrap-toc';
-import 'lightbox2';
-import './jquery-plugins/jquery.jeditable';
-import './jquery-plugins/ckeditable';
-import './jquery-plugins/zoombutton';
-import './jquery-plugins/racinecontent';
-
-import * as API from './api';
-import views from './views';
-
-import {createSearchSample} from './util/searchsample';
-
-class Racine {
-  constructor(apiToken, view, params) {
-    const self = this;
-
-    this.apiToken = apiToken;
-    this.apiClient = new API.ApiClient(window.location.origin);
-    this.apiClient.authentications['bearerAuth'].accessToken = apiToken;
-
-    this.samplesAPI = new API.SamplesApi(this.apiClient);
-    this.sharesAPI = new API.SharesApi(this.apiClient);
-    this.actionsAPI = new API.ActionsApi(this.apiClient);
-
-    if (view in views) {
-      this.view = new views[view](params);
-    } else {
-      console.error('Unknown view: ' + view);
-      return;
-    }
-
-    $(document).ready(function() {
-      self.onDocumentReady();
-    });
-  }
-
-  onDocumentReady() {
-    // login view and browser view do not have a sidebar
-    if ((this.view instanceof views.login) || (this.view instanceof views.browser)) {
-      this.view.onDocumentReady();
-      return;
-    }
-
-    $('#toggle-sidebar').click(function() {
-      if ($('.sidebar').hasClass('overlay')) {
-        $('.sidebar').removeClass('overlay');
-        $('.content-overlay').fadeOut();
-      } else {
-        $('.sidebar').addClass('overlay');
-        $('.content-overlay').fadeIn();
-      }
-    });
-
-    $('.content-overlay').click(function() {
-      this.mobileHideSidebar();
-    });
-
-    $('.nav-button-toggle').click(function() {
-      if ($(this).hasClass('active')) {
-        $(this).removeClass('active');
-      } else {
-        $(this).addClass('active');
-      }
-    });
-
-    this.#setupHeaderSearch();
-
-    this.view.onDocumentReady();
-  }
-
-  mobileHideSidebar() {
-    $('#toggle-sidebar').removeClass('active');
-    $('.sidebar').removeClass('overlay');
-    $('.content-overlay').fadeOut();
-  }
-
-  errorDialog(message) {
-    // TODO: think about uniting this with flash messages
-    $('#errordialog').find('.modal-body').text(message);
-    $('#errordialog').modal('show');
-  }
-
-  lightboxWrapper() {
-    if (this.src.includes('?')) {
-      return '<a class="lightboxlink" href="'+this.src+'&fullsize" data-lightbox="'+R.view.state.sampleid+'">';
-    } else {
-      return '<a class="lightboxlink" href="'+this.src+'?fullsize" data-lightbox="'+R.view.state.sampleid+'">';
-    }
-  }
-
-  #setupHeaderSearch() {
-    const self = this;
-
-    createSearchSample($('#navbar-search'));
-
-    $('#navbar-search').bind('typeahead:selected', function(event, suggestion) {
-      $(this).typeahead('val', ''); // clear the search field
-      if (self.view instanceof views.main) {
-        self.view.loadSample(suggestion.id);
-      } else {
-        self.errorDialog('Loading samples is not implemented for this view yet.');
-      }
-    });
-
-    $('#navbar-search').keypress(function(event) {
-      if (event.which == 13) {
-        if ($(this).val() === '') {
-          self.errorDialog('Please specify a search term');
-        } else {
-          if (self.view instanceof views.main) {
-            self.view.loadSearchResults($(this).val());
-          } else {
-            self.errorDialog('Search is not implemented for this view yet.');
-          }
-          $(this).typeahead('val', ''); // clear the search field
-        }
-      }
-    });
-  }
-
-  makeSamplesClickable() {
-    const self = this;
-
-    $('div.sample').click(function() {
-      if (self.view instanceof views.main) {
-        self.view.loadSample($(this).data('id'));
-      } else {
-        self.errorDialog('Loading samples is not implemented for this view yet.');
-      }
-    });
-  }
-}
-
-export default Racine;
+// import './typeahead';
+
+// import $ from 'jquery';
+
+// import 'bootstrap-toc/bootstrap-toc';
+// import 'lightbox2';
+// import './jquery-plugins/jquery.jeditable';
+// import './jquery-plugins/ckeditable';
+// import './jquery-plugins/zoombutton';
+// import './jquery-plugins/racinecontent';
+
+// import * as API from './api';
+// import views from './views';
+
+// import {createSearchSample} from './util/searchsample';
+
+// class Racine {
+//   constructor(apiToken, view, params) {
+//     const self = this;
+
+//     this.apiToken = apiToken;
+//     this.apiClient = new API.ApiClient(window.location.origin);
+//     this.apiClient.authentications['bearerAuth'].accessToken = apiToken;
+
+//     this.samplesAPI = new API.SamplesApi(this.apiClient);
+//     this.sharesAPI = new API.SharesApi(this.apiClient);
+//     this.actionsAPI = new API.ActionsApi(this.apiClient);
+
+//     if (view in views) {
+//       this.view = new views[view](params);
+//     } else {
+//       console.error('Unknown view: ' + view);
+//       return;
+//     }
+
+//     $(document).ready(function() {
+//       self.onDocumentReady();
+//     });
+//   }
+
+//   onDocumentReady() {
+//     // login view and browser view do not have a sidebar
+//     if ((this.view instanceof views.login) || (this.view instanceof views.browser)) {
+//       this.view.onDocumentReady();
+//       return;
+//     }
+
+//     $('#toggle-sidebar').click(function() {
+//       if ($('.sidebar').hasClass('overlay')) {
+//         $('.sidebar').removeClass('overlay');
+//         $('.content-overlay').fadeOut();
+//       } else {
+//         $('.sidebar').addClass('overlay');
+//         $('.content-overlay').fadeIn();
+//       }
+//     });
+
+//     $('.content-overlay').click(function() {
+//       this.mobileHideSidebar();
+//     });
+
+//     $('.nav-button-toggle').click(function() {
+//       if ($(this).hasClass('active')) {
+//         $(this).removeClass('active');
+//       } else {
+//         $(this).addClass('active');
+//       }
+//     });
+
+//     this.#setupHeaderSearch();
+
+//     this.view.onDocumentReady();
+//   }
+
+//   mobileHideSidebar() {
+//     $('#toggle-sidebar').removeClass('active');
+//     $('.sidebar').removeClass('overlay');
+//     $('.content-overlay').fadeOut();
+//   }
+
+//   errorDialog(message) {
+//     // TODO: think about uniting this with flash messages
+//     $('#errordialog').find('.modal-body').text(message);
+//     $('#errordialog').modal('show');
+//   }
+
+//   lightboxWrapper() {
+//     if (this.src.includes('?')) {
+//       return '<a class="lightboxlink" href="'+this.src+'&fullsize" data-lightbox="'+R.view.state.sampleid+'">';
+//     } else {
+//       return '<a class="lightboxlink" href="'+this.src+'?fullsize" data-lightbox="'+R.view.state.sampleid+'">';
+//     }
+//   }
+
+//   #setupHeaderSearch() {
+//     const self = this;
+
+//     createSearchSample($('#navbar-search'));
+
+//     $('#navbar-search').bind('typeahead:selected', function(event, suggestion) {
+//       $(this).typeahead('val', ''); // clear the search field
+//       if (self.view instanceof views.main) {
+//         self.view.loadSample(suggestion.id);
+//       } else {
+//         self.errorDialog('Loading samples is not implemented for this view yet.');
+//       }
+//     });
+
+//     $('#navbar-search').keypress(function(event) {
+//       if (event.which == 13) {
+//         if ($(this).val() === '') {
+//           self.errorDialog('Please specify a search term');
+//         } else {
+//           if (self.view instanceof views.main) {
+//             self.view.loadSearchResults($(this).val());
+//           } else {
+//             self.errorDialog('Search is not implemented for this view yet.');
+//           }
+//           $(this).typeahead('val', ''); // clear the search field
+//         }
+//       }
+//     });
+//   }
+
+//   makeSamplesClickable() {
+//     const self = this;
+
+//     $('div.sample').click(function() {
+//       if (self.view instanceof views.main) {
+//         self.view.loadSample($(this).data('id'));
+//       } else {
+//         self.errorDialog('Loading samples is not implemented for this view yet.');
+//       }
+//     });
+//   }
+// }
+
+// export default Racine;
diff --git a/js/src/views/main/dragdrop.js b/js/src/views/main/dragdrop.js
index dd0d49043..cb630675e 100644
--- a/js/src/views/main/dragdrop.js
+++ b/js/src/views/main/dragdrop.js
@@ -2,7 +2,7 @@ import $ from 'jquery';
 
 import {updateGlyphicon} from './glyphicons';
 
-$.event.props.push('dataTransfer'); // otherwise jQuery event does not have function dataTransfer
+// $.event.props.push('dataTransfer'); // otherwise jQuery event does not have function dataTransfer
 
 function draggableHandlers(activeEntry) {
   return {