From c53d626f1235445b8d62bda4c1097017a53759ea Mon Sep 17 00:00:00 2001
From: Perryvw <perry.wesel@gmail.com>
Date: Sun, 17 May 2020 15:40:06 +0200
Subject: [PATCH 01/11] Initial visualizer setup

---
 docusaurus.config.js              |   2 +-
 package-lock.json                 | 546 +++++++++++++++++++++++++++++-
 package.json                      |   2 +
 src/pages/benchmark/Benchmark.tsx | 138 ++++++++
 src/pages/benchmark/index.tsx     |  16 +
 src/pages/benchmark/util.ts       |  23 ++
 6 files changed, 723 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/benchmark/Benchmark.tsx
 create mode 100644 src/pages/benchmark/index.tsx
 create mode 100644 src/pages/benchmark/util.ts

diff --git a/docusaurus.config.js b/docusaurus.config.js
index ca8b2235..37a7f167 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -35,7 +35,7 @@ module.exports = {
                     customCss: require.resolve("./src/custom.scss"),
                 },
                 pages: {
-                    include: ["index.tsx", "play/index.tsx"],
+                    include: ["index.tsx", "play/index.tsx", "benchmark/index.tsx"],
                 },
             },
         ],
diff --git a/package-lock.json b/package-lock.json
index 0ef1c7d4..4a52bc64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1660,12 +1660,278 @@
             "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
             "dev": true
         },
+        "@types/d3": {
+            "version": "5.7.2",
+            "resolved": "https://registry.npmjs.org/@types/d3/-/d3-5.7.2.tgz",
+            "integrity": "sha512-7/wClB8ycneWGy3jdvLfXKTd5SoTg9hji7IdJ0RuO9xTY54YpJ8zlcFADcXhY1J3kCBwxp+/1jeN6a5OMwgYOw==",
+            "dev": true,
+            "requires": {
+                "@types/d3-array": "^1",
+                "@types/d3-axis": "*",
+                "@types/d3-brush": "*",
+                "@types/d3-chord": "*",
+                "@types/d3-collection": "*",
+                "@types/d3-color": "*",
+                "@types/d3-contour": "*",
+                "@types/d3-dispatch": "*",
+                "@types/d3-drag": "*",
+                "@types/d3-dsv": "*",
+                "@types/d3-ease": "*",
+                "@types/d3-fetch": "*",
+                "@types/d3-force": "*",
+                "@types/d3-format": "*",
+                "@types/d3-geo": "*",
+                "@types/d3-hierarchy": "*",
+                "@types/d3-interpolate": "*",
+                "@types/d3-path": "*",
+                "@types/d3-polygon": "*",
+                "@types/d3-quadtree": "*",
+                "@types/d3-random": "*",
+                "@types/d3-scale": "*",
+                "@types/d3-scale-chromatic": "*",
+                "@types/d3-selection": "*",
+                "@types/d3-shape": "*",
+                "@types/d3-time": "*",
+                "@types/d3-time-format": "*",
+                "@types/d3-timer": "*",
+                "@types/d3-transition": "*",
+                "@types/d3-voronoi": "*",
+                "@types/d3-zoom": "*"
+            }
+        },
+        "@types/d3-array": {
+            "version": "1.2.7",
+            "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-1.2.7.tgz",
+            "integrity": "sha512-51vHWuUyDOi+8XuwPrTw3cFqyh2Slg9y8COYkRfjCPG9TfYqY0hoNPzv/8BrcAy0FeQBzqEo/D/8Nk2caOQJnA==",
+            "dev": true
+        },
+        "@types/d3-axis": {
+            "version": "1.0.12",
+            "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-1.0.12.tgz",
+            "integrity": "sha512-BZISgSD5M8TgURyNtcPAmUB9sk490CO1Thb6/gIn0WZTt3Y50IssX+2Z0vTccoqZksUDTep0b+o4ofXslvNbqg==",
+            "dev": true,
+            "requires": {
+                "@types/d3-selection": "*"
+            }
+        },
+        "@types/d3-brush": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-1.1.0.tgz",
+            "integrity": "sha512-yz5Y94XpUARimOlLk+RWM1cZh1FrtmSGOyDQfCArsMa6kAnhjF3EserSTDnHAuVuNATMoTIOPHa7pjG2iTkPYA==",
+            "dev": true,
+            "requires": {
+                "@types/d3-selection": "*"
+            }
+        },
+        "@types/d3-chord": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-1.0.9.tgz",
+            "integrity": "sha512-UA6lI9CVW5cT5Ku/RV4hxoFn4mKySHm7HEgodtfRthAj1lt9rKZEPon58vyYfk+HIAm33DtJJgZwMXy2QgyPXw==",
+            "dev": true
+        },
+        "@types/d3-collection": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/@types/d3-collection/-/d3-collection-1.0.8.tgz",
+            "integrity": "sha512-y5lGlazdc0HNO0F3UUX2DPE7OmYvd9Kcym4hXwrJcNUkDaypR5pX+apuMikl9LfTxKItJsY9KYvzBulpCKyvuQ==",
+            "dev": true
+        },
+        "@types/d3-color": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.2.2.tgz",
+            "integrity": "sha512-6pBxzJ8ZP3dYEQ4YjQ+NVbQaOflfgXq/JbDiS99oLobM2o72uAST4q6yPxHv6FOTCRC/n35ktuo8pvw/S4M7sw==",
+            "dev": true
+        },
+        "@types/d3-contour": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-1.3.0.tgz",
+            "integrity": "sha512-AUCUIjEnC5lCGBM9hS+MryRaFLIrPls4Rbv6ktqbd+TK/RXZPwOy9rtBWmGpbeXcSOYCJTUDwNJuEnmYPJRxHQ==",
+            "dev": true,
+            "requires": {
+                "@types/d3-array": "*",
+                "@types/geojson": "*"
+            }
+        },
+        "@types/d3-dispatch": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-1.0.7.tgz",
+            "integrity": "sha512-M+z84G7UKwK6hEPnGCSccOg8zJ3Nk2hgDQ9sCstHXgsFU0sMxlIZVKqKB5oxUDbALqQG6ucg0G9e8cmOSlishg==",
+            "dev": true
+        },
+        "@types/d3-drag": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-1.2.3.tgz",
+            "integrity": "sha512-rWB5SPvkYVxW3sqUxHOJUZwifD0KqvKwvt1bhNqcLpW6Azsd0BJgRNcyVW8GAferaAk5r8dzeZnf9zKlg9+xMQ==",
+            "dev": true,
+            "requires": {
+                "@types/d3-selection": "*"
+            }
+        },
+        "@types/d3-dsv": {
+            "version": "1.0.36",
+            "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-1.0.36.tgz",
+            "integrity": "sha512-jbIWQ27QJcBNMZbQv0NSQMHnBDCmxghAxePxgyiPH1XPCRkOsTBei7jcdi3fDrUCGpCV3lKrSZFSlOkhUQVClA==",
+            "dev": true
+        },
+        "@types/d3-ease": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-1.0.9.tgz",
+            "integrity": "sha512-U5ADevQ+W6fy32FVZZC9EXallcV/Mi12A5Tkd0My5MrC7T8soMQEhlDAg88XUWm0zoCQlB4XV0en/24LvuDB4Q==",
+            "dev": true
+        },
+        "@types/d3-fetch": {
+            "version": "1.1.5",
+            "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-1.1.5.tgz",
+            "integrity": "sha512-o9c0ItT5/Gl3wbNuVpzRnYX1t3RghzeWAjHUVLuyZJudiTxC4f/fC0ZPFWLQ2lVY8pAMmxpV8TJ6ETYCgPeI3A==",
+            "dev": true,
+            "requires": {
+                "@types/d3-dsv": "*"
+            }
+        },
+        "@types/d3-force": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-1.2.1.tgz",
+            "integrity": "sha512-jqK+I36uz4kTBjyk39meed5y31Ab+tXYN/x1dn3nZEus9yOHCLc+VrcIYLc/aSQ0Y7tMPRlIhLetulME76EiiA==",
+            "dev": true
+        },
+        "@types/d3-format": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-1.3.1.tgz",
+            "integrity": "sha512-KAWvReOKMDreaAwOjdfQMm0HjcUMlQG47GwqdVKgmm20vTd2pucj0a70c3gUSHrnsmo6H2AMrkBsZU2UhJLq8A==",
+            "dev": true
+        },
+        "@types/d3-geo": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-1.11.1.tgz",
+            "integrity": "sha512-Ox8WWOG3igDRoep/dNsGbOiSJYdUG3ew/6z0ETvHyAtXZVBjOE0S96zSSmzgl0gqQ3RdZjn2eeJOj9oRcMZPkQ==",
+            "dev": true,
+            "requires": {
+                "@types/geojson": "*"
+            }
+        },
+        "@types/d3-hierarchy": {
+            "version": "1.1.6",
+            "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-1.1.6.tgz",
+            "integrity": "sha512-vvSaIDf/Ov0o3KwMT+1M8+WbnnlRiGjlGD5uvk83a1mPCTd/E5x12bUJ/oP55+wUY/4Kb5kc67rVpVGJ2KUHxg==",
+            "dev": true
+        },
+        "@types/d3-interpolate": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.3.1.tgz",
+            "integrity": "sha512-z8Zmi08XVwe8e62vP6wcA+CNuRhpuUU5XPEfqpG0hRypDE5BWNthQHB1UNWWDB7ojCbGaN4qBdsWp5kWxhT1IQ==",
+            "dev": true,
+            "requires": {
+                "@types/d3-color": "*"
+            }
+        },
+        "@types/d3-path": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.8.tgz",
+            "integrity": "sha512-AZGHWslq/oApTAHu9+yH/Bnk63y9oFOMROtqPAtxl5uB6qm1x2lueWdVEjsjjV3Qc2+QfuzKIwIR5MvVBakfzA==",
+            "dev": true
+        },
+        "@types/d3-polygon": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-1.0.7.tgz",
+            "integrity": "sha512-Xuw0eSjQQKs8jTiNbntWH0S+Xp+JyhqxmQ0YAQ3rDu6c3kKMFfgsaGN7Jv5u3zG6yVX/AsLP/Xs/QRjmi9g43Q==",
+            "dev": true
+        },
+        "@types/d3-quadtree": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
+            "integrity": "sha512-0ajFawWicfjsaCLh6NzxOyVDYhQAmMFbsiI3MPGLInorauHFEh9/Cl6UHNf+kt/J1jfoxKY/ZJaKAoDpbvde5Q==",
+            "dev": true
+        },
+        "@types/d3-random": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-1.1.2.tgz",
+            "integrity": "sha512-Jui+Zn28pQw/3EayPKaN4c/PqTvqNbIPjHkgIIFnxne1FdwNjfHtAIsZIBMKlquQNrrMjFzCrlF2gPs3xckqaA==",
+            "dev": true
+        },
+        "@types/d3-scale": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-2.2.0.tgz",
+            "integrity": "sha512-oQFanN0/PiR2oySHfj+zAAkK1/p4LD32Nt1TMVmzk+bYHk7vgIg/iTXQWitp1cIkDw4LMdcgvO63wL+mNs47YA==",
+            "dev": true,
+            "requires": {
+                "@types/d3-time": "*"
+            }
+        },
+        "@types/d3-scale-chromatic": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz",
+            "integrity": "sha512-9/D7cOBKdZdTCPc6re0HeSUFBM0aFzdNdmYggUWT9SRRiYSOa6Ys2xdTwHKgc1WS3gGfwTMatBOdWCS863REsg==",
+            "dev": true
+        },
+        "@types/d3-selection": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.4.1.tgz",
+            "integrity": "sha512-bv8IfFYo/xG6dxri9OwDnK3yCagYPeRIjTlrcdYJSx+FDWlCeBDepIHUpqROmhPtZ53jyna0aUajZRk0I3rXNA==",
+            "dev": true
+        },
+        "@types/d3-shape": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.2.tgz",
+            "integrity": "sha512-LtD8EaNYCaBRzHzaAiIPrfcL3DdIysc81dkGlQvv7WQP3+YXV7b0JJTtR1U3bzeRieS603KF4wUo+ZkJVenh8w==",
+            "dev": true,
+            "requires": {
+                "@types/d3-path": "*"
+            }
+        },
+        "@types/d3-time": {
+            "version": "1.0.10",
+            "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.0.10.tgz",
+            "integrity": "sha512-aKf62rRQafDQmSiv1NylKhIMmznsjRN+MnXRXTqHoqm0U/UZzVpdrtRnSIfdiLS616OuC1soYeX1dBg2n1u8Xw==",
+            "dev": true
+        },
+        "@types/d3-time-format": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.1.1.tgz",
+            "integrity": "sha512-tJSyXta8ZyJ52wDDHA96JEsvkbL6jl7wowGmuf45+fAkj5Y+SQOnz0N7/H68OWmPshPsAaWMQh+GAws44IzH3g==",
+            "dev": true
+        },
+        "@types/d3-timer": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-1.0.9.tgz",
+            "integrity": "sha512-WvfJ3LFxBbWjqRGz9n7GJt08RrTHPJDVsIwwoCMROlqF+iDacYiAFjf9oqnq0mXpb2juA2N/qjKP+MKdal3YNQ==",
+            "dev": true
+        },
+        "@types/d3-transition": {
+            "version": "1.1.6",
+            "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-1.1.6.tgz",
+            "integrity": "sha512-/F+O2r4oz4G9ATIH3cuSCMGphAnl7VDx7SbENEK0NlI/FE8Jx2oiIrv0uTrpg7yF/AmuWbqp7AGdEHAPIh24Gg==",
+            "dev": true,
+            "requires": {
+                "@types/d3-selection": "*"
+            }
+        },
+        "@types/d3-voronoi": {
+            "version": "1.1.9",
+            "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.9.tgz",
+            "integrity": "sha512-DExNQkaHd1F3dFPvGA/Aw2NGyjMln6E9QzsiqOcBgnE+VInYnFBHBBySbZQts6z6xD+5jTfKCP7M4OqMyVjdwQ==",
+            "dev": true
+        },
+        "@types/d3-zoom": {
+            "version": "1.7.4",
+            "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-1.7.4.tgz",
+            "integrity": "sha512-5jnFo/itYhJeB2khO/lKe730kW/h2EbKMOvY0uNp3+7NdPm4w63DwPEMxifQZ7n902xGYK5DdU67FmToSoy4VA==",
+            "dev": true,
+            "requires": {
+                "@types/d3-interpolate": "*",
+                "@types/d3-selection": "*"
+            }
+        },
         "@types/events": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
             "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==",
             "dev": true
         },
+        "@types/geojson": {
+            "version": "7946.0.7",
+            "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
+            "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==",
+            "dev": true
+        },
         "@types/glob": {
             "version": "7.1.1",
             "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
@@ -4134,6 +4400,277 @@
             "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
             "dev": true
         },
+        "d3": {
+            "version": "5.16.0",
+            "resolved": "https://registry.npmjs.org/d3/-/d3-5.16.0.tgz",
+            "integrity": "sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==",
+            "requires": {
+                "d3-array": "1",
+                "d3-axis": "1",
+                "d3-brush": "1",
+                "d3-chord": "1",
+                "d3-collection": "1",
+                "d3-color": "1",
+                "d3-contour": "1",
+                "d3-dispatch": "1",
+                "d3-drag": "1",
+                "d3-dsv": "1",
+                "d3-ease": "1",
+                "d3-fetch": "1",
+                "d3-force": "1",
+                "d3-format": "1",
+                "d3-geo": "1",
+                "d3-hierarchy": "1",
+                "d3-interpolate": "1",
+                "d3-path": "1",
+                "d3-polygon": "1",
+                "d3-quadtree": "1",
+                "d3-random": "1",
+                "d3-scale": "2",
+                "d3-scale-chromatic": "1",
+                "d3-selection": "1",
+                "d3-shape": "1",
+                "d3-time": "1",
+                "d3-time-format": "2",
+                "d3-timer": "1",
+                "d3-transition": "1",
+                "d3-voronoi": "1",
+                "d3-zoom": "1"
+            }
+        },
+        "d3-array": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+            "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+        },
+        "d3-axis": {
+            "version": "1.0.12",
+            "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz",
+            "integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ=="
+        },
+        "d3-brush": {
+            "version": "1.1.5",
+            "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.5.tgz",
+            "integrity": "sha512-rEaJ5gHlgLxXugWjIkolTA0OyMvw8UWU1imYXy1v642XyyswmI1ybKOv05Ft+ewq+TFmdliD3VuK0pRp1VT/5A==",
+            "requires": {
+                "d3-dispatch": "1",
+                "d3-drag": "1",
+                "d3-interpolate": "1",
+                "d3-selection": "1",
+                "d3-transition": "1"
+            }
+        },
+        "d3-chord": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.6.tgz",
+            "integrity": "sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==",
+            "requires": {
+                "d3-array": "1",
+                "d3-path": "1"
+            }
+        },
+        "d3-collection": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
+            "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
+        },
+        "d3-color": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+            "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+        },
+        "d3-contour": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz",
+            "integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==",
+            "requires": {
+                "d3-array": "^1.1.1"
+            }
+        },
+        "d3-dispatch": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+            "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+        },
+        "d3-drag": {
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+            "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+            "requires": {
+                "d3-dispatch": "1",
+                "d3-selection": "1"
+            }
+        },
+        "d3-dsv": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz",
+            "integrity": "sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==",
+            "requires": {
+                "commander": "2",
+                "iconv-lite": "0.4",
+                "rw": "1"
+            },
+            "dependencies": {
+                "commander": {
+                    "version": "2.20.3",
+                    "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+                    "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+                }
+            }
+        },
+        "d3-ease": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.6.tgz",
+            "integrity": "sha512-SZ/lVU7LRXafqp7XtIcBdxnWl8yyLpgOmzAk0mWBI9gXNzLDx5ybZgnRbH9dN/yY5tzVBqCQ9avltSnqVwessQ=="
+        },
+        "d3-fetch": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.1.2.tgz",
+            "integrity": "sha512-S2loaQCV/ZeyTyIF2oP8D1K9Z4QizUzW7cWeAOAS4U88qOt3Ucf6GsmgthuYSdyB2HyEm4CeGvkQxWsmInsIVA==",
+            "requires": {
+                "d3-dsv": "1"
+            }
+        },
+        "d3-force": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz",
+            "integrity": "sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==",
+            "requires": {
+                "d3-collection": "1",
+                "d3-dispatch": "1",
+                "d3-quadtree": "1",
+                "d3-timer": "1"
+            }
+        },
+        "d3-format": {
+            "version": "1.4.4",
+            "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.4.tgz",
+            "integrity": "sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw=="
+        },
+        "d3-geo": {
+            "version": "1.12.0",
+            "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.0.tgz",
+            "integrity": "sha512-NalZVW+6/SpbKcnl+BCO67m8gX+nGeJdo6oGL9H6BRUGUL1e+AtPcP4vE4TwCQ/gl8y5KE7QvBzrLn+HsKIl+w==",
+            "requires": {
+                "d3-array": "1"
+            }
+        },
+        "d3-hierarchy": {
+            "version": "1.1.9",
+            "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
+            "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
+        },
+        "d3-interpolate": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+            "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+            "requires": {
+                "d3-color": "1"
+            }
+        },
+        "d3-path": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+            "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+        },
+        "d3-polygon": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz",
+            "integrity": "sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ=="
+        },
+        "d3-quadtree": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
+            "integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA=="
+        },
+        "d3-random": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz",
+            "integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ=="
+        },
+        "d3-scale": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
+            "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
+            "requires": {
+                "d3-array": "^1.2.0",
+                "d3-collection": "1",
+                "d3-format": "1",
+                "d3-interpolate": "1",
+                "d3-time": "1",
+                "d3-time-format": "2"
+            }
+        },
+        "d3-scale-chromatic": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz",
+            "integrity": "sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==",
+            "requires": {
+                "d3-color": "1",
+                "d3-interpolate": "1"
+            }
+        },
+        "d3-selection": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.1.tgz",
+            "integrity": "sha512-BTIbRjv/m5rcVTfBs4AMBLKs4x8XaaLkwm28KWu9S2vKNqXkXt2AH2Qf0sdPZHjFxcWg/YL53zcqAz+3g4/7PA=="
+        },
+        "d3-shape": {
+            "version": "1.3.7",
+            "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+            "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+            "requires": {
+                "d3-path": "1"
+            }
+        },
+        "d3-time": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+            "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
+        },
+        "d3-time-format": {
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.2.3.tgz",
+            "integrity": "sha512-RAHNnD8+XvC4Zc4d2A56Uw0yJoM7bsvOlJR33bclxq399Rak/b9bhvu/InjxdWhPtkgU53JJcleJTGkNRnN6IA==",
+            "requires": {
+                "d3-time": "1"
+            }
+        },
+        "d3-timer": {
+            "version": "1.0.10",
+            "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+            "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
+        },
+        "d3-transition": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+            "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+            "requires": {
+                "d3-color": "1",
+                "d3-dispatch": "1",
+                "d3-ease": "1",
+                "d3-interpolate": "1",
+                "d3-selection": "^1.1.0",
+                "d3-timer": "1"
+            }
+        },
+        "d3-voronoi": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+            "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
+        },
+        "d3-zoom": {
+            "version": "1.8.3",
+            "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
+            "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
+            "requires": {
+                "d3-dispatch": "1",
+                "d3-drag": "1",
+                "d3-interpolate": "1",
+                "d3-selection": "1",
+                "d3-transition": "1"
+            }
+        },
         "dashdash": {
             "version": "1.14.1",
             "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -6498,7 +7035,6 @@
             "version": "0.4.24",
             "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
             "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-            "dev": true,
             "requires": {
                 "safer-buffer": ">= 2.1.2 < 3"
             }
@@ -11226,6 +11762,11 @@
                 "aproba": "^1.1.1"
             }
         },
+        "rw": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+            "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+        },
         "rx": {
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
@@ -11259,8 +11800,7 @@
         "safer-buffer": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-            "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-            "dev": true
+            "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
         },
         "sass": {
             "version": "1.26.3",
diff --git a/package.json b/package.json
index a1bcd59f..25a0bd95 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
         "@types/react-json-tree": "^0.6.11",
         "@types/webpack-env": "^1.15.1",
         "clsx": "^1.1.0",
+        "d3": "^5.16.0",
         "fengari-web": "^0.1.4",
         "lua-types": "^2.7.0",
         "lz-string": "^1.4.4",
@@ -31,6 +32,7 @@
         "@ark120202/typescript-config": "^2.1.0",
         "@docusaurus/core": "^2.0.0-alpha.50",
         "@docusaurus/preset-classic": "^2.0.0-alpha.50",
+        "@types/d3": "^5.7.2",
         "@types/node": "^13.11.1",
         "file-loader": "^6.0.0",
         "fork-ts-checker-webpack-plugin": "^4.1.3",
diff --git a/src/pages/benchmark/Benchmark.tsx b/src/pages/benchmark/Benchmark.tsx
new file mode 100644
index 00000000..46c6bfdd
--- /dev/null
+++ b/src/pages/benchmark/Benchmark.tsx
@@ -0,0 +1,138 @@
+import React from "react";
+import * as d3 from "d3";
+
+import { join as joinOnProperty } from "./util";
+
+export enum BenchmarkKind {
+    Memory = "memory",
+}
+
+export type BenchmarkResult = MemoryBenchmarkResult;
+
+export enum MemoryBenchmarkCategory {
+    TotalMemory = "totalMemory",
+    Garbage = "garbage",
+}
+
+export interface MemoryBenchmarkResult {
+    kind: string;
+    categories: Record<MemoryBenchmarkCategory, number>;
+    benchmarkName: string;
+}
+
+const dataMaster: BenchmarkResult[] = [{"benchmarkName":"./memory_benchmarks/class_creation.lua","categories":{"garbage":8.5390625,"totalMemory":917.02734375},"kind":"memory"},{"benchmarkName":"./memory_benchmarks/array_every.lua","categories":{"garbage":128.5390625,"totalMemory":129.08203125},"kind":"memory"},{"benchmarkName":"./memory_benchmarks/array_push.lua","categories":{"garbage":4.625,"totalMemory":132.4296875},"kind":"memory"},{"benchmarkName":"./memory_benchmarks/graph_cylce.lua","categories":{"garbage":172575.6484375,"totalMemory":172590.37109375},"kind":"memory"},{"benchmarkName":"./memory_benchmarks/array_concat.lua","categories":{"garbage":58287.7734375,"totalMemory":58417.96875},"kind":"memory"}];
+const dataCommit: BenchmarkResult[] = [{"categories":{"garbage":5.5390625,"totalMemory":917.02734375},"kind":"memory","benchmarkName":"./memory_benchmarks/class_creation.lua"},{"categories":{"garbage":128.5390625,"totalMemory":129.08203125},"kind":"memory","benchmarkName":"./memory_benchmarks/array_every.lua"},{"categories":{"garbage":3.625,"totalMemory":132.4296875},"kind":"memory","benchmarkName":"./memory_benchmarks/array_push.lua"},{"categories":{"garbage":172572.8359375,"totalMemory":172587.55078125},"kind":"memory","benchmarkName":"./memory_benchmarks/graph_cylce.lua"},{"categories":{"garbage":48287.7734375,"totalMemory":58417.96875},"kind":"memory","benchmarkName":"./memory_benchmarks/array_concat.lua"}];
+
+const matchedBenchmarks = joinOnProperty(dataMaster, dataCommit, bm => bm.benchmarkName);
+
+const formatBenchmarkName = (benchmarkName: string) => benchmarkName.replace(".lua", "").split("/").pop()!;
+
+const generatedGarbageData = matchedBenchmarks.map(bm => ({
+    name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
+    oldValue: bm.left?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
+    newValue: bm.right?.categories[MemoryBenchmarkCategory.Garbage] ?? 0
+}));
+
+const GRAPH_WIDTH = 1000;
+const GRAPH_HEIGHT = 300;
+const GRAPH_MARGIN = { left: 50, top: 5, right: 1 };
+
+let node: SVGSVGElement | null = null;
+
+export default class extends React.Component {
+
+    componentDidMount() {
+        this.draw();
+    }
+
+    componentDidUpdate() {
+        this.draw();
+    }
+
+    draw() {
+        const barMaxHeight = GRAPH_HEIGHT - 50;
+
+        const xScale = d3.scaleBand()
+            .domain(generatedGarbageData.map(bm => bm.name))
+            .range([GRAPH_MARGIN.left, GRAPH_WIDTH - GRAPH_MARGIN.right]);
+
+        const bandWidth = xScale.bandwidth();
+        const barWidth = 25;
+
+        const xAxis = d3.axisBottom(xScale);
+
+        d3.select(node)
+            .append("g")
+                .attr("transform", `translate(0, ${barMaxHeight})`)
+                .call(xAxis);
+
+        const maxValue = d3.max(generatedGarbageData.map(bm => Math.max(bm.oldValue, bm.newValue)))!;
+        const maxAxisValue = Math.pow(10, Math.ceil(Math.log10(maxValue)));
+
+        const yScale = d3.scaleLog()
+            .domain([1, maxAxisValue])
+            .range([barMaxHeight - GRAPH_MARGIN.top, 0]);
+
+        const yAxis = d3.axisLeft(yScale);
+
+        d3.select(node)
+            .append("g")
+                .attr("transform", `translate(${GRAPH_MARGIN.left}, ${GRAPH_MARGIN.top})`)
+                .call(yAxis);
+
+        const entries = d3.select(node)
+            .selectAll('rect')
+            .data(generatedGarbageData)
+            .enter();
+
+        entries
+            .append('rect')
+                .attr('width', barWidth)
+                .attr('x', d => xScale(d.name)! + 0.5 * bandWidth - barWidth - 1)
+                .attr('height', d => barMaxHeight - yScale(d.oldValue))
+                .attr('y', d => yScale(d.oldValue))
+                .style('fill', 'red');
+                //.style("stroke", "currentColor");
+        
+        entries
+            .append('rect')
+                .attr('width', barWidth)
+                .attr('x', d => xScale(d.name)! + 0.5 * bandWidth + 1)
+                .attr('height', d => barMaxHeight - yScale(d.newValue))
+                .attr('y', d => yScale(d.newValue))
+                .style('fill', 'blue')
+                //.style("stroke", "currentColor");
+
+        // Add legend
+        const legendEntries = [["Master", "red"], ["Commit", "blue"]];
+        const legend = d3.select(node)
+            .append("g")
+            .attr("transform", `translate(${GRAPH_WIDTH - 100 * legendEntries.length - GRAPH_MARGIN.right}, ${GRAPH_HEIGHT - 20})`);
+
+        legendEntries.forEach(([name, color], i) => {
+            legend.append("rect")
+                .attr("width", 15)
+                .attr("height", 15)
+                .attr("x", 100 * i)
+                .style("fill", color)
+                .style("stroke", "currentColor");
+            
+            legend.append("text")
+                .attr("x", 100 * i + 20)
+                .attr("y", 13)
+                //.attr("width", 80)
+                //.attr("height", 20)
+                .text(name)
+                .attr("fill", "currentColor");
+        });
+    }
+
+    render() {
+        return (
+            <>
+                <h2>Garbage created</h2>
+                <svg ref={n => node = n} width={GRAPH_WIDTH} height={GRAPH_HEIGHT}></svg>
+            </>
+        );
+    }
+}
diff --git a/src/pages/benchmark/index.tsx b/src/pages/benchmark/index.tsx
new file mode 100644
index 00000000..de3a3f46
--- /dev/null
+++ b/src/pages/benchmark/index.tsx
@@ -0,0 +1,16 @@
+import Layout from "@theme/Layout";
+import React from "react";
+
+const Benchmark = React.lazy(() => import("./Benchmark"));
+export default function CreateBenchmark() {
+    const isSSR = typeof window === "undefined";
+    return (
+        <Layout title="Benchmark">
+            {!isSSR && (
+                <React.Suspense fallback={<div />}>
+                    <Benchmark />
+                </React.Suspense>
+            )}
+        </Layout>
+    );
+}
diff --git a/src/pages/benchmark/util.ts b/src/pages/benchmark/util.ts
new file mode 100644
index 00000000..deb2ea79
--- /dev/null
+++ b/src/pages/benchmark/util.ts
@@ -0,0 +1,23 @@
+interface JoinResult<T> {
+    left?: T,
+    right?: T,
+}
+
+export function join<TItem, TKey>(left: TItem[], right: TItem[], joinOnProperty: (item: TItem) => TKey): Array<JoinResult<TItem>> {
+    const map = new Map<TKey, JoinResult<TItem>>();
+
+    for (const item of left) {
+        map.set(joinOnProperty(item), { left: item });
+    }
+    for (const item of right) {
+        const key = joinOnProperty(item);
+        const entry = map.get(key);
+        if (entry) {
+            entry.right = item;
+        } else {
+            map.set(key, { right: item });
+        }
+    }
+
+    return [...map.values()];
+}
\ No newline at end of file

From 418619d95e9dbf4fe8d07293ac0ca993343414eb Mon Sep 17 00:00:00 2001
From: Perryvw <perry.wesel@gmail.com>
Date: Mon, 18 May 2020 12:21:49 +0200
Subject: [PATCH 02/11] Refactor graph code

---
 src/pages/benchmark/Benchmark.tsx             | 128 +++++++-----------
 src/pages/benchmark/bar-comparison-graph.ts   |  76 +++++++++++
 src/pages/benchmark/d3-util.ts                |  22 +++
 .../benchmark/positive-negative-bar-graph.ts  |  73 ++++++++++
 4 files changed, 218 insertions(+), 81 deletions(-)
 create mode 100644 src/pages/benchmark/bar-comparison-graph.ts
 create mode 100644 src/pages/benchmark/d3-util.ts
 create mode 100644 src/pages/benchmark/positive-negative-bar-graph.ts

diff --git a/src/pages/benchmark/Benchmark.tsx b/src/pages/benchmark/Benchmark.tsx
index 46c6bfdd..c87db6a0 100644
--- a/src/pages/benchmark/Benchmark.tsx
+++ b/src/pages/benchmark/Benchmark.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import * as d3 from "d3";
 
 import { join as joinOnProperty } from "./util";
+import { barComparisonGraph } from './bar-comparison-graph';
+import { positiveNegativeBarGraph } from './positive-negative-bar-graph';
 
 export enum BenchmarkKind {
     Memory = "memory",
@@ -21,23 +23,39 @@ export interface MemoryBenchmarkResult {
 }
 
 const dataMaster: BenchmarkResult[] = [{"benchmarkName":"./memory_benchmarks/class_creation.lua","categories":{"garbage":8.5390625,"totalMemory":917.02734375},"kind":"memory"},{"benchmarkName":"./memory_benchmarks/array_every.lua","categories":{"garbage":128.5390625,"totalMemory":129.08203125},"kind":"memory"},{"benchmarkName":"./memory_benchmarks/array_push.lua","categories":{"garbage":4.625,"totalMemory":132.4296875},"kind":"memory"},{"benchmarkName":"./memory_benchmarks/graph_cylce.lua","categories":{"garbage":172575.6484375,"totalMemory":172590.37109375},"kind":"memory"},{"benchmarkName":"./memory_benchmarks/array_concat.lua","categories":{"garbage":58287.7734375,"totalMemory":58417.96875},"kind":"memory"}];
-const dataCommit: BenchmarkResult[] = [{"categories":{"garbage":5.5390625,"totalMemory":917.02734375},"kind":"memory","benchmarkName":"./memory_benchmarks/class_creation.lua"},{"categories":{"garbage":128.5390625,"totalMemory":129.08203125},"kind":"memory","benchmarkName":"./memory_benchmarks/array_every.lua"},{"categories":{"garbage":3.625,"totalMemory":132.4296875},"kind":"memory","benchmarkName":"./memory_benchmarks/array_push.lua"},{"categories":{"garbage":172572.8359375,"totalMemory":172587.55078125},"kind":"memory","benchmarkName":"./memory_benchmarks/graph_cylce.lua"},{"categories":{"garbage":48287.7734375,"totalMemory":58417.96875},"kind":"memory","benchmarkName":"./memory_benchmarks/array_concat.lua"}];
+const dataCommit: BenchmarkResult[] = [{"categories":{"garbage":5.5390625,"totalMemory":917.02734375},"kind":"memory","benchmarkName":"./memory_benchmarks/class_creation.lua"},{"categories":{"garbage":168.5390625,"totalMemory":129.08203125},"kind":"memory","benchmarkName":"./memory_benchmarks/array_every.lua"},{"categories":{"garbage":3.625,"totalMemory":132.4296875},"kind":"memory","benchmarkName":"./memory_benchmarks/array_push.lua"},{"categories":{"garbage":172572.8359375,"totalMemory":172587.55078125},"kind":"memory","benchmarkName":"./memory_benchmarks/graph_cylce.lua"},{"categories":{"garbage":48287.7734375,"totalMemory":58417.96875},"kind":"memory","benchmarkName":"./memory_benchmarks/array_concat.lua"}];
 
 const matchedBenchmarks = joinOnProperty(dataMaster, dataCommit, bm => bm.benchmarkName);
 
 const formatBenchmarkName = (benchmarkName: string) => benchmarkName.replace(".lua", "").split("/").pop()!;
 
+// Comparison data master garbage created vs commit garbate created (ABSOLUTE)
 const generatedGarbageData = matchedBenchmarks.map(bm => ({
     name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
     oldValue: bm.left?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
     newValue: bm.right?.categories[MemoryBenchmarkCategory.Garbage] ?? 0
 }));
 
-const GRAPH_WIDTH = 1000;
-const GRAPH_HEIGHT = 300;
-const GRAPH_MARGIN = { left: 50, top: 5, right: 1 };
 
-let node: SVGSVGElement | null = null;
+let garbageCreatedComparisonSvg: SVGSVGElement;
+const garbageCreatedComparisonGraphWidth = 1000;
+const garbageCreatedComparisonGraphHeight = 300;
+
+// Comparison data master garbage created vs commit garbate created (ABSOLUTE)
+const generatedGarbageChangeData = matchedBenchmarks.map(bm => {
+    const oldValue = bm.left?.categories[MemoryBenchmarkCategory.Garbage]!;
+    const newValue = bm.right?.categories[MemoryBenchmarkCategory.Garbage]!;
+    
+    return {
+        name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
+        value: 100 * (newValue - oldValue) / oldValue
+    };
+});
+
+
+let garbageCreatedChangeSvg: SVGSVGElement;
+const garbageCreatedChangeGraphWidth = 1000;
+const garbageCreatedChangeGraphHeight = 300;
 
 export default class extends React.Component {
 
@@ -50,88 +68,36 @@ export default class extends React.Component {
     }
 
     draw() {
-        const barMaxHeight = GRAPH_HEIGHT - 50;
-
-        const xScale = d3.scaleBand()
-            .domain(generatedGarbageData.map(bm => bm.name))
-            .range([GRAPH_MARGIN.left, GRAPH_WIDTH - GRAPH_MARGIN.right]);
-
-        const bandWidth = xScale.bandwidth();
-        const barWidth = 25;
-
-        const xAxis = d3.axisBottom(xScale);
-
-        d3.select(node)
-            .append("g")
-                .attr("transform", `translate(0, ${barMaxHeight})`)
-                .call(xAxis);
-
-        const maxValue = d3.max(generatedGarbageData.map(bm => Math.max(bm.oldValue, bm.newValue)))!;
-        const maxAxisValue = Math.pow(10, Math.ceil(Math.log10(maxValue)));
-
-        const yScale = d3.scaleLog()
-            .domain([1, maxAxisValue])
-            .range([barMaxHeight - GRAPH_MARGIN.top, 0]);
-
-        const yAxis = d3.axisLeft(yScale);
-
-        d3.select(node)
-            .append("g")
-                .attr("transform", `translate(${GRAPH_MARGIN.left}, ${GRAPH_MARGIN.top})`)
-                .call(yAxis);
-
-        const entries = d3.select(node)
-            .selectAll('rect')
-            .data(generatedGarbageData)
-            .enter();
-
-        entries
-            .append('rect')
-                .attr('width', barWidth)
-                .attr('x', d => xScale(d.name)! + 0.5 * bandWidth - barWidth - 1)
-                .attr('height', d => barMaxHeight - yScale(d.oldValue))
-                .attr('y', d => yScale(d.oldValue))
-                .style('fill', 'red');
-                //.style("stroke", "currentColor");
-        
-        entries
-            .append('rect')
-                .attr('width', barWidth)
-                .attr('x', d => xScale(d.name)! + 0.5 * bandWidth + 1)
-                .attr('height', d => barMaxHeight - yScale(d.newValue))
-                .attr('y', d => yScale(d.newValue))
-                .style('fill', 'blue')
-                //.style("stroke", "currentColor");
-
-        // Add legend
-        const legendEntries = [["Master", "red"], ["Commit", "blue"]];
-        const legend = d3.select(node)
-            .append("g")
-            .attr("transform", `translate(${GRAPH_WIDTH - 100 * legendEntries.length - GRAPH_MARGIN.right}, ${GRAPH_HEIGHT - 20})`);
-
-        legendEntries.forEach(([name, color], i) => {
-            legend.append("rect")
-                .attr("width", 15)
-                .attr("height", 15)
-                .attr("x", 100 * i)
-                .style("fill", color)
-                .style("stroke", "currentColor");
-            
-            legend.append("text")
-                .attr("x", 100 * i + 20)
-                .attr("y", 13)
-                //.attr("width", 80)
-                //.attr("height", 20)
-                .text(name)
-                .attr("fill", "currentColor");
-        });
+        positiveNegativeBarGraph(
+            d3.select(garbageCreatedChangeSvg),
+            generatedGarbageChangeData.sort((a, b) => a.value - b.value),
+            garbageCreatedChangeGraphWidth,
+            garbageCreatedChangeGraphHeight
+        );
+
+        barComparisonGraph(
+            d3.select(garbageCreatedComparisonSvg),
+            generatedGarbageData, 
+            garbageCreatedComparisonGraphWidth, 
+            garbageCreatedComparisonGraphHeight
+        );
     }
 
     render() {
         return (
             <>
+                <h2>Garbage created change</h2>
+                {/* [% Delta] Gerbage created */}
+                <svg ref={n => garbageCreatedChangeSvg = n!}
+                    width={garbageCreatedChangeGraphWidth}
+                    height={garbageCreatedChangeGraphHeight}>
+                </svg>
                 <h2>Garbage created</h2>
-                <svg ref={n => node = n} width={GRAPH_WIDTH} height={GRAPH_HEIGHT}></svg>
+                {/* [Absolute] Garbage created comparison */}
+                <svg ref={n => garbageCreatedComparisonSvg = n!}
+                    width={garbageCreatedComparisonGraphWidth}
+                    height={garbageCreatedComparisonGraphHeight}>
+                </svg>
             </>
         );
     }
diff --git a/src/pages/benchmark/bar-comparison-graph.ts b/src/pages/benchmark/bar-comparison-graph.ts
new file mode 100644
index 00000000..220f6458
--- /dev/null
+++ b/src/pages/benchmark/bar-comparison-graph.ts
@@ -0,0 +1,76 @@
+import * as d3 from "d3";
+import { addLegend } from './d3-util';
+
+interface ComparisonData {
+    name: string;
+    oldValue: number;
+    newValue: number;
+}
+
+const GRAPH_MARGIN = { left: 50, top: 5, right: 1 };
+
+export function barComparisonGraph(
+    selection: d3.Selection<SVGSVGElement, unknown, null, undefined>,
+    data: ComparisonData[],
+    width: number, height: number
+) {    
+    const barMaxHeight = height - 50;
+
+    const xScale = d3.scaleBand()
+        .domain(data.map(bm => bm.name))
+        .range([GRAPH_MARGIN.left, width - GRAPH_MARGIN.right]);
+
+    const bandWidth = xScale.bandwidth();
+    const barWidth = 25;
+
+    const xAxis = d3.axisBottom(xScale);
+
+    selection
+        .append("g")
+            .attr("transform", `translate(0, ${barMaxHeight})`)
+            .call(xAxis);
+
+    const maxValue = d3.max(data.map(bm => Math.max(bm.oldValue, bm.newValue)))!;
+    const maxAxisValue = Math.pow(10, Math.ceil(Math.log10(maxValue)));
+
+    const yScale = d3.scaleLog()
+        .domain([1, maxAxisValue])
+        .range([barMaxHeight - GRAPH_MARGIN.top, 0]);
+
+    const yAxis = d3.axisLeft(yScale);
+
+    selection
+        .append("g")
+            .attr("transform", `translate(${GRAPH_MARGIN.left}, ${GRAPH_MARGIN.top})`)
+            .call(yAxis);
+
+    const entries = selection
+        .selectAll('rect')
+        .data(data)
+        .enter();
+
+    entries
+        .append('rect')
+            .attr('width', barWidth)
+            .attr('x', d => xScale(d.name)! + 0.5 * bandWidth - barWidth - 1)
+            .attr('height', d => barMaxHeight - yScale(d.oldValue))
+            .attr('y', d => yScale(d.oldValue))
+            .style('fill', 'red');
+            //.style("stroke", "currentColor");
+    
+    entries
+        .append('rect')
+            .attr('width', barWidth)
+            .attr('x', d => xScale(d.name)! + 0.5 * bandWidth + 1)
+            .attr('height', d => barMaxHeight - yScale(d.newValue))
+            .attr('y', d => yScale(d.newValue))
+            .style('fill', 'blue')
+            //.style("stroke", "currentColor");
+
+    // Add legend
+    const legendEntries: Array<[string, string]> = [["Master", "red"], ["Commit", "blue"]];
+    addLegend(selection, legendEntries)
+        .attr("transform", `translate(${width - 100 * legendEntries.length - GRAPH_MARGIN.right}, ${height - 20})`);
+    
+    return selection;
+}
\ No newline at end of file
diff --git a/src/pages/benchmark/d3-util.ts b/src/pages/benchmark/d3-util.ts
new file mode 100644
index 00000000..6c3b18df
--- /dev/null
+++ b/src/pages/benchmark/d3-util.ts
@@ -0,0 +1,22 @@
+import * as d3 from "d3";
+
+export function addLegend(selection: d3.Selection<SVGSVGElement, unknown, null, undefined>, items: Array<[string, string]>) {
+    const legend = selection.append("g");
+    
+    items.forEach(([name, color], i) => {
+        legend.append("rect")
+            .attr("width", 15)
+            .attr("height", 15)
+            .attr("x", 100 * i)
+            .style("fill", color)
+            .style("stroke", "currentColor");
+        
+        legend.append("text")
+            .attr("x", 100 * i + 20)
+            .attr("y", 13)
+            .text(name)
+            .attr("fill", "currentColor");
+    });
+
+    return legend;
+}
\ No newline at end of file
diff --git a/src/pages/benchmark/positive-negative-bar-graph.ts b/src/pages/benchmark/positive-negative-bar-graph.ts
new file mode 100644
index 00000000..0949d94e
--- /dev/null
+++ b/src/pages/benchmark/positive-negative-bar-graph.ts
@@ -0,0 +1,73 @@
+import * as d3 from "d3";
+
+interface CategoryData {
+    name: string;
+    value: number;
+}
+
+const GRAPH_MARGIN = { left: 50, top: 5, right: 1 };
+
+export function positiveNegativeBarGraph(
+    selection: d3.Selection<SVGSVGElement, unknown, null, undefined>,
+    data: CategoryData[],
+    width: number, height: number
+) {    
+    const barMaxHeight = height / 2 - 50;
+
+    const minValue = d3.min(data.map(bm => bm.value))!;
+    const maxValue = d3.max(data.map(bm => bm.value))!;
+
+    console.log(minValue, maxValue);
+
+    const yScale = d3.scaleLinear()
+        .domain([minValue * 1.2, maxValue * 1.2])
+        .range([0, height - 10]);
+
+    const yAxis = d3.axisLeft(yScale);
+
+    const xScale = d3.scaleBand()
+        .domain(data.map(bm => bm.name))
+        .range([GRAPH_MARGIN.left, width - GRAPH_MARGIN.right]);
+
+    const bandWidth = xScale.bandwidth();
+    const barWidth = 25;
+
+    const xAxis = d3.axisBottom(xScale);
+
+    selection
+        .append("g")
+            .attr("transform", `translate(0, ${yScale(0) + 5})`)
+            .call(xAxis);
+
+    selection
+        .append("g")
+            .attr("transform", `translate(${GRAPH_MARGIN.left}, ${GRAPH_MARGIN.top})`)
+            .call(yAxis);
+
+    const barSize = (val: number) => Math.abs(height / 2 - yScale(val));
+
+    const bars = selection
+        .selectAll('rect')
+        .data(data)
+        .enter();
+
+    bars
+        .append('rect')
+            .attr('width', barWidth)
+            .attr('x', d => xScale(d.name)! + 0.5 * bandWidth - 0.5 * barWidth)
+            .attr('height', d => barSize(d.value) - 1)
+            .attr('y', d => d.value > 0 ? height / 2 + 10 : height / 2 + 10 - barSize(d.value))
+            .style('fill', d => d.value > 0 ? 'red' : 'green');
+            //.style("stroke", "currentColor");
+    
+    bars
+        .append('text')
+            .text(d => `${d.value > 0 ? '+' : ''}${Math.round(d.value * 100) / 100}%`)
+            .attr('x', d => xScale(d.name)! + 0.5 * bandWidth)
+            .attr('y', d => d.value > 0 ? height / 2 + barSize(d.value) + 30 : height / 2 - barSize(d.value))
+            .style('fill', "currentColor")
+            .style('text-anchor', 'middle');
+            //.style("stroke", "currentColor");
+    
+    return selection;
+}
\ No newline at end of file

From 30289f078316a76aa3151efee74f45295906bf99 Mon Sep 17 00:00:00 2001
From: Perryvw <perry.wesel@gmail.com>
Date: Mon, 18 May 2020 14:48:28 +0200
Subject: [PATCH 03/11] Decode real data from url

---
 docusaurus.config.js                          |   2 +-
 package-lock.json                             |   5 +
 package.json                                  |   3 +-
 src/pages/benchmark/Benchmark.tsx             | 104 ------------
 src/pages/benchmark/bar-comparison-graph.ts   |  76 ---------
 .../benchmark/positive-negative-bar-graph.ts  |  73 ---------
 src/pages/benchmark/util.ts                   |  23 ---
 src/pages/benchviz/Benchmark.tsx              | 151 ++++++++++++++++++
 src/pages/benchviz/bar-comparison-graph.ts    |  79 +++++++++
 src/pages/{benchmark => benchviz}/d3-util.ts  |  17 +-
 src/pages/{benchmark => benchviz}/index.tsx   |   0
 .../benchviz/positive-negative-bar-graph.ts   |  64 ++++++++
 src/pages/benchviz/util.ts                    |  27 ++++
 13 files changed, 340 insertions(+), 284 deletions(-)
 delete mode 100644 src/pages/benchmark/Benchmark.tsx
 delete mode 100644 src/pages/benchmark/bar-comparison-graph.ts
 delete mode 100644 src/pages/benchmark/positive-negative-bar-graph.ts
 delete mode 100644 src/pages/benchmark/util.ts
 create mode 100644 src/pages/benchviz/Benchmark.tsx
 create mode 100644 src/pages/benchviz/bar-comparison-graph.ts
 rename src/pages/{benchmark => benchviz}/d3-util.ts (66%)
 rename src/pages/{benchmark => benchviz}/index.tsx (100%)
 create mode 100644 src/pages/benchviz/positive-negative-bar-graph.ts
 create mode 100644 src/pages/benchviz/util.ts

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 37a7f167..ea4eb11b 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -35,7 +35,7 @@ module.exports = {
                     customCss: require.resolve("./src/custom.scss"),
                 },
                 pages: {
-                    include: ["index.tsx", "play/index.tsx", "benchmark/index.tsx"],
+                    include: ["index.tsx", "play/index.tsx", "benchviz/index.tsx"],
                 },
             },
         ],
diff --git a/package-lock.json b/package-lock.json
index 4a52bc64..5f4656cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16100,6 +16100,11 @@
             "integrity": "sha1-4Se9nmb9hGvl6rSME5SIL3wOT5g=",
             "dev": true
         },
+        "zlib": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/zlib/-/zlib-1.0.5.tgz",
+            "integrity": "sha1-bnyXL8NxxkWmr7A6sUdp3vEU/MA="
+        },
         "zwitch": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
diff --git a/package.json b/package.json
index 25a0bd95..0b59d0e1 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
         "react-dom": "^16.13.1",
         "react-json-tree": "^0.11.2",
         "react-monaco-editor": "^0.36.0",
-        "typescript-to-lua": "^0.32.2"
+        "typescript-to-lua": "^0.32.2",
+        "zlib": "^1.0.5"
     },
     "devDependencies": {
         "@ark120202/typescript-config": "^2.1.0",
diff --git a/src/pages/benchmark/Benchmark.tsx b/src/pages/benchmark/Benchmark.tsx
deleted file mode 100644
index c87db6a0..00000000
--- a/src/pages/benchmark/Benchmark.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from "react";
-import * as d3 from "d3";
-
-import { join as joinOnProperty } from "./util";
-import { barComparisonGraph } from './bar-comparison-graph';
-import { positiveNegativeBarGraph } from './positive-negative-bar-graph';
-
-export enum BenchmarkKind {
-    Memory = "memory",
-}
-
-export type BenchmarkResult = MemoryBenchmarkResult;
-
-export enum MemoryBenchmarkCategory {
-    TotalMemory = "totalMemory",
-    Garbage = "garbage",
-}
-
-export interface MemoryBenchmarkResult {
-    kind: string;
-    categories: Record<MemoryBenchmarkCategory, number>;
-    benchmarkName: string;
-}
-
-const dataMaster: BenchmarkResult[] = [{"benchmarkName":"./memory_benchmarks/class_creation.lua","categories":{"garbage":8.5390625,"totalMemory":917.02734375},"kind":"memory"},{"benchmarkName":"./memory_benchmarks/array_every.lua","categories":{"garbage":128.5390625,"totalMemory":129.08203125},"kind":"memory"},{"benchmarkName":"./memory_benchmarks/array_push.lua","categories":{"garbage":4.625,"totalMemory":132.4296875},"kind":"memory"},{"benchmarkName":"./memory_benchmarks/graph_cylce.lua","categories":{"garbage":172575.6484375,"totalMemory":172590.37109375},"kind":"memory"},{"benchmarkName":"./memory_benchmarks/array_concat.lua","categories":{"garbage":58287.7734375,"totalMemory":58417.96875},"kind":"memory"}];
-const dataCommit: BenchmarkResult[] = [{"categories":{"garbage":5.5390625,"totalMemory":917.02734375},"kind":"memory","benchmarkName":"./memory_benchmarks/class_creation.lua"},{"categories":{"garbage":168.5390625,"totalMemory":129.08203125},"kind":"memory","benchmarkName":"./memory_benchmarks/array_every.lua"},{"categories":{"garbage":3.625,"totalMemory":132.4296875},"kind":"memory","benchmarkName":"./memory_benchmarks/array_push.lua"},{"categories":{"garbage":172572.8359375,"totalMemory":172587.55078125},"kind":"memory","benchmarkName":"./memory_benchmarks/graph_cylce.lua"},{"categories":{"garbage":48287.7734375,"totalMemory":58417.96875},"kind":"memory","benchmarkName":"./memory_benchmarks/array_concat.lua"}];
-
-const matchedBenchmarks = joinOnProperty(dataMaster, dataCommit, bm => bm.benchmarkName);
-
-const formatBenchmarkName = (benchmarkName: string) => benchmarkName.replace(".lua", "").split("/").pop()!;
-
-// Comparison data master garbage created vs commit garbate created (ABSOLUTE)
-const generatedGarbageData = matchedBenchmarks.map(bm => ({
-    name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
-    oldValue: bm.left?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
-    newValue: bm.right?.categories[MemoryBenchmarkCategory.Garbage] ?? 0
-}));
-
-
-let garbageCreatedComparisonSvg: SVGSVGElement;
-const garbageCreatedComparisonGraphWidth = 1000;
-const garbageCreatedComparisonGraphHeight = 300;
-
-// Comparison data master garbage created vs commit garbate created (ABSOLUTE)
-const generatedGarbageChangeData = matchedBenchmarks.map(bm => {
-    const oldValue = bm.left?.categories[MemoryBenchmarkCategory.Garbage]!;
-    const newValue = bm.right?.categories[MemoryBenchmarkCategory.Garbage]!;
-    
-    return {
-        name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
-        value: 100 * (newValue - oldValue) / oldValue
-    };
-});
-
-
-let garbageCreatedChangeSvg: SVGSVGElement;
-const garbageCreatedChangeGraphWidth = 1000;
-const garbageCreatedChangeGraphHeight = 300;
-
-export default class extends React.Component {
-
-    componentDidMount() {
-        this.draw();
-    }
-
-    componentDidUpdate() {
-        this.draw();
-    }
-
-    draw() {
-        positiveNegativeBarGraph(
-            d3.select(garbageCreatedChangeSvg),
-            generatedGarbageChangeData.sort((a, b) => a.value - b.value),
-            garbageCreatedChangeGraphWidth,
-            garbageCreatedChangeGraphHeight
-        );
-
-        barComparisonGraph(
-            d3.select(garbageCreatedComparisonSvg),
-            generatedGarbageData, 
-            garbageCreatedComparisonGraphWidth, 
-            garbageCreatedComparisonGraphHeight
-        );
-    }
-
-    render() {
-        return (
-            <>
-                <h2>Garbage created change</h2>
-                {/* [% Delta] Gerbage created */}
-                <svg ref={n => garbageCreatedChangeSvg = n!}
-                    width={garbageCreatedChangeGraphWidth}
-                    height={garbageCreatedChangeGraphHeight}>
-                </svg>
-                <h2>Garbage created</h2>
-                {/* [Absolute] Garbage created comparison */}
-                <svg ref={n => garbageCreatedComparisonSvg = n!}
-                    width={garbageCreatedComparisonGraphWidth}
-                    height={garbageCreatedComparisonGraphHeight}>
-                </svg>
-            </>
-        );
-    }
-}
diff --git a/src/pages/benchmark/bar-comparison-graph.ts b/src/pages/benchmark/bar-comparison-graph.ts
deleted file mode 100644
index 220f6458..00000000
--- a/src/pages/benchmark/bar-comparison-graph.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import * as d3 from "d3";
-import { addLegend } from './d3-util';
-
-interface ComparisonData {
-    name: string;
-    oldValue: number;
-    newValue: number;
-}
-
-const GRAPH_MARGIN = { left: 50, top: 5, right: 1 };
-
-export function barComparisonGraph(
-    selection: d3.Selection<SVGSVGElement, unknown, null, undefined>,
-    data: ComparisonData[],
-    width: number, height: number
-) {    
-    const barMaxHeight = height - 50;
-
-    const xScale = d3.scaleBand()
-        .domain(data.map(bm => bm.name))
-        .range([GRAPH_MARGIN.left, width - GRAPH_MARGIN.right]);
-
-    const bandWidth = xScale.bandwidth();
-    const barWidth = 25;
-
-    const xAxis = d3.axisBottom(xScale);
-
-    selection
-        .append("g")
-            .attr("transform", `translate(0, ${barMaxHeight})`)
-            .call(xAxis);
-
-    const maxValue = d3.max(data.map(bm => Math.max(bm.oldValue, bm.newValue)))!;
-    const maxAxisValue = Math.pow(10, Math.ceil(Math.log10(maxValue)));
-
-    const yScale = d3.scaleLog()
-        .domain([1, maxAxisValue])
-        .range([barMaxHeight - GRAPH_MARGIN.top, 0]);
-
-    const yAxis = d3.axisLeft(yScale);
-
-    selection
-        .append("g")
-            .attr("transform", `translate(${GRAPH_MARGIN.left}, ${GRAPH_MARGIN.top})`)
-            .call(yAxis);
-
-    const entries = selection
-        .selectAll('rect')
-        .data(data)
-        .enter();
-
-    entries
-        .append('rect')
-            .attr('width', barWidth)
-            .attr('x', d => xScale(d.name)! + 0.5 * bandWidth - barWidth - 1)
-            .attr('height', d => barMaxHeight - yScale(d.oldValue))
-            .attr('y', d => yScale(d.oldValue))
-            .style('fill', 'red');
-            //.style("stroke", "currentColor");
-    
-    entries
-        .append('rect')
-            .attr('width', barWidth)
-            .attr('x', d => xScale(d.name)! + 0.5 * bandWidth + 1)
-            .attr('height', d => barMaxHeight - yScale(d.newValue))
-            .attr('y', d => yScale(d.newValue))
-            .style('fill', 'blue')
-            //.style("stroke", "currentColor");
-
-    // Add legend
-    const legendEntries: Array<[string, string]> = [["Master", "red"], ["Commit", "blue"]];
-    addLegend(selection, legendEntries)
-        .attr("transform", `translate(${width - 100 * legendEntries.length - GRAPH_MARGIN.right}, ${height - 20})`);
-    
-    return selection;
-}
\ No newline at end of file
diff --git a/src/pages/benchmark/positive-negative-bar-graph.ts b/src/pages/benchmark/positive-negative-bar-graph.ts
deleted file mode 100644
index 0949d94e..00000000
--- a/src/pages/benchmark/positive-negative-bar-graph.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as d3 from "d3";
-
-interface CategoryData {
-    name: string;
-    value: number;
-}
-
-const GRAPH_MARGIN = { left: 50, top: 5, right: 1 };
-
-export function positiveNegativeBarGraph(
-    selection: d3.Selection<SVGSVGElement, unknown, null, undefined>,
-    data: CategoryData[],
-    width: number, height: number
-) {    
-    const barMaxHeight = height / 2 - 50;
-
-    const minValue = d3.min(data.map(bm => bm.value))!;
-    const maxValue = d3.max(data.map(bm => bm.value))!;
-
-    console.log(minValue, maxValue);
-
-    const yScale = d3.scaleLinear()
-        .domain([minValue * 1.2, maxValue * 1.2])
-        .range([0, height - 10]);
-
-    const yAxis = d3.axisLeft(yScale);
-
-    const xScale = d3.scaleBand()
-        .domain(data.map(bm => bm.name))
-        .range([GRAPH_MARGIN.left, width - GRAPH_MARGIN.right]);
-
-    const bandWidth = xScale.bandwidth();
-    const barWidth = 25;
-
-    const xAxis = d3.axisBottom(xScale);
-
-    selection
-        .append("g")
-            .attr("transform", `translate(0, ${yScale(0) + 5})`)
-            .call(xAxis);
-
-    selection
-        .append("g")
-            .attr("transform", `translate(${GRAPH_MARGIN.left}, ${GRAPH_MARGIN.top})`)
-            .call(yAxis);
-
-    const barSize = (val: number) => Math.abs(height / 2 - yScale(val));
-
-    const bars = selection
-        .selectAll('rect')
-        .data(data)
-        .enter();
-
-    bars
-        .append('rect')
-            .attr('width', barWidth)
-            .attr('x', d => xScale(d.name)! + 0.5 * bandWidth - 0.5 * barWidth)
-            .attr('height', d => barSize(d.value) - 1)
-            .attr('y', d => d.value > 0 ? height / 2 + 10 : height / 2 + 10 - barSize(d.value))
-            .style('fill', d => d.value > 0 ? 'red' : 'green');
-            //.style("stroke", "currentColor");
-    
-    bars
-        .append('text')
-            .text(d => `${d.value > 0 ? '+' : ''}${Math.round(d.value * 100) / 100}%`)
-            .attr('x', d => xScale(d.name)! + 0.5 * bandWidth)
-            .attr('y', d => d.value > 0 ? height / 2 + barSize(d.value) + 30 : height / 2 - barSize(d.value))
-            .style('fill', "currentColor")
-            .style('text-anchor', 'middle');
-            //.style("stroke", "currentColor");
-    
-    return selection;
-}
\ No newline at end of file
diff --git a/src/pages/benchmark/util.ts b/src/pages/benchmark/util.ts
deleted file mode 100644
index deb2ea79..00000000
--- a/src/pages/benchmark/util.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-interface JoinResult<T> {
-    left?: T,
-    right?: T,
-}
-
-export function join<TItem, TKey>(left: TItem[], right: TItem[], joinOnProperty: (item: TItem) => TKey): Array<JoinResult<TItem>> {
-    const map = new Map<TKey, JoinResult<TItem>>();
-
-    for (const item of left) {
-        map.set(joinOnProperty(item), { left: item });
-    }
-    for (const item of right) {
-        const key = joinOnProperty(item);
-        const entry = map.get(key);
-        if (entry) {
-            entry.right = item;
-        } else {
-            map.set(key, { right: item });
-        }
-    }
-
-    return [...map.values()];
-}
\ No newline at end of file
diff --git a/src/pages/benchviz/Benchmark.tsx b/src/pages/benchviz/Benchmark.tsx
new file mode 100644
index 00000000..a0205213
--- /dev/null
+++ b/src/pages/benchviz/Benchmark.tsx
@@ -0,0 +1,151 @@
+import * as d3 from "d3";
+import React from "react";
+import * as zlib from "zlib";
+
+import { barComparisonGraph } from "./bar-comparison-graph";
+import { positiveNegativeBarGraph } from "./positive-negative-bar-graph";
+import { joinOnProperty, JoinResult } from "./util";
+
+export enum BenchmarkKind {
+    Memory = "memory",
+}
+
+export type BenchmarkResult = MemoryBenchmarkResult;
+
+export enum MemoryBenchmarkCategory {
+    TotalMemory = "totalMemory",
+    Garbage = "garbage",
+}
+
+export interface MemoryBenchmarkResult {
+    kind: string;
+    categories: Record<MemoryBenchmarkCategory, number>;
+    benchmarkName: string;
+}
+
+// Utility functions
+const formatBenchmarkName = (benchmarkName: string) => benchmarkName.replace(".lua", "").split("/").pop()!;
+const formatMemory = (value: number) => `${Math.round(value / 10) / 100} Kb`;
+
+const benchmarkGarbage = (bm: BenchmarkResult) => bm.categories[MemoryBenchmarkCategory.Garbage];
+const garbagePercentChange = (result: JoinResult<BenchmarkResult>) =>
+    (benchmarkGarbage(result.right!) - benchmarkGarbage(result.left!)) / benchmarkGarbage(result.left!);
+
+// Get benchmark data from URL parameter
+const data = window.location.search.split("?d=")[1];
+const results = JSON.parse(zlib.inflateSync(Buffer.from(data, "base64")).toString());
+
+const dataMaster = results.old as BenchmarkResult[];
+const dataCommit = results.new as BenchmarkResult[];
+
+// Match old/new results by name
+const matchedBenchmarks = joinOnProperty(dataMaster, dataCommit, (bm) => bm.benchmarkName);
+
+// Sort by percentage change of garbage created
+const benchmarksSortedByPercentDifference = matchedBenchmarks.sort(
+    (a, b) => garbagePercentChange(a) - garbagePercentChange(b),
+);
+
+// Table containing the benchmark results
+const resultsTable: JSX.Element[] = [];
+benchmarksSortedByPercentDifference.forEach((bm, i) => {
+    const change = garbagePercentChange(bm);
+    const rowColor = change === 0 ? "currentColor" : change > 0 ? "red" : "green";
+
+    resultsTable.push(
+        <tr key={i} style={{ color: rowColor }}>
+            <td>{bm.left?.benchmarkName}</td>
+            <td>{formatMemory(benchmarkGarbage(bm.left!))}</td>
+            <td>{formatMemory(benchmarkGarbage(bm.right!))}</td>
+            <td>{change}</td>
+        </tr>,
+    );
+});
+
+// Comparison data master garbage created vs commit garbate created (ABSOLUTE)
+const generatedGarbageData = benchmarksSortedByPercentDifference.map((bm) => ({
+    name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
+    oldValue: bm.left?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
+    newValue: bm.right?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
+}));
+
+let garbageCreatedComparisonSvg: SVGSVGElement;
+const garbageCreatedComparisonGraphWidth = 1000;
+const garbageCreatedComparisonGraphHeight = 300;
+
+// Comparison data master garbage created vs commit garbate created (ABSOLUTE)
+const generatedGarbageChangeData = matchedBenchmarks.map((bm) => {
+    const oldValue = bm.left?.categories[MemoryBenchmarkCategory.Garbage]!;
+    const newValue = bm.right?.categories[MemoryBenchmarkCategory.Garbage]!;
+
+    return {
+        name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
+        value: (100 * (newValue - oldValue)) / oldValue,
+    };
+});
+
+let garbageCreatedChangeSvg: SVGSVGElement;
+const garbageCreatedChangeGraphWidth = 1000;
+const garbageCreatedChangeGraphHeight = 300;
+
+export default class extends React.Component {
+    componentDidMount() {
+        this.draw();
+    }
+
+    componentDidUpdate() {
+        this.draw();
+    }
+
+    draw() {
+        positiveNegativeBarGraph(
+            d3.select(garbageCreatedChangeSvg),
+            generatedGarbageChangeData,
+            garbageCreatedChangeGraphWidth,
+            garbageCreatedChangeGraphHeight,
+        );
+
+        barComparisonGraph(
+            d3.select(garbageCreatedComparisonSvg),
+            generatedGarbageData,
+            garbageCreatedComparisonGraphWidth,
+            garbageCreatedComparisonGraphHeight,
+        );
+    }
+
+    render() {
+        return (
+            <>
+                {/* Results table */}
+                <h2>Benchmark results</h2>
+                <table>
+                    <thead>
+                        <tr style={{ fontWeight: "bold" }}>
+                            <td>Benchmark</td>
+                            <td>Garbage Master</td>
+                            <td>Garbage Commit</td>
+                            <td>% Change</td>
+                        </tr>
+                    </thead>
+                    <tbody>{resultsTable}</tbody>
+                </table>
+
+                <h2>Garbage created change</h2>
+                {/* [% Delta] Gerbage created */}
+                <svg
+                    ref={(n) => (garbageCreatedChangeSvg = n!)}
+                    width={garbageCreatedChangeGraphWidth}
+                    height={garbageCreatedChangeGraphHeight}
+                ></svg>
+
+                <h2>Garbage created</h2>
+                {/* [Absolute] Garbage created comparison */}
+                <svg
+                    ref={(n) => (garbageCreatedComparisonSvg = n!)}
+                    width={garbageCreatedComparisonGraphWidth}
+                    height={garbageCreatedComparisonGraphHeight}
+                ></svg>
+            </>
+        );
+    }
+}
diff --git a/src/pages/benchviz/bar-comparison-graph.ts b/src/pages/benchviz/bar-comparison-graph.ts
new file mode 100644
index 00000000..69521251
--- /dev/null
+++ b/src/pages/benchviz/bar-comparison-graph.ts
@@ -0,0 +1,79 @@
+import * as d3 from "d3";
+import { addLegend } from "./d3-util";
+
+interface ComparisonData {
+    name: string;
+    oldValue: number;
+    newValue: number;
+}
+
+const GRAPH_MARGIN = { left: 50, top: 5, right: 1 };
+
+const COLOR_OLD = "#888888";
+const COLOR_NEW = "#007ACC";
+
+export function barComparisonGraph(
+    selection: d3.Selection<SVGSVGElement, unknown, null, undefined>,
+    data: ComparisonData[],
+    width: number,
+    height: number,
+) {
+    const barMaxHeight = height - 50;
+
+    // Create X scale and axis
+    const xScale = d3
+        .scaleBand()
+        .domain(data.map((bm) => bm.name))
+        .range([GRAPH_MARGIN.left, width - GRAPH_MARGIN.right]);
+
+    const bandWidth = xScale.bandwidth();
+    const barWidth = 25;
+
+    const xAxis = d3.axisBottom(xScale);
+    selection.append("g").attr("transform", `translate(0, ${barMaxHeight})`).call(xAxis);
+
+    // Create Y scale and axis
+    const maxValue = d3.max(data.map((bm) => Math.max(bm.oldValue, bm.newValue)))!;
+    const maxAxisValue = Math.pow(10, Math.ceil(Math.log10(maxValue)));
+
+    const yScale = d3
+        .scaleLog()
+        .domain([1, maxAxisValue])
+        .range([barMaxHeight - GRAPH_MARGIN.top, 0]);
+
+    const yAxis = d3.axisLeft(yScale);
+    selection.append("g").attr("transform", `translate(${GRAPH_MARGIN.left}, ${GRAPH_MARGIN.top})`).call(yAxis);
+
+    // Create bars for each entry
+    const entries = selection.selectAll("rect").data(data).enter();
+
+    entries
+        .append("rect")
+        .attr("width", barWidth)
+        .attr("x", (d) => xScale(d.name)! + 0.5 * bandWidth - barWidth - 1)
+        .attr("height", (d) => barMaxHeight - yScale(d.oldValue))
+        .attr("y", (d) => yScale(d.oldValue))
+        .style("fill", COLOR_OLD);
+    //.style("stroke", "currentColor");
+
+    entries
+        .append("rect")
+        .attr("width", barWidth)
+        .attr("x", (d) => xScale(d.name)! + 0.5 * bandWidth + 1)
+        .attr("height", (d) => barMaxHeight - yScale(d.newValue))
+        .attr("y", (d) => yScale(d.newValue))
+        .style("fill", COLOR_NEW);
+    //.style("stroke", "currentColor");
+
+    // Add legend
+    const legendEntries: Array<[string, string]> = [
+        ["Master", COLOR_OLD],
+        ["Commit", COLOR_NEW],
+    ];
+    addLegend(selection, legendEntries).attr(
+        "transform",
+        `translate(${width - 100 * legendEntries.length - GRAPH_MARGIN.right}, ${height - 20})`,
+    );
+
+    return selection;
+}
diff --git a/src/pages/benchmark/d3-util.ts b/src/pages/benchviz/d3-util.ts
similarity index 66%
rename from src/pages/benchmark/d3-util.ts
rename to src/pages/benchviz/d3-util.ts
index 6c3b18df..fe65663b 100644
--- a/src/pages/benchmark/d3-util.ts
+++ b/src/pages/benchviz/d3-util.ts
@@ -1,17 +1,22 @@
 import * as d3 from "d3";
 
-export function addLegend(selection: d3.Selection<SVGSVGElement, unknown, null, undefined>, items: Array<[string, string]>) {
+export function addLegend(
+    selection: d3.Selection<SVGSVGElement, unknown, null, undefined>,
+    items: Array<[string, string]>,
+) {
     const legend = selection.append("g");
-    
+
     items.forEach(([name, color], i) => {
-        legend.append("rect")
+        legend
+            .append("rect")
             .attr("width", 15)
             .attr("height", 15)
             .attr("x", 100 * i)
             .style("fill", color)
             .style("stroke", "currentColor");
-        
-        legend.append("text")
+
+        legend
+            .append("text")
             .attr("x", 100 * i + 20)
             .attr("y", 13)
             .text(name)
@@ -19,4 +24,4 @@ export function addLegend(selection: d3.Selection<SVGSVGElement, unknown, null,
     });
 
     return legend;
-}
\ No newline at end of file
+}
diff --git a/src/pages/benchmark/index.tsx b/src/pages/benchviz/index.tsx
similarity index 100%
rename from src/pages/benchmark/index.tsx
rename to src/pages/benchviz/index.tsx
diff --git a/src/pages/benchviz/positive-negative-bar-graph.ts b/src/pages/benchviz/positive-negative-bar-graph.ts
new file mode 100644
index 00000000..88cf1448
--- /dev/null
+++ b/src/pages/benchviz/positive-negative-bar-graph.ts
@@ -0,0 +1,64 @@
+import * as d3 from "d3";
+
+interface CategoryData {
+    name: string;
+    value: number;
+}
+
+const GRAPH_MARGIN = { left: 50, top: 5, right: 1 };
+
+export function positiveNegativeBarGraph(
+    selection: d3.Selection<SVGSVGElement, unknown, null, undefined>,
+    data: CategoryData[],
+    width: number,
+    height: number,
+) {
+    const minValue = d3.min(data.map((bm) => bm.value))!;
+    const maxValue = d3.max(data.map((bm) => bm.value))!;
+
+    const yScale = d3
+        .scaleLinear()
+        .domain([minValue * 1.2, maxValue * 1.2])
+        .range([0, height - 10]);
+
+    const yAxis = d3.axisLeft(yScale);
+
+    const xScale = d3
+        .scaleBand()
+        .domain(data.map((bm) => bm.name))
+        .range([GRAPH_MARGIN.left, width - GRAPH_MARGIN.right]);
+
+    const bandWidth = xScale.bandwidth();
+    const barWidth = 25;
+
+    const xAxis = d3.axisBottom(xScale);
+
+    selection
+        .append("g")
+        .attr("transform", `translate(0, ${yScale(0) + 5})`)
+        .call(xAxis);
+
+    selection.append("g").attr("transform", `translate(${GRAPH_MARGIN.left}, ${GRAPH_MARGIN.top})`).call(yAxis);
+
+    const barSize = (val: number) => Math.abs(height / 2 - yScale(val));
+
+    const bars = selection.selectAll("rect").data(data).enter();
+
+    bars.append("rect")
+        .attr("width", barWidth)
+        .attr("x", (d) => xScale(d.name)! + 0.5 * bandWidth - 0.5 * barWidth)
+        .attr("height", (d) => barSize(d.value) - 1)
+        .attr("y", (d) => (d.value > 0 ? height / 2 + 10 : height / 2 + 10 - barSize(d.value)))
+        .style("fill", (d) => (d.value > 0 ? "red" : "green"));
+    //.style("stroke", "currentColor");
+
+    bars.append("text")
+        .text((d) => `${d.value > 0 ? "+" : ""}${Math.round(d.value * 100) / 100}%`)
+        .attr("x", (d) => xScale(d.name)! + 0.5 * bandWidth)
+        .attr("y", (d) => (d.value > 0 ? height / 2 + barSize(d.value) + 30 : height / 2 - barSize(d.value)))
+        .style("fill", "currentColor")
+        .style("text-anchor", "middle");
+    //.style("stroke", "currentColor");
+
+    return selection;
+}
diff --git a/src/pages/benchviz/util.ts b/src/pages/benchviz/util.ts
new file mode 100644
index 00000000..784426e8
--- /dev/null
+++ b/src/pages/benchviz/util.ts
@@ -0,0 +1,27 @@
+export interface JoinResult<T> {
+    left?: T;
+    right?: T;
+}
+
+export function joinOnProperty<TItem, TKey>(
+    left: TItem[],
+    right: TItem[],
+    propertySelector: (item: TItem) => TKey,
+): Array<JoinResult<TItem>> {
+    const map = new Map<TKey, JoinResult<TItem>>();
+
+    for (const item of left) {
+        map.set(propertySelector(item), { left: item });
+    }
+    for (const item of right) {
+        const key = propertySelector(item);
+        const entry = map.get(key);
+        if (entry) {
+            entry.right = item;
+        } else {
+            map.set(key, { right: item });
+        }
+    }
+
+    return [...map.values()];
+}

From 81deb8139d69ee86e2eb58f388ef393af5594a8f Mon Sep 17 00:00:00 2001
From: Perryvw <perry.wesel@gmail.com>
Date: Thu, 21 May 2020 10:26:52 +0200
Subject: [PATCH 04/11] PR feedback

---
 package.json                                  |   2 +-
 src/pages/benchviz/Benchmark.tsx              | 151 ------------------
 src/pages/benchviz/benchmark-types.ts         |  16 ++
 src/pages/benchviz/index.tsx                  | 132 +++++++++++++--
 .../bar-comparison-graph.ts                   |   0
 .../benchviz/{ => visualizations}/d3-util.ts  |   0
 .../positive-negative-bar-graph.ts            |   0
 7 files changed, 139 insertions(+), 162 deletions(-)
 delete mode 100644 src/pages/benchviz/Benchmark.tsx
 create mode 100644 src/pages/benchviz/benchmark-types.ts
 rename src/pages/benchviz/{ => visualizations}/bar-comparison-graph.ts (100%)
 rename src/pages/benchviz/{ => visualizations}/d3-util.ts (100%)
 rename src/pages/benchviz/{ => visualizations}/positive-negative-bar-graph.ts (100%)

diff --git a/package.json b/package.json
index 0b59d0e1..81dd3988 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
         "trailingComma": "all"
     },
     "dependencies": {
+        "@types/d3": "^5.7.2",
         "@types/lz-string": "^1.3.34",
         "@types/react": "^16.9.34",
         "@types/react-dom": "^16.9.6",
@@ -33,7 +34,6 @@
         "@ark120202/typescript-config": "^2.1.0",
         "@docusaurus/core": "^2.0.0-alpha.50",
         "@docusaurus/preset-classic": "^2.0.0-alpha.50",
-        "@types/d3": "^5.7.2",
         "@types/node": "^13.11.1",
         "file-loader": "^6.0.0",
         "fork-ts-checker-webpack-plugin": "^4.1.3",
diff --git a/src/pages/benchviz/Benchmark.tsx b/src/pages/benchviz/Benchmark.tsx
deleted file mode 100644
index a0205213..00000000
--- a/src/pages/benchviz/Benchmark.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import * as d3 from "d3";
-import React from "react";
-import * as zlib from "zlib";
-
-import { barComparisonGraph } from "./bar-comparison-graph";
-import { positiveNegativeBarGraph } from "./positive-negative-bar-graph";
-import { joinOnProperty, JoinResult } from "./util";
-
-export enum BenchmarkKind {
-    Memory = "memory",
-}
-
-export type BenchmarkResult = MemoryBenchmarkResult;
-
-export enum MemoryBenchmarkCategory {
-    TotalMemory = "totalMemory",
-    Garbage = "garbage",
-}
-
-export interface MemoryBenchmarkResult {
-    kind: string;
-    categories: Record<MemoryBenchmarkCategory, number>;
-    benchmarkName: string;
-}
-
-// Utility functions
-const formatBenchmarkName = (benchmarkName: string) => benchmarkName.replace(".lua", "").split("/").pop()!;
-const formatMemory = (value: number) => `${Math.round(value / 10) / 100} Kb`;
-
-const benchmarkGarbage = (bm: BenchmarkResult) => bm.categories[MemoryBenchmarkCategory.Garbage];
-const garbagePercentChange = (result: JoinResult<BenchmarkResult>) =>
-    (benchmarkGarbage(result.right!) - benchmarkGarbage(result.left!)) / benchmarkGarbage(result.left!);
-
-// Get benchmark data from URL parameter
-const data = window.location.search.split("?d=")[1];
-const results = JSON.parse(zlib.inflateSync(Buffer.from(data, "base64")).toString());
-
-const dataMaster = results.old as BenchmarkResult[];
-const dataCommit = results.new as BenchmarkResult[];
-
-// Match old/new results by name
-const matchedBenchmarks = joinOnProperty(dataMaster, dataCommit, (bm) => bm.benchmarkName);
-
-// Sort by percentage change of garbage created
-const benchmarksSortedByPercentDifference = matchedBenchmarks.sort(
-    (a, b) => garbagePercentChange(a) - garbagePercentChange(b),
-);
-
-// Table containing the benchmark results
-const resultsTable: JSX.Element[] = [];
-benchmarksSortedByPercentDifference.forEach((bm, i) => {
-    const change = garbagePercentChange(bm);
-    const rowColor = change === 0 ? "currentColor" : change > 0 ? "red" : "green";
-
-    resultsTable.push(
-        <tr key={i} style={{ color: rowColor }}>
-            <td>{bm.left?.benchmarkName}</td>
-            <td>{formatMemory(benchmarkGarbage(bm.left!))}</td>
-            <td>{formatMemory(benchmarkGarbage(bm.right!))}</td>
-            <td>{change}</td>
-        </tr>,
-    );
-});
-
-// Comparison data master garbage created vs commit garbate created (ABSOLUTE)
-const generatedGarbageData = benchmarksSortedByPercentDifference.map((bm) => ({
-    name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
-    oldValue: bm.left?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
-    newValue: bm.right?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
-}));
-
-let garbageCreatedComparisonSvg: SVGSVGElement;
-const garbageCreatedComparisonGraphWidth = 1000;
-const garbageCreatedComparisonGraphHeight = 300;
-
-// Comparison data master garbage created vs commit garbate created (ABSOLUTE)
-const generatedGarbageChangeData = matchedBenchmarks.map((bm) => {
-    const oldValue = bm.left?.categories[MemoryBenchmarkCategory.Garbage]!;
-    const newValue = bm.right?.categories[MemoryBenchmarkCategory.Garbage]!;
-
-    return {
-        name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
-        value: (100 * (newValue - oldValue)) / oldValue,
-    };
-});
-
-let garbageCreatedChangeSvg: SVGSVGElement;
-const garbageCreatedChangeGraphWidth = 1000;
-const garbageCreatedChangeGraphHeight = 300;
-
-export default class extends React.Component {
-    componentDidMount() {
-        this.draw();
-    }
-
-    componentDidUpdate() {
-        this.draw();
-    }
-
-    draw() {
-        positiveNegativeBarGraph(
-            d3.select(garbageCreatedChangeSvg),
-            generatedGarbageChangeData,
-            garbageCreatedChangeGraphWidth,
-            garbageCreatedChangeGraphHeight,
-        );
-
-        barComparisonGraph(
-            d3.select(garbageCreatedComparisonSvg),
-            generatedGarbageData,
-            garbageCreatedComparisonGraphWidth,
-            garbageCreatedComparisonGraphHeight,
-        );
-    }
-
-    render() {
-        return (
-            <>
-                {/* Results table */}
-                <h2>Benchmark results</h2>
-                <table>
-                    <thead>
-                        <tr style={{ fontWeight: "bold" }}>
-                            <td>Benchmark</td>
-                            <td>Garbage Master</td>
-                            <td>Garbage Commit</td>
-                            <td>% Change</td>
-                        </tr>
-                    </thead>
-                    <tbody>{resultsTable}</tbody>
-                </table>
-
-                <h2>Garbage created change</h2>
-                {/* [% Delta] Gerbage created */}
-                <svg
-                    ref={(n) => (garbageCreatedChangeSvg = n!)}
-                    width={garbageCreatedChangeGraphWidth}
-                    height={garbageCreatedChangeGraphHeight}
-                ></svg>
-
-                <h2>Garbage created</h2>
-                {/* [Absolute] Garbage created comparison */}
-                <svg
-                    ref={(n) => (garbageCreatedComparisonSvg = n!)}
-                    width={garbageCreatedComparisonGraphWidth}
-                    height={garbageCreatedComparisonGraphHeight}
-                ></svg>
-            </>
-        );
-    }
-}
diff --git a/src/pages/benchviz/benchmark-types.ts b/src/pages/benchviz/benchmark-types.ts
new file mode 100644
index 00000000..a3993df4
--- /dev/null
+++ b/src/pages/benchviz/benchmark-types.ts
@@ -0,0 +1,16 @@
+export enum BenchmarkKind {
+    Memory = "memory",
+}
+
+export type BenchmarkResult = MemoryBenchmarkResult;
+
+export enum MemoryBenchmarkCategory {
+    TotalMemory = "totalMemory",
+    Garbage = "garbage",
+}
+
+export interface MemoryBenchmarkResult {
+    kind: string;
+    categories: Record<MemoryBenchmarkCategory, number>;
+    benchmarkName: string;
+}
\ No newline at end of file
diff --git a/src/pages/benchviz/index.tsx b/src/pages/benchviz/index.tsx
index de3a3f46..9a0ab8b0 100644
--- a/src/pages/benchviz/index.tsx
+++ b/src/pages/benchviz/index.tsx
@@ -1,16 +1,128 @@
 import Layout from "@theme/Layout";
-import React from "react";
+import * as d3 from "d3";
+import React, { useEffect, useRef } from "react";
+import * as zlib from "zlib";
+import { BenchmarkResult, MemoryBenchmarkCategory } from "./benchmark-types";
+import { joinOnProperty, JoinResult } from "./util";
+import { barComparisonGraph } from "./visualizations/bar-comparison-graph";
+import { positiveNegativeBarGraph } from "./visualizations/positive-negative-bar-graph";
+
+const garbageCreatedComparisonGraphWidth = 1000;
+const garbageCreatedComparisonGraphHeight = 300;
+
+const garbageCreatedChangeGraphWidth = 1000;
+const garbageCreatedChangeGraphHeight = 300;
+
+// Utility functions
+const formatBenchmarkName = (benchmarkName: string) => benchmarkName.replace(".lua", "").split("/").pop()!;
+const formatMemory = (value: number) => `${Math.round(value / 10) / 100} Mb`;
+
+const benchmarkGarbage = (bm: BenchmarkResult) => bm.categories[MemoryBenchmarkCategory.Garbage];
+const garbagePercentChange = (result: JoinResult<BenchmarkResult>) =>
+    (benchmarkGarbage(result.right!) - benchmarkGarbage(result.left!)) / benchmarkGarbage(result.left!);
+
+export default function Benchmark() {
+    let garbageCreatedChangeSvgRef = useRef<SVGSVGElement>(null!);
+    let garbageCreatedComparisonSvgRef = useRef<SVGSVGElement>(null!);
+
+    const benchmarkData = decodeBenchmarkData(window.location.search.split("?d=")[1]);
+    // Sort by percentage change of garbage created
+    const benchmarksSortedByPercentDifference = benchmarkData.sort(
+        (a, b) => garbagePercentChange(a) - garbagePercentChange(b),
+    );
+
+    // Populate graph with benchmark results
+    const benchmarkResultsTable = benchmarksSortedByPercentDifference.map((bm, i) => {
+        const change = garbagePercentChange(bm);
+        const rowColor = change === 0 ? "currentColor" : change > 0 ? "red" : "green";
+
+        return (
+            <tr key={i} style={{ color: rowColor }}>
+                <td>{bm.left?.benchmarkName}</td>
+                <td>{formatMemory(benchmarkGarbage(bm.left!))}</td>
+                <td>{formatMemory(benchmarkGarbage(bm.right!))}</td>
+                <td>{change}</td>
+            </tr>
+        );
+    });
+
+    // Comparison data master garbage created vs commit garbate created (PERCENTAGE CHANGE)
+    const generatedGarbageChangeData = benchmarksSortedByPercentDifference.map((bm) => {
+        const oldValue = bm.left?.categories[MemoryBenchmarkCategory.Garbage]!;
+        const newValue = bm.right?.categories[MemoryBenchmarkCategory.Garbage]!;
+
+        return {
+            name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
+            value: (100 * (newValue - oldValue)) / oldValue,
+        };
+    });
+
+    // Comparison data master garbage created vs commit garbate created (ABSOLUTE)
+    const generatedGarbageData = benchmarksSortedByPercentDifference.map((bm) => ({
+        name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
+        oldValue: bm.left?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
+        newValue: bm.right?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
+    }));
+
+    useEffect(() => {
+        // Populate graph showing percentual change in garbage created
+        positiveNegativeBarGraph(
+            d3.select(garbageCreatedChangeSvgRef.current),
+            generatedGarbageChangeData,
+            garbageCreatedChangeGraphWidth,
+            garbageCreatedChangeGraphHeight,
+        );
+
+        // Populate graph showing absolute garbage created numbers
+        barComparisonGraph(
+            d3.select(garbageCreatedComparisonSvgRef.current),
+            generatedGarbageData,
+            garbageCreatedComparisonGraphWidth,
+            garbageCreatedComparisonGraphHeight,
+        );
+    });
 
-const Benchmark = React.lazy(() => import("./Benchmark"));
-export default function CreateBenchmark() {
-    const isSSR = typeof window === "undefined";
     return (
-        <Layout title="Benchmark">
-            {!isSSR && (
-                <React.Suspense fallback={<div />}>
-                    <Benchmark />
-                </React.Suspense>
-            )}
+        <Layout title="BenchViz">
+            {/* Results table */}
+            <h2>Benchmark results</h2>
+            <table>
+                <thead>
+                    <tr style={{ fontWeight: "bold" }}>
+                        <td>Benchmark</td>
+                        <td>Garbage Master</td>
+                        <td>Garbage Commit</td>
+                        <td>% Change</td>
+                    </tr>
+                </thead>
+                <tbody>{benchmarkResultsTable}</tbody>
+            </table>
+
+            <h2>Garbage created change</h2>
+            {/* [% Delta] Gerbage created */}
+            <svg
+                ref={garbageCreatedChangeSvgRef}
+                width={garbageCreatedChangeGraphWidth}
+                height={garbageCreatedChangeGraphHeight}
+            ></svg>
+
+            <h2>Garbage created</h2>
+            {/* [Absolute] Garbage created comparison */}
+            <svg
+                ref={garbageCreatedComparisonSvgRef}
+                width={garbageCreatedComparisonGraphWidth}
+                height={garbageCreatedComparisonGraphHeight}
+            ></svg>
         </Layout>
     );
 }
+
+function decodeBenchmarkData(encodedData: string) {
+    const results = JSON.parse(zlib.inflateSync(Buffer.from(encodedData, "base64")).toString());
+
+    const dataMaster = results.old as BenchmarkResult[];
+    const dataCommit = results.new as BenchmarkResult[];
+
+    // Match old/new results by name
+    return joinOnProperty(dataMaster, dataCommit, (bm) => bm.benchmarkName);
+}
diff --git a/src/pages/benchviz/bar-comparison-graph.ts b/src/pages/benchviz/visualizations/bar-comparison-graph.ts
similarity index 100%
rename from src/pages/benchviz/bar-comparison-graph.ts
rename to src/pages/benchviz/visualizations/bar-comparison-graph.ts
diff --git a/src/pages/benchviz/d3-util.ts b/src/pages/benchviz/visualizations/d3-util.ts
similarity index 100%
rename from src/pages/benchviz/d3-util.ts
rename to src/pages/benchviz/visualizations/d3-util.ts
diff --git a/src/pages/benchviz/positive-negative-bar-graph.ts b/src/pages/benchviz/visualizations/positive-negative-bar-graph.ts
similarity index 100%
rename from src/pages/benchviz/positive-negative-bar-graph.ts
rename to src/pages/benchviz/visualizations/positive-negative-bar-graph.ts

From d1013ed905ab4c0cc0b7937c5f1d1429a7c2cac0 Mon Sep 17 00:00:00 2001
From: Perryvw <perry.wesel@gmail.com>
Date: Thu, 21 May 2020 10:51:53 +0200
Subject: [PATCH 05/11] reverted to old index

---
 src/pages/benchviz/Benchmark.tsx | 128 ++++++++++++++++++++++++++++++
 src/pages/benchviz/index.tsx     | 132 +++----------------------------
 2 files changed, 138 insertions(+), 122 deletions(-)
 create mode 100644 src/pages/benchviz/Benchmark.tsx

diff --git a/src/pages/benchviz/Benchmark.tsx b/src/pages/benchviz/Benchmark.tsx
new file mode 100644
index 00000000..9a0ab8b0
--- /dev/null
+++ b/src/pages/benchviz/Benchmark.tsx
@@ -0,0 +1,128 @@
+import Layout from "@theme/Layout";
+import * as d3 from "d3";
+import React, { useEffect, useRef } from "react";
+import * as zlib from "zlib";
+import { BenchmarkResult, MemoryBenchmarkCategory } from "./benchmark-types";
+import { joinOnProperty, JoinResult } from "./util";
+import { barComparisonGraph } from "./visualizations/bar-comparison-graph";
+import { positiveNegativeBarGraph } from "./visualizations/positive-negative-bar-graph";
+
+const garbageCreatedComparisonGraphWidth = 1000;
+const garbageCreatedComparisonGraphHeight = 300;
+
+const garbageCreatedChangeGraphWidth = 1000;
+const garbageCreatedChangeGraphHeight = 300;
+
+// Utility functions
+const formatBenchmarkName = (benchmarkName: string) => benchmarkName.replace(".lua", "").split("/").pop()!;
+const formatMemory = (value: number) => `${Math.round(value / 10) / 100} Mb`;
+
+const benchmarkGarbage = (bm: BenchmarkResult) => bm.categories[MemoryBenchmarkCategory.Garbage];
+const garbagePercentChange = (result: JoinResult<BenchmarkResult>) =>
+    (benchmarkGarbage(result.right!) - benchmarkGarbage(result.left!)) / benchmarkGarbage(result.left!);
+
+export default function Benchmark() {
+    let garbageCreatedChangeSvgRef = useRef<SVGSVGElement>(null!);
+    let garbageCreatedComparisonSvgRef = useRef<SVGSVGElement>(null!);
+
+    const benchmarkData = decodeBenchmarkData(window.location.search.split("?d=")[1]);
+    // Sort by percentage change of garbage created
+    const benchmarksSortedByPercentDifference = benchmarkData.sort(
+        (a, b) => garbagePercentChange(a) - garbagePercentChange(b),
+    );
+
+    // Populate graph with benchmark results
+    const benchmarkResultsTable = benchmarksSortedByPercentDifference.map((bm, i) => {
+        const change = garbagePercentChange(bm);
+        const rowColor = change === 0 ? "currentColor" : change > 0 ? "red" : "green";
+
+        return (
+            <tr key={i} style={{ color: rowColor }}>
+                <td>{bm.left?.benchmarkName}</td>
+                <td>{formatMemory(benchmarkGarbage(bm.left!))}</td>
+                <td>{formatMemory(benchmarkGarbage(bm.right!))}</td>
+                <td>{change}</td>
+            </tr>
+        );
+    });
+
+    // Comparison data master garbage created vs commit garbate created (PERCENTAGE CHANGE)
+    const generatedGarbageChangeData = benchmarksSortedByPercentDifference.map((bm) => {
+        const oldValue = bm.left?.categories[MemoryBenchmarkCategory.Garbage]!;
+        const newValue = bm.right?.categories[MemoryBenchmarkCategory.Garbage]!;
+
+        return {
+            name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
+            value: (100 * (newValue - oldValue)) / oldValue,
+        };
+    });
+
+    // Comparison data master garbage created vs commit garbate created (ABSOLUTE)
+    const generatedGarbageData = benchmarksSortedByPercentDifference.map((bm) => ({
+        name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
+        oldValue: bm.left?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
+        newValue: bm.right?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
+    }));
+
+    useEffect(() => {
+        // Populate graph showing percentual change in garbage created
+        positiveNegativeBarGraph(
+            d3.select(garbageCreatedChangeSvgRef.current),
+            generatedGarbageChangeData,
+            garbageCreatedChangeGraphWidth,
+            garbageCreatedChangeGraphHeight,
+        );
+
+        // Populate graph showing absolute garbage created numbers
+        barComparisonGraph(
+            d3.select(garbageCreatedComparisonSvgRef.current),
+            generatedGarbageData,
+            garbageCreatedComparisonGraphWidth,
+            garbageCreatedComparisonGraphHeight,
+        );
+    });
+
+    return (
+        <Layout title="BenchViz">
+            {/* Results table */}
+            <h2>Benchmark results</h2>
+            <table>
+                <thead>
+                    <tr style={{ fontWeight: "bold" }}>
+                        <td>Benchmark</td>
+                        <td>Garbage Master</td>
+                        <td>Garbage Commit</td>
+                        <td>% Change</td>
+                    </tr>
+                </thead>
+                <tbody>{benchmarkResultsTable}</tbody>
+            </table>
+
+            <h2>Garbage created change</h2>
+            {/* [% Delta] Gerbage created */}
+            <svg
+                ref={garbageCreatedChangeSvgRef}
+                width={garbageCreatedChangeGraphWidth}
+                height={garbageCreatedChangeGraphHeight}
+            ></svg>
+
+            <h2>Garbage created</h2>
+            {/* [Absolute] Garbage created comparison */}
+            <svg
+                ref={garbageCreatedComparisonSvgRef}
+                width={garbageCreatedComparisonGraphWidth}
+                height={garbageCreatedComparisonGraphHeight}
+            ></svg>
+        </Layout>
+    );
+}
+
+function decodeBenchmarkData(encodedData: string) {
+    const results = JSON.parse(zlib.inflateSync(Buffer.from(encodedData, "base64")).toString());
+
+    const dataMaster = results.old as BenchmarkResult[];
+    const dataCommit = results.new as BenchmarkResult[];
+
+    // Match old/new results by name
+    return joinOnProperty(dataMaster, dataCommit, (bm) => bm.benchmarkName);
+}
diff --git a/src/pages/benchviz/index.tsx b/src/pages/benchviz/index.tsx
index 9a0ab8b0..76b35305 100644
--- a/src/pages/benchviz/index.tsx
+++ b/src/pages/benchviz/index.tsx
@@ -1,128 +1,16 @@
 import Layout from "@theme/Layout";
-import * as d3 from "d3";
-import React, { useEffect, useRef } from "react";
-import * as zlib from "zlib";
-import { BenchmarkResult, MemoryBenchmarkCategory } from "./benchmark-types";
-import { joinOnProperty, JoinResult } from "./util";
-import { barComparisonGraph } from "./visualizations/bar-comparison-graph";
-import { positiveNegativeBarGraph } from "./visualizations/positive-negative-bar-graph";
-
-const garbageCreatedComparisonGraphWidth = 1000;
-const garbageCreatedComparisonGraphHeight = 300;
-
-const garbageCreatedChangeGraphWidth = 1000;
-const garbageCreatedChangeGraphHeight = 300;
-
-// Utility functions
-const formatBenchmarkName = (benchmarkName: string) => benchmarkName.replace(".lua", "").split("/").pop()!;
-const formatMemory = (value: number) => `${Math.round(value / 10) / 100} Mb`;
-
-const benchmarkGarbage = (bm: BenchmarkResult) => bm.categories[MemoryBenchmarkCategory.Garbage];
-const garbagePercentChange = (result: JoinResult<BenchmarkResult>) =>
-    (benchmarkGarbage(result.right!) - benchmarkGarbage(result.left!)) / benchmarkGarbage(result.left!);
-
-export default function Benchmark() {
-    let garbageCreatedChangeSvgRef = useRef<SVGSVGElement>(null!);
-    let garbageCreatedComparisonSvgRef = useRef<SVGSVGElement>(null!);
-
-    const benchmarkData = decodeBenchmarkData(window.location.search.split("?d=")[1]);
-    // Sort by percentage change of garbage created
-    const benchmarksSortedByPercentDifference = benchmarkData.sort(
-        (a, b) => garbagePercentChange(a) - garbagePercentChange(b),
-    );
-
-    // Populate graph with benchmark results
-    const benchmarkResultsTable = benchmarksSortedByPercentDifference.map((bm, i) => {
-        const change = garbagePercentChange(bm);
-        const rowColor = change === 0 ? "currentColor" : change > 0 ? "red" : "green";
-
-        return (
-            <tr key={i} style={{ color: rowColor }}>
-                <td>{bm.left?.benchmarkName}</td>
-                <td>{formatMemory(benchmarkGarbage(bm.left!))}</td>
-                <td>{formatMemory(benchmarkGarbage(bm.right!))}</td>
-                <td>{change}</td>
-            </tr>
-        );
-    });
-
-    // Comparison data master garbage created vs commit garbate created (PERCENTAGE CHANGE)
-    const generatedGarbageChangeData = benchmarksSortedByPercentDifference.map((bm) => {
-        const oldValue = bm.left?.categories[MemoryBenchmarkCategory.Garbage]!;
-        const newValue = bm.right?.categories[MemoryBenchmarkCategory.Garbage]!;
-
-        return {
-            name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
-            value: (100 * (newValue - oldValue)) / oldValue,
-        };
-    });
-
-    // Comparison data master garbage created vs commit garbate created (ABSOLUTE)
-    const generatedGarbageData = benchmarksSortedByPercentDifference.map((bm) => ({
-        name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
-        oldValue: bm.left?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
-        newValue: bm.right?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
-    }));
-
-    useEffect(() => {
-        // Populate graph showing percentual change in garbage created
-        positiveNegativeBarGraph(
-            d3.select(garbageCreatedChangeSvgRef.current),
-            generatedGarbageChangeData,
-            garbageCreatedChangeGraphWidth,
-            garbageCreatedChangeGraphHeight,
-        );
-
-        // Populate graph showing absolute garbage created numbers
-        barComparisonGraph(
-            d3.select(garbageCreatedComparisonSvgRef.current),
-            generatedGarbageData,
-            garbageCreatedComparisonGraphWidth,
-            garbageCreatedComparisonGraphHeight,
-        );
-    });
+import React from "react";
+import Benchmark from "./Benchmark";
 
+export default function CreateBenchmark() {
+    const isSSR = typeof window === "undefined";
     return (
-        <Layout title="BenchViz">
-            {/* Results table */}
-            <h2>Benchmark results</h2>
-            <table>
-                <thead>
-                    <tr style={{ fontWeight: "bold" }}>
-                        <td>Benchmark</td>
-                        <td>Garbage Master</td>
-                        <td>Garbage Commit</td>
-                        <td>% Change</td>
-                    </tr>
-                </thead>
-                <tbody>{benchmarkResultsTable}</tbody>
-            </table>
-
-            <h2>Garbage created change</h2>
-            {/* [% Delta] Gerbage created */}
-            <svg
-                ref={garbageCreatedChangeSvgRef}
-                width={garbageCreatedChangeGraphWidth}
-                height={garbageCreatedChangeGraphHeight}
-            ></svg>
-
-            <h2>Garbage created</h2>
-            {/* [Absolute] Garbage created comparison */}
-            <svg
-                ref={garbageCreatedComparisonSvgRef}
-                width={garbageCreatedComparisonGraphWidth}
-                height={garbageCreatedComparisonGraphHeight}
-            ></svg>
+        <Layout title="Benchmark">
+            {!isSSR && (
+                <React.Suspense fallback={<div />}>
+                    <Benchmark />
+                </React.Suspense>
+            )}
         </Layout>
     );
 }
-
-function decodeBenchmarkData(encodedData: string) {
-    const results = JSON.parse(zlib.inflateSync(Buffer.from(encodedData, "base64")).toString());
-
-    const dataMaster = results.old as BenchmarkResult[];
-    const dataCommit = results.new as BenchmarkResult[];
-
-    // Match old/new results by name
-    return joinOnProperty(dataMaster, dataCommit, (bm) => bm.benchmarkName);
-}

From 5a900ea59add656a259f40f176853bc16a082bb9 Mon Sep 17 00:00:00 2001
From: Perryvw <perry.wesel@gmail.com>
Date: Thu, 21 May 2020 10:58:25 +0200
Subject: [PATCH 06/11] run prettier

---
 package.json                          | 3 ++-
 src/pages/benchviz/benchmark-types.ts | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 81dd3988..52ef4a61 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
         "start": "docusaurus start",
         "build": "docusaurus build",
         "lint": "npm run lint:prettier",
-        "lint:prettier": "prettier --check ."
+        "lint:prettier": "prettier --check .",
+        "fix:prettier": "prettier --check --write \"**/*.{js,ts,tsx,html,scss,yml,json,md}\""
     },
     "prettier": {
         "printWidth": 120,
diff --git a/src/pages/benchviz/benchmark-types.ts b/src/pages/benchviz/benchmark-types.ts
index a3993df4..6e852aa8 100644
--- a/src/pages/benchviz/benchmark-types.ts
+++ b/src/pages/benchviz/benchmark-types.ts
@@ -13,4 +13,4 @@ export interface MemoryBenchmarkResult {
     kind: string;
     categories: Record<MemoryBenchmarkCategory, number>;
     benchmarkName: string;
-}
\ No newline at end of file
+}

From dbbc7d062d84a49ba6097d607721943bca66f06b Mon Sep 17 00:00:00 2001
From: Perryvw <perry.wesel@gmail.com>
Date: Wed, 10 Jun 2020 10:56:16 +0200
Subject: [PATCH 07/11] Small PR feedback things

---
 package.json                                 | 2 +-
 src/pages/benchviz/visualizations/d3-util.ts | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 52ef4a61..cb9079b3 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
         "build": "docusaurus build",
         "lint": "npm run lint:prettier",
         "lint:prettier": "prettier --check .",
-        "fix:prettier": "prettier --check --write \"**/*.{js,ts,tsx,html,scss,yml,json,md}\""
+        "fix:prettier": "prettier --write ."
     },
     "prettier": {
         "printWidth": 120,
diff --git a/src/pages/benchviz/visualizations/d3-util.ts b/src/pages/benchviz/visualizations/d3-util.ts
index fe65663b..d583cdf7 100644
--- a/src/pages/benchviz/visualizations/d3-util.ts
+++ b/src/pages/benchviz/visualizations/d3-util.ts
@@ -6,22 +6,22 @@ export function addLegend(
 ) {
     const legend = selection.append("g");
 
-    items.forEach(([name, color], i) => {
+    for (const [index, [name, color]] of items.entries()) {
         legend
             .append("rect")
             .attr("width", 15)
             .attr("height", 15)
-            .attr("x", 100 * i)
+            .attr("x", 100 * index)
             .style("fill", color)
             .style("stroke", "currentColor");
 
         legend
             .append("text")
-            .attr("x", 100 * i + 20)
+            .attr("x", 100 * index + 20)
             .attr("y", 13)
             .text(name)
             .attr("fill", "currentColor");
-    });
+    }
 
     return legend;
 }

From 99e724f6cad77ed8f2d441045837f6304ffbfd23 Mon Sep 17 00:00:00 2001
From: Perryvw <perry.wesel@gmail.com>
Date: Wed, 10 Jun 2020 11:05:34 +0200
Subject: [PATCH 08/11] removed zlib and nested layout

---
 package-lock.json            | 80 ++++++++++--------------------------
 package.json                 |  3 +-
 src/pages/benchviz/index.tsx | 13 +++---
 3 files changed, 27 insertions(+), 69 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5f4656cf..119c0dea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1664,7 +1664,6 @@
             "version": "5.7.2",
             "resolved": "https://registry.npmjs.org/@types/d3/-/d3-5.7.2.tgz",
             "integrity": "sha512-7/wClB8ycneWGy3jdvLfXKTd5SoTg9hji7IdJ0RuO9xTY54YpJ8zlcFADcXhY1J3kCBwxp+/1jeN6a5OMwgYOw==",
-            "dev": true,
             "requires": {
                 "@types/d3-array": "^1",
                 "@types/d3-axis": "*",
@@ -1702,14 +1701,12 @@
         "@types/d3-array": {
             "version": "1.2.7",
             "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-1.2.7.tgz",
-            "integrity": "sha512-51vHWuUyDOi+8XuwPrTw3cFqyh2Slg9y8COYkRfjCPG9TfYqY0hoNPzv/8BrcAy0FeQBzqEo/D/8Nk2caOQJnA==",
-            "dev": true
+            "integrity": "sha512-51vHWuUyDOi+8XuwPrTw3cFqyh2Slg9y8COYkRfjCPG9TfYqY0hoNPzv/8BrcAy0FeQBzqEo/D/8Nk2caOQJnA=="
         },
         "@types/d3-axis": {
             "version": "1.0.12",
             "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-1.0.12.tgz",
             "integrity": "sha512-BZISgSD5M8TgURyNtcPAmUB9sk490CO1Thb6/gIn0WZTt3Y50IssX+2Z0vTccoqZksUDTep0b+o4ofXslvNbqg==",
-            "dev": true,
             "requires": {
                 "@types/d3-selection": "*"
             }
@@ -1718,7 +1715,6 @@
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-1.1.0.tgz",
             "integrity": "sha512-yz5Y94XpUARimOlLk+RWM1cZh1FrtmSGOyDQfCArsMa6kAnhjF3EserSTDnHAuVuNATMoTIOPHa7pjG2iTkPYA==",
-            "dev": true,
             "requires": {
                 "@types/d3-selection": "*"
             }
@@ -1726,26 +1722,22 @@
         "@types/d3-chord": {
             "version": "1.0.9",
             "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-1.0.9.tgz",
-            "integrity": "sha512-UA6lI9CVW5cT5Ku/RV4hxoFn4mKySHm7HEgodtfRthAj1lt9rKZEPon58vyYfk+HIAm33DtJJgZwMXy2QgyPXw==",
-            "dev": true
+            "integrity": "sha512-UA6lI9CVW5cT5Ku/RV4hxoFn4mKySHm7HEgodtfRthAj1lt9rKZEPon58vyYfk+HIAm33DtJJgZwMXy2QgyPXw=="
         },
         "@types/d3-collection": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/@types/d3-collection/-/d3-collection-1.0.8.tgz",
-            "integrity": "sha512-y5lGlazdc0HNO0F3UUX2DPE7OmYvd9Kcym4hXwrJcNUkDaypR5pX+apuMikl9LfTxKItJsY9KYvzBulpCKyvuQ==",
-            "dev": true
+            "integrity": "sha512-y5lGlazdc0HNO0F3UUX2DPE7OmYvd9Kcym4hXwrJcNUkDaypR5pX+apuMikl9LfTxKItJsY9KYvzBulpCKyvuQ=="
         },
         "@types/d3-color": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.2.2.tgz",
-            "integrity": "sha512-6pBxzJ8ZP3dYEQ4YjQ+NVbQaOflfgXq/JbDiS99oLobM2o72uAST4q6yPxHv6FOTCRC/n35ktuo8pvw/S4M7sw==",
-            "dev": true
+            "integrity": "sha512-6pBxzJ8ZP3dYEQ4YjQ+NVbQaOflfgXq/JbDiS99oLobM2o72uAST4q6yPxHv6FOTCRC/n35ktuo8pvw/S4M7sw=="
         },
         "@types/d3-contour": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-1.3.0.tgz",
             "integrity": "sha512-AUCUIjEnC5lCGBM9hS+MryRaFLIrPls4Rbv6ktqbd+TK/RXZPwOy9rtBWmGpbeXcSOYCJTUDwNJuEnmYPJRxHQ==",
-            "dev": true,
             "requires": {
                 "@types/d3-array": "*",
                 "@types/geojson": "*"
@@ -1754,14 +1746,12 @@
         "@types/d3-dispatch": {
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-1.0.7.tgz",
-            "integrity": "sha512-M+z84G7UKwK6hEPnGCSccOg8zJ3Nk2hgDQ9sCstHXgsFU0sMxlIZVKqKB5oxUDbALqQG6ucg0G9e8cmOSlishg==",
-            "dev": true
+            "integrity": "sha512-M+z84G7UKwK6hEPnGCSccOg8zJ3Nk2hgDQ9sCstHXgsFU0sMxlIZVKqKB5oxUDbALqQG6ucg0G9e8cmOSlishg=="
         },
         "@types/d3-drag": {
             "version": "1.2.3",
             "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-1.2.3.tgz",
             "integrity": "sha512-rWB5SPvkYVxW3sqUxHOJUZwifD0KqvKwvt1bhNqcLpW6Azsd0BJgRNcyVW8GAferaAk5r8dzeZnf9zKlg9+xMQ==",
-            "dev": true,
             "requires": {
                 "@types/d3-selection": "*"
             }
@@ -1769,20 +1759,17 @@
         "@types/d3-dsv": {
             "version": "1.0.36",
             "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-1.0.36.tgz",
-            "integrity": "sha512-jbIWQ27QJcBNMZbQv0NSQMHnBDCmxghAxePxgyiPH1XPCRkOsTBei7jcdi3fDrUCGpCV3lKrSZFSlOkhUQVClA==",
-            "dev": true
+            "integrity": "sha512-jbIWQ27QJcBNMZbQv0NSQMHnBDCmxghAxePxgyiPH1XPCRkOsTBei7jcdi3fDrUCGpCV3lKrSZFSlOkhUQVClA=="
         },
         "@types/d3-ease": {
             "version": "1.0.9",
             "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-1.0.9.tgz",
-            "integrity": "sha512-U5ADevQ+W6fy32FVZZC9EXallcV/Mi12A5Tkd0My5MrC7T8soMQEhlDAg88XUWm0zoCQlB4XV0en/24LvuDB4Q==",
-            "dev": true
+            "integrity": "sha512-U5ADevQ+W6fy32FVZZC9EXallcV/Mi12A5Tkd0My5MrC7T8soMQEhlDAg88XUWm0zoCQlB4XV0en/24LvuDB4Q=="
         },
         "@types/d3-fetch": {
             "version": "1.1.5",
             "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-1.1.5.tgz",
             "integrity": "sha512-o9c0ItT5/Gl3wbNuVpzRnYX1t3RghzeWAjHUVLuyZJudiTxC4f/fC0ZPFWLQ2lVY8pAMmxpV8TJ6ETYCgPeI3A==",
-            "dev": true,
             "requires": {
                 "@types/d3-dsv": "*"
             }
@@ -1790,20 +1777,17 @@
         "@types/d3-force": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-1.2.1.tgz",
-            "integrity": "sha512-jqK+I36uz4kTBjyk39meed5y31Ab+tXYN/x1dn3nZEus9yOHCLc+VrcIYLc/aSQ0Y7tMPRlIhLetulME76EiiA==",
-            "dev": true
+            "integrity": "sha512-jqK+I36uz4kTBjyk39meed5y31Ab+tXYN/x1dn3nZEus9yOHCLc+VrcIYLc/aSQ0Y7tMPRlIhLetulME76EiiA=="
         },
         "@types/d3-format": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-1.3.1.tgz",
-            "integrity": "sha512-KAWvReOKMDreaAwOjdfQMm0HjcUMlQG47GwqdVKgmm20vTd2pucj0a70c3gUSHrnsmo6H2AMrkBsZU2UhJLq8A==",
-            "dev": true
+            "integrity": "sha512-KAWvReOKMDreaAwOjdfQMm0HjcUMlQG47GwqdVKgmm20vTd2pucj0a70c3gUSHrnsmo6H2AMrkBsZU2UhJLq8A=="
         },
         "@types/d3-geo": {
             "version": "1.11.1",
             "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-1.11.1.tgz",
             "integrity": "sha512-Ox8WWOG3igDRoep/dNsGbOiSJYdUG3ew/6z0ETvHyAtXZVBjOE0S96zSSmzgl0gqQ3RdZjn2eeJOj9oRcMZPkQ==",
-            "dev": true,
             "requires": {
                 "@types/geojson": "*"
             }
@@ -1811,14 +1795,12 @@
         "@types/d3-hierarchy": {
             "version": "1.1.6",
             "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-1.1.6.tgz",
-            "integrity": "sha512-vvSaIDf/Ov0o3KwMT+1M8+WbnnlRiGjlGD5uvk83a1mPCTd/E5x12bUJ/oP55+wUY/4Kb5kc67rVpVGJ2KUHxg==",
-            "dev": true
+            "integrity": "sha512-vvSaIDf/Ov0o3KwMT+1M8+WbnnlRiGjlGD5uvk83a1mPCTd/E5x12bUJ/oP55+wUY/4Kb5kc67rVpVGJ2KUHxg=="
         },
         "@types/d3-interpolate": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.3.1.tgz",
             "integrity": "sha512-z8Zmi08XVwe8e62vP6wcA+CNuRhpuUU5XPEfqpG0hRypDE5BWNthQHB1UNWWDB7ojCbGaN4qBdsWp5kWxhT1IQ==",
-            "dev": true,
             "requires": {
                 "@types/d3-color": "*"
             }
@@ -1826,32 +1808,27 @@
         "@types/d3-path": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.8.tgz",
-            "integrity": "sha512-AZGHWslq/oApTAHu9+yH/Bnk63y9oFOMROtqPAtxl5uB6qm1x2lueWdVEjsjjV3Qc2+QfuzKIwIR5MvVBakfzA==",
-            "dev": true
+            "integrity": "sha512-AZGHWslq/oApTAHu9+yH/Bnk63y9oFOMROtqPAtxl5uB6qm1x2lueWdVEjsjjV3Qc2+QfuzKIwIR5MvVBakfzA=="
         },
         "@types/d3-polygon": {
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-1.0.7.tgz",
-            "integrity": "sha512-Xuw0eSjQQKs8jTiNbntWH0S+Xp+JyhqxmQ0YAQ3rDu6c3kKMFfgsaGN7Jv5u3zG6yVX/AsLP/Xs/QRjmi9g43Q==",
-            "dev": true
+            "integrity": "sha512-Xuw0eSjQQKs8jTiNbntWH0S+Xp+JyhqxmQ0YAQ3rDu6c3kKMFfgsaGN7Jv5u3zG6yVX/AsLP/Xs/QRjmi9g43Q=="
         },
         "@types/d3-quadtree": {
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
-            "integrity": "sha512-0ajFawWicfjsaCLh6NzxOyVDYhQAmMFbsiI3MPGLInorauHFEh9/Cl6UHNf+kt/J1jfoxKY/ZJaKAoDpbvde5Q==",
-            "dev": true
+            "integrity": "sha512-0ajFawWicfjsaCLh6NzxOyVDYhQAmMFbsiI3MPGLInorauHFEh9/Cl6UHNf+kt/J1jfoxKY/ZJaKAoDpbvde5Q=="
         },
         "@types/d3-random": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-1.1.2.tgz",
-            "integrity": "sha512-Jui+Zn28pQw/3EayPKaN4c/PqTvqNbIPjHkgIIFnxne1FdwNjfHtAIsZIBMKlquQNrrMjFzCrlF2gPs3xckqaA==",
-            "dev": true
+            "integrity": "sha512-Jui+Zn28pQw/3EayPKaN4c/PqTvqNbIPjHkgIIFnxne1FdwNjfHtAIsZIBMKlquQNrrMjFzCrlF2gPs3xckqaA=="
         },
         "@types/d3-scale": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-2.2.0.tgz",
             "integrity": "sha512-oQFanN0/PiR2oySHfj+zAAkK1/p4LD32Nt1TMVmzk+bYHk7vgIg/iTXQWitp1cIkDw4LMdcgvO63wL+mNs47YA==",
-            "dev": true,
             "requires": {
                 "@types/d3-time": "*"
             }
@@ -1859,20 +1836,17 @@
         "@types/d3-scale-chromatic": {
             "version": "1.5.0",
             "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz",
-            "integrity": "sha512-9/D7cOBKdZdTCPc6re0HeSUFBM0aFzdNdmYggUWT9SRRiYSOa6Ys2xdTwHKgc1WS3gGfwTMatBOdWCS863REsg==",
-            "dev": true
+            "integrity": "sha512-9/D7cOBKdZdTCPc6re0HeSUFBM0aFzdNdmYggUWT9SRRiYSOa6Ys2xdTwHKgc1WS3gGfwTMatBOdWCS863REsg=="
         },
         "@types/d3-selection": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.4.1.tgz",
-            "integrity": "sha512-bv8IfFYo/xG6dxri9OwDnK3yCagYPeRIjTlrcdYJSx+FDWlCeBDepIHUpqROmhPtZ53jyna0aUajZRk0I3rXNA==",
-            "dev": true
+            "integrity": "sha512-bv8IfFYo/xG6dxri9OwDnK3yCagYPeRIjTlrcdYJSx+FDWlCeBDepIHUpqROmhPtZ53jyna0aUajZRk0I3rXNA=="
         },
         "@types/d3-shape": {
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.2.tgz",
             "integrity": "sha512-LtD8EaNYCaBRzHzaAiIPrfcL3DdIysc81dkGlQvv7WQP3+YXV7b0JJTtR1U3bzeRieS603KF4wUo+ZkJVenh8w==",
-            "dev": true,
             "requires": {
                 "@types/d3-path": "*"
             }
@@ -1880,26 +1854,22 @@
         "@types/d3-time": {
             "version": "1.0.10",
             "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.0.10.tgz",
-            "integrity": "sha512-aKf62rRQafDQmSiv1NylKhIMmznsjRN+MnXRXTqHoqm0U/UZzVpdrtRnSIfdiLS616OuC1soYeX1dBg2n1u8Xw==",
-            "dev": true
+            "integrity": "sha512-aKf62rRQafDQmSiv1NylKhIMmznsjRN+MnXRXTqHoqm0U/UZzVpdrtRnSIfdiLS616OuC1soYeX1dBg2n1u8Xw=="
         },
         "@types/d3-time-format": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.1.1.tgz",
-            "integrity": "sha512-tJSyXta8ZyJ52wDDHA96JEsvkbL6jl7wowGmuf45+fAkj5Y+SQOnz0N7/H68OWmPshPsAaWMQh+GAws44IzH3g==",
-            "dev": true
+            "integrity": "sha512-tJSyXta8ZyJ52wDDHA96JEsvkbL6jl7wowGmuf45+fAkj5Y+SQOnz0N7/H68OWmPshPsAaWMQh+GAws44IzH3g=="
         },
         "@types/d3-timer": {
             "version": "1.0.9",
             "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-1.0.9.tgz",
-            "integrity": "sha512-WvfJ3LFxBbWjqRGz9n7GJt08RrTHPJDVsIwwoCMROlqF+iDacYiAFjf9oqnq0mXpb2juA2N/qjKP+MKdal3YNQ==",
-            "dev": true
+            "integrity": "sha512-WvfJ3LFxBbWjqRGz9n7GJt08RrTHPJDVsIwwoCMROlqF+iDacYiAFjf9oqnq0mXpb2juA2N/qjKP+MKdal3YNQ=="
         },
         "@types/d3-transition": {
             "version": "1.1.6",
             "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-1.1.6.tgz",
             "integrity": "sha512-/F+O2r4oz4G9ATIH3cuSCMGphAnl7VDx7SbENEK0NlI/FE8Jx2oiIrv0uTrpg7yF/AmuWbqp7AGdEHAPIh24Gg==",
-            "dev": true,
             "requires": {
                 "@types/d3-selection": "*"
             }
@@ -1907,14 +1877,12 @@
         "@types/d3-voronoi": {
             "version": "1.1.9",
             "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.9.tgz",
-            "integrity": "sha512-DExNQkaHd1F3dFPvGA/Aw2NGyjMln6E9QzsiqOcBgnE+VInYnFBHBBySbZQts6z6xD+5jTfKCP7M4OqMyVjdwQ==",
-            "dev": true
+            "integrity": "sha512-DExNQkaHd1F3dFPvGA/Aw2NGyjMln6E9QzsiqOcBgnE+VInYnFBHBBySbZQts6z6xD+5jTfKCP7M4OqMyVjdwQ=="
         },
         "@types/d3-zoom": {
             "version": "1.7.4",
             "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-1.7.4.tgz",
             "integrity": "sha512-5jnFo/itYhJeB2khO/lKe730kW/h2EbKMOvY0uNp3+7NdPm4w63DwPEMxifQZ7n902xGYK5DdU67FmToSoy4VA==",
-            "dev": true,
             "requires": {
                 "@types/d3-interpolate": "*",
                 "@types/d3-selection": "*"
@@ -1929,8 +1897,7 @@
         "@types/geojson": {
             "version": "7946.0.7",
             "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
-            "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==",
-            "dev": true
+            "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ=="
         },
         "@types/glob": {
             "version": "7.1.1",
@@ -16100,11 +16067,6 @@
             "integrity": "sha1-4Se9nmb9hGvl6rSME5SIL3wOT5g=",
             "dev": true
         },
-        "zlib": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/zlib/-/zlib-1.0.5.tgz",
-            "integrity": "sha1-bnyXL8NxxkWmr7A6sUdp3vEU/MA="
-        },
         "zwitch": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
diff --git a/package.json b/package.json
index cb9079b3..11ecfcb8 100644
--- a/package.json
+++ b/package.json
@@ -28,8 +28,7 @@
         "react-dom": "^16.13.1",
         "react-json-tree": "^0.11.2",
         "react-monaco-editor": "^0.36.0",
-        "typescript-to-lua": "^0.32.2",
-        "zlib": "^1.0.5"
+        "typescript-to-lua": "^0.32.2"
     },
     "devDependencies": {
         "@ark120202/typescript-config": "^2.1.0",
diff --git a/src/pages/benchviz/index.tsx b/src/pages/benchviz/index.tsx
index 76b35305..efeb64a3 100644
--- a/src/pages/benchviz/index.tsx
+++ b/src/pages/benchviz/index.tsx
@@ -1,16 +1,13 @@
-import Layout from "@theme/Layout";
 import React from "react";
 import Benchmark from "./Benchmark";
 
 export default function CreateBenchmark() {
     const isSSR = typeof window === "undefined";
     return (
-        <Layout title="Benchmark">
-            {!isSSR && (
-                <React.Suspense fallback={<div />}>
-                    <Benchmark />
-                </React.Suspense>
-            )}
-        </Layout>
+        !isSSR && (
+            <React.Suspense fallback={<div />}>
+                <Benchmark />
+            </React.Suspense>
+        )
     );
 }

From 6f84050bb62920b2966168dd41f52e407cb5180d Mon Sep 17 00:00:00 2001
From: Perryvw <perry.wesel@gmail.com>
Date: Wed, 10 Jun 2020 11:09:54 +0200
Subject: [PATCH 09/11] npm audit fix

---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0c47caaf..2e5f1574 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8835,9 +8835,9 @@
             }
         },
         "minimist": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-            "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+            "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
             "dev": true
         },
         "minipass": {

From d7ee9afde0c89961a73f5eb6cc91c4b787384305 Mon Sep 17 00:00:00 2001
From: Perryvw <perry.wesel@gmail.com>
Date: Wed, 10 Jun 2020 13:35:28 +0200
Subject: [PATCH 10/11] Removed nullish operators

---
 src/pages/benchviz/Benchmark.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/benchviz/Benchmark.tsx b/src/pages/benchviz/Benchmark.tsx
index 9a0ab8b0..ff16add5 100644
--- a/src/pages/benchviz/Benchmark.tsx
+++ b/src/pages/benchviz/Benchmark.tsx
@@ -38,7 +38,7 @@ export default function Benchmark() {
 
         return (
             <tr key={i} style={{ color: rowColor }}>
-                <td>{bm.left?.benchmarkName}</td>
+                <td>{bm.left!.benchmarkName}</td>
                 <td>{formatMemory(benchmarkGarbage(bm.left!))}</td>
                 <td>{formatMemory(benchmarkGarbage(bm.right!))}</td>
                 <td>{change}</td>
@@ -48,20 +48,20 @@ export default function Benchmark() {
 
     // Comparison data master garbage created vs commit garbate created (PERCENTAGE CHANGE)
     const generatedGarbageChangeData = benchmarksSortedByPercentDifference.map((bm) => {
-        const oldValue = bm.left?.categories[MemoryBenchmarkCategory.Garbage]!;
-        const newValue = bm.right?.categories[MemoryBenchmarkCategory.Garbage]!;
+        const oldValue = bm.left!.categories[MemoryBenchmarkCategory.Garbage]!;
+        const newValue = bm.right!.categories[MemoryBenchmarkCategory.Garbage]!;
 
         return {
-            name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
+            name: formatBenchmarkName(bm.left!.benchmarkName || bm.right!.benchmarkName!),
             value: (100 * (newValue - oldValue)) / oldValue,
         };
     });
 
     // Comparison data master garbage created vs commit garbate created (ABSOLUTE)
     const generatedGarbageData = benchmarksSortedByPercentDifference.map((bm) => ({
-        name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
-        oldValue: bm.left?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
-        newValue: bm.right?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
+        name: formatBenchmarkName(bm.left!.benchmarkName || bm.right!.benchmarkName!),
+        oldValue: bm.left!.categories[MemoryBenchmarkCategory.Garbage] || 0,
+        newValue: bm.right!.categories[MemoryBenchmarkCategory.Garbage] || 0,
     }));
 
     useEffect(() => {

From 82579fcdfbfe60b1e8864c1ca2bbf939b58e0ae4 Mon Sep 17 00:00:00 2001
From: Perryvw <perry.wesel@gmail.com>
Date: Wed, 10 Jun 2020 13:40:37 +0200
Subject: [PATCH 11/11] Moved <Layout> out of Benchmark component and into
 index

---
 src/pages/benchviz/Benchmark.tsx | 7 +++----
 src/pages/benchviz/index.tsx     | 9 ++-------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/pages/benchviz/Benchmark.tsx b/src/pages/benchviz/Benchmark.tsx
index ff16add5..e48b1a2e 100644
--- a/src/pages/benchviz/Benchmark.tsx
+++ b/src/pages/benchviz/Benchmark.tsx
@@ -1,4 +1,3 @@
-import Layout from "@theme/Layout";
 import * as d3 from "d3";
 import React, { useEffect, useRef } from "react";
 import * as zlib from "zlib";
@@ -83,9 +82,9 @@ export default function Benchmark() {
     });
 
     return (
-        <Layout title="BenchViz">
-            {/* Results table */}
+        <>
             <h2>Benchmark results</h2>
+            {/* Results table */}
             <table>
                 <thead>
                     <tr style={{ fontWeight: "bold" }}>
@@ -113,7 +112,7 @@ export default function Benchmark() {
                 width={garbageCreatedComparisonGraphWidth}
                 height={garbageCreatedComparisonGraphHeight}
             ></svg>
-        </Layout>
+        </>
     );
 }
 
diff --git a/src/pages/benchviz/index.tsx b/src/pages/benchviz/index.tsx
index efeb64a3..80a0c760 100644
--- a/src/pages/benchviz/index.tsx
+++ b/src/pages/benchviz/index.tsx
@@ -1,13 +1,8 @@
+import Layout from "@theme/Layout";
 import React from "react";
 import Benchmark from "./Benchmark";
 
 export default function CreateBenchmark() {
     const isSSR = typeof window === "undefined";
-    return (
-        !isSSR && (
-            <React.Suspense fallback={<div />}>
-                <Benchmark />
-            </React.Suspense>
-        )
-    );
+    return <Layout title="Benchmark">{!isSSR && <Benchmark />}</Layout>;
 }