SGPreview

Posted on September 2, 2013 by sgun — No Comments ↓

SGPreview
SGPreview provides preview for tabular data.

While implementing the front-end of the TALOS Computation Server, I felt the necessity of providing the users with a preview window that will show the content of the tabular data file.

During data analysis, I often use commands such as head, tail on UNIX and R. We also have the option to display the csv file using open office/ MS Excel or better R studio. But these options are either time consuming or limited to the beginning/end of the file.

Solution was implementing a small plug-in that would display pre-defined amount of rows and hide others. Scrolling would be activated by moving the mouse to the top or the bottom of the table.

The following is a demo of SGPreview.

So how to use this plug-in?

Go ahead and clone the project.

git clone https://github.com/selcukgun/SGPreview.git

1	git clone https://github.com/selcukgun/SGPreview.git

Add the script SGPreview.js and style sheet SGPreview.css as shown in lines 1-2.
Create a div to hold the preview window as shown in line 4.
Adjust the position and width of the holder as shown in line 6.

<script type="text/javascript" src="/scripts/SGPreview/SGPreview.js"></script> 
<link href="/scripts/SGPreview/SGPreview.css" rel="stylesheet" type="text/css">

<div id="previewHolder"></div>

<style>
#previewHolder{         
   position: relative;         
   width: 500px;     
}
</style>

<style>

#previewHolder{

position: relative;

width: 500px;

}

</style>

Initialize the plug-in as shown in line 12. The first parameter is the caption of the preview window, and the second one is number of rows shown.
Provide a sample data set in the format shown in line 13.
Feed the data set into the preview object
Display the preview (it’s hidden by default)
You can highlight the rows and columns as shown in line 16.

<script type="text/javascript">
var myPreview = $("#previewHolder").SGPreview("File Preview",5);         
   sampleData = {"content":[["i","j","cij","uij"],["r1n1p","r1n1pp","","60"],["r1n2p","r1n2pp","","60"],            ["r1n3p","r1n3pp","","60"],["r1n1pp","r1n2p","1","20"],["r1n1pp","r1n3p","8","20"],["r1n1pp","r1n3p","8","20"],["r1n1pp","r1n3p","8","20"],["r1n1pp","r1n3p","8","20"],["r1n1pp","r1n3p","8","20"],["r1n1pp","r1n3p","8","20"],["r1n1pp","r1n3p","8","20"],["r1n1pp","r1n3p","8","20"],["r1n2pp","r1n3p","5","20"]],"hash":"15249da664d105774ceb73baf823b2b1"};     
   myPreview.newData(sampleData);     
   myPreview.show();     
   myPreview.highlight([1,6],[2,3]); 
</script>

var myPreview = $("#previewHolder").SGPreview("File Preview",5);

sampleData = {"content":[["i","j","cij","uij"],["r1n1p","r1n1pp","","60"],["r1n2p","r1n2pp","","60"], ["r1n3p","r1n3pp","","60"],["r1n1pp","r1n2p","1","20"],["r1n1pp","r1n3p","8","20"],["r1n1pp","r1n3p","8","20"],["r1n1pp","r1n3p","8","20"],["r1n1pp","r1n3p","8","20"],["r1n1pp","r1n3p","8","20"],["r1n1pp","r1n3p","8","20"],["r1n1pp","r1n3p","8","20"],["r1n1pp","r1n3p","8","20"],["r1n2pp","r1n3p","5","20"]],"hash":"15249da664d105774ceb73baf823b2b1"};

myPreview.newData(sampleData);

myPreview.show();

myPreview.highlight([1,6],[2,3]);

</script>

That’s it!

SGPreview supports easy vertical scrolling. I may consider implementing horizontal scrolling another time.