-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
John conroy/replace searchkit #3441
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work getting through this gargantuan effort 🙌🏻
I went through the search pages on local. My observations are noted below; I've also gone through the code and made suggestions where things stood out to me. I anticipate making a few more passes through the code as we iterate.
Datasets
- The whole table header cell shows a
pointer
cursor, but only clicking the arrow applies the sort. The unselected arrow is also very low contrast relative to the background: https://webaim.org/resources/contrastchecker/?fcolor=7979791f&bcolor=FFFFFF
Screen.Recording.2024-10-17.134635.mp4
- It might be helpful to show a loading indicator in the
show more
button after it's clicked in case the user has a slow connection. - The page seems to hang for a second or two when filters are changed:
Screen.Recording.2024-10-17.135128.mp4
- Expanding/collapsing a search facet without changing any filters appears to change the displayed search results - this may be related to the issue above.
Screen.Recording.2024-10-17.135251.mp4
- Somewhat funny example of the same issue, the order of two results changes when I expand/collapse the
group
:
Screen.Recording.2024-10-17.140340.mp4
Donors
-
Donor page results' column sizing is a bit off - the same amount of space is allotted to each column, despite
Group
being a much more text-heavy field thanDonor BMI
orDonor Age
. The donor age tooltips from Austenem/CAT-873 add donor age messaging #3548 are also missing.
-
Related to the above, Donor Age slider should be capped at 90; the visualization also appears somewhat misaligned, since the last bin in the histogram lines up with
80
.
-
Also, should we consider naming the columns "Age" and "BMI" to be a bit less redundant?
Publications
The chronological sort order applied in #3565 is no longer present/the publications list is no longer sorted:
Organ pages
Homepage
Same as the organ page, the graph's links need to be updated to use the new util.
The collections count fix from #3564 should be restored:
const FacetAccordionDetails = styled(AccordionDetails)({ | ||
flexDirection: 'column', | ||
padding: '4px 4px 4px 8px', | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I figure we can use theme.spacing
here instead:
const FacetAccordionDetails = styled(AccordionDetails)({ | |
flexDirection: 'column', | |
padding: '4px 4px 4px 8px', | |
}); | |
const FacetAccordionDetails = styled(AccordionDetails)(({ theme }) => ({ | |
flexDirection: 'column', | |
padding: theme.spacing(0.5, 0.5, 0.5, 1), | |
})); |
const FacetAccordionSummary = styled(AccordionSummary)(({ $position }: { $position: 'inner' | 'outer' }) => ({ | ||
padding: $position === 'outer' ? '4px 0px' : 0, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const FacetAccordionSummary = styled(AccordionSummary)(({ $position }: { $position: 'inner' | 'outer' }) => ({ | |
padding: $position === 'outer' ? '4px 0px' : 0, | |
const FacetAccordionSummary = styled(AccordionSummary)(({ $position, theme }: { $position: 'inner' | 'outer' }) => ({ | |
padding: $position === 'outer' ? theme.spacing(0.5, 0) : 0, |
const FormLabelText = styled(Typography)({ | ||
marginRight: '2px', | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const FormLabelText = styled(Typography)({ | |
marginRight: '2px', | |
}); | |
const FormLabelText = styled(Typography)(({ theme }) => ({ | |
marginRight: theme.spacing(0.25), | |
})); |
const interPadding = `${16 * 0.6}px`; | ||
const sidePadding = '64px'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we use rem
for these?
const interPadding = `${16 * 0.6}px`; | |
const sidePadding = '64px'; | |
const interPadding = '.6rem'; | |
const sidePadding = '4rem'; |
const sharedArrowStyles = { | ||
verticalAlign: 'text-top', | ||
fontSize: '1.1rem', | ||
}; | ||
|
||
const ArrowUpOn = styled(ArrowUpward)({ | ||
...sharedArrowStyles, | ||
}); | ||
|
||
const ArrowDownOn = styled(ArrowDownward)({ | ||
...sharedArrowStyles, | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this should work:
const sharedArrowStyles = { | |
verticalAlign: 'text-top', | |
fontSize: '1.1rem', | |
}; | |
const ArrowUpOn = styled(ArrowUpward)({ | |
...sharedArrowStyles, | |
}); | |
const ArrowDownOn = styled(ArrowDownward)({ | |
...sharedArrowStyles, | |
}); | |
const sharedArrowStyles = { | |
verticalAlign: 'text-top', | |
fontSize: '1.1rem', | |
} as const; | |
const ArrowUpOn = styled(ArrowUpward)(sharedArrowStyles); | |
const ArrowDownOn = styled(ArrowDownward)(sharedArrowStyles); |
as const
indicates that the properties of sharedArrowStyles
are guaranteed not to change, so TypeScript narrows their values to text-top
and 1.1rem
respectively as opposed to string
and string
, which might be too loosely typed for styled-components' liking.
import { Entity } from 'js/components/types'; | ||
|
||
const donorMetadataPath = 'mapped_metadata'; | ||
const sampleMetdataPath = 'metadata'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const sampleMetdataPath = 'metadata'; | |
const sampleMetadataPath = 'metadata'; |
}, | ||
dataset: { | ||
donor: `donor.${donorMetadataPath}`, | ||
sample: `source_samples.${sampleMetdataPath}`, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sample: `source_samples.${sampleMetdataPath}`, | |
sample: `source_samples.${sampleMetadataPath}`, |
@@ -0,0 +1,45 @@ | |||
import React, { useCallback, useState } from 'react'; | |||
import { trackSiteSearch, trackEvent } from 'js/helpers/trackers'; | |||
import SearchBarComponent from 'js/shared-styles/inputs/SearchBar'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also potentially outside the scope of this PR, but maybe we can add a submit button to this component? It wouldn't hurt to have an e.g. ArrowRight icon at the end of the text input to indicate the form action's presence
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will this mapping live in the repo? If so, do we have a mechanism to update it to reflect Zhou's changes?
The publications/collections issues are just because I'm behind main here. Should be fixed with a merge. |
spelling fixes
Feature branch for the effort to replace searchkit.