Bump express from 4.17.1 to 4.19.2 in /webview

Bumps [express](https://github.com/expressjs/express) from 4.17.1 to 4.19.2.
- [Release notes](https://github.com/expressjs/express/releases)
- [Changelog](https://github.com/expressjs/express/blob/master/History.md)
- [Commits](https://github.com/expressjs/express/compare/4.17.1...4.19.2)

---
updated-dependencies:
- dependency-name: express
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: hediet

.github/workflows/ci.yml

@@ -0,0 +1,23 @@
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          submodules: true
+      - name: Install Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 20.x
+      - run: yarn install
+      - run: yarn build

.github/workflows/opened-issues-triage.yml

@@ -0,0 +1,15 @@
+name: Move new issues into Triage
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  automate-project-columns:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: alex-page/github-project-automation-plus@v0.2.3
+        with:
+          project: Backlog
+          column: Triage
+          repo-token: ${{ secrets.GH_TOKEN }}

.gitignore

@@ -80,4 +80,11 @@ typings/
 .dynamodb/
 
 dist/
-out/
+out/
+
+# Python byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+*.vsix

.prettierrc.json

@@ -2,5 +2,6 @@
 	"trailingComma": "es5",
 	"tabWidth": 4,
 	"semi": true,
-	"useTabs": true
+	"useTabs": true,
+	"printWidth": 120
 }

.vscode/launch.json

@@ -1,6 +1,13 @@
 {
 	"version": "0.2.0",
 	"configurations": [
+		{
+			"type": "chrome",
+			"request": "launch",
+			"name": "Launch Chrome",
+			"url": "http://localhost:8090",
+			"webRoot": "${workspaceFolder}/visualization-playground"
+		},
 		{
 			"name": "Run Extension (Hot Reload)",
 			"type": "extensionHost",
@@ -8,7 +15,7 @@
 			"runtimeExecutable": "${execPath}",
 			"args": [
 				"--extensionDevelopmentPath=${workspaceFolder}/extension",
-				"${workspaceFolder}\\demo"
+				"${workspaceFolder}/demos/php"
 			],
 			"env": {
 				"HOT_RELOAD": "true",
@@ -24,7 +31,7 @@
 			"runtimeExecutable": "${execPath}",
 			"args": [
 				"--extensionDevelopmentPath=${workspaceFolder}/extension",
-				"${workspaceFolder}\\demo"
+				"${workspaceFolder}/demos/php"
 			],
 			"env": {
 				"HOT_RELOAD": "true",
@@ -40,7 +47,7 @@
 			"runtimeExecutable": "${execPath}",
 			"args": [
 				"--extensionDevelopmentPath=${workspaceFolder}/extension",
-				"${workspaceFolder}\\demo"
+				"${workspaceFolder}/demos/js"
 			],
 			"env": {
 				"HOT_RELOAD": "",
@@ -55,7 +62,7 @@
 			"runtimeExecutable": "${execPath}",
 			"args": [
 				"--extensionDevelopmentPath=${workspaceFolder}/extension",
-				"${workspaceFolder}\\demo"
+				"${workspaceFolder}/demos/js"
 			],
 			"env": {
 				"HOT_RELOAD": "",
@@ -63,6 +70,12 @@
 			},
 			"outFiles": ["${workspaceFolder}/extension/dist/**/*.js"],
 			"preLaunchTask": "npm: dev - extension"
+		},
+		{
+			"type": "dart",
+			"request": "launch",
+			"name": "Run Dart samples",
+			"program": "demos/dart/demo.dart"
 		}
 	]
 }

.vscode/settings.json

@@ -4,5 +4,18 @@
 	},
 	"plantuml.diagramsRoot": "docs",
 	"plantuml.exportFormat": "png",
-	"plantuml.exportOutDir": "docs/exported"
+	"plantuml.exportOutDir": "docs/exported",
+	"typescript.updateImportsOnFileMove.enabled": "prompt",
+	"mochaExplorer.files": "./data-extraction/test/**/*.test.ts",
+	"mochaExplorer.require": ["ts-node/register", "source-map-support/register"],
+	"tasksStatusbar.taskLabelFilter": "dev",
+	"editor.formatOnSave": true,
+	"typescript.tsdk": "node_modules\\typescript\\lib",
+
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"prettier.prettierPath": "node_modules/prettier",
+	"prettier.printWidth": 120,
+	"[javascript]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	}
 }

CONTRIBUTING.md

@@ -0,0 +1,65 @@
+# Contributing
+
+This document extends the [readme](./extension/README.md) of the extension with implementation details.
+
+## Build Instructions
+
+-   Clone the repository
+-   Run `yarn` in the repository root
+-   Run `yarn build`
+
+## Dev Instructions
+
+This project uses yarn workspaces and consists of the sub-projects _data-extraction_, _extension_ and _webview_.
+To setup a dev environment, follow these steps:
+
+-   Clone the repository
+-   Run `yarn` in the repository root
+-   Run `yarn build` initially (or `yarn dev` for every sub-project)
+-   Run `yarn dev` for the sub-project (i.e. in its folder) you are working on.
+
+For the _webview_ project, `yarn dev` will serve the react application on port 8080.
+Certain query parameters need to be set, so that the UI can connect to the debug visualizer extension.
+
+You can use VS Code to launch and debug the extension.
+Choose the preconfigured `Run Extension (Dev UI)` as debug configuration
+so that the extension loads the UI from the webpack server.
+Otherwise, the extension will start a webserver on its own, hosting the `dist` folder of the _webview_ project.
+
+## Publish Instructions
+
+-   Follow the Build Instructions
+-   `cd extension`
+-   `yarn pub`
+
+## Architecture
+
+![](./docs/exported/main/Main.png)
+
+### webview
+
+Implements the UI and is hosted inside a webview in VS Code.
+Can be opened in a browser window.
+Uses websockets and JSON RPC to communicate with the extension.
+
+### hediet/visualization
+
+Contains all the visualizers and visualization infrastructure.
+This external project can be found [here](https://github.com/hediet/visualization).
+
+### extension
+
+Creates the webview in VS Code, hosts a webserver and a websocket server.
+The webserver serves the _webview_ project that is loaded by the webview.
+If started with the `Run Extension (Dev UI)` debug configuration, it will load
+the page from `http://localhost:8080` rather than from its own http server.
+
+The webview is served from an http server rather than the file system to work around some security mechanisms,
+which would prevent lazy chunk loading or websockets.
+
+After the webview is loaded, it connects to the websocket server.
+The websocket server is used to evaluate expressions and is secured by a random token.
+
+### data-extraction
+
+Provides types and a JS runtime for data extraction.

LICENSE.md

@@ -1,21 +1,674 @@
-MIT License
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
 
-Copyright (c) 2020 Henning Dieterichs
+Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+Everyone is permitted to copy and distribute verbatim copies
+of this license document, but changing it is not allowed.
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+                            Preamble
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works. By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users. We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors. You can apply it to
+your programs, too.
+
+When we speak of free software, we are referring to freedom, not
+price. Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights. Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received. You must make sure that they, too, receive
+or can get the source code. And you must show them these terms so they
+know their rights.
+
+Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software. For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so. This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software. The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable. Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products. If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary. To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+0. Definitions.
+
+"This License" refers to version 3 of the GNU General Public License.
+
+"Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+"The Program" refers to any copyrightable work licensed under this
+License. Each licensee is addressed as "you". "Licensees" and
+"recipients" may be individuals or organizations.
+
+To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy. The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies. Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License. If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+1. Source Code.
+
+The "source code" for a work means the preferred form of the work
+for making modifications to it. "Object code" means any non-source
+form of a work.
+
+A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form. A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities. However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work. For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+The Corresponding Source for a work in source code form is that
+same work.
+
+2. Basic Permissions.
+
+All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met. This License explicitly affirms your unlimited
+permission to run the unmodified Program. The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work. This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force. You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright. Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+Conveying under any other circumstances is permitted solely under
+the conditions stated below. Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+4. Conveying Verbatim Copies.
+
+You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+5. Conveying Modified Source Versions.
+
+You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit. Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+6. Conveying Non-Source Forms.
+
+You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling. In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage. For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product. A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+"Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source. The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information. But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed. Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+7. Additional Terms.
+
+"Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law. If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it. (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.) You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10. If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term. If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+8. Termination.
+
+You may not propagate or modify a covered work except as expressly
+provided under this License. Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License. If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+9. Acceptance Not Required for Having Copies.
+
+You are not required to accept this License in order to receive or
+run a copy of the Program. Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance. However,
+nothing other than this License grants you permission to propagate or
+modify any covered work. These actions infringe copyright if you do
+not accept this License. Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+10. Automatic Licensing of Downstream Recipients.
+
+Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License. You are not responsible
+for enforcing compliance by third parties with this License.
+
+An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations. If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License. For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+11. Patents.
+
+A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based. The
+work thus licensed is called the contributor's "contributor version".
+
+A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version. For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement). To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients. "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License. You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+12. No Surrender of Others' Freedom.
+
+If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License. If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all. For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+13. Use with the GNU Affero General Public License.
+
+Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work. The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+14. Revised Versions of this License.
+
+The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time. Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number. If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation. If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+Later license versions may give you additional or different
+permissions. However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+15. Disclaimer of Warranty.
+
+THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+16. Limitation of Liability.
+
+IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+17. Interpretation of Sections 15 and 16.
+
+If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+To do so, attach the following notices to the program. It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and`show c' should show the appropriate
+parts of the General Public License. Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+The GNU General Public License does not permit incorporating your program
+into proprietary programs. If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library. If this is what you want to do, use the GNU Lesser General
+Public License instead of this License. But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

README.md

@@ -1,8 +1,13 @@
 # VS Code Debug Visualizer
 
+[![](https://img.shields.io/static/v1?style=social&label=Sponsor&message=%E2%9D%A4&logo=GitHub&color&link=%3Curl%3E)](https://github.com/sponsors/hediet)
+[![](https://img.shields.io/static/v1?style=social&label=Donate&message=%E2%9D%A4&logo=Paypal&color&link=%3Curl%3E)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ZP5F38L4C88UY&source=url)
 [![](https://img.shields.io/twitter/follow/hediet_dev.svg?style=social)](https://twitter.com/intent/follow?screen_name=hediet_dev)
 
-See the [extension](extension) directory for the extension readme.
+See [README.md](./extension/README.md) for the readme of the extension.
+
 You can get the extension in the [marketplace](https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer).
 
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for build instructions and implementation details.
+
 ![](./docs/doubly-linked-list-reverse-demo.gif)

data-extraction/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Henning Dieterichs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data-extraction/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@hediet/debug-visualizer-data-extraction",
 	"description": "A library that helps implementing data extractors for the Debug Visualizer VS Code extension.",
-	"version": "0.11.0",
+	"version": "0.14.0",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"author": {
@@ -23,16 +23,26 @@
 	},
 	"scripts": {
 		"dev": "webpack --watch --mode development",
-		"build": "webpack --mode production"
+		"build": "webpack --mode production",
+		"test": "mocha --require source-map-support/register --require ts-node/register ./test/**/*.test.ts"
 	},
 	"dependencies": {},
 	"devDependencies": {
-		"typescript": "^3.7.5",
-		"@types/plotly.js": "^1.44.28",
-		"@types/node": "^13.7.1",
-		"tslint": "^6.0.0",
-		"webpack": "^4.41.6",
-		"webpack-cli": "^3.3.11",
-		"ts-loader": "^6.2.1"
+		"copy-webpack-plugin": "^11.0.0",
+		"@types/copy-webpack-plugin": "^10.1.0",
+		"@types/mocha": "^7.0.2",
+		"@types/node": "^13.7.4",
+		"@types/plotly.js": "1.44.28",
+		"coveralls": "^3.0.11",
+		"mocha": "^7.1.1",
+		"mocha-lcov-reporter": "^1.3.0",
+		"nyc": "^15.0.0",
+		"source-map-support": "^0.5.16",
+		"tslint": "^6.1.3",
+		"typescript": "^5.1.6",
+		"webpack": "^5.88.1",
+		"webpack-cli": "^5.1.4",
+		"ts-loader": "^9.4.4",
+		"ts-node": "^10.9.1"
 	}
 }

data-extraction/src/CommonDataTypes.ts

@@ -1,122 +1,312 @@
-import { ExtractedData } from "./DataExtractionResult";
+// This file was created automatically. Do not edit it manually!
 
-export type CommonDataType =
-	| CommonDataTypes.Text
-	| CommonDataTypes.Svg
-	| CommonDataTypes.Html
-	| CommonDataTypes.DotGraph
-	| CommonDataTypes.Tree
-	| CommonDataTypes.Ast
-	| CommonDataTypes.Graph
-	| CommonDataTypes.Plotly
-	| CommonDataTypes.Grid;
+export type KnownVisualizationData =
+	| TreeVisualizationData
+	| AstTreeVisualizationData
+	| GraphvizDotVisualizationData
+	| GraphVisualizationData
+	| GraphVisualizationData
+	| GridVisualizationData
+	| ImageVisualizationData
+	| MonacoTextVisualizationData
+	| MonacoTextDiffVisualizationData
+	| TableVisualizationData
+	| PlotlyVisualizationData
+	| SimpleTextVisualizationData
+	| SvgVisualizationData;
 
-export function isCommonDataType<T>(
-	data: ExtractedData,
-	kind: T
-): data is Narrow<CommonDataType, { kind: T }> {
-	for (const key of Object.keys(kind)) {
-		if (!(key in data.kind)) {
-			return false;
-		}
-	}
-	return true;
-}
+export type TreeVisualizationData = {
+	kind: {
+		tree: true;
+	};
+	root: TreeNode;
+};
 
-type Narrow<T, TKind> = T extends TKind ? T : never;
-
-export module CommonDataTypes {
-	export interface Text {
-		kind: { text: true };
-		text: string;
-		mimeType?: string;
-		fileName?: string;
-	}
-
-	export interface Graph {
-		kind: { graph: true };
-		nodes: NodeGraphData[];
-		edges: EdgeGraphData[];
-	}
-
-	export interface Svg extends Text {
-		kind: { text: true; svg: true };
-	}
-
-	export interface Html extends Text {
-		kind: { text: true; html: true };
-	}
-
-	export interface DotGraph extends Text {
-		kind: { text: true; dotGraph: true };
-	}
-
-	export interface Tree<TData = unknown> {
-		kind: { tree: true };
-		root: TreeNode<TData>;
-	}
-
-	export interface Grid {
-		kind: { array: true };
-		columnLabels?: { label?: string }[];
-		rows: {
-			label?: string;
-			columns: {
-				content?: string;
-				tag?: string;
-				color?: string;
-			}[];
-		}[];
-		markers?: {
-			id: string;
-
-			row: number;
-			column: number;
-			rows?: number;
-			columns?: number;
-
-			label?: string;
-			color?: string;
-		}[];
-	}
-
-	export interface Ast
-		extends Tree<{
-				position: number;
-				length: number;
-			}>,
-			Text {
-		kind: { text: true; tree: true; ast: true };
-	}
-
-	export interface Plotly {
-		kind: { plotly: true };
-		data: Partial<Plotly.Data>[];
-	}
-}
-
-export interface TreeNode<TExtraData> {
-	name: string;
-	children: TreeNode<TExtraData>[];
-	data: TExtraData;
-	id?: string;
-	value?: string;
-	emphasizedValue?: string;
+export type TreeNode = {
+	/**
+	 * The children of this tree-node
+	 */
+	children: TreeNode[];
+	/**
+	 * The parts that make up the text of this item
+	 */
+	items: TreeNodeItem[];
+	/**
+	 * If a node is selected, the concatenation of all segment values from root to the selected node is shown to the user.
+	 */
+	segment?: string;
+	/**
+	 * Marked nodes are highlighted and scrolled into view on every visualization update.
+	 */
 	isMarked?: boolean;
-}
+};
 
-export interface NodeGraphData {
+export type TreeNodeItem = {
+	/**
+	 * The text to show
+	 */
+	text: string;
+	/**
+	 * The style of the text
+	 */
+	emphasis?: "style1" | "style2" | "style3" | string;
+};
+
+export type AstTreeVisualizationData = {
+	kind: {
+		ast: true;
+		tree: true;
+		text: true;
+	};
+	root: AstTreeNode;
+	text: string;
+	fileName?: string;
+};
+
+export type AstTreeNode = {
+	children: AstTreeNode[];
+	items: AstTreeNodeItem[];
+	segment?: string;
+	isMarked?: boolean;
+	span: {
+		start: number;
+		length: number;
+	};
+};
+
+export type AstTreeNodeItem = {
+	text: string;
+	emphasis?: "style1" | "style2" | "style3" | string;
+};
+
+export type GraphvizDotVisualizationData = {
+	kind: {
+		dotGraph: true;
+	};
+	text: string;
+};
+
+export type GraphVisualizationData = {
+	kind: {
+		graph: true;
+	};
+	nodes: GraphNode[];
+	edges: GraphEdge[];
+};
+
+export type GraphNode = {
 	id: string;
 	label?: string;
 	color?: string;
 	shape?: "ellipse" | "box";
-}
+};
 
-export interface EdgeGraphData {
+export type GraphEdge = {
 	from: string;
 	to: string;
 	label?: string;
 	id?: string;
 	color?: string;
-	dashes?: boolean;
-}
+	style?: "solid" | "dashed" | "dotted";
+};
+
+export type GridVisualizationData = {
+	kind: {
+		grid: true;
+	};
+	columnLabels?: {
+		label?: string;
+	}[];
+	rows: {
+		label?: string;
+		columns: {
+			content?: string;
+			/**
+			 * A value to identify this cell. Should be unique.
+			 */
+			tag?: string;
+			color?: string;
+		}[];
+	}[];
+	markers?: {
+		id: string;
+		row: number;
+		column: number;
+		rows?: number;
+		columns?: number;
+		label?: string;
+		color?: string;
+	}[];
+};
+
+export type ImageVisualizationData = {
+	kind: {
+		imagePng: true;
+	};
+	/**
+	 * The base 64 encoded PNG representation of the image
+	 */
+	base64Data: string;
+};
+
+export type MonacoTextVisualizationData = {
+	kind: {
+		text: true;
+	};
+	/**
+	 * The text to show
+	 */
+	text: string;
+	decorations?: {
+		range: LineColumnRange;
+		label?: string;
+	}[];
+	/**
+	 * An optional filename that might be used for chosing a syntax highlighter
+	 */
+	fileName?: string;
+};
+
+export type LineColumnRange = {
+	/**
+	 * The start position
+	 */
+	start: LineColumnPosition;
+	/**
+	 * The end position
+	 */
+	end: LineColumnPosition;
+};
+
+export type LineColumnPosition = {
+	/**
+	 * The 0-based line number
+	 */
+	line: number;
+	/**
+	 * The 0-based column number
+	 */
+	column: number;
+};
+
+export type MonacoTextDiffVisualizationData = {
+	kind: {
+		text: true;
+	};
+	/**
+	 * The text to show
+	 */
+	text: string;
+	/**
+	 * The text to compare against
+	 */
+	otherText: string;
+	/**
+	 * An optional filename that might be used for chosing a syntax highlighter
+	 */
+	fileName?: string;
+};
+
+export type TableVisualizationData = {
+	kind: {
+		table: true;
+	};
+	/**
+	 * An array of objects. The properties of the objects are used as columns.
+	 */
+	rows: {}[];
+};
+
+export type PlotlyVisualizationData = {
+	kind: {
+		plotly: true;
+	};
+	/**
+	 * Expecting Plotly.Data[] (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/795ce172038dbafcb9cba030d637d733a7eea19c/types/plotly.js/index.d.ts#L1036)
+	 */
+	data: {
+		text?: string | string[];
+		xaxis?: string;
+		yaxis?: string;
+		cells?: {
+			values?: string[][];
+		};
+		header?: {
+			values?: string[];
+		};
+		domain?: {
+			x?: number[],
+			y?: number[],
+		};
+		x?: (string | number | null)[] | (string | number | null)[][];
+		y?: (string | number | null)[] | (string | number | null)[][];
+		z?: (string | number | null)[] | (string | number | null)[][];
+		type?:
+			| "bar"
+			| "box"
+			| "candlestick"
+			| "choropleth"
+			| "contour"
+			| "heatmap"
+			| "histogram"
+			| "indicator"
+			| "mesh3d"
+			| "ohlc"
+			| "parcoords"
+			| "pie"
+			| "pointcloud"
+			| "scatter"
+			| "scatter3d"
+			| "scattergeo"
+			| "scattergl"
+			| "scatterpolar"
+			| "scatterternary"
+			| "sunburst"
+			| "surface"
+			| "treemap"
+			| "waterfall"
+			| "funnel"
+			| "funnelarea"
+			| "scattermapbox"
+			| "table";
+		mode?:
+			| "lines"
+			| "markers"
+			| "text"
+			| "lines+markers"
+			| "text+markers"
+			| "text+lines"
+			| "text+lines+markers"
+			| "none"
+			| "gauge"
+			| "number"
+			| "delta"
+			| "number+delta"
+			| "gauge+number"
+			| "gauge+number+delta"
+			| "gauge+delta";
+	}[];
+	/**
+	 * Expecting Partial<Plotly.Layout> (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/795ce172038dbafcb9cba030d637d733a7eea19c/types/plotly.js/index.d.ts#L329)
+	 */
+	layout?: {
+		title?: string;
+	};
+};
+
+export type SimpleTextVisualizationData = {
+	kind: {
+		text: true;
+	};
+	text: string;
+};
+
+export type SvgVisualizationData = {
+	kind: {
+		svg: true;
+	};
+	/**
+	 * The svg content
+	 */
+	text: string;
+};

data-extraction/src/DataExtractionResult.ts

@@ -1,27 +1,27 @@
-export type DataExtractionResult = {
-	data: ExtractedData;
+export interface DataExtractionResult {
+	data: VisualizationData;
 	usedExtractor: DataExtractorInfo;
 	availableExtractors: DataExtractorInfo[];
-};
+}
 
 /**
  * Instances must be valid json values.
  */
-export type ExtractedData = {
+export interface VisualizationData {
 	kind: Record<string, true>;
-};
+}
 
-export type DataExtractorInfo = {
+export interface DataExtractorInfo {
 	id: DataExtractorId;
 	name: string;
 	priority: number;
-};
+}
 
 export type DataExtractorId = {
 	__brand: "DataExtractorId";
 } & string;
 
-export function isExtractedData(val: unknown): val is ExtractedData {
+export function isVisualizationData(val: unknown): val is VisualizationData {
 	if (typeof val !== "object" || !val || !("kind" in val)) {
 		return false;
 	}

data-extraction/src/getGlobal.ts

@@ -0,0 +1,10 @@
+export function getGlobal(): any {
+	if (typeof globalThis === "object") {
+		return globalThis;
+	} else if (typeof global === "object") {
+		return global;
+	} else if (typeof window === "object") {
+		return window;
+	}
+	throw new Error("No global available");
+}

data-extraction/src/js/api/DataExtractorApi.ts

@@ -1,91 +1,133 @@
-import {
-	ExtractedData,
-	DataExtractionResult,
-} from "../../DataExtractionResult";
-
-export interface DataExtractorApi {
-	/**
-	 * Registers a single extractor.
-	 */
-	registerExtractor<TExtractedData extends ExtractedData>(
-		extractor: DataExtractor<TExtractedData>
-	): void;
-
-	/**
-	 * Registers multiple extractors.
-	 */
-	registerExtractors(extractors: DataExtractor<ExtractedData>[]): void;
-
-	/**
-	 * Extracts data from the result of `valueFn`.
-	 * @valueFn a function returning the value to extract the data from.
-	 * Is a function so that it's evaluation can depend on `evalFn`.
-	 */
-	getData(
-		valueFn: () => unknown,
-		evalFn: <T>(expression: string) => T,
-		preferredDataExtractorId: string | undefined
-	): JSONString<DataResult>;
-
-	/**
-	 * Registers all default (built-in) extractors.
-	 * @preferExisting if `true`, existing extractors with the same id are not overwritten.
-	 */
-	registerDefaultExtractors(preferExisting?: boolean): void;
-}
-
-export type DataResult =
-	| {
-			kind: "Data";
-			extractionResult: DataExtractionResult;
-	  }
-	| { kind: "NoExtractors" }
-	| { kind: "Error"; message: string };
-
-export interface JSONString<T> extends String {
-	__brand: { json: T };
-}
-
-export interface DataExtractor<T extends ExtractedData> {
-	/**
-	 * Must be unique among all data extractors.
-	 */
-	id: string;
-	getExtractions(
-		data: unknown,
-		extractionCollector: ExtractionCollector<T>,
-		context: DataExtractorContext
-	): void;
-}
-
-export interface ExtractionCollector<T extends ExtractedData> {
-	/**
-	 * Suggests a possible extraction.
-	 */
-	addExtraction(extraction: DataExtraction<T>): void;
-}
-
-export interface DataExtractorContext {
-	/**
-	 * Evaluates an expression in the context of the active stack frame.
-	 */
-	evalFn: <TEval>(expression: string) => TEval;
-}
-
-export interface DataExtraction<TData extends ExtractedData> {
-	/**
-	 * Higher priorities are preferred.
-	 */
-	priority: number;
-
-	/**
-	 * A unique id identifying this extraction among all extractions.
-	 * Required to express extraction preferences.
-	 */
-	id: string;
-	/**
-	 * A user friendly name of this extraction.
-	 */
-	name: string;
-	extractData(): TData;
-}
+import { DataExtractionResult, VisualizationData } from "../../DataExtractionResult";
+import { LoadDataExtractorsFn } from "./LoadDataExtractorsFn";
+
+export interface DataExtractorApi {
+	/**
+	 * Registers a single extractor.
+	 */
+	registerExtractor(extractor: DataExtractor): void;
+
+	/**
+	 * Registers multiple extractors.
+	 */
+	registerExtractors(extractors: DataExtractor[]): void;
+
+	/**
+	 * Extracts data from the result of `valueFn`.
+	 * @valueFn a function returning the value to extract the data from.
+	 * Is a function so that it's evaluation can depend on `evalFn`.
+	 */
+	getData(
+		valueFn: () => unknown,
+		evalFn: <T>(expression: string) => T,
+		preferredDataExtractorId: string | undefined,
+		variablesInScope: Record<string, unknown>,
+		callFramesSnapshot: CallFramesSnapshot | null
+	): JSONString<DataResult>;
+
+	/**
+	 * Registers all default (built-in) extractors.
+	 * @preferExisting if `true`, existing extractors with the same id are not overwritten.
+	 */
+	registerDefaultExtractors(preferExisting?: boolean): void;
+
+	setDataExtractorFn(id: string, fn: LoadDataExtractorsFn | undefined): void;
+}
+
+export type DataResult =
+	| {
+			kind: "Data";
+			extractionResult: DataExtractionResult;
+	  }
+	| { kind: "NoExtractors" }
+	| { kind: "Error"; message: string }
+	| {
+			kind: "OutdatedCallFrameSnapshot";
+			callFramesRequest: CallFramesRequest;
+	  };
+
+export interface JSONString<T> extends String {
+	__brand: { json: T };
+}
+
+export interface CallFramesRequest {
+	requestId: string;
+	requestedCallFrames: CallFrameRequest[];
+}
+
+export interface CallFrameRequest {
+	methodName: string;
+	pathRegExp: string | undefined;
+}
+
+export interface CallFramesSnapshot {
+	requestId: string;
+	frames: (CallFrameInfo | SkippedCallFrames)[];
+}
+
+export interface SkippedCallFrames {
+	skippedFrames: number;
+}
+
+export interface CallFrameInfo {
+	methodName: string;
+	source: { name: string; path: string };
+	vars: Record<string, any>;
+}
+
+export interface DataExtractor {
+	/**
+	 * Must be unique among all data extractors.
+	 */
+	id: string;
+
+	/**
+	 * Filters the data to be extracted.
+	 */
+	dataCtor?: string;
+	getExtractions(data: unknown, extractionCollector: ExtractionCollector, context: DataExtractorContext): void;
+}
+
+export interface ExtractionCollector {
+	/**
+	 * Suggests a possible extraction.
+	 */
+	addExtraction(extraction: DataExtraction): void;
+}
+
+export interface DataExtractorContext {
+	/**
+	 * Evaluates an expression in the context of the active stack frame.
+	 */
+	evalFn: <TEval>(expression: string) => TEval;
+
+	readonly expression: string | undefined;
+
+	readonly variablesInScope: Record<string, () => unknown>;
+
+	extract(value: unknown): VisualizationData | undefined;
+
+	readonly callFrameInfos: readonly (CallFrameInfo | SkippedCallFrames)[];
+
+	addCallFrameRequest(request: CallFrameRequest): void;
+}
+
+export interface DataExtraction {
+	/**
+	 * Higher priorities are preferred.
+	 */
+	priority: number;
+
+	/**
+	 * A unique id identifying this extraction among all extractions.
+	 * Required to express extraction preferences.
+	 */
+	id?: string;
+
+	/**
+	 * A user friendly name of this extraction.
+	 */
+	name?: string;
+
+	extractData(): VisualizationData;
+}

data-extraction/src/js/api/DataExtractorApiImpl.ts

@@ -1,97 +1,294 @@
-import {
-	DataExtractorApi,
-	DataResult,
-	JSONString,
-	DataExtractor,
-	DataExtraction,
-	ExtractionCollector,
-} from "./DataExtractorApi";
-import { ExtractedData, DataExtractorInfo } from "../../DataExtractionResult";
-import { registerDefaultExtractors } from "./default-extractors";
-
-export class DataExtractorApiImpl implements DataExtractorApi {
-	public static lastEvalFn: (<T>(expression: string) => T) | undefined;
-
-	private readonly extractors = new Map<
-		string,
-		DataExtractor<ExtractedData>
-	>();
-
-	private toJson<TData>(data: TData): JSONString<TData> {
-		return JSON.stringify(data) as any;
-	}
-
-	public registerExtractor<TExtractedData extends ExtractedData>(
-		extractor: DataExtractor<TExtractedData>
-	): void {
-		this.extractors.set(extractor.id, extractor);
-	}
-
-	public registerExtractors(
-		extractors: DataExtractor<ExtractedData>[]
-	): void {
-		for (const e of extractors) {
-			this.registerExtractor(e);
-		}
-	}
-
-	public getData(
-		valueFn: () => unknown,
-		evalFn: <T>(expression: string) => T,
-		preferredDataExtractorId: string | undefined
-	): JSONString<DataResult> {
-		const extractions = new Array<DataExtraction<ExtractedData>>();
-		const extractionCollector: ExtractionCollector<ExtractedData> = {
-			addExtraction(extraction) {
-				extractions.push(extraction);
-			},
-		};
-
-		DataExtractorApiImpl.lastEvalFn = evalFn;
-		const value = valueFn();
-		DataExtractorApiImpl.lastEvalFn = undefined;
-
-		for (const e of this.extractors.values()) {
-			e.getExtractions(value, extractionCollector, { evalFn });
-		}
-		extractions.sort((a, b) => b.priority - a.priority);
-		let usedExtraction = extractions[0];
-		if (!usedExtraction) {
-			return this.toJson({ kind: "NoExtractors" } as DataResult);
-		}
-
-		if (preferredDataExtractorId) {
-			const preferred = extractions.find(
-				e => e.id === preferredDataExtractorId
-			);
-			if (preferred) {
-				usedExtraction = preferred;
-			}
-		}
-
-		function mapExtractor(
-			e: DataExtraction<ExtractedData>
-		): DataExtractorInfo {
-			return {
-				id: e.id as any,
-				name: e.name,
-				priority: e.priority,
-			};
-		}
-
-		const data = usedExtraction.extractData();
-		return this.toJson({
-			kind: "Data",
-			extractionResult: {
-				data,
-				usedExtractor: mapExtractor(usedExtraction),
-				availableExtractors: extractions.map(mapExtractor),
-			},
-		} as DataResult);
-	}
-
-	public registerDefaultExtractors(preferExisting: boolean = false): void {
-		// TODO consider preferExisting
-		registerDefaultExtractors(this);
-	}
-}
+import {
+	DataExtractorInfo,
+	VisualizationData,
+} from "../../DataExtractionResult";
+import * as helpers from "../helpers";
+import {
+	CallFrameInfo,
+	CallFrameRequest,
+	CallFramesSnapshot,
+	DataExtraction,
+	DataExtractor,
+	DataExtractorApi,
+	DataExtractorContext,
+	DataResult,
+	JSONString,
+	SkippedCallFrames,
+} from "./DataExtractorApi";
+import { LoadDataExtractorsFn } from "./LoadDataExtractorsFn";
+import { registerDefaultExtractors } from "./default-extractors";
+
+/**
+ * @internal
+ */
+export class DataExtractorApiImpl implements DataExtractorApi {
+	public static lastContext: DataExtractorContext | undefined = undefined;
+
+	private readonly extractors = new Map<string, DataExtractor>();
+	private readonly extractorSources = new Map<string, LoadDataExtractorsFn>();
+
+	private toJson<TData>(data: TData): JSONString<TData> {
+		return JSON.stringify(data) as any;
+	}
+
+	public registerExtractor(extractor: DataExtractor): void {
+		this.extractors.set(extractor.id, extractor);
+	}
+
+	public registerExtractors(extractors: DataExtractor[]): void {
+		for (const e of extractors) {
+			this.registerExtractor(e);
+		}
+	}
+
+	public getData(
+		valueFn: () => unknown,
+		evalFn: <T>(expression: string) => T,
+		preferredDataExtractorId: string | undefined,
+		variablesInScope: Record<string, () => unknown>,
+		callFramesSnapshot: CallFramesSnapshot | null
+	): JSONString<DataResult> {
+		const callFrameRequests: CallFrameRequest[] = [];
+		const rootContext = new ContextImpl(
+			variablesInScope,
+			removeEnd(removeStart(valueFn.toString(), "() => ("), ")").trim(),
+			evalFn,
+			this,
+			undefined,
+			callFramesSnapshot?.frames ?? [],
+			callFrameRequests
+		);
+
+		DataExtractorApiImpl.lastContext = rootContext;
+		const value = valueFn();
+		const extractions = this.getExtractions(value, rootContext);
+		DataExtractorApiImpl.lastContext = undefined;
+
+		const requestId =
+			callFrameRequests.length === 0
+				? ""
+				: "" + cyrb53(JSON.stringify(callFrameRequests));
+		if ((callFramesSnapshot?.requestId ?? "") !== requestId) {
+			return this.toJson({
+				kind: "OutdatedCallFrameSnapshot",
+				callFramesRequest: {
+					requestId,
+					requestedCallFrames: callFrameRequests,
+				},
+			});
+		}
+
+		let usedExtraction = extractions[0];
+		if (!usedExtraction) {
+			return this.toJson({ kind: "NoExtractors" } as DataResult);
+		}
+
+		if (preferredDataExtractorId) {
+			const preferred = extractions.find(
+				(e) => e.id === preferredDataExtractorId
+			);
+			if (preferred) {
+				usedExtraction = preferred;
+			}
+		}
+
+		try {
+			const data = usedExtraction.extractData();
+
+			return this.toJson({
+				kind: "Data",
+				extractionResult: {
+					data,
+					usedExtractor: mapExtractor(usedExtraction),
+					availableExtractors: extractions.map(mapExtractor),
+				},
+			} as DataResult);
+
+		} catch (e) {
+			return this.toJson({
+				kind: "Data",
+				extractionResult: {
+					data: visualizeError(e),
+					usedExtractor: mapExtractor(usedExtraction),
+					availableExtractors: extractions.map(mapExtractor),
+				},
+			} as DataResult);
+		}
+	}
+
+	public getExtractions(
+		value: unknown,
+		context: DataExtractorContext
+	): DataExtraction[] {
+		const extractions = new Array<DataExtraction>();
+		const extractors = new Array<DataExtractor>();
+
+		for (const fn of this.extractorSources.values()) {
+			try {
+				fn((extractor) => {
+					extractors.push(extractor);
+				}, helpers);
+			} catch (e) {
+				console.error('Error in data extractor source', fn, e);
+			}
+		}
+
+		for (const extractor of [...this.extractors.values(), ...extractors]) {
+			if (extractor.dataCtor !== undefined) {
+				if (
+					typeof value !== "object" ||
+					value === null ||
+					value.constructor.name !== extractor.dataCtor
+				) {
+					continue;
+				}
+			}
+
+			try {
+				extractor.getExtractions(
+					value,
+					{
+						addExtraction(extraction) {
+							if (extraction.id === undefined) {
+								extraction.id = extractor.id;
+							}
+							if (extraction.name === undefined) {
+								extraction.name = extractor.id;
+							}
+							extractions.push(extraction);
+						},
+					},
+					context
+				);
+			} catch (e) {
+				extractions.push({
+					id: extractor.id,
+					name: extractor.id,
+					priority: 0,
+					extractData() {
+						return visualizeError(e);
+					},
+				});
+			}
+		}
+		extractions.sort((a, b) => b.priority - a.priority);
+
+		return extractions;
+	}
+
+	public registerDefaultExtractors(preferExisting: boolean = false): void {
+		// TODO consider preferExisting
+		registerDefaultExtractors(this);
+	}
+
+	public setDataExtractorFn(
+		id: string,
+		fn: LoadDataExtractorsFn | undefined
+	): void {
+		if (fn) {
+			this.extractorSources.set(id, fn);
+		} else {
+			this.extractorSources.delete(id);
+		}
+	}
+}
+
+function visualizeError(e: unknown | Error): VisualizationData {
+	return helpers.asData({
+		kind: { text: true },
+		fileName: 'error.md',
+		text: `# Error while running data extractor\n\n${formatErrorStr(e)}`,
+	});
+}
+
+function formatErrorStr(e: unknown | Error): string {
+	if (e instanceof Error) {
+		return `${e.message}\n\nStack:\n${e.stack}`;
+	}
+	return "" + e;
+}
+
+function mapExtractor(e: DataExtraction): DataExtractorInfo {
+	return {
+		id: e.id! as any,
+		name: e.name!,
+		priority: e.priority,
+	};
+}
+
+class ContextImpl implements DataExtractorContext {
+	constructor(
+		public readonly variablesInScope: Record<string, () => unknown>,
+		public readonly expression: string | undefined,
+		public readonly evalFn: <T>(expression: string) => T,
+		private readonly _api: DataExtractorApiImpl,
+		private readonly _parent: ContextImpl | undefined,
+		public readonly callFrameInfos: readonly (
+			| CallFrameInfo
+			| SkippedCallFrames
+		)[],
+		private readonly _callFrameRequests: CallFrameRequest[]
+	) { }
+
+	addCallFrameRequest(request: CallFrameRequest): void {
+		this._callFrameRequests.push(request);
+	}
+
+	get _level(): number {
+		return this._parent ? this._parent._level + 1 : 0;
+	}
+
+	extract(value: any): VisualizationData | undefined {
+		if (this._level > 10) {
+			throw new Error("extract() called too many times recursively");
+		}
+
+		const extractions = this._api.getExtractions(
+			value,
+			new ContextImpl(
+				this.variablesInScope,
+				undefined,
+				this.evalFn,
+				this._api,
+				this,
+				this.callFrameInfos,
+				this._callFrameRequests
+			)
+		);
+		if (extractions.length === 0) {
+			return undefined;
+		}
+		return extractions[0].extractData();
+	}
+}
+
+function removeStart(str: string, start: string): string {
+	if (str.startsWith(start)) {
+		return str.substr(start.length);
+	}
+	return str;
+}
+
+function removeEnd(str: string, end: string): string {
+	if (str.endsWith(end)) {
+		return str.substr(0, str.length - end.length);
+	}
+	return str;
+}
+
+// From https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript
+function cyrb53(str: string, seed = 0) {
+	let h1 = 0xdeadbeef ^ seed,
+		h2 = 0x41c6ce57 ^ seed;
+	for (let i = 0, ch; i < str.length; i++) {
+		ch = str.charCodeAt(i);
+		h1 = Math.imul(h1 ^ ch, 2654435761);
+		h2 = Math.imul(h2 ^ ch, 1597334677);
+	}
+	h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
+	h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+	h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507);
+	h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+
+	return 4294967296 * (2097151 & h2) + (h1 >>> 0);
+}

data-extraction/src/js/api/LoadDataExtractorsFn.ts

@@ -0,0 +1,7 @@
+import { DataExtractor } from "./DataExtractorApi";
+import type * as helpersTypes from "../helpers"
+
+export type LoadDataExtractorsFn = (
+	register: (extractor: DataExtractor) => void,
+    helpers: typeof helpersTypes
+) => void;

data-extraction/src/js/api/default-extractors/AsIsDataExtractor.ts

@@ -1,18 +1,18 @@
-import { ExtractedData, isExtractedData } from "../../../DataExtractionResult";
+import { isVisualizationData } from "../../../DataExtractionResult";
 import {
 	DataExtractor,
 	ExtractionCollector,
 	DataExtractorContext,
 } from "../..";
 
-export class AsIsDataExtractor implements DataExtractor<ExtractedData> {
+export class AsIsDataExtractor implements DataExtractor {
 	readonly id = "as-is";
 	getExtractions(
 		data: unknown,
-		extractionCollector: ExtractionCollector<ExtractedData>,
+		extractionCollector: ExtractionCollector,
 		context: DataExtractorContext
 	): void {
-		if (!isExtractedData(data)) {
+		if (!isVisualizationData(data)) {
 			return;
 		}
 

data-extraction/src/js/api/default-extractors/GetDebugVisualizationDataExtractor.ts

@@ -1,32 +1,33 @@
-import { ExtractedData } from "../../../DataExtractionResult";
+import { VisualizationData } from "../../../DataExtractionResult";
 import {
 	DataExtractor,
 	ExtractionCollector,
 	DataExtractorContext,
 } from "../DataExtractorApi";
 
-export class GetDebugVisualizationDataExtractor
-	implements DataExtractor<ExtractedData> {
-	readonly id = "get-debug-visualization";
+export class GetVisualizationDataExtractor implements DataExtractor {
+	readonly id = "get-visualization-data";
 	getExtractions(
 		data: unknown,
-		collector: ExtractionCollector<ExtractedData>,
+		collector: ExtractionCollector,
 		context: DataExtractorContext
 	): void {
-		if (
-			typeof data !== "object" ||
-			!data ||
-			!("getDebugVisualization" in data)
-		) {
+		if (typeof data !== "object" || !data) {
+			return;
+		}
+
+		const getVisualizationData = (data as any)
+			.getVisualizationData as Function;
+		if (typeof getVisualizationData !== "function") {
 			return;
 		}
 
 		collector.addExtraction({
 			id: this.id,
-			name: "Use Method 'getDebugVisualization'",
+			name: "Use Method 'getVisualizationData'",
 			priority: 600,
 			extractData() {
-				return (data as any).getDebugVisualization();
+				return getVisualizationData.apply(data);
 			},
 		});
 	}

data-extraction/src/js/api/default-extractors/GridExtractor.ts

@@ -1,16 +1,16 @@
-import { ExtractedData } from "../../../DataExtractionResult";
 import {
 	DataExtractor,
 	ExtractionCollector,
 	DataExtractorContext,
 } from "../..";
-import { CommonDataTypes } from "../../../CommonDataTypes";
+import { GridVisualizationData } from "../../../CommonDataTypes";
+import { expect } from "../../../util";
 
-export class GridExtractor implements DataExtractor<ExtractedData> {
+export class GridExtractor implements DataExtractor {
 	readonly id = "grid";
 	getExtractions(
 		data: unknown,
-		extractionCollector: ExtractionCollector<ExtractedData>,
+		extractionCollector: ExtractionCollector,
 		context: DataExtractorContext
 	): void {
 		if (!Array.isArray(data)) {
@@ -21,12 +21,11 @@ export class GridExtractor implements DataExtractor<ExtractedData> {
 			id: this.id,
 			name: "Array As Grid",
 			priority: 500,
-			extractData(): CommonDataTypes.Grid {
-				return {
-					kind: { array: true },
-					rows: [{ columns: data.map(d => ({ tag: d })) }],
-				};
-			},
+			extractData: () =>
+				expect<GridVisualizationData>({
+					kind: { grid: true },
+					rows: [{ columns: data.map(d => ({ tag: "" + d })) }],
+				}),
 		});
 	}
 }

data-extraction/src/js/api/default-extractors/MarkedGridExtractor.ts

@@ -0,0 +1,40 @@
+import { DataExtractor, ExtractionCollector, DataExtractorContext } from "..";
+import { LineColumnRange } from "../../../CommonDataTypes";
+import { asData, markedGrid, tryEval } from "../../helpers";
+
+export class MarkedGridFromArrayExtractor implements DataExtractor {
+	readonly id = "markedGridFromArray";
+	getExtractions(
+		data: unknown,
+		collector: ExtractionCollector,
+		context: DataExtractorContext
+	): void {
+		if (!Array.isArray(data)) {
+			return;
+		}
+		if (!Array.isArray(data[0])) {
+			return;
+		}
+
+		let markers: any;
+		if (data.length === 2 && typeof data[1] === "object") {
+			markers = data[1];
+		} else {
+			for (let i = 1; i < data.length; i++) {
+				if (typeof data[i] !== "string") {
+					return;
+				}
+			}
+			markers = tryEval(data.slice(1));
+		}
+
+		collector.addExtraction({
+			id: "markedGridFromArray",
+			name: "Marked Grid from Array",
+			priority: 1000,
+			extractData() {
+				return markedGrid(data[0], markers as any);
+			},
+		});
+	}
+}

data-extraction/src/js/api/default-extractors/ObjectGraphExtractor.ts

@@ -1,17 +1,22 @@
-import { ExtractedData } from "../../../DataExtractionResult";
+import { VisualizationData } from "../../../DataExtractionResult";
 import {
 	DataExtractor,
 	ExtractionCollector,
 	DataExtractorContext,
 } from "../DataExtractorApi";
-import { createGraph, CreateGraphEdge } from "../../helpers";
+import {
+	createGraph,
+	CreateGraphEdge,
+	createGraphFromPointers,
+} from "../../helpers";
+import { GraphNode } from "../../..";
 
-export class ObjectGraphExtractor implements DataExtractor<ExtractedData> {
+export class ObjectGraphExtractor implements DataExtractor {
 	readonly id = "object-graph";
 
 	getExtractions(
 		data: unknown,
-		collector: ExtractionCollector<ExtractedData>,
+		collector: ExtractionCollector,
 		context: DataExtractorContext
 	): void {
 		function isObject(val: unknown): val is object {
@@ -27,53 +32,83 @@ export class ObjectGraphExtractor implements DataExtractor<ExtractedData> {
 			return;
 		}
 
+		const infoSelector: (item: object) => {
+			id?: string | number;
+			edges: CreateGraphEdge<object>[];
+		} & Omit<GraphNode, "id"> = (item) => {
+			let label = "";
+			const edges = new Array<CreateGraphEdge<any>>();
+			if (item instanceof Set) {
+				label = "Set";
+				for (const value of item.values()) {
+					if (isObject(value)) {
+						edges.push({ label: "item", to: value });
+					}
+				}
+			} else if (item instanceof Map) {
+				label = "Map";
+				for (const [key, value] of item.entries()) {
+					if (isObject(value)) {
+						edges.push({ label: key, to: value });
+					}
+				}
+			} else {
+				for (const [key, val] of Object.entries(item)) {
+					if (isObject(val)) {
+						edges.push({ label: key, to: val });
+					}
+				}
+
+				const className = item.constructor
+					? item.constructor.name
+					: "?";
+				label = className;
+				if (!Array.isArray(item)) {
+					try {
+						let toStrVal = item.toString();
+						if (toStrVal !== "[object Object]") {
+							if (toStrVal.length > 15) {
+								toStrVal += ` "${toStrVal.substr(0, 15)}..."`;
+							}
+							label += `${className}: ${toStrVal}`;
+						}
+					} catch (e) {}
+				}
+			}
+
+			return {
+				shape: "box",
+				edges,
+				color: item === data ? "lightblue" : undefined,
+				label,
+			};
+		};
+
 		collector.addExtraction({
 			id: "object-graph",
 			name: "Object Graph",
-			priority: 99,
+			priority: 98,
 			extractData() {
-				return createGraph(
-					[data],
-					item => {
-						let label = "";
-						const edges = new Array<CreateGraphEdge<any>>();
-						if (item instanceof Set) {
-							label = "Set";
-							for (const value of item.values()) {
-								if (isObject(value)) {
-									edges.push({ label: "item", to: value });
-								}
-							}
-						} else if (item instanceof Map) {
-							label = "Map";
-							for (const [key, value] of item.entries()) {
-								if (isObject(value)) {
-									edges.push({ label: key, to: value });
-								}
-							}
-						} else {
-							for (const [key, val] of Object.entries(item)) {
-								if (isObject(val)) {
-									edges.push({ label: key, to: val });
-								}
-							}
-
-							const className = item.constructor
-								? item.constructor.name
-								: "?";
-							label = className;
-						}
-
-						return {
-							shape: "box",
-							edges,
-							color: item === data ? "lightblue" : undefined,
-							label,
-						};
-					},
-					{ maxSize: 50 }
-				);
+				return createGraph([data], infoSelector, { maxSize: 50 });
 			},
 		});
+
+		if (
+			data.constructor === Object &&
+			Object.values(data).every(
+				(v) => v === undefined || v === null || typeof v === "object"
+			)
+		) {
+			collector.addExtraction({
+				id: "object-graph-pointers",
+				name: "Object Graph With Pointers",
+				priority: 99,
+				extractData() {
+					return createGraphFromPointers(data as any, infoSelector, {
+						maxSize: 50,
+					});
+				},
+			});
+		}
 	}
 }

data-extraction/src/js/api/default-extractors/PlotlyDataExtractor.ts

@@ -1,17 +1,17 @@
-import { ExtractedData } from "../../../DataExtractionResult";
+import { PlotlyVisualizationData } from "../../../CommonDataTypes";
+import { expect } from "../../../util";
 import {
 	DataExtractor,
 	ExtractionCollector,
 	DataExtractorContext,
 } from "../DataExtractorApi";
-import { CommonDataTypes } from "../../../CommonDataTypes";
 
-export class PlotDataExtractor implements DataExtractor<ExtractedData> {
+export class PlotlyDataExtractor implements DataExtractor {
 	readonly id = "plot";
 
 	getExtractions(
 		data: unknown,
-		collector: ExtractionCollector<ExtractedData>,
+		collector: ExtractionCollector,
 		context: DataExtractorContext
 	): void {
 		if (!Array.isArray(data)) {
@@ -25,14 +25,13 @@ export class PlotDataExtractor implements DataExtractor<ExtractedData> {
 			id: "plot-y",
 			name: "Plot as y-Values",
 			priority: 1001,
-			extractData() {
-				return {
+			extractData: () =>
+				expect<PlotlyVisualizationData>({
 					kind: {
 						plotly: true,
 					},
 					data: [{ y: data }],
-				} as CommonDataTypes.Plotly;
-			},
+				}),
 		});
 	}
 }

data-extraction/src/js/api/default-extractors/StringDiffExtractor.ts

@@ -0,0 +1,33 @@
+import {
+	DataExtractor,
+	DataExtractorContext,
+	ExtractionCollector,
+} from "../..";
+
+export class StringDiffExtractor implements DataExtractor {
+	public readonly id = "string-diff";
+
+	public getExtractions(
+		data: unknown,
+		collector: ExtractionCollector,
+		context: DataExtractorContext
+	) {
+		if (
+			Array.isArray(data) &&
+			data.length === 2 &&
+			typeof data[0] === "string" &&
+			typeof data[1] === "string"
+		) {
+			collector.addExtraction({
+				id: "string-diff",
+				name: "String Diff",
+				priority: 1300,
+				extractData: () => ({
+					kind: { text: true },
+					text: data[0],
+					otherText: data[1],
+				}),
+			});
+		}
+	}
+}

data-extraction/src/js/api/default-extractors/StringRangeExtractor.ts

@@ -0,0 +1,116 @@
+import { DataExtractor, ExtractionCollector, DataExtractorContext } from "..";
+import { LineColumnRange } from "../../../CommonDataTypes";
+import { asData } from "../../helpers";
+
+export class StringRangeExtractor implements DataExtractor {
+	readonly id = "stringRange";
+	getExtractions(
+		data: unknown,
+		collector: ExtractionCollector,
+		context: DataExtractorContext
+	): void {
+		if (!Array.isArray(data)) {
+			return;
+		}
+		if (typeof data[0] !== "string") {
+			return;
+		}
+
+		const text = data[0];
+
+		const decorations1: { range: LineColumnRange; label?: string }[] = [];
+		const decorations2: { range: LineColumnRange; label?: string }[] = [];
+
+		function offsetToLineColumn(offset: number) {
+			let line = 0;
+			let column = 0;
+			for (let idx = 0; idx < text.length; idx++) {
+				if (idx === offset) {
+					return { line, column };
+				}
+				if (text[idx] === "\n") {
+					line++;
+					column = 0;
+				} else {
+					column++;
+				}
+			}
+			return { line, column }; // TODO
+		}
+
+		if (
+			data.length === 2 &&
+			typeof data[1] === "object" &&
+			!Array.isArray(data[1])
+		) {
+			data = [data[0], ...Object.values(data[1])] as [
+				number | [number, number]
+			][];
+		}
+
+		for (let item of (data as (number | [number, number])[]).slice(1)) {
+			if (typeof item === "string") {
+				try {
+					item = context.evalFn(item);
+				} catch (e) {
+					return;
+				}
+				if (item === undefined) {
+					continue;
+				}
+			}
+
+			if (typeof item === "number") {
+				const pos = offsetToLineColumn(item);
+				decorations1.push({ range: { start: pos, end: pos } });
+				decorations2.push({
+					range: {
+						start: pos,
+						end: { line: pos.line, column: pos.column + 1 },
+					},
+				});
+			} else if (
+				Array.isArray(item) &&
+				item.length === 2 &&
+				typeof item[0] === "number" &&
+				typeof item[1] === "number"
+			) {
+				decorations1.push({
+					range: {
+						start: offsetToLineColumn(item[0]),
+						end: offsetToLineColumn(item[1]),
+					},
+				});
+				decorations2.push(decorations1[decorations1.length - 1]);
+			} else {
+				return;
+			}
+		}
+
+		collector.addExtraction({
+			priority: 1200,
+			id: "stringRange",
+			name: "String Range",
+			extractData() {
+				return asData({
+					kind: { text: true },
+					text,
+					decorations: decorations1,
+				});
+			},
+		});
+
+		collector.addExtraction({
+			priority: 1000,
+			id: "stringRangeFullCharacters",
+			name: "String Range (Full Character)",
+			extractData() {
+				return asData({
+					kind: { text: true },
+					text,
+					decorations: decorations2,
+				});
+			},
+		});
+	}
+}

data-extraction/src/js/api/default-extractors/TableExtractor.ts

@@ -0,0 +1,54 @@
+import { isAssertionExpression } from "typescript";
+import { DataExtractor, ExtractionCollector, DataExtractorContext } from "..";
+import { TableVisualizationData } from "../../../CommonDataTypes";
+import { expect } from "../../../util";
+
+function assert<T>(value: unknown): asserts value {}
+
+export class TableDataExtractor implements DataExtractor {
+	readonly id = "table";
+
+	getExtractions(
+		data: unknown,
+		collector: ExtractionCollector,
+		context: DataExtractorContext
+	): void {
+		if (!Array.isArray(data)) {
+			return;
+		}
+		if (
+			!data.every((d) => typeof d === "object" && d && !Array.isArray(d))
+		) {
+			return;
+		}
+		assert<object[]>(data);
+
+		collector.addExtraction({
+			id: "table",
+			name: "Table",
+			priority: 1000,
+			extractData() {
+				return expect<TableVisualizationData>({
+					kind: {
+						table: true,
+					},
+					rows: data,
+				});
+			},
+		});
+
+		collector.addExtraction({
+			id: "table-with-type-name",
+			name: "Table (With Type Name)",
+			priority: 950,
+			extractData() {
+				return expect<TableVisualizationData>({
+					kind: {
+						table: true,
+					},
+					rows: data.map((d) => ({ type: d.constructor.name, ...d })),
+				});
+			},
+		});
+	}
+}

data-extraction/src/js/api/default-extractors/ToStringExtractor.ts

@@ -1,16 +1,17 @@
-import { ExtractedData } from "../../../DataExtractionResult";
+import { MonacoTextVisualizationData } from "../../../CommonDataTypes";
+import { expect } from "../../../util";
 import {
 	DataExtractor,
 	ExtractionCollector,
 	DataExtractorContext,
 } from "../DataExtractorApi";
 
-export class ToStringDataExtractor implements DataExtractor<ExtractedData> {
+export class ToStringDataExtractor implements DataExtractor {
 	readonly id = "to-string";
 
 	getExtractions(
 		data: unknown,
-		collector: ExtractionCollector<ExtractedData>,
+		collector: ExtractionCollector,
 		context: DataExtractorContext
 	): void {
 		collector.addExtraction({
@@ -18,12 +19,12 @@ export class ToStringDataExtractor implements DataExtractor<ExtractedData> {
 			name: "To String",
 			priority: 100,
 			extractData() {
-				return {
+				return expect<MonacoTextVisualizationData>({
 					kind: {
 						text: true,
 					},
 					text: "" + data,
-				};
+				});
 			},
 		});
 	}

data-extraction/src/js/api/default-extractors/TypeScriptDataExtractors.ts

@@ -1,19 +1,19 @@
 import * as ts from "typescript"; // Only compile-time import!
+import { AstTreeNode } from "../../..";
+import { AstTreeVisualizationData } from "../../../CommonDataTypes";
+import { expect } from "../../../util";
 import {
 	DataExtractor,
 	ExtractionCollector,
 	DataExtractorContext,
 } from "../DataExtractorApi";
-import { CommonDataTypes } from "../../../CommonDataTypes";
 
-// This class is self contained and can be injected into both nodejs and browser environments.
-export class TypeScriptAstDataExtractor
-	implements DataExtractor<CommonDataTypes.Ast> {
+export class TypeScriptAstDataExtractor implements DataExtractor {
 	readonly id = "typescript-ast";
 
 	getExtractions(
 		data: unknown,
-		collector: ExtractionCollector<CommonDataTypes.Ast>,
+		collector: ExtractionCollector,
 		{ evalFn }: DataExtractorContext
 	): void {
 		if (!data) {
@@ -40,114 +40,21 @@ export class TypeScriptAstDataExtractor
 			return;
 		}
 
-		function findKey(value: any, object: any): string | null {
-			for (var key in object) {
-				if (key.startsWith("_")) continue;
-
-				var member = object[key];
-				if (member === value) return key;
-
-				if (Array.isArray(member) && member.indexOf(value) !== -1) {
-					return key;
-				}
-			}
-
-			return null;
-		}
-
-		function getChildren(node: ts.Node): ts.Node[] {
-			const result = new Array<ts.Node>();
-			tsApi.forEachChild(node, n => {
-				result.push(n);
-			});
-			return result;
-		}
-
-		function toTreeNode(
-			node: ts.Node,
-			memberName: string,
-			marked: Set<ts.Node>,
-			emphasizedValueFn: (node: ts.Node) => string | undefined
-		): CommonDataTypes.Ast["root"] {
-			const name = tsApi.SyntaxKind[node.kind];
-			const children = getChildren(node)
-				.map((childNode, idx) => {
-					let parentPropertyName = findKey(childNode, node) || "";
-					if (childNode.kind == tsApi.SyntaxKind.SyntaxList) {
-						const children = getChildren(childNode);
-						children.some(c => {
-							parentPropertyName = findKey(c, node) || "";
-							return !!parentPropertyName;
-						});
-
-						if (children.length === 0) return null!;
-					}
-
-					if (node.kind == tsApi.SyntaxKind.SyntaxList) {
-						parentPropertyName = "" + idx;
-					}
-
-					return toTreeNode(
-						childNode,
-						parentPropertyName,
-						marked,
-						emphasizedValueFn
-					);
-				})
-				.filter(c => c !== null);
-
-			let value: string | undefined = undefined;
-
-			if (tsApi.isIdentifier(node)) {
-				value = node.text || (node.escapedText as string);
-			} else if (tsApi.isLiteralExpression(node)) {
-				value = node.text;
-			}
-
-			return {
-				name: name,
-				id: memberName,
-				children: children,
-				data: {
-					length: node.end - node.pos,
-					position: node.pos,
-				},
-				emphasizedValue: emphasizedValueFn(node),
-				isMarked: marked.has(node),
-				value,
-			};
-		}
-
-		function isNode(node: unknown): node is ts.Node {
-			return (
-				typeof node === "object" &&
-				node !== null &&
-				(tsApi.isToken(node as any) || (tsApi as any).isNode(node))
-			);
-		}
-
-		function getSourceFile(node: ts.Node | any): ts.SourceFile {
-			if (!node) {
-				throw new Error("Detached node");
-			}
-			if (tsApi.isSourceFile(node)) {
-				return node;
-			}
-			if (!("getSourceFile" in node)) {
-				return getSourceFile(node.parent);
-			}
-			return node.getSourceFile();
-		}
+		const helper = new Helper(tsApi);
 
 		let rootSourceFile: ts.SourceFile | undefined = undefined;
 		let rootNode: ts.Node | undefined = undefined;
 		let marked: Set<ts.Node>;
 		let fn: (n: ts.Node) => string | undefined = (n: ts.Node) => undefined;
-		if (Array.isArray(data) && data.every(isNode) && data.length > 0) {
-			rootSourceFile = getSourceFile(data[0] as ts.Node);
+		if (
+			Array.isArray(data) &&
+			data.every(helper.isNode) &&
+			data.length > 0
+		) {
+			rootSourceFile = helper.getSourceFile(data[0] as ts.Node);
 			marked = new Set(data);
-		} else if (isNode(data)) {
-			rootSourceFile = getSourceFile(data);
+		} else if (helper.isNode(data)) {
+			rootSourceFile = helper.getSourceFile(data);
 			marked = new Set([data]);
 		} else if (typeof data === "object" && data) {
 			marked = new Set();
@@ -162,15 +69,18 @@ export class TypeScriptAstDataExtractor
 						rootNode = item;
 					}
 					let nodes: Array<ts.Node>;
-					if (isNode(item)) {
+					if (helper.isNode(item)) {
 						nodes = [item];
-					} else if (Array.isArray(item) && item.every(isNode)) {
+					} else if (
+						Array.isArray(item) &&
+						item.every(helper.isNode)
+					) {
 						nodes = item;
 					} else {
 						return;
 					}
 					if (nodes.length > 0 && !rootSourceFile) {
-						rootSourceFile = getSourceFile(nodes[0]);
+						rootSourceFile = helper.getSourceFile(nodes[0]);
 					}
 					for (const n of nodes) {
 						marked.add(n);
@@ -192,18 +102,147 @@ export class TypeScriptAstDataExtractor
 			name: "TypeScript AST",
 			priority: 1000,
 			extractData() {
-				return {
+				return expect<AstTreeVisualizationData>({
 					kind: { text: true, tree: true, ast: true },
-					root: toTreeNode(
+					root: helper.toTreeNode(
 						rootNode || finalRootSourceFile,
 						"root",
+						"",
 						marked,
 						fn
 					),
 					text: finalRootSourceFile.text,
 					fileName: "index.ts",
-				};
+				});
 			},
 		});
 	}
 }
+
+class Helper {
+	constructor(private readonly tsApi: typeof ts) {}
+
+	getPropertyNameInParent(value: any, parent: any): string | undefined {
+		for (const propertyName in parent) {
+			if (propertyName.startsWith("_")) continue;
+
+			const member = parent[propertyName];
+			if (member === value) {
+				return propertyName;
+			}
+
+			if (Array.isArray(member)) {
+				const index = member.indexOf(value);
+				if (index !== -1) {
+					return `${propertyName}[${index}]`;
+				}
+			}
+		}
+
+		return undefined;
+	}
+
+	getChildren(node: ts.Node): ts.Node[] {
+		const result = new Array<ts.Node>();
+		this.tsApi.forEachChild(node, n => {
+			result.push(n);
+		});
+		return result;
+	}
+
+	toTreeNode(
+		node: ts.Node,
+		memberName: string,
+		segmentName: string,
+		marked: Set<ts.Node>,
+		emphasizedValueFn: (node: ts.Node) => string | undefined
+	): AstTreeNode {
+		const name = this.tsApi.SyntaxKind[node.kind];
+		const children = this.getChildren(node)
+			.map((childNode, idx) => {
+				let parentPropertyName =
+					this.getPropertyNameInParent(childNode, node) || "";
+
+				if (childNode.kind == this.tsApi.SyntaxKind.SyntaxList) {
+					const children = this.getChildren(childNode);
+					for (const c of children) {
+						const name =
+							this.getPropertyNameInParent(c, node) || "";
+						if (name) {
+							parentPropertyName = name;
+							break;
+						}
+					}
+				}
+
+				let segmentName = "." + parentPropertyName;
+				if (node.kind == this.tsApi.SyntaxKind.SyntaxList) {
+					parentPropertyName = "" + idx;
+					segmentName = `[${idx}]`;
+				}
+
+				return this.toTreeNode(
+					childNode,
+					parentPropertyName,
+					segmentName,
+					marked,
+					emphasizedValueFn
+				);
+			})
+			.filter(c => c !== null);
+
+		let value: string | undefined = undefined;
+
+		if (this.tsApi.isIdentifier(node)) {
+			value = node.text || (node.escapedText as string);
+		} else if (this.tsApi.isLiteralExpression(node)) {
+			value = node.text;
+		}
+
+		const items: AstTreeNode["items"] = [
+			{ text: `${memberName}: `, emphasis: "style1" },
+			{ text: name },
+		];
+
+		const emphasizedVal = emphasizedValueFn(node);
+		if (value) {
+			items.push({ text: value, emphasis: "style2" });
+		}
+		if (emphasizedVal) {
+			items.push({ text: emphasizedVal, emphasis: "style3" });
+		}
+
+		return {
+			items,
+			children: children,
+			segment: segmentName,
+			span: {
+				length: node.end - node.pos,
+				start: node.pos,
+			},
+			isMarked: marked.has(node),
+		};
+	}
+
+	isNode = (node: unknown): node is ts.Node => {
+		return (
+			typeof node === "object" &&
+			node !== null &&
+			(this.tsApi.isToken(node as any) ||
+				(this.tsApi as any).isNode(node))
+		);
+	};
+
+	getSourceFile(node: ts.Node | any): ts.SourceFile {
+		if (!node) {
+			throw new Error("Detached node");
+		}
+		if (this.tsApi.isSourceFile(node)) {
+			return node;
+		}
+		if (!("getSourceFile" in node)) {
+			return this.getSourceFile(node.parent);
+		}
+		return node.getSourceFile();
+	}
+}

data-extraction/src/js/api/default-extractors/registerDefaultDataExtractors.ts

@@ -1,12 +1,16 @@
 import { DataExtractorApi } from "../DataExtractorApi";
 import { TypeScriptAstDataExtractor } from "./TypeScriptDataExtractors";
 import { AsIsDataExtractor } from "./AsIsDataExtractor";
-import { GetDebugVisualizationDataExtractor } from "./GetDebugVisualizationDataExtractor";
+import { GetVisualizationDataExtractor } from "./GetDebugVisualizationDataExtractor";
 import { ToStringDataExtractor } from "./ToStringExtractor";
-import { PlotDataExtractor } from "./PlotlyDataExtractor";
+import { PlotlyDataExtractor } from "./PlotlyDataExtractor";
 import { ObjectGraphExtractor } from "./ObjectGraphExtractor";
 import { getDataExtractorApi } from "../injection";
 import { GridExtractor } from "./GridExtractor";
+import { TableDataExtractor } from "./TableExtractor";
+import { StringDiffExtractor } from "./StringDiffExtractor";
+import { StringRangeExtractor } from "./StringRangeExtractor";
+import { MarkedGridFromArrayExtractor } from "./MarkedGridExtractor";
 
 /**
  * The default data extractors should be registered by VS Code automatically.
@@ -18,11 +22,15 @@ export function registerDefaultExtractors(
 	for (const item of [
 		new TypeScriptAstDataExtractor(),
 		new AsIsDataExtractor(),
-		new GetDebugVisualizationDataExtractor(),
+		new GetVisualizationDataExtractor(),
 		new ToStringDataExtractor(),
-		new PlotDataExtractor(),
+		new PlotlyDataExtractor(),
 		new ObjectGraphExtractor(),
 		new GridExtractor(),
+		new TableDataExtractor(),
+		new StringDiffExtractor(),
+		new StringRangeExtractor(),
+		new MarkedGridFromArrayExtractor(),
 	]) {
 		api.registerExtractor(item);
 	}

data-extraction/src/js/api/index.ts

@@ -1,2 +1,4 @@
 export * from "./DataExtractorApi";
 export * from "./injection";
+export { DataExtractorApiImpl } from "./DataExtractorApiImpl";
+export * from "./LoadDataExtractorsFn";

data-extraction/src/js/api/injection.ts

@@ -1,8 +1,9 @@
 import * as fs from "fs";
+import { getGlobal } from "../../getGlobal";
+import * as globalHelpers from "../global-helpers";
+import * as helpers from "../helpers";
 import { DataExtractorApi } from "./DataExtractorApi";
 import { DataExtractorApiImpl } from "./DataExtractorApiImpl";
-import * as helpers from "../helpers";
-import * as globalHelpers from "../global-helpers";
 
 /**
  * Returns standalone JS code representing an expression that initializes the data extraction API.
@@ -20,22 +21,19 @@ export function getExpressionToInitializeDataExtractorApi(): string {
 }
 
 /**
- * Returns standalone JS code representing an expression returns the data extraction API.
+ * Returns standalone JS code representing an expression that returns the data extraction API.
  * This expression returns an object of type `DataExtractorApi`.
- * If the API must be initialized with `getExpressionToInitializeDataExtractorApi()`,
- * it throws an exception containing the text of `ApiHasNotBeenInitializedCode`.
  * This function is called in the VS Code extension, the expression is evaluated in the debugee.
  */
 export function getExpressionForDataExtractorApi(): string {
 	return `((${selfContainedGetInitializedDataExtractorApi.toString()})())`;
 }
 
-const apiKey = "@hediet/data-extractor-api/v2";
+const apiKey = "@hediet/data-extractor-api/v3";
 
 export function getDataExtractorApi(): DataExtractorApi {
 	installHelpers();
-	const globalObj =
-		typeof window === "object" ? (window as any) : (global as any);
+	const globalObj = getGlobal();
 	if (!globalObj[apiKey]) {
 		globalObj[apiKey] = new DataExtractorApiImpl();
 	}
@@ -46,29 +44,38 @@ export function getDataExtractorApi(): DataExtractorApi {
  * This code is used to detect if the API has not been initialized yet.
  * @internal
  */
-export const ApiHasNotBeenInitializedCode = "EgH0cybXij1jYUozyakO" as const;
+ export const ApiHasNotBeenInitializedCode = "EgH0cybXij1jYUozyakO" as const;
 
-/**
- * @internal
- */
-function selfContainedGetInitializedDataExtractorApi(): DataExtractorApi {
-	const globalObj =
-		typeof window === "object" ? (window as any) : (global as any);
-	const key: typeof apiKey = "@hediet/data-extractor-api/v2";
-	let api: DataExtractorApi | undefined = globalObj[key];
-	if (!api) {
-		const code: typeof ApiHasNotBeenInitializedCode =
-			"EgH0cybXij1jYUozyakO";
-		throw new Error(
-			`Data Extractor API has not been initialized. Code: ${code}`
-		);
+ /**
+  * @internal
+  */
+ function selfContainedGetInitializedDataExtractorApi(): DataExtractorApi {
+	function getGlobal(): any {
+		if (typeof globalThis === "object") {
+			return globalThis;
+		} else if (typeof global === "object") {
+			return global;
+		} else if (typeof window === "object") {
+			return window;
+		}
+		throw new Error("No global available");
 	}
-	return api;
-}
+
+	 const globalObj = getGlobal();
+	 const key: typeof apiKey = "@hediet/data-extractor-api/v3";
+	 let api: DataExtractorApi | undefined = globalObj[key];
+	 if (!api) {
+		 const code: typeof ApiHasNotBeenInitializedCode =
+			 "EgH0cybXij1jYUozyakO";
+		 throw new Error(
+			 `Data Extractor API has not been initialized. Code: ${code}`
+		 );
+	 }
+	 return api;
+ }
 
 export function installHelpers(): void {
-	const globalObj =
-		typeof window === "object" ? (window as any) : (global as any);
+	const globalObj = getGlobal();
 	// `hediet` as prefix to avoid name collision (I own `hediet.de`).
 	globalObj["hedietDbgVis"] = { ...helpers, ...globalHelpers };
 }

data-extraction/src/js/helpers/asData.ts

@@ -0,0 +1,6 @@
+import { KnownVisualizationData } from "../../CommonDataTypes";
+import { VisualizationData } from "../../DataExtractionResult";
+
+export function asData(data: KnownVisualizationData): VisualizationData {
+	return data;
+}

data-extraction/src/js/helpers/cache.ts

@@ -0,0 +1,31 @@
+import { DataExtractorApiImpl } from "../api";
+
+const cached = new Map<string, any>();
+
+/**
+ * Evaluates an expression
+ */
+export function cache<T>(
+	expression: string | (() => T),
+	id: string | number | undefined = undefined
+): T {
+	let resultFn: () => any;
+	let key: string;
+	if (typeof expression === "string") {
+		const context = DataExtractorApiImpl.lastContext!;
+		resultFn = () => context.evalFn(expression);
+		key = JSON.stringify({ expr: expression, id });
+	} else {
+		resultFn = () => expression();
+		key = JSON.stringify({ expr: expression.toString(), id });
+	}
+
+	if (cached.has(key)) {
+		return cached.get(key);
+	}
+
+	const result = resultFn();
+	cached.set(key, result);
+
+	return result;
+}

data-extraction/src/js/helpers/createGraph.ts

@@ -1,10 +1,11 @@
 import {
-	CommonDataTypes,
-	EdgeGraphData,
-	NodeGraphData,
+	GraphEdge,
+	GraphNode,
+	GraphVisualizationData,
 } from "../../CommonDataTypes";
 
-export type CreateGraphEdge<T> = { to: T } & Omit<EdgeGraphData, "from" | "to">;
+export type CreateGraphEdge<T> = ({ to: T } | { from: T } | { include: T }) &
+	Omit<GraphEdge, "from" | "to">;
 
 /**
  * Given a list of roots, it creates a graph by following their edges recursively.
@@ -17,10 +18,10 @@ export function createGraph<T>(
 	) => {
 		id?: string | number;
 		edges: CreateGraphEdge<T>[];
-	} & Omit<NodeGraphData, "id">,
+	} & Omit<GraphNode, "id">,
 	options: { maxSize?: number } = {}
-): CommonDataTypes.Graph {
-	const r: CommonDataTypes.Graph = {
+): GraphVisualizationData {
+	const r: GraphVisualizationData = {
 		kind: {
 			graph: true,
 		},
@@ -58,13 +59,31 @@ export function createGraph<T>(
 		const fromId = getId(item);
 		r.nodes.push({ ...nodeInfo, id: fromId, ["edges" as any]: undefined });
 		for (const e of nodeInfo.edges) {
-			const toId = getId(e.to);
-			r.edges.push({
-				...e,
-				from: fromId,
-				to: toId,
-			});
-			let shouldPush = !processed.has(e.to);
+			let other: T;
+			let toId: string | undefined;
+			let fromId_: string | undefined;
+			if ("to" in e) {
+				other = e.to;
+				toId = getId(e.to);
+				fromId_ = fromId;
+			} else if ("from" in e) {
+				other = e.from;
+				toId = getId(e.from);
+				fromId_ = fromId;
+			} else if ("include" in e) {
+				other = e.include;
+			} else {
+				throw new Error("Every edge must either have 'to' or 'from'");
+			}
+
+			if (fromId_ !== undefined && toId !== undefined) {
+				r.edges.push({
+					...e,
+					from: fromId_,
+					to: toId,
+				});
+			}
+			let shouldPush = !processed.has(other);
 			if (
 				options.maxSize &&
 				processed.size + queue.length > options.maxSize
@@ -72,7 +91,7 @@ export function createGraph<T>(
 				shouldPush = false;
 			}
 			if (shouldPush) {
-				queue.push({ item: e.to, dist: dist + 1 });
+				queue.push({ item: other, dist: dist + 1 });
 			}
 		}
 	}

data-extraction/src/js/helpers/createGraphFromPointers.ts

@@ -1,4 +1,4 @@
-import { NodeGraphData, CommonDataTypes } from "../../CommonDataTypes";
+import { GraphNode, GraphVisualizationData } from "../../CommonDataTypes";
 import { CreateGraphEdge, createGraph } from "./createGraph";
 
 /**
@@ -7,13 +7,12 @@ import { CreateGraphEdge, createGraph } from "./createGraph";
  */
 export function createGraphFromPointers<T>(
 	roots: Record<string, T | undefined | null>,
-	infoSelector: (
-		item: T
-	) => {
+	infoSelector: (item: T) => {
 		id?: string | number;
 		edges: CreateGraphEdge<T>[];
-	} & Omit<NodeGraphData, "id">
-): CommonDataTypes.Graph {
+	} & Omit<GraphNode, "id">,
+	options: { maxSize?: number } = {}
+): GraphVisualizationData {
 	const marker = {};
 
 	interface Pointer {
@@ -28,18 +27,27 @@ export function createGraphFromPointers<T>(
 		value,
 	}));
 
-	return createGraph<T | Pointer>(items, item => {
-		if ("marker" in item && item["marker"] === marker) {
-			return {
-				id: "label____" + item.name,
-				color: "orange",
-				label: item.name,
-				edges: [{ to: item.value!, color: "orange", label: "" }].filter(
-					t => !!t.to
-				),
-			};
-		} else {
-			return infoSelector(item as T);
-		}
-	});
+	return createGraph<T | Pointer>(
+		items,
+		(item) => {
+			if (
+				typeof item === "object" &&
+				item &&
+				"marker" in item &&
+				item["marker"] === marker
+			) {
+				return {
+					id: "label____" + item.name,
+					color: "orange",
+					label: item.name,
+					edges: [
+						{ to: item.value!, color: "orange", label: "" },
+					].filter((t) => !!t.to),
+				};
+			} else {
+				return infoSelector(item as T);
+			}
+		},
+		options
+	);
 }

data-extraction/src/js/helpers/find.ts

@@ -0,0 +1,136 @@
+import { DataExtractorApiImpl } from "../api";
+
+export function find(predicate: (obj: unknown) => boolean): unknown {
+	const processed = new Set();
+	if (!DataExtractorApiImpl.lastContext) {
+		throw new Error("No data extractor context!");
+	}
+
+	const values = Object.values(
+		DataExtractorApiImpl.lastContext.variablesInScope
+	);
+	const queue = [
+		...values.map((v) => {
+			try {
+				return v();
+			} catch (e) {
+				return undefined;
+			}
+		}),
+	];
+
+	let i = 10000;
+	while (i > 0) {
+		i--;
+
+		const top = queue.shift();
+		processed.add(top);
+
+		if (predicate(top)) {
+			return top;
+		}
+
+		if (typeof top === "object" && top) {
+			for (const val of Object.values(top)) {
+				if (!processed.has(val)) {
+					processed.add(val);
+					queue.push(val);
+				}
+			}
+		}
+	}
+
+	return undefined;
+}
+
+export function findVar(
+	options: { nameSimilarTo?: string; ctor?: string },
+	predicate?: (value: any) => boolean
+): unknown | undefined {
+	if (!DataExtractorApiImpl.lastContext) {
+		throw new Error("No data extractor context!");
+	}
+
+	let bestValue = undefined;
+	let bestValueScore = undefined; // minimized
+
+	for (const [name, value] of Object.entries(
+		DataExtractorApiImpl.lastContext.variablesInScope
+	)) {
+		const v = value();
+		if (options.ctor !== undefined) {
+			if (
+				typeof v !== "object" ||
+				!v ||
+				v.constructor.name !== options.ctor
+			) {
+				continue;
+			}
+		}
+		if (predicate) {
+			if (!predicate(v)) {
+				continue;
+			}
+		}
+		let score = 0;
+		if (options.nameSimilarTo !== undefined) {
+			score += similarityScore(name, options.nameSimilarTo);
+		} else {
+			return v;
+		}
+		if (bestValueScore === undefined || score < bestValueScore) {
+			bestValue = v;
+			bestValueScore = score;
+		}
+	}
+
+	return bestValue;
+}
+
+function similarityScore(a: string, b: string): number {
+	const distance = levenshteinDistance(a, b);
+
+	const aSorted = a.split("").sort().join("");
+	const bSorted = b.split("").sort().join("");
+	const distance2 = levenshteinDistance(aSorted, bSorted);
+
+	return distance * 10 + distance2;
+}
+
+function levenshteinDistance(a: string, b: string): number {
+	if (a.length === 0) return b.length;
+	if (b.length === 0) return a.length;
+
+	const matrix = [];
+
+	// increment along the first column of each row
+	let i;
+	for (i = 0; i <= b.length; i++) {
+		matrix[i] = [i];
+	}
+
+	// increment each column in the first row
+	let j;
+	for (j = 0; j <= a.length; j++) {
+		matrix[0][j] = j;
+	}
+
+	// Fill in the rest of the matrix
+	for (i = 1; i <= b.length; i++) {
+		for (j = 1; j <= a.length; j++) {
+			if (b.charAt(i - 1) == a.charAt(j - 1)) {
+				matrix[i][j] = matrix[i - 1][j - 1];
+			} else {
+				matrix[i][j] = Math.min(
+					matrix[i - 1][j - 1] + 1, // substitution
+					Math.min(
+						matrix[i][j - 1] + 1, // insertion
+						matrix[i - 1][j] + 1
+					)
+				); // deletion
+			}
+		}
+	}
+
+	return matrix[b.length][a.length];
+}

data-extraction/src/js/helpers/index.ts

@@ -2,3 +2,6 @@ export * from "./createGraph";
 export * from "./createGraphFromPointers";
 export * from "./tryEval";
 export * from "./markedGrid";
+export * from "./cache";
+export * from "./asData";
+export * from "./find";

data-extraction/src/js/helpers/markedGrid.ts

@@ -1,16 +1,31 @@
-import { CommonDataTypes } from "../../CommonDataTypes";
+import { GridVisualizationData } from "../../CommonDataTypes";
 
 export function markedGrid(
-	arr: any[],
-	marked: Record<string, number>
-): CommonDataTypes.Grid {
+	arr: unknown[],
+	marked: Record<string, number | undefined>
+): GridVisualizationData {
+	if (!Array.isArray(arr)) {
+		arr = [...(arr as any)];
+	}
+
 	return {
-		kind: { array: true },
-		rows: [{ columns: arr.map(d => ({ tag: d })) }],
-		markers: Object.entries(marked).map(([key, val]) => ({
-			id: key,
-			row: 0,
-			column: val,
-		})),
+		kind: { grid: true },
+		rows: [
+			{
+				columns: arr.map((d) => ({
+					content: "" + d,
+					tag: "" + d,
+				})),
+			},
+		],
+		markers: marked
+			? Object.entries(marked)
+					.map(([key, val]) => ({
+						id: "" + key,
+						row: 0,
+						column: val!,
+					}))
+					.filter((c) => c.column !== undefined)
+			: undefined,
 	};
 }

data-extraction/src/js/helpers/tryEval.ts

@@ -30,17 +30,17 @@ export function tryEval(
 	obj: Record<string, string> | string[] | string
 ): Record<string, unknown> | unknown {
 	const result: Record<string, unknown> = {};
-	const evalFn = DataExtractorApiImpl.lastEvalFn!;
+	const context = DataExtractorApiImpl.lastContext!;
 	if (Array.isArray(obj)) {
 		for (const val of obj) {
 			try {
-				result[val] = evalFn(val);
+				result[val] = context.evalFn(val);
 			} catch (e) {}
 		}
 	} else {
 		for (const [key, val] of Object.entries(obj)) {
 			try {
-				result[key] = evalFn(val);
+				result[key] = context.evalFn(val);
 			} catch (e) {}
 		}
 	}

data-extraction/src/util.ts

@@ -0,0 +1,3 @@
+export function expect<T>(data: T): T {
+	return data;
+}

data-extraction/test/main.test.ts

@@ -0,0 +1,13 @@
+import { DataExtractorApiImpl } from "../";
+
+describe("extractor", () => {
+	it("should not crash", () => {
+		const dataExtractor = new DataExtractorApiImpl();
+		dataExtractor.registerDefaultExtractors();
+		const result = dataExtractor.getData(
+			() => [1, 2, 3],
+			() => null!,
+			undefined
+		);
+	});
+});

data-extraction/test/tsconfig.json

@@ -3,14 +3,14 @@
 		"target": "esnext",
 		"module": "commonjs",
 		"strict": true,
-		"outDir": "dist",
 		"skipLibCheck": true,
-		"rootDir": "./src",
+		"rootDir": "./",
 		"resolveJsonModule": true,
 		"declaration": true,
 		"declarationMap": true,
 		"newLine": "LF",
-		"sourceMap": true
+		"sourceMap": true,
+		"noEmit": true
 	},
-	"include": ["./src/**/*"]
+	"include": ["./**/*"]
 }

data-extraction/tsconfig.json

@@ -1,9 +1,9 @@
 {
 	"compilerOptions": {
-		"target": "esnext",
+		"target": "ES2018",
 		"module": "commonjs",
 		"strict": true,
-		"outDir": "dist",
+		"outDir": "./dist",
 		"skipLibCheck": true,
 		"rootDir": "./src",
 		"resolveJsonModule": true,

data-extraction/webpack.config.js

@@ -1,2 +0,0 @@
-require("ts-node").register();
-module.exports = require("./webpack.config.ts");

data-extraction/webpack.config.ts

@@ -1,6 +1,6 @@
-import * as webpack from "webpack";
-import path = require("path");
 import { CleanWebpackPlugin } from "clean-webpack-plugin";
+import * as path from "path";
+import * as webpack from "webpack";
 
 const r = (file: string) => path.resolve(__dirname, file);
 
@@ -36,7 +36,7 @@ module.exports = {
 	},
 	plugins: [
 		new CleanWebpackPlugin({
-			protectWebpackAssets: true,
+			//protectWebpackAssets: true,
 			cleanAfterEveryBuildPatterns: ["!**/*.d.ts", "!**/*.d.ts.map"],
 		}),
 	],

demo/.vscode/launch.json

@@ -1,89 +0,0 @@
-{
-	// Use IntelliSense to find out which attributes exist for C# debugging
-	// Use hover for the description of the existing attributes
-	// 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",
-			"name": "TypeScript - Demo: Custom Data Extractor",
-			"program": "${workspaceFolder}/js/dist/demo_custom-data-extractor",
-			"skipFiles": ["<node_internals>/**"],
-			"preLaunchTask": "typescript-watch"
-		},
-		{
-			"type": "node",
-			"request": "launch",
-			"name": "TypeScript - Demo: Doubly Linked List",
-			"program": "${workspaceFolder}/js/dist/demo_doubly-linked-list",
-			"skipFiles": ["<node_internals>/**"],
-			"preLaunchTask": "typescript-watch"
-		},
-		{
-			"type": "node",
-			"request": "launch",
-			"name": "TypeScript - Demo: Sorting",
-			"program": "${workspaceFolder}/js/dist/demo_sorting",
-			"skipFiles": ["<node_internals>/**"],
-			"preLaunchTask": "typescript-watch"
-		},
-		{
-			"type": "node",
-			"request": "launch",
-			"name": "TypeScript - Demo: Random Walks",
-			"program": "${workspaceFolder}/js/dist/demo_random-walks",
-			"skipFiles": ["<node_internals>/**"],
-			"preLaunchTask": "typescript-watch"
-		},
-		{
-			"type": "node",
-			"request": "launch",
-			"name": "TypeScript - Demo: TypeScript ASTs",
-			"program": "${workspaceFolder}/js/dist/demo_typescript-asts",
-			"skipFiles": ["<node_internals>/**"],
-			"preLaunchTask": "typescript-watch",
-			"cwd": "${workspaceFolder}/js"
-		},
-		{
-			"type": "node",
-			"request": "launch",
-			"name": "JavaScript - Demo: Singly Linked List",
-			"program": "${workspaceFolder}/js/src/demo_singly-linked-list",
-			"skipFiles": ["<node_internals>/**"],
-			"preLaunchTask": "typescript-watch"
-		},
-		{
-			"name": "C# - Demo: Linked List",
-			"type": "coreclr",
-			"request": "launch",
-			"preLaunchTask": "csharp-build",
-			"program": "${workspaceFolder}/csharp/bin/Debug/netcoreapp3.1/demo.dll",
-			"args": [],
-			"cwd": "${workspaceFolder}/csharp",
-			"console": "internalConsole",
-			"stopAtEntry": false
-		},
-		{
-			"name": "PHP - Demo",
-			"type": "php",
-			"request": "launch",
-			"program": "${workspaceFolder}/php/demo.php",
-			"xdebugSettings": {
-				"max_data": -1
-			}
-		},
-		{
-			"name": "Java - Demo",
-			"type": "java",
-			"request": "launch",
-			"projectName": "java"
-		}
-	]
-}

demo/.vscode/settings.json

@@ -1,4 +0,0 @@
-{
-	"debugVisualizer.useChromeKioskMode": false,
-	"editor.minimap.enabled": false
-}

demo/java/.project

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<projectDescription>
-  <name>java</name>
-  <comment/>
-  <projects>&#xD;
-    </projects>
-  <buildSpec>
-    <buildCommand>
-      <name>org.eclipse.jdt.core.javabuilder</name>
-      <arguments>&#xD;
-            </arguments>
-    </buildCommand>
-  </buildSpec>
-  <natures>
-    <nature>org.eclipse.jdt.core.javanature</nature>
-  </natures>
-</projectDescription>

demo/java/.vscode/settings.json

@@ -1,4 +0,0 @@
-{
-    "java.dependency.packagePresentation": "flat",
-    "java.dependency.syncWithFolderExplorer": true
-}

demo/js/package.json

@@ -1,15 +0,0 @@
-{
-	"name": "demo",
-	"version": "1.0.0",
-	"license": "MIT",
-	"dependencies": {
-		"@hediet/live-debug": "^0.5.2",
-		"@hediet/node-reload": "0.7.0",
-		"@hediet/std": "^0.4.0",
-		"@types/node": "^13.7.1",
-		"typescript": "^3.5.3"
-	},
-	"scripts": {
-		"dev": "tsc --watch"
-	}
-}

demo/js/src/demo_doubly-linked-list.ts

@@ -1,59 +0,0 @@
-import {
-	getDataExtractorApi,
-	createGraphFromPointers,
-} from "@hediet/debug-visualizer-data-extraction";
-
-getDataExtractorApi().registerDefaultExtractors();
-
-setTimeout(() => {
-	new Main().run();
-}, 0);
-
-class Main {
-	run() {
-		const list = new DoublyLinkedList("1");
-		list.setNext(new DoublyLinkedList("2"));
-		list.next!.setNext(new DoublyLinkedList("3"));
-		list.next!.next!.setNext(new DoublyLinkedList("4"));
-
-		// Use `visualize()` as expression to visualize in the Debug Visualizer!
-		const visualize = () =>
-			createGraphFromPointers({ list, last, cur }, i => ({
-				id: i.id,
-				label: i.name,
-				color: finished.has(i) ? "lime" : undefined,
-				edges: [
-					{ to: i.next!, label: "next" },
-					{ to: i.prev!, label: "prev", color: "lightgray" },
-				].filter(r => !!r.to),
-			}));
-
-		const finished = new Set();
-		var cur: DoublyLinkedList | undefined = list;
-		// Reverses `list`. Finished nodes have correct pointers,
-		// their next node is also finished.
-		var last: DoublyLinkedList | undefined = undefined;
-		while (cur) {
-			cur.prev = cur.next;
-			cur.next = last;
-			finished.add(cur);
-			last = cur;
-			cur = cur.prev;
-		}
-		console.log("finished");
-	}
-}
-
-let id = 0;
-class DoublyLinkedList {
-	public readonly id = (id++).toString();
-	constructor(public name: string) {}
-
-	next: DoublyLinkedList | undefined;
-	prev: DoublyLinkedList | undefined;
-
-	public setNext(val: DoublyLinkedList): void {
-		val.prev = this;
-		this.next = val;
-	}
-}

demo/js/src/demo_random-walks.ts

@@ -1,12 +0,0 @@
-// 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;
-
-	if (i % 1000 === 0) {
-		debugger;
-	}
-}

demos/cpp/.gitignore

@@ -0,0 +1 @@
+main

demos/cpp/.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "g++ build and debug active file",
+            "type": "cppdbg",
+            "request": "launch",
+            "program": "${fileDirname}/${fileBasenameNoExtension}",
+            "args": [],
+            "stopAtEntry": false,
+            "cwd": "${workspaceFolder}",
+            "environment": [],
+            "externalConsole": false,
+            "MIMode": "gdb",
+            "setupCommands": [
+                {
+                    "description": "Enable pretty-printing for gdb",
+                    "text": "-enable-pretty-printing",
+                    "ignoreFailures": true
+                }
+            ],
+            "preLaunchTask": "g++ build active file",
+            "miDebuggerPath": "/usr/bin/gdb"
+        }
+    ]
+}

demos/cpp/.vscode/tasks.json

@@ -0,0 +1,25 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558 
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "shell",
+            "label": "g++ build active file",
+            "command": "/usr/bin/g++",
+            "args": [
+                "-g",
+                "${file}",
+                "-o",
+                "${fileDirname}/${fileBasenameNoExtension}"
+            ],
+            "options": {
+                "cwd": "/usr/bin"
+            },
+            "problemMatcher": [
+                "$gcc"
+            ],
+            "group": "build"
+        }
+    ]
+}

demos/cpp/main.cpp

@@ -0,0 +1,14 @@
+#include <iostream>
+#include <vector>
+#include <string>
+
+using namespace std;
+
+int main()
+{
+    // visualize `myGraphJson`!
+    string myGraphJson = "{\"kind\":{\"graph\":true},"
+        "\"nodes\":[{\"id\":\"1\"},{\"id\":\"2\"}],"
+        "\"edges\":[{\"from\":\"1\",\"to\":\"2\"}]}";
+    cout << myGraphJson;
+}

demos/csharp/.vscode/launch.json

@@ -0,0 +1,19 @@
+{
+	// Use IntelliSense to find out which attributes exist for C# debugging
+	// Use hover for the description of the existing attributes
+	// For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "C# - Demo: Linked List",
+			"type": "coreclr",
+			"request": "launch",
+			"preLaunchTask": "csharp-build",
+			"program": "${workspaceFolder}/bin/Debug/netcoreapp3.1/demo.dll",
+			"args": [],
+			"cwd": "${workspaceFolder}",
+			"console": "internalConsole",
+			"stopAtEntry": false
+		}
+	]
+}

demos/csharp/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"debugVisualizer.debugAdapterConfigurations": {}
+}

demos/csharp/.vscode/tasks.json

@@ -1,21 +1,6 @@
 {
 	"version": "2.0.0",
 	"tasks": [
-		{
-			"type": "npm",
-			"label": "typescript-watch",
-			"script": "dev",
-			"problemMatcher": "$tsc-watch",
-			"isBackground": true,
-			"presentation": {
-				"reveal": "never"
-			},
-			"path": "js/",
-			"group": {
-				"kind": "build",
-				"isDefault": true
-			}
-		},
 		{
 			"label": "csharp-build",
 			"command": "dotnet",

demos/csharp/Program.cs

@@ -52,7 +52,7 @@ namespace Demo
             }
         }
 
-        public ExtractedData Visualize()
+        public string Visualize()
         {
             var list = new Node(default(T)!) { Next = this.Head };
             return GraphData.From(new[] { list }, (item, info) =>
@@ -65,7 +65,7 @@ namespace Demo
                 if (item.Next != null)
                     info.AddEdge(item.Next!, label: item == list ? "head" : "next");
                 return info;
-            });
+            }).ToString();
         }
     }
 }

demos/dart/debug_visualizers.dart

@@ -0,0 +1,85 @@
+import 'dart:convert';
+
+String graph(List<GraphNode> nodes, List<GraphEdge> edges) {
+  return jsonEncode({
+    'kind': {'graph': true},
+    'nodes': nodes,
+    'edges': edges,
+  });
+}
+
+String plotly(List<num> values) {
+  return jsonEncode({
+    'kind': {'plotly': true},
+    'data': [
+      {'y': values}
+    ],
+  });
+}
+
+String tree(TreeNode root) {
+  return jsonEncode({
+    'kind': {'tree': true},
+    'root': root,
+  });
+}
+
+class Graph {
+  List<GraphNode> nodes;
+  List<GraphEdge> edges;
+}
+
+class GraphEdge {
+  final String from;
+  final String to;
+  final String label;
+
+  GraphEdge(this.from, this.to, this.label);
+
+  Map<String, dynamic> toJson() => {
+        'from': from,
+        'to': to,
+        'label': label,
+      };
+}
+
+class GraphNode {
+  final String id;
+  final String label;
+
+  GraphNode(
+    this.id,
+    this.label,
+  );
+
+  Map<String, dynamic> toJson() => {
+        'id': id,
+        'label': label,
+      };
+}
+
+class TreeNode {
+  final List<TreeNode> children;
+  final List<TreeNodeItem> items;
+  final String segment;
+  final bool isMarked;
+
+  TreeNode(this.children, this.items, this.segment, [this.isMarked = false]);
+
+  Map<String, dynamic> toJson() => {
+        'children': children ?? [],
+        'items': items,
+        'segment': segment,
+        'isMarked': isMarked,
+      };
+}
+
+class TreeNodeItem {
+  final String text;
+
+  TreeNodeItem(this.text);
+
+  Map<String, dynamic> toJson() => {
+        'text': text,
+      };
+}

demos/dart/demo.dart

@@ -0,0 +1,83 @@
+import 'dart:collection';
+import 'dart:developer';
+import 'dart:math';
+
+// ignore: unused_import
+import 'debug_visualizers.dart';
+
+final _rnd = Random();
+
+String Function() visualize;
+
+void main() {
+  debugger();
+  // Open a Debug Visualizer window and evalute the expression "visualize()"
+  // and then press Continue to step through the samples.
+  plotly_demo();
+  graph_demo();
+  tree_demo();
+}
+
+void plotly_demo() {
+  final values = <int>[];
+  visualize = () => plotly(values);
+  for (var i = 0; i < 20; i++) {
+    debugger();
+    values.add(i + _rnd.nextInt(5) - 2);
+  }
+}
+
+void graph_demo() {
+  graphFromDoubleLinked<T>(
+      DoubleLinkedQueue<T> values, String Function(T) toString) {
+    node(T s) => GraphNode(toString(s), toString(s));
+    edge(DoubleLinkedQueueEntry<T> e) => [
+          if (e.nextEntry() != null)
+            GraphEdge(
+              toString(e.element),
+              toString(e.nextEntry().element),
+              "next",
+            ),
+          if (e.previousEntry() != null)
+            GraphEdge(
+              toString(e.element),
+              toString(e.previousEntry().element),
+              "prev",
+            ),
+        ];
+
+    final nodes = values.map(node).toList();
+    final edges = <GraphEdge>[];
+    values.forEachEntry((e) => edges.addAll(edge(e)));
+    return graph(nodes, edges);
+  }
+
+  final values = DoubleLinkedQueue<String>();
+  visualize = () => graphFromDoubleLinked(values, (s) => s);
+
+  for (var i = 0; i < 10; i++) {
+    debugger();
+    values.addLast('Node $i');
+  }
+}
+
+void tree_demo() {
+  var nodeNum = 1;
+  TreeNode createNode(int levels) {
+    final name = 'Node ${nodeNum++}';
+    final children =
+        levels > 0 ? List.generate(2, (_) => createNode(levels - 1)) : null;
+    return TreeNode(children, [TreeNodeItem(name)], name);
+  }
+
+  var levels = 0;
+  visualize = () {
+    nodeNum = 1;
+    return tree(createNode(levels));
+  };
+
+  for (var i = 1; i < 5; i++) {
+    debugger();
+    levels = i;
+  }
+}

demos/golang/.vscode/launch.json

@@ -0,0 +1,21 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch",
+            "type": "go",
+            "request": "launch",
+            "mode": "auto",
+            "program": "${fileDirname}",
+            "env": {},
+            "args": [],
+            "dlvLoadConfig": {
+                "followPointers": true,
+                "maxVariableRecurse": 1,
+                "maxStringLen": 5000,
+                "maxArrayValues": 64,
+                "maxStructFields": -1
+            }
+        }
+    ]
+}

demos/golang/demo.go

@@ -0,0 +1,91 @@
+package main
+
+import (
+	"encoding/json"
+	"math/rand"
+	"strconv"
+	"time"
+)
+
+// If you want to visualize large data structures,
+// you need to increase Delve's maxStringLen.
+// (See here https://github.com/microsoft/vscode-go/issues/868 for more info)
+// You can do this by adding the following configuration to your launch.json:
+// "dlvLoadConfig": {
+//     "followPointers": true,
+//     "maxVariableRecurse": 1,
+//     "maxStringLen": 5000,
+//     "maxArrayValues": 64,
+//     "maxStructFields": -1
+// }
+// For debugging tests, you can set the maxStringLen in settings.json like this:
+// "go.delveConfig": {
+//     "dlvLoadConfig": {
+//         "followPointers": true,
+//         "maxVariableRecurse": 1,
+//         "maxStringLen": 5000,
+//         "maxArrayValues": 64,
+//         "maxStructFields": -1
+//     },
+//     "apiVersion": 2,
+//     "showGlobalVariables": true
+// }
+
+// Open a new Debug Visualizer and visualize "s"
+func main() {
+	rand.Seed(time.Now().UnixNano())
+	graph := NewGraph()
+	var s string
+	for i := 0; i < 100; i++ {
+		id := strconv.Itoa(i)
+		graph.Nodes = append(graph.Nodes, NodeGraphData{
+			ID:    id,
+			Label: id,
+		})
+		if i > 0 {
+			targetId := rand.Intn(i)
+			graph.Edges = append(graph.Edges, EdgeGraphData{
+				From: id,
+				To:   strconv.Itoa(targetId),
+			})
+		}
+		s = graph.toString()
+		_ = s
+		//fmt.Printf("%s", s)
+	}
+}
+
+type Graph struct {
+	Kind  map[string]bool `json:"kind"`
+	Nodes []NodeGraphData `json:"nodes"`
+	Edges []EdgeGraphData `json:"edges"`
+}
+
+type NodeGraphData struct {
+	ID    string `json:"id"`
+	Label string `json:"label,omitempty"`
+	Color string `json:"color,omitempty"`
+	Shape string `json:"shape,omitempty"`
+}
+
+type EdgeGraphData struct {
+	From   string `json:"from"`
+	To     string `json:"to"`
+	Label  string `json:"label,omitempty"`
+	ID     string `json:"id"`
+	Color  string `json:"color,omitempty"`
+	Dashes bool   `json:"dashes,omitempty"`
+}
+
+func NewGraph() *Graph {
+	return &Graph{
+		Kind:  map[string]bool{"graph": true},
+		Nodes: []NodeGraphData{},
+		Edges: []EdgeGraphData{},
+	}
+}
+
+func (this *Graph) toString() string {
+	rs, _ := json.Marshal(this)
+	return string(rs)
+}

demos/golang/go.mod

@@ -0,0 +1,3 @@
+module demo
+
+go 1.13

demos/java/.gitignore

@@ -20,4 +20,6 @@
 *.rar
 
 # virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
-hs_err_pid*
+hs_err_pid*
+
+!lib/**

demos/java/.project

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>java</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.jdt.core.javabuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.jdt.core.javanature</nature>
+	</natures>
+	<filteredResources>
+		<filter>
+			<id>1599063072264</id>
+			<name></name>
+			<type>30</type>
+			<matcher>
+				<id>org.eclipse.core.resources.regexFilterMatcher</id>
+				<arguments>node_modules|.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
+</projectDescription>

demos/java/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+	// Use IntelliSense to find out which attributes exist for C# debugging
+	// Use hover for the description of the existing attributes
+	// 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"
+		},
+		{
+			"name": "Java - Demo",
+			"type": "java",
+			"request": "launch",
+			"projectName": "java"
+		}
+	]
+}

demos/java/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+	"java.dependency.packagePresentation": "flat",
+	"java.dependency.syncWithFolderExplorer": true,
+	"debugVisualizer.debugAdapterConfigurations": {}
+}

demos/js/.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "editor.minimap.enabled": false,
+    "git.enabled": false,
+    "typescript.tsc.autoDetect": "off",
+    "debugVisualizer.js.customScriptPaths": [
+       "${workspaceFolder}/custom-visualizer.js",
+    ]
+}

demos/js/.vscode/tasks.json

@@ -0,0 +1,18 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "dev",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never"
+			},
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			}
+		}
+	]
+}

demos/js/custom-visualizer.js

@@ -0,0 +1,59 @@
+// @ts-check
+/**
+ * @type {import("@hediet/debug-visualizer-data-extraction").LoadDataExtractorsFn}
+ */
+ module.exports = (register, helpers) => {
+	register({
+		id: "map",
+		getExtractions(data, collector, context) {
+			if (!(data instanceof Map)) {
+				return;
+			}
+
+			collector.addExtraction({
+				priority: 1000,
+				id: "map",
+				name: "Map",
+				extractData() {
+					return helpers.asData({
+						kind: { table: true },
+						rows: [...data].map(([k, v]) => ({ key: k, value: v }))
+					});
+				},
+			});
+		},
+	});
+	
+	register({
+		id: "binaryViewer",
+		getExtractions(data, collector, context) {
+			if (typeof data !== "number") {
+				return;
+			}
+/*
+			context.addCallFrameRequest({
+				methodName: "Module._load",
+				pathRegExp: ".*",
+			});
+
+			context.addCallFrameRequest({
+				methodName: "LinkedList.insertAt",
+				pathRegExp: ".*",
+			});*/
+
+			collector.addExtraction({
+				priority: 10000,
+				id: "binary",
+				name: "Bits of Integer",
+				extractData() {
+					return context.extract(JSON.stringify(context.callFrameInfos, undefined, 4));
+					
+					return helpers.asData({
+						kind: { text: true },
+						text: data.toString(2),
+					});
+				},
+			});
+		},
+	});
+ };

demos/js/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "demo",
+	"version": "1.0.0",
+	"license": "MIT",
+	"dependencies": {
+		"@hediet/node-reload": "0.7.3",
+		"@types/node": "^13.7.4",
+		"node-fetch": "^2.6.1",
+		"typescript": "^3.8.2"
+	},
+	"scripts": {
+		"dev": "tsc --watch"
+	}
+}

demos/js/src/demo_address_book.ts

@@ -0,0 +1,807 @@
+
+class Person {
+    constructor(public id: number, public firstName: string, public lastName: string, public email: string, public gender: string, public company: string) {
+
+    }
+}
+
+class Company {
+    constructor(public id: number, public name: string, public street: string, public email: string) { }
+}
+
+class AddressBook {
+    public static loadPersons(): Person[] {
+        const contactsData = [{
+            "id": 1,
+            "first_name": "Burg",
+            "last_name": "Legg",
+            "email": "blegg0@elpais.com",
+            "gender": "Male",
+            "company": "Zoozzy"
+        }, {
+            "id": 2,
+            "first_name": "Erminia",
+            "last_name": "Heersema",
+            "email": "eheersema1@jugem.jp",
+            "gender": "Female",
+            "company": "Skipfire"
+        }, {
+            "id": 3,
+            "first_name": "Penrod",
+            "last_name": "Claxton",
+            "email": "pclaxton2@furl.net",
+            "gender": "Male",
+            "company": "Dabvine"
+        }, {
+            "id": 4,
+            "first_name": "Peterus",
+            "last_name": "Alabone",
+            "email": "palabone3@icio.us",
+            "gender": "Male",
+            "company": "Gabtune"
+        }, {
+            "id": 5,
+            "first_name": "Rickie",
+            "last_name": "Belsher",
+            "email": "rbelsher4@marketwatch.com",
+            "gender": "Male",
+            "company": "Digitube"
+        }, {
+            "id": 6,
+            "first_name": "Griffie",
+            "last_name": "Poulsum",
+            "email": "gpoulsum5@printfriendly.com",
+            "gender": "Male",
+            "company": "Mymm"
+        }, {
+            "id": 7,
+            "first_name": "Fidelio",
+            "last_name": "Gateland",
+            "email": "fgateland6@intel.com",
+            "gender": "Male",
+            "company": "Meeveo"
+        }, {
+            "id": 8,
+            "first_name": "Fayth",
+            "last_name": "D'Oyly",
+            "email": "fdoyly7@twitter.com",
+            "gender": "Female",
+            "company": "Podcat"
+        }, {
+            "id": 9,
+            "first_name": "Janela",
+            "last_name": "Shelton",
+            "email": "jshelton8@dion.ne.jp",
+            "gender": "Female",
+            "company": "Kayveo"
+        }, {
+            "id": 10,
+            "first_name": "Yance",
+            "last_name": "Vatcher",
+            "email": "yvatcher9@ask.com",
+            "gender": "Male",
+            "company": "Photobug"
+        }, {
+            "id": 11,
+            "first_name": "Filippo",
+            "last_name": "Timoney",
+            "email": "ftimoneya@spotify.com",
+            "gender": "Male",
+            "company": "Rhyzio"
+        }, {
+            "id": 12,
+            "first_name": "Helli",
+            "last_name": "Friskey",
+            "email": "hfriskeyb@usa.gov",
+            "gender": "Female",
+            "company": "Eare"
+        }, {
+            "id": 13,
+            "first_name": "Enos",
+            "last_name": "Connick",
+            "email": "econnickc@sitemeter.com",
+            "gender": "Male",
+            "company": "Meetz"
+        }, {
+            "id": 14,
+            "first_name": "Lorri",
+            "last_name": "Chessun",
+            "email": "lchessund@wp.com",
+            "gender": "Female",
+            "company": "Jaxworks"
+        }, {
+            "id": 15,
+            "first_name": "Justina",
+            "last_name": "Spedroni",
+            "email": "jspedronie@abc.net.au",
+            "gender": "Female",
+            "company": "Rhyzio"
+        }, {
+            "id": 16,
+            "first_name": "Odilia",
+            "last_name": "Ealden",
+            "email": "oealdenf@fastcompany.com",
+            "gender": "Female",
+            "company": "Blognation"
+        }, {
+            "id": 17,
+            "first_name": "Dale",
+            "last_name": "Bretherick",
+            "email": "dbretherickg@dmoz.org",
+            "gender": "Male",
+            "company": "Skipfire"
+        }, {
+            "id": 18,
+            "first_name": "Syman",
+            "last_name": "Lawdham",
+            "email": "slawdhamh@so-net.ne.jp",
+            "gender": "Male",
+            "company": "Wordify"
+        }, {
+            "id": 19,
+            "first_name": "Catarina",
+            "last_name": "Stoile",
+            "email": "cstoilei@hud.gov",
+            "gender": "Female",
+            "company": "Avaveo"
+        }, {
+            "id": 20,
+            "first_name": "Simonette",
+            "last_name": "Danett",
+            "email": "sdanettj@eepurl.com",
+            "gender": "Female",
+            "company": "Realblab"
+        }, {
+            "id": 21,
+            "first_name": "Fielding",
+            "last_name": "MacHarg",
+            "email": "fmachargk@blogtalkradio.com",
+            "gender": "Male",
+            "company": "Photolist"
+        }, {
+            "id": 22,
+            "first_name": "Anni",
+            "last_name": "Hounsom",
+            "email": "ahounsoml@wikia.com",
+            "gender": "Female",
+            "company": "Devify"
+        }, {
+            "id": 23,
+            "first_name": "Evelin",
+            "last_name": "Gaytor",
+            "email": "egaytorm@myspace.com",
+            "gender": "Male",
+            "company": "Aivee"
+        }, {
+            "id": 24,
+            "first_name": "Lynde",
+            "last_name": "Itscowicz",
+            "email": "litscowiczn@fc2.com",
+            "gender": "Female",
+            "company": "Skipfire"
+        }, {
+            "id": 25,
+            "first_name": "Reta",
+            "last_name": "Felipe",
+            "email": "rfelipeo@free.fr",
+            "gender": "Female",
+            "company": "Ainyx"
+        }, {
+            "id": 26,
+            "first_name": "Bar",
+            "last_name": "Shillingford",
+            "email": "bshillingfordp@sun.com",
+            "gender": "Male",
+            "company": "Skilith"
+        }, {
+            "id": 27,
+            "first_name": "Mel",
+            "last_name": "Cooch",
+            "email": "mcoochq@icq.com",
+            "gender": "Female",
+            "company": "Meevee"
+        }, {
+            "id": 28,
+            "first_name": "Wheeler",
+            "last_name": "Kettlesting",
+            "email": "wkettlestingr@miitbeian.gov.cn",
+            "gender": "Male",
+            "company": "Mybuzz"
+        }, {
+            "id": 29,
+            "first_name": "Corabel",
+            "last_name": "Pordall",
+            "email": "cpordalls@sourceforge.net",
+            "gender": "Female",
+            "company": "Blogtag"
+        }, {
+            "id": 30,
+            "first_name": "Merrily",
+            "last_name": "Weatherhill",
+            "email": "mweatherhillt@printfriendly.com",
+            "gender": "Female",
+            "company": "Divape"
+        }, {
+            "id": 31,
+            "first_name": "Reynard",
+            "last_name": "Osgodby",
+            "email": "rosgodbyu@eepurl.com",
+            "gender": "Male",
+            "company": "Yakijo"
+        }, {
+            "id": 32,
+            "first_name": "Guilbert",
+            "last_name": "Bilston",
+            "email": "gbilstonv@devhub.com",
+            "gender": "Male",
+            "company": "Vinder"
+        }, {
+            "id": 33,
+            "first_name": "Farr",
+            "last_name": "Skehan",
+            "email": "fskehanw@t-online.de",
+            "gender": "Male",
+            "company": "Linkbuzz"
+        }, {
+            "id": 34,
+            "first_name": "Roger",
+            "last_name": "Langelay",
+            "email": "rlangelayx@pcworld.com",
+            "gender": "Male",
+            "company": "Tekfly"
+        }, {
+            "id": 35,
+            "first_name": "Jemmy",
+            "last_name": "Yggo",
+            "email": "jyggoy@ifeng.com",
+            "gender": "Female",
+            "company": "Jabberstorm"
+        }, {
+            "id": 36,
+            "first_name": "Cybill",
+            "last_name": "Chastaing",
+            "email": "cchastaingz@mayoclinic.com",
+            "gender": "Female",
+            "company": "Riffpedia"
+        }, {
+            "id": 37,
+            "first_name": "Samuele",
+            "last_name": "Zorzoni",
+            "email": "szorzoni10@opensource.org",
+            "gender": "Male",
+            "company": "Devcast"
+        }, {
+            "id": 38,
+            "first_name": "Svend",
+            "last_name": "Hamill",
+            "email": "shamill11@google.co.jp",
+            "gender": "Male",
+            "company": "Kwilith"
+        }, {
+            "id": 39,
+            "first_name": "Carlin",
+            "last_name": "Roote",
+            "email": "croote12@gov.uk",
+            "gender": "Male",
+            "company": "Twitterlist"
+        }, {
+            "id": 40,
+            "first_name": "Dawna",
+            "last_name": "Lanfer",
+            "email": "dlanfer13@mlb.com",
+            "gender": "Female",
+            "company": "Jayo"
+        }, {
+            "id": 41,
+            "first_name": "Melissa",
+            "last_name": "Chappelow",
+            "email": "mchappelow14@usa.gov",
+            "gender": "Female",
+            "company": "Skibox"
+        }, {
+            "id": 42,
+            "first_name": "George",
+            "last_name": "Hargreaves",
+            "email": "ghargreaves15@pagesperso-orange.fr",
+            "gender": "Female",
+            "company": "Zazio"
+        }, {
+            "id": 43,
+            "first_name": "Sampson",
+            "last_name": "Steaning",
+            "email": "ssteaning16@state.gov",
+            "gender": "Male",
+            "company": "Jaxworks"
+        }, {
+            "id": 44,
+            "first_name": "Brana",
+            "last_name": "Wims",
+            "email": "bwims17@icio.us",
+            "gender": "Female",
+            "company": "Flashset"
+        }, {
+            "id": 45,
+            "first_name": "Shawn",
+            "last_name": "Saffen",
+            "email": "ssaffen18@shutterfly.com",
+            "gender": "Male",
+            "company": "Twitterwire"
+        }, {
+            "id": 46,
+            "first_name": "Alessandro",
+            "last_name": "Gasker",
+            "email": "agasker19@slashdot.org",
+            "gender": "Male",
+            "company": "Dabtype"
+        }, {
+            "id": 47,
+            "first_name": "Bobby",
+            "last_name": "Mulcock",
+            "email": "bmulcock1a@time.com",
+            "gender": "Female",
+            "company": "Quamba"
+        }, {
+            "id": 48,
+            "first_name": "Ashlen",
+            "last_name": "Midner",
+            "email": "amidner1b@devhub.com",
+            "gender": "Female",
+            "company": "Thoughtstorm"
+        }, {
+            "id": 49,
+            "first_name": "Mallory",
+            "last_name": "Joel",
+            "email": "mjoel1c@upenn.edu",
+            "gender": "Male",
+            "company": "Twitterbeat"
+        }, {
+            "id": 50,
+            "first_name": "Maximilian",
+            "last_name": "Scraggs",
+            "email": "mscraggs1d@ucla.edu",
+            "gender": "Male",
+            "company": "Twiyo"
+        }, {
+            "id": 51,
+            "first_name": "Beverlie",
+            "last_name": "Pittet",
+            "email": "bpittet1e@github.io",
+            "gender": "Female",
+            "company": "Riffpath"
+        }, {
+            "id": 52,
+            "first_name": "Enrique",
+            "last_name": "Rentilll",
+            "email": "erentilll1f@smugmug.com",
+            "gender": "Male",
+            "company": "Blognation"
+        }, {
+            "id": 53,
+            "first_name": "Cathrin",
+            "last_name": "McKendry",
+            "email": "cmckendry1g@hc360.com",
+            "gender": "Female",
+            "company": "Shuffledrive"
+        }, {
+            "id": 54,
+            "first_name": "Isabeau",
+            "last_name": "Quincey",
+            "email": "iquincey1h@msn.com",
+            "gender": "Female",
+            "company": "Tagcat"
+        }, {
+            "id": 55,
+            "first_name": "Geoffrey",
+            "last_name": "Grzegorczyk",
+            "email": "ggrzegorczyk1i@loc.gov",
+            "gender": "Male",
+            "company": "Youfeed"
+        }, {
+            "id": 56,
+            "first_name": "Ruggiero",
+            "last_name": "Vaar",
+            "email": "rvaar1j@unesco.org",
+            "gender": "Male",
+            "company": "Babbleset"
+        }, {
+            "id": 57,
+            "first_name": "Alfonso",
+            "last_name": "Tarzey",
+            "email": "atarzey1k@weebly.com",
+            "gender": "Male",
+            "company": "Pixonyx"
+        }, {
+            "id": 58,
+            "first_name": "Marylin",
+            "last_name": "Bissex",
+            "email": "mbissex1l@microsoft.com",
+            "gender": "Female",
+            "company": "Tagfeed"
+        }, {
+            "id": 59,
+            "first_name": "Cathryn",
+            "last_name": "Morhall",
+            "email": "cmorhall1m@irs.gov",
+            "gender": "Female",
+            "company": "Tagopia"
+        }, {
+            "id": 60,
+            "first_name": "Terza",
+            "last_name": "Easey",
+            "email": "teasey1n@thetimes.co.uk",
+            "gender": "Female",
+            "company": "Devcast"
+        }, {
+            "id": 61,
+            "first_name": "Hale",
+            "last_name": "Gaudon",
+            "email": "hgaudon1o@webnode.com",
+            "gender": "Male",
+            "company": "Quinu"
+        }, {
+            "id": 62,
+            "first_name": "Hadley",
+            "last_name": "Elwood",
+            "email": "helwood1p@japanpost.jp",
+            "gender": "Male",
+            "company": "Plajo"
+        }, {
+            "id": 63,
+            "first_name": "Seamus",
+            "last_name": "Straker",
+            "email": "sstraker1q@live.com",
+            "gender": "Male",
+            "company": "Yoveo"
+        }, {
+            "id": 64,
+            "first_name": "Urbano",
+            "last_name": "Gisbey",
+            "email": "ugisbey1r@sitemeter.com",
+            "gender": "Male",
+            "company": "Quinu"
+        }, {
+            "id": 65,
+            "first_name": "Gerri",
+            "last_name": "McInulty",
+            "email": "gmcinulty1s@businessinsider.com",
+            "gender": "Male",
+            "company": "Agimba"
+        }, {
+            "id": 66,
+            "first_name": "Lena",
+            "last_name": "Gonthier",
+            "email": "lgonthier1t@newsvine.com",
+            "gender": "Female",
+            "company": "Geba"
+        }, {
+            "id": 67,
+            "first_name": "Ameline",
+            "last_name": "Wheatcroft",
+            "email": "awheatcroft1u@163.com",
+            "gender": "Female",
+            "company": "Twitternation"
+        }, {
+            "id": 68,
+            "first_name": "Kathryn",
+            "last_name": "Castelli",
+            "email": "kcastelli1v@about.com",
+            "gender": "Female",
+            "company": "Photospace"
+        }, {
+            "id": 69,
+            "first_name": "Terrell",
+            "last_name": "Walicki",
+            "email": "twalicki1w@amazon.co.jp",
+            "gender": "Male",
+            "company": "Babblestorm"
+        }, {
+            "id": 70,
+            "first_name": "Claudianus",
+            "last_name": "Tremathack",
+            "email": "ctremathack1x@walmart.com",
+            "gender": "Male",
+            "company": "Skyndu"
+        }, {
+            "id": 71,
+            "first_name": "Sanford",
+            "last_name": "Devinn",
+            "email": "sdevinn1y@ehow.com",
+            "gender": "Male",
+            "company": "Dynazzy"
+        }, {
+            "id": 72,
+            "first_name": "Gwendolen",
+            "last_name": "Turfrey",
+            "email": "gturfrey1z@va.gov",
+            "gender": "Female",
+            "company": "Yacero"
+        }, {
+            "id": 73,
+            "first_name": "Alta",
+            "last_name": "Leap",
+            "email": "aleap20@ezinearticles.com",
+            "gender": "Female",
+            "company": "Twitterlist"
+        }, {
+            "id": 74,
+            "first_name": "Johnath",
+            "last_name": "Andrzejowski",
+            "email": "jandrzejowski21@google.com.hk",
+            "gender": "Female",
+            "company": "Lazzy"
+        }, {
+            "id": 75,
+            "first_name": "Yancy",
+            "last_name": "Askham",
+            "email": "yaskham22@sciencedaily.com",
+            "gender": "Male",
+            "company": "Yabox"
+        }, {
+            "id": 76,
+            "first_name": "Paula",
+            "last_name": "Warder",
+            "email": "pwarder23@harvard.edu",
+            "gender": "Female",
+            "company": "Zooxo"
+        }, {
+            "id": 77,
+            "first_name": "Grannie",
+            "last_name": "Hauxley",
+            "email": "ghauxley24@symantec.com",
+            "gender": "Male",
+            "company": "Yakidoo"
+        }, {
+            "id": 78,
+            "first_name": "Enid",
+            "last_name": "Grealy",
+            "email": "egrealy25@homestead.com",
+            "gender": "Female",
+            "company": "Gabcube"
+        }, {
+            "id": 79,
+            "first_name": "Lazarus",
+            "last_name": "Itscowicz",
+            "email": "litscowicz26@epa.gov",
+            "gender": "Male",
+            "company": "Demizz"
+        }, {
+            "id": 80,
+            "first_name": "Marmaduke",
+            "last_name": "Gilligan",
+            "email": "mgilligan27@tiny.cc",
+            "gender": "Male",
+            "company": "Yombu"
+        }, {
+            "id": 81,
+            "first_name": "Linnell",
+            "last_name": "Chree",
+            "email": "lchree28@ocn.ne.jp",
+            "gender": "Female",
+            "company": "Buzzshare"
+        }, {
+            "id": 82,
+            "first_name": "Pavia",
+            "last_name": "Pocke",
+            "email": "ppocke29@newsvine.com",
+            "gender": "Female",
+            "company": "Eidel"
+        }, {
+            "id": 83,
+            "first_name": "Golda",
+            "last_name": "Stuchburie",
+            "email": "gstuchburie2a@oaic.gov.au",
+            "gender": "Female",
+            "company": "Flipstorm"
+        }, {
+            "id": 84,
+            "first_name": "Trace",
+            "last_name": "Lodge",
+            "email": "tlodge2b@whitehouse.gov",
+            "gender": "Male",
+            "company": "Zazio"
+        }, {
+            "id": 85,
+            "first_name": "Nikolia",
+            "last_name": "Bartolomivis",
+            "email": "nbartolomivis2c@opensource.org",
+            "gender": "Female",
+            "company": "Devshare"
+        }, {
+            "id": 86,
+            "first_name": "Dela",
+            "last_name": "Wimp",
+            "email": "dwimp2d@miitbeian.gov.cn",
+            "gender": "Female",
+            "company": "Wordware"
+        }, {
+            "id": 87,
+            "first_name": "Rustie",
+            "last_name": "Drury",
+            "email": "rdrury2e@sun.com",
+            "gender": "Male",
+            "company": "Youbridge"
+        }, {
+            "id": 88,
+            "first_name": "Phedra",
+            "last_name": "Shrimptone",
+            "email": "pshrimptone2f@unicef.org",
+            "gender": "Female",
+            "company": "Realcube"
+        }, {
+            "id": 89,
+            "first_name": "Alaster",
+            "last_name": "Vittori",
+            "email": "avittori2g@senate.gov",
+            "gender": "Male",
+            "company": "Livepath"
+        }, {
+            "id": 90,
+            "first_name": "Pascal",
+            "last_name": "Neissen",
+            "email": "pneissen2h@mediafire.com",
+            "gender": "Male",
+            "company": "Mydo"
+        }, {
+            "id": 91,
+            "first_name": "Brian",
+            "last_name": "Manuel",
+            "email": "bmanuel2i@blog.com",
+            "gender": "Male",
+            "company": "Roomm"
+        }, {
+            "id": 92,
+            "first_name": "Jen",
+            "last_name": "Laydon",
+            "email": "jlaydon2j@hubpages.com",
+            "gender": "Female",
+            "company": "Plambee"
+        }, {
+            "id": 93,
+            "first_name": "Beltran",
+            "last_name": "Brandoni",
+            "email": "bbrandoni2k@digg.com",
+            "gender": "Male",
+            "company": "Yacero"
+        }, {
+            "id": 94,
+            "first_name": "Sarene",
+            "last_name": "Gaymar",
+            "email": "sgaymar2l@surveymonkey.com",
+            "gender": "Female",
+            "company": "Katz"
+        }, {
+            "id": 95,
+            "first_name": "Iormina",
+            "last_name": "Peedell",
+            "email": "ipeedell2m@seattletimes.com",
+            "gender": "Female",
+            "company": "Youfeed"
+        }, {
+            "id": 96,
+            "first_name": "Abigail",
+            "last_name": "Kielty",
+            "email": "akielty2n@npr.org",
+            "gender": "Female",
+            "company": "Reallinks"
+        }, {
+            "id": 97,
+            "first_name": "Hallie",
+            "last_name": "Toomey",
+            "email": "htoomey2o@google.com.au",
+            "gender": "Female",
+            "company": "Flipbug"
+        }, {
+            "id": 98,
+            "first_name": "Sergeant",
+            "last_name": "Pourveer",
+            "email": "spourveer2p@amazon.co.uk",
+            "gender": "Male",
+            "company": "Skinix"
+        }, {
+            "id": 99,
+            "first_name": "Elfie",
+            "last_name": "McKinlay",
+            "email": "emckinlay2q@xrea.com",
+            "gender": "Female",
+            "company": "Devcast"
+        }, {
+            "id": 100,
+            "first_name": "Wainwright",
+            "last_name": "Juggins",
+            "email": "wjuggins2r@tamu.edu",
+            "gender": "Male",
+            "company": "Topiclounge"
+        }];
+
+
+
+        const contacts = contactsData.map(d => new Person(d.id, d.first_name, d.last_name, d.email, d.gender, d.company));
+        return contacts;
+    }
+
+    public static loadCompanies() {
+        const companies = [{
+            "id": 101,
+            "city": "Lakshmīpur",
+            "street": "36300 Lake View Center",
+            "email": "ogovier0@gmpg.org",
+            "company": "Fiveclub"
+        }, {
+            "id": 102,
+            "city": "El Quetzal",
+            "street": "551 New Castle Parkway",
+            "email": "elander1@g.co",
+            "company": "Twitterwire"
+        }, {
+            "id": 103,
+            "city": "Mayakovski",
+            "street": "1 Norway Maple Center",
+            "email": "dcustance2@hostgator.com",
+            "company": "Jabbersphere"
+        }, {
+            "id": 104,
+            "city": "Al Jawādīyah",
+            "street": "02 Carey Hill",
+            "email": "evanoort3@sciencedaily.com",
+            "company": "Zoovu"
+        }, {
+            "id": 105,
+            "city": "Girona",
+            "street": "3 Lillian Center",
+            "email": "dducker4@cbsnews.com",
+            "company": "Innojam"
+        }, {
+            "id": 106,
+            "city": "Vouani",
+            "street": "5165 Vera Avenue",
+            "email": "orzehorz5@arizona.edu",
+            "company": "Zoovu"
+        }, {
+            "id": 107,
+            "city": "Caibarién",
+            "street": "3739 Burrows Drive",
+            "email": "ltrahair6@pinterest.com",
+            "company": "Quamba"
+        }, {
+            "id": 108,
+            "city": "Wushi",
+            "street": "88 Bay Hill",
+            "email": "plebourn7@springer.com",
+            "company": "Feednation"
+        }, {
+            "id": 109,
+            "city": "Zbýšov",
+            "street": "38 Dovetail Place",
+            "email": "slace8@netscape.com",
+            "company": "Zoomzone"
+        }, {
+            "id": 110,
+            "city": "Nová Cerekev",
+            "street": "90194 Dixon Avenue",
+            "email": "mdoxey9@goo.gl",
+            "company": "Devpoint"
+        }];
+
+        return companies.map(c => new Company(c.id, c.company, c.street, c.email));
+    }
+
+    public static loadContacts() {
+        const result = new Array<Person | Company>();
+        result.push(...this.loadPersons());
+        result.push(...this.loadCompanies());
+        let idx = 0;
+        while (idx++ < 1000) {
+            const i = Math.round(Math.random() * (result.length - 1));
+            const j = Math.round(Math.random() * (result.length - 1));
+            const temp = result[i];
+            result[i] = result[j];
+            result[j] = temp;
+        }
+        return result;
+    }
+}
+
+
+const contacts = AddressBook.loadContacts();
+
+debugger;

demos/js/src/demo_doubly-linked-list.ts

@@ -0,0 +1,80 @@
+import {
+	getDataExtractorApi,
+	createGraphFromPointers,
+} from "@hediet/debug-visualizer-data-extraction";
+
+getDataExtractorApi().registerDefaultExtractors();
+
+setTimeout(() => {
+	new Main().run();
+}, 0);
+
+class Main {
+	/** @pure */
+	run() {
+		id = 0;
+		const head = new DoublyLinkedListNode("1");
+		head.setNext(new DoublyLinkedListNode("2"));
+		head.next!.setNext(new DoublyLinkedListNode("3"));
+		const tail = new DoublyLinkedListNode("4");
+		head.next!.next!.setNext(tail);
+		reverse(new DoublyLinkedList(head, tail));
+		console.log("finished");
+	}
+}
+
+function reverse(list: DoublyLinkedList) {
+	// Open a new Debug Visualizer
+	// and enter `visualize()`!
+	const visualize = () =>
+		createGraphFromPointers(
+			{
+				last,
+				"list.head": list.head,
+				"list.tail": list.tail
+			},
+			i => ({
+				id: i.id,
+				label: i.name,
+				color: finished.has(i) ? "lime" : "lightblue",
+				edges: [
+					{ to: i.next!, label: "next", color: "lightblue", },
+					{ to: i.prev!, label: "prev", color: "lightgray" },
+				].filter(r => !!r.to),
+			}));
+
+	// Finished nodes have correct pointers,
+	// their next node is also finished.
+	const finished = new Set();
+	var last: DoublyLinkedListNode | null = null;
+	list.tail = list.head;
+	while (list.head) {
+		list.head.prev = list.head.next;
+		list.head.next = last;
+		finished.add(list.head);
+		last = list.head;
+		list.head = list.head.prev;
+	}
+	list.head = last;
+}
+
+class DoublyLinkedList {
+	constructor(
+		public head: DoublyLinkedListNode | null,
+		public tail: DoublyLinkedListNode | null
+	) { }
+}
+
+let id = 0;
+class DoublyLinkedListNode {
+	public readonly id = (id++).toString();
+	constructor(public name: string) { }
+
+	next: DoublyLinkedListNode | null = null;
+	prev: DoublyLinkedListNode | null = null;
+
+	public setNext(val: DoublyLinkedListNode): void {
+		val.prev = this;
+		this.next = val;
+	}
+}

demos/js/src/demo_fetch.js

@@ -0,0 +1,7 @@
+const fetch = require("node-fetch");
+
+fetch("https://jsonplaceholder.typicode.com/users")
+    .then((response) => response.json())
+    .then((json) => {
+        debugger;
+    });

demos/js/src/demo_random-walks.ts

@@ -0,0 +1,20 @@
+// visualize `data`
+const data = new Array<number>();
+let curValue = 0;
+
+for (let j = 0; j < 100; j++) {
+	addManyRandomValues();
+}
+
+function addManyRandomValues() {
+	for (let i = 0; i < 100; i++) {
+		addRandomValue();
+	}
+}
+
+function addRandomValue() {
+	const delta = Math.random()
+		> 0.5 ? 1 : -1;
+	data.push(curValue);
+	curValue += delta;
+}

demos/js/src/demo_sorting.ts

@@ -13,9 +13,13 @@ hedietDbgVis.markedGrid(
 */
 
 // 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);
-console.log(sorted);
+/** @pure */
+function main() {
+	const array = [1, 2, 33, 31, 1, 2, 63, 123, 6, 32, 943, 346, 24];
+	const sorted = quickSort(array, 0, array.length - 1);
+	console.log(sorted);
+}
+main();
 
 function swap(array: Array<number>, i: number, j: number) {
 	[array[i], array[j]] = [array[j], array[i]];

demos/js/src/demo_stack-frames.js

@@ -0,0 +1,8 @@
+
+function test() {
+    let i = 1;
+    debugger;
+}
+
+let i = 0;
+test();

demos/js/src/demo_typescript-asts.ts

@@ -11,13 +11,14 @@ setTimeout(() => {
 
 class Main {
 	run() {
-		const files = new Map<string, string>([
+		/*const files = new Map<string, string>([
 			[
 				"main.ts",
 				`
 class Test1 {
 	public foo(a: number) {
 		const x = { a: 5 };
+		const y = { a: 5 };
 	}
 }
 `,
@@ -34,7 +35,7 @@ class Test1 {
 		const c = prog.getTypeChecker();
 		let myValue = undefined; // Visualize `myValue` here!
 		const sourceFileAst = prog.getSourceFiles()[0];
-		myValue = sourceFileAst.getText();
+		myValue = sourceFileAst;
 		console.log("myValue is the source code of the AST");
 		debugger;
 
@@ -64,13 +65,24 @@ class Test1 {
 			},
 		};
 		console.log("myValue is AST, annotated with symbol information");
-		debugger;
+		debugger;*/
+		require;
 
-		for (const ident of identifiers) {
-			myValue = ident;
-			console.log("myValue is an identifier");
-			debugger;
-		}
+		const sf = ts.createSourceFile("main.ts",
+			`
+class Test1 {
+	public foo(a: number) {
+		const x = { a: 5 };
+		const y = { a: 24 };
+	}
+}
+			`, ts.ScriptTarget.ESNext, true);
+		const traverse = (node: ts.Node) => {
+			ts.forEachChild(node, child => {
+				traverse(child);
+			});
+		};
+		traverse(sf);
 	}
 }