Infos générales sur le dashboard

Infos générales sur le dashboard

Ajouter un nouveau widget au dashboard

Ajouter un lien symbolique dans dist/css vers le css du widget. Exemple : cd dist/css; ln -s ../../../tabular-data-widget/dist/css/tabularDataWidget.min.css
Ajouter un lien symbolique dans dist/js vers le javascript du widget. Exemple : cd dist/js; ln -s ../../../tabular-data-widget/dist/js/tabularDataWidget.js. En production, il faut utiliser le fichier .min.js
Éditer le fichier index.html pour y inclure ces fichiers. Ajouter aussi toutes les librairies js externe. Exemple :

    <!-- AladinLite widget.  jQuery must be loaded. -->
    <link rel="stylesheet"
          href="//aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
    <script src="//aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js"
            charset="utf-8">
    </script>
    <script src="js/aladinLiteWidget.js"></script>
    <link rel="stylesheet" href="css/aladinLiteWidget.min.css" />

Définir le widget comme une référence externe dans webpack.config.js. Exemple : external: { AladinLiteWidget: 'window.AladinLiteWidget' }
En début du fichier src/js/main.js, créer une constante pour accéder au nouveau widget. Exemple : const TabularDataWidget = require('TabularDataWidget')
Dans le même fichier src/js/main.js, un peu plus bas, mettre à jour la constante allWidgets pour ajouter ce widget à la liste des widgets connus. Exemple : const allWidgets = [LoaderWidget, SimpleWidget, AladinLiteWidget]

Intégrer un widget du dashboard dans le portail CDS

Modifier le fichier `index.html`

Dans le portail, il faut inclure le javascript et le css pour le composant :

<script src="components/js/utilities.min.js"></script>
<link rel="stylesheet" href="components/css/aladinLiteWidget.min.css" />
<script src="components/js/aladinLiteWidget.min.js"></script>

Le fichier utilities.min.js est à inclure une seule fois. Il est commun à tous les widgets du dashboard. Il faut aussi retirer le code et le css du widget du portail que le widget du dashboard remplace.

Modifier le fichier `PortalMain.js`

Il faut initialiser le widget du dashboard :

new window.AladinLiteWidget().initialise(aladinComponentDivId, window.postal, false)

Le portail crée un Component (voir le code de PortalMain.js). Ce composant fournit un div, qui est mémorisé, et doit aussi être fournit au widget, comme 1er argument. Le 2e argument est la référence à postal. Le 3e argument indique si le widget fonctionne dans le dashboard ou pas. Dans le portail, ce n'est pas le cas, d'où le false. Il faut supprimer la ligne créant le widget du portail qui est remplacé.

Liste des événements postal échangés

Nom	Données	Émetteurs	Traité par	Commentaire
table.load.votable	data.url, data.table-id, data.name	LoaderWidget	votableLoader	Les widgets ne devraient pas traiter cet événement. C'est le dashboard qui le fait, et émet l'événement `table.load.table` avec les données parsées.
table.load.data	data.url, data.table-id, data.name, data.table	votableLoader	- Le dashboard : il mémorise les votables chargées, pour pouvoir les donner à l'initialisation des widgets qui sont créés après le chargement. - LoaderWidget (pour afficher le succès du chargement). - VotableViewerWidget - Et d'autres devraient le faire aussi : AladinLite, …	Tous les widgets traitant une votable. Aucun widget ne doit modifier ces données, parce qu'elles sont partagées.
table.load.fail	data.url, data.table-id, data.name, data.message	votableLoader	LoaderWidget	Signale qu'une votable n'a pas pu être chargée. Le message donne (peut-être) une indication de la raison. Ça permet à celui qui a demandé le chargement de la votable d'afficher un message d'échec.

Les différents modules du dashboard

Le dashboard est composé de plusieurs modules. Certains de ces modules sont réutilisables ailleurs, par exemple dans le portail du CDS, ou bien si un widget est utilisé seul sur sa page.

Nom	Fichiers	Utilité
utilities	utilities.min.js	Boîte à outils générale concernant : logs, array, string, etc… Ça peut servir partout.
simpleSamp	simpleSamp.min.js	Embarque `samp.js`. Fournit une API super simple pour envoyer un message samp. Ce module est à utiliser à la place de `webSamp.js`.
votableLoader	votableLoader.min.js	Se met à l'écoute du message postal `table.load.votable`, récupère la votable depuis internet, parse le résultat, puis envoie le message postal `table.load.data` avec la votable en données. Envoi le message postal `table.load.fail` en cas d'échec du chargement. Ça peut servir si un widget est seul sur sa page. Il n'y a aucun affichage. Le but est que le fichier ne soit téléchargé et parsé qu'une seule fois, puis que tous les widgets utilisent les données. Il vaut mieux qu'aucun widget n'altère les données, puisque cela peut avoir un impact sur les autres widgets.
dashboard	dashboard.min.js, dashboard.min.css, portal-widgets.min.css	Le point d'entrée du dashboard. Il y a de nombreuses autres librairies externes qui sont utilisées (jquery, fontawesome, …), voir `index.html` pour une liste complète.
InformationWidget	InformationWidget.min.js	Un widget qui affiche la liste des votables qui ont été chargées.
LoaderWidget	LoaderWidget.min.js	Un widget qui permet de saisir une URL, puis émet le message postal `table.load.votable`. Ce message sera probablement traité par le module votableLoader, à moins que certains widgets préfèrent le traiter eux-même.

es2015 aka es6

Le dashboard utilise la syntaxe de es2015 dans son code. Le transpiler de babel est utilisé pour convertir ce code pour les anciens navigateurs. Pour l'utilisation des nouvelles fonctions définies dans es2015, babel-polyfill est utilisé, mais seule les fonctions vraiment utilisées sont ajoutées dans le code. C'est le fichier utilities.js qui initialise les polyfills. Ce fichier est utilisé par tous les widgets, qui y ont ainsi accès. Les méthodes utilisées sont :

array.findIndex
array.find

S'il faut en rajouter de nouvelles, il suffit d'ajouter une ligne au début du fichier utilities.js, comme pour les fonctions déjà incluses.

On utilise les fonctions définies sur les prototypes, et pas les fonctions définies en tant que librairie. Cela permet de supprimer les polyfills une fois qu'on se passe de la compatibilité avec les anciens navigateurs, sans avoir plus de code à modifier que celui dans utilities.js. -- PascalWassong - 2017-04-11