Add the Spreadsheet panel to inspect node output data (#2442)

* Inspect node ouput stub

* Fix compile error in tests

* Create a table

* Clickable tables

* Add vector data support

* Checkbox to enable the panel

* Remove Instances table ID column; style the spreadsheet

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/src/state-providers/portfolio.ts

@@ -13,6 +13,10 @@ import {
 	TriggerUpgradeDocumentToVectorManipulationFormat,
 	UpdateActiveDocument,
 	UpdateOpenDocumentsList,
+	UpdateSpreadsheetState,
+	defaultWidgetLayout,
+	patchWidgetLayout,
+	UpdateSpreadsheetLayout,
 } from "@graphite/messages";
 import { downloadFileText, downloadFileBlob, upload } from "@graphite/utility-functions/files";
 import { extractPixelData, rasterizeSVG } from "@graphite/utility-functions/rasterization";
@@ -23,6 +27,9 @@ export function createPortfolioState(editor: Editor) {
 		unsaved: false,
 		documents: [] as FrontendDocumentDetails[],
 		activeDocumentIndex: 0,
+		spreadsheetOpen: false,
+		spreadsheetNode: BigInt(0) as bigint | undefined,
+		spreadsheetWidgets: defaultWidgetLayout(),
 	});
 
 	// Set up message subscriptions on creation
@@ -103,6 +110,21 @@ export function createPortfolioState(editor: Editor) {
 		editor.handle.triggerUpgradeDocumentToVectorManipulationFormat(documentId, documentName, documentIsAutoSaved, documentIsSaved, documentSerializedContent);
 	});
 
+	editor.subscriptions.subscribeJsMessage(UpdateSpreadsheetState, async (updateSpreadsheetState) => {
+		update((state) => {
+			state.spreadsheetOpen = updateSpreadsheetState.open;
+			state.spreadsheetNode = updateSpreadsheetState.node;
+			return state;
+		});
+	});
+
+	editor.subscriptions.subscribeJsMessage(UpdateSpreadsheetLayout, (updateSpreadsheetLayout) => {
+		update((state) => {
+			patchWidgetLayout(state.spreadsheetWidgets, updateSpreadsheetLayout);
+			return state;
+		});
+	});
+
 	return {
 		subscribe,
 	};