plots visual improvements

LeandroTreu · May 16, 2024 · 62be593 · 62be593
1 parent 49ddf5c
commit 62be593
Show file tree

Hide file tree

Showing 10 changed files with 177 additions and 68 deletions.
diff --git a/profile_parser/js/color_cfg.js b/profile_parser/js/color_cfg.js
@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const BLUE = "#1976D2";
+const GREEN = "#388E3C";
+const ORANGE = "#F9A825";
+const RED = "#E53935";
+const YELLOW = "#FFB300";
+exports.default = {
+    BLUE,
+    GREEN,
+    ORANGE,
+    RED,
+    YELLOW,
+};
diff --git a/profile_parser/js/plot_acc_stats.js b/profile_parser/js/plot_acc_stats.js
@@ -1,14 +1,18 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const nodeplotlib_1 = require("nodeplotlib");
+const color_cfg_1 = __importDefault(require("./color_cfg"));
 // Scroll
 let data = [];
 let benchmarks = [];
-benchmarks.push({ name: "Un-optimized", values: [25.8, 23.4, 24.0], color: "red" });
-benchmarks.push({ name: "Opt. getImageData", values: [49.8, 51.0, 50.4], color: "orange" });
-benchmarks.push({ name: "Opt. willReadFrequently", values: [52.2, 52.2, 50.4], color: "orange" });
-benchmarks.push({ name: "Opt. GPU default", values: [57.6, 58.2, 58.2], color: "green" });
-benchmarks.push({ name: "Opt. GPU desync", values: [60.0, 60.0, 60.0], color: "green" });
+benchmarks.push({ name: "Un-optimized", values: [25.8, 23.4, 24.0], color: color_cfg_1.default.BLUE });
+benchmarks.push({ name: "Opt. getImageData", values: [49.8, 51.0, 50.4], color: color_cfg_1.default.ORANGE });
+benchmarks.push({ name: "Opt. willReadFrequently", values: [52.2, 52.2, 50.4], color: color_cfg_1.default.ORANGE });
+benchmarks.push({ name: "Opt. GPU default", values: [57.6, 58.2, 58.2], color: color_cfg_1.default.GREEN });
+benchmarks.push({ name: "Opt. GPU desync", values: [60.0, 60.0, 60.0], color: color_cfg_1.default.GREEN });
 for (let i = 0; i < benchmarks.length; ++i) {
     const benchmark = benchmarks[i];
     let values = benchmark.values;
@@ -30,7 +34,10 @@ for (let i = 0; i < benchmarks.length; ++i) {
             symmetric: false,
             array: [values[2] - values[1]],
             arrayminus: [values[1] - values[0]],
-            visible: true
+            visible: true,
+            color: "black",
+            thickness: 1.0,
+            width: 10,
         },
     };
     data.push(bar);
@@ -43,11 +50,11 @@ let layout = {
 // Panning
 data = [];
 benchmarks = [];
-benchmarks.push({ name: "Un-optimized", values: [17.4, 18.0, 17.4], color: "red" });
-benchmarks.push({ name: "Opt. getImageData", values: [25.2, 27.0, 25.8], color: "orange" });
-benchmarks.push({ name: "Opt. willReadFrequently", values: [27.0, 24.6, 27.0], color: "orange" });
-benchmarks.push({ name: "Opt. GPU default", values: [43.2, 42.0, 43.2], color: "green" });
-benchmarks.push({ name: "Opt. GPU desync", values: [40.8, 42.0, 42.0], color: "green" });
+benchmarks.push({ name: "Un-optimized", values: [17.4, 18.0, 17.4], color: color_cfg_1.default.BLUE });
+benchmarks.push({ name: "Opt. getImageData", values: [25.2, 27.0, 25.8], color: color_cfg_1.default.ORANGE });
+benchmarks.push({ name: "Opt. willReadFrequently", values: [27.0, 24.6, 27.0], color: color_cfg_1.default.ORANGE });
+benchmarks.push({ name: "Opt. GPU default", values: [43.2, 42.0, 43.2], color: color_cfg_1.default.GREEN });
+benchmarks.push({ name: "Opt. GPU desync", values: [40.8, 42.0, 42.0], color: color_cfg_1.default.GREEN });
 for (let i = 0; i < benchmarks.length; ++i) {
     const benchmark = benchmarks[i];
     let values = benchmark.values;
@@ -69,7 +76,10 @@ for (let i = 0; i < benchmarks.length; ++i) {
             symmetric: false,
             array: [values[2] - values[1]],
             arrayminus: [values[1] - values[0]],
-            visible: true
+            visible: true,
+            color: "black",
+            thickness: 1.0,
+            width: 10,
         },
     };
     data.push(bar);

diff --git a/profile_parser/js/plot_cpu_util.js b/profile_parser/js/plot_cpu_util.js
@@ -5,21 +5,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const fs_1 = __importDefault(require("fs"));
 const nodeplotlib_1 = require("nodeplotlib");
+const color_cfg_1 = __importDefault(require("./color_cfg"));
 const PLOT_FILES_IN_ONE_GRAPH = true;
 // The files should be ordered according to version benchmarked
 // Each consecutive TRACES_PER_VERSION number of files get put in the same bucket
 const N_VERSIONS = 2; // Number of different benchmark versions to compare (each version gets a color in the graph)
 const TRACES_PER_VERSION = 3; // Number of samples/traces per version
-const CPU_UTIL_SAMPLE_WINDOW_SIZE_MS = 250; // Adjust for sampling resolution / smoothing (Chrome uses about 500 ms)
+const CPU_UTIL_SAMPLE_WINDOW_SIZE_MS = 100; // Adjust for sampling resolution / smoothing (Chrome uses about 500 ms)
+const PLOT_TITLE = "Hover Far CPU Utilization";
 const files_in_directory = fs_1.default.readdirSync("results");
 let data = [];
 const layout = {
-    title: "CPU Utilization",
-    xaxis: { title: "Time (s)" },
+    title: PLOT_TITLE,
+    xaxis: { title: "Time (s)", autotick: false, dtick: 1 },
     yaxis: { title: "Utilization (%)", range: [0, 100] },
 };
 let plot_index = 0;
-let plot_colors = ["green", "red", "orange", "blue", "purple", "black"];
+let plot_colors = [color_cfg_1.default.GREEN, color_cfg_1.default.BLUE, color_cfg_1.default.ORANGE, color_cfg_1.default.RED, color_cfg_1.default.YELLOW];
 let line_color = plot_colors[0];
 for (let i = 0; i < files_in_directory.length; ++i) {
     const filename = files_in_directory[i];
@@ -62,7 +64,8 @@ for (let i = 0; i < files_in_directory.length; ++i) {
         if (plot_index % TRACES_PER_VERSION === 0) {
             line_color = plot_colors[Math.round(plot_index / TRACES_PER_VERSION)];
         }
-        const plot_filename = filename.replace("result-", "");
+        let plot_filename = filename.replace("result-", "");
+        plot_filename = plot_filename.replace(".json", "");
         const line = {
             x: x_axis,
             y: cpu_util_samples,

diff --git a/profile_parser/js/plot_frametime_histogram.js b/profile_parser/js/plot_frametime_histogram.js
@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const fs_1 = __importDefault(require("fs"));
 const nodeplotlib_1 = require("nodeplotlib");
+const color_cfg_1 = __importDefault(require("./color_cfg"));
 // Take tasks as framtimes if they are at least this long in microseconds.
 // Very short tasks (< 2ms) don't correspond to frames drawn.
 const MIN_FRAME_DURATION = 2000;
@@ -13,6 +14,9 @@ const MAX_BIN_X_VALUE = 200; // Exclusive. All values above are capped to this v
 // Each consecutive TRACES_PER_VERSION number of files get put in the same bucket
 const N_VERSIONS = 2; // Number of different benchmark versions to compare (each version gets a color in the graph)
 const TRACES_PER_VERSION = 3; // Number of samples/traces per version
+const PLOT_TITLE_0 = "Optimized SDFV Frametime Histogram";
+const PLOT_TITLE_1 = "Un-Optimized SDFV Frametime Histogram";
+let plot_colors = [color_cfg_1.default.GREEN, color_cfg_1.default.BLUE, color_cfg_1.default.ORANGE, color_cfg_1.default.RED, color_cfg_1.default.YELLOW];
 let sample_index = 0;
 let x_array = [];
 const files_in_directory = fs_1.default.readdirSync("results");
@@ -50,14 +54,21 @@ for (let i = 0; i < files_in_directory.length; ++i) {
                     end: 1000
                 },
                 marker: {
-                    color: 'green'
+                    color: plot_colors[Math.floor(sample_index / TRACES_PER_VERSION) - 1]
                 }
             };
             data.push(hist);
-            const plot_filename = filename.replace("result-", "");
+            let plot_filename = filename.replace("result-", "");
+            let plot_title = "Frametime Histogram for " + plot_filename;
+            if (sample_index === 3) {
+                plot_title = PLOT_TITLE_0;
+            }
+            if (sample_index === 6) {
+                plot_title = PLOT_TITLE_1;
+            }
             const layout = {
-                title: "Frametime Histogram for " + plot_filename,
-                xaxis: { title: "Frametime (ms)", range: [0, MAX_BIN_X_VALUE] },
+                title: plot_title,
+                xaxis: { title: "Frametime (ms)", range: [0, MAX_BIN_X_VALUE], dtick: 10 },
                 yaxis: { title: "Count" },
                 shapes: [
                     // 60 fps line
@@ -69,8 +80,8 @@ for (let i = 0; i < files_in_directory.length; ++i) {
                         y1: 1.0,
                         yref: "paper",
                         line: {
-                            color: 'orange',
-                            width: 1,
+                            color: color_cfg_1.default.YELLOW,
+                            width: 1.5,
                             dot: 'dot'
                         }
                     },
@@ -83,8 +94,8 @@ for (let i = 0; i < files_in_directory.length; ++i) {
                         y1: 1.0,
                         yref: "paper",
                         line: {
-                            color: 'red',
-                            width: 1,
+                            color: color_cfg_1.default.RED,
+                            width: 1.5,
                             dot: 'dot'
                         }
                     },

diff --git a/profile_parser/js/plot_stats_comparison.js b/profile_parser/js/plot_stats_comparison.js
@@ -5,10 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const fs_1 = __importDefault(require("fs"));
 const nodeplotlib_1 = require("nodeplotlib");
+const color_cfg_1 = __importDefault(require("./color_cfg"));
 // The files should be ordered according to version benchmarked
 // Each consecutive TRACES_PER_VERSION number of files get put in the same bucket
 const N_VERSIONS = 2; // Number of different benchmark versions to compare (each version gets a color in the graph)
 const TRACES_PER_VERSION = 3; // Number of samples/traces per version
+const PLOT_TITLE = "Zoom Frametime Comparison";
+const bar_colors = ["#388E3C", "#1976D2", "orange", "blue"];
 let sample_index = 0;
 let avg_frametimes = [];
 let median_frametimes = [];
@@ -28,7 +31,14 @@ for (let i = 0; i < files_in_directory.length; ++i) {
         const avg_frametime = stats.AvgFrameTime;
         const median_frametime = stats.MedianFrameTime;
         const percentile_frametime = stats["95thPercentileFrameTime"];
-        const plot_filename = filename.replace("result-", "");
+        let plot_filename = filename.replace("result-", "");
+        plot_filename = plot_filename.replace(".json", "");
+        if (sample_index === 3) {
+            plot_filename = "Optimized";
+        }
+        if (sample_index === 6) {
+            plot_filename = "Un-optimized";
+        }
         avg_frametimes.push(avg_frametime);
         median_frametimes.push(median_frametime);
         percentile_frametimes.push(percentile_frametime);
@@ -52,15 +62,21 @@ for (let i = 0; i < files_in_directory.length; ++i) {
                 y: y_values,
                 type: 'bar',
                 name: plot_filename,
-                text: y_values.map(String),
-                textposition: "auto",
-                hoverinfo: "none",
+                marker: {
+                    color: bar_colors[Math.floor(sample_index / TRACES_PER_VERSION) - 1],
+                },
+                // text: y_values.map(String),
+                // textposition: "auto",
+                // hoverinfo: "none",
                 error_y: {
                     type: 'data',
                     symmetric: false,
                     array: plus_deltas,
                     arrayminus: minus_deltas,
-                    visible: true
+                    visible: true,
+                    color: "black",
+                    thickness: 1.0,
+                    width: 10,
                 },
             };
             data.push(bar);
@@ -72,8 +88,8 @@ for (let i = 0; i < files_in_directory.length; ++i) {
     }
 }
 const layout = {
-    title: "Frametime Comparison",
-    yaxis: { title: "Frametime (ms)" },
+    title: PLOT_TITLE,
+    yaxis: { title: "Frametime (ms)", autotick: false, dtick: 5 },
     shapes: [
         // 60 fps line
         {
@@ -85,7 +101,7 @@ const layout = {
             y1: 16.7,
             xref: "paper",
             line: {
-                color: 'orange',
+                color: color_cfg_1.default.YELLOW,
                 width: 1,
                 dot: 'dot'
             }
@@ -100,7 +116,7 @@ const layout = {
             y1: 33.4,
             xref: "paper",
             line: {
-                color: 'red',
+                color: color_cfg_1.default.RED,
                 width: 1,
                 dot: 'dot'
             }

diff --git a/profile_parser/src/color_cfg.ts b/profile_parser/src/color_cfg.ts
@@ -0,0 +1,14 @@
+const BLUE = "#1976D2";
+const GREEN = "#388E3C";
+const ORANGE = "#F9A825";
+const RED = "#E53935";
+const YELLOW = "#FFB300";
+
+
+export default {
+    BLUE,
+    GREEN,
+    ORANGE,
+    RED,
+    YELLOW,
+}
diff --git a/profile_parser/src/plot_acc_stats.ts b/profile_parser/src/plot_acc_stats.ts
@@ -1,14 +1,15 @@
 import { plot, Plot } from 'nodeplotlib';
+import colors from "./color_cfg";
 
 // Scroll
 let data: Plot[] = [];
 let benchmarks: {name: string, values: number[], color: string}[] = [];
 
-benchmarks.push({name: "Un-optimized", values: [25.8, 23.4, 24.0], color: "red"});
-benchmarks.push({name: "Opt. getImageData", values: [49.8, 51.0, 50.4], color: "orange"});
-benchmarks.push({name: "Opt. willReadFrequently", values: [52.2, 52.2, 50.4], color: "orange"});
-benchmarks.push({name: "Opt. GPU default", values: [57.6, 58.2, 58.2], color: "green"});
-benchmarks.push({name: "Opt. GPU desync", values: [60.0, 60.0, 60.0], color: "green"});
+benchmarks.push({name: "Un-optimized", values: [25.8, 23.4, 24.0], color: colors.BLUE});
+benchmarks.push({name: "Opt. getImageData", values: [49.8, 51.0, 50.4], color: colors.ORANGE});
+benchmarks.push({name: "Opt. willReadFrequently", values: [52.2, 52.2, 50.4], color: colors.ORANGE});
+benchmarks.push({name: "Opt. GPU default", values: [57.6, 58.2, 58.2], color: colors.GREEN});
+benchmarks.push({name: "Opt. GPU desync", values: [60.0, 60.0, 60.0], color: colors.GREEN});
 
 for (let i = 0; i < benchmarks.length; ++i) {
 
@@ -33,7 +34,10 @@ for (let i = 0; i < benchmarks.length; ++i) {
             symmetric: false,
             array: [values[2]-values[1]],
             arrayminus: [values[1]-values[0]],
-            visible: true
+            visible: true,
+            color: "black",
+            thickness: 1.0,
+            width: 10,
         },
     };
     data.push(bar);
@@ -51,11 +55,11 @@ plot(data, layout);
 data = [];
 benchmarks = [];
 
-benchmarks.push({name: "Un-optimized", values: [17.4, 18.0, 17.4], color: "red"});
-benchmarks.push({name: "Opt. getImageData", values: [25.2, 27.0, 25.8], color: "orange"});
-benchmarks.push({name: "Opt. willReadFrequently", values: [27.0, 24.6, 27.0], color: "orange"});
-benchmarks.push({name: "Opt. GPU default", values: [43.2, 42.0, 43.2], color: "green"});
-benchmarks.push({name: "Opt. GPU desync", values: [40.8, 42.0, 42.0], color: "green"});
+benchmarks.push({name: "Un-optimized", values: [17.4, 18.0, 17.4], color: colors.BLUE});
+benchmarks.push({name: "Opt. getImageData", values: [25.2, 27.0, 25.8], color: colors.ORANGE});
+benchmarks.push({name: "Opt. willReadFrequently", values: [27.0, 24.6, 27.0], color: colors.ORANGE});
+benchmarks.push({name: "Opt. GPU default", values: [43.2, 42.0, 43.2], color: colors.GREEN});
+benchmarks.push({name: "Opt. GPU desync", values: [40.8, 42.0, 42.0], color: colors.GREEN});
 
 for (let i = 0; i < benchmarks.length; ++i) {
 
@@ -80,7 +84,10 @@ for (let i = 0; i < benchmarks.length; ++i) {
             symmetric: false,
             array: [values[2]-values[1]],
             arrayminus: [values[1]-values[0]],
-            visible: true
+            visible: true,
+            color: "black",
+            thickness: 1.0,
+            width: 10,
         },
     };
     data.push(bar);

diff --git a/profile_parser/src/plot_cpu_util.ts b/profile_parser/src/plot_cpu_util.ts
@@ -1,24 +1,27 @@
 import fs from 'fs';
 import { plot, Plot } from 'nodeplotlib';
+import colors from "./color_cfg";
 
 const PLOT_FILES_IN_ONE_GRAPH = true;
 // The files should be ordered according to version benchmarked
 // Each consecutive TRACES_PER_VERSION number of files get put in the same bucket
 const N_VERSIONS = 2; // Number of different benchmark versions to compare (each version gets a color in the graph)
 const TRACES_PER_VERSION = 3; // Number of samples/traces per version
-const CPU_UTIL_SAMPLE_WINDOW_SIZE_MS = 250; // Adjust for sampling resolution / smoothing (Chrome uses about 500 ms)
+const CPU_UTIL_SAMPLE_WINDOW_SIZE_MS = 100; // Adjust for sampling resolution / smoothing (Chrome uses about 500 ms)
+
+const PLOT_TITLE = "Hover Far CPU Utilization";
 
 const files_in_directory = fs.readdirSync("results");
 
 let data: Plot[] = [];
 const layout = {
-    title: "CPU Utilization",
-    xaxis: {title: "Time (s)"},
+    title: PLOT_TITLE,
+    xaxis: {title: "Time (s)", autotick: false, dtick: 1},
     yaxis: {title: "Utilization (%)", range: [0, 100]},
 }
 
 let plot_index = 0;
-let plot_colors = ["green", "red", "orange", "blue", "purple", "black"];
+let plot_colors = [colors.GREEN, colors.BLUE, colors.ORANGE, colors.RED, colors.YELLOW];
 let line_color = plot_colors[0];
 
 for (let i = 0; i < files_in_directory.length; ++i) {
@@ -73,7 +76,8 @@ for (let i = 0; i < files_in_directory.length; ++i) {
         if (plot_index % TRACES_PER_VERSION === 0) {
             line_color = plot_colors[Math.round(plot_index / TRACES_PER_VERSION)]
         }
-        const plot_filename = filename.replace("result-", "");
+        let plot_filename = filename.replace("result-", "");
+        plot_filename = plot_filename.replace(".json", "");
         const line: Plot = { 
             x: x_axis,
             y: cpu_util_samples,