Skip to content

Commit 2ee192a

Browse files
anthonywongskyboxlabsJakeShirley
anthonywongskyboxlabs
and
JakeShirley
authored
feat: Added client memory stats + cleaned up diagnostics prefabs (refreshed) (#337)
This is a refresh of the original PR for this work #316 by @JakeShirley - Adds support for the client memory stats - Cleans up the diagnostics prefabs to make them more readable and maintainable - Splits out prefabs to one tab per file to make the system more scalable Co-authored-by: Jake Shirley <jake@xbox.com>
1 parent 2385395 commit 2ee192a

19 files changed

Lines changed: 893 additions & 511 deletions

‎webview-ui/src/diagnostics_panel/App.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,17 @@ main {
8787
fill: var(--vscode-editor-background);
8888
}
8989

90+
.minecraft-statistic-table-container {
91+
flex-direction: row;
92+
display: flex;
93+
width: 100%;
94+
}
95+
96+
.minecraft-statistic-table-sort-container {
97+
flex-direction: column;
98+
display: flex;
99+
}
100+
90101
.line-chart-figure {
91102
max-width: initial;
92103
}

‎webview-ui/src/diagnostics_panel/App.tsx‎

Lines changed: 29 additions & 183 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,11 @@ import MinecraftStatisticStackedLineChart from './controls/MinecraftStatisticSta
99
import MinecraftStatisticStackedBarChart from './controls/MinecraftStatisticStackedBarChart';
1010
import { MultipleStatisticProvider, SimpleStatisticProvider, StatisticUpdatedMessage } from './StatisticProvider';
1111
import ReplayControls from './controls/ReplayControls';
12-
import * as statPrefabs from './StatisticPrefabs';
13-
import { MinecraftDynamicPropertiesTable } from './controls/MinecraftDynamicPropertiesTable';
12+
import * as statPrefabs from './prefabs/StatisticPrefab';
1413
import { Icons } from './Icons';
1514
import './App.css';
15+
import tabPrefabs from './prefabs';
16+
import { TabPrefabDataSource } from './prefabs/TabPrefab';
1617

1718
declare global {
1819
interface Window {
@@ -26,19 +27,6 @@ interface VSCodePanelsChangeEvent extends Event {
2627
target: EventTarget & { activeid: string };
2728
}
2829

29-
// Filter out events with a value of zero that haven't been previously subscribed to
30-
function constructSubscribedSignalFilter() {
31-
const nonFilteredValues: string[] = [];
32-
const func = (event: StatisticUpdatedMessage) => {
33-
if (event.values.length === 1 && event.values[0] === 0 && !nonFilteredValues.includes(event.id)) {
34-
return false;
35-
}
36-
nonFilteredValues.push(event.id);
37-
return true;
38-
};
39-
return func;
40-
}
41-
4230
const onRestart = () => {
4331
vscode.postMessage({ type: 'restart' });
4432
};
@@ -111,174 +99,32 @@ function App() {
11199
/>
112100
)}
113101
<VSCodePanels activeid={currentTab} onChange={event => handlePanelChange(event as VSCodePanelsChangeEvent)}>
114-
<VSCodePanelTab id="tab-1">World</VSCodePanelTab>
115-
<VSCodePanelTab id="tab-2">Memory</VSCodePanelTab>
116-
<VSCodePanelTab id="tab-3">Server Timing</VSCodePanelTab>
117-
<VSCodePanelTab id="tab-4">Client Timing</VSCodePanelTab>
118-
<VSCodePanelTab id="tab-5">Networking - Packets</VSCodePanelTab>
119-
<VSCodePanelTab id="tab-6">Networking - Bandwidth</VSCodePanelTab>
120-
<VSCodePanelTab id="tab-7">Handle Counts</VSCodePanelTab>
121-
<VSCodePanelTab id="tab-8">Subscriber Counts</VSCodePanelTab>
122-
<VSCodePanelTab id="tab-9">Global Dynamic Properties</VSCodePanelTab>
123-
<VSCodePanelView id="view-1" style={{ flexDirection: 'column' }}>
124-
<div style={{ flexDirection: 'row', display: 'flex' }}>
125-
{statPrefabs.entityCount.reactNode}
126-
{statPrefabs.loadedChunks.reactNode}
127-
</div>
128-
<div style={{ flexDirection: 'row', display: 'flex' }}>{statPrefabs.commandsRan.reactNode}</div>
129-
</VSCodePanelView>
130-
<VSCodePanelView id="view-2" style={{ flexDirection: 'column' }}>
131-
<div style={{ flexDirection: 'row', display: 'flex' }}>
132-
{statPrefabs.appMemoryUsage.reactNode}
133-
{statPrefabs.appMemoryFree.reactNode}
134-
</div>
135-
<div style={{ flexDirection: 'row', display: 'flex' }}>
136-
{statPrefabs.javaScriptMemoryAllocated.reactNode}
137-
{statPrefabs.javaScriptMemoryFree.reactNode}
138-
</div>
139-
</VSCodePanelView>
140-
<VSCodePanelView id="view-3" style={{ flexDirection: 'column' }}>
141-
<div style={{ flexDirection: 'row', display: 'flex' }}>
142-
{statPrefabs.serverTickTimings.reactNode}
143-
</div>
144-
<div style={{ flexDirection: 'row', display: 'flex' }}>{statPrefabs.commandsRan.reactNode}</div>
145-
</VSCodePanelView>
146-
<VSCodePanelView id="view-4" style={{ flexDirection: 'column' }}>
147-
<StatGroupSelectionBox
148-
labelName="Client"
149-
statParentId="client_frame_timings"
150-
onChange={handleClientSelection}
151-
/>
152-
<MinecraftStatisticLineChart
153-
title="FPS"
154-
yLabel="FPS"
155-
statisticDataProvider={
156-
new SimpleStatisticProvider({
157-
statisticId: 'avg_fps',
158-
statisticParentId: new RegExp(`client_frame_timings_${selectedClient}`),
159-
})
160-
}
161-
statisticOptions={{
162-
type: StatisticType.Absolute,
163-
yAxisType: YAxisType.Absolute,
164-
tickRange: 20 * 10,
165-
}}
166-
/>
167-
<MinecraftStatisticStackedLineChart
168-
title="Frame Timings"
169-
yLabel="Frame Times (ms)"
170-
statisticDataProvider={
171-
new MultipleStatisticProvider({
172-
statisticIds: [
173-
'avg_server_simtick_time',
174-
'avg_client_simtick_time',
175-
'avg_begin_frame_time',
176-
'avg_input_time',
177-
'avg_render_time',
178-
'avg_end_frame_time',
179-
],
180-
statisticParentId: new RegExp(`client_frame_timings_${selectedClient}`),
181-
})
182-
}
183-
catageoryLabels={{
184-
avg_server_simtick_time: 'Server Simtick Time',
185-
avg_client_simtick_time: 'Client Simtick Time',
186-
avg_begin_frame_time: 'Begin Frame Time',
187-
avg_input_time: 'Input Time',
188-
avg_render_time: 'Render Time',
189-
avg_end_frame_time: 'End Frame Time',
190-
}}
191-
statisticResolver={createStatResolver({
192-
type: StatisticType.Absolute,
193-
tickRange: 20 * 10,
194-
yAxisType: YAxisType.Absolute,
195-
valueScalar: 1 / 1000,
196-
})}
197-
/>
198-
</VSCodePanelView>
199-
<VSCodePanelView id="view-5">
200-
<div style={{ flexDirection: 'column' }}>
201-
{statPrefabs.packetsReceivedLineChart.reactNode}
202-
{statPrefabs.packetsReceivedStackedLineChart.reactNode}
203-
</div>
204-
<div style={{ flexDirection: 'column' }}>
205-
{statPrefabs.packetsSentLineChart.reactNode}
206-
{statPrefabs.packetsSentStackedLineChart.reactNode}
207-
</div>
208-
</VSCodePanelView>
209-
<VSCodePanelView id="view-6">
210-
{statPrefabs.packetDataReceived.reactNode}
211-
{statPrefabs.packetDataSent.reactNode}
212-
</VSCodePanelView>
213-
<VSCodePanelView id="view-7">
214-
<StatGroupSelectionBox
215-
labelName="Script Plugin"
216-
statParentId="handle_counts"
217-
onChange={handlePluginSelection}
218-
/>
219-
<MinecraftStatisticLineChart
220-
title="Entity Handles"
221-
yLabel="Number of Entities"
222-
statisticDataProvider={
223-
new SimpleStatisticProvider({
224-
statisticId: 'entity',
225-
statisticParentId: new RegExp(`handle_counts_${selectedPlugin}`),
226-
})
227-
}
228-
statisticOptions={{
229-
type: StatisticType.Absolute,
230-
yAxisType: YAxisType.Absolute,
231-
tickRange: 20 * 30, // About 30 seconds
232-
}}
233-
/>
234-
<MinecraftStatisticLineChart
235-
title="Entity Changes"
236-
yLabel="Difference in Number of Entities"
237-
statisticDataProvider={
238-
new SimpleStatisticProvider({
239-
statisticId: 'entity',
240-
statisticParentId: new RegExp(`handle_counts_${selectedPlugin}`),
241-
})
242-
}
243-
statisticOptions={{
244-
type: StatisticType.Difference,
245-
yAxisType: YAxisType.Mirrored,
246-
tickRange: 20 * 30, // About 30 seconds
247-
}}
248-
/>
249-
</VSCodePanelView>
250-
<VSCodePanelView id="view-8">
251-
<StatGroupSelectionBox
252-
labelName="Script Plugin"
253-
statParentId="fine_grained_subscribers"
254-
onChange={handlePluginSelection}
255-
/>
256-
<MinecraftStatisticStackedBarChart
257-
title="Signal Subscribers"
258-
yLabel="Number of World and System Before and After Event Subscribers Broken Down By Signal"
259-
statisticDataProvider={
260-
new MultipleStatisticProvider({
261-
statisticParentId: new RegExp(`fine_grained_subscribers_${selectedPlugin}`),
262-
valuesFilter: constructSubscribedSignalFilter(),
263-
})
264-
}
265-
statisticResolver={createStatResolver({
266-
type: StatisticType.Absolute,
267-
tickRange: 20 * 15 /* About 15 seconds */,
268-
yAxisType: YAxisType.Absolute,
269-
})}
270-
/>
271-
</VSCodePanelView>
272-
<VSCodePanelView id="view-9">
273-
<MinecraftDynamicPropertiesTable
274-
statisticDataProviders={
275-
new SimpleStatisticProvider({
276-
statisticParentId: /dynamic_property_values*/,
277-
statisticId: 'consolidated_data',
278-
})
279-
}
280-
/>
281-
</VSCodePanelView>
102+
{tabPrefabs.map((tabPrefab, index) => (
103+
<VSCodePanelTab id={`tab-${index}`}>{tabPrefab.name}</VSCodePanelTab>
104+
))}
105+
{tabPrefabs.map((tabPrefab, index) => (
106+
<VSCodePanelView id={`view-${index}`} style={{ flexDirection: 'column' }}>
107+
{tabPrefab.dataSource === TabPrefabDataSource.Client ? (
108+
<StatGroupSelectionBox
109+
labelName="Client"
110+
statParentId="client_stats"
111+
onChange={handleClientSelection}
112+
/>
113+
) : (
114+
<div />
115+
)}
116+
{tabPrefab.dataSource === TabPrefabDataSource.ServerScript ? (
117+
<StatGroupSelectionBox
118+
labelName="Script Plugin"
119+
statParentId="handle_counts"
120+
onChange={handlePluginSelection}
121+
/>
122+
) : (
123+
<div />
124+
)}
125+
{tabPrefab.content({ selectedClient, selectedPlugin })}
126+
</VSCodePanelView>
127+
))}
282128
</VSCodePanels>
283129
</main>
284130
);

‎webview-ui/src/diagnostics_panel/CustomizedStatisticPane.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright (C) Microsoft Corporation. All rights reserved.
22

33
import { VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react';
4-
import * as statPrefabs from './StatisticPrefabs';
4+
import * as statPrefabs from './prefabs/StatisticPrefab';
55

66
type Options = {
77
name: string;

0 commit comments

Comments
 (0)