Bugfix flag annotations

src/viewer/App.tsx

@@ -113,7 +113,6 @@ export default class App extends React.Component<Props, State> {
 			currentStructureMatch: [],
 			lastSelectedRow: undefined,
 			collapsibleRows: {},
-			// collapsibleRows: { 1: constructNewSegment(1, 10, 0), 2: constructNewSegment(2, 6, 1), 5: constructNewSegment(5, 15, 0), 7: constructNewSegment(7, 10, 1), 0 : constructNewSegment(0, 20, 2)},
 		};
 
 		this.onMessage = this.onMessage.bind(this);
@@ -197,29 +196,30 @@ export default class App extends React.Component<Props, State> {
 		}
 	}
 
-	handleDialogActions(newRules: Rule[], is_close: boolean) {
+	handleAnnotationDialog(newRules: Rule[], isClose: boolean) {
 		this.vscode.postMessage({ type: "saveRules", rules: newRules.map((r) => r.toJSON()) });
-		if (is_close === true)
+		if (isClose === true)
 			this.setState({
 				rules: newRules,
-				logFile: this.state.logFile.update(newRules),
+				logFile: this.state.logFile.updateRules(newRules),
 				showStatesDialog: false,
 				showFlagsDialog: false,
 			});
 		else this.setState({ rules: newRules });
 	}
 
-	handleSelectDialog(selectedCols: boolean[], selectedColsMini: boolean[], is_close: boolean) {
-		if (is_close === true) {
+	handleSelectDialog(selectedCols: boolean[], selectedColsMini: boolean[], isClose: boolean) {
+		if (isClose === true) {
 			this.setState({
 				selectedColumns: selectedCols,
+				selectedColumnsMini: selectedColsMini,
 				logFile: this.state.logFile.setSelectedColumns(selectedCols, selectedColsMini),
 				showSelectDialog: false,
 			});
 		}
 	}
 
-	handleStructureDialogActions(isClosing: boolean) {
+	handleStructureDialog(isClosing: boolean) {
 		if (isClosing === true) {
 			logHeaderColumnTypes = [];
 			this.handleStructureUpdate(isClosing);
@@ -612,7 +612,7 @@ export default class App extends React.Component<Props, State> {
 							>
 								<VSCodeButton
 									appearance="icon"
-									onClick={() => this.handleStructureDialogActions(false)}
+									onClick={() => this.handleStructureDialog(false)}
 								>
 									<i className="codicon codicon-three-bars" />
 								</VSCodeButton>
@@ -662,16 +662,16 @@ export default class App extends React.Component<Props, State> {
 						<StatesDialog
 							logFile={this.state.logFile}
 							initialRules={this.state.rules}
-							onClose={(newRules) => this.handleDialogActions(newRules, true)}
-							onReturn={(newRules) => this.handleDialogActions(newRules, false)}
+							onClose={(newRules) => this.handleAnnotationDialog(newRules, true)}
+							onReturn={(newRules) => this.handleAnnotationDialog(newRules, false)}
 						/>
 					)}
 					{this.state.showFlagsDialog && (
 						<FlagsDialog
 							logFile={this.state.logFile}
 							initialRules={this.state.rules}
-							onClose={(newRules) => this.handleDialogActions(newRules, true)}
-							onReturn={(newRules) => this.handleDialogActions(newRules, false)}
+							onClose={(newRules) => this.handleAnnotationDialog(newRules, true)}
+							onReturn={(newRules) => this.handleAnnotationDialog(newRules, false)}
 						/>
 					)}
 					{this.state.showSelectDialog && (
@@ -694,7 +694,7 @@ export default class App extends React.Component<Props, State> {
 							logSelectedRows={this.state.selectedLogRows}
 							currentStructureMatchIndex={this.state.currentStructureMatchIndex}
 							numberOfMatches={this.state.structureMatches.length}
-							onClose={() => this.handleStructureDialogActions(true)}
+							onClose={() => this.handleStructureDialog(true)}
 							onStructureUpdate={() => this.handleStructureUpdate(false)}
 							onMatchStructure={(expression) => this.handleStructureMatching(expression)}
 							onDefineSegment={(entryExpression, exitExpression) =>

src/viewer/LogFile.tsx

@@ -39,11 +39,39 @@ export default class LogFile {
 		return logFile;
 	}
 
-	update(rules: Rule[]): LogFile {
-		this.updateHeaders(rules);
-		this.computeRulesValuesAndColors(rules);
-		this.setSelectedColumns(this.selectedColumns, this.selectedColumnsMini); //only show the selected columns after updating the rules
-		return this;
+	updateRules(rules: Rule[]): LogFile {
+		// Slower solution
+		const [updatedSelected, updatedSelectedMini] = this.updateSelectedColumns(rules)
+		const headers = LogFile.getHeaders(this.contentHeaders, rules);
+		const logFile = new LogFile(this.contentHeaders, headers, this.rows);
+		logFile.copyDefaultColumnColors(this.columnsColors);
+		logFile.computeRulesValuesAndColors(rules);
+		return logFile.setSelectedColumns(updatedSelected, updatedSelectedMini);
+
+		// Old solution
+		// this.updateSelectedColumns(rules);
+		// this.updateHeaders(rules);
+		// this.computeRulesValuesAndColors(rules);
+		// return this;
+	}
+
+	updateSelectedColumns(rules: Rule[]) {
+		const existingHeaders = this.headers.map(h => h.name);
+		const updatedSelected = this.selectedColumns.slice(0, this.contentHeaders.length);
+		const updatedSelectedMini = this.selectedColumnsMini.slice(0, this.contentHeaders.length);
+
+		for (let i = 0; i < rules.length; i++) {
+			const existingIndex = existingHeaders.indexOf(rules[i].column);
+			if (existingIndex > -1) {
+				updatedSelected.push(this.selectedColumns[existingIndex]);
+				updatedSelectedMini.push(this.selectedColumnsMini[existingIndex]);
+			}
+			else {
+				updatedSelected.push(true);
+				updatedSelectedMini.push(true);
+			}
+		}
+		return [updatedSelected, updatedSelectedMini]
 	}
 
 	setSelectedColumns(selected: boolean[], selectedMini: boolean[]) {
@@ -99,6 +127,12 @@ export default class LogFile {
 		}
 	}
 
+	private copyDefaultColumnColors(colours: string[][]) {
+		for (let i = 0; i < this.contentHeaders.length; i++) {
+			this.columnsColors[i] = colours[i];
+		}
+	}
+
 	private computeRulesValuesAndColors(rules: Rule[]) {
 		// Compute rules values
 		const startIndex = this.headers.length - rules.length;

src/viewer/log/SelectColDialog.tsx

@@ -94,9 +94,9 @@ export default class SelectColDialog extends React.Component<Props, State> {
 		);
 	}
 
-	onDialogClick(is_close: boolean) {
+	onDialogClick(isClose: boolean) {
 		this.setState({ showDialog: false }, () => {
-			if (is_close === true) this.props.onClose(this.state.selectedCol, this.state.selectedColMini);
+			if (isClose === true) this.props.onClose(this.state.selectedCol, this.state.selectedColMini);
 		});
 	}
 

src/viewer/rules/Dialogs/FlagsDialog.tsx

@@ -95,14 +95,14 @@ export default class FlagsDialog extends React.Component<Props, State> {
 		this.setState({ rules });
 	}
 
-	onDialogClick(is_close: boolean) {
+	onDialogClick(isClose: boolean) {
 		const ruleIndex = this.state.selectedRule;
 		if (ruleIndex !== -1) {
 			const rule = this.state.rules[ruleIndex].reset();
 			this.updateRule(rule, ruleIndex);
 		}
 		this.setState({ showEdit: false }, () => {
-			if (is_close === true) this.props.onClose(this.state.rules);
+			if (isClose === true) this.props.onClose(this.state.rules);
 			else this.props.onReturn(this.state.rules);
 		});
 	}
@@ -124,16 +124,16 @@ export default class FlagsDialog extends React.Component<Props, State> {
 			});
 		};
 
-		const onEditAction = (table_index: number) => {
+		const onEditAction = (tableIndex: number) => {
 			const index = this.state.rules.findIndex(
-				(x) => x === this.state.rules.filter((r) => r.ruleType === "Flag rule")[table_index],
+				(x) => x === this.state.rules.filter((r) => r.ruleType === "Flag rule")[tableIndex],
 			);
 			this.setState({ showEdit: true, selectedRule: index });
 		};
 
-		const onDeleteAction = (table_index: number) => {
+		const onDeleteAction = (tableIndex: number) => {
 			const index = this.state.rules.findIndex(
-				(x) => x === this.state.rules.filter((r) => r.ruleType === "Flag rule")[table_index],
+				(x) => x === this.state.rules.filter((r) => r.ruleType === "Flag rule")[tableIndex],
 			);
 			if (this.state.selectedRule === index) this.setState({ selectedRule: -1 });
 			this.setState({ rules: this.state.rules.filter((r, i) => i !== index) });
@@ -175,7 +175,6 @@ export default class FlagsDialog extends React.Component<Props, State> {
 		const userColumns = this.state.rules
 			.map((r, i) => r.column)
 			.filter((name) => name != rule.column);
-		const defaultRuleColumn = `FlagRule${ruleIndex + 1}`;
 		const keyWidth = "100px";
 		const textFieldWidth = "250px";
 		const rows = [
@@ -185,8 +184,9 @@ export default class FlagsDialog extends React.Component<Props, State> {
 					style={{ width: textFieldWidth, marginBottom: "2px" }}
 					value={rule.column}
 					key="Name"
+					placeholder="Required"
 					onInput={(e) =>
-						this.updateRule(rule.setColumn(e.target.value || defaultRuleColumn), ruleIndex)
+						this.updateRule(rule.setColumn(e.target.value), ruleIndex)
 					}
 				/>,
 			],
@@ -202,7 +202,7 @@ export default class FlagsDialog extends React.Component<Props, State> {
 			[
 				"Type",
 				<VSCodeDropdown
-					disabled={ruleAsFlag.flags.length > 0 ? true : false}
+					disabled={ruleAsFlag.flags.length > 0}
 					style={{ width: textFieldWidth, marginBottom: "2px" }}
 					value={flagType}
 					key="Type"
@@ -262,14 +262,20 @@ export default class FlagsDialog extends React.Component<Props, State> {
 						{this.state.showEdit && <div className="title-big">Edit Flag Annotation Column</div>}
 						{this.state.showEdit && (
 							<VSCodeButton
-								style={{ marginLeft: "auto" }}
 								appearance="icon"
+								style={{ marginLeft: "auto" }}
+								disabled={this.state.rules[this.state.selectedRule].column === ''}
 								onClick={() => this.onDialogClick(false)}
 							>
 								<i className="codicon codicon-arrow-left" />
 							</VSCodeButton>
+
 						)}
-						<VSCodeButton appearance="icon" onClick={() => this.onDialogClick(true)}>
+						<VSCodeButton
+							appearance="icon"
+							disabled={(this.state.selectedRule === -1) || ((this.state.selectedRule !== -1) && (this.state.rules[this.state.selectedRule].column !== '')) ? false : true}
+							onClick={() => this.onDialogClick(true)}
+						>
 							<i className="codicon codicon-close" />
 						</VSCodeButton>
 					</div>

src/viewer/rules/Dialogs/StatesDialog.tsx

@@ -82,14 +82,14 @@ export default class StatesDialog extends React.Component<Props, State> {
 		this.setState({ rules });
 	}
 
-	onDialogClick(is_close: boolean) {
+	onDialogClick(isClose: boolean) {
 		const ruleIndex = this.state.selectedRule;
 		if (ruleIndex !== -1) {
 			const rule = this.state.rules[ruleIndex].reset();
 			this.updateRule(rule, ruleIndex);
 		}
 		this.setState({ showEdit: false }, () => {
-			if (is_close === true) this.props.onClose(this.state.rules);
+			if (isClose === true) this.props.onClose(this.state.rules);
 			else this.props.onReturn(this.state.rules);
 		});
 	}
@@ -111,16 +111,16 @@ export default class StatesDialog extends React.Component<Props, State> {
 			});
 		};
 
-		const onEditAction = (table_index: number) => {
+		const onEditAction = (tableIndex: number) => {
 			const index = this.state.rules.findIndex(
-				(x) => x === this.state.rules.filter((r) => r.ruleType === "State based rule")[table_index],
+				(x) => x === this.state.rules.filter((r) => r.ruleType === "State based rule")[tableIndex],
 			);
 			this.setState({ showEdit: true, selectedRule: index });
 		};
 
-		const onDeleteAction = (table_index: number) => {
+		const onDeleteAction = (tableIndex: number) => {
 			const index = this.state.rules.findIndex(
-				(x) => x === this.state.rules.filter((r) => r.ruleType === "State based rule")[table_index],
+				(x) => x === this.state.rules.filter((r) => r.ruleType === "State based rule")[tableIndex],
 			);
 			if (this.state.selectedRule === index) this.setState({ selectedRule: -1 });
 			this.setState({ rules: this.state.rules.filter((r, i) => i !== index) });
@@ -154,7 +154,6 @@ export default class StatesDialog extends React.Component<Props, State> {
 		const userColumns = this.state.rules
 			.map((r, i) => r.column)
 			.filter((name) => name != rule.column);
-		const defaultRuleColumn = `StateRule${ruleIndex + 1}`;
 		const keyWidth = "100px";
 		const textFieldWidth = "250px";
 		const rows = [
@@ -164,8 +163,9 @@ export default class StatesDialog extends React.Component<Props, State> {
 					style={{ width: textFieldWidth, marginBottom: "2px" }}
 					value={rule.column}
 					key="Name"
+					placeholder="Required"
 					onInput={(e) =>
-						this.updateRule(rule.setColumn(e.target.value || defaultRuleColumn), ruleIndex)
+						this.updateRule(rule.setColumn(e.target.value), ruleIndex)
 					}
 				/>,
 			],
@@ -219,14 +219,19 @@ export default class StatesDialog extends React.Component<Props, State> {
 						)}
 						{this.state.showEdit && (
 							<VSCodeButton
-								style={{ marginLeft: "auto" }}
 								appearance="icon"
+								style={{ marginLeft: "auto" }}
+								disabled={this.state.rules[this.state.selectedRule].column === ''}
 								onClick={() => this.onDialogClick(false)}
 							>
 								<i className="codicon codicon-arrow-left" />
 							</VSCodeButton>
 						)}
-						<VSCodeButton appearance="icon" onClick={() => this.onDialogClick(true)}>
+						<VSCodeButton
+							appearance="icon"
+							disabled={(this.state.selectedRule === -1) || ((this.state.selectedRule !== -1) && (this.state.rules[this.state.selectedRule].column !== '')) ? false : true}
+							onClick={() => this.onDialogClick(true)}
+						>
 							<i className="codicon codicon-close" />
 						</VSCodeButton>
 					</div>

src/viewer/rules/StateBasedRule.tsx

@@ -132,16 +132,16 @@ export default class StateBasedRule extends Rule {
 		user_columns: string[],
 		logFile: LogFile,
 	) {
-		const editStateName = (state_index: number, value: string) => {
+		const editStateName = (stateIndex: number, value: string) => {
 			const states = [...this.ruleStates];
-			const previousName = states[state_index].name;
+			const previousName = states[stateIndex].name;
 			for (let i = 0; i < states.length; i++) {
 				for (let j = 0; j < states[i].transitions.length; j++) {
 					if (states[i].transitions[j].destination === previousName)
 						states[i].transitions[j].destination = value;
 				}
 			}
-			states[state_index] = { ...states[state_index], ["name"]: value };
+			states[stateIndex] = { ...states[stateIndex], ["name"]: value };
 			onEdit(this.setStates(states, this.initialStateIndex));
 		};
 

src/viewer/rules/Tables/FlagTable.tsx

@@ -7,10 +7,10 @@ interface Props {
 	hideHeader?: boolean;
 	noRowsText?: string;
 	highlightRow?: number | null;
-	onAddSubconditionAction?: (condition_index: number) => void;
-	onDeleteSubconditionAction?: (condition_index: number, sub_index: number) => void;
+	onAddSubconditionAction?: (conditionIndex: number) => void;
+	onDeleteSubconditionAction?: (conditionIndex: number, subconditionIndex: number) => void;
 	onAddConditionAction?: () => void;
-	onDeleteConditionAction?: (condition_index: number) => void;
+	onDeleteConditionAction?: (conditionIndex: number) => void;
 }
 
 const ACTIONS_WIDTH = "50px";

src/viewer/rules/Tables/TransitionTable.tsx

@@ -7,10 +7,10 @@ interface Props {
 	hideHeader?: boolean;
 	noRowsText?: string;
 	highlightRow?: number | null;
-	onAddConditionAction?: (transition_index: number) => void;
-	onDeleteConditionAction?: (transition_index: number, condition_index: number) => void;
+	onAddConditionAction?: (transitionIndex: number) => void;
+	onDeleteConditionAction?: (transitionIndex: number, conditionIndex: number) => void;
 	onAddTransitionAction?: () => void;
-	onDeleteTransitionAction?: (transition_index: number) => void;
+	onDeleteTransitionAction?: (transitionIndex: number) => void;
 }
 
 const ACTIONS_WIDTH = "50px";