Options presented in dropdown in annotation edit page

TNO · Oct 16, 2023 · 71214d5 · 71214d5
1 parent 3945ebf
commit 71214d5
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 44 deletions.
diff --git a/src/viewer/rules/Dialogs/FlagsDialog.tsx b/src/viewer/rules/Dialogs/FlagsDialog.tsx
@@ -241,6 +241,7 @@ export default class FlagsDialog extends React.Component<Props, State> {
 					textFieldWidth,
 					userColumns,
 					this.props.logFile,
+					this.state.rules
 				)}
 			</div>
 		);

diff --git a/src/viewer/rules/Dialogs/StatesDialog.tsx b/src/viewer/rules/Dialogs/StatesDialog.tsx
@@ -194,6 +194,7 @@ export default class StatesDialog extends React.Component<Props, State> {
 					textFieldWidth,
 					userColumns,
 					this.props.logFile,
+					this.state.rules
 				)}
 			</div>
 		);

diff --git a/src/viewer/rules/FlagRule.tsx b/src/viewer/rules/FlagRule.tsx
@@ -1,6 +1,7 @@
 // When adding new rules, don't forget to update the lookup in Rule.fromJSON
 import React from "react";
 import Rule from "./Rule";
+import StateBasedRule from "./StateBasedRule";
 import LogFile from "../LogFile";
 import Table from "./Tables/Table";
 import FlagTable from "./Tables/FlagTable";
@@ -141,6 +142,7 @@ export default class FlagRule extends Rule {
 		textFieldWidth: string,
 		user_columns: string[],
 		logFile: LogFile,
+		rules: Rule[]
 	) {
 		const allColumns = ["", ...logFile.contentHeaders, ...user_columns];
 
@@ -278,48 +280,83 @@ export default class FlagRule extends Rule {
 					const conditionSet = this.flags[this.selectedFlag].conditions[columnIndex];
 					conditionRows.push(
 						conditionSet.map((sub, s_i) => {
-							return [
+							let setMap:any[] = [];
+							setMap.push(
 								<VSCodeDropdown
-									style={{ width: "100%", marginBottom: "2px" }}
-									value={sub.Column}
-									key="Dropdown"
-									onChange={(e) => editSubcondition(columnIndex, s_i, "Column", e.target.value)}
-								>
-									{allColumns.map((col, col_i) => (
-										<VSCodeOption key={col_i} value={col}>
-											{col}
-										</VSCodeOption>
-									))}
-								</VSCodeDropdown>,
+										style={{ width: "100%", marginBottom: "2px" }}
+										value={sub.Column}
+										key="Dropdown"
+										onChange={(e) => editSubcondition(columnIndex, s_i, "Column", e.target.value)}
+									>
+										{allColumns.map((col, col_i) => (
+											<VSCodeOption key={col_i} value={col}>
+												{col}
+											</VSCodeOption>
+										))}
+									</VSCodeDropdown>
+							);
+							setMap.push(
 								<VSCodeDropdown
-									style={{ width: "100%" }}
-									value={sub.Operation}
-									key="Dropdown"
-									onChange={(e) => editSubcondition(columnIndex, s_i, "Operation", e.target.value)}
-								>
-									<VSCodeOption key="0" value="contains">
-										contains
-									</VSCodeOption>
-									<VSCodeOption key="1" value="equals">
-										equals
-									</VSCodeOption>
-									<VSCodeOption key="2" value="startsWith">
-										startsWith
-									</VSCodeOption>
-									<VSCodeOption key="3" value="endsWith">
-										endsWith
-									</VSCodeOption>
-									<VSCodeOption key="4" value="regexSearch">
-										regex search
-									</VSCodeOption>
-								</VSCodeDropdown>,
-								<VSCodeTextField
+										style={{ width: "100%" }}
+										value={sub.Operation}
+										key="Dropdown"
+										onChange={(e) => editSubcondition(columnIndex, s_i, "Operation", e.target.value)}
+									>
+										<VSCodeOption key="0" value="contains">
+											contains
+										</VSCodeOption>
+										<VSCodeOption key="1" value="equals">
+											equals
+										</VSCodeOption>
+										<VSCodeOption key="2" value="startsWith">
+											startsWith
+										</VSCodeOption>
+										<VSCodeOption key="3" value="endsWith">
+											endsWith
+										</VSCodeOption>
+										<VSCodeOption key="4" value="regexSearch">
+											regex search
+										</VSCodeOption>
+									</VSCodeDropdown>
+							);
+							if (!user_columns.includes(sub.Column)) {
+								setMap.push(
+									<VSCodeTextField
+										style={{ width: "100%" }}
+										value={sub.Text}
+										key="Text"
+										onInput={(e) => editSubcondition(columnIndex, s_i, "Text", e.target.value)}
+									/>,
+								);
+							}
+							else {
+								let options:string[] = [];
+								const dropdownRule = rules.filter(r => r.column === sub.Column)[0];
+								if (dropdownRule.ruleType === 'Flag rule') {
+									let dropdownFlagRule = dropdownRule as FlagRule;
+									options = dropdownFlagRule.flags.map(f => f.name);
+								}
+								else if (dropdownRule.ruleType === 'State based rule') {
+									let dropdownStateRule = dropdownRule as StateBasedRule;
+									options = dropdownStateRule.ruleStates.map(s => s.name)
+								}
+								setMap.push(
+									<VSCodeDropdown
 									style={{ width: "100%" }}
 									value={sub.Text}
 									key="Text"
-									onInput={(e) => editSubcondition(columnIndex, s_i, "Text", e.target.value)}
-								/>,
-							];
+									onChange={(e) => editSubcondition(columnIndex, s_i, "Text", e.target.value)}
+									>
+									{options.map((opt, opt_i) => (
+										<VSCodeOption key={opt_i} value={opt}>
+											{opt}
+										</VSCodeOption>
+									))}
+								</VSCodeDropdown>
+									);
+							}
+							return setMap;
+
 						}),
 					);
 				}

diff --git a/src/viewer/rules/Rule.tsx b/src/viewer/rules/Rule.tsx
@@ -20,6 +20,7 @@ export default abstract class Rule {
 		textFieldWidth: string,
 		user_columns: string[],
 		logFile: LogFile,
+		rules: Rule[]
 	): JSX.Element;
 	abstract computeValues(logFile: LogFile): string[];
 	abstract toJSON(): { [s: string]: any };

diff --git a/src/viewer/rules/StateBasedRule.tsx b/src/viewer/rules/StateBasedRule.tsx
@@ -1,6 +1,7 @@
 // When adding new rules, don't forget to update the lookup in Rule.fromJSON
 import React from "react";
 import Rule from "./Rule";
+import FlagRule from "./FlagRule";
 import LogFile from "../LogFile";
 import Table from "./Tables/Table";
 import StateTable from "./Tables/StateTable";
@@ -144,6 +145,7 @@ export default class StateBasedRule extends Rule {
 		textFieldWidth: string,
 		user_columns: string[],
 		logFile: LogFile,
+		rules: Rule[]
 	) {
 		const editStateName = (stateIndex: number, value: string) => {
 			const states = [...this.ruleStates];
@@ -238,7 +240,8 @@ export default class StateBasedRule extends Rule {
 					];
 				transitionRows.push(
 					conditionSet.map((r, c_i) => {
-						return [
+						let setMap:any[] = [];
+						setMap.push(
 							<VSCodeDropdown
 								style={{ width: "100%", marginBottom: "2px" }}
 								value={r.Column}
@@ -250,7 +253,9 @@ export default class StateBasedRule extends Rule {
 										{col}
 									</VSCodeOption>
 								))}
-							</VSCodeDropdown>,
+							</VSCodeDropdown>
+						);
+						setMap.push(
 							<VSCodeDropdown
 								style={{ width: "100%" }}
 								value={r.Operation}
@@ -272,14 +277,46 @@ export default class StateBasedRule extends Rule {
 								<VSCodeOption key="4" value="regexSearch">
 									regex search
 								</VSCodeOption>
-							</VSCodeDropdown>,
-							<VSCodeTextField
+							</VSCodeDropdown>
+						);
+						if (!user_columns.includes(r.Column)) {
+							setMap.push(
+								<VSCodeTextField
+									style={{ width: "100%" }}
+									value={r.Text}
+									onInput={(e) => editTransition(transitionIndex, c_i, "Text", e.target.value)}
+									key="Text"
+								/>
+							);
+						}
+						else {
+							let options:string[] = [];
+							const dropdownRule = rules.filter(rule => rule.column === r.Column)[0];
+							if (dropdownRule.ruleType === 'Flag rule') {
+								let dropdownFlagRule = dropdownRule as FlagRule;
+								options = dropdownFlagRule.flags.map(f => f.name);
+							}
+							else if (dropdownRule.ruleType === 'State based rule') {
+								let dropdownStateRule = dropdownRule as StateBasedRule;
+								options = dropdownStateRule.ruleStates.map(s => s.name)
+							}
+							setMap.push(
+								<VSCodeDropdown
 								style={{ width: "100%" }}
 								value={r.Text}
-								onInput={(e) => editTransition(transitionIndex, c_i, "Text", e.target.value)}
 								key="Text"
-							/>,
-						];
+								onChange={(e) => editTransition(transitionIndex, c_i, "Text", e.target.value)}
+								>
+								{options.map((opt, opt_i) => (
+									<VSCodeOption key={opt_i} value={opt}>
+										{opt}
+									</VSCodeOption>
+								))}
+							</VSCodeDropdown>
+								);
+						}
+						return setMap;
+
 					}),
 				);
 			}