diff --git a/demo/.vscode/launch.json b/demo/.vscode/launch.json index 6b00a5c..b9cb9b9 100644 --- a/demo/.vscode/launch.json +++ b/demo/.vscode/launch.json @@ -4,6 +4,12 @@ // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md "version": "0.2.0", "configurations": [ + { + "type": "java", + "name": "CodeLens (Launch) - DemoLinkedLists", + "request": "launch", + "mainClass": "DemoLinkedLists" + }, { "type": "node", "request": "launch", @@ -16,7 +22,7 @@ "type": "node", "request": "launch", "name": "TypeScript - Demo: Doubly Linked List", - "program": "${workspaceFolder}/js/dist/demo-doubly-linked-list", + "program": "${workspaceFolder}/js/dist/demo_doubly-linked-list", "skipFiles": ["/**"], "preLaunchTask": "typescript-watch" }, @@ -64,6 +70,15 @@ "xdebugSettings": { "max_data": -1 } + }, + { + "name": "Java - Demo", + "type": "java", + "request": "launch", + "mainClass": "DemoLinkedLists.java", + "classPaths": ["${workspaceFolder}/java/json-simple-1.1.1.jar"], + "sourcePaths": ["${workspaceFolder}/java/"], + "cwd": "${workspaceFolder}/java" } ] } diff --git a/extension/src/ConnectionHandler.ts b/extension/src/ConnectionHandler.ts index d66e69b..4256382 100644 --- a/extension/src/ConnectionHandler.ts +++ b/extension/src/ConnectionHandler.ts @@ -69,6 +69,7 @@ export class ConnectionHandler { throwIfNotAuthenticated(); const url = server.getIndexUrl({ + mode: "standalone", expression: this.watcher ? this.watcher.expression : undefined, diff --git a/extension/src/Server.ts b/extension/src/Server.ts index c8fa347..a7bb61c 100644 --- a/extension/src/Server.ts +++ b/extension/src/Server.ts @@ -34,13 +34,18 @@ export class Server { }); } - public getIndexUrl(args: { expression?: string } = {}): string { + public getIndexUrl(args: { + expression?: string; + mode: "standalone" | "webViewIFrame"; + }): string { const port = process.env.USE_DEV_UI ? 8080 : this.port; const expr = args.expression !== undefined ? `&expression=${encodeURIComponent(args.expression)}` : ""; - return `http://localhost:${port}/index.html?serverPort=${this.port}&serverSecret=${this.secret}${expr}`; + const inWebView = + args.mode === "standalone" ? "" : "&mode=webViewIFrame"; + return `http://localhost:${port}/index.html?serverPort=${this.port}&serverSecret=${this.secret}${inWebView}${expr}`; } public get mainBundleUrl(): string { diff --git a/extension/src/WebViews.ts b/extension/src/WebViews.ts index ab167c2..8c2265d 100644 --- a/extension/src/WebViews.ts +++ b/extension/src/WebViews.ts @@ -71,8 +71,10 @@ export function getHtml(server: Server) { ${ isDev - ? `` + ? `` : `` } diff --git a/extension/ui/src/Components/ExpressionInput.tsx b/extension/ui/src/Components/ExpressionInput.tsx index e7c4723..53420ce 100644 --- a/extension/ui/src/Components/ExpressionInput.tsx +++ b/extension/ui/src/Components/ExpressionInput.tsx @@ -4,26 +4,34 @@ import { observer, disposeOnUnmount } from "mobx-react"; import { observable, action, autorun } from "mobx"; import * as monaco from "monaco-editor"; -export function getModel(): monaco.editor.ITextModel { - return monaco.editor.createModel( - "", - "javascript", - monaco.Uri.parse(`file:///main.ts`) - ); -} - @observer export class ExpressionInput extends React.Component<{ model: Model }> { @observable private editor: monaco.editor.IStandaloneCodeEditor | undefined; @observable private contentHeight: number | undefined = undefined; - private model = getModel(); + private model = monaco.editor.createModel( + "", + "javascript", + monaco.Uri.parse(`file:///main.ts`) + ); render() { return ( -
+
@@ -68,8 +76,11 @@ export class ExpressionInput extends React.Component<{ model: Model }> { horizontalScrollbarSize: 0, verticalScrollbarSize: 0, }, + /*theme: { dark: "vs-dark", light: "vs-light" }[ + this.props.model.theme + ],*/ }); - + // this.editor.onDidContentSizeChange(e => { this.contentHeight = e.contentHeight; }); diff --git a/extension/ui/src/Components/GUI.tsx b/extension/ui/src/Components/GUI.tsx index 91d280d..af71e3a 100644 --- a/extension/ui/src/Components/GUI.tsx +++ b/extension/ui/src/Components/GUI.tsx @@ -1,93 +1,138 @@ import React = require("react"); import { Button, Spinner } from "@blueprintjs/core"; -import { observable } from "mobx"; +import { observable, action } from "mobx"; import { observer } from "mobx-react"; import { Model } from "../Model/Model"; import { ExpressionInput } from "./ExpressionInput"; import { Visualizer } from "./Visualizer"; import classnames = require("classnames"); -import { ExpandedOptions } from "./ExpandedOptions"; +import { VisualizerHeaderDetails } from "./VisualizerHeaderDetails"; @observer export class GUI extends React.Component<{ model: Model }> { - @observable text: string = "node"; - - @observable expanded = false; - render() { const m = this.props.model; return ( -
-
- (this.expanded = v)} - /> -
-
-
- -
-
- {m.loading ? ( -
- -
- ) : ( -
- {this.expanded && } -
+
+
+
-
+
); } +} - renderValue(value: string) { - return
{`${value.length}`}
; +@observer +export class VisualizerHeader extends React.Component<{ model: Model }> { + @observable expanded = false; + + render() { + const m = this.props.model; + return ( +
+
+
+
+ +
+ + {this.expanded && ( + <> +
+ + + )} +
+
+ ); + } + + @action.bound + toggleExpanded() { + this.expanded = !this.expanded; } } -export class ExpandButton extends React.Component<{ - expanded: boolean; - setExpanded: (val: boolean) => void; -}> { +export class VisualizerHeaderMain extends React.Component<{ model: Model }> { render() { + const m = this.props.model; return (
this.props.setExpanded(!this.props.expanded)} - className={classnames( - "component-ExpandButton", - this.props.expanded && "expanded" + className="component-VisualizerHeaderMain" + style={{ + display: "flex", + alignItems: "center", + }} + > +
+ +
+
+ {m.loading ? ( +
+ +
+ ) : ( +
); } } diff --git a/extension/ui/src/Components/ExpandedOptions.tsx b/extension/ui/src/Components/VisualizerHeaderDetails.tsx similarity index 61% rename from extension/ui/src/Components/ExpandedOptions.tsx rename to extension/ui/src/Components/VisualizerHeaderDetails.tsx index 0cc7879..5984d3c 100644 --- a/extension/ui/src/Components/ExpandedOptions.tsx +++ b/extension/ui/src/Components/VisualizerHeaderDetails.tsx @@ -7,7 +7,7 @@ import { Model } from "../Model/Model"; import { VisualizationId } from "../Visualizers/Visualizer"; @observer -export class ExpandedOptions extends React.Component<{ model: Model }> { +export class VisualizerHeaderDetails extends React.Component<{ model: Model }> { render() { const m = this.props.model; let availableExtractors = new Array(); @@ -38,47 +38,47 @@ export class ExpandedOptions extends React.Component<{ model: Model }> { } return ( - <> -
-
- {}} - /> -
+
+ {}} + /> +
- ({ - label: e.name, - id: e.id, - }))} - onSelected={item => { - m.setPreferredExtractorId(item.id); - }} - /> -
+ ({ + label: e.name, + id: e.id, + }))} + onSelected={item => { + m.setPreferredExtractorId(item.id); + }} + /> +
- { - m.setPreferredVisualizationId(item.id); - }} - options={ - m.visualizations - ? m.visualizations.allVisualizations.map(v => ({ - label: v.name, - id: v.id, - })) - : [] - } - /> -
- + { + m.setPreferredVisualizationId(item.id); + }} + options={ + m.visualizations + ? m.visualizations.allVisualizations.map(v => ({ + label: v.name, + id: v.id, + })) + : [] + } + /> +
); } } @@ -90,11 +90,18 @@ function NamedSelect(props: { options: T[]; }) { return ( -
-
+
+