wip

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 (
-    <>
-      <Box
-        sx={{
-          position: 'absolute',
-          bottom: 0,
-          right: 0,
-          background: (t) => t.palette.background.default,
-          p: 1,
-          borderRadius: '10px'
-        }}
-      >
-        <Stack direction={'row'} alignItems={'center'} gap={2}>
-          <Link component={RLink} to={`${snapshot_type}s/${customdata.snapshot_id}`}>
-            <Button variant='outlined'>View {snapshot_type.split('-').join(' ')}</Button>
-          </Link>
-        </Stack>
-      </Box>
-    </>
-  )
-}
-
 export const HintOnHoverToPlot = () => {
   const [isSawHint, setIsSawHint] = useLocalStorage('is-user-saw-click-on-datapoints-hint', false)
 

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 (
-    <Button component={ReactRouterLink} to={to} {...buttonProps}>
+    <Button component={ReactRouterLink} to={to} target={target} {...buttonProps}>
       {title}
     </Button>
   )

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 (
+    <>
+      <Box
+        sx={{
+          position: 'absolute',
+          bottom: 0,
+          right: 0,
+          p: 1,
+          background: (t) => t.palette.background.default,
+          borderRadius: '10px'
+        }}
+      >
+        <Stack direction={'row'} alignItems={'center'} gap={2}>
+          <RouterLink
+            type='button'
+            to={linkToSnapshot}
+            title={`View ${snapshot_type.split('-').join(' ')}`}
+            variant='outlined'
+            paramsToReplace={{ projectId, snapshotId: customdata.snapshot_id }}
+          />
+        </Stack>
+      </Box>
+    </>
+  )
+}