From c93c01073703e39337dc0b3dadfc5a02b2f06343 Mon Sep 17 00:00:00 2001 From: Samyak Jain Date: Thu, 12 Sep 2024 19:32:24 -0400 Subject: [PATCH 1/2] Fixed issue: #6: Added a button to enable/disable the purple color coding --- src/ui/MiningRules/minedRulePad.js | 8 +-- src/ui/MiningRules/minedRulesComponent.js | 65 ++++++++++++++++------- 2 files changed, 50 insertions(+), 23 deletions(-) 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()}*/}
{this.renderGroup("top")} @@ -209,7 +209,7 @@ class MinedRulePad extends Component {
+ (childElement.activeElement ? " activeElement " + colorCoding : "")}> {childElement.text ? childElement.text : childCondition.placeholder}
@@ -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..f6c5fff 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 (
- Tutorial -
-
The following code snippets illustrates potential design rules.
-
The top snippet denotes when a design rules applies (IF part), - and bottom components denote how the rule is applied (THEN part).
-
-
-
The purple background in the code shows how likely each element is in a design rule.
-
Darker purple means it's more likely to be - part of a rule, - and lighter purple means it is less likely to - be part of a rule. -
-
Orange background highlights the - identifiers.
-
-
); + return ( +
+
+ + Highlight Code by Rule Probability +
+
+ Tutorial +
+
The following code snippets illustrates potential design rules.
+
The top snippet denotes when a design rules applies (IF part), + and bottom components denote how the rule is applied (THEN part).
+
+ {this.state.isColorCodingEnabled && ( +
+
The purple background in the code shows how likely each element is in a design + rule.
+
Darker purple means it's more + likely to be part of a rule, + and lighter purple means it is + less likely to be part of a rule. +
+
+ )} +
Orange background + highlights the identifiers.
+ +
+
); } 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}/>
{`THEN the ${identifierType} may have:`}
@@ -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 { }); } } + From 7444d87a2bcd8744c4420855b3d861cece21245e Mon Sep 17 00:00:00 2001 From: Samyak Jain Date: Thu, 19 Sep 2024 12:44:07 -0400 Subject: [PATCH 2/2] fix #32: modified checkout label. --- src/ui/MiningRules/minedRulesComponent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/MiningRules/minedRulesComponent.js b/src/ui/MiningRules/minedRulesComponent.js index f6c5fff..da00e5b 100644 --- a/src/ui/MiningRules/minedRulesComponent.js +++ b/src/ui/MiningRules/minedRulesComponent.js @@ -273,7 +273,7 @@ class MinedRulesComponent extends Component { onChange={this.handleColorCodingToggle} style={{marginRight: "10px"}} /> - Highlight Code by Rule Probability + Highlight Code Elements Based On Their Likelihood Of Being Part Of A Rule
Tutorial