[HIG-4752] make verbose tooltips the default (#8823)

## Summary
- remove the "verbose" tooltip option and always show the key in the
tooltip, styled with a max width to avoid tooltip from becoming too
large
![Screen Shot 2024-06-20 at 5 08 35
PM](https://github.com/highlight/highlight/assets/86132398/b44711c3-99de-45ce-aaf6-eeee9923e6dc)

<!--
Ideally, there is an attached GitHub issue that will describe the "why".

If relevant, use this section to call out any additional information
you'd like to _highlight_ to the reviewer.
-->

## How did you test this change?
- clicktested locally
<!--
Frontend - Leave a screencast or a screenshot to visually describe the
changes.
-->

## Are there any deployment considerations?
- no
<!--
 Backend - Do we need to consider migrations or backfilling data?
-->

## Does this work require review from our design team?
- @julian-highlight 
<!--
 Request review from julian-highlight / our design team 
-->

frontend/src/pages/Graphing/components/BarChart.tsx

@@ -23,7 +23,6 @@ import {
 	isActive,
 	SeriesInfo,
 	TIMESTAMP_KEY,
-	TooltipConfig,
 } from '@/pages/Graphing/components/Graph'
 
 export type BarDisplay = 'Grouped' | 'Stacked'
@@ -78,9 +77,8 @@ export const BarChart = ({
 	showXAxis,
 	showYAxis,
 	showGrid,
-	verboseTooltip,
 }: React.PropsWithChildren<
-	InnerChartProps<BarChartConfig> & SeriesInfo & AxisConfig & TooltipConfig
+	InnerChartProps<BarChartConfig> & SeriesInfo & AxisConfig
 >) => {
 	const xAxisTickFormatter = getTickFormatter(xAxisMetric, data)
 	const yAxisTickFormatter = getTickFormatter(yAxisMetric, data)
@@ -170,7 +168,6 @@ export const BarChart = ({
 						xAxisMetric,
 						yAxisMetric,
 						yAxisFunction,
-						verboseTooltip,
 					)}
 					wrapperStyle={{ zIndex: 100 }}
 					cursor={{ fill: '#C8C7CB', fillOpacity: 0.5 }}

frontend/src/pages/Graphing/components/Graph.css.ts

@@ -68,6 +68,7 @@ export const tooltipWrapper = style({
 
 export const tooltipText = style({
 	lineHeight: '16px',
+	maxWidth: '300px',
 })
 
 export const tooltipDot = style({

frontend/src/pages/Graphing/components/Graph.tsx

@@ -128,10 +128,6 @@ export interface AxisConfig {
 	showGrid?: boolean
 }
 
-export interface TooltipConfig {
-	verboseTooltip?: boolean
-}
-
 const strokeColors = [
 	'#0090FF',
 	'#D6409F',
@@ -257,17 +253,13 @@ export const getTickFormatter = (metric: string, data?: any[] | undefined) => {
 }
 
 export const getCustomTooltip =
-	(
-		xAxisMetric: string,
-		yAxisMetric: string,
-		yAxisFunction: string,
-		verbose?: boolean,
-	) =>
+	(xAxisMetric: string, yAxisMetric: string, yAxisFunction: string) =>
 	({ active, payload, label }: any) => {
 		const isValid = active && payload && payload.length
 		return (
 			<Box cssClass={style.tooltipWrapper}>
 				<Text
+					lines="1"
 					size="xxSmall"
 					weight="medium"
 					color="default"
@@ -289,13 +281,22 @@ export const getCustomTooltip =
 							cssClass={style.tooltipDot}
 						></Box>
 						<Text
+							lines="1"
+							size="xxSmall"
+							weight="medium"
+							color="default"
+							cssClass={style.tooltipText}
+						>
+							{p.name ? p.name + ': ' : yAxisFunction + ': '}
+							&nbsp;
+						</Text>
+						<Text
+							lines="1"
 							size="xxSmall"
 							weight="medium"
 							color="default"
 							cssClass={style.tooltipText}
 						>
-							{verbose &&
-								(p.name ? p.name + ': ' : yAxisFunction + ': ')}
 							{isValid && getTickFormatter(yAxisMetric)(p.value)}
 						</Text>
 					</Box>

frontend/src/pages/Graphing/components/LineChart.tsx

@@ -23,7 +23,6 @@ import {
 	isActive,
 	SeriesInfo,
 	TIMESTAMP_KEY,
-	TooltipConfig,
 } from '@/pages/Graphing/components/Graph'
 
 export type LineNullHandling = 'Hidden' | 'Connected' | 'Zero'
@@ -56,10 +55,9 @@ export const LineChart = ({
 	showXAxis,
 	showYAxis,
 	showGrid,
-	verboseTooltip,
 	strokeColors,
 }: React.PropsWithChildren<
-	InnerChartProps<LineChartConfig> & SeriesInfo & AxisConfig & TooltipConfig
+	InnerChartProps<LineChartConfig> & SeriesInfo & AxisConfig
 >) => {
 	const xAxisTickFormatter = getTickFormatter(xAxisMetric, data)
 	const yAxisTickFormatter = getTickFormatter(yAxisMetric, data)
@@ -159,7 +157,6 @@ export const LineChart = ({
 						xAxisMetric,
 						yAxisMetric,
 						yAxisFunction,
-						verboseTooltip,
 					)}
 					cursor={{ stroke: '#C8C7CB', strokeDasharray: 4 }}
 					isAnimationActive={false}

frontend/src/pages/LogsPage/LogsHistogram/LogsHistogram.tsx

@@ -151,7 +151,6 @@ const LogsHistogram = ({
 							}}
 							series={series}
 							showYAxis={false}
-							verboseTooltip
 							strokeColors={LEVEL_COLOR_MAPPING}
 							setTimeRange={onDatesChange}
 						>
@@ -187,7 +186,6 @@ const LogsHistogram = ({
 							}}
 							series={series}
 							showYAxis={false}
-							verboseTooltip
 							strokeColors={LEVEL_COLOR_MAPPING}
 							setTimeRange={onDatesChange}
 						>