John conroy/search qa fixes CAT-1040 CAT-1041 CAT-1042 CAT-1043 CAT-1…

…038 CAT-1039 (#3623) * Fix sort bug * Fix sort tile donors and samples * Fix bar order * Fix date range facet * Fix calendar styling * Add changelog * Fix search note skeleton * Fix disabled color --------- Co-authored-by: John Conroy <[email protected]>
hubmapconsortium · Nov 26, 2024 · 21767b5 · 21767b5
1 parent 1bd007c
commit 21767b5
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 55 deletions.
diff --git a/CHANGELOG-search-qa-fixes.md b/CHANGELOG-search-qa-fixes.md
@@ -0,0 +1,4 @@
+- Fix bug where tile dropdown on search pages was not displaying the selected field.
+- Fix bug with date facet validation.
+- Improve date picker styles.
+- Fix order of search menus.
diff --git a/context/app/static/js/components/search/Facets/DateRangeFacet.tsx b/context/app/static/js/components/search/Facets/DateRangeFacet.tsx
@@ -18,16 +18,16 @@ function DatePickerComponent({
   minDate,
   maxDate,
   ...rest
-}: DatePickerProps<Date> & Required<Pick<DatePickerProps<Date>, 'minDate' | 'maxDate'>>) {
+}: DatePickerProps<Date> & Partial<Pick<DatePickerProps<Date>, 'minDate' | 'maxDate'>>) {
   const [error, setError] = useState<DateValidationError | null>(null);
 
   const errorMessage = useMemo(() => {
     switch (error) {
       case 'maxDate':
-        return `Please select a date of ${format(maxDate, 'MMMM yyyy')} or before.`;
+        return maxDate ? `Please select a date of ${format(maxDate, 'MMMM yyyy')} or before.` : null;
 
       case 'minDate': {
-        return `Please select a date of ${format(minDate, 'MMMM yyyy')} or after.`;
+        return minDate ? `Please select a date of ${format(minDate, 'MMMM yyyy')} or after.` : null;
       }
 
       case 'invalidDate': {
@@ -55,19 +55,25 @@ function DatePickerComponent({
         textField: {
           helperText: errorMessage,
         },
+        popper: {
+          sx: (theme) => ({
+            '.MuiDateCalendar-root': {
+              height: 'auto',
+              padding: theme.spacing(1.25),
+              paddingBottom: theme.spacing(2.5),
+            },
+            '.MuiPickersMonth-monthButton.Mui-disabled, .MuiPickersYear-yearButton.Mui-disabled': {
+              color: theme.palette.text.disabled,
+            },
+          }),
+        },
       }}
       {...rest}
     />
   );
 }
 
-function DateRangeFacet({
-  field,
-  min,
-  max,
-  aggMin,
-  aggMax,
-}: DateRangeFacetProps & { min: number; max: number; aggMin: number; aggMax: number }) {
+function DateRangeFacet({ field, min, max }: DateRangeFacetProps & { min: number; max: number }) {
   const filterDate = useSearchStore((state) => state.filterDate);
   const analyticsCategory = useSearchStore((state) => state.analyticsCategory);
 
@@ -90,12 +96,12 @@ function DateRangeFacet({
 
         const newMin = value.getTime();
         setValues([newMin, values[1]]);
-        if (newMin >= aggMin && newMin <= values[1]) {
+        if (newMin <= values[1]) {
           filterDate({ field, min: newMin, max });
         }
       }
     },
-    [filterDate, max, field, setValues, values, aggMin, analyticsCategory],
+    [filterDate, max, field, setValues, values, analyticsCategory],
   );
 
   const filterMax = useCallback(
@@ -109,12 +115,12 @@ function DateRangeFacet({
 
         const newMax = value.getTime();
         setValues([values[0], newMax]);
-        if (newMax >= values[0] && newMax <= aggMax) {
+        if (newMax >= values[0]) {
           filterDate({ field, min, max: newMax });
         }
       }
     },
-    [filterDate, min, field, setValues, values, aggMax, analyticsCategory],
+    [filterDate, min, field, setValues, values, analyticsCategory],
   );
 
   return (
@@ -124,7 +130,6 @@ function DateRangeFacet({
           label="Start"
           value={new Date(values[0])}
           onAccept={filterMin}
-          minDate={new Date(aggMin)}
           maxDate={new Date(values[1])}
         />
         <DatePickerComponent
@@ -133,7 +138,7 @@ function DateRangeFacet({
           views={['month', 'year']}
           onAccept={filterMax}
           minDate={new Date(values[0])}
-          maxDate={new Date(aggMax)}
+          maxDate={new Date()}
         />
       </Stack>
     </FacetAccordion>
@@ -165,16 +170,7 @@ function DateRangeFacetGuard({ field, ...rest }: DateRangeFacetProps) {
     return null;
   }
 
-  return (
-    <DateRangeFacet
-      field={field}
-      min={min ?? aggMin.value}
-      max={max ?? aggMax.value}
-      aggMin={aggMin.value}
-      aggMax={aggMax.value}
-      {...rest}
-    />
-  );
+  return <DateRangeFacet field={field} min={min ?? aggMin.value} max={max ?? aggMax.value} {...rest} />;
 }
 
 export default DateRangeFacetGuard;
diff --git a/context/app/static/js/components/search/Facets/FilterChips.tsx b/context/app/static/js/components/search/Facets/FilterChips.tsx
@@ -151,7 +151,7 @@ function FilterChips() {
             });
           }
 
-          const hasValues = filterHasValues({ filter: v, facet: facetConfig });
+          const hasValues = filterHasValues({ filter: v });
 
           if (isExistsFilter(v) && isExistsFacet(facetConfig) && hasValues) {
             return (

diff --git a/context/app/static/js/components/search/Results/ResultsTiles.tsx b/context/app/static/js/components/search/Results/ResultsTiles.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback } from 'react';
-import { useShallow } from 'zustand/react/shallow';
 import { SearchHit } from '@elastic/elasticsearch/lib/api/types';
 import Box from '@mui/material/Box';
 import MenuItem from '@mui/material/MenuItem';
@@ -20,14 +19,10 @@ import { useSearchStore } from '../store';
 import { useGetFieldLabel } from '../fieldConfigurations';
 
 function TilesSortSelect() {
-  const { sortField, setSortField, sourceFields, analyticsCategory } = useSearchStore(
-    useShallow((state) => ({
-      sortField: state.sortField,
-      setSortField: state.setSortField,
-      sourceFields: state.sourceFields,
-      analyticsCategory: state.analyticsCategory,
-    })),
-  );
+  const sortField = useSearchStore((state) => state.sortField);
+  const setSortField = useSearchStore((state) => state.setSortField);
+  const sourceFields = useSearchStore((state) => state.sourceFields);
+  const analyticsCategory = useSearchStore((state) => state.analyticsCategory);
 
   const { table: tableFields } = sourceFields;
 

diff --git a/context/app/static/js/components/search/Search.tsx b/context/app/static/js/components/search/Search.tsx
@@ -179,8 +179,8 @@ function Bar({ type }: TypeProps) {
       </Box>
       <MetadataMenu type={type} />
       <WorkspacesDropdownMenu type={type} />
-      <BulkDownloadButtonFromSearch type={type} />
       {view === 'tile' && <TilesSortSelect />}
+      <BulkDownloadButtonFromSearch type={type} />
       <DefaultSearchViewSwitch />
     </Stack>
   );

diff --git a/context/app/static/js/components/search/SearchNote.tsx b/context/app/static/js/components/search/SearchNote.tsx
@@ -4,7 +4,7 @@ import Typography from '@mui/material/Typography';
 import { InternalLink } from 'js/shared-styles/Links';
 import useEntityData from 'js/hooks/useEntityData';
 import Skeleton from '@mui/material/Skeleton';
-import { Filter, isTermFilter, useSearchStore } from './store';
+import { Filter, filterHasValues, isTermFilter, useSearchStore } from './store';
 
 interface MessageProps {
   label: string;
@@ -54,11 +54,14 @@ const paramNotes = [
 
 function SearchNote() {
   const filters = useSearchStore((state) => state.filters);
-  const notesToDisplay = paramNotes.filter(({ filter }) => filters?.[filter]);
+  const notesToDisplay = paramNotes.filter(
+    ({ filter }) => filters?.[filter] && filterHasValues({ filter: filters?.[filter] }),
+  );
 
   if (notesToDisplay.length === 0) {
     return null;
   }
+
   return (
     <Typography component="h2">
       {notesToDisplay.map(({ filter, label, Component }) => (

diff --git a/context/app/static/js/components/search/store.ts b/context/app/static/js/components/search/store.ts
@@ -250,7 +250,7 @@ export function isExistsFilter<V = Set<string>>(filter: Filter<V>): filter is Ex
   return filter.type === 'EXISTS';
 }
 
-export function filterHasValues({ filter, facet }: { filter: Filter; facet: Facet }) {
+export function filterHasValues({ filter }: { filter: Filter }) {
   if (isTermFilter(filter)) {
     return filter.values.size;
   }
@@ -259,15 +259,15 @@ export function filterHasValues({ filter, facet }: { filter: Filter; facet: Face
     return Object.keys(filter.values).length;
   }
 
-  if (isRangeFilter(filter) && isRangeFacet(facet)) {
+  if (isRangeFilter(filter)) {
     return !(filter.values.min === undefined && filter.values.max === undefined);
   }
 
-  if (isDateFilter(filter) && isDateFacet(facet)) {
+  if (isDateFilter(filter)) {
     return filter.values.min && filter.values.max;
   }
 
-  if (isExistsFilter(filter) && isExistsFacet(facet)) {
+  if (isExistsFilter(filter)) {
     return filter.values;
   }
   return false;
@@ -285,10 +285,10 @@ export function buildSearchLink({
 }
 
 function replaceURLSearchParams(state: SearchStoreState) {
-  const { search, sortField, filters, facets } = state;
+  const { search, sortField, filters } = state;
 
   const filtersWithValues = Object.fromEntries(
-    Object.entries(filters).filter(([k, v]) => filterHasValues({ filter: v, facet: facets[k] })),
+    Object.entries(filters).filter(([, v]) => filterHasValues({ filter: v })),
   );
 
   const urlState = {

diff --git a/context/app/static/js/components/search/utils.ts b/context/app/static/js/components/search/utils.ts
@@ -98,13 +98,13 @@ export function buildQuery({
       const facetConfig = facets[field];
 
       if (isTermFilter(filter)) {
-        if (filterHasValues({ filter, facet: facetConfig })) {
+        if (filterHasValues({ filter })) {
           draft[portalField] = esb.termsQuery(portalField, [...filter.values]);
         }
       }
 
       if (isRangeFilter(filter) || isDateFilter(filter)) {
-        if (filterHasValues({ filter, facet: facetConfig })) {
+        if (filterHasValues({ filter })) {
           if (filter.values.min && filter.values.max) {
             // TODO: consider using zod in filterHasValues for validation.
             draft[portalField] = esb.rangeQuery(portalField).gte(filter.values.min).lte(filter.values.max);
@@ -113,7 +113,7 @@ export function buildQuery({
       }
 
       if (isHierarchicalFilter(filter) && isHierarchicalFacet(facetConfig)) {
-        if (filterHasValues({ filter, facet: facetConfig })) {
+        if (filterHasValues({ filter })) {
           const childPortalField = getESField({ field: facetConfig.childField, mappings });
 
           draft[portalField] = esb.termsQuery(portalField, Object.keys(filter.values));
@@ -126,7 +126,7 @@ export function buildQuery({
       }
 
       if (isExistsFilter(filter) && isExistsFacet(facetConfig)) {
-        if (!(filterHasValues({ filter, facet: facetConfig }) && facetConfig?.invert)) {
+        if (!(filterHasValues({ filter }) && facetConfig?.invert)) {
           draft[portalField] = esb.existsQuery(field);
         }
       }

diff --git a/context/app/static/js/pages/search/S.tsx b/context/app/static/js/pages/search/S.tsx
@@ -9,14 +9,15 @@ import { useAppContext } from 'js/components/Contexts';
 const sharedConfig = {
   searchFields: ['all_text', 'description'],
   // TODO: figure out how to make assertion unnecessary.
-  sortField: { field: 'last_modified_timestamp', direction: 'desc' as const },
   size: 18,
 };
 
 const sharedTileFields = [
   'hubmap_id',
   'uuid',
   'last_modified_timestamp',
+  'created_timestamp',
+  'published_timestamp',
   'entity_type',
   'descendant_counts.entity_type',
 ];
@@ -65,6 +66,7 @@ const donorFacetGroups = {
 
 const donorConfig = {
   ...sharedConfig,
+  sortField: { field: 'last_modified_timestamp', direction: 'desc' as const },
   sourceFields: {
     table: [
       'hubmap_id',
@@ -107,6 +109,7 @@ const sampleFacetGroups = {
 
 const sampleConfig = {
   ...sharedConfig,
+  sortField: { field: 'created_timestamp', direction: 'desc' as const },
   sourceFields: {
     table: ['hubmap_id', 'group_name', 'sample_category', 'origin_samples_unique_mapped_organs', 'created_timestamp'],
     tile: [...sharedTileFields, 'origin_samples_unique_mapped_organs'],
@@ -183,11 +186,13 @@ function buildDatasetConfig(isHubmapUser: boolean) {
       ],
       tile: [...sharedTileFields, 'thumbnail_file.file_uuid', 'origin_samples_unique_mapped_organs'],
     },
-    sortField: {
-      field: 'published_timestamp',
-      direction: 'desc' as const,
-      secondaryField: { field: 'mapped_status', direction: 'desc' as const },
-    },
+    sortField: isHubmapUser
+      ? { field: 'last_modified_timestamp', direction: 'desc' as const }
+      : {
+          field: 'published_timestamp',
+          direction: 'desc' as const,
+          secondaryField: { field: 'mapped_status', direction: 'desc' as const },
+        },
     facets: buildDatasetFacetGroups(isHubmapUser),
     ...buildDefaultQuery('Dataset'),
     // TODO: figure out how to make assertion unnecessary.