Add skill link preview in sidebar

[ennukee]

See updated data and views in the comments below

Preconditions: User must sync their tree name with the gem section name. For example,

Lingering questions:

• Is this UX good?
• Should this be an additional toggle in the settings? (e.g. "Display Gem Links in Sidebar")
• The intelligence skill gem color looks like it has a bit of bad contrast against the dark background, is that fine?
• Should this go below the arrows (so they don't move when changing between acts)?

Current UX:

• First gem in a link is bolded and unindented
• Secondary gems (normally supports) are normal font weight and indented to indicate their connection to the primary gem

[HeartofPhos]

Generally for the idea, would be very nice to show links in a easy to access place. I want to avoid relying on POB "standards" to surface these kinds of features, simply can't rely on build makers to be consistent and would hide otherwise very useful features from anyone not in the know.

A better solution might be assigning skill groups to a passive tree in the Build section, at least exposes the feature to any user and has similar to manually arranged a non conforming POB

The intelligence skill gem color looks like it has a bit of bad contrast against the dark background, is that fine?

This can probably be solved by using the same coloured circle gems use in the route itself e.g

First gem in a link is bolded and unindented Secondary gems (normally supports) are normal font weight and indented to indicate their connection to the primary gem

Can fairly easily data mine which gems are supports and then consistently list active gems first and supports indented after, happy with the format as is otherwise

[ennukee]

Can you expand a bit more on the first part? Is that to say that instead of relying on syncing the tree names and gem section names, we would just always display the gems and have controls similar to the build tree ones to cycle through the different gem sections?

[ennukee]

edit: I am off to bed, so please feel free to make any additional changes in the meanwhile.

I've made the following changes to try and best meet what you were mentioning:

• The UX now uses MdCircle to color the gem type with white text
• Decoupled the gem link display from the tree viewer. The gem link parts now have their own controls to toggle between the gem sections.
• Gems are now sorted by skill gem vs. not, and skill gems are automatically given the bold, unindented styling (this is currently done not by adding information to the seeding logic, since I'm a bit unfamiliar with it, but simply looking for the string "SkillGem" in the gem's id, lines 42-44 of GemLinkViewer/index.tsx)

Additionally, I added a toggle to the Build edit page (like the gems-only one), which toggles whether or not to show the gem links in the sidebar. I added this because while a PoB may have good, sectioned leveling trees, it could have a crazy gem link setup which would cause a lot of visual clutter the user may not want.

Current UX:

Matches the following:

[HeartofPhos]

I've added is_support to the gem data and changed the filtering to happen at import to simplify the component a little. Also updated styling so that support gems without any active links use the same styling as active gems (some POBs like https://pobb.in/hPGOSBeJcMvV level support gems early for example)

Also put a max-height on gemLinkSection and moved the nav buttons to prevent things jumping around as you click

Let me know if there's anything you disagree with/think needs to be added

[ennukee]

Looks good to me from what I can see overall.

A couple notes I had when looking at it visually:

• The max-height looks to be a bit small. Maybe this is intended, but even in my act 1 gem link setups (two 3L and a couple utility spells) I have to scroll. The power of this utility is ease of access to all (or maybe not all if there's a crazy amount of it) link information without needing to too heavily interact outside of the game. I would suggest increasing it by maybe 50-100% of its current max-height at least.
• Should gem links be enabled or disabled by default? I see they're currently enabled, but I wonder how this may look for builds who may just stuff everything into one section (although the max-height helps a lot with this, so maybe it's OK)
• I like having the controls not move when you change between acts, but I wonder if putting them so close to the other controls (for the tree viewer) may be a bit visually confusing. I think it's probably OK though.
  • Maybe the controls / tree section name for the tree viewer would also be visually clearer above the tree viewer? I'm fine with whatever here though, no strong opinions.

Example of my act 1 setup, for the first point I raised (there are 3 additional skills under Frostblink):

[ennukee]

I went ahead and tested a few numbers but felt like doubling it to 20rem for max-height felt the best for me personally. It should allow for around three 4Ls to be fully visible, or two 4Ls and several auras / utility spells

My other concerns that I mentioned are minor and up to you if you want to modify them at all. Otherwise, I think I'm good with the changes unless you have any other concerns.

[HeartofPhos]

I agree 10rem is a too small, honestly the sidebar is becoming overly busy and is begging for a refactor. As a band-aid I've set the min-height to 15rem to give a bit of breathing room for search strings.

Also moved the gem links below search strings to avoid things jumping around, not an ideal solution and definitely need to plan out a better way to display sidebar content, but that's out of scope for this PR