New type of widget : TemplateListProperty

[tfrancart]

A new Sparnatural widget should be implemented, which extends the behavior of ListWidget. Currently ListWidget simply displays the label of entities retrieved from a SPARQL query, associated to their underlying URI. The goal is to build a similar widget that would rely on select2 templating capabilities in order to build dropdown lists in which the visual content could be customized and improved with more data. The data to populate the template will be returned by the underlying SPARQL Datasource.

1. Modify SparnaturalConfig.ts to declare the new constant TemplateListWidget, as well as the sparnatural-config ontology file to declare the new property type
2. Add new class TemplateListWidget under components/widgets that relies on select2 templating mechanism
3. Modify WidgetFactory to add a case to build such a widget. The algorithm to determine the datasource should be identical to the ListWidget
4. TemplateListWidget should read its template string from an external (invisible) HTML element with a known ID. The ID should be the URI of the property received by the widget (objectPropVal variable), which is the URI of a PropertyShape, with -template at the end. e.g. something like:

  <!-- our Sparnatural component -->
  <spar-natural src="..." lang="fr" />

  <!-- an hidden div containing the template associated to the property shape https://data.example.fr/def/myModel#P123 -->
  <div style="display:none;" id="https://data.example.fr/def/myModel#P123-template">
     <b>${data.firstName}</b> <u>${data.lastName}</u>
  </div>

It could also be handlebar template if this is more appropriate. Maybe there should be some hypothesis on the name of the main data variable passed to the template. We can say it is always data for example.

5. if an element with the expected id is not found in the page, the widget should default to the same behavior as the ListWidget
6. The RdfTermDatasourceItem which currently provides data to the ListWidget should be extended so that it also includes other values present inside the SPARQL result set as RDFTerms. e.g. for SELECT ?uri ?label ?count the count value should be accessible here. It can be in a new extraBindings variable:

export interface RdfTermDatasourceItem {
    term:RDFTerm;
    label:string;
    group?:string;
    itemLabel?:string;
    extraBindings: Map<string, RDFTerm>
}

7. All data of a RdfTermDatasourceItem should be exposed to the select2 template in the TemplateListWidget, including term label, group, itemLabel and of course all extra bindings, using the key in the map as the variable name.
8. SparqlListDataProvider should be extended so that it is capable of reading any additional columns other than uri, value, label, group and itemLabel and return them in the extraBindings map.
9. Improve the widgets.md documentation file to add an extra section, leaving placeholders for screenshots. Explain how the template list widget should be configured and provide an example with the template in HTML and the corresponding SPARQL query.

[tfrancart]

Pour suivre les recommendations de handlebars:

• Déclarer les template dans une sous-balise <script> dans
• Utiliser comme id l'URI de la Property Shape
• On pourrait avoir un comportement de recherche du template plus intelligent : on cherche d'abord un template avec l'URI de la NodeShape qui est la target de la property, si on ne trouve rien on cherche avec l'URI de la PropertyShape

Exemple:

      <spar-natural
              src="configs/dbpediafr-config.ttl"
              endpoint="https://dbpedia.org/sparql"
              prefixes="skos:http://www.w3.org/2004/02/skos/core# dct:http://purl.org/dc/terms/"
              lang="en"
              defaultLang="en"
              distinct="true"
              debug="true">

        <script id="https://data.mydomain.com/ontologies/sparnatural-config/Museum_country" type="text/x-handlebars-template">
          <div>
            <b>{{bindings.itemLabel.value}}</b> (<u>{{bindings.count.value}}</u>) !
          </div>
        </script>

        <script id="https://data.mydomain.com/ontologies/sparnatural-config/Country" type="text/x-handlebars-template">
          <div>
            {{#if bindings.thumbnail.value}}
              <a href="{{bindings.thumbnail.value}}"><img src="{{bindings.thumbnail.value}}" style="width: 40px;"></img></a>
            {{/if}}
            {{bindings.label.value}}
          </div>
        </script>

      </spar-natural>

[tfrancart]

@BouzelatTarek j'ai testé et ça marche très bien.

1. Tu as introduit un datasources:descriptionProperty avec de nouvelles queries prédéfinies comme datasources:query_search_label_contains_with_description et d'autres. Il faut mieux ne pas introduire tout cela car ce sera impossible de maintenir dans le code toutes les requêtes possibles - l'ajout de définition n'est qu'un cas d'usage mais nous en aurons d'autres. Et si on combine avec les variantes de tri par ordre, tri alphabétique, etc. la combinatoire sera énorme. Donc je préfère qu'on mette directement la requête SPARQL complète dans la config SHACL. Je l'ai fait pour celle de liste dans les sources, pourras-tu le faire pour les autres ? et supprimer les requêtes préconfigurées du code et de l'ontologie (si tu les as ajoutées). Les requêtes devront s'écrire dans la config Sparnatural.
2. J'ai mis 4 lignes d'affichage pour les définitions dans la liste déroulante. Pourrais-tu ajouter un lien cliquable pour naviguer vers l'URI si on clique depuis la liste déroulante ? (pas sûr que ce soit possible car un clic va aussi déclencher la sélection de l'option correspondante)
3. Tout petit commentaire sur la forme dans l'arbre : le highlight au hover ne se fait que sur le libellé, arriverais-tu à faire en sorte qu'il se fasse sur tout le bloc, avec la définition ?

Sinon c'est trop cool