fix bottom border of leafs

th2-net · Feb 11, 2025 · b42dc5e · b42dc5e
1 parent 9bb3a64
commit b42dc5e
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 47 deletions.
diff --git a/src/components/JSONViewer/EmptyLeaf.tsx b/src/components/JSONViewer/EmptyLeaf.tsx
@@ -53,8 +53,34 @@ const EmptyLeaf = ({
 				[`borderBottomColor`]: LEAF_COLORS[chunkColor],
 				[`borderBottomWidth`]: isNextDifferentChunk ? '4px' : undefined,
 				[`borderBottom${otherBorderSide}Radius`]: isNextDifferentChunk ? '0px' : undefined,
-			}}
-		/>
+				padding: '5px',
+				flexDirection: 'row',
+				justifyContent: borderSide === 'Left' ? 'flex-start' : 'flex-end',
+				alignItems: 'center',
+			}}>
+			{/*
+			{JSONViewerStore.isCompare && borderSide === 'Left' && (
+				<div
+					title='Move to nearest chunk in other panel'
+					className={`timestamp-pointer-left`}
+					onClick={e => {
+						e.preventDefault();
+						JSONViewerStore.scrollToNearest(chunkNode.chunk * JSONViewerStore.сhunkInterval, type);
+					}}
+				/>
+			)}
+			{JSONViewerStore.isCompare && borderSide === 'Right' && (
+				<div
+					title='Move to nearest chunk in other panel'
+					className={`timestamp-pointer-right`}
+					onClick={e => {
+						e.preventDefault();
+						JSONViewerStore.scrollToNearest(chunkNode.chunk * JSONViewerStore.сhunkInterval, type);
+					}}
+				/>
+			)} 
+			*/}
+		</div>
 	);
 };
 

diff --git a/src/components/JSONViewer/TreeLeaf.tsx b/src/components/JSONViewer/TreeLeaf.tsx
@@ -16,17 +16,7 @@ import { getChunk } from '../../helpers/JSONViewer';
 export const LEAF_COLORS = ['lightgray', 'black'];
 export const LEAF_BACKGROUND_COLORS = ['white', 'gainsboro'];
 
-const TreeLeaf = ({
-	treeNode,
-	type,
-	nextNodeTimestamp,
-	nextNodeChunk,
-}: {
-	treeNode: TreeNode;
-	type: PanelType;
-	nextNodeTimestamp?: number;
-	nextNodeChunk?: number;
-}) => {
+const TreeLeaf = ({ treeNode, type }: { treeNode: TreeNode; type: PanelType }) => {
 	const JSONViewerStore = useJSONViewerStore();
 	const isSelected = treeNode.id === JSONViewerStore.selectedTreeNode[type].id;
 	const viewType = treeNode.viewType || TreeViewType.EVENTS_LIST;
@@ -53,31 +43,16 @@ const TreeLeaf = ({
 		[treeNode.displayTimestamp, JSONViewerStore.сhunkInterval],
 	);
 
-	const nextChunk = useMemo(
-		() => nextNodeChunk || getChunk(nextNodeTimestamp, JSONViewerStore.сhunkInterval),
-		[nextNodeChunk, nextNodeTimestamp, JSONViewerStore.сhunkInterval],
-	);
-
 	const chunkColor = useMemo(() => JSONViewerStore.intervalsColor[chunk], [chunk]);
-	const nextChunkColor = useMemo(() => JSONViewerStore.intervalsColor[nextChunk], [nextChunk]);
-
-	const isNextDifferentChunk = useMemo(
-		() => nextChunkColor === chunkColor && nextChunk !== chunk && chunk !== -1 && nextChunk !== -1,
-		[chunk, nextChunk, chunkColor, nextChunkColor],
-	);
 
 	const leafRef = useRef<HTMLDivElement>(null);
 	const borderSide = type === 'default' ? 'Right' : 'Left';
-	const otherBorderSide = type === 'default' ? 'Left' : 'Right';
 
 	const borderStyle = {
 		[`border${borderSide}Color`]: chunk !== -1 ? LEAF_COLORS[chunkColor] : undefined,
 		[`border${borderSide}Width`]: chunk !== -1 ? '5px' : undefined,
 		[`borderTop${borderSide}Radius`]: chunk !== -1 ? '0px' : undefined,
 		[`borderBottom${borderSide}Radius`]: chunk !== -1 ? '0px' : undefined,
-		[`borderBottomColor`]: chunk !== -1 ? LEAF_COLORS[chunkColor] : undefined,
-		[`borderBottomWidth`]: isNextDifferentChunk ? '4px' : undefined,
-		[`borderBottom${otherBorderSide}Radius`]: isNextDifferentChunk ? '0px' : undefined,
 	};
 
 	const splitContent = JSONViewerStore.compareNameResults(
@@ -105,15 +80,19 @@ const TreeLeaf = ({
 
 	useEffect(() => {
 		const resizeObserver = new ResizeObserver(entries => {
-			JSONViewerStore.setNodeHeight(
-				treeNode.id,
-				treeNode.displayTimestamp,
+			const currentHeight = JSONViewerStore.heights[type].get(treeNode.id);
+			const height =
 				entries[0].borderBoxSize?.length > 0
 					? entries[0].borderBoxSize[0].blockSize
-					: entries[0].contentRect.height,
-				treeNode.parentIds,
-				type,
-			);
+					: entries[0].contentRect.height;
+			if (!currentHeight || currentHeight.height !== height)
+				JSONViewerStore.setNodeHeight(
+					treeNode.id,
+					treeNode.displayTimestamp,
+					height,
+					treeNode.parentIds,
+					type,
+				);
 		});
 		if (leafRef.current) {
 			resizeObserver.observe(leafRef.current);
@@ -174,7 +153,7 @@ const TreeLeaf = ({
 				backgroundColor: chunk !== -1 ? LEAF_BACKGROUND_COLORS[chunkColor] : undefined,
 				...borderStyle,
 			}}>
-			<div className='leafWrapper'>
+			<div className={borderSide === 'Left' ? 'leafWrapper-right' : 'leafWrapper'}>
 				{JSONViewerStore.isCompare && treeNode.displayTimestamp && borderSide === 'Left' && (
 					<div
 						title='Move to nearest chunk in other panel'

diff --git a/src/components/JSONViewer/TreeList.tsx b/src/components/JSONViewer/TreeList.tsx
@@ -31,17 +31,7 @@ const TreeList = ({ type }: { type: PanelType }) => {
 	const renderTree = React.useCallback(
 		(index: number, dataNode: TreeNode | NotebookNode | ChunkHeightData) => {
 			if ('id' in dataNode) {
-				const nextNode = JSONViewerStore.listData[type][index + 1];
-				const nextTimestamp = nextNode && 'id' in nextNode ? nextNode.displayTimestamp : undefined;
-				const nextChunk = nextNode && 'lastElement' in nextNode ? nextNode.chunk : undefined;
-				return (
-					<TreeLeaf
-						treeNode={dataNode}
-						type={type}
-						nextNodeTimestamp={nextTimestamp}
-						nextNodeChunk={nextChunk}
-					/>
-				);
+				return <TreeLeaf treeNode={dataNode} type={type} />;
 			}
 			if ('lastElement' in dataNode) {
 				const nextNode = JSONViewerStore.listData[type][index + 1];

diff --git a/src/styles/JSONviewer.scss b/src/styles/JSONviewer.scss
@@ -137,6 +137,14 @@
 	flex-direction: row;
 	align-items: center;
 	padding: 1px 5px 1px 0;
+	&-right {
+		display: flex;
+		gap: 5px;
+		flex-direction: row;
+		align-items: center;
+		padding: 1px 0 1px 5px;
+
+	}
 }
 
 .leaf {