wip

ui/packages/evidently-ui-lib/src/router-utils/hooks.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import {
+  type NavigateOptions,
   useFetchers,
   useLoaderData,
   useMatches,
@@ -24,7 +25,33 @@ export const useRouteParams = <
   const [searchParams, setSearchParams] = useSearchParams()
   const query = Object.fromEntries(searchParams) as K['loader']['query']
 
-  return { loaderData, params, query, setSearchParams }
+  /**
+   * @param newQuery Pass undefined as value to remove key
+   * @param navOpts
+   */
+  const setQuery = (newQuery: K['loader']['query'], navOpts?: NavigateOptions) => {
+    setSearchParams((p) => {
+      const undefinedKeys = Object.entries(newQuery)
+        .filter(([_, v]) => v === undefined || !v)
+        .map(([k]) => k)
+
+      // @ts-ignore this is actually type safe
+      const newQueryFiltered: Record<string, string> = Object.fromEntries(
+        Object.entries(newQuery).filter(([_, v]) => v)
+      )
+
+      for (const k of undefinedKeys) {
+        p.delete(k)
+      }
+
+      return {
+        ...Object.fromEntries(p),
+        ...newQueryFiltered
+      }
+    }, navOpts)
+  }
+
+  return { loaderData, params, query, setQuery }
 }
 
 export const useOnSubmitEnd = ({

ui/packages/evidently-ui-lib/src/router-utils/types.ts

@@ -103,7 +103,7 @@ export type MatchWithAction = Match<
 export type MatchWithLoader = Match<
   string,
   // biome-ignore lint/suspicious/noExplicitAny: fine
-  ProvideLoaderInfo<any, any>,
+  ProvideLoaderInfo<Partial<Record<string, string>>, any>,
   // biome-ignore lint/suspicious/noExplicitAny: fine
   any // any action
 >

ui/packages/evidently-ui-lib/src/router-utils/utils.tsx

@@ -12,7 +12,7 @@ import {
   Typography,
   type TypographyProps
 } from '@mui/material'
-import { Link as ReactRouterLink } from 'react-router-dom'
+import { Outlet, Link as ReactRouterLink } from 'react-router-dom'
 
 export type CrumbDefinition = { title?: string; param?: string; keyFromLoaderData?: string }
 
@@ -151,3 +151,16 @@ export const replaceParamsInLink = (paramsToReplace: Record<string, string>, pat
 
   return result
 }
+
+export function PrefixRoute<K extends string>({
+  prefix,
+  crumbTitle
+}: { prefix: K; crumbTitle: string }) {
+  return {
+    path: prefix,
+    Component: () => <Outlet />,
+    handle: {
+      crumb: { title: crumbTitle } satisfies CrumbDefinition
+    }
+  }
+}

ui/packages/evidently-ui-lib/src/utils/index.tsx

@@ -1,12 +1,12 @@
-export function formatDate(date: Date): string {
-  return (
-    `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}` +
-    `-${date.getDate().toString().padStart(2, '0')}` +
-    `T${date.getHours().toString().padStart(2, '0')}:${date
-      .getMinutes()
-      .toString()
-      .padStart(2, '0')}`
-  )
+export function formatDate(date: Date | null | undefined): string | undefined {
+  return !date
+    ? undefined
+    : `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}` +
+        `-${date.getDate().toString().padStart(2, '0')}` +
+        `T${date.getHours().toString().padStart(2, '0')}:${date
+          .getMinutes()
+          .toString()
+          .padStart(2, '0')}`
 }
 
 // https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html

ui/service/src/_routes/router.tsx

@@ -2,14 +2,17 @@ import { createBrowserRouter } from 'evidently-ui-lib/shared-dependencies/react-
 
 import type { RouteExtended } from 'evidently-ui-lib/router-utils/types'
 
-import { decorateAllRoutes, decorateTopLevelRoutes } from 'evidently-ui-lib/router-utils/utils'
+import {
+  PrefixRoute,
+  decorateAllRoutes,
+  decorateTopLevelRoutes
+} from 'evidently-ui-lib/router-utils/utils'
 
 // It's important to import `SnapshotIdLazy` before `DashboardLazy`. Affects bundle chunks
 import { SnapshotIdLazy } from './src/snapshot-view/import'
 
 import { DashboardLazy } from './src/dashboard/import'
 
-import { PrefixRoute } from './src/_prefix'
 import { Home } from './src/home/import'
 import { Project } from './src/project/import'
 import { ProjectsList } from './src/projects-list/import'

ui/service/src/_routes/src/dashboard/dashboard-main.tsx

@@ -42,8 +42,7 @@ export const loaderSpecial = ({
 }
 
 export const Component = () => {
-  const { loaderData: data, query, setSearchParams } = useRouteParams<CurrentRoute>()
-  type QueryParams = typeof query
+  const { loaderData: data, query, setQuery } = useRouteParams<CurrentRoute>()
 
   const dateRange = getDataRange(data)
 
@@ -52,27 +51,18 @@ export const Component = () => {
       dateFrom: getValidDate(query.timestamp_start) || dateRange.minDate,
       dateTo: getValidDate(query.timestamp_end) || dateRange.maxDate
     },
-    onDebounce: (newDate) =>
-      setSearchParams(
-        (p) => {
-          p.delete('timestamp_start' satisfies keyof QueryParams)
-          p.delete('timestamp_end' satisfies keyof QueryParams)
-
-          const [from, to] = [
-            getValidDate(newDate.dateFrom)?.toDate(),
-            getValidDate(newDate.dateTo)?.toDate()
-          ]
-
-          const newSearchParams = {
-            ...Object.fromEntries(p),
-            ...(from ? ({ timestamp_start: formatDate(from) } satisfies QueryParams) : null),
-            ...(to ? ({ timestamp_end: formatDate(to) } satisfies QueryParams) : null)
-          }
-
-          return newSearchParams
+    onDebounce: (newDate) => {
+      setQuery(
+        {
+          timestamp_start: formatDate(getValidDate(newDate.dateFrom)?.toDate()) ?? undefined,
+          timestamp_end: formatDate(getValidDate(newDate.dateTo)?.toDate()) ?? undefined
         },
-        { replace: true, preventScrollReset: true }
+        {
+          replace: true,
+          preventScrollReset: true
+        }
       )
+    }
   })
 
   return <ProjectDashboard data={data} dateFilterProps={{ dates, setDates, dateRange }} />