feat: uplot graph is added and some re-rendering is reduced

frontend/package.json

@@ -84,7 +84,6 @@
 		"react-grid-layout": "^1.3.4",
 		"react-helmet-async": "1.3.0",
 		"react-i18next": "^11.16.1",
-		"react-intersection-observer": "9.4.1",
 		"react-markdown": "8.0.7",
 		"react-query": "^3.34.19",
 		"react-redux": "^7.2.2",
@@ -102,6 +101,7 @@
 		"ts-node": "^10.2.1",
 		"tsconfig-paths-webpack-plugin": "^3.5.1",
 		"typescript": "^4.0.5",
+		"uplot": "1.6.26",
 		"uuid": "^8.3.2",
 		"web-vitals": "^0.2.4",
 		"webpack": "5.88.2",

frontend/src/components/Graph/types.ts

@@ -35,7 +35,7 @@ export type GraphOnClickHandler = (
 ) => void;
 
 export type ToggleGraphProps = {
-	toggleGraph(graphIndex: number, isVisible: boolean): void;
+	toggleGraph(graphIndex: number, isVisible: boolean, reference?: string): void;
 };
 
 export type CustomChartOptions = ChartOptions & {

frontend/src/components/Graph/yAxisConfig.ts

@@ -46,7 +46,7 @@ export const getYAxisFormattedValue = (
 	return `${parseFloat(value)}`;
 };
 
-export const getToolTipValue = (value: string, format: string): string => {
+export const getToolTipValue = (value: string, format?: string): string => {
 	try {
 		return formattedValueToString(
 			getValueFormat(format)(parseFloat(value), undefined, undefined, undefined),

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,3 +1,4 @@
+import { DownOutlined } from '@ant-design/icons';
 import { Button, Dropdown } from 'antd';
 import TimeItems, {
 	timePreferance,
@@ -33,7 +34,9 @@ function TimePreference({
 	return (
 		<TextContainer noButtonMargin>
 			<Dropdown menu={menu}>
-				<Button>{selectedTime.name}</Button>
+				<Button>
+					{selectedTime.name} <DownOutlined />
+				</Button>
 			</Dropdown>
 		</TextContainer>
 	);

frontend/src/components/Uplot/Uplot.tsx

@@ -0,0 +1,141 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import './uplot.scss';
+
+import { Typography } from 'antd';
+import { ToggleGraphProps } from 'components/Graph/types';
+import {
+	forwardRef,
+	memo,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+} from 'react';
+import UPlot from 'uplot';
+
+import { dataMatch, optionsUpdateState } from './utils';
+
+export interface UplotProps {
+	options: uPlot.Options;
+	data: uPlot.AlignedData;
+	onDelete?: (chart: uPlot) => void;
+	onCreate?: (chart: uPlot) => void;
+	resetScales?: boolean;
+}
+
+const Uplot = forwardRef<ToggleGraphProps | undefined, UplotProps>(
+	(
+		{ options, data, onDelete, onCreate, resetScales = true },
+		ref,
+	): JSX.Element | null => {
+		const chartRef = useRef<uPlot | null>(null);
+		const propOptionsRef = useRef(options);
+		const targetRef = useRef<HTMLDivElement>(null);
+		const propDataRef = useRef(data);
+		const onCreateRef = useRef(onCreate);
+		const onDeleteRef = useRef(onDelete);
+
+		useImperativeHandle(
+			ref,
+			(): ToggleGraphProps => ({
+				toggleGraph(graphIndex: number, isVisible: boolean): void {
+					chartRef.current?.setSeries(graphIndex, { show: isVisible });
+				},
+			}),
+		);
+
+		useEffect(() => {
+			onCreateRef.current = onCreate;
+			onDeleteRef.current = onDelete;
+		});
+
+		const destroy = useCallback((chart: uPlot | null) => {
+			if (chart) {
+				onDeleteRef.current?.(chart);
+				chart.destroy();
+				chartRef.current = null;
+			}
+		}, []);
+
+		const create = useCallback(() => {
+			if (targetRef.current === null) return;
+
+			// If data is empty, hide cursor
+			if (data && data[0] && data[0]?.length === 0) {
+				propOptionsRef.current = {
+					...propOptionsRef.current,
+					cursor: { show: false },
+				};
+			}
+
+			const newChart = new UPlot(
+				propOptionsRef.current,
+				propDataRef.current,
+				targetRef.current,
+			);
+
+			chartRef.current = newChart;
+			onCreateRef.current?.(newChart);
+		}, [data]);
+
+		useEffect(() => {
+			create();
+			return (): void => {
+				destroy(chartRef.current);
+			};
+		}, [create, destroy]);
+
+		useEffect(() => {
+			if (propOptionsRef.current !== options) {
+				const optionsState = optionsUpdateState(propOptionsRef.current, options);
+				propOptionsRef.current = options;
+				if (!chartRef.current || optionsState === 'create') {
+					destroy(chartRef.current);
+					create();
+				} else if (optionsState === 'update') {
+					chartRef.current.setSize({
+						width: options.width,
+						height: options.height,
+					});
+				}
+			}
+		}, [options, create, destroy]);
+
+		useEffect(() => {
+			if (propDataRef.current !== data) {
+				if (!chartRef.current) {
+					propDataRef.current = data;
+					create();
+				} else if (!dataMatch(propDataRef.current, data)) {
+					if (resetScales) {
+						chartRef.current.setData(data, true);
+					} else {
+						chartRef.current.setData(data, false);
+						chartRef.current.redraw();
+					}
+				}
+				propDataRef.current = data;
+			}
+		}, [data, resetScales, create]);
+
+		return (
+			<div className="uplot-graph-container" ref={targetRef}>
+				{data && data[0] && data[0]?.length === 0 ? (
+					<div className="not-found">
+						<Typography>No Data</Typography>
+					</div>
+				) : null}
+			</div>
+		);
+	},
+);
+
+Uplot.displayName = 'Uplot';
+
+Uplot.defaultProps = {
+	onDelete: undefined,
+	onCreate: undefined,
+	resetScales: true,
+};
+
+export default memo(Uplot);

frontend/src/components/Uplot/index.ts

@@ -0,0 +1,3 @@
+import Uplot from './Uplot';
+
+export default Uplot;

frontend/src/components/Uplot/uplot.scss

@@ -0,0 +1,15 @@
+.not-found {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 0;
+	height: 85%;
+	position: absolute;
+	left: 50%;
+	transform: translate(-50%, 0);
+}
+
+.uplot-graph-container {
+	height: 100%;
+	width: 100%;
+}

frontend/src/components/Uplot/utils.ts

@@ -0,0 +1,48 @@
+import uPlot from 'uplot';
+
+type OptionsUpdateState = 'keep' | 'update' | 'create';
+
+export const optionsUpdateState = (
+	_lhs: uPlot.Options,
+	_rhs: uPlot.Options,
+): OptionsUpdateState => {
+	const { width: lhsWidth, height: lhsHeight, ...lhs } = _lhs;
+	const { width: rhsWidth, height: rhsHeight, ...rhs } = _rhs;
+
+	let state: OptionsUpdateState = 'keep';
+
+	if (lhsHeight !== rhsHeight || lhsWidth !== rhsWidth) {
+		state = 'update';
+	}
+	if (Object.keys(lhs).length !== Object.keys(rhs).length) {
+		return 'create';
+	}
+	// eslint-disable-next-line no-restricted-syntax
+	for (const k of Object.keys(lhs)) {
+		if (!Object.is((lhs as any)[k], (rhs as any)[k])) {
+			state = 'create';
+			break;
+		}
+	}
+	return state;
+};
+
+export const dataMatch = (
+	lhs: uPlot.AlignedData,
+	rhs: uPlot.AlignedData,
+): boolean => {
+	if (lhs.length !== rhs.length) {
+		return false;
+	}
+	return lhs.every((lhsOneSeries, seriesIdx) => {
+		const rhsOneSeries = rhs[seriesIdx];
+		if (lhsOneSeries.length !== rhsOneSeries.length) {
+			return false;
+		}
+
+		// compare each value in the series
+		return (lhsOneSeries as number[])?.every(
+			(value, valueIdx) => value === rhsOneSeries[valueIdx],
+		);
+	});
+};

frontend/src/constants/panelTypes.ts

@@ -1,11 +1,11 @@
-import Graph from 'components/Graph';
+import Uplot from 'components/Uplot';
 import GridTableComponent from 'container/GridTableComponent';
 import GridValueComponent from 'container/GridValueComponent';
 
 import { PANEL_TYPES } from './queryBuilder';
 
 export const PANEL_TYPES_COMPONENT_MAP = {
-	[PANEL_TYPES.TIME_SERIES]: Graph,
+	[PANEL_TYPES.TIME_SERIES]: Uplot,
 	[PANEL_TYPES.VALUE]: GridValueComponent,
 	[PANEL_TYPES.TABLE]: GridTableComponent,
 	[PANEL_TYPES.TRACE]: null,

frontend/src/constants/theme.ts

@@ -9,7 +9,6 @@ const themeColors = {
 		silver: '#BDBDBD',
 		outrageousOrange: '#FF6633',
 		roseBud: '#FFB399',
-		magentaPink: '#FF33FF',
 		canary: '#FFFF99',
 		deepSkyBlue: '#00B3E6',
 		goldTips: '#E6B333',

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -1,13 +1,15 @@
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { StaticLineProps } from 'components/Graph/types';
 import Spinner from 'components/Spinner';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import GridPanelSwitch from 'container/GridPanelSwitch';
 import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
 import { Time } from 'container/TopNav/DateTimeSelection/config';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import getChartData from 'lib/getChartData';
-import { useMemo } from 'react';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartData';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getChartData';
+import { useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -54,20 +56,6 @@ function ChartPreview({
 		targetUnit: query?.unit,
 	});
 
-	const staticLine: StaticLineProps | undefined =
-		threshold !== undefined
-			? {
-					yMin: thresholdValue,
-					yMax: thresholdValue,
-					borderColor: '#f14',
-					borderWidth: 1,
-					lineText: `${t('preview_chart_threshold_label')} (y=${thresholdValue} ${
-						query?.unit || ''
-					})`,
-					textColor: '#f14',
-			  }
-			: undefined;
-
 	const canQuery = useMemo((): boolean => {
 		if (!query || query == null) {
 			return false;
@@ -114,15 +102,36 @@ function ChartPreview({
 		},
 	);
 
-	const chartDataSet = queryResponse.isError
-		? null
-		: getChartData({
-				queryData: [
-					{
-						queryData: queryResponse?.data?.payload?.data?.result ?? [],
-					},
-				],
-		  });
+	const graphRef = useRef<HTMLDivElement>(null);
+
+	const chartData = getUPlotChartData(queryResponse?.data?.payload);
+
+	const containerDimensions = useResizeObserver(graphRef);
+
+	const isDarkMode = useIsDarkMode();
+
+	const options = useMemo(
+		() =>
+			getUPlotChartOptions({
+				id: 'alert_legend_widget',
+				yAxisUnit: query?.unit,
+				apiResponse: queryResponse?.data?.payload,
+				dimensions: containerDimensions,
+				isDarkMode,
+				thresholdText: `${t(
+					'preview_chart_threshold_label',
+				)} (y=${thresholdValue} ${query?.unit || ''})`,
+				thresholdValue,
+			}),
+		[
+			query?.unit,
+			queryResponse?.data?.payload,
+			containerDimensions,
+			isDarkMode,
+			t,
+			thresholdValue,
+		],
+	);
 
 	return (
 		<ChartContainer>
@@ -136,18 +145,18 @@ function ChartPreview({
 			{queryResponse.isLoading && (
 				<Spinner size="large" tip="Loading..." height="70vh" />
 			)}
-			{chartDataSet && !queryResponse.isError && (
-				<GridPanelSwitch
-					panelType={graphType}
-					title={name}
-					data={chartDataSet.data}
-					isStacked
-					name={name || 'Chart Preview'}
-					staticLine={staticLine}
-					panelData={queryResponse.data?.payload.data.newResult.data.result || []}
-					query={query || initialQueriesMap.metrics}
-					yAxisUnit={query?.unit}
-				/>
+			{chartData && !queryResponse.isError && (
+				<div ref={graphRef} style={{ height: '100%' }}>
+					<GridPanelSwitch
+						options={options}
+						panelType={graphType}
+						data={chartData}
+						name={name || 'Chart Preview'}
+						panelData={queryResponse.data?.payload.data.newResult.data.result || []}
+						query={query || initialQueriesMap.metrics}
+						yAxisUnit={query?.unit}
+					/>
+				</div>
 			)}
 		</ChartContainer>
 	);