search

sparna-git / Sparnatural

Sparnatural : visual SPARQL query builder for knowledge graphs in the browser, configurable with SHACL
http://sparnatural.eu
GNU Lesser General Public License v3.0
222 stars 41 forks source link

Permettre la sélection de variables dans le pattern de graphe #121

Closed tfrancart closed 2 years ago

tfrancart commented 5 years ago
  1. Permettre d'ajouter des critères sans widget de sélection, juste pour tester la présence d'une propriété et récupérer une variable 1.1. Mettre ça dans un sous-menu du menu de sélection des classes
  2. (Mettre les ids de variables SPARQL "start" et "end" comme data properties dans le HTML, pour faciliter la génération de la query)
  3. Permettre de cliquer/sélectionner des entrées start ou end pour construire les colonnes du tableau de résultat
  4. (Avoir un résumé du tableau de résultat ?) et permettre de l'ordonner ?
tfrancart commented 4 years ago

Prérequis : #92 Je sors la gestion du OPTIONAL dans un ticket séparé

tfrancart commented 4 years ago

Mockup de l'idée

image

  1. Possibilité d'avoir "Titre" comme une propriété du modèle, sans Widget, juste pour tester sa présence
  2. Possibilité de sélectionner les colonnes qu'on veut ramener via un élément de menu supplémentaire (rond bleu) sur chaque classe
  3. Résumé des variables sélectionnées sous le composant de recherche, avec du drag and drop permettant de modifier l'ordre des colonnes
antoine37120 commented 4 years ago

Suggestion d'ergonomie : Pour rendre affichable les champs, ceux ci pourraient être directement ajoutés dans une section en dessous de la liste des critères. Ceux-ci pourraient être disposés sur une même ligne. Seul le premier objet serait par défaut affiché. Il suffirait de cliquer sur les éléments pour les afficher ou non et les déplacer en drag end drop pour les ordonner.

tfrancart commented 4 years ago

Note : le premier objet ne sera pas forcément sélectionné si on en sélectionne d'autres

tfrancart commented 4 years ago

Pour l'utilisateur final, il faut souvent récupérer un libellé pour chaque objet sélectionné, l'URI ne suffit pas. Il faudra avoir un moyen de dire si on veut l'URI de l'entité, son libellé, ou les 2.

On peut imaginer un comportement à la Wikidata ou on génère une variable avec "xxxLabel" à la fin qui correspond au label de l'élément choisi dans la requête.

tfrancart commented 4 years ago

Sur le choix des colonnes, on activerait l'option de sélectionner un libellé

antoine37120 commented 2 years ago

@tfrancart merge avec #148 réalisé puis déplacement des Class nouvellement créées dans SparnaturalComponents.js

Voila donc ce que tu peux tester pour le moment dans cette branche.

tfrancart commented 2 years ago

Merci !

Voilà ce que je vois :

image

  1. Les flèches n'apparaisent plus en orange
  2. L'oeil est par-dessus le chevron des options
  3. Les SVG : bonne idée, mais les SVG ne devraient pas être dans les settings, on ne doit pas pouvoir les overwriter. Déclare-les dans une constante quelque part.
  4. Egalement : le ?this apparait 2 fois en bas, dans la partie grise et à coté dans la partie blanche. Il ne devrait apparaitre qu'une seule fois
  5. Tu pourrais aller jusqu'à ajouter les variables dans la structure JSON de la query, cela générerait le SPARQL correspondant :

image

tfrancart commented 2 years ago

@antoine37120 j'ai eu le double "?this" quand j'ai réinitialisé la query, en repartant de zéro. Au début, il n'apparait bien qu'une fois, mais après réinitiaisation, quand on recommence une nouvelle query, il est en double.

Et en fait j'ai bien les flèches orange, c'est juste que je n'étais pas aller au bout de ma query ! il suffit juste de n'afficher les yeux que quand la flèche est orange, et pas avant.

tfrancart commented 2 years ago

Et si tu avances sur le tri, tu peux aussi positionner les critères de tri dans la query, cf. Query.js :

image

antoine37120 commented 2 years ago

@tfrancart j'ai testé le fait de préciser l'ordre (ASC ou DESC) mais cela semble avoir un impact dans ce qui se trouve dans le select. de la requête. Tu peux voir ce qui se passe en cliquant par exemple sur le bouton AZ et ensuite le Cercle barré. As tu une idée ? Tu peux voir ce que j'ai changé dans le dernier commit.

tfrancart commented 2 years ago

Hello @antoine37120 merci - oui ce sont les post-processings de la requêtes qui sont fait dans la page HTML qui ne fonctionnent plus. Ces post-processings doivent se repérer sur le dernier "}", et comme avec le critère de tri ce caractère n'est plus le dernier de la requête, les post-processing échouent. Tu peux commenter les fonction "isPrimaryTopicOfPostProcess", "rdfsLabelPostProcess" et "orderByPostProcess" dans index.html

antoine37120 commented 2 years ago

Merci @tfrancart J'ai pu trouver un exemple fonctionnel pour les regex, tu peux voir ceci dans le dernier commit Le classement fonctionne bien, Par contre les mots commençants par une lettre accentuées comme É se positionnent comme les autre caractères spéciaux en fin de classement. Donc si ce sont par exemple des pays, l'Égypte arrive en fin de classement.

antoine37120 commented 2 years ago

J'ajoute les champs sélectionnés cet après midi.

tfrancart commented 2 years ago

Pour le É c'est normal, pas d'inquiétude. Merci d'avoir regardé pour les regex ! on ne va sans doute pas les garder de toutes façons, si on a la sélection des colonnes et le tri dans Sparnatural, ces fonctions vont sauter (peut-être juste garder celle qui met le LIMIT)

Le lun. 20 déc. 2021 à 13:32, antoine37120 @.***> a écrit :

Merci @tfrancart https://github.com/tfrancart J'ai pu trouver un exemple fonctionnel pour les regex, tu peux voir ceci dans le dernier commit Le classement fonctionne bien, Par contre les mots commençants par une lettre accentuées comme É se positionnent comme les autre caractères spéciaux en fin de classement. Donc si ce sont par exemple des pays, l'Égypte arrive en fin de classement.

— Reply to this email directly, view it on GitHub https://github.com/sparna-git/Sparnatural/issues/121#issuecomment-997883803, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAU2H4JNCDE2ENF5GL6U4C3UR4O4FANCNFSM4ITD6CLA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

--

Thomas Francart - SPARNA Web de données | Architecture de l'information | Accès aux connaissances blog : blog.sparna.fr, site : sparna.fr, linkedin : fr.linkedin.com/in/thomasfrancart tel : +33 (0)6.71.11.25.97, skype : francartthomas

antoine37120 commented 2 years ago

@tfrancart Avec ces dernier commits la fonctionnalité devient utilisable. Prend maintenant en charge la suppression des critères ou de la endClass pour mettre à jour la liste. Dans le cas ou this n'est pas visible, celui ci le devient si au moment de supprimer un critère il n'y a plus de variable sélectionné dans la liste. Chaque changement dans l'ordre des variables ou les interactions pour afficher ou non celles-ci déclenchent l'event submit du composant.

tfrancart commented 2 years ago

Merci. Il faut une petite limitation :

Bon, c'est des cas limites, on peut vivre sans cette vérification.

Par contre, il faudrait faire toutes les autres évolutions autour de cette barre de recherche pour que ça devienne vraiment utilisable : couleur des flèches, option 1, 2, 3, barre de résultats repliée par défaut, etc.

Sinon c'est très sympa. Il faudrait que je mette à jour la page de démo pour ajouter des attributs qui correspondent aux noms des musées ou au nom des personnes.

J'ai essayé de faire une sélection de la date de naissance d'une personne, mais ca ne marche pas, l'oeil n'est pas là, il n'est là que si je sélectionne une valeur:

image

Une idée ?

antoine37120 commented 2 years ago

@tfrancart Oui, il y a encor un peu de travail... J'attend les svg de Célia pour revoir le design, ça ne devrait plus tarder. Et ensuite effectivement traiter les cas quand une valeur est sélectionnée.

A propos des dates, on aura aussi l'option "Toutes" ? Si c'est oui, en sélectionnant "Toutes" l'œil pourra apparaitre, le critère sera considéré comme complet. Il me semble que dans les cas ou plusieurs valeurs sont possibles dans les résultats l'œil devrait être visible et cliquable. Donc avec les dates et aussi dans les cas ou plusieurs valeurs sont sélectionnées. Ce sera d'ailleurs certainement le cas avec les arbres de sélection.

antoine37120 commented 2 years ago

Et si je ne me trompe pas, le chargement de requête avec la sélection des variables à afficher ne devrait pas être très long à traiter.

tfrancart commented 2 years ago

Il faut adapter légèrement le comportement pour les widgets qui ne sont pas des widgets de sélection d'entités (list/autocomplete/arbre). C'est à dire les widgets de : search / date / pas de widgets. Pour ces 3 widgets, on n'aura pas l'option "Toutes"; l'option "Toutes" n'a de sens que pour les widgets de sélection d'entités. Pour ces 3 widgets, il faudra que l'oeil soit cliquable même si on n'a pas sélectionné de valeur et même si on n'aura pas l'option "Toutes".

Le use-case cible est le suivant : "Je cherche tous les Musées qui sont en France, avec leur nom". On doit pouvoir sélectionner "Musée pays = France + Musée a_pour_libellé String", sans préciser de valeur pour la String, et on doit pouvoir cliquer sur l'oeil.

Pour ces widgets de date et de Search, la flèche ne se met orange actuellement que quand on a sélectionné une valeur. Il faudrait revoir ce comportement pour que la flèche avec l'oeil soit orange tout de suite, même sans valeur sélectionnée.

antoine37120 commented 2 years ago

Cela laisse la possibilité que les champs pour entrer des valeurs soient tout le temps visible. J'ai un doute pour le premier critère avec le widget search, si il n'est pas rempli ça revient à afficher "this" ? Ou même si il est rempli ? Ce qui change, c'est peut être l'attribut de this correspondant à la relation choisie entre startClass et EndClass ?

tfrancart commented 2 years ago

Cela laisse la possibilité que les champs pour entrer des valeurs soient tout le temps visible.

Ha oui tu as raison. Ce que je voulais éviter c'était le clic systématique sur "Toutes" juste pour le cas où on veut la variable en colonne pour des propriétés litérales. Tu as raison, pour les cas du search et des dates, il faut conserver le même comportement avec le "Toutes". Mais pour le "no widget", quand il n'y a pas du tout de widget, alors la flèche doit être orange tout de suite et l'oeil disponible tout de suite.

J'ai mis à jour index.html pour avoir des exemples de sélection et de recherche sur les libellés :

"Museum nom Texte" sans widget :

image

(ca c'est vraiment le use-case de base "Je veux tous les musées d'un pays avec leur nom").

"Oeuvre nom Texte" avec un Widget de Search:

image

J'ai un doute pour le premier critère avec le widget search, si il n'est pas rempli ça revient à afficher "this" ? Ou même si il est rempli ?

Pas compris...

antoine37120 commented 2 years ago

Et bien pour l'exemple avec "Œuvre => Nom => Texte" This (qui est l'œuvre) renvoye bien le nom des œuvres dans les résultats ?

tfrancart commented 2 years ago

Non, ?this doit toujours renvoyer l'identifiant de l'oeuvre, rien ne change là-dessus. Si on veut le nom de l'oeuvre en plus, on doit sélectionner explicitement "Texte".

Le mar. 21 déc. 2021 à 15:11, antoine37120 @.***> a écrit :

Et bien pour l'exemple avec "Œuvre => Nom => Texte" This (qui est l'œuvre) renvoye bien le nom des œuvres dans les résultats ?

— Reply to this email directly, view it on GitHub https://github.com/sparna-git/Sparnatural/issues/121#issuecomment-998810948, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAU2H4PHGRN4L7MCJORLIS3USCDJVANCNFSM4ITD6CLA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

--

Thomas Francart - SPARNA Web de données | Architecture de l'information | Accès aux connaissances blog : blog.sparna.fr, site : sparna.fr, linkedin : fr.linkedin.com/in/thomasfrancart tel : +33 (0)6.71.11.25.97, skype : francartthomas

antoine37120 commented 2 years ago

@Thomas, ce n'est pas encore tout à fait correcte pour la mise en forme mais tu peux voir ce que cela donne avec les nouvelles flèches et notamment le higtlight avec le contour vers pour les variables sélectionnées

tfrancart commented 2 years ago

Mon rapport de test - le highlight marche impeccable, mais pas mal d'autres choses à corriger:

  1. Petit souci d'alignement vertical en bas des nouvelles flèches :

image

  1. Impossible de déselectionner une valeur en cliquant sur la croix : image

Note: quand je sélectionne 2 valeurs j'arrive à désélectionner la 2ème, mais pas la 1ère.

  1. Le bord des flèches blanches est bizarre. Ce n'est pas comme sur la maquette:

Ce que je vois :

image

Ce qu'il y avait sur les maquettes:

image

Il faut que ce soit comme sur la maquette

  1. La flèche de la liste de valeurs est trop collée au libellé: image

  2. Ne pas souligner "Trouver pays" sinon c'est confus avec l'action "Tous.tes":

image

  1. Le "Tous" ne s'affiche pas correctement quand il est sélectionné:

image

  1. Revoir les handles pour le drag&drop, ce n'est pas joli.

image

Il faut rapprocher les 2 lignes et avoir un pointillé régulier comme sur les maquettes:

image

  1. La flèche du optional a 2 petits soucis : 1/ elle est un peu large/grosse par rapport aux maquettes 2/ la pointe de la flèche précédente ne devrait pas apparaire juste à coté.

Sur les maquettes:

image

Ce qu'on voit:

image

  1. Il y a un souci avec les propriétés de type "NoWidget". Quand c'est un "NoWidget", il faut directement passer la flèche en orange, sinon on ne peut pas sélectionner le "Tous.tes". Teste sur "Musée nom Texte":

image

Note : c'est le use-case principal et primordial du mécanisme de sélection des colonnes : ajouter des lignes dans la query qui correspondent aux libellés des objets pour récupérer leur nom (ou d'autres propriétés textuelles) Note : je viens de faire une correction sur la génération du SPARQL pour ce cas

  1. Bug d'affichage quand je chercher "Oeuvre nom Texte valeur = Madone". Le EndClass disparait:

image

  1. Bug d'affichage quand je sélectionne 2 valeurs:

image

antoine37120 commented 2 years ago

@tfrancart, l'ensemble des points ont été revus et corrigés sauf le numéro 9.

tfrancart commented 2 years ago

Alors là ca commence à devenir assez bluffant ! les nouvelles flèches avec le nouveau design ça claque ! Quelques petites remarques :

  1. Toujours un soulignement sur "Trouver xxxx":

image

  1. Il faut que la flèche des options apparaisse dès la selection de la première classe, en couleur silver-light, comme avant. Là elle n'apparait pas au-début:

image

Et, si ni le optionnel ni le négatif ne sont disponible, elle doit rester en silver light, il ne faudrait pas qu'elle repasse en gris foncé.

  1. Les tirets des handle de drag and drop ne sont pas égaux, ca fait toujours bizarre. Le tiret du milieu est plus grand que les tirets haut et bas:

image

Il faut peut-être utiliser une image ou un icône plutôt qu'une bordure.

  1. Avec le point 9 précédent implémenté, ca va devenir super-fluide
tfrancart commented 2 years ago
  1. Petit souci avec les dropdown, elles sont un peu hautes et mangent sur l'ombre de la ligne au-dessus:

image

Je pense qu'il y a du blanc au-dessus du libellé qui pourrait être enlevé

tfrancart commented 2 years ago

@antoine37120 , à propos de mon commentaire "Et, si ni le optionnel ni le négatif ne sont disponible, la flèche doit rester en silver light, il ne faudrait pas qu'elle repasse en gris foncé." : en fait, ce serait même préférable qu'elle n'apparaisse pas du tout si ni le optionnel ni le négatif ne sont présents

tfrancart commented 2 years ago

Les options de tri sont inversés : l'icône de tri de A à Z fait un tri de Z à A

antoine37120 commented 2 years ago

@tfrancart Voici pour ces précédents commit les corrections aux commentaires que tu avais. Pour le moment le menu option est en gris très clair si il n'y a pas d'option possible. Mais si tu le souhaite vraiment on peut complètement le cacher pour ce cas précis. C'est aussi réglé pour le point 9 de la précédente série de commentaires. La bonne variable est maintenant prise en compte pour l'ordre des résultats.

Je note ici un bug que je ne peux pas régler de suite pour en garder la trace : Si le range est modifié dans un critère, les items du menu des options ne se met pas à jour on fonction de ce qui est configuré pour ce dernier.

La branche #148 à été mergé dans la #121 pour finaliser le rendu du menu des options.

tfrancart commented 2 years ago

Merci Antoine

  1. Je trouve toujours que la hauteur des dropdown est trop importante et mange sur l'ombre:

image

  1. Petit souci d'alignement dans la dropdown des propriétés, la flèche vers le bas est trop près du texte:

image

  1. Il faut coller un peu plus les pointillés du handle (qui sont maintenant très jolis !) à gauche du bloc, ils doivent être quasiment collés:

image

5 Est-il possible de réduire un peu la largeur de la flèche "+" pour sélectionner de nouvelles valeurs ? (pour que le "+" soit dans le bout de la flèche comme l'oeil - si pas possible, ce n'est pas grave)

image

  1. Il y a un petit bug vicieux de mise à jour du highlight : je sélectionne un range, je sélectionne "Tous.tes", je clique sur l'oeil, puis je désélectionne le range et j'en choisis un autre, je reclique sur "Tous.tes" : la flèche orange est tout de suite highlightée alors que l'oeil n'est pas sélectionné:

image

tfrancart commented 2 years ago

et il faudra penser au chargement des requêtes sauvegardées :

antoine37120 commented 2 years ago

@tfrancart, je crois que c'est bon vis à vis des derniers commentaires que tu as postés. En tout cas, ils peuvent être vérifiés J'ai en plus résolu ce que j'évoquais aussi plus haut :

Si le range est modifié dans un critère, les items du menu des options ne se met pas à jour on fonction de ce qui est configuré pour ce dernier.

Et en bonus, l'auto sélection de la variable à afficher si :

J'y pense, cela pourrait être aussi étendue aux cas ou au moins deux variable sont sélectionnés et aux cas ou il s'agit d'une recherche textuelle

tfrancart commented 2 years ago

Merci Antoine, je trouve encore des petites choses ci-dessous. On arrive quasi à une version intermédiaire stable et utilisable. Et pour la suite j'essaie de te faire une liste par priorité des points auxquels je pense :

  1. Souci d'alignement de la flèche de sélection des propriétés est toujours là (testé sous un autre navigateur):

image

  1. La largeur de la colonne dans la boite grise est plus importante que les autres, et elle est aussi moins haute:

image

  1. La requête SPARQL ne doit pas être générée avant d'avoir sélectionner le "Tous.tes". C'est à dire qu'à cette étape, la requête SPARQL ne doit plus être notifiée, il faut attendre que l'utilisateur clique sur le "Tous.tes":

image

  1. Peux-tu masquer le "Switch name" pour l'instant ?
tfrancart commented 2 years ago

Salut Antoine, voici ce qui serait le plus prioritaire pour moi pour la suite des devs. On en reparle.

  1. Flèche optionnal / négatif :

    • Ne pas faire apparaitre la flèche dès le début. On ne la fait apparaitre que si elle est active après le choix de la propriété (je sais, j'avais demandé l'inverse au début)
    • Dans le cas où elle apparait, le bout de la flèche du start class ne doit pas apparaitre (cf. les maquettes). Là ca fait bizarre d'avoir les 2 image
    • ajouter un ombrage en creux sur ces flèches vertes (cf maquettes), comme si elles étaient creusées
    • vérifier le centrage du libellé de la propriété : quand la flèche des options est présente, je pense que le libellé de la propriété doit être décalé un peu à droite pour être centré entre la flèche des options et la flèche de gauche image

  2. Implémenter le rechargement des queries avec les options "Tous.tes" + l'oeil + les variables dans la barre de résultat

  3. Implémenter le bouton de reset de la query

  4. Implémenter le masquage / affichage de la barre de résultats

  5. Implémenter la possibilité de modifier les noms de colonne dans la barre de résultats

  6. Implémenter le bouton d'exécution de la query, avec une option de config pour ne pas l'afficher si on ne le veut pas

antoine37120 commented 2 years ago

@tfrancart j'ai réalisé des correctifs pour les point abordés dans le premier commantaire. Sauf à propos du switch, il est maintenant implémenté.

A propos du lancement de la requête, pouvons nous d'une manière générale, considérer que si un critère n'est pas complet, pas de lancement de la requête ?

Dans la deuxième série de commentaires le point concernant l'ombrage du bouton du menu des options est ajouté.

tfrancart commented 2 years ago

A propos du lancement de la requête, pouvons nous d'une manière générale, considérer que si un critère n'est pas complet, pas de lancement de la requête ?

Oui, c'est bien l'idée

antoine37120 commented 2 years ago

J'oubliais, je ne vois pas du tout de différence de hauteur de la première colonne sélectionnée... Est tu certain que ce n'est pas un effet d'optique. Dans Chrome et Firefox la hauteur est de 38.2px.

antoine37120 commented 2 years ago

Oui, c'est bien l'idée

J'ai pu voir qu'il y avait plusieurs autres situations qui pouvaientt être concernées. Et donc je pense que cela peut être géré plus globalement en vérifiant simplement que tous les critères sont complets avant d'envoyer la requête. Sinon, nous allons avoir des règles dans tous les sens pour limiter ou non l'envoi de la requête.

tfrancart commented 2 years ago
  1. Peux-tu donner une largeur mini aux boites des colonnes ? celle toute petite avec le this fait bizarre: image
  2. Est-ce possible de colorer le switch des colonnes quand il est activé ? c'est ce qu'on voir en général sur ces composants: image image

Sinon c'est tout bon pour le reste

tfrancart commented 2 years ago

Et donc je pense que cela peut être géré plus globalement en vérifiant simplement que tous les critères sont complets avant d'envoyer la requête.

Non je ne crois pas. Si on laisse un critère incomplet, mais qu'on complète un autre critère dans une autre ligne, la requête doit être générée et envoyée (sans le critère incomplet). Le fait d'avoir un critère incomplet ne doit pas bloquer l'envoi de la requête par ailleurs. C'est simplement le moment du déclenchement de l'event qu'il faut changer (le mettre sur la sélection du "Tous.tes" et plus sur la sélection de la propriété)

antoine37120 commented 2 years ago

@tfrancart c'est bon pour la largeur mini et la coloration du switch.

antoine37120 commented 2 years ago

Je vient aussi de publier une correction parce que en mode affichage des noms de variables, la valeur par défaut du widget de liste pour sélectionner des valeurs disparaissait.

tfrancart commented 2 years ago

Ha, petit problème que je n'avais pas anticipé: quand on a sélectionné une première valeur, et qu'on clique sur le "+" pour en sélectionner une 2ème, l'option "Tous.tes" ne devrait plus apparaitre...:

image

antoine37120 commented 2 years ago

Corrigé avec la couleur du switch plutôt en orange quand actif

tfrancart commented 2 years ago

Quand j'active le switch, et que je saisis un nouveau critère, le nouveau critère n'affiche pas les noms de variables. Pire, si j'enlève le switch, tout s'inverse ! là ou j'avais des noms de variables, j'ai des classes, et là où j'avais des classes, j'ai des noms de variables !

image

Quand le switch est activé, idéalement, les noms de variables doivent être affichés pour les nouveaux critères. Si trop compliqué, au moins je devrais pouvoir désactiver et réactiver le switch pour avoir un affichage cohérent dans toute la requête.

antoine37120 commented 2 years ago

@tfrancart Non ce n'est pas trop compliqué, j'ai compris le problème tout de suite et sais pourquoi. je t'envois un correctif cet après midi.

antoine37120 commented 2 years ago

@tfrancart fix envoyé