refactor: fix slow rendering bug and create context class

Previously, the UI would wait until an SSE had been sent from the
server before considering the SSE connection "open". This commit
resolves that issue by immediately sending a keep-alive message
as soon as the request is received.

---
type: pre_commit_static_analysis_report
description: Results of running static analysis checks when committing changes.
report:
  - task: lint_filenames
    status: passed
  - task: lint_editorconfig
    status: passed
  - task: lint_markdown
    status: na
  - task: lint_package_json
    status: na
  - task: lint_repl_help
    status: na
  - task: lint_javascript_src
    status: passed
  - task: lint_javascript_cli
    status: na
  - task: lint_javascript_examples
    status: na
  - task: lint_javascript_tests
    status: na
  - task: lint_javascript_benchmarks
    status: na
  - task: lint_python
    status: na
  - task: lint_r
    status: na
  - task: lint_c_src
    status: na
  - task: lint_c_examples
    status: na
  - task: lint_c_benchmarks
    status: na
  - task: lint_c_tests_fixtures
    status: na
  - task: lint_shell
    status: na
  - task: lint_typescript_declarations
    status: na
  - task: lint_typescript_tests
    status: na
  - task: lint_license_headers
    status: passed
---

Author: kgryte

lib/node_modules/@stdlib/plot/base/view/lib/browser/context.js

@@ -0,0 +1,102 @@
+/**
+* @license Apache-2.0
+*
+* Copyright (c) 2025 The Stdlib Authors.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*    http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+/* eslint-disable no-restricted-syntax, no-invalid-this */
+
+'use strict';
+
+// MODULES //
+
+var setNonEnumerableReadOnlyAccessor = require( '@stdlib/utils/define-nonenumerable-read-only-accessor' ); // eslint-disable-line id-length
+var setNonEnumerableReadOnly = require( '@stdlib/utils/define-nonenumerable-read-only-property' );
+var setNonEnumerable = require( '@stdlib/utils/define-nonenumerable-property' );
+var string2buffer = require( '@stdlib/buffer/from-string' );
+
+
+// MAIN //
+
+/**
+* Context constructor.
+*
+* @private
+* @constructor
+* @param {Object} plot - plot instance
+* @returns {Context} context instance
+*/
+function Context( plot ) {
+	var self;
+	if ( !( this instanceof Context ) ) {
+		return new Context( plot );
+	}
+	self = this;
+
+	setNonEnumerableReadOnly( this, '_plot', plot );
+	setNonEnumerable( this, '_spec', string2buffer( JSON.stringify( plot ) ) );
+	setNonEnumerableReadOnly( this, '_events', [] );
+
+	plot.on( 'change', onChange );
+	return this;
+
+	/**
+	* Callback invoked upon a plot "change" event.
+	*
+	* @private
+	* @param {Object} event - event object
+	*/
+	function onChange() {
+		self._spec = string2buffer( JSON.stringify( plot ) ); // eslint-disable-line no-underscore-dangle
+	}
+}
+
+/**
+* Events database.
+*
+* @name events
+* @memberof Context.prototype
+* @type {Array}
+*/
+setNonEnumerableReadOnlyAccessor( Context.prototype, 'events', function getEvents() {
+	return this._events;
+});
+
+/**
+* Plot instance.
+*
+* @name plot
+* @memberof Context.prototype
+* @type {Object}
+*/
+setNonEnumerableReadOnlyAccessor( Context.prototype, 'plot', function getPlot() {
+	return this._plot;
+});
+
+/**
+* Serialized plot specification.
+*
+* @name spec
+* @memberof Context.prototype
+* @type {Buffer}
+*/
+setNonEnumerableReadOnlyAccessor( Context.prototype, 'spec', function getSpec() {
+	return this._spec;
+});
+
+
+// EXPORTS //
+
+module.exports = Context;

lib/node_modules/@stdlib/plot/base/view/lib/browser/index.js

@@ -21,11 +21,11 @@
 // MODULES //
 
 var logger = require( 'debug' );
-var string2buffer = require( '@stdlib/buffer/from-string' );
 var openURL = require( '@stdlib/utils/open-url' );
 var createServer = require( '@stdlib/plot/base/server' );
 var routes = require( './routes' );
 var Router = require( './router.js' );
+var Context = require( './context.js' );
 
 
 // VARIABLES //
@@ -58,24 +58,17 @@ function displayPlot( plot ) {
 function view( plot ) {
 	var server;
 	var router;
-	var events;
-	var spec;
+	var ctx;
 
-	// Register a listener for tracking plot changes:
-	plot.on( 'change', onChange );
-
-	// Cache the current plot state by serializing to JSON:
-	spec = string2buffer( JSON.stringify( plot ) );
+	// Create a new request context:
+	ctx = new Context( plot );
 
 	// Initialize a new request router:
 	router = new Router();
 
 	// Register routes:
 	routes( router );
 
-	// Initialize an events database:
-	events = [];
-
 	server = plot.server;
 	if ( !server || server.address() === null ) { // note: server.address() is `null` if a server has already been closed
 		debug( 'Creating a server...' );
@@ -112,39 +105,16 @@ function view( plot ) {
 	*/
 	function onRequest( request, response ) {
 		var handler;
-		var ctx;
 
 		// Resolve a route handler:
 		handler = router.resolve( request );
 
-		// Decorate route handler `this` contexts with additional functionality:
-		ctx = {
-			// Plot instance:
-			'plot': plot,
-
-			// Cached plot schema:
-			'spec': spec,
-
-			// Events database:
-			'events': events
-		};
-
 		// Decorate each `request` object with a `locals` object for passing along intermediate results within middleware handlers:
 		request.locals = {};
 
 		// Invoke the route handler:
 		handler.call( ctx, request, response );
 	}
-
-	/**
-	* Callback invoked upon a plot 'change' event.
-	*
-	* @private
-	* @param {Event} event - event object
-	*/
-	function onChange() {
-		spec = string2buffer( JSON.stringify( plot ) );
-	}
 }
 
 

lib/node_modules/@stdlib/plot/base/view/lib/browser/routes/app/app.js

@@ -350,8 +350,8 @@
 		*/
 		function onOpen() {
 			log( 'Established server connection.' );
-			setInterval( sendAcknowledgment, ACK_INTERVAL );
 			clbk();
+			setInterval( sendAcknowledgment, ACK_INTERVAL );
 		}
 
 		/**

lib/node_modules/@stdlib/plot/base/view/lib/browser/routes/events/main.js

@@ -61,7 +61,9 @@ function handler( request, response ) {
 		debug( 'Last event id: %s', id );
 		replay( id );
 	}
+	// Send an immediate ping in order to send some data over the wire:
 	debug( 'Starting connection heartbeat...' );
+	keepAlive();
 	timer = setInterval( keepAlive, KEEP_ALIVE_INTERVAL );
 
 	request.on( 'close', closeConnection );
@@ -85,7 +87,7 @@ function handler( request, response ) {
 		counter += 1;
 
 		// FIXME: only send the JSON patch
-		data = JSON.stringify( self.plot );
+		data = self.spec.toString();
 
 		self.events.push({
 			'id': counter.toString(),