Skip to content

our-coding-standards.md

Latest commit

 

History

History
340 lines (292 loc) · 10.6 KB

our-coding-standards.md

File metadata and controls

340 lines (292 loc) · 10.6 KB
Raw

Our coding standards

MEDomicsLab coding standards

Table of contents

Recommended Software

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

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.