Selecting arguments of unified frame

entries/static/entries/css/unification_frames.css

@@ -22,3 +22,7 @@ table.table-button-menu td:hover {
 .preference-bold {
     font-weight: bold;
 }
+
+#unified-frame .argument.active {
+    background-color: #dee1e4;
+}

entries/static/entries/js/selectional_preference.js

@@ -120,12 +120,15 @@ function attachPlWNContextAutocomplete() {
 }
 
 function addSelectivePreference() {
-    addSelectivePreferenceBase(unified_view_frame_content[0], 1)
+    if (!unified_frame_active_argument_id) {
+        alert(gettext("Zaznacz argument, do którego chcesz dodać preferencję."));
+        return;
+    }
+    addSelectivePreferenceBase(unified_frame_active_frame, unified_view_frame_content[0], unified_frame_active_argument_id);
 }
 
-function addSelectivePreferenceBase(frame, complement_id) {
-
-    let unified_frame_id = frame.id;
+function addSelectivePreferenceBase(unified_frame, frame, complement_id) {
+    let unified_frame_id = unified_frame.id;
 
     var submitSynsetSelection = function(e,v,m,f){
         if (v == -1) {
@@ -248,7 +251,7 @@ function addSelectivePreferenceBase(frame, complement_id) {
         },
         state4: {
             title: 'Wybierz z istniejących',
-            html: relationArgument(frame, complement_id),
+            html: 'TODO',
             buttons: { Anuluj: -1, Zatwierdź: 1 },
             focus: 1,
             submit: function(e,v,m,f){

entries/static/entries/js/unification.js

 "use strict";
 
 var unified_view_frame_content;
+var unified_frame_active_frame;
+var unified_frame_active_argument_id;
 
 function get_unified_frame(unified_frame_id, related) {
     check_import_status();
@@ -96,7 +98,7 @@ function unifiedFrame2dom(unifiedFrame, slowal_frames) {
         title = lexical_units_html;
     }
 
-    p.innerHTML = '<span class="lexical-unit' + cls + '">' + title + '</span>';
+    p.innerHTML = '<span class="lexical-unit">' + title + '</span>';
     div.append(p)
 
     let slowal_frames2selecional_preferencies_mapping = slowal_frames2selecional_preferencies(unifiedFrame, slowal_frames);
@@ -110,8 +112,7 @@ function unifiedFrame2dom(unifiedFrame, slowal_frames) {
     var roles_html = '<th scope="row" class="py-2 px-1 text-secondary">' + gettext('Rola') + '</td>';
     var preferences_row = document.createElement('tr');
     var preferences_html = '<th scope="row" class="py-0 px-1 text-secondary">' + gettext('Preferencje selekcyjne') + '</td>';
-    for (var i in unifiedFrame.arguments) {
-        var argument = unifiedFrame.arguments[i];
+    unifiedFrame.arguments.map(argument => {
         var cls = '';
         var data = ' data-argument_id="' + argument.id + '" data-role="' + argument.role + '"';
         roles_html += '<td class="argument py-2 px-1 border-top border-left border-secondary' + cls + ' ' + argument.role_type + '"' + data + '>' + argument.role_type;
@@ -137,7 +138,7 @@ function unifiedFrame2dom(unifiedFrame, slowal_frames) {
 
         // *** and we want to close the <td> here
         preferences_html += '</td>';
-    }
+    });
     preferences_row.innerHTML += preferences_html;
     roles_row.innerHTML = roles_html;
     tbody.append(roles_row);
@@ -212,8 +213,31 @@ function frames2lexical_unitsHTML(frames) {
 
 function show_unified_frame(unified_frame, slowal_frames) {
     var unified_frame_dom = unifiedFrame2dom(unified_frame, slowal_frames);
-    $('#unified-frame').empty();
-    $('#unified-frame').append($(unified_frame_dom));
+    unified_frame_active_frame = unified_frame;
+    $('#unified-frame').empty().append($(unified_frame_dom));
+    select_unified_frame_argument(0);
+    $('#unified-frame .argument')
+        .mouseenter(function() {
+            if (!$(this).hasClass('active')) {
+                $(this).addClass('highlight bg-highlight');
+                show_info(gettext('Kliknij, aby wybrać kolumnę do edycji.'));
+            }
+        })
+        .mouseleave(function() {
+            $(this).removeClass('highlight bg-highlight');
+            clear_info();
+        })
+        .click(function() {
+            select_unified_frame_argument($(this).data('argument_id'));
+            clear_info();
+        });
+}
+
+function select_unified_frame_argument(argument_id) {
+    unified_frame_active_argument_id = argument_id;
+    $('#unified-frame .argument')
+        .removeClass('active')
+        .filter(`[data-argument_id=${unified_frame_active_argument_id}]`).addClass('active');
 }
 
 function show_unified_frame_lexical_units(frames) {

unifier/views.py

 import json
 
+from django.db import transaction
 from django.http import JsonResponse
 
 from common.decorators import ajax_required
@@ -36,6 +37,7 @@ def save_predefined_preference(request):
     return JsonResponse({})
 
 @ajax_required
+@transaction.atomic
 def save_relational_selectional_preference(request):
     if request.method == 'POST':
         frame_id = request.POST['frame_id']