Our coding standards

MEDomicsLab coding standards

Recommended Software

Windows (10 /11 +), macOs (12 +), Linux (20.04 +) see electron app supported OS
Visual Studio Code extensions:
prettier & eslint - code formatter standardizer (see syntax)
Framework used in the platform
- npmjs - Library manager for javascript language
- Electron - Web based programming for standalone app developpement
- Nextjs - Abstraction of React adding server side rendering and optimisations
- Go - Server side language

Project Repository Structure

Folder

Description

/app

Electron files

/baseFiles

Empty base files

/build

Contains distribution relative files

/go_server

Contains Go code acting as a server

/main

Electron related contents

/node_modules

Contains saved libraries (created from npm install)

/pythonCode

Python code

/pythonEnv

Python virtual environment utils

/renderer

NextJs related content

/resources

NextJs ressources (icons, etc.)

/utilScripts

NextJs ressources (icons, etc.)

Style

Use css react modules
Import order (_app.js)

import  'bootstrap/dist/css/bootstrap.min.css';
import <all  other  global  css  libraries>

Naming Conventions

Javascript/react

Component : PascalCase
Component file name : camelCase
Each file name should be the same as the component defined inside
Component creation : prioritize function implementation over class

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

Function creation: prioritize arrow implementation

const  myFct = (someParams) => {}

See react naming convention

Components Structure

Directory tree of the application components

components
├───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

To generate this : tree .\renderer\components\ /f

Setup of eslint and prettier

Syntax

(ES6 for JS as mentioned by Electron, for Python Electron follows Chromium's Coding Style)

Installation

Install prettier and plugin (should be included in package.json so a npm install should do it) npm install prettier eslint-plugin-prettier eslint-config-prettier
Install eslint and prettier extensions
Open workspace settings
- Can be accessed directly from this path: .vscode/settings.json
- Or press CTRL+SHIFT+P and type Preferences: Open Workspace Settings (JSON)
Add these lines

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

Usage

There are 2 config files:

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

A higher priority is placed on Prettier wich handles basic formatting

see config file for more information on what it rules

then, all standards rules are placed in eslint config file. So if you need to add specific rules, it should be in .eslintrc.js file

Use CTRL+S to save and format files. Eslint may triggered error displayed as a red underline so you can hover these conventions error, then click on 'quick fix' and click on 'fix all/the problem(s)'

Documentation

Docstring

/**
* @param  {type}  someParams description
* @return  {type} description
* @description
* functionnal description of the function/React object
*/
const  myfct = (someParams) => {}

Comments

Do not over-detail the code for readability
Comments are meant to help understand important or critical actions in code

Documentation generation

Not tested : https://www.npmjs.com/package/react-doc-generator

(Comments, docstrings, documentation generator...)

Python Coding Standard

See MEDomicsTools for Python.

PreviousContributing NextHow to push my modification ?

Last updated 6 months ago