Ignore:
Timestamp:
2014-01-15T14:17:36+13:00 (10 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 edited

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
Note: See TracChangeset for help on using the changeset viewer.