diff --git a/src/viewer/App.tsx b/src/viewer/App.tsx index 2091580..0424772 100644 --- a/src/viewer/App.tsx +++ b/src/viewer/App.tsx @@ -113,7 +113,6 @@ export default class App extends React.Component { 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 { } } - 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 { > this.handleStructureDialogActions(false)} + onClick={() => this.handleStructureDialog(false)} > @@ -662,16 +662,16 @@ export default class App extends React.Component { 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 && ( 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 { 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) => diff --git a/src/viewer/LogFile.tsx b/src/viewer/LogFile.tsx index 469a5fe..ab9dfde 100644 --- a/src/viewer/LogFile.tsx +++ b/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; diff --git a/src/viewer/log/SelectColDialog.tsx b/src/viewer/log/SelectColDialog.tsx index b258676..4d98705 100644 --- a/src/viewer/log/SelectColDialog.tsx +++ b/src/viewer/log/SelectColDialog.tsx @@ -94,9 +94,9 @@ export default class SelectColDialog extends React.Component { ); } - 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); }); } diff --git a/src/viewer/rules/Dialogs/FlagsDialog.tsx b/src/viewer/rules/Dialogs/FlagsDialog.tsx index 84933d0..d6b3eec 100644 --- a/src/viewer/rules/Dialogs/FlagsDialog.tsx +++ b/src/viewer/rules/Dialogs/FlagsDialog.tsx @@ -95,14 +95,14 @@ export default class FlagsDialog extends React.Component { 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 { }); }; - 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 { 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 { 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 { [ "Type", 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 { {this.state.showEdit &&
Edit Flag Annotation Column
} {this.state.showEdit && ( this.onDialogClick(false)} > + )} - this.onDialogClick(true)}> + this.onDialogClick(true)} + > diff --git a/src/viewer/rules/Dialogs/StatesDialog.tsx b/src/viewer/rules/Dialogs/StatesDialog.tsx index e7cb070..e8410d2 100644 --- a/src/viewer/rules/Dialogs/StatesDialog.tsx +++ b/src/viewer/rules/Dialogs/StatesDialog.tsx @@ -82,14 +82,14 @@ export default class StatesDialog extends React.Component { 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 { }); }; - 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 { 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 { 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 { )} {this.state.showEdit && ( this.onDialogClick(false)} > )} - this.onDialogClick(true)}> + this.onDialogClick(true)} + > diff --git a/src/viewer/rules/StateBasedRule.tsx b/src/viewer/rules/StateBasedRule.tsx index 966a3ec..2fadb9b 100644 --- a/src/viewer/rules/StateBasedRule.tsx +++ b/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)); }; diff --git a/src/viewer/rules/Tables/FlagTable.tsx b/src/viewer/rules/Tables/FlagTable.tsx index 78d740d..2a22840 100644 --- a/src/viewer/rules/Tables/FlagTable.tsx +++ b/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"; diff --git a/src/viewer/rules/Tables/TransitionTable.tsx b/src/viewer/rules/Tables/TransitionTable.tsx index 76a3ee0..b1615a0 100644 --- a/src/viewer/rules/Tables/TransitionTable.tsx +++ b/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";