WIP: Add vertical lines that match brackets #23
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hello @MichaelDoyle, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
Summary of Changes
Hello team,
gemini-code-assist here to provide a summary of this pull request. This PR, currently marked as a Work In Progress (WIP), aims to visually enhance the JSON tree view component by adding vertical lines that connect matching brackets or segments. The author notes that the implementation currently works for nested objects but the line for the root segment is still a pending task. The changes involve modifying the component's HTML template to introduce a new container element and adding corresponding SCSS styles to manage layout and draw the vertical line using a pseudo-element. This work is intended to fix issue #16.
Highlights
- Visual Enhancement: Adds vertical lines to the JSON tree view to better visualize the structure and connections between segments.
- HTML Structure Update: Introduces a new
children-containerdiv in the template to wrap the existing children, likely to facilitate styling and positioning for the vertical lines. - SCSS Styling for Lines: Adds new styles, including using a
::beforepseudo-element on the children container to draw the vertical connecting line and adjusting positioning. - Work In Progress: The implementation is not yet complete; specifically, the vertical line for the root segment is a known outstanding item.
Changelog
- projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html
- Wrapped the
div.childrenelement (containing the recursivengx-json-treeviewcomponent) with a newdiv.children-containerelement (lines 69-80 -> 69-81).
- Wrapped the
- projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss
- Replaced the
.childrenselector with.children-containerfor the margin-left style (line 57). - Added styles for
.childrennested within.children-container, settingposition: relative(lines 60-62). - Added a
::beforepseudo-element to.children-container > .childrento create the vertical line, setting its position, size, and background color (lines 65-74).
- Replaced the
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
JSON tree unfolds,
Lines connect the nested nodes,
Structure now is clear.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request introduces vertical guide lines to the JSON tree view, enhancing readability for nested structures. The addition of children-container and the use of a ::before pseudo-element for the line are effective. The new CSS custom property --ngx-json-tree-line for theming the line color is a good addition.
Given this is a Work In Progress, the main point of feedback for the current changes is to ensure the new theming option is documented. Once the TODO item for the root segment is addressed and the documentation is updated, this will be a very nice enhancement to the component.
Summary of Findings
- Documentation for Theming: A new CSS custom property
--ngx-json-tree-linehas been added for theming the vertical guide lines. This should be documented in theREADME.mdto inform users about this new customization option.
Merge Readiness
The pull request is marked as WIP and has an outstanding TODO item for root segment lines. The current changes for nested lines are well-implemented. I recommend addressing the documentation for the new theming variable and completing the planned work before this PR is merged. As a reviewer, I am not authorized to approve pull requests, so please ensure further review and approval from authorized maintainers.
| .children-container > .children::before { | ||
| content: ""; | ||
| position: absolute; | ||
| left: 0.2em; | ||
| top: 0; | ||
| bottom: 0; | ||
| width: 1px; | ||
| background-color: var(--ngx-json-tree-line, #dcdbdb); | ||
| } |
There was a problem hiding this comment.
The introduction of the new CSS custom property --ngx-json-tree-line is excellent for theming the vertical line color!
To ensure users can take advantage of this, could we document this new variable in the README.md file, under the "Theming" section, similar to how other CSS variables are listed? This would help users discover and use this new customization option.
MichaelDoyle
force-pushed
the
bracket-line
branch
from
d792699 to
5384861
Compare
|
What is holding up this merge? This work looks great! Thank you. |
|
There were a couple of css niggles - most notably there is no bracket at the root (although, maybe it doesn't strictly need it?). Other than that, just fell lower priority relative to other items. |
TODO
Screenshot
Fixes #16