Improve UX for formulas in trends

[macobo]

Is your feature request related to a problem?

We recently added a formulas feature to trends. There's no real explanation of what A/B/C are in the UI, causing users to enter invalid formulas which end up as errors.

Describe the solution you'd like

• Add tooltip to "formulas" section explaining things
• Maybe add A, B etc badges next to actions/events, an affordance indicating that the two concepts are related
• Show proper validation errors when user enters an incorrect formula

Here's how mixp@nel solves this:

Note also that formulas section is collapsable and by default collapsed.

Describe alternatives you've considered

Additional context

Sentry errors related to this: https://sentry.io/organizations/posthog/issues/2219619895/?project=1899813&query=is%3Aunassigned+is%3Aunresolved

Thank you for your feature request – we love each and every one!

[samwinslow]

Worth mentioning that #3620 partially addresses this, and there are no more Sentry errors after Feb 24. It seems to be rolled out to 30% of real users (and some misc others) via this feature flag.

Perhaps @paolodamico can give context as to whether we can roll this out further or if further iteration is needed?

[macobo]

cc @clarkus @paolodamico worth adding to core experience backlog? Regularly seeing errors in sentry relating to this, indicating users are struggling.

[clarkus]

Sure I can spend some design time on this issue this week. It's related to other ongoing validation work, so it's a good time to think about it.

[clarkus]

From the related https://github.com/PostHog/posthog/issues/4475

Formulas, some types of property aggregation, and other visualization options (e.g. cumulative) are advanced features that the majority of queries won't require. Should we hide these behind an advanced mode to make the experience easier for those times when you don't need it?

[clarkus]

Here's a 2-part solution that uses a workflow similar to the one documented in https://github.com/PostHog/posthog/issues/4680. When a user clicks add formula, show a modal that allows the user to enter a formula name and a formula. This concept has a variable reference built into the control. When you click a variable, it inserts it into the formula textarea at the current cursor position. If there isn't a cursor position, append the variable to the end of the current value (if one exists).

This update allows for multiple formulas to be specified. As each formula is specified, they are listed left-to-right in a sentence-like flow. Clicking a formula will trigger the modal for editing. Clicking the x icon will remove the formula.

I know we're limited on our ability for format text in a form element, so I can adjust this design to adapt to whatever technical constraints we encounter. Thoughts on this idea? Is there anything else we could add in to make creating formulas easier?

[paolodamico]

Thanks @clarkus! Here's some feedback,

1. I think this process could be simplified. The modal can it feel clunkier and then editing can be more cumbersome. The way I imagine this is just the inline text field where simply when you type we show the input as your design above (which adds clarity to the way everything is displayed) and we give immediate error feedback there too. We could also add the "graph series variable" helper and even include supported math operators too. We could give an "edit" option (as an alternative) to users where this modal pops up and you have more space to create your formula and rename it. Thoughts?
2. @Twixes as you provided all the context on #4680, perhaps you'd like to weigh in here? Or @mariusandra ?

[clarkus]

Sure I'm up for trying to simplify. This was mostly a concept to drive feedback, so it's very much in the idea-phase. I think the case for the modal could be debated a bit... it really depends on how complex formulas will be and what the typical character lengths might be. There was also another idea of introducing some utility control to insert a formula based on some list of presets... having a modal here would give us a bit more space to allow for that. The modal also separates editing from summarization - if we allow for multiple formulas and we tile them left-to-right, editing might be more cumbersome if it happens inline.

Much like #4680, the core change here is clearer validation. We could start with that, watch usage and queue up another iteration once we think we have a better understanding of the problems to be solved.

[clarkus]

Here's a rework to focus on inline editing. This is availilbe in figma at https://www.figma.com/file/9yWtngNb1AIuf6KmXaEPJA/App-doodles?node-id=1070%3A135500.

[paolodamico]

Really like this! I think this can make it super clear and also quite straightforward to change. FYI checked some numbers and almost all the time formulas are quite simple (see below, source).

Some additional feedback:

• Wonder if we should add the four basic operators too (seems more likely that you'll want to click on those than the graph series variables, particularly if you have a ton of them).
• How about adding a tooltip when you hover over the graph series variable where we show you the series name (or automatic name if you haven't set one)?
• I think it's worth showing an example of an error case when you type an invalid formula related to operator characters (e.g. typing to ++ together).
• From the screenshot above, notice also the random use of spaces, we should limit those and just add appropriate padding automatically (implementation note).

[clarkus]

Here's that feedback illustrated. I feel kind of torn about the operators and the variables. I think having a reference of the options available is good, but at some point this layout won't scale to account for everything. I feel like we should simplify it, and see how that performs. Thoughts?

[samwinslow]

FWIW, I really like the way Google Sheets color-codes these references in formulas. Since we already have colors assigned to series, think it makes sense to use them here?

[paolodamico]

Thanks for exploring this @clarkus. I almost feel it's more useful to have the reference operations instead of the letters, these are also static, while we can have n letters. Absolutely love everything else! The colors idea from @samwinslow sounds super interesting too!

[clarkus]

Color coding could work, but we would need to adjust color values to have sufficient contrast for smaller text. Those colors work for graphs for the most part, but some of them just won't have enough contrast for text over a white background. I'm not against the idea, I just need to put in some time to create those colors and make sure they work everywhere we would use them.

This update drops the graph series key and instead focuses on operators. Let me know what you think.

[paolodamico]

Great point on the colors contrast! I actually don't think it's worth spending time on that right now, we have a ton of constraints on the series colors and adding another one might make it even more complex, we've been trying to rethink colors for as long as I can remember. Let's keep it this way.

I think this is ready to implement, I'll do so as soon as I can, if someone else from the Core Experience Team wants to pick it up go ahead too.

[pjeziorowski]

We recently added a formulas feature to trends.

Could you tell me in which release it was added?

[paolodamico]

Hi @pjeziorowski! I'm just realizing we haven't officially included this in a release, even if we don't implement the improvements outlined here, we're including in the next release (1.28).

[posthog-bot]

This issue hasn't seen activity in two years! If you want to keep it open, post a comment or remove the stale label – otherwise this will be closed in two weeks.