Toolbar Epic

[timgl]

Tickets

• [x] #869 "New toolbar always visible on website + simple pageview stats"
• [x] #868 "Basic toolbar with actions"
• [x] #888 "API for elements volume"
• [x] #1030 "Get all actions that match a URL"
• More TODO items in this comment

Linked discussions

• 741 "Dev toolbar ideas"

Other possibly related issues

• 911 "After Inspecting element on page to define action. Save does not redirect back to posthog"

Structure

• Stats
  • Inspector
  • Top elements on page
  • When stats are selected, all clickable elements on the page should have a little box with a number in it that you can hover over to see stats.
  • This should have a "heatmap" mode which displays essentially the same data
  • Pageviews for this page
  • Session stats
• Action
  • If you haven't been sent from the app, this should only allow you to create a new action.
  • Link 'Edit actions' that links back to the app
  • If you were sent from the app (editing action) it should show you the currently edited action, or allow you to create a new one
• Dashboards
  • List of dashboards (pinned first)
  • When clicking shows the dashboard with all graphs

High fidelity mock up

[mariusandra]

Some screencasts of what is done:

The CSS is broken on this one. Showing browsing between pages though, if the site is built with modern tech:

[EDsCODE]

Stats

[EDsCODE]

Actions

Can show metrics under the created actions too

[EDsCODE]

Dashboards

This one is quite barebones. As far as I understand this page it's just to show mini pinned dashboards so listing them like this should be sufficient

[mariusandra]

Hi, so a bunch of changes just went up in the PR #896 . The rundown:

Done outside of the toolbar:

• added a new folder frontend/src/toolbar with code for the new toolbar, the old one remains in frontend/src/editor.
• split the webpack.config.js into 3 configurations: main (app), editor (old toolbar), toolbar (new toolbar) so that different output could have different plugins
• added HMR to the old editor (for free!)
• added a setting in settings.py POSTHOG_TOOLBAR="editor" , which when set to "toolbar" turns on the new toolbar
• I had to edit posthog-js to forward some values to the new toolbar and also the old one, e.g. jsURL to help with HMR. I published the beta package under @mariusandra/posthog-js on NPM. Commit in the posthog-toolbar branch and I can publish updates

Done regarding the toolbar

• implement a few elements from the mockups from Eric
• a lot of cleanup/refactor for the CSS, including adding a system where the new toolbar gets its CSS directly from the "toolbar.js" webpack - no separate toolbar.css file needed - making it much easier to include from JS and no flickering or waiting for styles to load
• added some default styling for the floating version of toolbar that's not a huge eyesore, but this should still be improved
• inspect element improvements

TODO (and TODO new issues when needed):

• [x] add a setting into the user's /setup page to have the old "editor" toolbar or to opt into the new "toolbar" (and then choose if it should open in "button", "float" or "dock" mode --> q: should this be per user or per team? I can cache the last used option as well.
• [x] add a "button" mode for the new toolbar that just shows a button that you can click that opens the posthog toolbar. I'm imagining something like the facebook messenger icons on mobile
• [ ] mobile mode (just button + fullscreen instead of button + floating/docked) --> q: how to do for "inspect element"?
• [ ] make the "actions" tab open by default if adding a new action
• [x] clean up the actions tab in the new toolbar and connect it to the new inspect element system
• [x] test and make sure the actions tab works like it did before, including adding, editing actions, etc
• [ ] implement the stats page
• [x] implement a DOM element usage heatmap
• [ ] show more useful stats
• [x] show stats per element
• [x] probably some better or removed animation between different tabs in the toolbar (fixed for float mode, which had issues with tab fading)
• [x] dashboards tab
• [x] a lot of refactoring still to do for sure :)

[mariusandra]

Adding some nice screenshots from PR #974

[mariusandra]

More epic updates!

Now that PR #974 is (almost) in master, there's a lot more we can play with! 🤩

Here's a short overview of the state of things.

1. If you're logged in to PostHog (and have the new toolbar enabled), visit your site and you'll find this:

2. Click it and you'll be taken to a screen like this:

3. After that you can play with the toolbar. You get two nice buttons: "inspect" and "heatmap". The first one (inspect) shows all clickable elements on the site. The second (heatmap) shows statistics on how many times were those elements clicked in the last 7 days.

4. Alternatively, click on "Toolbar" and you'll see the same stuff on the right side of the screen... plus even more details.

While this toolbar shows some cool info, it's not yet as practical as it should be. More on this in the next reply.

To enable the toolbar in its current state, edit settings.py and set TOOLBAR_VERSION = 'toolbar'

[mariusandra]

(Edited 2020-06-23 to add headers and a few points. Head jaanipäeva!)

Here's an in-exhaustive list of things still to do. Some of them are more important than others, yet all should be done at one point or another.

Actions

• [x] *Ask the API for all the actions that are relevant for this page (status: asking for everything. this might be fine... or might not be, issue #1030 created to extend this)
• [x] *Show small flags 🏁 next to the heatmap/inspect elements that have actions attached to them
• [x] *Show what actions are attached to an element in the sidebar (dock mode) or popup (button mode).
• [x] *Create a new action if there is none attached to the selected element (or add a new one if something is attached)
• [x] *Delete actions
• [ ] Handle backend errors
• [ ] Show if form is saving
• [ ] Get Toast working inside the shadow DOM

UI Consistency

All of this is totally up for debate! I don't know what the end result will look like!

• [ ] ?Redo the sidebar. I think the sidebar should work like this: 1) if an element is selected/hovered, show a full pane about it, 2) if no element is selected, show stats about the page itself. I think it could be practical to move the "inspect" and "heatmap" buttons to the top, above the tabs, next to each other... and then possibly remove or redo the tabs altogether to make the "two-state" (page vs element) sidebar work well.
• [ ] ?Duplicate all data from "dock mode" into "button mode", so no matter what mode you use (or are forced to use), you can do all the things in both.
• [x] ?Get rid of the third mode called "float", which just floats the sidebar on the screen. It looks bad with the element popups.
• [ ] ?Disable "dock mode" below a certain screen width.
• [x] Figure out the interactivity on small touchscreens. Right now if you click the center button ("toolbar"), it opens the toolbar. If you long press it, it doesn't open the toolbar and just extends the other buttons. This could cause issues with using the button on mobile, as you might enter "dock mode" accidentally frequently.
• [x] Drag around the element popups after clicking on an element in button mode
• [x] Move the button if you resize your screen and it ends up outside the bounds
• [ ] Update marginTop in the sidebar in dock mode when scrolling the screen
• [ ] Mobile mode (just button + fullscreen instead of button + floating/docked)
• [x] Better heatmap loading animation in button mode

UX

• [ ] What view to open when clicking "inspect element" in posthog/app? Docked? Button? Float?
• [x] Make the "actions" tab open by default if adding a new action
• [ ] Delete actions with confirm or with undo
• [ ] Handle action create/save error states

Other Bigger Questions

• [ ] When loading elements, often we get some that are not anymore visible on the page (e.g. the interface changed and the element is not there anymore... or the element is only visible on mobile mode and you have a desktop resolution). How and where to show this info?
• [ ] When using the toolbar, my "isAuthenticated" user's $pageview and $pageleave events are still captured. I think they should be discarded.
• [ ] Make localhost:3000 dev work with the real API (see production stats in localhost)
• [ ] Get the graphs apis working with the token
• [ ] Show pageview weekly stats somewhere.
• [ ] When more than 2 actions share an element, it's not clear how it should be shown (there could be a react key error even?)

---

I'll probably edit this list and add points as they come up.

The tasks with * are things that should be done before we can soft launch this. It's not a lot of work, yet it has taken a long time to get to a point where I can now focus on them :).

[timgl]

I think this is a great/comprehensive list. A few more I think are necessary

• [x] Heatmap loading animation still bugs me ;)
• [x] Worth removing the "Dashboards" tab for now
• [ ] "Last 7 days" -> "Pageviews in the last 7 days"
• [x] The "x" doesn't look quite right here, maybe can be moved once you remove the "float" icon
• [ ] I wonder if I'd look better if the four floaty cards are just one card, separated by a thin <hr>. Less urgent.
• [x] When resizing (or even just reloading the page in a smaller screen) it's possible to completely lose the toolbar. When first loading at least it should work out if the stored coordinates are in view or not

[mariusandra]

Hi, great points! Quick comments on some:

• I can try a few different animations once the more important things are done :).
• For the "X", I think it's needed as it just removes the float entirely. That said, I think it should always be on top (either left or right), like the "1" for heatmaps is now. It could be smaller as well perhaps.
• On load it does figure out how big your screen is and it places the button so it's always visible. Not so when resizing though. This is in my list above as well.

[timgl]

One other thing that definitely is crucial for launch is instrumentation. A used toolbar would suffice if the user interacted with anything at all, and then individual used heatmap, used inspect etc.

[mariusandra]

I made a project for the toolbar here: https://github.com/PostHog/posthog/projects/7 ... and added all the things I could find in this epic as draft issues. Thus I propose to retire this epic.

Any objections?