2017 Fall

RNA web demo




12/05/2017 Tue

Meeting with Prof. Huang and Dezhong, on the project of RNA sequence pairing. RNA paring for pseudoknot-free mode is perfectly improved in linear solution. Next step is to optimize different types of crossing, from $O(n^3)$ to $O(n^6)$, to linear.
The group also needs a web demo for visual illustration, especially for beam tunning. So I took the task for web development. Everything needs to study from the very beginning.

Back to subcontents RNA web demo

12/06/2017 Wed

Check RNA_visual at Dezhong’s file on ironcreek: ssh . Then copy them to my local:

scp -r /Users/zhangyilin/0_pipi/LKB_OSU/Research/RNA

Borrow the source code from Vienna RNAfold WebServer. I need to modify many contents then deploy html file to my own webpage on engr:

# at OSU
scp /Users/zhangyilin/0_pipi/LKB_OSU/Research/RNA/web_demo/RNA_pair_web.html
# out of OSU
scp -r /Users/zhangyilin/0_pipi/LKB_OSU/Research/RNA/web_demo/rearranged_results/

Back to subcontents RNA web demo

12/07/2017 Thu


graph LR

Back to subcontents RNA web demo

12/08/2017 Fri

  • Use canvas in html5 to draw arcs for the pairing demostration.
      //get canvas object
      var canvas = document.getElementById("myCanvas");
      //check if current explorer support Canvas object, to avoid sytax error in some html5-unfriendly explorers.
          //get corresponding CanvasRenderingContext2D object(pen)
          var ctx = canvas.getContext("2d");  
          ctx.beginPath();                    //starting drawing a path
          ctx.moveTo(p1.x, p1.y);     //assign the start position of drawing
          //draw an arc of radius r, tangent with 2 sides consisted by p1 to (x0,y0) and (x0,y0) to p2.
          ctx.arcTo(x0, y0, p2.x, p2.y, r);    
          //or, draw a line from p1 to p2
          ctx.strokeStyle = color;            //set arc to a color assigned by a string color
  • Here is the example: image for arc trial with canvas arc function

Back to subcontents RNA web demo

12/10/2017 Sun

In Dezhong’s README, data are listed like this:

Original data (sequences):


Contrafold result:

Vienna result:

Linear Parser result using Contrafold model:

Linear Parser result using Vienna model:

Finishing, rearrangement of pairing, put all the results of a single sequence (#4 of 16s, for example) into a data file, named combine_16s.seq04.
There are always 1656 lines(seq*2 + ref*2 + cf*2 + vn*2 + linearcf*206*4 + lineavnf*206*4) in each data file if category of beams is 206 (1,2,..200,300,..,800).

The structure of the file is:

seq * 2 lines           ----->  L1
ref * 2 lines           ----->  L3
cf  * 2 lines           ----->  L5
vn  * 2 lines           ----->  L7
linearcf.beam001 * 4 lines  ----->  L11 (with 2 lines of information above)
lineavnf.beam001 * 4 lines  ----->  L16 (with 2 lines of information above)
linearcf.beam002 * 4 lines
lineavnf.beam002 * 4 lines
linearcf.beam00i * 4 lines  ----->  L(8*i+3) (with 2 lines of information above), if i > 200, L[(i/100+198)*8+3]
lineavnf.beam00i * 4 lines  ----->  L(8*i+7) (with 2 lines of information above), if i > 200, L[(i/100+198)*8+7]


Back to subcontents RNA web demo

12/11/2017 Mon

Think about methods to make javascript to read data files like combine_16s.seq04 to draw graph.

Back to subcontents RNA web demo

12/12/2017 Tue

jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

描述: 使用一个HTTP GET请求从服务器加载数据。
It’s an abbreviation of ajax, equalent to:

  url: url,
  data: data,
  success: success,
  dataType: dataType


jQuery.get('http://localhost/foo.txt', function(data) {
    var myvar = data;

ps: jQuery.get()=$.get()


element: a pair of tags and all those between it

  • has closing tag: <h1>, <button>, <a>, <div>, <body>, <html>
  • closing tag is optional: <p>, <option>;
  • no closing tag: <br>, <img>

attribute: in the openning tag(class, id, style, title, lang)

class 属性可以多用 class=” “ (引号里面可以填入多个class属性)
id 属性只能单独设置 id=” “(只能填写一个,多个无效)

jQuery selector:

element selector $("p")
id selector $(#id)
class selector $(.class)

Back to subcontents RNA web demo

12/13/2017 Wed

Solved an interested problem: When I use $.get(), the URL should be an open access domain, otherwise there will be an error No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access..
The browser usually allows a request in the same origin for security reasons. CORS is designed for cross-domain request. Or simply without CORS:

  • If I want to $.get() a file on server, the html file should also be run on the server.
  • If I want to $.get() a file on github, I can run html both locally or on server.
   // jQuery...

is equivalent to

   // jQuery...

Back to subcontents RNA web demo

12/14/2017 Thu

Use json.dump(a:b) in python and $.getJSON(URL,function(data){...}) in js, to make file data reable for html.

But I cannot pass variables out in this getJSON.
This happens because that callback function (function(data) {…}) runs later when the response comes back…because it’s an asynchronous function. Instead use the value once you have it set, like this: …

After finishing all the configuration, I can draw 4 beautiful graphs for a default data file(a specific sequence) on the webpage.
Transfer html, js,,, and data file pairing_for_js to server:

scp /Users/zhangyilin/0_pipi/LKB_OSU/Research/RNA/web_demo/
scp /Users/zhangyilin/0_pipi/LKB_OSU/Research/RNA/web_demo/demo_myScript.js
scp /Users/zhangyilin/0_pipi/LKB_OSU/Research/RNA/web_demo/demo_json+canvas.html
scp -r /Users/zhangyilin/0_pipi/LKB_OSU/Research/RNA/web_demo/pairing_for_js/
scp /Users/zhangyilin/0_pipi/LKB_OSU/Research/RNA/web_demo/

My demo is available on I sent an email to my boss for my update.

Back to subcontents RNA web demo

12/26/2017 Tue

Start working at midnight. Add the functionality of slide bar value call back, then extract seq series and seq number from seletion.
Learn the usage of <span>, interesting.
The final demo can be found at my OSU homepage.

Finish the work at 5:50am.

Back to subcontents RNA web demo

12/28/2017 Thu

As boss asked, I need to:

  • Change the max value on slide bar(from 206 to 800) and triple the length of the bar.
    • I add hash marks and labels on the bar, however, currently, no browser fully supports these features. Firefox doesn’t support hash marks and labels at all, for example, while Chrome supports the hash marks but doesn’t support labels. Source
  • Add sequence names to corresponding dropdown manu items.
    • Dezhong updated an Mathews.clean.txt on his RNA_visual directory. There are 3867 sequences(11571 lines) in the file. I need to match all the 27 (22 in 16s and 5 in 23s) by searching sequence string. Results are attached later.
  • Add PPV (precision), Sensitivity (recall), F-score, and number of (predicted) pairs for each plot under subtiles.
    • $P=\frac{\#\ of\ correctly\ predicted pairs}{\#\ of\ predicted\ pairs}$
    • $R=\frac{\#\ of\ correctly\ predicted\ pairs}{\#\ of\ gold\ pairs}$
    • $F=\frac{2PR}{P+R}$
    • At first I calculate these 3 parameters from the number of my 3 tpye of pairs(wrong, hit, missing). Actually the number $hit+missing\neq \#\ of\ ref\ pairs$, because there is a slip in pairing(use agree as equivalence).
      • For example, (1,30) in result and (1,29),(2,30) in ref, finally (1,30) will be counted as blue(hit) while no grey pair.
      • So I need to pass more para into json format data file for js, detailed in JSON file layout.
  • Update agree function from Dezhong’s fix in my for correct blue pair statistics, after 1.5h voice call. We both had a bug in counting correct-predicted pairs. Now we get the same corresponsive P/R/F result with Dezhong.
  • Update algorithm names and performance names, I need to fix text position in canvas, which is time consuming:
    • P/R/F -> PPV/Sensitivity (F)
    • CONTRAfold -> CONTRAfold MFE
    • Vienna -> Vienna RNAfold
    • Linear CONTRAfold -> LinearFold-C
    • Linear Vienna -> LinearFold-V
  • Future task: scalable vector graph(SVG)
domain page

I figured out that if I want to load a default .html file on my domain instead of using an url ending with .html, I just need to rename the page file to index.html.

Sequence names
16s-seq01: 1490 archiveII/16s_Z.mays.ct
16s-seq02: 1552 archiveII/16s_B.subtilis.ct
16s-seq03: 1542 archiveII/16s_E.coli.ct
16s-seq04: 1474 archiveII/16s_H.volcanii.ct
16s-seq05: 1995 archiveII/16s_D.melanogaster.ct
16s-seq06: 1793 archiveII/16s_T.gondii.ct
16s-seq07: 954 archiveII/16s_H.sapiens.mito.ct
16s-seq08: 1537 archiveII/16s_B.burgdorferi.ct
16s-seq09: 1564 archiveII/16s_A.pyrophilus.ct
16s-seq10: 1525 archiveII/16s_P.staleyi.ct
16s-seq11: 1552 archiveII/16s_C.psittaci.ct
16s-seq12: 950 archiveII/16s_C.elegans.ct
16s-seq13: 1804 archiveII/16s_F.ananassa.ct
16s-seq14: 1562 archiveII/16s_T.maritima.ct
16s-seq15: 1474 archiveII/16s_C.reinhardtii.chloro.ct
16s-seq16: 1974 archiveII/16s_M.polymorpha.ct
16s-seq17: 1492 archiveII/16s_A.fulgidus.ct
16s-seq18: 1870 archiveII/16s_H.sapiens.ct
16s-seq19: 1800 archiveII/16s_S.cerevisiae.ct
16s-seq20: 1497 archiveII/16s_P.occultum.ct
16s-seq21: 1200 archiveII/16s_C.reinhardtii.mito.ct
16s-seq22: 1452 archiveII/16s_G.intestinalis.ct
23s-seq01: 2968 archiveII/23s_H.pylori.ct
23s-seq02: 2915 archiveII/23s_T.thermophilus.ct
23s-seq03: 2927 archiveII/23s_B.subtilis.ct
23s-seq04: 2923 archiveII/23s_S.aureus.ct
23s-seq05: 2904 archiveII/23s_E.coli.ct
JSON file for js


{"result":[N,seq,                                                           ----->index: 0-1
        [P,R,F],cf_missing, cf_hit, cf_wrong,                                   ----->index: 2-5
        [P,R,F],vn_missing, vn_hit, vn_wrong,                                   ----->index: 6-9
        [P,R,F],linearcf_b01_missing, linearcf_b01_hit, linearcf_b01_wrong,     ----->index: 10-13
        [P,R,F],linearvn_b01_missing, linearvn_b01_hit, linearvn_b01_wrong,     ----->index: 14-17
        [P,R,F],linearcf_b02_missing, linearcf_b02_hit, linearcf_b02_wrong,     ----->index: 18-21 (8*i+2~8*i+5,i is the beam number)
        [P,R,F],linearvn_b02_missing, linearvn_b02_hit, linearvn_b02_wrong,     ----->index: 22-25 (8*i+6~8*i+9,i is the beam number)
        [P,R,F],linearcf_b800_missing, linearcf_b800_hit, linearcf_b800_wrong,  ----->index: 1238-1241 [(i/100+198)*6+2~(i/100+198)*6+5,i is the beam number which is > 200]
        [P,R,F],linearvn_b800_missing, linearvn_b800_hit, linearvn_b800_wrong,  ----->index: 1242-1245 [(i/100+198)*6+6~(i/100+198)*6+9,i is the beam number which is > 200]
The new pairing data files will listed by seq number(16s * 22, and 23s *5), 27 files in total.
Structure of js drawing
$.getJSON(seqFile, function(data,status) {
        drawCircle(); // open circle;
        drawCircleMarks();// scale adjustable in para 'range'
            drawArc() in for loop;

Back to subcontents RNA web demo

12/29/2017 Fri

New Requst:

“one more easy thing you could do on your current version is:

  • add one plot (for both contrafold row and vienna row) where the y axis shows P, R, F and the x axis is the beam size.
  • add another plot (for both contrafold row and vienna row) where the x axis is P and y axis is R.

These two tasks can be described as P/R/F-beam plot and R-P plot. I have no clue about ploting in HTML. Research shows avaiable methods are below:

  • :sleeping: CanvasJS.Chart, ‘trial’ watermark in free version
    <script src=""></script>
  • :ok_hand: google.charts, powerful and open source
    <script type="text/javascript" src=""></script>
Ways to convert a number to a string in JavaScript
  1. a = String(n)
  2. a = n.toString()
  3. a = ““+n, so combining num with string is easy new_str = 'hello world' + num
SVG drawing

Research a lot for SVG draw with javascript.

  • How to draw an arc in SVG like .arcTo() in canvas?
    • use to draw arc, such as ``
        M = moveto                   // necessary
        L = lineto                   // necessary
        Q = quadratic Belzier curve  // not used
        A = elliptical Arc           // good!
    • Spent much time and learned, A is better than Q, and A is very similar with canvas.arcTo():
        d="M x1 y1 A rx ry, x-axis-rotation, large-arc-flag,sweep-flag, x2 y2"
        // arc is a part of an eclipse with rx,ry and rotated, starts from (x1,y1) and ends at (x2,y2), small arc if large-arc-flag== 0, colokwise arc if sweep-flag == 1
        // arc is tangent with (xa,ya)-(cx,cy) and (cx,cy)-(xb,yb) and radius r, may not start from (xa,ya) and may not end at (xb,yb).
  • How to manipulate data for a <path> element from script? Solution Source
    • use path.setAttribute() or use SVG DOM
    • set the whole path with path.setAttribute('d','M150,0 L150,100 200,300 Z')
    • set partial value like path.pathSegList.getItem(2).y = -10
    • generate a path with SVGPathElement
        var _l = 10;
        var pathEl = document.createElementNS("", "path");
        pathEl.setAttribute('d','M'+_l+' 100 Q 100  300 '+_l+' 500' );
        ISVGPathSegArcAbs retVal = object.createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag)
  • place your <script> elements at the bottom of your svg document. Alternatively, you can create a callback function at the top of your document that is only invoked when the rest of the document is ready:

Back to subcontents RNA web demo

12/30/2017 Sat

New Request:
  • (☆☆☆☆☆) In P/R/F-beam plot, remove the F-score series. It became a P/R-beam plot.
  • (★★★★☆) In P/R-beam plot, add a switch to let the user choose between log-scale and linear-scale. (default: log)
    • Time consuming, but it feels good when I finish it. The position of button is annoying. Finally I remove the designated size of the button.
    • Since x is number in log view, the dataTable is easy, while x is string in linear view, so I need another dataTable ready for log/linear view switch.
  • (★★★☆☆) In P/R-beam plot, show both PPV and sensitivity instead of just one with mouse hover. ‘This might be difficult.’
    • Learnt a concept named tooltips, displaying point values when a mouse hover on an element/button/plot point.
    • In google charts lib, tooltips are defaulted as x_value \n y_series_label: y_value. Now I want to show all series in 1 x value and show the x label.
      multi series in tooltips in plot
    • Find an example on google developers after a really long search, in the section of multi-domain chart. But true solution is found in the example of London Olympics Medals frame from another google chart guide-Tooltips, along with the definition of Options Configuration:
        var options = {
        colors: ['#FFD700', '#C0C0C0', '#8C7853'], // assign colors for each series, or do it in 'series'
        focusTarget: 'category',  // This line makes the entire category's tooltip active. 'category' - Focus on a grouping of all data points along the major axis. Correlates to a row in the data table.
    • Here is the result I’m satisfied with:
      customized tooltips in R-P plot
  • (★★★★★) In P/R-beam plot, use “b=1” instead of “1” in mouse hover(tooltip).
    • I can use the category option to list all series on hover, but x-label(domain label) is still missing from default.
  • (★☆☆☆☆) In P/R-beam plot, add a PPV line and a Sensitivity line for CONTRAfold/Vienna.
    • Done before requirement received in email.
  • (☆☆☆☆☆) In R-P plot, connect the points with a line, change .ScatterChart() to LineChart() .
  • (★★★★☆) In R-P plot, show beam size, besides the sens and ppv, in mouse hover.
    • Edit a lot for the tooltip(mouse hover) in R-P plot. If I want to add beam size, which is not shown in the graph, displayed in tooltip on each point, I need to creat a customized HTML as tooltip string.
    • Not only to add 'p': {'html': true} in creating .addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}), to add tooltip: { isHtml: true } in options, but also remember to add focusTarget: 'category' in options, this line makes the entire category’s tooltip active, for both HTML-based customized tooltip and default tooltip display in multi-series.
      Highlight for editing tooltips with html format in google chart
    • Scripting an HTML is annoying.
  • (★★★★★)(4 hours) In both plots, highlight the corresponding points when the user slides the sliding bar.
    • Find a solution in the section of Customizing individual points in google chart guide-Customizing Points.
    • Read carefully and try millions times for the individual point display.
    • When it is .Linechart(), points are not shown by default, even there is an assigned customized individual point. Only adding sth like pointSize: 7, in options can make points displayed. In fact, all the points will be that size, which is ulgy in a line chart, I have to minimize the pointSize to resume a clear line chart. However, this size is also the one for hover-highlighted point size. So there is a trade-off. Sigh…(This problem doesn’t appear one day later even no pointSize given. ???)
    • Customizing individual point in P/R-beam plot goes well. Spent some time in choosing point style(star/sides/dent, ect.). However, I spent 3 hours in debugging individual point customization in R-P plot. Why?
      • In P/R-beam plot, beam starts from 1 and rowIndex starts from 0. Everything is OK.
          dataTable.setValue(rowIndex-1, 2, style);   
          // [beam, P, null, R, null, P_fix, R_fix] --> [beam, P, style, R, null, P_fix, R_fix]
          dataTable.setValue(rowIndex-1, 4, style);   
          // [beam, P, style, R, null, P_fix, R_fix] --> [beam, P, style, R, style, P_fix, R_fix]
      • In R-P plot, beam starts from 1 and rowIndex starts from 1, there is a fixed point (CONTRAfold MFE) at the top of row, so beam data starts from 1.
          dataTable.setValue(rowIndex, 2, style); 
          // [beam, P, null, R, null, P_fix, R_fix] --> [beam, P, style, R, null, P_fix, R_fix]
          dataTable.setValue(rowIndex, 4, style); 
          // [beam, P, style, R, null, P_fix, R_fix] --> [beam, P, style, R, style, P_fix, R_fix]

        There was an error running this code. I spent a lot of time to figure it out: rowIndex is a string instead of a number, which comes from document.getElementById("beamslidebar").value (what??? beamslidebar is a slide bar using standard ‘range’). rowIndex will remain a string, not be converted to a number, until operated with a math (like rowIndex+=1). New find!

Back to subcontents RNA web demo

12/31/2017 Sun

My own update
  • Adjust the position of plots to left, solving the problem of overlaping, by transparent ground with backgroundColor: { fill:'transparent' } in options. Re-write the function plot_411, combine two dataTable instead of generating two seperately.
    • If I want to display pure linear x axis(beam size) from 1-800, I can use the same dataTable for both log and linear view.
    • If I want to enlarge the range of major range (1-200) and shrink (300-800), I can map 300->201,400->201,..,800->206, and make (1-206) linear. Then use ticks:[{v:201,f:'300'},...] in hAxis iption to make x label right.
  • Regroup functions to a bettle structure.
  • Solve the unchecked item in log, ‘(★★★★★) In P/R-beam plot, use “b=1” instead of “1” in mouse hover(tooltip).’
    • In order to list all series on hover, as well as x-label(domain label), I need to abandon the default category display. The only way I figured out is customized HTML as tooltip string, the same as used in R-P plot.
        data_C_1.addRow([beam, createCustomHTMLContent_1(beam,
                                    data_C_1.getColumnLabel(7), P, R, P_fix, R_fix), 
                         P, , R, , P_fix, R_fix]);

      The second element in a row is a tooltip, added as a column header data_C_1.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

    • In the function createCustomHTMLContent_1, I editted a new html line, including series line color, with times of trails of hex colors.
    • Here is the result I’m satisfied with:
      customized tooltips in PR-beam plot

Back to subcontents RNA web demo

01/01/2018 Mon

Problem shooting

My call to google.visualization.DataTable() returns “Uncaught TypeError: google.visualization.DataTable is not a constructor(…)”.
On the first click I got the error and no chart, but on the second click the page would display the chart correctly without any errors.
The same problem discussed on Google Groups.
My function was ` google.charts.setOnLoadCallback(load_draw_go(d,R,circleScale,halfOpen));`
It should be:

google.charts.setOnLoadCallback(function(){load_draw_go(d,R,circleScale,halfOpen)});    // draw graphs and plots on the right
function load_draw_go(d,R,circleScale,halfOpen){}   // define the function

By naming your callback function and giving it parameters, you are actually calling it at that time and only the result of that function call will be passed in to the setOnLoadCallback. If you call your draw function before the library is loaded, then many things will be undefined, such as the DataTable constructor. By just naming the callback function (e.g. just drawChart), you are passing in a reference to that function. So if you want to pass parameters to your drawChart function, you need to wrap that call in another function declaration, like this:

google.charts.load(‘current’, {packages: [‘corechart’, ‘line’]);
google.charts.setOnLoadCallback( function() { drawChart(loc) });
function drawChart(loc) { … }

Back to subcontents RNA web demo

01/02/2018 Tue

  • Meeting with Prof. Huang and Dezhong, discussed a little about the web demo, then asked me to read about R&E ($n^6$) and D&P ($n^5$), then run the corresponding software ? and NUPACK.
  • Prof. Huang felt the webpage may freeze when we slide to much. I explained with console log that each move on slide bar, beam value is updated then data file loaded and graphs/plots are rendered.
  • At home, I tried two methods to speed up the demo for frequent silde.
    • I tried to load data at the beginning, save it to a global variable (pairingList). Then the draw module and plot module can use the current pairingList to finish the job. Codes are updated and rearranged. But I found that the beam value is always the same as last click, not from current click.
    • After variable monitoring in console log, I got a conclusion, which seemed to be in my sight days ago, that $.getJSON(url) and $.get(url) are executed after the whole page is loaded. Here is the example. Line 59 is the first run in console, with previous seq length referred by beam value, then line 38, and finally line 52, with the correct seq length referred by the current beam value. d
    • So I cannot use $.getJSON(url) or $.get(url) to save data globally. I can only manipulate the data from file within the function upon $.getJSON(url).
    • The last option I have, to avoid lagging refresh speed on webpage, is to change the attr event of slide bar(range type in input tag of html5) from oninput=function() to onchange=function(). The former is triggered simultaneously when we slide the bar (value inputted but mouse not released), while the latter is triggered when we finish sliding the bar (mouse click released).
  • (★★★★☆)(3 hours) Spent much time to enable re-draw when clicking on a chart/plot point with certain beam size. Digging in Google guide-event. The solution is addListener on select event.
          // The select handler. Call the chart's getSelection() method
      function selectHandler() {
          var selectedItem = thisChart.getSelection()[0];
          if (selectedItem) {
          //var value = data.getValue(selectedItem.row, selectedItem.column);
          BeamFromBar = selectedItem.row + 1;                             // 1-206, need to be converted to 1-200,300,400,500,600,700,800
          document.getElementById("beamslidebar").value = BeamFromBar;    // update the position on beam size slide bar
          if (BeamFromBar > 200) BeamFromBar = (BeamFromBar - 200) * 100 + 200;       
          // do other things, like re-draw
      // Listen for the 'select' event, and call my function selectHandler() when the user selects something on the chart., 'select', selectHandler);

Back to subcontents RNA web demo
Back to subcontents Pseudoknot

01/04/2018 Thu

  • Have trouble getting files from server end (forbidden:403), resume to get files from github end.

Back to subcontents RNA web demo

01/17/2018 Wed

  • learn from encorechow’s innotator project
  • check ip for flop and ironcreek with ip addr show. I can only ping ironcreek within flop, not from home directly.
server ip addr show)/ in, ping able) addr show and ping) able in flop) able) ping able)
  • learn flask for web develop(request and response)
    1. install flask in virtual environment
       virtualenv --system-site-packages ~/.virtualenvs/flask
       workon flask
       pip install flask
    2. version of flask 0.12.2
    3. logger in flask
    4. auto-submit an upload form when a file is selected (skip clicking submit button)
       $('#file').change(function() {

      or, in the form with onchange event :

       <form action="upload.php" method="post" enctype="multipart/form-data">
           <input type="file" name="filename" onchange="form.submit()">
    5. enctype="multipart/form-data" in form tag is very important
    6. However, the submission method to flask will make the whole page refresh. So I need ajax

Back to subcontents RNA web demo

01/18/2018 Thu

  • explore communication between flip and ironcreek
  • code location is /scratch/dengde/fastdecode/fastcky_rerun/build_beamckypar, we need to run a script ~dengde/ to use specific version of gcc.
  • line break in the attr placeholder in : use ` ` instead of `\n`
  • terminologies in flask.(source)
    • PythonDecorato
    • view function: return string, no int or float
    • Variable in <> of @app.route() should be te same as the parameter view function
    • url_for() pass the name of a view function as string parameter, return the url of the corresponding function.
    • good material: flask设计思路

Back to subcontents RNA web demo

01/19/2018 Fri

  • What’s the difference between python and flask run ```bash $ export $ flask run

01/21/2018 Sun

  • Check if the uploaded file is allowed:
    • html form: ```

      ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])
      def allowed_file(filename):
          return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

Back to subcontents RNA web demo

01/29/2018 Mon

  • Finish data transmission between flip and ironcreek with socket in python.
graph LR
V(<b>browser</b><br>web.engr.ore.../onid<br>>|visit  <b>but</b> <br>no data upload|P(<b>./public_html/</b><br>html,css,js<br>)
P-->|in|B(<b>flip/access</b><br><b>host</b>: flip3.engr.oreg...<br><b>ip</b>:

P-->|in|A(<b>ironcreek</b><br><b>host</b>:ironcreek.eecs...<br><b>ip</b>:<br><br><b>do the math</b>)


subgraph server data flow
subgraph client off campus
classDef green fill:#9f6,stroke:#333,stroke-width:2px;;
classDef orange fill:#f48c42,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;
class A,V,B,D green
%%class P orange

01/30/2018 Wed

read files with jQuery in local html, there is an error: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. I found a solution onlie:

Just to be explicit - Yes, the error is saying you cannot point your browser directly at file://some/path/some.html

  • Python 2

    If you have Python installed… Change directory into the folder where your file some.html or file(s) exist using the command cd /path/to/your/folder Start up a Python web server using the command python -m SimpleHTTPServer

    This will start a web server that hosts your entire directory listing, which will be made accessible through the following URL: http://localhost:8000

    This approach is built in to any Python installation.

  • Python 3

    Do the same steps, but use the following command instead python3 -m http.server

Back to subcontents RNA web demo

02/02/2018 Fri


    participant C as client off campus
    participant S1 as flip/access
    participant S2 as ironcreek
%note left of C: visit
note over C: visit web.engr.../~onid
C->>S1:customized seq
alt file upload
        C->>S1: file request
    else name & seq input
        C->>S1: text request
note over S1: write seq to file save SeqName
S1->>S2: call prog with file name
note over S2: run linear C/V  write to 'pairing'
S2->>S1:return the message 'done'
note over S1: render a new page with 'pairing'
S1->>C: redirect to the new page
note over C: Wow!

Back to subcontents RNA web demo