[WebUI] Fix mouse events on throughput summary table area

interface/css/rspamd.css

@@ -549,20 +549,31 @@ td.maps-cell {
 }
 
 /* RRD summary */
+#summary-row {
+    padding-left: 80px;
+    padding-right: 80px;
+}
 .col-fixed,
 .col-fluid {
     position: relative;
     float: left;
-    padding-left: 80px;
-    padding-right: 80px;
 }
 .col-fixed {
     width: 200px;
-    z-index: 1;
+    min-height: 1px; /* make an empty div take space */
 }
 .col-fluid {
     width: calc(100% - 200px);
 }
+#rrd-table_toggle {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+#rrd-table_wrapper {
+    z-index: 100;
+}
 #rrd-table {
     width: 100% !important;
     text-align: left;

interface/index.html

@@ -107,7 +107,7 @@
 								</div>
 							</div>
 
-							<div class="row">
+							<div id="summary-row" class="row">
 								<div class="col-fixed" id="rrd-pie" >
 									<span class="notice">Loading..</span>
 									<noscript>Please enable Javascript</noscript>
@@ -115,6 +115,7 @@
 
 								<div class="col-fluid">
 									<table id="rrd-table" class="table table-striped table-hover"></table>
+									<div id="rrd-table_toggle"></div>
 								</div>
 							</div>
 

interface/js/app/graph.js

@@ -148,6 +148,16 @@ function($, D3Evolution, unused) {
         });
     }
 
+    // Handling mouse events on overlapping elements
+    $("#rrd-pie").mouseover(function () {
+        $("#rrd-pie").css("z-index", "200");
+        $("#rrd-table_toggle").css("z-index", "300");
+    });
+    $("#rrd-table_toggle").mouseover(function () {
+        $("#rrd-pie").css("z-index", "0");
+        $("#rrd-table_toggle").css("z-index", "0");
+    });
+
     var interface = {};
 
     interface.draw = function(rspamd, graphs, neighbours, checked_server, type) {