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/panels/Spreadsheet.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+
+	import { getContext } from "svelte";
+
+	import type { PortfolioState } from "/src/state-providers/portfolio";
+
+	const portfolio = getContext<PortfolioState>("portfolio");
+</script>
+
+<LayoutCol class="spreadsheet">
+	<LayoutRow class="control-bar">
+		<TextLabel>Spreadsheet Data for Node ID {$portfolio.spreadsheetNode}:</TextLabel>
+	</LayoutRow>
+	<LayoutCol class="body" scrollableY={true}>
+		<WidgetLayout layout={$portfolio.spreadsheetWidgets} />
+	</LayoutCol>
+</LayoutCol>
+
+<style lang="scss" global>
+	.spreadsheet {
+		flex-grow: 1;
+		padding: 4px;
+
+		.control-bar {
+			height: 32px;
+			--widget-height: 24px;
+			flex: 0 0 auto;
+
+			.text-label {
+				margin: calc((24px - var(--widget-height)) / 2 + 4px) 0;
+				min-height: var(--widget-height);
+				line-height: var(--widget-height);
+			}
+		}
+
+		table {
+			margin: 0 -4px;
+			width: calc(100% + 2 * 4px);
+			margin-top: 8px;
+
+			span {
+				white-space: wrap;
+			}
+		}
+	}
+</style>