Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added a button to enable/disable the color coding #32

Merged
merged 3 commits into from
Sep 19, 2024
Merged

Added a button to enable/disable the color coding #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c93c010
Fixed issue: #6: Added a button to enable/disable the purple color co…
samyak1326 Sep 12, 2024
40f975e
Merge branch 'ourcodeinc:main' into main
samyak1326 Sep 19, 2024
7444d87
fix #32: modified checkout label.
samyak1326 Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/ui/MiningRules/minedRulePad.js
View file
Open in desktop
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
Open in desktop
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 {
});
}
}

Loading