Closed CeyFun closed 2 years ago
@CeyFun @Hypertopic/journees-du-patrimoine
If the main problem of this ticket is the loading time of the default resource (aka the picture), you should file a ticket in Steatite (the picture service). The feature would be to be get an optimized version of the picture (JPEG lossy compression) instead of the original picture. The implementation would be very similar to the thumbnails' one, but without size reduction.
Assignations : Scénarios : @aurelien45100 @Antoine-Guyot Stratégie d'implémentation : @dylan-correia @lusardia (possible de changer)
Etant donné que je souhaite accéder à une ressource Quand j'accède à la page de la ressource Alors le loader apparaît sur la ressource pendant son chargement
Scénario effectué en collaboration avec @Antoine-Guyot
Etant donné que je souhaite accéder à une ressource Quand j'accède à la page de la ressource Alors la ressource apparaît rapidement
Scénario effectué avec @aurelien45100
@benel Que pensez-vous de nos scénarios ?
@aurelien45100 @Antoine-Guyot
Merci pour vos scénarios...
Etant donné que je souhaite accéder à une ressource
Quand j'accède à la page de la ressource
Il n'existe pas de page des ressources dans Porphyry. Il n'y a que trois types de pages :
Alors la ressource apparaît rapidement
Il faut que ce soit testable. On pourrait éventuellement quantifier le "rapidement" mais ça ressemblerait d'avantage à un critère technique... Voyez-vous autre chose d'évaluable (au moins manuellement) qui serait lié ? Dit autrement, c'est quoi ce qui pose problème dans le chargement de la page de l'item et devrait être différent ?
Etant donné que je clique sur l'item "{name : "ABT", ref: 7 Fi 35}" Quand j'accède à la page de l'item "{name : "ABT", ref: 7 Fi 35}" Alors le loader apparaît sur la partie "Description", "Items ayant le même nom" et l'image de l'item jusqu'à ce que la partie soit chargée
Scénario effectué en collaboration avec @Antoine-Guyot
Etant donné que je clique sur l'item "{name : "ABT", ref: 7 Fi 35}" Quand j'accède à la page de l'item "{name : "ABT", ref: 7 Fi 35}" Alors les parties "Description", "Items ayant le même nom" et l'image n'apparaissent qu'une fois être entièrement chargées
Scénario effectué avec @aurelien45100
Nous avons refait nos scénarios @benel
@aurelien45100 @Antoine-Guyot
name : "ABT"
Puisque la visite des journées du patrimoine aura lieu à Saint-Jean, ne serait-ce pas plus pertinent de choisir des exemples issus de cet édifice ? En plus celui-ci ("ABT" pour "Arrembécourt") n'est pas dans les données de test déjà disponibles.
Vous avez déjà un item de cet édifice dans les données de test et rien ne vous empêche pas de prévoir d'en ajouter quelques uns supplémentaires si nécessaire.
Etant donné que je clique sur l'item "{name : "ABT", ref: 7 Fi 35}"
Essayez le plus possible de réutiliser des étapes déjà définies.
Alors les parties "Description", "Items ayant le même nom" et l'image n'apparaissent qu'une fois être entièrement chargées
Hmmm... Ça va être difficile à tester... Et si c'est toujours aussi long, pas sûr que le nouveau comportement soit mieux que l'ancien. C'est quoi le problème concret ? Pourquoi est-ce aussi lent ? Est-ce que vous reformuler (pour l'instant "en français") ce qui est le cas actuel et ce qui serait le cas idéal ?
Etant donné que je clique sur l'item "{name : "AXN 009"}" Quand j'accède à la page de l'item "{name : "AXN 009"}" Alors le loader apparaît sur la partie "Description", "Items ayant le même nom" et l'image de l'item jusqu'à ce que la partie soit chargée
Scénario effectué en collaboration avec @Antoine-Guyot
@Antoine-Guyot @aurelien45100
Pour corriger tout ça nous pouvons (...) optimiser les images affichées (notamment avec steatite).
OK, donc une manière de formuler le résultat du scénario serait de dire que la ressource affichée sera une image compressée avec pertes (et non l'image d'origine comme actuellement). Si le futur binôme en charge des tests ne voit pas comment le tester, je vois au moins une astuce pour le faire (mais qui demande de se mettre d'accord avec le binôme chargé de l'implémentation).
nous pouvons déjà indiquer à l'utilisateur le chargement
Certes. Mais gardez cette solution au cas où la première ne serait pas suffisante.
Êtes vous disponible pendant 10 minutes sur Rocket.Chat ?
@aurelien45100
Etant donné que je clique sur l'item "{name : "AXN 009"}"
Bon visiblement, on ne se comprend pas... Cherchez "Saint-Jean" dans la boîte de recherche de https://vitraux.porphyry.org : vous verrez les 109 photographies de l'édifice dont vous devez faciliter la visite lors des prochaines journées du patrimoine. Elles commencent toutes par "SJ" (comme "Saint-Jean").
Pour l'instant, vous en avez déjà une dans les données de test : SJ 001. Utilisez la en priorité, mais si vous en avez besoin d'autres, le binôme qui fera les tests devra les ajouter aux données de test.
Scénario: Afficher un loader lors du chargement d'un item Etant donné que je clique sur l'item "{name : "SJ 001"}" Quand j'accède à la page de l'item "{name : "SJ 001"}" Alors le loader apparaît sur la partie "Description", "Items ayant le même nom" et l'image de l'item jusqu'à ce que la partie soit chargée
Scénario effectué en collaboration avec @Antoine-Guyot
@aurelien45100 @Antoine-Guyot
Etant donné que je clique sur l'item Quand j'accède à la page de l'item Alors le loader apparaît
Essayez le plus possible de réutiliser des étapes déjà définies.
Scénarios d'exemple : https://github.com/Hypertopic/Porphyry/tree/v7/features Étapes réutilisables : https://github.com/Hypertopic/Porphyry/tree/v7/features/step_definitions
Vous verrez par ailleurs, que l'on essaie de décrire les étapes sans imposer quoi que ce soit pour l'interface (sinon vous risquez de contredire ce que vos collègues qui travaillent sur les maquettes vont décider).
Etant donné que je clique sur l'item Quand j'accède à la page de l'item
Fusionnez les deux dans le Quand
. C'est l'action. C'est ce que vous devez décider en premier.
Ensuite, identifiez ce que vous pouvez tester comme résultat (Alors
).
Enfin, déterminez ce qui était différent avant de faire l'action (Soit
).
Et vous n'avez pas répondu à ma question :
C'est quoi le problème concret ? Pourquoi est-ce aussi lent ? Est-ce que vous reformuler (pour l'instant "en français") ce qui est le cas actuel et ce qui serait le cas idéal ?
Pourtant je vous ai déjà donné plein de pistes au début du ticket...
Et vous n'avez pas répondu à ma question :
C'est quoi le problème concret ? Pourquoi est-ce aussi lent ? Est-ce que vous reformuler (pour l'instant "en français") ce qui est le cas actuel et ce qui serait le cas idéal ?
Pourtant je vous ai déjà donné plein de pistes au début du ticket...
J'ai malheureusement une obligation à 17h15 et j'aimerais prendre un temps de refléxion afin de vous répondre plus tard, désolé.
@aurelien45100 Oui, oui, prenez le temps de réfléchir à tout ça.
Et vous n'avez pas répondu à ma question :
C'est quoi le problème concret ? Pourquoi est-ce aussi lent ? Est-ce que vous reformuler (pour l'instant "en français") ce qui est le cas actuel et ce qui serait le cas idéal ?
Pourtant je vous ai déjà donné plein de pistes au début du ticket...
Le problème vient surtout des images qui mettent du temps à apparaître ce qui peut décourager les utilisateurs. Cela vient donc de la qualité de la connexion internet et de la taille des images. Pour corriger tout ça nous pouvons déjà indiquer à l'utilisateur le chargement mais peut-être aussi optimiser les images affichées (notamment avec steatite).
Je vais revoir tout ça avec @aurelien45100 et nous referons nos scénarios.
@Antoine-Guyot @aurelien45100
Pour corriger tout ça nous pouvons (...) optimiser les images affichées (notamment avec steatite).
OK, donc une manière de formuler le résultat du scénario serait de dire que la ressource affichée sera une image compressée avec pertes (et non l'image d'origine comme actuellement). Si le futur binôme en charge des tests ne voit pas comment le tester, je vois au moins une astuce pour le faire (mais qui demande de se mettre d'accord avec le binôme chargé de l'implémentation).
nous pouvons déjà indiquer à l'utilisateur le chargement
Certes. Mais gardez cette solution au cas où la première ne serait pas suffisante.
Soit "vitraux" le portfolio ouvert Et "SJ 001" un des items affichés Quand l'utilisateur choisit l'item "SJ 001"dans le bloc Items ayant le même nom Alors le titre de l'item affiché est "SJ 001" Et la page contient une image compressée par Steatite
Si cela ne convient pas, pouvez-vous être plus précis sur vos retours et sur vos attentes ?
Serait-il possible d'effectuer un appel de 10 minutes pour régler les quiproquos ?
@benel
Merci d'avance.
Scénario effectué en collaboration avec @Antoine-Guyot
@aurelien45100 @Antoine-Guyot
Et "SJ 001" un des items affichés Quand l'utilisateur choisit l'item "SJ 001"dans le bloc Items ayant le même nom Alors le titre de l'item affiché est "SJ 001"
Heu pourquoi vous passez par là alors que vous y étiez déjà ? C'était peut-être pour avoir un quand ? Dans ce cas-là, vous pouvez aussi, tout simplement, partir du portfolio et choisir l'item à afficher...
Et la page contient une image compressée par Steatite
C'est pas mal... Deux pistes d'amélioration peut-être :
Soit "vitraux" le portfolio ouvert Et "SJ 001" un des items affichés Alors la ressource principale est une image compressée
Est-ce qu'un scénario comme celui-ci serait suffisant ? @benel
@aurelien45100
@Antoine-Guyot @aurelien45100
Est-ce qu'un scénario comme celui-ci serait suffisant ?
C'est l"idée, mais il faut quand même choisir d'afficher les détails de SJ 001 (le voir dans la page principale ne suffit pas). Vous n'auriez pas l'équivalent en QUAND de la deuxième étape ?
Soit "vitraux" le portfolio ouvert Et "SJ 001" un des items affichés Quand l'utilisateur choisit l'item "SJ 001" dans le bloc Items ayant le même nom Alors l'item "SJ 001" est affiché Et la ressource principale est une image compressée
J'ai repris le précèdent en remplaçant le "Alors le titre de l'item affiché est "SJ 001" par "Alors l'item "SJ 001" est affiché", cela me semble correspondre à ce que l'on cherche.
@benel @aurelien45100
@Antoine-Guyot @aurelien45100
Comme vu lors de la réunion de suivi, le scénario est suffisamment de qualité pour être considéré comme livré.
J'avais émis une inquiétude concernant le fait qu'il pourrait être cassé par l'implémentation du ticket #382 (puisque SJ 001
ne sera plus affiché au chargement de l'application). Cependant, en y repensant, ce n'est pas forcément le cas : #382 ne concernera que le mode mobile, alors que le scénario ne précise pas le terminal et donc il s'exécute sur la version standard.
@benel
réalisé avec @Antoine-Guyot @dylan-correia @albertelombo
Pour répondre à ce problème, nous pensons que Steatite envoie deux types de liens associés à une même ressource, la photo d’archive et la vignette. Pour améliorer les performances, nous pensons à changer l’image envoyée sur la page de l’item en envoyant la vignette à la place de l’image d’archive.
Nous avons trouvé la partie du code qui impacte le chargement de l’item (photo du vitrail) sur la page d’accueil. Le dossier associé est le dossier Porphyry/src/components/itemPage.
Nous avons cherché dans le fichier /porfolioPage/corpora.jsx pour voir comment était définie une vignette, nous avons pu y voir comment était défini en item et sa vignette “thumbnail” à partir de la ligne 67. En cherchant sur le site Porphyry, nous avons pu retrouver cette “thumbnail” dans l’uri de l’image sur la liste d’items. Sur la page d’un item, ce “thumbnail” (src="https://steatite.utt.fr/thumbnail/5e8f859df6508c4ee2e613c5989e28517f9c3851") est remplacé par un “picture” dans cette même uri (src="https://steatite.utt.fr/picture/2634f0347b19655bb3032163d7af2cfb3094325a"), nous pensons donc que c’est dans le dossier itemPage dans l’un des fichiers ressource.jsx ou item.jsx, que nous devrons remplacer la récupération d’un élément “picture” par le procédé de récupération de la “thumbnail”.
Pas besoin d'appeler des services extérieurs supplémentaires autre que le service Steatite.
@qhainos @Antoine-Guyot @dylan-correia @albertelombo
Comme vu ce matin en réunion (et il me semble aussi dans une autre discussion dont je ne retrouve pas la trace), la résolution de ce qui vous semblait au départ être un problème de Porphyry, va passer non pas par une modification de Porphyry mais par une nouvelle fonctionnalité de Steatite : le calcul d'une version optimisée de l'image (compressée avec pertes mais de même taille que l'original) utilisée en lieu et place de la ressource principale de l'item. Je vous laisse voir comment vous pourriez vous inspirer de ce qui est fait pour générer les vignettes et le transposer pour cette version optimisée.
@benel Bonjour monsieur, nous avons réfléchis à une stratégie d'implémentation pour cette issue avec @Antoine-Guyot @albertelombo @dylan-correia et @CeyFun mais nous avons d'abord besoin de votre avis.
Pour répondre à la problématique de la compression, nous avons analysé le fichier Steatite/src/controller/thumbnail.php et avons pu voir les traitements effectués sur l'image entre la ligne 30 et la ligne 38, à savoir : une parsing en format pnm, le découpage avec pamcut, la mise à l'échelle avec pnmscale puis le retour au format JPEG. Nous n'avons pas trouvé de méthode de compression à proprement parlé au sein de ces lignes qui n'implique pas une redimension ou une coupure de l'image.
Cependant, nous avons trouvé des paramètres pour la fonction pnmtojpeg (à savoir -quality ou -optimize : cf https://www.commandlinux.com/man-page/man1/pnmtojpeg.1.html) pouvant permettre une compression de la taille de l'image. Le paramètre -quality semble particulièrement intéressant car c'est un ratio (de 1 à 100) définissant la qualité d'une image, cela peut servir à avoir une uniformisation des tailles des images sur le site.
Qu'en pensez vous ? Pouvons nous nous baser sur cette analyse pour faire notre stratégie d'implémentation.
@qhainos @Antoine-Guyot @albertelombo @dylan-correia @CeyFun
Comme vous l'avez compris:
pnmtojeg
.Simplifié ça donne ceci (testable dans n'importe quel UNIX-like avec NetPBM installé) :
anytopnm original.jpg | pnmscale -height 100 | pnmtojpeg > thumbnail.jpg
Par contre, ce n'est pas parce que vous n'avez pas de paramètre -quality
qu'il n'y a pas de compression avec pertes (la valeur par défaut est 75%).
@qhainos @Antoine-Guyot @albertelombo @dylan-correia @CeyFun
Petite démonstration de l'intérêt de cette compression avec pertes (même avec la qualité par défaut de 75%) :
curl https://steatite.utt.fr/picture/358d1c9f168311a9fe7bd7e2737c181514652e9d -O
anytopnm 358d1c9f168311a9fe7bd7e2737c181514652e9d | pnmtojpeg > optimized.jpg
ls -lh
Résultats :
-rw-r--r--@ 1 benel staff 4,2M 3 jui 19:30 358d1c9f168311a9fe7bd7e2737c181514652e9d
-rw-r--r--@ 1 benel staff 2,3M 3 jui 19:33 optimized.jpg
Réponse à @benel :
(fait avec @Antoine-Guyot @albertelombo @dylan-correia et @CeyFun )
La partie du code impactée serait dans le fichier : https://github.com/Hypertopic/Steatite/blob/master/src/controller/pictures.php Nous pensons que c’est ce fichier qui est appelé pour envoyer les images d’archives, et ce, sans retouche.
Nous avons pu nous inspirer du code réalisé dans le fichier : https://github.com/Hypertopic/Steatite/blob/master/src/controller/thumbnail.php#L30-L38 La résolution serait alors de transformer la ressource récupérée et la parser en pnm (anytopnm) puis de la parser en jpeg (pnmtojpeg) ce qui effectuerait une compression standard de 75% par défaut. Si les images restent trop lourdes, on appliquera le paramètre -quality au parsing afin de baisser la qualité de manière globale.
Pas besoin d'appeler des services extérieurs supplémentaires autre que le service Steatite.
Merci @qhainos (et @Antoine-Guyot @dylan-correia @CeyFun) pour cette nouvelle version de la stratégie d'implémentation.
https://github.com/Hypertopic/Steatite/blob/master/src/controller/pictures.php Nous pensons que c’est ce fichier qui est appelé pour envoyer les images d’archives, et ce, sans retouche.
Pas vraiment, si vous regardez sur le GET il génère du HTML (la planche contact d'un corpus sur Steatite)... Et sur le POST il permet l'upload des images.
Vous avez peut-être confondu pictures.php
avec picture.php
?
Nous avons pu nous inspirer du code réalisé dans le fichier : https://github.com/Hypertopic/Steatite/blob/master/src/controller/thumbnail.php#L30-L38 La résolution serait alors de transformer la ressource récupérée et la parser en pnm (anytopnm) puis de la parser en jpeg (pnmtojpeg) ce qui effectuerait une compression standard de 75% par défaut. Si les images restent trop lourdes, on appliquera le paramètre -quality au parsing afin de baisser la qualité de manière globale.
Tout à fait.
Pour être tout à fait complet :
picture.php
).thumbnail.php
en optimized.php
et de faire les modifications que vous avez dites (pensez aussi à enregistrer les images optimisées dans nouveau un dossier, par exemple optimized
)..htaccess
(en prévoyant par exemple /optimized/{HASH}
)./controller/item.php
et /view/item.json
(resource
doit pointer vers la version optimisée, et vous pouvez avoir une nouvelle ressource qualifiée par exemple d'original
).@benel Bonjour monsieur,
Je travaille avec @albertelombo sur l'acceptance test qui consiste à vérifier que l'image est optimisée. Nous utilisons xpath pour vérifier que le mot "picture" (qui sera remplacé par "optimized" ensuite) soit présent dans l'uri de l'image.
Lien de l'image que nous voulons tester :
https://steatite.utt.fr/picture/8d27115e20f9439b627ac511ade9a05bbe509130
Ci-dessous notre test qui fonctionne avec le nom de l'image :
Alors("la ressource principale est une image optimisée") do
expect(page).to have_xpath("//div[@class='Subject']//img[contains(@src,'8d27115e20f9439b627ac511ade9a05bbe509130')]")
end
Cependant cela ne fonctionne pas en remplaçant le nom par "picture" alors que contains devrait le permettre. J'ai tester le xpath sur mon navigateur et il m'indique pourtant bien l'élément img.
Pourriez-vous nous indiquer si nous faisons fausse route avec notre xpath ?
@albertelombo @Antoine-Guyot
//div[@class='Subject']//img[contains(@src,'8d27115e20f9439b627ac511ade9a05bbe509130')]
Je vous confirme que votre XPath est bon :
Par contre, à votre place, je l'aurais fait plus simple... Vu que c'est la seule image ayant ce type d'URI, j'aurais mis tout simplement :
Bien entendu, là c'est juste pour essayer avec la version actuelle de Porphyry, mais le vrai test devra avoir optimized
au lieu de picture
.
Pourriez-vous nous indiquer si nous faisons fausse route avec notre xpath ?
Le problème n'est pas avec votre XPath... Pour déboguer votre test, vous devriez faire un test sur le contenu de la page avant de tester votre xpath. Je pense que votre page n'est pas affichée ou que ce n'est pas la bonne.
Ça va aller ?
@benel @albertelombo
Pour le moment nous avons testé avec le scénario suivant :
Scénario: Vérifier l'optimisation d'une image
Soit "SJ 001" l'item affiché
Et la ressource principale est une image optimisée
Car celui que nous avons défini précédemment bloque au niveau du "Quand" :
Scénario : Vérifier la compression d'une image
Soit "vitraux" le portfolio ouvert
Et "SJ 001" un des items affichés
Quand l'utilisateur choisit l'item "SJ 001" dans le bloc Items ayant le même nom
Alors l'item "SJ 001" est affiché
Et la ressource principale est une image optimisée
La ligne Soit "SJ 001" l'item affiché
ne doit-elle pas nous placer sur la bonne page ? Sinon j'ai un peu de mal à comprendre comment tester le contenu de la page avant.
@Antoine-Guyot @albertelombo
Car celui que nous avons défini précédemment bloque au niveau du "Quand" :
Soit "vitraux" le portfolio ouvert
Et "SJ 001" un des items affichés
Quand l'utilisateur choisit l'item "SJ 001" dans le bloc Items ayant le même nom
C'est effectivement incohérent :
Visiblement, vous vous êtes trompé de phrase pour le "quand".
@Antoine-Guyot @albertelombo
La ligne
Soit "SJ 001" l'item affiché
ne doit-elle pas nous placer sur la bonne page ?
Si. Mais si vous regardez sa définition, elle fait appel à la fonction getURI
qui n'a de valeur de retour pour l'instant que pour trois items (et pas celui-ci).
@benel @albertelombo
Je n'avais pas vu que l'item n'était pas défini. Le test fonctionne maintenant, merci beaucoup.
Il faudrait que l'on créé un nouveau "Quand" car je crois qu'aucun ne correspond à notre besoin. Je vais continuer à chercher.
@Antoine-Guyot @albertelombo
Il faudrait que l'on créé un nouveau "Quand" car je crois qu'aucun ne correspond à notre besoin. Je vais continuer à chercher.
Effectivement. Je crois qu'il existait mais qu'il a dû être supprimé au moment où les tests étaient lancés sur un serveur de test avec toutes les données et où le fait de passer par la page d'accueil était trop long.
@benel @aurelien45100 @albertelombo
Ci-dessous le scénario corrigé :
Scénario: Vérifier l'optimisation d'une image
Soit "vitraux" le portfolio ouvert
Et "SJ 001" un des items affichés
Quand l'utilisateur choisit l'item "SJ 001" parmi les items affichés
Alors l'item "SJ 001" est affiché
Et la ressource principale est une image optimisée
Je pense néanmoins que ce scénario vérifie plus que juste l'optimisation de l'image.
Je pense néanmoins que ce scénario vérifie plus que juste l'optimisation de l'image.
Rien ne vous empêche de supprimer les étapes 2 et 4 pour vous focaliser sur ce qui vous intéresse.
@benel @albertelombo
Ci-dessous le scénario que nous avons utilisé en retirant les étapes 2 et 4 :
Scénario: Vérifier l'optimisation d'une image
Soit "vitraux" le portfolio ouvert
Quand l'utilisateur choisit l'item "SJ 001" parmi les items affichés
Et la ressource principale est une image optimisée
@Antoine-Guyot @albertelombo
Et la ressource principale est une image optimisée
Le Et
est un alias pour la conjonction précédente... Il vous faudrait un Alors
et non un Quand
.
@benel @albertelombo
Excusez-moi j'ai fait une erreur en recopiant. Voici le bon scénario :
Scénario: Vérifier l'optimisation d'une image
Soit "vitraux" le portfolio ouvert
Quand l'utilisateur choisit l'item "SJ 001" parmi les items affichés
Alors la ressource principale est une image optimisée
Bravo à @Antoine-Guyot et @albertelombo pour la partie backend ! La nouvelle version de Steatite est en production ! 🎉
Par contre, @Hypertopic/journees-du-patrimoine, aviez-vous prévu une partie frontend (Porphyry) ? C'est juste deux lignes de code, mais elles sont nécessaires si vous ne voulez pas vous faire étrangler par les autres groupes...
Bon, comme je ne pouvais laisser durer la "panne" trop longtemps, j'ai fait la petite correction pour vous : 82fd5b36d25bc20e99b23b0315398e9c52265b8e.
Description
The mobile version takes a long time to load every item when the user tries to consult an item without feedback indicating that the application is loading.
What is the valuable outcome that cannot be achieved because of this bug?
The application could be mistaken as not working, thus the users could give up using it pretty quickly.
For which stakeholder (people, role, project, domain) is it important?
This impacts the end users.
Reproduction scenario
Steps to reproduce the behavior:
Expected behavior
The loading should be quick or at least indicated to the end user.
Environment
Workaround
Wait.
Deliverables status
Phase 1
Phase 2