Revision as of 05:39, 5 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, while the second part will display the input documents and highlight the detected differences in an editor (tree, graphical...), or optionally as 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 Eclipse installation. It works for any kind of EMF-based artifact. It provides two/three-way comparison and merging functionality and, to use it, two (or three) documents need to be selected from the Eclipse workspace. With the right-click command “Compare With each other” and according to the selected files' type, the differences and conflicts (in case of three-way comparison) are visualized in a comparison editor. The input documents are presented as trees and the differences are visualized between the edited model versions into three separate parts representing Ancestor (optional, and can be hidden from the view), V0 and V1 of the documents highlighted with colors (blue for changes, yellow for removals, green for the additions and red for conflicts). The result of a comparison can be saved as “emfdiff”, a format specific to EMF Compare, but not as text file by default. New export options can be provided through an extension point. 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 is a viewer 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 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 and responds to the user selections : whenever clicking on an element in any of the viewers –including also the top one with the textual description of the changes— the other viewers 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 viewer at the top of the editor that represents the structural differences between a given set of files. Here is the decomposition of this view :

• Button ‘Export diff model’ : Export the actual diff state with “.emfdiff” extension. New export options can be provided through extension points.
• Combo Box ‘Filters’ : Allows users to filter the displayed differences in the tree view [4]. New filters can be provided through extension points and, by default, four options are provided :
  1. Changed Elements,
  2. Added Elements,
  3. Moved Elements,
  4. Removed Elements.
• Combo Box ‘Groups’ : Provides the users with the possibility of grouping the diff. New groups can be provided through extension points and, by default, three choices are provided :
  1. Default : no grouping function to apply,
  2. Per Kind of change : group the diff according to their type : [others, removed, moved, changed, added],
  3. Per metamodel element : list the metamodel elements that contain a modified attribute or property.
• Tree View : This component will be dedicated to displaying the structural differences between the input files and it will interact with the selected option in [2] and [3]. Selecting an element in this tree view will highlight the changed element(s) with a corresponding color in the documents displayed in the bottom part of the UI.

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: Allow the user to merge all non-conflictual changes from the Left to the Right.
4. Button-Copy All from R to L: Allow the user to merge all non-conflictual changes from the from the Right to the Left .
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.