Update

2023-09-07 15:00:50 +02:00
parent d45dfdaa71
commit a9656e1e12
37 changed files with 5502 additions and 3664 deletions
--- a/webview/src/components/GUI.tsx
+++ b/webview/src/components/GUI.tsx
@@ -1,12 +1,12 @@
-import * as React from "react";
 import { Button, Spinner } from "@blueprintjs/core";
-import { observable, action } from "mobx";
+import { action, observable } from "mobx";
 import { observer } from "mobx-react";
+import * as React from "react";
 import { Model } from "../model/Model";
 import { ExpressionInput } from "./ExpressionInput";
 import { Visualizer } from "./Visualizer";
-import classnames = require("classnames");
 import { VisualizerHeaderDetails } from "./VisualizerHeaderDetails";
+import classnames = require("classnames");

@observer
 export class GUI extends React.Component<{ model: Model }> {
@@ -25,10 +25,7 @@ export class GUI extends React.Component<{ model: Model }> {
 				<div className="part-Header">
 					<VisualizerHeader model={m} />
 				</div>
-				<div
-					className="part-Visualizer"
-					style={{ flex: 1, minHeight: 0 }}
-				>
+				<div className="part-Visualizer" style={{ flex: 1, minHeight: 0 }}>
 					<Visualizer model={m} />
 				</div>
 			</div>
@@ -43,15 +40,9 @@ export class VisualizerHeader extends React.Component<{ model: Model }> {
 	render() {
 		const m = this.props.model;
 		return (
-			<div
-				className="component-VisualizerHeader"
-				style={{ display: "flex", flexDirection: "row" }}
-			>
+			<div className="component-VisualizerHeader" style={{ display: "flex", flexDirection: "row" }}>
 				<div
-					className={classnames(
-						"part-ExpandButton",
-						this.expanded && "expanded"
-					)}
+					className={classnames("part-ExpandButton", this.expanded && "expanded")}
 					onClick={this.toggleExpanded}
 				/>
 				<div
@@ -96,10 +87,7 @@ export class VisualizerHeaderMain extends React.Component<{ model: Model }> {
 					alignItems: "center",
 				}}
 			>
-				<div
-					className="part-ExpressionInput "
-					style={{ flex: 1, minWidth: 0 }}
-				>
+				<div className="part-ExpressionInput " style={{ flex: 1, minWidth: 0 }}>
 					<ExpressionInput model={m} />
 				</div>
 				<div style={{ width: 4 }} />
@@ -109,21 +97,9 @@ export class VisualizerHeaderMain extends React.Component<{ model: Model }> {
 							<Spinner size={Spinner.SIZE_SMALL} />
 						</div>
 					) : (
-						<Button
-							minimal
-							small
-							className="part-Icon"
-							icon="refresh"
-							onClick={() => m.refresh()}
-						/>
+						<Button minimal small className="part-Icon" icon="refresh" onClick={() => m.refresh()} />
 					))}
-				<Button
-					minimal
-					small
-					className="part-Icon"
-					icon="log-in"
-					onClick={() => m.openBrowser()}
-				/>
+				<Button minimal small className="part-Icon" icon="log-in" onClick={() => m.openBrowser()} />
 				{/*
 					TODO
 					<Button
--- a/webview/src/index.tsx
+++ b/webview/src/index.tsx
@@ -1,8 +1,8 @@
+import * as monaco from "monaco-editor";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import "./style.scss";
 import { App } from "./components/App";
-import * as monaco from "monaco-editor";
+import "./style.scss";

 (globalThis as any).monaco = monaco;

--- a/webview/src/model/Model.ts
+++ b/webview/src/model/Model.ts
@@ -1,37 +1,27 @@
-import {
-	webviewContract,
-	DataExtractionState,
-	WindowWithWebviewData,
-	WebviewUrlParams,
-} from "debug-visualizer/src/webviewContract";
-import { WebSocketStream } from "@hediet/typed-json-rpc-websocket";
+import { DataExtractorId, VisualizationData } from "@hediet/debug-visualizer-data-extraction";
+import { Disposable } from "@hediet/std/disposable";
+import { EventTimer } from "@hediet/std/timer";
 import { ConsoleRpcLogger } from "@hediet/typed-json-rpc";
-import {
-	observable,
-	action,
-	computed,
-	when,
-	runInAction,
-	ObservableMap,
-} from "mobx";
-import {
-	DataExtractorId,
-	VisualizationData,
-} from "@hediet/debug-visualizer-data-extraction";
+import { WebSocketStream } from "@hediet/typed-json-rpc-websocket";
 import "@hediet/visualization-bundle";
 import {
-	globalVisualizationFactory,
-	VisualizationId,
-	Visualization,
 	RegisterVisualizerFn,
-	createVisualizer,
-	libImplementation,
+	Visualization,
 	VisualizationFactory,
+	VisualizationId,
+	createVisualizer,
+	globalVisualizationFactory,
+	libImplementation,
 } from "@hediet/visualization-core";
-import { getApi as getVsCodeApi } from "./VsCodeApi";
+import {
+	DataExtractionState,
+	WebviewUrlParams,
+	WindowWithWebviewData,
+	webviewContract,
+} from "debug-visualizer/src/webviewContract";
+import { ObservableMap, action, computed, observable, runInAction, when } from "mobx";
 import { MonacoBridge } from "./MonacoBridge";
-import { Disposable } from "@hediet/std/disposable";
-import { startInterval, EventTimer } from "@hediet/std/timer";
+import { getApi as getVsCodeApi } from "./VsCodeApi";

 declare const window: Window & WindowWithWebviewData;

@@ -39,8 +29,7 @@ declare let __webpack_public_path__: string;

 export class Model {
 	public readonly dispose = Disposable.fn();
-	public readonly runningMode: "standalone" | "webview" | "webviewIFrame" =
-		"webview";
+	public readonly runningMode: "standalone" | "webview" | "webviewIFrame" = "webview";

 	@observable
 	public theme: "dark" | "light" = "light";
@@ -58,13 +47,10 @@ export class Model {

 	@observable languageId: string = "text";

-	@observable private preferredVisualizationId: VisualizationId | undefined =
-		undefined;
+	@observable private preferredVisualizationId: VisualizationId | undefined = undefined;

 	@observable isPolling = false;
-	private readonly pollingTimer = this.dispose.track(
-		new EventTimer(500, "stopped")
-	);
+	private readonly pollingTimer = this.dispose.track(new EventTimer(500, "stopped"));

 	@action
 	public setPreferredVisualizationId(id: VisualizationId) {
@@ -95,10 +81,7 @@ export class Model {
 		if (this.state.kind === "data") {
 			const vis = visualizerRegistry
 				.get()
-				.getVisualizations(
-					this.state.result.data,
-					this.preferredVisualizationId
-				);
+				.getVisualizations(this.state.result.data, this.preferredVisualizationId);
 			return {
 				visualization: vis.bestVisualization,
 				allVisualizations: vis.allVisualizations,
@@ -109,8 +92,7 @@ export class Model {
 	}

 	@observable.ref
-	public server: typeof webviewContract.TServerInterface | undefined =
-		undefined;
+	public server: typeof webviewContract.TServerInterface | undefined = undefined;

 	private readonly vsCodeApi = getVsCodeApi<{ expression: string }>();

@@ -137,9 +119,7 @@ export class Model {
 			}
 		} else {
 			const url = new URL(window.location.href);
-			const urlParams = Object.fromEntries(
-				url.searchParams.entries()
-			) as unknown as WebviewUrlParams;
+			const urlParams = Object.fromEntries(url.searchParams.entries()) as unknown as WebviewUrlParams;
 			const portStr = urlParams.serverPort;
 			if (!portStr) {
 				throw new Error("No port given.");
@@ -220,29 +200,26 @@ export class Model {
 					host: "localhost",
 					port: this.port,
 				});
-				const { server } = webviewContract.getServerFromStream(
-					stream,
-					new ConsoleRpcLogger(),
-					{
-						updateState: async ({ newState }) => {
-							runInAction(() => {
-								this._loading = newState.kind === "loading";
-								if (!this._loading) {
-									this.state = newState;
-								}
-							});
-						},
-						setExpression: async ({ expression }) => {
-							this.setExpression(expression);
-						},
-						updateLanguageId: async ({ languageId }) => {
-							this.languageId = languageId || "text";
-						},
-						setTheme: async ({ theme }) => {
-							this.theme = theme;
-						},
-						setCustomVisualizerScript: async ({ id, jsSource }) => {
-							eval(`
+				const { server } = webviewContract.getServerFromStream(stream, new ConsoleRpcLogger(), {
+					updateState: async ({ newState }) => {
+						runInAction(() => {
+							this._loading = newState.kind === "loading";
+							if (!this._loading) {
+								this.state = newState;
+							}
+						});
+					},
+					setExpression: async ({ expression }) => {
+						this.setExpression(expression);
+					},
+					updateLanguageId: async ({ languageId }) => {
+						this.languageId = languageId || "text";
+					},
+					setTheme: async ({ theme }) => {
+						this.theme = theme;
+					},
+					setCustomVisualizerScript: async ({ id, jsSource }) => {
+						eval(`
 								((load) => {
 									let fn = undefined;
 									if (load) {
@@ -255,9 +232,8 @@ export class Model {
 									${jsSource ? `function (module) { ${jsSource} }` : "undefined"}
 								)
 							`);
-						},
-					}
-				);
+					},
+				});
 				try {
 					await server.authenticate({ secret: this.serverSecret });
 				} catch (e) {
@@ -291,18 +267,12 @@ const visualizerRegistry = computed(() => {
 		result.addHiddenVisualizer(visualization);
 	}
 	fns.forEach((fn) => {
-		fn(
-			(options) => result.addVisualizer(createVisualizer(options)),
-			libImplementation
-		);
+		fn((options) => result.addVisualizer(createVisualizer(options)), libImplementation);
 	});
 	return result;
 });

-function setVisualizationModule(
-	id: string,
-	moduleFn: RegisterVisualizerFn | undefined
-) {
+function setVisualizationModule(id: string, moduleFn: RegisterVisualizerFn | undefined) {
 	if (moduleFn) {
 		fns.set(id, moduleFn);
 	} else {