From ae355c469685b0681e5ba4b5cb46e7e7d657d0c0 Mon Sep 17 00:00:00 2001
From: Rajas Patil <rajasp98@gmail.com>
Date: Mon, 23 Sep 2024 10:55:56 -0400
Subject: [PATCH] Added search-bar in minedRules

---
 src/index.css                             |  23 ++++
 src/ui/MiningRules/minedRulesComponent.js | 151 +++++++++++++---------
 2 files changed, 112 insertions(+), 62 deletions(-)

diff --git a/src/index.css b/src/index.css
index fb47c58..5109401 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1043,6 +1043,29 @@ img.tutorialSmallImage {
 
 /* cluster view */
 
+.search-bar-container {
+    position: relative;
+    margin-bottom: 20px;
+}
+
+.search-input {
+    width: 30%;
+    padding: 10px 20px 10px 40px;
+    font-size: 16px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    transition: border-color 0.3s;
+}
+
+.search-icon {
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #ccc;
+    font-size: 20px;
+}
+
 .minedRulesComponent .guiBoundingBox {
     padding-top: 5px !important;
 }
diff --git a/src/ui/MiningRules/minedRulesComponent.js b/src/ui/MiningRules/minedRulesComponent.js
index da00e5b..e9c1d10 100644
--- a/src/ui/MiningRules/minedRulesComponent.js
+++ b/src/ui/MiningRules/minedRulesComponent.js
@@ -15,7 +15,7 @@ import {Button} from "react-bootstrap";
 import {
     FaAngleDown, FaAngleUp,
     FaCaretDown,
-    FaCaretUp,
+    FaCaretUp, FaSearch,
 } from "react-icons/fa";
 import "rc-slider/assets/index.css";
 
@@ -57,6 +57,7 @@ class MinedRulesComponent extends Component {
             view: this.views.default_view,
             minedRules: [],
             minedRulesGrouped: [], // [{key, value}]
+            searchTerm: "",
             loadingTitle: "Mining Rules",
             message: "",
             cluster: [],
@@ -302,78 +303,104 @@ class MinedRulesComponent extends Component {
 
     renderClusters() {
         const countRules = this.state.minedRules.reduce((sum, group) => sum + group.rulePadStates.length, 0);
+        const handleSearchChange = (event) => {
+            this.setState({searchTerm: event.target.value});
+        };
         if (this.state.minedRules.length > 0 && countRules === 0) {
             return (
                 <div>
                     <h4><strong>No rule is found.</strong></h4>
                 </div>);
         }
+        const filteredRules = this.state.minedRulesGrouped.filter((group) =>
+            group.key.toLowerCase().includes(this.state.searchTerm.toLowerCase()),
+        );
 
-        return this.state.minedRulesGrouped.map((identifierGroup, index) => {
-            const childrenKeys = Object.keys(identifierGroup.value.children);
-            if (childrenKeys.length === 0) {
-                return null;
-            }
-            const keyParts = identifierGroup.key.split("%");
-            const identifierType = keyParts[0];
-            const identifierValue = keyParts[1];
-            const parentElementId =
-                featureGroupInformation[identifierGroup.value.children[childrenKeys[0]].fileGroup].rootId[0];
-            const expandedClass = "expanded";
-
-            const thenParts = childrenKeys.map((key) => {
-                const fileGroup = identifierGroup.value.children[key].fileGroup;
-                const title = featureGroupInformation[fileGroup].mergeKeys[1]
-                    .replace(/\b\w/g, (char) => char.toUpperCase());
-                const content = this.renderThenPart(key, identifierGroup);
-                return {title, content};
-            });
+        return (
+            <div>
+                {/* ADDED: Search bar */}
+                <div className="search-bar-container">
+                    <FaSearch className="search-icon"/>
+                    <input
+                        className="search-input"
+                        type="text"
+                        placeholder="Search rules..."
+                        value={this.state.searchTerm}
+                        onChange={handleSearchChange}
+                    />
+                </div>
 
-            const isRuleExpanded = this.state.isExpanded && this.state.expandedIdentifierGroupIndex === index;
-            const hidden = !this.state.isExpanded || this.state.expandedIdentifierGroupIndex !== index;
-            const classNameHidden = hidden ? "hidden" : "";
+                {filteredRules.map((identifierGroup, index) => {
+                    const childrenKeys = Object.keys(identifierGroup.value.children);
+                    if (childrenKeys.length === 0) {
+                        return null;
+                    }
+                    const keyParts = identifierGroup.key.split("%");
+                    const identifierType = keyParts[0];
+                    const identifierValue = keyParts[1];
+                    const parentElementId =
+                        featureGroupInformation[identifierGroup.value.children[childrenKeys[0]].fileGroup].rootId[0];
+                    const expandedClass = "expanded";
+
+                    const thenParts = childrenKeys.map((key) => {
+                        const fileGroup = identifierGroup.value.children[key].fileGroup;
+                        const title = featureGroupInformation[fileGroup].mergeKeys[1]
+                            .replace(/\b\w/g, (char) => char.toUpperCase());
+                        const content = this.renderThenPart(key, identifierGroup);
+                        return {title, content};
+                    });
 
-            return (
-                <div className={"generateRuleGui guiBoundingBox minedRuleBoundingBox"} key={index}>
-                    <div className={"identifierContainer"}>
-                        <div className={"identifierHeader"}>
-                            {"Rules applied on "}
-                            <strong>{identifierType}</strong>
-                            {" "}
-                            <span
-                                className={"inputText activeElement frequency-color frequency-identifier"}>
-                                {identifierValue}
-                            </span>
-                        </div>
-                        {isRuleExpanded ?
-                            <div className={"expandIcons"}
-                                onClick={() => this.setState({isExpanded: false})}>
-                                <FaAngleUp size={20}/></div> :
-                            <div className={"expandIcons"}
-                                onClick={() => this.setState({isExpanded: true, expandedIdentifierGroupIndex: index})}>
-                                <FaAngleDown size={20}/>
+                    const isRuleExpanded = this.state.isExpanded && this.state.expandedIdentifierGroupIndex === index;
+                    const hidden = !this.state.isExpanded || this.state.expandedIdentifierGroupIndex !== index;
+                    const classNameHidden = hidden ? "hidden" : "";
+
+                    return (
+                        <div className={"generateRuleGui guiBoundingBox minedRuleBoundingBox"} key={index}>
+                            <div className={"identifierContainer"}>
+                                <div className={"identifierHeader"}>
+                                    {"Rules applied on "}
+                                    <strong>{identifierType}</strong>
+                                    {" "}
+                                    <span
+                                        className={"inputText activeElement frequency-color frequency-identifier"}>
+                                        {identifierValue}
+                                    </span>
+                                </div>
+                                {isRuleExpanded ?
+                                    <div className={"expandIcons"}
+                                        onClick={() => this.setState({isExpanded: false})}>
+                                        <FaAngleUp size={20}/></div> :
+                                    <div className={"expandIcons"}
+                                        onClick={() => this.setState({
+                                            isExpanded: true,
+                                            expandedIdentifierGroupIndex: index,
+                                        })}>
+                                        <FaAngleDown size={20}/>
+                                    </div>
+                                }
+                            </div>
+                            <div className={`clusterRuleContainer ${classNameHidden}`}>
+                                <div className={"ifKeyword"}>
+                                    <strong>{`IF a ${identifierType} is named ${identifierValue}`}</strong></div>
+                                <div className={`ifPart ${expandedClass}`}>
+                                    <MinedRulePad key={new Date()} rulePadState={identifierGroup.value.parent}
+                                        isCluster={true}
+                                        featureMetaData={this.props.featureMetaData}
+                                        fileGroup={identifierGroup.value.children[childrenKeys[0]].fileGroup}
+                                        elementId={parentElementId}
+                                        isColorCodingEnabled={this.state.isColorCodingEnabled}/>
+                                </div>
+                                <div className={"thenKeyword"}><strong>{`THEN the ${identifierType} may have:`}</strong>
+                                </div>
+                                <div className={"thenParts"}>
+                                    <Accordion items={thenParts}/>
+                                </div>
                             </div>
-                        }
-                    </div>
-                    <div className={`clusterRuleContainer ${classNameHidden}`}>
-                        <div className={"ifKeyword"}>
-                            <strong>{`IF a ${identifierType} is named ${identifierValue}`}</strong></div>
-                        <div className={`ifPart ${expandedClass}`}>
-                            <MinedRulePad key={new Date()} rulePadState={identifierGroup.value.parent}
-                                isCluster={true}
-                                featureMetaData={this.props.featureMetaData}
-                                fileGroup={identifierGroup.value.children[childrenKeys[0]].fileGroup}
-                                elementId={parentElementId}
-                                isColorCodingEnabled={this.state.isColorCodingEnabled}/>
-                        </div>
-                        <div className={"thenKeyword"}><strong>{`THEN the ${identifierType} may have:`}</strong></div>
-                        <div className={"thenParts"}>
-                            <Accordion items={thenParts}/>
                         </div>
-                    </div>
-                </div>
-            );
-        });
+                    );
+                })}
+            </div>
+        );
     }
 
     renderThenPart(key, identifierGroup) {