From 5fade572f478623542fb1de18a6eac30bd801a3c Mon Sep 17 00:00:00 2001
From: valentin klap <vaklap@ethz.ch>
Date: Tue, 13 Jan 2026 12:11:34 +0100
Subject: [PATCH 1/5] working allocation overlay

---
 .../components/sdfv/analysis/analysis_controller.ts         | 6 ++++++
 src/webclients/components/sdfv/vscode_sdfv.ts               | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/src/webclients/components/sdfv/analysis/analysis_controller.ts b/src/webclients/components/sdfv/analysis/analysis_controller.ts
index 28f3570..4732028 100644
--- a/src/webclients/components/sdfv/analysis/analysis_controller.ts
+++ b/src/webclients/components/sdfv/analysis/analysis_controller.ts
@@ -13,6 +13,7 @@ import {
     DepthOverlay,
     AvgParallelismOverlay,
     RuntimeReportOverlay,
+    AllocationOverlay,
 } from '@spcl/sdfv/src';
 import {
     ICPCRequest,
@@ -162,6 +163,11 @@ export class AnalysisController {
                 symbols[symbol] = map[symbol] ?? '';
             });
             const availableOverlays: IOverlayDescription[] = [
+                {
+                    class: 'AllocationOverlay',
+                    label: 'Memory Allocations',
+                    type: AllocationOverlay.type,
+                },
                 {
                     class: 'MemoryVolumeOverlay',
                     label: 'Logical Memory Volume',
diff --git a/src/webclients/components/sdfv/vscode_sdfv.ts b/src/webclients/components/sdfv/vscode_sdfv.ts
index 4bb2442..79506ad 100644
--- a/src/webclients/components/sdfv/vscode_sdfv.ts
+++ b/src/webclients/components/sdfv/vscode_sdfv.ts
@@ -27,6 +27,7 @@ import {
     SimulatedOperationalIntensityOverlay,
     Point2D,
     RuntimeMicroSecondsOverlay,
+    AllocationOverlay,
     SDFG,
     SDFGElement,
     SDFGRenderer,
@@ -124,6 +125,7 @@ export class VSCodeSDFV extends SDFV {
             'SimulatedOperationalIntensityOverlay':
                 SimulatedOperationalIntensityOverlay,
             'LogicalGroupOverlay': LogicalGroupOverlay,
+            'AllocationOverlay': AllocationOverlay,
         };
 
     private processingOverlay?: JQuery;

From 130105130606286750500f368a37e6f6966dd0c1 Mon Sep 17 00:00:00 2001
From: valentin klap <vaklap@ethz.ch>
Date: Tue, 13 Jan 2026 12:33:40 +0100
Subject: [PATCH 2/5] added support for loading allocation report

---
 media/components/analysis/index.html          | 29 ++++++++++++++++++
 .../components/analysis/analysis.ts           | 30 +++++++++++++++++++
 .../sdfv/analysis/analysis_controller.ts      | 13 ++++++++
 3 files changed, 72 insertions(+)

diff --git a/media/components/analysis/index.html b/media/components/analysis/index.html
index 19f7178..dc610c7 100644
--- a/media/components/analysis/index.html
+++ b/media/components/analysis/index.html
@@ -183,6 +183,35 @@
                         </div>
                     </div>
                 </div>
+                <hr class="horizontal-divider" id="allocation-report-divider"
+                    style="display: none;">
+                <div id="allocation-report" style="display: none;">
+                    <div>
+                        <span>
+                            Memory Allocation Report:
+                        </span>
+                    </div>
+                    <div>
+                        <div class="input-group mb-2">
+                            <input type="text" class="form-control"
+                                   id="allocation-report-filename-label"
+                                   disabled="disabled"
+                                   placeholder="Load allocation report"
+                                   aria-label="Load allocation report"
+                                   aria-describedby="allocation-report-browse-btn">
+                            <button class="btn btn-primary"
+                                    type="button"
+                                    id="allocation-report-browse-btn">
+                                Browse
+                            </button>
+                            <button class="btn btn-secondary"
+                                    id="allocation-report-clear-btn"
+                                    type="button">
+                                Clear
+                            </button>
+                        </div>
+                    </div>
+                </div>
                 <hr class="horizontal-divider">
                 <div id="symbol-list">
                     <span id="symbol-list-title">
diff --git a/src/webclients/components/analysis/analysis.ts b/src/webclients/components/analysis/analysis.ts
index db6de51..45d0d70 100644
--- a/src/webclients/components/analysis/analysis.ts
+++ b/src/webclients/components/analysis/analysis.ts
@@ -176,6 +176,8 @@ class AnalysisPanel extends ICPCWebclientMessagingComponent {
     private runtimeReportFilenameLabel?: JQuery<HTMLSpanElement>;
     private runtimeTimeCriteriumSelect?: JQuery<HTMLSelectElement>;
 
+    private allocationReportFilenameLabel?: JQuery<HTMLSpanElement>;
+
     public get rtReportLabel(): JQuery<HTMLSpanElement> | undefined {
         return this.runtimeReportFilenameLabel;
     }
@@ -248,6 +250,25 @@ class AnalysisPanel extends ICPCWebclientMessagingComponent {
                 }
             });
         });
+
+        this.allocationReportFilenameLabel =
+            $('#allocation-report-filename-label');
+
+        $('#allocation-report-browse-btn').on('click', () => {
+            void this.invoke<{
+                data?: string,
+                path?: Uri,
+            }>('selectReportFile').then(retval => {
+                const aPanel = AnalysisPanel.getInstance();
+                if (retval.data && retval.path) {
+                    const splits = retval.path.path.split('/');
+                    const filename = splits[splits.length - 1];
+                    aPanel.allocationReportFilenameLabel?.val(filename);
+                    aPanel.allocationReportFilenameLabel?.prop('title', retval.path.fsPath);
+                    void aPanel.invokeEditorProcedure('setAllocationMap', [retval.data]);
+                }
+            });
+        });
     }
 
     public init(): void {
@@ -355,6 +376,7 @@ class AnalysisPanel extends ICPCWebclientMessagingComponent {
             const updateHandler = () => {
                 const overlays = [];
                 const nodeOverlay = this.nodeOverlaySelect?.val();
+                console.log('Selected node overlay:', nodeOverlay);
                 if (nodeOverlay && nodeOverlay !== 'none' &&
                     typeof nodeOverlay === 'string')
                     overlays.push(nodeOverlay);
@@ -371,6 +393,14 @@ class AnalysisPanel extends ICPCWebclientMessagingComponent {
                     $('#runtime-measurement').hide();
                 }
 
+                if (nodeOverlay?.toString().startsWith('Allocation')) {
+                    $('#allocation-report-divider').show();
+                    $('#allocation-report').show();
+                } else {
+                    $('#allocation-report-divider').hide();
+                    $('#allocation-report').hide();
+                }
+
                 void AnalysisPanel.setOverlays(overlays);
             };
 
diff --git a/src/webclients/components/sdfv/analysis/analysis_controller.ts b/src/webclients/components/sdfv/analysis/analysis_controller.ts
index 4732028..5085dd7 100644
--- a/src/webclients/components/sdfv/analysis/analysis_controller.ts
+++ b/src/webclients/components/sdfv/analysis/analysis_controller.ts
@@ -75,6 +75,19 @@ export class AnalysisController {
         }
     }
 
+    /**
+     * Set the allocation map for the AllocationOverlay.
+     * @param map Allocation map to set.
+     */
+    @ICPCRequest()
+    public setAllocationMap(map: Record<string, string[]>): void {
+        const olManager = VSCodeRenderer.getInstance()?.overlayManager;
+        const allocationOverlay = olManager?.getOverlay(AllocationOverlay);
+        if (allocationOverlay && allocationOverlay instanceof AllocationOverlay)
+            allocationOverlay.setAllocationMap(map);
+        console.log('Setting allocation map:', map);
+    }
+
     /**
      * Load new data for the active runtime overlays.
      * @param report    New report to be loaded.

From 6e52f6df93673b4e0fff194b9c6ea70c85336c10 Mon Sep 17 00:00:00 2001
From: valentin klap <vaklap@ethz.ch>
Date: Mon, 16 Mar 2026 00:42:22 +0100
Subject: [PATCH 3/5] added allocationoverlay to ui

---
 .../components/sdfv/vscode_sdfv_ui.ts         | 213 +++++++++++++++++-
 1 file changed, 209 insertions(+), 4 deletions(-)

diff --git a/src/webclients/components/sdfv/vscode_sdfv_ui.ts b/src/webclients/components/sdfv/vscode_sdfv_ui.ts
index a227a91..584fdd6 100644
--- a/src/webclients/components/sdfv/vscode_sdfv_ui.ts
+++ b/src/webclients/components/sdfv/vscode_sdfv_ui.ts
@@ -4,6 +4,7 @@ import { findGraphElementByUUID } from '@spcl/sdfv/src/utils/sdfg/sdfg_utils';
 import { ISDFVUserInterface } from '@spcl/sdfv/src/sdfv_ui';
 import { SDFVSettings } from '@spcl/sdfv/src/utils/sdfv_settings';
 import { SDFVComponent, VSCodeSDFV } from './vscode_sdfv';
+import { AllocationOverlay } from '@spcl/sdfv/src';
 import {
     appendDataDescriptorTable,
     appendSymbolsTable,
@@ -303,6 +304,86 @@ export class SDFVVSCodeUI implements ISDFVUserInterface {
                         'class': 'container-fluid attr-table-base-container',
                     }).appendTo(contents);
                     generateAttributesTable(desc, undefined, tableContainer);
+
+                    const allocationOverlay =
+                    renderer.overlayManager.getOverlay(AllocationOverlay) as
+                    AllocationOverlay | undefined;
+
+                    if (allocationOverlay?.hasKey(elem.attributes()?.guid)) {
+                        setTimeout(() => {
+                            const generalTable = tableContainer
+                                .find('[id^="info-table-General-"]');
+                            const row = $('<div>', {
+                                'class': 'row attr-table-row',
+                                'title': 'Toggle highlighting of all Nodes, where this data-container is allocated.',
+                            });
+                            generalTable.prepend(row);
+                            
+                            const div1 = $('<div>', {
+                                'class':'d-flex flex-row align-items-center p-0',
+                            }).appendTo(row);
+
+                            div1.append($('<div>', {
+                                'class':'attr-row-prefix-cell',
+                            }));
+
+                            const div2 = ($('<div>', {
+                                'class':'attr-row-content-cell flex-grow-1',
+                            })).appendTo(div1);
+
+
+                            const div3 = ($('<div>', {
+                                'class':'container-fluid',
+                            })).appendTo(div2);
+
+                            const div4 = ($('<div>', {
+                                'class':'row',
+                            })).appendTo(div3);
+
+                            div4.append($('<div>', {
+                                'class':'attr-table-heading attr-table-cell attr-cell-s',
+                                'text':'allocation_overlay',
+                            }));
+
+                            const div5 = ($('<div>', {
+                                'class':'attr-table-cell attr-cell-1',
+                            })).appendTo(div4);
+
+
+
+                            const div6 = ($('<div>', {
+                                'class':'attr-table-value',
+                            })).appendTo(div5);
+                            const div7 = ($('<div>', {
+                                'class':'form-check form-switch sdfv-property-input sdfv-propoerty-bool'
+                            })).appendTo(div6);
+
+                            const checkbox = ($('<input>', {
+                                'type':'checkbox',
+                                'class':'form-check-input',
+                                'id':'allocation-overlay-toggle',
+                                'checked':allocationOverlay.isFocused(elem.attributes()?.guid),
+                            })).appendTo(div7);
+                            div7.append($('<label>', {
+                                'class':'form-check-label',
+                                'for':'allocation-overlay-toggle',
+                            }));
+
+                            checkbox.on('change', () => {
+                                if (checkbox.is(':checked')) {
+                                    allocationOverlay
+                                        .setFocusedNode(
+                                            elem.attributes()?.guid
+                                        );
+                                } else {
+                                    allocationOverlay
+                                        .removeFocusedNode(
+                                            elem.attributes()?.guid
+                                        );
+                                }
+                            });
+                        }, 10);
+                    }
                 }
             } else if (elem instanceof NestedSDFG) {
                 // If nested SDFG, add SDFG info too.
@@ -372,10 +453,134 @@ export class SDFVVSCodeUI implements ISDFVUserInterface {
                         contents, attrs._arrays, elem.jsonData,
                         DATA_CONTAINERS_START_EXPANDED_THRESHOLD
                     );
-                    appendSymbolsTable(
-                        contents, attrs.symbols,
-                        SYMBOLS_START_EXPANDED_THRESHOLD
-                    );
+                    /* eslint-disable-next-line
+                       @typescript-eslint/no-unnecessary-condition */
+                    if (attrs.symbols) {
+                        appendSymbolsTable(
+                            contents, attrs.symbols,
+                            SYMBOLS_START_EXPANDED_THRESHOLD
+                        );
+                    }
+                }
+                const allocationOverlay =
+                    renderer.overlayManager.getOverlay(AllocationOverlay) as
+                    AllocationOverlay | undefined;
+
+                if(allocationOverlay) {
+                    setTimeout(() => {
+                        const attrTable = $('<div>', {
+                            'class':'container-fluid attr-table-base-container',
+                        }).appendTo(contents);
+
+                        const div1 = ($('<div>', {
+                            'class':'row attr-table-cat-row',
+                        })).appendTo(attrTable);
+
+                        const div2 = ($('<div>', {
+                            'class':'col-12 attr-table-cat-container',
+                        })).appendTo(div1);
+
+                        div2.append('<button class="attr-cat-toggle-btn active" type="button" data-bs-toggle="collapse" data-bs-target="#info-table-allocation-overlay" aria-expanded="false" aria-controls="info-table-allocation-overlay">Allocation Overlay<i class="attr-cat-toggle-btn-indicator material-symbols-outlined">expand_less</i></button>');
+
+                        const tableBody = $('<div>', {
+                            'class': 'container-fluid attr-table collapse show',
+                            'id': 'info-table-allocation-overlay',
+                        }).appendTo(div2);
+
+                        for (const blockId of renderer.graph?.nodes() ?? []) {
+                            const block = renderer.graph!.node(blockId);
+                            if (block instanceof State && block.graph) {
+                                for (const nodeId of block.graph.nodes()) {
+                                    const node = block.graph.node(nodeId);
+                                    const nodeSdfgGuid = node?.sdfg.attributes?.guid;
+                                    if (node instanceof AccessNode &&
+                                        nodeSdfgGuid === attrs?.guid) {
+                                        const nodeAttr = node.jsonData?.attributes;
+
+                                        const label = nodeAttr?.data;
+                                        const guidValue = nodeAttr?.guid;
+
+                                        if (typeof guidValue !== 'string' ||
+                                            typeof label !== 'string')
+                                            continue;
+
+                                        const guid: string = guidValue;
+                                        if(allocationOverlay.hasKey(guid)) {
+                                            const rowContainer = $('<div>', {
+                                                'class':'row attr-table-row',
+                                            }).appendTo(tableBody);
+
+                                            const row = $('<div>', {
+                                                'class': 'd-flex flex-row align-items-center p-0',
+                                            }).appendTo(rowContainer);
+
+                                            const prefixCell = $('<div>', {
+                                                'class':'attr-row-prefix-cell',
+                                            }).appendTo(row);
+
+                                            const contentCell = $('<div>', {
+                                                'class':'attr-row-content-cell flex-grow-1',
+                                            }).appendTo(row);
+
+                                            const cellContainer = $('<div>', {
+                                                'class':'container-fluid',
+                                            }).appendTo(contentCell);
+
+                                            const cellRow = $('<div>', {
+                                                'class':'row',
+                                            }).appendTo(cellContainer);
+
+                                            const heading = $('<div>', {
+                                                'class':'attr-table-heading attr-table-cell attr-cell-1',
+                                                'text': label,
+                                            }).appendTo(cellRow);
+
+                                            const valueCell = $('<div>', {
+                                                'class':'attr-table-cell attr-cell-1',
+                                            }).appendTo(cellRow);
+
+                                            const valueDiv = $('<div>', {
+                                                'class':'attr-table-value',
+                                            }).appendTo(valueCell);
+
+                                            const formCheckDiv = $('<div>', {
+                                                'class':'form-check form-switch sdfv-property-input sdfv-propoerty-bool'
+                                            }).appendTo(valueDiv);
+
+
+
+                                            const checkbox = $('<input>', {
+                                                'type':'checkbox',
+                                                'class':'form-check-input',
+                                                'id':'allocation-overlay-toggle-' + guid,
+                                                'checked': allocationOverlay.isFocused(guid),
+                                            }).appendTo(formCheckDiv);
+
+                                            checkbox.on('change', () => {
+                                                if (checkbox.is(':checked')) {
+                                                    allocationOverlay
+                                                        .setFocusedNode(
+                                                        guid 
+                                                        );
+                                                } else {
+                                                    allocationOverlay
+                                                        .removeFocusedNode(
+                                                            guid
+                                                        );
+                                                }
+                                            });
+                                        }
+
+                                    }
+                                }
+                            }
+                        }
+                        
+
+                        console.log("data:", elem.attributes());
+
+                        console.log('SDFG info table:', contents);
+                    }, 10);
                 }
             }
 

From 39a486e5f152e71048fd84e48a2556e71157df95 Mon Sep 17 00:00:00 2001
From: valentin klap <valentinklap@proton.me>
Date: Mon, 4 May 2026 14:02:33 +0200
Subject: [PATCH 4/5] pinned submodule to the right commit and repo

---
 .gitmodules   | 2 +-
 packages/sdfv | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.gitmodules b/.gitmodules
index 58b17eb..632c00c 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +1,3 @@
 [submodule "packages/sdfv"]
 	path = packages/sdfv
-	url = git@github.com:spcl/dace-webclient.git
+	url = git@github.com:value03/dace-webclient.git
diff --git a/packages/sdfv b/packages/sdfv
index 95c6f23..f82dee7 160000
--- a/packages/sdfv
+++ b/packages/sdfv
@@ -1 +1 @@
-Subproject commit 95c6f23907c9c5ca4064a95c91847461cc866110
+Subproject commit f82dee7798f8d7b2821e75eb65ade48e3f75d3a6

From 1f44213c53e43132ce131ff18e211e631f9ba68e Mon Sep 17 00:00:00 2001
From: valentin klap <valentinklap@proton.me>
Date: Mon, 4 May 2026 14:07:45 +0200
Subject: [PATCH 5/5] pinned submodule to the right commit

---
 packages/sdfv | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sdfv b/packages/sdfv
index f82dee7..6d8db46 160000
--- a/packages/sdfv
+++ b/packages/sdfv
@@ -1 +1 @@
-Subproject commit f82dee7798f8d7b2821e75eb65ade48e3f75d3a6
+Subproject commit 6d8db46586b74d3a2aa7997c6c2fb22cd0408922