Improves styling & demos.

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)

demo/js/src/demo_random-walks.ts

@@ -1,12 +1,12 @@
-while (true) {
-	// visualize data
-	const data = new Array<number>();
-	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<number>();
+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;
+	}
 }

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);

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<string, string>([
+			[
+				"main.ts",
+				`
 class Test1 {
 	public foo(a: number) {
+		const x = { a: 5 };
 	}
 }
-		`,
-		};
-
-		//console.log(ts, require("typescript"));
-
-		const files = new Map<string, string>([
-			[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<ts.Identifier>();
-		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!

demo/php/demo.php

@@ -1,5 +1,12 @@
 <?php
 
+// Install php, xdebug and the php debug extension for VS Code
+// (https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug).
+
+// The Debug Visualizer has no support for PHP data extractors yet,
+// so to visualize data, your value must be a valid JSON string representing the data.
+// See readme for supported data schemas.
+
 $graph = [
     "kind" => ["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";

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: (
+						<Cell>
+							{c.content !== undefined ? c.content : c.tag || ""}
+						</Cell>
+					),
 					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: <Cell>{idx}</Cell>,
 				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: (
+						<Cell>
+							<Icon
+								icon="arrow-up"
+								color="var(--vscode-editor-foreground)"
+							/>
+							{m.label || m.id}
+						</Cell>
+					),
 				});
 			}
 		}
@@ -113,8 +126,23 @@ export class DecoratedGridComponent extends React.Component<{
 	}
 }
 
+function Cell(props: { children: React.ReactNode }) {
+	return (
+		<div
+			style={{
+				padding: 10,
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+			}}
+		>
+			{props.children}
+		</div>
+	);
+}
+
 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 (
 			<div
+				className="component-Grid"
 				style={{
 					position: "relative",
 					height: l.height,
@@ -276,18 +305,17 @@ class GridComponent extends React.Component<{
 						}}
 					>
 						<div
+							className={`part-${i.cell.kind}`}
 							style={
 								{
 									empty: {},
 									data: {
 										display: "flex",
-										border: "1px solid lightgray",
-										background: "#eeeeee",
 										overflow: "hidden",
+										justifyContent: "center",
 										margin: 2,
 									},
 									header: {
-										background: "white",
 										overflow: "hidden",
 										display: "flex",
 										justifyContent: "center",
@@ -303,9 +331,7 @@ class GridComponent extends React.Component<{
 									height: "fit-content",
 								}}
 							>
-								<div style={{ padding: 10 }}>
-									{i.cell.content}
-								</div>
+								{i.cell.content}
 							</div>
 						</div>
 					</div>
@@ -353,7 +379,7 @@ class CellInfo {
 		);
 	}
 
-	content!: string;
+	content!: React.ReactNode;
 
 	ref: HTMLDivElement | null = null;
 

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);
+	}
+}

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;
+}