feat(diagnostics): auto select the first element in the client or plu…

…gin dropdowns when opening the diagnostics panel. (#244) Dropdown disabled until at least one option has been determined. Dropdown auto-selects the first item in the list. fixes #144
Mojang · Oct 23, 2024 · af23871 · af23871
1 parent 2a289e4
commit af23871
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/webview-ui/src/diagnostics_panel/App.tsx b/webview-ui/src/diagnostics_panel/App.tsx
@@ -40,8 +40,8 @@ function constructSubscribedSignalFilter() {
 
 function App() {
     // State
-    const [selectedPlugin, setSelectedPlugin] = useState<string>('no_plugin_selected');
-    const [selectedClient, setSelectedClient] = useState<string>('no_client_selected');
+    const [selectedPlugin, setSelectedPlugin] = useState<string>('');
+    const [selectedClient, setSelectedClient] = useState<string>('');
     const [currentTab, setCurrentTab] = useState<string>();
 
     // Load initial state from vscode
@@ -117,7 +117,6 @@ function App() {
                 <VSCodePanelView id="view-4" style={{ flexDirection: 'column' }}>
                     <StatGroupSelectionBox
                         labelName="Client"
-                        defaultDropdownId="no_client_selected"
                         statParentId="client_frame_timings"
                         onChange={handleClientSelection}
                     />
@@ -185,7 +184,6 @@ function App() {
                 <VSCodePanelView id="view-7">
                     <StatGroupSelectionBox
                         labelName="Script Plugin"
-                        defaultDropdownId="no_plugin_selected"
                         statParentId="handle_counts"
                         onChange={handlePluginSelection}
                     />
@@ -223,7 +221,6 @@ function App() {
                 <VSCodePanelView id="view-8">
                     <StatGroupSelectionBox
                         labelName="Script Plugin"
-                        defaultDropdownId="no_plugin_selected"
                         statParentId="fine_grained_subscribers"
                         onChange={handlePluginSelection}
                     />

diff --git a/webview-ui/src/diagnostics_panel/controls/StatGroupSelectionBox.tsx b/webview-ui/src/diagnostics_panel/controls/StatGroupSelectionBox.tsx
@@ -5,7 +5,6 @@ import { VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react';
 
 type SelectionBoxProps = {
     labelName: string;
-    defaultDropdownId: string;
     statParentId: string;
     onChange: (selectedGroupId: string) => void;
 };
@@ -15,9 +14,10 @@ interface StatGroupEntry {
     name: string;
 }
 
-export function StatGroupSelectionBox({ labelName, defaultDropdownId, statParentId, onChange }: SelectionBoxProps) {
+export function StatGroupSelectionBox({ labelName, statParentId, onChange }: SelectionBoxProps) {
     // the groups directly under the 'statParentId'
-    const [groups, setGroup] = useState<StatGroupEntry[]>([{ id: defaultDropdownId, name: 'n/a' }]);
+    const [groups, setGroup] = useState<StatGroupEntry[]>([]);
+    const [selectedGroupId, setSelectedGroupId] = useState<string | undefined>(undefined);
 
     const _onChange = useCallback(
         (e: Event | React.FormEvent<HTMLElement>): void => {
@@ -27,6 +27,10 @@ export function StatGroupSelectionBox({ labelName, defaultDropdownId, statParent
         [groups]
     );
 
+    useEffect(() => {
+        onChange(selectedGroupId || "");
+    }, [selectedGroupId]);
+
     //draws chart
     useEffect(() => {
         const eventHandler = (e: MessageEvent): void => {
@@ -40,14 +44,15 @@ export function StatGroupSelectionBox({ labelName, defaultDropdownId, statParent
                     }
                     // Add it to the list
                     setGroup(prevState => {
-                        // See if the group is not in the list
-                        if (
-                            prevState === undefined ||
-                            prevState?.findIndex(x => {
-                                return x.id === msg.data.id;
-                            }) === -1
-                        ) {
-                            return [...(prevState ?? []), { id: msg.data.id, name: msg.data.name }];
+                        const isNewGroup = !prevState || prevState.findIndex(x => x.id === msg.data.id) === -1;
+                        if (isNewGroup) {
+                            // auto select the first group we get if nothing selected
+                            if (!selectedGroupId) {
+                                setSelectedGroupId(msg.data.id);
+                            }
+                            // add new group to end of list
+                            const newState = [...(prevState ?? []), { id: msg.data.id, name: msg.data.name }];
+                            return newState;
                         }
                         return prevState;
                     });
@@ -66,10 +71,12 @@ export function StatGroupSelectionBox({ labelName, defaultDropdownId, statParent
     return (
         <div className="dropdown-container">
             <label htmlFor="my-dropdown">{labelName}</label>
-            <VSCodeDropdown id="my-dropdown" onChange={_onChange}>
-                {(groups ?? []).map(option => {
-                    return <VSCodeOption key={option.id}>{option.name}</VSCodeOption>;
-                })}
+            <VSCodeDropdown id="my-dropdown" onChange={_onChange} disabled={groups.length === 0}>
+                {(groups ?? []).map(option => (
+                    <VSCodeOption key={option.id}>
+                        {option.name}
+                    </VSCodeOption>
+                ))}
             </VSCodeDropdown>
         </div>
     );