Skip to content

Commit

Permalink
Merge pull request #32 from samyak1326/main
Browse files Browse the repository at this point in the history 
Added a button to enable/disable the color coding
  • Loading branch information
@SaharMehrpour
SaharMehrpour authored Sep 19, 2024
2 parents 8e21db0 + 7444d87 commit a4ec22d
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 23 deletions.
8 changes: 5 additions & 3 deletions src/ui/MiningRules/minedRulePad.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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")}
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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;

65 changes: 45 additions & 20 deletions src/ui/MiningRules/minedRulesComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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"}>
Expand All @@ -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] ?
Expand Down Expand Up @@ -697,6 +716,11 @@ class MinedRulesComponent extends Component {
}
});
}
handleColorCodingToggle = () => {
this.setState((prevState) => ({
isColorCodingEnabled: !prevState.isColorCodingEnabled,
}));
};
}

function mapStateToProps(state) {
Expand Down Expand Up @@ -845,3 +869,4 @@ class CodeSnippets extends Component {
});
}
}

0 comments on commit a4ec22d

Please sign in to comment.