diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/GenesByOrthologPattern.scss b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/GenesByOrthologPattern.scss index a4c7ec38fc..3cafd58973 100644 --- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/GenesByOrthologPattern.scss +++ b/packages/sites/genomics-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/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/GenesByOrthologPattern.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/GenesByOrthologPattern.tsx index 02cadc28f7..9ae1b775e3 100644 --- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/GenesByOrthologPattern.tsx +++ b/packages/sites/genomics-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 (