Add lichen plagiarism color click events (#2343)

* add lichen plagiarism color click events * modified plagiarism match popup * fix popup and scroll * update Lichen min version
Submitty · Jul 13, 2018 · e90f935fa3fe082e762323ed569ccb915f9d7391 · e90f935
1 parent a614e6d
commit e90f935fa3fe082e762323ed569ccb915f9d7391
Unified Split

Showing with 190 additions and 9 deletions.

+1 −1 .setup/bin/update_repos.sh

+50 −8 site/app/controllers/admin/PlagiarismController.php

+13 −0 site/app/views/admin/PlagiarismView.php

+126 −0 site/public/js/server.js
diff --git a/.setup/bin/update_repos.sh b/.setup/bin/update_repos.sh
@@ -26,7 +26,7 @@ SUBMITTY_INSTALL_DIR=/usr/local/submitty
 # dependencies between versions.
 min_AnalysisTools_version=v.18.06.00
-  
-min_Lichen_version=v.18.06.01
+  
+min_Lichen_version=v.18.07.00
 min_RainbowGrades_version=v.18.07.00
 min_Tutorial_version=v.18.06.00

diff --git a/site/app/controllers/admin/PlagiarismController.php b/site/app/controllers/admin/PlagiarismController.php
@@ -29,7 +29,10 @@ public function run() {
            	break;
            case 'get_matching_users':
            	$this->ajaxGetMatchingUsers();
-  
-            	break;      
+  
+            	break;     
+  
+            case 'get_matches_for_clicked_match':
+  
+                $this->ajaxGetMatchesForClickedMatch();
+  
+                break;      
            default:
                $this->core->getOutput()->addBreadcrumb('Lichen Plagiarism Detection');
                $this->plagiarismTree();
@@ -67,7 +70,8 @@ public function plagiarismTree() {
        		unset($gradeable_ids_titles[$i]);
        	}
        }
-  
-        $this->core->getOutput()->renderOutput(array('admin', 'Plagiarism'), 'plagiarismTree', $semester, $course, $assignments, $gradeable_ids_titles);  
+  
+        $this->core->getOutput()->renderOutput(array('admin', 'Plagiarism'), 'plagiarismTree', $semester, $course, $assignments, $gradeable_ids_titles);
+  
+        $this->core->getOutput()->renderOutput(array('admin', 'Plagiarism'), 'plagiarismPopUpToShowMatches');     
    }
    public function plagiarismForm() {
@@ -366,11 +370,13 @@ public function getColorInfo($course_path, $gradeable_id, $user_id_1, $version_u
 	    				}	
 	    			}
 	    			if($codebox == "1" && $orange_color) {
+  
+                        $onclick_function = 'getMatchesForClickedMatch(event,'.$match["start"].','.$match["end"].',"code_box_1","orange",this);';
+  
+                        $name = '{"start":'.$match["start"].', "end":'.$match["end"].'}';
 	    				if(array_key_exists($start_line, $color_info) && array_key_exists($start_pos, $color_info[$start_line])) {
-  
-			    			$color_info[$start_line][$start_pos] .= "<span style='background-color:#ff531a'>";		
+  
+			    			$color_info[$start_line][$start_pos] .= "<span name='{$name}' onclick='{$onclick_function}' style='background-color:#ffa500;cursor: pointer;'>";		
 			    		}
 			    		else {	
-  
-			    			$color_info[$start_line][$start_pos] = "<span style='background-color:#ff531a'>";
+  
+			    			$color_info[$start_line][$start_pos] = "<span name='{$name}' onclick='{$onclick_function}' style='background-color:#ffa500;cursor: pointer;'>";
 			    		}
 			    		if(array_key_exists($end_line, $color_info) && array_key_exists($end_pos+strlen(strval($end_value)), $color_info[$end_line])) {
 			    			$color_info[$end_line][$end_pos+strlen(strval($end_value))] = "</span>".$color_info[$end_line][$end_pos+strlen(strval($end_value))];
@@ -380,11 +386,13 @@ public function getColorInfo($course_path, $gradeable_id, $user_id_1, $version_u
 			    		}
 	    			}
 	    			else if($codebox == "1" && !$orange_color) {
+  
+                        $onclick_function = 'getMatchesForClickedMatch(event,'.$match["start"].','.$match["end"].',"code_box_1","yellow",this);';
+  
+                        $name = '{"start":'.$match["start"].', "end":'.$match["end"].'}';
 	    				if(array_key_exists($start_line, $color_info) && array_key_exists($start_pos, $color_info[$start_line])) {
-  
-			    			$color_info[$start_line][$start_pos] .= "<span style='background-color:#ffff00'>";		
+  
+			    			$color_info[$start_line][$start_pos] .= "<span name='{$name}' onclick='{$onclick_function}' style='background-color:#ffff00;cursor: pointer;'>";		
 			    		}
 			    		else {	
-  
-			    			$color_info[$start_line][$start_pos] = "<span style='background-color:#ffff00'>";
+  
+			    			$color_info[$start_line][$start_pos] = "<span name='{$name}' onclick='{$onclick_function}' style='background-color:#ffff00;cursor: pointer;'>";
 			    		}
 			    		if(array_key_exists($end_line, $color_info) && array_key_exists($end_pos+strlen(strval($end_value)), $color_info[$end_line])) {
 			    			$color_info[$end_line][$end_pos+strlen(strval($end_value))] = "</span>".$color_info[$end_line][$end_pos+strlen(strval($end_value))];
@@ -400,11 +408,13 @@ public function getColorInfo($course_path, $gradeable_id, $user_id_1, $version_u
    			    		$end_pos =$tokens_user_2[$user_2_matchingposition["end"]-1]["char"];
    			    		$end_line= $tokens_user_2[$user_2_matchingposition["end"]-1]["line"];
    			    		$end_value =$tokens_user_2[$user_2_matchingposition["end"]-1]["value"];
+  
+                            $onclick_function = 'getMatchesForClickedMatch(event,'.$match["start"].','.$match["end"].',"code_box_2","orange", this);';
+  
+                            $name = '{"start":'.$user_2_matchingposition["start"].', "end":'.$user_2_matchingposition["end"].'}';
    	    				if(array_key_exists($start_line, $color_info) && array_key_exists($start_pos, $color_info[$start_line])) {
-  
-    			    			$color_info[$start_line][$start_pos] .= "<span style='background-color:#ff531a'>";		
+  
+    			    			$color_info[$start_line][$start_pos] .= "<span name='{$name}' onclick='{$onclick_function}' style='background-color:#ffa500;cursor: pointer;'>";		
    			    		}
    			    		else {	
-  
-    			    			$color_info[$start_line][$start_pos] = "<span style='background-color:#ff531a'>";
+  
+    			    			$color_info[$start_line][$start_pos] = "<span name='{$name}' onclick='{$onclick_function}' style='background-color:#ffa500;cursor: pointer;'>";
    			    		}
    			    		if(array_key_exists($end_line, $color_info) && array_key_exists($end_pos+strlen(strval($end_value)), $color_info[$end_line])) {
    			    			$color_info[$end_line][$end_pos+strlen(strval($end_value))] = "</span>".$color_info[$end_line][$end_pos+strlen(strval($end_value))];
@@ -548,4 +558,36 @@ public function ajaxGetMatchingUsers() {
 	    }    
    }
+  
+    public function ajaxGetMatchesForClickedMatch() {
+  
+        $gradeable_id = $_REQUEST['gradeable_id'];
+  
+        $user_id_1 =$_REQUEST['user_id_1'];
+  
+        $version_user_1 = $_REQUEST['version_user_1'];
+  
+        $course_path = $this->core->getConfig()->getCoursePath();
+  
+        $this->core->getOutput()->useHeader(false);
+  
+        $this->core->getOutput()->useFooter(false);
+  
+
+  
+        $return = array();
+  
+
+  
+        $file_path= $course_path."/lichen/matches/".$gradeable_id."/".$user_id_1."/".$version_user_1."/matches.json";
+  
+        if (!file_exists($file_path)) {
+  
+            echo(json_encode(array("error"=>"user 1 matches.json does not exists")));
+  
+        }
+  
+        else {
+  
+            $content = json_decode(file_get_contents($file_path), true);
+  
+            foreach($content as $match) {
+  
+                if($match["start"] == $_REQUEST['start'] && $match["end"] == $_REQUEST['end']) {
+  
+                    foreach ($match["others"] as $match_info) {
+  
+                        $matchingpositions= array();
+  
+                        foreach($match_info['matchingpositions'] as $matchingpos) {
+  
+                            array_push($matchingpositions, array("start"=> $matchingpos["start"] , "end"=>$matchingpos["end"]));
+  
+                        }
+  
+                        array_push($return, array($match_info["username"],$match_info["version"], $matchingpositions));
+  
+                    }
+  
+                }
+  
+            }
+  
+            $return = json_encode($return);
+  
+            echo($return);
+  
+        }    
+  
+    }
+  
+
 }
diff --git a/site/app/views/admin/PlagiarismView.php b/site/app/views/admin/PlagiarismView.php
@@ -105,11 +105,24 @@ public function plagiarismTree($semester, $course, $assignments, $gradeable_ids_
    $('[name="user_id_2"]', form2).change(function(){
        setUserSubmittedCode('user_id_2');
    });
+  
+    $(document).click(function() {
+  
+        if($('#popup_to_show_matches_id').css('display') == 'block'){
+  
+            $('#popup_to_show_matches_id').css('display', 'none');
+  
+        }
+  
+    });
 </script>
 HTML;
        return $return;
    }
+  
+    public function plagiarismPopUpToShowMatches() {
+  
+        $return = <<<HTML
+  
+    <ul id="popup_to_show_matches_id" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: none;top:0px;left:0px;width:auto;" >
+  
+    </ul>
+  
+HTML;
+  
+        return $return;       
+  
+    }
+  
+
    public function plagiarismForm($gradeable_ids_titles, $prior_term_gradeables) {
        $prior_term_gradeables_json = json_encode($prior_term_gradeables);
        $semester = $this->core->getConfig()->getSemester();

diff --git a/site/public/js/server.js b/site/public/js/server.js
@@ -429,6 +429,132 @@ function setUserSubmittedCode(changed) {
    }   
 }
+  
+function getMatchesForClickedMatch(event, user_1_match_start, user_1_match_end, where, color , span_clicked, popup_user_2, popup_version_user_2) {
+  
+    var form = $("#gradeables_with_plagiarism_result");
+  
+    var form2 = $("#users_with_plagiarism");
+  
+    var gradeable_id = $('[name="gradeable_id"]', form).val();
+  
+    var user_id_1 = $('[name="user_id_1"]', form2).val();
+  
+    var version_user_1 = $('[name="version_user_1"]', form2).val();
+  
+    var version_user_2='';
+  
+    var user_id_2='';
+  
+    if($('[name="user_id_2"]', form2).val() != "") {
+  
+        user_id_2 = JSON.parse($('[name="user_id_2"]', form2).val())["user_id"];
+  
+        version_user_2 = JSON.parse($('[name="user_id_2"]', form2).val())["version"];
+  
+    }
+  
+    $('[name="code_box_1"]').find('span').each(function(){
+  
+        var attr = $(this).css('background-color');
+  
+        if (typeof attr !== typeof undefined && attr !== false && attr == "rgb(255, 0, 0)") {
+  
+            $(this).css('background-color',"#ffa500");    
+  
+        }
+  
+    });
+  
+    $('[name="code_box_2"]').find('span').each(function(){
+  
+        var attr = $(this).css('background-color');
+  
+        if (typeof attr !== typeof undefined && attr !== false && attr == "rgb(255, 0, 0)") {
+  
+            $(this).css('background-color',"#ffa500");    
+  
+        }
+  
+    });
+  
+
+  
+    var url = buildUrl({'component': 'admin', 'page': 'plagiarism', 'action': 'get_matches_for_clicked_match',
+  
+                        'gradeable_id': gradeable_id , 'user_id_1':user_id_1, 'version_user_1': version_user_1, 'start':user_1_match_start, 'end': user_1_match_end});
+  
+    $.ajax({
+  
+        url: url,
+  
+        success: function(data) {
+  
+            data = JSON.parse(data);
+  
+            if(data.error){
+  
+                alert(data.error);
+  
+                return;
+  
+            }
+  
+
+  
+            if(where == 'code_box_2') {
+  
+                var name_span_clicked = $(span_clicked).attr('name');
+  
+                var scroll_position=-1;
+  
+                $('[name="code_box_2"]').find('span').each(function(){
+  
+                    var attr = $(this).attr('name');
+  
+                    if (typeof attr !== typeof undefined && attr !== false && attr == name_span_clicked) {
+  
+                        $(this).css('background-color',"#FF0000");       
+  
+                    }
+  
+                });
+  
+                $('[name="code_box_1"]').find('span').each(function(){
+  
+                    var attr = $(this).attr('name');
+  
+                    if (typeof attr !== typeof undefined && attr !== false) {
+  
+                        attr= JSON.parse(attr);
+  
+                        if(attr['start'] == user_1_match_start && attr['end'] == user_1_match_end) {
+  
+                            $(this).css('background-color',"#FF0000");    
+  
+                        }      
+  
+                    }  
+  
+                }); 
+  
+                $('[name="code_box_1"]').scrollTop(0);
+  
+                var scroll_position=0;
+  
+                $('[name="code_box_1"]').find('span').each(function(){
+  
+                    if ($(this).css('background-color')=="rgb(255, 0, 0)") {
+  
+                        scroll_position = $(this).offset().top-$('[name="code_box_1"]').offset().top;
+  
+                        return false;
+  
+                    } 
+  
+                });
+  
+                $('[name="code_box_1"]').scrollTop(scroll_position);
+  
+            }
+  
+
+  
+            else if(where == 'code_box_1') {
+  
+                var to_append='';
+  
+                $.each(data, function(i,match){
+  
+                    to_append += '<li class="ui-menu-item"><div tabindex="-1" class="ui-menu-item-wrapper" onclick=getMatchesForClickedMatch(event,'+user_1_match_start+','+ user_1_match_end+',"popup","'+ color+ '","","'+match[0]+'",'+match[1]+');>'+ match[0]+' &lt;version:'+match[1]+'&gt;</div></li>';                        
+  
+                });
+  
+                to_append = $.parseHTML(to_append);
+  
+                $("#popup_to_show_matches_id").empty().append(to_append);
+  
+                var x = event.pageX;
+  
+                var y = event.pageY; 
+  
+                $('#popup_to_show_matches_id').css('display', 'block');
+  
+                var width = $('#popup_to_show_matches_id').width();
+  
+                $('#popup_to_show_matches_id').css('top', y+5);
+  
+                $('#popup_to_show_matches_id').css('left', x-width/2.00);
+  
+
+  
+            } 
+  
+
+  
+            else if(where == 'popup') {
+  
+                jQuery.ajaxSetup({async:false});
+  
+                $('[name="user_id_2"]', form2).val('{"user_id":"'+popup_user_2+'","version":'+popup_version_user_2+'}');
+  
+                setUserSubmittedCode('user_id_2');
+  
+                $('[name="code_box_1"]').find('span').each(function(){
+  
+                    var attr = $(this).attr('name');
+  
+                    if (typeof attr !== typeof undefined && attr !== false) {
+  
+                        attr= JSON.parse(attr);
+  
+                        if(attr['start'] == user_1_match_start && attr['end'] == user_1_match_end) {
+  
+                            $(this).css('background-color',"#FF0000");    
+  
+                        }      
+  
+                    }  
+  
+                });
+  
+                $.each(data, function(i,match){
+  
+                    if(match[0] == popup_user_2 && match[1] == popup_version_user_2) {
+  
+                        $.each(match[2], function(j, range){
+  
+                            $('[name="code_box_2"]').find('span').each(function(){
+  
+                                var attr = $(this).attr('name');
+  
+                                if (typeof attr !== typeof undefined && attr !== false) {
+  
+                                    if((JSON.parse($(this).attr("name")))["start"] == range["start"] && (JSON.parse($(this).attr("name")))["end"] == range["end"]) {
+  
+                                        $(this).css('background-color',"#FF0000");    
+  
+                                    }      
+  
+                                }
+  
+                            });
+  
+                        });
+  
+                    }                    
+  
+                });
+  
+                $('[name="code_box_2"]').scrollTop(0);
+  
+                var scroll_position=0;
+  
+                $('[name="code_box_2"]').find('span').each(function(){
+  
+                    if ($(this).css('background-color')=="rgb(255, 0, 0)") {
+  
+                        scroll_position = $(this).offset().top-$('[name="code_box_2"]').offset().top;
+  
+                        return false;
+  
+                    } 
+  
+                });
+  
+                $('[name="code_box_2"]').scrollTop(scroll_position);
+  
+                jQuery.ajaxSetup({async:true});
+  
+            }   
+  
+        },
+  
+        error: function(e) {
+  
+            alert("Could not load submitted code, please refresh the page and try again.");
+  
+        }
+  
+    })
+  
+}
+  
+
 function toggleUsersPlagiarism() {
    var form = $("#gradeables_with_plagiarism_result");
    var form2 = $("#users_with_plagiarism");