GraphDash, ou comment construire une interface web simple pour vos graphes

Posté par Alex le 29 juin 2016 à 11:53. Édité par Benoît Sibaud et claudex. Modéré par ZeroHeure. Licence CC By‑SA.

Étiquettes :

juin

2016

GraphDash est un outil développé en Python (avec Flask) et publié sous licence Apache v2.

Il permet de construire une interface web à partir de graphes dont vous disposez. Il vous suffit simplement d'ajouter un fichier contenant des métadonnées. Par exemple:

$ ls default_graph_dir
graph.svg
graph.txt

graph.svg est votre graphe, et graph.txt contient quelques métadonnées au format YAML:

$ cat default_graph_dir/graph.txt
name: graph.svg
family: Category 1
title: '*Real serious* graph'

Vous pouvez bien évidemment placer autant de graphes que vous le souhaitez dans le répertoire, et ensuite lancez GraphDash. Vous obtiendrez une interface web permettant de naviguer, chercher et d'afficher vos graphes.

$ GraphDash -r default_graph_dir
* Running on http://0.0.0.0:5555/ (Press CTRL+C to quit)

Illustration de l'interface de GraphDash

Installation

L'installation peut se faire depuis le package Python (ici en espace utilisateur):

pip install --user graphdash

Démarrer GraphDash

Pour l'installation en espace utilisateur, vérifiez que votre $PATH inclut ~/.local/bin.

$ GraphDash -r default_graph_dir
* Running on http://0.0.0.0:5555/ (Press CTRL+C to quit)

L'interface peut être configurée avec un fichier au format YAML (lui aussi), et l'option -c/--conf:

$ cat docs/example.conf
root: ../default_graph_dir
title: "Example of title ;)"
subtitle: "Example of subtitle"

$ GraphDash -c docs/example.conf
* Running on http://0.0.0.0:5555/ (Press CTRL+C to quit)

Un exemple de fichier de configuration peut être généré comme cela:

$ GraphDash -C template.conf

En production avec Gunicorn

Si vous souhaitez pouvoir facilement démarrer, arrêter et relancer plusieurs instances de GraphDash, alors il est plus simple et plus performant d'utiliser Gunicorn:

pip install --user gunicorn

L'application GraphDash peut être importée via graphdash:app, donc vous pouvez utiliser:

gunicorn -b 0.0.0.0:8888 --pid server.pid graphdash:app

Le fichier de configuration de GraphDash peut être défini via la variable d'environnement CONF.
Avec Gunicorn, vous pouvez définir une variable d'environnement dans les instances avec --env:

gunicorn -b 0.0.0.0:8888 --pid server.pid --env CONF=docs/example.conf graphdash:app

Ces commandes sont encapsulées dans un script appelé GraphDashManage qui permet de démarrer, arrêter et relancer plusieurs instances de GraphDash. GraphDashManage a besoin d'un fichier de configuration définissant les différentes instances et leur fichier de configuration:

$ cat settings.sh
ALL_MODES=(
   ['prod']="docs/example.conf"
   ['test']="docs/example.conf"
)
ALL_PORTS=(
   ['prod']=1234
   ['test']=5678
)
WORKERS=3

Et voilà, vous pouvez gérer vos instances de cette manière:

$ GraphDashManage start prod
[INFO] Listening at: http://0.0.0.0:1234
[INFO] Booting worker with pid: 30403
[INFO] Booting worker with pid: 30404
[INFO] Booting worker with pid: 30405

$ GraphDashManage start test
[INFO] Listening at: http://0.0.0.0:5678
...

NdM: les exemples donnés ici sont illustratifs, évitez si possible de le mettre en écoute sur 0.0.0.0 en prod pour limiter les accès non prévus.

Aller plus loin

GitHub (281 clics)
Site (1128 clics)

# Intéressant...

Posté par nlhss (site web personnel) le 29 juin 2016 à 14:38. Évalué à 4.

Salut,

J'ai quelques questions en fait, pour mieux comprendre à quel besoin répond ce logiciel.

Si j'ai bien compris, il ne permet que de faire de la représentation de graphes déjà produits, (par exemple avec matplotlib) mais il ne permet pas de prendre des données brutes et de modifier leur représentation.
- [^] # Re: Intéressant...
  
  Posté par Alex le 29 juin 2016 à 14:56. Évalué à 1.
  
  Tout à fait!
  - [^] # Re:Intéressant...
    
    Posté par Juke (site web personnel) le 29 juin 2016 à 15:05. Évalué à 6.
    
    Et du coup quelles sont les differences entre ça et servir le repertoire contenant les svg/png en http ?
    - [^] # Re:Intéressant...
      
      Posté par Alex le 29 juin 2016 à 15:15. Évalué à 2.
      
      GraphDash ajoute la possibilité de naviguer, chercher et partager les graphes facilement (il peut y en avoir des milliers). C'est par exemple utile pour un job qui génère des graphes quotidiennement, et qui seront ensuite disponibles sur cette interface où plusieurs personnes peuvent accéder. En outre, l'interface est configurable (textes, titres, mots-clés).
      L'idée est inspirée de Jekyll, le moteur de blog qui se base sur du markdown pour générer un site web statique.
      - [^] # Re:Intéressant...
        
        Posté par benoar le 01 juillet 2016 à 15:48. Évalué à 5.
        
        Et pourquoi ne pas intégrer les méta-données dans le SVG même, comme la balise metadata le permet ? Tu crées un namespace pour tes besoins et ajoute les éléments que tu veux, en utilisant du classique XML plutôt que du YAML. Comme ça pas de problème pour garder en cohérence tes deux fichiers quand tu les bouges… (et j'approuve l'idée d'avoir un premier niveau de classification par des dossiers, même si on pourrait quand-même rechercher sur d'autres méta-données si on veut).
        
        [^] # Re:Intéressant...
        
        Posté par Alex le 01 juillet 2016 à 16:35. Évalué à 3.
        
        Je préfère avoir des métadonnées indépendantes de l'image. Comme cela on peut facilement mettre à jour l'image sans toucher aux métadonnées. Aussi les métadonnées sont simples à éditer, par un humain ou par un programme. De plus, tous les formats d'images affichables dans un navigateur sont supportés (jpg, png, etc.), pas uniquement le svg. Les chemins sont relatifs dans les métadonnées (le chemin de l'image par rapport au fichier de métadonnées), donc pas de soucis pour déplacer des dossiers/sous dossiers. Enfin, c'est l'attribut "family" qui permet de classer les images dans des groupes, et on peut passer une liste afin de pouvoir créer une arborescence complète au niveau du site (comme ["category 1", "subcategory"] pour un graphe donné).
        
        [^] # Re:Intéressant...
        
        Posté par Pierre Jarillon (site web personnel) le 03 juillet 2016 à 11:48. Évalué à 7.
        
        Il y a intérêt à mettre les métadonnées dans le même fichier que les données. Pour faire simple, si je mets la signification d'une image dans l'image (wrjpgcom), je suis sûr que si je donne l'image à quelqu'un, il aura aussi ce commentaire (rdjpgcom), même si on renomme l'image. Un script de quelques lignes peut instantanément refaire la liste des fichiers avec leurs signification.
        
        Si au contraire, il y a des images, des commentaires et un logiciel pour faire la relation, on a toutes les chances de ne plus pouvoir le faire quelques années plus tard. Cette solution n'a pas de pérennité assurée, elle n'est valable que sur du court terme.
        
        [^] # Re:Intéressant...
        
        Posté par claudex le 02 juillet 2016 à 11:33. Évalué à 4.
        
        Et pourquoi ne pas intégrer les méta-données dans le SVG même, comme la balise metadata le permet ?
        
        Ça permet de récupérer plus facilement des svg générés par un outil sans que ce dernier permette ce genre de modification ou que le SVG soit destiné à un autre affichage.
        
        « Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche
        
        [^] # Re:Intéressant...
        
        Posté par benoar le 07 juillet 2016 à 16:43. Évalué à 2.
        
        Ça permet de récupérer plus facilement des svg générés par un outil sans que ce dernier permette ce genre de modification ou que le SVG soit destiné à un autre affichage.
        
        Je ne suis pas sûr d'avoir compris : tu dis que ça permet d'éviter qu'un outil n'écrase ces méta-données, en gros, c'est ça ? Si c'est le cas, il ne respecte alors pas la « bonne » manière de traiter du XML, puisque par sa définition « d'eXtensible », tout programme qui traite du XML ne doit pas toucher aux structures qu'il ne connaît pas (qui sont dans un namespace différent, donc). L'idéal serait donc de corriger cet/ces outil(s).
# Formats

Posté par claudex le 02 juillet 2016 à 11:36. Évalué à 5.

Est-ce que ça ne gère que le SVG ou on peut aussi afficher du PNG ?

Pourquoi utiliser l'extension txt pour des fichiers yaml ? C'est ennuyeux pour avoir la coloration syntaxique avec les éditeurs de texte.

« Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche
- [^] # Re: Formats
  
  Posté par Alex le 03 juillet 2016 à 16:25. Évalué à 2.
  
  Tous les formats sont gérés tant qu'ils le sont par le navigateur. Pour l'extension txt, j'ai ouvert une issue sur GitHub. La raison initiale était que les fichier txt sont directement affichés dans le navigateur et que cela facilitait le debugging, mais il n'y a aucune raison de se limiter à cela.
# PictureDash

Posté par steph1978 le 06 juillet 2016 à 16:53. Évalué à 4.

Ça a l'air intéressant comme application. D'autant plus que j'aime bien travailler avec Flask. Je vais donc regarder ton code.

Par contre, je propose un autre titre : PictureDash.
Ton besoin était sûrement d'afficher des graphes mais au final, il affiche des images.
Et ne semble pas proposer de fonctions liées au fait que ce soient des graphes et donc que cela comporte des axes, des données, etc.
- [^] # Re: PictureDash
  
  Posté par Alex le 07 juillet 2016 à 10:35. Évalué à 2.
  
  Alors c'est vrai que le nom GraphDash peut induire en erreur, mais l'objet principal de l'outil est de pouvoir partager des graphes, même s'ils ne sont vus que comme des images. En réalité, tu peux même ne pas mettre d'image (il suffit de ne pas écrire l'attribut name dans les métadonnées), juste texte et titre qui pourront être formaté via markdown (s'il y a du code, il sera coloré avec Pygments). Ainsi tu pourras en faire un blog ;).
  - [^] # Re: PictureDash
    
    Posté par steph1978 le 07 juillet 2016 à 19:25. Évalué à 2.
    
    BlogDash !

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.