UI: add dot on clicked point (dashboard plot)

evidentlyai · Dec 9, 2024 · 51210e2 · 51210e2
1 parent ae547a1
commit 51210e2
Showing 1 changed file with 48 additions and 21 deletions.
diff --git a/ui/packages/evidently-ui-lib/src/widgets/BigGraphWidgetContent.tsx b/ui/packages/evidently-ui-lib/src/widgets/BigGraphWidgetContent.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@mui/material'
-import type { PlotMouseEvent, Shape } from 'plotly.js'
+import type { Datum, PlotMouseEvent, Shape } from 'plotly.js'
 import type React from 'react'
 import { useState } from 'react'
 
@@ -8,6 +8,14 @@ import Plot, { darkPlotlyLayoutTemplate } from '~/components/Plot'
 import { useDashboardViewParams } from '~/contexts/DashboardViewParams'
 import { useThemeMode } from '~/hooks/theme'
 
+const roundPoint2Digit = (y: Datum) => {
+  if (typeof y === 'number') {
+    return Math.round(y * 100) / 100
+  }
+
+  return y
+}
+
 interface BigGraphWidgetProps extends AdditionalGraphInfo {
   widgetSize: number
 }
@@ -24,28 +32,47 @@ const BigGraphWidgetContent: React.FunctionComponent<BigGraphWidgetProps> = (pro
   const [clickEvent, setClickEvent] = useState<PlotMouseEvent | null>(null)
   const [isHovered, setIsHovered] = useState<boolean>(false)
 
-  const lineOnClickedPoint: Partial<Shape> | undefined =
+  const lineOnClickedPoint: Partial<Shape>[] =
     OnClickComponent && clickEvent
-      ? {
-          type: 'line',
-          x0: clickEvent.points[0].x, // X-coordinate where the line starts
-          x1: clickEvent.points[0].x, // X-coordinate where the line ends
-          y0: 0,
-          y1: 1,
-          xref: 'x',
-          yref: 'paper',
-          line: {
-            color: mode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)',
-            width: 3,
-            dash: 'solid'
+      ? [
+          {
+            type: 'line',
+            x0: clickEvent.points[0].x, // X-coordinate where the line starts
+            x1: clickEvent.points[0].x, // X-coordinate where the line ends
+            y0: 0,
+            y1: 1,
+            xref: 'x',
+            yref: 'paper',
+            line: {
+              color: mode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)',
+              width: 3,
+              dash: 'dash'
+            }
           }
-        }
-      : undefined
+        ]
+      : []
+
+  const circleOnClickedPointData =
+    OnClickComponent &&
+    clickEvent &&
+    props.data.every((e) => e.type !== 'bar' && e.type !== 'histogram')
+      ? [
+          {
+            x: [clickEvent.points[0].x], // X-coordinate of the dot
+            y: [clickEvent.points[0].y], // Y-coordinate of the dot
+            mode: 'markers',
+            marker: {
+              size: 8, // Size of the dot
+              color: mode === 'dark' ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)' // Color of the dot
+            },
+            // text: [],
+            // textposition: 'top center',
+            name: `selected point <br>${clickEvent.points[0].x}: ${roundPoint2Digit(clickEvent.points[0].y)}`
+          } satisfies Plotly.Data
+        ]
+      : []
 
-  const shapes = [
-    ...(props.layout.shapes ?? []),
-    ...(lineOnClickedPoint ? [lineOnClickedPoint] : [])
-  ]
+  const shapes = [...(props.layout.shapes ?? []), ...lineOnClickedPoint]
 
   const tOverride =
     mode === 'dark'
@@ -71,7 +98,7 @@ const BigGraphWidgetContent: React.FunctionComponent<BigGraphWidgetProps> = (pro
         <Plot
           onHover={() => !isHovered && setIsHovered(true)}
           onClick={OnClickComponent ? (e) => setClickEvent(e) : undefined}
-          data={props.data}
+          data={[...props.data, ...circleOnClickedPointData]}
           layout={{
             ...props.layout,
             ...tOverride,