[#1401] DG: Replace screenshots of Sequence Diagrams as PUML diagrams (…

…#1406)

The Developer Guide uses screenshots of Sequence Diagrams for 
documentation.

This makes it more tedious to update diagrams.

Let's use MarkBind's native support for PlantUML by tagging diagrams 
to `.puml` files of diagrams in the documentation to allow easier 
updating of the Sequence Diagrams.

docs/dg/report.md

@@ -91,7 +91,7 @@ For the basic skeleton of `window.REPOS`, refer to the generated `summary.json`
 
 The `v_summary` module is in charge of loading the ramp charts from the corresponding `commits.json`.
 
-![summary architecture](../images/report-architecture-summary.png)
+<puml src="../diagrams/ReportArchitectureSummary.puml"/>
 
 ### Initializing the data for the ramp charts
 The summary module is activated after the information is loaded from the main Vue.JS object. At creation, the `repo` attribute is populated with the `window.REPOS` object, which contains information loaded from `summary.json`.
@@ -105,7 +105,7 @@ The commits information is retrieved from the corresponding project folders for
 
 The authorship module retrieves the relevant information from the corresponding `authorship.json` file if it is not yet loaded. If it has been loaded, the data will be written into `window.REPOS` and be read from there instead.
 
-![authorship architecture](../images/report-architecture-authorship.png)
+<puml src="../diagrams/ReportArchitectureAuthorship.puml"/>
 
 ### Showing relevant information by authors
 The files will be filtered, picking only files the selected author has written in. The lines are then split into chunks of "touched" and "untouched" code segments displayed in the tab view which will be popped up on the right side of the screen.

docs/diagrams/ReportArchitecture.puml

@@ -0,0 +1,25 @@
+@startuml
+hide footbox
+skinparam monochrome true
+skinparam Shadowing false
+
+rectangle "main.js\n(window.app)" as main
+rectangle "v_zoom.js" as v_zoom
+rectangle "v_ramp.js" as v_ramp
+rectangle "v_summary.js" as v_summary
+rectangle "v_authorship.js" as v_authorship
+rectangle "v_segment.js" as v_segment
+database "api.js\n" as api
+
+main -down-> v_summary
+v_summary -down-> v_zoom
+v_summary -> v_ramp
+v_zoom -> v_ramp
+
+main -down-> v_authorship
+v_authorship -down-> v_segment
+
+api -down--> main : summary.json
+api -down-> v_summary : projectName/commits.json
+api -down-> v_authorship : projectName/authorship.json
+@enduml

docs/diagrams/ReportArchitectureAuthorship.puml

@@ -0,0 +1,46 @@
+@startuml
+hide footbox
+skinparam monochrome true
+skinparam Shadowing false
+
+Participant ":Summary\n(v_summary.js)" as summary
+Participant ":Main\n(window.app)" as main
+Participant ":Authorship\n(v_authorship.js)" as authorship
+Participant ":API\n(api.js)" as api
+Participant ":Segment\n(v_segment.js)" as segment
+
+-> summary : view code icon clicked
+activate summary
+
+summary -> main : view-authorship event
+activate main
+
+main -> authorship : update code view
+activate authorship
+
+opt files not in cache
+
+authorship -> api : loadAuthorship()
+activate api
+
+api --> authorship: "authorship.json"
+deactivate api
+
+end
+
+create segment
+authorship -> segment : update segment view
+activate segment
+
+segment --> authorship : generated segment view
+deactivate segment
+
+authorship --> main : generated code view
+deactivate authorship
+
+main --> summary
+deactivate main
+
+<-- summary
+deactivate summary
+@enduml

docs/diagrams/ReportArchitectureSummary.puml

@@ -0,0 +1,45 @@
+@startuml
+hide footbox
+skinparam monochrome true
+skinparam Shadowing false
+
+Participant ":Main\n(window.app)" as main
+Participant ":Summary\n(v_summary.js)" as summary
+Participant ":API\n(api.js)" as api
+Participant ":Ramp\n(v_ramp.js)" as ramp
+
+-> main : page load
+activate main
+
+loop repo in summary.json
+
+main -> api : loadCommits(repo)
+activate api
+
+api --> main
+deactivate api
+
+end
+
+main -> summary : get summary view
+activate summary
+
+summary -> main : get filter params
+activate main
+
+main --> summary : window.hashParams
+deactivate main
+
+create ramp
+summary -> ramp : get ramp view
+activate ramp
+
+ramp --> summary : ramp view
+deactivate ramp
+
+summary --> main : summary view
+deactivate summary
+
+<-- main
+deactivate main
+@enduml