チェンジセット 233 : SPARQLBuilderWWW/web

差分発生行の前後
無視リスト:
更新日時:
2015/02/09 18:05:31 (10 年 前)
更新者:
lenz
ログメッセージ:

GETから開く機能及びセーブ（GETを指定して開きなおす機能）の追加
各種お化粧

論文執筆時のキャプチャ用版

パス:
SPARQLBuilderWWW/web
ファイル:
1 追加
3 変更

凡例:

変更なし
追加
削除

  • SPARQLBuilderWWW/web/newgui.html

    r232 r233  
    1010        </head> 
    1111        <body> 
    12             <div id="SPARQLBUILDER"> 
    13             </div> 
     12                <div id="wrap" style="width:30%;"> 
     13                        <div id="SPARQLBUILDER"> 
     14                        </div> 
     15                </div> 
    1416        </body> 
    1517</html> 

  • SPARQLBuilderWWW/web/newsparqlbuilder.css

    r232 r233  
    77} 
    88 
    9 .SBTOPButton{ 
    10         margin-right: 1em; 
     9.SBTopButton{ 
     10        margin: 0.5em 1em 0.5em 0; 
     11        -webkit-border-radius: 7; 
     12        -moz-border-radius: 7; 
     13        border-radius: 7px; 
     14        border: none; 
     15        color: #ffffff; 
     16        background: hsl(200, 50%, 75%); 
     17        padding: 5px 15px 5px 15px; 
     18        cursor: pointer; 
     19} 
     20 
     21.SBTopButton:hover{ 
     22        background: hsl(200, 50%, 85%); 
    1123} 
    1224 
    … …  
    4052 
    4153.SBModalContents .SBSelects select{ 
    42         width: 30%; 
     54        width: 28%; 
    4355        height: 2em; 
    4456} 
    … …  
    4658.SBModalContents .SBSelects input{ 
    4759        display: inline-block; 
    48         width: 7.5%; 
     60        width: 13.5%; 
    4961        margin: 0 1% 0; 
    5062        height: 2em; 
     63        -webkit-border-radius: 3; 
     64        -moz-border-radius: 3; 
     65        border-radius: 3px; 
     66        border: none; 
     67        color: #ffffff; 
     68        background: hsl(0, 50%, 75%); 
     69        padding: 3px 5px 3px 5px; 
     70        cursor: pointer; 
    5171} 
    5272 
    … …  
    6787        display: none; 
    6888        float: left; 
    69         margin-top: 0.3em; 
     89        margin-top: 1px; 
    7090        margin-left: 0.5em; 
     91        height: 2em; 
     92        -webkit-border-radius: 3; 
     93        -moz-border-radius: 3; 
     94        border-radius: 3px; 
     95        border: none; 
     96        color: #ffffff; 
     97        background: hsl(0, 50%, 75%); 
     98        padding: 3px 5px 3px 5px; 
     99        cursor: pointer; 
    71100} 
    72101 
    … …  
    96125.SBModalContents .SBSelectedPath{ 
    97126        float: left; 
     127        padding: 10px; 
    98128        text-align: center; 
    99129        word-wrap: break-word; 
    100130} 
    101131 
    102 .SBSelectedPath h2{ 
    103         color: #ffaaaa; 
     132.SBRootNode{ 
     133        margin: 0.5em; 
     134        margin-top: 1.5em; 
     135        -webkit-border-radius: 10; 
     136        -moz-border-radius: 10; 
     137        border-radius: 10px; 
     138        border: none; 
     139        background: hsl(40, 50%, 75%); 
     140        padding: 5px 15px 5px 15px; 
     141} 
     142 
     143.SBPathProperty{ 
     144        margin: 0.2em; 
     145} 
     146 
     147.SBPathNode{ 
     148        margin: 0.5em; 
     149        -webkit-border-radius: 10; 
     150        -moz-border-radius: 10; 
     151        border-radius: 10px; 
     152        border: none; 
     153        background: hsl(0, 0%, 85%); 
     154        padding: 5px 15px 5px 15px; 
     155} 
     156 
     157.SBLeafNode{ 
     158        margin: 0.5em; 
     159        -webkit-border-radius: 10; 
     160        -moz-border-radius: 10; 
     161        border-radius: 10px; 
     162        border: none; 
     163        background: hsl(150, 50%, 75%); 
     164        padding: 5px 15px 5px 15px; 
     165} 
     166 
     167.SBGenButton{ 
     168        margin: 1.5em; 
     169        -webkit-border-radius: 7; 
     170        -moz-border-radius: 7; 
     171        border-radius: 7px; 
     172        border: none; 
     173        color: #ffffff; 
     174        font-size: 1.2em; 
     175        background: hsl(200, 50%, 75%); 
     176        padding: 5px 15px 5px 15px; 
     177        cursor: pointer; 
     178} 
     179 
     180.SBGenButton:hover{ 
     181        background: hsl(200, 50%, 85%); 
    104182} 
    105183 
    … …  
    108186        text-align: center; 
    109187} 
     188 
     189.SBModalButton{ 
     190        display: inline-block; 
     191        width: 80%; 
     192        height: 26px; 
     193        -webkit-border-radius: 3; 
     194        -moz-border-radius: 3; 
     195        border-radius: 3px; 
     196        border: none; 
     197        color: #ffffff; 
     198        background: hsl(0, 50%, 75%); 
     199        padding: 3px 5px 3px 5px; 
     200        cursor: pointer; 
     201} 
     202 
     203.SBModalButton:hover{ 
     204        background: hsl(0, 50%, 85%); 
     205} 

  • SPARQLBuilderWWW/web/newsparqlbuilder.js

    r232 r233  
    1111var endclass = ""; 
    1212 
     13var defendpoint = ""; 
     14var defstartclass= ""; 
     15var defendclass = ""; 
     16 
    1317var jsontext = ""; 
    1418var pathobj = ""; 
    … …  
    2226        // 繝壹�繧ｸ縺ｮ繝代�繝�Κ蛻�ｒ霑ｽ蜉 
    2327        initparts(); 
     28 
     29        getParameter(); 
     30 
     31        if(defendpoint != "" && defstartclass != "" && defendclass != ""){ 
     32                openSPARQLBuilder(); 
     33        } 
     34 
    2435}); 
    2536 
    2637function initparts(){ 
    2738        var sbdiv = $('div#SPARQLBUILDER'); 
    28 // <input type="button" class="SBTopButton" value="Try with Sample" onclick="trySample()"> 
    29         var sbtop = '<div class="SBTopItems"><input type="button" class="SBTopButton" value="Open SPARQLBuilder" onclick="openSPARQLBuilder()"><br /><textarea class="SBSparqlArea" rows="10"></textarea><br /><input type="button" class="SBTopButton" value="Send SPARQL" onclick="sendSPARQL()"><input type="button" class="SBTopButton" value="Download Result" onclick="downloadResult()"></div>'; 
    30 // <input type="button" class="SBSaveESE" value="Save" onClick="openPermalink"> 
    31         var sbmodal = '<div class="SBModalView"><div class="SBModalContents"><div class="SBSelects"><select class="SBEndPointSelect"></select><select class="SBStartClassSelect"></select><select class="SBEndClassSelect"></select></div><div class="SBMessage"><div class="SBResult"><span class="SBPathnum"></span> Path<span class="SBPlural"></span> found.</div><div class="SBViewAll"><input type="button" value="View All" onClick="viewAll()"></div></div><div class="SBGraph"><div class="SBAjaxLoad"><div class="SBLoadIcon"><img src="images/ajax-loader.gif"></div></div></div><div class="SBSelectedPath"></div><div class="SBModalButtons"><input type="button" class="SBModalButton" value="Close" onclick="closeSPARQLBuilder()"></div></div>'; 
     39        var sbtop = '<div class="SBTopItems"><input type="button" class="SBTopButton" value="Open SPARQLBuilder" onclick="openSPARQLBuilder()"><input type="button" class="SBTopButton" value="Try with Sample" onclick="openSample(\'http://www.ebi.ac.uk/rdf/services/reactome/sparql\', \'http://www.biopax.org/release/biopax-level3.owl#Protein\', \'http://www.biopax.org/release/biopax-level3.owl#Pathway\')"><br /><textarea class="SBSparqlArea" rows="10"></textarea><br /><input type="button" class="SBTopButton" value="Send SPARQL" onclick="sendSPARQL()"><input type="button" class="SBTopButton" value="Download Result" onclick="downloadResult()"></div>'; 
     40        var sbmodal = '<div class="SBModalView"><div class="SBModalContents"><div class="SBSelects"><select class="SBEndPointSelect"></select><select class="SBStartClassSelect"></select><select class="SBEndClassSelect"></select><input type="button" class="SBSaveESE" value="PermaLink" onClick="openPermalink()"></div><div class="SBMessage"><div class="SBResult"><span class="SBPathnum"></span> Path<span class="SBPlural"></span> found.</div><input type="button" class="SBViewAll" value="View All" onClick="viewAll()"></div><div class="SBGraph"><div class="SBAjaxLoad"><div class="SBLoadIcon"><img src="images/ajax-loader.gif"></div></div></div><div class="SBSelectedPath"></div><div class="SBModalButtons"><input type="button" class="SBModalButton" value="Close" onclick="closeSPARQLBuilder()"></div></div>'; 
    3241 
    3342        sbdiv.html(sbtop); 
    … …  
    4251                event.stopPropagation(); 
    4352        }); 
    44  
    45         /* 
    46         $('#StartClassSelect').on('epcomplete', function(){ 
    47                 console.log("comp."); 
    48     }); 
    49         */ 
    5053 
    5154        loadEndPointList(); 
    … …  
    6669} 
    6770 
     71 
     72function getParameter() 
     73{ 
     74    if( 1 < window.location.search.length ) 
     75    { 
     76        var query = window.location.search.substring( 1 ); 
     77        var parameters = query.split( '&' ); 
     78 
     79        for( var i = 0; i < parameters.length; i++ ) 
     80        { 
     81            var element = parameters[ i ].split( '=' ); 
     82            if(decodeURIComponent( element[ 0 ] ) == "ep"){ 
     83                defendpoint = decodeURIComponent( element[ 1 ] ) 
     84            }else if(decodeURIComponent( element[ 0 ] ) == "st"){ 
     85                defstartclass = decodeURIComponent( element[ 1 ] ) 
     86            }else if(decodeURIComponent( element[ 0 ] ) == "en"){ 
     87                defendclass = decodeURIComponent( element[ 1 ] ) 
     88            } 
     89        } 
     90    } 
     91} 
     92 
     93 
    6894function openSPARQLBuilder(){ 
    6995 
    … …  
    76102        $('.SBModalContents .SBMessage').css('width', 200 + 'px').css('height', 30 + 'px'); 
    77103        $('.SBModalContents .SBGraph').css('width', (mvw - 201) + 'px').css('height', (mvh - 31) + 'px'); 
    78         $('.SBModalContents .SBSelectedPath').css('width', 200 + 'px').css('height', (mvh - 31 - 26) + 'px'); 
     104        $('.SBModalContents .SBSelectedPath').css('width', 180 + 'px').css('height', (mvh - 51 - 26) + 'px'); 
    79105        $('.SBModalContents .SBModalButtons').css('width', 200 + 'px').css('height', '26px'); 
    80106 
    … …  
    82108        $(".SBStartClassSelect").select2(); 
    83109        $(".SBEndClassSelect").select2(); 
     110 
     111        if(defendpoint != "" && defstartclass != "" && defendclass != ""){ 
     112 
     113                $('.SBStartClassSelect').on('lccomplete', function(){ 
     114                        $('.SBStartClassSelect').val(defstartclass); 
     115                        defstartclass = ""; 
     116                        $('.SBEndClassSelect').val(defendclass); 
     117                        defendclass = ""; 
     118 
     119                        $(".SBEndPointSelect").select2(); 
     120                        $(".SBStartClassSelect").select2(); 
     121                        $(".SBEndClassSelect").select2(); 
     122 
     123                        $('.SBStartClassSelect').unbind('lccomplete'); 
     124                }); 
     125 
     126                loadPathList(); 
     127 
     128                var eplist = $('.SBEndPointSelect option'); 
     129 
     130                if(eplist.length == 0){ 
     131                        $('.SBEndPointSelect').on('epcomplete', function(){ 
     132                                $('.SBEndPointSelect').val(defendpoint); 
     133                                defendpoint = ""; 
     134                                loadClassList(); 
     135                                $('.SBEndPointSelect').unbind('epcomplete'); 
     136                        }); 
     137                }else{ 
     138                        $('.SBEndPointSelect').val(defendpoint); 
     139                        defendpoint = ""; 
     140                        loadClassList(); 
     141                } 
     142        } 
    84143 
    85144        d3.select('.SBModalView').on("mousewheel", function(){ 
    … …  
    88147} 
    89148 
     149function openSample(ep, st, en){ 
     150        defendpoint = ep; 
     151        defstartclass = st; 
     152        defendclass = en; 
     153 
     154        openSPARQLBuilder(); 
     155} 
     156 
    90157function openPermalink(){ 
    91  
     158        var baseurl = location.href; 
     159        var spliturl = baseurl.split('?'); 
     160        var url = spliturl[0] + "?ep=" + encodeURIComponent(endpoint) + "&st=" + encodeURIComponent(startclass) + "&en=" + encodeURIComponent(endclass); 
     161 
     162        window.open(url); 
    92163} 
    93164 
    … …  
    122193                                } 
    123194                        } 
    124                         //$("#SBStartClassSelect").trigger(new $.Event('epcomplete')); 
     195                        $(".SBEndPointSelect").trigger(new $.Event('epcomplete')); 
    125196                }, 
    126197        }); 
    … …  
    153224                        $(".SBStartClassSelect").select2(); 
    154225                        $(".SBEndClassSelect").select2(); 
    155                         //$("#seclass").trigger(new $.Event('secomplete')); 
     226                        $(".SBStartClassSelect").trigger(new $.Event('lccomplete')); 
    156227                } 
    157228        }); 
    … …  
    159230 
    160231loadPathList = function() { 
    161         var startclass = $(".SBStartClassSelect").val(); 
    162         var endclass = $(".SBEndClassSelect").val(); 
     232        startclass = $(".SBStartClassSelect").val(); 
     233        endclass = $(".SBEndClassSelect").val(); 
     234 
     235        if(defendpoint != "" && defstartclass != "" && defendclass != ""){ 
     236                endpoint = defendpoint; 
     237                startclass = defstartclass; 
     238                endclass = defendclass; 
     239        } 
     240 
    163241        $('.SBSaveESE').attr('disabled', true); 
    164242        if (startclass == null || endclass == null || startclass == "SBDefault" || endclass == "SBDefault"){ 
    … …  
    170248        $('.SBResult').hide(); 
    171249        $('.SBViewAll').hide(); 
    172         $('.SBSelectedPath').html(''); 
     250        $('.SBSelectedPath').html('<h1>Please <span style="color: hsl(150, 50%, 75%);">select a leaf node</span> and <span style=\"color: hsl(200, 50%, 75%);\">push button</span> to generate a SPARQL</h1>'); 
    173251 
    174252        var url = "http://www.sparqlbuilder.org/api/plist?ep=" + encodeURIComponent(endpoint) 
    … …  
    327405                }else if(vby > (graphheight - height)){ 
    328406                        vby = (graphheight - height); 
     407                        if(vby < 0){ 
     408                                vby = 0; 
     409                        } 
    329410                }else{ 
    330411                        event.preventDefault(); 
    … …  
    340421            .attr("y", 0) 
    341422            .attr("width", width) 
    342             .attr("height", graphheight) 
     423            .attr("height", function(){ 
     424                if(graphheight < height){ 
     425                        return height; 
     426                }else{ 
     427                        return graphheight; 
     428                } 
     429            }) 
    343430            .attr("fill", "#fafafa"); 
    344431 
    … …  
    439526                if(d.path == "notend"){ 
    440527                    // 繝��繝ｫ繝√ャ繝励ｒ髱櫁｡ｨ遉ｺ縺ｫ 
    441                     $('.SBSelectedPath').html(''); 
     528                    $('.SBSelectedPath').html('<h1>Please <span style="color: hsl(150, 50%, 75%);">select a leaf node</span> and <span style=\"color: hsl(200, 50%, 75%);\">push button</span> to generate a SPARQL</h1>'); 
    442529                }else{ 
    443530                    // 譛ｫ遶ｯ繝弱�繝峨↑繧峨ヤ繝ｼ繝ｫ繝√ャ繝励�諠�ｱ繧呈峩譁ｰ 
    444                     var resultText = "<h2>Selected Path</h2>"; 
     531                    var resultText = ""; 
    445532                    // 繝代せ縺ｮ蜷榊燕驟榊�蛻�ｾ後ｍ縺九ｉ郢ｰ繧願ｿ斐＠縺ｪ縺後ｉ 
    446533                    for (var i = pathname.length;i > 0; i--){ 
    447534                        // 螂�焚逡ｪ逶ｮ�医ヮ繝ｼ繝峨�蜷榊燕�峨�螟ｪ蟄励↓ 
    448535                        if(i % 2 == 1){ 
    449                             resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>"; 
     536                                if(i == 1){ 
     537                                resultText = resultText + "<div class=\"SBLeafNode\">" + pathname[i - 1] + "</div>"; 
     538                                }else if(i == pathname.length){ 
     539                                resultText = resultText + "<div class=\"SBRootNode\">" + pathname[i - 1] + "</div>"; 
     540                                }else{ 
     541                                resultText = resultText + "<div class=\"SBPathNode\">" + pathname[i - 1] + "</div>"; 
     542                                } 
    450543                        // 蛛ｶ謨ｰ逡ｪ逶ｮ�医Μ繝ｳ繧ｯ縺ｮ蜷榊燕�峨�縺昴�縺ｾ縺ｾ縺ｧ陦ｨ遉ｺ 
    451544                        }else{ 
    452                             resultText = resultText + pathname[i - 1] + "<br><br>"; 
     545                            resultText = resultText + "<img src=\"images/pathline.png\"><div class=\"SBPathProperty\">" + pathname[i - 1] + "</div><img src=\"images/pathline.png\">"; 
    453546                        } 
    454547                    } 
    455                     resultText = resultText + '<input type="button" value="Generate" onclick="generateSPARQL()">'; 
     548                    resultText = resultText + '<input type="button" class="SBGenButton" value="Generate" onclick="generateSPARQL()">'; 
    456549                    // 繝��繝ｫ繝√ャ繝励�蜀�ｮｹ繧呈嶌縺肴鋤縺� 
    457550                    $('.SBSelectedPath').html(resultText); 
    … …  
    463556                    pathobj = d.path; 
    464557 
    465  
    466                     /* 
    467                     // 繝��繝ｫ繝√ャ繝苓｡ｨ遉ｺ譎ゅ�蠎ｧ讓呻ｼ医が繝ｳ繝槭え繧ｹ縺輔ｌ縺溘ヮ繝ｼ繝峨�讓ｪ縺ｫ繝懊ち繝ｳ縺梧擂繧九ｈ縺��鄂ｮ�� 
    468                     var xPosition = parseFloat(d3.select(this).attr("cx")) + parseFloat(d3.select(this).style("stroke-width")) + NODEHEIGHT; 
    469                     var yPosition = parseFloat(d3.select(this).attr("cy") - $('.SBTooltip').height() - 30 + ($('.SBModalView').height() / 20)) + NODEHEIGHT; 
    470  
    471                     $('.SBModalView') 
    472  
    473                     // 繝��繝ｫ繝√ャ繝励′逕ｻ髱｢螟悶↓蜃ｺ縺ｪ縺�ｈ縺�｣懈ｭ｣ 
    474                     if(xPosition < 0){ 
    475                         xPosition = 0; 
    476                     } 
    477                     if(yPosition < 0){ 
    478                         yPosition = 0; 
    479                     } 
    480  
    481                     // 逕滓�縺励◆蠎ｧ讓吶↓繝��繝ｫ繝√ャ繝励ｒ陦ｨ遉ｺ 
    482                     $('.SBTooltip').css('left', xPosition + "px").css('top', yPosition + "px"); 
    483                     */ 
    484  
    485558                } 
    486             // 繝ｫ繝ｼ繝医ヮ繝ｼ繝峨□縺｣縺溘↑繧� 
    487             }else{ 
    488                 // 繝��繝ｫ繝√ャ繝励ｒ髱櫁｡ｨ遉ｺ 
    489                 $('.SBTooltip').hide(); 
    490559            } 
    491560 
    … …  
    811880        if(i == 0){ 
    812881            // 蛻晏屓縺縺代Ν繝ｼ繝医ヮ繝ｼ繝峨ｒ繝励ャ繧ｷ繝･ 
    813             ret['nodes'].push({'name': obj[0]['label'], 'uri': obj[0]['startClass'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length, 'view' : 'no', 'path': 'notend', 'nodecolor': '#d0a36a'}); 
     882            ret['nodes'].push({'name': obj[0]['label'], 'uri': obj[0]['startClass'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length, 'view' : 'no', 'path': 'notend', 'nodecolor': 'hsl(40, 50%, 75%)'}); 
    814883        } 
    815884        // 蜈医↓source縺ｫ0�医Ν繝ｼ繝茨ｼ峨ｒ莉｣蜈･ 
    … …  
    887956        ret['nodes'][ret['nodes'].length - 1]['path'] = obj[i]; 
    888957        ret['nodes'][ret['nodes'].length - 1]['score'] = score; 
    889         ret['nodes'][ret['nodes'].length - 1]['nodecolor'] = '#8cddc0'; 
     958        ret['nodes'][ret['nodes'].length - 1]['nodecolor'] = 'hsl(150, 50%, 75%)'; 
    890959        PATHNUM++; 
    891960    }