Représenter la complexité ou complexifier la représentation ?

Une représentation sous forme de graphique est parfois la meilleure façon de représenter la complexité d’un système d’information ou d’une application.

Par exemple, à l’échelle d’une application, un diagramme de classe est souvent plus clair qu’une grande description écrite. En effet, le graphique symbolisant des classes par des boites et des relations par des flèches est on ne peut plus adapté.

À l’échelle du SI, les représentations d’architecture normalisées sont moins convaincantes. Mais au delà de ce manque de formalisme dans les représentations, c’est surtout la réalisation et la maintenance de ces représentations qui sont coûteuses et fastidueuses. Les outils sont souvent peu productifs, qu’ils s’agissent d’outils bureautiques ou d’outils de modélisation. Si les données à représenter existent déjà sous une forme structurée, il est possible de réaliser une large partie de ces représentations avec une certaine forme d’automatisation, ce qui pourtant reste très peu présent dans les outils courants.

L’objectif de cet article est de proposer une approche simple pour automatiser la représentation graphique de données structurées. Cette approche a été validée par une première implémentation.

Les types de problèmes à traiter

La première question à se poser porte sur le sens que donne une
représentation. En effet, une position relative, un alignement, ou encore un
style de flèches ou une couleur peuvent avoir une sémantique particulière dans
le graphique : des boites de la même forme sont du même type, un alignement de
plusieurs étapes représente un flux, etc.

De plus, selon le type de graphique, un même élément peut avoir plusieurs
types de représentations ou encore plusieurs dispositions différentes. Dans
notre exemple du diagramme de classe, la représentation de la classe est faite
sous forme de boite rectangulaire contenant les attributs et les méthodes, alors
que dans le cas d’un diagramme de séquence, cette même classe sera au sommet
d’une ligne vertical depuis et vers laquelle les méthodes appelées seront
reliées.

Dans l’optique d’une représentation graphique, il y a donc plusieurs aspects
que nous allons considérer : les styles, le placement et enfin le routage. Il
est donc primordial d’avoir un paramétrage commun qui permette à la fois de
définir tous ces aspects mais aussi de sélectionner les éléments sur lesquels ce
paramétrage doit s’appliquer. L’approche retenue sera un paramètrage déclaratif
sous forme de règles. En effet celui-ci permet de de pouvoir facilement se
rattacher à un type d’objets, à un attribut, etc., tout en donnant une syntaxe
claire.

Style

Tout d’abord, le style des éléments pourra être personnalisé. Couleur, forme,
transparence, etc. pourront ainsi être renseignés dans les règles. Mais le point
clé est que ces styles peuvent avoir une signification dans le graphique : des
éléments d’une couleur de plus en plus foncé en fonction du nombre de leur
liens, une flèche en pointillés pour des liens d’une certain nature par
exemple. Le style est donc déterminé par des attributs qui caractérisent un
objet, son type (application, classe, ligne de vie d’un objet) et d’autres
attributs qui le définissent, comme par exemple la distinction synchrone,
asynchrone pour les fleches dans un diagramme de séquence.

De plus, ces aspects graphiques peuvent avoir eux aussi une incidence sur le
placement des éléments. Par exemple, on peut vouloir contraindre un objet à être
d’une certaine taille ou forme, et alors les autres éléments autour de celui-ci
devront prendre en considération cet aspect de style.

Placement

De la même façon qu’un style peut avoir une signification, un placement aussi
peut porter une sémantique particulière. Le cas le plus parlant est sans doute
celui de l’arbre, dans lequel les éléments d’un même niveau hiérarchique seront
sur un même niveau visuel. De même, pour reprendre l’exemple du diagramme de
classe, on peut se placer dans une logique où les attributs sont traités de la
même manière que les objets. Alors le nom de la classe doit être au dessus
dans une case séparée, suivie de deux autres cases pour respectivement les
attributs et les méthodes, chacune sous forme de liste.

Ces placements peuvent correspondre à une norme ou à une simple
standardisation adoptée pour un type de graphique. Le placement est donc porteur
de sens et à ce titre constitue une contrainte à satisfaire. Cela peut-être un
alignement, un positionnement relatif, un chevauchement ou encore un groupement
logique. Ces groupements logiques sont par exemple le plus souvent représentés
par une inclusion visuelle d’un ou plusieurs éléments dans un autre. Alors
l’élément englobant devra prendre en compte les caractéristiques ( taille, marges) de ses éléments fils pour sa propre
disposition.

Pour chaque regroupement d’objets, des dispositions spécifiques pourront être
adoptées. Les trois dispositions de base qui ont été implémentées sont :

  • en grille (celle-ci permettant également de réaliser une ligne
    horizontale ou verticale selon le nombre de lignes et de colonnes) ;
  • en cercles, avec des éléments fils sur un cercle centré sur le père ;
  • en arbre.

Au delà de ces contraintes de placement, une optimisation du placement est
souvent bénéfique. En effet, même sous une ou plusieurs contraintes, un certain
degré de liberté peut perdurer pour les objets, et alors un algorithme peut être
utilisé pour optimiser le positionnement. C’est notamment cette phase qui permet de
rendre la représentation plus visuelle et naturelle en éloignant les blocs qui
ne sont pas reliés entre-eux, et en rapprochant ceux qui sont reliés comme s’ils
étaient joints par des ressorts. Cette optimisation peut être atteinte avec un
algorithme de type

Force-directed
.

Routage

Même si les entités supportent souvent la majeure partie des règles de
positionnement, les relations sont toutefois aussi à prendre en compte. Et
de la même manière qu’on parle de disposition pour les éléments, on parle de
routage pour un lien. Ainsi plusieurs aspects sont importants à considérer :

  • le ou les libellés du lien (par exemple un libellé au centre du trait et des libellés aux extrémités) ;
  • le choix des points d’ancrage en fonction du sens de la relation, du placement relatif des objets, du nombre de relations qu’ont les objets et de la sémantique qui est donnée aux différents ports ;
  • et pour finir le routage en lui-même, qui est composé de deux choses : la
    stratégie, qui peut consister à minimiser la longueur, le nombre
    d’intersections, etc., et le type de ligne, comme une courbe de Bézier ou des
    liens orthogonaux.

Cas d’usage

Le cas le plus simple à envisager est l’inclusion d’un élément dans un autre
c’est le cas d’une boite qui en contiendrait plusieurs autres, par exemple
pour affiché les traitements exécutés par une application à l’intérieur de
celle-ci. Cette boite père devrait de par sa nature avoir une taille qui
s’adapte à la taille de ses fils et à leur disposition. Dans la même idée,
l’algorithme doit pouvoir être appliqué tout en respectant les contraintes,
comme l’illustre la figure ci-dessous.

Blog_graphslide17

Mais cela devient encore plus délicat quand ces contraintes se composent. Un
exemple de cette composition de contraintes est illustré ci-dessous à gauche.
Dans celui-ci, on contraint les rectangles arrondis à être alignés
verticalement, et les formes bleues à être alignées horizontalement. Dans cette
configuration un rectangle arrondi bleu doit se trouver au croisement de ces
deux regroupements, si bien que les deux systèmes de contraintes
(un pour les rectangles, l’autre pour les formes bleues), se
retrouvent liés. Ainsi, le premier système s’articule initialement autour de
deux inconnus, de même pour le second, mais la composition des deux n’aura
globalement que deux inconnus. En effet, la composition induit une relation
entre les inconnus du premier système et ceux du second.

Blog_graphslide19

Le dernier cas, illustré dans la figure ci-dessus à droite, est encore plus
complexe. Dans ce cas on exige un alignement vertical des formes bleues, et les
rectangles arrondis sont eux disposés en grille. Alors on remarque que
l’organisation interne de la grille est dépendante d’une contrainte externe.

Proposition de résolution de ce problème

Le modèle général

Le modèle général envisagé fonctionne par composition de règles, de telle
manière que chaque élément peut être contraint par rapport à n’importe quel
autre élément.

Le déroulement se fait en trois étapes :

  • assembler les contraintes : déclarer pour chaque élément les relations
    qu’il dispose par rapport aux autres ;
  • résoudre le système de contraintes pour identifier les degrés de liberté
    restant à optimiser ;
  • appliquer l’algorithme de résolution par rapport aux degrés de liberté
    précédemment identifié.

Le modèle adopté en première approche

Malheureusement le précédent modèle, bien que non restrictif, s’avère d’une
complexité importante. Pour faire une première implémentation, nous nous sommes
donc restreint. En effet, un
premier modèle de contraintes hiérarchiques permet de réaliser une grande
partie des besoins, et on ne veut pas complexifier les cas simples au nom de
quelques cas compliqués, les 20% de cas restants à supporter pouvant induire 80%
de complexité supplémentaires…

Hiérarchique, c’est à dire qu’un élément n’est contraint que par rapport à
son père. Ainsi, les éléments sont tous disposés selon un arbre. Les avantages
sont multiples : déjà, le parcours des éléments est grandement simplifié, et
ensuite il n’y aura plus besoin de résoudre les contraintes dans le sens où il
ne pourra plus y avoir plusieurs contraintes sur un même élément. À l’inverse,
ce modèle induit des limitations, notamment dues au fait de se restreindre à une
architecture en arbre. Un élément ne pouvant être contraint que par rapport à un
seul autre élément, on empêche certains cas d’usage tels que la structure en
croix précédemment illustrée.

Le moteur de mise en forme fonctionne donc de façon récursive en parcourant
l’arbre des éléments. À chaque niveau, le moteur demande donc à ses enfants de
se mettre en forme, et chacun d’eux lui renvoie une boite rectangulaire dont les
dimensions sont calculées pour contenir l’enfant et ses petits enfants dans une
configuration donnée.

L’algorithme du moteur de mise en forme comporte 2 étapes principales :

  • une première passe qui depuis la racine du graphique entraîne par
    récursion la mise en forme des enfants. Cette mise en forme consiste à
    positionner les éléments fils relativement au père et à définir la taille
    du container nécessaire pour contenir tous les fils. Ce container n’est pas
    forcément représenté graphiquement, ce sont uniquement ses dimensions qui sont
    utilisées pour ensuite mettre en forme les éléments du niveau supérieur.
  • Une seconde passe, à nouveau récursive depuis la racine, pour calculer à
    partir des positions relatives des éléments leur position absolue sur le
    graphique. Chaque élément, dont la position a été calculée relativement à son
    père, peut simplement calculer sa propre position puis continuer la récursion en
    demandant la même opération à ses fils.

La descente dans l’arbre peut suivre deux types de relations : des relations portées par des données (liens entre objets) qui se retrouvent directement entre les objets graphiques et des relations d’inclusion qui sont matérialisée par des objets que nous avons appelés « ports d’inclusion ». Ce
sont des espaces de forme rectangulaire qui vont pouvoir réceptionner des
éléments selon une configuration établie. Ces ports sont vus comme des enfants
de l’élément, et à ce titre ils s’insèrent de façon identique dans la récursion
et leur fonction de mise en forme renvoie elle aussi une boite aux dimensions
calculées par son contenu.

Cette homogénéité de la méthode permet toute combinaison de mise en forme :
on peut insérer une grille dans un arbre, lui-même dans une autre grille,
etc.

Implémentation

Une implémentation de cette approche a été réalisée. Elle s’appuie sur
un moteur de règles et une implémentation en Javascript, HTML5 et Canvas.

Voici quelques exemples de représentations obtenues automatiquement à partir
d’un jeu de règles et de données d’entrée structurées. Le modèle de données utilisé ici est le modèle enioka des flux entre applications. En particulier, les objets représentés sont des flux contenant des étapes qui ont des stocks de données en entrée et en sortie, ces stocks appartenant à des applications.

Blog_graphenioka

Voici ci-dessus un exemple de ce qui a été obtenu à l’issu de la première
implémentation. Il s’agit d’un diagramme de flux représentant les
différentes étapes du flux alignées, ainsi que les applications en dessous,
en grille de même hauteur de ligne, classées (et non optimisées pour le moment)
pour minimiser le croisement des liens, et contenant des stocks de données,
dont les liens avec les étapes du flux représentent des accès en lecture et
en écriture selon le sens de la flêche. Tout ceci est généré de manière
automatique depuis un ensemble de données structurées.

Conclusion

Il s’agit d’une première étape dans l’automatisation des représentations
automatiques de modèles. Tous les modèles ne se prêtent pas à ce type de
représentation automatisée par des règles. Une évolution pourrait être de
combiner génération automatique et disposition manuelle. Le moteur étant en
charge de générer les formes, les styles, le placement initial et d’assister
les modifications manuelles pour vérifier que certaines règles sont toujours
respectées.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *