Schéma de base de données

L’éditeur de schéma BDD est une vue spécialisée disponible pour les nodes de type base de données du canvas. Il permet de modéliser visuellement les tables, leurs colonnes, et leurs relations (clés étrangères, cardinalité, actions ON DELETE / ON UPDATE).

💡 Cet éditeur est distinct du canvas réseau : le canvas modélise la topologie des services, le schéma BDD modélise la structure interne d’une base. Les deux cohabitent — un node Postgres sur le canvas peut avoir son schéma de tables propre.

📷 [IMAGE — vue d’ensemble schéma BDD] (à venir)

1. Accéder à l’éditeur

1. Depuis le canvas d’un projet, sélectionne un node de type base de données (PostgreSQL, MySQL, MongoDB, etc.).
2. Dans le panneau Node de droite, clique sur le lien / bouton « Voir le schéma » (ou ouvre directement l’URL /projects/{id}/db/{nodeId}).
3. L’éditeur s’ouvre dans une vue plein écran avec son propre breadcrumb.

💡 Le bouton n’apparaît que sur les nodes typés database — pour les autres types de services, l’option est masquée.

2. Organisation de l’écran

┌──────────────────────────────────────────────────────────┐
│  Breadcrumb · Connexion · Undo · Import · Export · +     │
├────────────────────────────────────────────┬─────────────┤
│                                            │  Panneau    │
│   Canvas ReactFlow (tables + relations)    │  Table OU   │
│                                            │  Relation   │
│   ┌──────────┐    ┌──────────┐             │             │
│   │ users    │───►│ orders   │             │             │
│   │  id PK   │    │  id PK   │             │             │
│   │  email   │    │  user_id │             │             │
│   └──────────┘    └──────────┘             │             │
│                                            │             │
│  Controls (zoom, fit view) en bas à gauche │             │
└────────────────────────────────────────────┴─────────────┘

3. Header (breadcrumb + toolbar)

Fil d’Ariane

• 🏠 Dashboard
• Nom du projet (lien → canvas)
• 🗃️ Nom du node BDD (avec icône ambre)
• Schéma

Boutons d’action

Bouton	Effet
🟢 / 🟡 / 🔴 Save indicator	Pastille colorée + tooltip « Enregistré » / « Sauvegarde… » / « Erreur ».
🔗 Connexion (toggle)	Active l’affichage des points de connexion pour créer des relations.
↶ Undo	Annule la dernière action. Raccourci Ctrl + Z.
↷ Redo	Rétablit l’action annulée. Raccourci Ctrl + Y ou Ctrl + Shift + Z.
📤 Importer	Ouvre la modale d’import (Prisma, SQL DDL, DBML…).
📥 Exporter	Ouvre la modale d’export.
➕ Ajouter une table	Crée une nouvelle table et ouvre l’éditeur correspondant.
⬅️ Canvas	Retour au canvas du projet.

📷 [IMAGE — toolbar du schéma] (à venir)

4. État vide

Si la base n’a encore aucune table, l’éditeur affiche un grand encart :

🗃️ Aucune table Démarre en ajoutant une première table, ou importe un fichier Prisma / SQL DDL / DBML.

Avec un gros bouton + Ajouter une table au centre.

📷 [IMAGE — état vide] (à venir)

5. Créer une table

• Clique sur ➕ Ajouter une table dans le header.
• Une table par défaut apparaît sur le canvas.
• L’éditeur de table s’ouvre automatiquement à droite, focus sur le champ Nom.

Tu peux ensuite glisser la table sur le canvas pour la repositionner. La position est persistée à la fin du drag (pas pendant).

6. Vue d’une table (TableNode)

Chaque table est représentée par un bloc rectangulaire :

• En-tête indigo : nom de la table + badge avec le nombre de colonnes.
• Corps : une ligne par colonne, avec :
  • Icône :
    • 🔑 ambre = clé primaire (PK)
    • 🔗 indigo = clé étrangère (FK, source d’une relation)
    • ✱ gris pâle = nullable
    • vide = NOT NULL non-PK
  • Nom de la colonne (souligné indigo si PK).
  • Type (majuscules, ex. VARCHAR(255), UUID, INT).
  • Badges optionnels :
    • NN = NOT NULL (si non-PK et non-nullable)
    • UQ ambre = UNIQUE (si non-PK et unique)

Les points de connexion (handles) apparaissent à gauche et à droite de chaque colonne quand le mode Connexion est actif.

📷 [IMAGE — visuel d’une table] (à venir)

7. Éditer une table

Clique sur une table → l’éditeur de table s’ouvre à droite.

Renommer

• Champ Nom en haut.
• Modification appliquée à chaque frappe (debounced côté sauvegarde).

Colonnes

Une liste verticale, chaque colonne étant éditable inline :

Champs

Champ	Description
Nom	Identifiant de la colonne (snake_case conseillé).
Type	Menu déroulant — voir la liste complète ci-dessous.
Arg	Argument du type (ex. 255 pour varchar).
Default	Valeur par défaut (ex. now(), 0, '').

Toggles (boutons cliquables)

Toggle	Effet
🔑 PK	Marque la colonne comme clé primaire. Implique NOT NULL automatiquement (le toggle Nullable se désactive).
Nullable	Permet NULL. Désactivé si PK.
Unique	Ajoute une contrainte UNIQUE.

Supprimer une colonne

• 🗑️ à droite du nom → confirmation « Supprimer la colonne … ? ».
• ⚠️ La colonne et toutes ses relations sont supprimées (irréversible — annulable via Ctrl + Z tant que la session n’est pas fermée).

📷 [IMAGE — éditeur de colonne] (à venir)

Ajouter une colonne

• Clique sur + Colonne en haut de la liste.
• Une nouvelle colonne nommée par défaut apparaît, prête à être renommée.

Supprimer la table entière

• Pied du panneau : 🗑️ Supprimer la table.
• ⚠️ Toutes les colonnes et toutes les relations liées sont supprimées (irréversible côté schéma — annulable via undo dans la session).

8. Types de colonnes disponibles

L’éditeur propose la liste suivante :

Type	Usage typique
varchar	Chaîne de caractères de longueur fixe ou variable (avec arg = longueur max).
int	Entier 32 bits.
bigint	Entier 64 bits.
uuid	Identifiant UUID.
bool	Booléen.
text	Texte long sans limite.
timestamp	Date-heure.
date	Date sans heure.
json	Document JSON (clé textuelle).
jsonb	Document JSON binaire (indexable côté PostgreSQL).
decimal	Nombre à virgule fixe (précision avec arg, ex. 10,2).
custom	Type libre — saisis le nom complet dans le champ Arg.

9. Créer une relation

Les relations matérialisent les clés étrangères entre colonnes.

1. Active le toggle 🔗 Connexion dans le header.
   • Les handles (petits ronds) deviennent saisissables sur les bords gauche et droite de chaque colonne.
2. Clique sur le handle droit (source) d’une colonne.
3. Glisse jusqu’au handle gauche (target) d’une colonne d’une autre table.
4. Relâche : une relation 1—N est créée par défaut.
5. L’éditeur de relation s’ouvre à droite, prêt à ajuster la cardinalité ou les actions ON DELETE / ON UPDATE.

💡 Une fois la relation créée, la colonne source est marquée comme FK (icône 🔗 indigo dans la liste des colonnes).

📷 [IMAGE — création de relation] (à venir)

10. Éditer une relation

Clique sur la flèche (edge) d’une relation → l’éditeur de relation s’ouvre à droite.

Informations affichées

• De : table_source.colonne_source
• Vers : table_cible.colonne_cible

Cardinalité

Valeur	Libellé	Couleur
1—1	One-to-One	Vert
1—N	One-to-Many	Indigo
N—N	Many-to-Many	Rose

La couleur s’applique au trait + au label de la relation sur le canvas pour un repérage rapide.

Actions référentielles

Deux paramètres optionnels :

• ON DELETE — comportement quand la ligne référencée est supprimée.
• ON UPDATE — comportement quand la clé référencée est mise à jour.

Valeurs possibles :

Action	Effet
cascade	Propage la suppression / mise à jour.
restrict	Empêche l’action tant qu’il existe des références.
set null	Met la FK à NULL (la colonne doit être nullable).
no action	Pareil que restrict mais vérification différée à la fin de la transaction.
(aucune)	Comportement par défaut du moteur.

📷 [IMAGE — éditeur de relation] (à venir)

Supprimer une relation

• Pied du panneau : 🗑️ Supprimer.
• Confirmation : « Cette action est irréversible. »
• La colonne FK perd son icône 🔗 et redevient une colonne ordinaire.

11. Naviguer sur le canvas

L’éditeur réutilise un canvas React Flow : tu retrouves les interactions standard.

Action	Effet
Glisser une table	Déplace la table (position persistée à la fin du drag).
Molette	Zoom in / out.
Glisser le fond	Pan / déplacement de la vue.
Controls (bas-gauche)	Zoom +, zoom −, fit view.
Clic sur le fond	Désélectionne table et relation.

💡 Mode Connexion désactivé : tu peux librement déplacer / éditer sans risquer de créer une relation par accident. Active-le uniquement au moment de tirer une nouvelle FK.

12. Importer un schéma

Le bouton 📤 Importer ouvre la modale « Importer un schéma BDD ».

⚠️ L’import remplace entièrement le schéma actuel du node. Un snapshot du schéma précédent est conservé dans l’historique : tu peux revenir en arrière avec Ctrl + Z.

Étapes

1. Sélectionne un format parmi ceux disponibles côté serveur (Prisma, SQL DDL, DBML… selon ce qui est activé).
   • Une description courte du format est affichée sous le menu.
2. Fournis le contenu de deux manières :
   • 📤 Choisir un fichier — sélection depuis le disque (extensions filtrées par le format choisi).
   • Coller le contenu directement dans la zone de texte.
3. Clique sur Importer.

Si l’import réussit :

• Le schéma est remplacé.
• Le toast confirme l’opération.
• L’historique permet de revenir au schéma précédent (1 cran d’undo).

Si l’import échoue, un message d’erreur précise la cause (parsing invalide, format inconnu, etc.).

📷 [IMAGE — modale import] (à venir)

13. Exporter un schéma

Le bouton 📥 Exporter ouvre la modale « Exporter le schéma BDD ».

1. Sélectionne un format (les exporters disponibles dépendent du serveur).
2. La description et l’extension de fichier sont affichées.
3. Clique sur 📥 Télécharger.

Le fichier est généré côté serveur puis téléchargé automatiquement par le navigateur (nom + content-type définis par l’exporter).

📷 [IMAGE — modale export] (à venir)

14. Sauvegarde et historique

Sauvegarde

• Le schéma est persisté automatiquement après chaque modification (debounced).
• La pastille colorée dans le header reflète l’état :
  • 🟡 ambre = sauvegarde en cours.
  • 🟢 vert = enregistré.
  • 🔴 rouge = erreur.

Historique local (undo / redo)

• Toutes les opérations (ajout / suppression / modif / déplacement / import) alimentent une pile d’undo.
• Ctrl + Z / Cmd + Z : annuler.
• Ctrl + Y / Ctrl + Shift + Z / Cmd + Shift + Z : rétablir.
• Capacité : les 50 dernières opérations.
• ⚠️ L’historique est local à ta session — quitter la page le réinitialise.

💡 Les raccourcis clavier sont inactifs quand le focus est dans un champ texte (input / textarea / contenteditable), pour ne pas contrarier l’édition.

15. Cas particuliers

Plusieurs FK depuis une même colonne ? Possible — une colonne peut être la source de plusieurs relations.

Plusieurs PK sur une table ? Possible — cocher 🔑 PK sur plusieurs colonnes définit une clé primaire composite.

Type custom : comment l’utiliser ? Sélectionne custom et saisis le nom complet du type dans le champ Arg (ex. tsvector, interval, type domain). C’est ce qui sera utilisé dans l’export DDL.

Le schéma est partagé avec mes collaborateurs ? Oui — le schéma est persisté côté serveur et synchronisé. Tous les collaborateurs ayant accès au projet voient les mêmes tables / relations. (L’historique undo, lui, reste local à chaque session.)

Comment supprimer le schéma entier d’un coup ? Supprime les tables une par une (les relations cascadent automatiquement), ou utilise l’import avec un schéma vide pour tout remplacer.

16. Raccourcis

Raccourci	Action
Ctrl + Z / Cmd + Z	Annuler
Ctrl + Y / Ctrl + Shift + Z	Rétablir
Drag entre 2 handles	Créer une relation
Drag d’une table	Repositionner
Molette sur canvas	Zoom

Suite

• Retour Canvas
• Partager un projet
• Diagnostic (Issues)