Leïa Nathan Delyo

Arrangement des fragments sur un grand format, rangés en colonnes pour être facilement lus et parce que c'est plus facile à traiter.

L'ordre d'apparition est encore à décider, entre ordre numérique des ID ou un ordre type Star Wars (4 5 6 1 2 3 3½ 7 8 9... plus aléatoire).

Derrière le texte en noir, des noeuds reliés par des lignes ou flèches en fonction des relations de question-réponse (pour ne pas dire 'parentalité' ndlr.).

Nathan a eu l'idée de faire ça sur le plotteur, parce qu'il permet l'impression à grand format.

Cet exercice permettrait de se familiariser avec la manipulation par le JavaScript DOM et de représenter graphiquement un réseau de nature distribuée.

Piste nathan d'outils: GraphVis

Pseudo-code

Graph vis est un outils Open Source de visualisation de structure en diagrammes. L'outil se base sur le language DOT

   digraph {
     a -> b 
   }

Et avec ce code on peut visualiser une bulle 'a' dont part une flèche qui mène à b.

Peut être demander un structure au init.js de produire par exemple pour le fragment 0001 d'afficher son ID et de si il a un enfant afficher :

   0001 -> 000? // l'ID de son enfant

En fessant cela on pourrai implémenter ces lignes dans graphVis et génère un digramme en SVG.

Donc l'intention en pseudo-code serait

// afficher tout les ID des fragments à la ligne // A chaque ligne si un frgament à un enfant inserer ces deux caractères -> et ensuite afficher tout les ID des fragments réponses qui sont raliés à lui // faire donc une boucle qui pour chaque fragment affiche son ID et si il y a enfant inserer la fleches -> et afficher les ID des enfants qui lui sont rallier // si il y plusieurs enfants concaténer la phrase ou entre chaque ID il y les caractères ->

Code

Construire deux fonction dans le fichier databuilder.js dans lequelle on trouve plusieur fonctions. 1er fonction BuildGraph const buildDigraph = () => { let digraph = ;

Object.keys(fragments).forEach(key => { let line = key + '-> {'; //enfants = fragments[key]['children'] fragments[key]['children'].forEach (reponse => { line= line + reponse + ' '; }) line = line+'}'; digraph = digraph + line + '\n'  ; }); return digraph; }; Avec cette fonction on écrit des ligne qui suivent une structure spécifique. enne commence par L'ID du fragment utilisée ensuite la fonction insère un -> ouvre un crochet { et insère l'ID des enfants/réponses si il a des enfants ce qui donne par exemple : 0005-> {0007 0010 0021 }

Avec un boucle forEach la fonction va examiner l'entièreté de l'objet sur le quelle on travaille et appliquer cette fonction sur chaque fragments. A la fin de chaque recherche de fragment il saute une ligne digraph = digraph + line + '\n'  ; Ce qui donne un resulat comme celui la

0017-> {} 0005-> {0007 0010 0021 } 0007-> {0009 0030 0032 } 0009-> {0025 0019 } 0025-> {} 0010-> {0008 } 0021-> {0035 } 0008-> {0015 } 0015-> {0018 0036 } 0018-> {} 0019-> {0026 } 0026-> {0028 0030 } 0028-> {0035 } 0030-> {} 0027-> {} 0032-> {} 0035-> {} 0036-> {} 0002-> {0011 0024 0025 } 0023-> {} 0012-> {0025 } 0011-> {} 0016-> {0020 0034 } 0020-> {} 0024-> {} 0034-> {0042 } 0039-> {} 0042-> {} 0044-> {} 0003-> {0006 0004 } 0006-> {0004 } 0004-> {0014 0033 0038 } 0014-> {0022 0033 0045 } 0022-> {} 0029-> {0037 0041 } 0033-> {0041 } 0037-> {} 0038-> {0045 } 0041-> {} 0045-> {}

Ensuite a moi d'y ajouter les parametres graph viz qui dans mon cas sont la création d'un diagramme il suffit juste donc d'appeler le diagramme

digraph { 0014-> {0022 0033 0045 } 0022-> {} 0029-> {0037 0041 } 0033-> {0041 } 0037-> {} 0038-> {0045 } 0041-> {} 0045-> {} }