DNET: More fixes and feedback (#2489)

* Add some re-rendering improvements to avoid the canvas and visual servers getting desynched

* removed underlevelled nerf to low-level servers; improved charisma level docs

* Remove offscreen dynamic culling

* PR feedback; add cache file names to tooltip

* Ensure stasis link servers get loaded properly; ensure darkweb has neighbors to prevent unit tests from failing; remove extra optional chaining accessors
This commit is contained in:
Michael Ficocelli
2026-02-13 20:23:24 -05:00
committed by GitHub
parent 68700ff01f
commit 26db9f2955
12 changed files with 52 additions and 62 deletions
+24 -46
View File
@@ -58,36 +58,33 @@ export function NetworkDisplayWrapper(): React.ReactElement {
[draggableBackground],
);
useEffect(() => {
const clearSubscription = DarknetEvents.subscribe(() => {
if (canvas.current) {
const lab = getLabyrinthDetails().lab;
const startingDepth = lab && getServerLogs(lab, 1, true).length ? lab.depth : 0;
const deepestServer = DarknetState.Network.flat().reduce((deepest, server) => {
if (server?.hasAdminRights && server.depth > deepest) {
return server.depth;
}
return deepest;
}, startingDepth);
const visibilityMargin = DarknetState.showFullNetwork ? 99 : 3;
setNetDisplayDepth(deepestServer + visibilityMargin);
const updateDisplay = useCallback(() => {
if (!canvas.current) {
return;
}
const visibilityMargin = DarknetState.showFullNetwork ? 99 : 3;
const lab = getLabyrinthDetails().lab;
const startingDepth = lab && getServerLogs(lab, 1, true).length ? lab.depth : 0;
const deepestServerDepth = DarknetState.Network.flat().reduce(
(deepest, server) => (server?.hasAdminRights && server.depth > deepest ? server.depth : deepest),
startingDepth,
);
setNetDisplayDepth(deepestServerDepth + visibilityMargin);
rerender();
drawOnCanvas(canvas.current);
}
});
canvas.current && drawOnCanvas(canvas.current);
rerender();
drawOnCanvas(canvas.current);
}, [rerender]);
useEffect(() => {
const clearSubscription = DarknetEvents.subscribe(() => updateDisplay());
draggableBackground.current?.addEventListener("wheel", (e) => e.preventDefault());
scrollTo(DarknetState.netViewTopScroll, DarknetState.netViewLeftScroll);
updateDisplay();
return () => {
clearSubscription();
};
}, [rerender, scrollTo]);
useEffect(() => {
DarknetEvents.emit();
}, []);
}, [updateDisplay, rerender, scrollTo]);
const allowAuth = (server: DarknetServer | null) =>
!!server &&
@@ -189,24 +186,6 @@ export function NetworkDisplayWrapper(): React.ReactElement {
throttledZoom(wheelEvent as unknown as WheelEvent);
};
const isWithinScreen = (server: DarknetServer) => {
const { left, top } = getPixelPosition(server, true);
const background = draggableBackground.current;
const buffer = 600;
const visibleAreaLeftEdge = (background?.scrollLeft ?? 0) / zoomOptions[zoomIndex];
const visibleAreaTopEdge = (background?.scrollTop ?? 0) / zoomOptions[zoomIndex];
const visibleAreaRightEdge =
visibleAreaLeftEdge + ((background?.clientWidth ?? 0) / zoomOptions[zoomIndex] ** 2 || window.innerWidth);
const visibleAreaBottomEdge =
visibleAreaTopEdge + ((background?.clientHeight ?? 0) / zoomOptions[zoomIndex] ** 2 || window.innerHeight);
return (
left >= visibleAreaLeftEdge - buffer &&
left <= visibleAreaRightEdge + buffer &&
top >= visibleAreaTopEdge - buffer &&
top <= visibleAreaBottomEdge + buffer
);
};
const search = (selection: string, options: string[], searchTerm: string) => {
if (searchTerm.length === 1) {
return;
@@ -317,12 +296,11 @@ export function NetworkDisplayWrapper(): React.ReactElement {
style={{ position: "absolute", zIndex: -1 }}
></canvas>
{darkWebRoot && <ServerStatusBox server={darkWebRoot} enableAuth={true} classes={classes} />}
{DarknetState.Network.slice(0, netDisplayDepth).map((row, i) =>
{DarknetState.Network.slice(0, netDisplayDepth).map((row) =>
row.map(
(server, j) =>
server &&
isWithinScreen(server) && (
<ServerStatusBox server={server} key={`${i},${j}`} enableAuth={allowAuth(server)} classes={classes} />
(server) =>
server && (
<ServerStatusBox server={server} key={server.ip} enableAuth={allowAuth(server)} classes={classes} />
),
),
)}