Merge pull request #2308 from broadinstitute/jb-data-type-search-checkbox

Fix default state for options checkbox, text select behavior (SCP-6051)

Author: bistline

app/javascript/components/search/controls/OptionsControl.jsx

@@ -2,15 +2,28 @@ import React, { useState } from 'react'
 
 /** checkbox control for adding optional parameters to search query */
 export default function OptionsControl({ searchContext, searchProp, value, label, multiple = false }) {
-  const defaultChecked = searchContext.params[searchProp] === value
+  const defaultChecked = isDefaultChecked()
   const [isChecked, setIsChecked] = useState(defaultChecked)
 
+  /** return existing url query params for this option */
+  function getExistingOpts() {
+    return searchContext.params[searchProp]?.split(',').filter(o => o !== '') || []
+  }
+
+  /** set the default state for this option checkbox */
+  function isDefaultChecked() {
+    if (multiple) {
+      return getExistingOpts().includes(value)
+    } else {
+      return searchContext.params[searchProp] === value
+    }
+  }
 
   /** toggle state of checkbox */
   function toggleCheckbox(checked) {
     setIsChecked(checked)
     if (multiple) {
-      const existingOpts = searchContext.params[searchProp]?.split(',').filter(o => o !== '') || []
+      const existingOpts = getExistingOpts()
       const newOpts = checked ? existingOpts.concat(value) : existingOpts.filter(v => v !== value)
       searchContext.updateSearch({ [searchProp] : newOpts.join(',') })
     } else {
@@ -21,8 +34,11 @@ export default function OptionsControl({ searchContext, searchProp, value, label
   return (
     <li id={`options-control-${searchProp}`} key={`options-control-${searchProp}`}>
       <label>
-        <input type="checkbox" checked={isChecked} onChange={() => {toggleCheckbox(!isChecked)}}/>
-          <span onClick={() => {toggleCheckbox(!isChecked)}} >{ label }</span>
+        <input data-testid={`options-checkbox-${searchProp}-${value}`}
+               type="checkbox"
+               checked={isChecked}
+               onChange={() => {toggleCheckbox(!isChecked)}}/>
+        <span onClick={() => {toggleCheckbox(!isChecked)}} >{ label }</span>
       </label>
     </li>
   )

app/javascript/components/search/results/SearchQueryDisplay.jsx

@@ -78,6 +78,8 @@ export const ClearAllButton = () => {
     const emptySearchParams = {
       terms: '',
       genes: '',
+      external: '',
+      data_types: '',
       facets: emptyFilters
     }
     selectionContext.updateSelection(emptySearchParams, true)

app/javascript/styles/_search.scss

@@ -68,6 +68,7 @@ nav.search-links, #search-panel {
       width: 100%;
       box-sizing: border-box;
       display: inline-block;
+      user-select: none;
     }
     &.active > a, &.selected > a {
       background-color: $action-color;

app/models/hca_azul_client.rb

@@ -15,7 +15,7 @@ class HcaAzulClient
   MANIFEST_FORMATS = %w[compact full terra.bdbag terra.pfb curl].freeze
 
   # maximum number of results to return
-  MAX_RESULTS = 100
+  MAX_RESULTS = 80
 
   # maximum length of query string (in characters) for requests
   MAX_QUERY_LENGTH = 8192

test/js/search/options-control.test.js

@@ -1,21 +1,34 @@
 import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 
 import OptionsControl from '~/components/search/controls/OptionsControl'
 
 describe('OptionsControl component', () => {
   it('renders with default checked state', () => {
     const searchContext = {
-      params: { 'external': 'hca' },
+      params: { 'external': 'hca', 'data_types': 'raw_counts,spatial' },
       updateSearch: jest.fn()
     }
     const { getByText, getByRole } = render(
-      <OptionsControl searchContext={searchContext} searchProp='external' value='hca' label='Include HCA results' />
+      <>
+        <OptionsControl searchContext={searchContext} searchProp='external' value='hca' label='Include HCA results' />
+        <OptionsControl
+          searchContext={searchContext} searchProp='data_types' value='raw_counts'
+          label='Has raw counts' multiple={true}
+        />
+        <OptionsControl
+          searchContext={searchContext} searchProp='data_types' value='spatial' label='Has spatial' multiple={true}
+        />
+      </>
     )
 
     expect(getByText('Include HCA results')).toBeInTheDocument()
-    expect(getByRole('checkbox')).toBeChecked()
+    expect(getByText('Has raw counts')).toBeInTheDocument()
+    expect(getByText('Has spatial')).toBeInTheDocument()
+    expect(screen.getByTestId('options-checkbox-external-hca')).toBeChecked()
+    expect(screen.getByTestId('options-checkbox-data_types-raw_counts')).toBeChecked()
+    expect(screen.getByTestId('options-checkbox-data_types-spatial')).toBeChecked()
   })
 
   it('toggles checkbox state on click', () => {