Add interactive CodeCanvas diagram for lossless-cut #2573
Conversation
WalkthroughAdded a new documentation subsection "How does Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
README.md(1 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.18.1)
README.md
169-169: Link text should be descriptive
(MD059, descriptive-link-text)
171-171: Link text should be descriptive
(MD059, descriptive-link-text)
🔇 Additional comments (1)
README.md (1)
167-173: ****The AI summary claims the section "appears in two locations within the file, duplicating the same content," but the provided code shows only one instance (lines 167–173). Please verify whether the section genuinely appears twice in the full diff.
README.md
Outdated
|
|
||
| ### How does `lossless-cut` work under the hood? | ||
|
|
||
| Check out this interactive walkthrough of the `lossless-cut` codebase on CodeCanvas [here](https://www.code-canvas.com/?session=unauthenticatedGithub&repo=lossless-cut&owner=mifi&branch=master&OnboardingTutorial=true). |
There was a problem hiding this comment.
Use descriptive link text instead of "here".
Link text "here" is non-descriptive and violates accessibility best practices (MD059). Descriptive link text helps screen readers and improves SEO.
Apply this diff to make link text more descriptive:
-Check out this interactive walkthrough of the `lossless-cut` codebase on CodeCanvas [here](https://www.code-canvas.com/?session=unauthenticatedGithub&repo=lossless-cut&owner=mifi&branch=master&OnboardingTutorial=true).
+Check out this [interactive CodeCanvas walkthrough of the `lossless-cut` codebase](https://www.code-canvas.com/?session=unauthenticatedGithub&repo=lossless-cut&owner=mifi&branch=master&OnboardingTutorial=true).
-To refine existing dataflow simulation or create new ones, follow the quick tutorial [here](https://docs.code-canvas.com/updating-diagram).
+To refine existing dataflow simulation or create new ones, follow the [CodeCanvas diagram update guide](https://docs.code-canvas.com/updating-diagram).Also applies to: 171-171
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
169-169: Link text should be descriptive
(MD059, descriptive-link-text)
🤖 Prompt for AI Agents
In README.md around lines 169 and 171, the link text uses the non-descriptive
word "here"; replace it with meaningful, accessible link text such as
"interactive CodeCanvas walkthrough of the lossless-cut codebase" (or similar
descriptive phrase) while keeping the same URL, updating both occurrences so the
markdown link reads like "[interactive CodeCanvas walkthrough of the
lossless-cut
codebase](https://www.code-canvas.com/?session=unauthenticatedGithub&repo=lossless-cut&owner=mifi&branch=master&OnboardingTutorial=true)"
to satisfy accessibility/MD059 requirements.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
README.md (1)
171-171: Use descriptive link text instead of "here".Link text "here" is non-descriptive and violates MD059 accessibility guidelines. This was flagged in a previous review; please address it in this version.
Apply this diff to make the link text more descriptive:
-To refine existing dataflow simulation or create new ones, follow the quick tutorial [here](https://docs.code-canvas.com/updating-diagram). +To refine existing dataflow simulation or create new ones, follow the [CodeCanvas diagram update guide](https://docs.code-canvas.com/updating-diagram).
🧹 Nitpick comments (1)
README.md (1)
169-169: Improve link text to be more descriptive.The link text "diagram" is generic. Following accessibility best practices (MD059), the link text should be self-contained and descriptive without relying on surrounding context.
Apply this diff to make the link more descriptive:
-Check out this interactive walkthrough of the `lossless-cut` codebase on the CodeCanvas [diagram](https://www.code-canvas.com/?session=unauthenticatedGithub&repo=lossless-cut&owner=mifi&branch=master&OnboardingTutorial=true). +Check out the [interactive CodeCanvas walkthrough of the `lossless-cut` codebase](https://www.code-canvas.com/?session=unauthenticatedGithub&repo=lossless-cut&owner=mifi&branch=master&OnboardingTutorial=true).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
README.md(1 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.18.1)
README.md
171-171: Link text should be descriptive
(MD059, descriptive-link-text)
|
Hi, just following up! lmk if you have questions. |
|
Hi! Not sure about this. the .CodeCanvas file is very large and hard to maintain/understand for a human. I tested the visual graph but i found it a bit slow and hard to find it helpful. Can leave this open and see if some other people find it useful. |
|
Thanks for taking a look Mikael. I am happy to adjust CodeCanvas to address your feedback. I just want to know how you tried to use CodeCanvas as I noticed that once people used the app in the intended way they found it very useful as they were able to understand complex apps dataflows almost instantly. Some questions I have in mind, whether you tried the following:
If you have done the above and still don't see the value of CodeCanvas then that's also important for me to know. Finally, If you find it easier, I'd love to give you a 20 minutes onboarding for how to navigate the lossless-cut's codecanvas diagram, you can find a time slot that works for you here: |
|
Hi Mikael, Just floating the above. |
|
Hi. How does the codecanvas file stay in sync with code changes in the repo? I don’t see any additional commits to update the file in this Pr |
|
Great points and feedback! Right now, if the code changes significantly I just hit the "Refine Simulation" button to generate the simulation, in 2 weeks I will add a github actions option that runs on each new commit to regenerated impacted parts of the diagram with the new commit's code change. As for hosting on my own DB, I wanted the diagram to stay closely coupled with the code and that the repo owner has control over the diagram content. The tool will remain free for open source so users can always use it load the diagram, visualize and understand the inner works on the fly. The other reason, and probably the main reason, is that I want the diagram to be source controlled and reviewed just like other files so that when users view the simulations, they know they can trust that what they are seeing is correct explanation and not AI slop. |
|
Hi Mikael, Just floating the above, if you're still not convinced with having the diagram in the repo, I can just point the README to my forked repo's diagram, although this is suboptimal for you because ideally the diagram lives in the repo and owned by its owner. If you would like me to do to do so lmk. |
|
That’d be great thanks! And I’d like to put this under Contributing.md instead because it’s a really technical thing that most users won’t care about |
2 participants
I reached out earlier this year about building a diagram for how lossless cut works under the hood since I use it personally, and Mikael expressed his interest.
Here is the generated diagram for
lossless-cutgrouped by the application's use-cases and their runtime data flows:Open lossless-cut's interactive diagram
I built code canvas to simulate a senior engineer who have been working on
lossless-cut's codebase for pretty long and can explain to you any functionality of the repository visually through diagrams.Here is what users are saying about codecanvas
"I used to spend 4 hours asking GPT how a use case in a codebase works and I keep going back and forth until I am able to draw a diagram to summarize my understanding,
CodeCanvas gives me that diagram in 40 seconds"
Some Notes:
lossless-cut, completely free, no monthly subscription. Consider it as my contribution to help fellow contributors lower their context onboarding friction before they can start contributing.Summary by CodeRabbit