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 · b75d295 · b75d295
1 parent 3475b01
commit b75d295
Show file tree

Hide file tree

Showing 5 changed files with 189 additions and 20 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
@@ -0,0 +1,82 @@
+export function calculateGroupSize(
+	dataset: string[][],
+	maxMismatchCount: number
+) {
+	const referenceSet = dataset[0];
+	const referenceMap = new Map(
+		Array.from(referenceSet, (item) => item.split('=')) as [string, string][]
+	);
+
+	let groupSize = 1;
+
+	for (let i = 1; i < dataset.length; i++) {
+		const currentSet = dataset[i];
+		const currentSetMap = new Map(
+			Array.from(currentSet, (item) => item.split('=')) as [string, string][]
+		);
+
+		let mismatchCount = 0;
+
+		for (const [key, value] of referenceMap) {
+			if (currentSetMap.get(key) !== value) {
+				mismatchCount++;
+				if (mismatchCount >= maxMismatchCount) {
+					groupSize = i;
+					return groupSize;
+				}
+			}
+		}
+	}
+
+	return groupSize;
+}
+
+type DiffValue = {
+	value: string;
+	isDifferent?: boolean;
+};
+
+export function highlightDifferences(
+	dataset: string[][],
+	referenceSet: string[]
+): DiffValue[][] {
+	const PARAMETER_DELIMITER = '=';
+
+	const highlightedDataset = [];
+
+	const referenceMap = new Map<string, string>(
+		Array.from(referenceSet, (item) => item.split(PARAMETER_DELIMITER)) as [
+			string,
+			string
+		][]
+	);
+
+	for (let i = 0; i < dataset.length; i++) {
+		const currentSet = dataset[i];
+		const currentSetMap = new Map<string, string>(
+			Array.from(currentSet, (item) => item.split(PARAMETER_DELIMITER)) as [
+				string,
+				string
+			][]
+		);
+		const highlightedSet: DiffValue[] = [];
+
+		for (let j = 0; j < referenceSet.length; j++) {
+			const referenceKeyValue = referenceSet[j].split(PARAMETER_DELIMITER);
+			const currentKeyValue = currentSet[j].split(PARAMETER_DELIMITER);
+
+			if (
+				referenceMap.get(referenceKeyValue[0]) !==
+				currentSetMap.get(currentKeyValue[0])
+			) {
+				highlightedSet.push({ value: currentSet[j], isDifferent: true });
+			} else {
+				highlightedSet.push({ value: currentSet[j] });
+			}
+		}
+
+		highlightedDataset.push(highlightedSet);
+	}
+
+	return highlightedDataset;
+}
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
@@ -1,27 +1,36 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 /* SPDX-FileCopyrightText: 2021-2023 OKTET Labs Ltd. */
-import { FC } from 'react';
 import { ColumnDef } from '@tanstack/react-table';
 
 import { RunDataResults, RESULT_TYPE } from '@/shared/types';
 import { ResultLinksContainer } from '@/bublik/features/result-links';
-import { VerdictList, BadgeList } 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;
 	resultId: number;
 	result: RunDataResults;
 }
 
-const ResultLinks: FC<ResultLinksProps> = ({ runId, resultId, result }) => {
+const ResultLinks = ({ runId, resultId, result }: ResultLinksProps) => {
 	return (
 		<ResultLinksContainer runId={runId} resultId={resultId} result={result} />
 	);
 };
 
-export const getColumns = (runId: string): ColumnDef<RunDataResults>[] => {
+export const getColumns = (
+	runId: string,
+	rowId: string,
+	data: RunDataResults[]
+): ColumnDef<RunDataResults>[] => {
+	const parametersDataset = Object.fromEntries(
+		data.map((item) => [String(item.result_id), item.parameters])
+	);
+
 	return [
 		{
 			header: 'Actions',
@@ -85,11 +94,37 @@ export const getColumns = (runId: string): ColumnDef<RunDataResults>[] => {
 		},
 		{
 			header: 'Parameters',
-			accessorFn: (data) => data.parameters.map((payload) => ({ payload })),
+			accessorFn: (data) => data.parameters,
 			cell: (cell) => {
-				const value = cell.getValue<{ payload: string }[]>();
+				const value = cell.getValue<string[]>();
+				const referenceDiffRowId =
+					// eslint-disable-next-line react-hooks/rules-of-hooks
+					useRunTableRowState().rowState[rowId]?.referenceDiffRowId;
+
+				const referenceSet = referenceDiffRowId
+					? parametersDataset[referenceDiffRowId]
+					: value;
 
-				return <BadgeList badges={value} className="bg-badge-1" />;
+				return (
+					<ul className="flex gap-1 flex-wrap">
+						{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>
+				);
 			}
 		}
 	];

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,28 @@ const classNames: TableClassNames<RunDataResults> = {
 export interface ResultTableProps {
 	runId: string;
 	data: RunDataResults[];
+	rowId: string;
+	getRowProps: TwTableProps<RunDataResults>['getRowProps'];
 }
 
-export const ResultTable: FC<ResultTableProps> = memo(
-	({ runId, data = [] }) => {
-		const columns = useMemo(() => getColumns(runId), [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}
+					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}
+		/>
+	);
 };