$(function() { $('#subcell_pathway').selectmenu({ /*appendTo: appendElem,*/ width: 400, position: { collision: 'flip', }, }).on('selectmenuchange', function() { $.getJSON('/subcell/metabolic_ajax.php?location_id='+$(this).val(), function(data) { $('#subcell_metabolic').html(data.pathway).data('colors', data.colors).data('borders', data.borders); init_metabolic_pathway(); }); }).trigger('selectmenuchange'); function init_metabolic_pathway() { var $el = $('#pathwaySeadragon'); if (!$el.length) return; // Seadragon var OsViewer = OpenSeadragon({ id: "pathwaySeadragon", prefixUrl: "/images_static/", preserveViewport: true, showHomeControl: false, mouseNavEnabled: true, showZoomControl: true, showFullPageControl: true, gestureSettingsMouse: {dblClickToZoom: true, clickToZoom: false}, }); $.get($el.attr('src'), function(svg) { var $svg = $(svg); //var ensg_id = $table.attr('ensg_id'); $svg.find('g.subsystem text').remove(); // Location bg-colors $svg.find('g.enz path').attr('fill', '#fff'); $.each($('#subcell_metabolic').data('colors'), function(ensg_id, color) { if (!$svg.find('g.'+ensg_id+' path').length) { console.log(ensg_id+' not found'); } $svg.find('g.'+ensg_id+' path').attr('fill', color); }); // SCV style $.each($('#subcell_metabolic').data('borders'), function(ensg_id, border) { $svg.find('g.'+ensg_id+' path').each(function() { let poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon'); poly.setAttribute('points', "59,1 59,20 40,1"); poly.setAttribute('fill', '#00ffff'); poly.setAttribute('transform', $(this).attr('transform')); $(poly).insertAfter($(this)); }); }); // Load seadragon var org_w = 1 * $svg.attr('width'); var org_h = 1 * $svg.attr('height'); var tSize = 1000; OsViewer.open({ width: org_w, tileSource: { height: org_h, width: org_w, tileSize: tSize, getTileUrl: function () { return '/images_static/pixel.php?w=' + tSize + '&h=' + tSize; } } }); // Add SVG overlays var overlay = OsViewer.svgOverlay(); $svg.children().each(function () { overlay.node().appendChild(this); }); // Add pointers for toobox buttons & gene labels $("div[title='Zoom in']").css({'cursor': 'pointer'}); $("div[title='Zoom out']").css({'cursor': 'pointer'}); $("div[title='Toggle full page']").css({'cursor': 'pointer'}); $('g.subsystem path').attr('stroke', '#fff'); $('g.enz').css({'cursor': 'pointer'}).each(function() { var gene = $(this).find('text').text(); $(this).attr('title', gene+' - Click for details'); }); // Navigate to gene page on gene label click overlay.onClick(overlay.node(), function(e) { var $g = $(e.originalTarget).closest('g'); $.get('/subcell/metabolic_ajax.php?ensg_id='+$g.attr('class').match(/ENSG\d+/)[0], function(data) { $('#pathwayGene').html(data); }); //window.location.href = '/' + $g.attr('class').match(/ENSG\d+/)[0]; }); // Hover highlight $('g.enz').on("mouseover", function () { $('.' + $(this).attr('class').match(/ENSG\d+/)[0]).addClass('pathwayHighlight'); }).on("mouseout", function () { $('.' + $(this).attr('class').match(/ENSG\d+/)[0]).removeClass('pathwayHighlight'); }); // Legend and gene info var ctrl = $('#pathwaySeadragonLegend').clone()[0]; OsViewer.addHandler('full-screen', function(e) { if (e.fullScreen) { OsViewer.addControl(ctrl, {anchor: OpenSeadragon.ControlAnchor.NONE}); } else { OsViewer.removeControl(ctrl); } }); }, 'text'); } });