show multiple paths at the same time

[KonradHoeffner]

Right now, multiple paths are shown in a table where the user can choose one but that is hard to understand intuitively:

It would be better to visualize different paths in the diagram, but the challenge is to make this easily understandable.

[KonradHoeffner]

Currently, even a single path is hard to see:

The path is:

0. SoftwareProduct
1. spUsedInOuCit
2. OrganizationalUnitCitation
3. evaluatesApplicationSystemTypeUsedInUnit
4. Study
5. evaluatesApplicationSystemTypeHavingFeature
6. FeatureCitation
7. supportsFunction
8. EnterpriseFunctionCitation
9. efCitClassifiedAs
10. EnterpriseFunctionClassified
11. astClaSupportsEfCla
12. ApplicationSystemTypeClassified
13. astClaFrom
14. ApplicationSystemTypeCatalogue

It's especially confusing that there arrows pointing in the opposite direction because we allow traversal in both directions of a property.

[KonradHoeffner]

Liniennetzplan LVB

This example shows, how multiple overlapping paths are visualized for trams in Leipzig. Could we use a similar technique? However we don't have fixed lanes.

[KonradHoeffner]

Google Maps

Google Maps shows everything in the same color, however there it is easier because the general direction is from source to target, while in our case there may be many strange turns.

[KonradHoeffner]

@Yagnap: Can you help investigate?

[KonradHoeffner]

We now filter out paths with no instances so there are much less paths shown at the same time. Thus we can just show them side by side by duplicating the paths and shifting them perpendicular to their direction, which should be simple vector math.

[KonradHoeffner]

Constant shift of (5 5) I think is in now, as next step I will calculate the line shift as discussed.

[KonradHoeffner]

Adaptive Shift

1. Calculate Vector v between first and last point in a path.
2. Normalize v to unit length.
3. Calculate normal (orthagonal) vector.
4. Transform path sequence 0,1,2,3,... to multiplier of 0,1,-1,2,-2 and so on .
5. If multiplier is >0: Clone path, multiply all components of normal vector and translate cloned path by this amount.

This works well if the path is just a single line. For multiple paths we probably need:

• perform the adaptive shift for each line in the path
• adjust connecting points accordingly so the path is still connnected

[KonradHoeffner]

Multiple line path shift ideas

[KonradHoeffner]

I didn't like how translating each point except source and target turned out but this new approach is getting nice results:

Here the first and last original points are just added to the beginning, respectively end of the new path where each element is translated separately.

[KonradHoeffner]

Multiple paths to the software product attributes on the left seem a bit strange but I'm fine with it for now, this doesn't seem worth the effort as we are not here to win design awards but get a research prototype going. However @Yagnap if you have an idea how to improve those cases with little effort feel free to do implement it.

[KonradHoeffner]

Now we just need to implement edge selection and then we can finally close this issue.

[KonradHoeffner]

P.S.: Oh we can just set the z-index of the edges behind the nodes, then those artifacts should be lessened. Update: z-index doesn't work with SVG elements, they are positioned with the later drawn elements over earlier drawn ones.

[KonradHoeffner]

Manually moving all the node definitions to the end of the SVG image does indeed improve the path display. However this will be overwritten when importing the next version of the diagram. We could add this to preprocessing but the current script is based on regular expressions, which are not suited for this operation. Can we change the order in JavaScript? Update: We will change this in the graphml yEd file, see https://github.com/hitontology/hitontology.eu/issues/46.

[KonradHoeffner]

This feature is now implemented, the issue resolved and the feature branch deleted.