Merge branch 'main' into bugfix-flag-annotations

TNO · Oct 3, 2023 · c887b6d · c887b6d
2 parents ff7c3b7 + 5f28719
commit c887b6d
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 11 deletions.
diff --git a/media/style.css b/media/style.css
@@ -82,4 +82,11 @@ div.vertical-line {
     /* Causes the line to float to right of content. 
       You can instead use position:absolute or display:inline-block
       if this fits better with your design */
+}
+
+.box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
 }
diff --git a/src/viewer/App.tsx b/src/viewer/App.tsx
@@ -124,7 +124,8 @@ export default class App extends React.Component<Props, State> {
 	}
 
 	componentDidUpdate(prevProps: Props, prevState: State) {
-		if (this.state.logFile !== prevState.logFile) {
+		if (this.state.logFile !== prevState.logFile ||
+			this.state.collapsibleRows !== prevState.collapsibleRows) {
 			this.render();
 		}
 	}
@@ -420,6 +421,10 @@ export default class App extends React.Component<Props, State> {
 		this.setState({ collapsibleRows });
 	}
 
+	clearSegmentation() {
+		this.setState({ collapsibleRows : {} });
+	}
+
 	switchBooleanState(name: string) {
 		if (name === "coloredTable")
 			this.setState(({ coloredTable }) => ({ coloredTable: !coloredTable }));
@@ -588,6 +593,7 @@ export default class App extends React.Component<Props, State> {
 							onSelectedRowsChanged={(index, e) => this.handleSelectedLogRow(index, e)}
 							onRowPropsChanged={(index, isRendered) => this.handleRowCollapse(index, isRendered)}
 							collapsibleRows={this.state.collapsibleRows}
+							clearSegmentation={() => this.clearSegmentation()}
 						/>
 					</div>
 					<div

diff --git a/src/viewer/hooks/useRowProperty.ts b/src/viewer/hooks/useRowProperty.ts
@@ -17,7 +17,11 @@ export const constructNewSegment = (start: number, end: number, level: number) =
 
 export const getSegmentMaxLevel = (segments: { [key: number]: Segment }) => {
 	const levels = Object.values(segments).map((segment) => segment.level);
-	return Math.max(...levels);
+	if (levels !== undefined && levels.length > 0) {
+		return Math.min(4, Math.max(...levels));
+	} else {
+		return -1;
+	}
 };
 
 export const getSegment = (segments: Segment[], start: number) => {

diff --git a/src/viewer/log/LogView.tsx b/src/viewer/log/LogView.tsx
@@ -24,6 +24,7 @@ import LogFile from "../LogFile";
 import ReactResizeDetector from "react-resize-detector";
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 import { getSegmentMaxLevel } from "../hooks/useRowProperty";
+import Tooltip from "@mui/material/Tooltip";
 
 interface Props {
 	logFile: LogFile;
@@ -37,6 +38,7 @@ interface Props {
 	structureMatches: number[][];
 	structureMatchesLogRows: number[];
 	collapsibleRows: { [key: number]: Segment };
+	clearSegmentation: () => void;
 }
 interface State {
 	state: LogViewState | undefined;
@@ -82,9 +84,6 @@ export default class LogView extends React.Component<Props, State> {
 		if (prevProps.currentStructureMatch[0] !== this.props.currentStructureMatch[0]) {
 			this.updateState(this.props.currentStructureMatch[0]);
 		}
-		// if (prevState.columnWidth !== this.state.columnWidth) {
-		//     this.render(); //TODO: Discuss whether this is redundant.
-		// }
 	}
 
 	renderColumn(
@@ -149,7 +148,7 @@ export default class LogView extends React.Component<Props, State> {
 
 		let counter = firstRender;
 		const maxLevel = Math.min(4, getSegmentMaxLevel(collapsibleRows));
-		const segmentWidth: number = (this.getMaxLevel() + 1) * 30 + BORDER_SIZE;
+		const segmentWidth: number = (getSegmentMaxLevel(this.props.collapsibleRows) + 1) * 30 + BORDER_SIZE;
 		for (let r = firstRender; counter <= lastRender; r++) {
 			if (rowProperties[r].isSearchResult && rowProperties[r].isRendered) {
 				let rowStyle;
@@ -388,8 +387,9 @@ export default class LogView extends React.Component<Props, State> {
 		return visibleRows.length;
 	}
 
-	getMaxLevel() {
-		return Math.min(4, getSegmentMaxLevel(this.props.collapsibleRows));
+	deleteSegmentAnnotations(){
+		this.setState({collapsed : []});
+		this.props.clearSegmentation();
 	}
 
 	renderHeader(width: number) {
@@ -399,11 +399,28 @@ export default class LogView extends React.Component<Props, State> {
 			position: "absolute",
 			left: this.state.state ? this.state.state.scrollLeft * -1 : 0,
 		};
-		const segmentWidth: number = (this.getMaxLevel() + 1) * 30 + BORDER_SIZE;
+		const segmentWidth: number = (getSegmentMaxLevel(this.props.collapsibleRows) + 1) * 30 + BORDER_SIZE;
 		return (
 			<div style={HEADER_STYLE} className="header-background">
 				<div style={style}>
-					<div style={getSegmentStyle(segmentWidth, LOG_HEADER_HEIGHT)}></div>
+					<div style={getSegmentStyle(segmentWidth, LOG_HEADER_HEIGHT)}>
+						{Object.keys(this.props.collapsibleRows).length > 0 && 
+						<div className="box">
+							<Tooltip
+									title={<h3>Delete all the segment annotations</h3>}
+									placement="bottom"
+									arrow
+								>
+									<VSCodeButton
+										appearance="icon"
+										key={"delete"}
+										onClick={() => {this.deleteSegmentAnnotations()}}
+									>
+										<i className="codicon codicon-close" />
+									</VSCodeButton>
+							</Tooltip>
+						</div>}
+					</div>
 					{this.props.logFile
 						.getSelectedHeader()
 						.map((h, i) => this.renderHeaderColumn(h.name, i, true, this.columnWidth(h.name)))}
@@ -433,7 +450,12 @@ export default class LogView extends React.Component<Props, State> {
 	render() {
 		const { logFile } = this.props;
 		const containerHeight = this.getVisibleRows() * LOG_ROW_HEIGHT;
-		const containerWidth =
+		const containerWidth = Object.keys(this.props.collapsibleRows).length > 0 ?
+			logFile.amountOfColumns() * BORDER_SIZE +
+			logFile.headers.reduce(
+				(partialSum: number, h) => partialSum + this.state.columnWidth[h.name],
+				0,
+			) + (getSegmentMaxLevel(this.props.collapsibleRows) + 1) * 30 + BORDER_SIZE : 
 			logFile.amountOfColumns() * BORDER_SIZE +
 			logFile.headers.reduce(
 				(partialSum: number, h) => partialSum + this.state.columnWidth[h.name],