Context nullification, cached monitor nodes

frontend/src/components/views/Graph.svelte

@@ -613,16 +613,25 @@
 		<div class="wires">
 			<svg>
 				{#each $nodeGraph.wires.values() as map}
-					{#each map.values() as { pathString, dataType, thick, dashed }}
+					{#each map.values() as { pathString, dataType, thick, dashed, center, monitorSni }}
 						{#if !thick}
 							<path
 								d={pathString}
+								class="wire-path"
 								style:--data-line-width={"2px"}
 								style:--data-color={`var(--color-data-${dataType.toLowerCase()})`}
 								style:--data-color-dim={`var(--color-data-${dataType.toLowerCase()}-dim)`}
 								style:--data-dasharray={`3,${dashed ? 2 : 0}`}
 							/>
 						{/if}
+						<!-- {console.log("center: ", center)} -->
+						<!-- {console.log("monitorSni: ", monitorSni)} -->
+						{#if center && monitorSni}
+							<!-- {console.log("thumbnails: ", $nodeGraph.thumbnails.get(monitorSni))} -->
+							<g transform={`translate(${center[0]}, ${center[1]})`}>
+								{@html $nodeGraph.thumbnails.get(monitorSni)}
+							</g>
+						{/if}
 					{/each}
 				{/each}
 				{#if $nodeGraph.wirePathInProgress}
@@ -888,7 +897,7 @@
 				height: 100%;
 				overflow: visible;
 
-				path {
+				.wire-path {
 					fill: none;
 					stroke: var(--data-color-dim);
 					stroke-width: var(--data-line-width);

frontend/src/messages.ts

@@ -321,6 +321,9 @@ export class WirePath {
 	readonly dataType!: FrontendGraphDataType;
 	readonly thick!: boolean;
 	readonly dashed!: boolean;
+	@TupleToVec2
+	readonly center!: XY | undefined;
+	readonly inputSni!: bigint;
 }
 
 export class WireUpdate {
@@ -1683,7 +1686,7 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateNodeGraphTransform,
 	UpdateNodeGraphControlBarLayout,
 	UpdateNodeGraphSelection,
-	UpdateThumbnails: UpdateThumbnail,
+	UpdateThumbnails,
 	UpdateOpenDocumentsList,
 	UpdatePropertyPanelSectionsLayout,
 	UpdateSpreadsheetLayout,

frontend/src/state-providers/node-graph.ts

@@ -118,6 +118,7 @@ export function createNodeGraphState(editor: Editor) {
 		});
 	});
 	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphNodes, (updateNodeGraphNodes) => {
+		// console.log(updateNodeGraphNodes);
 		update((state) => {
 			state.nodes.clear();
 			updateNodeGraphNodes.nodes.forEach((node) => {
@@ -168,14 +169,16 @@ export function createNodeGraphState(editor: Editor) {
 			return state;
 		});
 	});
-	editor.subscriptions.subscribeJsMessage(UpdateThumbnails, (updateThumbnail) => {
+	editor.subscriptions.subscribeJsMessage(UpdateThumbnails, (updateThumbnails) => {
+		// console.log("thumbnail update: ", updateThumbnails);
 		update((state) => {
-			for (const [id, value] of updateThumbnail.add) {
+			for (const [id, value] of updateThumbnails.add) {
 				state.thumbnails.set(id, value);
 			}
-			for (const id of updateThumbnail.clear) {
+			for (const id of updateThumbnails.clear) {
 				state.thumbnails.set(id, "");
 			}
+			// console.log("thumbnails: ", state.thumbnails);
 			return state;
 		});
 	});