Improving the outliner and the surrounding area

[rgoj]

Introduction

This issue is a follow-up to all the work on the outliner (see #842 for all the PRs) and, in particular, to the last part of the work, of making the outliner work well in Maptio - in #838 we've collected small tasks that we could possibly pick up to improve the experience of using the outliner. We've already completed a bunch of them before shipping to production, but we've decided to postpone others. Here they are, hopefully we can do some of them now, some later over time.

Completed tasks

• Process https://maptio.slack.com/archives/C01QCQJMS23/p1698827400233449
• [USABILITY] [MEDIUM] When a circle is clicked, we should be able to see that circle in the outliner, even when it was previously collapsed. Therefore, on click, we need to make sure that all the circles in the path are expanded and we need to scroll down / up enough to make the selected circle visible. (done in Scroll outliner to selected initiative #849)
• [REGRESSION] [SMALL] While connecting the new outliner with the expanded map, I appear to have accidentally broken a part of the flow of opening and closing circles. Specifically, when you're zoomed in a few levels deep and click outside the currently selected circle, you should be zoomed out and see all the siblings of that circle (see behaviour in production). Instead, now (see behaviour on staging), you're zoomed out to the cover of the parent circle, making exploration a lot more annoying! (done in Fix circle cover appearing on first rather than second click out of circle #850)
• [USABILITY] When a new sub-circle is added, it's (no longer?) showing on the map and in the circle details pane, let's change that

Inbox

(Comments that need to be processed into tasks)

• Finish process Replace old outliner #838 (comment) (as copied in this issue in a comment below)

Remaining small tasks

Fast follow-on tasks

All done 🎉

After the fast follow-on tasks

• Clean up code around the outliner in preparation for work on side panels (time box) #847

Other potential fast follow-on tasks we should perhaps review to see whether they're not more important than the side panel work

• [STYLES] [TINY] Significantly reduce the indent to make more space for the initiative names
• [STYLES] [USABILITY] [BUG] [MEDIUM] Other parts than vertical spacing: Improve handling of multiline items (replace input with textarea; improve margins/padding even when not editing; fix bug that happens when editing and pressing any of the buttons)
• [USABILITY] [SMALL] Pressing enter when editing should create a new item (this is almost a regression - with the old outliner it used to be very easy to create lots of circles at once and then start editing them - that was always a workaround, but it worked, whereas now there is no good way to do this - intentionally as the "right" solution, IMHO, is to do this on pressing Enter)
• [USABILITY] [SMALL] Pressing 'Esc' or 'Cmd/Ctrl Enter' while editing should allow you to exit editing currently you can only leave by clicking somewhere outside the outliner which is fiddly (it's debatable whether this is the right solution - OmniFocus does something different, Finder too, but their solutions are slightly trickier to implement in some ways)
• [USABILITY] [TINY] When the root circle is deleted and created from scratch, make sure the new outliner is updated and the new root circle selected
• [STYLES] [SMALL] Improve the drag and drop styles a bit (see also bigger task below) (timebox)
• When a circle is deleted, we should select its parent so that it doesn't stay selected in the circle details panel.
• [USABILITY] [MEDIUM] When you previously viewed a map and selected a particular circle, when you open that map again, the circle is, again, selected. However, it's not selected in the outliner. (Nor in the circle details panel, come to think of it!) If we're clearly showing a circle as selected, it should be showing up as selected also in the outliner and in the circle details panel.
  • Technical notes: I tried doing this today, but what I found was that I had hardcoded the reading and selecting of the circle from local storage into the circle map module itself, which, in retrospect is definitely not where this code should live. In that module, we don't - and shouldn't - have access to the workspace state management, to ensure clear boundaries and reusability for the circle map, so that it's clearer to reason about any state changes. Therefore, we can't easily (well, we can, with an output, but we might as well do this right as it's the same amount of work!) communicate the state change when the circle is selected based on local storage. This logic should live in the workspace component that should then set the selected component into state management, triggering any other changes that selecting a circle might trigger in other related parts of the app. Not that much, but a bit more work.

Want to do

• [USABILITY] When a new sub-circle is added, immediately trigger editing that circle
• [USABILITY] Add expand/collapse children to the menu (this is to replace the "Expand/Collapse All" buttons)
• [STYLES] Make sure the menu trigger button stays visible when the menu is open - even while you're no longer hovering over the item itself (which is what hides the menu trigger)
  • [STYLES] When a node doesn't have a toggle (i.e. it doesn't have any descendants), the left edge of the item highlight looks like it's sticking out a bit weirdly (because the toggle icon isn't there), what might be a nice way of addressing this?
• [TECH DEBT] Move all of the new outliner-related template into a new component and the business logic into a new service to finish addressing the clutter inside BuildingComponent and pave way for work on side panels (we could also do this work then to kick things off)

Not for now

• [REGRESSION] [I18N] [MEDIUM] [DISCUSS!] The tooltip for the "add sub-circle" button used to be translated, but the notebits outliner library doesn't support i18n yet! The way to solve this would be to move the labels out of the outliner library, to make them customisable in the project using the library, and that is the ultimate goal, but it's not possible yet. It's not trivial, but can be done. I'm hoping to do the bulk of the work in the future as part of notebits work though.
• [REGRESSION] [USABILITY] [DISCUSS!] The old outliner persisted expansion state to local storage and recreated it when loading the map, I haven't reimplemented that (yet) as I don't think it's that important, especially if we open up the first level of nodes by default - still, not that hard to do!
• [USABILITY] Cut, copy & paste (optional now that we know drag & drop is working)
• [USABILITY] Pressing Tab and Shift + Tab should indent and outdent respectively
• [USABILITY] When editing is triggered, show the cursor where the user clicked
• [STYLES] [LARGE] Improve the drag and drop styles - drag and drop with outliners is so tricky to get right, but it makes such a huge difference when the UX of this is really good! I am hoping to do this slowly as part of notebits work though, so perhaps we don't need to do this now (...though I would looove to!)

[rgoj]

For convenience, here's what Tom posted previously in #838 (comment) (I've crossed out everything that's already completed or that I've already made sure is captured accurately in the tasks above):

Great work getting this running on staging Romek! Here are the main things that stood out for me on an initial test - I know you're aware of some or perhaps all of them but wanted to give you the fresh eyes perspective.

ESSENTIAL BEFORE SHIPPING
It's already so much better than what we have in production so I think we should aim to ship this ASAP. The only two things I could really justify as essential are:

1. the initial expansion of nodes to include the first level when a map loads and then I think we said we'd hide the expand/collapse all buttons (eventually we'll add expand all to the context menu on each node).

2. expanded view: circle names in leaf nodes have changed from white to black text and are hard to read on the circles with darker backgrounds.

NON-ESSENTIAL
In rough priority order. Highest at the top.

Vertical spacing around multi-line items is less than around single-line ones. I don’t know if it’s just due to the spacing but it does look cluttered now that we show circle names over multiple lines. As a map gets more levels of indentation there will be more and more multi-line items. Making spacing consistent will definitely help, or perhaps we should keep everything on a single line and have horizontal scrolling.

Clicking a circle on the map does select the right item in the outliner, but it should also scroll to it and expand any parent circle if not visible.

Not actually about the outliner, but just noting it here: This might have gotten lost during the summer, but remember in Pavilion Gardens we spoke about not zooming in quite so far when a circle is selected, so you can see a bit more context around it. Did we settle on 75% or 85% or something else?

I wonder if the Edit option on the context menu is redundant since clicking the item in the outliner opens up the edit panel anyway and it only takes one more click on the outliner item to edit it so it’s very discoverable and not actually essential since you can edit the circle name in the details panel.

When inline editing, I think pressing enter should save and stop editing. I don’t think enter should create a new item - I think that would get annoying when people just want to change the name of a circle and instinctively press enter to save. Perhaps control+enter should save and create a new child at the same level?

When inline editing a new circle name for the first time it’s initially labeled ‘undefined’ once you’re editing.

[rgoj]

And here's a copy of https://maptio.slack.com/archives/C01QCQJMS23/p1698827400233449:

I think we need a fast follow-on to expand any parent circles in the outliner when you click a deeper child circle on the map otherwise you can’t find it. Perhaps in the standard circle view, if you click a circle on the map that has children it automatically expands in the outliner? We would then need to decide if it closes again when you click outside it again. On the expanded map view someone can obviously jump straight to quite a deep circle so maybe all parent circles need to expand in the outliner.