:orphan:

===============================
 TP n°8 : Pages Web dynamiques
===============================

.. highlight:: javascript


Mise en place
=============

Créez un environnement virtuel,
et récupérez `ce projet`__.
C'est une application Flask permettant d'afficher les contenus des tables
`Proteins` et `Domains` de la base Ensembl.

__ https://forge.univ-lyon1.fr/PA.Champin/bioinfo_tp8

Votre travail
=============

Filtrage dynamique
++++++++++++++++++

La vue `domain_list`_ contient une table HTML, dont l'identifiant est ``domains``,
et sa première ligne contient un champs de saisie, dont l'identifiant est ``domain_filter``.
On souhaite pouvoir filtrer les lignes de la table,
en n'affichant que les lignes dont la description contient le texte saisit.

Abonnez vous à l'événement ``input`` sur le champs de saisie,
qui est déclenché à chaque modification.
À chaque fois, passez en revue toutes les lignes dans le ``<tbody>`` de la table,
et modifiez leur attribut CSS display en comparant le texte saisit au contenu de la 2e cellule.

.. hint::

  * Si ``txt1`` et ``txt2`` sont des chaînes de caractères,
    ``txt1.search(txt2)`` retourne -1 si ``txt1`` ne contient pas ``txt2``,
    et retourne la position de ``txt2`` dans ``txt1`` sinon.
  * Notez que n'importe quelle chaîne contient la chaîne vide.

.. _domain_list: http://127.0.0.1:5000/domains/

Mise en évidence réciproque
+++++++++++++++++++++++++++

Dans la vue `domain_view`_,
la table *Proteins* contient toutes les protéines liées au domaine affiché,
et la liste *Related domains* contient tous les autres domaines liés à ces protCours : Programmation coté client en Javascriptéines.
On souhaite, lorsque le pointeur de la souris survole une ligne d'une de ces deux tables,
mettre en évidence les lignes de l'autre table qui lui correspondent
(*i.e.* les protéines liées au domaine survolé,
ou les domaines liés à la protéine survolée).

Ces tables ont pour identifiants respectifs ``proteins`` et ``related``.
Chaque ligne de la table ``related`` a pour identifiant HTML l'identifiant du domaine correspondant.
Chaque ligne de la table ``protein`` a pour classes les identifiants des domaines liés à la protéine.

Vous pourrez donc vous abonner, pour chaque ligne des deux tables,
aux événements ``mouseenter`` et ``mouseleave``.
Le plus judicieux sera de créer quatre fonctions nommées (une par événement et par table),
puis d'itérer sur toutes les lignes et d'abonner les fonctions appropriées à chaque ligne.
Il vous faudra alors utiliser le `paramètre du listener <parametre-listener>`:ref:
pour savoir quelle ligne est concernée par l'événement.

.. hint::

    * La classe ``highlight``, définie par la feuile de style,
      permet de mettre en évidence une ligne de table.

    * L'attribut `classList <attributs_elements>`:ref: vous sera très utile.

.. _domain_view: http://127.0.0.1:5000/domains/IPR011407


Utilisation de l'API
++++++++++++++++++++

Pour chaque domaine, une `vue HTML`_ est disponible,
mais également une `vue JSON`_ (en ajoutant l'extension ``.json`` à l'URL),
qui offre donc une API utilisable par un programme.

On souhaite que, lorsque l'utilisateur clique sur la description courte d'un domaine,
dans la table *Related domain* de la vue `domain_view`_,
la description longue de ce domaine s'affiche.

Pour ce faire,
vous devrez vous abonner à l'événement ``click``
sur les cellules contenant les descriptions courtes,
et faire une requête HTTP à l'API (cf. ci-dessous)
pour récupérer la description longue.

Pour l'afficher, vous pourrez utiliser la fonction Javascript ``alert``,
ou rendre visible le block HTML dont la classe est ``dialog``,
en modifiant son attribut CSS ``display``.

.. hint::

  * Rappelez vous que l'identifiant HTML de chaque ligne de la table est l'identifiant du domaine concerné.
  * Lorsque vous "tenez" une cellule de la table ``c``,
    vous pouvez accéder à la ligne qui la contient avec ``c.parentNode``.
  * Pour faire une requête HTTP qui récupère des données JSON,
    vous pourrez utiliser le modèle de code ci-dessous.

::

        fetch(votre_url_ici)
        .then((resp) => {
            if (!resp.ok) { throw("Error " + resp.status); }
            return resp.json();
        }).then((data) => {
            // data contient les données JSON (sous forme d'un objet)
            // AJOUTEZ ICI le code Javascript qui traite ces données
        }).catch((err) => {
            console.error(err);
        });


.. _vue HTML: http://127.0.0.1:5000/domains/IPR011407
.. _vue JSON: http://127.0.0.1:5000/domains/IPR011407.json