Building comments with replies in bubble

[pathomap]

How is it possible to build a list of comments that are threaded or indented andor have lines to show connection? Something like this:

[eliot1]

Hi, it’s kinda tricky and I don’t think that my solution is optimized but it works.

Data Architecture:

• Conversation (Thread): contains a list of comments
• Comment:
  • content
  • parents (list of all parent’s comment)
  • conversation (id of the tread)

Front:
Some Nested RG

• 1st level RG of threads
• 2nd level RG of comments based on the list of the current thread comments
• 3rd level RG of spacers that add a horizontal spacer based on the number of parents for the current comment

Here some screenshots to help:

[drixxon]

trying to wrap my head around your solution which is pretty dope. is your setup scalable insofar as having a near endless stream of threads // levels? Or is it preset to where there’s a max of three levels?

I wonder what the lift is on bubble’s end for rendering so many repeating groups and if it’s even possible to make this more efficient.

i currently have two levels of comments, but that’s it. if Instagram can get away with it, so can I, however, from the technical perspective, I wish I at least had the option.

[georgecollier]

Oh man, why’d I never think of an RG for the spacing? I’ve always resorted to custom CSS that changes the indentation width.

The main snag that is even harder to resolve is how you order the comments (as in Bubble, we can’t have infinitely nested RGs e.g an RG of replies, then another RG of replies only if there are children replies).

So, @eliot1, as I’m sure you’ve already noticed, if someone replies to ‘I am the second comment’ now, the reply would likely appear after ‘Response to first comment’ as you’ve ordered them by date, when it should appear under ‘And I am the last one’. I don’t have a solution for this either by the way.

cc @nico.dicagno

[pathomap]

Thanks. I am not sure what to do when there are more than three sub comments but that should be ok for now.

I think I should be able to do it with conversation and then message with some sort of numbering system and/or getting a pre or post fix and changing margins if there is a pre or post fix.

[animisha45]

The solution is good. I implemented something similar a while ago.

Instead of using Parent Comments, I used child comments. And added a field ‘order (number)’ So the 2nd level RG contained all the children comments: sorted by order.

The order were maintained in the way that in your current example it will look like this:

This is the first comment (order 1)
–I am the second comment (Order 2)
—And I am the last one (Order 3)
–Response to the first comment (Order 2)

[msgiblin]

@georgecollier

Oh man, why’d I never think of an RG for the spacing? I’ve always resorted to custom CSS that changes the indentation width.

Did you see what I was playing around with over here?

Dynamic Margins or Padding in a Repeating group

I actually just did what I think would be the most effective (so far), with accurate 20px size increase, and not having to rely on transparent text or plugins: [image] I included a repeating group within the repeating group, with a source of Calculate RandomString, length of characters based on the Current Cell’s Index: [image] I then Extract with Regex with a single . [image] Now the repeating group will be a list of characters. I placed a group of 20px in the RG, with it’s source set …

I think something similar could be leveraged here where the ‘number’ of spacers introduced is tied to @animisha45 concept here:

@animisha45

Instead of using Parent Comments, I used child comments. And added a field ‘order (number)’ So the 2nd level RG contained all the children comments: sorted by order.

[nico.dicagno]

This is a fun one
We once developed a Task Module for a client who needed infinite subtask recursion. The underlying challenge and approach is essentially the same as a comment thread, and the data structure can be the same.

@eliot1 the spacing RG is a cool concept. That approach is generally a good start but sadly that won’t cover all bases. As George says, there is no way to manage the order of the list of comments, and you can only really reply to the last comment and append the created comment to the list. Even if you get past that, storing and maintaining a long list is not great for scalability and reliability; if multiple users add a comment at the same time their operations will overwrite each-other and one or more comments will be lost.

I like storing a number field on the Comment called ‘depth’ which represents how far nested the comment/subtask is. This is great for backend organisation but also for frontend formatting - it’s very useful for conditionals. It’s also best to use a list of children rather than a list of parents.
You have to use custom states and looping for this sort of problem, no way around it.
Loop through items to initialise the complete list of comments while maintaining the correct order.
Something along the lines of “List of Items: items until current cell index: merge with: current comment’s subcomments: merged with: List of Items”.

[eliot1]

Thank you all @georgecollier @animisha45 @nico.dicagno for your help
It haunted me so I tried something else.

I used both parent and child fields to help me construct an order string like this:
1
1.1
1.1.1
1.1.2
1.1.2.1
1.2
1.2.1
…

Then I just sort the RG comments with this order.
Seems too simple… Am I missing something ?

[georgecollier]

Yeah, that’s a creative solution and would probably work - so long as each ‘nest’ can have up to 9 comments. Because once you have:
1.8.1
1.9.1
1.10.1
1.11.1

the alphabetical sorting will get screwed up.

You could in theory assign a sort order number to each comment whenever a new comment is created, but that’s of course really inefficient.

[eliot1]

Yep that’s the problem… Actually you can “extend” this technique by adding one or several leading 0 to the index when < to 10, 100, 1000, …
Like this:
001.008.001
001.009.001
001.010.001

But it’s not very elegant and still limited

[georgecollier]

I like your solution a lot. Sure it has limitations, but so would every solution for this problem. Pretty neat.