version bump

add domain for plotly

.github/workflows/playground.yml

@@ -0,0 +1,26 @@
+name: Release
+on:
+    push:
+        branches:
+            - master
+jobs:
+    release:
+        name: Release
+        runs-on: ubuntu-18.04
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v1
+            - name: Setup Node.js
+              uses: actions/setup-node@v1
+              with:
+                  node-version: 12
+            - name: Install dependencies
+              run: yarn install
+            - name: Build
+              run: yarn build
+            - name: Publish github pages
+              run: |
+                  git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
+                  yarn workspace playground run pub
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
 	"tasksStatusbar.taskLabelFilter": "dev",
-	"editor.formatOnSave": true
+	"editor.formatOnSave": true,
+	"typescript.tsdk": "node_modules\\typescript\\lib"
 }

playground/package.json

@@ -5,9 +5,9 @@
 	"scripts": {
 		"dev": "webpack-dev-server --hot",
 		"build": "yarn build-webpack && yarn build-docs",
-		"build-webpack": "node --max_old_space_size=4096 ../node_modules/webpack/bin/webpack.js --mode production",
+		"build-webpack": "node --max_old_space_size=4096 --openssl-legacy-provider ../node_modules/webpack/bin/webpack.js --mode production",
 		"build-docs": "ts-node ./scripts/build-docs",
-		"pub": "gh-pages -d dist"
+		"pub": "gh-pages -d dist -u 'github-actions-bot <support+actions@github.com>'"
 	},
 	"dependencies": {
 		"@blueprintjs/core": "^3.23.1",
@@ -17,13 +17,13 @@
 		"classnames": "^2.2.6",
 		"mobx": "^5.15.4",
 		"mobx-react": "^6.1.8",
-		"monaco-editor": "^0.20.0",
+		"monaco-editor": "^0.25.2",
 		"react": "^16.12.0",
 		"react-dom": "^16.12.0",
 		"messagepack": "^1.1.10",
 		"base64-js": "^1.3.1",
 		"lzma": "^2.3.2",
-		"@hediet/monaco-editor-react": "^0.1.1"
+		"@hediet/monaco-editor-react": "^0.2.0"
 	},
 	"devDependencies": {
 		"gh-pages": "^2.2.0",
@@ -37,7 +37,7 @@
 		"file-loader": "^5.1.0",
 		"fork-ts-checker-webpack-plugin": "^4.0.4",
 		"html-webpack-plugin": "^3.2.0",
-		"monaco-editor-webpack-plugin": "^1.9.0",
+		"monaco-editor-webpack-plugin": "^4.0.0",
 		"raw-loader": "^4.0.0",
 		"sass-loader": "^8.0.2",
 		"sass": "^1.25.0",

playground/src/components/PlaygroundDocumentEditor.tsx

@@ -174,7 +174,7 @@ class VisualizationConfigView extends React.Component<{
 		if (visualizations.bestVisualization) {
 			const tsTypeGenerator = new TypeScriptTypeGenerator();
 			const typeSrc = tsTypeGenerator.getType(
-				visualizations.bestVisualization.sourceVisualizer.serializer.asSerializer()
+				visualizations.bestVisualizationVisualizer!.serializer.asSerializer()
 			);
 			const decl = tsTypeGenerator.getDefinitionSource();
 			return {

playground/src/demo.editable.json

@@ -8,6 +8,14 @@
 			"dataSrc": "{\r\n    \"kind\": {\r\n        \"plotly\": true\r\n    },\r\n    \"data\": [\r\n        {\r\n            \"type\": \"mesh3d\",\r\n            \"x\": [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9 ],\r\n            \"y\": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ],\r\n            \"z\": [\r\n                0,\r\n                0.8414709848078965,\r\n                0.9092974268256817,\r\n                0.1411200080598672,\r\n                -0.7568024953079282,\r\n                -0.9589242746631385,\r\n                -0.27941549819892586,\r\n                0.6569865987187891,\r\n                0.9893582466233818,\r\n                0.4121184852417566,\r\n                0.8414709848078965,\r\n                1.682941969615793,\r\n                1.7507684116335782,\r\n                0.9825909928677637,\r\n                0.0846684894999683,\r\n                -0.11745328985524195,\r\n                0.5620554866089706,\r\n                1.4984575835266856,\r\n                1.8308292314312782,\r\n                1.253589470049653,\r\n                0.9092974268256817,\r\n                1.7507684116335782,\r\n                1.8185948536513634,\r\n                1.0504174348855488,\r\n                0.1524949315177535,\r\n                -0.049626847837456745,\r\n                0.6298819286267558,\r\n                1.5662840255444708,\r\n                1.8986556734490634,\r\n                1.3214159120674382,\r\n                0.1411200080598672,\r\n                0.9825909928677637,\r\n                1.0504174348855488,\r\n                0.2822400161197344,\r\n                -0.615682487248061,\r\n                -0.8178042666032712,\r\n                -0.13829549013905865,\r\n                0.7981066067786563,\r\n                1.130478254683249,\r\n                0.5532384933016238,\r\n                -0.7568024953079282,\r\n                0.0846684894999683,\r\n                0.1524949315177535,\r\n                -0.615682487248061,\r\n                -1.5136049906158564,\r\n                -1.7157267699710665,\r\n                -1.036217993506854,\r\n                -0.09981589658913914,\r\n                0.23255575131545358,\r\n                -0.3446840100661716,\r\n                -0.9589242746631385,\r\n                -0.11745328985524195,\r\n                -0.049626847837456745,\r\n                -0.8178042666032712,\r\n                -1.7157267699710665,\r\n                -1.917848549326277,\r\n                -1.2383397728620644,\r\n                -0.3019376759443494,\r\n                0.030433971960243333,\r\n                -0.5468057894213818,\r\n                -0.27941549819892586,\r\n                0.5620554866089706,\r\n                0.6298819286267558,\r\n                -0.13829549013905865,\r\n                -1.036217993506854,\r\n                -1.2383397728620644,\r\n                -0.5588309963978517,\r\n                0.3775711005198632,\r\n                0.7099427484244559,\r\n                0.13270298704283073,\r\n                0.6569865987187891,\r\n                1.4984575835266856,\r\n                1.5662840255444708,\r\n                0.7981066067786563,\r\n                -0.09981589658913914,\r\n                -0.3019376759443494,\r\n                0.3775711005198632,\r\n                1.3139731974375781,\r\n                1.646344845342171,\r\n                1.0691050839605456,\r\n                0.9893582466233818,\r\n                1.8308292314312782,\r\n                1.8986556734490634,\r\n                1.130478254683249,\r\n                0.23255575131545358,\r\n                0.030433971960243333,\r\n                0.7099427484244559,\r\n                1.646344845342171,\r\n                1.9787164932467636,\r\n                1.4014767318651384,\r\n                0.4121184852417566,\r\n                1.253589470049653,\r\n                1.3214159120674382,\r\n                0.5532384933016238,\r\n                -0.3446840100661716,\r\n                -0.5468057894213818,\r\n                0.13270298704283073,\r\n                1.0691050839605456,\r\n                1.4014767318651384,\r\n                0.8242369704835132\r\n            ]\r\n        }\r\n    ]\r\n}",
 			"name": "Plotly 3D Mesh Visualizer"
 		},
+		{
+			"dataSrc": "{\r\n    \"kind\":{ \"plotly\": true },\r\n    \"data\": [{\r\n      \"header\": {\r\n         \"values\": [\"H1\", \"H2\", \"H3\"]\r\n      },\r\n      \"cells\": {\r\n         \"values\": [\r\n            [\"A\", \"B\", \"C\"],\r\n            [341319, 281489, 294786],\r\n            [4488916, 3918072, 3892124]\r\n         ]\r\n      },\r\n      \"type\": \"table\"\r\n   }],\r\n   \"layout\": {}\r\n}",
+			"name": "Plotly Table Visualizer"
+		},
+		{
+			"dataSrc": "{\n  \"kind\": {\n    \"plotly\": true\n  },\n  \"data\": [{\n    \"mode\": \"lines\",\n    \"type\": \"scatter\",\n    \"x\": [\"A\", \"B\", \"C\"],\n    \"xaxis\": \"x\",\n    \"y\": [4488916, 3918072, 3892124],\n    \"yaxis\": \"y\"\n  }, {\n    \"cells\": {\n      \"values\": [\n        [\"A\", \"B\", \"C\"],\n        [341319, 281489, 294786],\n        [4488916, 3918072, 3892124]\n      ]\n    },\n    \"domain\": {\n      \"x\": [0.0, 1.0],\n      \"y\": [0.0, 0.60]\n    },\n    \"header\": {\n      \"align\": \"left\",\n      \"font\": {\n        \"size\": 10\n      },\n      \"values\": [\"Date\", \"Number\", \"Output\"]\n    },\n    \"type\": \"table\"\n  }],\n  \"layout\": {\n    \"xaxis\": {\n      \"anchor\": \"y\",\n      \"domain\": [0.0, 1.0]\n    },\n    \"yaxis\": {\n      \"anchor\": \"x\",\n      \"domain\": [0.75, 1.0]\n    }\n  }\n}",
+			"name": "Plotly multi Visualizer"
+		},
 		{
 			"dataSrc": "{\r\n    \"kind\": { \"graph\": true },\r\n    \"nodes\": [\r\n        { \"id\": \"1\", \"label\": \"1\" },\r\n        { \"id\": \"2\", \"label\": \"2\", \"color\": \"orange\" },\r\n        { \"id\": \"3\", \"label\": \"3\" }\r\n    ],\r\n    \"edges\": [\r\n        { \"from\": \"1\", \"to\": \"2\", \"color\": \"red\" },\r\n        { \"from\": \"1\", \"to\": \"3\" }\r\n    ]\r\n}",
 			"name": "VisJS Graph Visualizer"

playground/src/index.tsx

@@ -1,3 +1,5 @@
+(globalThis as any).MonacoEnvironment = { globalAPI: true };
+
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import "./style.scss";

playground/src/style.scss

@@ -61,10 +61,7 @@ body {
 @import "./vscode-dark.scss";
 @import "./vscode-light.scss";
 
-.visualization {
-	background: var(--vscode-editor-background);
-}
-
 .themeable {
+	background-color: violet; // To debug backgrounds
 	--visualizer-simple-text-color: var(--vscode-editor-foreground);
 }

playground/src/visualizations.ts

@@ -12,7 +12,7 @@
 // import "@hediet/visualization-bundle/dist/visualizers/perspective-table-visualizer" /*
 // import "@hediet/visualization-bundle/dist/visualizers/plotly-visualizer" /*
 // import "@hediet/visualization-bundle/dist/visualizers/simple-text-visualizer"; /*
-// import "@hediet/visualization-bundle/dist/visualizers/source-visualizer" /*
+// import "@hediet/visualization-bundle/dist/visualizers/source-visualizer"; /*
 // import "@hediet/visualization-bundle/dist/visualizers/svg-visualizer" /*
 // import "@hediet/visualization-bundle/dist/visualizers/tree-visualizer"; /*
 

simple-demo/package.json

@@ -4,7 +4,7 @@
 	"license": "MIT",
 	"scripts": {
 		"dev": "webpack-dev-server --hot --port 8090",
-		"build": "node --max_old_space_size=4096 ../node_modules/webpack/bin/webpack.js --mode production"
+		"build": "node --max_old_space_size=4096 --openssl-legacy-provider ../node_modules/webpack/bin/webpack.js --mode production"
 	},
 	"dependencies": {
 		"@hediet/visualization-core": "^0.1.0",
@@ -22,7 +22,7 @@
 		"file-loader": "^5.1.0",
 		"fork-ts-checker-webpack-plugin": "^4.0.4",
 		"html-webpack-plugin": "^3.2.0",
-		"monaco-editor-webpack-plugin": "^1.9.0",
+		"monaco-editor-webpack-plugin": "^4.0.0",
 		"raw-loader": "^4.0.0",
 		"sass-loader": "^8.0.2",
 		"sass": "^1.25.0",

visualization-bundle/README.md

@@ -95,3 +95,8 @@ You can use the [`simple-text-visualizer`](./src/visualizers/simple-text-visuali
 Just copy the folder, rename the ids and names, export it [here](./src/visualizers/index.ts) and read through all the comments of the simple-text-visualizer!
 
 Use the "open" button in the playground to debug your new visualization!
+
+## Machine Readable Documents
+
+-   [TypeScript Declarations](https://hediet.github.io/visualization/docs/visualization-data.ts)
+-   [JSON Schema](https://hediet.github.io/visualization/docs/visualization-data-schema.json)

visualization-bundle/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@hediet/visualization-bundle",
 	"description": "Bundles several visualizers",
-	"version": "0.1.7",
+	"version": "0.2.5",
 	"license": "MIT",
 	"scripts": {
 		"dev": "tsc --watch",
@@ -20,40 +20,37 @@
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"dependencies": {
-		"@hediet/std": "^0.6.0",
-		"@hediet/semantic-json": "^0.3.14",
-		"classnames": "^2.2.6",
-		"mobx": "^5.15.4",
-		"mobx-react": "^6.1.8",
-		"monaco-editor": "^0.20.0",
-		"react": "^16.12.0",
-		"react-dom": "^16.12.0",
-		"react-measure": "^2.3.0",
-		"react-svg-pan-zoom": "^3.8.0",
-		"line-column": "^1.0.2",
-		"vis-network": "^8.0.0",
-		"vis-data": "^7.0.0",
-		"viz.js": "^2.1.2",
-		"react-plotly.js": "^2.4.0",
-		"plotly.js": "^1.54.7",
 		"@finos/perspective-viewer": "^0.5.2",
 		"@finos/perspective-viewer-d3fc": "^0.5.2",
 		"@finos/perspective-viewer-datagrid": "^0.5.2",
-		"@hediet/monaco-editor-react": "^0.1.1"
+		"@hediet/monaco-editor-react": "^0.2.0",
+		"@hediet/semantic-json": "^0.3.15",
+		"@hediet/std": "^0.6.0",
+		"classnames": "^2.2.6",
+		"line-column": "^1.0.2",
+		"mobx": "^5.15.4",
+		"mobx-react": "^6.1.8",
+		"monaco-editor": "^0.25.2",
+		"plotly.js": "^1.54.7",
+		"react": "^16.12.0",
+		"react-dom": "^16.12.0",
+		"react-measure": "^2.3.0",
+		"react-plotly.js": "^2.4.0",
+		"react-svg-pan-zoom": "^3.8.0",
+		"vis-data": "^7.0.0",
+		"vis-network": "^8.0.0",
+		"viz.js": "^2.1.2"
 	},
 	"peerDependencies": {
-		"@hediet/visualization-core": "^0.1.1"
+		"@hediet/visualization-core": "0.*"
 	},
 	"devDependencies": {
-		"@types/plotly.js": "^1.50.16",
-		"@types/react-plotly.js": "^2.2.4",
-		"@types/react-measure": "^2.0.6",
-		"@types/react-svg-pan-zoom": "^3.3.0",
-		"@types/webpack": "^4.41.6",
 		"@types/classnames": "^2.2.9",
+		"@types/line-column": "^1.0.0",
+		"@types/plotly.js": "^1.50.16",
 		"@types/react": "^16.9.22",
 		"@types/react-dom": "^16.9.5",
-		"@types/line-column": "^1.0.0",
+		"@types/webpack": "^4.41.6",
 		"ts-loader": "^6.2.1",
 		"ts-node": "^8.6.2",
 		"typescript": "^3.9.7"

visualization-bundle/src/types.d.ts

@@ -0,0 +1,18 @@
+declare module "react-measure" {
+    const content: any;
+    export default content;
+
+    export type ContentRect = any;
+}
+
+declare module "react-plotly.js" {
+    const content: any;
+    export default content;
+}
+
+declare module "react-svg-pan-zoom" {
+    export class Tool { }
+    export type ReactSVGPanZoom = any;
+    export const ReactSVGPanZoom = undefined as any;
+    export class Value { }
+}

visualization-bundle/src/utils/LazyLoadable.tsx

@@ -1,29 +1,30 @@
 import * as React from "react";
-import { observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
+import { Loadable } from "./Loadable";
 
 export function makeLazyLoadable<TProps>(
 	selector: () => Promise<React.ComponentClass<TProps>>
-): React.ComponentClass<TProps> {
+): React.ComponentClass<TProps> & { preload(): Promise<void> } {
+	const loader = new Loadable(selector);
+
 	@observer
 	class MyComponent extends React.Component<TProps> {
-		@observable
+		constructor(props: any) {
-		component: React.ComponentClass<TProps> | undefined;
+			super(props);
-
+			loader.load();
-		async componentDidMount() {
-			const result = await selector();
-			runInAction("Set Lazily Loaded Component", () => {
-				this.component = result;
-			});
 		}
 
 		render() {
-			if (!this.component) {
+			if (!loader.result) {
 				return <div>Loading...</div>;
 			}
-			const C = this.component;
+			const C = loader.result;
 			return <C {...this.props} />;
 		}
+
+		static async preload(): Promise<void> {
+			await loader.load();
+		}
 	}
 
 	return MyComponent;

visualization-bundle/src/utils/Loadable.tsx

@@ -0,0 +1,22 @@
+import { observable, runInAction } from "mobx";
+
+export class Loadable<T> {
+	@observable.ref
+	public result: T | undefined;
+
+	private operation?: Promise<void> = undefined;
+
+	constructor(private readonly _load: () => Promise<T>) {}
+
+	public load(): Promise<void> {
+		if (!this.operation) {
+			this.operation = (async () => {
+				const r = await this._load();
+				runInAction(() => {
+					this.result = r;
+				});
+			})();
+		}
+		return this.operation;
+	}
+}

visualization-bundle/src/vars.scss

@@ -0,0 +1,6 @@
+.theme-dark {
+	--visualizer-background: #263238;
+}
+.theme-light {
+	--visualizer-background: white;
+}

visualization-bundle/src/visualizers/ast-visualizer/AstVisualizer.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { observer, disposeOnUnmount } from "mobx-react";
 import { observable, autorun, trace, computed } from "mobx";
 import * as monacoTypes from "monaco-editor";
-import { getLanguageId } from "../monaco-text-visualizer/MonacoEditor";
+import { getLanguageId } from "../monaco-text-visualizer/getLanguageId";
 import {
 	TreeWithPathView,
 	TreeViewModel,
@@ -37,7 +37,13 @@ export class AstTree extends React.Component<{
 		}
 		return (
 			<Measure client>
-				{({ measureRef, contentRect }) => {
+				{({
+					measureRef,
+					contentRect,
+				}: {
+					measureRef: any;
+					contentRect: any;
+				}) => {
 					return (
 						<div
 							ref={measureRef}

visualization-bundle/src/visualizers/ast-visualizer/index.tsx

@@ -14,8 +14,8 @@ import {
 import { visualizationNs } from "../../consts";
 import {
 	createVisualizer,
-	ReactVisualization,
 	globalVisualizationFactory,
+	createReactVisualization,
 } from "@hediet/visualization-core";
 import { createTreeViewModelFromTreeNodeData } from "../tree-visualizer";
 import { AstTree, NodeInfo } from "./AstVisualizer";
@@ -81,7 +81,7 @@ export const astVisualizer = createVisualizer({
 	name: "AST",
 	serializer: sAstTree,
 	getVisualization: (data, self) =>
-		new ReactVisualization(self, { priority: 1500 }, theme => {
+		createReactVisualization(self, { priority: 1500 }, ({ theme }) => {
 			const m = createTreeViewModelFromTreeNodeData(
 				data.root,
 				node => node.span

visualization-bundle/src/visualizers/ast-visualizer/style.scss

@@ -1,3 +1,6 @@
+.themeable {
+	--visualizer-ast-background: var(--visualizer-background);
+}
 .theme-dark {
 	--visualizer-ast-marked-background: rgba(234, 92, 0, 0.33);
 	--visualizer-ast-selected-background: #515c6a;
@@ -8,6 +11,8 @@
 }
 
 .component-AstTree {
+	background: var(--visualizer-ast-background);
+
 	.part-editor {
 		//border-top: solid gray 1px;
 

visualization-bundle/src/visualizers/graph/dot-graphviz-visualizer/GraphvizDotVisualizer.tsx

@@ -1,7 +1,7 @@
-import { observer, disposeOnUnmount } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
-import { observable, autorun, runInAction } from "mobx";
 import { SvgViewer } from "../../svg-visualizer/SvgViewer";
+import { Loadable } from "../../../utils/Loadable";
 
 class VisLoader {
 	private result: any | undefined;
@@ -24,26 +24,29 @@ class VisLoader {
 
 const vizLoader = new VisLoader();
 
+export function getSvgFromDotCode(dotCode: string): Loadable<string> {
+	return new Loadable(async () => {
+		const viz = await vizLoader.getViz();
+		return await viz.renderString(dotCode);
+	});
+}
+
 @observer
 export class GraphvizDotViewer extends React.Component<{
-	dotCode: string;
+	svgSource: Loadable<string>;
 	svgRef?: (element: SVGSVGElement | null) => void;
 }> {
-	@observable private svg: string | null = null;
-
-	@disposeOnUnmount
-	// @ts-ignore
-	private readonly _updateSvgAutorun = autorun(async () => {
-		const dotCode = this.props.dotCode; // to trigger mobx dependency
-		const viz = await vizLoader.getViz();
-		const svg = await viz.renderString(dotCode);
-		runInAction("Update svg", () => (this.svg = svg));
-	});
-
 	render() {
-		if (!this.svg) {
+		const { svgSource } = this.props;
+		svgSource.load();
+		if (!svgSource.result) {
 			return <div>Loading...</div>;
 		}
-		return <SvgViewer svgRef={this.props.svgRef} svgContent={this.svg} />;
+		return (
+			<SvgViewer
+				svgRef={this.props.svgRef}
+				svgContent={svgSource.result}
+			/>
+		);
 	}
 }

visualization-bundle/src/visualizers/graph/dot-graphviz-visualizer/index.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { sOpenObject, sLiteral, sString } from "@hediet/semantic-json";
-import { GraphvizDotViewer } from "./GraphvizDotVisualizer";
+import { getSvgFromDotCode, GraphvizDotViewer } from "./GraphvizDotVisualizer";
 import {
-	ReactVisualization,
 	globalVisualizationFactory,
 	createVisualizer,
+	createReactVisualization,
 } from "@hediet/visualization-core";
 import { visualizationNs } from "../../../consts";
 
@@ -17,10 +17,17 @@ export const graphvizDotVisualizer = createVisualizer({
 		}),
 		text: sString(),
 	}).defineAs(visualizationNs("GraphvizDotVisualizationData")),
-	getVisualization: (data, self) =>
+	getVisualization: (data, self) => {
-		new ReactVisualization(self, { priority: 1500 }, () => (
+		const svgSource = getSvgFromDotCode(data.text);
-			<GraphvizDotViewer dotCode={data.text} />
+		return createReactVisualization(
-		)),
+			self,
+			{
+				priority: 1500,
+				preload: () => svgSource.load(),
+			},
+			() => <GraphvizDotViewer svgSource={svgSource} />
+		);
+	},
 });
 
 globalVisualizationFactory.addVisualizer(graphvizDotVisualizer);

visualization-bundle/src/visualizers/graph/graph-graphviz-visualizer/GraphvizGraphVisualizer.tsx

@@ -1,36 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { GraphvizDotViewer } from "../dot-graphviz-visualizer/GraphvizDotVisualizer";
-
-@observer
-export class GraphvizGraphViewer extends React.Component<{
-	nodes: { id: string; label?: string }[];
-	edges: { from: string; to: string; label?: string }[];
-}> {
-	render() {
-		const { nodes, edges } = this.props;
-		const dotContent = `
-            digraph MyGraph {
-                ${nodes
-					.map(
-						n =>
-							`"${n.id}" [ label = ${JSON.stringify(
-								n.label !== undefined ? n.label : n.id
-							)} ];`
-					)
-					.join("\n ")}
-                ${edges
-					.map(
-						e =>
-							`"${e.from}" -> "${
-								e.to
-							}" [ label = ${JSON.stringify(
-								e.label !== undefined ? e.label : ""
-							)} ];`
-					)
-					.join("\n")}
-            }
-        `;
-		return <GraphvizDotViewer dotCode={dotContent} />;
-	}
-}

visualization-bundle/src/visualizers/graph/graph-graphviz-visualizer/getGraphVizData.tsx

@@ -0,0 +1,34 @@
+import { Loadable } from "../../../utils/Loadable";
+import { getSvgFromDotCode } from "../dot-graphviz-visualizer/GraphvizDotVisualizer";
+
+export function getSvgFromGraphData(
+	nodes: { id: string; label?: string }[],
+	edges: {
+		from: string;
+		to: string;
+		label?: string;
+		style?: string;
+	}[]
+): Loadable<string> {
+	const dotContent = `
+		digraph MyGraph {
+			${nodes
+				.map(
+					n =>
+						`"${n.id}" [ label = ${JSON.stringify(
+							n.label !== undefined ? n.label : n.id
+						)} ];`
+				)
+				.join("\n ")}
+			${edges
+				.map(
+					e =>
+						`"${e.from}" -> "${e.to}" [ label = ${JSON.stringify(
+							e.label !== undefined ? e.label : ""
+						)} style = ${JSON.stringify(e.style || "")} ];`
+				)
+				.join("\n")}
+		}
+	`;
+	return getSvgFromDotCode(dotContent);
+}

visualization-bundle/src/visualizers/graph/graph-graphviz-visualizer/index.tsx

@@ -1,20 +1,25 @@
 import * as React from "react";
-import { GraphvizGraphViewer } from "./GraphvizGraphVisualizer";
 import { sGraph } from "../sGraph";
 import {
 	createVisualizer,
-	ReactVisualization,
 	globalVisualizationFactory,
+	createReactVisualization,
 } from "@hediet/visualization-core";
+import { GraphvizDotViewer } from "../dot-graphviz-visualizer/GraphvizDotVisualizer";
+import { getSvgFromGraphData } from "./getGraphVizData";
 
 export const graphvizGraphVisualizer = createVisualizer({
 	id: "graphviz-graph",
 	name: "Graphviz",
 	serializer: sGraph,
-	getVisualization: (data, self) =>
+	getVisualization: (data, self) => {
-		new ReactVisualization(self, { priority: 1000 }, () => (
+		const svgSource = getSvgFromGraphData(data.nodes, data.edges);
-			<GraphvizGraphViewer edges={data.edges} nodes={data.nodes} />
+		return createReactVisualization(
-		)),
+			self,
+			{ priority: 1000, preload: () => svgSource.load() },
+			() => <GraphvizDotViewer svgSource={svgSource} />
+		);
+	},
 });
 
 globalVisualizationFactory.addVisualizer(graphvizGraphVisualizer);

visualization-bundle/src/visualizers/graph/graph-visjs-visualizer/VisJsGraphViewer.tsx

@@ -1,7 +1,7 @@
-import { Network, Options, DataSet } from "vis-network/standalone";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { NodeGraphData, EdgeGraphData } from "../sGraph";
+import { DataSet, Network, Options } from "vis-network/standalone";
+import { EdgeGraphData, NodeGraphData } from "../sGraph";
 
 @observer
 export class VisJsGraphViewer extends React.Component<{
@@ -12,7 +12,7 @@ export class VisJsGraphViewer extends React.Component<{
 	private readonly nodes = new DataSet<{
 		id: string;
 		label?: string;
-		color?: string;
+		color?: { border: string; background: string } | string;
 		shape?: string;
 	}>();
 	private readonly edges = new DataSet<{
@@ -21,12 +21,18 @@ export class VisJsGraphViewer extends React.Component<{
 		to: string;
 		label?: string;
 		color?: string;
-		dashes?: boolean;
+		dashes?: boolean | number[];
 		shape?: boolean;
 	}>();
 
 	render() {
-		return <div style={{ height: "100%" }} ref={this.divRef} />;
+		return (
+			<div
+				className="component-VisJsGraphViewer"
+				style={{ height: "100%" }}
+				ref={this.divRef}
+			/>
+		);
 	}
 
 	synchronizeData() {
@@ -36,11 +42,11 @@ export class VisJsGraphViewer extends React.Component<{
 			this.nodes.update({
 				id: n.id,
 				label: n.label !== undefined ? n.label : n.id,
-				color: n.color,
+				color: { background: n.color, border: n.borderColor },
 				shape: n.shape,
 			});
 		}
-		this.nodes.forEach(item => {
+		this.nodes.forEach((item) => {
 			if (!newNodes.has(item.id)) {
 				this.nodes.remove(item);
 			}
@@ -63,10 +69,12 @@ export class VisJsGraphViewer extends React.Component<{
 				from: n.from,
 				to: n.to,
 				color: n.color,
-				dashes: n.dashes,
+				dashes: { dashed: true, dotted: [1, 4], solid: false }[
+					n.style || "solid"
+				],
 			});
 		}
-		this.edges.forEach(item => {
+		this.edges.forEach((item) => {
 			if (!newEdges.has(item.id)) {
 				this.edges.remove(item);
 			}
@@ -91,6 +99,92 @@ export class VisJsGraphViewer extends React.Component<{
 				},
 			},
 		};
-		const network = new Network(this.divRef.current!, data, options);
+		this.network = new Network(this.divRef.current!, data, options);
+		this.divRef.current!.setAttribute("tabindex", "0");
+		document.addEventListener("copy", this.onCopy);
+	}
+
+	private network: Network | undefined;
+	private readonly onCopy = (e: ClipboardEvent) => {
+		if (!this.network) {
+			return;
+		}
+		if (
+			!(
+				document.activeElement &&
+				document.activeElement.className === "vis-network"
+			)
+		) {
+			return;
+		}
+
+		const n = this.network as any;
+
+		const nodesText: string[] = [];
+
+		let id = 10;
+		const visJsIdToNodeId = new Map<string, number>();
+
+		// export to draw.io
+		for (const node of Object.values(n.body.nodes) as any) {
+			const label = node.shape.options.label;
+			if (label === undefined) {
+				continue;
+			}
+
+			let style = "";
+			if (node.shape.constructor.name === "Ellipse") {
+				style += "ellipse;";
+			} else {
+				style += "rounded=1;";
+			}
+
+			const nodeId = id++;
+			visJsIdToNodeId.set(node.id, nodeId);
+
+			nodesText.push(
+				`
+<mxCell id="${nodeId}" value="${label}" style="${style}" vertex="1" parent="1">
+	<mxGeometry x="${node.x}" y="${node.y}" width="${node.shape.width}" height="${node.shape.height}" as="geometry"/>
+</mxCell>`
+			);
+		}
+
+		for (const edge of Object.values(n.body.edges) as any) {
+			const label = edge.options.label || "";
+			const edgeId = id++;
+
+			nodesText.push(
+				`
+<mxCell id="${edgeId}" value="${label}" edge="1" source="${visJsIdToNodeId.get(
+					edge.from.id
+				)}" target="${visJsIdToNodeId.get(edge.to.id)}" parent="1">
+	<mxGeometry relative="1" as="geometry"/>
+</mxCell>`
+			);
+		}
+
+		const data = `
+<mxGraphModel>
+	<root>
+		<mxCell id="0"/>
+		<mxCell id="1" parent="0"/>
+
+		${nodesText.join("\n")}
+	</root>
+</mxGraphModel>`;
+
+		/*
+		<mxCell id="2" value="xxx" edge="1" source="3" target="4" parent="1">
+			<mxGeometry relative="1" as="geometry"/>
+		</mxCell>
+		*/
+
+		e.clipboardData!.setData("text/plain", encodeURIComponent(data));
+		e.preventDefault();
+	};
+
+	componentWillUnmount() {
+		document.removeEventListener("copy", this.onCopy);
 	}
 }

visualization-bundle/src/visualizers/graph/graph-visjs-visualizer/index.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { makeLazyLoadable } from "../../../utils/LazyLoadable";
 import {
+	createReactVisualization,
 	createVisualizer,
-	ReactVisualization,
 	globalVisualizationFactory,
 } from "@hediet/visualization-core";
 import { sGraph } from "../sGraph";
@@ -16,12 +16,19 @@ export const visJsGraphVisualizer = createVisualizer({
 	name: "vis.js",
 	serializer: sGraph,
 	getVisualization: (data, self) =>
-		new ReactVisualization(self, { priority: 1500 }, () => (
+		createReactVisualization(
-			<VisJsGraphViewerLazyLoadable
+			self,
-				edges={data.edges}
+			{
-				nodes={data.nodes}
+				priority: 1500,
-			/>
+				preload: VisJsGraphViewerLazyLoadable.preload,
-		)),
+			},
+			() => (
+				<VisJsGraphViewerLazyLoadable
+					edges={data.edges}
+					nodes={data.nodes}
+				/>
+			)
+		),
 });
 
 globalVisualizationFactory.addVisualizer(visJsGraphVisualizer);

visualization-bundle/src/visualizers/graph/graph-visjs-visualizer/style.scss

@@ -0,0 +1,7 @@
+.themeable {
+	--visualizer-visjs-background: var(--visualizer-background);
+}
+
+.component-VisJsGraphViewer {
+	background-color: var(--visualizer-visjs-background);
+}

visualization-bundle/src/visualizers/graph/sGraph.ts

@@ -1,11 +1,10 @@
 import {
-	sOpenObject,
-	sLiteral,
 	sArrayOf,
-	sString,
+	sLiteral,
+	sOpenObject,
 	sOptionalProp,
+	sString,
 	sUnion,
-	sBoolean,
 } from "@hediet/semantic-json";
 import { visualizationNs } from "../../consts";
 
@@ -16,6 +15,7 @@ export const sGraphNode = sOpenObject({
 	id: sString(),
 	label: sOptionalProp(sString(), {}),
 	color: sOptionalProp(sString(), {}),
+	borderColor: sOptionalProp(sString(), {}),
 	shape: sOptionalProp(sUnion([sLiteral("ellipse"), sLiteral("box")]), {}),
 }).defineAs(visualizationNs("GraphNode"));
 
@@ -25,7 +25,10 @@ export const sGraphEdge = sOpenObject({
 	label: sOptionalProp(sString(), {}),
 	id: sOptionalProp(sString(), {}),
 	color: sOptionalProp(sString(), {}),
-	dashes: sOptionalProp(sBoolean(), {}),
+	style: sOptionalProp(
+		sUnion([sLiteral("solid"), sLiteral("dashed"), sLiteral("dotted")]),
+		{}
+	),
 }).defineAs(visualizationNs("GraphEdge"));
 
 export const sGraph = sOpenObject({

visualization-bundle/src/visualizers/grid-visualizer/GridVisualizer.tsx

@@ -78,6 +78,7 @@ export class DecoratedGridComponent extends React.Component<{
 
 		return (
 			<div
+				className="component-GridVisualizer"
 				style={{
 					height: "100%",
 					justifyContent: "center",

visualization-bundle/src/visualizers/grid-visualizer/index.tsx

@@ -4,15 +4,14 @@ import {
 	sLiteral,
 	sString,
 	sArrayOf,
-	sObject,
 	sOptionalProp,
 	sNumber,
 } from "@hediet/semantic-json";
 import { DecoratedGridComponent } from "./GridVisualizer";
 import {
 	createVisualizer,
-	ReactVisualization,
 	globalVisualizationFactory,
+	createReactVisualization,
 } from "@hediet/visualization-core";
 import { visualizationNs } from "../../consts";
 
@@ -65,7 +64,7 @@ export const gridVisualizer = createVisualizer({
 	name: "Grid",
 	serializer: sGrid,
 	getVisualization: (data, self) =>
-		new ReactVisualization(self, { priority: 1000 }, () => (
+		createReactVisualization(self, { priority: 1000 }, () => (
 			<DecoratedGridComponent data={data} />
 		)),
 });

visualization-bundle/src/visualizers/grid-visualizer/style.scss

@@ -1,3 +1,6 @@
+.themeable {
+	--visualizer-grid-background: var(--visualizer-background);
+}
 .theme-dark {
 	--visualizer-grid-empty-foreground: #f0f0f0;
 }
@@ -5,6 +8,10 @@
 	--visualizer-grid-empty-foreground: #000000;
 }
 
+.component-GridVisualizer {
+	background-color: var(--visualizer-grid-background);
+}
+
 .component-Grid {
 	.part-data {
 		border: 1px solid lightgray;

visualization-bundle/src/visualizers/image-visualizer/index.tsx

@@ -2,8 +2,8 @@ import { sOpenObject, sLiteral, sString, sProp } from "@hediet/semantic-json";
 import * as React from "react";
 import {
 	createVisualizer,
-	ReactVisualization,
 	globalVisualizationFactory,
+	createReactVisualization,
 } from "@hediet/visualization-core";
 import { SvgViewer } from "../svg-visualizer/SvgViewer";
 import { Observer, observer, disposeOnUnmount } from "mobx-react";
@@ -22,7 +22,7 @@ export const imageVisualizer = createVisualizer({
 		}),
 	}).defineAs(visualizationNs("ImageVisualizationData")),
 	getVisualization: (data, self) =>
-		new ReactVisualization(self, { priority: 1000 }, () => {
+		createReactVisualization(self, { priority: 1000 }, () => {
 			return <ImageViewer base64Data={data.base64Data} />;
 		}),
 });

visualization-bundle/src/visualizers/monaco-text-diff-visualizer/MonacoEditor.tsx

@@ -7,7 +7,7 @@ import { getLoadedMonaco } from "@hediet/monaco-editor-react";
 
 export function getLanguageId(fileName: string): string {
 	const l = getLoadedMonaco().languages.getLanguages();
-	const result = l.find(l => {
+	const result = l.find((l) => {
 		if (l.filenamePatterns) {
 			for (const p of l.filenamePatterns) {
 				if (new RegExp(p).test(fileName)) {
@@ -33,10 +33,10 @@ export function getLanguageId(fileName: string): string {
 }
 
 @observer
-export class MonacoEditor extends React.Component<{
+export class MonacoDiffEditor extends React.Component<{
 	originalText: string;
 	modifiedText: string;
-	languageId: string;
+	fileName?: string;
 	theme: Theme;
 }> {
 	@observable private editor:
@@ -49,24 +49,29 @@ export class MonacoEditor extends React.Component<{
 		}
 	}
 
-	private originalModel:
+	get languageId(): string {
-		| monacoTypes.editor.ITextModel
+		if (!this.props.fileName) {
-		| undefined = undefined;
+			return "text";
-	private modifiedModel:
+		}
-		| monacoTypes.editor.ITextModel
+		return getLanguageId(this.props.fileName);
-		| undefined = undefined;
+	}
+
+	private originalModel: monacoTypes.editor.ITextModel | undefined =
+		undefined;
+	private modifiedModel: monacoTypes.editor.ITextModel | undefined =
+		undefined;
 
 	@disposeOnUnmount
 	private _updateText = autorun(() => {
 		if (this.editor) {
 			const originalModel = getLoadedMonaco().editor.createModel(
 				this.props.originalText,
-				this.props.languageId,
+				this.languageId,
 				undefined
 			);
 			const modifiedModel = getLoadedMonaco().editor.createModel(
 				this.props.modifiedText,
-				this.props.languageId,
+				this.languageId,
 				undefined
 			);
 
@@ -98,6 +103,8 @@ export class MonacoEditor extends React.Component<{
 			fixedOverflowWidgets: true,
 			readOnly: true,
 			theme: this.props.theme.kind === "dark" ? "vs-dark" : "vs",
+			renderWhitespace: "all",
+			ignoreTrimWhitespace: false,
 		});
 		if (this.originalModel && this.modifiedModel) {
 			this.editor.setModel({
@@ -109,7 +116,7 @@ export class MonacoEditor extends React.Component<{
 
 	render() {
 		return (
-			<div className="component-monaco-editor">
+			<div className="component-monaco-editor-diff-visualizer">
 				<div className="part-editor" ref={this.setEditorDiv} />
 			</div>
 		);

visualization-bundle/src/visualizers/monaco-text-diff-visualizer/index.tsx

@@ -7,15 +7,16 @@ import {
 } from "@hediet/semantic-json";
 import * as React from "react";
 import {
-	getLanguageId,
+	createReactVisualization,
-	MonacoEditor as MonacoDiffEditor,
-} from "./MonacoEditor";
-import {
 	createVisualizer,
-	ReactVisualization,
 	globalVisualizationFactory,
 } from "@hediet/visualization-core";
 import { visualizationNs } from "../../consts";
+import { makeLazyLoadable } from "../../utils/LazyLoadable";
+
+const MonacoDiffEditorLazyLoadable = makeLazyLoadable(
+	async () => (await import("./MonacoEditor")).MonacoDiffEditor
+);
 
 export const monacoTextDiffVisualizer = createVisualizer({
 	id: "monaco-text-diff",
@@ -34,20 +35,18 @@ export const monacoTextDiffVisualizer = createVisualizer({
 		}),
 	}).defineAs(visualizationNs("MonacoTextDiffVisualizationData")),
 	getVisualization: (data, self) =>
-		new ReactVisualization(self, { priority: 900 }, theme => {
+		createReactVisualization(
-			let id = "text";
+			self,
-			if (data.fileName) {
+			{ priority: 900, preload: MonacoDiffEditorLazyLoadable.preload },
-				id = getLanguageId(data.fileName);
+			({ theme }) => (
-			}
+				<MonacoDiffEditorLazyLoadable
-			return (
-				<MonacoDiffEditor
 					originalText={data.otherText}
 					modifiedText={data.text}
-					languageId={id}
+					fileName={data.fileName}
 					theme={theme}
 				/>
-			);
+			)
-		}),
+		),
 });
 
 globalVisualizationFactory.addVisualizer(monacoTextDiffVisualizer);

visualization-bundle/src/visualizers/monaco-text-diff-visualizer/style.scss

@@ -1,4 +1,13 @@
-.component-monaco-editor {
+.themeable {
+	--visualizer-monaco-editor-diff-visualizer-background: var(
+		--visualizer-background
+	);
+}
+
+.component-monaco-editor-diff-visualizer {
+	background-color: var(
+		--visualizer-monaco-editor-diff-visualizer-background
+	);
 	width: 100%;
 	height: 100%;
 	min-width: 0;

visualization-bundle/src/visualizers/monaco-text-visualizer/MonacoEditor.tsx

@@ -4,40 +4,23 @@ import { observable, autorun } from "mobx";
 import * as monacoTypes from "monaco-editor";
 import { Theme } from "@hediet/visualization-core";
 import { getLoadedMonaco } from "@hediet/monaco-editor-react";
+import { getLanguageId } from "./getLanguageId";
 
-export function getLanguageId(fileName: string): string {
+export interface Decoration {
-	const l = getLoadedMonaco().languages.getLanguages();
+	label?: string;
-	const result = l.find(l => {
+	range: monacoTypes.IRange;
-		if (l.filenamePatterns) {
-			for (const p of l.filenamePatterns) {
-				if (new RegExp(p).test(fileName)) {
-					return true;
-				}
-			}
-		}
-		if (l.extensions) {
-			for (const p of l.extensions) {
-				if (fileName.endsWith(p)) {
-					return true;
-				}
-			}
-		}
-
-		return false;
-	});
-
-	if (result) {
-		return result.id;
-	}
-	return "text";
 }
 
 @observer
 export class MonacoEditor extends React.Component<{
 	text: string;
-	languageId: string;
 	theme: Theme;
+	fileName?: string;
+	decorations?: Decoration[];
+	jsonSchemas?: { schema: unknown }[];
 }> {
+	public static nextId = 0;
+
 	@observable private editor:
 		| monacoTypes.editor.IStandaloneCodeEditor
 		| undefined;
@@ -48,20 +31,119 @@ export class MonacoEditor extends React.Component<{
 		}
 	}
 
+	get languageId(): string {
+		if (!this.props.fileName) {
+			return "text";
+		}
+		return getLanguageId(this.props.fileName);
+	}
+
 	private model: monacoTypes.editor.ITextModel | undefined = undefined;
 
+	private prevDecorations: string[] = [];
+
 	@disposeOnUnmount
 	private _updateText = autorun(() => {
 		if (this.editor) {
+			const decorations =
+				new Array<monacoTypes.editor.IModelDeltaDecoration>();
+			const propDecorations = this.props.decorations || [];
+			const lines = this.props.text.split("\n");
+			const mappedLines = lines.map((l, idx) => {
+				if (idx === lines.length - 1) {
+					return l;
+				}
+
+				if (
+					!propDecorations.some(
+						(d) =>
+							((d.range.endLineNumber === idx + 2 &&
+								d.range.endColumn === 1) ||
+								(d.range.startLineNumber === idx + 1 &&
+									d.range.startColumn >= l.length + 1)) &&
+							(d.range.startColumn !== d.range.endColumn ||
+								d.range.startLineNumber !==
+									d.range.endLineNumber)
+					)
+				) {
+					return l;
+				}
+
+				decorations.push({
+					range: {
+						startLineNumber: idx + 1,
+						endLineNumber: idx + 1,
+						startColumn: l.length + 1,
+						endColumn: l.length + 2,
+					},
+					options: {
+						inlineClassName: "decoration-whitespace",
+					},
+				});
+				return l + "␊"; // ␍␊
+			});
+			const text = mappedLines.join("\n");
+
+			const modelId = MonacoEditor.nextId++;
+
 			const model = getLoadedMonaco().editor.createModel(
-				this.props.text,
+				text,
-				this.props.languageId,
+				this.languageId,
-				undefined
+				getLoadedMonaco().Uri.parse(
+					`inmemory://inmemory/model${modelId}`
+				)
 			);
 
 			this.editor.setModel(model);
 
-			/*			this.editor!.updateOptions({ readOnly: false });
+			if (this.props.jsonSchemas) {
+				const existingSchemas =
+					getLoadedMonaco().languages.json.jsonDefaults
+						.diagnosticsOptions.schemas || [];
+
+				getLoadedMonaco().languages.json.jsonDefaults.setDiagnosticsOptions(
+					{
+						validate: true,
+						schemas: [
+							...existingSchemas.filter(
+								(s) =>
+									!s.uri.startsWith(
+										"https://example.org/schemas/temp/"
+									)
+							),
+							...this.props.jsonSchemas.map((s, idx) => ({
+								uri: "https://example.org/schemas/temp/" + idx,
+								fileMatch: [`model${modelId}`],
+								schema: s.schema,
+							})),
+						],
+					}
+				);
+			}
+
+			this.prevDecorations = this.editor.deltaDecorations(
+				[],
+				[
+					...decorations,
+					...propDecorations.map((d) => {
+						const r = getLoadedMonaco().Range.lift(d.range);
+						return {
+							range: r,
+							options: {
+								hoverMessage: d.label
+									? { value: d.label, isTrusted: false }
+									: undefined,
+								className: r.isEmpty()
+									? "decoration-empty"
+									: "decoration",
+							},
+						};
+					}),
+				]
+			);
+
+			/*
+			this.editor!.updateOptions({ readOnly: false });
 
             setTimeout(() => {
                 const a = this.editor!.getAction(
@@ -71,6 +153,7 @@ export class MonacoEditor extends React.Component<{
                     this.editor!.updateOptions({ readOnly: true });
                 });
             }, 200);*/
+
 			if (this.model) {
 				this.model.dispose();
 			}
@@ -90,6 +173,8 @@ export class MonacoEditor extends React.Component<{
 			fixedOverflowWidgets: true,
 			readOnly: true,
 			theme: this.props.theme.kind === "dark" ? "vs-dark" : "vs",
+			renderWhitespace: "all",
+			renderValidationDecorations: "on",
 		});
 	};
 

visualization-bundle/src/visualizers/monaco-text-visualizer/getLanguageId.tsx

@@ -0,0 +1,28 @@
+import { getLoadedMonaco } from "@hediet/monaco-editor-react";
+
+export function getLanguageId(fileName: string): string {
+	const l = getLoadedMonaco().languages.getLanguages();
+	const result = l.find(l => {
+		if (l.filenamePatterns) {
+			for (const p of l.filenamePatterns) {
+				if (new RegExp(p).test(fileName)) {
+					return true;
+				}
+			}
+		}
+		if (l.extensions) {
+			for (const p of l.extensions) {
+				if (fileName.endsWith(p)) {
+					return true;
+				}
+			}
+		}
+
+		return false;
+	});
+
+	if (result) {
+		return result.id;
+	}
+	return "text";
+}

visualization-bundle/src/visualizers/monaco-text-visualizer/index.tsx

@@ -4,15 +4,43 @@ import {
 	sString,
 	sOptionalProp,
 	sProp,
+	sArrayOf,
+	sNumber,
+	sUnion,
+	sAny,
 } from "@hediet/semantic-json";
 import * as React from "react";
-import { getLanguageId, MonacoEditor } from "./MonacoEditor";
 import {
 	createVisualizer,
-	ReactVisualization,
 	globalVisualizationFactory,
+	createReactVisualization,
 } from "@hediet/visualization-core";
 import { visualizationNs } from "../../consts";
+import { makeLazyLoadable } from "../../utils/LazyLoadable";
+import { Decoration } from "./MonacoEditor";
+
+export const MonacoEditorLazyLoadable = makeLazyLoadable(
+	async () => (await import("./MonacoEditor")).MonacoEditor
+);
+
+export const LineColumnPosition = sOpenObject({
+	line: sProp(sNumber(), { description: "The 0-based line number" }),
+	column: sProp(sNumber(), { description: "The 0-based column number" }),
+}).defineAs(visualizationNs("LineColumnPosition"));
+
+export const LineColumnRange = sOpenObject({
+	start: sProp(LineColumnPosition, { description: "The start position" }),
+	end: sProp(LineColumnPosition, { description: "The end position" }),
+}).defineAs(visualizationNs("LineColumnRange"));
+
+export const OffsetPosition = sNumber().defineAs(
+	visualizationNs("OffsetPosition")
+);
+
+export const OffsetRange = sOpenObject({
+	start: sProp(OffsetPosition, { description: "The start position" }),
+	end: sProp(OffsetPosition, { description: "The end position" }),
+}).defineAs(visualizationNs("OffsetRange"));
 
 export const monacoTextVisualizer = createVisualizer({
 	id: "monaco-text",
@@ -22,21 +50,61 @@ export const monacoTextVisualizer = createVisualizer({
 			text: sLiteral(true),
 		}),
 		text: sProp(sString(), { description: "The text to show" }),
+		decorations: sOptionalProp(
+			sArrayOf(
+				sOpenObject({
+					range: sUnion([LineColumnRange]),
+					label: sOptionalProp(sString()),
+				})
+			)
+		),
+		jsonSchemas: sOptionalProp(
+			sArrayOf(
+				sOpenObject({
+					schema: sProp(sAny(), {
+						description:
+							"A json schema object that is applied when the fileName indicates a JSON document.",
+					}),
+				})
+			),
+			{
+				description:
+					"An array of schemas used to validate JSON documents.",
+			}
+		),
 		fileName: sOptionalProp(sString(), {
 			description:
 				"An optional filename that might be used for chosing a syntax highlighter",
 		}),
 	}).defineAs(visualizationNs("MonacoTextVisualizationData")),
 	getVisualization: (data, self) =>
-		new ReactVisualization(self, { priority: 500 }, theme => {
+		createReactVisualization(
-			let id = "text";
+			self,
-			if (data.fileName) {
+			{ priority: 500, preload: MonacoEditorLazyLoadable.preload },
-				id = getLanguageId(data.fileName);
+			function ({ theme }) {
+				const decorations = data.decorations
+					? data.decorations.map<Decoration>((d) => ({
+							label: d.label,
+							range: {
+								startLineNumber: d.range.start.line + 1,
+								startColumn: d.range.start.column + 1,
+								endLineNumber: d.range.end.line + 1,
+								endColumn: d.range.end.column + 1,
+							},
+					  }))
+					: [];
+
+				return (
+					<MonacoEditorLazyLoadable
+						text={data.text}
+						fileName={data.fileName}
+						theme={theme}
+						decorations={decorations}
+						jsonSchemas={data.jsonSchemas}
+					/>
+				);
 			}
-			return (
+		),
-				<MonacoEditor text={data.text} languageId={id} theme={theme} />
-			);
-		}),
 });
 
 globalVisualizationFactory.addVisualizer(monacoTextVisualizer);

visualization-bundle/src/visualizers/monaco-text-visualizer/style.scss

@@ -1,4 +1,9 @@
+.themeable {
+	--visualizer-monaco-editor-background: var(--visualizer-background);
+}
+
 .component-monaco-editor {
+	background-color: var(--visualizer-monaco-editor-background);
 	width: 100%;
 	height: 100%;
 	min-width: 0;
@@ -20,3 +25,17 @@
 		}
 	}
 }
+
+.decoration-whitespace {
+	color: black !important;
+	opacity: 0.4;
+}
+
+.decoration-empty {
+	margin-left: -1px;
+	border-left: solid rgba(255, 0, 0, 0.815) 3px;
+}
+
+.decoration {
+	background-color: rgba(250, 36, 36, 0.459);
+}

visualization-bundle/src/visualizers/perspective-table-visualizer/index.tsx

@@ -3,8 +3,8 @@ import { sOpenObject, sLiteral, sArrayOf, sProp } from "@hediet/semantic-json";
 import { toJS } from "mobx";
 import {
 	createVisualizer,
-	ReactVisualization,
 	globalVisualizationFactory,
+	createReactVisualization,
 } from "@hediet/visualization-core";
 import { makeLazyLoadable } from "../../utils/LazyLoadable";
 import { visualizationNs } from "../../consts";
@@ -28,21 +28,28 @@ export const perspectiveTableVisualizer = createVisualizer({
 	name: "Perspective Table",
 	serializer: sTable,
 	getVisualization: (data, self) =>
-		new ReactVisualization(self, { priority: 1000 }, theme => (
+		createReactVisualization(
-			<PerspectiveDataViewerLazyLoadable
+			self,
-				className={
+			{
-					{
+				priority: 1000,
-						light: "perspective-viewer-material",
+				preload: PerspectiveDataViewerLazyLoadable.preload,
-						dark: "perspective-viewer-material-dark",
+			},
-					}[theme.kind]
+			({ theme }) => (
-				}
+				<PerspectiveDataViewerLazyLoadable
-				style={{
+					className={
-					width: "100%",
+						{
-					height: "100%",
+							light: "perspective-viewer-material",
-				}}
+							dark: "perspective-viewer-material-dark",
-				data={toJS(data.rows)}
+						}[theme.kind]
-			/>
+					}
-		)),
+					style={{
+						width: "100%",
+						height: "100%",
+					}}
+					data={toJS(data.rows)}
+				/>
+			)
+		),
 });
 
 globalVisualizationFactory.addVisualizer(perspectiveTableVisualizer);

visualization-bundle/src/visualizers/plotly-visualizer/PlotlyViewer.tsx

@@ -1,18 +1,25 @@
+import { Theme } from "@hediet/visualization-core";
 import { observer } from "mobx-react";
 import * as React from "react";
 import Plot from "react-plotly.js";
 
+// needs to be overwriten since the table layout is not defined in @types/plotly.js
+interface PlotlyLayoutAnyTemplate extends Plotly.Layout {
+	template: any;
+}
+
 @observer
 export class PlotlyViewer extends React.Component<{
 	data: Plotly.Data[];
 	layout?: Partial<Plotly.Layout>;
-	theme: "light" | "dark";
+	theme: Theme;
+	onReady: () => void;
 }> {
 	render() {
 		const { theme, data, layout } = this.props;
 		const computedLayout = Object.assign(
 			{},
-			theme === "dark" ? darkLayout : {},
+			theme.id === "dark" ? getLayout(theme) : {},
 			layout || {}
 		);
 
@@ -39,13 +46,118 @@ export class PlotlyViewer extends React.Component<{
 				data={data}
 				layout={computedLayout}
 				config={{ responsive: true }}
+				onInitialized={this.props.onReady}
 			/>
 		);
 	}
 }
 
+function getLayout(theme: Theme): Partial<PlotlyLayoutAnyTemplate> {
+	return {
+		colorway: [
+			"#636efa",
+			"#EF553B",
+			"#00cc96",
+			"#ab63fa",
+			"#19d3f3",
+			"#e763fa",
+			"#fecb52",
+			"#ffa15a",
+			"#ff6692",
+			"#b6e880",
+		],
+		autosize: true,
+		font: { color: "#f2f5fa" },
+		title: { x: 0.05 },
+		paper_bgcolor: theme.resolveVarToColor("--visualizer-background"), // "rgb(17,17,17)",
+		plot_bgcolor: theme.resolveVarToColor("--visualizer-background"), // "rgb(17,17,17)",
+		hovermode: "closest",
+		polar: {
+			bgcolor: theme.resolveVarToColor("--visualizer-background"),
+			angularaxis: {
+				gridcolor: "#506784",
+				linecolor: "#506784",
+				ticks: "",
+			},
+			radialaxis: {
+				gridcolor: "#506784",
+				linecolor: "#506784",
+				ticks: "",
+			},
+		},
+		ternary: {
+			bgcolor: theme.resolveVarToColor("--visualizer-background"),
+			aaxis: { gridcolor: "#506784", linecolor: "#506784", ticks: "" },
+			baxis: { gridcolor: "#506784", linecolor: "#506784", ticks: "" },
+			caxis: { gridcolor: "#506784", linecolor: "#506784", ticks: "" },
+		},
+		xaxis: {
+			gridcolor: "#283442",
+			linecolor: "#506784",
+			ticks: "",
+			zerolinecolor: "#283442",
+			zerolinewidth: 2,
+			automargin: true,
+		},
+		yaxis: {
+			gridcolor: "#283442",
+			linecolor: "#506784",
+			ticks: "",
+			zerolinecolor: "#283442",
+			zerolinewidth: 2,
+			automargin: true,
+		},
+		scene: {
+			xaxis: {
+				gridcolor: "#506784",
+				linecolor: "#506784",
+				showbackground: false,
+				ticks: "",
+				zerolinecolor: "#C8D4E3",
+				gridwidth: 2,
+			},
+			yaxis: {
+				gridcolor: "#506784",
+				linecolor: "#506784",
+				showbackground: false,
+				ticks: "",
+				zerolinecolor: "#C8D4E3",
+				gridwidth: 2,
+			},
+			zaxis: {
+				gridcolor: "#506784",
+				linecolor: "#506784",
+				showbackground: false,
+				ticks: "",
+				zerolinecolor: "#C8D4E3",
+				gridwidth: 2,
+			},
+		},
+		geo: {
+			bgcolor: theme.resolveVarToColor("--visualizer-plotly-background"),
+			landcolor: theme.resolveVarToColor(
+				"--visualizer-plotly-background"
+			),
+			subunitcolor: "#506784",
+			showland: true,
+			showlakes: true,
+			lakecolor: theme.resolveVarToColor(
+				"--visualizer-plotly-background"
+			),
+		},
+		template: {
+			data: {
+				table: [{
+					cells: { fill: { color: theme.resolveVarToColor("--visualizer-background") } },
+					header: { fill: { color: "rgb(17, 17, 17)" } },
+				}]
+			}
+		}
+	};
+}
+
 // extracted from the plotly website
-const darkLayout: Partial<Plotly.Layout> = {
+const darkLayout: Partial<PlotlyLayoutAnyTemplate> = {
 	colorway: [
 		"#636efa",
 		"#EF553B",
@@ -59,53 +171,6 @@ const darkLayout: Partial<Plotly.Layout> = {
 		"#b6e880",
 	],
 	autosize: true,
-	//margin: { b: 0, t: 0, pad: 0 },
-	//height: 300,
-	/*colorscale: {
-		sequential: [
-			[0, "#0508b8"],
-			[0.0893854748603352, "#1910d8"],
-			[0.1787709497206704, "#3c19f0"],
-			[0.2681564245810056, "#6b1cfb"],
-			[0.3575418994413408, "#981cfd"],
-			[0.44692737430167595, "#bf1cfd"],
-			[0.5363128491620112, "#dd2bfd"],
-			[0.6256983240223464, "#f246fe"],
-			[0.7150837988826816, "#fc67fd"],
-			[0.8044692737430168, "#fe88fc"],
-			[0.8938547486033519, "#fea5fd"],
-			[0.9832402234636871, "#febefe"],
-			[1, "#fec3fe"],
-		],
-		sequentialminus: [
-			[0, "#0508b8"],
-			[0.0893854748603352, "#1910d8"],
-			[0.1787709497206704, "#3c19f0"],
-			[0.2681564245810056, "#6b1cfb"],
-			[0.3575418994413408, "#981cfd"],
-			[0.44692737430167595, "#bf1cfd"],
-			[0.5363128491620112, "#dd2bfd"],
-			[0.6256983240223464, "#f246fe"],
-			[0.7150837988826816, "#fc67fd"],
-			[0.8044692737430168, "#fe88fc"],
-			[0.8938547486033519, "#fea5fd"],
-			[0.9832402234636871, "#febefe"],
-			[1, "#fec3fe"],
-		],
-		diverging: [
-			[0, "#8e0152"],
-			[0.1, "#c51b7d"],
-			[0.2, "#de77ae"],
-			[0.3, "#f1b6da"],
-			[0.4, "#fde0ef"],
-			[0.5, "#f7f7f7"],
-			[0.6, "#e6f5d0"],
-			[0.7, "#b8e186"],
-			[0.8, "#7fbc41"],
-			[0.9, "#4d9221"],
-			[1, "#276419"],
-		],
-	},*/
 	font: { color: "#f2f5fa" },
 	title: { x: 0.05 },
 	paper_bgcolor: "rgb(17,17,17)",
@@ -175,17 +240,6 @@ const darkLayout: Partial<Plotly.Layout> = {
 			gridwidth: 2,
 		},
 	},
-	/*
-	shapedefaults: {
-		fillcolor: "#f2f5fa",
-		line: { width: 0 },
-		opacity: 0.4,
-	},
-	annotationdefaults: {
-		arrowcolor: "#f2f5fa",
-		arrowhead: 0,
-		arrowwidth: 1,
-	},*/
 	geo: {
 		bgcolor: "rgb(17,17,17)",
 		landcolor: "rgb(17,17,17)",
@@ -194,13 +248,4 @@ const darkLayout: Partial<Plotly.Layout> = {
 		showlakes: true,
 		lakecolor: "rgb(17,17,17)",
 	},
-	/*
-	updatemenudefaults: { bgcolor: "#506784", borderwidth: 0 },
-	sliderdefaults: {
-		bgcolor: "#C8D4E3",
-		borderwidth: 1,
-		bordercolor: "rgb(17,17,17)",
-		tickwidth: 0,
-	},
-	*/
 };

visualization-bundle/src/visualizers/plotly-visualizer/index.tsx

@@ -1,23 +1,23 @@
-import * as React from "react";
 import {
-	sOpenObject,
-	sLiteral,
 	sArrayOf,
+	sLiteral,
+	sNull,
+	sNumber,
+	sOpenObject,
 	sOptionalProp,
-	sAny,
 	sProp,
 	sString,
 	sUnion,
-	sNumber,
-	sNull,
 } from "@hediet/semantic-json";
-import { makeLazyLoadable } from "../../utils/LazyLoadable";
+import { Deferred } from "@hediet/std/synchronization";
 import {
+	createLazyReactVisualization,
 	createVisualizer,
-	ReactVisualization,
 	globalVisualizationFactory,
 } from "@hediet/visualization-core";
+import * as React from "react";
 import { visualizationNs } from "../../consts";
+import { makeLazyLoadable } from "../../utils/LazyLoadable";
 
 const PlotlyViewerLazyLoadable = makeLazyLoadable(
 	async () => (await import("./PlotlyViewer")).PlotlyViewer
@@ -44,6 +44,22 @@ export const plotlyVisualizer = createVisualizer({
 					x: sOptionalProp(sDatumArr),
 					y: sOptionalProp(sDatumArr),
 					z: sOptionalProp(sDatumArr),
+					cells: sOptionalProp(
+						sOpenObject({
+							values: sArrayOf(sDatumArr),
+						})
+					),
+					header: sOptionalProp(
+						sOpenObject({
+							values: sDatumArr,
+						})
+					),
+					domain: sOptionalProp(
+						sOpenObject({
+							x: sArrayOf(sNumber()),
+							y: sArrayOf(sNumber()),
+						})
+					),
 					type: sOptionalProp(
 						sUnion([
 							sLiteral("bar"),
@@ -72,6 +88,7 @@ export const plotlyVisualizer = createVisualizer({
 							sLiteral("funnel"),
 							sLiteral("funnelarea"),
 							sLiteral("scattermapbox"),
+							sLiteral("table"),
 						])
 					),
 					mode: sOptionalProp(
@@ -111,13 +128,27 @@ export const plotlyVisualizer = createVisualizer({
 		),
 	}).defineAs(visualizationNs("PlotlyVisualizationData")),
 	getVisualization: (data, self) =>
-		new ReactVisualization(self, { priority: 1000 }, theme => (
+		createLazyReactVisualization(
-			<PlotlyViewerLazyLoadable
+			self,
-				data={data.data}
+			{
-				layout={data.layout}
+				priority: 1000,
-				theme={theme.kind}
+				preload: PlotlyViewerLazyLoadable.preload,
-			/>
+			},
-		)),
+			({ theme }) => {
+				const b = new Deferred();
+				return {
+					node: (
+						<PlotlyViewerLazyLoadable
+							data={data.data}
+							layout={data.layout}
+							theme={theme}
+							onReady={() => b.resolve}
+						/>
+					),
+					ready: b.promise,
+				};
+			}
+		),
 });
 
 globalVisualizationFactory.addVisualizer(plotlyVisualizer);

visualization-bundle/src/visualizers/plotly-visualizer/style.scss

@@ -0,0 +1,3 @@
+.themeable {
+	--visualizer-plotly-background: var(--visualizer-background);
+}

visualization-bundle/src/visualizers/simple-text-visualizer/index.tsx

@@ -2,8 +2,8 @@ import { sOpenObject, sLiteral, sString } from "@hediet/semantic-json";
 import * as React from "react";
 import {
 	createVisualizer,
-	ReactVisualization,
 	globalVisualizationFactory,
+	createReactVisualization,
 } from "@hediet/visualization-core";
 import { visualizationNs } from "../../consts";
 
@@ -30,7 +30,7 @@ export const simpleTextVisualizer = createVisualizer({
 	) =>
 		// If you want to use react, this is the way to go.
 		// Return your own implementation if you want to render directly to the DOM.
-		new ReactVisualization(
+		createReactVisualization(
 			self,
 			{
 				// The priority is used for automatically selecting the best visualization
@@ -46,6 +46,8 @@ export const simpleTextVisualizer = createVisualizer({
 						// Use css vars for theming.
 						// See ./style.scss.
 						color: "var(--visualizer-simple-text-color)",
+						background: "var(--visualizer-simple-text-background)",
+						height: "100%",
 					}}
 				>
 					{data.text}

visualization-bundle/src/visualizers/simple-text-visualizer/style.scss

@@ -1,5 +1,8 @@
 // Provide default colors for both the dark and light theme here!
 
+.themeable {
+	--visualizer-simple-text-background: var(--visualizer-background);
+}
 .theme-dark {
 	--visualizer-simple-text-color: white;
 }

visualization-bundle/src/visualizers/source-visualizer/index.tsx

@@ -1,12 +1,12 @@
-import { sAny, sOpenObject } from "@hediet/semantic-json";
+import { JsonSchemaGenerator, sOpenObject } from "@hediet/semantic-json";
 import * as React from "react";
 import {
+	createReactVisualization,
 	createVisualizer,
-	ReactVisualization,
 	globalVisualizationFactory,
 } from "@hediet/visualization-core";
-import { MonacoEditor } from "../monaco-text-visualizer/MonacoEditor";
 import { visualizationNs } from "../../consts";
+import { MonacoEditorLazyLoadable } from "../monaco-text-visualizer";
 
 export const sourceVisualizer = createVisualizer({
 	id: "source",
@@ -15,13 +15,24 @@ export const sourceVisualizer = createVisualizer({
 		kind: sOpenObject({}),
 	}).defineAs(visualizationNs("SourceVisualizationData")),
 	getVisualization: (data, self) =>
-		new ReactVisualization(self, { priority: -100 }, theme => (
+		createReactVisualization(self, { priority: -100 }, ({ theme }) => {
-			<MonacoEditor
+			const s = new JsonSchemaGenerator();
-				text={JSON.stringify(data, undefined, 4)}
+
-				languageId={"json"}
+			return (
-				theme={theme}
+				<MonacoEditorLazyLoadable
-			/>
+					text={JSON.stringify(data, undefined, 4)}
-		)),
+					fileName={"main.json"}
+					theme={theme}
+					jsonSchemas={[
+						{
+							schema: s.getJsonSchemaWithDefinitions(
+								globalVisualizationFactory.getSerializer()
+							),
+						},
+					]}
+				/>
+			);
+		}),
 });
 
 globalVisualizationFactory.addHiddenVisualizer(sourceVisualizer);

visualization-bundle/src/visualizers/svg-visualizer/SvgViewer.tsx

@@ -74,7 +74,13 @@ export class SvgViewer extends React.Component<{
 					}
 				}}
 			>
-				{({ measureRef, contentRect }) => (
+				{({
+					measureRef,
+					contentRect,
+				}: {
+					measureRef: any;
+					contentRect: any;
+				}) => (
 					<div
 						ref={measureRef}
 						className="svgViewer"
@@ -85,7 +91,7 @@ export class SvgViewer extends React.Component<{
 							height={heightOrDefault(contentRect)}
 							tool={tool}
 							value={val as any}
-							onChangeValue={v => (this.value = v)}
+							onChangeValue={(v: any) => (this.value = v)}
 							onChangeTool={this.setTool}
 							ref={this.svgPanZoomRef}
 							toolbarProps={{

visualization-bundle/src/visualizers/svg-visualizer/index.tsx

@@ -3,8 +3,8 @@ import { sOpenObject, sLiteral, sString, sProp } from "@hediet/semantic-json";
 import { SvgViewer } from "./SvgViewer";
 import {
 	createVisualizer,
-	ReactVisualization,
 	globalVisualizationFactory,
+	createReactVisualization,
 } from "@hediet/visualization-core";
 import { visualizationNs } from "../../consts";
 
@@ -18,7 +18,7 @@ export const svgVisualizer = createVisualizer({
 		text: sProp(sString(), { description: "The svg content" }),
 	}).defineAs(visualizationNs("SvgVisualizationData")),
 	getVisualization: (data, self) =>
-		new ReactVisualization(self, { priority: 1500 }, () => (
+		createReactVisualization(self, { priority: 1500 }, () => (
 			<SvgViewer svgContent={data.text} />
 		)),
 });

visualization-bundle/src/visualizers/tree-visualizer/SvgElements.tsx

@@ -4,7 +4,10 @@ import { Properties } from "csstype";
 
 type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 
-export function omit<T, K extends keyof T>(obj: T, keys: K[]): Omit<T, K> {
+export function omit<T extends {}, K extends keyof T>(
+	obj: T,
+	keys: K[]
+): Omit<T, K> {
 	const newObj: Omit<T, K> = {} as any;
 	for (const [key, val] of Object.entries(obj)) {
 		if (!keys.includes(key as K)) {

visualization-bundle/src/visualizers/tree-visualizer/Views.tsx

@@ -1,7 +1,7 @@
 import { observer, disposeOnUnmount } from "mobx-react";
 import { observable, autorun, computed, action, runInAction } from "mobx";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import { Rectangle, Point } from "./Point";
 import { SvgLine } from "./SvgElements";
 import { Item } from ".";

visualization-bundle/src/visualizers/tree-visualizer/index.tsx

@@ -19,8 +19,8 @@ import {
 } from "@hediet/semantic-json";
 import {
 	createVisualizer,
-	ReactVisualization,
 	globalVisualizationFactory,
+	createReactVisualization,
 } from "@hediet/visualization-core";
 import { visualizationNs } from "../../consts";
 
@@ -86,7 +86,7 @@ export const treeVisualizer = createVisualizer({
 	name: "Tree",
 	serializer: sTree,
 	getVisualization: (data, self) =>
-		new ReactVisualization(self, { priority: 1200 }, () => {
+		createReactVisualization(self, { priority: 1200 }, () => {
 			const m = createTreeViewModelFromTreeNodeData(
 				data.root,
 				() => undefined

visualization-bundle/src/visualizers/tree-visualizer/style.scss

@@ -1,3 +1,7 @@
+.themeable {
+	--visualizer-tree-background: var(--visualizer-background);
+}
+
 .theme-dark {
 	--visualizer-tree-childOrThisMarked-background: orange;
 	--visualizer-tree-childOrThisSelected-background: white;
@@ -124,6 +128,8 @@
 }
 
 .component-TreeWithPathView {
+	background-color: var(--visualizer-tree-background);
+
 	display: flex;
 	flex-direction: column;
 	height: 100%;

visualization-bundle/style.scss

@@ -1,6 +1,10 @@
+@import "./src/vars.scss";
 @import "./src/visualizers/grid-visualizer/style.scss";
 @import "./src/visualizers/simple-text-visualizer/style.scss";
 @import "./src/visualizers/monaco-text-visualizer/style.scss";
+@import "./src/visualizers/monaco-text-diff-visualizer/style.scss";
 @import "./src/visualizers/tree-visualizer/style.scss";
 @import "./src/visualizers/ast-visualizer/style.scss";
 @import "./src/visualizers/svg-visualizer/style.scss";
+@import "./src/visualizers/graph/graph-visjs-visualizer/style.scss";
+@import "./src/visualizers/plotly-visualizer/style.scss";

visualization-core/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@hediet/visualization-core",
 	"description": "Provides infrastructure to find registered visualizations for given json data",
-	"version": "0.1.1",
+	"version": "0.3.1",
 	"license": "MIT",
 	"homepage": "https://github.com/hediet/visualization",
 	"repository": {
@@ -27,8 +27,9 @@
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"dependencies": {
+		"@hediet/semantic-json": "^0.3.15",
 		"@hediet/std": "^0.6.0",
-		"@hediet/semantic-json": "^0.3.14",
+		"mobx": "^5.15.4",
 		"react": "^16.12.0",
 		"react-dom": "^16.12.0",
 		"react-measure": "^2.3.0"

visualization-core/src/CanvasVisualization.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { createReactVisualization } from "./ReactVisualization";
+import { Visualization, Visualizer } from "./Visualizer";
+import { Disposable } from "@hediet/std/disposable";
+
+export function createCanvas2DVisualization(
+	sourceVisualizer: Visualizer,
+	options: { priority: number },
+	render: (context: CanvasRenderingContext2D) => Disposable | void
+): Visualization {
+	return createReactVisualization(
+		sourceVisualizer,
+		{ priority: options.priority },
+		() => (
+			<canvas
+				ref={(canvas) => {
+					if (canvas) {
+						const ctx = canvas.getContext("2d")!;
+						ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+						// We don't want to use try/catch to swallow the error, so we use setTimeout to protect the caller
+						setTimeout(() => {
+							render(ctx);
+						}, 0);
+					}
+				}}
+			/>
+		)
+	);
+}

visualization-core/src/ReactVisualization.tsx

@@ -1,56 +1,105 @@
 import * as React from "react";
 import * as ReactDom from "react-dom";
 import { Visualization, Theme } from "./index";
-import { Visualizer, VisualizationId, asVisualizationId } from "./Visualizer";
+import {
+	Visualizer,
+	VisualizationId,
+	asVisualizationId,
+	VisualizationRenderOptions,
+} from "./Visualizer";
+import { Deferred } from "@hediet/std/synchronization";
 
-interface Options {
+interface ReactVisualizationArgs {
-	id?: string;
-	name?: string;
 	priority: number;
+	preload?: (() => Promise<void>) | undefined;
 }
 
-export abstract class BaseReactVisualization implements Visualization<unknown> {
+class ReactVisualization implements Visualization<unknown> {
 	public readonly id: VisualizationId;
 	public readonly name: string;
 	public readonly priority: number;
+	private readonly _preload: (() => Promise<void>) | undefined;
 
 	constructor(
 		public readonly sourceVisualizer: Visualizer,
-		options: Options
+		options: ReactVisualizationArgs,
+		private readonly getReactNode: (
+			options: ReactVisualizationRenderArgs
+		) => {
+			node: React.ReactChild;
+			ready: Promise<void>;
+		}
 	) {
-		this.id = asVisualizationId(
+		this.id = asVisualizationId(sourceVisualizer.id.toString());
-			options.id || sourceVisualizer.id.toString()
+		this.name = sourceVisualizer.name;
-		);
-		this.name = options.name || sourceVisualizer.name;
 		this.priority = options.priority;
+		this._preload = options.preload;
+	}
+
+	public preload(): Promise<void> {
+		return this._preload ? this._preload() : Promise.resolve();
 	}
 
 	public render(
 		target: HTMLDivElement,
-		theme: Theme,
+		options: VisualizationRenderOptions<unknown>
-		previous: unknown | undefined
+	): { renderState: unknown; ready: Promise<void> } {
-	): unknown {
+		const { node, ready } = this.getReactNode({
-		const node = this.getReactNode(theme);
+			theme: options.theme,
+		});
 		// We could use this to get access to theme vars:
 		// getComputedStyle(target).getPropertyValue("--background-color")
 
 		ReactDom.render(<>{node}</>, target);
-		return undefined;
+		return { renderState: undefined, ready };
-	}
-
-	protected abstract getReactNode(theme: Theme): React.ReactChild;
-}
-
-export class ReactVisualization extends BaseReactVisualization {
-	constructor(
-		sourceVisualizer: Visualizer,
-		options: Options,
-		private readonly renderReactNode: (theme: Theme) => React.ReactChild
-	) {
-		super(sourceVisualizer, options);
-	}
-
-	protected getReactNode(theme: Theme): React.ReactChild {
-		return this.renderReactNode(theme);
 	}
 }
+
+export interface ReactVisualizationRenderArgs {
+	theme: Theme;
+}
+
+export function createReactVisualization(
+	sourceVisualizer: Visualizer,
+	args: ReactVisualizationArgs,
+	renderReactNode: (args: ReactVisualizationRenderArgs) => React.ReactChild
+) {
+	return new ReactVisualization(sourceVisualizer, args, options => {
+		const deferred = new Deferred();
+		return {
+			node: (
+				<ComponentWithOnMount
+					onDidMount={() => deferred.resolve()}
+					child={renderReactNode(options)}
+				/>
+			),
+			ready: deferred.promise,
+		};
+	});
+}
+
+class ComponentWithOnMount extends React.Component<{
+	child: React.ReactChild;
+	onDidMount: () => void;
+}> {
+	componentDidMount() {
+		this.props.onDidMount();
+	}
+
+	render(): React.ReactNode {
+		return this.props.child;
+	}
+}
+
+export function createLazyReactVisualization(
+	sourceVisualizer: Visualizer,
+	args: ReactVisualizationArgs,
+	renderReactNode: (
+		args: ReactVisualizationRenderArgs
+	) => {
+		node: React.ReactChild;
+		ready: Promise<void>;
+	}
+) {
+	return new ReactVisualization(sourceVisualizer, args, renderReactNode);
+}

visualization-core/src/RegisterVisualizerFn.ts

@@ -0,0 +1,26 @@
+import * as semanticJson from "@hediet/semantic-json";
+import { createCanvas2DVisualization } from "./CanvasVisualization";
+import { CreateVisualizerOptions } from "./createVisualizer";
+import { Visualization, Visualizer } from "./Visualizer";
+
+export type RegisterVisualizerFn = (
+	register: <TData>(
+		visualizationOptions: CreateVisualizerOptions<TData>
+	) => void,
+	lib: Lib
+) => void;
+
+interface Lib {
+	semanticJson: typeof semanticJson;
+
+	createCanvas2DVisualization: (
+		visualizer: Visualizer,
+		options: { priority: number },
+		render: (context: CanvasRenderingContext2D) => void
+	) => Visualization;
+}
+
+export const libImplementation: Lib = {
+	semanticJson,
+	createCanvas2DVisualization,
+};

visualization-core/src/Theme.ts

@@ -1,9 +1,36 @@
 export class Theme {
-	public static readonly light = new Theme("light", "light");
+	private static _light: Theme;
-	public static readonly dark = new Theme("dark", "dark");
+	public static get light(): Theme {
+		if (!this._light) {
+			this._light = new Theme("light", "light");
+		}
+		return this._light;
+	}
+
+	private static _dark: Theme;
+	public static get dark(): Theme {
+		if (!this._dark) {
+			this._dark = new Theme("dark", "dark");
+		}
+		return this._dark;
+	}
+
+	private readonly divElement = document.createElement("div");
 
 	constructor(
 		public readonly id: string,
 		public readonly kind: "light" | "dark"
-	) {}
+	) {
+		this.divElement.classList.add(
+			"themeable",
+			`theme-${this.id}`,
+			"visualization"
+		);
+		this.divElement.style.display = "none";
+		document.body.append(this.divElement);
+	}
+
+	public resolveVarToColor(varName: string): string {
+		return getComputedStyle(this.divElement).getPropertyValue(varName);
+	}
 }

visualization-core/src/VisualizationView.tsx

@@ -5,6 +5,7 @@ import { Theme } from "./Theme";
 export class VisualizationView extends React.Component<{
 	visualization: Visualization;
 	theme: Theme;
+	onReady?: () => void;
 }> {
 	private readonly ref = React.createRef<HTMLDivElement>();
 	private visualizationRenderState: unknown = undefined;
@@ -19,11 +20,18 @@ export class VisualizationView extends React.Component<{
 
 	renderVisualization() {
 		const { visualization, theme } = this.props;
-		this.visualizationRenderState = visualization.render(
+		const { renderState, ready } = visualization.render(this.ref.current!, {
-			this.ref.current!,
 			theme,
-			this.visualizationRenderState
+			previousRenderState: this.visualizationRenderState,
-		);
+		});
+
+		ready.then(() => {
+			if (this.props.onReady) {
+				return this.props.onReady();
+			}
+		});
+
+		this.visualizationRenderState = renderState;
 	}
 
 	render() {

visualization-core/src/Visualizer.ts

@@ -0,0 +1,59 @@
+import { BaseSerializer } from "@hediet/semantic-json";
+import { Theme } from "./Theme";
+
+export interface Visualizer {
+	readonly id: VisualizerId;
+	readonly name: string;
+
+	/**
+	 * Allows to deserialize JSON into an visualization.
+	 * This object is also used to inspect the schema of that JSON.
+	 */
+	readonly serializer: BaseSerializer<Visualization>;
+}
+
+export interface VisualizerId extends String {
+	__brand: "VisualizerId";
+}
+
+export function asVisualizerId(id: string): VisualizerId {
+	return id as unknown as VisualizerId;
+}
+
+export interface Visualization<TRenderState = any> {
+	readonly id: VisualizationId;
+	readonly name: string;
+	readonly priority: number;
+
+	render(
+		target: HTMLDivElement,
+		options: VisualizationRenderOptions<TRenderState>
+	): {
+		renderState: TRenderState;
+		/**
+		 * Is resolved when the visualization stabilized and is ready to be shown.
+		 * Note that the visualization can be shown before this promise resolves.
+		 * This promise is useful for loading animations or integrations.
+		 */
+		ready: Promise<void>;
+	};
+
+	/**
+	 * Preloads resources to speed up first rendering.
+	 * The visualization does not need to be rendered for this.
+	 */
+	preload(): Promise<void>;
+}
+
+export interface VisualizationId extends String {
+	__brand: "VisualizationId";
+}
+
+export function asVisualizationId(id: string): VisualizationId {
+	return id as unknown as VisualizationId;
+}
+
+export interface VisualizationRenderOptions<TRenderState> {
+	theme: Theme;
+	previousRenderState: TRenderState | undefined;
+}

visualization-core/src/Visualizer.tsx

@@ -1,37 +0,0 @@
-import { BaseSerializer } from "@hediet/semantic-json";
-import { Theme } from "./Theme";
-
-export interface VisualizerId extends String {
-	__brand: "VisualizerId";
-}
-
-export function asVisualizerId(id: string): VisualizerId {
-	return (id as unknown) as VisualizerId;
-}
-
-export interface Visualizer {
-	readonly id: VisualizerId;
-	readonly name: string;
-	readonly serializer: BaseSerializer<Visualization>;
-}
-
-export interface VisualizationId extends String {
-	__brand: "VisualizationId";
-}
-
-export function asVisualizationId(id: string): VisualizationId {
-	return (id as unknown) as VisualizationId;
-}
-
-export interface Visualization<TRenderState = any> {
-	readonly id: VisualizationId;
-	readonly name: string;
-	readonly priority: number;
-	readonly sourceVisualizer: Visualizer;
-
-	render(
-		target: HTMLDivElement,
-		theme: Theme,
-		previousRenderState: TRenderState | undefined
-	): TRenderState;
-}

visualization-core/src/VisualizerRegistry.ts

@@ -1,6 +1,6 @@
 import { Visualizer, Visualization, VisualizationId } from "./Visualizer";
 import { VisualizationData } from "./VisualizationData";
-import { JSONValue, sUnionMany } from "@hediet/semantic-json";
+import { JSONValue, Serializer, sUnionMany } from "@hediet/semantic-json";
 import { ObservableMap } from "mobx";
 
 export class VisualizationFactory {
@@ -10,13 +10,17 @@ export class VisualizationFactory {
 		Visualizer
 	>();
 
-	public getSerializer() {
+	public getSerializer(): Serializer<[Visualization<any>, Visualizer][]> {
 		return this._getSerializer(this.visualizers);
 	}
 
-	private _getSerializer(map: ObservableMap<string, Visualizer>) {
+	private _getSerializer(map: ObservableMap<string, Visualizer>): Serializer<[Visualization<any>, Visualizer][]> {
 		return sUnionMany(
-			[...map.values()].map(v => v.serializer.asSerializer()),
+			[...map.values()].map((v) => v.serializer.asSerializer().refine<[Visualization, Visualizer]>({
+				canSerialize: (v): v is [Visualization, Visualizer] => false,
+				fromIntermediate: value => [value, v],
+				toIntermediate: () => { throw new Error("not supported"); }
+			})),
 			{ processingStrategy: "all" }
 		);
 	}
@@ -25,6 +29,14 @@ export class VisualizationFactory {
 		this.visualizers.set(visualizer.id.toString(), visualizer);
 	}
 
+	public getRegisteredVisualizers(): Visualizer[] {
+		return [...this.visualizers.values()];
+	}
+
+	public getRegisteredHiddenVisualizer(): Visualizer[] {
+		return [...this.hiddenVisualizers.values()];
+	}
+
 	/**
 	 * Hidden visualizers don't appear in `getSerializer` and should only be presented to the user if he explicitly selects it.
 	 * `getVisualizations(...).bestVisualization` is only the result of a hidden visualizer if the user requests a hidden visualization id.
@@ -38,22 +50,22 @@ export class VisualizationFactory {
 		preferredVisualization: VisualizationId | undefined
 	): Visualizations {
 		const u = this.getSerializer();
-		const result = u.deserialize((data as unknown) as JSONValue);
+		const result = u.deserialize(data as unknown as JSONValue);
 		const allVisualizations = result.value || [];
 
 		const u2 = this._getSerializer(this.hiddenVisualizers);
-		const hiddenResult = u2.deserialize((data as unknown) as JSONValue);
+		const hiddenResult = u2.deserialize(data as unknown as JSONValue);
 		allVisualizations.push(...(hiddenResult.value || []));
 
-		allVisualizations.sort((a, b) => b.priority - a.priority);
+		allVisualizations.sort(([a], [b]) => b.priority - a.priority);
 
-		let bestVisualization: Visualization | undefined = allVisualizations[0];
+		let bestVisualization: [Visualization, Visualizer] | undefined = allVisualizations[0];
-		if (bestVisualization && bestVisualization.priority < 0) {
+		if (bestVisualization && bestVisualization[0].priority < 0) {
 			bestVisualization = undefined;
 		}
 		if (preferredVisualization) {
 			const preferred = allVisualizations.find(
-				vis => vis.id === preferredVisualization
+				([vis]) => vis.id === preferredVisualization
 			);
 			if (preferred) {
 				bestVisualization = preferred;
@@ -61,8 +73,9 @@ export class VisualizationFactory {
 		}
 
 		return {
-			bestVisualization,
+			bestVisualization: bestVisualization ? bestVisualization[0] : undefined,
-			allVisualizations,
+			bestVisualizationVisualizer: bestVisualization ? bestVisualization[1] : undefined,
+			allVisualizations: allVisualizations.map(v => v[0]),
 			visualizationDataErrors: [],
 		};
 	}
@@ -70,6 +83,7 @@ export class VisualizationFactory {
 
 export interface Visualizations {
 	bestVisualization: Visualization | undefined;
+	bestVisualizationVisualizer: Visualizer | undefined;
 	allVisualizations: Visualization[];
 	visualizationDataErrors: VisualizationDataError[];
 }

visualization-core/src/createVisualizer.ts

@@ -1,24 +1,30 @@
 import { BaseSerializer } from "@hediet/semantic-json";
 import { Visualization, Visualizer, asVisualizerId } from "./Visualizer";
 
-export function createVisualizer<TData>(options: {
+export interface CreateVisualizerOptions<TData> {
 	/**
 	 * A unique id for this visualizer.
 	 */
 	id: string;
+
 	/**
 	 * A human readable name of this visualizer.
 	 * Should be in English language.
 	 */
 	name: string;
+
 	serializer: BaseSerializer<TData>;
 	getVisualization: (data: TData, self: Visualizer) => Visualization;
-}): Visualizer {
+}
+
+export function createVisualizer<TData>(
+	options: CreateVisualizerOptions<TData>
+): Visualizer {
 	const result: Visualizer = {
 		id: asVisualizerId(options.id),
 		name: options.name,
 		serializer: options.serializer.refine({
-			fromIntermediate: data => options.getVisualization(data, result),
+			fromIntermediate: (data) => options.getVisualization(data, result),
 			canSerialize: (val): val is Visualization => false,
 			toIntermediate: () => {
 				throw new Error("not supported");

visualization-core/src/index.tsx

@@ -5,3 +5,4 @@ export * from "./VisualizerRegistry";
 export * from "./VisualizationView";
 export * from "./Theme";
 export * from "./createVisualizer";
+export * from "./RegisterVisualizerFn";