feat(data-exploration): improved editing UX

[mariusandra]

Problem

Currently you can only edit data exploration columns via the "column configurator" view

Changes

Adds a submenu at the end of each column header, letting you sort, edit, add and delete columns:

I don't know what should be in the scope of this PR and what should go in a followup. There are still many obvious changes we can make to this interface. I'd be very happy to hear thoughts on how can we improve this further, and what is blocking in this round :).

How did you test this code?

Played around with the columns.

[mariusandra]

I improved the popups somewhat, yet there's probably still some room for improvement. The tooltip that shows up for e.g. "library" could likely also be rolled into the popup.

[thmsobrmlr]

LGTM - I have absolutely no remarks code or functionality wise. Sorting the columns seems to be eagerly awaited, so this will help lots

Since you're asking for feedback - here are some ideas that came to mind:

• I think the "more" button would be better right aligned, as otherwise there is no spacing between the column title text and the button on hover

• Sorting could be done with with by up / down / neutral icons, like we do here, including clickable columns https://storybook.posthog.net/?path=/docs/lemon-ui-lemon-table--basic

• I'm not a big fan of the "Add column before/after" items - I think the current solution works, and could imagine a "+" button at the end of the table, with draggable columns

• We could show the edit / sort icons just on hover, to keep the UI more clean

• Something that doesn't work well right now, but could with PostHog 3000 is how Notion does it (hover and click on the columns):

  notion-columns.mov

[mariusandra]

Thanks for the review! I added a link to your UX suggestions as a checkmark in the "next steps" list to be sure not to forget this. As it would be a bit of work which I'd take on after the "hogql property filters" PR is done (so likely not today), I'll merge this in now and continue in a followup.

[lharries]

Great work! Few thoughts:

• I like the suggestion of moving to the SQL format of “total() as ‘crash_events’ for when we have a more custom parser What are "Data Exploration" and "HogQL", and what can you already do with them? meta#86 (comment)
• Agreed with making columns draggable
• Agreed with the plus on the right similar to Notion which adds a column on the right
• When clicking this plus we could add a dropdown for “Total count” which then prefills the formula total(). This will make it easy for people who don’t know SQL to add counts
  • What are "Data Exploration" and "HogQL", and what can you already do with them? meta#86 (comment)
• Small bug - When you add a column with invalid HogQL it creates an empty column I think https://share.cleanshot.com/fJT3ljf8