Voir la source de Leïa Nathan Delyo

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

'''L'ordre d'apparition''' est encore à décider, entre ordre numérique des ID ou un ordre type Star Wars (<s>4 5 6 1 2 3 3½ 7 8 9...</s> 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-> {} 
'''}'''
'''