Revision as of 08:34, 4 April 2012

EMF Compare UI Specifications [Draft]

Overview

In this document we will present the different functionalities and specifications that will be provided by the EMF Compare UI tool. The UI will contain two principal parts the first one will present the structural differences between the given files. And in the second part these differences will be highlighted into the documents given as an input and visualized into their default editor, or optionally into a textual representation. The UI will contain other functionalities such as merging documents, saving the actual comparison state, visualizing differences by categories and filtering them.

User Interface

EMF compare is a part of the Eclipse Modeling Tools and can be integrated as a plug-in into any classic Eclipse. It works for any kind of EMF-based artifact. It provides two/three-way comparison and merging functionality, and for using it, two/three document need to be selected from the Eclipse workspace. With the right-click command “Compare With each other” and according to selected file’s type, the differences and conflicts (in case of three-way comparison) are visualized in two/three-base manner. In the case of the three-way comparison, additionally to the tree-based presentation the differences and the conflicts are visualized between the edited model versions into three different windows representing Ancestor, V0, and V1 of the documents highlighted with colors (blue for changes , yellow for removal , green for the addition and red for conflicts) . The result of comparison can be saved as “emfdiff” but not as text file and provides the following executable operations. The changes can be “copied” from the left model artifact (V0) to the right one (V1) and vice-versa. Here is the suggested User Interface of the EMF compare tool.

User Interface decomposition

The EMF compare UI can be divided into two parts, the first one part is a window on top that gives structural textual description of the changes and guides the user through them, and the second part is a side by side windows approach with two version of the selected files/diagrams. As it’s very useful to provide the comparison tool with means to easily navigate through the changes, merging documents from left to right or vice-versa. The UI is also interactive as for the user, whenever clicking on an element in any of the windows – that includes also the top window with the textual description of the changes — the other two windows scroll and zoom to the corresponding position in the file/diagram.

Part 1 - Structural Differences - 

As indicated before the first part of EMF Compare UI is a window on top that represents the structural differences between a given files. Here is the decomposition of this view:

1. Button ‘Export DiffModel’: Export the actual diff state with “.emfdiff” extension
2. Combo Box ‘Filters’:Contain 4 choices in order to filter the displayed results on the tree view [4].
   i. Changed Elements
   ii. Added Elements
   iii.Moved Elements
   iv. Removed Elements
3. Combo Box ‘Groups’: Contain 3 choices to provide the possibility of grouping the diff :
   i. Defaul: No grouping function to apply
   ii. Per Kind of changes: By choosing this option the diff will be groupped by type of change [Others, Removed, Moved, Changed, Added]
   iii.Per Meta-Model-Elements: This option will list the Meta-Model elements that contain a modified attribute or properties

   → New ‘Filters’ and ‘Groups’ will be provided as extension point

4. Tree View : This component will be dedicated to display the structural difference between the input files and it will interact with the selected option in [2] and [3].A selection of an element in this tree view will highlight the changed element with a corresponding color in the document which will be displayed in the next Part of the UI.
   The used colors are:
   - Blue : For Changes.
   - Green : For Additions.
   - Red : For conflicts (in case of three-way comparison).
   - Yellow: For removal.

Part 2 - Visualizing Structural Differences - 



In order to visualize the structural differences the side-by-side windows approach is adopted in order to have a global view of the selected documents. On top of exporting, filtering and grouping comparison results, EMF Compare UI comes with other functionalities which they will be detailled in this section. The second part of the UI is composed as following:

1. Combo Box-Visualization of Structural Diff: Choosing the comparison type via an extension point (Model comparison, texutal Comparison ..)
2. Button-Hide Ancestor Pane: This button is hidden by default and it’s displayed only when comparing between three files and it’s used to show the ancestor pane.
3. Button-Copy All from L to R: If no conflict was detected theses buttons will provide the Merging All functionality from the Left to the Right.
4. Button-Copy All from R to L: If no conflict was detected theses buttons will provide the Merging All functionality from the Left to the Right.
5. Button-Copy Current Change from L to R : Copy the current selected change from the left to the right.
6. Button-Copy Current Change from R to L: Copy the current selected change from the right to the left and vice-versa.
7. Button- Select Next/Previous Change: Gives the user to navigate between the different changes and conflicts in the files.
8. Pane – Ancestor Pane: Visualize the ancestor document selected previously by the user.
9. Tree View- Tree-based representation of the selected documents: In the left side is dedicated to the version 1 of the document and the right side is for the version 2.
10. Tabbed-Pane : The first Tab ‘Differences’ contain a the Tree-View which represent the tree-based representation of the selected documents, the second tab ‘Properties’ represents a property view of the selected changes/conflicts. As for the