Some years ago, I heard a presentation about implementation of pdb viewer in spotfire in JCUP. It was really impressive for me because spotfire can not handle PDB files. You know, spotfire is one of the popular tool for data visualization. I like the tool.
Recently I found unique library for spotfire named ‘JSViz’. The library is not native library but user can get it from community site. To use JSViz, spotfire can communicate JS library such as D3.js, highcharts.js etc. 😉
Lots of examples are provided from the site.
I thought “Hmm… If there is pdb viewer written in javascript, I can implement pdb viewer in spotfire”.
So, I tried it.
Install jsviz at first.
And then wrote pdb_loader_script using template. I used pv.js for PDB loader.
JSViz gets data from spotfire as sfdata. sfdata is JSON format. If reader who needs more details for the data structure, I recommend read original document. ( or comment the post )
My data format is following.
#, pdb_id, ligandname
1,1ATP, ANP
And used pdb_id and ligandname for sfdata.
My strategy is….
1. Build external pdb supply server. ( simple http server written in python )
2. Access the url and get pdb file from the server and render it ( using jsviz ).
Following code is JSViz sample code. The code render protein as cartoon and ligand as ball and stick.
/*
Copyright (c) 2016 TIBCO Software Inc
THIS SOFTWARE IS PROVIDED BY TIBCO SOFTWARE INC. ''AS IS'' AND ANY EXPRESS OR
IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
SHALL TIBCO SOFTWARE BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
//////////////////////////////////////////////////////////////////////////////
// #region Drawing Code
var pv = require("bio-pv");
//
//
// Main Drawing Method
//
function renderCore(sfdata)
{
if (resizing) {
return;
}
// Log entering renderCore
log ( "Entering renderCore" );
// Extract the columns
var columns = sfdata.columns;
// Extract the data array section
var chartdata = sfdata.data;
// count the marked rows in the data set, needed later for marking rendering logic
var markedRows = 0;
for (var i = 0; i < chartdata.length; i++) {
if (chartdata[i].hints.marked) {
markedRows = markedRows + 1;
}
}
var width = window.innerWidth;
var height = window.innerHeight;
//
// Replace the following code with actual Visualization code
// This code just displays a summary of the data passed in to renderCore
//
//displayWelcomeMessage ( document.getElementById ( "viewer" ), sfdata );
displaypdb(document.getElementById('js_chart'), chartdata);
wait ( sfdata.wait, sfdata.static );
};
//
// #endregion Drawing Code
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
// #region Marking Code
//
//
// This method receives the marking mode and marking rectangle coordinates
// on mouse-up when drawing a marking rectangle
//
function markModel(markMode, rectangle)
{
// Implementation of logic to call markIndices or markIndices2 goes here
}
//
// Legacy mark function 2014 HF2
//
function mark(event)
{
}
//
// #endregion Marking Code
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
// #region Resizing Code
//
var resizing = false;
window.onresize = function (event) {
resizing = true;
if ($("#js_chart")) {
}
resizing = false;
};
//
// #endregion Resizing Code
//////////////////////////////////////////////////////////////////////////////
//
// This is a sample visualization that indicates that JSViz is installed
// and configured correctly. It is an example of how to draw standard
// HTML objects based on the data sent from JSViz.
//
function displaypdb( div, chartdata ){
var html;
div.innerHTML = "
<div id='viewer'>pdb</div>
";
var options = {
background: 'lightgrey',
width: 800,
height: 600,
antialias: true,
quality : 'medium'
};
// insert the viewer under the Dom element with id 'gl'.
var viewer = pv.Viewer(document.getElementById('viewer'), options);
var pdb_id = ( chartdata[0].items[0] );
var ligand_name = ( chartdata[0].items[1] );
var url = 'http://localhost:9000/'+pdb_id+'.pdb'
$.ajax( url )
.done(function(data) {
var structure = pv.io.pdb(data);
var ligand = structure.select({rnames : [ ligand_name ]});
viewer.ballsAndSticks('ligand', ligand);
viewer.cartoon('protein', structure, { color : color.ssSuccession() });
viewer.centerOn(structure);
});
};
Go next. Following code is simple HTTP server. In the same folder, place pdbfiles for supply.
import os
import sys
import http.server
import socketserver
PORT = 9000
class HTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
def end_headers(self):
self.send_header('Access-Control-Allow-Origin', '*')
http.server.SimpleHTTPRequestHandler.end_headers(self)
def server(port):
httpd = socketserver.TCPServer(('', port), HTTPRequestHandler)
return httpd
if __name__ == "__main__":
port = PORT
httpd = server(port)
try:
httpd.serve_forever()
except KeyboardInterrupt:
print("\n...shutting down http server")
httpd.shutdown()
sys.exit()
This is very brief introduction. Also to use JSViz, it can get user event like a clicking the ligand, residue etc….
It seems very interesting. But do I need to develop new visualization in spotfire ? ;-p
ref
https://community.tibco.com/wiki/javascript-visualization-framework-jsviz-and-tibco-spotfire
https://biasmv.github.io/pv/
