[Self-profiler revamp 1/2]: Profile browser.

This is the first part of the self-profiler revamp.  The self-profiler
remains a useful tool for troubleshooting DDlog performance issues.  It
runs with low overhead, allows enabling/disabling CPU and change
profiling at runtime to only instrument parts of the program, and because
it is integrated into the DDlog runtime it can precisely match each DD
operator to the corresponding DDlog operator.  DDshow does not currently
have these features.

However, the self-profiler tends to produce profiles that are hard to
parse even for people familiar with compiler internals.  We therefore
set out to revamp the self-profiler to improve its ergonomics.

The new self-profiler will have the following features:
- It will produce profiles in the form of interactive HTML tables.  Each
  row in the table represents a DD operator and contains operator
  description, e.g., "Arrange relation 'Rel1' by 'x,y,z'" along with
  links to one or more source code location that this operator
  corresponds to (e.g., all locations where this specific arrangement
  of 'Rel1' is used).
- The new `dump_profile` API will dump the profile into an HTML file
  on the disk instead of returning it as a string.  All profiles
  generated by the same process are generated in the same folder, even
  if the process creates multiple instances of DDlog.  This folder
  will also contain a complete snapshot of all DDlog code in the
  program, so that the profiler can show program sources even when
  the program does not run on the same system where it was compiled.
- Internally, the self-profiler will represent profiles using a
  well-defined JSON format.  New APIs will be added to extract
  each of the four profiles currently supported by DDlog (arrangement
  size profile, peak arrangement size profile, change profile, and
  CPU profile) in the JSON format, for automatic processing by
  third-party tools.

This commit adds a TypeScript implementation of the profile browser.
The browser renders JSON profiles as HTML tables.  The user can
expand a table record, at which point the browser will load associated
code from the source code directory.  Since browsers these days refuse
to open arbitrary files even in the same directory, the browser
expects the DDlog source code to be stored as a JS program consisting
of a single statement that inserts a string (the DDlog source code)
in a global map.

Signed-off-by: Mihai Budiu <[email protected]>

Author: Mihai Budiu

tools/profiler_ui/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+ui.js
+*.map

tools/profiler_ui/Makefile

@@ -0,0 +1,5 @@
+all: ui.html ui.css ui.ts
+	tsc
+
+dependencies:
+	npm install

tools/profiler_ui/package-lock.json

@@ -0,0 +1,17 @@
+{
+  "name": "profiler_ui",
+  "version": "1.0.0",
+  "description": "DDlog profiler UI",
+  "main": "index.html",
+  "dependencies": {
+    "source-map": "^0.7.3",
+    "source-map-support": "^0.5.20",
+    "typescript": "^4.4.4"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "[email protected]",
+  "license": "MIT"
+}

tools/profiler_ui/package.json

@@ -0,0 +1,76 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true,                           /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    "types": [],                      /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+    // "resolveJsonModule": true,
+
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+
+    /* Advanced Options */
+    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
+    "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
+    "lib": [
+      "dom",
+      "es6",
+      "scripthost",
+      "es2015.collection"
+    ]
+  }
+}

tools/profiler_ui/tsconfig.json

@@ -0,0 +1,94 @@
+table {
+    border-collapse: collapse;
+}
+
+td {
+    border: 1px solid black;
+}
+
+td.noborder {}
+
+tr:hover {
+    background-color: beige;
+}
+
+thead {
+    background-color: lightgrey;
+    font-weight: bold;
+}
+
+tr:nth-child(even) {
+    background-color: lightgray;
+}
+
+tr:nth-child(even):hover {
+    background-color: beige;
+}
+
+td.cpu_us {
+    text-align: right;
+}
+
+svg.dataRange {
+    height: 10px;
+    display: inline-block;
+}
+
+svg.dataRange > g {
+    transform: scale(100, 10);
+}
+
+td.size {
+    text-align: right;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+td.invocations {
+    text-align:right;
+}
+
+.error {
+    color: red;
+}
+
+.filename {
+    background: pink;
+}
+
+.console {
+    font-family: monospace;
+    white-space: pre-wrap;
+    word-break: break-all;
+    background: #f0f0f0;
+}
+
+.code {
+    font-family: monospace;
+    white-space: pre-wrap;
+    word-break: break-all;
+    background: #f0f0f0;
+}
+
+.highlight {
+    background: lightyellow;
+}
+
+/* close, minimize, help page elements */
+.close {
+    font-weight: bold;
+    color: red;
+    cursor: pointer;
+    float: right;
+    clear: right;
+}
+
+.minimize {
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+    margin-left: 2px;
+    margin-right: 2px;
+}

tools/profiler_ui/ui.css

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Profile view</title>
+    <!-- Perhaps the following is not necessary, but I couldn't figure out how else to do it:
+    https://stackoverflow.com/questions/43042889/typescript-referenceerror-exports-is-not-defined -->
+    <link rel="stylesheet" href="ui.css">
+    <script>var exports = {"__esModule": true};</script>
+    <!-- The following file should define a variable named 'profiles' -->
+    <script src="profile.js"></script>
+    <script src="ui.js"></script>
+    <script>
+        // Each javascript loaded dynamically should insert an entry into this map.
+        const globalMap = new Map();
+
+        // Return the value deposited in the globalMap, and remove it.
+        function getGlobalMapValue(k) {
+            var result = globalMap.get(k);
+            globalMap.delete(k);
+            return result;
+        }
+
+        function loaded() {
+            createUI(profiles);
+        }
+    </script>
+</head>
+
+<body onload="loaded()">
+    <div id="top">
+        <!--
+        <div id="dropbox" style="height:30px; background: grey; border-width: 1px; align-content: center">
+            Drop file to display here.
+        </div>
+        -->
+    </div>
+</body>
+</html>