add performance tests

Author: archmoj

.circleci/config.yml

@@ -33,6 +33,28 @@ jobs:
           paths:
             - plotly.js
 
+  performance-jasmine:
+    docker:
+      # need '-browsers' version to test in real (xvfb-wrapped) browsers
+      - image: cimg/node:18.20.4-browsers
+    environment:
+      # Alaska time (arbitrary timezone to test date logic)
+      TZ: "America/Anchorage"
+    working_directory: ~/plotly.js
+    steps:
+      - run: sudo apt-get update
+      - browser-tools/install-browser-tools:
+          install-firefox: false
+          install-geckodriver: false
+          install-chrome: true
+          chrome-version: "132.0.6834.110"
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Run performance tests
+          command: .circleci/test.sh performance-jasmine
+
+
   timezone-jasmine:
     docker:
       # need '-browsers' version to test in real (xvfb-wrapped) browsers
@@ -500,6 +522,9 @@ workflows:
       - bundle-jasmine:
           requires:
             - install-and-cibuild
+      - performance-jasmine:
+          requires:
+            - install-and-cibuild
       - mathjax-firefoxLatest:
           requires:
             - install-and-cibuild

.circleci/test.sh

@@ -79,6 +79,11 @@ case $1 in
         exit $EXIT_STATE
         ;;
 
+    performance-jasmine)
+        npm run test-performance || EXIT_STATE=$?
+        exit $EXIT_STATE
+        ;;
+
     mathjax-firefox)
         ./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --bundleTest=mathjax --nowatch || EXIT_STATE=$?
         exit $EXIT_STATE

package.json

@@ -47,6 +47,7 @@
     "test-export": "node test/image/export_test.js",
     "test-syntax": "node tasks/test_syntax.js && npm run find-strings -- --no-output",
     "test-bundle": "node tasks/test_bundle.js",
+    "test-performance": "node tasks/test_performance.js",
     "test-plain-obj": "node tasks/test_plain_obj.mjs",
     "test": "npm run test-jasmine -- --nowatch && npm run test-bundle && npm run test-image && npm run test-export && npm run test-syntax && npm run lint",
     "b64": "python3 test/image/generate_b64_mocks.py && node devtools/test_dashboard/server.mjs",

tasks/test_performance.js

@@ -0,0 +1,46 @@
+var path = require('path');
+var exec = require('child_process').exec;
+var { glob } = require('glob');
+var runSeries = require('run-series');
+
+var constants = require('./util/constants');
+var pathToJasminePerformanceTests = constants.pathToJasminePerformanceTests;
+
+/**
+ * Run all jasmine 'performance' test in series
+ *
+ * To run specific performance tests, use
+ *
+ * $ npm run test-jasmine -- --performanceTest=<name-of-suite>
+ */
+glob(pathToJasminePerformanceTests + '/*.js').then(function(files) {
+    var tasks = files.map(function(file) {
+        return function(cb) {
+            var cmd = [
+                'karma', 'start',
+                path.join(constants.pathToRoot, 'test', 'jasmine', 'karma.conf.js'),
+                '--performanceTest=' + path.basename(file),
+                '--nowatch'
+            ].join(' ');
+
+            console.log('Running: ' + cmd);
+
+            exec(cmd, function(err) {
+                cb(null, err);
+            }).stdout.pipe(process.stdout);
+        };
+    });
+
+    runSeries(tasks, function(err, results) {
+        if(err) throw err;
+
+        var failed = results.filter(function(r) { return r; });
+
+        if(failed.length) {
+            console.log('\ntest-performance summary:');
+            failed.forEach(function(r) { console.warn('- ' + r.cmd + ' failed'); });
+            console.log('');
+            process.exit(1);
+        }
+    });
+});

tasks/util/constants.js

@@ -225,6 +225,7 @@ module.exports = {
 
     pathToJasmineTests: path.join(pathToRoot, 'test/jasmine/tests'),
     pathToJasmineBundleTests: path.join(pathToRoot, 'test/jasmine/bundle_tests'),
+    pathToJasminePerformanceTests: path.join(pathToRoot, 'test/jasmine/performance_tests'),
 
     // this mapbox access token is 'public', no need to hide it
     // more info: https://www.mapbox.com/help/define-access-token/

test/jasmine/karma.conf.js

@@ -8,7 +8,7 @@ var esbuildConfig = require('../../esbuild-config.js');
 var isCI = Boolean(process.env.CI);
 
 var argv = minimist(process.argv.slice(4), {
-    string: ['bundleTest', 'width', 'height'],
+    string: ['bundleTest', 'performanceTest', 'width', 'height'],
     boolean: [
         'mathjax3',
         'info',
@@ -21,6 +21,7 @@ var argv = minimist(process.argv.slice(4), {
         Chrome: 'chrome',
         Firefox: ['firefox', 'FF'],
         bundleTest: ['bundletest', 'bundle_test'],
+        performanceTest: ['performancetest', 'performance_test'],
         nowatch: 'no-watch',
         failFast: 'fail-fast',
     },
@@ -53,7 +54,8 @@ if(argv.info) {
         '  - All non-flagged arguments corresponds to the test suites in `test/jasmine/tests/` to be run.',
         '    No need to add the `_test.js` suffix, we expand them correctly here.',
         '  - `--bundleTest` set the bundle test suite `test/jasmine/bundle_tests/ to be run.',
-        '    Note that only one bundle test can be run at a time.',
+        '  - `--performanceTest` set the bundle test suite `test/jasmine/performance_tests/ to be run.',
+        '    Note that only one bundle/performance test can be run at a time.',
         '  - Use `--tags` to specify which `@` tags to test (if any) e.g `npm run test-jasmine -- --tags=gl`',
         '    will run only gl tests.',
         '  - Use `--skip-tags` to specify which `@` tags to skip (if any) e.g `npm run test-jasmine -- --skip-tags=gl`',
@@ -100,7 +102,8 @@ var glob = function(_) {
 };
 
 var isBundleTest = !!argv.bundleTest;
-var isFullSuite = !isBundleTest && argv._.length === 0;
+var isPerformanceTest = !!argv.performanceTest;
+var isFullSuite = !(isBundleTest || isPerformanceTest) && argv._.length === 0;
 var testFileGlob;
 
 if(isFullSuite) {
@@ -113,6 +116,14 @@ if(isFullSuite) {
     }
 
     testFileGlob = path.join(__dirname, 'bundle_tests', glob([basename(_[0])]));
+} else if(isPerformanceTest) {
+    var _ = merge(argv.performanceTest);
+
+    if(_.length > 1) {
+        console.warn('Can only run one performance test suite at a time, ignoring ', _.slice(1));
+    }
+
+    testFileGlob = path.join(__dirname, 'performance_tests', glob([basename(_[0])]));
 } else {
     testFileGlob = path.join(__dirname, 'tests', glob(merge(argv._).map(basename)));
 }
@@ -250,7 +261,7 @@ func.defaultConfig = {
                 '--touch-events',
                 '--window-size=' + argv.width + ',' + argv.height,
                 isCI ? '--ignore-gpu-blacklist' : '',
-                (isBundleTest && basename(testFileGlob) === 'no_webgl') ? '--disable-webgl' : ''
+                ((isBundleTest || isPerformanceTest) && basename(testFileGlob) === 'no_webgl') ? '--disable-webgl' : ''
             ]
         },
         _Firefox: {

test/jasmine/performance_tests/bar_test.js

@@ -0,0 +1,91 @@
+var createGraphDiv = require('../assets/create_graph_div');
+var delay = require('../assets/delay');
+var d3SelectAll = require('../../strict-d3').selectAll;
+var Plotly = require('../../../lib/core');
+var PlotlyBar = require('../../../lib/bar');
+
+var gd = createGraphDiv();
+
+[{
+    n: 1000, averageCap: 75
+}, {
+    n: 2000, averageCap: 100
+}, {
+    n: 4000, averageCap: 150
+}, {
+    n: 8000, averageCap: 300
+}, {
+    n: 16000, averageCap: 600
+}, {
+    n: 32000, averageCap: 1200
+}, {
+    n: 64000, averageCap: 2400
+}, {
+    n: 128000, averageCap: 4800
+}].forEach(function(spec) {
+    describe('Bundle with bar | size:' + spec.n, function() {
+        'use strict';
+
+        Plotly.register(PlotlyBar);
+
+        const samples = Array.from({ length: 5 }, (_, i) => i);
+        const nTimes = samples.length - 1;
+
+        var y = Float64Array.from({ length: spec.n }, (_, i) => i * Math.cos(Math.sqrt(i)));
+
+        var mock = {
+            data: [{
+                type: 'bar',
+                y: y
+            }],
+            layout: {
+                width: 1200,
+                height: 400
+            }
+        };
+
+        var startTime;
+
+        beforeEach(function(done) {
+            startTime = Date.now();
+
+            Plotly.newPlot(gd, mock).then(done);
+        });
+
+        afterEach(function(done) {
+            delay(100)().then(done);
+        });
+
+        var maxDelta = 0;
+        var aveDelta = 0;
+
+        samples.forEach(function(t) {
+            it('should graph bar traces | turn: ' + t, function() {
+                var delta = Date.now() - startTime;
+
+                if(t === 0) {
+                    console.log('________________________________');
+                    console.log('number of points in bar: ' + spec.n);
+                    console.log('expected average (cap): ' + spec.averageCap + ' ms');
+                }
+
+                if(t > 0) { // we skip the first run which is slow
+                    maxDelta = Math.max(maxDelta, delta);
+                    aveDelta += delta / nTimes;
+                }
+
+                console.log('turn: ' + t + ' | ' + delta + ' ms');
+
+                if(t === nTimes) {
+                    console.log('max: ' + maxDelta);
+                    console.log('ave: ' + aveDelta);
+
+                    expect(aveDelta).toBeLessThan(spec.averageCap);
+                }
+
+                var nodes = d3SelectAll('g.trace.bars');
+                expect(nodes.size()).toEqual(1);
+            });
+        });
+    });
+});

test/jasmine/performance_tests/scatter_test.js

@@ -0,0 +1,89 @@
+var createGraphDiv = require('../assets/create_graph_div');
+var delay = require('../assets/delay');
+var d3SelectAll = require('../../strict-d3').selectAll;
+var Plotly = require('../../../lib/core');
+
+var gd = createGraphDiv();
+
+[{
+    n: 1000, averageCap: 75
+}, {
+    n: 2000, averageCap: 100
+}, {
+    n: 4000, averageCap: 150
+}, {
+    n: 8000, averageCap: 300
+}, {
+    n: 16000, averageCap: 600
+}, {
+    n: 32000, averageCap: 1200
+}, {
+    n: 64000, averageCap: 2400
+}, {
+    n: 128000, averageCap: 4800
+}].forEach(function(spec) {
+    describe('Bundle with scatter | size:' + spec.n, function() {
+        'use strict';
+
+        const samples = Array.from({ length: 5 }, (_, i) => i);
+        const nTimes = samples.length - 1;
+
+        var y = Float64Array.from({ length: spec.n }, (_, i) => i * Math.cos(Math.sqrt(i)));
+
+        var mock = {
+            data: [{
+                type: 'scatter',
+                mode: 'markers',
+                y: y
+            }],
+            layout: {
+                width: 1200,
+                height: 400
+            }
+        };
+
+        var startTime;
+
+        beforeEach(function(done) {
+            startTime = Date.now();
+
+            Plotly.newPlot(gd, mock).then(done);
+        });
+
+        afterEach(function(done) {
+            delay(100)().then(done);
+        });
+
+        var maxDelta = 0;
+        var aveDelta = 0;
+
+        samples.forEach(function(t) {
+            it('should graph scatter traces | turn: ' + t, function() {
+                var delta = Date.now() - startTime;
+
+                if(t === 0) {
+                    console.log('________________________________');
+                    console.log('number of points in scatter: ' + spec.n);
+                    console.log('expected average (cap): ' + spec.averageCap + ' ms');
+                }
+
+                if(t > 0) { // we skip the first run which is slow
+                    maxDelta = Math.max(maxDelta, delta);
+                    aveDelta += delta / nTimes;
+                }
+
+                console.log('turn: ' + t + ' | ' + delta + ' ms');
+
+                if(t === nTimes) {
+                    console.log('max: ' + maxDelta);
+                    console.log('ave: ' + aveDelta);
+
+                    expect(aveDelta).toBeLessThan(spec.averageCap);
+                }
+
+                var nodes = d3SelectAll('g.trace.scatter');
+                expect(nodes.size()).toEqual(1);
+            });
+        });
+    });
+});