diff --git a/.vscode/settings.json b/.vscode/settings.json index 498cdea..3d60ab1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,5 +4,6 @@ }, "plantuml.diagramsRoot": "docs", "plantuml.exportFormat": "png", - "plantuml.exportOutDir": "docs/exported" + "plantuml.exportOutDir": "docs/exported", + "typescript.updateImportsOnFileMove.enabled": "prompt" } diff --git a/package.json b/package.json index 0afa6a6..e423af3 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,8 @@ "workspaces": [ "./data-extraction", "./extension", - "./webview" + "./webview", + "./visualization" ], "scripts": { "build": "yarn build-data-extraction && yarn build-extension && yarn build-ui", diff --git a/visualization/package.json b/visualization/package.json new file mode 100644 index 0000000..cc21bb3 --- /dev/null +++ b/visualization/package.json @@ -0,0 +1,56 @@ +{ + "name": "@hediet/visualization", + "version": "0.0.1", + "scripts": { + "dev": "tsc --watch", + "build": "tsc" + }, + "main": "./dist/index.js", + "types": "./dist/index.d.ts", + "dependencies": { + "@hediet/std": "^0.6.0", + "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", + "viz.js": "^2.1.2", + "line-column": "^1.0.2", + "vis-network": "^7.3.6", + "vis-data": "^6.4.1", + "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", + "@types/webpack": "^4.41.6", + "@types/classnames": "^2.2.9", + "@types/react": "^16.9.22", + "@types/react-dom": "^16.9.5", + "@types/line-column": "^1.0.0", + "clean-webpack-plugin": "^3.0.0", + "css-loader": "^3.4.2", + "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", + "node-sass": "^4.13.1", + "raw-loader": "^4.0.0", + "sass": "^1.25.0", + "sass-loader": "^8.0.2", + "style-loader": "^1.1.3", + "ts-loader": "^6.2.1", + "ts-node": "^8.6.2", + "typescript": "^3.8.2", + "webpack": "^4.41.6", + "webpack-cli": "^3.3.11", + "webpack-dev-server": "^3.10.3" + } +} diff --git a/visualization/src/LazyLoadable.tsx b/visualization/src/LazyLoadable.tsx new file mode 100644 index 0000000..a8dcd37 --- /dev/null +++ b/visualization/src/LazyLoadable.tsx @@ -0,0 +1,30 @@ +import * as React from "react"; +import { observable, runInAction } from "mobx"; +import { observer } from "mobx-react"; + +export function makeLazyLoadable( + selector: () => Promise> +): React.ComponentClass { + @observer + class MyComponent extends React.Component { + @observable + component: React.ComponentClass | undefined; + + async componentDidMount() { + const result = await selector(); + runInAction("Set Lazily Loaded Component", () => { + this.component = result; + }); + } + + render() { + if (!this.component) { + return
Loading...
; + } + const C = this.component; + return ; + } + } + + return MyComponent; +} diff --git a/webview/src/visualizers/Visualizer.ts b/visualization/src/Visualizer.ts similarity index 78% rename from webview/src/visualizers/Visualizer.ts rename to visualization/src/Visualizer.ts index e3472d1..5ff5197 100644 --- a/webview/src/visualizers/Visualizer.ts +++ b/visualization/src/Visualizer.ts @@ -19,15 +19,15 @@ export interface VisualizationCollector { addVisualization(visualization: Visualization): void; } -export abstract class VisualizationProvider { - abstract getVisualizations( +export abstract class Visualizer { + abstract visualize( data: ExtractedData, collector: VisualizationCollector ): void; getVisualizationsArray(data: ExtractedData): Visualization[] { const result = new Array(); - this.getVisualizations(data, { + this.visualize(data, { addVisualization(visualization) { result.push(visualization); }, @@ -58,19 +58,14 @@ export abstract class VisualizationProvider { } } -export class ComposedVisualizationProvider extends VisualizationProvider { - constructor( - private readonly composedProviders: ReadonlyArray - ) { +export class ComposedVisualizer extends Visualizer { + constructor(private readonly composedProviders: ReadonlyArray) { super(); } - getVisualizations( - data: ExtractedData, - collector: VisualizationCollector - ): void { + visualize(data: ExtractedData, collector: VisualizationCollector): void { for (const c of this.composedProviders) { - c.getVisualizations(data, collector); + c.visualize(data, collector); } } } diff --git a/visualization/src/VisualizerView.tsx b/visualization/src/VisualizerView.tsx new file mode 100644 index 0000000..364bcf3 --- /dev/null +++ b/visualization/src/VisualizerView.tsx @@ -0,0 +1,7 @@ +import * as React from "react"; + +export class VisualizerView extends React.Component { + render(): React.ReactNode { + return null; + } +} diff --git a/visualization/src/index.ts b/visualization/src/index.ts new file mode 100644 index 0000000..686036d --- /dev/null +++ b/visualization/src/index.ts @@ -0,0 +1,3 @@ +export * from "./visualizers"; +export * from "./Visualizer"; +export * from "./VisualizerView"; diff --git a/webview/src/visualizers/types.d.ts b/visualization/src/types.d.ts similarity index 100% rename from webview/src/visualizers/types.d.ts rename to visualization/src/types.d.ts diff --git a/webview/src/components/Point.ts b/visualization/src/utils/Point.ts similarity index 100% rename from webview/src/components/Point.ts rename to visualization/src/utils/Point.ts diff --git a/webview/src/components/SvgElements.tsx b/visualization/src/utils/SvgElements.tsx similarity index 100% rename from webview/src/components/SvgElements.tsx rename to visualization/src/utils/SvgElements.tsx diff --git a/webview/src/visualizers/AstVisualizer.tsx b/visualization/src/visualizers/AstVisualizer.tsx similarity index 94% rename from webview/src/visualizers/AstVisualizer.tsx rename to visualization/src/visualizers/AstVisualizer.tsx index 68eb11c..93b8c2a 100644 --- a/webview/src/visualizers/AstVisualizer.tsx +++ b/visualization/src/visualizers/AstVisualizer.tsx @@ -1,8 +1,8 @@ import { - VisualizationProvider, + Visualizer, VisualizationCollector, asVisualizationId, -} from "./Visualizer"; +} from "../Visualizer"; import { ExtractedData, isCommonDataType, @@ -10,18 +10,15 @@ import { } from "@hediet/debug-visualizer-data-extraction"; import { createTreeViewModelFromTreeNodeData } from "./TreeVisualizer/TreeVisualizer"; import { TreeWithPathView, TreeViewModel } from "./TreeVisualizer/Views"; -import React = require("react"); +import * as React from "react"; import { observer, disposeOnUnmount } from "mobx-react"; import { observable, autorun, trace } from "mobx"; import * as monaco from "monaco-editor"; import { getLanguageId } from "./text-visualizers/MonacoTextVisualizer"; -import LineColumn = require("line-column"); +import * as LineColumn from "line-column"; -export class AstVisualizer extends VisualizationProvider { - getVisualizations( - data: ExtractedData, - collector: VisualizationCollector - ): void { +export class AstVisualizer extends Visualizer { + visualize(data: ExtractedData, collector: VisualizationCollector): void { if (isCommonDataType(data, { ast: true })) { collector.addVisualization({ id: asVisualizationId("ast"), diff --git a/webview/src/visualizers/GridVisualizer.tsx b/visualization/src/visualizers/GridVisualizer.tsx similarity index 97% rename from webview/src/visualizers/GridVisualizer.tsx rename to visualization/src/visualizers/GridVisualizer.tsx index e7b05e0..7e39603 100644 --- a/webview/src/visualizers/GridVisualizer.tsx +++ b/visualization/src/visualizers/GridVisualizer.tsx @@ -1,23 +1,20 @@ import { - VisualizationProvider, + Visualizer, VisualizationCollector, asVisualizationId, -} from "./Visualizer"; +} from "../Visualizer"; import { ExtractedData, isCommonDataType, CommonDataTypes, } from "@hediet/debug-visualizer-data-extraction"; -import React = require("react"); +import * as React from "react"; import { observer } from "mobx-react"; import { computed, action, observable } from "mobx"; import { Icon } from "@blueprintjs/core"; -export class GridVisualizer extends VisualizationProvider { - getVisualizations( - data: ExtractedData, - collector: VisualizationCollector - ): void { +export class GridVisualizer extends Visualizer { + visualize(data: ExtractedData, collector: VisualizationCollector): void { if (isCommonDataType(data, { array: true })) { collector.addVisualization({ id: asVisualizationId("grid"), diff --git a/webview/src/visualizers/SvgVisualizer.tsx b/visualization/src/visualizers/SvgVisualizer.tsx similarity index 91% rename from webview/src/visualizers/SvgVisualizer.tsx rename to visualization/src/visualizers/SvgVisualizer.tsx index c78c5a4..bc0cc8a 100644 --- a/webview/src/visualizers/SvgVisualizer.tsx +++ b/visualization/src/visualizers/SvgVisualizer.tsx @@ -1,23 +1,20 @@ import Measure, { ContentRect } from "react-measure"; import { observer } from "mobx-react"; -import React = require("react"); +import * as React from "react"; import { observable, action } from "mobx"; import { Tool, ReactSVGPanZoom, Value } from "react-svg-pan-zoom"; import { - VisualizationProvider, + Visualizer, VisualizationCollector, asVisualizationId, -} from "./Visualizer"; +} from "../Visualizer"; import { ExtractedData, isCommonDataType, } from "@hediet/debug-visualizer-data-extraction"; -export class SvgVisualizer extends VisualizationProvider { - getVisualizations( - data: ExtractedData, - collector: VisualizationCollector - ): void { +export class SvgVisualizer extends Visualizer { + visualize(data: ExtractedData, collector: VisualizationCollector): void { if (isCommonDataType(data, { svg: true })) { collector.addVisualization({ id: asVisualizationId("svg"), diff --git a/webview/src/visualizers/TreeVisualizer/TreeVisualizer.tsx b/visualization/src/visualizers/TreeVisualizer/TreeVisualizer.tsx similarity index 84% rename from webview/src/visualizers/TreeVisualizer/TreeVisualizer.tsx rename to visualization/src/visualizers/TreeVisualizer/TreeVisualizer.tsx index 42726de..42eff0b 100644 --- a/webview/src/visualizers/TreeVisualizer/TreeVisualizer.tsx +++ b/visualization/src/visualizers/TreeVisualizer/TreeVisualizer.tsx @@ -10,17 +10,14 @@ import { TreeNode, } from "@hediet/debug-visualizer-data-extraction"; import { - VisualizationProvider, + Visualizer, VisualizationCollector, asVisualizationId, -} from "../Visualizer"; -import React = require("react"); +} from "../../Visualizer"; +import * as React from "react"; -export class TreeVisualizer extends VisualizationProvider { - getVisualizations( - data: ExtractedData, - collector: VisualizationCollector - ): void { +export class TreeVisualizer extends Visualizer { + visualize(data: ExtractedData, collector: VisualizationCollector): void { if (isCommonDataType(data, { tree: true })) { collector.addVisualization({ id: asVisualizationId("tree"), diff --git a/webview/src/visualizers/TreeVisualizer/Views.tsx b/visualization/src/visualizers/TreeVisualizer/Views.tsx similarity index 98% rename from webview/src/visualizers/TreeVisualizer/Views.tsx rename to visualization/src/visualizers/TreeVisualizer/Views.tsx index b2e6247..6435073 100644 --- a/webview/src/visualizers/TreeVisualizer/Views.tsx +++ b/visualization/src/visualizers/TreeVisualizer/Views.tsx @@ -1,10 +1,10 @@ import { observer, disposeOnUnmount } from "mobx-react"; import { observable, autorun, computed, action, runInAction } from "mobx"; -import React = require("react"); -import classNames = require("classnames"); -import { Rectangle, Point } from "../../components/Point"; -import { SvgLine } from "../../components/SvgElements"; -import "./style.scss"; +import * as React from "react"; +import * as classNames from "classnames"; +import { Rectangle, Point } from "../../utils/Point"; +import { SvgLine } from "../../utils/SvgElements"; +// import "./style.scss"; export class TreeViewModel { private started = true; diff --git a/webview/src/visualizers/TreeVisualizer/style.scss b/visualization/src/visualizers/TreeVisualizer/style.scss similarity index 100% rename from webview/src/visualizers/TreeVisualizer/style.scss rename to visualization/src/visualizers/TreeVisualizer/style.scss diff --git a/webview/src/visualizers/graph-visualizers/GraphvizDotVisualizer.tsx b/visualization/src/visualizers/graph-visualizers/GraphvizDotVisualizer.tsx similarity index 65% rename from webview/src/visualizers/graph-visualizers/GraphvizDotVisualizer.tsx rename to visualization/src/visualizers/graph-visualizers/GraphvizDotVisualizer.tsx index 49cb1fb..355bfc4 100644 --- a/webview/src/visualizers/graph-visualizers/GraphvizDotVisualizer.tsx +++ b/visualization/src/visualizers/graph-visualizers/GraphvizDotVisualizer.tsx @@ -1,29 +1,19 @@ import { observer, disposeOnUnmount } from "mobx-react"; import * as React from "react"; import { observable, autorun, runInAction } from "mobx"; -import Viz from "viz.js"; -import { Module, render } from "viz.js/full.render.js"; import { SvgViewer } from "../SvgVisualizer"; import { - VisualizationProvider, + Visualizer, VisualizationCollector, asVisualizationId, -} from "../Visualizer"; +} from "../../Visualizer"; import { ExtractedData, isCommonDataType, } from "@hediet/debug-visualizer-data-extraction"; -const viz: any = new Viz({ - Module: () => Module({ TOTAL_MEMORY: 1 << 30 }), - render, -}); - -export class GraphvizDotVisualizer extends VisualizationProvider { - getVisualizations( - data: ExtractedData, - collector: VisualizationCollector - ): void { +export class GraphvizDotVisualizer extends Visualizer { + visualize(data: ExtractedData, collector: VisualizationCollector): void { if (isCommonDataType(data, { dotGraph: true })) { collector.addVisualization({ id: asVisualizationId("graphviz-dot"), @@ -37,6 +27,27 @@ export class GraphvizDotVisualizer extends VisualizationProvider { } } +class VisLoader { + private result: any | undefined; + + async getViz(): Promise { + if (!this.result) { + const Viz = await import("viz.js"); + const { Module, render } = await import("viz.js/full.render.js"); + + const viz = new Viz.default({ + Module: () => Module({ TOTAL_MEMORY: 1 << 30 }), + render, + }); + + this.result = viz; + } + return this.result; + } +} + +const vizLoader = new VisLoader(); + @observer export class GraphvizDotViewer extends React.Component<{ dotCode: string; @@ -47,6 +58,7 @@ export class GraphvizDotViewer extends React.Component<{ @disposeOnUnmount // @ts-ignore private readonly _updateSvgAutorun = autorun(async () => { + const viz = await vizLoader.getViz(); const svg = await viz.renderString(this.props.dotCode); runInAction("Update svg", () => (this.svg = svg)); }); diff --git a/webview/src/visualizers/graph-visualizers/GraphvizGraphVisualizer.tsx b/visualization/src/visualizers/graph-visualizers/GraphvizGraphVisualizer.tsx similarity index 86% rename from webview/src/visualizers/graph-visualizers/GraphvizGraphVisualizer.tsx rename to visualization/src/visualizers/graph-visualizers/GraphvizGraphVisualizer.tsx index 8834e1e..770567f 100644 --- a/webview/src/visualizers/graph-visualizers/GraphvizGraphVisualizer.tsx +++ b/visualization/src/visualizers/graph-visualizers/GraphvizGraphVisualizer.tsx @@ -2,20 +2,17 @@ import { observer } from "mobx-react"; import * as React from "react"; import { GraphvizDotViewer } from "./GraphvizDotVisualizer"; import { - VisualizationProvider, + Visualizer, VisualizationCollector, asVisualizationId, -} from "../Visualizer"; +} from "../../Visualizer"; import { ExtractedData, isCommonDataType, } from "@hediet/debug-visualizer-data-extraction"; -export class GraphvizGraphVisualizer extends VisualizationProvider { - getVisualizations( - data: ExtractedData, - collector: VisualizationCollector - ): void { +export class GraphvizGraphVisualizer extends Visualizer { + visualize(data: ExtractedData, collector: VisualizationCollector): void { if (isCommonDataType(data, { graph: true })) { collector.addVisualization({ id: asVisualizationId("graphviz-graph"), diff --git a/webview/src/visualizers/graph-visualizers/VisJsGraphVisualizer.tsx b/visualization/src/visualizers/graph-visualizers/VisJsGraphViewer.tsx similarity index 77% rename from webview/src/visualizers/graph-visualizers/VisJsGraphVisualizer.tsx rename to visualization/src/visualizers/graph-visualizers/VisJsGraphViewer.tsx index 910273c..e689b93 100644 --- a/webview/src/visualizers/graph-visualizers/VisJsGraphVisualizer.tsx +++ b/visualization/src/visualizers/graph-visualizers/VisJsGraphViewer.tsx @@ -1,40 +1,10 @@ +import { DataSet, Network, Options } from "vis-network"; import { observer } from "mobx-react"; import * as React from "react"; import { - VisualizationProvider, - VisualizationCollector, - asVisualizationId, -} from "../Visualizer"; -import { - ExtractedData, - isCommonDataType, NodeGraphData, EdgeGraphData, } from "@hediet/debug-visualizer-data-extraction"; -import { DataSet, Network, Options } from "vis-network"; - -export class VisJsGraphVisualizer extends VisualizationProvider { - getVisualizations( - data: ExtractedData, - collector: VisualizationCollector - ): void { - if (isCommonDataType(data, { graph: true })) { - collector.addVisualization({ - id: asVisualizationId("vis-js-graph"), - name: "vis.js", - priority: 1001, - render() { - return ( - - ); - }, - }); - } - } -} @observer export class VisJsGraphViewer extends React.Component<{ diff --git a/visualization/src/visualizers/graph-visualizers/VisJsGraphVisualizer.tsx b/visualization/src/visualizers/graph-visualizers/VisJsGraphVisualizer.tsx new file mode 100644 index 0000000..0121d53 --- /dev/null +++ b/visualization/src/visualizers/graph-visualizers/VisJsGraphVisualizer.tsx @@ -0,0 +1,36 @@ +import * as React from "react"; +import { + Visualizer, + VisualizationCollector, + asVisualizationId, +} from "../../Visualizer"; +import { + ExtractedData, + isCommonDataType, +} from "@hediet/debug-visualizer-data-extraction"; +import { makeLazyLoadable } from "../../LazyLoadable"; +// import { DataSet, Network, Options } from "vis-network"; + +const VisJsGraphViewerLazyLoadable = makeLazyLoadable( + async () => (await import("./VisJsGraphViewer")).VisJsGraphViewer +); + +export class VisJsGraphVisualizer extends Visualizer { + visualize(data: ExtractedData, collector: VisualizationCollector): void { + if (isCommonDataType(data, { graph: true })) { + collector.addVisualization({ + id: asVisualizationId("vis-js-graph"), + name: "vis.js", + priority: 1001, + render() { + return ( + + ); + }, + }); + } + } +} diff --git a/webview/src/visualizers/index.ts b/visualization/src/visualizers/index.ts similarity index 80% rename from webview/src/visualizers/index.ts rename to visualization/src/visualizers/index.ts index 8df895f..5a391ba 100644 --- a/webview/src/visualizers/index.ts +++ b/visualization/src/visualizers/index.ts @@ -1,5 +1,5 @@ -import "./style.scss"; -import { ComposedVisualizationProvider } from "./Visualizer"; +// import "./style.scss"; +import { ComposedVisualizer } from "../Visualizer"; import { TreeVisualizer } from "./TreeVisualizer/TreeVisualizer"; import { GraphvizGraphVisualizer } from "./graph-visualizers/GraphvizGraphVisualizer"; import { SvgVisualizer } from "./SvgVisualizer"; @@ -8,10 +8,10 @@ import { TextVisualizer } from "./text-visualizers/TextVisualizer"; import { MonacoTextVisualizer } from "./text-visualizers/MonacoTextVisualizer"; import { AstVisualizer } from "./AstVisualizer"; import { VisJsGraphVisualizer } from "./graph-visualizers/VisJsGraphVisualizer"; -import { PlotlyVisualizer } from "./PlotlyVisualizer"; +import { PlotlyVisualizer } from "./plotly"; import { GridVisualizer } from "./GridVisualizer"; -export const knownVisualizations = new ComposedVisualizationProvider([ +export const knownVisualizations = new ComposedVisualizer([ new TreeVisualizer(), new GraphvizGraphVisualizer(), new VisJsGraphVisualizer(), diff --git a/visualization/src/visualizers/plotly/PlotlyViewer.tsx b/visualization/src/visualizers/plotly/PlotlyViewer.tsx new file mode 100644 index 0000000..1691592 --- /dev/null +++ b/visualization/src/visualizers/plotly/PlotlyViewer.tsx @@ -0,0 +1,19 @@ +import { observer } from "mobx-react"; +import * as React from "react"; +import Plot from "react-plotly.js"; + +@observer +export class PlotlyViewer extends React.Component<{ + data: Partial[]; +}> { + render() { + return ( + + ); + } +} diff --git a/visualization/src/visualizers/plotly/index.tsx b/visualization/src/visualizers/plotly/index.tsx new file mode 100644 index 0000000..97d1718 --- /dev/null +++ b/visualization/src/visualizers/plotly/index.tsx @@ -0,0 +1,30 @@ +import * as React from "react"; +import { + Visualizer, + VisualizationCollector, + asVisualizationId, +} from "../../Visualizer"; +import { + ExtractedData, + isCommonDataType, +} from "@hediet/debug-visualizer-data-extraction"; +import { makeLazyLoadable } from "../../LazyLoadable"; + +const PlotlyViewerLazyLoadable = makeLazyLoadable( + async () => (await import("./PlotlyViewer")).PlotlyViewer +); + +export class PlotlyVisualizer extends Visualizer { + visualize(data: ExtractedData, collector: VisualizationCollector): void { + if (isCommonDataType(data, { plotly: true })) { + collector.addVisualization({ + id: asVisualizationId("plotly"), + name: "plotly", + priority: 1001, + render() { + return ; + }, + }); + } + } +} diff --git a/webview/src/visualizers/style.scss b/visualization/src/visualizers/style.scss similarity index 100% rename from webview/src/visualizers/style.scss rename to visualization/src/visualizers/style.scss diff --git a/webview/src/visualizers/text-visualizers/MonacoTextVisualizer.tsx b/visualization/src/visualizers/text-visualizers/MonacoTextVisualizer.tsx similarity index 91% rename from webview/src/visualizers/text-visualizers/MonacoTextVisualizer.tsx rename to visualization/src/visualizers/text-visualizers/MonacoTextVisualizer.tsx index feb4f9f..8d5187f 100644 --- a/webview/src/visualizers/text-visualizers/MonacoTextVisualizer.tsx +++ b/visualization/src/visualizers/text-visualizers/MonacoTextVisualizer.tsx @@ -1,22 +1,19 @@ import { - VisualizationProvider, + Visualizer, VisualizationCollector, asVisualizationId, -} from "../Visualizer"; +} from "../../Visualizer"; import { ExtractedData, isCommonDataType, } from "@hediet/debug-visualizer-data-extraction"; import * as monaco from "monaco-editor"; -import React = require("react"); +import * as React from "react"; import { observer, disposeOnUnmount } from "mobx-react"; import { autorun, observable } from "mobx"; -export class MonacoTextVisualizer extends VisualizationProvider { - getVisualizations( - data: ExtractedData, - collector: VisualizationCollector - ): void { +export class MonacoTextVisualizer extends Visualizer { + visualize(data: ExtractedData, collector: VisualizationCollector): void { if (isCommonDataType(data, { text: true })) { collector.addVisualization({ id: asVisualizationId("monaco-text"), diff --git a/webview/src/visualizers/text-visualizers/TextVisualizer.tsx b/visualization/src/visualizers/text-visualizers/TextVisualizer.tsx similarity index 66% rename from webview/src/visualizers/text-visualizers/TextVisualizer.tsx rename to visualization/src/visualizers/text-visualizers/TextVisualizer.tsx index ebc283e..6be380b 100644 --- a/webview/src/visualizers/text-visualizers/TextVisualizer.tsx +++ b/visualization/src/visualizers/text-visualizers/TextVisualizer.tsx @@ -1,19 +1,16 @@ import { - VisualizationProvider, + Visualizer, VisualizationCollector, asVisualizationId, -} from "../Visualizer"; +} from "../../Visualizer"; import { ExtractedData, isCommonDataType, } from "@hediet/debug-visualizer-data-extraction"; -import React = require("react"); +import * as React from "react"; -export class TextVisualizer extends VisualizationProvider { - getVisualizations( - data: ExtractedData, - collector: VisualizationCollector - ): void { +export class TextVisualizer extends Visualizer { + visualize(data: ExtractedData, collector: VisualizationCollector): void { if (isCommonDataType(data, { text: true })) { collector.addVisualization({ id: asVisualizationId("text"), diff --git a/visualization/style.scss b/visualization/style.scss new file mode 100644 index 0000000..0865bb2 --- /dev/null +++ b/visualization/style.scss @@ -0,0 +1,2 @@ +@import "./src/visualizers/style.scss"; +@import "./src/visualizers/TreeVisualizer/style.scss"; diff --git a/visualization/tsconfig.json b/visualization/tsconfig.json new file mode 100644 index 0000000..cdf7844 --- /dev/null +++ b/visualization/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "ES2020", + "module": "es2020", + "moduleResolution": "node", + "strict": true, + "outDir": "dist", + "skipLibCheck": true, + "rootDir": "./src", + "newLine": "LF", + "sourceMap": true, + "jsx": "react", + "experimentalDecorators": true, + "declaration": true, + "declarationMap": true, + "allowSyntheticDefaultImports": true + }, + "include": ["src/**/*"] +} diff --git a/webview/package.json b/webview/package.json index d72a6c5..b4025fa 100644 --- a/webview/package.json +++ b/webview/package.json @@ -19,26 +19,15 @@ "react": "^16.12.0", "react-dom": "^16.12.0", "react-measure": "^2.3.0", - "react-svg-pan-zoom": "^3.8.0", - "viz.js": "^2.1.2", - "line-column": "^1.0.2", - "vis-network": "^7.3.6", - "vis-data": "^6.4.1", - "react-plotly.js": "^2.4.0", - "plotly.js": "^1.52.2", "@hediet/debug-visualizer-data-extraction": "*" }, "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", "@types/webpack": "^4.41.6", "@types/classnames": "^2.2.9", "@types/react": "^16.9.22", "@types/react-dom": "^16.9.5", - "@types/line-column": "^1.0.0", "clean-webpack-plugin": "^3.0.0", "css-loader": "^3.4.2", "file-loader": "^5.1.0", diff --git a/webview/src/components/ExpressionInput.tsx b/webview/src/components/ExpressionInput.tsx index 2a19eeb..eaae29d 100644 --- a/webview/src/components/ExpressionInput.tsx +++ b/webview/src/components/ExpressionInput.tsx @@ -1,4 +1,4 @@ -import React = require("react"); +import * as React from "react"; import { Model } from "../model/Model"; import { observer, disposeOnUnmount } from "mobx-react"; import { observable, action, autorun } from "mobx"; diff --git a/webview/src/components/GUI.tsx b/webview/src/components/GUI.tsx index c761ada..668754d 100644 --- a/webview/src/components/GUI.tsx +++ b/webview/src/components/GUI.tsx @@ -1,4 +1,4 @@ -import React = require("react"); +import * as React from "react"; import { Button, Spinner } from "@blueprintjs/core"; import { observable, action } from "mobx"; import { observer } from "mobx-react"; diff --git a/webview/src/components/NoData.tsx b/webview/src/components/NoData.tsx index 0b2564b..69215bb 100644 --- a/webview/src/components/NoData.tsx +++ b/webview/src/components/NoData.tsx @@ -1,4 +1,4 @@ -import React = require("react"); +import * as React from "react"; import { observer } from "mobx-react"; import { observable } from "mobx"; import Measure from "react-measure"; diff --git a/webview/src/components/Visualizer.tsx b/webview/src/components/Visualizer.tsx index cf590a2..876d897 100644 --- a/webview/src/components/Visualizer.tsx +++ b/webview/src/components/Visualizer.tsx @@ -1,4 +1,4 @@ -import React = require("react"); +import * as React from "react"; import { Model } from "../model/Model"; import { observer } from "mobx-react"; import { NoData } from "./NoData"; diff --git a/webview/src/components/VisualizerHeaderDetails.tsx b/webview/src/components/VisualizerHeaderDetails.tsx index 28dfcc4..ef1ac1f 100644 --- a/webview/src/components/VisualizerHeaderDetails.tsx +++ b/webview/src/components/VisualizerHeaderDetails.tsx @@ -1,10 +1,10 @@ -import React = require("react"); +import * as React from "react"; import { Popover } from "@blueprintjs/core"; import { DataExtractorInfo } from "@hediet/debug-visualizer-data-extraction"; import { computed } from "mobx"; import { observer } from "mobx-react"; import { Model } from "../model/Model"; -import { VisualizationId } from "../visualizers/Visualizer"; +import { VisualizationId } from "@hediet/visualization"; @observer export class VisualizerHeaderDetails extends React.Component<{ model: Model }> { diff --git a/webview/src/model/Model.ts b/webview/src/model/Model.ts index 43ec5dd..d49fbaf 100644 --- a/webview/src/model/Model.ts +++ b/webview/src/model/Model.ts @@ -4,10 +4,13 @@ import { } from "debug-visualizer/src/contract"; import { WebSocketStream } from "@hediet/typed-json-rpc-websocket"; import { ConsoleRpcLogger } from "@hediet/typed-json-rpc"; -import { observable, action, computed, when, autorun } from "mobx"; +import { observable, action, computed, when } from "mobx"; import { DataExtractorId } from "@hediet/debug-visualizer-data-extraction"; -import { Visualization, VisualizationId } from "../visualizers/Visualizer"; -import { knownVisualizations } from "../visualizers"; +import { + Visualization, + VisualizationId, + knownVisualizations, +} from "@hediet/visualization"; import { getApi as getVsCodeApi } from "./VsCodeApi"; import { MonacoBridge } from "./MonacoBridge"; import { Disposable } from "@hediet/std/disposable"; diff --git a/webview/src/playground/index.tsx b/webview/src/playground/index.tsx index 837c3cb..84da608 100644 --- a/webview/src/playground/index.tsx +++ b/webview/src/playground/index.tsx @@ -1,6 +1,6 @@ -import React = require("react"); +import * as React from "react"; import "../style.scss"; -import { DecoratedGridComponent } from "../visualizers/GridVisualizer"; +import { DecoratedGridComponent } from "@hediet/visualization"; import { observable } from "mobx"; import { observer } from "mobx-react"; diff --git a/webview/src/style.scss b/webview/src/style.scss index 00b88e0..50f8381 100644 --- a/webview/src/style.scss +++ b/webview/src/style.scss @@ -1,6 +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"; html, body, diff --git a/webview/src/visualizers/PlotlyVisualizer.tsx b/webview/src/visualizers/PlotlyVisualizer.tsx deleted file mode 100644 index 89cb0fc..0000000 --- a/webview/src/visualizers/PlotlyVisualizer.tsx +++ /dev/null @@ -1,46 +0,0 @@ -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 ; - }, - }); - } - } -} - -@observer -export class PlotlyViewer extends React.Component<{ - data: Partial[]; -}> { - render() { - return ( - - ); - } -}