code:

/** @param {NS} ns **/

let terminal = null;
let player = null;

function getElements() {
	return Array.from(eval("document").querySelectorAll("[class*=MuiBox-root]"));
}

function getProps(obj) {
	return Object.entries(obj).find(entry => entry[0].startsWith("__reactProps"))[1].children.props;
}

function hasProp(obj, prop) {
	try {
		return getProps(obj)[prop] ? true : false;
	}
	catch (ex) {
		return false;
	}
}

function getProp(prop) {
	const elements = getElements();
	//console.log(elements);
	const result = elements.find(x => hasProp(x, prop));
	//console.log(result);
	return result ? getProps(result)[prop] : null
}

function getTree(data, networkLocation, depth) {
	if (!networkLocation) {
		console.log("No Data");
		return React.createElement(
			'div',
			{
				class: 'css-cxl1tz',
				style: {
					color: "red"
				}
			},
			"No Data"
		)
	}
	return Object.keys(networkLocation).reduce((iter, node) => iter.concat(formatNode(node, data, depth), ...getTree(data, networkLocation[node], depth + 1)), []);
}

function formatNode(node, data, depth) {
	const adminRights = data.servers[node].hasAdminRights;
	const leftText = depth > 0 ? '\xa0'.repeat(depth - 1) + "\\_" : "";

	return React.createElement(
		'p',
		{
			onClick: () => terminal.connectToServer(player, node),
			key: node,
			class: 'css-cxl1tz',
			style: {
				color: adminRights ? "" : "red"
			}
		},
		leftText + node
	)
}

class NetworkMap {
	constructor(data, container) {
		this._container = container;
		this._data = data;
		this._render();
	}

	_render() {
		ReactDOM.render(
			getTree(this._data, this._data.network, 0),
			this._container
		);
	}

	set data(value) {
		this._data = value;
		this._render();
	}
}

export async function main(ns) {



	const doc = eval('document');

	const filename = (ns.args[0] ? ns.args[0] : "hosts") + ".txt";

	//Delete old data
	let old = doc.getElementById("haxx0r");
	if (old) {
		old.remove();
	}

	const root = doc.getElementById('root');
	root.setAttribute('style', 'display: flex; flex-direction: row; justify-content: stretch; align-items: flex-start');
	const container = doc.createElement('div'); //Render replaces all content so if we try to overwrite root, bad things happen.
	container.setAttribute('id', 'haxx0r');
	container.setAttribute('style', 'flex: 0 0 auto, white-space: nowrap');
	root.appendChild(container);

	const map = new NetworkMap({}, container);

	do {
		terminal = getProp("terminal");
		player = getProp("player");
		await ns.sleep(200);
	} while (!terminal || !player)

	console.dir(terminal);
	console.dir(player);

	while (true) {

		const data = JSON.parse(ns.read(filename));
		if (data === "") {
			ns.print(`File not found.  Waiting.`);
			await ns.sleep(10000);
			continue;
		}

		const muibox = root.getElementsByClassName("MuiBox-root");
		if (muibox.length) {
			muibox[0].setAttribute("style", "flex: 1 1 auto");
		}

		map.data = data; //Update panel

		await ns.sleep(5000);
	}
}