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

src/DarkNet/ui/NetworkDisplayWrapper.tsx

@@ -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} />
                 ),
             ),
           )}

src/DarkNet/ui/ServerSummary.tsx

@@ -48,6 +48,9 @@ export function ServerSummary({
           runningScriptNames.length > 3 ? ` +${runningScriptNames.length - 3}` : ""
         }`
       : "No running scripts on server";
+  const dataCacheTooltip = `Reward caches on server: ${server.caches.slice(0, 3).join(", ")}${
+    server.caches.length > 3 ? ` +${server.caches.length - 3}` : ""
+  }`;
   const hasStormSeed = server.programs.includes(CompletedProgramName.stormSeed);
   const hasBackdoor = server.backdoorInstalled && !server.hasStasisLink;
   const ramBlockedDetails = formatToMaxDigits(server.blockedRam, 2) + "GB";
@@ -65,7 +68,7 @@ export function ServerSummary({
   const components = [];
   if (cacheCount) {
     components.push(
-      <Tooltip key="cache" title={<>Reward cache count: {cacheCount}</>}>
+      <Tooltip key="cache" title={<>{dataCacheTooltip}</>}>
         <Typography>
           <SvgIcon component={Inventory2} className={`${classes.gold} ${classes.serverStatusIcon}`} />
           {cacheCount}

src/DarkNet/ui/networkCanvas.ts

@@ -32,8 +32,9 @@ export const drawOnCanvas = (canvas: HTMLCanvasElement) => {
     for (const connectedServerName of server.serversOnNetwork) {
       const connectedServer = getDarknetServerOrThrow(connectedServerName);
       if (
-        !connectedServer.hasAdminRights &&
-        !connectedServer.serversOnNetwork.find((s) => getDarknetServerOrThrow(s).hasAdminRights)
+        !connectedServer ||
+        (!connectedServer.hasAdminRights &&
+          !connectedServer.serversOnNetwork.find((s) => getDarknetServerOrThrow(s).hasAdminRights))
       ) {
         continue;
       }