Facets customisation - #11

caduribas · caduribas · commit 627f2ad6397c · 2020-01-23T15:21:16.000Z
diff --git a/README.md b/README.md
@@ -39,6 +39,17 @@ To show some examples and/or enable the Rfam search, use:
 />
 ```
 
+If you want to hide one specific facet, use:
+```
+<rnacentral-sequence-search 
+    databases='["miRBase"]'
+    hideFacet='["has_conserved_structure"]'
+/>
+```
+
+You can hide any facet - ` "rna_type", "TAXONOMY", "expert_db", "qc_warning_found", "has_go_annotations", 
+"has_conserved_structure", "has_genomic_coordinates" `
+
 For a minimal example, see [index.html](./index.html). For an Rfam example, see [rfam.html](./rfam.html).
 
 To change the layout, you will need to edit this file: [index.scss](./src/index.scss)
diff --git a/src/app.jsx b/src/app.jsx
@@ -32,6 +32,7 @@ class RNAcentralSequenceSearch extends HTMLElement {
     const databases = JSON.parse(this.attributes.databases.nodeValue);
     const examples = JSON.parse(this.attributes.examples ? this.attributes.examples.nodeValue : null);
     const rfam = JSON.parse(this.attributes.rfam ? this.attributes.rfam.nodeValue : null);
+    const hideFacet = JSON.parse(this.attributes.hideFacet ? this.attributes.hideFacet.nodeValue : null);
 
     // render React
     ReactDOM.render([
@@ -44,7 +45,7 @@ class RNAcentralSequenceSearch extends HTMLElement {
       <style key={customStyles} dangerouslySetInnerHTML={{__html: customStyles}}/>,
       <body key='body'>
         <Provider key='provider' store={store}>
-          <SequenceSearch databases={databases} examples={examples} rfam={rfam}/>
+          <SequenceSearch databases={databases} examples={examples} rfam={rfam} hideFacet={hideFacet}/>
         </Provider>
       </body>
       ],
diff --git a/src/containers/SequenceSearch/components/Results/components/Facets.jsx b/src/containers/SequenceSearch/components/Results/components/Facets.jsx
@@ -36,6 +36,8 @@ class Facets extends React.Component {
   }
 
   render() {
+    let showFacet = this.props.hideFacet ? this.props.facets.filter(facet => !this.props.hideFacet.includes(facet.id)) : this.props.facets;
+
     return (
       <div className="small-12 medium-2 medium-pull-10 columns">
         <label>Sort by:
@@ -52,7 +54,7 @@ class Facets extends React.Component {
         </label>
         <section>
           <div>
-            { this.props.facets.map(facet => this.renderFacet(facet)) }
+            { showFacet.map(facet => this.renderFacet(facet)) }
           </div>
           {
             this.props.textSearchError &&
diff --git a/src/containers/SequenceSearch/components/Results/index.jsx b/src/containers/SequenceSearch/components/Results/index.jsx
@@ -93,6 +93,7 @@ class Results extends React.Component {
                     toggleFacet={ this.toggleFacet }
                     ordering={ this.props.ordering }
                     textSearchError={ this.props.textSearchError }
+                    hideFacet={ this.props.hideFacet}
                 /> : ''}
             </div>
           ]
diff --git a/src/containers/SequenceSearch/index.jsx b/src/containers/SequenceSearch/index.jsx
@@ -14,7 +14,7 @@ class SequenceSearch extends React.Component {
   render() {
     return [
       <SearchForm key={`searchForm`} databases={this.props.databases} examples={this.props.examples}/>,
-      <Results key={`results`} rfam={this.props.rfam}/>
+      <Results key={`results`} rfam={this.props.rfam} hideFacet={this.props.hideFacet}/>
     ]
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -93,6 +93,7 @@ class Results extends React.Component {`
`93`	`93`	`toggleFacet={ this.toggleFacet }`
`94`	`94`	`ordering={ this.props.ordering }`
`95`	`95`	`textSearchError={ this.props.textSearchError }`
	`96`	`+ hideFacet={ this.props.hideFacet}`
`96`	`97`	`/> : ''}`
`97`	`98`	`</div>`
`98`	`99`	`]`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ class SequenceSearch extends React.Component {`
`14`	`14`	`render() {`
`15`	`15`	`return [`
`16`	`16`	<SearchForm key={`searchForm`} databases={this.props.databases} examples={this.props.examples}/>,
`17`		- <Results key={`results`} rfam={this.props.rfam}/>
	`17`	+ <Results key={`results`} rfam={this.props.rfam} hideFacet={this.props.hideFacet}/>
`18`	`18`	`]`
`19`	`19`	`}`
`20`	`20`	`}`