Merge pull request #1 from i2bc/fixes

Bugs Better handle when no db found in db list Ranking header offset fix GOC GOC labels alignment Proper hide!/show GOC Limit GOC width as proportion Add antismash link (minimal for now)
i2bc · Mar 17, 2024 · fa0d1e1 · fa0d1e1
2 parents 01d5bc6 + 0a9f4a0
commit fa0d1e1
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 88 deletions.
diff --git a/js/dotplot.js b/js/dotplot.js
@@ -24,20 +24,6 @@ init_pars( {
 	'breakid': '',
 	'strict': 10
 });
-const goc = {
-    left: 80,
-    right: 40,
-    width: 200,
-    "top": 20,
-    bottom: 40,
-    height: 200
-};
-const dot_margin = {
-    "top": 30,
-    right: 60,
-    bottom: goc.top + goc.bottom,
-    left: goc.left + goc.right
-};
 var margin = {};
 
 var scales = {};
@@ -99,6 +85,20 @@ function draw_plot() {
         if (win_height == 0) {
                 win_height = Math.floor( $( window ).height() * height_percent );
         }
+	const goc = {
+		left: 80,
+		right: 40,
+		width: Math.min(win_width * 0.2, 200),
+		"top": 20,
+		bottom: 40,
+		height: Math.min(win_height * 0.2, 200)
+	};
+	const dot_margin = {
+		"top": 30,
+		right: 60,
+		bottom: goc.top + goc.bottom,
+		left: goc.left + goc.right
+	};
 	var offset = $("#canvas").offset();
 
 	var stats = {
@@ -487,9 +487,8 @@ function draw_plot() {
 	if (get_par( 'show_goc' ) == false) {
 		gocx_container.style({ "display": "none" });
 		gocy_container.style({ "display": "none" });
-	}
-
-        // FIlter data
+	} else {
+        // Filter data
         const goc1 = data.gocs[get_par("sp1")].filter(function(d) { return d.pos >= get_par( 'start1' ) && d.pos <= get_par( 'end1' ) });
         const goc2 = data.gocs[get_par("sp2")].filter(function(d) { return d.pos >= get_par( 'start2' ) && d.pos <= get_par( 'end2' ) });
 
@@ -517,68 +516,70 @@ function draw_plot() {
             .attr("stroke-width", "2")
             .attr("fill", "none");
 
-	// Add GOC X axes
-	const gocx_axes = gocx_container.append("g")
-		.attr( "name", "gocx_axes" )
-		.attr( "class", "svg_axes" )
-
-	const gocx_xAxis = d3.svg.axis().scale( scales.x ).orient( "bottom" );
-	gocx_axes.append("g")
-		.attr("transform", "translate(" + 0 + "," + goc.height + ")")
-		.attr("class", "x axis")
-		.call(gocx_xAxis);
-
-	const gocx_yAxis = d3.svg.axis().scale( gocx_scale ).orient( "left" );
-	gocx_axes.append("g")
-		.attr("class", "y axis")
-		.call(gocx_yAxis);
-	const gocx_yAxis_right = d3.svg.axis().scale( gocx_scale ).orient( "right" );
-	gocx_axes.append("g")
-		.attr("transform", "translate(" + (win_width - margin.left - margin.right) + "," + 0 + ")")
-		.attr("class", "y axis")
-		.call(gocx_yAxis_right);
-
-	// Add GOC Y axes
-	const gocy_axes = gocy_container.append("g")
-		.attr( "name", "gocy_axes" )
-		.attr( "class", "svg_axes" )
-
-	const gocy_yAxis = d3.svg.axis().scale( scales.y ).orient( "left" );
-	gocy_axes.append("g")
-		.attr("class", "y axis")
-		.call(gocy_yAxis);
-
-	const gocy_xAxis = d3.svg.axis().scale( gocy_scale ).orient( "bottom" );
-	gocy_axes.append("g")
-		.attr("transform", "translate(" + 0 + "," + (win_height - margin.top - margin.bottom) + ")")
-		.attr("class", "y axis")
-		.call(gocy_xAxis);
-
-	const gocy_xAxis_top = d3.svg.axis().scale( gocy_scale ).orient( "top" );
-	gocy_axes.append("g")
-		.attr("class", "y axis")
-		.call(gocy_xAxis_top);
-
-// #### EDIT IN PROGRESS               
-        // Add GOC labels
-	var texts = svg.append("g");
-
-	texts.append("text")
-		.attr("class", "y_goc label")
-		.attr("text-anchor", "middle")
-		.attr("x", 180)
-		.attr("y", 485)
-		.text( "GOC" );
-	texts.append("text")
-		.attr("class", "x_goc label")
-		.attr("text-anchor", "middle")
-                .attr("y", margin.left - 40)
-		.attr("x", -567)
-		.attr("transform", "rotate(-90)")
-		.text( "GOC" );
-// #####                
+		// Add GOC X axes
+		const gocx_axes = gocx_container.append("g")
+			.attr( "name", "gocx_axes" )
+			.attr( "class", "svg_axes" )
+
+		const gocx_xAxis = d3.svg.axis().scale( scales.x ).orient( "bottom" );
+		gocx_axes.append("g")
+			.attr("transform", "translate(" + 0 + "," + goc.height + ")")
+			.attr("class", "x axis")
+			.call(gocx_xAxis);
+
+		const gocx_yAxis = d3.svg.axis().scale( gocx_scale ).orient( "left" );
+		gocx_axes.append("g")
+			.attr("class", "y axis")
+			.call(gocx_yAxis);
+		const gocx_yAxis_right = d3.svg.axis().scale( gocx_scale ).orient( "right" );
+		gocx_axes.append("g")
+			.attr("transform", "translate(" + (win_width - margin.left - margin.right) + "," + 0 + ")")
+			.attr("class", "y axis")
+			.call(gocx_yAxis_right);
+
+		// Add GOC Y axes
+		const gocy_axes = gocy_container.append("g")
+			.attr( "name", "gocy_axes" )
+			.attr( "class", "svg_axes" )
+
+		const gocy_yAxis = d3.svg.axis().scale( scales.y ).orient( "left" );
+		gocy_axes.append("g")
+			.attr("class", "y axis")
+			.call(gocy_yAxis);
+
+		const gocy_xAxis = d3.svg.axis().scale( gocy_scale ).orient( "bottom" );
+		gocy_axes.append("g")
+			.attr("transform", "translate(" + 0 + "," + (win_height - margin.top - margin.bottom) + ")")
+			.attr("class", "y axis")
+			.call(gocy_xAxis);
+
+		const gocy_xAxis_top = d3.svg.axis().scale( gocy_scale ).orient( "top" );
+		gocy_axes.append("g")
+			.attr("class", "y axis")
+			.call(gocy_xAxis_top);
+
+		// Add GOC labels
+		var texts = goc_container.append("g");
+
+		// Horizontal GOC label
+		texts.append("text")
+			.attr("class", "y_goc label")
+			.attr("text-anchor", "middle")
+			.attr("x", (margin.left * 0.8))
+			.attr("y", win_height - margin.bottom * 0.2)
+			.text( "GOC" );
+
+		// Vertical GOC label
+		texts.append("text")
+			.attr("class", "x_goc label")
+			.attr("text-anchor", "middle")
+			.attr("y", -margin.left * 0.3)
+			.attr("x", win_height - margin.bottom * 0.8)
+			.attr("transform", "rotate(90)")
+			.text( "GOC" );
+	}
 
-	// When the graph is drawn, prepare a file to dowload it
+	// When the graph is drawn, prepare a file to download it
 	update_download_link( svg_style );
 	update_stats( stats );
 }
@@ -950,11 +951,10 @@ function show_hide_button( parname, elementid, label ) {
 		}
 		update_permalink();
 
-                if (elementid == "goc_lines") {
-                    console.log("Rebuild dotplot after after toggling GOC");
-                    draw_plot();
-                }
-
+		if (elementid == "goc_lines") {
+			console.log("Rebuild dotplot after after toggling GOC");
+			draw_plot();
+		}
 	});
 }
 

diff --git a/js/index.js b/js/index.js
@@ -1,16 +1,32 @@
+//import { check_data_error } from "./utils.js";
+
 function print_db() {
 	pars = {};
 	pars.type = 'databases';
 	var str = "in print_db";
 	console.log(str);
 	console.log(format_url(urls.get_data, pars));
 	$.getJSON( urls.get_data, pars, function(data) {
+            error_msg = check_data_error(data);
+            if (error_msg) {
+                $( "#databases" ).append( error_msg );
+            } else {
 		print_db_table(data);
+            }
 	}).fail(function(){
 		console.log("Failed databases retrieval");
 	});
 }
 
+function check_data_error( data ) {
+    error_msg = ""
+    if ("outcome" in data && data["outcome"] == false) {
+        console.log("Error occurred: " + data["details"]);
+        error_msg = $("<p />").text("An error occurred: " + data["message"] + ". Check the console for more details.");
+    }
+    return error_msg;
+}
+
 function get_dbs() {
 	var dbs = {};
 

diff --git a/js/ranking.js b/js/ranking.js
@@ -1,5 +1,6 @@
 var cached_data = {};
 var cached_data_ajax = null;
+synteruptor_version = "1.0";
 
 init_pars( {
 	"sp1" : "",
@@ -42,6 +43,47 @@ function prepare_csv(data) {
 	$("#csv_link").trigger( "click" );
 }
 
+// Handle antismash download link
+function to_antismash(data) {
+	tool = {
+		"name": "synteruptor",
+		"version": synteruptor_version,
+		"description": "Synteny breaks explorer",
+	};
+	records = [];
+	for (var br of data) {
+		subregions = {
+			"label": "break_" + br["breakid"],
+			"start": br["loc_start1"],
+			"end": br["loc_end1"],
+		}
+		record = {
+			"name": br["gpart1"],
+			"subregions": subregions,
+		}
+		records.push(record);
+	}
+	json_data = {
+		"tool": tool,
+		"records": records,
+	}
+	return JSON.stringify(json_data, null, 4);
+}
+
+function update_antismash_link(data) {
+	$('#antismash_link').attr( "href", "" );
+	$('#antismash_link').attr( "download", "" );
+	json_data = to_antismash(data);
+	$('#antismash_link').attr('download', 'breaks_table_antismash.json');
+	$('#antismash_link').attr('href', 'data:application/csv;charset=utf-8,' + encodeURIComponent(json_data));
+}
+
+function prepare_antismash_link(data) {
+	update_antismash_link(data);
+	$("#antismash_link").off( "click" );
+	$("#antismash_link").trigger( "click" );
+}
+
 // Links
 function break_link(b) {
 	link_pars = {
@@ -144,7 +186,7 @@ function update_table(data) {
 		}
 		$table.append($body_tag);
 		$table.show();
-		$table.stickyTableHeaders( {'fixedOffset': $("#entete")} );
+		$table.stickyTableHeaders();
 		$table.tablesorter();
 
 		$('tr').hover(function(e) {
@@ -216,6 +258,12 @@ function update_page(init_data) {
 			.on( "click", function() {
 			prepare_csv( data );
 		});
+		$( "#antismash_link" )
+			.attr( "href", "" )
+			.attr( "download", "" )
+			.on( "click", function() {
+			prepare_antismash_link( data );
+		});
 	}
 }
 

diff --git a/lib_db.php b/lib_db.php
@@ -9,7 +9,7 @@
 // Check variable type (convert if necessary)
 function parseVal($dat) {
     foreach ($dat as $key => $val) {
-        if ( ctype_digit( $val ) ) {
+        if ( ctype_digit((string)$val) ) {
             $dat[ $key ] = intval( $val );
         } elseif (is_numeric($val)) {
             $dat[ $key ] = floatval( $val );
@@ -30,8 +30,11 @@ function die_msg($message = '', $details = '') {
 function get_available_dbs_list( $all = true , $authorised = array()) {
 	global $dbdir;
 	$files = scandir($dbdir);
-	// remove dirs
 	$hfiles = array();
+	if (!$files) {
+		return $hfiles;
+	}
+	// remove dirs
 	for ($i = 0 ; $i < count($files); $i++) {
 		if ($files[$i] == '.'
 			or $files[$i] == '..'
@@ -461,8 +464,21 @@ function get_ranking_data($dbh) {
 	$limit = ' LIMIT 10000';
 	$condition = join(' AND ', $cond);
 	$order = ' ORDER BY ' . join(', ', $ord);
-	$query = 'SELECT *, (real_size2 * 100.0 / (real_size1 + real_size2)) AS diff FROM breaks_ranking LEFT JOIN breaks_all ON breaks_ranking.breakid=breaks_all.breakid WHERE ' . $condition . $order . $limit;
+	$select = 'SELECT breaks_ranking.*, breaks_all.*';
+	$select .= ', (real_size2 * 100.0 / (real_size1 + real_size2)) AS diff ';
+	$select .= ', gleft1.loc_start AS loc_start1';
+	$select .= ', gright1.loc_end AS loc_end1';
+	$select .= ', gleft2.loc_start AS loc_start2';
+	$select .= ', gright2.loc_end AS loc_end2';
+	$from = 'FROM breaks_ranking ';
+	$joins = 'LEFT JOIN breaks_all ON breaks_ranking.breakid=breaks_all.breakid ';
+	$joins .= 'LEFT JOIN genes gleft1 ON (pnum_all_left1 = gleft1.pnum_all and breaks_all.sp1 = gleft1.sp) ';
+	$joins .= 'LEFT JOIN genes gright1 ON (pnum_all_right1 = gright1.pnum_all and breaks_all.sp1 = gright1.sp) ';
+	$joins .= 'LEFT JOIN genes gleft2 ON (pnum_all_left2 = gleft2.pnum_all and breaks_all.sp2 = gleft2.sp) ';
+	$joins .= 'LEFT JOIN genes gright2 ON (pnum_all_right2 = gright2.pnum_all and breaks_all.sp2 = gright2.sp) ';
+	$query = "$select $from $joins WHERE $condition $order $limit";
 	return get_db_data($dbh, $query, $vals);
+	return $query;
 }
 
 /************************************************************

diff --git a/ranking.php b/ranking.php
@@ -56,7 +56,8 @@
 				<button id="reset_sort">Reset values</button>
 			</div>
 		</div>
-		<a id="csv_link" href="">Download Table (CSV)</a><br />
+		<a id="csv_link" href="">Download Table (CSV)</a>
+		<a id="antismash_link" href="">Download antismash link (JSON)</a><br />
 		<span><span id="nbreaks">No</span> breaks</span>
 		<div id="loading" style="display:inline;"></div>
 		<div id="ranking_box">