Lentilles : sélections, filtres et modifieurs

Les lentilles optiques, dans notre quotidien, nous permettent de discerner des détails que nous n’arrivons pas { voir autrement. En visualisation d’information, une approche courante dénommée « focus + context » consiste à mettre en évidence l’information au centre de l’intérêt de l’utilisateur, en conservant une vue macroscopique du contexte entourant cette information. C’est par exemple le rôle de la fenêtre d’aperçu présentée précédemment.

Certaines techniques informatiques sont appelées lentilles car elles permettent de focaliser l’attention de l’utilisateur sur certaines parties de l’information de la carte (figure 6.18). La plus élémentaire est la loupe, qui a le désagrément de masquer l’information immédiatement autour de la région d’intérêt. Pour résoudre ce problème, des distorsions ont été mises en œuvre comme le fish-eye [Sarkar and Brown 1992; Carpendale 1999]. La limite de cette approche est que le texte en périphérie de la lentille est visible, mais déformé et illisible. Il existe alors d’autres techniques interactives permettant de mieux gérer le focus et contexte : la géométrie

hyperbolique qui se révèle difficile à manipuler [Munzner 2000] et la visualisation polaire qui réduit la charge cognitive pour l’utilisateur [Tricot 2006].

En 1981, G.W. Furnas a proposé une distorsion logique (ou discrète) [Furnas 1981]: le texte n’est pas déformé, mais plus une information est éloignée du texte édité (du curseur), plus il est grossier/simplifié. Cette étude se fait dans le cadre de la programmation en C et de la rédaction de documents longs. On ne voit alors apparaître autour du paragraphe en cours d’édition que le plan dans un traitement de texte ou les prototypes de fonction dans un code source. Cette approche évolue alors plus tard en « lentilles magiques » (magic lenses) permettant des distorsions logiques sur une région géométrique définie [Bier, Stone et al. 1993] : afficher une information supplémentaire, changer de couleur, etc.

Avec Prefuse, nous avons expérimenté les distorsions optiques pour visualiser le graphe. Comme les Magic Lenses, elles proposent une information détaillée sur une petite région de l’écran. Dans le contexte d’un grand graphe visualisé { l’aide de forces, les résultats sont insatisfaisants. Le problème n’est pas de détailler la région qui entoure les nœuds, mais de mettre en évidence des éléments d’informations en lien avec un centre d’intérêt, dans un contexte donné. Ce sont les lentilles métier que nous proposons. Cette approche répond à un besoin similaire de celui abordé par les systèmes à base de liens [Cohen-Boulakia, Davidson et al. 2006; Durand, Labarre et al. 2006] : la lentille correspond à un motif de chemin. La différence est que la lentille applique de façon contextuelle { un objet. Le chemin permet d’appliquer des filtres de sélection plus complexes, mais la lentille est interactive et s’utilise plus simplement. Rappelons que la présence des lentilles n’exclut pas la spécification de motifs de recherche.

Loupe [Goscinny, Uderzo et al.

1961] Fish-eye

Fish-eye logique [Furnas 1981] Lentille magique [Bier, Stone et

al. 1993]

Figure 6.18 –Distorsions optiques et logiques

Pour présenter ces lentilles métier, prenons un exemple : nous voulons obtenir un aperçu rapide des regroupements automatiques réalisés dans notre analyse de données d’expression de gènes. Pour cela, nous activons une lentille spécifique : pour un groupe donné, elle met en évidence les gènes qui lui sont associés, et elle affiche les annotations de ces gènes. Très

rapidement, on voit apparaître des groupes de termes corrélés qui font émerger la « thématique » du groupe (figure 6.19). Dans un système à base de chemins, on aurait produit une requête équivalente du type : « groupe(x)  gènes  annotations » qui aurait produit un

résultat non visuel, ne faisant pas émerger de corrélation aussi simplement. De plus, il faudrait spécifier une nouvelle requête { chaque fois que l’on s’intéresse { un nouveau groupe.

Figure 6.19 – Capture de l’application d’analyse de données d’expression : dans cette capture, une lentille est activée ; elle dispose autour d’un groupe de gène choisi l’information fonctionnelle relative (résumés, annotations). Les gènes sont en rose (lie de vin pour les gènes foncé par la lentille et appartenant au « Cluster 10 » sélectionné). Les concepts sont en bleu. Les clusters sont les cercles (rose pour les regroupements flous, verts pour les classements réalisés par Bozdech). Plusieurs observations peuvent être réalisées à partir de cette figure montrant l’émergence d’une information pertinente.

On voit apparaître deux protéines, l’actine et la myosine bien séparées. Ces deux protéines sont caractéristiques de fibres musculaires. Les annotations sont aussi cohérentes, et on distingue rapidement que ce « cluster 10 » regroupe des gènes qui caractérisent l’organisation structurelle de la cellule.

Afin de proposer une fonctionnalité générique et capable de s’adapter à des tâches métiers spécifiques, nous proposons d’assembler une lentille { partir de plusieurs composants génériques et atomiques. La spécification d’une lentille se fait { l’aide de plusieurs types d’objets :

- la lentille décrit le fonctionnement général,

- la sélection est la structure de données contenant les éléments sous l’effet de la lentille,

- le filtre permet de paramétrer la sélection et d’exprimer un motif de façon complète, Myosin A Ensemble d’annotations corres-

- des modifieurs sont des actions associées à la lentille qui lui confèrent son effet visuel.

Il existe plusieurs types de filtres génériques : certains filtres sont fréquemment utilisés (en fonction du type ou d’une classe par exemple), d’autres sont composites, permettent la combinaison de plusieurs filtres existants (composites ou non) pour exprimer des formules plus complexes : et, ou et non logiques.

De la même façon, les modifieurs permettent de spécifier le comportement de la lentille : certains permettent de foncer, d’éclaircir et de rendre opaques certains éléments. D’autres sont plus spécifiques : un modifieur permet d’afficher le descriptif résumé d’un gène en plus du nom. Un modifieur composite permet d’associer plusieurs effets { un élément de données.

Les scripts qui suivent permettent d’illustrer notre propos. Le premier permet de gérer simplement la sélection de plusieurs nœuds en cliquant et maintenant la touche « contrôle » enfoncée ou en réalisant un glisser-déposer pour délimiter une région rectangulaire (un exemple de codage est présenté dans la figure 6.20). Le deuxième est un outil de recherche (figure 6.21) : les éléments qui satisfont l’expression régulière spécifiée sont foncés, ceux éventuellement masqués sont rendus temporairement visibles. Enfin, la dernière est spécifique { l’analyse de données d’expression (figure 6.23) : lorsque l’on sélectionne un regroupement, tous les gènes qui lui sont associés sont mis en évidence, leurs annotations et les publications qui leur sont relatives sont alors disposées à proximité.

1 2 3 4 5 6 7 8 9 10

// Gestion d’une sélection multiples et du retour utilisateur DefaultMultiNodeSelection selection=new DefaultMultiNodeSelection(); this.main_selection= selection;

SelectionRectangleDrawer gmsr= new SelectionRectangleDrawer(this); actionSubset.add(gmsr);

MultiSelectionControl msc=new MultiSelectionControl(selection,gmsr); controls.add(msc);

GenericLense multiselectlense = new GenericLense(); actionSubset.add(multiselectlense);

multiselectlense.coreNodeModifier=new DarkerModifier(); multiselectlense.selection= selection;

Figure 6.20 – Gestion de la sélection multiple

Ce premier exemple (figure 6.20) permet de gérer une sélection de nœuds de l’utilisateur comme cela existe dans les logiciels courants. L’objet DefaultMultiNodeSelection est la structure de données permettant de contenir les nœuds. Elle est affectée comme sélection principale de l’application (on peut envisager par la suite de gérer plusieurs sélections en parallèle). Nous proposons deux façons de sélectionner plusieurs nœuds : on clique successivement sur plusieurs éléments en maintenant une touche définie enfoncée, ou on définit une région rectangulaire sur la carte en réalisant un glisser-déposer. Dans les lignes 3 { 6, l’objet MultiSelectionControl gère cette interaction ; il est paramétré par la structure de données de sélection, et par un objet SelectionRectangleDrawer. Ce dernier est une action consistant en un retour utilisateur : durant le glisser-déposer, un rectangle transparent permet de visualiser l’étendue de la sélection. Le contrôle d’interaction et l’action en retour utilisateur sont ajoutés dans leur listes respectives. Enfin, la lentille est définie dans les quatre dernières lignes. Notons la spécification d’un modifieur DarkerModifier qui a pour effet de foncer les éléments sélectionnés.

1 2 3 4 5 6 7

// déclaration du modifieur qui rend visible et assombrit les nœuds répondant à la requête

AggregateModifier visibleAndDarker=new AggregateModifier(); visibleAndDarker.addModifier(new VisibleModifier()); visibleAndDarker.addModifier(new DarkerModifier()); // déclaraton d’une sélection (la structure de données) this.searchSelection =new SearchSelection(this.graph);

// déclaration de la lentille et ajout à la liste des actions

// la lentille est en charge d’appliquer les modifieurs aux éléments de la sélection this.searchLense= new SearchLense(this.searchSelection,visibleAndDarker,null); actionSubset.add(searchLense);

[…]

// lorsque l’utilisateur ouvre la boite de dialogue, la sélection est donnée en // paramètre à cette boite de dialogue (actuellement, la sélection est considérée // comme une propriété de l’application).

searchBar = new SearchToolBar(this.application);

Figure 6.21 – Script de spécification d’une lentille de recherche textuelle

Dans le second exemple (figure 6.21), on définit une lentille de recherche : une boîte de dialogue préalablement construite permet de saisir une expression textuelle (expression régulière). Dans la pratique, si on rentre une chaîne de caractères dans cette boîte de dialogue, les éléments dont le nom contient cette chaîne sont mis en évidence. Dans notre exemple, l’action réalisée par cette lentille est double : elle rend visible les éléments répondant à la requête s’ils sont masqués et fonce tous les éléments. On introduit donc un modifieur composite (AggregateModifier) dans lequel on insère une modifieur qui rend visible un élément et un second modifieur qui le fonce (resp. VisibleModifier et DarkerModifier). La quatrième ligne déclare une sélection de recherche. La ligne 5 instancie la lentille qui est finalement ajoutée à la liste des actions. Les interactions étant gérées par la boîte de dialogue contenant le champ de saisie de l’expression régulière, aucun gestionnaire d’évènement (contrôleur) n’est impliqué.

Nœud sélectionné Arête étoilée de niveau 1 Niveau 1 (distance 1 d’un

nœud sélectionné)

Arête transversale de niveau 1

Niveau 2 (distance 2 d’un

nœud sélectionné) Arête étoilée de niveau 2 Nœud hors du champ d’action

de la lentille

Arête transversale de niveau 2

_{Arête hors de portée}

Figure 6.22 – Notion de niveau d’éloignement dans la lentille, arêtes directes et transversales.

La dernière lentille est plus complexe ; elle permet de répondre à des requêtes comparables aux chemins des systèmes à base de liens. Elle met en évidence pour un ou plusieurs regroupements choisis interactivement tous les motifs du type : « groupe  gènes  (annotations

| documents) »1 _{et de montrer les liens entre tous ces éléments. Par exemple, si deux sous-} ensembles de gènes sont annotés différemment et si une arête « is-a » relie les concepts de ces annotations, alors la corrélation entre les gènes apparait { l’écran : les gènes sont reliés et regroupés autour d’un même concept. Cette corrélation serait moins visible sous forme d’une liste textuelle. Le motif est donc spécifié de la façon suivante (figure 6.22) : les nœuds sélectionnés font partie du « core », les nœuds { distance 1 et 2 de ce « core » sont dits de niveau 1 et 2. Les arêtes menant directement du « core » { un de ces nœuds sont dites étoilées de niveau 1 ou 2. Enfin, d’autres arêtes sont dites transversales car elles relient des nœuds à 1 _{Le symbole « | » représente le « ou »} 2 1 1 core core 1 1 1 2 2 2 2 1

distance 1 ou 2 entre eux, mais ne correspondent pas à des chemins de longueur 1 ou 2 (respectivement) menant { ces nœuds à partir du core.

Ces termes, illustrés dans la figure 6.22, permettent de comprendre la nomenclature des objets du script suivant (figure 6.23). Les deux premières lignes déclarent la structure de données. Ici, la sélection est plus complexe : elle inclut automatiquement, { partir de nœuds centraux (core), les éléments à une distance 2 (TwoLevelSelection). Elle peut contenir des filtres (Filtered), et en l’état ne peut posséder qu’un seul nœud central (SingleNodeSelection). Il existe une version permettant de sélectionner plusieurs nœuds. La seconde ligne spécifie que l’on prend en charge les arêtes transversales. Si cette option était fausse, on pourrait ainsi restreindre le motif, non plus à un graphe mais à un DAG.

La seconde partie du script définit les filtres correspondant au motif de sélection de la lentille. Le premier filtre (MultipleClassFilter) n’autorise que certaines classes. Ici, il est dédié aux nœuds centraux et ne permet { la lentille de s’appliquer que sur des NodeCluster (regroupements) ou des gènes (qui sont aussi des regroupements flous). Le second filtre (ligne 6) permet de limiter l’extension du motif au premier niveau avec des arêtes correspondant { des regroupements. Le troisième filtre (ligne 7) permet de restreindre les nœuds de premier niveau uniquement { des gènes. Les lignes 8 { 10 restreignent les nœuds { distance 2 des regroupements à des documents ou des concepts. Enfin, les arêtes transversales ont un filtre les limitant à des annotations et des relations sémantiques. Ces filtres ont été instanciés, mais pas encore mis en relation avec la sélection. Ceci est réalisé de la ligne 14 à la ligne 19.

Dès lors, la sélection et son filtrage ont été dûment déclarés. Il faut instancier la lentille, associer des interactions et des effets. La lentille générique à deux niveau de profondeur est nommée GenericLense. Elle est initialement désactivée, l’utilisateur peut l’activer dans un menu. Comme dans les exemples précédents, elle est ajoutée dans la liste des actions. Nous introduisons ensuite de nouveaux modifieurs composites. Le premier est destiné aux arêtes ; il les rend visibles si elles ne le sont pas et rend leur force active si ce n’est pas le cas. Le second est destiné aux gènes : il fonce leur couleur et modifie leur présentation : au lieu d’afficher uniquement le nom du gène, il affiche leur résumé, ce qui correspond au titre ou au produit dans la figure 3.1 (page 82) : suivant le même exemple, on remplace « PF11_0344 » par « PF11_0344 – Apical membrane antigen 1 precursor, AMA1 ».

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

// Création d’une sélection à deux niveaux de profondeur DefaultFilteredTwoLevelSingleNodeSelection selection=

new DefaultFilteredTwoLevelSingleNodeSelection(); selection.setComputeTransversalEdges(true);

// Déclaration des filtres

MultipleClassFilter corenodefilter=new MultipleClassFilter(); corenodefilter.addClass(KMPNodeGene.class);

corenodefilter.addClass(KMPNodeCluster.class);

SimpleClassFilter l1edgefilter=new SimpleClassFilter(KMPEdgeClustering.class); SimpleClassFilter l1nodefilter=new SimpleClassFilter(KMPNodeGene.class); MultipleClassFilter l2nodefilter=new MultipleClassFilter();

l2nodefilter.addClass(KMPNodeConcept.class); l2nodefilter.addClass(KMPNodeDocument.class);

MultipleClassFilter l2transversalfilter= new MultipleClassFilter(); l2transversalfilter.addClass(KMPEdgeSemantic.class);

l2transversalfilter.addClass(KMPEdgeBoolean.class); // Paramétrage de la sélection par les filtres

selection.setCoreNodeFilter(corenodefilter); selection.setLevelOneStarEdgeFilter(l1edgefilter); selection.setLevelOneNodeFilter(l1nodefilter); selection.setLevelTwoNodeFilter(l2nodefilter); selection.setLevelOneTransversalEdgeFilter(l2transversalfilter); selection.setLevelTwoTransversalEdgeFilter(l2transversalfilter); // Instanciation de la lentille

GenericLense lense = new GenericLense(); mouseoverlense.setEnabled(false); actionSubset.add(lense);

lense.selection=selection; // Modifieurs

AggregateModifier visibleAndProcessing=new AggregateModifier(); visibleAndProcessing.addModifier(new VisibleModifier()); visibleAndProcessing.addModifier(new ProcessingModifier()); AggregateModifier genemodifier=new AggregateModifier(); genemodifier.addModifier(new DarkerModifier());

genemodifier.addModifier(new GeneNameModifier()); // Paramétrage des effets de la lentille

lense.coreNodeModifier=genemodifier; lense.firstLevelNodeModifier=genemodifier; lense.firstLevelStarEdgeModifier=new DarkerModifier(); lense.firstLevelTransversalEdgeModifier=visibleAndProcessing; lense.secondLevelNodeModifier=new VisibleModifier(); lense.secondLevelStarEdgeModifier=visibleAndProcessing; lense.secondLevelTransversalEdgeModifier=visibleAndProcessing; // Gestion de l’interaction

SingleClickSelectionControl lensecontrol=new SingleClickSelectionControl(selection); controls.add(lensecontrol);

Figure 6.23 – Script de spécification de lentille d’analyse fonctionnelle de gène

Les lignes 30 à 36 affectent à la lentille ces modifieurs :

- les gènes (regroupements flous ou associés à des regroupements) sont foncés et leurs étiquettes sont détaillées,

- les arêtes sont foncées,

- les documents et concepts sont rendus visibles

- les arêtes reliant documents et concepts sont rendues visibles et actives, ce qui a pour effet de disposer autour des regroupements les annotations et les documents. Enfin, la dernière ligne permet d’affecter l’évènement du clic de souris à la lentille. 37 lignes ont donc été nécessaires pour déclarer cette lentille. De nombreux paramétrages sont possibles, et il est très simple d’étendre les interfaces des filtres, modifieurs, etc. pour créer ses propres outils. Il est possible de modifier l’action, le filtrage, le type de sélection ou l’évènement lié { une

lentille au cours de l’exécution et donc d’envisager que l’utilisateur définisse sa propre lentille interactivement, comme cela est proposé par exemple dans GenoLink [Durand, Labarre et al. 2006].