Migrates to new visualization framework.

webview/src/components/Visualizer.tsx

@@ -3,6 +3,7 @@ import { Model } from "../model/Model";
 import { observer } from "mobx-react";
 import { NoData } from "./NoData";
 import { FormattedMessage } from "debug-visualizer/src/contract";
+import { VisualizationView, Theme } from "@hediet/visualization-core";
 
 @observer
 export class Visualizer extends React.Component<{ model: Model }> {
@@ -12,11 +13,6 @@ export class Visualizer extends React.Component<{ model: Model }> {
 		);
 	}
 
-	componentDidCatch() {
-		this.props.model.setVisualizationError({ kind: {} });
-		console.log("broken");
-	}
-
 	renderContent(): JSX.Element {
 		const s = this.props.model.state;
 		if (s.kind === "loading") {
@@ -38,20 +34,12 @@ export class Visualizer extends React.Component<{ model: Model }> {
 			if (!vis || !vis.visualization) {
 				return <NoData>No Visualization Available</NoData>;
 			}
-
-			try {
-				return vis.visualization.render();
-			} catch (e) {
-				console.error(e);
-				return (
-					<NoData>
-						<>
-							Visualization Error
-							<pre>{e.message}</pre>
-						</>
-					</NoData>
-				);
-			}
+			return (
+				<VisualizationView
+					theme={Theme.light}
+					visualization={vis.visualization}
+				/>
+			);
 		} else {
 			const nvr: never = s;
 			return <div />;

webview/src/model/Model.ts

@@ -9,11 +9,12 @@ import {
 	DataExtractorId,
 	ExtractedData,
 } from "@hediet/debug-visualizer-data-extraction";
+import "@hediet/visualization-bundle";
 import {
-	Visualization,
+	globalVisualizationFactory,
 	VisualizationId,
-	knownVisualizations,
-} from "@hediet/visualization";
+	Visualization,
+} from "@hediet/visualization-core";
 import { getApi as getVsCodeApi } from "./VsCodeApi";
 import { MonacoBridge } from "./MonacoBridge";
 import { Disposable } from "@hediet/std/disposable";
@@ -42,7 +43,7 @@ export class Model {
 	private serverSecret: string;
 
 	@observable expression: string = "";
-	@observable state:
+	@observable.ref state:
 		| DataExtractionState
 		| { kind: "noExpression" }
 		| { kind: "visualizationError"; data: ExtractedData } = {
@@ -87,11 +88,14 @@ export class Model {
 		  }
 		| undefined {
 		if (this.state.kind === "data") {
-			const vis = knownVisualizations.getBestVisualization(
+			const vis = globalVisualizationFactory.getVisualizations(
 				this.state.result.data,
 				this.preferredVisualizationId
 			);
-			return vis;
+			return {
+				visualization: vis.bestVisualization,
+				allVisualizations: vis.allVisualizations,
+			};
 		} else {
 			return undefined;
 		}

webview/src/style.scss

@@ -1,7 +1,7 @@
 @import "~normalize.css";
 @import "~@blueprintjs/core/lib/css/blueprint.css";
 @import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
-@import "~@hediet/visualization/style.scss";
+@import "~@hediet/visualization-bundle/style.scss";
 
 html,
 body,