New filtering experience UI enhancements

[samwinslow]

Changes

Contributes to #4050:

• Filtering experience. Local filters should be collapsed by default (opened through filter icon at the right of each row). Add more filters by clicking a plus button (see wireframes).
• UI of filter rows, zebra-striped to clearly distinguish each row (as shown on mockup).
• Change filter icon to "X" to avoid confusion with removing entire series.

• Missing icons on display config (chart visualization type, and interval)

• Remove event popover for PostHog-based events (as we did for properties).
• Funnels. We'll probably want to keep vertical layout for them (due to the nature of the steps process, plus there's no benefit of how these are read horizontally
• (nice to have). Tabbed keyboard navigation.

Checklist

• All querysets/queries filter by Organization, by Team, and by User
• Django backend tests
• Jest frontend tests
• Cypress end-to-end tests
• Migrations are safe to run at scale (e.g. PostHog Cloud) – present proof if not obvious

[samwinslow]

Tests failing inconsistently / appear unrelated. Different tests fail each time.

[paolodamico]

Loving this! The new filtering button/experience is amazing and feels so fast! Also, great stuff on the display icons, wasn't picturing them that way, love them!

Some minor things, but nothing blocking (numbered for easy discussion):

1. The zebra-striped is separating each filter but I think to be more useful it should be for each graph series group (series definition + filters) that's separated. That way if you have multiple filters on each series and multiple series, you can quickly identify which one is which.
2. Arrow is not centered vertically.

3. Genuine question. Should we use the same tag indicator we use elsewhere for the "AND"s? Not sure if actually just plain text would be clearer here.

4. For the interval filters, I would just add the clock icon to the main label display (instead of on each option). Like we have for the date range selector. My thinking is that the icons don't really provide extra value. 5. (nice to have). With the introduction of tabbed navigation, would be pretty useful to be able to close the events and properties selectors with the "Esc" key.

[samwinslow]

@paolodamico for some reason I can't reply inline to your review — could you clarify this?

Actually it looks like the display selector is no longer visible on funnels. (frontend/src/lib/components/ChartFilter/ChartFilter.js)

Do you mean it's okay that the selector is no longer visible on funnels? In such a case, should we then remove this block on line 53 and just keep the second part of the ternary?

const options =
        filters.insight === ViewType.FUNNELS
            ? [
// ...

2. Arrow is not centered vertically.

Also can't repro this — how does it look for you here on Insights when the feature flag is turned off? I suspect the problem might be because the arrow is actually a Unicode character; perhaps different browsers or OSX versions use a different system symbols font.

3. Yes, I like the AND tags and would be happy to use them! Related to point 2, should we keep this arrow thing at all? Perhaps an indent before "where" is all we need.

EDIT: New approach re: point 3:

[paolodamico]

Np, thanks for the quick turnaround here!

1. I actually think it should be there, because we use that to switch between plain funnel and funnel conversion rate.
2. Yeah that might be it, maybe better to use Ant's. Also from your screenshot not sure if you're on the latest version of the branch (as we dropped the Add filters button).
3. Yup might be a good option, we could try it out. Regardless, I would at most keep it for the first filter row of each series.

[samwinslow]

Cool, thanks! On issue 2 above (arrow styling) — that screenshot is what it looks like for me on master or with the feature flag turned off. Wondering if it looks the same for you or is also messed up. If so I'll switch the whole thing over to a different SVG icon.

[paolodamico]

If it's okay, I'll merge this in and we can figure out these small details in a subsequent PR, as I've made a couple of follow-up PRs from this branch and so we can wrap all these for tomorrow.

[samwinslow]

I am genuinely quite :confused: as to how you got the icon to display on only the select toggle... here's my attempt to do the same. Not bad necessarily, but not what was intended.

[paolodamico]

Yeah I relied on the optionLabelProp of Ant's Select, but can't seem to reproduce for the interval filter either. Perhaps it's just a matter of having the icon separate from the component? We just need to make sure it triggers the dropdown. Are you working on this in another PR? Happy to take a look.