> For the complete documentation index, see [llms.txt](https://medomicslab.gitbook.io/medomics-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://medomicslab.gitbook.io/medomics-docs/v1-fr/contributing/our-coding-standards.md).

# Nos standards de codage

## [MEDomicsLab](https://www.medomicslab.com/) normes de codage

### Table des matières

* [Logiciels recommandés](#recommended-software)
* [Structure du dépôt du projet](#project-repository-structure)
* [Style](#style)
* [Conventions de nommage](#naming-conventions)
* [Structure des composants](#components-structure)
* [Annotations de type](#setup-of-eslint-and-prettier)
* [Syntaxe](#syntax)
* [Documentation](#documentation)
* [Norme de codage Python](#python-coding-standard)

### Logiciels recommandés

* Windows (10/11 +), macOS (12 +), Linux (20.04 +) [voir les OS pris en charge par l'application Electron](https://www.electronjs.org/de/docs/latest/tutorial/unterst%C3%BCtzung#supported-versions)
* [Visual Studio Code](https://code.visualstudio.com/) extensions :
* [prettier & eslint](https://marketplace.visualstudio.com/items?itemName=rvest.vs-code-prettier-eslint) - standardisateur de formatage de code (voir syntaxe)
* Framework utilisé dans la plateforme
  * [npmjs](https://www.npmjs.com/) - gestionnaire de bibliothèques pour le langage JavaScript
  * [Electron](https://www.electronjs.org/) - Programmation basée sur le web pour le développement d'applications autonomes
  * [Nextjs](https://nextjs.org/) - Abstraction de [React](https://react.dev) ajout du rendu côté serveur et des optimisations
  * [Go](https://go.dev/) - Langage côté serveur

### Structure du dépôt du projet

| Dossier        | Description                                                                |
| -------------- | -------------------------------------------------------------------------- |
| /app           | Fichiers Electron                                                          |
| /baseFiles     | Fichiers de base vides                                                     |
| /build         | Contient les fichiers relatifs à la distribution                           |
| /go\_server    | Contient le code Go agissant comme serveur                                 |
| /main          | Contenus liés à Electron                                                   |
| /node\_modules | Contient les bibliothèques enregistrées (créées à partir de `npm install`) |
| /pythonCode    | Code Python                                                                |
| /pythonEnv     | Outils d'environnement virtuel Python                                      |
| /renderer      | Contenu lié à NextJs                                                       |
| /resources     | Ressources NextJs (icônes, etc.)                                           |
| /utilScripts   | Ressources NextJs (icônes, etc.)                                           |

### Style

* Utilisation [modules CSS React](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/)
* Ordre d'importation (\_app.js)

```javascript
import  'bootstrap/dist/css/bootstrap.min.css';
import <toutes les autres bibliothèques CSS globales>
```

### Conventions de nommage

#### Javascript/React

* Composant : PascalCase
* Nom de fichier du composant : camelCase
* Chaque nom de fichier doit être identique au composant défini à l'intérieur
* Création de composant : privilégier l'implémentation par fonction plutôt que la classe

```javascript
export  default  const  MyComponent = (someProps) =­> {
return (<></>)
}
```

* Création de fonction : privilégier l'implémentation flèche

```javascript
const  myFct = (someParams) =­> {}
```

> Voir [convention de nommage React](https://www.upbeatcode.com/react/react-naming-conventions/)

### Structure des composants

<details>

<summary>Arborescence des composants de l'application</summary>

<pre class="language-bash"><code class="lang-bash">composants
├───dataTypeVisualisation
│       dataTablePopoverBPClass.jsx
<strong>│       dataTableWrapper.jsx
</strong>│       dataTableWrapperBPClass.tsx
│
├───evaluation
│       dashboard.jsx
│       evaluationPageContent.jsx
│       pageConfig.jsx
│       pageEval.jsx
│       predictPanel.jsx
│
├───extractionImage
│   │   extractionJPG.jsx
│   │
│   └───extractionTypes
│           extractionDenseNet.jsx
│
├───extractionMEDimage
│   │   docLink.jsx
│   │   flowCanvas.jsx
│   │
│   ├───buttonsTypes
│   │       resultsButton.jsx
│   │       viewButton.jsx
│   │
│   └───nodesTypes
│       │   extractionNode.jsx
│       │   featuresNode.jsx
│       │   filterNode.jsx
│       │   segmentationNode.jsx
│       │   standardNode.jsx
│       │
│       ├───filterTypes
│       │       gaborFilter.jsx
│       │       lawsFilter.jsx
│       │       logFilter.jsx
│       │       meanFilter.jsx
│       │       waveletFilter.jsx
│       │
│       └───standardNodeForms
│               discretizationForm.jsx
│               inputForm.jsx
│               interpolationForm.jsx
│               reSegmentationForm.jsx
│
├───extractionTabular
│   │   extractionTabularData.jsx
│   │
│   └───extractionTypes
│           extractionBioBERT.jsx
│           extractionTSfresh.jsx
│
├───flow
│   │   btnDiv.jsx
│   │   codeEditor.jsx
│   │   errorRequestDialog.jsx
│   │   flowPageBase.jsx
│   │   groupNode.jsx
│   │   handlers.jsx
│   │   node.jsx
│   │   nodeWrapperResults.jsx
│   │   sidebarAvailableNodes.jsx
│   │   workflowBase.jsx
│   │
│   ├───context
│   │       flowFunctionsContext.jsx
│   │       flowInfosContext.jsx
│   │       flowResultsContext.jsx
│   │
│   └───results
│           pipelinesResults.jsx
│           resultsPane.jsx
│
├───generalPurpose
│       errorRequestContext.jsx
│       loaderContext.jsx
│       progressBarRequests.jsx
│
├───input
│       groupingTool.jsx
│       holdOutSetCreationTool.jsx
│       mergeTool.jsx
│       simpleCleaningTool.jsx
│       subsetCreationTool.jsx
│
├───layout
│   │   actionContext.jsx
│   │   iconSidebar.jsx
│   │   layoutContext.jsx
│   │   layoutManager.jsx
│   │
│   ├───flexlayout
│   │       mainContainerClass.tsx
│   │       popout.html
│   │       popupMenu.tsx
│   │       simple.layout
│   │       tabStorage.tsx
│   │       utils.tsx
│   │       zoomPanPinchComponent.jsx
│   │
│   └───sidebarTools
│       │   components.jsx
│       │   fileCreationBtn.jsx
│       │   recursiveChildrenTest.js
│       │
│       ├───directoryTree
│       │       renderItem.js
│       │       sidebarDirectoryTreeControlled.jsx
│       │       workspaceDirectoryTree.jsx
│       │
│       └───pageSidebar
│               evaluationSidebar.jsx
│               explorerSidebar.jsx
│               extractionSidebar.jsx
│               flowSceneSidebar.jsx
│               homeSidebar.jsx
│               inputSidebar.jsx
│               layoutTestSidebar.jsx
│               searchSidebar.jsx
│
├───learning
│   │   checkOption.jsx
│   │   input.jsx
│   │   modalSettingsChooser.jsx
│   │   workflow.jsx
│   │
│   ├───nodesTypes
│   │       datasetNode.jsx
│   │       loadModelNode.jsx
│   │       optimizeIO.jsx
│   │       selectionNode.jsx
│   │       standardNode.jsx
│   │
│   └───results
│       ├───node
│       │       analyseResults.jsx
│       │       dataParamResults.jsx
│       │       modelsResults.jsx
│       │       saveModelResults.jsx
│       │
│       └───utilities
│               dataTablePath.jsx
│               parameters.jsx
│
├───mainPages
│   │   application.jsx
│   │   evaluation.jsx
│   │   exploratory.jsx
│   │   extractionImage.jsx
│   │   extractionMEDimage.jsx
│   │   extractionText.jsx
│   │   extractionTS.jsx
│   │   home.jsx
│   │   htmlViewer.jsx
│   │   input.jsx
│   │   learning.jsx
│   │   modelViewer.jsx
│   │   output.jsx
│   │   results.jsx
│   │   terminal.jsx
│   │   test.jsx
│   │
│   ├───dataComponents
│   │       datasetSelector.jsx
│   │       dataTableFromContext.jsx
│   │       dataTableFromContextBP.jsx
│   │       dropzoneComponent.jsx
│   │       dropzoneComponent2.jsx
│   │       listBoxSelector.jsx
│   │       wsSelect.jsx
│   │
│   └───moduleBasics
│           modulePage.jsx
│           pageInfosContext.jsx
│
└───workspace
        dataContext.jsx
        medDataObject.js
        workspaceContext.jsx
</code></pre>

</details>

> Pour générer ceci : `tree .\renderer\components\ /f`

### Configuration de [eslint](https://eslint.org/docs/latest/use/getting-started) et [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

#### Syntaxe

(ES6 pour JS comme mentionné par Electron, pour Python Electron suit le style de codage de Chromium)

#### Installation

* Installer prettier et le plugin (devrait être inclus dans package.json donc un `npm install` devrait le faire) `npm install prettier eslint-plugin-prettier eslint-config-prettier`
* Installer [eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) et [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extensions
* Ouvrir les paramètres de l'espace de travail
  * Peut être accessible directement depuis ce chemin : .vscode/settings.json
  * Ou appuyez sur `CTRL+SHIFT+P` et tapez `Preferences: Open Workspace Settings (JSON)`
* Ajouter ces lignes

```javascript
{
  "eslint.options": {
    "overrideConfigFile": ".eslintrc.js"
  },
  "editor.formatOnSave": true,
  "eslint.validate": ["javascript"],
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
```

#### Utilisation

Il y a 2 fichiers de configuration :

* eslint -> .eslintrc.js
* prettier -> .prettierrc.js

Une priorité plus élevée est accordée à Prettier qui gère le formatage de base

> voir le fichier de configuration pour plus d'informations sur ce qu'il règle

ensuite, toutes les règles de normes sont placées dans le fichier de configuration eslint. Donc si vous devez ajouter des règles spécifiques, elles doivent être dans le fichier .eslintrc.js

Utilisation `CTRL+S` pour enregistrer et formater les fichiers. Eslint peut déclencher des erreurs affichées par un soulignement rouge ; vous pouvez survoler ces erreurs de conventions, puis cliquer sur 'quick fix' et cliquer sur 'fix all/the problem(s)'

### Documentation

**Docstring**

```javascript
/**
* @param  {type}  someParams description
* @return  {type} description
* @description
* description fonctionnelle de la fonction/objet React
*/
const  myfct = (someParams) =­> {}
```

**Commentaires**

* Ne pas sur-détailler le code pour la lisibilité
* Les commentaires sont destinés à aider à comprendre les actions importantes ou critiques dans le code

**Génération de documentation**

> **Non testé** : <https://www.npmjs.com/package/react-doc-generator>

(Commentaires, docstrings, générateur de documentation...)

### Norme de codage Python

Voir [MEDomicsTools pour Python](https://github.com/MEDomics-UdeS/MEDomicsTools/blob/main/python.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://medomicslab.gitbook.io/medomics-docs/v1-fr/contributing/our-coding-standards.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.