Legend and Relations revised, few cleanups

[tmushayahama]

Issues

#59
#50
#49

Changes

• Refined the legend
• removed the images and now just svg generated from the legend map, so no more hard coding colors images strokes etc
• relations refined according to this https://docs.google.com/spreadsheets/d/1Gt1rgPocGQ4uNKgzBhbp3vCJa-HRzzjPx0GQkwcj81Q/edit?gid=1769545376#gid=1769545376
• the legend takes the whole width
• removed some unused images by the legend and graph handler
• clear map for relations used and legend

@pkalita-lbl can you verify the scss changes, idk how to handle the new logistics, but wanted to make the legend take the full width, so hacked by adding a bunch of parent classes to retain the already defined classes. Lemme if acceptable. Also my formatter was acting up, so it didn't preserve the newlines sometimes

cc @vanaukenk @kltm

[pkalita-lbl]

Overall looks good! A few suggestions about styling, CSS Parts, and CSS Properties.

[tmushayahama]

@pkalita-lbl I have made the changes. Thanks for checking this out

[pkalita-lbl]

I don't see this class used anywhere. Please remove.

[pkalita-lbl]

Looking pretty good now. Still a few loose ends to tie up:

• I think a few unnecessary things can still be removed from gocam-viz.scss, unless I'm misunderstanding your comment about the width of the legend.
• The CSS Part elements within the legend need the part attribute on them.

NOT RIGHT NOW: we should think about whether to move what you've added as dbxref.service.ts to its own standalone NPM package (or, even better, update the existing @geneontology/dbxrefs package).

[pkalita-lbl]

Sorry! One more thing I just noticed. The legend graphic for provides input for shows a circle then an arrow. In the actual graph the edge has an arrow then a circle:

While I'm being nit-picky, is it possible to adjust the alignment of the arrow and line here? It sort of looks like the line is continuing all the way through the arrow. Maybe that's a matter of adjusting the refX attribute?

[tmushayahama]

Thanks for pointing the legend graphics, I have made the fix, The triangle so pointy now and no longer allowed as a carry-on luggage :) . I might try to reduce the code to use same marker, I ended having negative viewBox

[pkalita-lbl]

Awesome! Thanks for addressing all the feedback. Feel free to merge whenever you're ready.