WIP: Add vertical lines that match brackets

[MichaelDoyle]

TODO

• Add line to root segment, currently only nested objects are working
• Ability to enable/disable the feature
• Document css var

Screenshot

Fixes #16

[gemini-code-assist]

Hello @MichaelDoyle, I'm Gemini Code Assist¹! 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-container div 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 ::before pseudo-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.children element (containing the recursive ngx-json-treeview component) with a new div.children-container element (lines 69-80 -> 69-81).
• projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss
  • Replaced the .children selector with .children-container for the margin-left style (line 57).
  • Added styles for .children nested within .children-container, setting position: relative (lines 60-62).
  • Added a ::before pseudo-element to .children-container > .children to create the vertical line, setting its position, size, and background color (lines 65-74).

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

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

[gemini-code-assist]

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-line has been added for theming the vertical guide lines. This should be documented in the README.md to 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.

[gemini-code-assist]

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.