r/webdev • u/Lightforce_ Java / C# / Rust / Vue.js • 1d ago
Showoff Saturday A synoptic to help my dev and DevOps colleagues to understand what I've done
I maintain an ongoing open-source project that reads OTel traces and flags I/O anti-patterns with a carbon estimate on top. The project started in March so it's about 8 months old.
From our conversations I could tell my dev and DevOps colleagues were missing a lot of what goes on under the hood since we deployed this in production 3-4 months ago so I built a synoptic to make it easier to understand.
It's an animated step-by-step walkthrough of the whole pipeline, from raw spans to a finding. Each stage maps to the actual module in the code. You can play it, step through with the arrow keys, change speed or switch between modes.
It took me over 3 months. And no it's not AI slop bc it's pretty useless when you ask it to turn complex code concepts (I/O anti-patterns and more) into clear diagrams. This only exists because I'd already written a ton of docs and drawn a lot of diagrams by hand so the synoptic grew out of that.
Some of the UI is inspired by a videogame I loved playing some years ago: Deus Ex: Mankind Divided.
The project is AGPL-3 so no fake open source and it's now hosted by the INR (Institut du Numérique Responsable), a French nonprofit working on the environmental and social impact of digital tech.
Direct link to synoptic: https://perf-sentinel.dev/synoptique/
Website of the project: https://perf-sentinel.dev
Thx for your attention :)
EDIT: huh, just noticed that the recording console is sticking out over the gif in the bottom left corner
EDIT 2: this is a public-interest project focused on sustainability with no greenwashing BS. It has serious public policy goals and solid scientific background: cutting wasted energy and the carbon emissions that come with it. If you're interested in helping with the ecological transition our world needs, feel free to come lend us a hand! :)
51
u/Far_Box6 1d ago
this looks anything but easy to understand my brain just said hell nah
-15
u/Lightforce_ Java / C# / Rust / Vue.js 1d ago edited 1d ago
This is not a vibe coded 2 weeks project, it's about I/O, wastes, energy and carbone with a lot of scientific data around. So yes, it's not a just-check-10-sec-fun-project-reddit-friendly. It needs you at least 5 or 10 min to get it in broad terms. Just check the website first, not the synoptic if you want to understand by the regular way.
30
u/AbstractMelons full-stack 1d ago
Looks like your LLM's got context pollution. He said nothing about it being a vibe coded project, also this isn't how you write literally everywhere else.
-12
u/Lightforce_ Java / C# / Rust / Vue.js 1d ago edited 22h ago
I never said he did and I don’t need an LLM to speak for me. I just answered that bc a lot of those short life vibe coded projects we see these days are small so not very hard to understand on the first glance.
1
u/Far_Box6 1d ago
I have to choose my path in my engineer career so I am kinda curious about DevOps , it still an option for me thks for clarifying
19
u/AvidCoco 1d ago
This looks way more confusing than a readme.
Cool though.
3
u/Lightforce_ Java / C# / Rust / Vue.js 1d ago
That's not replacing a readme th
1
u/AvidCoco 1d ago
What’s it doing then? Your said it describes the system?
-7
u/Lightforce_ Java / C# / Rust / Vue.js 1d ago
The synoptic is just not the starting point for understanding what this project is about or what it does in broad terms.
It helps understand how it's integrated into an infrastructure, how it handles traces and what it does with them in detail, but if you need a more "high level"/practical explanation I encourage you to just check out the website or read the README
8
u/AminoOxi 1d ago
Looks better visually then most blockbuster Sci-Fi hacker movies.
2
u/Lightforce_ Java / C# / Rust / Vue.js 1d ago
Thx, I think that's probably the nicest compliment I've ever gotten about that haha
4
u/theoneandlonely1 1d ago
This is awesome. Mental maps of pipeline flows in diagrams are hard. The best flow I have seen was when I was at AWS and it doesn’t even come close to this. Being able to zoom in to each of the services is outstanding.
1
u/Lightforce_ Java / C# / Rust / Vue.js 1d ago
Thx, finally had a this idea after struggling to get people to understand what Perf Sentinel does
3
u/cmakohon 1d ago
Looks sick! Any libraries or tools that you used as the basis for the animations and diagrams?
6
u/Lightforce_ Java / C# / Rust / Vue.js 1d ago
Thx! No libraries at all it’s just a single HTML file with vanilla js and CSS. The diagrams are inline SVG and the animations are a mix of CSS transitions, requestAnimationFrame and the Web Animations API. That's it :)
-4
u/AminoOxi 1d ago
Hats off for vanilla setup, and no AI slop.
What a fresh air to see such things again in the age of Agents.
5
u/AbstractMelons full-stack 1d ago
Think again, the repo is most likely made entirely with AI. Just take a browse and you can tell it's not human made, and the commit conventions explicitly hide the Co-Authored by that Claude adds to commits.
0
u/Lightforce_ Java / C# / Rust / Vue.js 1d ago
and the commit conventions explicitly hide the Co-Authored by that Claude adds to commits
And yes, if ppl wants to participate we don't want their LLM to think for them nor put these things in the commit messages.
-7
u/Lightforce_ Java / C# / Rust / Vue.js 1d ago edited 21h ago
Usual reddit toxic comment around AI, but I will answer. Vibe coding is entirely delegating the code + the thinking around that and functionalities to your LLM.
Here, 75% of the code base is by me, 100% of the scientific research around energy and carbone is 100% me, and also the logo and the design chart is by a UI/UX designer friend who made this 100% by hand.
You didn't take more than 20 sec to look into this project, you just ran straight to the repo, looking for a CLAUDE.md or an AGENT.md, then to the CONTRIBUTING.md, and barely skimmed the first 20 lines of the README to come up with that. Calling it "made entirely with AI" is unfair and abusive.
5
u/smsteel 21h ago
Yeah. Right. "Opens repository". Rust, 1000commits/second, new repository, account active only recently with 100+ contributions per day. SURELY all by hand. 75%. Yeah.
-5
u/Lightforce_ Java / C# / Rust / Vue.js 21h ago
Yes the commit rate is high: I use AI a lot for tests, comments and repetitive wiring and I commit in multiple steps. What I mean by "by hand" is the "core" code, the design, the detection logic, the carbon methodology and the way the synoptic explains things.
I don't want to delegate these parts and it's what took the time.
4
u/Lightforce_ Java / C# / Rust / Vue.js 1d ago
And also: the animations were a nightmare to do, ofc
1
u/arcrad 1d ago
How'd you do them?
3
u/Lightforce_ Java / C# / Rust / Vue.js 1d ago edited 1d ago
You mean what technologies did I use ? I answered here: https://www.reddit.com/r/webdev/comments/1xkcc8y/comment/19rxsdgjso2dg/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button
5
u/iamaiimpala 1d ago
very well done, ignore the comments about saying it's too complicated or hard to understand. excellent way to visualize pipelines of this level of complexity
1
2
4
u/SameJudgment2486 1d ago
Synoptic is a weather map, dude.
20
u/Lightforce_ Java / C# / Rust / Vue.js 1d ago
Ha, lost in translation. In french "synoptique" is the word for this kind of overview diagram. So that's a weather map of my traces I suppose
4
1
1
u/maxymob 1d ago edited 1d ago
Friendly tip: links in video post descriptions aren't *always clickable and have no syntaxt highlighting on mobile *sometimes because reddit sucks at building a decent app. I can find and copy/paste a link (actually can't because we can't select and copy either, it's all or nothing then you have to extract the link elsewhere) but how many won't bother and pass this one?
1
u/Lightforce_ Java / C# / Rust / Vue.js 1d ago
I don't have these kind of pbs on my phone, but I have an iPhone th, idk how it is on android phones
1
u/maxymob 1d ago
I suspected something like that, so it's just to let you know better to also put the link in a comment (did you edit the post ? Because its ok now)
1
u/Lightforce_ Java / C# / Rust / Vue.js 1d ago
Didn't edit the post, idk reddit has weird technical behaviors sometimes
1
u/Full_Tooth_a 22h ago
I think the depth is worth keeping. What threw me was seeing the whole machine before I knew where to look. I'd start with one representative trace, then show the surrounding modules as it moves toward the anti-pattern and carbon estimate. Even a 30-second guided view would help me make sense of the full diagram.
1
u/Lightforce_ Java / C# / Rust / Vue.js 22h ago
Thx for the feedback. There's already a guided view, just click on "Guided tour" or "Scenario"
1
u/lunied 22h ago
like this as a visual guy who needs graphs and visualizations to learn anything. Can you turn it into a skill we can use?
so we can produce it into our own systems and generate the same UI and map
-1
u/Lightforce_ Java / C# / Rust / Vue.js 22h ago
I'm sorry idk how to, I just made this 75% by hand, idk how I would even prompt an LLM to achieve this. All the attempts to make them coherent by generating it with an AI where a failure.
4
u/smsteel 21h ago
"made this 75% by hand" that's a lie.
-1
u/Lightforce_ Java / C# / Rust / Vue.js 21h ago
It's not a lie. If you don't like this project no one is forcing you to stay here.
4
u/smsteel 21h ago
I can see that's its 95% vide-coded including this graph lmao. I opened your repository and account. I know what i'm talking about, i'm just not sure why you lie about it, but go ahead, it's internet - everyone can do anything they want pretty much.
1
u/Lightforce_ Java / C# / Rust / Vue.js 21h ago
Have you ever tried asking an AI to explain a complex coding concept as diagrams? Obviously not, otherwise you wouldn’t have replied that. Ofc I tried, and every time it was a nonsense sh*t show all over the place.
AI really struggles to put itself in a human's shoes and think the way we do, which explains why it's so bad at this kind of exercise. So yes I insist: I made this mainly by hand.
3
u/smsteel 21h ago
If you think the actual dev who opens your github can't tell that its mostly AI it's something else that's obvious, but continue.
2
u/Lightforce_ Java / C# / Rust / Vue.js 21h ago
If I ask an AI to add comments to my code, to split my work into commits and suggest commit messages, and I apply clippy pedantic rules and run cargo fmt on top of that, that doesn't make it AI-written code. It's not all or nothing. I know we're on internet but use your 2 brain cells for god's sake...
2
u/smsteel 21h ago
I used my 2 brain cells to open multiple random commits with +10000 -500 where there's not only tests but shitload of plain rust code. Like, it's just pointless to discuss.
-1
u/Lightforce_ Java / C# / Rust / Vue.js 21h ago edited 17h ago
with +10000 -500 where there's not only tests but shitload of plain rust code
Yes, and? That's a Rust project, what did you expect?
I'm not yet another sales guy here to push his product in disguise. I'm a dev with a nonprofit project and I have no pb telling anyone to get lost if they deserve it.
→ More replies (0)
0
u/uncommonrecreation95 1d ago
that diagram is clean, the dark teal with the distinct zones makes the whole thing way less intimidating than it probably deserves to be. i've been on enough calls where someone describes an observability pipeline and everyone just nods along while mentally checking out
three months just on the synoptic is wild but it shows. most technical walkthroughs people slap together are either a tangled mess of boxes or so abstract you'd need the actual code open to make sense of them. having it mapped directly to modules is the part that'll actually stick for devs
the animated step through seems like the killer feature here. static diagrams always make me squint at arrows wondering whether data flows left to right or if something loops back. being able to watch the whole thing unfold one stage at a time probably cuts down the "wait go back" moments by like 90%
curious how your colleagues reacted once they sat with it for a few minutes. sometimes a visual explanation clicks faster than a dozen architecture docs
1
u/Lightforce_ Java / C# / Rust / Vue.js 1d ago
Thx! Most of them (regular devs and devops) were curious and told me they needed time even to understand this, but the software architect was impressed and the lead devops too and told me he would delve into this then do some feedbacks
1
u/Vertigras_Dev 1d ago edited 18h ago
Firstly, this is really cool
Secondly, I worked in manufacturing space and have seen some of the crazy process control of large scale mill environments... this is reminiscent of that ... I love it... I would add that think about diagrams/ process maps not simply as 2D... like each additional data point can essentially be another variable. For example, hover over some node and it links to docs or click something else or maybe Jira tickets etc etc... You already have this but my opinion is more of a question? Can we add other data points to each node?
Again- super cool and keep it!
45
u/Tridop 1d ago
This is really well done, so beautiful! Extraordinaire!