make the segmentation sticky

TNO · Oct 6, 2023 · eb2f197 · eb2f197
1 parent 3a48aa5
commit eb2f197
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 20 deletions.
diff --git a/media/style.css b/media/style.css
@@ -67,10 +67,6 @@ div.resizable-content {
     vertical-align: middle;
 }
 
-.segment {
-    border: lpx;
-}
-
 div.vertical-line {
     width: 2px;
     /* Line width */
@@ -89,4 +85,17 @@ div.vertical-line {
     align-items: center;
     justify-content: center;
     height: 40px;
+    border-right: 1px;
+}
+
+.box1 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 28px;
+    border-right: 1px;
+    border-color: black;
+    background-color: white;
+    position: sticky;
+    z-index: 100;
 }
diff --git a/src/viewer/hooks/useStyleManager.ts b/src/viewer/hooks/useStyleManager.ts
@@ -88,11 +88,27 @@ export const getSegmentStyle = (columnWidth: number, height: number): React.CSSP
 		display: "inline-block",
 		height,
 		width: columnWidth,
+		position: "sticky",
+		left: 0,
+		borderRight: 1,
+		borderColor: "black"
 	};
 
 	return headerColumnStyle;
 };
 
+export const getSegmentRowStyle = (segmentWidth: number, top: number): React.CSSProperties => {
+	const segmentRowStyle: React.CSSProperties = {
+		position: "sticky",
+		height: LOG_ROW_HEIGHT,
+		top: top,
+		width: segmentWidth,
+		left: 0,
+		zIndex: 100,
+		borderRight: 1
+	}
+	return segmentRowStyle;
+}
 export const getHeaderColumnInnerStyle = (
 	height: number,
 	isHeader: boolean,

diff --git a/src/viewer/log/LogView.tsx b/src/viewer/log/LogView.tsx
@@ -18,6 +18,7 @@ import {
 	getLogViewRowSelectionStyle,
 	getLogViewStructureMatchStyle,
 	getSegmentStyle,
+	getSegmentRowStyle,
 } from "../hooks/useStyleManager";
 import { LogViewState, RowProperty, Segment, StructureMatchId } from "../types";
 import LogFile from "../LogFile";
@@ -168,24 +169,18 @@ export default class LogView extends React.Component<Props, State> {
 				for (let l = 0; l <= maxLevel; l++) {
 					rowResult.push(this.renderSegmentForRow(r, l));
 				}
+				const segmentStyle = getSegmentRowStyle(segmentWidth, counter * LOG_ROW_HEIGHT);
 				//add log rows
 				result.push(
 					<div style={{ display: "flex", flexDirection: "row", flexWrap: "nowrap" }}>
+						{Object.keys(this.props.collapsibleRows).length > 0 &&
 						<div
-							style={{
-								flex: 1,
-								display: "flex",
-								flexDirection: "row",
-								position: "absolute",
-								height: LOG_ROW_HEIGHT,
-								overflow: "hidden",
-								top: counter * LOG_ROW_HEIGHT,
-								width: segmentWidth,
-							}}
+							style={segmentStyle}
 							key={"seg" + r}
+							className="box1"
 						>
 							{rowResult}
-						</div>
+						</div>}
 						<div
 							key={r}
 							style={rowStyle}
@@ -219,8 +214,6 @@ export default class LogView extends React.Component<Props, State> {
 			alignContent: "center",
 			justifyContent: "center",
 			height: LOG_ROW_HEIGHT,
-			position: "relative",
-			width: 30,
 		};
 		let annotation = false;
 		if (collapsibleRows[r] != undefined && collapsibleRows[r].level == level) {
@@ -252,12 +245,12 @@ export default class LogView extends React.Component<Props, State> {
 		}
 		if (annotation) {
 			return (
-				<div style={{ ...style }} key={r + "_" + level}>
+				<div style={ style } key={r + "_" + level} className="box1">
 					<div style={{ backgroundColor: this.getRGB(level) }} className="vertical-line"></div>
 				</div>
 			);
 		} else {
-			return <div style={{ ...style }} key={r + "_" + level}></div>;
+			return <div style={ style } key={r + "_" + level} className="box1"></div>;
 		}
 	}
 
@@ -403,7 +396,7 @@ export default class LogView extends React.Component<Props, State> {
 		return (
 			<div style={HEADER_STYLE} className="header-background">
 				<div style={style}>
-					<div style={getSegmentStyle(segmentWidth, LOG_HEADER_HEIGHT)}>
+					<div style={getSegmentStyle(segmentWidth, LOG_HEADER_HEIGHT)} className="header-background">
 						{Object.keys(this.props.collapsibleRows).length > 0 && 
 						<div className="box">
 							<Tooltip