Genes phyletic tree search box (#561)

* Add search box to phyletic tree in genomics site * Update styling
VEuPathDB · Oct 23, 2023 · 016427b · 016427b
1 parent 74d0dbe
commit 016427b
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 38 deletions.
diff --git a/...s-site/webapp/wdkCustomization/js/client/components/questions/GenesByOrthologPattern.scss b/...s-site/webapp/wdkCustomization/js/client/components/questions/GenesByOrthologPattern.scss
@@ -1,42 +1,44 @@
 .GenesByOrthologPattern {
   &ProfileParameter {
-    .wdk-CheckboxTree {
-      width: 50%;
+    &TreeWrapper {
+      max-width: 650px;
       position: relative;
 
-      > .wdk-CheckboxTreeList
-        > .wdk-CheckboxTreeItem
-        > .wdk-CheckboxTreeNodeWrapper
-        > i {
-        visibility: hidden;
-      }
+      [class$='-CheckboxTree'] {
+        > [class$='-CheckboxTreeList']
+          > [class$='-CheckboxTreeItem']
+          > [class$='-CheckboxTreeNodeWrapper']
+          > i {
+          visibility: hidden;
+        }
 
-      .GenesByOrthologPatternConstraintIcon {
-        cursor: pointer;
+        .GenesByOrthologPatternConstraintIcon {
+          cursor: pointer;
+        }
       }
-    }
 
-    .wdk-CheckboxTreeList {
-      .wdk-CheckboxTreeToggle {
-        &__collapsed {
-          margin-left: 0.1em;
+      [class$='-CheckboxTreeList'] {
+        .wdk-CheckboxTreeToggle {
+          &__collapsed {
+            margin-left: 0.1em;
+          }
         }
       }
-    }
 
-    .wdk-CheckboxTreeNodeContent {
-      margin-left: 1em;
-    }
+      [class$='-CheckboxTreeNodeContent'] {
+        margin-left: 1em;
+      }
 
-    .wdk-CheckboxTreeLinks {
-      position: absolute;
-      top: 1.1em;
-      left: 9.5em;
-      z-index: 1;
-      margin: 0 0 0 1rem;
+      [class$='-CheckboxTreeLinks'] {
+        position: absolute;
+        top: 1.1em;
+        left: 9.5em;
+        z-index: 1;
+        margin: 0 0 0 1rem;
 
-      > div {
-        text-align: left;
+        > div {
+          text-align: left;
+        }
       }
     }
   }

diff --git a/...cs-site/webapp/wdkCustomization/js/client/components/questions/GenesByOrthologPattern.tsx b/...cs-site/webapp/wdkCustomization/js/client/components/questions/GenesByOrthologPattern.tsx
@@ -15,6 +15,7 @@ import { EbrcDefaultQuestionForm } from '@veupathdb/web-common/lib/components/qu
 import { makeClassNameHelper } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils';
 
 import './GenesByOrthologPattern.scss';
+import { areTermsInString } from '@veupathdb/wdk-client/lib/Utils/SearchUtils';
 
 const cx = makeClassNameHelper('GenesByOrthologPattern');
 const cxDefaultQuestionForm = makeClassNameHelper('wdk-QuestionForm');
@@ -204,6 +205,15 @@ function ProfileParameter({
     [constraints, nodeMap, profileTree, eventHandlers, questionState]
   );
 
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const searchPredicate = useCallback(
+    (node: ProfileNode, searchTerms: string[]) => {
+      return areTermsInString(searchTerms, node.display + ' ' + node.term);
+    },
+    []
+  );
+
   return (
     <div className={cx('ProfileParameter')}>
       <div className={cx('ProfileParameterHelp')}>
@@ -219,16 +229,22 @@ function ProfileParameter({
           <ConstraintIcon constraintType="mixed" /> = mixture of constraints )
         </div>
       </div>
-      <CheckboxTree<ProfileNode>
-        tree={profileTree}
-        getNodeId={getNodeId}
-        getNodeChildren={getNodeChildren}
-        onExpansionChange={onExpansionChange}
-        renderNode={renderNode}
-        expandedList={expandedList}
-        showRoot
-        linksPosition={LinksPosition.Top}
-      />
+      <div className={cx('ProfileParameterTreeWrapper')}>
+        <CheckboxTree<ProfileNode>
+          tree={profileTree}
+          getNodeId={getNodeId}
+          getNodeChildren={getNodeChildren}
+          onExpansionChange={onExpansionChange}
+          renderNode={renderNode}
+          expandedList={expandedList}
+          showRoot
+          linksPosition={LinksPosition.Top}
+          isSearchable
+          searchTerm={searchTerm}
+          onSearchTermChange={setSearchTerm}
+          searchPredicate={searchPredicate}
+        />
+      </div>
     </div>
   );
 }
@@ -295,7 +311,7 @@ function makeRenderNode(
       <span
         className={cx(
           'ProfileNodeDisplay',
-          node.term == ALL_ORGANISMS_TERM ? 'root-node' : 'interior-node'
+          node.term === ALL_ORGANISMS_TERM ? 'root-node' : 'interior-node'
         )}
       >
         {node.display}