Discussion: comment parents

[Aivean]

I've created several prototypes that explore the ideas of how to clearly display the parent of the given comment.

Some core properties:

1. It should be easy to see the parent of a given comment.

• Ideally, the parent should be apparent at a glance without any additional actions from the user
• A single mouse move/hover is next best scenario.
• Click (especially precise click) is already a stretch
• Multiple actions/scroll is hardly acceptable

2. "Geometric layout" of the comments tree should be preserved

• Ideally, there should be no changes in the layout of the comment tree
• Perhaps, small changes that user can easily predict and visually track could be justified
• Large changes in the tree that reset the position of the "current" comment are not acceptable

3. Should work with long comments and long parents

• What if the parent that stretches for several pages. How to show it?
• What if both current comment and its parent are long.

4. TBD

---

Prototype 1

https://github.com/spaceshelter/orbitar/tree/comment-parent-tree-prototype1

Idea:

When arrow is pressed:

1. Hierarchy of the parents is determined: parent0, parent1 ... parentN, comment
2. All comments between parent0 and comment, except comment's parents are collapsed
3. No changes are done to the hierarchy before parent0 and after comment

Demo (glitchy!):

Pros:

• Easy to see the whole hierarchy of the given comment
• Works perfectly with comments and parent of any size
• Doesn't interfere (before and after is applied) with the scrolling

Cons:

• Requires click from the user
• Implementation is tricky (animation and scroll)
• Scroll behavior could be unpredictable. Ideally, the "current" comment (and everything below it) should stay in place (and comments above slowly fly into their new place)
• Requires layout changes (however limited)

---

Prototype 2

https://github.com/spaceshelter/orbitar/tree/comment-parent-tree-prototype2

Idea:
When comment is clicked, both comment and its immediate parent are highlighted. Parent is fixed (as in position:fixed) at the top of the screen, but in such a way that it doesn't overlap the selected child.

figure1: Parent and child are selected. Because parent is already on the screen, it's position doesn't change:

figure2: Behavior when parent is scrolled out of view (it stays on top):

figure3: Behavior when parent doesn't fit on the screen and child is scrolled out of the view:

figure4: Caveat: very large parent may not fit on the screen

Pros:

• Easy to see parent
• Easy to enable (if the clickarea to show parent is the whole comment body)
• Doesn't change the tree layout

Cons:

• Tricky when parent/child are large
  • a tradeoff between automatic selection cancelling when out of screen, and allowing scrolling of large selection out of screen to see it fully
• requires click from the user
• doesn't show the full parent hierarchy

Variant 2: show parent on hover (+light styles):
https://github.com/spaceshelter/orbitar/tree/comment-parent-tree-prototype2.1