From 0a834005cf2ed553d9ba7ba76ca87c0f3bbb5da2 Mon Sep 17 00:00:00 2001
From: Philipp Schaad <schaad.phil@gmail.com>
Date: Thu, 7 Apr 2022 16:07:00 +0200
Subject: [PATCH] Add linear and exponential interpolation to overlay scaling
 methods, updates SDFV (#153)

---
 backend/run_dace.py                           |   1 +
 media/components/analysis/index.html          |  79 +++++++++----
 package-lock.json                             | 107 ++++++++++--------
 .../components/analysis/analysis.css          |   4 +-
 .../components/analysis/analysis.ts           |  65 +++++++++--
 .../components/sdfv/analysis/analysis.ts      |  17 ++-
 .../sdfv/messaging/message_handler.ts         |  31 ++++-
 .../components/sdfv/vscode_sdfv.css           |   9 ++
 src/webclients/components/sdfv/vscode_sdfv.ts |   4 +
 9 files changed, 235 insertions(+), 82 deletions(-)

diff --git a/backend/run_dace.py b/backend/run_dace.py
index 1b6680f..d54bd17 100644
--- a/backend/run_dace.py
+++ b/backend/run_dace.py
@@ -22,6 +22,7 @@
         with open('.env', 'r') as fp:
             lines = fp.readlines()
             for line in lines:
+                line = line.strip()
                 if '=' not in line:
                     continue
                 pos = line.find('=')
diff --git a/media/components/analysis/index.html b/media/components/analysis/index.html
index c0957c0..75aa34e 100644
--- a/media/components/analysis/index.html
+++ b/media/components/analysis/index.html
@@ -21,33 +21,68 @@
         </div>
         <div id="contents" class="hidden row">
             <div>
-                <div id="badness-scale-method-container">
+                <div id="heatmap-scaling-method-container">
                     <div>
                         <span>
                             Overlay scaling method:
                         </span>
                     </div>
-                    <div>
-                        <!-- TODO(later): Allow the user to select a number of bins -->
-                        <label>
-                            <input type="radio"
-                                name="badness-scale-method"
-                                value="hist">
-                            Histogram
-                        </label>
-                        <label>
-                            <input type="radio"
-                                name="badness-scale-method"
-                                value="mean">
-                            Mean
-                        </label>
-                        <label>
-                            <input type="radio"
-                                name="badness-scale-method"
-                                value="median"
-                                checked="checked">
-                            Median
-                        </label>
+                    <div class="container-fluid" style="padding: 0;">
+                        <div class="row">
+                            <div>
+                                <select class="form-select"
+                                        id="scaling-method-input">
+                                    <option value="median" selected="selected">
+                                        Median
+                                    </option>
+                                    <option value="mean">
+                                        Mean
+                                    </option>
+                                    <option value="hist">
+                                        Histogram
+                                    </option>
+                                    <option value="linear_interpolation">
+                                        Linear interpolation
+                                    </option>
+                                    <option value="exponential_interpolation">
+                                        Exponential interpolation
+                                    </option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-row mt-2 hidden"
+                             id="scaling-method-hist-buckets-container">
+                            <label class="form-label"
+                                   for="scaling-method-hist-buckets-input">
+                                <span style="display:inline-block; vertical-align: middle; line-height: normal;">
+                                    Number of histogram buckets:
+                                </span>
+                                <span class="material-icons-outlined"
+                                      data-bs-toggle="tooltip"
+                                      data-bs-placement="top"
+                                      title="Setting to 0 sets the number of buckets to the number of distinct values"
+                                      style="display:inline-block; vertical-align: middle; line-height: normal;">
+                                    info
+                                </span>
+                            </label>
+                            <input type="number"
+                                   class="form-control"
+                                   min="0"
+                                   value="0"
+                                   id="scaling-method-hist-buckets-input">
+                        </div>
+                        <div class="form-row mt-2 hidden"
+                             id="scaling-method-exp-base-container">
+                            <label class="form-label"
+                                   for="scaling-method-exp-base-input">
+                                Exponent:
+                            </label>
+                            <input type="number"
+                                   class="form-control"
+                                   min="2"
+                                   value="2"
+                                   id="scaling-method-exp-base-input">
+                        </div>
                     </div>
                 </div>
                 <hr class="horizontal-divider">
diff --git a/package-lock.json b/package-lock.json
index 1d496e9..b70d18b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -71,9 +71,9 @@
             }
         },
         "node_modules/@babel/highlight": {
-            "version": "7.16.10",
-            "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.10.tgz",
-            "integrity": "sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==",
+            "version": "7.17.9",
+            "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.17.9.tgz",
+            "integrity": "sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==",
             "dev": true,
             "dependencies": {
                 "@babel/helper-validator-identifier": "^7.16.7",
@@ -85,9 +85,9 @@
             }
         },
         "node_modules/@babel/runtime": {
-            "version": "7.17.8",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.8.tgz",
-            "integrity": "sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==",
+            "version": "7.17.9",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
+            "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
             "dependencies": {
                 "regenerator-runtime": "^0.13.4"
             },
@@ -161,18 +161,18 @@
             }
         },
         "node_modules/@popperjs/core": {
-            "version": "2.11.4",
-            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz",
-            "integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==",
+            "version": "2.11.5",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+            "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/popperjs"
             }
         },
         "node_modules/@spcl/sdfv": {
-            "version": "1.0.23",
-            "resolved": "https://registry.npmjs.org/@spcl/sdfv/-/sdfv-1.0.23.tgz",
-            "integrity": "sha512-FyIGy5oZLHZ3PNTzot+xCATIv8hI4rcjibYiOt0PDHo0pLKiLCpqyGV5FtnGyXEN6ig8f+t4r3NR23Pg5nSsgQ==",
+            "version": "1.0.26",
+            "resolved": "https://registry.npmjs.org/@spcl/sdfv/-/sdfv-1.0.26.tgz",
+            "integrity": "sha512-nP2lmxO+cpt2i6h7XBM5Pcq5djxVEIijF/ujpr7H/IjsEEaPjaIt5iauEFwEX+MEIceujzGr6fKW9LLj3zboIw==",
             "dependencies": {
                 "@babel/runtime": "^7.17.2",
                 "@types/mathjs": "^6.0.11",
@@ -1680,9 +1680,9 @@
             }
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.103",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.103.tgz",
-            "integrity": "sha512-c/uKWR1Z/W30Wy/sx3dkZoj4BijbXX85QKWu9jJfjho3LBAXNEGAEW3oWiGb+dotA6C6BzCTxL2/aLes7jlUeg==",
+            "version": "1.4.106",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.106.tgz",
+            "integrity": "sha512-ZYfpVLULm67K7CaaGP7DmjyeMY4naxsbTy+syVVxT6QHI1Ww8XbJjmr9fDckrhq44WzCrcC5kH3zGpdusxwwqg==",
             "dev": true
         },
         "node_modules/emoji-regex": {
@@ -2642,9 +2642,9 @@
             }
         },
         "node_modules/graceful-fs": {
-            "version": "4.2.9",
-            "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
-            "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
+            "version": "4.2.10",
+            "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+            "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
             "dev": true
         },
         "node_modules/graphlib": {
@@ -5666,18 +5666,27 @@
             "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
         },
         "node_modules/semver": {
-            "version": "7.3.5",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-            "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+            "version": "7.3.6",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.6.tgz",
+            "integrity": "sha512-HZWqcgwLsjaX1HBD31msI/rXktuIhS+lWvdE4kN9z+8IVT4Itc7vqU2WvYsyD6/sjYCt4dEKH/m1M3dwI9CC5w==",
             "dev": true,
             "dependencies": {
-                "lru-cache": "^6.0.0"
+                "lru-cache": "^7.4.0"
             },
             "bin": {
                 "semver": "bin/semver.js"
             },
             "engines": {
-                "node": ">=10"
+                "node": "^10.0.0 || ^12.0.0 || ^14.0.0 || >=16.0.0"
+            }
+        },
+        "node_modules/semver/node_modules/lru-cache": {
+            "version": "7.7.3",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.7.3.tgz",
+            "integrity": "sha512-WY9wjJNQt9+PZilnLbuFKM+SwDull9+6IAguOrarOMoOHTcJ9GnXSO11+Gw6c7xtDkBkthR57OZMtZKYr+1CEw==",
+            "dev": true,
+            "engines": {
+                "node": ">=12"
             }
         },
         "node_modules/serialize-javascript": {
@@ -7153,9 +7162,9 @@
             "dev": true
         },
         "@babel/highlight": {
-            "version": "7.16.10",
-            "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.10.tgz",
-            "integrity": "sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==",
+            "version": "7.17.9",
+            "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.17.9.tgz",
+            "integrity": "sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==",
             "dev": true,
             "requires": {
                 "@babel/helper-validator-identifier": "^7.16.7",
@@ -7164,9 +7173,9 @@
             }
         },
         "@babel/runtime": {
-            "version": "7.17.8",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.8.tgz",
-            "integrity": "sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==",
+            "version": "7.17.9",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
+            "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
             "requires": {
                 "regenerator-runtime": "^0.13.4"
             }
@@ -7221,14 +7230,14 @@
             }
         },
         "@popperjs/core": {
-            "version": "2.11.4",
-            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz",
-            "integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg=="
+            "version": "2.11.5",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+            "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
         },
         "@spcl/sdfv": {
-            "version": "1.0.23",
-            "resolved": "https://registry.npmjs.org/@spcl/sdfv/-/sdfv-1.0.23.tgz",
-            "integrity": "sha512-FyIGy5oZLHZ3PNTzot+xCATIv8hI4rcjibYiOt0PDHo0pLKiLCpqyGV5FtnGyXEN6ig8f+t4r3NR23Pg5nSsgQ==",
+            "version": "1.0.26",
+            "resolved": "https://registry.npmjs.org/@spcl/sdfv/-/sdfv-1.0.26.tgz",
+            "integrity": "sha512-nP2lmxO+cpt2i6h7XBM5Pcq5djxVEIijF/ujpr7H/IjsEEaPjaIt5iauEFwEX+MEIceujzGr6fKW9LLj3zboIw==",
             "requires": {
                 "@babel/runtime": "^7.17.2",
                 "@types/mathjs": "^6.0.11",
@@ -8404,9 +8413,9 @@
             }
         },
         "electron-to-chromium": {
-            "version": "1.4.103",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.103.tgz",
-            "integrity": "sha512-c/uKWR1Z/W30Wy/sx3dkZoj4BijbXX85QKWu9jJfjho3LBAXNEGAEW3oWiGb+dotA6C6BzCTxL2/aLes7jlUeg==",
+            "version": "1.4.106",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.106.tgz",
+            "integrity": "sha512-ZYfpVLULm67K7CaaGP7DmjyeMY4naxsbTy+syVVxT6QHI1Ww8XbJjmr9fDckrhq44WzCrcC5kH3zGpdusxwwqg==",
             "dev": true
         },
         "emoji-regex": {
@@ -9131,9 +9140,9 @@
             }
         },
         "graceful-fs": {
-            "version": "4.2.9",
-            "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
-            "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
+            "version": "4.2.10",
+            "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+            "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
             "dev": true
         },
         "graphlib": {
@@ -11358,12 +11367,20 @@
             "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
         },
         "semver": {
-            "version": "7.3.5",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-            "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+            "version": "7.3.6",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.6.tgz",
+            "integrity": "sha512-HZWqcgwLsjaX1HBD31msI/rXktuIhS+lWvdE4kN9z+8IVT4Itc7vqU2WvYsyD6/sjYCt4dEKH/m1M3dwI9CC5w==",
             "dev": true,
             "requires": {
-                "lru-cache": "^6.0.0"
+                "lru-cache": "^7.4.0"
+            },
+            "dependencies": {
+                "lru-cache": {
+                    "version": "7.7.3",
+                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.7.3.tgz",
+                    "integrity": "sha512-WY9wjJNQt9+PZilnLbuFKM+SwDull9+6IAguOrarOMoOHTcJ9GnXSO11+Gw6c7xtDkBkthR57OZMtZKYr+1CEw==",
+                    "dev": true
+                }
             }
         },
         "serialize-javascript": {
diff --git a/src/webclients/components/analysis/analysis.css b/src/webclients/components/analysis/analysis.css
index e1126fc..2865abc 100644
--- a/src/webclients/components/analysis/analysis.css
+++ b/src/webclients/components/analysis/analysis.css
@@ -102,13 +102,13 @@ button {
     margin-bottom: .5rem;
 }
 
-#badness-scale-method-container input {
+#heatmap-scaling-method-container input {
     background-color: var(--vscode-checkbox-background);
     color: var(--vscode-checkbox-foreground);
     border-color: var(--vscode-checkbox-border);
 }
 
-#badness-scale-method-container input:checked {
+#heatmap-scaling-method-container input:checked {
     background-color: var(--vscode-inputOption-activeBackground);
     color: var(--vscode-inputOption-activeForeground);
     border-color: var(--vscode-inputOption-activeBorder);
diff --git a/src/webclients/components/analysis/analysis.ts b/src/webclients/components/analysis/analysis.ts
index d21cc0d..f5e7092 100644
--- a/src/webclients/components/analysis/analysis.ts
+++ b/src/webclients/components/analysis/analysis.ts
@@ -159,7 +159,37 @@ function clearRuntimeReport() {
         });
 }
 
+function onScalingUpdated(): void {
+    const scalingMethod = $('#scaling-method-input').val();
+    let additionalVal = undefined;
+    switch (scalingMethod) {
+        case 'hist':
+            $('#scaling-method-hist-buckets-container').show();
+            $('#scaling-method-exp-base-container').hide();
+            additionalVal = $('#scaling-method-hist-buckets-input').val();
+            break;
+        case 'exponential_interpolation':
+            $('#scaling-method-hist-buckets-container').hide();
+            $('#scaling-method-exp-base-container').show();
+            additionalVal = $('#scaling-method-exp-base-input').val();
+            break;
+        default:
+            $('#scaling-method-exp-base-container').hide();
+            $('#scaling-method-hist-buckets-container').hide();
+            break;
+    }
+
+    if (vscode)
+        vscode.postMessage({
+            type: 'sdfv.update_heatmap_scaling_method',
+            method: scalingMethod,
+            additionalVal: additionalVal,
+        });
+}
+
 $(() => {
+    ($('[data-bs-toggle="tooltip"') as any)?.tooltip();
+
     symbolResolution = new SymbolResolution();
 
     // Add a listener to receive messages from the extension.
@@ -195,11 +225,30 @@ $(() => {
                 symbolResolution?.removeAllSymbolDefinitions();
                 break;
             case 'refresh_analysis_pane':
-                if (message.badnessScaleMethod !== undefined)
-                    $('input[type=radio][name=badness-scale-method]').val(
-                        [message.badnessScaleMethod]
+                if (message.heatmapScalingMethod !== undefined) {
+                    $('#scaling-method-input').val(
+                        message.heatmapScalingMethod
                     );
 
+                    if (message.heatmapScalingAdditionalVal !== undefined) {
+                        switch (message.heatmapScalingMethod) {
+                            case 'hist':
+                                $('#scaling-method-hist-buckets-container')
+                                    .show();
+                                break;
+                            case 'exponential_interpolation':
+                                $('#scaling-method-exp-base-container').show();
+                                break;
+                            default:
+                                $('#scaling-method-exp-base-container').hide();
+                                $('#scaling-method-hist-buckets-container')
+                                    .hide();
+                                break;
+                        }
+                    }
+                }
+
+
                 if (message.availableOverlays !== undefined) {
                     const toggleContainer = $('#overlay-toggles');
                     toggleContainer.html('');
@@ -288,13 +337,9 @@ $(() => {
         }
     });
 
-    $('input[type=radio][name=badness-scale-method]').on('change', function() {
-        if (vscode)
-            vscode.postMessage({
-                type: 'sdfv.update_badness_scale_method',
-                method: (this as HTMLInputElement).value,
-            });
-    });
+    $('#scaling-method-input').on('change', onScalingUpdated);
+    $('#scaling-method-hist-buckets-input').on('change', onScalingUpdated);
+    $('#scaling-method-exp-base-input').on('change', onScalingUpdated);
 
     $('#runtime-report-file-input').on('change', function () {
         const fr = new FileReader();
diff --git a/src/webclients/components/sdfv/analysis/analysis.ts b/src/webclients/components/sdfv/analysis/analysis.ts
index 1239668..dab5b5e 100644
--- a/src/webclients/components/sdfv/analysis/analysis.ts
+++ b/src/webclients/components/sdfv/analysis/analysis.ts
@@ -52,13 +52,28 @@ export function refreshAnalysisPane(): void {
         for (const activeOverlay of overlayManager.get_overlays())
             activeOverlays.push(activeOverlay.constructor.name);
 
+        let additionalMethodVal = undefined;
+        switch (overlayManager.get_heatmap_scaling_method()) {
+            case 'hist':
+                additionalMethodVal =
+                    overlayManager.get_heatmap_scaling_hist_n_buckets();
+                break;
+            case 'exponential_interpolation':
+                additionalMethodVal =
+                    overlayManager.get_heatmap_scaling_exp_base();
+                break;
+        }
+
         vscode.postMessage({
             type: 'analysis.refresh_analysis_pane',
             symbols: map,
-            badnessScaleMethod: overlayManager.get_badness_scale_method(),
+            heatmapScalingMethod: overlayManager.get_heatmap_scaling_method(),
+            heatmapScalingAdditionalVal: additionalMethodVal,
             availableOverlays: {
                 'Memory Volume': 'MemoryVolumeOverlay',
                 'Static FLOP': 'StaticFlopsOverlay',
+                'Storage Location': 'MemoryLocationOverlay',
+                'Operational Intensity': 'OperationalIntensityOverlay',
             },
             activeOverlays: activeOverlays,
         });
diff --git a/src/webclients/components/sdfv/messaging/message_handler.ts b/src/webclients/components/sdfv/messaging/message_handler.ts
index bf6241f..e601a5c 100644
--- a/src/webclients/components/sdfv/messaging/message_handler.ts
+++ b/src/webclients/components/sdfv/messaging/message_handler.ts
@@ -3,6 +3,7 @@
 
 import {
     instrumentation_report_read_complete,
+    OperationalIntensityOverlay,
     RuntimeMicroSecondsOverlay,
     StaticFlopsOverlay,
 } from '@spcl/sdfv/out';
@@ -75,10 +76,27 @@ export class MessageHandler {
                     message.value
                 );
                 break;
-            case 'update_badness_scale_method':
-                renderer?.get_overlay_manager().update_badness_scale_method(
+            case 'update_heatmap_scaling_method':
+                renderer?.get_overlay_manager().update_heatmap_scaling_method(
                     message.method
                 );
+
+                if (message.additionalVal !== undefined) {
+                    switch (message.method) {
+                        case 'hist':
+                            renderer?.get_overlay_manager()
+                                .update_heatmap_scaling_hist_n_buckets(
+                                    message.additionalVal
+                                );
+                            break;
+                        case 'exponential_interpolation':
+                            renderer?.get_overlay_manager()
+                                .update_heatmap_scaling_exp_base(
+                                    message.additionalVal
+                                );
+                            break;
+                    }
+                }
                 break;
             case 'register_overlay':
                 {
@@ -168,6 +186,15 @@ export class MessageHandler {
                     if (overlay !== undefined && message.map !== undefined &&
                         overlay instanceof StaticFlopsOverlay)
                         overlay.update_flops_map(message.map);
+                } else if (renderer?.get_overlay_manager().is_overlay_active(
+                    OperationalIntensityOverlay
+                )) {
+                    const overlay = renderer.get_overlay_manager().get_overlay(
+                        OperationalIntensityOverlay
+                    );
+                    if (overlay !== undefined && message.map !== undefined &&
+                        overlay instanceof OperationalIntensityOverlay)
+                        overlay.update_flops_map(message.map);
                 }
                 break;
             case 'update':
diff --git a/src/webclients/components/sdfv/vscode_sdfv.css b/src/webclients/components/sdfv/vscode_sdfv.css
index ae62500..51a40a2 100644
--- a/src/webclients/components/sdfv/vscode_sdfv.css
+++ b/src/webclients/components/sdfv/vscode_sdfv.css
@@ -30,6 +30,15 @@ body {
   resize: none;
 }
 
+#minimap {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 100px;
+  height: 200px;
+  border: 1px solid black;
+}
+
 .button {
   color: var(--vscode-button-foreground);
   background-color: var(--vscode-button-background);
diff --git a/src/webclients/components/sdfv/vscode_sdfv.ts b/src/webclients/components/sdfv/vscode_sdfv.ts
index 3c864c0..eb90f28 100644
--- a/src/webclients/components/sdfv/vscode_sdfv.ts
+++ b/src/webclients/components/sdfv/vscode_sdfv.ts
@@ -27,9 +27,11 @@ import {
     find_in_graph,
     GenericSdfgOverlay,
     get_uuid_graph_element,
+    MemoryLocationOverlay,
     MemoryVolumeOverlay,
     mouse_event,
     NestedSDFG,
+    OperationalIntensityOverlay,
     parse_sdfg,
     RuntimeMicroSecondsOverlay,
     ScopeNode,
@@ -87,6 +89,8 @@ export class VSCodeSDFV extends SDFV {
             'StaticFlopsOverlay': StaticFlopsOverlay,
             'RuntimeMicroSecondsOverlay': RuntimeMicroSecondsOverlay,
             'BreakpointIndicator': BreakpointIndicator,
+            'MemoryLocationOverlay': MemoryLocationOverlay,
+            'OperationalIntensityOverlay': OperationalIntensityOverlay,
         };
 
     private monaco: any | null = null;