Adds plotly and plot-y-values data extractor.

data-extraction/package.json

@@ -28,8 +28,7 @@
 	"dependencies": {},
 	"devDependencies": {
 		"typescript": "^3.7.5",
-		"@types/express": "^4.17.2",
-		"@types/serve-static": "^1.13.3",
+		"@types/plotly.js": "^1.44.28",
 		"@types/node": "^13.7.1",
 		"tslint": "^6.0.0",
 		"webpack": "^4.41.6",

data-extraction/src/CommonDataTypes.ts

@@ -7,7 +7,8 @@ export type CommonDataType =
 	| CommonDataTypes.DotGraph
 	| CommonDataTypes.Tree
 	| CommonDataTypes.Ast
-	| CommonDataTypes.Graph;
+	| CommonDataTypes.Graph
+	| CommonDataTypes.Plotly;
 
 export function isCommonDataType<T>(
 	data: ExtractedData,
@@ -62,6 +63,11 @@ export module CommonDataTypes {
 			Text {
 		kind: { text: true; tree: true; ast: true };
 	}
+
+	export interface Plotly {
+		kind: { plotly: true };
+		data: Partial<Plotly.Data>[];
+	}
 }
 
 export interface TreeNode<TExtraData> {

data-extraction/src/js/api/default-extractors/PlotlyDataExtractor.ts

@@ -0,0 +1,38 @@
+import { ExtractedData } from "../../../DataExtractionResult";
+import {
+	DataExtractor,
+	ExtractionCollector,
+	DataExtractorContext,
+} from "../DataExtractorApi";
+import { CommonDataTypes } from "../../../CommonDataTypes";
+
+export class PlotDataExtractor implements DataExtractor<ExtractedData> {
+	readonly id = "plot";
+
+	getExtractions(
+		data: unknown,
+		collector: ExtractionCollector<ExtractedData>,
+		context: DataExtractorContext
+	): void {
+		if (!Array.isArray(data)) {
+			return;
+		}
+		if (data.some(x => typeof x !== "number")) {
+			return;
+		}
+
+		collector.addExtraction({
+			id: "plot-y",
+			name: "Plot as y-Values",
+			priority: 1001,
+			extractData() {
+				return {
+					kind: {
+						plotly: true,
+					},
+					data: [{ y: data }],
+				} as CommonDataTypes.Plotly;
+			},
+		});
+	}
+}

data-extraction/src/js/api/default-extractors/registerDefaultDataExtractors.ts

@@ -3,6 +3,7 @@ import { TypeScriptAstDataExtractor } from "./TypeScriptDataExtractors";
 import { AsIsDataExtractor } from "./AsIsDataExtractor";
 import { GetDebugVisualizationDataExtractor } from "./GetDebugVisualizationDataExtractor";
 import { ToStringDataExtractor } from "./ToStringExtractor";
+import { PlotDataExtractor } from "./PlotlyDataExtractor";
 
 /**
  * The default data extractors should be registered by VS Code automatically.
@@ -14,6 +15,7 @@ export function registerDefaultDataExtractors(api: DataExtractorApi) {
 		new AsIsDataExtractor(),
 		new GetDebugVisualizationDataExtractor(),
 		new ToStringDataExtractor(),
+		new PlotDataExtractor(),
 	]) {
 		api.registerExtractor(item);
 	}

extension/ui/package.json

@@ -21,9 +21,13 @@
 		"viz.js": "^2.1.2",
 		"line-column": "^1.0.2",
 		"vis-network": "^7.3.4",
-		"vis-data": "^6.3.5"
+		"vis-data": "^6.3.5",
+		"react-plotly.js": "^2.4.0",
+		"plotly.js": "^1.52.2"
 	},
 	"devDependencies": {
+		"@types/plotly.js": "^1.44.28",
+		"@types/react-plotly.js": "^2.2.4",
 		"@types/html-webpack-plugin": "^3.2.2",
 		"@types/react-measure": "^2.0.6",
 		"@types/react-svg-pan-zoom": "^3.3.0",

extension/ui/src/Visualizers/PlotlyVisualizer.tsx

@@ -0,0 +1,46 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import {
+	VisualizationProvider,
+	VisualizationCollector,
+	asVisualizationId,
+} from "./Visualizer";
+import {
+	ExtractedData,
+	isCommonDataType,
+} from "@hediet/debug-visualizer-data-extraction";
+import Plot from "react-plotly.js";
+
+export class PlotlyVisualizer extends VisualizationProvider {
+	getVisualizations(
+		data: ExtractedData,
+		collector: VisualizationCollector
+	): void {
+		if (isCommonDataType(data, { plotly: true })) {
+			collector.addVisualization({
+				id: asVisualizationId("plotly"),
+				name: "plotly",
+				priority: 1001,
+				render() {
+					return <PlotlyViewer data={data.data} />;
+				},
+			});
+		}
+	}
+}
+
+@observer
+export class PlotlyViewer extends React.Component<{
+	data: Partial<Plotly.Data>[];
+}> {
+	render() {
+		return (
+			<Plot
+				style={{ width: "100%" }}
+				data={this.props.data}
+				layout={{}}
+				config={{ responsive: true }}
+			/>
+		);
+	}
+}

extension/ui/src/Visualizers/index.ts

@@ -8,6 +8,7 @@ import { TextVisualizer } from "./TextVisualizer/TextVisualizer";
 import { MonacoTextVisualizer } from "./TextVisualizer/MonacoTextVisualizer";
 import { AstVisualizer } from "./AstViewer";
 import { VisJsGraphVisualizer } from "./GraphVisualizer/VisJsGraphVisualizer";
+import { PlotlyVisualizer } from "./PlotlyVisualizer";
 
 export const knownVisualizations = new ComposedVisualizationProvider([
 	new TreeVisualizer(),
@@ -18,4 +19,5 @@ export const knownVisualizations = new ComposedVisualizationProvider([
 	new TextVisualizer(),
 	new MonacoTextVisualizer(),
 	new AstVisualizer(),
+	new PlotlyVisualizer(),
 ]);