Nos standards de codage

MEDomicsLab normes de codage

Table des matières

• Logiciels recommandés

• Structure du dépôt du projet

• Style

• Conventions de nommage

• Structure des composants

• Annotations de type

• Syntaxe

• Documentation

• Norme de codage Python

Logiciels recommandés

• Windows (10/11 +), macOS (12 +), Linux (20.04 +) voir les OS pris en charge par l'application Electron

• Visual Studio Code extensions :

• prettier & eslint - standardisateur de formatage de code (voir syntaxe)

• Framework utilisé dans la plateforme

  • npmjs - gestionnaire de bibliothèques pour le langage JavaScript

  • Electron - Programmation basée sur le web pour le développement d'applications autonomes

  • Nextjs - Abstraction de React ajout du rendu côté serveur et des optimisations

  • Go - 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

• Ordre d'importation (_app.js)

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

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

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

const  myFct = (someParams) =­> {}

Voir convention de nommage React

Structure des composants

Arborescence des composants de l'application

composants
├───dataTypeVisualisation
│       dataTablePopoverBPClass.jsx
│       dataTableWrapper.jsx
│       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

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

Configuration de eslint et prettier

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 et prettier 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

{
  "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

/**
* @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.