Add observability for LLM topic context inclusion (#1038)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>
Co-authored-by: Thomas Nordquist <thomasnordquist@users.noreply.github.com>

app/src/components/Chart/Chart.tsx

@@ -1,16 +1,17 @@
+import React, { memo, useCallback, useMemo } from 'react'
+import { useResizeDetector } from 'react-resize-detector'
+import { emphasize, useTheme } from '@mui/material/styles'
+import { XYChart, Axis, Grid, LineSeries, GlyphSeries } from '@visx/xychart'
 import DateFormatter from '../helper/DateFormatter'
 import NoData from './NoData'
 import NumberFormatter from '../helper/NumberFormatter'
-import React, { memo, useCallback, useMemo } from 'react'
 import TooltipComponent from './TooltipComponent'
-import { useResizeDetector } from 'react-resize-detector'
-import { emphasize, useTheme } from '@mui/material/styles'
 import { mapCurveType } from './mapCurveType'
 import { PlotCurveTypes } from '../../reducers/Charts'
 import { Point, Tooltip } from './Model'
 import { useCustomXDomain } from './effects/useCustomXDomain'
 import { useCustomYDomain } from './effects/useCustomYDomain'
-import { XYChart, Axis, Grid, LineSeries, GlyphSeries } from '@visx/xychart'
+
 const abbreviate = require('number-abbreviate')
 
 export interface Props {
@@ -32,7 +33,7 @@ export default memo((props: Props) => {
 
   const hintFormatter = React.useCallback(
     (point: any) => [
-      { title: <b>Time</b>, value: <DateFormatter timeFirst={true} date={new Date(point.x)} /> },
+      { title: <b>Time</b>, value: <DateFormatter timeFirst date={new Date(point.x)} /> },
       { title: <b>Value</b>, value: <NumberFormatter value={point.y} /> },
       { title: <b>Raw</b>, value: <span>{point.y}</span> },
     ],
@@ -55,8 +56,7 @@ export default memo((props: Props) => {
     [hintFormatter]
   )
 
-  const paletteColor =
-    theme.palette.mode === 'light' ? theme.palette.secondary.dark : theme.palette.primary.light
+  const paletteColor = theme.palette.mode === 'light' ? theme.palette.secondary.dark : theme.palette.primary.light
   const color = props.color ? props.color : paletteColor
 
   const highlightSelectedPoint = useCallback(
@@ -68,7 +68,7 @@ export default memo((props: Props) => {
   )
 
   const formatYAxis = useCallback((num: number) => abbreviate(num), [])
-  
+
   const formatXAxis = useCallback((timestamp: number) => {
     const date = new Date(timestamp)
     const hours = date.getHours().toString().padStart(2, '0')
@@ -80,7 +80,7 @@ export default memo((props: Props) => {
   const xDomain = useCustomXDomain(props)
   const yDomain = useCustomYDomain(props)
 
-  const data = props.data
+  const { data } = props
   const hasData = data.length > 0
   const dummyDomain: [number, number] = [-1, 1]
   const dummyData = [{ x: -2, y: -2 }]
@@ -101,25 +101,30 @@ export default memo((props: Props) => {
           <XYChart
             width={width || 300}
             height={CHART_HEIGHT}
-            margin={{ top: 10, right: 10, bottom: 30, left: 50 }}
+            margin={{
+              top: 10,
+              right: 10,
+              bottom: 30,
+              left: 50,
+            }}
             xScale={{ type: 'time', domain: xDomain || dummyDomain }}
             yScale={{ type: 'linear', domain: hasData ? yDomain : dummyDomain }}
             onPointerOut={onMouseLeave}
           >
-            <Grid rows={true} columns={false} stroke={theme.palette.divider} strokeOpacity={0.3} />
-            <Axis 
-              orientation="left" 
+            <Grid rows columns={false} stroke={theme.palette.divider} strokeOpacity={0.3} />
+            <Axis
+              orientation="left"
               numTicks={5}
-              tickFormat={formatYAxis} 
-              stroke={theme.palette.text.secondary} 
+              tickFormat={formatYAxis}
+              stroke={theme.palette.text.secondary}
               tickStroke={theme.palette.text.secondary}
               tickLabelProps={() => ({ fontSize: 11, fill: theme.palette.text.secondary })}
             />
-            <Axis 
-              orientation="bottom" 
+            <Axis
+              orientation="bottom"
               numTicks={4}
-              tickFormat={formatXAxis} 
-              stroke={theme.palette.text.secondary} 
+              tickFormat={formatXAxis}
+              stroke={theme.palette.text.secondary}
               tickStroke={theme.palette.text.secondary}
               tickLabelProps={() => ({ fontSize: 10, fill: theme.palette.text.secondary, textAnchor: 'middle' })}
             />
@@ -131,7 +136,7 @@ export default memo((props: Props) => {
               stroke={color}
               strokeWidth={2}
               curve={mapCurveType(props.interpolation)}
-              onPointerMove={(datum) => {
+              onPointerMove={datum => {
                 if (datum && datum.datum) {
                   const point = datum.datum as Point
                   showTooltip(point)
@@ -143,17 +148,10 @@ export default memo((props: Props) => {
               data={hasData ? data : dummyData}
               xAccessor={accessors.xAccessor}
               yAccessor={accessors.yAccessor}
-              renderGlyph={(glyphProps) => {
+              renderGlyph={glyphProps => {
                 const point = glyphProps.datum as Point
                 const pointColor = highlightSelectedPoint(point)
-                return (
-                  <circle
-                    cx={glyphProps.x}
-                    cy={glyphProps.y}
-                    r={3}
-                    fill={pointColor}
-                  />
-                )
+                return <circle cx={glyphProps.x} cy={glyphProps.y} r={3} fill={pointColor} />
               }}
             />
           </XYChart>