Diff Viewer - Side by side comparison of two builds about scenarioo

[Dogen91]

Hi all, im one of the new students working on this issue.

If you would like to see our first UI-prototyp you can go on https://pascalforster.proto.io/share/?id=313a6fb5-c2f4-430c-b1d8-7f0ca911f69a&v=1 an click you through the screens. Note that the prototyp is only available until end of march. For that reason i attached the single screens at the end of this comment.

I also attached our first draft of epics and user stories in a pdf. At the moment they are written in German but as soon as they are approved we will open github issues an write them down in English.
Epics und User Stories.pdf

We would be please to get some feedback from you.

1_use_cases
2_scenarios
3_scenario_overview
4_step
5_scenario_compare_overview
6_detail_view
7_diff_overview

[mi-we]

Hi, @Dogen91, also welcome to Scenarioo from my side. Regarding the screens I think that it looks great too. I like the positioning of the "status icons" 👍

One thing maybe from my side for the scenario overview page (2_scenarios), I wonder if the icon for the compare action could get a bit lost between the other information around it.

In my opinion it would be better, if it was placed near the status icon to signalise that they belong together. But apart from that, it looks very promising. I'm looking forward to this.

[bruderol]

I try to summarize some major points we discussed today:

• diffs need to be selfcontained and deletable by an admin in the file system
• similar to the builds import UI, probably a simple UI to see state of calculation of diffs and potential problems / errors / bugs on diff calculation is probably needed (but not a MUST for this work, as we could easily add this later, as long as the basic data model / architecture / design allows for adding this later)
• the selection of diff should not be in the top level bar as in the prototype (where build and branch is allready selected, because it is conceptually something completely different), instead of it there should be a special dropdown in the top right (breadcrumbs bar) to turn on diff information (if currently no diff was selected) or choose another diff. Even if the user has currently no diff selected, this button should always visually inform the user (by colors and % information, e.g. gray for no or only little changes, blue for small changes, yellow for medium changes, red for major changes, ...) whether in this current context (usecase, scenario, step, object, ...) there is any relevant change information available in one of the available diffs (if available at all).
• in general some visual qualification of the information "changes available" (currently only marked as an explanation mark in the prototype) is needed. I propose to use a percentage number together with the icon and to vary the background-color of this information to highlight visualy the grade of changes. Also it is important that the user can sort the listed items (usecases, scenarios, steps, pages, etc.) by this changes ratio.
• metadata comparison and actions (screen annotations) comparisons is probably out of scope for the minimum viable product prototype (implemented in this thesis)
• the overall changes view needs further discussion, the proposed solution design for this page is not yet mature enough. We need to discuss this important view further how we could solve this.
• One new idea brought up by me was to use all the currently configurable tabs (where any other objects can be browsed, e.g. pages!!) to inform the user about changes in this areas (e.g. how much changes per page? which pages have most changes?), such that the user can browse into the changed scenarios, steps from a different structure (as allready available today). Maybe we could extend this views to also display the screenshots attached to this objects immediately, which would be helpfull to go through all screenshots e.g. of one page, one label, one service call, one requirement, etc. (but maybe this goes too far for this bachelor thesis, might be one thing that we have to implement later ...)
• step comparison view should be directly integrated in the current step view as a new tab "comparison"
• currently not covered but maybe important later: user might want a possibility to mark reviewed changes as "expected" or "reviewed", and those marked changes should be filtered away (at least in the overall changes overview).
• priorisation:
  • first we should focus to inform the user about changes in usecases, scenarios, steps, (based and aggregated from screenshot changes, and added/removed steps, pages, scenarios, usecases).
  • the precalculation (right after import) of this diffs needs to be implemented
  • selection from one of the available diffs and then displaying this diff on the existing pages, together with the special new scenario diff view and the step diff view (new tabs on existing pages) are probably the most important features for the MVP.
  • Next important thing is a way to fast go through all the changes ordered by change ratio somehow, but this needs probably further detail design (can the user filter this changes view somehow? with many changes some paging might be needed for performance, screens with changes should be immediately visible in this view) for a feasable and usable solution. But if possible, some simple solution for this should also be part of the MVP
  • Out of scope or less important
    • configuration UI (first MVP can be configured through XML config file)
    • metadata comparison (can be added later)

[Dogen91]

as discussed last week we replaced the 100% for added and removed elements by a small info text.
we tried also to add an additional icon but that didnt look well in our eyes.
also added a light background color for added and removed elements.

hope you like it.

[bruderol]

Would be great if each screen could be compared like they did it here:
https://medium.com/programming-ideas-tutorial-and-experience/ed4f0bbd694c

Watch the Videos!

[bruderol]

some solutions for making image comparisons visible (image diffs) for visual regression testing:

See https://github.com/Huddle/PhantomCSS
It uses http://huddle.github.io/Resemble.js/ to compare taken screenshots for regression testing, maybe something we could integrate into Scenarioo.

Another possible solution is "Pdiff":
See http://pdiff.sourceforge.net/

[adiherzog]

I removed @sueess from this issue. Two students from FHNW are working on this topic now as their semester thesis. If anybody has input or wants to be involved in reviewing the outcomes they can drop a note here. The students will probably use their own issue tracking tool (e.g. Trello). Therefore this issue here just serves as a placeholder for the whole project and assigned it to me, as I am the contact for the two students.

[bruderol]

@adiherzog As I wrote to you by email: I think also the students should use github issues, as everybody working on Scenarioo is supposed to do.

I don't mind having them a trello, but for the most important functional user stories and other important development issues everybody is supposed to use our usual github backlog, also for documentation purposes. Thank you.

[adiherzog]

The students will use the GitHub issues as soon as they have commit rights to our repository.

[bruderol]

👍 thanks

[bruderol]

By the way ... in case they are allready reading this ... Many welcome to the two new members of the "Scenarioo community" ... I am looking forward to getting to know you soon and to your interesting work on this topic. 😄

[adiherzog]

The two students prefer to work on their fork instead of a branch. Therefore, we don't have any detailed issues here for what they do.

[danielsuter]

Can you give status updates about their progress in the monthly meetings? This feature seems to have gotten some attention.

[bruderol]

+1 for keeping the rest of the team frequently up to date what is going on, please!
I also think that the rest of the team should also have a chance to review and influence how they integrate that into Scenarioo. Please contact us to review any Solution Design, as soon as they have one.

[adiherzog]

I can't keep you up to date all the time. That's too much work for me. The students are currently implementing some ideas in their project week. Here's some information about the current plans:

• The scope is limited to comparing the scenario structure and the screenshots
• Theres a structural analysis happening on the server side. This comparison is done after the import of a new build by comparing it to the previous build. For all other builds the comparison is made only when a user wants to see it ("on demand").
• There's a "compare" link next to the "share" link in the navigation bar.
• When the "compare" link is clicked, a popup appears where the current branch / build is visible (read only) and a second branch / build can be selected for comparison.
• The comparison page for the structural comparison of two scenarios is a two column layout where the older build is on the left and the newer on the right side.
• The comparison page for one screenshot should have 2 or 3 different comparison modes so that the user can switch between them. There is at least one static comparison (like resemble-js) and one interactive one (like classycompare)

[jordilaforge]

Hi Scenarioo Community
Im one of the Students adiherzog talked about. Im sorry that we have to work on a fork. But those are the rules from FHNW. Currently i'm working on a ScreenshotCompare algorithm to compare two Screenshots. Try to keep you informed frequently.

[adiherzog]

@jordilaforge It's totally fine that you work on a fork, don't worry about that. You also don't have to give any updates here, I'll do that from time to time.

[adiherzog]

The result of the semester thesis is available here:

Source code: https://github.com/jordilaforge/scenarioo
Demo: http://54.88.202.24:8080/scenarioo-fork-jordilaforge

The implementation is not production ready (layout issues, performance, etc.), therefore we will not merge it into the develop branch. If somebody wants to continute working on this topic, the work of the two FH students can be used as a basis. It might be a good topic for our coding days 2015.

[bruderol]

A new bachelor thesis started for implementing this feature, it will be called "Diff Viewer".
I sent the current draft of a solution design for this to all of you by email. you can send your feedback to me or directly put comments with input for this feature here on this issue.

[bruderol]

@Dogen91 Welcome to the scenarioo development community! Thank you for keeping us updated here. I will have a closer look soon and give some feedback here. Great work so far! Thank you for posting it here! 👍

[bruderol]

I had a first look at the prototype, and I think it goes into the right direction. Of course I will have some more detailed feedback later.

Also I allready got a general feedback from @tobiaszuercher by email:

Die screens sehen cool aus, wird n geiles feature 

thumbs-up

[bruderol]

@adiherzog @danielsuter @mi-we @forkch @abeggchr
Would be great if you could give some feedback here. Thank you.

[abeggchr]

Great work! I like how the comparison is embedded in all pages and the scenario compare looks fantastic.

Questions:

• Can a build still be viewed without a comparison to another build (i.e. by selecting "no comparison" in the dropdown at the top). Background: It is already a challenge for a new user to orientate himself on the Screen (i.e. what is a scenario, what is a step, what is a page) - additional comparison infos are not helping at this time.
• Does the diff overview contain links to the corresponding scenarios?

Ideas:

• I suggest to do a workover on the icons (I know, it is always easy to give feedback on visual details). The trash symbol for deleted stuff is asymmetric to the + sign for added stuff, the exclamation mark for changes and the tick for no changes are very generic. Let you inspire from the Icons used in merge Tools (i.e. http://www.iconshock.com/icons/clean/database/merge_cells-icon.html or http://de.halo.wikia.com/wiki/Datei:Merge_icon.png)

[bruderol]

@Dogen91 I agree on all feedbacks here so far. I will send you more detailed feedback in a PDF soon. Please also consider the feedbacks here.

[patrickschweizer]

👏 well done, guys. I like the suggested epics and stories! Below follows my input:

• Story 3.1: Step Change Overview: I suggest that the printscreen detail infos (e.g. 24% changed) are always visible (not a tooltip).
• Story 3.4: Metadata Comparison: a colorized markup of the changed values would be helpful (e.g. as in confluence Wiki, where different colors are used for changed, added or deleted words).
• Story 4.2: Overall Change Overview: an additional raw 'screen change rate' would be helpful, to better recognize small and large changes and to be able to order by the change rate.

[bruderol]

one interessting remark concerning the first ideas for how to solve the screen comparison:
Manuel and Pascal evaluated some tools and it seems that one of the most performant and promising server-side solutions would be to use http://www.graphicsmagick.org/
I had a short look at it and it seems to be a good candidate. One point that could be interessting: this tool would also make sense to use for producing thumbnails or similar image processing tasks in the backend later. The tool can even produce diff images (with highlighting the changes) on the server side. So we would not realy need a client side (javascript based) image comparison anymore, or only as a second more advanced option in the client, if really needed.

The tests that they made with grphicsmagick show that it is much more fast in comparing images than e.g. the first proposed candidate by me: pdiff (which seems to need many seconds for comparing two screenshots and we might have to compare around 20'000 images for one build).

[bruderol]

one last idea: maybe we could help you with the screen design and see if one of our UI designers could make some suggestions for the diff selection dropdown and the visualization of changes (icons and the way to visualize different levels of change ratio). @Dogen91 What you think? Would that be helpful?

[bruderol]

and I still highly recommend to have a look at the following short video for inspiration:
https://www.youtube.com/watch?v=y2A_AfbEo0U

Taken from following post that I allready mentioned very long time ago (above):
https://medium.com/programming-ideas-tutorial-and-experience/ed4f0bbd694c

[Dogen91]

@bruderol it would be great if a UI designer could make some suggestions for the screen designs. the designers often have an other point of view an their inputs could be very valuable.

[bruderol]

@Dogen91 I will try to have a look at it with one of our designers next week, just to give us some styles for the "diff marker"-icons in the columns with the possibility to viaulize the ratio of the changes nicely and for the dropdown in upper right corner to immediately see if changes/diffs are available (also with ratio visualisation) and to choose from them. something else you would need a design proposal or some help with? just let us know. Thank you.

[jordilaforge]

Hey guys nice to see that our initial project gets another round
@bruderol graphicsmagick looks promising but there is also imagemagick wich can do the comparison:
http://www.imagemagick.org/Usage/compare/
Maybe you should test that too performance wise and with JMagick you even get a Java API for the backend

[bruderol]

Zühlke community rocks! 😄 👍

Concerning the syles / icons:

Our designers @romanrast and @wabaki discussed the UI prototype and the visualization of changes in scenarioo with me this morning. They will make a proposal on how to style the different degrees of changes and the dropdown to select a Diff / Comaprison in Scenarioo.

Some important outcomes of this discussion to consider:

• we will only style 5 different degrees of changes (0-20%, 20-40, 40-60, 60-80, 80-100) and display the degree value, because styling it with too much different colors will cause the UI to look too chaotic
• we should think about wording, will we call it "Comparison" or "Diff" or what words should we use in the UI (important to use consistent wording in the UI and of course also in the source code!)
• there was a discussion about what icon to use for changed files / items. I did some research about what other tools use and it seems that there is no "standard" for this. I found exclamation mark in Tortoise tools (e.g. Tortoise SVN). I did not find any better matching icon so far, except for asterisk (see http://fortawesome.github.io/Font-Awesome/3.2.1/icon/asterisk/), as used in Eclipse. But if somebody has a better idea, then let us know ( @abeggchr ? ).
• Icons:
  • in general we have to use font-awesome icons (scenarioo uses version 3.2.1), as everywhere in scenarioo allready! See http://fortawesome.github.io/Font-Awesome/3.2.1/ (we could also update to new version, but then we have to change all used icons to use the new names)
  • I propose to use following icons:
    • added: http://fortawesome.github.io/Font-Awesome/3.2.1/icon/plus/ or http://fortawesome.github.io/Font-Awesome/3.2.1/icon/plus-sign/
    • removed: http://fortawesome.github.io/Font-Awesome/3.2.1/icon/minus/ or http://fortawesome.github.io/Font-Awesome/3.2.1/icon/minus-sign/
    • changed: http://fortawesome.github.io/Font-Awesome/3.2.1/icon/exclamation/ or http://fortawesome.github.io/Font-Awesome/3.2.1/icon/exclamation-sign/ or http://fortawesome.github.io/Font-Awesome/3.2.1/icon/asterisk/
    • unchanged: no icon at all or http://fortawesome.github.io/Font-Awesome/3.2.1/icon/ok/ or http://fortawesome.github.io/Font-Awesome/3.2.1/icon/ok-sign/
    • key visual für Diffs / Comparisons: I did not find a good icon yet, any ideas?? Proposals are welcome.
• Colors:
  • green for added things (as in all diff tools)
  • red for removed things (as in all diff tools)
  • orange/yellow (or to be defined) for changes inside existing object
  • light-gray or blue for no changes (or maybe even not display anything at all for no changes in most cases)

@adiherzog I know that green/red is an issue for some people with color blindness, but since allmost all diff tools use this kind of colors, as far as I know, I think we should not break this "de facto standard", or what do you think?

[magitnu]

Hello everybody, I'm the other student working on this issue.
Thank you for the useful feedback and the good inputs.

@jordilaforge Graphicsmagick is a fork of imagemagick. We use im4java as java interface, which works for both of them. Our first thought was also to use imagemagick, because of it's feature to store the diff-image transparently. This would save a lot of place on the server and provides less loading time for the client. Sadly, imagemagick does not work well with different sized images. Therefore our final pick is graphicsmagick which can handle different sized images.

@bruderol Thank you for discussing the UI prototype with your designers. I totally agree with the choosen icons and colors. We'll integrate these suggestions in our prototype.

[adiherzog]

@bruderol The red / green issue is not so minor:

Rot-Grün-Sehschwäche oder -Blindheit ist immer angeboren und verstärkt oder vermindert sich nicht im Laufe der Zeit. Von ihr sind etwa 9 % aller Männer und etwa 0,8 % der Frauen betroffen

(Source: https://de.wikipedia.org/wiki/Rot-Gr%C3%BCn-Sehschw%C3%A4che#cite_note-1)

If you still wish to use green and red you should make sure that the two colors have a very clear difference in tone, tint or shade (see http://color-wheel-artist.com/hue.html). If you need somebody to test the chosen colors I am happy to assist :-)

[bruderol]

@adiherzog I did not say, that this is a minor issue. I am aware of it (as you can see, that is why I mentioned it). But also all common tools in this area that I know, use green and red (e.g. github) for additions and deletions. So do you agree to stick to this "quasi standard" of using red and green?

[adiherzog]

@bruderol As said above, if you want to use red and green they have to be easily distinguishable by using a clear difference in tone. Then it's ok for me.

[bruderol]

@adiherzog Is this the case for the colors that they use on github??

[danielsuter]

We should be able to find a color blind person and can ask his/her opinion. The change will be minimal and non breaking.So it's something we can tackle later.

[bruderol]

gooooood idea @danielsuter 👍 - maybe @adiherzog knows a person we could ask?? 😉

[bruderol]

Hi all, @Dogen91 , @magitnu, @danielsuter , @adiherzog

Yesterday I got the initial styling from @romanrast and @wabaki for displaying the change ratios.

See http://htmlpreview.github.io/?https://github.com/scenarioo/scenarioo/blob/develop/scenarioo-client/resources/scenariooDiffViewerStyles.html

The icons for added and removed items with red/green colors have been added by me, and are maybe not yet that nice (I did not have time to make it perfect, sorry).

@romanrast and @wabaki maybe you can have a short look on what I did, and maybe fine tune the colors a little bit and also my changes to the styling classes.

Everybody is welcome to give feedback. Feel also free to just improve the stylings in this file (as a suggestion/pull request):
https://github.com/scenarioo/scenarioo/blob/develop/scenarioo-client/resources/scenariooDiffViewerStyles.html

@magitnu, @Dogen91 feel free to integrate this styles and you can also improve the css classes maybe a little bit to make them even more easy to use (don't use inline styles, except for the dynamicaly calculated progress bar widths). Thank you.

[bruderol]

👍 Wow, just great! I like it so much! Thank you @Dogen91 and @magitnu ! Great work! Awesome!

[bruderol]

@forkch Did you see that your original Idea has been finally realized? :-) 👍 Will be released soon ... We will of course invite you for the release party!

[bruderol]

@danielsuter I think that we can close this epic then?

[danielsuter]

Agree.

[bruderol]

👍 🎉 🎈 🎂 🍻 🎆 🍾 😄 🚀 🚀