http%3A%2F%2Fdata.itatti.harvard.edu%2Fresource%2FStructuredSearch.html

<div class="rs-search text-center container" style="min-height:1000px;">
<semantic-search 
  limit=1000
  disable-optimizer=false
  relations-profiles='{
    "defaultProfile": "<http://data.itatti.harvard.edu/default>",
    "categoriesQuery": "
SELECT (<http://data.itatti.harvard.edu/default> as ?profile) ?category ?label ?description ?thumbnail WHERE {

} ORDER BY ?order 
VALUES (?category ?label ?description ?thumbnail ?order) {
  (<http://vocab.getty.edu/aat/300033973> \"Drawing\" \"visual works\" \"///upload.wikimedia.org/wikipedia/commons/1/1a/Su25-kompo-vers2.svg\" 1)
  (crm:E21_Person \"Person\" \"person\" \"../images/fcs/actors.svg\" 2)
  (crm:E22_Man-Made_Object \"Man-Made Object\" \"Man-Made Object\"  \"../images/fcs/things.svg\" 3)

}
    ",
    "relationsQuery": "
 SELECT (<http://data.itatti.harvard.edu/default> as ?profile) ?relation ?label (\"\" as ?description) ?hasDomain ?hasRange where {
   VALUES (?hasDomain ?relation ?hasRange ?label) {
  ( <http://vocab.getty.edu/aat/300033973> dcterms:creator crm:E21_Person \"created by\" )
  ( <http://vocab.getty.edu/aat/300033973> crm:P46_is_composed_of crm:E22_Man-Made_Object \"composed of\" )
   }
 }"
  }'
>
  <rs-fc-fr-search
    resource-selector='{
      "query": " prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>
prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
prefix bds: <http://www.bigdata.com/rdf/search#>
SELECT DISTINCT ?suggestion ?label ?desc WHERE {
           ?label bds:search ?__token__ ; 
             bds:relevance ?score ;
             bds:minRelevance \"0.5\" ;                
             bds:matchAllTerms \"true\"  .

           ?suggestion rdfs:label| (crm:P102_has_title/rdfs:label) ?label.
           FILTER(EXISTS { ?subject ?__relation__ ?suggestion . }) .
         } ORDER BY DESC(?score)  LIMIT 30
     ",
     "suggestionTupleTemplate": "<span title=\"{{label.value}}\">{{label.value}}</span>",
     "noSuggestionsTemplate": "<div class=\"suggestion-no-matches\">no matches found</div>"
   }'></rs-fc-fr-search>
    <div data-flex-layout="row stretch-stretch">
    <div data-flex-self="size-2of3" style="flex: 0 0 20px;">
      <semantic-search-facet
        category='{
          "query": "
            SELECT ?__range__ (COUNT(DISTINCT ?subject) AS ?count) WHERE {
                OPTIONAL { ?subject ?relation ?propValue . }
                FILTER(BOUND(?propValue)) .
                 VALUES (?hasDomain ?relation ?__range__ ?label) {
                  ( <http://vocab.getty.edu/aat/300033973> dcterms:creator crm:E21_Person \"created by\" )
                 } 
                  
           	} GROUP BY ?__range__
          ",
          "tupleTemplate": "
            <div class=\"fundamental-category-item\" style=\"background-image: url(&#39;{{$category.thumbnail.value}}&#39;)\"></div>
          "
        }'
        relation='{
        "query": "
          SELECT ?__relation__ (COUNT( DISTINCT ?subject) AS ?count) WHERE {
            OPTIONAL { ?subject ?__relation__ ?propValue . }
            FILTER(BOUND(?propValue)) .
          }
          GROUP BY ?__relation__
          ORDER BY ?__relation__
        ",
        "tupleTemplate":  "<div class=\"facet-relation__content\" style=\"min-width: 300px;\" title=\"{{$relation.label.value}} ({{count.value}})\">{{$relation.label.value}} ({{count.value}}) <img class=\"facet__relation__content__category-image\" src=\"{{$range.thumbnail.value}}\"/></div>"
     }'
     value-categories='{
    												"<http://vocab.getty.edu/aat/300033973>": {
      												"kind": "resource",
      												"valuesQuery": "
         													SELECT ?value ?label (COUNT(DISTINCT $subject) AS ?count) WHERE {
     																<http://www.bigdata.com/queryHints#Group> <http://www.bigdata.com/queryHints#optimizer> \"None\".
     																$subject ?__relation__ ?value .
     																?value rdfs:label ?label .
   																}
   																GROUP BY ?value ?label
   																ORDER BY ?label"
     													},
                            "<http://www.cidoc-crm.org/cidoc-crm/E21_Person>": {
      												"kind": "resource",
      												"valuesQuery": "
         													SELECT ?value ?label (COUNT(DISTINCT $subject) AS ?count) WHERE {
     																<http://www.bigdata.com/queryHints#Group> <http://www.bigdata.com/queryHints#optimizer> \"None\".
     																$subject ?__relation__ ?value .
     																?value rdfs:label ?label .
   																}
   																GROUP BY ?value ?label
   																ORDER BY ?label"
     													}
                       }'>
      </semantic-search-facet>                        

    </div>
    <semantic-search-result-holder>
    <div data-flex-self="md-full">
      <semantic-search-result>
        <mp-sparql-result-counts 
          query="SELECT DISTINCT * {}" 
          template='{{#if hasLimit}} <bs-alert bs-style="warning"> Showing {{numberOfResults}} of {{totalNumberOfResults}} matches. <strong>Please, refine your search.</strong> </bs-alert> {{else}} found {{numberOfResults}} matches {{/if}}'>
        </mp-sparql-result-counts>
      </semantic-search-result>
      <bs-tabs unmount-on-exit=true id='search-results' animation=false>
        <bs-tab event-key="1" title="Grid">
          <bs-alert bs-style="info"> Only entities with image representation are shown in the Grid! </bs-alert>
          <semantic-search-result>
            <semantic-table 
              query='
                SELECT DISTINCT ?subject ?thumbnail WHERE {
                  ?subject crm:P138i_has_representation/crm:P138i_has_representation ?img.
  								BIND(COALESCE(?img, "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/200px-No_image_available.svg.png") as ?thumbnail)
        				}
      				'
      			layout='{
        			"tupleTemplate": "
          			<div class=\"rs-grid-element text-center panel panel-default\">
              		<div class=\"panel-body\">
                		<img src=\"{{thumbnail.value}}\" style=\"height:120px;max-width:150px;\" class=\"img-rounded\">
            	  	</div>
            		  <div class=\"panel-footer\" style=\"position: relative\">
              		  <semantic-link class=\"grid-resource-link\" uri=\"{{subject.value}}\"></semantic-link>
                  </div>
                </div>
              ",
              "options": {"showFilter":false, "resultsPerPage":16}
             }'
            >
            </semantic-table>
          </semantic-search-result>
        </bs-tab>        
        <bs-tab event-key="2" title="Table">
          <semantic-search-result>
            <semantic-table 
              query='SELECT DISTINCT ?subject WHERE { }'
              layout='{
                "options": {"showFilter":false, "resultsPerPage":10}
              }'
            >
            </semantic-table>
          </semantic-search-result>
        </bs-tab>

      </bs-tabs>
      
      <bs-panel>
        <semantic-search-result>
          <mp-sparql-download query="SELECT * WHERE { }"
            header="text/csv"
            filename="csv-result.csv"
          >
            <button class="btn btn-default">Download CSV</button>
          </mp-sparql-download>
        </semantic-search-result>
        <semantic-search-result>
          <mp-sparql-download query="SELECT * WHERE { }"
            header="application/sparql-results+json"
            filename="json-result.json"
          >
            <button class="btn btn-default">Download JSON</button>
          </mp-sparql-download>
        </semantic-search-result>
      </bs-panel>  
    </div>
    </semantic-search-result-holder>
    </div>
</semantic-search>
</div>