---
jupytext:
  text_representation:
    extension: .md
    format_name: myst
    format_version: 0.13
kernelspec:
  display_name: Python 3 (ipykernel)
  language: python
  name: python3
---

# L'interface de JupyterLab

:::{admonition} Objectif pédagogique
Se familiariser avec l'interface de JupyterLab : gestion de fichiers, manipulation
d'onglets, etc.
:::

JupyterLab fournit un environnement modulaire et flexible pour le calcul interactif et
exploratoire. On y retrouve des fonctionnalités typiques d'environnements de
développement intégrés (IDE), voire de navigation de document.

+++

L'interface de JupyterLab consiste en une zone de travail principale contenant des
onglets de documents et d'activités, une barre de menu, et deux barres latérales
repliables, l'une à gauche et l'autre à droite.

+++

:::{admonition} Contenu typique de la barre latérale gauche
:class: not-prose

% not-prose: disables the current styling of images with large top and bottom margin

|                                                                    |                                                        |
| ------------------------------------------------------------------ | ------------------------------------------------------ |
| ![icône navigateur de fichiers](media/file-manager-icon.png)       | un navigateur de fichiers                              |
| ![icône gestionnaire d'activités](media/resource-manager-icon.png) | un gestionnaire de ressources (activités, noyaux, ...) |
| ![icône table des matières](media/table-of-contents-icon.png)      | la table des matières du document courant              |
:::

+++

Vous y trouverez aussi le gestionnaire d'extensions. Selon les extensions qui sont
installées, d'autres onglets peuvent apparaître.

+++

## Exercice 1 : le navigateur de fichiers

::::{admonition} En vidéo
:class: dropdown

:::{iframe} https://nicolas.thiery.name/Enseignement/Info111/media/screencast-navigateur-de-fichiers.webm
:width: 95%
:class: controls

Vidéo : le navigateur de fichiers de JupyterLab
:::
::::

1. Cliquez plusieurs fois sur l'icône du navigateur de fichier
  ![icône navigateur de fichiers](media/file-manager-icon.png) pour tour à tour afficher
  ce dernier ou replier la barre latérale de gauche.

2. Affichez le navigateur de fichier, et retrouvez-y les éléments suivants :

  - ce document que vous lisez maintenant, typiquement nommé `interface.md` ou `jupyterlab-interface.md`.
  - un répertoire nommé `media`.

3. Faites un clic droit sur le nom d'un fichier (appui long sur tablette ou téléphone).
   Vous obtenez un menu avec les opérations usuelles d'un navigateur de fichiers :
   renommer, copier, coller, ... et quelques autres.

4. Ouvrez le répertoire `media` et consultez en le contenu.

5. Ouvrez, par exemple, le fichier `secret.txt`.

6. Revenez en arrière dans le navigateur de fichier.
   :::{todo} Comment mieux expliquer cela?
   :::

8. Créez un répertoire `bac-a-sable`.

9. Ouvrez le répertoire `bac-a-sable`.

7. Cliquez sur l'icône ![icône lanceur](media/launcher-icon.png) dans le navigateur de
  fichiers pour ouvrir un nouveau *lanceur* d'activité.

8. Utilisez le lanceur pour ouvrir un nouveau fichier texte; celui-ci s'appelle par défaut
  `untitled.txt`. Renommez le en `mon-fichier.txt`. Tapez un peu de texte à l'intérieur du
  fichier puis enregistrez le avec le raccourci clavier <kbd>Ctrl</kbd>+<kbd>s</kbd>.

9. Utilisez à nouveau un lanceur pour ouvrir une nouvelle feuille (notebook) Python.
  Renommez la en `mon-carnet.ipynb`.

10. Vérifiez avec le navigateur de fichier que vos fichiers sont organisés comme suit :
	```
    .
    ├── bac-a-sable
    │   ├── mon-carnet.ipynb
    │   └── mon-fichier.txt
    ├── ...
    ├── interface.md
    ├── ...
    ├── media
    │   ├── file-manager-icon.png
    │   ├── launcher-icon.png
    │   ├── resource-manager-icon.png
    │   ├── secret.txt
    │   └── table-of-contents-icon.png
    └── ...
	```

+++

## Exercice 2 : le terminal

:::{admonition} Le terminal
:class: hint

Le {definiendum}`terminal` est une alternative au navigateur de fichiers; pour interagir avec le
système d'exploitation (lancer un programme, naviguer dans les fichiers, ...). On y tape
des commandes dans une interface textuelle plutôt que de cliquer dans une interface
graphique. Avec un peu d'apprentissage, ce mode d'interaction est très efficace et se
prête à l'automatisation.
:::

Nous nous contentons dans cet exercice de montrer comment ouvrir un terminal et y taper
des commandes.
:::{todo} Pour en savoir plus
:::


1. Utilisez à nouveau un lanceur du navigateur de fichiers pour ouvrir un terminal.

   **Note :** selon votre environnement, le terminal peut ne pas être disponible. Dans ce
   cas, passez directement à l'exercice suivant.

2. Dans le terminal, tapez la commande `ls`, suivie de <kbd>Entrée</kbd>. Vous devriez y
   retrouver le même contenu que dans le navigateur de fichiers, dont `interface.md`, et
   les répertoires `media` et `bac-a-sable`.

+++

## Exercice 3 : la table des matières

- Ouvrez la table des matières de ce document en cliquant sur
  ![icône table des matières](media/table-of-contents-icon.png) dans la barre latérale de
  gauche. Cliquez sur les titres de sections pour naviguer rapidement dans le document.

+++

## Exercice 4 : organiser l'espace de travail

+++

Par défaut, la zone de travail consiste en un unique ***panneau*** contenant toutes les
activités (lanceur, document, feuille, éditeur de texte, terminal, ...) rangées chacune
dans un onglet. Il est possible de restucturer l'espace de travail en disposant ces
activités sur plusieurs panneaux, afin notamment de pouvoir voir plusieurs activités
simultanément. Pour cela, il suffit de déplacer les activités par glisser-déposer du
titre de leurs onglets. Les panneaux eux-même peuvent être redimensionnés par
glisser-déposer des bordures les séparant.

::::{admonition} En vidéo
:class: dropdown

:::{iframe} https://nicolas.thiery.name/Enseignement/Info111/media/screencast-espace-de-travail.webm
:width: 95%
:class: controls

Vidéo : organiser l'espace de travail
:::
::::

1. Réorganisez vos activités pour voir simultanément le fichier `essai.txt` et le
   terminal, l'un dans un paneau à gauche, l'autre dans un panneau à droite.
2. Déplacez la feuille `essai.ipynb` dans un nouveau panneau en dessous des deux
   précédents.
3. Redimensionez les panneaux à votre guise.
4. Repliez la barre de gauche; mettez votre navigateur web en plein écran; zoomez et
   dézoomez avec <kbd>Ctrl</kbd>+<kbd>+</kbd> et <kbd>Ctrl</kbd>+<kbd>-</kbd>, pour
   obtenir le compromis entre lisibilité et visibilité qui vous est le plus confortable.
5. Remettez toutes les activités dans un seul panneau.

+++

## Exercice 5 : le gestionnaire d'activités

1. Ouvrez le gestionnaire d'activités en cliquant sur l'icône
  ![icône gestionnaire d'activités](media/resource-manager-icon.png) de la barre latérale
  de gauche. Vous y trouverez la liste des onglets ouverts, des noyaux en cours
  d'exécution des terminaux ouverts. Utilisez le gestionnaire d'activités pour faire du
  ménage, en fermant tout ce que vous n'utilisez pas.

+++

## Bilan

Dans cette feuille, vous avez exploré les fonctionalités de base de l'interface de
JupyterLab, notamment pour organiser votre espace de travail et faire du ménage dans les
activités en cours.

:::{admonition} Bonnes pratiques
:class: tip

Ajustez régulièrement votre espace de travail en fonction de votre travail en cours :
taille de fenêtre, niveau de zoom, disposition des panneaux, sélection des activités
ouvertes, ... Vous gagnerez ainsi en confort visuel et en efficacité. Le ménage réduira
en outre la consommation de ressources (mémoire utilisée, ...), contribuant à la
robustesse et la fluidité d'exécution, tout particulièrement sur un service partagé aux
ressources limitées (par ex. mydocker).
:::

:::{admonition} ♣ Pour aller plus loin
:class: seealso

Consultez la
[documentation de l'interface JupyterLab](https://jupyterlab.readthedocs.io/en/stable/user/interface.html).
:::
