support for Add Filter button #3671
Conversation
| @@ -73,7 +73,6 @@ export const getFilterSearchList = ( | |||
| measureNames: [metricsExplorer.leaderboardMeasureName], | |||
| timeStart: timeControls.timeStart, | |||
| timeEnd: timeControls.timeEnd, | |||
| limit: "15", | |||
There was a problem hiding this comment.
Any reason to remove this? Better to have an explicit limit here (backend overrides limit to 100).
There was a problem hiding this comment.
This was removed because of the design changes to the dropdown. Previously, the dropdown only displayed the already selected values plus a search bar that would bring up more. The new dropdown ostensibly shows the full list of available options and even provides an opportunity to select or deselect all. Totally agree that it would be nice if we could put a cap on it somehow, but I'm not sure I see a way given the design requirements and my current understanding of the runtime.
There was a problem hiding this comment.
Hmmm would probably be better to have an explicit limit of 100. Otherwise a frontend engineer will need to look at go code to know the limit.
| @@ -33,7 +33,7 @@ export function toggleDimensionValueSelection( | |||
| } else { | |||
There was a problem hiding this comment.
We should add a safeguard for no dimensionValue in the above if block. Right now an undefined gets pushed. You can see this by adding a dimension which is already present in the filters.
There was a problem hiding this comment.
Actually a separate method to just an entry in the filters without a value might be better than reusing this method. Keeps things simple. The FilterButton will call that new method.
There was a problem hiding this comment.
Added a toggleDimensionNameSelection method
|
New commits up now. Regarding your UX question, I think the best option is to simply remove the already selected filters from that dropdown. The existing filters wrap onto a new line (and so are always visible) and the button is specifically for adding a filter (rather than removing or navigating to), so I think it's better UX to only present valid options. Good callout. Let me know what you think. |
web-common/src/features/dashboards/state-managers/actions/dimension-filters.ts
Show resolved
Hide resolved
* rework of footer to match new design and improve readability * adding filter button functionality, plus design tweaks to relevant menus * new icon * chip should not be removed when deselecting the only selected value * removing limit from filter list query * changed searchedValues to allValues, simplified display logic * updated tests to meet updated requirements * prettier unused vars build fix * remove keep-alive event * update let directive for named slot, add timeout to dashboard.spec * remove unused function * change to active logic when mounting chip component * resolve name collision * update page wait from timeout to selector * added specific method for adding a dimension name without a value * only unselected dimension names are shown in the add filter dropdown * add back limit * toggleDimensionNameSelection is now actually a toggling function * dispatch remove event rather than handle remove directly, plus bind to active property * use state manager action and prop cleanup * add back limit
Adds an "Add Filter" button to the Filters component. Also updates relevant menu designs.
Closes #3620