So this blew up, I decided to give the page some small improvements. Changes:

- The bars are now ordered correctly based on votes

- Tooltip now shows comment.substring(0, 100)

- Show direct childs of the selected comment

- Added paddings and some small info notations

- New cached data for the default link (> 3500 comments now, it would take a good 15 mins if loaded manually from your browser)

It is still a crappy code, and there are many improvements can be made. Most importantly a proper navigation behavior with back button. I'll get back to this if I have more time!

The code is on my GitHub [1], feel free to send PR or just create your own page.

The old page is still available in [2] just in case someone don't want/agree with my improvements :)

[1] https://github.com/trungdq88/hn-big-threads

[2] https://trungdq88.github.io/hn-big-threads/old.html

Thanks!

Beautiful work!!

I would use this every day as a browser extension for HN/reddit. the vertical minimap would probably be the ideal implementation.

Fly-to navigation for narrowing scope makes sense. IMO, a complete feature-set would still include something like ctrl-scroll for vertical expand and shift-scroll for horizontal expand.

Realistically, maybe, for minimap-on-focus: "a"+"scroll": zoom "s"+"scroll": expand-vertical "d"+"scroll": expand-horizontal

For now, here is a bookmark that you can click when in a HN post. It will show the flame graph of the post.

javascript:location.href="https://trungdq88.github.io/hn-big-threads/#" + location.href.split('item?id=')[1]

Great idea. Bug report: Some of the tooltips - on the left side of the screen - are outside of the screen idea.

Thanks, "fixed".

The color is already color coded by username if I'm not wrong. But yeah, there are many improvements can be done here :)

You can just Right click -> View source to read my crappy code. I just plug the HN API together with a graph library called d3-flame-graph [1].

[1] https://github.com/spiermar/d3-flame-graph

Thanks! I have some ideas on how improve this for later (maybe). The main purpose is still to be able to scan major discussions on a big thread. A big vertical minimap like your suggestion is also great! :).

Yeah, this is a very bare bone prototype so a few things are pretty crappy, sorry about that.

If there is enough interest, I'll consider putting some more time and make it actually usable :)

Oh, and I'm not sure about the left-to-right order really. Maybe it's ordered as what HN API return (I did it in a hurry so didn't check)

Update: it is now ordered by votes (left to right)

Not sure how everybody does it but I usually feel lost navigating in big threads like this one with ~3000 comments https://news.ycombinator.com/item?id=25706993

So here is my attempt to solve it with flamegraph. What do you think?

You can load another thread by appending #thread_id to the end. For example, here is the graph for this very thread:

https://trungdq88.github.io/hn-big-threads/index.html#257138...

I'm not sure why GitHub doesn't load the page when the "index.html" part is missing, but I have to go now so I don't have time to check it, maybe later.

Cool idea!

I also enjoy the double entendre of “flame graph” here for the flame war that you chose :).

It’s not clear to me that I’d label the “functions” with the username. I’m not sure what other very short summary you might use, but I’d prefer something content related rather than poster.

Thanks :)

I choose to use the username because in big threads, most of the bars are very thin. There isn't much room to show anything anyway...

I almost love it; clicking on a comment zooms in the graph, which loses context and is not what I usually want.

But I think if you just made it so that hover loaded the complete comment either as a popup or actually down below, and click zoomed the context, this would be perfect, and by far my favorite way to browse large comment threads (on any website).

Thanks for the feedback. I realized most HN comments are not that long, so I updated the page to show all the comment in the tooltip (instead of only 100 first chars previously).

nice, thx!

I do not think visually, I tend to think in very structured complex sentences, as such being able to interpret what this image means is extremely difficult for someone who thinks in the way I do.

This is pretty cool, it is easier to scan around comments and threads more quickly. Reddit could use this.

Release early and often is absolutely the way.

I decided to launch my macOS app even if it was only about "40% complete" as of my expectation. It turned out people still love it, and the launch gave me a huge confidence boost!

My app (offline toolbox for dev with a bunch of small utilities):

https://devutils.app

my god, that sounds horrible

Space bar as push to talk in Zoom is terrible. After countless time it sends the spaces to the chat box while I'm talking, I'm now back to reliable mouse click.

Lol, I want this question answered.