added accordion for category of mined rules

devuxd · Nov 6, 2023 · 2dcaa87 · 2dcaa87
1 parent c7b43ee
commit 2dcaa87
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 10 deletions.
diff --git a/src/index.css b/src/index.css
@@ -880,4 +880,39 @@ img.tutorialSmallImage {
 
 .focusedElementError {
     color: #a94442;
+}
+
+.accordion {
+    width: 100%;
+    margin: 0 auto;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.accordion-item {
+    border-bottom: 1px solid #ccc;
+}
+
+.accordion-item-header {
+    background-color: #f1f1f1;
+    padding: 10px 15px;
+    cursor: pointer;
+    user-select: none;
+    font-weight: bold;
+}
+
+.accordion-item-header.open {
+    background-color: #ddd;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 5px;
+    z-index: 5;
+}
+
+.accordion-item-content {
+    padding: 10px 15px;
+}
+
+.accordion-item.open .accordion-item-content {
+    display: block;
 }
diff --git a/src/ui/MiningRules/miningRulesComponent.js b/src/ui/MiningRules/miningRulesComponent.js
@@ -36,6 +36,7 @@ import {
     switchAlgorithm
 } from "../../miningRulesCore/postProcessing";
 import {webSocketSendMessage} from "../../core/coreConstants";
+import {FaCaretDown, FaCaretUp} from "react-icons/fa";
 
 class MiningRulesComponent extends Component {
 
@@ -52,6 +53,7 @@ class MiningRulesComponent extends Component {
             selectedClusterIndex: props.selectedClusterIndex
         };
         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.
     }
 
     render() {
@@ -250,18 +252,21 @@ class MiningRulesComponent extends Component {
                 <div>
                     <h4><strong>No rule is found.</strong></h4>
                 </div>)
-        return this.state.minedRules.map((group, groupIndex) => {
-            return (group.rulePadStates.length === 0) ? null : (
-                <div key={groupIndex}>
-                    <h4><strong>{featureGroupInformation[group.fileGroup].desc}</strong></h4>
-                    {group.rulePadStates.map((_, clusterIndex) => process(group, groupIndex, clusterIndex))}
-                </div>)
-        })
+        let minedRulesArray = this.state.minedRules.map((group, groupIndex) => {
+            let title = featureGroupInformation[group.fileGroup].desc;
+            let content;
+            if (group.rulePadStates.length === 0) {
+                content = `No rule is found in this category.`;
+            } else {
+                content = group.rulePadStates.filter((_, clusterIndex) => clusterIndex < this.clusterLimit)
+                    .map((_, clusterIndex) => process(group, groupIndex, clusterIndex))
+            }
+            return {title, content}
+        });
+        return (<Accordion items={minedRulesArray}/>);
     }
 
     renderSelectedCluster() {
-        let clusterObject = this.state.minedRules[this.state.selectedGroupIndex]
-            .clusters[this.state.selectedClusterIndex];
         let rulePadState = this.state.minedRules[this.state.selectedGroupIndex]
             .rulePadStates[this.state.selectedClusterIndex];
         let fileGroup = this.state.minedRules[this.state.selectedGroupIndex].fileGroup;
@@ -401,4 +406,59 @@ function mapDispatchToProps(dispatch) {
 }
 
 
-export default connect(mapStateToProps, mapDispatchToProps)(MiningRulesComponent);
+export default connect(mapStateToProps, mapDispatchToProps)(MiningRulesComponent);
+
+class AccordionItem extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isOpen: false,
+        };
+    }
+
+    render() {
+        const {title, content} = this.props;
+        this.caretClass = {
+            true: {cursor: "pointer", color: "black"},
+            false: {cursor: "pointer", color: "darkgrey"}
+        };
+        return (
+            <div className="accordion-item">
+                <div
+                    onClick={() => this.setState((prevState) => ({
+                        isOpen: !prevState.isOpen,
+                    }))}
+                    className={`accordion-item-header ${this.state.isOpen ? 'open' : ''}`}>
+                    {title}
+                    <div style={{float: "right"}}>
+                        <FaCaretUp size={20}
+                                   style={this.caretClass[this.state.isOpen.toString()]}
+                                   className={"react-icons"}/>
+                        <FaCaretDown size={20}
+                                     style={this.caretClass[(!this.state.isOpen).toString()]}
+                                     className={"react-icons"}/>
+                    </div>
+                </div>
+                {this.state.isOpen && <div className="accordion-item-content">{content}</div>}
+            </div>
+        );
+    }
+}
+
+export class Accordion extends Component {
+    render() {
+        const {items} = this.props;
+
+        return (
+            <div className="accordion">
+                {items.map((item, index) => (
+                    <AccordionItem
+                        key={index}
+                        title={item.title}
+                        content={item.content}
+                    />
+                ))}
+            </div>
+        );
+    }
+}