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/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 @@ + +
diff --git a/packages/sdfv b/packages/sdfv index 95c6f23..6d8db46 160000 --- a/packages/sdfv +++ b/packages/sdfv @@ -1 +1 @@ -Subproject commit 95c6f23907c9c5ca4064a95c91847461cc866110 +Subproject commit 6d8db46586b74d3a2aa7997c6c2fb22cd0408922 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; private runtimeTimeCriteriumSelect?: JQuery; + private allocationReportFilenameLabel?: JQuery; + public get rtReportLabel(): JQuery | 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 28f3570..5085dd7 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, @@ -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): 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. @@ -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', 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; 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 = $('
', { + 'class': 'row attr-table-row', + 'title': 'Toggle highlighting of all Nodes, where this data-container is allocated.', + }); + generalTable.prepend(row); + + const div1 = $('
', { + 'class':'d-flex flex-row align-items-center p-0', + }).appendTo(row); + + div1.append($('
', { + 'class':'attr-row-prefix-cell', + })); + + const div2 = ($('
', { + 'class':'attr-row-content-cell flex-grow-1', + })).appendTo(div1); + + + const div3 = ($('
', { + 'class':'container-fluid', + })).appendTo(div2); + + const div4 = ($('
', { + 'class':'row', + })).appendTo(div3); + + div4.append($('
', { + 'class':'attr-table-heading attr-table-cell attr-cell-s', + 'text':'allocation_overlay', + })); + + const div5 = ($('
', { + 'class':'attr-table-cell attr-cell-1', + })).appendTo(div4); + + + + const div6 = ($('
', { + 'class':'attr-table-value', + })).appendTo(div5); + const div7 = ($('
', { + 'class':'form-check form-switch sdfv-property-input sdfv-propoerty-bool' + })).appendTo(div6); + + const checkbox = ($('', { + 'type':'checkbox', + 'class':'form-check-input', + 'id':'allocation-overlay-toggle', + 'checked':allocationOverlay.isFocused(elem.attributes()?.guid), + })).appendTo(div7); + div7.append($('