feat: new trace details waterfall integration

ee/query-service/app/db/reader.go

@@ -7,6 +7,7 @@ import (
 
 	"github.com/jmoiron/sqlx"
 
+	cacheV2 "go.signoz.io/signoz/pkg/cache"
 	basechr "go.signoz.io/signoz/pkg/query-service/app/clickhouseReader"
 	"go.signoz.io/signoz/pkg/query-service/interfaces"
 )
@@ -17,6 +18,7 @@ type ClickhouseReader struct {
 	*basechr.ClickHouseReader
 }
 
+// dummy
 func NewDataConnector(
 	localDB *sqlx.DB,
 	promConfigPath string,
@@ -27,8 +29,9 @@ func NewDataConnector(
 	cluster string,
 	useLogsNewSchema bool,
 	useTraceNewSchema bool,
+	cacheV2 cacheV2.Cache,
 ) *ClickhouseReader {
-	ch := basechr.NewReader(localDB, promConfigPath, lm, maxIdleConns, maxOpenConns, dialTimeout, cluster, useLogsNewSchema, useTraceNewSchema)
+	ch := basechr.NewReader(localDB, promConfigPath, lm, maxIdleConns, maxOpenConns, dialTimeout, cluster, useLogsNewSchema, useTraceNewSchema, cacheV2)
 	return &ClickhouseReader{
 		conn:             ch.GetConn(),
 		appdb:            localDB,

ee/query-service/app/server.go

@@ -143,6 +143,15 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 		return nil, err
 	}
 
+	var c cache.Cache
+	if serverOptions.CacheConfigPath != "" {
+		cacheOpts, err := cache.LoadFromYAMLCacheConfigFile(serverOptions.CacheConfigPath)
+		if err != nil {
+			return nil, err
+		}
+		c = cache.NewCache(cacheOpts)
+	}
+
 	// set license manager as feature flag provider in dao
 	modelDao.SetFlagProvider(lm)
 	readerReady := make(chan bool)
@@ -161,6 +170,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 			serverOptions.Cluster,
 			serverOptions.UseLogsNewSchema,
 			serverOptions.UseTraceNewSchema,
+			serverOptions.SigNoz.Cache,
 		)
 		go qb.Start(readerReady)
 		reader = qb
@@ -175,14 +185,6 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 			return nil, err
 		}
 	}
-	var c cache.Cache
-	if serverOptions.CacheConfigPath != "" {
-		cacheOpts, err := cache.LoadFromYAMLCacheConfigFile(serverOptions.CacheConfigPath)
-		if err != nil {
-			return nil, err
-		}
-		c = cache.NewCache(cacheOpts)
-	}
 
 	<-readerReady
 	rm, err := makeRulesManager(serverOptions.PromConfigPath,

frontend/package.json

@@ -44,6 +44,7 @@
 		"@sentry/webpack-plugin": "2.22.6",
 		"@signozhq/design-tokens": "1.1.4",
 		"@tanstack/react-table": "8.20.6",
+		"@tanstack/react-virtual": "3.11.2",
 		"@uiw/react-md-editor": "3.23.5",
 		"@visx/group": "3.3.0",
 		"@visx/shape": "3.5.0",

frontend/src/AppRoutes/pageComponents.ts

@@ -43,7 +43,7 @@ export const TraceFilter = Loadable(
 );
 
 export const TraceDetail = Loadable(
-	() => import(/* webpackChunkName: "TraceDetail Page" */ 'pages/TraceDetail'),
+	() => import(/* webpackChunkName: "TraceDetail Page" */ 'pages/TraceDetailV2'),
 );
 
 export const UsageExplorerPage = Loadable(

frontend/src/api/trace/getTraceV2.tsx

@@ -0,0 +1,41 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { omit } from 'lodash-es';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	GetTraceV2PayloadProps,
+	GetTraceV2SuccessResponse,
+} from 'types/api/trace/getTraceV2';
+
+const getTraceV2 = async (
+	props: GetTraceV2PayloadProps,
+): Promise<SuccessResponse<GetTraceV2SuccessResponse> | ErrorResponse> => {
+	try {
+		let uncollapsedNodes = [...props.uncollapsedNodes];
+		if (!props.isInterestedSpanIdUnCollapsed) {
+			uncollapsedNodes = uncollapsedNodes.filter(
+				(node) => node !== props.interestedSpanId,
+			);
+		}
+		const postData: GetTraceV2PayloadProps = {
+			...props,
+			uncollapsedNodes,
+		};
+		const response = await axios.post<GetTraceV2SuccessResponse>(
+			`/traces/${props.traceId}`,
+			omit(postData, 'traceId'),
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getTraceV2;

frontend/src/components/TableV3/TableV3.tsx

@@ -7,28 +7,47 @@ import {
 	Table,
 	useReactTable,
 } from '@tanstack/react-table';
-import React, { useMemo } from 'react';
+import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
+import cx from 'classnames';
+import React, { MutableRefObject, useEffect, useMemo } from 'react';
 
 // here we are manually rendering the table body so that we can memoize the same for performant re-renders
-function TableBody<T>({ table }: { table: Table<T> }): JSX.Element {
+function TableBody<T>({
+	table,
+	virtualizer,
+}: {
+	table: Table<T>;
+	virtualizer: Virtualizer<HTMLDivElement, Element>;
+}): JSX.Element {
+	const { rows } = table.getRowModel();
 	return (
 		<div className="div-tbody">
-			{table.getRowModel().rows.map((row) => (
-				<div key={row.id} className="div-tr">
-					{row.getVisibleCells().map((cell) => (
-						<div
-							key={cell.id}
-							className="div-td"
-							// we are manually setting the column width here based on the calculated column vars
-							style={{
-								width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
-							}}
-						>
-							{cell.renderValue<any>()}
-						</div>
-					))}
-				</div>
-			))}
+			{virtualizer.getVirtualItems().map((virtualRow, index) => {
+				const row = rows[virtualRow.index];
+				return (
+					<div
+						key={virtualRow.index}
+						className="div-tr"
+						style={{
+							height: `${virtualRow.size}px`,
+							transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
+						}}
+					>
+						{row.getVisibleCells().map((cell) => (
+							<div
+								key={cell.id}
+								className="div-td"
+								// we are manually setting the column width here based on the calculated column vars
+								style={{
+									width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
+								}}
+							>
+								{flexRender(cell.column.columnDef.cell, cell.getContext())}
+							</div>
+						))}
+					</div>
+				);
+			})}
 		</div>
 	);
 }
@@ -40,17 +59,24 @@ const MemoizedTableBody = React.memo(
 ) as typeof TableBody;
 
 interface ITableConfig {
-	defaultColumnMinSize: number;
-	defaultColumnMaxSize: number;
+	defaultColumnMinSize?: number;
+	defaultColumnMaxSize?: number;
+	handleVirtualizerInstanceChanged?: (
+		instance: Virtualizer<HTMLDivElement, Element>,
+	) => void;
 }
 interface ITableV3Props<T> {
 	columns: ColumnDef<T, any>[];
 	data: T[];
 	config: ITableConfig;
+	customClassName?: string;
+	virtualiserRef?: MutableRefObject<
+		Virtualizer<HTMLDivElement, Element> | undefined
+	>;
 }
 
 export function TableV3<T>(props: ITableV3Props<T>): JSX.Element {
-	const { data, columns, config } = props;
+	const { data, columns, config, customClassName = '', virtualiserRef } = props;
 
 	const table = useReactTable({
 		data,
@@ -61,11 +87,26 @@ export function TableV3<T>(props: ITableV3Props<T>): JSX.Element {
 		},
 		columnResizeMode: 'onChange',
 		getCoreRowModel: getCoreRowModel(),
-		debugTable: true,
-		debugHeaders: true,
-		debugColumns: true,
+		// turn on debug flags to get debug logs from these instances
+		debugAll: false,
+	});
+
+	const tableRef = React.useRef<HTMLDivElement>(null);
+	const { rows } = table.getRowModel();
+	const virtualizer = useVirtualizer({
+		count: rows.length,
+		getScrollElement: () => tableRef.current,
+		estimateSize: () => 54,
+		overscan: 20,
+		onChange: config.handleVirtualizerInstanceChanged,
 	});
 
+	useEffect(() => {
+		if (virtualiserRef) {
+			virtualiserRef.current = virtualizer;
+		}
+	}, [virtualiserRef, virtualizer]);
+
 	/**
 	 * Instead of calling `column.getSize()` on every render for every header
 	 * and especially every data cell (very expensive),
@@ -85,13 +126,14 @@ export function TableV3<T>(props: ITableV3Props<T>): JSX.Element {
 	}, [table.getState().columnSizingInfo, table.getState().columnSizing]);
 
 	return (
-		<div className="p-2">
+		<div className={cx('p-2', customClassName)} ref={tableRef}>
 			{/* Here in the <table> equivalent element (surrounds all table head and data cells), we will define our CSS variables for column sizes */}
 			<div
 				className="div-table"
 				style={{
 					...columnSizeVars, // Define column sizes on the <table> element
 					width: table.getTotalSize(),
+					height: `${virtualizer.getTotalSize()}px`,
 				}}
 			>
 				<div className="div-thead">
@@ -125,11 +167,16 @@ export function TableV3<T>(props: ITableV3Props<T>): JSX.Element {
 				</div>
 				{/* When resizing any column we will render this special memoized version of our table body */}
 				{table.getState().columnSizingInfo.isResizingColumn ? (
-					<MemoizedTableBody table={table} />
+					<MemoizedTableBody table={table} virtualizer={virtualizer} />
 				) : (
-					<TableBody table={table} />
+					<TableBody table={table} virtualizer={virtualizer} />
 				)}
 			</div>
 		</div>
 	);
 }
+
+TableV3.defaultProps = {
+	customClassName: '',
+	virtualiserRef: null,
+};

frontend/src/constants/reactQueryKeys.ts

@@ -21,5 +21,6 @@ export const REACT_QUERY_KEY = {
 	GET_HOST_LIST: 'GET_HOST_LIST',
 	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
 	GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
+	GET_TRACE_V2: 'GET_TRACE_V2',
 	GET_POD_LIST: 'GET_POD_LIST',
 };

frontend/src/container/TraceWaterfall/TraceWaterfall.styles.scss

@@ -0,0 +1,3 @@
+.trace-waterfall {
+	height: 50vh;
+}