Skip to content

Commit 675c4bf

Browse files
NetroScriptNetroScript
committed
Add styled detailed view of single memory accesses
Additionally add another data example which also shows the error correctly (if not enough memory was allocated)
1 parent 603d610 commit 675c4bf

9 files changed

Lines changed: 243 additions & 53 deletions

File tree

‎html/data/random2DMatrix_faulty.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎html/src/app.pcss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,20 @@ html:root {
2929
text-align: center;
3030
font-size: 2rem;
3131
}
32+
33+
34+
.description-prefix {
35+
@apply text-center text-xs font-mono opacity-60 items-center;
36+
}
37+
38+
.description-content {
39+
@apply text-center py-1 px-3 variant-glass rounded-xl min-w-[32px];
40+
}
41+
42+
.description-container {
43+
@apply flex flex-row justify-center items-center gap-1 px-2;
44+
}
45+
46+
.section-container {
47+
@apply flex flex-row justify-around items-center variant-glass rounded-xl py-2 p-5 my-1;
48+
}

‎html/src/components/InspectDrawer.svelte‎

Lines changed: 95 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,102 @@
11
<script lang="ts">
2-
import { drawerState } from '../lib/stores';
2+
import { drawerState, drawerContent } from '../lib/stores';
33
import { Drawer } from '@skeletonlabs/skeleton';
4-
</script>
4+
import MemoryAccessInfo from './MemoryAccessInfo.svelte';
5+
import { get } from 'svelte/store';
56
6-
<Drawer>
7-
<div class="mx-auto text-center text-2xl my-3">
8-
Active Inspection: {$drawerState.currentMemoryRegion.name} ({$drawerState.showSingleAccessTable
9-
? 'All'
10-
: $drawerState.showReadAccess
11-
? 'Read'
12-
: 'Write'})
13-
</div>
7+
const toggleCurrentlyShownType = () => {
8+
const currentlyShownType = get(drawerState);
149
15-
{#if $drawerState.currentMemoryRegionIndex > -1}
16-
{#each drawerState.getCurrentData() as access}
17-
<div class="flex bg-cyan-800 mb-1 break-words overflow-hidden">
18-
<div class="bg-cyan-900 p-4 flex-1 break-words max-w-full">
19-
{JSON.stringify(access)}
10+
// If currently reading, and not the combined accesses change it to writing
11+
if (currentlyShownType.showReadAccess && !currentlyShownType.showSingleAccessTable) {
12+
drawerState.update((state) => {
13+
state.showReadAccess = false;
14+
return state;
15+
});
16+
}
17+
// If we are showing write accesses, and not the combined accesses change it to combined
18+
else if (!currentlyShownType.showReadAccess && !currentlyShownType.showSingleAccessTable) {
19+
drawerState.update((state) => {
20+
state.showReadAccess = true;
21+
state.showSingleAccessTable = true;
22+
return state;
23+
});
24+
}
25+
// If we are showing combined accesses, change it to reading
26+
else if (currentlyShownType.showReadAccess && currentlyShownType.showSingleAccessTable) {
27+
drawerState.update((state) => {
28+
state.showSingleAccessTable = false;
29+
return state;
30+
});
31+
}
32+
};
33+
</script>
34+
35+
<Drawer height="h-[70%]" blur="backdrop-blur-lg">
36+
<div class="overflow-hidden h-full flex flex-col">
37+
<div class="mx-auto text-center text-2xl my-3 cursor-pointer" on:click={toggleCurrentlyShownType}>
38+
Address: {$drawerState.currentMemoryRegion.convertIndexToAddressString($drawerState.currentMemoryRegionIndex)} [{$drawerState.currentMemoryRegionIndex}]
39+
- {$drawerState.showSingleAccessTable ? 'All' : $drawerState.showReadAccess ? 'Read' : 'Write'} accesses in chronological
40+
order
41+
<div class="inline opacity-50 text-sm">(click to toggle shown accesses)</div>
42+
</div>
43+
<div class="flex flex-row justify-around items-center flex-wrap my-2">
44+
<div class="section-container flex-1 max-w-xl !variant-glass-secondary mx-3">
45+
<div class="text-center font-mono">Grid Sizing:</div>
46+
<div class="flex flex-row justify-around">
47+
<div class="description-container mx-3">
48+
<div class="description-prefix">X:</div>
49+
<div class="description-content">
50+
{$drawerState.currentMemoryRegion.kernelSettings.GridDimensions.x}
51+
</div>
52+
</div>
53+
<div class="description-container mx-3">
54+
<div class="description-prefix">Y:</div>
55+
<div class="description-content">
56+
{$drawerState.currentMemoryRegion.kernelSettings.GridDimensions.y}
57+
</div>
58+
</div>
59+
<div class="description-container mx-3">
60+
<div class="description-prefix">Z:</div>
61+
<div class="description-content">
62+
{$drawerState.currentMemoryRegion.kernelSettings.GridDimensions.z}
63+
</div>
64+
</div>
2065
</div>
2166
</div>
22-
{/each}
23-
{/if}
67+
<div class="section-container flex-1 max-w-xl !variant-glass-secondary mx-3">
68+
<div class="text-center font-mono">Block Sizing:</div>
69+
<div class="flex flex-row justify-around">
70+
<div class="description-container mx-3">
71+
<div class="description-prefix">X:</div>
72+
<div class="description-content">
73+
{$drawerState.currentMemoryRegion.kernelSettings.BlockDimensions.x}
74+
</div>
75+
</div>
76+
<div class="description-container mx-3">
77+
<div class="description-prefix">Y:</div>
78+
<div class="description-content">
79+
{$drawerState.currentMemoryRegion.kernelSettings.BlockDimensions.y}
80+
</div>
81+
</div>
82+
<div class="description-container mx-3">
83+
<div class="description-prefix">Z:</div>
84+
<div class="description-content">
85+
{$drawerState.currentMemoryRegion.kernelSettings.BlockDimensions.z}
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
92+
<div class="min-w-full max-w-full bg-black/20 py-1" />
93+
94+
<div class="overflow-y-auto flex-1">
95+
{#if $drawerState.currentMemoryRegionIndex > -1}
96+
{#each $drawerContent as access, index}
97+
<MemoryAccessInfo {access} {index} />
98+
{/each}
99+
{/if}
100+
</div>
101+
</div>
24102
</Drawer>

‎html/src/components/Layout.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
</button>
6767
<button
6868
class="btn-icon variant-soft min-w-[50px]"
69-
on:click={() => ($drawerState.showSingleAccessTable = !$drawerState.showSingleAccessTable)}
69+
on:click={() => ($pageState.showCombinedAccess = !$pageState.showCombinedAccess)}
7070
use:tooltip={{
7171
content: 'Toggle between showing read and write separately and showing the total access count',
7272
position: 'bottom'
@@ -75,7 +75,7 @@
7575
<Icon
7676
class="drop-shadow-xl min-w-[32px]"
7777
height="32"
78-
icon={$drawerState.showSingleAccessTable ? outlineSplitscreen : outlineRectangle}
78+
icon={$pageState.showCombinedAccess ? outlineSplitscreen : outlineRectangle}
7979
width="32"
8080
/>
8181
</button>

‎html/src/components/MemoryAccessInfo.svelte‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<script lang="ts">
2+
import { AccessInstance } from '../lib/types';
3+
4+
export let access: AccessInstance;
5+
export let index = 0;
6+
</script>
7+
8+
<div class="max-w-ful">
9+
<div class="flex flex-row items-center variant-glass rounded-xl p-3 mx-3 my-2 flex-wrap">
10+
<div class="self-center justify-self-center text-3xl variant-glass-primary py-2 px-5 rounded-[100px] mx-auto">
11+
{index}
12+
</div>
13+
<div class="flex flex-1 flex-row justify-around items-center flex-wrap">
14+
<div class="section-container">
15+
<div class="text-center font-mono">Thread ID:</div>
16+
<div class="flex flex-row justify-around items-center px-2 gap-2">
17+
<div class="description-container">
18+
<div class="description-prefix">X:</div>
19+
<div class="description-content">
20+
{access.blockID.x}
21+
</div>
22+
</div>
23+
<div class="description-container">
24+
<div class="description-prefix">Y:</div>
25+
<div class="description-content">
26+
{access.blockID.y}
27+
</div>
28+
</div>
29+
<div class="description-container">
30+
<div class="description-prefix">Z:</div>
31+
<div class="description-content">
32+
{access.blockID.z}
33+
</div>
34+
</div>
35+
<div class="description-container pl-2">
36+
<div class="description-prefix">Global:</div>
37+
<div class="description-content">
38+
{access.threadIdGlobal}
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
<div class="section-container">
44+
<div class="text-center font-mono">Block ID:</div>
45+
<div class="flex flex-row justify-around items-center px-2 gap-2">
46+
<div class="description-container">
47+
<div class="description-prefix">X:</div>
48+
<div class="description-content">
49+
{access.blockID.x}
50+
</div>
51+
</div>
52+
<div class="description-container">
53+
<div class="description-prefix">Y:</div>
54+
<div class="description-content">
55+
{access.blockID.y}
56+
</div>
57+
</div>
58+
<div class="description-container">
59+
<div class="description-prefix">Z:</div>
60+
<div class="description-content">
61+
{access.blockID.z}
62+
</div>
63+
</div>
64+
<div class="description-container pl-2">
65+
<div class="description-prefix">Global:</div>
66+
<div class="description-content">
67+
{access.blockIdGlobal}
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
<div
74+
class="py-3 my-1 px-4 text-xl rounded-3xl uppercase self-center justify-self-center mx-auto"
75+
class:variant-glass-success={access.isRead}
76+
class:variant-glass-warning={!access.isRead}
77+
>
78+
{access.isRead ? 'Read' : 'Write'}
79+
</div>
80+
</div>
81+
</div>

‎html/src/components/MemoryRegionBlock.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
</div>
3939
{/if}
4040
<div class="flex flex-col flex-1" title={'Index: ' + index}>
41-
{#if $drawerState.showSingleAccessTable}
41+
{#if $pageState.showCombinedAccess}
4242
<div
4343
class="flex-1 flex justify-center items-center bg-access-all high-contrast-text-shadow content-cell"
4444
style="--tw-bg-opacity: {totalOpacity}"

‎html/src/components/SideBar.svelte‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,22 @@
33
import { currentMemoryRegion, ListPlaceHolder } from '../lib/stores';
44
import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
55
import ShowGenericInformation from './ShowGenericInformation.svelte';
6+
7+
let debounceMemoryTimer: number;
8+
const debounceMemoryWidth = (value: number) => {
9+
clearTimeout(debounceMemoryTimer);
10+
debounceMemoryTimer = setTimeout(() => {
11+
pageState.update((state) => {
12+
state.customMemoryWidth = value;
13+
return state;
14+
});
15+
}, 150);
16+
};
617
</script>
718

819
<div class="sidebar flex flex-col h-full overflow-y-hidden">
920
<div class="overflow-y-auto">
10-
<p class="my-1">Select the data structure you want to view:</p>
21+
<p class="my-1 mb-2">Select the data structure:</p>
1122

1223
<ListBox selected={currentMemoryRegion} class="my-1 border-gray-600/20 border-2 rounded-3xl">
1324
<ListBoxItem value={ListPlaceHolder} class="mb-2">None</ListBoxItem>
@@ -22,7 +33,7 @@
2233
<div class="mt-auto my-1 py-2">
2334
Optionally, set a width of the Memory Region, if you have a specific 2D layout you want to visualize.
2435
</div>
25-
<input type="number" bind:value={$pageState.customMemoryWidth} />
36+
<input type="number" on:keyup={({ target: { value } }) => debounceMemoryWidth(value)} value="0" />
2637
</div>
2738

2839
<style>

‎html/src/lib/stores.ts‎

Lines changed: 23 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export interface DrawerState {
1313
export interface PageState {
1414
backGroundContrastBlack: boolean;
1515
showIndex: boolean;
16+
showCombinedAccess: boolean;
1617
availableMemoryRegions: MemoryRegionManager[];
1718
showGrid: boolean;
1819
customMemoryWidth: number;
@@ -24,42 +25,34 @@ export const ListPlaceHolder = {
2425
isPlaceHolder: true
2526
};
2627

27-
function createDrawerStateStore() {
28-
const { subscribe, set, update } = writable<DrawerState>({
29-
currentMemoryRegion: null,
30-
currentMemoryRegionIndex: -1,
31-
showSingleAccessTable: false,
32-
showReadAccess: true
33-
});
34-
35-
return {
36-
subscribe,
37-
set,
38-
update,
39-
getCurrentData: () => {
40-
// Return a copy of the current data
41-
let currentData: DrawerState;
42-
subscribe((value) => (currentData = value))();
43-
// On the current data, we want to return a copy of the current memory region information
44-
if (currentData.showSingleAccessTable) {
45-
return currentData.currentMemoryRegion.getAllAccesses(currentData.currentMemoryRegionIndex);
46-
}
47-
if (currentData.showReadAccess) {
48-
return currentData.currentMemoryRegion.getReadAccesses(currentData.currentMemoryRegionIndex);
49-
} else {
50-
return currentData.currentMemoryRegion.getWriteAccesses(currentData.currentMemoryRegionIndex);
51-
}
52-
}
53-
};
54-
}
28+
export const drawerState = writable<DrawerState>({
29+
currentMemoryRegion: null,
30+
currentMemoryRegionIndex: -1,
31+
showSingleAccessTable: false,
32+
showReadAccess: true
33+
});
34+
export const drawerContent = derived(drawerState, ($drawerState) => {
35+
if ($drawerState.currentMemoryRegion === null) {
36+
return [];
37+
}
38+
39+
if ($drawerState.showSingleAccessTable) {
40+
return $drawerState.currentMemoryRegion.getAllAccesses($drawerState.currentMemoryRegionIndex);
41+
}
42+
if ($drawerState.showReadAccess) {
43+
return $drawerState.currentMemoryRegion.getReadAccesses($drawerState.currentMemoryRegionIndex);
44+
} else {
45+
return $drawerState.currentMemoryRegion.getWriteAccesses($drawerState.currentMemoryRegionIndex);
46+
}
47+
});
5548

56-
export const drawerState = createDrawerStateStore();
5749
export const pageState = writable<PageState>({
5850
backGroundContrastBlack: true,
5951
showIndex: false,
6052
availableMemoryRegions: [],
6153
showGrid: true,
62-
customMemoryWidth: 0
54+
customMemoryWidth: 0,
55+
showCombinedAccess: false
6356
});
6457

6558
export const currentMemoryRegion = writable<MemoryRegionManager | typeof ListPlaceHolder>(ListPlaceHolder);

‎html/src/lib/types.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,8 @@ export class MemoryRegionManager {
9494
readonly readAccesses: Map<number, AccessInstance[]>;
9595
// For each index of the array data structure, we store all accesses which write to this index
9696
readonly writeAccesses: Map<number, AccessInstance[]>;
97+
// To keep chronological order we also need to store the combined accesses
98+
private combinedAccesses: Map<number, AccessInstance[]>;
9799

98100
readonly kernelSettings: GenericInformation;
99101

@@ -168,6 +170,7 @@ export class MemoryRegionManager {
168170

169171
this.readAccesses = new Map<number, AccessInstance[]>();
170172
this.writeAccesses = new Map<number, AccessInstance[]>();
173+
this.combinedAccesses = new Map<number, AccessInstance[]>();
171174

172175
this.kernelSettings = kernelSettings;
173176
}
@@ -214,6 +217,12 @@ export class MemoryRegionManager {
214217
}
215218
}
216219

220+
// Also add it to the combinedAccesses map
221+
if (!this.combinedAccesses.has(access.index)) {
222+
this.combinedAccesses.set(access.index, []);
223+
}
224+
this.combinedAccesses.get(access.index)?.push(access);
225+
217226
if (this._highestReadCount > this._highestTotalCount) {
218227
this._highestTotalCount = this._highestReadCount;
219228
}
@@ -283,7 +292,7 @@ export class MemoryRegionManager {
283292

284293
// Getter for all accesses of a specific index
285294
getAllAccesses(index: number): AccessInstance[] {
286-
return [...(this.readAccesses.get(index) || []), ...(this.writeAccesses.get(index) || [])];
295+
return this.combinedAccesses.get(index) || [];
287296
}
288297

289298
// Getter for all accesses of a specific address

0 commit comments

Comments
 (0)