diff --git a/demo/csharp/Program.cs b/demo/csharp/Program.cs index 9a6e96b..0702eca 100644 --- a/demo/csharp/Program.cs +++ b/demo/csharp/Program.cs @@ -1,4 +1,10 @@ -#nullable enable + +// Install dotnet core clr see VS Code docs on how to setup VS Code so that you can debug C# applications. +// The Debug Visualizer does not support C# data extractors yet. +// If you want to visualize a value, it's `ToString` method must return supported json data. +// See the readme of the extension for supported json schemas. + +#nullable enable using System.Linq; using Hediet.DebugVisualizer.ExtractedData; @@ -49,7 +55,7 @@ namespace Demo public ExtractedData Visualize() { var list = new Node(default(T)!) { Next = this.Head }; - return GraphData.From(new[] { list }.Where(i => i != null), (item, info) => + return GraphData.From(new[] { list }, (item, info) => { info.Id = item == list ? "List" : string.Format("{0}", item.Value); if (item == list) diff --git a/demo/js/src/demo_random-walks.ts b/demo/js/src/demo_random-walks.ts index 7a2bca8..7c97c42 100644 --- a/demo/js/src/demo_random-walks.ts +++ b/demo/js/src/demo_random-walks.ts @@ -1,12 +1,12 @@ -while (true) { - // visualize data - const data = new Array(); - let value = 0; - for (let i = 0; i < 10000; i++) { - const delta = Math.random() > 0.5 ? 1 : -1; - data.push(value); - value += delta; - } +// visualize `data` +const data = new Array(); +let value = 0; +for (let i = 0; i < 100000; i++) { + const delta = Math.random() > 0.5 ? 1 : -1; + data.push(value); + value += delta; - debugger; + if (i % 1000 === 0) { + debugger; + } } diff --git a/demo/js/src/demo_sorting.ts b/demo/js/src/demo_sorting.ts index 38a76f9..a6f250a 100644 --- a/demo/js/src/demo_sorting.ts +++ b/demo/js/src/demo_sorting.ts @@ -2,6 +2,16 @@ import { getDataExtractorApi } from "@hediet/debug-visualizer-data-extraction"; getDataExtractorApi().registerDefaultExtractors(); +/* +Visualize this expression: +```ts +hedietDbgVis.markedGrid( + array, + hedietDbgVis.tryEval(["i", "j", "left", "right"]) +) +``` +*/ + // From https://github.com/AvraamMavridis/Algorithms-Data-Structures-in-Typescript/blob/master/algorithms/quickSort.md const array = [1, 2, 33, 31, 1, 2, 63, 123, 6, 32, 943, 346, 24]; const sorted = quickSort(array, 0, array.length - 1); diff --git a/demo/js/src/demo_typescript-asts.ts b/demo/js/src/demo_typescript-asts.ts index 9938e7e..13e861f 100644 --- a/demo/js/src/demo_typescript-asts.ts +++ b/demo/js/src/demo_typescript-asts.ts @@ -11,20 +11,17 @@ setTimeout(() => { class Main { run() { - const mainFile = { - name: "main.ts", - content: ` + const files = new Map([ + [ + "main.ts", + ` class Test1 { public foo(a: number) { + const x = { a: 5 }; } } - `, - }; - - //console.log(ts, require("typescript")); - - const files = new Map([ - [mainFile.name, mainFile.content], +`, + ], ]); const serviceHost = new MockLanguageServiceHost(files, {}); const baseService = ts.createLanguageService( @@ -32,13 +29,7 @@ class Test1 { ts.createDocumentRegistry() ); const prog = baseService.getProgram()!; - - const identifiers = new Array(); - function traverse(node: ts.Node) { - if (ts.isIdentifier(node)) identifiers.push(node); - node.forEachChild(traverse); - } - traverse(prog.getSourceFiles()[0]); + debugger; const c = prog.getTypeChecker(); let myValue = undefined; // Visualize `myValue` here! diff --git a/demo/php/demo.php b/demo/php/demo.php index 1ec99d1..b86711e 100644 --- a/demo/php/demo.php +++ b/demo/php/demo.php @@ -1,5 +1,12 @@ ["graph" => true], "nodes" => [ @@ -7,7 +14,6 @@ $graph = [ ], "edges" => [] ]; - // Visualize "$visualize()" $visualize = function () use (&$graph) { return json_encode($graph); @@ -16,13 +22,12 @@ $visualize = function () use (&$graph) { for ($i = 2; $i < 100; $i++) { // add a node $id = "" . $i; - array_push($graph["nodes"], ["id" => $id, "label" => $id]); - + array_push($graph["nodes"], + ["id" => $id, "label" => $id]); // connects the node to a random edge $targetId = "" . random_int(1, $i - 1); - array_push($graph["edges"], ["from" => $id, "to" => "" . $targetId]); - - xdebug_break(); + array_push($graph["edges"], + ["from" => $id, "to" => "" . $targetId]); } echo "finished"; diff --git a/docs/demo.gif b/docs/demo.gif new file mode 100644 index 0000000..894ee66 Binary files /dev/null and b/docs/demo.gif differ diff --git a/docs/visualization-grid.gif b/docs/visualization-grid.gif new file mode 100644 index 0000000..c3f0999 Binary files /dev/null and b/docs/visualization-grid.gif differ diff --git a/extension/ui/src/Visualizers/GridVisualizer.tsx b/extension/ui/src/Visualizers/GridVisualizer.tsx index 21ac42e..e7b05e0 100644 --- a/extension/ui/src/Visualizers/GridVisualizer.tsx +++ b/extension/ui/src/Visualizers/GridVisualizer.tsx @@ -11,6 +11,7 @@ import { import React = require("react"); import { observer } from "mobx-react"; import { computed, action, observable } from "mobx"; +import { Icon } from "@blueprintjs/core"; export class GridVisualizer extends VisualizationProvider { getVisualizations( @@ -55,7 +56,11 @@ export class DecoratedGridComponent extends React.Component<{ columnCount = Math.max(columnCount, row.columns.length); rows.push({ columns: row.columns.map((c, colIdx) => ({ - content: c.content !== undefined ? c.content : c.tag || "", + content: ( + + {c.content !== undefined ? c.content : c.tag || ""} + + ), id: c.tag !== undefined ? getUniqueId(c.tag) @@ -70,7 +75,7 @@ export class DecoratedGridComponent extends React.Component<{ rows.unshift({ columns: [...new Array(columnCount)].map((v, idx) => ({ id: `column-header-${idx}`, - content: `${idx}`, + content: {idx}, kind: "header", })), }); @@ -91,8 +96,16 @@ export class DecoratedGridComponent extends React.Component<{ r.columns.push({ id: m.id, - kind: "data", - content: m.label || m.id, + kind: "empty", + content: ( + + + {m.label || m.id} + + ), }); } } @@ -113,8 +126,23 @@ export class DecoratedGridComponent extends React.Component<{ } } +function Cell(props: { children: React.ReactNode }) { + return ( +
+ {props.children} +
+ ); +} + interface CellData { - content: string; + content: React.ReactNode; id: string; color?: string; kind: "data" | "header" | "empty"; @@ -255,6 +283,7 @@ class GridComponent extends React.Component<{ const l = this.layout; return (
-
- {i.cell.content} -
+ {i.cell.content}
@@ -353,7 +379,7 @@ class CellInfo { ); } - content!: string; + content!: React.ReactNode; ref: HTMLDivElement | null = null; diff --git a/extension/ui/src/Visualizers/style.scss b/extension/ui/src/Visualizers/style.scss index b231076..a8fd8a9 100644 --- a/extension/ui/src/Visualizers/style.scss +++ b/extension/ui/src/Visualizers/style.scss @@ -57,3 +57,18 @@ background: red; }*/ } + +.component-Grid { + .part-data { + border: 1px solid lightgray; + background: #eeeeee; + } + + .part-header { + background: transparentize(white, 0.5); + } + + .part-empty { + color: var(--vscode-editor-foreground); + } +} diff --git a/extension/ui/src/style.scss b/extension/ui/src/style.scss index db46d84..8b7cc6a 100644 --- a/extension/ui/src/style.scss +++ b/extension/ui/src/style.scss @@ -68,14 +68,14 @@ body { .part-Icon { margin-left: 4px; svg { - fill: var(--color); + fill: var(--vscode-editor-foreground); } } } .component-NamedSelect { .part-Name { - color: var(--color); + color: var(--vscode-editor-foreground); } } @@ -100,7 +100,7 @@ body { .part-Item { //color: black; - color: var(--color); + color: var(--vscode-editor-foreground); padding: 12px 16px; text-decoration: none; display: block; @@ -182,3 +182,7 @@ body { padding: 0; margin: 0; } + +.bp3-transition-container { + z-index: 100000; +}