Removed unused code + added some comments in GraphicsJS

client/jsFiles/SEAWebClientGraphics.js

@@ -197,6 +197,9 @@ function strFormat(val, significant_digits=13) {
 
 let xyKey = "xy-control";
 
+/**
+ * Function used to handle some global controls for the graphs
+ */
 let globalControls = (function (){
     let controlsMap = {};
 
@@ -222,8 +225,13 @@ let globalControls = (function (){
     }
 })();
 
+// Defining keys for global indicators
+
 let datesKey = "dates-indicator";
 
+/**
+ * Function used to handle some global indicators for the graphs
+ */
 let globalIndicators = (function (){
 
     let indicatorsMap = {}
@@ -279,7 +287,7 @@ let graphs = (function (){
     let graph_array = []; // an array of Graph objects
     let graph_elm_array = []; // an array of HTML divs (with appropriate classes) containing the corresponding Graph objects of graph_array
     let vars_array = []; // an array of arrays of curve names, each curve names array is positionned at its graph id
-    let prev_blk = {}; 
+
     let tag_dict = {}; // a dictionnary of graph indexes (corresponding to the three indexes of the above arrays), indexed by the tag of the graphs
 
     let currentMinTime = 0, currentMaxTime = 0; // the currently displayed time range
@@ -288,10 +296,10 @@ let graphs = (function (){
     let minTime, maxTime; // the queried time range
     let lastTime = 0; // time of most recent data point
 
-    let resolution = undefined;
+    let resolution = undefined; // current window resolution (ms/pixel)
 
-    let activateUpdateTimeout = undefined;
+    let activateUpdateTimeout = undefined; // timeout for the activateUpdates function
-    let updateAutoTimeout = undefined;
+    let updateAutoTimeout = undefined; // timeout for the updateAuto function (used in onZoomCompleteCallback)
 
     let container = document.createElement('div');
     container.classList.add("graphs-container");
@@ -748,6 +756,12 @@ let graphs = (function (){
         resolution = Math.ceil((timeDelta / container.getBoundingClientRect().width))
     }
     
+    /**
+     * The callback to be called when the user click on the "Jump" button of the date selector
+     * Gets the vars + device name for the selected date+time, then rebuilds the graphs
+     * @param {*} dateTimestampMs The user input for the date in ms (Unix timestamp)
+     * @param {*} timeValueMs The user input for the time in ms
+     */
     function jumpToDate(dateTimestampMs, timeValueMs){
         
         cursorLine(null);
@@ -823,7 +837,7 @@ let graphs = (function (){
     }
 
     /**
-     * Removes the cursor, gets the var + graphs for now (window visualisation to [now-30min, now]) and ask for updates
+     * Removes the cursor, gets the var and device name for the visualization window of [now-30min, now]) then rebuilds the graphs
      */
     function gotoNow() {
         let msRightTimestamp = graphs.now();
@@ -846,20 +860,9 @@ let graphs = (function (){
         });
     }
 
-    /*
+    /**
-    let g_varlist = [];
+     * Builds the main container for the graphs by inserting a slide, and builds the top panel
-
-    function getVarlist(blocks){
-        var varlist = [];
-        for (var i = 0; i < blocks.length; i++) {
-            for (var j = 0; j < blocks[i].curves.length; j++) {
-                varlist.push(blocks[i].curves[j].name);
-            }
-        }
-        return varlist;
-    }
      */
-
     function buildGraphicsUI(){
 
         let f = 0;
@@ -906,16 +909,18 @@ let graphs = (function (){
             adjustLegends();
         }
     }
-
+    /**
+     * Inits the graph content
+     * @param {[{tag:string, unit:string, curves:[{name:string, label:string, color:string, original_color:string}]}]} blocks - the received blocks
+     */
     function initGraphs(blocks){
         buildGraphicsUI();
         receivedVars(blocks);
     }   
 
     /**
-     * Holds the received variables from the /getvars call, gets the server time, insert slide (?),
+     * Holds the received variables from the /getvars call, gets the server time, then creates the graphs
-     * create the graphs, activate SSE graph-update messages, sets the different event listeners
+     * @param {[{tag:string, unit:string, curves:[{name:string, label:string, color:string, original_color:string}]}]} blocks_arg - the received blocks
-     * @param {[{tag:string, unit:string, curves:[{name:string, label:string, color:string, original_color:string}]}]} blocks_arg - 
      */
     function receivedVars(blocks_arg){
         maxTime = timeRange[1]*1000;
@@ -1140,6 +1145,10 @@ let graphs = (function (){
         }
     }
 
+    /**
+     * Make sure that the updatAuto() function called in chartJS' onZoomComplete callback is delayed
+     * This is needed for mobile phones, as this callback is triggered too often
+     */
     function onZoomCompleteCallback(){
         if (updateAutoTimeout === undefined){
             updateAutoTimeout = setTimeout(function() {
@@ -1179,9 +1188,6 @@ let graphs = (function (){
         jumpToDate: jumpToDate,
         initGraphs: initGraphs,
         onZoomCompleteCallback:onZoomCompleteCallback,
-
-        prev_blk:prev_blk,
-        tag_dict:tag_dict
     }
 })();
 
@@ -1363,10 +1369,6 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
         return c;
     }
 
-    /*changecontrol = addControl("Change Dataset", function(){
-        graphs.createSelection(gindex);
-    });*/
-
     hideBox = document.createElement('div');
     hideBox.innerHTML = '&#215;';
     hideBox.classList.add('control');
@@ -1375,23 +1377,6 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
 
     controls.appendChild(hideBox);
 
-    /*
-    addControl("Hide legend", function(){
-        legend.style.display = 'none';
-        redrawX = null;
-    });
-    */
-
-    /*let update_max = null;
-    addControl("Reset Zoom/Pan", function(){
-        if(update_max !== null){
-            chart.options.scales.xAxes[0].ticks.max = update_max;
-            update_max = null;
-        }
-        chart.resetZoom();
-        graphs.zoompan(chart.graph);
-    });*/
-
     let autoScaleRow = addControl("<strong>&#9746;</strong> autoscale", function(){
         setAutoScale(!autoScaleFlag);
     });
@@ -1501,17 +1486,6 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
     legend.style.display = 'none';
 
     let margin = 10;
-    /*
-    function clickHandler(e){
-        let trect = e.target.getBoundingClientRect();
-        let X = e.clientX - trect.x, Y = e.clientY - trect.y;
-        graphs.showLegends(true, false);
-        graphs.setLiveMode();
-        graphs.cursorLine(X);
-        graphs.update();
-    }
-    */
-    //canvas.addEventListener('click', clickHandler)
 
     canvas.addEventListener('mouseover', function(e){
         graphs.bringToFront(legend);
@@ -1850,7 +1824,6 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
         pushData: pushData,
         setMinMax: setMinMax,
         setAxesType: setAxesType,
-        /* clickHandler: clickHandler, */
         setZoomMode: setZoomMode,
         showLegend: showLegend,
         setPanOnOff:setPanOnOff,