Merge branch 'main' of https://github.com/TNO/vscode-tracy into compa…

…rison-improvement
TNO · Sep 26, 2023 · 9dcf62b · 9dcf62b
2 parents 0b06de9 + 6eec10e
commit 9dcf62b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 28 deletions.
diff --git a/src/viewer/hooks/useStyleManager.ts b/src/viewer/hooks/useStyleManager.ts
@@ -76,7 +76,6 @@ export const getHeaderColumnStyle = (
 		display: "inline-block",
 		height,
 		width: columnWidth,
-		borderLeft: BORDER,
 	};
 
 	return headerColumnStyle;
@@ -104,6 +103,7 @@ export const getHeaderColumnInnerStyle = (
 		alignItems: "center",
 		justifyContent: isHeader ? "center" : "left",
 		paddingLeft: "2px",
+		borderLeft: BORDER,
 	};
 
 	return headerColumnInnerStyle;

diff --git a/src/viewer/log/LogView.tsx b/src/viewer/log/LogView.tsx
@@ -95,7 +95,7 @@ export default class LogView extends React.Component<Props, State> {
 		colorMap: string,
 	) {
 		const height = isHeader ? LOG_HEADER_HEIGHT : LOG_ROW_HEIGHT;
-		const widthNew = width + BORDER_SIZE; //increase width with 1px, because the border is 1px
+
 		let color = "transparent";
 		let fontColor = "";
 
@@ -107,8 +107,7 @@ export default class LogView extends React.Component<Props, State> {
 				fontColor = "#ffffff";
 			}
 		}
-
-		const columnHeaderStyle = getHeaderColumnStyle(widthNew, columnIndex, height);
+		const columnHeaderStyle = getHeaderColumnStyle(width, columnIndex, height);
 		const columnHeaderInnerStyle = getHeaderColumnInnerStyle(height, isHeader);
 		const colorStyle: React.CSSProperties = { backgroundColor: color, color: fontColor };
 		const innerStyle = { ...columnHeaderInnerStyle, ...colorStyle };
@@ -415,8 +414,7 @@ export default class LogView extends React.Component<Props, State> {
 
 	renderHeaderColumn(value: string, columnIndex: number, isHeader: boolean, width: number) {
 		const height = isHeader ? LOG_HEADER_HEIGHT : LOG_ROW_HEIGHT;
-		const widthNew = width + BORDER_SIZE; //increase width with 1px, because the border is 1px
-		const columnHeaderStyle = getHeaderColumnStyle(widthNew, columnIndex, height);
+		const columnHeaderStyle = getHeaderColumnStyle(width, columnIndex, height);
 		const columnHeaderInnerStyle = getHeaderColumnInnerStyle(height, isHeader);
 
 		return (

diff --git a/src/viewer/structures/StructureTable.tsx b/src/viewer/structures/StructureTable.tsx
@@ -79,21 +79,35 @@ export default class StructureTable extends React.Component<Props, State> {
 	}
 
 	setColumnWidth(name: string, width: number) {
+		//update the state for triggering the render
 		this.setState((prevState) => {
 			const columnWidth = { ...prevState.columnWidth };
 			columnWidth[name] = width;
 			return { columnWidth };
 		});
 	}
 
-	columnWidth(name: string) {
-		return LOG_COLUMN_WIDTH_LOOKUP[name] ?? LOG_DEFAULT_COLUMN_WIDTH;
+	getInitialColumnWidth(name: string) {
+		return LOG_COLUMN_WIDTH_LOOKUP[name.toLowerCase()] ?? LOG_DEFAULT_COLUMN_WIDTH;
+	}
+
+	renderHeader(containerWidth: number) {
+		const style = getStructureTableHeaderStyle(containerWidth);
+
+		return (
+			<div id="structureHeader" style={style}>
+				<div className="header-background">
+					{this.props.headerColumns.map((h, i) =>
+						this.renderHeaderColumn(h.name, i, this.getInitialColumnWidth(h.name)),
+					)}
+				</div>
+			</div>
+		);
 	}
 
 	renderHeaderColumn(value: string, columnIndex: number, width: number) {
 		const height = LOG_HEADER_HEIGHT;
-		const widthNew = columnIndex !== 0 ? width + BORDER_SIZE : width;
-		const headerColumnStyle = getHeaderColumnStyle(widthNew, columnIndex, height);
+		const headerColumnStyle = getHeaderColumnStyle(width, columnIndex, height);
 		const headerColumnInnerStyle = getHeaderColumnInnerStyle(height, true);
 		return (
 			<ReactResizeDetector
@@ -108,24 +122,9 @@ export default class StructureTable extends React.Component<Props, State> {
 		);
 	}
 
-	renderHeader(containerWidth: number) {
-		const style = getStructureTableHeaderStyle(containerWidth);
-
-		return (
-			<div id="structureHeader" style={style}>
-				<div className="header-background">
-					{this.props.headerColumns.map((h, i) =>
-						this.renderHeaderColumn(h.name, i, this.columnWidth(h.name)),
-					)}
-				</div>
-			</div>
-		);
-	}
-
 	renderColumn(rowIndex: number, cellIndex: number, width: number) {
 		const { structureEntries } = this.props;
-		const widthNew = cellIndex !== 0 ? width + BORDER_SIZE : width;
-		const columnStyle = getStructureTableColumnStyle(widthNew, cellIndex);
+		const columnStyle = getStructureTableColumnStyle(width, cellIndex);
 		const columnInnerStyle = getStructureTableCellSelectionStyle(
 			structureEntries,
 			rowIndex,
@@ -253,8 +252,8 @@ export default class StructureTable extends React.Component<Props, State> {
 		const containerHeight =
 			numberOfRows * LOG_ROW_HEIGHT + (numberOfRows - 1) * STRUCTURE_LINK_HEIGHT;
 		const containerWidth =
-			(headerColumns.length - 1) * BORDER_SIZE +
-			headerColumns.reduce((partialSum: number, h) => partialSum + this.columnWidth(h.name), 0);
+			headerColumns.length * BORDER_SIZE +
+			headerColumns.reduce((partialSum: number, h) => partialSum + this.state.columnWidth[h.name], 0);
 
 		return (
 			<div