feat: 2951 improve policy tree visuals

[mykytayefrueiv]

Description:

This PR is done according to the #2951.

• Migrated to from custom graph solution. App-tree-graph is already established and used in the project. (Improve visuals and extend scope of the schema dependency diagram functionality #2951 (comment));
• Long words and long schema names are properly broken to display as the node name;
• Added support for Tag schemas. This included extending the TagService to get the tag schema id from the db, so then it will be possible to get schema tree for the tag schema.
• Added support for search by name

Related issue(s):

• What is not in the scope is accessible coloring, which was agreed to have in different issue.

Examples:

1. Example of schema with single tag schema

2. Example of schema with two tag schema

[ruslanPL-EnvisionBlockchain]

@mykytayefrueiv thanks for the changes made 🙂. I have tested them and have a few comments that needs to be fixed:

1. The schema name inside the block is displayed correctly, but the same name (used as the modal window title) completely breaks the UI if it is too long(expected result - in the UI it should be displayed with three dots at the end, and on hover a tooltip should show the full name)

2. When I add one or more tags on schema, I do not see any of them displayed on the Tree view(the modal that appears). Could you please check that as well? If you see it, please share steps what should I do to see it.
3. If we search in the Search field for an element that is lower in the hierarchy, the schema moves up and focuses on the correct element (which is good), but an element higher in the schema moves even further up after the focus and becomes invisible. To see it, we have to manually move the schema down or click the schema centering button (video below). Expected result - The regular schema and the found schema(after searching it) should be automatically centered in the window, not positioned in the top-right corner as it is now

2026-01-15.13.35.13.mov

4. Could you please add some visual linkage between schema block and tag blocks when checking on the diagram? After discussion with @anvabr we agreed that better would be to add lines like on the but of a different color to understand that this is something different. Example below:

@anvabr

[mykytayefrueiv]

Hello guardian team, @ruslanPL-EnvisionBlockchain, @anvabr.

Thank you for comments!

I have updated the functionality with additional recommendations:

• Now title of the Schema Tree modal fallback to the ellipsis mode once it is long enough.

• Initial render and search now centers nodes.

• Last but not least – the link line has been added to underline the connection between nodes.
  In short this was done by adding possibility to addLink in the same fashion as we have now addId / addNode. Which draws one straight line under all of the root nodes, since they are displayed horizontally.

As well, Here's the video how to add tag and see it in the schema:

more-than-one-tag-demo.mov