feat: distinguish types of dependencies

sgammon commented 10 months ago

Summary

This PR adds a new section to the module detail page under the heading Dependency graph; in this section, accordions are shown for the package's dependency relationships:

Transitive packages (the most meaningful to a package consumer)
Dev packages (not meaningful to a package consumer, maybe meaningful to contributors)
Dependents (lightly meaningful to all stakeholders)

This UI optimizes for the above goals, with the Transitive package accordion open by default, and the others closed, but with counts added so that a package's popularity / relevance in the wider package graph can be understood with a quick glance.

Background: I just shipped rules_graalvm, my first BCR package. Due to the polyglot nature of GraalVM, I need to depend on a lot of different rule packages as dev dependencies. I want to make sure downstream users of my package are aware that they don't need to depend on all these packages.

Fixes and closes #62

UI Preview

New section in detail:

_Compare the perceived transitive cost of these two screenshots. They depict the exact same library, but with much less mental overhead for a clearer picture._

Side by side:

Subtle details

This PR is layered on top of #102 because it won't properly build otherwise
Aria attributes were used to preserve heading roles, so there should be no accessibility impact despite different tags
Completely native to HTML (no added JS, no added CSS)

Wyverald commented 10 months ago

A minor nit -- the new accordions when moused over show an I-cursor instead of a hand. Would be nice if we made it cursor: pointer (I'd do it but I don't know what the modern idiom for that is)

sgammon commented 10 months ago

@Wyverald i'll fix that on one of my next PRs :) i wanted to keep things as absolutely minimal as possible but I probably could have fit that in.

bazel-contrib / bcr-ui