Improves error messages.

webview/src/components/ExpressionInput.tsx

@@ -76,11 +76,8 @@ export class ExpressionInput extends React.Component<{ model: Model }> {
 				horizontalScrollbarSize: 0,
 				verticalScrollbarSize: 0,
 			},
-			/*theme: { dark: "vs-dark", light: "vs-light" }[
-				this.props.model.theme
-			],*/
 		});
-		//
+
 		this.editor.onDidContentSizeChange(e => {
 			this.contentHeight = e.contentHeight;
 		});

webview/src/components/NoData.tsx

@@ -4,41 +4,79 @@ import { observable } from "mobx";
 import Measure from "react-measure";
 
 @observer
-export class NoData extends React.Component<{ label: string }> {
-	@observable height = 0;
-	@observable width = 0;
+export class NoData extends React.Component<{ children: React.ReactChild }> {
+	@observable size = { width: 0, height: 0 };
+	@observable innerSize = { width: 0, height: 0 };
 
 	render() {
-		const { width, height } = this;
+		const { width, height } = this.size;
+		const { width: innerWidth, height: innerHeight } = this.innerSize;
 		return (
 			<Measure
 				client={true}
 				onResize={e => {
 					if (e.client) {
-						this.height = e.client.height;
-						this.width = e.client.width;
+						this.size = {
+							height: e.client.height,
+							width: e.client.width,
+						};
 					}
 				}}
 			>
 				{({ measureRef }) => (
-					<div className="component-NoData" ref={measureRef}>
+					<div
+						className="component-NoData"
+						ref={measureRef}
+						style={{ position: "relative" }}
+					>
 						<svg>
 							<line x1={0} y1={0} x2={width} y2={height} />
 							<line x1={width} y1={0} x2={0} y2={height} />
-							<rect
-								x={width / 2 - 50}
-								y={height / 2 - 20}
-								width={100}
-								height={40}
-							/>
-							<text
-								x={width / 2}
-								y={height / 2}
-								textAnchor="middle"
-								alignmentBaseline="central"
-								children={this.props.label}
-							/>
 						</svg>
+						<div
+							className="part-content"
+							style={{
+								position: "absolute",
+								overflow: "auto",
+								width: "100%",
+								height: "100%",
+							}}
+						>
+							<Measure
+								client={true}
+								onResize={e => {
+									if (e.client) {
+										this.innerSize = {
+											height: e.client.height,
+											width: e.client.width,
+										};
+									}
+								}}
+							>
+								{({ measureRef }) => (
+									<div
+										className="part-content-inner"
+										ref={measureRef}
+										style={{
+											position: "relative",
+											width: "fit-content",
+											height: "fit-content",
+											padding: 10,
+											left: Math.max(
+												0,
+												width / 2 - innerWidth / 2
+											),
+											top: Math.max(
+												0,
+												height / 2 - innerHeight / 2
+											),
+										}}
+									>
+										{this.props.children}
+									</div>
+								)}
+							</Measure>
+						</div>
 					</div>
 				)}
 			</Measure>

webview/src/components/Visualizer.tsx

@@ -2,6 +2,7 @@ import React = require("react");
 import { Model } from "../model/Model";
 import { observer } from "mobx-react";
 import { NoData } from "./NoData";
+import { FormattedMessage } from "debug-visualizer/src/contract";
 
 @observer
 export class Visualizer extends React.Component<{ model: Model }> {
@@ -14,17 +15,21 @@ export class Visualizer extends React.Component<{ model: Model }> {
 	renderContent(): JSX.Element {
 		const s = this.props.model.state;
 		if (s.kind === "loading") {
-			return <NoData label="Loading" />;
+			return <NoData>Loading</NoData>;
 		} else if (s.kind === "error") {
-			return <NoData label={"Error: " + s.message} />;
+			return (
+				<NoData>
+					<Message message={s.message} />
+				</NoData>
+			);
 		} else if (s.kind === "noExpression") {
-			return <NoData label="No Expression" />;
+			return <NoData>No Expression Entered</NoData>;
 		} else if (s.kind === "noDebugSession") {
-			return <NoData label="No Debug Session" />;
+			return <NoData>No Active Debug Session</NoData>;
 		} else if (s.kind === "data") {
 			const vis = this.props.model.visualizations;
 			if (!vis || !vis.visualization) {
-				return <NoData label="No Visualization" />;
+				return <NoData>No Visualization Available</NoData>;
 			}
 
 			return vis.visualization.render();
@@ -34,3 +39,31 @@ export class Visualizer extends React.Component<{ model: Model }> {
 		}
 	}
 }
+
+function Message(props: { message: FormattedMessage }): React.ReactElement {
+	if (typeof props.message === "string") {
+		return <span>{props.message}</span>;
+	} else if (props.message.kind === "list") {
+		return (
+			<div>
+				{props.message.items.map((i, idx) => (
+					<p>
+						<Message key={idx} message={i} />
+					</p>
+				))}
+			</div>
+		);
+	} else if (props.message.kind === "inlineList") {
+		return (
+			<div>
+				{props.message.items.map((i, idx) => (
+					<Message key={idx} message={i} />
+				))}
+			</div>
+		);
+	} else if (props.message.kind === "code") {
+		return <pre>{props.message.content}</pre>;
+	}
+
+	throw new Error("Bug");
+}

webview/src/style.scss

@@ -139,18 +139,19 @@ body {
 		width: 100%;
 		height: 100%;
 
-		rect {
-			fill: var(--vscode-editor-background);
-		}
-
 		line {
 			stroke: gray;
 		}
+	}
 
-		text {
-			fill: var(--vscode-editor-foreground);
-			stroke-width: 0px;
-		}
+	.part-content-inner {
+		background: var(--vscode-editor-background);
+		color: var(--vscode-editor-foreground);
+	}
+
+	pre {
+		margin-top: 4px;
+		margin-bottom: 4px;
 	}
 }