diff --git a/src/ui/MiningRules/minedRulePad.js b/src/ui/MiningRules/minedRulePad.js index 0487684..d4520ea 100644 --- a/src/ui/MiningRules/minedRulePad.js +++ b/src/ui/MiningRules/minedRulePad.js @@ -37,7 +37,7 @@ class MinedRulePad extends Component { {/* {this.renderExplore()}*/} <div className={"mainDiv-overlay elementDiv" + (this.state.thisElement.activeElement ? " activeElement" : "") + - (this.state.thisElement.selectedElement ? " selectedElement" : "") + (this.state.thisElement.selectedElement ? " selectedElement" : "") }> <div className={"rowGroup"}> {this.renderGroup("top")} @@ -209,7 +209,7 @@ class MinedRulePad extends Component { <div className={"inputTextDiv rowItem " + (childCondition.type === "wideText" ? "wideText" : "")}> <span className={"minedRuleEditor inputText" + - (childElement.activeElement ? " activeElement " + colorCoding : "")}> + (childElement.activeElement ? " activeElement " + colorCoding : "")}> {childElement.text ? childElement.text : childCondition.placeholder}</span> </div> </div> @@ -278,6 +278,8 @@ class MinedRulePad extends Component { if (identifier_element_ids.includes(childId)) { return "frequency-color frequency-identifier"; } + if (!this.props.isColorCodingEnabled) return ""; // Check if color coding is disabled + let frequency = 0; if (childElement.activeElement) { const elementIndex = childElement._data_._data_.elements @@ -288,10 +290,10 @@ class MinedRulePad extends Component { return "frequency-color frequency-" + Math.floor(frequency * 10); } catch (e) { + if (!this.props.isColorCodingEnabled) return ""; // Check if color coding is disabled return "frequency-color frequency-unknown"; } } } export default MinedRulePad; - diff --git a/src/ui/MiningRules/minedRulesComponent.js b/src/ui/MiningRules/minedRulesComponent.js index 2d8684b..da00e5b 100644 --- a/src/ui/MiningRules/minedRulesComponent.js +++ b/src/ui/MiningRules/minedRulesComponent.js @@ -63,6 +63,7 @@ class MinedRulesComponent extends Component { isExpanded: false, expandedIdentifierGroupIndex: 0, + isColorCodingEnabled: true, }; this.messagesToBeSent = []; // the messages that are going to the server to be written on files this.clusterLimit = 10; // number of clusters in each category of mined rules. @@ -263,24 +264,40 @@ class MinedRulesComponent extends Component { renderDescription() { const countRules = this.state.minedRules.reduce((sum, group) => sum + group.rulePadStates.length, 0); if (countRules === 0) return null; - return (<div className={"descriptionContainer"}> - <span className={"descriptionTitle"}>Tutorial</span> - <div style={{marginBottom: "20px"}}> - <h5>The following code snippets illustrates potential design rules.</h5> - <h5>The top snippet denotes <strong>when</strong> a design rules applies (IF part), - and bottom components denote <strong>how</strong> the rule is applied (THEN part).</h5> - </div> - <div> - <h5>The purple background in the code shows how likely each element is in a design rule.</h5> - <h5><span className={"frequency-color frequency-10"}>Darker purple</span> means it's more likely to be - part of a rule, - and <span className={"frequency-color frequency-1"}>lighter purple</span> means it is less likely to - be part of a rule. - </h5> - <h5><span className={"frequency-color frequency-identifier"}>Orange</span> background highlights the - identifiers.</h5> - </div> - </div>); + return ( + <div className="descriptionWrapper"> + <div className="color-coding-toggle" style={{marginBottom: "15px"}}> + <input + type="checkbox" + checked={this.state.isColorCodingEnabled} + onChange={this.handleColorCodingToggle} + style={{marginRight: "10px"}} + /> + Highlight Code Elements Based On Their Likelihood Of Being Part Of A Rule + </div> + <div className={"descriptionContainer"}> + <span className={"descriptionTitle"}>Tutorial</span> + <div style={{marginBottom: "20px"}}> + <h5>The following code snippets illustrates potential design rules.</h5> + <h5>The top snippet denotes <strong>when</strong> a design rules applies (IF part), + and bottom components denote <strong>how</strong> the rule is applied (THEN part).</h5> + </div> + {this.state.isColorCodingEnabled && ( + <div> + <h5>The purple background in the code shows how likely each element is in a design + rule.</h5> + <h5><span className={"frequency-color frequency-10"}>Darker purple</span> means it's more + likely to be part of a rule, + and <span className={"frequency-color frequency-1"}>lighter purple</span> means it is + less likely to be part of a rule. + </h5> + </div> + )} + <h5><span className={"frequency-color frequency-identifier"}>Orange</span> background + highlights the identifiers.</h5> + + </div> + </div>); } renderClusters() { @@ -346,7 +363,8 @@ class MinedRulesComponent extends Component { isCluster={true} featureMetaData={this.props.featureMetaData} fileGroup={identifierGroup.value.children[childrenKeys[0]].fileGroup} - elementId={parentElementId}/> + elementId={parentElementId} + isColorCodingEnabled={this.state.isColorCodingEnabled}/> </div> <div className={"thenKeyword"}><strong>{`THEN the ${identifierType} may have:`}</strong></div> <div className={"thenParts"}> @@ -366,7 +384,8 @@ class MinedRulesComponent extends Component { isCluster={true} featureMetaData={this.props.featureMetaData} fileGroup={identifierGroup.value.children[key].fileGroup} - elementId={featureGroupInformation[identifierGroup.value.children[key].fileGroup].rootId[1]}/> + elementId={featureGroupInformation[identifierGroup.value.children[key].fileGroup].rootId[1]} + isColorCodingEnabled={this.state.isColorCodingEnabled}/> {identifierGroup.value.constraintsSnippets && identifierGroup.value.constraintsSnippets[key] && identifierGroup.value.constraintsSnippets[key][i] ? @@ -697,6 +716,11 @@ class MinedRulesComponent extends Component { } }); } + handleColorCodingToggle = () => { + this.setState((prevState) => ({ + isColorCodingEnabled: !prevState.isColorCodingEnabled, + })); + }; } function mapStateToProps(state) { @@ -845,3 +869,4 @@ class CodeSnippets extends Component { }); } } +