feat(diag): Save and restore current diagnostics tab when panel leaves and enters focus. (#238)

Author: chmeyer-ms

webview-ui/src/diagnostics_panel/App.tsx

@@ -3,7 +3,7 @@
 import { VSCodePanelTab, VSCodePanelView, VSCodePanels } from '@vscode/webview-ui-toolkit/react';
 import './App.css';
 import { StatGroupSelectionBox } from './controls/StatGroupSelectionBox';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { StatisticType, YAxisType, createStatResolver } from './StatisticResolver';
 import MinecraftStatisticLineChart from './controls/MinecraftStatisticLineChart';
 import MinecraftStatisticStackedLineChart from './controls/MinecraftStatisticStackedLineChart';
@@ -12,6 +12,16 @@ import { MultipleStatisticProvider, SimpleStatisticProvider, StatisticUpdatedMes
 
 import * as statPrefabs from './StatisticPrefabs';
 
+const vscode = acquireVsCodeApi();
+
+interface TabState {
+    tabId: string;
+}
+
+interface VSCodePanelsChangeEvent extends Event {
+    target: EventTarget & { activeid: string };
+}
+
 // Filter out events with a value of zero that haven't been previously subscribed to
 function constructSubscribedSignalFilter() {
     const nonFilteredValues: string[] = [];
@@ -31,22 +41,48 @@ function constructSubscribedSignalFilter() {
 function App() {
     // State
     const [selectedPlugin, setSelectedPlugin] = useState<string>('no_plugin_selected');
+    const [selectedClient, setSelectedClient] = useState<string>('no_client_selected');
+    const [currentTab, setCurrentTab] = useState<string>();
+
+    // Load initial state from vscode
+    useEffect(() => {
+        const tabState = vscode.getState() as TabState;
+        if (tabState && tabState.tabId) {
+            setCurrentTab(tabState.tabId);
+        }
+    }, []);
+
+    // Save current tab state whenever it changes
+    useEffect(() => {
+        if (currentTab) {
+            const tabState: TabState = { tabId: currentTab };
+            vscode.setState(tabState);
+        }
+    }, [currentTab]);
 
     const handlePluginSelection = useCallback((pluginSelectionId: string) => {
         console.log(`Selected Plugin: ${pluginSelectionId}`);
         setSelectedPlugin(() => pluginSelectionId);
     }, []);
 
-    const [selectedClient, setSelectedClient] = useState<string>('no_client_selected');
-
     const handleClientSelection = useCallback((clientSelectionId: string) => {
         console.log(`Selected Client: ${clientSelectionId}`);
         setSelectedClient(() => clientSelectionId);
     }, []);
 
+    const handlePanelChange = useCallback((event: VSCodePanelsChangeEvent): void => {
+        const newTabId = event.target.activeid;
+        if (newTabId) {
+            setCurrentTab(newTabId);
+        }
+    }, []);
+
     return (
         <main>
-            <VSCodePanels>
+            <VSCodePanels 
+                activeid={currentTab}
+                onChange={event => handlePanelChange(event as VSCodePanelsChangeEvent)}
+            >
                 <VSCodePanelTab id="tab-1">World</VSCodePanelTab>
                 <VSCodePanelTab id="tab-2">Memory</VSCodePanelTab>
                 <VSCodePanelTab id="tab-3">Server Timing</VSCodePanelTab>