UI: additional plot info -> console.log

evidentlyai · Dec 4, 2024 · 0476670 · 0476670
1 parent c7e90e2
commit 0476670
Showing 1 changed file with 43 additions and 17 deletions.
diff --git a/ui/packages/evidently-ui-lib/src/widgets/BigGraphWidgetContent.tsx b/ui/packages/evidently-ui-lib/src/widgets/BigGraphWidgetContent.tsx
@@ -1,4 +1,6 @@
+import { Box, Button, Stack, Typography } from '@mui/material'
 import type React from 'react'
+import { useState } from 'react'
 
 import type { AdditionalGraphInfo } from '~/api'
 import Plot, { darkPlotlyLayoutTemplate } from '~/components/Plot'
@@ -15,6 +17,8 @@ const BigGraphWidgetContent: React.FunctionComponent<BigGraphWidgetProps> = (pro
   const isHistogram = props.data.some(({ type }) => type === 'histogram')
   const isCastXaxisToCategory = viewParams?.isXaxisAsCategorical && !isHistogram
 
+  const [p, setP] = useState('')
+
   const tOverride =
     mode === 'dark'
       ? {
@@ -33,23 +37,45 @@ const BigGraphWidgetContent: React.FunctionComponent<BigGraphWidgetProps> = (pro
     : undefined
 
   return (
-    <div>
-      <Plot
-        data={props.data}
-        layout={{
-          ...props.layout,
-          ...tOverride,
-          title: undefined,
-          xaxis: { ...props.layout?.xaxis, ...xaxisOptionsOverride }
-        }}
-        config={{ responsive: true }}
-        style={{
-          width: '100%',
-          minHeight: 300 + 100 * (1 + props.widgetSize / 2),
-          maxHeight: 400
-        }}
-      />
-    </div>
+    <>
+      <Box position={'relative'}>
+        <Plot
+          onClick={(e) => {
+            console.log(e.points[0])
+            const x = e.points[0].x
+
+            setP(String(x))
+          }}
+          data={props.data}
+          layout={{
+            ...props.layout,
+            ...tOverride,
+            title: undefined,
+            xaxis: { ...props.layout?.xaxis, ...xaxisOptionsOverride }
+          }}
+          config={{ responsive: true }}
+          style={{
+            width: '100%',
+            minHeight: 300 + 100 * (1 + props.widgetSize / 2),
+            maxHeight: 400
+          }}
+        />
+        {p && (
+          <Box sx={{ position: 'absolute', bottom: 0, right: 0 }}>
+            <Stack direction={'row'} alignItems={'center'} gap={2}>
+              <Typography variant='caption'>
+                <b>Timestamp</b> : {p}
+                <br />
+              </Typography>
+
+              <Button variant='outlined' size='small'>
+                Go to snapshot
+              </Button>
+            </Stack>
+          </Box>
+        )}
+      </Box>
+    </>
   )
 }