Add metric dropdown for edges and palm tree effect :)

Feature request

Currently it’s unclear that we have edges, what edges are picked if there are multiple edge metrics available and hard to know what buildings have the worst edges. Worst for this issue means the buildings that have the highest sum of ingoing and outgoing edges.

Feedback

• Show all buildings and not only those with edges.
• Create a three-way toggle: show all buildings even if they have no edges, show only buildings with edges, disable all edge showing and palm-tree effect (undone, as third option is the same as having the preview slider at 0)
• Update the toggle A,B,C inside the edgeSettingsPanel. Remove option to not show any edges, as this state is also provided within the preview-slider. Create checkbox for both other states instead
• Slider to change the curve of the edges
• The count of ingoing and outgoing edges should be splitted
• Test the edge effect with an Apache Netbeans map
• Color in and outgoing edges in a different useful color (as an edge can be in and outgoing for different nodes, the hovered node determines the color first)
• Show edges onHover only when valid edgeMetric is selected
• Outgoing Edges should start from one of the four edges of the building (undone, because it is less clear which node an edge corresponds to)
• Debounce edgeMetricServcie broadcast like in settingsService (not necessary, as it makes loading slower)
• Update edge-metric dropdown to new design
• Show sum symbol if applicable for edge metrics
• Update edge curve calculation with new edge start/end points
• Update edges when buildings height changes due to scaling
• Fix removing edgePreviews, when selecting edgeMetric None
• There should be no edges on hovering nodes, when selecting edgeMetric None
• Tooltip if no Edges available
• Increase Test Coverage for: codeMap.arrow.service, edgeSettingsPanel
• When a building is highlighted, the edges endpoint buildings should be highlighted too
• Fix on new File loaded, the settings/previews are not applied
• Add reset button to edgeSettingsPanel
• Disable edgeSettingsPanel settings when no edges found

Description

• Let’s add a new metric dropdown with which we can select what ingoing and outgoing edges to visualize.
• The building with the most ingoing and outgoing edges is displayed and visualized in the following way
  • the ingoing edges all go into the top of the building into the center
  • the outgoing edges all leave from the side of the building
  • without user interaction only 1/10th or so of the edges are displayed. I imagine it’ll look a bit like a palm tree 😃
  • The user can see that there are a high number of outgoing and ingoing edges because there are lots of short arrows drawn.
• if the user hovers over any building CC shows the full edges and where they lead or come from.
  • The buildings where the edges come from are also highlighted.
  • CC shows the full edges for as long as the user hovers over the building or has it selected.
• The options for the metric dropdown control how many of the buildings have visible 1/10th edges. The default is 1, similar to the show label counter.
• If no edges are available the dropdown is disabled and displays a helpful message why and how to generate edges. A helpful reminder to check out the analysis wiki is enough. We don’t need to specify the exact analysis filter because that might change in the future.
• The right-click show edges button is removed from the context menu.

Is this the final metric display issue? No, but this should prove a very good starting point for our users. Based on the feedback we can then change how edges are displayed.

The result looks something like this without hover:

And on hover the full edges are drawn:

[alschmut]

@alexhunziker I shortly answer to your two questions:

1. I can’t say if its useful to have the values of incoming and outgoing separated, but regarding your example the pairing rate value is different for in- and outgoing edges. Its always: When fileA is changed, chance is x% that fileB is changed in the same commit. This means its not necessarily the same value the other way around 😃
2. I agree and would also think about adding a separate attributes object to the node.

[alexhunziker]

cc_with_edges.cc.zip

I created a .cc.json file of codeCharta with edges for testing 😃