From dddc1a68b4dba778558423335ce1aebbf2a4fdab Mon Sep 17 00:00:00 2001
From: ckitsanelis <ckitsanelis@gmail.com>
Date: Thu, 28 Sep 2023 15:52:31 +0200
Subject: [PATCH] Fix issue in flag edit and prohibit empty names

---
 src/viewer/App.tsx                        |  1 -
 src/viewer/rules/Dialogs/FlagsDialog.tsx  | 13 +++++++++----
 src/viewer/rules/Dialogs/StatesDialog.tsx | 12 ++++++++----
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/viewer/App.tsx b/src/viewer/App.tsx
index 93aea12..48aea66 100644
--- a/src/viewer/App.tsx
+++ b/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);
diff --git a/src/viewer/rules/Dialogs/FlagsDialog.tsx b/src/viewer/rules/Dialogs/FlagsDialog.tsx
index 84933d0..05b4fd8 100644
--- a/src/viewer/rules/Dialogs/FlagsDialog.tsx
+++ b/src/viewer/rules/Dialogs/FlagsDialog.tsx
@@ -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 = [
@@ -186,7 +185,7 @@ export default class FlagsDialog extends React.Component<Props, State> {
 					value={rule.column}
 					key="Name"
 					onInput={(e) =>
-						this.updateRule(rule.setColumn(e.target.value || defaultRuleColumn), ruleIndex)
+						this.updateRule(rule.setColumn(e.target.value), ruleIndex)
 					}
 				/>,
 			],
@@ -262,14 +261,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 === '' ? true : false}
 								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>
diff --git a/src/viewer/rules/Dialogs/StatesDialog.tsx b/src/viewer/rules/Dialogs/StatesDialog.tsx
index e7cb070..04da64c 100644
--- a/src/viewer/rules/Dialogs/StatesDialog.tsx
+++ b/src/viewer/rules/Dialogs/StatesDialog.tsx
@@ -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 = [
@@ -165,7 +164,7 @@ export default class StatesDialog extends React.Component<Props, State> {
 					value={rule.column}
 					key="Name"
 					onInput={(e) =>
-						this.updateRule(rule.setColumn(e.target.value || defaultRuleColumn), ruleIndex)
+						this.updateRule(rule.setColumn(e.target.value), ruleIndex)
 					}
 				/>,
 			],
@@ -219,14 +218,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 === '' ? true : false}
 								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>