Feature #162304903 remove facets shared by all results (#14)

* Test real data * Reformat FilterSidebar by pass cleaned facetGroups * Clean up code style * Clean checkbox facetGroups and clean up codes * Reformat the FilterSidebar with tidy facet groups * Reformat container and pass results to sidebar * Clean up code style * Add required props in test * Remove unused commands * Update snapshots * Update testutils with markerGenes and species * Add a test for hiding a facet shared by all result * Clean up code * Add a filter method remove facets shared by all * Clean up codes, delete old methods * Remove unused props * Revert "Remove unused props" This reverts commit f4f3042895711117220e3e164a9cf93685757597. * Disable facets after intial search results * Remove useless props and define propTypes * Assign clearedFacets in constructor and clean code * Reorganise demo pages and update experiments results/header components * Fix linter warnings/errors * Trim and update dependencies * Fix typo on CheckboxOption.propTypes * Fix test environment for fetch * Remove facet markerGenes in TestUtils; move common facet to test data * Remove closure for facet-trimming, we’re only running this once * Add comment to see trimming of shared facets in action
ebi-gene-expression-group · Sep 10, 2020 · 9f76e02 · 9f76e02
1 parent 79e65f7
commit 9f76e02
Show file tree

Hide file tree

Showing 31 changed files with 2,886 additions and 3,877 deletions.
diff --git a/packages/scxa-faceted-search-results/__test__/CalloutAlert.test.js b/packages/scxa-faceted-search-results/__test__/CalloutAlert.test.js
@@ -3,7 +3,6 @@ import Enzyme from 'enzyme'
 import renderer from 'react-test-renderer'
 import { shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
-import fetchMock from 'fetch-mock'
 
 import CalloutAlert from '../src/CalloutAlert'
 

diff --git a/packages/scxa-faceted-search-results/__test__/CheckboxFacetGroup.test.js b/packages/scxa-faceted-search-results/__test__/CheckboxFacetGroup.test.js
@@ -5,7 +5,7 @@ import { mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import _ from 'lodash'
 
-import { getRandomInt, episodes } from './TestUtils'
+import { episodes } from './TestUtils'
 
 import CheckboxFacetGroup from '../src/facetgroups/CheckboxFacetGroup'
 
@@ -38,11 +38,6 @@ describe(`CheckboxFacetGroup`, () => {
   }
 
   test(`displays tooltip if it exists`, () => {
-    const groups = [...new Set(uniqueFacets.map((facet) => facet.group))]
-    const descriptions = [...new Set(uniqueFacets.map((facet) => facet.description))]
-    const randomCheckboxFacetGroup = groups[getRandomInt(0, groups.length)]
-    const randomCheckboxFacetGroupDescription = descriptions[getRandomInt(0, descriptions.length)]
-
     const wrapper = mount(<CheckboxFacetGroup {...propsWithTooltip} />)
     expect(wrapper.find(`sup`).first().html()).toEqual(expect.stringMatching(`data-tip`))
   })

diff --git a/packages/scxa-faceted-search-results/__test__/FetchLoader.test.js b/packages/scxa-faceted-search-results/__test__/FetchLoader.test.js
@@ -2,6 +2,8 @@ import React from 'react'
 import Enzyme from 'enzyme'
 import { shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
+
+import '@babel/polyfill'
 import fetchMock from 'fetch-mock'
 
 import { getRandomInt } from './TestUtils'

diff --git a/packages/scxa-faceted-search-results/__test__/FilterSidebar.test.js b/packages/scxa-faceted-search-results/__test__/FilterSidebar.test.js
@@ -23,16 +23,18 @@ describe(`FilterSidebar`, () => {
   const props = {
     facets: uniqueFacets,
     checkboxFacetGroups: [`Season`],
+    results: episodes,
     onChange: () => {}
   }
 
   const noTooltipProps = {
     facets:[
-          {
-            group: `Guest character`,
-            value: `birdperson`,
-            label: `Birdperson`
-          }],
+      {
+        group: `Guest character`,
+        value: `birdperson`,
+        label: `Birdperson`
+      }],
+    results: episodes,
     checkboxFacetGroups: [`Season`],
     onChange: () => {}
   }
@@ -59,6 +61,11 @@ describe(`FilterSidebar`, () => {
     expect(wrapper.find(`sup`).exists()).toEqual(false)
   })
 
+  test(`hides checkbox if all results share the same facets`, () => {
+    const wrapper = mount(<FilterSidebar facets={uniqueFacets} checkboxFacetGroups={[`Show`, `Season`]} onChange={() => {}} />)
+    expect(wrapper.find({ type: `checkbox` }).length).toBeLessThan(uniqueFacets.length)
+  })
+
   test(`matches snapshot`, () => {
     const tree = renderer.create(<FilterSidebar {...props}/>).toJSON()
     expect(tree).toMatchSnapshot()

diff --git a/packages/scxa-faceted-search-results/__test__/MultiselectDropdownFacetGroup.test.js b/packages/scxa-faceted-search-results/__test__/MultiselectDropdownFacetGroup.test.js
@@ -5,7 +5,7 @@ import { mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import _ from 'lodash'
 
-import { getRandomInt, episodes } from './TestUtils'
+import { episodes } from './TestUtils'
 
 import MultiselectDropdownFacetGroup from '../src/facetgroups/MultiselectDropdownFacetGroup'
 
@@ -38,11 +38,6 @@ describe(`MultiselectDropdownFacetGroup`, () => {
   }
 
   test(`displays tooltip if it exists`, () => {
-    const groups = [...new Set(uniqueFacets.map((facet) => facet.group))]
-    const descriptions = [...new Set(uniqueFacets.map((facet) => facet.description))]
-    const randomMultiselectFacetGroup = groups[getRandomInt(0, groups.length)]
-    const randomMultiselectFacetGroupDescription = descriptions[getRandomInt(0, descriptions.length)]
-
     const wrapper = mount(<MultiselectDropdownFacetGroup {...propsWithTooltip} />)
     expect(wrapper.find(`sup`).first().html()).toEqual(expect.stringMatching(`data-tip`))
   })

diff --git a/packages/scxa-faceted-search-results/__test__/TestUtils.js b/packages/scxa-faceted-search-results/__test__/TestUtils.js
@@ -39,8 +39,10 @@ const vindicators = [
 const episodes = [
   {
     element: {
-      title: `Raising Gazorpazorp`
+      title: `Raising Gazorpazorp`,
+      species: `animal`,
     },
+
     facets: [
       {
         group: `Planet`,
@@ -64,13 +66,20 @@ const episodes = [
         group: `Season`,
         value: `1`,
         label: `Season 1`
+      },
+      {
+        group: `Show`,
+        value: `rick-morty`,
+        label: `Rick & Morty`
       }
     ]
   },
   {
     element: {
-      title: `The wedding squanchers`
+      title: `The wedding squanchers`,
+      species: `animal`,
     },
+
     facets: [
       {
         group: `Planet`,
@@ -94,13 +103,20 @@ const episodes = [
         group: `Season`,
         value: `2`,
         label: `Season 2`
+      },
+      {
+        group: `Show`,
+        value: `rick-morty`,
+        label: `Rick & Morty`
       }
     ]
   },
   {
     element: {
-      title: `The Rickshank redemption`
+      title: `The Rickshank redemption`,
+      species: `animal`,
     },
+
     facets: [
       {
         group: `Guest character`,
@@ -118,13 +134,20 @@ const episodes = [
         group: `Season`,
         value: `3`,
         label: `Season 3`
+      },
+      {
+        group: `Show`,
+        value: `rick-morty`,
+        label: `Rick & Morty`
       }
     ]
   },
   {
     element: {
-      title: `Ricksy business`
+      title: `Ricksy business`,
+      species: `plants`
     },
+
     facets: [
       {
         group: `Guest character`,
@@ -142,12 +165,18 @@ const episodes = [
         group: `Season`,
         value: `1`,
         label: `Season 1`
+      },
+      {
+        group: `Show`,
+        value: `rick-morty`,
+        label: `Rick & Morty`
       }
     ]
   },
   {
     element: {
-      title: `Close Rick-counters of the Rick kind`
+      title: `Close Rick-counters of the Rick kind`,
+      species: `plants`
     },
     facets: [
       {
@@ -172,6 +201,11 @@ const episodes = [
         group: `Season`,
         value: `1`,
         label: `Season 1`
+      },
+      {
+        group: `Show`,
+        value: `rick-morty`,
+        label: `Rick & Morty`
       }
     ]
   }

diff --git a/packages/scxa-faceted-search-results/__test__/__snapshots__/CheckboxFacetGroup.test.js.snap b/packages/scxa-faceted-search-results/__test__/__snapshots__/CheckboxFacetGroup.test.js.snap
@@ -7,7 +7,6 @@ exports[`CheckboxFacetGroup matches snapshot 1`] = `
   <h4>
     Planet
     <sup>
-       
       <span
         className="icon icon-generic"
         data-html={true}

diff --git a/...es/scxa-faceted-search-results/__test__/__snapshots__/FacetedSearchContainer.test.js.snap b/...es/scxa-faceted-search-results/__test__/__snapshots__/FacetedSearchContainer.test.js.snap
@@ -62,7 +62,6 @@ exports[`FacetedSearchContainer matches snapshot 1`] = `
       <h4>
         Guest character
         <sup>
-           
           <span
             className="icon icon-generic"
             data-html={true}
@@ -168,7 +167,6 @@ exports[`FacetedSearchContainer matches snapshot 1`] = `
       <h4>
         Planet
         <sup>
-           
           <span
             className="icon icon-generic"
             data-html={true}

diff --git a/packages/scxa-faceted-search-results/__test__/__snapshots__/FilterSidebar.test.js.snap b/packages/scxa-faceted-search-results/__test__/__snapshots__/FilterSidebar.test.js.snap
@@ -57,7 +57,6 @@ Array [
     <h4>
       Guest character
       <sup>
-         
         <span
           className="icon icon-generic"
           data-html={true}
@@ -163,7 +162,6 @@ Array [
     <h4>
       Planet
       <sup>
-         
         <span
           className="icon icon-generic"
           data-html={true}
@@ -263,5 +261,96 @@ Array [
       </div>
     </div>
   </div>,
+  <div
+    className="padding-bottom-xlarge"
+  >
+    <h4>
+      Show
+    </h4>
+    <div
+      className="css-10nd86i"
+      onKeyDown={[Function]}
+    >
+      <div
+        className="css-12emboz"
+        onMouseDown={[Function]}
+        onTouchEnd={[Function]}
+      >
+        <div
+          className="css-1hwfws3"
+        >
+          <div
+            className="css-1492t68"
+          >
+            Select...
+          </div>
+          <div
+            className="css-1g6gooi"
+          >
+            <div
+              className=""
+              style={
+                Object {
+                  "display": "inline-block",
+                }
+              }
+            >
+              <input
+                aria-autocomplete="list"
+                autoCapitalize="none"
+                autoComplete="off"
+                autoCorrect="off"
+                disabled={false}
+                id="facetGroupMultiSelectDropdown"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                spellCheck="false"
+                style={
+                  Object {
+                    "background": 0,
+                    "border": 0,
+                    "boxSizing": "content-box",
+                    "color": "inherit",
+                    "fontSize": "inherit",
+                    "opacity": 1,
+                    "outline": 0,
+                    "padding": 0,
+                    "width": "1px",
+                  }
+                }
+                tabIndex="0"
+                type="text"
+                value=""
+              />
+              <div
+                style={
+                  Object {
+                    "height": 0,
+                    "left": 0,
+                    "overflow": "scroll",
+                    "position": "absolute",
+                    "top": 0,
+                    "visibility": "hidden",
+                    "whiteSpace": "pre",
+                  }
+                }
+              >
+                
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="css-1wy0on6"
+        >
+          <span
+            className="sc-bdVaJa jcfyVD"
+            cx={[Function]}
+          />
+        </div>
+      </div>
+    </div>
+  </div>,
 ]
 `;
diff --git a/...-faceted-search-results/__test__/__snapshots__/MultiselectDropdownFacetGroup.test.js.snap b/...-faceted-search-results/__test__/__snapshots__/MultiselectDropdownFacetGroup.test.js.snap
@@ -7,7 +7,6 @@ exports[`MultiselectDropdownFacetGroup matches snapshot 1`] = `
   <h4>
     Planet
     <sup>
-       
       <span
         className="icon icon-generic"
         data-html={true}

diff --git a/packages/scxa-faceted-search-results/__test__/__snapshots__/TooltipIcon.test.js.snap b/packages/scxa-faceted-search-results/__test__/__snapshots__/TooltipIcon.test.js.snap
@@ -2,7 +2,6 @@
 
 exports[`TooltipIcon matches snapshot 1`] = `
 <sup>
-   
   <span
     className="icon icon-generic"
     data-html={true}

diff --git a/packages/scxa-faceted-search-results/html/EpisodesHeader.js b/packages/scxa-faceted-search-results/html/EpisodesHeader.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const EpisodesHeader = ({title}) =>
+const EpisodesHeader = () =>
   <div style={{textAlign: `center`}}>
     <b>Episode Title</b>
   </div>