Migrates to new visualization framework.

webview/package.json

@@ -20,7 +20,10 @@
 		"react-dom": "^16.12.0",
 		"react-measure": "^2.3.0",
 		"@hediet/debug-visualizer-data-extraction": "*",
-		"@knuddels/mobx-logger": "^1.1.1"
+		"@hediet/visualization-bundle": "^0.1.1",
+		"@hediet/visualization-core": "^0.1.0",
+		"@knuddels/mobx-logger": "^1.1.1",
+		"less-loader": "^6.2.0"
 	},
 	"devDependencies": {
 		"@types/html-webpack-plugin": "^3.2.2",
@@ -35,9 +38,8 @@
 		"fork-ts-checker-webpack-plugin": "^4.0.4",
 		"html-webpack-plugin": "^3.2.0",
 		"monaco-editor-webpack-plugin": "^1.9.0",
-		"node-sass": "^4.13.1",
-		"raw-loader": "^4.0.0",
 		"sass": "^1.25.0",
+		"raw-loader": "^4.0.0",
 		"sass-loader": "^8.0.2",
 		"style-loader": "^1.1.3",
 		"ts-loader": "^6.2.1",

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,

webview/webpack.config.js

@@ -1,2 +0,0 @@
-require("ts-node").register();
-module.exports = require("./webpack.config.ts");

webview/webpack.config.ts

@@ -4,28 +4,9 @@ import HtmlWebpackPlugin = require("html-webpack-plugin");
 import MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
 import ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 import { CleanWebpackPlugin } from "clean-webpack-plugin";
-import { EnabledVisualizers } from "@hediet/visualization";
 
 const r = (file: string) => path.resolve(__dirname, file);
 
-const enabledVisualizers: EnabledVisualizers = {
-	VisJsGraphVisualizer: true,
-	TreeVisualizer: true,
-	GraphvizGraphVisualizer: true,
-	SvgVisualizer: true,
-	GraphvizDotVisualizer: true,
-	TextVisualizer: true,
-	PlotlyVisualizer: true,
-	GridVisualizer: true,
-	MonacoTextVisualizer: true,
-	AstVisualizer: true,
-};
-
-const stringifiedEnabledVisualizers: Record<string, string> = {};
-for (const [key, val] of Object.entries(enabledVisualizers)) {
-	stringifiedEnabledVisualizers[key] = JSON.stringify(val);
-}
-
 module.exports = {
 	entry: [r("src/index.tsx")],
 	output: {
@@ -47,6 +28,10 @@ module.exports = {
 	devtool: "source-map",
 	module: {
 		rules: [
+			{
+				test: /\.less$/,
+				loaders: ["style-loader", "css-loader", "less-loader"],
+			},
 			{ test: /\.css$/, loader: "style-loader!css-loader" },
 			{ test: /\.scss$/, loader: "style-loader!css-loader!sass-loader" },
 			{
@@ -74,9 +59,6 @@ module.exports = {
 				// Add more languages here once webworker issues are solved.
 				languages: ["typescript"],
 			}),
-			new webpack.DefinePlugin({
-				ENABLED_VISUALIZERS: stringifiedEnabledVisualizers,
-			}),
 		];
 
 		return plugins;