Show HN: Using flamegraphs to read big HN threads | Hacker News Reader

Show HN: Using flamegraphs to read big HN threads

trungdq88.github.io

248 pointstrungdq8859 comments

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...

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

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.

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!

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!

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

Thanks, "fixed".

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]

I'm not sure if it helps much. It emphasizes deep threads. Do we care for deep threads? Well, not really. Usually we want to see threads with a lot of votes and a lot of replies (breadth-wise), and when navigating we want to be able to follow the thread of replies to an individual comment. You can comfortably list all parents of a comment on this flamegraph, but basically you'll end up reading a random thread w/o knowing first if it will be interesting.

And the problem of big flame-tongues is more of a HN/reddit reply format, i.e. I don't know if it can be solved by another UI. People using the default UI in such threads reply only to the first comment, because it's the only way to be seen. Nobody reads past few first top-comments.

I guess it's very much opinionated, because people first time on 4chan tend to get lost, but I've long came to conclusion that the imageboard reply format is the best there can be, especially with some simple UI tweaks. You can follow threads easily, you can reply to any number of comments, you can link several discussions into one. It's easy to spot a post with lots of replies. It's easy to scroll, unlike HN comments. The downside is that 3000-comment thread would terribly slow down your browser, about the 1000 is the upper-limit I guess, and usually threads are just split into series of multiple threads on the 500-post mark. But that obviously wouldn't work anyway if the main feature is to order posts based on the number of votes. So, alternative UI like that for HN wouldn't help very much either.

What would really help on HN is the ability to collapse all of the children w/o collapsing the parent-post itself, and showing multiple top-level posts on a single page when children are collapsed. This way you could browse for the discussions you are interested in and expand them further.

You're speaking as we - I'm just gently curious who you mean? Have you surveyed (even informally) HN users?

But anyways, I like your point about the usability of the imageboard format. I really don't like the Reddit/HN style

> What would really help on HN is the ability to collapse all of the children w/o collapsing the parent-post itself

Is dang reading this thread?

> ability to collapse all of the children w/o collapsing the parent-post itself, and showing multiple top-level posts

Very much agree, for big threads here and on reddit I manually do this a lot without even thinking. It would be trivial as an extension or user script in hindsight.

There's a lot of excellent content buried which is quite frustrating. Top level comments tend to add far more of interest than the typical to and fro that goes on inside the replies.

Yes. I would like a mode for HN and Reddit where only top-level comment are visible and threads must be expanded explicitly, with the same true recursively.

If I'm not interested in a comment, then I'm not interested in its replies either. I've never understood why comments are treated differently from posts in this regard. The front page isn't presented with all comments expanded.

While collapsing is important, I would really like all comments to be sticky, so that when you scroll down, (only) the first line of all parent comments are shown at the top in the usual nested way. This way, you always know where you are. I tried implementing this with a custom stylesheet for Stylus (Stylish), but I was unable to due to the site's markdown which is mostly tables with positioning.

> Nobody reads past few first top-comments.

Even as an exaggeration, this is probably untrue ?

For really busy posts, I would guess that approximately nobody even gets past the first root level comment.

Interesting, how then do you explain the answers to the posts past the first root level comment ? ;p

Those are the “approximately”s. :)

Yeah, there's some kind of exponential-like decay, but how strong it is ?

> You can comfortably list all parents of a comment on this flamegraph, but basically you'll end up reading a random thread w/o knowing first if it will be interesting

Agree, the new version of the page addresses this by listing the direct replies of a selected comment. But yeah, this prototype would need a lot more works on it to become useful.

Anyway, thanks for sharing!

Really neat idea, a little awkward to navigate in this v1 prototype. I'm imagining replacing the vertical scrollbar with a 90 degree rotation of the flamegraph. Call it a flamescroll widget, it combines scrolling/zooming/folding into a single interface action. "Zoom" here refers to changing what depth of the comment tree is displayed, not the font size. Kind of a next generation of the minimap in Sublime.

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! :).

Nifty, but I found the navigation to be a little odd at first. I didn't immediately realise the bottom row is always the OP, and so tried to hit my back button to travel back 'up' from a thread but because it does not load a new page I couldn't.

It makes sense now that I figured it out (the bottom n rows keep expanding to be the full width, meaning you can always breadcrumb back) but that wasn't immediately obvious to me.

This is a cool idea though and definitely allows me to see the 'controversial' threads because they're usually the biggest flames :)

Does this order left-to-right based on the upvotes that HN itself uses for ordering?

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)

Andrew McNutt's Forum Explorer also visualizes forum discussions and supports HN [1] (it was discussed on HN last year [2]).

[1]: https://www.mcnutt.in/forum-explorer/

[2]: https://news.ycombinator.com/item?id=19912550

This could be a good way to navigate comments, but I'd recommend turning the graph upside down since that is how comments are ordered on the page.

Off topic: Thanks to your link at the bottom of the page I discovered your DevUtils project and bought it right away! I've been looking for something like this for years without realising it! Many thanks! I feel $15 is very cheap though.

I'm a big fan of CyberChef

https://gchq.github.io/CyberChef/

Thank you very much!

This gives an interesting new meaning to the word 'flamewar'.

This is fantastic. You know you’ve come up with a good visualisation when it feels so instantly familiar.

I’m trying to think of how you can convert some ancillary information with color (with accessible fallbacks of course). Maybe color coded users? So you could see the same colors gravitating around threads.

I’m not sure how many unique users comment on an average thread though and how useful that would be. Maybe only showing unique colors for users with more than 2 posts in a thread?

I love it though. Great job

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

Loaded for first time on my pixel 3. Loaded fine I guess, but too small to glean anything :( I then zoomed in and nothing happened, then I was zoomed way too far in, and the page twitched again to be zoomed in on a different section, and I bounced. But it seems really cool. I'm curious what it would be like with dart and or solidJS

This is really great, can be a first step towards making a site for more structured way to debate. Kind of similar to kialo (https://www.kialo.com/the-benefits-of-absolute-free-speech-o...)

OMG, This is all I wanted. Thank you so much for building this. I think it will make easy to read long HN threads.

I'm interested to learn more on the tech stack behind this project.

here's the source code: https://github.com/trungdq88/hn-big-threads

the data comes from the firebase API: https://github.com/trungdq88/hn-big-threads/blob/master/code...

the dataviz: https://github.com/trungdq88/hn-big-threads/blob/master/inde...

is using the d3.js plugin "flamegraph": https://github.com/spiermar/d3-flame-graph

LOVE THIS. So cool. How'd you build it?

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

This is epic, maybe it can help fix @dang's pagination problems :-)

Haha, yeah, I hope HN will have a solution for big threads soon.

A tree view with terrible UX.

Nice feature.

Children*

Whoops, thank you! Fixed.

I personally find the Hacker News Extension Suite [1] to be incredibly useful.

https://chrome.google.com/webstore/detail/hacker-news-enhanc...

Firefox: https://addons.mozilla.org/en-US/firefox/addon/hnes/

Any similar solutions like this for Safari?

Looks great except that it needs access to your browsing history.

Does it? I can’t find anything in the code[0] (after 2 minutes) to suggest that. Not saying you’re wrong (I haven’t checked), but it doesn’t appear to access your history at all.[1]

[0]: https://github.com/etcet/HNES

[1]: https://github.com/etcet/HNES/search?q=history&type=

They should remove the permission request then, because it asks for it when you install from the chrome extension store. If the code is the same as the one in the repo, it shouldn't matter.

This brings me back to olden days of reddit! RES + Imagus was perfect for killing an afternoon. Looking back it was super unhealthy. Just a constant stream of content messed up my patience something fierce. But it was fun while it lasted.

Unfortunately it doesn't update anymore, not before adding a option page at least.

All the features still work, but I really want to turn of some (like the new style).

These recent Capitol Hill Autonomous Zone - wars are not flamewars perse. They are just endless anonymous pingpong with same wornout pieces of dried shit.

In Usenet flamewars were more personal and ended up in death threats often. Actual deaths occurred too, I remember one mass murder resulted from discussion in misc.invest. In Helsinki a women got facial lacerations from puukko-knife after a flamewar in Sfnet.

Reply on news.ycombinator.com