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

更新日時:

2015/02/09 18:05:31 (10 年 前)

更新者:

lenz

ログメッセージ:

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

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

ファイル:

• SPARQLBuilderWWW/web/newsparqlbuilder.js (変更) (17 diff)

SPARQLBuilderWWW/web/newsparqlbuilder.js

@@ -11 +11 @@
 var endclass = "";
 
+var defendpoint = "";
+var defstartclass= "";
+var defendclass = "";
+
 var jsontext = "";
 var pathobj = "";
@@ -22 +26 @@
         // 繝壹�繧ｸ縺ｮ繝代�繝�Κ蛻�ｒ霑ｽ蜉
         initparts();
+
+        getParameter();
+
+        if(defendpoint != "" && defstartclass != "" && defendclass != ""){
+                openSPARQLBuilder();
+        }
+
 });
 
 function initparts(){
         var sbdiv = $('div#SPARQLBUILDER');
-// <input type="button" class="SBTopButton" value="Try with Sample" onclick="trySample()">
-        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>';
-// <input type="button" class="SBSaveESE" value="Save" onClick="openPermalink">
-        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>';
+        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>';
+        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>';
 
         sbdiv.html(sbtop);
@@ -42 +51 @@
                 event.stopPropagation();
         });
-
-        /*
-        $('#StartClassSelect').on('epcomplete', function(){
-                console.log("comp.");
-    });
-        */
 
         loadEndPointList();
@@ -66 +69 @@
 }
 
+
+function getParameter()
+{
+    if( 1 < window.location.search.length )
+    {
+        var query = window.location.search.substring( 1 );
+        var parameters = query.split( '&' );
+
+        for( var i = 0; i < parameters.length; i++ )
+        {
+            var element = parameters[ i ].split( '=' );
+            if(decodeURIComponent( element[ 0 ] ) == "ep"){
+                defendpoint = decodeURIComponent( element[ 1 ] )
+            }else if(decodeURIComponent( element[ 0 ] ) == "st"){
+                defstartclass = decodeURIComponent( element[ 1 ] )
+            }else if(decodeURIComponent( element[ 0 ] ) == "en"){
+                defendclass = decodeURIComponent( element[ 1 ] )
+            }
+        }
+    }
+}
+
+
 function openSPARQLBuilder(){
 
@@ -76 +102 @@
         $('.SBModalContents .SBMessage').css('width', 200 + 'px').css('height', 30 + 'px');
         $('.SBModalContents .SBGraph').css('width', (mvw - 201) + 'px').css('height', (mvh - 31) + 'px');
-        $('.SBModalContents .SBSelectedPath').css('width', 200 + 'px').css('height', (mvh - 31 - 26) + 'px');
+        $('.SBModalContents .SBSelectedPath').css('width', 180 + 'px').css('height', (mvh - 51 - 26) + 'px');
         $('.SBModalContents .SBModalButtons').css('width', 200 + 'px').css('height', '26px');
 
@@ -82 +108 @@
         $(".SBStartClassSelect").select2();
         $(".SBEndClassSelect").select2();
+
+        if(defendpoint != "" && defstartclass != "" && defendclass != ""){
+
+                $('.SBStartClassSelect').on('lccomplete', function(){
+                        $('.SBStartClassSelect').val(defstartclass);
+                        defstartclass = "";
+                        $('.SBEndClassSelect').val(defendclass);
+                        defendclass = "";
+
+                        $(".SBEndPointSelect").select2();
+                        $(".SBStartClassSelect").select2();
+                        $(".SBEndClassSelect").select2();
+
+                        $('.SBStartClassSelect').unbind('lccomplete');
+                });
+
+                loadPathList();
+
+                var eplist = $('.SBEndPointSelect option');
+
+                if(eplist.length == 0){
+                        $('.SBEndPointSelect').on('epcomplete', function(){
+                                $('.SBEndPointSelect').val(defendpoint);
+                                defendpoint = "";
+                                loadClassList();
+                                $('.SBEndPointSelect').unbind('epcomplete');
+                        });
+                }else{
+                        $('.SBEndPointSelect').val(defendpoint);
+                        defendpoint = "";
+                        loadClassList();
+                }
+        }
 
         d3.select('.SBModalView').on("mousewheel", function(){
@@ -88 +147 @@
 }
 
+function openSample(ep, st, en){
+        defendpoint = ep;
+        defstartclass = st;
+        defendclass = en;
+
+        openSPARQLBuilder();
+}
+
 function openPermalink(){
-
+        var baseurl = location.href;
+        var spliturl = baseurl.split('?');
+        var url = spliturl[0] + "?ep=" + encodeURIComponent(endpoint) + "&st=" + encodeURIComponent(startclass) + "&en=" + encodeURIComponent(endclass);
+
+        window.open(url);
 }
 
@@ -122 +193 @@
                                 }
                         }
-                        //$("#SBStartClassSelect").trigger(new $.Event('epcomplete'));
+                        $(".SBEndPointSelect").trigger(new $.Event('epcomplete'));
                 },
         });
@@ -153 +224 @@
                         $(".SBStartClassSelect").select2();
                         $(".SBEndClassSelect").select2();
-                        //$("#seclass").trigger(new $.Event('secomplete'));
+                        $(".SBStartClassSelect").trigger(new $.Event('lccomplete'));
                 }
         });
@@ -159 +230 @@
 
 loadPathList = function() {
-        var startclass = $(".SBStartClassSelect").val();
-        var endclass = $(".SBEndClassSelect").val();
+        startclass = $(".SBStartClassSelect").val();
+        endclass = $(".SBEndClassSelect").val();
+
+        if(defendpoint != "" && defstartclass != "" && defendclass != ""){
+                endpoint = defendpoint;
+                startclass = defstartclass;
+                endclass = defendclass;
+        }
+
         $('.SBSaveESE').attr('disabled', true);
         if (startclass == null || endclass == null || startclass == "SBDefault" || endclass == "SBDefault"){
@@ -170 +248 @@
         $('.SBResult').hide();
         $('.SBViewAll').hide();
-        $('.SBSelectedPath').html('');
+        $('.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>');
 
         var url = "http://www.sparqlbuilder.org/api/plist?ep=" + encodeURIComponent(endpoint)
@@ -327 +405 @@
                 }else if(vby > (graphheight - height)){
                         vby = (graphheight - height);
+                        if(vby < 0){
+                                vby = 0;
+                        }
                 }else{
                         event.preventDefault();
@@ -340 +421 @@
             .attr("y", 0)
             .attr("width", width)
-            .attr("height", graphheight)
+            .attr("height", function(){
+                if(graphheight < height){
+                        return height;
+                }else{
+                        return graphheight;
+                }
+            })
             .attr("fill", "#fafafa");
 
@@ -439 +526 @@
                 if(d.path == "notend"){
                     // 繝��繝ｫ繝√ャ繝励ｒ髱櫁｡ｨ遉ｺ縺ｫ
-                    $('.SBSelectedPath').html('');
+                    $('.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>');
                 }else{
                     // 譛ｫ遶ｯ繝弱�繝峨↑繧峨ヤ繝ｼ繝ｫ繝√ャ繝励�諠�ｱ繧呈峩譁ｰ
-                    var resultText = "<h2>Selected Path</h2>";
+                    var resultText = "";
                     // 繝代せ縺ｮ蜷榊燕驟榊�蛻�ｾ後ｍ縺九ｉ郢ｰ繧願ｿ斐＠縺ｪ縺後ｉ
                     for (var i = pathname.length;i > 0; i--){
                         // 螂�焚逡ｪ逶ｮ�医ヮ繝ｼ繝峨�蜷榊燕�峨�螟ｪ蟄励↓
                         if(i % 2 == 1){
-                            resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>";
+                                if(i == 1){
+                                resultText = resultText + "<div class=\"SBLeafNode\">" + pathname[i - 1] + "</div>";
+                                }else if(i == pathname.length){
+                                resultText = resultText + "<div class=\"SBRootNode\">" + pathname[i - 1] + "</div>";
+                                }else{
+                                resultText = resultText + "<div class=\"SBPathNode\">" + pathname[i - 1] + "</div>";
+                                }
                         // 蛛ｶ謨ｰ逡ｪ逶ｮ�医Μ繝ｳ繧ｯ縺ｮ蜷榊燕�峨�縺昴�縺ｾ縺ｾ縺ｧ陦ｨ遉ｺ
                         }else{
-                            resultText = resultText + pathname[i - 1] + "<br><br>";
+                            resultText = resultText + "<img src=\"images/pathline.png\"><div class=\"SBPathProperty\">" + pathname[i - 1] + "</div><img src=\"images/pathline.png\">";
                         }
                     }
-                    resultText = resultText + '<input type="button" value="Generate" onclick="generateSPARQL()">';
+                    resultText = resultText + '<input type="button" class="SBGenButton" value="Generate" onclick="generateSPARQL()">';
                     // 繝��繝ｫ繝√ャ繝励�蜀�ｮｹ繧呈嶌縺肴鋤縺�
                     $('.SBSelectedPath').html(resultText);
@@ -463 +556 @@
                     pathobj = d.path;
 
-
-                    /*
-                    // 繝��繝ｫ繝√ャ繝苓｡ｨ遉ｺ譎ゅ�蠎ｧ讓呻ｼ医が繝ｳ繝槭え繧ｹ縺輔ｌ縺溘ヮ繝ｼ繝峨�讓ｪ縺ｫ繝懊ち繝ｳ縺梧擂繧九ｈ縺��鄂ｮ��
-                    var xPosition = parseFloat(d3.select(this).attr("cx")) + parseFloat(d3.select(this).style("stroke-width")) + NODEHEIGHT;
-                    var yPosition = parseFloat(d3.select(this).attr("cy") - $('.SBTooltip').height() - 30 + ($('.SBModalView').height() / 20)) + NODEHEIGHT;
-
-                    $('.SBModalView')
-
-                    // 繝��繝ｫ繝√ャ繝励′逕ｻ髱｢螟悶↓蜃ｺ縺ｪ縺�ｈ縺�｣懈ｭ｣
-                    if(xPosition < 0){
-                        xPosition = 0;
-                    }
-                    if(yPosition < 0){
-                        yPosition = 0;
-                    }
-
-                    // 逕滓�縺励◆蠎ｧ讓吶↓繝��繝ｫ繝√ャ繝励ｒ陦ｨ遉ｺ
-                    $('.SBTooltip').css('left', xPosition + "px").css('top', yPosition + "px");
-                    */
-
                 }
-            // 繝ｫ繝ｼ繝医ヮ繝ｼ繝峨□縺｣縺溘↑繧�
-            }else{
-                // 繝��繝ｫ繝√ャ繝励ｒ髱櫁｡ｨ遉ｺ
-                $('.SBTooltip').hide();
             }
 
@@ -811 +880 @@
         if(i == 0){
             // 蛻晏屓縺縺代Ν繝ｼ繝医ヮ繝ｼ繝峨ｒ繝励ャ繧ｷ繝･
-            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'});
+            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%)'});
         }
         // 蜈医↓source縺ｫ0�医Ν繝ｼ繝茨ｼ峨ｒ莉｣蜈･
@@ -887 +956 @@
         ret['nodes'][ret['nodes'].length - 1]['path'] = obj[i];
         ret['nodes'][ret['nodes'].length - 1]['score'] = score;
-        ret['nodes'][ret['nodes'].length - 1]['nodecolor'] = '#8cddc0';
+        ret['nodes'][ret['nodes'].length - 1]['nodecolor'] = 'hsl(150, 50%, 75%)';
         PATHNUM++;
     }