feat(run): add ability to highlight param difference

This will add ability to highlight parameters difference relative clicked result row Signed-off-by: Danil Kostromin <[email protected]>
ts-factory · Feb 22, 2024 · fe3a174 · fe3a174
1 parent b854f47
commit fe3a174
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 53 deletions.
diff --git a/libs/bublik/features/run/src/lib/hooks.tsx b/libs/bublik/features/run/src/lib/hooks.tsx
@@ -42,6 +42,7 @@ export const useRunRowStateContext = () => {
 export interface RowState {
 	rowId: string;
 	requests?: Record<string, ResultTableFilter>;
+	referenceDiffRowId?: string;
 }
 
 export const useRunTableRowState = () => {

diff --git a/libs/bublik/features/run/src/lib/result-table/matcher.ts b/libs/bublik/features/run/src/lib/result-table/matcher.ts
@@ -31,9 +31,15 @@ export function calculateGroupSize(
 	return groupSize;
 }
 
-export function highlightDifferences(dataset: string[][]) {
-	console.log(calculateGroupSize(dataset, 10));
-	const referenceSet = dataset[0];
+type DiffValue = {
+	value: string;
+	isDifferent?: boolean;
+};
+
+export function highlightDifferences(
+	dataset: string[][],
+	referenceSet: string[]
+): DiffValue[][] {
 	const highlightedDataset = [];
 	const referenceMap = new Map<string, string>(
 		Array.from(referenceSet, (item) => item.split('=')) as [string, string][]
@@ -44,7 +50,7 @@ export function highlightDifferences(dataset: string[][]) {
 		const currentSetMap = new Map<string, string>(
 			Array.from(currentSet, (item) => item.split('=')) as [string, string][]
 		);
-		const highlightedSet = [];
+		const highlightedSet: DiffValue[] = [];
 
 		for (let j = 0; j < referenceSet.length; j++) {
 			const referenceKeyValue = referenceSet[j].split('=');
@@ -54,9 +60,9 @@ export function highlightDifferences(dataset: string[][]) {
 				referenceMap.get(referenceKeyValue[0]) !==
 				currentSetMap.get(currentKeyValue[0])
 			) {
-				highlightedSet.push(`***${currentSet[j]}***`);
+				highlightedSet.push({ value: currentSet[j], isDifferent: true });
 			} else {
-				highlightedSet.push(currentSet[j]);
+				highlightedSet.push({ value: currentSet[j] });
 			}
 		}
 

diff --git a/libs/bublik/features/run/src/lib/result-table/result-table.columns.tsx b/libs/bublik/features/run/src/lib/result-table/result-table.columns.tsx
@@ -4,10 +4,11 @@ import { ColumnDef } from '@tanstack/react-table';
 
 import { RunDataResults, RESULT_TYPE } from '@/shared/types';
 import { ResultLinksContainer } from '@/bublik/features/result-links';
-import { VerdictList, BadgeList, cn } from '@/shared/tailwind-ui';
+import { VerdictList, cn } from '@/shared/tailwind-ui';
 
 import { KeyList } from './key-list';
 import { highlightDifferences } from './matcher';
+import { useRunTableRowState } from '../hooks';
 
 export interface ResultLinksProps {
 	runId: string;
@@ -23,9 +24,12 @@ const ResultLinks = ({ runId, resultId, result }: ResultLinksProps) => {
 
 export const getColumns = (
 	runId: string,
+	rowId: string,
 	data: RunDataResults[]
 ): ColumnDef<RunDataResults>[] => {
-	const dataset = data.map((item) => item.parameters);
+	const parametersDataset = Object.fromEntries(
+		data.map((item) => [String(item.result_id), item.parameters])
+	);
 
 	return [
 		{
@@ -90,32 +94,36 @@ export const getColumns = (
 		},
 		{
 			header: 'Parameters',
-			accessorFn: (data) => {
-				return { parameters: data.parameters.map((payload) => ({ payload })) };
-			},
+			accessorFn: (data) => data.parameters,
 			cell: (cell) => {
-				const value = cell.getValue<{ parameters: { payload: string }[] }>();
+				const value = cell.getValue<string[]>();
+				const referenceDiffRowId =
+					useRunTableRowState().rowState[rowId]?.referenceDiffRowId;
+
+				const referenceSet = referenceDiffRowId
+					? parametersDataset[referenceDiffRowId]
+					: value;
 
 				return (
 					<ul className="flex gap-1 flex-wrap">
-						{highlightDifferences(dataset)[cell.row.index].map(
-							(item, index) => (
-								<div
-									className={cn(
-										'inline-flex items-center w-fit py-0.5 px-2 rounded border border-transparent text-[0.75rem] font-medium transition-colors bg-badge-0',
-										item.startsWith('***')
-											? 'bg-primary-wash border-primary'
-											: 'bg-badge-0'
-									)}
-								>
-									{item.startsWith('***') ? item.slice(3, -3) : item}
-								</div>
-							)
-						)}
+						{highlightDifferences(
+							Object.values(parametersDataset),
+							referenceSet
+						)[cell.row.index].map((item, index) => (
+							<div
+								key={index}
+								className={cn(
+									'inline-flex items-center w-fit py-0.5 px-2 rounded border border-transparent text-[0.75rem] font-medium transition-colors bg-badge-0',
+									item.isDifferent
+										? 'bg-primary-wash border-primary'
+										: 'bg-badge-1'
+								)}
+							>
+								{item.value}
+							</div>
+						))}
 					</ul>
 				);
-
-				return <BadgeList badges={value.parameters} className="bg-badge-1" />;
 			}
 		}
 	];

diff --git a/libs/bublik/features/run/src/lib/result-table/result-table.component.tsx b/libs/bublik/features/run/src/lib/result-table/result-table.component.tsx
@@ -1,16 +1,22 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 /* SPDX-FileCopyrightText: 2021-2023 OKTET Labs Ltd. */
-import { FC, memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 
 import { RunDataResults } from '@/shared/types';
-import { TwTable, TableClassNames, cn, Skeleton } from '@/shared/tailwind-ui';
+import {
+	TwTable,
+	TableClassNames,
+	cn,
+	Skeleton,
+	TwTableProps
+} from '@/shared/tailwind-ui';
 
 import { getColumns } from './result-table.columns';
 export interface SkeletonProps {
 	rowCount?: number;
 }
 
-export const ResultTableLoading: FC<SkeletonProps> = ({ rowCount = 25 }) => {
+export const ResultTableLoading = ({ rowCount = 25 }: SkeletonProps) => {
 	return (
 		<div className="flex flex-col gap-1 mt-1 mb-1">
 			<Skeleton className="rounded-b h-[38px]" />
@@ -51,21 +57,30 @@ const classNames: TableClassNames<RunDataResults> = {
 export interface ResultTableProps {
 	runId: string;
 	data: RunDataResults[];
+	rowId: string;
+	getRowProps: TwTableProps<RunDataResults>['getRowProps'];
 }
 
-export const ResultTable = memo(({ runId, data = [] }: ResultTableProps) => {
-	const columns = useMemo(() => getColumns(runId, data), [data, runId]);
+export const ResultTable = memo(
+	({ runId, data = [], rowId, getRowProps }: ResultTableProps) => {
+		const columns = useMemo(
+			() => getColumns(runId, rowId, data),
+			[data, rowId, runId]
+		);
 
-	return (
-		<div className="px-4 py-2">
-			<TwTable<RunDataResults>
-				data={data}
-				columns={columns}
-				classNames={classNames}
-				stickyOffset={-69}
-				manualPagination
-				enableSorting={false}
-			/>
-		</div>
-	);
-});
+		return (
+			<div className="px-4 py-2">
+				<TwTable<RunDataResults>
+					data={data}
+					getRowId={(row) => String(row.result_id)}
+					columns={columns}
+					classNames={classNames}
+					stickyOffset={-69}
+					manualPagination
+					enableSorting={false}
+					getRowProps={getRowProps}
+				/>
+			</div>
+		);
+	}
+);
diff --git a/libs/bublik/features/run/src/lib/result-table/result-table.container.tsx b/libs/bublik/features/run/src/lib/result-table/result-table.container.tsx
@@ -1,15 +1,16 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 /* SPDX-FileCopyrightText: 2021-2023 OKTET Labs Ltd. */
-import { FC, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Row } from '@tanstack/react-table';
 
-import { RunData } from '@/shared/types';
+import { RunData, RunDataResults } from '@/shared/types';
 import { useGetResultsTableQuery } from '@/services/bublik-api';
+import { TwTableProps } from '@/shared/tailwind-ui';
 
 import { useRunTableRowState } from '../hooks';
 import { ColumnId } from '../run-table/types';
 import { ResultTableLoading, ResultTable } from './result-table.component';
-import { getRowValues } from '../run-table/utils';
+import { getRowValues } from '../run-table';
 
 const DEFAULT_REQUEST = {
 	[ColumnId.Total]: { results: [], resultProperties: [] }
@@ -20,12 +21,14 @@ export interface ResultTableContainerProps {
 	row: Row<RunData>;
 }
 
-export const ResultTableContainer: FC<ResultTableContainerProps> = ({
+export const ResultTableContainer = ({
 	runId,
 	row
-}) => {
+}: ResultTableContainerProps) => {
 	const { id: rowId } = row;
 	const rowState = useRunTableRowState().rowState[rowId];
+	const { updateRowState } = useRunTableRowState();
+
 	const requests = rowState?.requests
 		? Object.keys(rowState.requests).length
 			? rowState.requests
@@ -49,11 +52,46 @@ export const ResultTableContainer: FC<ResultTableContainerProps> = ({
 		);
 	}, [requests, values]);
 
-	if (isError) return <div>Something went wrong...</div>;
+	const getRowProps = useCallback<
+		NonNullable<TwTableProps<RunDataResults>['getRowProps']>
+	>(
+		(_, row) => {
+			const className =
+				rowState?.referenceDiffRowId === row.id ? 'border-primary' : '';
+			return {
+				className,
+				onClick: (e) => {
+					if (rowState?.referenceDiffRowId === row.id) {
+						updateRowState({
+							rowId,
+							referenceDiffRowId: undefined,
+							requests: rowState?.requests
+						});
+					} else {
+						updateRowState({
+							rowId,
+							referenceDiffRowId: row.id,
+							requests: rowState?.requests
+						});
+					}
+				}
+			};
+		},
+		[rowId, rowState?.referenceDiffRowId, rowState?.requests, updateRowState]
+	);
+
+	if (isError) return <div className="">Something went wrong...</div>;
 
 	if (isFetching) return <ResultTableLoading rowCount={skeletonCount} />;
 
 	if (!data) return <div>No data...</div>;
 
-	return <ResultTable data={data} runId={runId} />;
+	return (
+		<ResultTable
+			data={data}
+			runId={runId}
+			rowId={rowId}
+			getRowProps={getRowProps}
+		/>
+	);
 };