Changeset 28784

Show
Ignore:
Timestamp:
15.01.2014 14:17:36 (6 years ago)
Author:
ak19
Message:

Refactored and upgraded to latest version of SGVizler

Location:
main/trunk/model-sites-dev/von-sparql/transform/pages
Files:
1 added
1 modified

Legend:

Unmodified
Added
Removed
  • main/trunk/model-sites-dev/von-sparql/transform/pages/home.xsl

    r28737 r28784  
    1111  <xsl:template name="von-sparql-canvas"> 
    1212     
    13     <script type="text/javascript" src="ext/jena/sgvizler/jquery-1.6.2.min.js"><xsl:text> </xsl:text></script> 
     13    <link rel="stylesheet" type="text/css" href="sites/von-sparql/transform/pages/style.css"/> 
     14    <script type="text/javascript" src="https://www.google.com/jsapi"><xsl:text> </xsl:text></script> 
     15    <script>  
     16        <xsl:text disable-output-escaping="yes">google.load('visualization','1', {'packages':['corechart']});</xsl:text> 
     17    </script> 
     18    <script type="text/javascript" src="http://beta.data2000.no/sgvizler/release/0.6/sgvizler.js"><xsl:text> </xsl:text></script> 
    1419 
    15     <script type="text/javascript" src="ext/jena/sgvizler/jsapi"><xsl:text> </xsl:text></script> 
    16     <script type="text/javascript" id="sgvzlr_script" src="ext/jena/sgvizler/sgvizler.js"><xsl:text> </xsl:text></script> 
    1720    <script type="text/javascript" src="ext/von-sparql/von-sparql-script.js"><xsl:text> </xsl:text></script> 
    18 <div> 
    19 <div id="sgvzl_PredicateOverview" 
    20       data-sgvizler-endpoint="http://localhost:3030/greenstone/query" 
    21       data-sgvizler-chart="gTable" 
    22       data-sgvizler-loglevel="2" 
    23       data-sgvizler-chart-options="title=Items by Language" 
    24       width="100" 
    25       style="width:450px; height:250px;display:inline-block;float:left" > 
    26   <xsl:attribute name="data-sgvizler-query"> 
    27       SELECT ?Predicate (COUNT (?Predicate) AS ?Count) (COUNT (DISTINCT ?o) AS ?Distinct_Values) 
    28       WHERE{ 
    29         ?s ?Predicate ?o 
    30       } 
    31       GROUP BY ?Predicate 
    32       ORDER BY DESC (?Predicate) 
    33   </xsl:attribute> 
    34   <xsl:comment>Filler</xsl:comment> 
    35 </div> 
    36 <div id="queryContainer" 
    37      style=" 
    38      border:1px solid #DFD9C3; 
    39      width:450px;height:250px; 
    40      float:left; 
    41      margin-left:15px; 
    42      padding:10px; 
    43      overflow-y:scroll;" 
    44      > 
    45      <span>SPARQL Query:</span> 
    46      <br/> 
    47      <span id="span_sparqlQuery" 
    48            style="font-size:10pt;"> 
    49      <xsl:comment>Filler</xsl:comment> 
    50      </span> 
    51 </div> 
    52 </div> 
    53 <br/> 
    54 <div style="margin-top:20px;margin-bottom:10px;display:inline-block;"> 
    55     <label for="sel_Predicate">View Predicate:</label> 
    56     <select id="sel_Predicate"> 
    57         <option value="None"></option> 
    58     </select>  
    59     <br/> 
    60     <div style="margin-left:20px;margin-bottom:20px;margin-top:5px"> 
    61         <input type="checkbox" id="cb_RefineSearch"/> <label for="cb_RefineSearch">Refine search to:</label> 
    62         <br/> 
    63         <label for="sel_RefineObject">?o</label> 
    64         <select id="sel_RefineObject" enabled='false'> 
    65             <option value="None">Select predicate above</option> 
    66         </select> 
    67         <br/> 
    68         <label for="sel_RefinePredicate">?p</label> 
    69         <select id="sel_RefinePredicate" enabled='false'> 
    70             <option value="None">Select ?o above</option> 
    71         </select> 
    72     </div> 
     21    <script type="text/javascript" src="ext/von-sparql/von-sparql-setup.js"><xsl:text> </xsl:text></script> 
     22    <script type="text/javascript" src="ext/von-sparql/combobox.js"><xsl:text> </xsl:text></script> 
    7323 
    74     <select id="sel_Limit"> 
    75         <option value="None">No Limit</option>  
    76         <option value="10">10</option>  
    77         <option value="25">25</option>  
    78         <option value="50">50</option>  
    79         <option value="75">75</option>  
    80         <option value="100">100</option>  
    81     </select> 
    82     <select id="sel_ChartType"> 
    83         <option value="gTable">Table</option>  
    84         <option value="gPieChart">Pie Chart</option>  
    85         <option value="gBarChart">Bar Chart</option>  
    86     </select> 
    87     <button type="button" id="btn_ShowChart">Execute Query</button> 
    88 </div> 
    89 <script type="text/javascript"> 
    90       <xsl:text disable-output-escaping="yes"> 
    91       var overviewSparqlQuery; 
    92       function sgvizlerGo (){ 
    93          overviewSparqlQuery = $('#sgvzl_PredicateOverview').attr("data-sgvizler-query"); 
    94          sgvizler.go(); 
     24    <xsl:variable name="protocol" select="substring-before(/page/pageRequest/@baseURL,':')"/> 
     25    <xsl:variable name="baseURL" select="substring-after(/page/pageRequest/@baseURL,':')"/> 
     26    <xsl:variable name="domain" select="substring-before($baseURL,':')"/> 
     27    <xsl:variable name="endpointPath" select="concat($protocol,':',$domain,':3030/greenstone/query')"/>     
    9528 
    96          //Load possible predicate values into selector 
    97          updatePredicateSelector(); 
    9829 
    99          //Ensure search refinement elements are greyed 
    100          toggle_RefineSearch(0);    
    101          $('#cb_RefineSearch').prop('checked',false); 
    102       } 
    103       sgvizler.option.namespace.dc = 'http://purl.org/dc/elements/1.1/'; 
    104       sgvizler.option.namespace.gsembedded = 'http://greenstone.org/gsembedded#' 
    105       sgvizler.option.namespace.greenstonedata = 'http://localhost:3030/greenstone/data/' 
    106       $(document).ready(sgvizlerGo()); 
     30    <div id="div_PredicateOverview" style="height:270px" width="auto"> 
     31        <div id="sgvzl_PredicateOverview" 
     32              data-sgvizler-endpoint="{$endpointPath}" 
     33              data-sgvizler-chart="google.visualization.Table" 
     34              data-sgvizler-loglevel="2" 
     35              data-sgvizler-chart-options="title=Predicate Overview" 
     36              style="width:550px;" 
     37              > 
     38          <xsl:attribute name="data-sgvizler-query"> 
    10739 
    108       $("#btn_ShowChart").click(function(){ 
    109         newPredQuery("sgvzl_container", $('#sel_ChartType').val()) 
    110       }); 
    111       $("#cb_RefineSearch").click(function(){ 
    112         if(document.getElementById("cb_RefineSearch").checked==false) 
    113             toggle_RefineSearch(0); 
    114         else 
    115             toggle_RefineSearch(1); 
     40              SELECT (?p as ?Predicate)(COUNT (?hts) as ?Hathi) (COUNT (?nzs) as ?NZ)((?NZ + ?Hathi) as ?Total)WHERE 
     41              { 
     42                  { 
     43                    ?hts &lt;http://purl.org/dc/elements/1.1/Relation.isPartOf&gt; &lt;http://localhost:8989/greenstone3/library/collection/hathitrust-tab&gt;; 
     44                         ?p ?o 
     45                  } 
     46                  UNION 
     47                  { 
     48                     ?nzs &lt;http://purl.org/dc/elements/1.1/Relation.isPartOf&gt; &lt;http://localhost:8989/greenstone3/library/collection/nz-natlib-cat&gt;; 
     49                          ?p ?o 
     50                  } 
     51              } 
     52              GROUP BY ?p 
     53              ORDER BY DESC(?Predicate) 
    11654 
    117         generateQuery(); 
    118       }); 
    119       $("#sel_Predicate").change(function(){ 
    120         updateRefineObjectSelector($("#sel_Predicate").val()); 
    121         generateQuery(); 
    122       }); 
    123       $("#sel_RefineObject").change(function(){ 
    124         updateRefinePredicateSelector($("#sel_RefineObject").val()); 
    125         generateQuery(); 
    126       }); 
    127       $("#sel_RefinePredicate").change(function(){ 
    128         generateQuery(); 
    129       }); 
    130       $("#sel_Limit").change(function(){ 
    131         generateQuery(); 
    132       }); 
    133       </xsl:text> 
    134 </script> 
     55          </xsl:attribute> 
     56          <xsl:comment>Filler</xsl:comment> 
     57        </div> 
     58        <div id="queryContainer"> 
     59             <span>SPARQL Query:</span> 
     60             <br/> 
     61             <span id="span_sparqlQuery" 
     62                   style="font-size:10pt;"> 
     63             <xsl:comment>Filler</xsl:comment> 
     64             </span> 
     65        </div> 
     66    </div> 
     67    <div id="searchContainer"> 
     68        <div id="searchControls"> 
     69            <label for="sel_Predicate">View Predicate:</label> 
     70            <select id="sel_Predicate"> 
     71                <option value="None"></option> 
     72            </select>  
     73            <br/> 
     74                <input type="checkbox" id="cb_RefineSearch"/> <label for="cb_RefineSearch">Refine search to:</label> 
     75                <br/> 
     76            <div id="refineControls"> 
     77                <label for="sel_RefineObject">?o</label> 
     78                <select id="sel_RefineObject" enabled='false'> 
     79                    <option value="None">Select predicate above</option> 
     80                </select> 
     81                <br/> 
     82                <label for="sel_RefinePredicate">?p</label> 
     83                <select id="sel_RefinePredicate" enabled='false'> 
     84                    <option value="None">Select ?o above</option> 
     85                </select> 
     86            </div> 
    13587 
    136 <div id="sgvzl_container" 
    137      style="width:auto; height:400px; margin-top:10px; "> 
    138 </div> 
    139 </xsl:template> 
     88            <select id="sel_Limit"> 
     89                <option value="None">No Limit</option>  
     90                <option value="10">10</option>  
     91                <option value="25">25</option>  
     92                <option value="50">50</option>  
     93                <option value="75">75</option>  
     94                <option value="100">100</option>  
     95            </select> 
     96            <select id="sel_ChartType"> 
     97                <option value="google.visualization.Table">Table</option>  
     98                <option value="google.visualization.PieChart">Pie Chart</option>  
     99                <option value="google.visualization.BarChart">Bar Chart</option>  
     100                <option value="google.visualization.ImageSparkLine">Sparkline</option>  
     101            </select> 
     102            <button type="button" id="btn_ShowChart">Execute Query</button> 
     103            <button type="button" id="btn_ShowQuery">Show SPARQL Query</button> 
     104        </div> 
     105        <div id="selectDataset"> 
     106        <span>Search Datasets:</span> 
     107        <br/> 
     108        <input type="radio" name="radio_Dataset" value="all"/>All<br/> 
     109        <input type="radio" name="radio_Dataset" value="nz_natlib_cat"/>NZ National Library Catalogue<br/> 
     110        <input type="radio" name="radio_Dataset" value="hathitrust_tab"/>Hathi Trust<br/> 
     111        </div> 
     112    </div> 
     113    <script type="text/javascript"> 
     114        <xsl:text disable-output-escaping="yes"> 
     115            var overviewSparqlQuery; 
     116            function createOverviewQuery() 
     117            { 
     118                overviewSparqlQuery = $('#sgvzl_PredicateOverview').attr("data-sgvizler-query"); 
     119            } 
     120             
     121            google.load('visualization','1', {packages: ['imagechart']});        
     122 
     123            $(document).ready( 
     124                function (){ 
     125                    sgvizler 
     126                        .defaultEndpointOutputFormat('jsonp') 
     127                        // Add prefixes used in examples: 
     128                        .prefix('dc',  "http://purl.org/dc/elements/1.1/") 
     129                        .prefix('xsd',  "http://www.w3.org/2001/XMLSchema#") 
     130 
     131                        // Draw all sgvizler containers on page: 
     132                        .containerDrawAll(); 
     133 
     134                        createOverviewQuery(); 
     135 
     136                     //Load possible predicate values into selector 
     137                     updatePredicateSelector(); 
     138 
     139                     //Ensure search refinement elements are greyed 
     140                     toggle_RefineSearch(0);    
     141                     $('#cb_RefineSearch').prop('checked',false); 
     142                } 
     143            ); 
     144 
     145            window.onload=setupPage; 
     146          </xsl:text> 
     147    </script> 
     148 
     149    <div id="sgvzl_container" 
     150         style="width:auto; height:400px; margin-top:10px; "> 
     151    </div> 
     152    </xsl:template> 
    140153 
    141154