Skip to content

Allocation overlay #270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
value03 wants to merge 5 commits into
base: main
Choose a base branch
from
+291 −6
Open

Allocation overlay #270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5fade57
working allocation overlay
value03 Jan 13, 2026
1301051
added support for loading allocation report
value03 Jan 13, 2026
6e52f6d
added allocationoverlay to ui
value03 Mar 15, 2026
39a486e
pinned submodule to the right commit and repo
May 4, 2026
1f44213
pinned submodule to the right commit
May 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitmodules
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
29 changes: 29 additions & 0 deletions media/components/analysis/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion packages/sdfv
Open in desktop
Submodule sdfv updated 7 files
+2 −2 .github/workflows/build.yml
+2 −2 .github/workflows/build_dist.yml
+3 −3 .github/workflows/gh-pages.yml
+2 −2 .github/workflows/test.yml
+1 −0 src/index.ts
+186 −0 src/overlays/allocation_overlay.ts
+1 −0 src/utils/sdfg/traversal.ts
30 changes: 30 additions & 0 deletions src/webclients/components/analysis/analysis.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
Expand All @@ -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);
};

Expand Down
19 changes: 19 additions & 0 deletions src/webclients/components/sdfv/analysis/analysis_controller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
DepthOverlay,
AvgParallelismOverlay,
RuntimeReportOverlay,
AllocationOverlay,
} from '@spcl/sdfv/src';
import {
ICPCRequest,
Expand Down Expand Up @@ -74,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.
Expand Down Expand Up @@ -162,6 +176,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',
Expand Down
2 changes: 2 additions & 0 deletions src/webclients/components/sdfv/vscode_sdfv.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
SimulatedOperationalIntensityOverlay,
Point2D,
RuntimeMicroSecondsOverlay,
AllocationOverlay,
SDFG,
SDFGElement,
SDFGRenderer,
Expand Down Expand Up @@ -124,6 +125,7 @@ export class VSCodeSDFV extends SDFV {
'SimulatedOperationalIntensityOverlay':
SimulatedOperationalIntensityOverlay,
'LogicalGroupOverlay': LogicalGroupOverlay,
'AllocationOverlay': AllocationOverlay,
};

private processingOverlay?: JQuery;
Expand Down
213 changes: 209 additions & 4 deletions src/webclients/components/sdfv/vscode_sdfv_ui.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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);
}
}

Expand Down