feat: Added commands and payload size to editor network stats (#354)

This PR adds support for showing action buttons under
`MinecraftMultiColumnStatisticTable` header and support for running
Minecraft commands from `diagnostics_panel`. Also added actions to
control Editor network stats view and columns to display Sent/Received
payload total sizes.

<img width="1543" height="272" alt="image"
src="https://github.com/user-attachments/assets/58481f38-a760-4447-93b0-288c3cba6629"
/>

Author: eserkokturk-skyboxlabs

src/extension.ts

@@ -79,7 +79,7 @@ export function activate(context: vscode.ExtensionContext): void {
     });
 
     const liveDiagnosticsCommand = vscode.commands.registerCommand('minecraft-debugger.liveDiagnostics', () => {
-        MinecraftDiagnosticsPanel.render(context.extensionUri, liveStatsProvider);
+        MinecraftDiagnosticsPanel.render(context.extensionUri, liveStatsProvider, eventEmitter);
     });
 
     const replayDiagnosticsCommand = vscode.commands.registerCommand(
@@ -98,8 +98,8 @@ export function activate(context: vscode.ExtensionContext): void {
                 return;
             }
             const replayStats = new ReplayStatsProvider(fileUri[0].fsPath);
-            MinecraftDiagnosticsPanel.render(context.extensionUri, replayStats);
-        }
+            MinecraftDiagnosticsPanel.render(context.extensionUri, replayStats, eventEmitter);
+        },
     );
 
     // Add commands to the extension context

src/panels/minecraft-diagnostics.ts

@@ -1,6 +1,7 @@
 // Copyright (C) Microsoft Corporation.  All rights reserved.
 
 import { Disposable, Webview, WebviewPanel, window, Uri, ViewColumn } from 'vscode';
+import { EventEmitter } from 'stream';
 import { getUri } from '../utilities/getUri';
 import { getNonce } from '../utilities/getNonce';
 import { StatData, StatsListener, StatsProvider } from '../stats/stats-provider';
@@ -12,10 +13,17 @@ export class MinecraftDiagnosticsPanel {
     private _disposables: Disposable[] = [];
     private _statsTracker: StatsProvider;
     private _statsCallback: StatsListener | undefined = undefined;
-
-    private constructor(panel: WebviewPanel, extensionUri: Uri, statsTracker: StatsProvider) {
+    private _eventEmitter: EventEmitter;
+
+    private constructor(
+        panel: WebviewPanel,
+        extensionUri: Uri,
+        statsTracker: StatsProvider,
+        eventEmitter: EventEmitter,
+    ) {
         this._panel = panel;
         this._statsTracker = statsTracker;
+        this._eventEmitter = eventEmitter;
 
         // Set an event listener to listen for when the panel is disposed (i.e. when the user closes
         // the panel or when the panel is closed programmatically)
@@ -54,6 +62,11 @@ export class MinecraftDiagnosticsPanel {
                 case 'speed':
                     this._statsTracker.setSpeed(message.speed);
                     break;
+                case 'run-minecraft-command':
+                    if (message.command && message.command.trim() !== '') {
+                        this._eventEmitter.emit('run-minecraft-command', message.command);
+                    }
+                    break;
                 default:
                     console.error('Unknown message type:', message.type);
                     break;
@@ -101,7 +114,7 @@ export class MinecraftDiagnosticsPanel {
         this._statsTracker.addStatListener(this._statsCallback);
     }
 
-    public static render(extensionUri: Uri, statsTracker: StatsProvider): void {
+    public static render(extensionUri: Uri, statsTracker: StatsProvider, eventEmitter: EventEmitter): void {
         const statsTrackerId = statsTracker.uniqueId;
         const existingPanel = MinecraftDiagnosticsPanel.activeDiagnosticsPanels.find(
             panel => panel._statsTracker.uniqueId === statsTrackerId
@@ -123,7 +136,7 @@ export class MinecraftDiagnosticsPanel {
                 }
             );
             MinecraftDiagnosticsPanel.activeDiagnosticsPanels.push(
-                new MinecraftDiagnosticsPanel(panel, extensionUri, statsTracker)
+                new MinecraftDiagnosticsPanel(panel, extensionUri, statsTracker, eventEmitter),
             );
         }
     }

webview-ui/src/diagnostics_panel/App.css

@@ -87,6 +87,14 @@ main {
   fill: var(--vscode-editor-background);
 }
 
+.minecraft-statistic-table-actions {
+  flex-direction: row;
+  display: flex;
+  width: 100%;
+  margin-bottom: 10px;
+  gap: 5px;
+}
+
 .minecraft-statistic-table-container {
   flex-direction: row;
   display: flex;

webview-ui/src/diagnostics_panel/App.tsx

@@ -47,6 +47,10 @@ const onResume = () => {
     vscode.postMessage({ type: 'resume' });
 };
 
+const onRunCommand = (command: string) => {
+    vscode.postMessage({ type: 'run-minecraft-command', command: command });
+};
+
 function App() {
     const [selectedPlugin, setSelectedPlugin] = useState<string>('');
     const [selectedClient, setSelectedClient] = useState<string>('');
@@ -122,7 +126,7 @@ function App() {
                         ) : (
                             <div />
                         )}
-                        {tabPrefab.content({ selectedClient, selectedPlugin })}
+                        {tabPrefab.content({ selectedClient, selectedPlugin, onRunCommand })}
                     </VSCodePanelView>
                 ))}
             </VSCodePanels>

webview-ui/src/diagnostics_panel/controls/MinecraftMultiColumnStatisticTable.tsx

@@ -9,6 +9,7 @@ import {
     VSCodeDataGridCell,
     VSCodeDropdown,
     VSCodeOption,
+    VSCodeButton,
 } from '@vscode/webview-ui-toolkit/react';
 
 export enum MinecraftMultiColumnStatisticTableSortOrder {
@@ -44,6 +45,7 @@ type MinecraftMultiColumnStatisticTableProps = {
     valueLabels: string[]; // Array of labels for value columns
     prettifyNames?: boolean; // Whether to format packet names (camelCase -> Camel Case) or keep original format
     columnWidths?: string[]; // Optional array of column widths (first is key column, rest are value columns)
+    actions?: { label: string; onClick: () => void }[]; // Optional actions with labels and commands to run on click
 };
 
 const sortOrderOptions = [
@@ -113,6 +115,7 @@ export default function MinecraftMultiColumnStatisticTable({
     valueLabels,
     prettifyNames = true, // Default to prettifying names for backward compatibility
     columnWidths,
+    actions,
 }: MinecraftMultiColumnStatisticTableProps): JSX.Element {
     // states
     const [data, setData] = useState<MultiColumnTrackedStat[]>([]);
@@ -304,6 +307,15 @@ export default function MinecraftMultiColumnStatisticTable({
     return (
         <div>
             <h2>{title}</h2>
+            {actions?.length && (
+                <div className="minecraft-statistic-table-actions">
+                    {actions.map(action => (
+                        <VSCodeButton key={action.label} onClick={action.onClick}>
+                            {action.label}
+                        </VSCodeButton>
+                    ))}
+                </div>
+            )}
             <div className="minecraft-statistic-table-container">
                 <div className="minecraft-statistic-table-sort-container">
                     <label htmlFor="sort-order">Sort Order</label>

webview-ui/src/diagnostics_panel/prefabs/TabPrefab.ts

@@ -3,6 +3,7 @@ import { StatisticPrefab } from './StatisticPrefab';
 export type TabPrefabParams = {
     selectedClient: string;
     selectedPlugin: string;
+    onRunCommand: (command: string) => void;
 };
 
 export enum TabPrefabDataSource {

webview-ui/src/diagnostics_panel/prefabs/tabs/EditorNetworkStats.tsx

@@ -1,36 +1,63 @@
+import { useMemo } from 'react';
 import { MultipleStatisticProvider } from '../../StatisticProvider';
 import { TabPrefab, TabPrefabDataSource } from '../TabPrefab';
 import MinecraftMultiColumnStatisticTable from '../../controls/MinecraftMultiColumnStatisticTable';
 import { createStatResolver, StatisticType, YAxisType } from '../../StatisticResolver';
 
+function EditorNetworkStatsContent(props: { onRunCommand: (command: string) => void }) {
+    const actions = useMemo(
+        () => [
+            { label: 'Reset', onClick: () => props.onRunCommand(getPayloadMetricsCommandStr('clear')) },
+            { label: 'Pause', onClick: () => props.onRunCommand(getPayloadMetricsCommandStr('pause')) },
+            {
+                label: 'Resume',
+                onClick: () => props.onRunCommand(getPayloadMetricsCommandStr('resume')),
+            },
+        ],
+        [props.onRunCommand],
+    );
+
+    return (
+        <div>
+            <MinecraftMultiColumnStatisticTable
+                title="Editor Network Packet Statistics"
+                statisticDataProvider={
+                    new MultipleStatisticProvider({
+                        statisticParentId: 'editor_network_stats',
+                        statisticIds: ['consolidated_data'],
+                    })
+                }
+                statisticResolver={createStatResolver({
+                    type: StatisticType.Absolute,
+                    yAxisType: YAxisType.Absolute,
+                    tickRange: 20 * 15, // About 15 seconds
+                })}
+                actions={actions}
+                keyLabel="Packet Type"
+                valueLabels={[
+                    'Sent Count',
+                    'Received Count',
+                    'Sent Total Size',
+                    'Received Total Size',
+                    'Min Size',
+                    'Max Size',
+                ]}
+                prettifyNames={false} // Keep original packet name format
+                defaultSortColumn="value_0" // Sort by "Sent Count" column by default
+                columnWidths={['400px', '80px', '80px', '80px', '80px', '80px', '80px']} // Custom column widths
+            />
+        </div>
+    );
+}
+
+function getPayloadMetricsCommandStr(command: 'clear' | 'pause' | 'resume'): string {
+    return `/editorservertest payloadmetrics ${command}`;
+}
+
 const statsTab: TabPrefab = {
     name: 'Editor Network Stats',
     dataSource: TabPrefabDataSource.Server,
-    content: () => {
-        return (
-            <div>
-                <MinecraftMultiColumnStatisticTable
-                    title="Editor Network Packet Statistics"
-                    statisticDataProvider={
-                        new MultipleStatisticProvider({
-                            statisticParentId: 'editor_network_stats',
-                            statisticIds: ['consolidated_data'],
-                        })
-                    }
-                    statisticResolver={createStatResolver({
-                        type: StatisticType.Absolute,
-                        yAxisType: YAxisType.Absolute,
-                        tickRange: 20 * 15, // About 15 seconds
-                    })}
-                    keyLabel="Packet Type"
-                    valueLabels={['Sent Count', 'Received Count', 'Min Size', 'Max Size']}
-                    prettifyNames={false} // Keep original packet name format
-                    defaultSortColumn="value_0" // Sort by "Sent Count" column by default
-                    columnWidths={['400px', '80px', '80px', '80px', '80px']} // Custom column widths
-                />
-            </div>
-        );
-    },
+    content: props => <EditorNetworkStatsContent onRunCommand={props.onRunCommand} />,
 };
 
 export default statsTab;