diff --git a/ui/packages/evidently-ui-lib/src/components/OnClickedPoint.tsx b/ui/packages/evidently-ui-lib/src/components/OnClickedPoint.tsx index e0da8a3806..11437d6bab 100644 --- a/ui/packages/evidently-ui-lib/src/components/OnClickedPoint.tsx +++ b/ui/packages/evidently-ui-lib/src/components/OnClickedPoint.tsx @@ -1,46 +1,11 @@ import { Close as CloseIcon } from '@mui/icons-material' -import { Box, Button, IconButton, Link, Paper, Snackbar, Stack, Typography } from '@mui/material' +import { Box, IconButton, Paper, Snackbar, Typography } from '@mui/material' import { useLocalStorage } from '@uidotdev/usehooks' import type { PlotMouseEvent } from 'plotly.js' import { useEffect, useState } from 'react' -import { Link as RLink } from 'react-router-dom' export type PlotMouseEventType = PlotMouseEvent -export const GoToSnapshotByPoint = ({ event }: { event: PlotMouseEvent }) => { - const p = event.points[0] - const customdata = p.customdata as Partial< - Record<'test_fingerprint' | 'metric_fingerprint' | 'snapshot_id', string> - > - - if (!customdata) { - return <> - } - - const snapshot_type = 'metric_fingerprint' in customdata ? 'report' : 'test-suite' - - return ( - <> - t.palette.background.default, - p: 1, - borderRadius: '10px' - }} - > - - - - - - - - ) -} - export const HintOnHoverToPlot = () => { const [isSawHint, setIsSawHint] = useLocalStorage('is-user-saw-click-on-datapoints-hint', false) diff --git a/ui/packages/evidently-ui-lib/src/router-utils/components/navigations.tsx b/ui/packages/evidently-ui-lib/src/router-utils/components/navigations.tsx index 32c47dc123..14f328f82c 100644 --- a/ui/packages/evidently-ui-lib/src/router-utils/components/navigations.tsx +++ b/ui/packages/evidently-ui-lib/src/router-utils/components/navigations.tsx @@ -9,6 +9,7 @@ import { Typography, type TypographyProps } from '@mui/material' +import type { HTMLAttributeAnchorTarget } from 'react' import { Navigate, type NavigateProps, Link as ReactRouterLink } from 'react-router-dom' import { makeRouteUrl } from 'router-utils/router-builder' import type { GetLinkParams, MatchAny } from 'router-utils/types' @@ -46,11 +47,12 @@ const RouterLinkTemplate = (props: RouterLinkTemplateComponentProps) => { type RLB = { to: string title?: string + target?: HTMLAttributeAnchorTarget | undefined } & ButtonProps -const RLBComponent = ({ to, title, ...buttonProps }: RLB) => { +const RLBComponent = ({ to, title, target, ...buttonProps }: RLB) => { return ( - ) diff --git a/ui/service/src/routes/src/dashboard/dashboard-main.tsx b/ui/service/src/routes/src/dashboard/dashboard-main.tsx index 50afa6d1a0..b616e9df81 100644 --- a/ui/service/src/routes/src/dashboard/dashboard-main.tsx +++ b/ui/service/src/routes/src/dashboard/dashboard-main.tsx @@ -16,8 +16,14 @@ import { } from 'evidently-ui-lib/routes-components/dashboard/data' import { DashboardWidgets } from 'evidently-ui-lib/components/DashboardWidgets' -import { GoToSnapshotByPoint, HintOnHoverToPlot } from 'evidently-ui-lib/components/OnClickedPoint' +import { + HintOnHoverToPlot, + type PlotMouseEventType +} from 'evidently-ui-lib/components/OnClickedPoint' +import { Box, Stack } from 'evidently-ui-lib/shared-dependencies/mui-material' +import { useParams } from 'evidently-ui-lib/shared-dependencies/react-router-dom' import { clientAPI } from '~/api' +import { RouterLink } from '~/routes/components' /////////////////// // ROUTE @@ -74,3 +80,45 @@ export const Component = () => { /> ) } + +const GoToSnapshotByPoint = ({ event }: { event: PlotMouseEventType }) => { + const p = event.points[0] + const customdata = p.customdata as Partial< + Record<'test_fingerprint' | 'metric_fingerprint' | 'snapshot_id', string> + > + + const { projectId } = useParams() as Params + + if (!customdata || !customdata.snapshot_id) { + return <> + } + + const snapshot_type = 'metric_fingerprint' in customdata ? 'report' : 'test-suite' + + const linkToSnapshot = `/projects/:projectId/${snapshot_type}s/:snapshotId` as const + + return ( + <> + t.palette.background.default, + borderRadius: '10px' + }} + > + + + + + + ) +}