GUACAMOLE-1876: Display points of interest heatmap in history recordi…

…ng player.

doc/licenses/d3-path-3.1.0/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2015-2022 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.

doc/licenses/d3-path-3.1.0/README

@@ -0,0 +1,8 @@
+d3-path (https://github.com/d3/d3-path)
+----------------------------------------------------------
+
+    Version: 3.1.0
+    From: 'Mike Bostock'
+    License(s):
+        BSD (bundled/d3-path-3.1.0/LICENSE)
+

doc/licenses/d3-path-3.1.0/dep-coordinates.txt

@@ -0,0 +1 @@
+d3-path:3.1.0

doc/licenses/d3-shape-3.2.0/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2010-2022 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.

doc/licenses/d3-shape-3.2.0/README

@@ -0,0 +1,8 @@
+d3-path (https://github.com/d3/d3-shape)
+----------------------------------------------------------
+
+    Version: 3.2.0
+    From: 'Mike Bostock'
+    License(s):
+        BSD (bundled/d3-shape-3.2.0/LICENSE)
+

doc/licenses/d3-shape-3.2.0/dep-coordinates.txt

@@ -0,0 +1 @@
+d3-shape:3.2.0

guacamole/src/main/frontend/package.json

@@ -13,6 +13,8 @@
         "angular-translate-loader-static-files": "^2.19.0",
         "blob-polyfill": ">=7.0.20220408",
         "csv": "^6.2.5",
+        "d3-path": "^3.1.0",
+        "d3-shape": "^3.2.0",
         "datalist-polyfill": "^1.25.1",
         "file-saver": "^2.0.5",
         "fuzzysort": "^2.0.4",

guacamole/src/main/frontend/src/app/player/directives/player.js

@@ -81,6 +81,7 @@ angular.module('player').directive('guacPlayer', ['$injector', function guacPlay
 
     // Required services
     const keyEventDisplayService = $injector.get('keyEventDisplayService');
+    const playerHeatmapService = $injector.get('playerHeatmapService');
     const playerTimeService = $injector.get('playerTimeService');
 
     /**
@@ -187,6 +188,57 @@ angular.module('player').directive('guacPlayer', ['$injector', function guacPlay
          */
         $scope.showKeyLog = false;
 
+        /**
+         * The height, in pixels, of the SVG heatmap paths. Note that this is not
+         * necessarily the actual rendered height, just the initial size of the
+         * SVG path before any styling is applied.
+         */
+        $scope.HEATMAP_HEIGHT = 100;
+
+        /**
+         * The width, in pixels, of the SVG heatmap paths. Note that this is not
+         * necessarily the actual rendered width, just the initial size of the
+         * SVG path before any styling is applied.
+         */
+        $scope.HEATMAP_WIDTH = 1000;
+
+        /**
+         * The maximum number of key events per millisecond to display in the
+         * key event heatmap. Any key event rates exceeding this value will be
+         * capped at this rate to ensure that unsually large spikes don't make
+         * swamp the rest of the data.
+         *
+         * Note: This is 6 keys per second (events include both presses and
+         * releases) - equivalent to ~88 words per minute typed.
+         */
+        const KEY_EVENT_RATE_CAP = 12 / 1000;
+
+        /**
+         * The maximum number of frames per millisecond to display in the
+         * frame heatmap. Any frame rates exceeding this value will be
+         * capped at this rate to ensure that unsually large spikes don't make
+         * swamp the rest of the data.
+         */
+        const FRAME_RATE_CAP = 10 / 1000;
+
+        /**
+         * An SVG path describing a smoothed curve that visualizes the relative
+         * number of frames rendered throughout the recording - i.e. a heatmap
+         * of screen updates.
+         *
+         * @type {String}
+         */
+        $scope.frameHeatmap = '';
+
+        /**
+         * An SVG path describing a smoothed curve that visualizes the relative
+         * number of key events recorded throughout the recording - i.e. a
+         * heatmap of key events.
+         *
+         * @type {String}
+         */
+        $scope.keyHeatmap = '';
+
         /**
          * Whether a seek request is currently in progress. A seek request is
          * in progress if the user is attempting to change the current playback
@@ -213,6 +265,22 @@ angular.module('player').directive('guacPlayer', ['$injector', function guacPlay
          */
         var mouseActivityTimer = null;
 
+        /**
+         * The recording-relative timestamp of each frame of the recording that
+         * has been processed so far.
+         *
+         * @type {Number[]}
+         */
+        var frameTimestamps = [];
+
+        /**
+         * The recording-relative timestamp of each text event that has been
+         * processed so far.
+         *
+         * @type {Number[]}
+         */
+        var keyTimestamps = [];
+
         /**
          * Return true if any batches of key event logs are available for this
          * recording, or false otherwise.
@@ -355,11 +423,25 @@ angular.module('player').directive('guacPlayer', ['$injector', function guacPlay
                 // Begin downloading the recording
                 $scope.recording.connect();
 
-                // Notify listeners when the recording is completely loaded
+                // Notify listeners and set any heatmap paths
+                // when the recording is completely loaded
                 $scope.recording.onload = function recordingLoaded() {
                     $scope.operationMessage = null;
                     $scope.$emit('guacPlayerLoaded');
                     $scope.$evalAsync();
+
+                    const recordingDuration = $scope.recording.getDuration();
+
+                    // Generate heat maps for rendered frames and typed text
+                    $scope.frameHeatmap = (
+                        playerHeatmapService.generateHeatmapPath(
+                            frameTimestamps, recordingDuration, FRAME_RATE_CAP,
+                            $scope.HEATMAP_HEIGHT, $scope.HEATMAP_WIDTH));
+                    $scope.keyHeatmap = (
+                        playerHeatmapService.generateHeatmapPath(
+                            keyTimestamps, recordingDuration, KEY_EVENT_RATE_CAP,
+                            $scope.HEATMAP_HEIGHT, $scope.HEATMAP_WIDTH));
+
                 };
 
                 // Notify listeners if an error occurs
@@ -375,6 +457,9 @@ angular.module('player').directive('guacPlayer', ['$injector', function guacPlay
                     $scope.operationProgress = src.size ? current / src.size : 0;
                     $scope.$emit('guacPlayerProgress', duration, current);
                     $scope.$evalAsync();
+
+                    // Store the timestamp of the just-received frame
+                    frameTimestamps.push(duration);
                 };
 
                 // Notify listeners when playback has started/resumed
@@ -396,6 +481,8 @@ angular.module('player').directive('guacPlayer', ['$injector', function guacPlay
                     $scope.textBatches = (
                             keyEventDisplayService.parseEvents(events));
 
+                    keyTimestamps = events.map(event => event.timestamp);
+
                 };
 
                 // Notify listeners when current position within the recording