PORTALS-2651 - Synapse Tables-related components #1542
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Collaborator
nickgros
commented
Jan 31, 2025
nickgros
commented
- ColumnSelection: convert from react-bootstrap Dropdown to MUI MenuItems
- DownloadOptions: convert from react-bootstrap Dropdown to MUI MenuItems
- FacetNavPanel: convert from react-bootstrap Dropdown to MUI Select
- EnumFacetFilterDropdown: convert from react-bootstrap Dropdown to MUI Select
- Update ElementWithTooltip to remove react-bootstrap
- ThemesPlot, SelectionCriteriaPill, FacetPlotLegendList: Replace ElementWithTooltip with simple MUI Tooltip
- ColumnSelection: convert from react-bootstrap Dropdown to MUI MenuItems - DownloadOptions: convert from react-bootstrap Dropdown to MUI MenuItems - FacetNavPanel: convert from react-bootstrap Dropdown to MUI Select - EnumFacetFilterDropdown: convert from react-bootstrap Dropdown to MUI Select - Update ElementWithTooltip to remove react-bootstrap - ThemesPlot, SelectionCriteriaPill, FacetPlotLegendList: Replace ElementWithTooltip with simple MUI Tooltip
nickgros
commented
Jan 31, 2025
| @@ -338,10 +326,9 @@ export function ThemesPlot({ | |||
| }} | |||
| > | |||
| <div className="ThemesPlot__dotPlot__barColumn"> | |||
| <ElementWithTooltip | |||
There was a problem hiding this comment.
No need to use the complicated ElementWithTooltip, just use MUI Tooltip
nickgros
commented
Jan 31, 2025
| return ( | ||
| <Dropdown |
There was a problem hiding this comment.
Replace dropdown with MUI MenuItems
nickgros
commented
Jan 31, 2025
| } | ||
|
|
||
| const tooltipColumnSelectionId = 'addAndRemoveColumns' | ||
|
|
||
| export function ColumnSelection(props: ColumnSelectionProps) { |
nickgros
commented
Jan 31, 2025
| <Dropdown.Menu | ||
| className="SRC-primary-color-hover-dropdown" | ||
| alignRight={true} | ||
| const downloadMenuItems: ReactNode[] = useMemo(() => { |
nickgros
commented
Jan 31, 2025
| @@ -338,27 +345,18 @@ function FacetNavPanel(props: FacetNavPanelProps) { | |||
|
|
|||
| /* rendering functions */ | |||
| const chartSelectionToggle = ( | |||
nickgros
commented
Jan 31, 2025
Comment on lines
+400
to
+417
| <Stack gap={2}> | ||
| <StyledFormControl> | ||
| <InputLabel | ||
| sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }} | ||
| > | ||
| <span>Filter All Data By</span> | ||
| <Tooltip title="Selecting items in this dropdown will affect all facets on the Explore page."> | ||
| <InfoOutlined className="SRC-hand-cursor SRC-secondary-text-color" /> | ||
| </Tooltip> | ||
| </InputLabel> | ||
| <EnumFacetFilter | ||
| facet={facetToPlot} | ||
| containerAs="Dropdown" | ||
| dropdownType="SelectBox" | ||
| /> | ||
| <Tooltip title="Selecting items in this dropdown will affect all facets on the Explore page."> | ||
| <InfoOutlined className="SRC-hand-cursor SRC-secondary-text-color" /> | ||
| </Tooltip> | ||
| </div> | ||
| </StyledFormControl> | ||
| {chartSelectionToggle} | ||
| </> | ||
| </Stack> |
nickgros
commented
Jan 31, 2025
Comment on lines
26
to
46
| <Select | ||
| className={'EnumFacetFilter EnumFacetFilterSelect'} | ||
| show={isShowDropdown} | ||
| onToggle={onToggle} | ||
| value={menuText} | ||
| renderValue={() => menuText} | ||
| onChange={() => { | ||
| // noop - the children will handle change events | ||
| }} | ||
| > | ||
| <Dropdown.Toggle className="secondary-caret" variant="gray-select"> | ||
| {menuText} | ||
| </Dropdown.Toggle> | ||
| <Dropdown.Menu>{children}</Dropdown.Menu> | ||
| </Dropdown> | ||
| {/* Hack to prevent Select warnings - add a hidden MenuItem */} | ||
| <MenuItem value={menuText} sx={{ display: 'none' }} /> | ||
| <Box | ||
| sx={{ | ||
| // hack to expand the dropdown menu width for this component only | ||
| '& .EnumFacetFilter__dropdown_menu': { | ||
| maxWidth: '100%', | ||
| }, | ||
| }} | ||
| > | ||
| {children} | ||
| </Box> | ||
| </Select> |
There was a problem hiding this comment.
This menu doesn't really act like a true Select box, since it just renders an arbitrary menu. This hack was easier than building out a custom component
nickgros
commented
Jan 31, 2025
...react-client/src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterDropdown.tsx
Outdated
Show resolved
Hide resolved
jay-hodgson
approved these changes
Feb 3, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.