Server-side usability metrics

.gitignore

@@ -1,3 +1,4 @@
 .idea
 node_modules
 .DS_store
+test/cafe/node_modules

client/app/controllers/clientController.js

@@ -1,6 +1,6 @@
 /* global alertify, $ */
-define(['jquery', 'controllers/tableController', 'controllers/jiffController', 'alertify', 'alertify_defaults', 'table_template'],
-  function ($, tableController, jiffController, alertify, _, table_template) {
+define(['jquery', 'controllers/tableController', 'controllers/jiffController', 'controllers/usabilityController', 'alertify', 'alertify_defaults', 'table_template'],
+  function ($, tableController, jiffController, usabilityController, alertify, _, table_template) {
     var client = (function () {
       /**
        * Displays the given submission as the last submission in
@@ -94,7 +94,7 @@ define(['jquery', 'controllers/tableController', 'controllers/jiffController', '
           dataType: 'text'
         }).then(function (response) {
           JSON.parse(response); // verify response is json (error responses are string messages)
-
+          
           var $parent = $('#session, #participation-code').parent();
           $parent.removeClass('has-error').addClass('has-success has-feedback');
           $parent.find('.success-icon').removeClass('hidden').addClass('show');
@@ -104,6 +104,7 @@ define(['jquery', 'controllers/tableController', 'controllers/jiffController', '
           callback && callback(true);
         }).catch(function (err) {
           var errorMsg = SERVER_ERR;
+          usabilityController.addValidationError("SESSION_INFO_ERROR");
           if (err && err.hasOwnProperty('responseText') && err.responseText !== undefined) {
             errorMsg = err.responseText;
           }
@@ -127,24 +128,28 @@ define(['jquery', 'controllers/tableController', 'controllers/jiffController', '
         var $session = $('#session');
         if (!validateSessionInput($session, false)) {
           errors.push(SESSION_KEY_ERROR);
+          usabilityController.addValidationError("SESSION_KEY_ERROR");
         }
 
         var $participationCode = $('#participation-code');
         if (!validateSessionInput($participationCode, false)) {
           errors.push(PARTICIPATION_CODE_ERROR);
+          usabilityController.addValidationError("PARTICIPATION_CODE_ERROR");
         }
 
         // Validate the remaining components after session and
         // and participation code are validated with the server.
         var validateRemainingComponents = function (result) {
           if (!result) {
             errors.push(SESSION_PARTICIPATION_CODE_SERVER_ERROR);
+            usabilityController.addValidationError("SESSION_PARTICIPATION_CODE_SERVER_ERROR");
           }
 
           // Verify confirmation check box was checked
           var verifyChecked = $('#verify').is(':checked');
           if (!verifyChecked) {
             errors.push(UNCHECKED_ERR);
+            usabilityController.addValidationError("UNCHECKED_ERR");
           }
 
           // Verify additional questions
@@ -194,6 +199,7 @@ define(['jquery', 'controllers/tableController', 'controllers/jiffController', '
             }
             if (errors.indexOf(errorMsg) === -1) {
               errors.push(errorMsg);
+              usabilityController.addValidationError("CELL_ERROR");
             }
           };
           tableController.registerErrorHandler(errorHandler);
@@ -264,7 +270,7 @@ define(['jquery', 'controllers/tableController', 'controllers/jiffController', '
           var text = $(questions_text[q]).text();
           text = text.replace(/\s+/g, ' '); // Replace many white spaces with just one space.
           data_submission['questions'][text] = question_data;
-          questions_public[text] = Object.assign({}, question_data);
+          questions_public[text] = Object.assign({}, question_data);      
         }
 
         // Handle table data, tables are represented as 2D associative arrays
@@ -274,6 +280,12 @@ define(['jquery', 'controllers/tableController', 'controllers/jiffController', '
           data_submission[tables_data[i].name] = tables_data[i].data;
         }
 
+        if (document.getElementById('choose-file').files.length > 0) {
+          usabilityController.dataPrefilled();
+        }
+
+        data_submission['usability'] = usabilityController.analytics;
+
         // Secret share / mask the data.
         jiffController.client.submit(session, participationCode, data_submission, function (err, response) {
           if (err == null || err === 200) {
@@ -286,8 +298,10 @@ define(['jquery', 'controllers/tableController', 'controllers/jiffController', '
           } else if (err === 0 || err === 500) {
             // check for status 0 or status 500 (Server not reachable.)
             error(SERVER_ERR);
+            usabilityController.addValidationError("SERVER_ERR");
           } else {
             error(GENERIC_SUBMISSION_ERR);
+            usabilityController.addValidationError("GENERIC_SUBMISSION_ERR");
           }
 
           la.stop();

client/app/controllers/jiffController.js

@@ -99,6 +99,16 @@ define(['mpc', 'pki', 'BigNumber', 'jiff', 'jiff_bignumber', 'jiff_restAPI', 'ta
       values.push(dataSubmission['questions'][q.question][q.option]);
     }
 
+    for (var k = 0; k < ordering.usability.length; k++) {
+      const m = ordering.usability[k].metric;
+      const f = ordering.usability[k].field;
+      if (f !== null) {
+        values.push(dataSubmission.usability[m][f]);
+      } else {
+        values.push(dataSubmission.usability[m]);
+      }
+    }
+
     // Handle jiff errors returned from server
     var options = {
       onError: function (errorString) {
@@ -149,18 +159,22 @@ define(['mpc', 'pki', 'BigNumber', 'jiff', 'jiff_bignumber', 'jiff_restAPI', 'ta
 
       // Meta-info
       var ordering = mpc.consistentOrdering(table_template);
-      var submitters = JSON.parse(msg);
+      msg = JSON.parse(msg);
+      var submitters = msg['submitters'];
+      var resubmission_avg = msg['resubmission_avg'];
 
       // Compute and Format
       var promise = mpc.compute(jiff, submitters, ordering);
       promise = mpc.format(promise, submitters, ordering);
       promise.then(function (result) {
         jiff.disconnect(false, false);
+        result['usability']['resubmission_avg'] = resubmission_avg;
         callback(result);
       }).catch(function (err) {
         error(err);
       });
     });
+
   };
 
   // Exports
@@ -169,7 +183,7 @@ define(['mpc', 'pki', 'BigNumber', 'jiff', 'jiff_bignumber', 'jiff_restAPI', 'ta
       submit: clientSubmit
     },
     analyst: {
-      computeAndFormat: computeAndFormat
+      computeAndFormat
     }
   }
 });

client/app/controllers/tableController.js

@@ -1013,6 +1013,11 @@ define(['jquery', 'Handsontable', 'table_template', 'filesaver', 'alertify', 'qt
     return colWidths;
   }
 
+  function saveUsability(usability, session) {
+    var json = JSON.stringify(usability);
+    filesaver.saveAs(new Blob([json], {type: 'application/json'}), 'Usability_' + session + '.json');
+  }
+
   function saveQuestions(questions, session) {
     if (questions == null) {
       return;
@@ -1050,6 +1055,7 @@ define(['jquery', 'Handsontable', 'table_template', 'filesaver', 'alertify', 'qt
     fillData,
     saveTables,
     saveQuestions,
+    saveUsability,
     displayReadTable,
     resetTableWidth,
     updateTableWidth,

client/app/controllers/usabilityController.js

@@ -0,0 +1,109 @@
+define(['table_template'], function (table_template) {
+
+  let analytics = {};
+  let timers = {};
+
+  function initialize() {
+    for (var metric of table_template.usability) {
+      if (typeof(metric) === 'string') {
+        analytics[metric] = 0;
+      } else if (typeof(metric) === 'object') {
+        var key = Object.keys(metric)[0];
+        var fields = metric[key];
+        analytics[key] = {};
+
+        for (var f of fields) {
+          analytics[key][f] = 0;
+        }
+      } 
+    }
+
+    for (let k of Object.keys(analytics.time_spent)) {
+
+      if (k === 'page') {
+        timers[k] = new Date();
+      } else {
+        timers[k] = null;
+      }
+
+      $('#session-area').on("mouseenter", function() {
+        startTimer(k);
+      });
+
+      $('#session-area').on("mouseleave", function() {
+        endTimer(k);
+      });
+    }
+    window.addEventListener('blur', endTimer);
+    window.addEventListener('beforeunload', endTimer);
+  }
+
+  function detectBrave() {
+    // initial assertions
+    if (!window.google_onload_fired &&
+         navigator.userAgent &&
+        !navigator.userAgent.includes('Chrome'))
+      return false;
+
+    // set up test
+    var test = document.createElement('iframe');
+    test.style.display = 'none';
+    document.body.appendChild(test);
+
+    // empty frames only have this attribute set in Brave Shield
+    var is_brave = (test.contentWindow.google_onload_fired === true);
+
+    // teardown test
+    test.parentNode.removeChild(test);
+
+    return is_brave;
+  }
+
+  function startTimer(key) {
+    timers[key] = new Date();
+  };
+
+  function endTimer(key) {
+    if (typeof(key) !== 'string') {
+      key = 'page';
+    }
+    const endDate = new Date();
+    const spentTime = endDate.getTime() - timers[key].getTime();
+    analytics.time_spent[key] += spentTime;
+  };
+
+  function saveBrowser() {
+    // check Edge
+    var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|edge|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; 
+    var browser = M[0].toLowerCase();
+
+    if (detectBrave) {
+      analytics.browser.brave += 1;
+      return;
+    }
+
+    for (let key in analytics.browser) {
+      if (browser.includes(key)) {
+        analytics.browser[key] += 1;
+        return;
+      }
+    }
+    analytics.browser.other += 1;
+ }
+
+  function addValidationError(err) {
+    analytics.validation_errors[err] += 1;
+  }
+
+  function dataPrefilled() {
+    analytics.data_prefilled += 1;
+  }
+
+  return {
+    addValidationError,
+    analytics,
+    dataPrefilled,
+    initialize,
+    saveBrowser
+  };
+});

client/app/data/pacesetters.js

@@ -203,6 +203,26 @@ define([], function () {
           }
         ]
       }
+    ],
+    'usability': [
+      'data_prefilled',
+      {'time_spent': ['page', 'session_area', 'tables-area', 'review-and-submit', 'amount-spent', 'addressable-spend', 'number-MBEs']},
+      {'browser': ['brave', 'chrome', 'edge', 'msie', 'firefox', 'opera', 'other', 'safari']
+      },
+      {'validation_errors': [
+        'SESSION_KEY_ERROR',
+        'SESSION_INFO_ERROR',
+        'PARTICIPATION_CODE_ERROR',
+        'SESSION_PARTICIPATION_CODE_SERVER_ERROR',
+        'UNCHECKED_ERR',
+        'GENERIC_TABLE_ERR',
+        'SERVER_ERR',
+        'GENERIC_SUBMISSION_ERR',
+        'NAN_EMPTY_CELLS',
+        'SEMANTIC_CELLS',
+        'CELL_ERROR'
+        ]
+      }
     ]
   }
 });