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/components/window/workspace/Panel.svelte

@@ -2,11 +2,13 @@
 	import Document from "@graphite/components/panels/Document.svelte";
 	import Layers from "@graphite/components/panels/Layers.svelte";
 	import Properties from "@graphite/components/panels/Properties.svelte";
+	import Spreadsheet from "@graphite/components/panels/Spreadsheet.svelte";
 
 	const PANEL_COMPONENTS = {
 		Document,
 		Layers,
 		Properties,
+		Spreadsheet,
 	};
 	type PanelType = keyof typeof PANEL_COMPONENTS;
 </script>

frontend/src/components/window/workspace/Workspace.svelte

@@ -15,7 +15,8 @@
 	const PANEL_SIZES = {
 		/**/ root: 100,
 		/*   ├─ */ content: 80,
-		/*   │     └─ */ document: 100,
+		/*   │     ├─ */ document: 70,
+		/*   │     └─ */ spreadsheet: 30,
 		/*   └─ */ details: 20,
 		/*         ├─ */ properties: 45,
 		/*         └─ */ layers: 55,
@@ -146,6 +147,12 @@
 					bind:this={documentPanel}
 				/>
 			</LayoutRow>
+			{#if $portfolio.spreadsheetOpen}
+				<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical on:pointerdown={(e) => resizePanel(e)} />
+				<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["spreadsheet"] }} data-subdivision-name="spreadsheet">
+					<Panel panelType="Spreadsheet" tabLabels={[{ name: "Spreadsheet" }]} tabActiveIndex={0} />
+				</LayoutRow>
+			{/if}
 		</LayoutCol>
 		<LayoutCol class="workspace-grid-resize-gutter" data-gutter-horizontal on:pointerdown={(e) => resizePanel(e)} />
 		<LayoutCol class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["details"] }} data-subdivision-name="details">