feat: Added search box to dynamic properties tab, added script search box support

src/diagnostics-schema.ts

@@ -25,6 +25,7 @@ export interface DiagnosticsTabDescriptor {
     target_value?: number;
     key_label?: string;
     value_labels?: string[];
+    show_search_box?: boolean;
     statistic_id?: string;
     statistic_ids?: string[];
     is_empty_tab?: boolean;

src/table-search.test.ts

@@ -0,0 +1,29 @@
+// Copyright (C) Microsoft Corporation.  All rights reserved.
+
+import { describe, expect, it } from 'vitest';
+import { matchesTableSearch } from './table-search';
+
+describe('matchesTableSearch', () => {
+    const cells = ['Player Count', 'Active', '12.0'];
+
+    it('shows all rows for an empty or whitespace-only query', () => {
+        expect(matchesTableSearch('', cells)).toBe(true);
+        expect(matchesTableSearch('   ', cells)).toBe(true);
+        expect(matchesTableSearch('', [''])).toBe(true);
+    });
+
+    it('matches keys and values without regard to case', () => {
+        expect(matchesTableSearch('PLAYER', cells)).toBe(true);
+        expect(matchesTableSearch('active', cells)).toBe(true);
+        expect(matchesTableSearch('12.0', cells)).toBe(true);
+    });
+
+    it('ignores surrounding query whitespace', () => {
+        expect(matchesTableSearch('  count  ', cells)).toBe(true);
+    });
+
+    it('does not match unrelated rows or across cell boundaries', () => {
+        expect(matchesTableSearch('missing', cells)).toBe(false);
+        expect(matchesTableSearch('CountActive', cells)).toBe(false);
+    });
+});

src/table-search.ts

@@ -0,0 +1,6 @@
+// Copyright (C) Microsoft Corporation.  All rights reserved.
+
+export function matchesTableSearch(query: string, cells: string[]): boolean {
+    const normalizedQuery = query.trim().toLowerCase();
+    return cells.some(cell => cell.toLowerCase().includes(normalizedQuery));
+}

webview-ui/src/diagnostics_panel/DynamicTab.tsx

@@ -139,6 +139,7 @@ export default function DynamicTab({ descriptor, selectedClient, selectedPlugin
                     valueLabel={descriptor.y_label ?? 'Value'}
                     statisticDataProvider={provider}
                     statisticResolver={resolver}
+                    showSearchBox={descriptor.show_search_box}
                 />
             );
 
@@ -150,6 +151,7 @@ export default function DynamicTab({ descriptor, selectedClient, selectedPlugin
                     valueLabels={descriptor.value_labels ?? ['Value']}
                     statisticDataProvider={provider as MultipleStatisticProvider}
                     statisticResolver={resolver}
+                    showSearchBox={descriptor.show_search_box}
                 />
             );
 

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

@@ -1,8 +1,14 @@
 // Copyright (C) Microsoft Corporation.  All rights reserved.
 
 import { useEffect, useState } from 'react';
-import { VSCodeDataGrid, VSCodeDataGridCell, VSCodeDataGridRow } from '@vscode/webview-ui-toolkit/react';
+import {
+    VSCodeDataGrid,
+    VSCodeDataGridCell,
+    VSCodeDataGridRow,
+    VSCodeTextField,
+} from '@vscode/webview-ui-toolkit/react';
 import { StatisticProvider, StatisticUpdatedMessage } from '../StatisticProvider';
+import { matchesTableSearch } from '../../../../src/table-search';
 
 function updateCachedData(propertyCache: Map<string, string>, data: string[][]): boolean {
     let hasChanges = false;
@@ -31,63 +37,73 @@ function updateCachedData(propertyCache: Map<string, string>, data: string[][]):
     return hasChanges;
 }
 
-export function MinecraftDynamicPropertiesTable(statisticDataProviders: Record<string, StatisticProvider>) {
+type MinecraftDynamicPropertiesTableProps = {
+    statisticDataProviders: StatisticProvider;
+    showSearchBox?: boolean;
+};
+
+export function MinecraftDynamicPropertiesTable({
+    statisticDataProviders,
+    showSearchBox = false,
+}: MinecraftDynamicPropertiesTableProps) {
     // the groups directly under the 'statParentId'
     const [dynamicValueCache, setDynamicValueCache] = useState<Map<string, string>>(new Map<string, string>());
+    const [searchQuery, setSearchQuery] = useState('');
 
     //draws chart
     useEffect(() => {
-        const eventHandlersByName = new Map<string, (event: StatisticUpdatedMessage) => void>();
-
-        Object.keys(statisticDataProviders).forEach(statisticDataProviderName => {
-            const statsProvider = statisticDataProviders[statisticDataProviderName];
-            const eventHandler = (event: StatisticUpdatedMessage): void => {
-                // Update data with new data point
-                setDynamicValueCache((prevCache: Map<string, string>): Map<string, string> => {
-                    const propertyCache = new Map(prevCache);
-                    if (updateCachedData(propertyCache, event.children_string_values)) {
-                        return propertyCache;
-                    }
-
-                    return prevCache;
-                });
-            };
+        const eventHandler = (event: StatisticUpdatedMessage): void => {
+            // Update data with new data point
+            setDynamicValueCache((prevCache: Map<string, string>): Map<string, string> => {
+                const propertyCache = new Map(prevCache);
+                if (updateCachedData(propertyCache, event.children_string_values)) {
+                    return propertyCache;
+                }
 
-            statsProvider.registerWindowListener(window);
-            statsProvider.addSubscriber(eventHandler);
+                return prevCache;
+            });
+        };
 
-            eventHandlersByName.set(statisticDataProviderName, eventHandler);
-        });
+        statisticDataProviders.registerWindowListener(window);
+        statisticDataProviders.addSubscriber(eventHandler);
 
         // Remove old listener
         return () => {
-            Object.keys(statisticDataProviders).forEach(statisticDataProviderName => {
-                const statsProvider = statisticDataProviders[statisticDataProviderName];
-
-                const eventHandler = eventHandlersByName.get(statisticDataProviderName);
-                if (eventHandler) {
-                    statsProvider.removeSubscriber(eventHandler);
-                }
-                statsProvider.unregisterWindowListener(window);
-            });
+            statisticDataProviders.removeSubscriber(eventHandler);
+            statisticDataProviders.unregisterWindowListener(window);
         };
     }, [dynamicValueCache]);
+    const visibleProperties = Array.from(dynamicValueCache.entries()).filter(([name, value]) =>
+        matchesTableSearch(searchQuery, [name, value])
+    );
+
     return (
-        <VSCodeDataGrid id="my-grid">
-            <VSCodeDataGridRow rowType="header">
-                <VSCodeDataGridCell cellType="columnheader" gridColumn={'1'}>
-                    {'Name'}
-                </VSCodeDataGridCell>
-                <VSCodeDataGridCell cellType="columnheader" gridColumn={'2'}>
-                    {'Value'}
-                </VSCodeDataGridCell>
-            </VSCodeDataGridRow>
-            {Array.from(dynamicValueCache.entries()).map(event => (
-                <VSCodeDataGridRow>
-                    <VSCodeDataGridCell gridColumn={'1'}>{`${event[0]}`}</VSCodeDataGridCell>
-                    <VSCodeDataGridCell gridColumn={'2'}>{`${event[1]}`}</VSCodeDataGridCell>
+        <>
+            {showSearchBox && (
+                <VSCodeTextField
+                    value={searchQuery}
+                    placeholder="Search table"
+                    onInput={event => setSearchQuery((event.target as HTMLInputElement).value)}
+                >
+                    Search
+                </VSCodeTextField>
+            )}
+            <VSCodeDataGrid id="my-grid">
+                <VSCodeDataGridRow rowType="header">
+                    <VSCodeDataGridCell cellType="columnheader" gridColumn={'1'}>
+                        {'Name'}
+                    </VSCodeDataGridCell>
+                    <VSCodeDataGridCell cellType="columnheader" gridColumn={'2'}>
+                        {'Value'}
+                    </VSCodeDataGridCell>
                 </VSCodeDataGridRow>
-            ))}
-        </VSCodeDataGrid>
+                {visibleProperties.map(([name, value]) => (
+                    <VSCodeDataGridRow key={name}>
+                        <VSCodeDataGridCell gridColumn={'1'}>{name}</VSCodeDataGridCell>
+                        <VSCodeDataGridCell gridColumn={'2'}>{value}</VSCodeDataGridCell>
+                    </VSCodeDataGridRow>
+                ))}
+            </VSCodeDataGrid>
+        </>
     );
 }

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

@@ -10,7 +10,9 @@ import {
     VSCodeDropdown,
     VSCodeOption,
     VSCodeButton,
+    VSCodeTextField,
 } from '@vscode/webview-ui-toolkit/react';
+import { matchesTableSearch } from '../../../../src/table-search';
 
 export enum MinecraftMultiColumnStatisticTableSortOrder {
     Ascending,
@@ -59,6 +61,7 @@ type MinecraftMultiColumnStatisticTableProps = {
     rowAction?: MinecraftMultiColumnStatisticTableRowAction; // Optional per-row action button
     nonConsolidatedColumnResolver?: NonConsolidatedColumnResolver; // Maps split events to target columns for non-consolidated streams
     valueFormatter?: (value: string | number, columnIndex: number) => string; // Optional custom display formatter for cell values
+    showSearchBox?: boolean;
 };
 
 const sortOrderOptions = [
@@ -146,6 +149,7 @@ export default function MinecraftMultiColumnStatisticTable({
     rowAction,
     nonConsolidatedColumnResolver,
     valueFormatter,
+    showSearchBox = false
 }: MinecraftMultiColumnStatisticTableProps): JSX.Element {
     // Memoize sort column options to prevent unnecessary recreations
     const sortColumnOptions = useMemo(
@@ -158,6 +162,7 @@ export default function MinecraftMultiColumnStatisticTable({
 
     // states
     const [data, setData] = useState<MultiColumnTrackedStat[]>([]);
+    const [searchQuery, setSearchQuery] = useState('');
     const [selectedSortOrder, setSelectedSortOrder] =
         useState<MinecraftMultiColumnStatisticTableSortOrder>(defaultSortOrder);
     const [selectedSortType, setSelectedSortType] =
@@ -370,9 +375,31 @@ export default function MinecraftMultiColumnStatisticTable({
         prettifyNames,
     ]);
 
+    const visibleData = showSearchBox
+        ? data.filter(dataPoint => matchesTableSearch(searchQuery, [
+              dataPoint.category,
+              ...dataPoint.values.map((value, index) =>
+                  valueFormatter
+                      ? valueFormatter(value, index)
+                      : typeof value === 'number'
+                        ? value.toFixed(1)
+                        : value,
+              ),
+          ]))
+        : data;
+
     return (
         <div>
             <h2>{title}</h2>
+            {showSearchBox && (
+                <VSCodeTextField
+                    value={searchQuery}
+                    placeholder="Search table"
+                    onInput={event => setSearchQuery((event.target as HTMLInputElement).value)}
+                >
+                    Search
+                </VSCodeTextField>
+            )}
             {actions?.length && (
                 <div className="minecraft-statistic-table-actions">
                     {actions.map(action => (
@@ -464,7 +491,7 @@ export default function MinecraftMultiColumnStatisticTable({
                         </VSCodeDataGridCell>
                     )}
                 </VSCodeDataGridRow>
-                {data.map(dataPoint => (
+                {visibleData.map(dataPoint => (
                     <VSCodeDataGridRow key={dataPoint.category}>
                         <VSCodeDataGridCell
                             gridColumn="1"

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

@@ -9,7 +9,9 @@ import {
     VSCodeDataGridCell,
     VSCodeDropdown,
     VSCodeOption,
+    VSCodeTextField,
 } from '@vscode/webview-ui-toolkit/react';
+import { matchesTableSearch } from '../../../../src/table-search';
 
 export enum MinecraftStatisticTableSortOrder {
     Ascending,
@@ -30,6 +32,7 @@ type MinecraftStatisticTableProps = {
 
     keyLabel: string;
     valueLabel: string;
+    showSearchBox?: boolean;
 };
 
 const sortOrderOptions = [
@@ -50,9 +53,11 @@ export default function MinecraftStatisticTable({
     defaultSortType = MinecraftStatisticTableSortType.Numerical,
     keyLabel,
     valueLabel,
+    showSearchBox = false,
 }: MinecraftStatisticTableProps): JSX.Element {
     // states
     const [data, setData] = useState<TrackedStat[]>([]);
+    const [searchQuery, setSearchQuery] = useState('');
 
     const [selectedSortOrder, setSelectedSortOrder] = useState<MinecraftStatisticTableSortOrder>(defaultSortOrder);
     const [selectedSortType, setSelectedSortType] = useState<MinecraftStatisticTableSortType>(defaultSortType);
@@ -115,9 +120,25 @@ export default function MinecraftStatisticTable({
         };
     }, [statisticDataProvider, selectedSortOrder, selectedSortType]);
 
+    const visibleData = showSearchBox
+        ? data.filter(dataPoint => matchesTableSearch(searchQuery, [
+              dataPoint.category ?? '',
+              dataPoint.absoluteValue.toFixed(1),
+          ]))
+        : data;
+
     return (
         <div>
             <h2>{title}</h2>
+            {showSearchBox && (
+                <VSCodeTextField
+                    value={searchQuery}
+                    placeholder="Search table"
+                    onInput={event => setSearchQuery((event.target as HTMLInputElement).value)}
+                >
+                    Search
+                </VSCodeTextField>
+            )}
             <div className="minecraft-statistic-table-container">
                 <div className="minecraft-statistic-table-sort-container">
                     <label htmlFor="sort-order">Sort Order</label>
@@ -154,7 +175,7 @@ export default function MinecraftStatisticTable({
                         {valueLabel}
                     </VSCodeDataGridCell>
                 </VSCodeDataGridRow>
-                {data.map(dataPoint => (
+                {visibleData.map(dataPoint => (
                     <VSCodeDataGridRow key={dataPoint.category}>
                         <VSCodeDataGridCell gridColumn="1">{dataPoint.category}</VSCodeDataGridCell>
                         <VSCodeDataGridCell gridColumn="2">{dataPoint.absoluteValue.toFixed(1)}</VSCodeDataGridCell>

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

@@ -9,6 +9,7 @@ const statsTab: TabPrefab = {
         return (
             <div>
                 <MinecraftDynamicPropertiesTable
+                    showSearchBox={true}
                     statisticDataProviders={
                         new SimpleStatisticProvider({
                             statisticParentId: /dynamic_property_values*/,