# HG changeset patch
# User Harris Baptiste <harris.baptiste@iri.centrepompidou.fr>
# Date 1469717744 -7200
# Node ID 9f55f0bcb29ac61716783fab1935816aa1467c7a
# Parent  0d87dab6f3b0bc5e2e522a74a36c9728966af599# Parent  128512e8acbbaaeb103a865813073a2cd9ccb112
new merging tool

diff -r 128512e8acbb -r 9f55f0bcb29a src/iconolab/static/iconolab/css/iconolab.css
--- a/src/iconolab/static/iconolab/css/iconolab.css	Wed Jul 27 10:55:21 2016 +0200
+++ b/src/iconolab/static/iconolab/css/iconolab.css	Thu Jul 28 16:55:44 2016 +0200
@@ -17,6 +17,12 @@
 	margin-bottom: 15px;
 }
 
+.highlight {
+	border: 1px solid orange;
+}
+
+.revision-proposal {background-color: #ECF0F1;}
+
 .collection-home-btn{
 	margin-top: 5px;
 }
diff -r 128512e8acbb -r 9f55f0bcb29a src/iconolab/static/iconolab/js/iconolab-bundle/src/components/mergetool/MergeTool.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/mergetool/MergeTool.vue	Thu Jul 28 16:55:44 2016 +0200
@@ -0,0 +1,89 @@
+<script>
+
+import Typeahead from '../typeahead/Typeahead.vue'
+
+export default {
+
+	data () {
+		return {}
+	},
+	
+	components: {
+		Typeahead: Typeahead
+	},
+
+	mounted () {
+
+		this.targetKeyMap = {
+			title: "proposal-title", 
+			desc: "proposal-description",
+			frag: "proposal-fragment"
+		};
+
+		this.targetFieldTypeMap = {
+			title: "input", 
+			desc: "input",
+			frag: "frag"
+		};
+
+		this.originalValues = {
+			title: "",
+			desc: "",
+			frag: ""
+		}
+
+	},
+
+	methods: {
+
+		pickProposition: function (event, sourceId, targetKey) {
+			var value = "";
+			var source = document.getElementById(sourceId);
+			var targetField = this.$refs[this.targetKeyMap[targetKey]];
+			var targetType = this.targetFieldTypeMap[targetKey];
+			if (!targetType) { throw new Error("A target type must be provided..."); }
+			
+			if (targetType === "input") {
+				value = targetField.value; 
+				targetField.value = source.value;
+			}
+
+			 if (targetType === "frag") {
+			 	value = targetField.getAttribute("d");
+			 	var sourceValue = source.getAttribute("d");
+			 	var targetPathType = targetField.getAttribute("data-path-type");
+			 	targetField.setAttribute("d", sourceValue);
+			 	
+			 	var pathType = source.getAttribute("data-path-type");
+			 	pathType = pathType || "FREE";
+			 	var fragmentField = this.$refs["fragment-field"];
+			 	fragmentField.value = sourceValue + ";" + pathType;
+			 }
+
+			 this.preserveOriginalValue(targetKey, value);
+		},
+
+		pickTag: function (event, refTag) {
+			var source = this.$refs[refTag];
+			var target = this.$refs['proposal-tags'];
+			this.preserveOriginalValue('proposal-tags', target.tags);
+			target.setTags(source.tags, true);
+		},
+
+		preserveOriginalValue: function (key, value) {
+			if (!this.originalValues[key]) {
+				this.originalValues[key] = value;
+			}
+		},
+
+		hightlightSource: function (source) {
+			source.className += "highlight";
+		},
+
+		save: function () {
+			alert("this is it ... ");
+		}
+	}
+}
+
+</script>
\ No newline at end of file
diff -r 128512e8acbb -r 9f55f0bcb29a src/iconolab/static/iconolab/js/iconolab-bundle/src/components/taglist/Taglist.vue
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/taglist/Taglist.vue	Wed Jul 27 10:55:21 2016 +0200
+++ b/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/taglist/Taglist.vue	Thu Jul 28 16:55:44 2016 +0200
@@ -17,6 +17,11 @@
 			this.normalizeSelectedTags();
 		}, 
 		
+		reset: function () {
+			this.tags = [];
+			this.normalizeSelectedTags(); 
+		},
+
 		/* check tag already exists */
 		tagAlreadyExists (tag) {
 			var result = false;
diff -r 128512e8acbb -r 9f55f0bcb29a src/iconolab/static/iconolab/js/iconolab-bundle/src/components/taglist/template.html
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/taglist/template.html	Wed Jul 27 10:55:21 2016 +0200
+++ b/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/taglist/template.html	Thu Jul 28 16:55:44 2016 +0200
@@ -16,7 +16,7 @@
 	</ul>
 
 	<ul class="list-inline" v-show="readOnly">
-		<li v-for="(tag, index) in tags"  href="#">
+		<li v-for="(tag, index) in tags">
 			<i class="fa fa-tag"></i> <span class="label label-info">{{ tag.tag_label }}</span>
 			 | précision <span class="badge">{{ tag.accuracy }}</span>
 			 | pertinence <span class="badge">{{ tag.relevancy }}</span>
diff -r 128512e8acbb -r 9f55f0bcb29a src/iconolab/static/iconolab/js/iconolab-bundle/src/components/typeahead/Typeahead.vue
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/typeahead/Typeahead.vue	Wed Jul 27 10:55:21 2016 +0200
+++ b/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/typeahead/Typeahead.vue	Thu Jul 28 16:55:44 2016 +0200
@@ -31,10 +31,7 @@
 		mounted() {
 			this.taglist = this.$refs.taglist;
 			this.taglist.readOnly = this.readOnly;
-			if (Array.isArray(this.tags) && this.tags.length) {
-				this.taglist.setTags(this.tags);
-			}
-
+			this.setTags(this.tags);
 		},
 
 		data() {
@@ -52,6 +49,15 @@
 		},
 
 		methods: {
+			
+			setTags(tags, reset) {
+				tags = Array.isArray(tags) ? tags : []; 
+				reset = (typeof reset === "boolean") ? reset : false;
+				if (reset) {
+					this.taglist.reset();
+				}
+				this.taglist.setTags(tags);
+			},
 
       		checkQuery () {
       			if (this.query.length === 0) {
diff -r 128512e8acbb -r 9f55f0bcb29a src/iconolab/static/iconolab/js/iconolab-bundle/src/main.js
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/main.js	Wed Jul 27 10:55:21 2016 +0200
+++ b/src/iconolab/static/iconolab/js/iconolab-bundle/src/main.js	Thu Jul 28 16:55:44 2016 +0200
@@ -5,11 +5,13 @@
 import Typeahead from './components/typeahead/Typeahead.vue'
 import Cutout from './components/cutout'
 import Zoomview from './components/zoomview/Zoomview.vue'
+import MergeTool from './components/mergetool/MergeTool.vue'
 
 var iconolab = {
 	Cutout : Cutout,
 	VueComponents : {
 		Typeahead: Typeahead,
+		MergeTool: MergeTool,
 		Zoomview: Zoomview
 	}
 };
diff -r 128512e8acbb -r 9f55f0bcb29a src/iconolab/templates/iconolab/merge_revision.html
--- a/src/iconolab/templates/iconolab/merge_revision.html	Wed Jul 27 10:55:21 2016 +0200
+++ b/src/iconolab/templates/iconolab/merge_revision.html	Thu Jul 28 16:55:44 2016 +0200
@@ -1,170 +1,247 @@
 {% extends 'iconolab_base.html' %} 
 {% load staticfiles %} 
-{% load thumbnail %} 
+{% load thumbnail %}
+{% load iconolab_tags %} 
 {% block content %}
-<div id="annotation-wrapper" class="row" style="border: 1px solid gray">
-  <div class="col-md-4">
-    <h4>Révision courante
-      <a id="merge-current-revision-info-icon" class="btn btn-default btn-xs btn-revision-info" title="Plus d'info"><i class="fa fa-question-circle-o" aria-hidden="true"></i></a>
-    </h4>
-    <div id="merge-current-revision-alert" class="alert alert-warning revision-info-alert">
-      Cette révision est la révision actuellement publiée pour l'annotation.
-    </div>
-    <form class="form">
-      <fieldset class="form-group">
-        <label class="control-label">Titre:</label>
-        &nbsp;
-        <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
-        <a class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>   
-        <input type="text" class="form-control"
-          id="merge-current-revision-title"
-          value="{{current_revision.title}}" readonly="readonly">
-      </fieldset>
-      <fieldset class="form-group">
-        <label class="control-label">Description: </label>
-        &nbsp;
-        <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
-        <a class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
-        <textarea class="form-control"
-          id="merge-current-revision-description" readonly="readonly">{{ current_revision.description}}</textarea>
-      </fieldset>
-      <fieldset class="form-group">
-        <label class="control-label">Tags: </label>
-        &nbsp;
-        <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
-        <a class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
-        <typeahead id="merge-current-revision-tags" :tags="{{ current_tags_data  }}"></typeahead>
-      </fieldset>
-      <label>Image: </label><br>
-      <label>Commentaire de création: </label>
-      <div class="alert alert-info" role="alert">
-        <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
-        <span class="sr-only">Info:</span>
-          <b>Révision par {{ current_revision.author }} <br> le {{ current_revision.created|date:"d/m/Y" }} à {{ current_revision.created|time:"H:i" }}</b><br>
-          <i class="fa fa-quote-left" aria-hidden="true"></i> {{ current_comment.comment }} <i class="fa fa-quote-right" aria-hidden="true"></i>
+
+
+
+<div id="merge-tool" class="row" style="border: 2px solid gray">
+  <mergetool inline-template>
+    <div class="wrapper">
+
+      <div class="col-md-4">
+        <h4>Révision courante
+        <a id="merge-current-revision-info-icon" class="btn btn-default btn-xs btn-revision-info" title="Plus d'info"><i class="fa fa-question-circle-o" aria-hidden="true"></i></a>
+        </h4>
+        <div id="merge-current-revision-alert" class="alert alert-warning revision-info-alert">
+          Cette révision est la révision actuellement publiée pour l'annotation.
+        </div>
+        <form class="form">
+          <fieldset class="form-group">
+            <label class="control-label">Titre:</label>
+            &nbsp;
+            <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
+            <a @click="pickProposition($event, 'merge-current-revision-title', 'title')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>   
+            <input type="text" class="form-control"
+              id="merge-current-revision-title"
+              value="{{current_revision.title}}" readonly="readonly">
+          </fieldset>
+          <fieldset class="form-group">
+            <label class="control-label">Description: </label>
+            &nbsp;
+            <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
+            <a  @click="pickProposition($event, 'merge-current-revision-description', 'desc')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
+            <textarea class="form-control"
+              id="merge-current-revision-description" readonly="readonly">{{ current_revision.description}}</textarea>
+          </fieldset>
+          <fieldset class="form-group">
+            <label class="control-label">Tags: </label>
+            &nbsp;
+            <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
+            <a  @click="pickTag($event, 'current-tags')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
+            <typeahead ref="current-tags" read-only="1" id="merge-current-revision-tags" :tags="{{ current_tags_data  }}"></typeahead>
+          </fieldset>
+
+          <label>Image: </label>
+          &nbsp;
+             <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
+
+            <a @click="pickProposition($event, 'merge-current-revision-fragment', 'frag')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
+           
+          <br>
+          <fieldset>
+            {% thumbnail image.media "100x100" crop=False as im %}
+              <svg width="{{ im.width }}" height="{{ im.height }}"> 
+                <image id="main-image" class="main-image" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ im.url }}" x="0" y="0" width="{{ im.width }}" height="{{ im.height }}"></image>
+                <g transform="matrix({% transform_matrix im_width=im.width im_height=im.height max_x=100 max_y=100 %})">
+                  <path data-path-type="{{ current_revision.fragment|path_type }}" id="merge-current-revision-fragment" d="{{ current_revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
+                </g>
+              </svg>
+            {% endthumbnail %}
+          </fieldset>
+
+          <label>Commentaire de création: </label>
+          <div class="alert alert-info" role="alert">
+            <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
+            <span class="sr-only">Info:</span>
+              <b>Révision par {{ current_revision.author }} <br> le {{ current_revision.created|date:"d/m/Y" }} à {{ current_revision.created|time:"H:i" }}</b><br>
+              <i class="fa fa-quote-left" aria-hidden="true"></i> {{ current_comment.comment }} <i class="fa fa-quote-right" aria-hidden="true"></i>
+          </div>
+        </form>
       </div>
-    </form>
-  </div>
-  <div class="col-md-4">
-    <h4>Révision parente
-      <a id="merge-parent-revision-info-icon" class="btn btn-default btn-xs btn-revision-info" title="Plus d'info"><i class="fa fa-question-circle-o" aria-hidden="true"></i></a>
-    </h4>
-    <div id="merge-parent-revision-alert" class="alert alert-warning revision-info-alert">
-      Cette révision est la révision à partir de laquelle l'annotation proposée a été créée.
-      
-      {% if parent_revision.revision_guid == current_revision.revision_guid %}<br><b>Note:  Dans ce cas précis, cette révision est identique à la révision courante. </b>{% endif %}
+
+      <div class="col-md-4 revision-proposal">
+        <h4>Révision proposée</h4>
+        <form class="form" action="{% url 'annotation_merge' collection_name image_guid annotation_guid revision_guid %}" method="POST">
+        {% if merge_form.errors %}
+          <div id="errors" style="display: none;">
+              {% for field in merge_form %}
+                {% if field.errors %}
+                  * {{ merge_form.name }}: {{ error|striptags }}
+                {% endif %}
+              {% endfor %}
+          </div>
+          {% endif %}
+          {% csrf_token %}
+          <fieldset class="form-group {% if merge_form.title.errors %}has-error{% endif %}">
+            <label class="control-label" for="id_{{ merge_form.title.name }}">Titre </label>
+            {% if merge_form.title.errors %}
+              <div class="alert alert-danger" role="alert">
+                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+                <span class="sr-only">Error:</span>
+                  {{ merge_form.title.errors | striptags }}
+              </div>
+            {% endif %}
+            <input ref="proposal-title" type="text" class="form-control"
+              name="{{ merge_form.title.name }}"
+              id="id_{{ merge_form.title.name }}" value="{% if merge_form.title.value %}{{ merge_form.title.value}}{% endif %}">
+          </fieldset>
+          <fieldset class="form-group {% if merge_form.description.errors %}has-error{% endif %}">
+            <label class="control-label" for="id_{{ merge_form.description.name }}">Description: </label>
+            {% if merge_form.description.errors %}
+              <div class="alert alert-danger" role="alert">
+                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+                <span class="sr-only">Error:</span>
+                  {{ form.description.errors | striptags }}
+              </div>
+            {% endif %}
+            <textarea ref="proposal-description" class="form-control"
+              name="{{ merge_form.description.name }}"
+              id="id_{{ merge_form.description.name }}" >{% if merge_form.description.value %}{{ merge_form.description.value}}{% endif %}</textarea>
+          </fieldset>
+          <fieldset class="form-group">
+            <label class="control-label" for="id_{{ form.tags.name }}">{{ merge_form.tags.label }}: </label>
+            <typeahead ref="proposal-tags" id="proposal-tags" read-only="1" :tags="{{ proposal_tags_data  }}"></typeahead>
+          </fieldset>
+          
+          <label class="control-label" for="id_{{ form.tags.name }}">Image: </label><br>
+
+          <div>
+            {% thumbnail image.media "100x100" crop=False as im %}
+              <svg width="{{ im.width }}" height="{{ im.height }}"> 
+                <image id="main-image" class="main-image" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ im.url }}" x="0" y="0" width="{{ im.width }}" height="{{ im.height }}"></image>
+                <g transform="matrix({% transform_matrix im_width=im.width im_height=im.height max_x=100 max_y=100 %})">
+                  <path data-path-type="{{ proposal_revision.fragment|path_type }}" ref="proposal-fragment" d="{{ proposal_revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
+                </g>
+              </svg>
+            {% endthumbnail %}
+          </div>
+
+
+          <label>Commentaire de création: </label>
+          <div id="merge-proposal-revision-comment" class="alert alert-info" role="alert">
+            <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
+            <span class="sr-only">Info:</span>
+              <b>Révision par {{ proposal_revision.author }} <br> le {{ proposal_revision.created|date:"d/m/Y" }} à {{ proposal_revision.created|time:"H:i" }}</b><br>
+              <i class="fa fa-quote-left" aria-hidden="true"></i> {{ proposal_comment.comment }} <i class="fa fa-quote-right" aria-hidden="true"></i>
+          </div>
+          <fieldset class="form-group {% if merge_form.comment.errors %}has-error{% endif %}">
+            <label class="control-label" for="id_{{ merge_form.comment.name }}">Commentaire de révision:</label>
+            {% if merge_form.comment.errors %}
+              <div class="alert alert-danger" role="alert">
+                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+                <span class="sr-only">Error:</span>
+                  {{ merge_form.comment.errors | striptags }}
+              </div>
+            {% endif %}
+            <textarea class="form-control"
+              name="{{ merge_form.comment.name }}"
+              id="id_{{ merge_form.comment.name }}" ></textarea>
+          </fieldset>
+          <input ref="fragment-field" type="hidden" name="fragment" value="{{proposal_revision.fragment}}"></input>
+          <button type="submit" class="save btn btn-default btn-sm">Enregister</button>
+                <a class="btn btn-default btn-sm" href="{% url 'revision_detail' collection_name image_guid annotation_guid revision_guid %}" role="button">Retour</a>
+          <br><br>
+        </form>
+      </div>
+
+      <div class="col-md-4">
+        <h4>Révision parente</h4>
+        <a id="merge-parent-revision-info-icon" class="btn btn-default btn-xs btn-revision-info" title="Plus d'info"><i class="fa fa-question-circle-o" aria-hidden="true"></i></a>
+        
+        <div id="merge-parent-revision-alert" class="alert alert-warning revision-info-alert">
+          Cette révision est la révision à partir de laquelle l'annotation proposée a été créée.
+          
+          {% if parent_revision.revision_guid == current_revision.revision_guid %}<br><b>Note:  Dans ce cas précis, cette révision est identique à la révision courante. </b>{% endif %}
+        </div>
+        <form class="form">
+          <fieldset class="form-group">
+            <label class="control-label">Titre:</label>
+            &nbsp;
+            <a @click="pickProposition($event, 'merge-parent-revision-title', 'title')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
+            <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
+            <input type="text" class="form-control"
+              id="merge-parent-revision-title"
+              value="{{parent_revision.title}}" readonly="readonly">
+          </fieldset>
+          <fieldset class="form-group">
+            <label class="control-label">Description: </label>
+            &nbsp;
+            <a @click="pickProposition($event, 'merge-parent-revision-description', 'desc')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
+            <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
+            <textarea id="merge-parent-revision-description" class="form-control"
+               readonly="readonly">{{ parent_revision.description}}</textarea>
+          </fieldset>
+          <fieldset class="form-group">
+            <label class="control-label">Tags: </label>
+            &nbsp;
+            <a  @click="pickTag($event, 'parent-tags')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
+            <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
+            <typeahead ref="parent-tags" read-only="1" id="merge-parent-revision-tags" :tags="{{ current_tags_data  }}"></typeahead>
+          </fieldset>
+
+          <fieldset>
+            <label>Image: </label>
+              &nbsp;
+              <a @click="pickProposition($event, 'merge-parent-revision-fragment', 'frag')" class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
+              <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
+            <br>
+              {% thumbnail image.media "100x100" crop=False as im %}
+                <svg width="{{ im.width }}" height="{{ im.height }}"> 
+                  <image id="main-image" class="main-image" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ im.url }}" x="0" y="0" width="{{ im.width }}" height="{{ im.height }}"></image>
+                  <g transform="matrix({% transform_matrix im_width=im.width im_height=im.height max_x=100 max_y=100 %})">
+                    <path data-path-type="{{ parent_revision.fragment|path_type }}" id="merge-parent-revision-fragment" d="{{ parent_revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
+                  </g>
+                </svg>
+              {% endthumbnail %}
+          </fieldset>
+
+          <label>Commentaire de création: </label>
+          <div id="merge-parent-revision-comment" class="alert alert-info" role="alert">
+            <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
+            <span class="sr-only">Info:</span>
+              <b>Révision par {{ parent_revision.author }} <br> le {{ parent_revision.created|date:"d/m/Y" }} à {{ parent_revision.created|time:"H:i" }}</b><br>
+              <i class="fa fa-quote-left" aria-hidden="true"></i> {{ parent_comment.comment }} <i class="fa fa-quote-right" aria-hidden="true"></i>
+          </div>
+        </form>
+      </div>
+
     </div>
-    <form class="form">
-      <fieldset class="form-group">
-        <label class="control-label">Titre:</label>
-        &nbsp;
-        <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
-        <a class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
-        <input type="text" class="form-control"
-          id="merge-current-revision-title"
-          value="{{parent_revision.title}}" readonly="readonly">
-      </fieldset>
-      <fieldset class="form-group">
-        <label class="control-label">Description: </label>
-        &nbsp;
-        <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
-        <a class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
-        <textarea id="merge-parent-revision-description" class="form-control"
-           readonly="readonly">{{ parent_revision.description}}</textarea>
-      </fieldset>
-      <fieldset class="form-group">
-        <label class="control-label">Tags: </label>
-        &nbsp;
-        <a class="btn btn-default btn-xs" title="Comparer avec proposition"><i class="fa fa-exchange" aria-hidden="true"></i></a>
-        <a class="btn btn-default btn-xs" title="Copier vers proposition"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
-        <typeahead id="parent-comment" :tags="{{ current_tags_data  }}"></typeahead>
-      </fieldset>
-      <label>Image: </label><br>
-      <label>Commentaire de création: </label>
-      <div id="merge-parent-revision-comment" class="alert alert-info" role="alert">
-        <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
-        <span class="sr-only">Info:</span>
-          <b>Révision par {{ parent_revision.author }} <br> le {{ parent_revision.created|date:"d/m/Y" }} à {{ parent_revision.created|time:"H:i" }}</b><br>
-          <i class="fa fa-quote-left" aria-hidden="true"></i> {{ parent_comment.comment }} <i class="fa fa-quote-right" aria-hidden="true"></i>
-      </div>
-    </form>
-  </div>
-  <div class="col-md-4">
-    <h4>Révision proposée</h4>
-    <form class="form" action="{% url 'annotation_merge' collection_name image_guid annotation_guid revision_guid %}" method="POST">
-    {% if merge_form.errors %}
-      <div id="errors" style="display: none;">
-          {% for field in merge_form %}
-            {% if field.errors %}
-              * {{ merge_form.name }}: {{ error|striptags }}
-            {% endif %}
-          {% endfor %}
-      </div>
-      {% endif %}
-      {% csrf_token %}
-      <fieldset class="form-group {% if merge_form.title.errors %}has-error{% endif %}">
-        <label class="control-label" for="id_{{ merge_form.title.name }}">Titre </label>
-        {% if merge_form.title.errors %}
-          <div class="alert alert-danger" role="alert">
-            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
-            <span class="sr-only">Error:</span>
-              {{ merge_form.title.errors | striptags }}
-          </div>
-        {% endif %}
-        <input type="text" class="form-control"
-          name="{{ merge_form.title.name }}"
-          id="id_{{ merge_form.title.name }}" value="{% if merge_form.title.value %}{{ merge_form.title.value}}{% endif %}">
-      </fieldset>
-      <fieldset class="form-group {% if merge_form.description.errors %}has-error{% endif %}">
-        <label class="control-label" for="id_{{ merge_form.description.name }}">Description: </label>
-        {% if merge_form.description.errors %}
-          <div class="alert alert-danger" role="alert">
-            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
-            <span class="sr-only">Error:</span>
-              {{ form.description.errors | striptags }}
-          </div>
-        {% endif %}
-        <textarea class="form-control"
-          name="{{ merge_form.description.name }}"
-          id="id_{{ merge_form.description.name }}" >{% if merge_form.description.value %}{{ merge_form.description.value}}{% endif %}</textarea>
-      </fieldset>
-      <fieldset class="form-group">
-        <label class="control-label" for="id_{{ form.tags.name }}">{{ merge_form.tags.label }}: </label>
-        <typeahead :tags="{{ tags_data  }}"></typeahead>
-      </fieldset>
-      <label class="control-label" for="id_{{ form.tags.name }}">Image: </label><br>
-      <label>Commentaire de création: </label>
-      <div id="merge-proposal-revision-comment" class="alert alert-info" role="alert">
-        <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
-        <span class="sr-only">Info:</span>
-          <b>Révision par {{ proposal_revision.author }} <br> le {{ proposal_revision.created|date:"d/m/Y" }} à {{ proposal_revision.created|time:"H:i" }}</b><br>
-          <i class="fa fa-quote-left" aria-hidden="true"></i> {{ proposal_comment.comment }} <i class="fa fa-quote-right" aria-hidden="true"></i>
-      </div>
-      <fieldset class="form-group {% if merge_form.comment.errors %}has-error{% endif %}">
-        <label class="control-label" for="id_{{ merge_form.comment.name }}">Commentaire de révision:</label>
-        {% if merge_form.comment.errors %}
-          <div class="alert alert-danger" role="alert">
-            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
-            <span class="sr-only">Error:</span>
-              {{ merge_form.comment.errors | striptags }}
-          </div>
-        {% endif %}
-        <textarea class="form-control"
-          name="{{ merge_form.comment.name }}"
-          id="id_{{ merge_form.comment.name }}" ></textarea>
-      </fieldset>
-      <input type="hidden" name="tags" value="[]"></input>
-      <input v-model="normalizePath" type="hidden" name="fragment" value=";FREE"></input>
-      <button type="submit" class="save btn btn-default btn-sm">Enregister</button>
-            <a class="btn btn-default btn-sm" href="{% url 'revision_detail' collection_name image_guid annotation_guid revision_guid %}" role="button">Retour</a>
-      <br><br>
-    </form>
-  </div>
+  </mergetool>
 </div>
 {% endblock %} 
 
 {% block footer_js %} 
 <script>
+  new Vue({
+
+      el: "#merge-tool",
+      mounted () {
+        console.log(iconolab);
+      },
+      methods: {
+        click: function () {
+          alert("ssd");
+        }
+      },
+
+      components: {
+        'mergetool': iconolab.VueComponents.MergeTool
+      }
+
+    });
+
 	$(".revision-info-alert").hide()
 	$(".btn-revision-info").click(function(event){
 	    relatedAlertID = /([a-zA-Z\-]+)-info-icon/.exec($(this).attr("id"))[1]+"-alert";
diff -r 128512e8acbb -r 9f55f0bcb29a src/iconolab/templatetags/iconolab_tags.py
--- a/src/iconolab/templatetags/iconolab_tags.py	Wed Jul 27 10:55:21 2016 +0200
+++ b/src/iconolab/templatetags/iconolab_tags.py	Thu Jul 28 16:55:44 2016 +0200
@@ -10,7 +10,7 @@
 		x_ratio = im_width / max_x
 		y_ratio = im_height / max_y
 		value_list = [x_ratio, 0, 0, y_ratio, 0, 0]
-		matrix = ','.join([str(v) for v in value_list])
+		matrix = ",".join([str(v) for v in value_list])
 	except:
 		matrix = ""
 
@@ -18,9 +18,24 @@
 
 @register.filter
 def clean_path(path):
+	result = ""
 	if not len(path):
-		return ""
+		return result
 	else:
-		path_infos = path.split(';')
-		return path_infos[0] 
-		
\ No newline at end of file
+		path_infos = path.split(";")
+		if len(path_infos) > 0 :
+			result = path_infos[0] 
+	return result
+
+
+@register.filter
+def path_type(path):
+	result = ""
+	if not len(path):
+		return result
+	else:
+		path_infos = path.split(";")
+		if len(path_infos) > 1 :
+			result = path_infos[1]
+
+	return result
\ No newline at end of file