Adds support for pwa-node and adds a poll option.

webview/package.json

@@ -19,7 +19,8 @@
 		"react": "^16.12.0",
 		"react-dom": "^16.12.0",
 		"react-measure": "^2.3.0",
-		"@hediet/debug-visualizer-data-extraction": "*"
+		"@hediet/debug-visualizer-data-extraction": "*",
+		"@knuddels/mobx-logger": "^1.1.1"
 	},
 	"devDependencies": {
 		"@types/html-webpack-plugin": "^3.2.2",

webview/src/components/GUI.tsx

@@ -103,19 +103,20 @@ export class VisualizerHeaderMain extends React.Component<{ model: Model }> {
 					<ExpressionInput model={m} />
 				</div>
 				<div style={{ width: 4 }} />
-				{m.loading ? (
-					<div style={{ padding: "0 4px" }}>
-						<Spinner size={Spinner.SIZE_SMALL} />
-					</div>
-				) : (
-					<Button
-						minimal
-						small
-						className="part-Icon"
-						icon="refresh"
-						onClick={() => m.refresh()}
-					/>
-				)}
+				{!m.isPolling &&
+					(m.loading ? (
+						<div style={{ padding: "0 4px" }}>
+							<Spinner size={Spinner.SIZE_SMALL} />
+						</div>
+					) : (
+						<Button
+							minimal
+							small
+							className="part-Icon"
+							icon="refresh"
+							onClick={() => m.refresh()}
+						/>
+					))}
 				<Button
 					minimal
 					small

webview/src/components/VisualizerHeaderDetails.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Popover } from "@blueprintjs/core";
+import { Popover, Checkbox } from "@blueprintjs/core";
 import { DataExtractorInfo } from "@hediet/debug-visualizer-data-extraction";
 import { computed } from "mobx";
 import { observer } from "mobx-react";
@@ -80,6 +80,12 @@ export class VisualizerHeaderDetails extends React.Component<{ model: Model }> {
 							: []
 					}
 				/>
+				<div style={{ width: 10 }} />
+				<Checkbox
+					label="Poll"
+					checked={m.isPolling}
+					onChange={e => m.setPolling(e.currentTarget.checked)}
+				/>
 			</div>
 		);
 	}

webview/src/index.tsx

@@ -3,6 +3,7 @@ import * as ReactDOM from "react-dom";
 import "./style.scss";
 import { Model } from "./model/Model";
 import Components = require("./components/GUI");
+import * as mobx from "mobx";
 
 const model = new Model();
 

webview/src/model/Model.ts

@@ -17,7 +17,7 @@ import {
 import { getApi as getVsCodeApi } from "./VsCodeApi";
 import { MonacoBridge } from "./MonacoBridge";
 import { Disposable } from "@hediet/std/disposable";
-import { startInterval } from "@hediet/std/timer";
+import { startInterval, EventTimer } from "@hediet/std/timer";
 
 declare const window: Window & {
 	webViewData?: {
@@ -55,6 +55,11 @@ export class Model {
 		| VisualizationId
 		| undefined = undefined;
 
+	@observable isPolling = false;
+	private readonly pollingTimer = this.dispose.track(
+		new EventTimer(500, "stopped")
+	);
+
 	@action
 	public setPreferredVisualizationId(id: VisualizationId) {
 		this.preferredVisualizationId = id;
@@ -65,6 +70,16 @@ export class Model {
 		this.state = { kind: "visualizationError", data: data };
 	}
 
+	@action
+	public setPolling(value: boolean) {
+		this.isPolling = value;
+		if (value) {
+			this.pollingTimer.start();
+		} else {
+			this.pollingTimer.stop();
+		}
+	}
+
 	@computed get visualizations():
 		| {
 				visualization: Visualization | undefined;
@@ -163,6 +178,10 @@ export class Model {
 				this.setExpression(state.expression);
 			}
 		});
+
+		this.pollingTimer.onTick.sub(() => {
+			this.refresh();
+		});
 	}
 
 	@action

webview/webpack.config.ts

@@ -32,6 +32,14 @@ module.exports = {
 		path: r("dist"),
 		filename: "[name].js",
 		chunkFilename: "[name]-[hash].js",
+		devtoolModuleFilenameTemplate: info => {
+			let result = info.absoluteResourcePath.replace(/\\/g, "/");
+			if (!result.startsWith("file:")) {
+				// Some paths already start with the file scheme.
+				result = "file:///" + result;
+			}
+			return result;
+		},
 	},
 	resolve: {
 		extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"],