ui: Nuqs for state management

ui/packages/app/web/package.json

@@ -44,6 +44,7 @@
     "immer": "9.0.21",
     "isomorphic-unfetch": "3.1.0",
     "lodash.debounce": "4.0.8",
+    "nuqs": "^2.4.1",
     "lodash.throttle": "^4.1.1",
     "moment": "2.30.1",
     "postcss": "8.5.8",

ui/packages/app/web/src/App.tsx

@@ -11,6 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {NuqsAdapter} from 'nuqs/adapters/react-router/v6';
 import {BrowserRouter, Navigate, Route, Routes} from 'react-router-dom';
 import {PersistGate} from 'redux-persist/integration/react';
 
@@ -68,18 +69,20 @@ const App = () => {
     <Provider store={reduxStore}>
       <PersistGate loading={null} persistor={persistor}>
         <BrowserRouter basename={getBasename()}>
-          <QueryClientProvider client={queryClient}>
-            <ThemeProvider>
-              <Header />
-              <Routes>
-                <Route path="/" element={<HomePage />} />
-                <Route path="/targets" element={<TargetsPage />} />
-                <Route path="/settings" element={<SettingsPage />} />
-                <Route path="/PATH_PREFIX_VAR" element={<Navigate to="/" replace />} />
-                <Route path="*" element={<Component404 />} />
-              </Routes>
-            </ThemeProvider>
-          </QueryClientProvider>
+          <NuqsAdapter>
+            <QueryClientProvider client={queryClient}>
+              <ThemeProvider>
+                <Header />
+                <Routes>
+                  <Route path="/" element={<HomePage />} />
+                  <Route path="/targets" element={<TargetsPage />} />
+                  <Route path="/settings" element={<SettingsPage />} />
+                  <Route path="/PATH_PREFIX_VAR" element={<Navigate to="/" replace />} />
+                  <Route path="*" element={<Component404 />} />
+                </Routes>
+              </ThemeProvider>
+            </QueryClientProvider>
+          </NuqsAdapter>
         </BrowserRouter>
       </PersistGate>
     </Provider>

ui/packages/app/web/src/pages/index.tsx

@@ -17,8 +17,8 @@ import {GrpcWebFetchTransport} from '@protobuf-ts/grpcweb-transport';
 import {useLocation, useNavigate} from 'react-router-dom';
 
 import {QueryServiceClient} from '@parca/client';
-import {ParcaContextProvider, Spinner, URLStateProvider} from '@parca/components';
-import {DEFAULT_PROFILE_EXPLORER_PARAM_VALUES, ProfileExplorer} from '@parca/profile';
+import {ParcaContextProvider, Spinner} from '@parca/components';
+import {ProfileExplorer} from '@parca/profile';
 import {selectDarkMode, useAppSelector} from '@parca/store';
 import {convertToQueryParams} from '@parca/utilities';
 
@@ -52,24 +52,19 @@ const Profiles = () => {
   );
 
   return (
-    <URLStateProvider
-      navigateTo={navigateTo}
-      paramPreferences={DEFAULT_PROFILE_EXPLORER_PARAM_VALUES}
+    <ParcaContextProvider
+      value={{
+        Spinner,
+        queryServiceClient: queryClient,
+        navigateTo,
+        isDarkMode,
+        enableSandwichView: true,
+      }}
     >
-      <ParcaContextProvider
-        value={{
-          Spinner,
-          queryServiceClient: queryClient,
-          navigateTo,
-          isDarkMode,
-          enableSandwichView: true,
-        }}
-      >
-        <div className="bg-white dark:bg-gray-900 p-3">
-          <ProfileExplorer queryClient={queryClient} navigateTo={navigateTo} />
-        </div>
-      </ParcaContextProvider>
-    </URLStateProvider>
+      <div className="bg-white dark:bg-gray-900 p-3">
+        <ProfileExplorer queryClient={queryClient} navigateTo={navigateTo} />
+      </div>
+    </ParcaContextProvider>
   );
 };
 

ui/packages/shared/components/package.json

@@ -36,6 +36,7 @@
     "d3-selection": "3.0.0",
     "graphviz-wasm": "3.0.2",
     "lodash": "^4.17.21",
+    "nuqs": "^2.4.1",
     "moment-timezone": "^0.6.0",
     "react-datepicker": "6.9.0",
     "react-popper": "^2.3.0",

ui/packages/shared/components/src/ParcaContext/index.tsx

@@ -101,6 +101,7 @@ interface Props {
   flamechartHelpText?: ReactNode;
   additionalMetricsGraph?: (props: AdditionalMetricsGraphProps) => ReactNode;
   enableFlamechartFiltering?: boolean;
+  defaultDashboardItems?: string[];
 }
 
 export const defaultValue: Props = {
@@ -129,6 +130,7 @@ export const defaultValue: Props = {
   enableSandwichView: false,
   isDarkMode: false,
   preferencesModal: false,
+  defaultDashboardItems: ['flamegraph'],
 };
 
 const ParcaContext = createContext<Props>(defaultValue);