nicholasaiello/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Current Watchlist reaction logic vs new algo #jsbench #jsperf</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
</head>
<body>
	<h1>Open the console to view the results</h1>
	<h2><code>cmd + alt + j</code> or <code>ctrl + alt + j</code></h2>
</body>
</html>

## suite.js
"use strict";

(function (factory) {
	if (typeof Benchmark !== "undefined") {
		factory(Benchmark);
	} else {
		factory(require("benchmark"));
	}
})(function (Benchmark) {
	var suite = new Benchmark.Suite;

	Benchmark.prototype.setup = function () {
		const rowData = [];
		const selectedWatchlistData = [];

		const instrumentModels = {};
		for (let i = 0; i < 300; i++) {
		    const symbol = `${i}GOOG`;
		    const model = {
		        description: 'Alphabet Ord Shs Class A',
		        instrumentId: 1000000785938,
		        instrumentType: 'Equity',
		        symbol
		    };

		    instrumentModels[symbol] = model
		    rowData.push(model);

		    if (i % 2 === 0) {
		        selectedWatchlistData.push(model);
		    }

		}

		const subscribeToInstrument = () => {
		    // no-op
		};

		const unsubscribeFromInstrument = () => {
		    // no-op
		};
	};


	suite.add("const newData = rowData.slice(0).filter(data => data != null);", function () {
		const newData = rowData.slice(0).filter(data => data != null);
		const prevSymbols = newData.map(({ symbol }) => symbol);
		const nextSymbols = selectedWatchlistData.map(({ symbol }) => symbol);
		const delta = prevSymbols.concat(nextSymbols).filter(val => !(prevSymbols.includes(val) && nextSymbols.includes(val)));

		delta.forEach(symbol => {
		    const index = newData.findIndex(data => data.symbol === symbol);

		    if (index === -1) {
		        const instrument = selectedWatchlistData.find(data => data.symbol === symbol);

		        instrumentModels[symbol] = subscribeToInstrument(instrument);

		        newData.push(instrumentModels[symbol]);

		        newData.sort((a, b) => nextSymbols.indexOf(a.symbol) - nextSymbols.indexOf(b.symbol));
		    }
		    else {
		        unsubscribeFromInstrument(instrumentModels[symbol]);

		        newData.splice(index, 1);
		    }
		});
	});

	suite.add("const newData = [];", function () {
		const newData = [];
		const rowData = selectedWatchlistData;
		const prevRowsMap = rowData.reduce((rows, position) => {
		    if (position != null) {
		        rows.set(position.symbol, position);
		    }

		    return rows;
		}, new Map());

		rowData.forEach(instrument => {
		    const { symbol } = instrument;

		    if (prevRowsMap.has(symbol)) {
		        prevRowsMap.delete(symbol);
		    }

		    if (!instrumentModels[symbol]) {
		        instrumentModels[symbol] = subscribeToInstrument(instrument);
		    }

		    newData.push(instrumentModels[symbol]);
		});

		prevRowsMap.forEach((value, symbol) => {
		    unsubscribeFromInstrument(instrumentModels[symbol]);
		    delete instrumentModels[symbol];
		});
	});

	suite.on("cycle", function (evt) {
		console.log(" - " + evt.target);
	});

	suite.on("complete", function (evt) {
		console.log(new Array(30).join("-"));

		var results = evt.currentTarget.sort(function (a, b) {
			return b.hz - a.hz;
		});

		results.forEach(function (item) {
			console.log((idx + 1) + ". " + item);
		});
	});

	console.log("Current Watchlist reaction logic vs new algo #jsbench #jsperf");
	console.log(new Array(30).join("-"));
	suite.run();
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Current Watchlist reaction logic vs new algo #jsbench #jsperf</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>
	<h2><code>cmd + alt + j</code> or <code>ctrl + alt + j</code></h2>
	</body>
	</html>
	"use strict";

	(function (factory) {
	if (typeof Benchmark !== "undefined") {
	factory(Benchmark);
	} else {
	factory(require("benchmark"));
	}
	})(function (Benchmark) {
	var suite = new Benchmark.Suite;

	Benchmark.prototype.setup = function () {
	const rowData = [];
	const selectedWatchlistData = [];

	const instrumentModels = {};
	for (let i = 0; i < 300; i++) {
	const symbol = `${i}GOOG`;
	const model = {
	description: 'Alphabet Ord Shs Class A',
	instrumentId: 1000000785938,
	instrumentType: 'Equity',
	symbol
	};

	instrumentModels[symbol] = model
	rowData.push(model);

	if (i % 2 === 0) {
	selectedWatchlistData.push(model);
	}

	}

	const subscribeToInstrument = () => {
	// no-op
	};

	const unsubscribeFromInstrument = () => {
	// no-op
	};
	};


	suite.add("const newData = rowData.slice(0).filter(data => data != null);", function () {
	const newData = rowData.slice(0).filter(data => data != null);
	const prevSymbols = newData.map(({ symbol }) => symbol);
	const nextSymbols = selectedWatchlistData.map(({ symbol }) => symbol);
	const delta = prevSymbols.concat(nextSymbols).filter(val => !(prevSymbols.includes(val) && nextSymbols.includes(val)));

	delta.forEach(symbol => {
	const index = newData.findIndex(data => data.symbol === symbol);

	if (index === -1) {
	const instrument = selectedWatchlistData.find(data => data.symbol === symbol);

	instrumentModels[symbol] = subscribeToInstrument(instrument);

	newData.push(instrumentModels[symbol]);

	newData.sort((a, b) => nextSymbols.indexOf(a.symbol) - nextSymbols.indexOf(b.symbol));
	}
	else {
	unsubscribeFromInstrument(instrumentModels[symbol]);

	newData.splice(index, 1);
	}
	});
	});

	suite.add("const newData = [];", function () {
	const newData = [];
	const rowData = selectedWatchlistData;
	const prevRowsMap = rowData.reduce((rows, position) => {
	if (position != null) {
	rows.set(position.symbol, position);
	}

	return rows;
	}, new Map());

	rowData.forEach(instrument => {
	const { symbol } = instrument;

	if (prevRowsMap.has(symbol)) {
	prevRowsMap.delete(symbol);
	}

	if (!instrumentModels[symbol]) {
	instrumentModels[symbol] = subscribeToInstrument(instrument);
	}

	newData.push(instrumentModels[symbol]);
	});

	prevRowsMap.forEach((value, symbol) => {
	unsubscribeFromInstrument(instrumentModels[symbol]);
	delete instrumentModels[symbol];
	});
	});

	suite.on("cycle", function (evt) {
	console.log(" - " + evt.target);
	});

	suite.on("complete", function (evt) {
	console.log(new Array(30).join("-"));

	var results = evt.currentTarget.sort(function (a, b) {
	return b.hz - a.hz;
	});

	results.forEach(function (item) {
	console.log((idx + 1) + ". " + item);
	});
	});

	console.log("Current Watchlist reaction logic vs new algo #jsbench #jsperf");
	console.log(new Array(30).join("-"));
	suite.run();
	});