interactive-mining/interactive-mining-backend/madoap/src/templates/madappview.html

{% autoescape None %}
{% extends "madappbar.html" %}
{% block jsimports %}
<title>{{app['title']}}</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<link rel="stylesheet" type="text/css" href="{{ static_url("tcgrey.css") }}">
<link rel="stylesheet" type="text/css" href="{{ static_url("comments.css") }}">
<script type="text/javascript" src="{{ static_url("tc.js") }}"></script>
<script type="text/javascript" src="{{ static_url("accessURL.js") }}"></script>
{% block loadfun %}
<script type="text/javascript">

var vis;
var exparams= new Array();
var datavisualizations={{app['datavisualizations']}};

function load(){
    var v= document.getElementsByName('vis');
    v[0].checked=true;
    vis=v[0].id
    {% for ex in app["examples"] %}
        exparams["{{ex["name"]}}"]={{ex["paramarray"]}};
    {% end %}
}

</script>
{% end %}
<script type="text/javascript">

var query_data={};
var mode=0;
var errormsg="Error";

function toggletype(){
    var enable='auto';
    var disable='custom';
    if(document.getElementById('custom').checked){
        enable='custom';
        disable='auto';
        document.getElementById('example').value="empty";
    }
        var v=document.getElementsByName(enable);
        for(var i=0;i<v.length;i++){
            if (v[i].type!='radio') v[i].disabled=false;
        }
        var v=document.getElementsByName(disable);
        for(var i=0;i<v.length;i++){
            if (v[i].type!='radio') v[i].disabled=true;
        }
}

//Show query when in DEBUG mode
{% if settings.DEBUG %}
function viewquery(){
    //if document.getElementById('qbutton').innerHTML;
    var re = /Show/i;
    if(document.getElementById('qbutton').innerHTML.match( re )){
        document.getElementById('qbutton').innerHTML=document.getElementById('qbutton').innerHTML.replace(re,"Hide");
        document.getElementById('qtext').innerHTML="{{app["qtext"]}}";
    }
    else{
        document.getElementById('qbutton').innerHTML=document.getElementById('qbutton').innerHTML.replace("Hide","Show");
        document.getElementById('qtext').innerHTML="";
    }
}
{% end %}

google.load("visualization", "1", {packages:["corechart"]});
{% for vis in app["visualisations"] %}
    {% if vis["name"] not in ("areachart", "barchart", "columnchart", "linechart", "piechart", "scatterchart") %}
        {% if vis["name"]=="termcloud" %}
            google.load("visualization", "1");
        {% else %}
            google.load('visualization', '1', {'packages': ['{{vis["name"]}}']});
        {% end %}
    {% end %}
{% end %}

var postCompletionCallback = function(outcome, visname) {
        document.getElementById("response").innerHTML="Response";
        mode=0;
        if (outcome==''){
            document.getElementById("response").innerHTML="<b>No results returned.</b><br>";
        }
        if (outcome.slice(0,errormsg.length)==errormsg){
            document.getElementById("response").innerHTML="<b>Response Message:</b><br>"+outcome;
        }
        else {
            {% if 'template' in app %}
            document.getElementById("_template_div_").style.visibility="visible";
            {% end %}
            var data = new google.visualization.DataTable(JSON.parse(outcome),0.5);
            query_data[visname]=data;
            interpolateData(visname,data);
            document.getElementById("response").innerHTML="";
            drawChart(visname, data);
        }
};

function interpolateData(queryname, data) {
            if (datavisualizations[queryname][0]['name']=='motionchart') {

                data.sort(1);
                var sampleRowTail=[];
                for (var i=2; i<data.getNumberOfColumns(); i++){
                    if (data.getColumnType(i)=='string') sampleRowTail.push('')
                    else sampleRowTail.push(0)
                }

                var prevdict={};
                var datalen=data.getNumberOfRows()
                for (var i=0; i<datalen; i++) {
                    var axis=data.getValue(i,0);
                    var date=data.getValue(i,1);
                    
                    if ( !(axis in prevdict) ) {
                        prevdict[axis]=getDate(date);
                        continue;
                    }
                    
                    var newd=getDate(date);
                    var tmpdate=prevdict[axis].slice(0);
                    var datesdif=getDatesDif(tmpdate, newd);
                    for (var i1=1; i1<datesdif; i1++) {
                        tmpdate=getNextDate(tmpdate);
                        data.addRow([axis, getDateStr(tmpdate)].concat(sampleRowTail));
                    }
                    prevdict[axis]=newd;
                }
            }
}

function getDateStr(d) {
   if (d[0]==='w') {
        if (d[2]<10) return d[1]+'W0'+d[2];
        else return d[1]+'W'+d[2];
   } else {
        if (d[2]<10) return d[1]+'-0'+d[2];
        return d[1]+'-'+d[2];
   }
}

function getNextDate(d) {
   if (d[0]==='w') {
       if (d[2]<52) return ['w', d[1], d[2]+1];
       else return ['w', d[1]+1, 1];
   } else {
       if (d[2]<12) return ['m', d[1], d[2]+1];
       else return ['m', d[1]+1, 1];
   }
}

function getDate(d) {
    if (d.search('W')!=-1) {
        return ['w', Number(d.slice(0,4)), Number(d.slice(d.length-2,d.length))]
    } else {
        var dt=new Date(d);
        return ['m', dt.getFullYear(), dt.getMonth()+1]
    }
}

function getDatesDif(d1, d2) {
    if (d1[0]!=d2[0]) return -1
    if (d1[0]==='m') {
        return d2[1]*12+d2[2]-(d1[1]*12+d1[2]);
    } else if (d1[0]==='w') {
        return d2[1]*52+d2[2]-(d1[1]*52+d1[2]);
    } else {
        return -1
    }
}


function sendQuery() {
    var params ='';
    for (el in parameters){
        if (params!='')
            params+='\n;'
        params += el+"="+parameters[el];
    }
//    alert(params);
    mode=1;   
    /*if (visobj){
        document.getElementById('vis-div').innerHTML='';
        visobj=false;
    }*/
//    alert("send one");
    {% for i in app["datavisualizations"] %}
    document.getElementById('{{i}}').innerHTML='<b>Loading .....</b><br> <img border="0" vspace="12" alt="loading" src="{{ static_url("ajax-loader.gif") }}">';
    accessURL("/{{settings.APPDIRNAME}}/{{app["link"]}}/{{i}}", params,"POST", postCompletionCallback, '{{i}}');
    {% end %}
}

function viewChart() {
    view=1;
    if(mode==2){
        drawChart('query', query_data['query']);
        view=0;
    }
    else if (mode==0){
        document.getElementById("response").innerHTML="No data to visualise";
        view=0;
    }
    else{
        document.getElementById("response").innerHTML+="</br>Waiting for data....";
    }
}



function drawChart(queryname, data) {
    if (mode==1 || data==null)
        return;
    
    var visualization;
    var options={};
    var foundvis=null;
    var queryvis=datavisualizations[queryname][0]['name'];

    if (queryname==='query' && vis!==undefined) queryvis=vis;

    for (var i=0; i<datavisualizations[queryname].length; i++) {
        if (datavisualizations[queryname][i]['name']===queryvis){
            foundvis=datavisualizations[queryname][i];
            break;
        }
    }
    
    if (foundvis==null) foundvis=datavisualizations[queryname][0];
    if ('options' in foundvis) options=JSON.parse(JSON.stringify(foundvis['options']));

    switch(queryvis) {
        {% for k,v in settings.viswidgetmap.iteritems() %}
            case '{{k}}':
                visualization = new {{v}}(document.getElementById(queryname));
                break;
        {% end %}
        default:
            break;
    }

    if (queryvis!='table') {
        if (options['height']==undefined) options['height']= 600;
        if (options['width']==undefined)  options['width']= document.getElementById(queryname).offsetWidth;
        if (queryvis=='motionchart') {
            document.getElementById(queryname).style.width=options['width']+'px';
        }
    }
    visualization.draw(data, options);
}
        
var parameters= new Array();

function onexample(example){
    if (example=='empty') {
       clearvis();
       return;
    }
    parameters= new Array();
    for (var el in exparams[example]){
       parameters[el]=exparams[example][el];
    }
    clearvis();
    sendQuery();
}

function clearvis(){
    document.getElementById("response").innerHTML="";
    document.getElementById('query').innerHTML='';
}

function oncustom(){
    parameters=new Array();
    var v=document.getElementsByName("custom");
    for(var i=0;i<v.length;i++){
//        alert(v[i].type)
        if (v[i].type=="text" || v[i].type=="select-one"){
            parameters[v[i].id]=v[i].value;
        }
    }
//    for (var el in parameters){
//        alert("Name:"+el+" Value:"+parameters[el]);
//    }
    clearvis();
    sendQuery();
}

function setvis(vs){
    vis=vs;
//    alert(vis);
    clearvis();
    drawChart('query', query_data['query']);
    /// delete vis if data load chart
}
</script>
{% end %}

{% block service %}


			<h3>{{app["title"]}}</h3>
            {% if settings.DEBUG %}
            <a id="qbutton" href="#" onclick="viewquery()">Show query</a>
            <p id="qtext"><p>
            {% end %}
	          
                <form onsubmit="return false;">
                     
                    
                     <table width="95%" border="0" >
                         <tbody>
                            <tr>
                                <td align="left">
                                      <h4>Set parameters</h4>
                     <table  border="0" >
                         <tbody>
                            <tr>
                               <td width="250px"> <input type="radio" id="custom" name="inputmode" maxlength="2048" onclick="toggletype();">
                                   <label for="custom">Custom parameters</label>
                                   </td>
                               <td>
                        <table  cellspacing="0" cellpadding="0" border="0" >
                         <tbody>
                            
                   {% for param in app["params"] %}
                        <tr>
                        <td align="left">{{param["name"]}}:
                        </td>
                        <td align="left">
                            {% if 'values' in param %}
                                <select id="{{param["name"]}}" name="custom" disabled>
                                    {% if type(param['values'])==str %}
                                        {% for i in settings.mConnection.cursor().execute(param['values']) %}
                                             <option value="{{i[0]}}">{{''.join(i)}}</option>
                                        {% end %}
                                    {% else %}
                                        {% for i in param['values'] %}
                                             <option value="{{i}}">{{i}}</option>
                                        {% end %}
                                    {% end %}
                                </select>
                            {% else %}
        <!--onKeyDown="if(event.keyCode==13) oncustom();" -->
                                <input type="text" id="{{param["name"]}}" name="custom" maxlength="2048" size=
                                       {% if "textsize" in param %}
                                            "{{ param["textsize"] }}"
                                        {% else %}
                                            "10"
                                        {% end %}
                                disabled/>
                            {% end %}
                        </td></tr>
                    {% end %}
                    </tbody>
                    </table>
                        </td>
                            </tr>
                            <tr><td></td><td ><input type="submit"  name="custom" value="Apply" onclick="oncustom();" disabled/></td></tr>
                            <tr>
                                <td> <input type="radio" id="auto"  name="inputmode" maxlength="2048" onclick="toggletype();" checked>
                                    <label for="auto">Examples</label>
                                   </td>
                                <td>
                                    <select id="example" name="auto" onchange="onexample(document.getElementById('example').value);">
                                            <option value="empty">choose</option>
                                            {% for example in app["examples"] %}
                                                 <option value="{{example["name"]}}">{{example["paramstring"]}}</option>
                                            {% end %}
                                    </select>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                                </td>
                                <td align="right">
                    <h4>Visualisation</h4><br>
                    {% for vis in app["visualisations"] %}
                        <label for="{{vis["name"]}}">{{vis["name"]}}</label>
                        <input type="radio" id="{{vis["name"]}}" name="vis" maxlength="2048" onclick="setvis('{{vis["name"]}}');"/><br>
                    {% end %}
                    </td>
                    </tr>
                        </tbody>
                    </table>
                  


                </form>

<h3></h3>
                </br>
                <p id="response">                    
                </p>
                {% if 'template' in app %}
                    <div id="_template_div_" style="width: 100%; height: 80%; visibility: hidden;">
                        {{ app['template'] }}
                    </div>
                {% else %}
                    <div id="query" style="width: 95%; height: 80%;"></div>
                {% end %}

{% end %}