diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 9cc6ea404..000000000
--- a/.eslintignore
+++ /dev/null
@@ -1 +0,0 @@
-app/javascript/mda_viewer/components/riek
\ No newline at end of file
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 45f680f0f..000000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-    "env": {
-        "browser": true,
-        "es6": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "airbnb"
-    ],
-    "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
-    },
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 2018,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-        "no-underscore-dangle": "off",
-        "no-console": "off",
-        "global-require": "off",
-        "react/forbid-prop-types": "off",
-        "no-restricted-syntax": "off",
-        "linebreak-style": "off",
-        "max-classes-per-file": "off",
-        "import/no-unresolved": "off",
-        "camelcase": "off",
-        "import/extensions": [
-            "warn",
-            "never"
-        ]
-    }
-}
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..f0ed2aad9
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,14 @@
+node_modules
+.yarn
+public/packs
+public/packs-test
+public/assets
+vendor
+tmp
+log
+storage
+upload
+*_out
+reports
+db/*.sqlite3
+app/javascript/mda_viewer/components/riek
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 000000000..5d82119b0
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "semi": true
+}
diff --git a/app/javascript/api_doc_viewer/index.jsx b/app/javascript/api_doc_viewer/index.jsx
index 9141c7ece..d096f3751 100644
--- a/app/javascript/api_doc_viewer/index.jsx
+++ b/app/javascript/api_doc_viewer/index.jsx
@@ -5,13 +5,7 @@ import 'swagger-ui-react/swagger-ui.css';
 
 function MySwaggerUI(props) {
   const { url, preAuthorize } = props;
-  return (
-    <SwaggerUI
-      url={url}
-      onComplete={preAuthorize}
-      docExpansion="list"
-    />
-  );
+  return <SwaggerUI url={url} onComplete={preAuthorize} docExpansion="list" />;
 }
 
 MySwaggerUI.propTypes = {
@@ -26,12 +20,7 @@ function SwaggerApiDoc({ api }) {
     }
   }
 
-  return (
-    <MySwaggerUI
-      url={api.docUrl()}
-      preAuthorize={(sui) => preAuthorize(sui)}
-    />
-  );
+  return <MySwaggerUI url={api.docUrl()} preAuthorize={(sui) => preAuthorize(sui)} />;
 }
 
 SwaggerApiDoc.propTypes = {
diff --git a/app/javascript/application_views/analyses_index.js b/app/javascript/application_views/analyses_index.js
index 86a27e30e..c11945857 100644
--- a/app/javascript/application_views/analyses_index.js
+++ b/app/javascript/application_views/analyses_index.js
@@ -37,7 +37,9 @@ class AnalysesIndex {
         },
         success() {
           $.getScript(this.href, () => {
-            if (timeout) { clearTimeout(timeout); }
+            if (timeout) {
+              clearTimeout(timeout);
+            }
             $('.spinner').hide();
 
             // UX test: code below reset the search string
@@ -68,16 +70,13 @@ class AnalysesIndex {
 
     $('input[data-analyses-query]').on('click', setAnalysesListSettings);
     $('input[data-analyses-order]').on('click', setAnalysesListSettings);
-    $('#analyses-filter').on(
-      'keypress',
-      (event) => {
-        if (event.key === 'Enter') {
-          setAnalysesListSettings();
-          // Cancel the default action, if needed
-          event.preventDefault();
-        }
-      },
-    );
+    $('#analyses-filter').on('keypress', (event) => {
+      if (event.key === 'Enter') {
+        setAnalysesListSettings();
+        // Cancel the default action, if needed
+        event.preventDefault();
+      }
+    });
     $('#btn_user_settings_analyses_filter').on('click', setAnalysesListSettings);
 
     let current_design_project_id = '<%= current_user.analyses_scope_design_project_id %>';
@@ -99,7 +98,9 @@ class AnalysesIndex {
           },
           success() {
             $.getScript(this.href, () => {
-              if (timeout) { clearTimeout(timeout); }
+              if (timeout) {
+                clearTimeout(timeout);
+              }
               $('.spinner').hide();
             });
           },
diff --git a/app/javascript/application_views/operations_index.js b/app/javascript/application_views/operations_index.js
index f1f80bf42..c3432be60 100644
--- a/app/javascript/application_views/operations_index.js
+++ b/app/javascript/application_views/operations_index.js
@@ -20,33 +20,30 @@ class OperationsIndex {
       $input.on('focus');
     });
 
-    $('button[data-save="true"]').on(
-      'click',
-      () => {
-        const newName = $input.val();
-        $.ajax({
-          type: 'PATCH',
-          xhrFields: { withCredentials: true },
-          headers: { Authorization: `Token ${opeEdit.apiKey}` },
-          url: `${relativeUrlRoot}/api/v1/operations/${opeEdit.id}`,
-          data: { operation: { name: newName } },
-          success() {
-            $(`a[id=${opeEdit.id}]`).text(newName);
-            opeEdit.invoker.data('ope-name', newName);
-            $modal.modal('hide');
-          },
-          error(xhr) {
-            console.log(xhr.responseJSON.message);
-            $('#errorPlaceHolder').html(
-              `<div class="alert bg-warning" role="alert"><a href="#" data-dismiss="alert" class="close">×</a>${
-                xhr.responseJSON.message
-              }</div>`,
-            );
-            $modal.modal('hide');
-          },
-        });
-      },
-    );
+    $('button[data-save="true"]').on('click', () => {
+      const newName = $input.val();
+      $.ajax({
+        type: 'PATCH',
+        xhrFields: { withCredentials: true },
+        headers: { Authorization: `Token ${opeEdit.apiKey}` },
+        url: `${relativeUrlRoot}/api/v1/operations/${opeEdit.id}`,
+        data: { operation: { name: newName } },
+        success() {
+          $(`a[id=${opeEdit.id}]`).text(newName);
+          opeEdit.invoker.data('ope-name', newName);
+          $modal.modal('hide');
+        },
+        error(xhr) {
+          console.log(xhr.responseJSON.message);
+          $('#errorPlaceHolder').html(
+            `<div class="alert bg-warning" role="alert"><a href="#" data-dismiss="alert" class="close">×</a>${
+              xhr.responseJSON.message
+            }</div>`
+          );
+          $modal.modal('hide');
+        },
+      });
+    });
   }
 }
 
diff --git a/app/javascript/mda_viewer/components/AnalysisBreadCrumbs.jsx b/app/javascript/mda_viewer/components/AnalysisBreadCrumbs.jsx
index 005b1f441..0660253bb 100644
--- a/app/javascript/mda_viewer/components/AnalysisBreadCrumbs.jsx
+++ b/app/javascript/mda_viewer/components/AnalysisBreadCrumbs.jsx
@@ -12,14 +12,16 @@ class AnalysisBreadCrumbs extends React.PureComponent {
         klass += ' active';
         name = anc.name;
       }
-      return (<li key={anc.id} className={klass}>{name}</li>);
+      return (
+        <li key={anc.id} className={klass}>
+          {name}
+        </li>
+      );
     });
 
     return (
       <nav aria-label="breadcrumb">
-        <ol className="breadcrumb">
-          {crumbs}
-        </ol>
+        <ol className="breadcrumb">{crumbs}</ol>
       </nav>
     );
   }
@@ -27,10 +29,12 @@ class AnalysisBreadCrumbs extends React.PureComponent {
 
 AnalysisBreadCrumbs.propTypes = {
   api: PropTypes.object.isRequired,
-  path: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
-    id: PropTypes.number,
-  })).isRequired,
+  path: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      id: PropTypes.number,
+    })
+  ).isRequired,
 };
 
 export default AnalysisBreadCrumbs;
diff --git a/app/javascript/mda_viewer/components/AnalysisEditor.jsx b/app/javascript/mda_viewer/components/AnalysisEditor.jsx
index ebe184e9d..9ed9da6c3 100644
--- a/app/javascript/mda_viewer/components/AnalysisEditor.jsx
+++ b/app/javascript/mda_viewer/components/AnalysisEditor.jsx
@@ -7,21 +7,26 @@ import AnalysisNoteEditor from './AnalysisNoteEditor';
 
 class UserList extends React.PureComponent {
   render() {
-    const {
-      users, userRole, onUserDelete, editEnabled,
-    } = this.props;
+    const { users, userRole, onUserDelete, editEnabled } = this.props;
     const logins = users.map((user) => user.login);
 
     const userItems = logins.map((login, i) => (
       <span key={users[i].id} className="btn-group m-1" role="group">
-        <button type="button" className="btn">{login}</button>
-        <button type="button" className="btn text-danger" disabled={!editEnabled} onClick={() => onUserDelete(users[i], userRole)}>
+        <button type="button" className="btn">
+          {login}
+        </button>
+        <button
+          type="button"
+          className="btn text-danger"
+          disabled={!editEnabled}
+          onClick={() => onUserDelete(users[i], userRole)}
+        >
           <i className="fa fa-times" />
         </button>
       </span>
     ));
 
-    return (<span className="mb-3">{userItems}</span>);
+    return <span className="mb-3">{userItems}</span>;
   }
 }
 
@@ -34,9 +39,7 @@ UserList.propTypes = {
 
 class TeamSelector extends React.PureComponent {
   render() {
-    const {
-      users, userRole, onUserSearch, onUserSelected, onUserDelete, editEnabled,
-    } = this.props;
+    const { users, userRole, onUserSearch, onUserSelected, onUserDelete, editEnabled } = this.props;
     let title = 'Users';
     if (userRole === 'member') {
       title = 'Members';
@@ -59,10 +62,8 @@ class TeamSelector extends React.PureComponent {
         <div className="editor-section">
           <span className="d-flex flex-row align-items-center flex-wrap">
             <div>
-              { title }
-              <span className="ms-1 me-3 badge bg-info">
-                {users.length}
-              </span>
+              {title}
+              <span className="ms-1 me-3 badge bg-info">{users.length}</span>
             </div>
             {userSelector}
           </span>
@@ -93,11 +94,23 @@ class AnalysisEditor extends React.PureComponent {
   render() {
     let teamMembers = null;
     const {
-      analysisPublic, analysisMembers, analysisCoOwners,
-      analysisPermissionsEditable, onAnalysisUserSearch, onAnalysisUserSelected,
-      onAnalysisUserDelete, onAnalysisUpdate, newAnalysisName,
-      onAnalysisNameChange, onAnalysisNoteChange, onAnalysisPublicChange,
-      mdaId, note, onProjectSearch, onProjectSelected, mdaProject,
+      analysisPublic,
+      analysisMembers,
+      analysisCoOwners,
+      analysisPermissionsEditable,
+      onAnalysisUserSearch,
+      onAnalysisUserSelected,
+      onAnalysisUserDelete,
+      onAnalysisUpdate,
+      newAnalysisName,
+      onAnalysisNameChange,
+      onAnalysisNoteChange,
+      onAnalysisPublicChange,
+      mdaId,
+      note,
+      onProjectSearch,
+      onProjectSelected,
+      mdaProject,
     } = this.props;
     if (!analysisPublic) {
       teamMembers = (
@@ -127,15 +140,12 @@ class AnalysisEditor extends React.PureComponent {
       <div className="container-fluid">
         <div className="editor-section">
           <div className="editor-section-label">
-            <i className="fas fa-info-circle" title="Analysis general informations" />
-            {' '}
-            General Information
+            <i className="fas fa-info-circle" title="Analysis general informations" /> General
+            Information
           </div>
           <form onSubmit={onAnalysisUpdate}>
             <div className="mb-3 col-4">
-              <div className="editor-section-label">
-                Name
-              </div>
+              <div className="editor-section-label">Name</div>
               <input
                 type="text"
                 value={newAnalysisName}
@@ -145,9 +155,7 @@ class AnalysisEditor extends React.PureComponent {
               />
             </div>
             <div className="mb-3 col-4">
-              <div className="editor-section-label">
-                Design Project
-              </div>
+              <div className="editor-section-label">Design Project</div>
               <ProjectSelector
                 selected={mdaProject}
                 onProjectSearch={onProjectSearch}
@@ -155,9 +163,7 @@ class AnalysisEditor extends React.PureComponent {
               />
             </div>
             <div className="mb-3">
-              <div className="editor-section-label">
-                Notes
-              </div>
+              <div className="editor-section-label">Notes</div>
               <div className="editor-section-label col-9">
                 <AnalysisNoteEditor
                   mdaId={mdaId}
@@ -166,16 +172,15 @@ class AnalysisEditor extends React.PureComponent {
                 />
               </div>
             </div>
-            <button type="submit" className="btn btn-primary ms-3">Save</button>
+            <button type="submit" className="btn btn-primary ms-3">
+              Save
+            </button>
           </form>
         </div>
         <hr />
         <div className="editor-section">
           <div className="editor-section-label">
-            <i className="fas fa-users-cog" title="Analysis has co-owners" />
-            {' '}
-            Collaboration
-            {' '}
+            <i className="fas fa-users-cog" title="Analysis has co-owners" /> Collaboration{' '}
             <small>(allow edit access to the users listed below)</small>
           </div>
         </div>
@@ -183,10 +188,7 @@ class AnalysisEditor extends React.PureComponent {
         <hr />
         <div className="editor-section">
           <div className="editor-section-label">
-            <i className="fas fa-user-secret" title="Analysis with restricted access" />
-            {' '}
-            Privacy
-            {' '}
+            <i className="fas fa-user-secret" title="Analysis with restricted access" /> Privacy{' '}
             <small>(when restricted, allow read only access to the users listed below)</small>
           </div>
           <form className="form" onSubmit={onAnalysisUpdate}>
diff --git a/app/javascript/mda_viewer/components/AnalysisNoteEditor.jsx b/app/javascript/mda_viewer/components/AnalysisNoteEditor.jsx
index ffc3d8391..763f85e82 100644
--- a/app/javascript/mda_viewer/components/AnalysisNoteEditor.jsx
+++ b/app/javascript/mda_viewer/components/AnalysisNoteEditor.jsx
@@ -35,7 +35,12 @@ class AnalysisNoteEditor extends React.Component {
       <div>
         <input type="hidden" name="analysis[note]" id={id} value={note} />
         {/* <textarea name="analysis[note]" id={id} defaultValue={this.props.note} /> */}
-        <trix-editor id="analysis_note" input={id} className="form-control trix-content" ref={this.trixInput} />
+        <trix-editor
+          id="analysis_note"
+          input={id}
+          className="form-control trix-content"
+          ref={this.trixInput}
+        />
       </div>
     );
   }
diff --git a/app/javascript/mda_viewer/components/AnalysisSelector.jsx b/app/javascript/mda_viewer/components/AnalysisSelector.jsx
index 1cfeb12e2..407cda65e 100644
--- a/app/javascript/mda_viewer/components/AnalysisSelector.jsx
+++ b/app/javascript/mda_viewer/components/AnalysisSelector.jsx
@@ -25,7 +25,7 @@ class AnalysisSelector extends React.Component {
       // query,
       (options) => {
         this.setState({ isLoading: false, options });
-      },
+      }
     );
   }
 
@@ -54,7 +54,9 @@ class AnalysisSelector extends React.Component {
         placeholder={message}
         onChange={this.handleChange}
         // eslint-disable-next-line react/no-unused-class-component-methods
-        ref={(ref) => { this.typeahead = ref; }}
+        ref={(ref) => {
+          this.typeahead = ref;
+        }}
         disabled={disabled}
       />
     );
diff --git a/app/javascript/mda_viewer/components/ComparisonPanel.jsx b/app/javascript/mda_viewer/components/ComparisonPanel.jsx
index 781084e34..76a8b0900 100644
--- a/app/javascript/mda_viewer/components/ComparisonPanel.jsx
+++ b/app/javascript/mda_viewer/components/ComparisonPanel.jsx
@@ -31,7 +31,7 @@ class ComparisonDisplay extends React.PureComponent {
   }
 
   render() {
-    return (<div id="myDiffElement" ref={(el) => this.el = el} />);
+    return <div id="myDiffElement" ref={(el) => (this.el = el)} />;
   }
 }
 
@@ -74,7 +74,7 @@ class ComparisonPanel extends React.Component {
       },
       (error) => {
         console.log(error);
-      },
+      }
     );
   }
 
diff --git a/app/javascript/mda_viewer/components/ConnectionsEditor.jsx b/app/javascript/mda_viewer/components/ConnectionsEditor.jsx
index 6f6191e22..22953a349 100644
--- a/app/javascript/mda_viewer/components/ConnectionsEditor.jsx
+++ b/app/javascript/mda_viewer/components/ConnectionsEditor.jsx
@@ -19,7 +19,11 @@ class DisciplineSelector extends React.Component {
     let { selected } = this.props;
     const disciplines = nodes.map((node) => {
       const name = node.id === nodes[0].id ? ulabel : node.name;
-      return (<option key={node.id} value={node.id}>{name}</option>);
+      return (
+        <option key={node.id} value={node.id}>
+          {name}
+        </option>
+      );
     });
 
     selected = selected || nodes[0].id;
@@ -54,7 +58,11 @@ class ConnectionList extends React.PureComponent {
   render() {
     const {
       // eslint-disable-next-line camelcase
-      names, conn_ids, active, limited, onConnectionDelete,
+      names,
+      conn_ids,
+      active,
+      limited,
+      onConnectionDelete,
     } = this.props;
     const varnames = names.split(',');
     const vars = varnames.map((varname, i) => {
@@ -62,11 +70,15 @@ class ConnectionList extends React.PureComponent {
       const btn = active ? 'btn' : 'btn text-inactive';
       return (
         <div key={varname} className="btn-group m-1" role="group">
-          <button type="button" className={btn}>{varname}</button>
+          <button type="button" className={btn}>
+            {varname}
+          </button>
           <button
             type="button"
             className="btn text-danger"
-            onClick={() => { onConnectionDelete(id); }}
+            onClick={() => {
+              onConnectionDelete(id);
+            }}
             disabled={limited}
           >
             <i className="fa fa-times" />
@@ -75,7 +87,7 @@ class ConnectionList extends React.PureComponent {
       );
     });
 
-    return (<span className="mb-3">{vars}</span>);
+    return <span className="mb-3">{vars}</span>;
   }
 }
 
@@ -91,7 +103,7 @@ function compare(a, b) {
   if (a.ioMode === b.ioMode) {
     return a.name.localeCompare(b.name);
   }
-  return (a.ioMode === 'in') ? -1 : 1;
+  return a.ioMode === 'in' ? -1 : 1;
 }
 
 class VariableList extends React.PureComponent {
@@ -99,18 +111,16 @@ class VariableList extends React.PureComponent {
     let { vars } = this.props;
     const sorted = vars.sort(compare);
     vars = sorted.map((v) => {
-      const badgeKind = `badge ${(v.ioMode === 'in') ? 'bg-primary' : 'bg-secondary'}`;
+      const badgeKind = `badge ${v.ioMode === 'in' ? 'bg-primary' : 'bg-secondary'}`;
       const klass = v.active ? 'btn m-1' : 'btn m-1 text-inactive';
       return (
         <button type="button" key={v.name} className={klass}>
-          {v.name}
-          {' '}
-          <span className={badgeKind}>{v.ioMode}</span>
+          {v.name} <span className={badgeKind}>{v.ioMode}</span>
         </button>
       );
     });
 
-    return (<span className="mb-3">{vars}</span>);
+    return <span className="mb-3">{vars}</span>;
   }
 }
 
@@ -128,25 +138,29 @@ class ConnectionsViewer extends React.PureComponent {
     if (filter.fr === filter.to) {
       // Node selected => display input/output variables
       title = 'Variables';
-      edges = edges.filter((edge) => (edge.from === filter.fr) || (edge.to === filter.to), this);
+      edges = edges.filter((edge) => edge.from === filter.fr || edge.to === filter.to, this);
       const uniqEdges = [];
       const uniqNames = [];
       edges.forEach((edge) => {
         edge.name.split(',').forEach((name) => {
           if (!uniqNames.includes(name)) {
-            uniqEdges.push({ name, ioMode: (edge.to === filter.to) ? 'in' : 'out', active: edge.active });
+            uniqEdges.push({
+              name,
+              ioMode: edge.to === filter.to ? 'in' : 'out',
+              active: edge.active,
+            });
             uniqNames.push(name);
           }
         }, this);
       }, this);
       edges = uniqEdges;
       count = edges.length;
-      connections = (<VariableList vars={edges} />);
+      connections = <VariableList vars={edges} />;
     } else {
       // Edge selected => Display connection
       title = 'Connections';
 
-      edges = edges.filter((edge) => (edge.from === filter.fr) && (edge.to === filter.to), this);
+      edges = edges.filter((edge) => edge.from === filter.fr && edge.to === filter.to, this);
       connections = edges.map((edge) => {
         count += edge.name.split(',').length;
         return (
@@ -168,9 +182,7 @@ class ConnectionsViewer extends React.PureComponent {
           {title}
           <span className="badge bg-info ms-2">{count}</span>
         </div>
-        <div>
-          {connections}
-        </div>
+        <div>{connections}</div>
       </div>
     );
   }
@@ -189,28 +201,28 @@ ConnectionsViewer.propTypes = {
 class ConnectionsForm extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-
-    };
+    this.state = {};
   }
 
   render() {
     const {
-      connectionErrors, selectedConnectionNames, db, filter, limited,
-      onConnectionCreate, onConnectionNameChange,
+      connectionErrors,
+      selectedConnectionNames,
+      db,
+      filter,
+      limited,
+      onConnectionCreate,
+      onConnectionNameChange,
     } = this.props;
     let { edges } = this.props;
-    const isErroneous = (connectionErrors.length > 0);
+    const isErroneous = connectionErrors.length > 0;
     const selected = selectedConnectionNames;
     // console.log('RENDER ', selected);
     const outvars = db.getOutputVariables(filter.fr);
     const invars = db.getInputVariables(filter.to);
     const driver_outs = db.getDriverOutVariables();
     // console.log(`OUTPUT VARS = ${JSON.stringify(outvars)}`);
-    edges = edges.filter(
-      (edge) => (edge.from === filter.fr) && (edge.to === filter.to),
-      this,
-    ) || [];
+    edges = edges.filter((edge) => edge.from === filter.fr && edge.to === filter.to, this) || [];
     const current = edges.map((edge) => edge.name.split(','))[0] || [];
     // console.log(`CURRENT = ${JSON.stringify(current)}`);
     let selectable = invars.filter((e) => driver_outs.map((d) => d.name).includes(e.name));
@@ -232,14 +244,18 @@ class ConnectionsForm extends React.Component {
             isInvalid={isErroneous}
             minLength={1}
             placeholder="Enter variable names..."
-            onChange={(sel) => { onConnectionNameChange(sel); }}
+            onChange={(sel) => {
+              onConnectionNameChange(sel);
+            }}
             options={selectable}
             selected={selected}
             disabled={limited}
           />
         </div>
         <div className="mb-3">
-          <button type="submit" className="btn btn-primary" disabled={isErroneous || limited}>Add</button>
+          <button type="submit" className="btn btn-primary" disabled={isErroneous || limited}>
+            Add
+          </button>
         </div>
       </form>
     );
@@ -281,8 +297,14 @@ class ConnectionsEditor extends React.Component {
   render() {
     let form;
     const {
-      filter, db, limited, selectedConnectionNames, onConnectionCreate,
-      onConnectionNameChange, connectionErrors, onConnectionDelete,
+      filter,
+      db,
+      limited,
+      selectedConnectionNames,
+      onConnectionCreate,
+      onConnectionNameChange,
+      connectionErrors,
+      onConnectionDelete,
     } = this.props;
     if (filter.fr !== filter.to) {
       form = (
diff --git a/app/javascript/mda_viewer/components/DisciplinesEditor.jsx b/app/javascript/mda_viewer/components/DisciplinesEditor.jsx
index 10490a64c..8a91d23e0 100644
--- a/app/javascript/mda_viewer/components/DisciplinesEditor.jsx
+++ b/app/javascript/mda_viewer/components/DisciplinesEditor.jsx
@@ -1,8 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import {
+  draggable,
+  dropTargetForElements,
+  monitorForElements,
+} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import {
+  attachClosestEdge,
+  extractClosestEdge,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { getReorderDestinationIndex } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index';
 import AnalysisSelector from './AnalysisSelector';
 import ImportSection from './ImportSection';
@@ -18,16 +25,18 @@ const XDSMJS_ANALYSIS = 'group';
 const OPTIMIZATION = 'mdo';
 
 function isLocalHost(host) {
-  return (host === '' || host === 'localhost' || host === '127.0.0.1');
+  return host === '' || host === 'localhost' || host === '127.0.0.1';
 }
 
 function isComposite(discType) {
-  return (discType === ANALYSIS || discType === OPTIMIZATION);
+  return discType === ANALYSIS || discType === OPTIMIZATION;
 }
 class Discipline extends React.Component {
   constructor(props) {
     super(props);
-    const { node: { link } } = props;
+    const {
+      node: { link },
+    } = props;
     let selected = [];
     if (link) {
       selected = [{ id: link.id, label: `#${link.id} ${link.name}` }];
@@ -82,10 +91,11 @@ class Discipline extends React.Component {
       }),
       dropTargetForElements({
         element: el,
-        getData: ({ input, element }) => attachClosestEdge(
-          { index: this.props.index, id: this.props.node.id },
-          { input, element, allowedEdges: ['top', 'bottom'] },
-        ),
+        getData: ({ input, element }) =>
+          attachClosestEdge(
+            { index: this.props.index, id: this.props.node.id },
+            { input, element, allowedEdges: ['top', 'bottom'] }
+          ),
         canDrop: ({ source }) => source.data.id !== this.props.node.id,
         onDragEnter: (args) => {
           this.setState({ closestEdge: extractClosestEdge(args.self.data) });
@@ -95,7 +105,7 @@ class Discipline extends React.Component {
         },
         onDragLeave: () => this.setState({ closestEdge: null }),
         onDrop: () => this.setState({ closestEdge: null }),
-      }),
+      })
     );
   }
 
@@ -138,9 +148,7 @@ class Discipline extends React.Component {
     event.preventDefault();
     this.handleCancelEdit();
     const { node } = this.props;
-    const {
-      discName, discType, discHost, discPort, selected,
-    } = this.state;
+    const { discName, discType, discHost, discPort, selected } = this.state;
     const subAnalysisId = selected[0] && selected[0].id;
     const discAttrs = {
       name: discName,
@@ -151,7 +159,8 @@ class Discipline extends React.Component {
     }
     if (isComposite(discType)) {
       discAttrs.analysis_discipline_attributes = {
-        discipline_id: node.id, analysis_id: subAnalysisId,
+        discipline_id: node.id,
+        analysis_id: subAnalysisId,
       };
     }
     const { endpoint } = node; // an endpoint is already present
@@ -170,7 +179,8 @@ class Discipline extends React.Component {
     const discType = event.target.value;
     const { selected } = this.state;
 
-    if (!isComposite(discType) && selected) { // unset analysis if needed
+    if (!isComposite(discType) && selected) {
+      // unset analysis if needed
       this.setState({ discType, selected: [] });
     } else {
       this.setState({ discType });
@@ -184,13 +194,9 @@ class Discipline extends React.Component {
   }
 
   render() {
-    const {
-      isEditing, discType, discHost, discPort, discName, selected,
-      isDragging, closestEdge,
-    } = this.state;
-    const {
-      node, onSubAnalysisSearch, index, limited, connected, flash,
-    } = this.props;
+    const { isEditing, discType, discHost, discPort, discName, selected, isDragging, closestEdge } =
+      this.state;
+    const { node, onSubAnalysisSearch, limited, connected, flash } = this.props;
     let { type } = node;
     if (type === XDSMJS_ANALYSIS) {
       type = ANALYSIS;
@@ -199,7 +205,7 @@ class Discipline extends React.Component {
       type = DISCIPLINE;
     }
     const not_editable = false;
-    const sub_analysable = (type === DISCIPLINE && !connected);
+    const sub_analysable = type === DISCIPLINE && !connected;
     const type_changeable = sub_analysable || isComposite(type);
 
     if (isEditing) {
@@ -235,7 +241,9 @@ class Discipline extends React.Component {
               />
             </div>
             <div className="col-auto">
-              <label htmlFor="port" className="mt-2">:</label>
+              <label htmlFor="port" className="mt-2">
+                :
+              </label>
             </div>
             <div className="col-auto">
               <input
@@ -247,52 +255,67 @@ class Discipline extends React.Component {
                 onChange={this.handleDiscPortChange}
               />
             </div>
-
           </>
         );
       }
       return (
-            <li
-              ref={this.listItemRef}
-              className={`list-group-item editor-discipline${flash ? ' editor-discipline--flash' : ''}`}
-              style={{ position: 'relative', opacity: isDragging ? 0.4 : 1 }}
-            >
-              {closestEdge && <div className="editor-discipline-drop-indicator" style={closestEdge === 'top' ? { top: -1 } : { bottom: -1 }} />}
-              <form className="d-flex flex-row align-items-bottom flex-wrap" onSubmit={this.handleUpdate}>
-                <div className="row">
-                  <div className="col-auto">
-                    <input
-                      className="form-control"
-                      id="name"
-                      type="text"
-                      defaultValue={discName}
-                      placeholder="Enter Name..."
-                      onChange={this.handleDiscNameChange}
-                    />
-                  </div>
-                  <div className="col-auto">
-                    <select
-                      className="form-control ms-2"
-                      id="type"
-                      value={discType}
-                      onChange={this.handleSelectChange}
-                      disabled={!type_changeable}
-                    >
-                      <option value={DISCIPLINE}>Discipline</option>
-                      <option value={ANALYSIS}>Sub-Analysis</option>
-                      <option value={OPTIMIZATION}>Sub-Optimization</option>
-                    </select>
-                  </div>
-                  {deploymentOrSubAnalysis}
-                  <div className="col-auto">
-                    <button type="submit" className="btn btn-primary ms-3">Update</button>
-                  </div>
-                  <div className="col-auto">
-                    <button type="button" onClick={this.handleCancelEdit} className="btn btn-secondary ms-1">Cancel</button>
-                  </div>
-                </div>
-              </form>
-            </li>
+        <li
+          ref={this.listItemRef}
+          className={`list-group-item editor-discipline${flash ? ' editor-discipline--flash' : ''}`}
+          style={{ position: 'relative', opacity: isDragging ? 0.4 : 1 }}
+        >
+          {closestEdge && (
+            <div
+              className="editor-discipline-drop-indicator"
+              style={closestEdge === 'top' ? { top: -1 } : { bottom: -1 }}
+            />
+          )}
+          <form
+            className="d-flex flex-row align-items-bottom flex-wrap"
+            onSubmit={this.handleUpdate}
+          >
+            <div className="row">
+              <div className="col-auto">
+                <input
+                  className="form-control"
+                  id="name"
+                  type="text"
+                  defaultValue={discName}
+                  placeholder="Enter Name..."
+                  onChange={this.handleDiscNameChange}
+                />
+              </div>
+              <div className="col-auto">
+                <select
+                  className="form-control ms-2"
+                  id="type"
+                  value={discType}
+                  onChange={this.handleSelectChange}
+                  disabled={!type_changeable}
+                >
+                  <option value={DISCIPLINE}>Discipline</option>
+                  <option value={ANALYSIS}>Sub-Analysis</option>
+                  <option value={OPTIMIZATION}>Sub-Optimization</option>
+                </select>
+              </div>
+              {deploymentOrSubAnalysis}
+              <div className="col-auto">
+                <button type="submit" className="btn btn-primary ms-3">
+                  Update
+                </button>
+              </div>
+              <div className="col-auto">
+                <button
+                  type="button"
+                  onClick={this.handleCancelEdit}
+                  className="btn btn-secondary ms-1"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </form>
+        </li>
       );
     }
     let item = node.name;
@@ -302,33 +325,38 @@ class Discipline extends React.Component {
     }
 
     return (
-          <li
-            ref={this.listItemRef}
-            className={`list-group-item editor-discipline col-md-4${flash ? ' editor-discipline--flash' : ''}`}
-            style={{ position: 'relative', opacity: isDragging ? 0.4 : 1 }}
-          >
-            {closestEdge && <div className="editor-discipline-drop-indicator" style={closestEdge === 'top' ? { top: -1 } : { bottom: -1 }} />}
-            <span className="align-bottom">{item}</span>
-            <button
-              type="button"
-              data-bs-toggle="modal"
-              data-bs-target={`#confirmModal-${node.id}`}
-              className="d-inline btn btn-light btn-inverse btn-sm float-end text-danger"
-              title="Delete"
-              disabled={limited}
-            >
-              <i className="fa fa-times" />
-            </button>
-            <button
-              type="button"
-              className="d-inline btn btn-light btn-sm ms-2"
-              title="Edit"
-              onClick={this.handleEdit}
-              disabled={limited || not_editable}
-            >
-              <i className="fa fa-edit" />
-            </button>
-          </li>
+      <li
+        ref={this.listItemRef}
+        className={`list-group-item editor-discipline col-md-4${flash ? ' editor-discipline--flash' : ''}`}
+        style={{ position: 'relative', opacity: isDragging ? 0.4 : 1 }}
+      >
+        {closestEdge && (
+          <div
+            className="editor-discipline-drop-indicator"
+            style={closestEdge === 'top' ? { top: -1 } : { bottom: -1 }}
+          />
+        )}
+        <span className="align-bottom">{item}</span>
+        <button
+          type="button"
+          data-bs-toggle="modal"
+          data-bs-target={`#confirmModal-${node.id}`}
+          className="d-inline btn btn-light btn-inverse btn-sm float-end text-danger"
+          title="Delete"
+          disabled={limited}
+        >
+          <i className="fa fa-times" />
+        </button>
+        <button
+          type="button"
+          className="d-inline btn btn-light btn-sm ms-2"
+          title="Edit"
+          onClick={this.handleEdit}
+          disabled={limited || not_editable}
+        >
+          <i className="fa fa-edit" />
+        </button>
+      </li>
     );
   }
 }
@@ -377,10 +405,9 @@ class DisciplinesEditor extends React.Component {
         this.setState({ flashId: sourceId });
         setTimeout(() => this.setState({ flashId: null }), 700);
 
-        this.props.onDisciplineUpdate(
-          this.props.db.nodes[sourceIndex + 1],
-          { position: destinationIndex + 1 },
-        );
+        this.props.onDisciplineUpdate(this.props.db.nodes[sourceIndex + 1], {
+          position: destinationIndex + 1,
+        });
       },
     });
   }
@@ -400,11 +427,14 @@ class DisciplinesEditor extends React.Component {
   render() {
     const { nodes, flashId } = this.state;
     const {
-      db, api,
+      db,
+      api,
       name,
-      onDisciplineUpdate, onDisciplineDelete,
+      onDisciplineUpdate,
+      onDisciplineDelete,
       onSubAnalysisSearch,
-      onDisciplineCreate, onDisciplineNameChange,
+      onDisciplineCreate,
+      onDisciplineNameChange,
       onDisciplineImport,
     } = this.props;
 
@@ -431,7 +461,9 @@ class DisciplinesEditor extends React.Component {
         id={node.id}
         title="Are you sure?"
         text={`Delete discipline ${node.name}`}
-        onCancel={() => { console.log('cancel'); }}
+        onCancel={() => {
+          console.log('cancel');
+        }}
         onConfirm={() => {
           const self = this;
           self.props.onDisciplineDelete(node);
@@ -449,9 +481,7 @@ class DisciplinesEditor extends React.Component {
             Disciplines
             <span className="badge bg-info ms-2">{nbNodes}</span>
           </div>
-          <ul className="list-group">
-            {disciplines}
-          </ul>
+          <ul className="list-group">{disciplines}</ul>
         </div>
         <div className="editor-section">
           <form className="row g-3" onSubmit={onDisciplineCreate}>
@@ -467,7 +497,9 @@ class DisciplinesEditor extends React.Component {
               />
             </div>
             <div className="col-auto">
-              <button type="submit" className="btn btn-primary ms-3" disabled={limited}>Add</button>
+              <button type="submit" className="btn btn-primary ms-3" disabled={limited}>
+                Add
+              </button>
             </div>
           </form>
         </div>
diff --git a/app/javascript/mda_viewer/components/DistributionModals.jsx b/app/javascript/mda_viewer/components/DistributionModals.jsx
index 54e27a3ef..281a5998c 100644
--- a/app/javascript/mda_viewer/components/DistributionModals.jsx
+++ b/app/javascript/mda_viewer/components/DistributionModals.jsx
@@ -109,7 +109,9 @@ class DistributionModal extends React.Component {
 
   constructor(props) {
     super(props);
-    const { conn: { uq } } = this.props;
+    const {
+      conn: { uq },
+    } = this.props;
     this.state = { selected: -1, dists: DistributionModal._uqToState(uq).dists };
     this.visible = false;
 
@@ -119,61 +121,57 @@ class DistributionModal extends React.Component {
   }
 
   componentDidMount() {
-    const { conn: { name } } = this.props;
+    const {
+      conn: { name },
+    } = this.props;
     // eslint-disable-next-line no-undef
-    $(`#distributionListModal-${name}`).on(
-      'show.bs.modal',
-      () => {
-        const { conn: { uq } } = this.props;
-        const dists = DistributionModal._uqToState(uq);
-        this.setState(dists);
+    $(`#distributionListModal-${name}`).on('show.bs.modal', () => {
+      const {
+        conn: { uq },
+      } = this.props;
+      const dists = DistributionModal._uqToState(uq);
+      this.setState(dists);
+      this.visible = true;
+      for (let i = 0; i < dists.dists.length; i += 1) {
+        // eslint-disable-next-line no-undef
+        $(`#${name}-${i}`).on('click', (/* e */) => {
+          this.setState({ selected: i });
+        });
+      }
+    });
+    // eslint-disable-next-line no-undef
+    $(`#distributionListModal-${name}`).on('hidden.bs.modal', () => {
+      this.visible = false;
+    });
+    // eslint-disable-next-line no-undef
+    $(`#distributionModal-${name}`).on('show.bs.modal', () => {
+      const {
+        conn: { uq },
+      } = this.props;
+      if (uq.length === 1) {
+        const { dists } = DistributionModal._uqToState(uq);
+        this.setState({ selected: 0, dists });
         this.visible = true;
-        for (let i = 0; i < dists.dists.length; i += 1) {
+        for (let i = 0; i < dists.length; i += 1) {
           // eslint-disable-next-line no-undef
-          $(`#${name}-${i}`).on('click', (/* e */) => {
+          $(`#${name}-${i}`).on('click', () => {
             this.setState({ selected: i });
           });
         }
-      },
-    );
-    // eslint-disable-next-line no-undef
-    $(`#distributionListModal-${name}`).on(
-      'hidden.bs.modal',
-      () => {
-        this.visible = false;
-      },
-    );
-    // eslint-disable-next-line no-undef
-    $(`#distributionModal-${name}`).on(
-      'show.bs.modal',
-      () => {
-        const { conn: { uq } } = this.props;
-        if (uq.length === 1) {
-          const { dists } = DistributionModal._uqToState(uq);
-          this.setState({ selected: 0, dists });
-          this.visible = true;
-          for (let i = 0; i < dists.length; i += 1) {
-            // eslint-disable-next-line no-undef
-            $(`#${name}-${i}`).on('click', () => {
-              this.setState({ selected: i });
-            });
-          }
-        }
-        const { selected } = this.state;
-        const varname = uq.length === 1 ? name : `${name}[${selected}]`;
-        // eslint-disable-next-line no-undef
-        $(`#distributionModal-${name} .modal-title`).text(`Distribution of ${varname}`);
-      },
-    );
+      }
+      const { selected } = this.state;
+      const varname = uq.length === 1 ? name : `${name}[${selected}]`;
+      // eslint-disable-next-line no-undef
+      $(`#distributionModal-${name} .modal-title`).text(`Distribution of ${varname}`);
+    });
     // eslint-disable-next-line no-undef
-    $(`#distributionModal-${name}`).on(
-      'hidden.bs.modal',
-      () => {
-        const { conn: { uq } } = this.props;
-        const dists = DistributionModal._uqToState(uq);
-        this.setState(dists);
-      },
-    );
+    $(`#distributionModal-${name}`).on('hidden.bs.modal', () => {
+      const {
+        conn: { uq },
+      } = this.props;
+      const dists = DistributionModal._uqToState(uq);
+      this.setState(dists);
+    });
   }
 
   shouldComponentUpdate() {
@@ -200,12 +198,16 @@ class DistributionModal extends React.Component {
     for (const k in formData) {
       if (k.startsWith(kind.toLowerCase())) {
         for (const optname in formData[k]) {
-          if (formData[k][optname] !== undefined) { // Form bug: filter undefined data
-            newState.dists[selected].options_attributes.push(
-              { name: optname, value: formData[k][optname] },
-            );
+          if (formData[k][optname] !== undefined) {
+            // Form bug: filter undefined data
+            newState.dists[selected].options_attributes.push({
+              name: optname,
+              value: formData[k][optname],
+            });
           } else {
-            console.log(`Bug in jsonschema form: avoid pushing ${k} ${optname} ${formData[k][optname]}`);
+            console.log(
+              `Bug in jsonschema form: avoid pushing ${k} ${optname} ${formData[k][optname]}`
+            );
           }
         }
       }
@@ -213,7 +215,11 @@ class DistributionModal extends React.Component {
 
     // distribution: check for updating/removing options
     const { conn } = this.props;
-    const { uq: { [selected]: { options_attributes: prevOptAttrs } } } = conn;
+    const {
+      uq: {
+        [selected]: { options_attributes: prevOptAttrs },
+      },
+    } = conn;
     const optIds = prevOptAttrs.map((opt) => opt.id);
     for (const optAttr of newState.dists[selected].options_attributes) {
       if (optIds.length) {
@@ -229,7 +235,10 @@ class DistributionModal extends React.Component {
     if (selected < 0) {
       return;
     }
-    const { conn: { id, name }, onConnectionChange } = this.props;
+    const {
+      conn: { id, name },
+      onConnectionChange,
+    } = this.props;
     onConnectionChange(id, { distributions_attributes: [dists[selected]] });
     // eslint-disable-next-line no-undef
     $(`#distributionModal-${name}`).modal('hide');
@@ -238,7 +247,11 @@ class DistributionModal extends React.Component {
   getFormData() {
     const { selected } = this.state;
     const taken = selected < 0 ? 0 : selected;
-    const { dists: { [taken]: { kind, options_attributes } } } = this.state;
+    const {
+      dists: {
+        [taken]: { kind, options_attributes },
+      },
+    } = this.state;
     const formData = { kind };
     if (options_attributes) {
       formData[`${kind.toLowerCase()}_options`] = {};
@@ -253,66 +266,79 @@ class DistributionModal extends React.Component {
   /* eslint-disable jsx-a11y/control-has-associated-label */
   /* eslint-disable react/no-array-index-key */
   render() {
-    const { conn: { name, uq } } = this.props;
+    const {
+      conn: { name, uq },
+    } = this.props;
     const formData = this.getFormData();
 
-    const distributionModalItems = uq.map(
-      (dist, i) => (
-        <div className="row" key={`${name}-${i}`}>
-          <div className="col-md-3">{`${name}[${i}]`}</div>
-          <div className="col-md-5">{DistributionModal._uqLabelOf(uq[i])}</div>
-          <div className="col-md-4">
-            <button
-              title="Edit"
-              type="button"
-              id={`${name}-${i}`}
-              data-varname={name}
-              data-coord={i}
-              data-bs-toggle="modal"
-              data-bs-target={`#distributionModal-${name}`}
-              className="btn btn-sm"
-            >
-              <i className="fas fa-edit" />
-            </button>
-          </div>
+    const distributionModalItems = uq.map((dist, i) => (
+      <div className="row" key={`${name}-${i}`}>
+        <div className="col-md-3">{`${name}[${i}]`}</div>
+        <div className="col-md-5">{DistributionModal._uqLabelOf(uq[i])}</div>
+        <div className="col-md-4">
+          <button
+            title="Edit"
+            type="button"
+            id={`${name}-${i}`}
+            data-varname={name}
+            data-coord={i}
+            data-bs-toggle="modal"
+            data-bs-target={`#distributionModal-${name}`}
+            className="btn btn-sm"
+          >
+            <i className="fas fa-edit" />
+          </button>
         </div>
-      ),
-    );
+      </div>
+    ));
     return (
       <div key={name}>
         <div className="modal distribution-list-modal" id={`distributionListModal-${name}`}>
           <div className="modal-dialog">
             <div className="modal-content">
               <div className="modal-header">
-                <h4 className="modal-title">
-                  Distributions of
-                  {' '}
-                  {name}
-                </h4>
-                <button type="button" className="btn-close" data-bs-dismiss="modal" aria-hidden="true">×</button>
+                <h4 className="modal-title">Distributions of {name}</h4>
+                <button
+                  type="button"
+                  className="btn-close"
+                  data-bs-dismiss="modal"
+                  aria-hidden="true"
+                >
+                  ×
+                </button>
               </div>
               <div className="container" />
               <div className="modal-body">
-                <div className="container-fluid">
-                  {distributionModalItems}
-                </div>
+                <div className="container-fluid">{distributionModalItems}</div>
               </div>
               <div className="modal-footer">
-                <button type="button" className="btn btn-primary" data-bs-dismiss="modal">Close</button>
+                <button type="button" className="btn btn-primary" data-bs-dismiss="modal">
+                  Close
+                </button>
               </div>
             </div>
           </div>
         </div>
-        <div className="modal fade distribution-modal" id={`distributionModal-${name}`} tabIndex="-1" role="dialog" aria-labelledby={`distributionModalLabel-${name}`} aria-hidden="true">
+        <div
+          className="modal fade distribution-modal"
+          id={`distributionModal-${name}`}
+          tabIndex="-1"
+          role="dialog"
+          aria-labelledby={`distributionModalLabel-${name}`}
+          aria-hidden="true"
+        >
           <div className="modal-dialog" role="document">
             <div className="modal-content">
               <div className="modal-header">
                 <h4 className="modal-title" id={`distributionModalLabel-${name}`}>
-                  Distribution of variable
-                  {' '}
-                  {name}
+                  Distribution of variable {name}
                 </h4>
-                <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                <button
+                  type="button"
+                  className="btn-close"
+                  data-bs-dismiss="modal"
+                  aria-label="Close"
+                />
               </div>
               <div className="modal-body">
                 <Form
@@ -325,8 +351,12 @@ class DistributionModal extends React.Component {
                 </Form>
               </div>
               <div className="modal-footer">
-                <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                <button type="button" className="btn btn-primary" onClick={this.handleSave}>Save</button>
+                <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">
+                  Close
+                </button>
+                <button type="button" className="btn btn-primary" onClick={this.handleSave}>
+                  Save
+                </button>
               </div>
             </div>
           </div>
@@ -340,11 +370,13 @@ DistributionModal.propTypes = {
   conn: PropTypes.shape({
     id: PropTypes.number.isRequired,
     name: PropTypes.string.isRequired,
-    uq: PropTypes.arrayOf(PropTypes.shape({
-      id: PropTypes.number,
-      kind: PropTypes.string.isRequired,
-      options_attributes: PropTypes.array.isRequired,
-    })),
+    uq: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.number,
+        kind: PropTypes.string.isRequired,
+        options_attributes: PropTypes.array.isRequired,
+      })
+    ),
   }).isRequired,
   onConnectionChange: PropTypes.func.isRequired,
 };
@@ -352,24 +384,20 @@ DistributionModal.propTypes = {
 class DistributionModals extends React.PureComponent {
   render() {
     const { db, onConnectionChange } = this.props;
-    const connections = db.computeConnections().filter(
-      (c) => c.role === 'design_var' || c.role === 'parameter' || c.role === 'uncertain_var',
-    );
-    const modals = connections.map(
-      (conn) => {
-        const { uq: dists } = conn;
-        if (dists.length > 0) {
-          return (
-            <DistributionModal
-              key={conn.id}
-              conn={conn}
-              onConnectionChange={onConnectionChange}
-            />
-          );
-        }
-        return null;
-      },
-    );
+    const connections = db
+      .computeConnections()
+      .filter(
+        (c) => c.role === 'design_var' || c.role === 'parameter' || c.role === 'uncertain_var'
+      );
+    const modals = connections.map((conn) => {
+      const { uq: dists } = conn;
+      if (dists.length > 0) {
+        return (
+          <DistributionModal key={conn.id} conn={conn} onConnectionChange={onConnectionChange} />
+        );
+      }
+      return null;
+    });
     return modals;
   }
 }
diff --git a/app/javascript/mda_viewer/components/ExportPanel.jsx b/app/javascript/mda_viewer/components/ExportPanel.jsx
index 403d3ddbc..61f99604c 100644
--- a/app/javascript/mda_viewer/components/ExportPanel.jsx
+++ b/app/javascript/mda_viewer/components/ExportPanel.jsx
@@ -17,14 +17,12 @@ class ExportPanel extends React.Component {
   }
 
   handleAnalysisSearch(callback) {
-    this.api.getAnalysisCandidates(
-      (response) => {
-        const options = response.data
-          .filter((analysis) => analysis.id !== this.db.getAnalysisId())
-          .map((analysis) => ({ id: analysis.id, label: `#${analysis.id} ${analysis.name}` }));
-        callback(options);
-      },
-    );
+    this.api.getAnalysisCandidates((response) => {
+      const options = response.data
+        .filter((analysis) => analysis.id !== this.db.getAnalysisId())
+        .map((analysis) => ({ id: analysis.id, label: `#${analysis.id} ${analysis.name}` }));
+      callback(options);
+    });
   }
 
   handleAnalysisSelected(selected) {
@@ -48,8 +46,10 @@ class ExportPanel extends React.Component {
           commitClass: 'btn-primary',
           cancel: 'Continue',
           cancelClass: 'btn-info',
-          onConfirm: () => { window.location.href = this.api.url(`/analyses/${selection.id}`); },
-          onCancel: () => { },
+          onConfirm: () => {
+            window.location.href = this.api.url(`/analyses/${selection.id}`);
+          },
+          onCancel: () => {},
         });
       },
       (error) => {
@@ -64,16 +64,16 @@ class ExportPanel extends React.Component {
           commit: 'Ok',
           commitClass: 'btn-primary',
           cancelClass: 'd-none',
-          onConfirm: () => { },
+          onConfirm: () => {},
         });
-      },
+      }
     );
   }
 
   render() {
     const mdaId = this.db.getAnalysisId();
     const { selected } = this.state;
-    const disabled = (selected.length === 0);
+    const disabled = selected.length === 0;
 
     let disciplineExports = [];
     disciplineExports = this.db.getDisciplines().map((disc) => {
diff --git a/app/javascript/mda_viewer/components/HistoryPanel.jsx b/app/javascript/mda_viewer/components/HistoryPanel.jsx
index d9b0b6461..a19b6bb20 100644
--- a/app/javascript/mda_viewer/components/HistoryPanel.jsx
+++ b/app/javascript/mda_viewer/components/HistoryPanel.jsx
@@ -18,16 +18,20 @@ class DaylyChangeLog extends React.PureComponent {
         if (elt.action === 'change') {
           let oldval = elt.old_value;
           let newval = elt.value;
-          if (elt.old_value === 'analysis') { // Use consistent terminology
+          if (elt.old_value === 'analysis') {
+            // Use consistent terminology
             oldval = 'discipline';
           }
-          if (elt.old_value === 'mda') { // Use consistent terminology
+          if (elt.old_value === 'mda') {
+            // Use consistent terminology
             oldval = 'sub-analysis';
           }
-          if (elt.value === 'analysis') { // Use consistent terminology
+          if (elt.value === 'analysis') {
+            // Use consistent terminology
             newval = 'discipline';
           }
-          if (elt.value === 'mda') { // Use consistent terminology
+          if (elt.value === 'mda') {
+            // Use consistent terminology
             newval = 'sub-analysis';
           }
 
@@ -35,7 +39,7 @@ class DaylyChangeLog extends React.PureComponent {
         }
         return (
           <span key={change.at + chg}>
-            { i > 0 ? ', ' : '' }
+            {i > 0 ? ', ' : ''}
             <em>{chg}</em>
           </span>
         );
@@ -48,11 +52,7 @@ class DaylyChangeLog extends React.PureComponent {
       );
     });
 
-    return (
-      <ul>
-        { list }
-      </ul>
-    );
+    return <ul>{list}</ul>;
   }
 }
 
@@ -114,9 +114,7 @@ class HistoryPanel extends React.Component {
     return (
       <div className="editor-section">
         <div className="editor-section-label">Changes</div>
-        <ul className="editor-section">
-          {items.length > 0 ? items : 'No recorded change'}
-        </ul>
+        <ul className="editor-section">{items.length > 0 ? items : 'No recorded change'}</ul>
       </div>
     );
   }
diff --git a/app/javascript/mda_viewer/components/ImportSection.jsx b/app/javascript/mda_viewer/components/ImportSection.jsx
index 3b8cc8b17..f1da5e8bb 100644
--- a/app/javascript/mda_viewer/components/ImportSection.jsx
+++ b/app/javascript/mda_viewer/components/ImportSection.jsx
@@ -25,20 +25,17 @@ class ImportSection extends React.Component {
           .map((analysis) => ({ id: analysis.id, label: `#${analysis.id} ${analysis.name}` }));
         callback(options);
       },
-      'all', // search all analyses not only mine
+      'all' // search all analyses not only mine
     );
   }
 
   handleAnalysisSelected(selected) {
     const [selection] = selected;
-    this.api.getDisciplines(
-      selection.id,
-      (response) => {
-        console.log(response.data);
-        const disciplines = response.data;
-        this.setState({ selected, disciplines });
-      },
-    );
+    this.api.getDisciplines(selection.id, (response) => {
+      console.log(response.data);
+      const disciplines = response.data;
+      this.setState({ selected, disciplines });
+    });
   }
 
   handleImport(discId) {
diff --git a/app/javascript/mda_viewer/components/OpenmdaoImplEditor.jsx b/app/javascript/mda_viewer/components/OpenmdaoImplEditor.jsx
index e256cce99..f303ebfd1 100644
--- a/app/javascript/mda_viewer/components/OpenmdaoImplEditor.jsx
+++ b/app/javascript/mda_viewer/components/OpenmdaoImplEditor.jsx
@@ -59,8 +59,14 @@ const SCHEMA_NONLINEAR_SOLVER = {
       properties: {
         name: {
           title: 'Solver name',
-          enum: ['NonlinearBlockGS', 'RecklessNonlinearBlockGS', 'NonlinearBlockJac',
-            'NonlinearRunOnce', 'NewtonSolver', 'BroydenSolver'],
+          enum: [
+            'NonlinearBlockGS',
+            'RecklessNonlinearBlockGS',
+            'NonlinearBlockJac',
+            'NonlinearRunOnce',
+            'NewtonSolver',
+            'BroydenSolver',
+          ],
         },
         atol: { type: 'number', title: 'Absolute error tolerance' },
         rtol: { type: 'number', title: 'Relative error tolerance' },
@@ -82,8 +88,15 @@ const SCHEMA_LINEAR_SOLVER = {
       properties: {
         name: {
           title: 'Solver name',
-          enum: ['ScipyKrylov', 'LinearBlockGS', 'LinearBlockJac', 'LinearRunOnce',
-            'DirectSolver', 'PETScKrylov', 'LinearUserDefined'],
+          enum: [
+            'ScipyKrylov',
+            'LinearBlockGS',
+            'LinearBlockJac',
+            'LinearRunOnce',
+            'DirectSolver',
+            'PETScKrylov',
+            'LinearUserDefined',
+          ],
         },
         atol: { type: 'number', title: 'Absolute error tolerance' },
         rtol: { type: 'number', title: 'Relative error tolerance' },
@@ -102,7 +115,8 @@ function _getOpenmdaoImpl(formData) {
   const nodes = [];
   for (const discId in openmdaoComps) {
     // eslint-disable-next-line no-restricted-globals
-    if (!isNaN(parseInt(discId, 10))) { // take only ids, discard use_scaling and parallel_group
+    if (!isNaN(parseInt(discId, 10))) {
+      // take only ids, discard use_scaling and parallel_group
       nodes.push({
         discipline_id: discId,
         implicit_component: openmdaoComps[discId].implicit,
@@ -178,9 +192,17 @@ class OpenmdaoImplEditor extends React.Component {
         type: 'object',
         title: name,
         properties: {
-          implicit: { type: 'boolean', title: 'Implicit component', default: node.implicit_component },
+          implicit: {
+            type: 'boolean',
+            title: 'Implicit component',
+            default: node.implicit_component,
+          },
           jax: { type: 'boolean', title: 'Jax component', default: node.jax_component },
-          derivatives: { type: 'boolean', title: 'Support derivatives', default: node.support_derivatives },
+          derivatives: {
+            type: 'boolean',
+            title: 'Support derivatives',
+            default: node.support_derivatives,
+          },
           surrogate: { type: 'boolean', title: 'EGMDO surrogate', default: node.egmdo_surrogate },
         },
       };
@@ -193,8 +215,14 @@ class OpenmdaoImplEditor extends React.Component {
           'ui:help': (
             <div>
               cf.
-              { }
-              <a href="https://openmdao.org/newdocs/versions/latest/features/units.html" target="_blank" rel="noreferrer">Units definitions</a>
+              {}
+              <a
+                href="https://openmdao.org/newdocs/versions/latest/features/units.html"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Units definitions
+              </a>
             </div>
           ),
         },
@@ -202,8 +230,14 @@ class OpenmdaoImplEditor extends React.Component {
           'ui:help': (
             <div>
               cf.
-              { }
-              <a href="https://openmdao.org/newdocs/versions/latest/features/core_features/working_with_components/scaling.html" target="_blank" rel="noreferrer">Scaling</a>
+              {}
+              <a
+                href="https://openmdao.org/newdocs/versions/latest/features/core_features/working_with_components/scaling.html"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Scaling
+              </a>
             </div>
           ),
         },
@@ -253,8 +287,12 @@ class OpenmdaoImplEditor extends React.Component {
               liveValidate
             >
               <div>
-                <button type="submit" className="btn btn-primary">Save</button>
-                <button type="button" className="ms-1 btn btn-secondary" onClick={this.handleReset}>Reset</button>
+                <button type="submit" className="btn btn-primary">
+                  Save
+                </button>
+                <button type="button" className="ms-1 btn btn-secondary" onClick={this.handleReset}>
+                  Reset
+                </button>
               </div>
             </Form>
           </div>
@@ -269,7 +307,9 @@ class OpenmdaoImplEditor extends React.Component {
               liveValidate
             >
               <div>
-                <button type="submit" className="d-none btn btn-primary">Save</button>
+                <button type="submit" className="d-none btn btn-primary">
+                  Save
+                </button>
               </div>
             </Form>
           </div>
@@ -284,7 +324,9 @@ class OpenmdaoImplEditor extends React.Component {
               liveValidate
             >
               <div className="mb-3">
-                <button type="submit" className="d-none btn btn-primary">Save</button>
+                <button type="submit" className="d-none btn btn-primary">
+                  Save
+                </button>
               </div>
             </Form>
           </div>
@@ -299,7 +341,9 @@ class OpenmdaoImplEditor extends React.Component {
               liveValidate
             >
               <div className="mb-3">
-                <button type="submit" className="d-none btn btn-primary">Save</button>
+                <button type="submit" className="d-none btn btn-primary">
+                  Save
+                </button>
               </div>
             </Form>
           </div>
diff --git a/app/javascript/mda_viewer/components/ToolBar.jsx b/app/javascript/mda_viewer/components/ToolBar.jsx
index 126985d69..9f6014f74 100644
--- a/app/javascript/mda_viewer/components/ToolBar.jsx
+++ b/app/javascript/mda_viewer/components/ToolBar.jsx
@@ -6,7 +6,7 @@ import { select } from 'd3-selection';
 class OpenMDAOLogLine extends React.PureComponent {
   render() {
     const { line } = this.props;
-    return (<div className="listing-line">{line}</div>);
+    return <div className="listing-line">{line}</div>;
   }
 }
 
@@ -26,13 +26,33 @@ function _saveAsPng() {
 }
 
 function _convertVariablesToCsv(connections) {
-  const headers = ['Active', 'From', 'To', 'Name', 'Description', 'Role',
-    'Type', 'Shape', 'Units', 'Init', 'Lower', 'Upper'];
+  const headers = [
+    'Active',
+    'From',
+    'To',
+    'Name',
+    'Description',
+    'Role',
+    'Type',
+    'Shape',
+    'Units',
+    'Init',
+    'Lower',
+    'Upper',
+  ];
   const rows = [];
   connections.forEach((conn) => {
     const row = [];
-    row.push(conn.active, conn.from, conn.to, conn.name,
-      conn.desc, conn.role, conn.type, conn.shape);
+    row.push(
+      conn.active,
+      conn.from,
+      conn.to,
+      conn.name,
+      conn.desc,
+      conn.role,
+      conn.type,
+      conn.shape
+    );
     row.push(conn.units, conn.init, conn.lower, conn.upper);
     rows.push(row.join(';'));
   });
@@ -73,17 +93,14 @@ class ToolBar extends React.Component {
     const { checked } = this.state;
     if (!checked) {
       this.setState({ loading: true });
-      api.openmdaoChecking(
-        mdaId,
-        (response) => {
-          this.setState({
-            loading: false,
-            checked: true,
-            statusOk: response.data.statusOk,
-            log: response.data.log,
-          });
-        },
-      );
+      api.openmdaoChecking(mdaId, (response) => {
+        this.setState({
+          loading: false,
+          checked: true,
+          statusOk: response.data.statusOk,
+          log: response.data.log,
+        });
+      });
     }
   }
 
@@ -95,14 +112,16 @@ class ToolBar extends React.Component {
 
   render() {
     const { api, mdaId } = this.props;
-    const {
-      log, statusOk, checked, loading,
-    } = this.state;
+    const { log, statusOk, checked, loading } = this.state;
 
     // eslint-disable-next-line react/no-array-index-key
-    const lines = log.map((l, i) => (<OpenMDAOLogLine key={i} line={l} />));
+    const lines = log.map((l, i) => <OpenMDAOLogLine key={i} line={l} />);
     let btnStatusClass = statusOk ? 'btn btn-success' : 'btn btn-warning';
-    let btnIcon = statusOk ? <i className="fa fa-check" /> : <i className="fa fa-exclamation-triangle" />;
+    let btnIcon = statusOk ? (
+      <i className="fa fa-check" />
+    ) : (
+      <i className="fa fa-exclamation-triangle" />
+    );
     if (!checked) {
       btnStatusClass = 'btn btn-info';
       btnIcon = <i className="fa fa-question" />;
@@ -132,30 +151,27 @@ class ToolBar extends React.Component {
             >
               {btnIcon}
             </button>
-            <a className="btn btn-primary" href={hrefOm}>Export Openmdao</a>
+            <a className="btn btn-primary" href={hrefOm}>
+              Export Openmdao
+            </a>
           </div>
           <div className="btn-group me-2" role="group">
-            <a className="btn btn-primary" href={hrefGemseo}>Export Gemseo</a>
+            <a className="btn btn-primary" href={hrefGemseo}>
+              Export Gemseo
+            </a>
           </div>
           <div className="btn-group me-2" role="group">
-            <a className="btn btn-primary" href={hrefCmdows}>Export Cmdows</a>
+            <a className="btn btn-primary" href={hrefCmdows}>
+              Export Cmdows
+            </a>
           </div>
           <div className="btn-group me-2" role="group">
-            <button
-              type="button"
-              className="btn btn-primary"
-              href="#"
-              onClick={this._exportCsv}
-            >
+            <button type="button" className="btn btn-primary" href="#" onClick={this._exportCsv}>
               Export Csv
             </button>
           </div>
           <div className="btn-group me-2" role="group">
-            <button
-              type="button"
-              className="btn btn-primary"
-              onClick={_saveAsPng}
-            >
+            <button type="button" className="btn btn-primary" onClick={_saveAsPng}>
               Export Image
             </button>
           </div>
@@ -170,7 +186,9 @@ class ToolBar extends React.Component {
             </button>
             <ul className="dropdown-menu">
               <li>
-                <a className="dropdown-item" href={hrefHtml}>with Variables Counts</a>
+                <a className="dropdown-item" href={hrefHtml}>
+                  with Variables Counts
+                </a>
               </li>
               <li>
                 <a
@@ -187,9 +205,7 @@ class ToolBar extends React.Component {
         </div>
         <div className="collapse" id="collapseListing">
           <div className="card card-block">
-            <div className="listing">
-              {lines}
-            </div>
+            <div className="listing">{lines}</div>
           </div>
         </div>
       </div>
diff --git a/app/javascript/mda_viewer/components/VariableSearchPanel.jsx b/app/javascript/mda_viewer/components/VariableSearchPanel.jsx
index b216a4ce2..70597530e 100644
--- a/app/javascript/mda_viewer/components/VariableSearchPanel.jsx
+++ b/app/javascript/mda_viewer/components/VariableSearchPanel.jsx
@@ -6,11 +6,19 @@ import VariableSelector from './VariableSelector';
 function getDiscButtons(api, discs) {
   const buttons = discs.map(([disc, path]) => {
     const { name, analysis_id } = disc;
-    const title = path.map((a) => (a.name)).join('/');
+    const title = path.map((a) => a.name).join('/');
     const label = name === '__DRIVER__' ? 'User' : `${disc.name}`;
     return (
-      <div key={disc.id} className="btn-group me-2 mt-2 disc-button" role="group" data-bs-toggle="tooltip" title={`${title}`}>
-        <a href={api.url(`/analyses/${analysis_id}`)} className="btn btn-info" role="button">{label}</a>
+      <div
+        key={disc.id}
+        className="btn-group me-2 mt-2 disc-button"
+        role="group"
+        data-bs-toggle="tooltip"
+        title={`${title}`}
+      >
+        <a href={api.url(`/analyses/${analysis_id}`)} className="btn btn-info" role="button">
+          {label}
+        </a>
       </div>
     );
   });
@@ -20,9 +28,12 @@ function getDiscButtons(api, discs) {
 class VariableDisplay extends React.PureComponent {
   componentDidUpdate() {
     const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-    [...tooltipTriggerList].map((tooltipTriggerEl) => new Tooltip(tooltipTriggerEl, {
-      trigger: 'hover',
-    }));
+    [...tooltipTriggerList].map(
+      (tooltipTriggerEl) =>
+        new Tooltip(tooltipTriggerEl, {
+          trigger: 'hover',
+        })
+    );
   }
 
   render() {
@@ -33,14 +44,10 @@ class VariableDisplay extends React.PureComponent {
     return (
       <div className="editor-section">
         <div className="editor-section-label">Source</div>
-        <div className="mb-2">
-          { disciplineFrom }
-        </div>
+        <div className="mb-2">{disciplineFrom}</div>
 
         <div className="editor-section-label">Targets</div>
-        <div className="mb-2">
-          { disciplineTo }
-        </div>
+        <div className="mb-2">{disciplineTo}</div>
       </div>
     );
   }
@@ -83,7 +90,7 @@ class VariableSearchPanel extends React.Component {
       },
       (error) => {
         console.log(error);
-      },
+      }
     );
   }
 
@@ -93,7 +100,7 @@ class VariableSearchPanel extends React.Component {
 
     let varDisplay = null;
     if (selected.length !== 0) {
-      varDisplay = (<VariableDisplay api={api} varinfo={varinfo} />);
+      varDisplay = <VariableDisplay api={api} varinfo={varinfo} />;
     }
 
     return (
@@ -108,9 +115,7 @@ class VariableSearchPanel extends React.Component {
               disabled={false}
             />
           </div>
-          <div className="editor-section col-12">
-            {varDisplay}
-          </div>
+          <div className="editor-section col-12">{varDisplay}</div>
         </div>
       </div>
     );
diff --git a/app/javascript/mda_viewer/components/VariableSelector.jsx b/app/javascript/mda_viewer/components/VariableSelector.jsx
index e5602c810..7ea7b90d3 100644
--- a/app/javascript/mda_viewer/components/VariableSelector.jsx
+++ b/app/javascript/mda_viewer/components/VariableSelector.jsx
@@ -17,9 +17,7 @@ class VariableSelector extends React.Component {
   }
 
   render() {
-    const {
-      message, selected, disabled, vars: options,
-    } = this.props;
+    const { message, selected, disabled, vars: options } = this.props;
     return (
       <Typeahead
         id="varsearch"
diff --git a/app/javascript/mda_viewer/components/VariablesEditor.jsx b/app/javascript/mda_viewer/components/VariablesEditor.jsx
index 78ee7acdc..2ec476fb0 100644
--- a/app/javascript/mda_viewer/components/VariablesEditor.jsx
+++ b/app/javascript/mda_viewer/components/VariablesEditor.jsx
@@ -32,7 +32,8 @@ function _computeRoleSelection(conn) {
     { id: 'pos_constraint', text: 'Pos Constraint' },
     { id: 'eq_constraint', text: 'Eq Constraint' },
     { id: 'constraint', text: 'Constraint' },
-    { id: 'state_var', text: 'State Variable' }];
+    { id: 'state_var', text: 'State Variable' },
+  ];
   if (conn.role === 'parameter' || conn.role === 'design_var' || conn.role === 'uncertain_var') {
     options.splice(3); // remove outputs and state vars
   } else {
@@ -54,7 +55,12 @@ function _computeTypeSelection(conn) {
 function CheckButtonCell({
   cell,
   row: { index },
-  table: { options: { data: connections, meta: { limited, onConnectionChange } } },
+  table: {
+    options: {
+      data: connections,
+      meta: { limited, onConnectionChange },
+    },
+  },
 }) {
   const isChecked = connections[index].active;
   return (
@@ -62,10 +68,7 @@ function CheckButtonCell({
       type="checkbox"
       value={cell.getValue()}
       checked={isChecked}
-      onChange={() => onConnectionChange(
-        connections[index].id,
-        { active: !isChecked },
-      )}
+      onChange={() => onConnectionChange(connections[index].id, { active: !isChecked })}
       disabled={limited}
     />
   );
@@ -91,7 +94,9 @@ function ReadonlyCell({
   cell,
   row: { index },
   column: { id },
-  table: { options: { data: connections } },
+  table: {
+    options: { data: connections },
+  },
 }) {
   let textStyle = CELL_CLASSNAME;
   textStyle += connections[index].active ? '' : ' text-inactive';
@@ -125,10 +130,20 @@ function ReadonlyCell({
     const title = connections[index].desc;
     if (title) {
       textStyle += ' table-tooltip';
-      return (<span className={textStyle} title={title} data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title={title}>{info}</span>);
+      return (
+        <span
+          className={textStyle}
+          title={title}
+          data-bs-toggle="tooltip"
+          data-bs-placement="right"
+          data-bs-title={title}
+        >
+          {info}
+        </span>
+      );
     }
   }
-  return (<span className={textStyle}>{info}</span>);
+  return <span className={textStyle}>{info}</span>;
 }
 
 ReadonlyCell.propTypes = {
@@ -138,21 +153,19 @@ ReadonlyCell.propTypes = {
   table: PropTypes.object.isRequired,
 };
 
-function ButtonCell({
-  cell,
-  row,
-  column,
-  table,
-}) {
-  const { options: { data: connections, meta: { isEditing } } } = table;
-  const { index } = row;
+function ButtonCell({ cell, row, column, table }) {
   const {
-    name, role, shape, uq,
-  } = connections[index];
+    options: {
+      data: connections,
+      meta: { isEditing },
+    },
+  } = table;
+  const { index } = row;
+  const { name, role, shape, uq } = connections[index];
   let label = uq.length > 0 ? _uqLabelOf(uq[0]) : '';
   label = uq.length > 1 ? `[${label}, ...]` : label;
   if (isEditing) {
-    const isEditable = (role === 'uncertain_var');
+    const isEditable = role === 'uncertain_var';
     if (isEditable) {
       return (
         <button
@@ -176,7 +189,10 @@ function ButtonCell({
   }
 
   return ReadonlyCell({
-    cell, row, column, table,
+    cell,
+    row,
+    column,
+    table,
   });
 }
 
@@ -187,17 +203,11 @@ ButtonCell.propTypes = {
   table: PropTypes.object.isRequired,
 };
 
-function EditableCell({
-  cell,
-  row,
-  column,
-  table,
-}) {
+function EditableCell({ cell, row, column, table }) {
   const {
     options: {
-      data: connections, meta: {
-        onConnectionChange, isEditing, limited, cellToFocus,
-      },
+      data: connections,
+      meta: { onConnectionChange, isEditing, limited, cellToFocus },
     },
   } = table;
   const value = cell.getValue();
@@ -243,21 +253,25 @@ function EditableCell({
       );
     }
 
-
     // Editable fields regarding variable role
     const { role } = connections[index];
-    const isEditable = (((id === 'name' || id === 'shape') && !limited) || id === 'desc' || id === 'units'
-      || id === 'ref' || id === 'ref0' || id === 'res_ref')
-      || (role === 'state_var' && id === 'init')
-      || (role === 'response' && id === 'init')
-      || (role === 'ineq_constraint' && id === 'upper')
-      || (role === 'pos_constraint' && id === 'lower')
-      || (role === 'eq_constraint' && id === 'init')
-      || (role === 'constraint' && (id === 'lower' || id === 'upper'))
-      || (role === 'parameter' && (id === 'init' || id === 'lower' || id === 'upper'))
-      || (role === 'design_var' && (id === 'init' || id === 'lower' || id === 'upper'))
-      || (role === 'uncertain_var' && (id === 'init' || id === 'uq'))
-      || (connections[index].shouldBeBounded && (id === 'lower' || id === 'upper'));
+    const isEditable =
+      ((id === 'name' || id === 'shape') && !limited) ||
+      id === 'desc' ||
+      id === 'units' ||
+      id === 'ref' ||
+      id === 'ref0' ||
+      id === 'res_ref' ||
+      (role === 'state_var' && id === 'init') ||
+      (role === 'response' && id === 'init') ||
+      (role === 'ineq_constraint' && id === 'upper') ||
+      (role === 'pos_constraint' && id === 'lower') ||
+      (role === 'eq_constraint' && id === 'init') ||
+      (role === 'constraint' && (id === 'lower' || id === 'upper')) ||
+      (role === 'parameter' && (id === 'init' || id === 'lower' || id === 'upper')) ||
+      (role === 'design_var' && (id === 'init' || id === 'lower' || id === 'upper')) ||
+      (role === 'uncertain_var' && (id === 'init' || id === 'uq')) ||
+      (connections[index].shouldBeBounded && (id === 'lower' || id === 'upper'));
     if (isEditable) {
       return (
         <RIEInput
@@ -283,7 +297,10 @@ function EditableCell({
     }
   }
   return ReadonlyCell({
-    cell, row, column, table,
+    cell,
+    row,
+    column,
+    table,
   });
 }
 
@@ -300,10 +317,7 @@ const defaultColumn = {
 };
 
 /* eslint-disable react/jsx-props-no-spreading */
-function Table({
-  columns, data,
-  onConnectionChange, isEditing, limited, useScaling,
-}) {
+function Table({ columns, data, onConnectionChange, isEditing, limited, useScaling }) {
   const [sorting, setSorting] = React.useState([]);
   const [globalFilter, setGlobalFilter] = React.useState('');
   const [columnVisibility, setColumnVisibility] = React.useState({});
@@ -378,7 +392,6 @@ function Table({
 
   return (
     <div className="container-fluid">
-
       <div className="row">
         <div className="editor-section row">
           <div className="col-4">
@@ -390,7 +403,10 @@ function Table({
           </div>
         </div>
         <div className="col-12">
-          <table className="connections table table-striped table-sm table-hover col" {...tableProps}>
+          <table
+            className="connections table table-striped table-sm table-hover col"
+            {...tableProps}
+          >
             <thead>
               {table.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id}>
@@ -400,28 +416,23 @@ function Table({
                     };
                     return (
                       <th key={header.id} {...hprops}>
-                        {header.isPlaceholder
-                          ? null
-                          : (
-                            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                            <div
-                              {...{
-                                className: header.column.getCanSort()
-                                  ? 'cursor-pointer select-none'
-                                  : '',
-                                onClick: header.column.getToggleSortingHandler(),
-                              }}
-                            >
-                              {flexRender(
-                                header.column.columnDef.header,
-                                header.getContext(),
-                              )}
-                              {{
-                                asc: ' 🔼',
-                                desc: ' 🔽',
-                              }[header.column.getIsSorted()] || null}
-                            </div>
-                          )}
+                        {header.isPlaceholder ? null : (
+                          // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                          <div
+                            {...{
+                              className: header.column.getCanSort()
+                                ? 'cursor-pointer select-none'
+                                : '',
+                              onClick: header.column.getToggleSortingHandler(),
+                            }}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: ' 🔼',
+                              desc: ' 🔽',
+                            }[header.column.getIsSorted()] || null}
+                          </div>
+                        )}
                       </th>
                     );
                   })}
@@ -472,9 +483,7 @@ Table.propTypes = {
 };
 
 function VariablesEditor(props) {
-  const {
-    db, filter, isEditing, limited, useScaling, onConnectionChange,
-  } = props;
+  const { db, filter, isEditing, limited, useScaling, onConnectionChange } = props;
 
   const connections = db.computeConnections(filter);
 
diff --git a/app/javascript/mda_viewer/components/VariablesGlobalFilter.jsx b/app/javascript/mda_viewer/components/VariablesGlobalFilter.jsx
index 22ff01f39..70925f155 100644
--- a/app/javascript/mda_viewer/components/VariablesGlobalFilter.jsx
+++ b/app/javascript/mda_viewer/components/VariablesGlobalFilter.jsx
@@ -45,22 +45,17 @@ export function useAsyncDebounce(defaultFn, defaultWait = 0) {
 
       return debounceRef.current.promise;
     },
-    [getDefaultFn, getDefaultWait],
+    [getDefaultFn, getDefaultWait]
   );
 }
 
-function VariablesGlobalFilter({
-  globalFilteredRows,
-  globalFilter,
-  setGlobalFilter,
-}) {
+function VariablesGlobalFilter({ globalFilteredRows, globalFilter, setGlobalFilter }) {
   const matchCount = globalFilteredRows.length;
   const [value, setValue] = React.useState(globalFilter);
   const onChange = useAsyncDebounce((val) => {
     setGlobalFilter(val || undefined);
   }, 200);
 
-  const active = (value !== '');
   return (
     <div className="input-group mb-3">
       <input
@@ -74,11 +69,7 @@ function VariablesGlobalFilter({
         }}
         placeholder="Filter..."
       />
-      <span className="input-group-text">
-        {matchCount}
-        {' '}
-        Variables
-      </span>
+      <span className="input-group-text">{matchCount} Variables</span>
     </div>
   );
 }
diff --git a/app/javascript/mda_viewer/components/VariablesPagination.jsx b/app/javascript/mda_viewer/components/VariablesPagination.jsx
index bfcf2033c..2d91ff883 100644
--- a/app/javascript/mda_viewer/components/VariablesPagination.jsx
+++ b/app/javascript/mda_viewer/components/VariablesPagination.jsx
@@ -23,32 +23,48 @@ class VariablesPagination extends React.PureComponent {
       <nav>
         <ul className="pagination" style={{ marginBottom: 0 }}>
           <li className={pageItemPrev}>
-            <button type="button" className="page-link" onClick={() => gotoPage(0)} aria-label="Previous">
+            <button
+              type="button"
+              className="page-link"
+              onClick={() => gotoPage(0)}
+              aria-label="Previous"
+            >
               <i className="fas fa-angle-double-left" />
             </button>
           </li>
           <li className={pageItemPrev}>
-            <button type="button" className="page-link" onClick={() => previousPage()} aria-label="Previous">
+            <button
+              type="button"
+              className="page-link"
+              onClick={() => previousPage()}
+              aria-label="Previous"
+            >
               <i className="fas fa-angle-left" />
             </button>
           </li>
           <li className="page-item disabled">
             <span className="page-link">
-              {pageIndex + 1}
-              {' '}
-              /
-              {' '}
-              {pageOptions.length}
+              {pageIndex + 1} / {pageOptions.length}
             </span>
           </li>
 
           <li className={pageItemNext}>
-            <button type="button" className="page-link" onClick={() => nextPage()} aria-label="Previous">
+            <button
+              type="button"
+              className="page-link"
+              onClick={() => nextPage()}
+              aria-label="Previous"
+            >
               <i className="fas fa-angle-right" />
             </button>
           </li>
           <li className={pageItemNext}>
-            <button type="button" className="page-link" onClick={() => gotoPage(pageCount - 1)} aria-label="Previous">
+            <button
+              type="button"
+              className="page-link"
+              onClick={() => gotoPage(pageCount - 1)}
+              aria-label="Previous"
+            >
               <i className="fas fa-angle-double-right" />
             </button>
           </li>
@@ -65,9 +81,7 @@ class VariablesPagination extends React.PureComponent {
                 >
                   {[10, 20, 30, 50, 100].map((pSize) => (
                     <option key={pSize} value={pSize}>
-                      Show
-                      {' '}
-                      {pSize}
+                      Show {pSize}
                     </option>
                   ))}
                 </select>
diff --git a/app/javascript/mda_viewer/components/XdsmViewer.jsx b/app/javascript/mda_viewer/components/XdsmViewer.jsx
index 907bb0759..112e54077 100644
--- a/app/javascript/mda_viewer/components/XdsmViewer.jsx
+++ b/app/javascript/mda_viewer/components/XdsmViewer.jsx
@@ -45,8 +45,10 @@ class XdsmViewer extends React.Component {
         },
       },
     });
-    this.selectableXdsm = XDSMjs(config)
-      .createSelectableXdsm(xdsmMda, this._onSelectionChange.bind(this));
+    this.selectableXdsm = XDSMjs(config).createSelectableXdsm(
+      xdsmMda,
+      this._onSelectionChange.bind(this)
+    );
     this.setSelection(filter);
     this._setLinks();
     XdsmViewer._setTooltips();
@@ -65,7 +67,9 @@ class XdsmViewer extends React.Component {
     // eslint-disable-next-line no-undef
     // $('.ellipsized').tooltip('dispose');
 
-    const xdsmMda = update(mda, { nodes: { 0: { name: { $set: 'Driver' }, type: { $set: 'driver' } } } });
+    const xdsmMda = update(mda, {
+      nodes: { 0: { name: { $set: 'Driver' }, type: { $set: 'driver' } } },
+    });
     this.selectableXdsm.updateMdo(xdsmMda);
 
     // links
@@ -100,7 +104,7 @@ class XdsmViewer extends React.Component {
 
   render() {
     const { version } = this.state;
-    return (<div className={version} />);
+    return <div className={version} />;
   }
 }
 
diff --git a/app/javascript/mda_viewer/components/custom-plotly.js b/app/javascript/mda_viewer/components/custom-plotly.js
index 4ac3f5286..05175a925 100644
--- a/app/javascript/mda_viewer/components/custom-plotly.js
+++ b/app/javascript/mda_viewer/components/custom-plotly.js
@@ -2,8 +2,6 @@
 import Plotly from 'plotly.js/lib/core';
 
 // Load in the trace types for pie, and choropleth
-Plotly.register([
-  require('plotly.js/lib/scatter'),
-]);
+Plotly.register([require('plotly.js/lib/scatter')]);
 
 export default Plotly;
diff --git a/app/javascript/mda_viewer/index.jsx b/app/javascript/mda_viewer/index.jsx
index e98dadc18..04cc86208 100644
--- a/app/javascript/mda_viewer/index.jsx
+++ b/app/javascript/mda_viewer/index.jsx
@@ -32,8 +32,7 @@ const reorder = (list, startIndex, endIndex) => {
 
 function _check_and_set_new_openmdao_impl(old_impl, new_impl) {
   new_impl.nodes.forEach((node, i) => {
-    if (node.egmdo_surrogate && node.egmdo_surrogate
-      !== old_impl.nodes[i].egmdo_surrogate) {
+    if (node.egmdo_surrogate && node.egmdo_surrogate !== old_impl.nodes[i].egmdo_surrogate) {
       // eslint-disable-next-line no-param-reassign
       node.implicit_component = false;
       // eslint-disable-next-line no-param-reassign
@@ -41,12 +40,13 @@ function _check_and_set_new_openmdao_impl(old_impl, new_impl) {
       // eslint-disable-next-line no-param-reassign
       node.jax_component = false;
     }
-    if ((node.implicit_component && node.implicit_component
-        !== old_impl.nodes[i].implicit_component)
-      || (node.support_derivatives && node.support_derivatives
-        !== old_impl.nodes[i].support_derivatives)
-      || (node.jax_component && node.jax_component
-        !== old_impl.nodes[i].jax_component)) {
+    if (
+      (node.implicit_component &&
+        node.implicit_component !== old_impl.nodes[i].implicit_component) ||
+      (node.support_derivatives &&
+        node.support_derivatives !== old_impl.nodes[i].support_derivatives) ||
+      (node.jax_component && node.jax_component !== old_impl.nodes[i].jax_component)
+    ) {
       // eslint-disable-next-line no-param-reassign
       node.egmdo_surrogate = false;
     }
@@ -55,9 +55,7 @@ function _check_and_set_new_openmdao_impl(old_impl, new_impl) {
 class MdaViewer extends React.Component {
   constructor(props) {
     super(props);
-    const {
-      api, members, coOwners, currentUser, mda,
-    } = this.props;
+    const { api, members, coOwners, currentUser, mda } = this.props;
     this.api = api;
     const { isEditing } = this.props;
     const filter = { fr: undefined, to: undefined };
@@ -137,12 +135,17 @@ class MdaViewer extends React.Component {
     const names = selectedConnectionNames.map((e) => e.name);
     // console.log("CREATE", names);
     const data = { from: filter.fr, to: filter.to, names };
-    this.api.createConnection(mda.id, data, () => {
-      const newState = update(this.state, { selectedConnectionNames: { $set: [] } });
-      this.setState(newState);
-      // console.log("NEW CONNECTION RESET");
-      this.renderXdsm();
-    }, this.displayError);
+    this.api.createConnection(
+      mda.id,
+      data,
+      () => {
+        const newState = update(this.state, { selectedConnectionNames: { $set: [] } });
+        this.setState(newState);
+        // console.log("NEW CONNECTION RESET");
+        this.renderXdsm();
+      },
+      this.displayError
+    );
   }
 
   handleConnectionChange(connId, connAttrs) {
@@ -177,24 +180,13 @@ class MdaViewer extends React.Component {
     delete cAttrs.res_ref;
 
     if (Object.keys(cAttrs).length !== 0) {
-      this.api.updateConnection(
-        mda.id,
-        connId,
-        cAttrs,
-        this.renderXdsm,
-        this.displayError,
-      );
+      this.api.updateConnection(mda.id, connId, cAttrs, this.renderXdsm, this.displayError);
     }
   }
 
   handleConnectionDelete(connId) {
     const { mda } = this.state;
-    this.api.deleteConnection(
-      mda.id,
-      connId,
-      this.renderXdsm,
-      this.displayError,
-    );
+    this.api.deleteConnection(mda.id, connId, this.renderXdsm, this.displayError);
   }
 
   // *** Disciplines ************************************************************
@@ -210,18 +202,12 @@ class MdaViewer extends React.Component {
         this.setState(newState);
         this.renderXdsm();
       },
-      this.displayError,
+      this.displayError
     );
   }
 
   handleDisciplineImport(mdaFromId, discId, mdaId) {
-    this.api.importDiscipline(
-      mdaFromId,
-      discId,
-      mdaId,
-      this.renderXdsm,
-      this.displayError,
-    );
+    this.api.importDiscipline(mdaFromId, discId, mdaId, this.renderXdsm, this.displayError);
   }
 
   handleDisciplineNameChange(event) {
@@ -237,13 +223,7 @@ class MdaViewer extends React.Component {
       const newState = update(this.state, { mda: { nodes: { $set: items } } });
       this.setState(newState);
     }
-    this.api.updateDiscipline(
-      mda.id,
-      node.id,
-      discAttrs,
-      this.renderXdsm,
-      this.displayError,
-    );
+    this.api.updateDiscipline(mda.id, node.id, discAttrs, this.renderXdsm, this.displayError);
   }
 
   handleDisciplineDelete(node) {
@@ -257,20 +237,18 @@ class MdaViewer extends React.Component {
         }
         this.renderXdsm();
       },
-      this.displayError,
+      this.displayError
     );
   }
 
   handleSubAnalysisSearch(callback) {
     const { mda } = this.state;
-    this.api.getSubAnalysisCandidates(
-      (response) => {
-        const options = response.data
-          .filter((analysis) => analysis.id !== mda.id)
-          .map((analysis) => ({ id: analysis.id, label: `#${analysis.id} ${analysis.name}` }));
-        callback(options);
-      },
-    );
+    this.api.getSubAnalysisCandidates((response) => {
+      const options = response.data
+        .filter((analysis) => analysis.id !== mda.id)
+        .map((analysis) => ({ id: analysis.id, label: `#${analysis.id} ${analysis.name}` }));
+      callback(options);
+    });
   }
 
   // *** Analysis ************************************************************
@@ -291,7 +269,9 @@ class MdaViewer extends React.Component {
   }
 
   handleProjectSelected(selected) {
-    const { mda: { project } } = this.state;
+    const {
+      mda: { project },
+    } = this.state;
     if (selected !== project) {
       let newState = update(this.state, {
         mdaEdited: { $set: true },
@@ -325,7 +305,7 @@ class MdaViewer extends React.Component {
         const newState = update(this.state, { mda: { public: { $set: !mda.public } } });
         this.setState(newState);
       },
-      this.displayError,
+      this.displayError
     );
     return false;
   }
@@ -339,7 +319,7 @@ class MdaViewer extends React.Component {
         const newState = update(this.state, { mda: { locked: { $set: !mda.locked } } });
         this.setState(newState);
       },
-      this.displayError,
+      this.displayError
     );
     return false;
   }
@@ -347,31 +327,22 @@ class MdaViewer extends React.Component {
   handleAnalysisUserSearch(query, role, callback) {
     // TODO: query could be used to filter user on server side
     const { mda } = this.state;
-    this.api.getUserCandidates(
-      mda.id,
-      role,
-      (response) => {
-        callback(response.data);
-      },
-    );
+    this.api.getUserCandidates(mda.id, role, (response) => {
+      callback(response.data);
+    });
   }
 
   handleAnalysisUserCreate(selected, role) {
     const { mda } = this.state;
     if (selected.length) {
-      this.api.addUser(
-        selected[0].id,
-        mda.id,
-        role,
-        () => {
-          this.api.getUsers(mda.id, 'members', (response) => {
-            this.setState({ analysisMembers: response.data });
-          });
-          this.api.getUsers(mda.id, 'co_owners', (response) => {
-            this.setState({ analysisCoOwners: response.data });
-          });
-        },
-      );
+      this.api.addUser(selected[0].id, mda.id, role, () => {
+        this.api.getUsers(mda.id, 'members', (response) => {
+          this.setState({ analysisMembers: response.data });
+        });
+        this.api.getUsers(mda.id, 'co_owners', (response) => {
+          this.setState({ analysisCoOwners: response.data });
+        });
+      });
     }
   }
 
@@ -399,23 +370,19 @@ class MdaViewer extends React.Component {
       mda.id,
       params,
       () => {
-        this.api.getAnalysis(
-          mda.id,
-          false,
-          () => {
-            const newState = update(this.state, {
-              mdaEdited: { $set: false },
-              mda: {
-                name: { $set: newAnalysisName },
-                note: { $set: mda.note },
-                project: { $set: mda.project },
-              },
-            });
-            this.setState(newState);
-          },
-        );
+        this.api.getAnalysis(mda.id, false, () => {
+          const newState = update(this.state, {
+            mdaEdited: { $set: false },
+            mda: {
+              name: { $set: newAnalysisName },
+              note: { $set: mda.note },
+              project: { $set: mda.project },
+            },
+          });
+          this.setState(newState);
+        });
       },
-      this.displayError,
+      this.displayError
     );
   }
 
@@ -439,7 +406,7 @@ class MdaViewer extends React.Component {
         });
         this.setState(newState);
       },
-      this.displayError,
+      this.displayError
     );
   }
 
@@ -496,38 +463,41 @@ class MdaViewer extends React.Component {
 
   renderXdsm() {
     const { mda } = this.state;
-    this.api.getAnalysis(
-      mda.id,
-      'whatsopt_ui',
-      (response) => {
-        const newState = update(
-          this.state,
-          {
-            mda: {
-              nodes: { $set: response.data.nodes },
-              edges: { $set: response.data.edges },
-              inactive_edges: { $set: response.data.inactive_edges },
-              vars: { $set: response.data.vars },
-              impl: { $set: response.data.impl },
-            },
-          },
-        );
-        this.setState(newState);
-        const newMda = { nodes: response.data.nodes, edges: response.data.edges };
-        this.xdsmViewer.update(newMda);
-      },
-    );
+    this.api.getAnalysis(mda.id, 'whatsopt_ui', (response) => {
+      const newState = update(this.state, {
+        mda: {
+          nodes: { $set: response.data.nodes },
+          edges: { $set: response.data.edges },
+          inactive_edges: { $set: response.data.inactive_edges },
+          vars: { $set: response.data.vars },
+          impl: { $set: response.data.impl },
+        },
+      });
+      this.setState(newState);
+      const newMda = { nodes: response.data.nodes, edges: response.data.edges };
+      this.xdsmViewer.update(newMda);
+    });
   }
 
   render() {
     const {
-      mda, currentUser, useScaling, errors, isEditing, filter, implEdited, mdaEdited,
-      newAnalysisName, analysisMembers, analysisCoOwners,
-      selectedConnectionNames, newDisciplineName,
+      mda,
+      currentUser,
+      useScaling,
+      errors,
+      isEditing,
+      filter,
+      implEdited,
+      mdaEdited,
+      newAnalysisName,
+      analysisMembers,
+      analysisCoOwners,
+      selectedConnectionNames,
+      newDisciplineName,
     } = this.state;
     const errs = errors.map(
       // eslint-disable-next-line react/no-array-index-key
-      (message, i) => (<Error key={i} msg={message} onClose={() => this.handleErrorClose(i)} />),
+      (message, i) => <Error key={i} msg={message} onClose={() => this.handleErrorClose(i)} />
     );
     const db = new AnalysisDatabase(mda);
     this.db = db;
@@ -540,7 +510,9 @@ class MdaViewer extends React.Component {
 
     const xdsmViewer = (
       <XdsmViewer
-        ref={(viewer) => { this.xdsmViewer = viewer; }}
+        ref={(viewer) => {
+          this.xdsmViewer = viewer;
+        }}
         api={this.api}
         isEditing={isEditing}
         mda={mda}
@@ -587,15 +559,16 @@ class MdaViewer extends React.Component {
       if (!db.mda.locked && db.isAnalysisUsed()) {
         warningIfUsed = (
           <div className="alert alert-info alert-dismissible fade show" role="alert">
-            As this analysis is already operated,
-            {' '}
-            <strong>your edition access is limited</strong>
+            As this analysis is already operated, <strong>your edition access is limited</strong>
             .
-            <br />
-            {' '}
-            If you need full edition access either restart with a copy of the analysis
-            or discard existing operations.
-            <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close" />
+            <br /> If you need full edition access either restart with a copy of the analysis or
+            discard existing operations.
+            <button
+              type="button"
+              className="btn-close"
+              data-bs-dismiss="alert"
+              aria-label="Close"
+            />
           </div>
         );
       }
@@ -606,27 +579,25 @@ class MdaViewer extends React.Component {
           <span>
             <a href={this.api.url(`/design_projects/${db.mda.project.id}`)}>
               {db.mda.project.name}
-            </a>
-            {' '}
-            /
-            {' '}
+            </a>{' '}
+            /{' '}
           </span>
         );
       }
 
-      const analysisPermissionsEditable = (mda.owner.id === currentUser.id);
+      const analysisPermissionsEditable = mda.owner.id === currentUser.id;
 
       let restricted;
       if (!db.mda.public) {
-        restricted = (<i className="fas fa-user-secret" title="Analysis with restricted access" />);
+        restricted = <i className="fas fa-user-secret" title="Analysis with restricted access" />;
       }
       let lock;
-      let locked = ('');
+      let locked = '';
       if (db.mda.locked) {
-        lock = (<i className="fas fa-lock" title="Analysis is locked readonly" />);
+        lock = <i className="fas fa-lock" title="Analysis is locked readonly" />;
         locked = lock;
       } else {
-        lock = (<i className="fas fa-unlock" title="Analysis is editable/deletable" />);
+        lock = <i className="fas fa-unlock" title="Analysis is editable/deletable" />;
       }
       const tab_disabled = db.mda.locked ? 'disabled' : '';
       const tab_lock_active = db.mda.locked ? 'active' : '';
@@ -635,41 +606,27 @@ class MdaViewer extends React.Component {
       const tab_vars_show = !db.mda.locked ? 'show' : '';
       let co_owned;
       if (analysisCoOwners.length > 0) {
-        co_owned = (<i className="fas fa-users-cog" title="Analysis has co-owners" />);
+        co_owned = <i className="fas fa-users-cog" title="Analysis has co-owners" />;
       }
 
       return (
         <div>
           <form className="button_to" method="get" action={this.api.url(`/analyses/${mda.id}`)}>
             <button className="btn float-end" type="submit">
-              <i className="fa fa-times-circle" />
-              {' '}
-              Close
+              <i className="fa fa-times-circle" /> Close
             </button>
           </form>
           <h1>
-            Edit
-            {' '}
-            {mdaProjectLink}
-            <a href={this.api.url(`/analyses/${mda.id}`)}>{mda.name}</a>
-            {' '}
+            Edit {mdaProjectLink}
+            <a href={this.api.url(`/analyses/${mda.id}`)}>{mda.name}</a>{' '}
             <small>
               (#
-              {mda.id}
-              )
-              {' '}
-              {locked}
-              {' '}
-              {restricted}
-              {' '}
-              {co_owned}
+              {mda.id}) {locked} {restricted} {co_owned}
             </small>
           </h1>
           {warningIfUsed}
           {breadcrumbs}
-          <div className="mda-section">
-            {xdsmViewer}
-          </div>
+          <div className="mda-section">{xdsmViewer}</div>
           <ul className="nav nav-tabs" id="myTab" role="tablist">
             <li className="nav-item">
               <a
@@ -681,7 +638,7 @@ class MdaViewer extends React.Component {
                 aria-controls="lock"
                 aria-selected="false"
               >
-                { lock }
+                {lock}
               </a>
             </li>
             <li className="nav-item">
@@ -752,17 +709,17 @@ class MdaViewer extends React.Component {
           </ul>
           <div className="tab-content" id="myTabContent">
             {errs}
-            <div className={`tab-pane fade ${tab_lock_show} ${tab_lock_active}`} id="lock" role="tabpanel" aria-labelledby="lock-tab">
+            <div
+              className={`tab-pane fade ${tab_lock_show} ${tab_lock_active}`}
+              id="lock"
+              role="tabpanel"
+              aria-labelledby="lock-tab"
+            >
               <div className="container-fluid">
                 <div className="editor-section">
                   <div className="editor-section-label">
-                    <i className="fas fa-lock" title="Analysis locked in readonly mode" />
-                    {' '}
-                    Readonly
-                    {' '}
-                    <small>
-                      (when locked, edition or deletion are disabled)
-                    </small>
+                    <i className="fas fa-lock" title="Analysis locked in readonly mode" /> Readonly{' '}
+                    <small>(when locked, edition or deletion are disabled)</small>
                   </div>
                   <form className="form" onSubmit={this.handleAnalysisUpdate}>
                     <div className="mb-3 form-check">
@@ -782,7 +739,12 @@ class MdaViewer extends React.Component {
                 </div>
               </div>
             </div>
-            <div className="tab-pane fade" id="analysis" role="tabpanel" aria-labelledby="analysis-tab">
+            <div
+              className="tab-pane fade"
+              id="analysis"
+              role="tabpanel"
+              aria-labelledby="analysis-tab"
+            >
               {mdaMsg}
               <AnalysisEditor
                 mdaId={db.mda.id}
@@ -805,7 +767,12 @@ class MdaViewer extends React.Component {
                 onProjectSelected={this.handleProjectSelected}
               />
             </div>
-            <div className="tab-pane fade" id="disciplines" role="tabpanel" aria-labelledby="disciplines-tab">
+            <div
+              className="tab-pane fade"
+              id="disciplines"
+              role="tabpanel"
+              aria-labelledby="disciplines-tab"
+            >
               <DisciplinesEditor
                 db={db}
                 api={this.api}
@@ -818,7 +785,12 @@ class MdaViewer extends React.Component {
                 onDisciplineImport={this.handleDisciplineImport}
               />
             </div>
-            <div className="tab-pane fade" id="connections" role="tabpanel" aria-labelledby="connections-tab">
+            <div
+              className="tab-pane fade"
+              id="connections"
+              role="tabpanel"
+              aria-labelledby="connections-tab"
+            >
               <ConnectionsEditor
                 db={db}
                 filter={filter}
@@ -831,11 +803,21 @@ class MdaViewer extends React.Component {
                 onConnectionDelete={this.handleConnectionDelete}
               />
             </div>
-            <div className={`tab-pane fade ${tab_vars_show} ${tab_vars_active}`} id="variables" role="tabpanel" aria-labelledby="variables-tab">
+            <div
+              className={`tab-pane fade ${tab_vars_show} ${tab_vars_active}`}
+              id="variables"
+              role="tabpanel"
+              aria-labelledby="variables-tab"
+            >
               {varEditor}
               <DistributionModals db={db} onConnectionChange={this.handleConnectionChange} />
             </div>
-            <div className="tab-pane fade" id="openmdao-impl" role="tabpanel" aria-labelledby="openmdao-impl-tab">
+            <div
+              className="tab-pane fade"
+              id="openmdao-impl"
+              role="tabpanel"
+              aria-labelledby="openmdao-impl-tab"
+            >
               {openmdaoImplMsg}
               <OpenmdaoImplEditor
                 impl={openmdaoImpl}
@@ -850,7 +832,8 @@ class MdaViewer extends React.Component {
       );
     }
 
-    let noteItem; let noteTab;
+    let noteItem;
+    let noteTab;
     if (mda.note && mda.note.length > 0) {
       noteItem = (
         <li className="nav-item">
@@ -867,15 +850,13 @@ class MdaViewer extends React.Component {
           </a>
         </li>
       );
-      noteTab = (<AnalysisNotePanel note={mda.note} />);
+      noteTab = <AnalysisNotePanel note={mda.note} />;
     }
 
     return (
       <div>
         {breadcrumbs}
-        <div className="mda-section">
-          {xdsmViewer}
-        </div>
+        <div className="mda-section">{xdsmViewer}</div>
         <div className="mda-section">
           <ul className="nav nav-tabs" id="myTab" role="tablist">
             <li className="nav-item">
@@ -946,22 +927,39 @@ class MdaViewer extends React.Component {
             {noteItem}
           </ul>
           <div className="tab-content" id="myTabContent">
-            <div className="tab-pane fade show active" id="variables" role="tabpanel" aria-labelledby="variables-tab">
+            <div
+              className="tab-pane fade show active"
+              id="variables"
+              role="tabpanel"
+              aria-labelledby="variables-tab"
+            >
               {varEditor}
             </div>
-            <div className="tab-pane fade" id="var-search" role="tabpanel" aria-labelledby="var-search-tab">
+            <div
+              className="tab-pane fade"
+              id="var-search"
+              role="tabpanel"
+              aria-labelledby="var-search-tab"
+            >
               <VariableSearchPanel api={this.api} mdaId={db.mda.id} />
             </div>
-            <div className="tab-pane fade" id="exports" role="tabpanel" aria-labelledby="exports-tab">
-              <ExportPanel
-                api={this.api}
-                db={db}
-              />
+            <div
+              className="tab-pane fade"
+              id="exports"
+              role="tabpanel"
+              aria-labelledby="exports-tab"
+            >
+              <ExportPanel api={this.api} db={db} />
             </div>
             <div className="tab-pane fade" id="diffs" role="tabpanel" aria-labelledby="diffs-tab">
               <ComparisonPanel api={this.api} mdaId={db.mda.id} />
             </div>
-            <div className="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">
+            <div
+              className="tab-pane fade"
+              id="history"
+              role="tabpanel"
+              aria-labelledby="history-tab"
+            >
               <HistoryPanel api={this.api} mdaId={db.mda.id} />
             </div>
             {noteTab}
diff --git a/app/javascript/packs/api_doc_viewer_application.jsx b/app/javascript/packs/api_doc_viewer_application.jsx
index e36f757cd..65dbfee13 100644
--- a/app/javascript/packs/api_doc_viewer_application.jsx
+++ b/app/javascript/packs/api_doc_viewer_application.jsx
@@ -6,7 +6,9 @@ import WhatsOptApi from '../utils/WhatsOptApi';
 
 document.addEventListener('DOMContentLoaded', () => {
   const csrfToken = document.getElementsByName('csrf-token')[0].getAttribute('content');
-  const relativeUrlRoot = document.getElementsByName('relative-url-root')[0].getAttribute('content');
+  const relativeUrlRoot = document
+    .getElementsByName('relative-url-root')[0]
+    .getAttribute('content');
 
   // eslint-disable-next-line no-undef
   const runnerElt = $('#apidoc');
diff --git a/app/javascript/packs/mda_viewer_application.jsx b/app/javascript/packs/mda_viewer_application.jsx
index bad8b951b..d6afe5619 100644
--- a/app/javascript/packs/mda_viewer_application.jsx
+++ b/app/javascript/packs/mda_viewer_application.jsx
@@ -8,7 +8,9 @@ import WhatsOptApi from '../utils/WhatsOptApi';
 
 document.addEventListener('DOMContentLoaded', () => {
   const csrfToken = document.getElementsByName('csrf-token')[0].getAttribute('content');
-  const relativeUrlRoot = document.getElementsByName('relative-url-root')[0].getAttribute('content');
+  const relativeUrlRoot = document
+    .getElementsByName('relative-url-root')[0]
+    .getAttribute('content');
 
   // eslint-disable-next-line no-undef
   const mdaViewerElt = $('#mda-viewer');
@@ -22,12 +24,14 @@ document.addEventListener('DOMContentLoaded', () => {
   const api = new WhatsOptApi(csrfToken, apiKey, relativeUrlRoot, mda.updated_at);
 
   const root = createRoot(mdaViewerElt[0]);
-  root.render(<MdaViewer
-    mda={mda}
-    isEditing={isEditing}
-    api={api}
-    members={members}
-    coOwners={coOwners}
-    currentUser={currentUser}
-  />);
+  root.render(
+    <MdaViewer
+      mda={mda}
+      isEditing={isEditing}
+      api={api}
+      members={members}
+      coOwners={coOwners}
+      currentUser={currentUser}
+    />
+  );
 });
diff --git a/app/javascript/packs/plotter_application.jsx b/app/javascript/packs/plotter_application.jsx
index b97ef648a..4868fccd6 100644
--- a/app/javascript/packs/plotter_application.jsx
+++ b/app/javascript/packs/plotter_application.jsx
@@ -6,7 +6,9 @@ import WhatsOptApi from '../utils/WhatsOptApi';
 
 document.addEventListener('DOMContentLoaded', () => {
   const csrfToken = document.getElementsByName('csrf-token')[0].getAttribute('content');
-  const relativeUrlRoot = document.getElementsByName('relative-url-root')[0].getAttribute('content');
+  const relativeUrlRoot = document
+    .getElementsByName('relative-url-root')[0]
+    .getAttribute('content');
 
   // eslint-disable-next-line no-undef
   const plotterElt = $('#plotter');
diff --git a/app/javascript/packs/sensitivity_plotter_application.jsx b/app/javascript/packs/sensitivity_plotter_application.jsx
index 44c740926..d60c5638c 100644
--- a/app/javascript/packs/sensitivity_plotter_application.jsx
+++ b/app/javascript/packs/sensitivity_plotter_application.jsx
@@ -6,7 +6,9 @@ import WhatsOptApi from '../utils/WhatsOptApi';
 
 document.addEventListener('DOMContentLoaded', () => {
   const csrfToken = document.getElementsByName('csrf-token')[0].getAttribute('content');
-  const relativeUrlRoot = document.getElementsByName('relative-url-root')[0].getAttribute('content');
+  const relativeUrlRoot = document
+    .getElementsByName('relative-url-root')[0]
+    .getAttribute('content');
 
   // eslint-disable-next-line no-undef
   const plotterElt = $('#sensitivity_plotter');
diff --git a/app/javascript/plotter/components/DistributionHistogram.jsx b/app/javascript/plotter/components/DistributionHistogram.jsx
index c9cce178b..36fc2bcef 100644
--- a/app/javascript/plotter/components/DistributionHistogram.jsx
+++ b/app/javascript/plotter/components/DistributionHistogram.jsx
@@ -25,7 +25,7 @@ class DistributionHistogramList extends React.PureComponent {
     layout.height = 300;
     layout.title = { text: caseUtils.label(varcase) };
 
-    return (<Plot data={data} layout={layout} />);
+    return <Plot data={data} layout={layout} />;
   }
 }
 
@@ -48,27 +48,17 @@ class DistributionHistograms extends React.PureComponent {
     const nb = mask.filter((b) => b).length;
 
     const inputDists = inputs.map((c) => (
-      <DistributionHistogramList key={caseUtils.label(c)} varcase={c} mask={mask} />));
+      <DistributionHistogramList key={caseUtils.label(c)} varcase={c} mask={mask} />
+    ));
     const outputDists = outputs.map((c) => (
-      <DistributionHistogramList key={caseUtils.label(c)} varcase={c} mask={mask} />));
+      <DistributionHistogramList key={caseUtils.label(c)} varcase={c} mask={mask} />
+    ));
 
     return (
       <div>
-        <div className="editor-section">
-          Input Distributions -
-          {' '}
-          {nb}
-          {' '}
-          cases
-        </div>
+        <div className="editor-section">Input Distributions - {nb} cases</div>
         {inputDists}
-        <div className="editor-section">
-          Output Distributions -
-          {' '}
-          {nb}
-          {' '}
-          cases
-        </div>
+        <div className="editor-section">Output Distributions - {nb} cases</div>
         {outputDists}
       </div>
     );
diff --git a/app/javascript/plotter/components/IterationLinePlot.jsx b/app/javascript/plotter/components/IterationLinePlot.jsx
index 80704cc21..f9165c72c 100644
--- a/app/javascript/plotter/components/IterationLinePlot.jsx
+++ b/app/javascript/plotter/components/IterationLinePlot.jsx
@@ -31,7 +31,7 @@ class IterationLinePlot extends React.PureComponent {
     const { title } = this.props;
     const layout = { width: 600, height: 500, title: { text: title } };
 
-    return (<Plot data={data} layout={layout} />);
+    return <Plot data={data} layout={layout} />;
   }
 }
 
diff --git a/app/javascript/plotter/components/IterationRadarPlot.jsx b/app/javascript/plotter/components/IterationRadarPlot.jsx
index 49bbdee6c..f91df2655 100644
--- a/app/javascript/plotter/components/IterationRadarPlot.jsx
+++ b/app/javascript/plotter/components/IterationRadarPlot.jsx
@@ -38,7 +38,7 @@ class IterationRadarPlot extends React.PureComponent {
     const { title } = this.props;
     const layout = { width: 600, height: 500, title: { text: title } };
 
-    return (<Plot data={data} layout={layout} />);
+    return <Plot data={data} layout={layout} />;
   }
 }
 
diff --git a/app/javascript/plotter/components/ParallelCoordinates.jsx b/app/javascript/plotter/components/ParallelCoordinates.jsx
index 275c2bcc3..a1836db47 100644
--- a/app/javascript/plotter/components/ParallelCoordinates.jsx
+++ b/app/javascript/plotter/components/ParallelCoordinates.jsx
@@ -53,12 +53,7 @@ class ParallelCoordinates extends React.PureComponent {
 
     const data = [trace];
     const { width } = this.props;
-    return (
-      <Plot
-        data={data}
-        layout={{ width, height: 500, title }}
-      />
-    );
+    return <Plot data={data} layout={{ width, height: 500, title }} />;
   }
 }
 
diff --git a/app/javascript/plotter/components/ScatterPlotMatrix.jsx b/app/javascript/plotter/components/ScatterPlotMatrix.jsx
index 05c847681..16976b39e 100644
--- a/app/javascript/plotter/components/ScatterPlotMatrix.jsx
+++ b/app/javascript/plotter/components/ScatterPlotMatrix.jsx
@@ -66,7 +66,7 @@ class ScatterPlotMatrix extends React.PureComponent {
     layout.height = nOut * 250 + 100;
     layout.title = { text: title };
 
-    return (<Plot data={data} layout={layout} />);
+    return <Plot data={data} layout={layout} />;
   }
 }
 
diff --git a/app/javascript/plotter/components/ScatterSurfacePlot.jsx b/app/javascript/plotter/components/ScatterSurfacePlot.jsx
index 635f7de95..8b8170cfe 100644
--- a/app/javascript/plotter/components/ScatterSurfacePlot.jsx
+++ b/app/javascript/plotter/components/ScatterSurfacePlot.jsx
@@ -11,9 +11,7 @@ const Plot = createPlotlyComponent(Plotly);
 
 class ScatterSurfacePlot extends React.PureComponent {
   render() {
-    const {
-      casesx, casesy, casesz, success, title,
-    } = this.props;
+    const { casesx, casesy, casesz, success, title } = this.props;
     const trace = {
       x: casesx.values,
       y: casesy.values,
@@ -34,14 +32,17 @@ class ScatterSurfacePlot extends React.PureComponent {
     layout.height = 500;
     layout.title = { text: title };
     layout.margin = {
-      l: 0, r: 0, b: 0, t: 0,
+      l: 0,
+      r: 0,
+      b: 0,
+      t: 0,
     };
     layout.scene = {};
     layout.scene.xaxis = { title: { text: caseUtils.label(casesx) } };
     layout.scene.yaxis = { title: { text: caseUtils.label(casesy) } };
     layout.scene.zaxis = { title: { text: caseUtils.label(casesz) } };
 
-    return (<Plot data={data} layout={layout} />);
+    return <Plot data={data} layout={layout} />;
   }
 }
 
diff --git a/app/javascript/plotter/components/VariableSelector.jsx b/app/javascript/plotter/components/VariableSelector.jsx
index 543f01dc0..01a78939e 100644
--- a/app/javascript/plotter/components/VariableSelector.jsx
+++ b/app/javascript/plotter/components/VariableSelector.jsx
@@ -4,9 +4,7 @@ import * as caseUtils from '../../utils/cases';
 
 class VariableList extends React.PureComponent {
   render() {
-    const {
-      cases, selection, onSelectionChange, title,
-    } = this.props;
+    const { cases, selection, onSelectionChange, title } = this.props;
     const varnames = cases.map((c) => {
       const label = caseUtils.label(c);
       const selected = selection.includes(c);
@@ -19,7 +17,9 @@ class VariableList extends React.PureComponent {
             checked={selected}
             onChange={onSelectionChange}
           />
-          <label className="form-check-label" htmlFor={label}>{label}</label>
+          <label className="form-check-label" htmlFor={label}>
+            {label}
+          </label>
         </div>
       );
     });
@@ -43,9 +43,7 @@ VariableList.propTypes = {
 class VariableSelector extends React.PureComponent {
   render() {
     let stateVars;
-    const {
-      uqMode, cases, selCases, onSelectionChange,
-    } = this.props;
+    const { uqMode, cases, selCases, onSelectionChange } = this.props;
     if (cases.c.length > 0) {
       stateVars = (
         <VariableList
diff --git a/app/javascript/plotter/components/colorscale.js b/app/javascript/plotter/components/colorscale.js
index e88094c87..26fbbfd1f 100644
--- a/app/javascript/plotter/components/colorscale.js
+++ b/app/javascript/plotter/components/colorscale.js
@@ -1,2 +1,5 @@
-export const COLORSCALE = [[0, '#ff7f0e'], [1, '#1f77b4']];
+export const COLORSCALE = [
+  [0, '#ff7f0e'],
+  [1, '#1f77b4'],
+];
 export default { COLORSCALE };
diff --git a/app/javascript/plotter/index.jsx b/app/javascript/plotter/index.jsx
index 5ab4bf7c6..036ea9bdc 100644
--- a/app/javascript/plotter/index.jsx
+++ b/app/javascript/plotter/index.jsx
@@ -27,49 +27,24 @@ class PlotPanel extends React.Component {
   }
 
   render() {
-    const {
-      db, optim, cases, success, title, uqMode,
-    } = this.props;
-    const { sensitivity } = this.state;
+    const { db, optim, cases, success, title, uqMode } = this.props;
     console.log(this.state);
 
     let plotdist;
     if (uqMode) {
       plotdist = (
-        <DistributionHistogram
-          db={db}
-          optim
-          cases={cases}
-          success={success}
-          title={title}
-        />
+        <DistributionHistogram db={db} optim cases={cases} success={success} title={title} />
       );
     }
 
     let plotoptim = (
-      <ScatterPlotMatrix
-        db={db}
-        optim
-        cases={cases}
-        success={success}
-        title={title}
-      />
+      <ScatterPlotMatrix db={db} optim cases={cases} success={success} title={title} />
     );
     if (optim) {
       plotoptim = (
         <div>
-          <IterationLinePlot
-            db={db}
-            optim
-            cases={cases}
-            title={title}
-          />
-          <IterationRadarPlot
-            db={db}
-            optim
-            cases={cases}
-            title={title}
-          />
+          <IterationLinePlot db={db} optim cases={cases} title={title} />
+          <IterationRadarPlot db={db} optim cases={cases} title={title} />
         </div>
       );
     }
@@ -107,7 +82,12 @@ class PlotPanel extends React.Component {
     }
 
     return (
-      <div className="tab-pane fade active show" id={PLOTS_TAB} role="tabpanel" aria-labelledby="plots-tab">
+      <div
+        className="tab-pane fade active show"
+        id={PLOTS_TAB}
+        role="tabpanel"
+        aria-labelledby="plots-tab"
+      >
         {plotdist}
         {plotparall}
         {plotoptim}
@@ -130,9 +110,7 @@ PlotPanel.propTypes = {
 
 class VariablePanel extends React.PureComponent {
   render() {
-    const {
-      db, optim, uqMode, cases, selCases, onSelectionChange,
-    } = this.props;
+    const { db, optim, uqMode, cases, selCases, onSelectionChange } = this.props;
     const klass = 'tab-pane fade';
     return (
       <div className={klass} id={VARIABLES_TAB} role="tabpanel" aria-labelledby="variables-tab">
@@ -161,9 +139,7 @@ VariablePanel.propTypes = {
 class Plotter extends React.Component {
   constructor(props) {
     super(props);
-    const {
-      api, mda, uqMode, ope,
-    } = this.props;
+    const { api, mda, uqMode, ope } = this.props;
     this.api = api;
     this.db = new AnalysisDatabase(mda);
     this.cases = ope.cases.sort(caseUtils.compare);
@@ -224,8 +200,7 @@ class Plotter extends React.Component {
 
   render() {
     const { ope, mda, uqMode } = this.props;
-    const isOptim = (ope.category === 'optimization' || ope.category === 'egmdo');
-    const isDoe = (ope.category === 'doe' || ope.category === 'egdoe');
+    const isOptim = ope.category === 'optimization' || ope.category === 'egmdo';
     const { selection, inputVarCases } = this.state;
     const cases = { i: inputVarCases, o: this.outputVarCases, c: this.couplingVarCases };
     const selCases = {
@@ -248,18 +223,14 @@ class Plotter extends React.Component {
     return (
       <div>
         <h1>
-          {ope.name}
-          {' '}
-          on
-          {' '}
-          <a href={this.api.url(`/analyses/${mda.id}`)}>{mda.name}</a>
-          <small>
-            {` (#${mda.id})`}
-          </small>
+          {ope.name} on <a href={this.api.url(`/analyses/${mda.id}`)}>{mda.name}</a>
+          <small>{` (#${mda.id})`}</small>
         </h1>
 
         <div className="btn-group me-2  float-end" role="group">
-          <a className="btn btn-primary" href={exportUrl}>Export Csv</a>
+          <a className="btn btn-primary" href={exportUrl}>
+            Export Csv
+          </a>
         </div>
 
         <div className="container-fluid">
diff --git a/app/javascript/sensitivity_plotter/components/MorrisScatterPlot.jsx b/app/javascript/sensitivity_plotter/components/MorrisScatterPlot.jsx
index 51d889406..8b087701b 100644
--- a/app/javascript/sensitivity_plotter/components/MorrisScatterPlot.jsx
+++ b/app/javascript/sensitivity_plotter/components/MorrisScatterPlot.jsx
@@ -9,7 +9,10 @@ class MorrisScatterPlot extends React.PureComponent {
   render() {
     const { saData, outVarName } = this.props;
     const {
-      mu_star: muStar, sigma, mu_star_conf: muStarConf, parameter_names: paramNames,
+      mu_star: muStar,
+      sigma,
+      mu_star_conf: muStarConf,
+      parameter_names: paramNames,
     } = saData;
     const trace = {
       x: muStar,
@@ -40,7 +43,7 @@ class MorrisScatterPlot extends React.PureComponent {
       },
     };
 
-    return (<Plot data={data} layout={layout} />);
+    return <Plot data={data} layout={layout} />;
   }
 }
 
diff --git a/app/javascript/sensitivity_plotter/components/SobolHeatMap.jsx b/app/javascript/sensitivity_plotter/components/SobolHeatMap.jsx
index f446bbd34..6a301091e 100644
--- a/app/javascript/sensitivity_plotter/components/SobolHeatMap.jsx
+++ b/app/javascript/sensitivity_plotter/components/SobolHeatMap.jsx
@@ -9,9 +9,7 @@ class SobolHeatMap extends React.PureComponent {
   render() {
     const { firstOrder, saResult, outVarNames } = this.props;
     // use first sa info to get in var names
-    const {
-      parameter_names: parameterNames,
-    } = saResult[outVarNames[0]];
+    const { parameter_names: parameterNames } = saResult[outVarNames[0]];
 
     const sobols = [];
     for (const outVarName of outVarNames) {
@@ -45,20 +43,22 @@ class SobolHeatMap extends React.PureComponent {
       },
     };
 
-    return (<Plot data={data} layout={layout} />);
+    return <Plot data={data} layout={layout} />;
   }
 }
 
 SobolHeatMap.propTypes = {
   outVarNames: PropTypes.arrayOf(PropTypes.string).isRequired,
   firstOrder: PropTypes.bool.isRequired,
-  saResult: PropTypes.arrayOf(PropTypes.shape({
-    S1: PropTypes.array.isRequired,
-    S1_conf: PropTypes.array,
-    ST: PropTypes.array.isRequired,
-    ST_conf: PropTypes.array,
-    parameter_names: PropTypes.array.isRequired,
-  })).isRequired,
+  saResult: PropTypes.arrayOf(
+    PropTypes.shape({
+      S1: PropTypes.array.isRequired,
+      S1_conf: PropTypes.array,
+      ST: PropTypes.array.isRequired,
+      ST_conf: PropTypes.array,
+      parameter_names: PropTypes.array.isRequired,
+    })
+  ).isRequired,
 };
 
 export default SobolHeatMap;
diff --git a/app/javascript/sensitivity_plotter/components/SobolScatterPlot.jsx b/app/javascript/sensitivity_plotter/components/SobolScatterPlot.jsx
index 98854477c..453c40794 100644
--- a/app/javascript/sensitivity_plotter/components/SobolScatterPlot.jsx
+++ b/app/javascript/sensitivity_plotter/components/SobolScatterPlot.jsx
@@ -8,15 +8,15 @@ const Plot = createPlotlyComponent(Plotly);
 class SobolScatterPlot extends React.PureComponent {
   render() {
     const { saData, outVarName } = this.props;
-    const {
-      S1, S1_conf: s1Conf, ST, ST_conf: stConf, parameter_names: parameterNames,
-    } = saData;
+    const { S1, S1_conf: s1Conf, ST, ST_conf: stConf, parameter_names: parameterNames } = saData;
     const traceS1 = {
       name: 'S1',
       x: parameterNames.map((_, i) => i + 0.9),
       y: S1,
       error_y: {
-        type: 'data', array: s1Conf, symmetric: true,
+        type: 'data',
+        array: s1Conf,
+        symmetric: true,
       },
       type: 'scatter',
       mode: 'markers+text',
@@ -31,7 +31,9 @@ class SobolScatterPlot extends React.PureComponent {
       x: parameterNames.map((_, i) => i + 1.1),
       y: ST,
       error_y: {
-        type: 'data', array: stConf, symmetric: true,
+        type: 'data',
+        array: stConf,
+        symmetric: true,
       },
       type: 'scatter',
       mode: 'markers+text',
@@ -58,7 +60,7 @@ class SobolScatterPlot extends React.PureComponent {
       },
     };
 
-    return (<Plot data={data} layout={layout} />);
+    return <Plot data={data} layout={layout} />;
   }
 }
 
diff --git a/app/javascript/sensitivity_plotter/index.jsx b/app/javascript/sensitivity_plotter/index.jsx
index 5f89e3074..891d17f9b 100644
--- a/app/javascript/sensitivity_plotter/index.jsx
+++ b/app/javascript/sensitivity_plotter/index.jsx
@@ -13,13 +13,13 @@ class SensitivityPlotter extends React.Component {
   }
 
   componentDidMount() {
-    const { api, ope: { id: opeId } } = this.props;
-    api.analyseSensitivity(
-      opeId,
-      (response) => {
-        this.setState({ ...response.data });
-      },
-    );
+    const {
+      api,
+      ope: { id: opeId },
+    } = this.props;
+    api.analyseSensitivity(opeId, (response) => {
+      this.setState({ ...response.data });
+    });
   }
 
   render() {
@@ -35,31 +35,21 @@ class SensitivityPlotter extends React.Component {
         outs.push({ outname: output, sensitivity: saResult[output] });
       }
       if (saMethod === 'morris') {
-        desc = 'For each output, plot of standard deviation (\u03c3) vs mean (\u03bc*) of the effect of a given input (the closer to (0,0), the lesser influent the input is)';
-        plots = outs.map(
-          (o) => (
-            <MorrisScatterPlot
-              key={o.outname}
-              outVarName={o.outname}
-              saData={o.sensitivity}
-            />
-          ),
-        );
+        desc =
+          'For each output, plot of standard deviation (\u03c3) vs mean (\u03bc*) of the effect of a given input (the closer to (0,0), the lesser influent the input is)';
+        plots = outs.map((o) => (
+          <MorrisScatterPlot key={o.outname} outVarName={o.outname} saData={o.sensitivity} />
+        ));
       } else if (saMethod === 'sobol') {
-        desc = 'For each output, plot of Sobol first order (S1) and total order (ST) indices (share of the variance of the output that is due to a given input: the greater, the more influent the input is)';
+        desc =
+          'For each output, plot of Sobol first order (S1) and total order (ST) indices (share of the variance of the output that is due to a given input: the greater, the more influent the input is)';
         heatmaps = [
           <SobolHeatMap key="first order" outVarNames={varnames} saResult={saResult} firstOrder />,
           <SobolHeatMap key="total order" outVarNames={varnames} saResult={saResult} />,
         ];
-        plots = outs.map(
-          (o) => (
-            <SobolScatterPlot
-              key={o.outname}
-              outVarName={o.outname}
-              saData={o.sensitivity}
-            />
-          ),
-        );
+        plots = outs.map((o) => (
+          <SobolScatterPlot key={o.outname} outVarName={o.outname} saData={o.sensitivity} />
+        ));
       } else {
         console.log(`Error: sensitivity analysis method ${saMethod} unknown`);
       }
@@ -69,12 +59,8 @@ class SensitivityPlotter extends React.Component {
     const title = `Sensitivity analysis on ${mda.name} (${ope.name})`;
     return (
       <div>
-        <h1>
-          {title}
-        </h1>
-        <p>
-          {desc}
-        </p>
+        <h1>{title}</h1>
+        <p>{desc}</p>
         {heatmaps}
         {plots}
       </div>
diff --git a/app/javascript/utils/AnalysisDatabase.js b/app/javascript/utils/AnalysisDatabase.js
index 1b88f840a..a61adaaa7 100644
--- a/app/javascript/utils/AnalysisDatabase.js
+++ b/app/javascript/utils/AnalysisDatabase.js
@@ -56,7 +56,9 @@ class AnalysisDatabase {
   }
 
   isUncertainVarCases(c) {
-    return this.connections.find((conn) => conn.role === 'uncertain_var' && conn.name === c.varname);
+    return this.connections.find(
+      (conn) => conn.role === 'uncertain_var' && conn.name === c.varname
+    );
   }
 
   isOutputVarCases(c) {
@@ -64,8 +66,10 @@ class AnalysisDatabase {
   }
 
   isCouplingVarCases(c) {
-    return !(this.inputVariables.find((v) => v.name === c.varname)
-      || this.outputVariables.find((v) => v.name === c.varname));
+    return !(
+      this.inputVariables.find((v) => v.name === c.varname) ||
+      this.outputVariables.find((v) => v.name === c.varname)
+    );
   }
 
   isObjective(c) {
@@ -100,10 +104,12 @@ class AnalysisDatabase {
     let isMin;
     let conn;
     for (let i = 0; i < this.connections.length; i += 1) {
-      if (this.connections[i].role === 'min_objective'
-        || this.connections[i].role === 'max_objective') {
+      if (
+        this.connections[i].role === 'min_objective' ||
+        this.connections[i].role === 'max_objective'
+      ) {
         conn = this.connections[i];
-        isMin = (conn.role === 'min_objective');
+        isMin = conn.role === 'min_objective';
         break;
       }
     }
@@ -120,7 +126,9 @@ class AnalysisDatabase {
     if (this.constraints) {
       return this.constraints;
     }
-    const connCstrs = this.connections.filter((c) => c.role === 'ineq_constraint' || c.role === 'eq_constraint');
+    const connCstrs = this.connections.filter(
+      (c) => c.role === 'ineq_constraint' || c.role === 'eq_constraint'
+    );
     const cstrNames = connCstrs.map((c) => c.name);
     this.constraints = this.outputVariables.filter((v) => cstrNames.includes(v.name));
     return this.constraints;
@@ -132,23 +140,24 @@ class AnalysisDatabase {
       .map((node) => `${node.discipline_id}`);
     let shouldBeBounded = false;
     for (const id of conn.to) {
-      shouldBeBounded = shouldBeBounded || (surrogateIds.indexOf(id) > -1);
+      shouldBeBounded = shouldBeBounded || surrogateIds.indexOf(id) > -1;
     }
     return shouldBeBounded;
   }
 
   computeConnections(filter) {
     let { edges } = this;
-    let nodeSelected = filter && filter.fr && (filter.fr === filter.to);
+    let nodeSelected = filter && filter.fr && filter.fr === filter.to;
 
     if (filter && filter.fr && filter.to) {
       const nodeFrom = this._findNode(filter.fr);
       const nodeTo = this._findNode(filter.to);
-      if (nodeSelected) { // node selected
+      if (nodeSelected) {
+        // node selected
         nodeSelected = nodeFrom;
         edges = edges.filter((edge) => edge.from === nodeFrom.id || edge.to === nodeTo.id);
       } else {
-        edges = edges.filter((edge) => (edge.from === nodeFrom.id && edge.to === nodeTo.id));
+        edges = edges.filter((edge) => edge.from === nodeFrom.id && edge.to === nodeTo.id);
       }
     }
 
@@ -245,15 +254,16 @@ class AnalysisDatabase {
   }
 
   isConnected(nodeId) {
-    return (this.mda.vars[nodeId].out.length !== 0 || this.mda.vars[nodeId].in.length !== 0);
+    return this.mda.vars[nodeId].out.length !== 0 || this.mda.vars[nodeId].in.length !== 0;
   }
 
   _findNode(id) {
     for (let i = 0; i < this.mda.nodes.length; i += 1) {
       const node = this.mda.nodes[i];
       // eslint-disable-next-line eqeqeq
-      if (node.id == id) { // weak equality to deal with 1522 == "1522" transparently
-        return (i === 0) ? { id, name: 'Driver' } : { id: node.id, name: node.name };
+      if (node.id == id) {
+        // weak equality to deal with 1522 == "1522" transparently
+        return i === 0 ? { id, name: 'Driver' } : { id: node.id, name: node.name };
       }
     }
     throw Error(`Node id (${id}) unknown: ${JSON.stringify(this.mda.nodes)}`);
@@ -329,11 +339,15 @@ class AnalysisDatabase {
     if (vinfos.length === 1) {
       [vinfo] = vinfos;
     } else if (vinfos.length > 1) {
-      console.log(`Warning: Find several occurences of ${vname}(${ioMode}): ${JSON.stringify(vinfos)}`);
+      console.log(
+        `Warning: Find several occurences of ${vname}(${ioMode}): ${JSON.stringify(vinfos)}`
+      );
       [vinfo] = vinfos;
       console.log(`Take the first: ${JSON.stringify(vinfo)}`);
     } else {
-      throw Error(`Expected one variable "${vname}" found ${vinfos.length} in vars[${disc}][${ioMode}] ${JSON.stringify(vars[disc][ioMode])}`);
+      throw Error(
+        `Expected one variable "${vname}" found ${vinfos.length} in vars[${disc}][${ioMode}] ${JSON.stringify(vars[disc][ioMode])}`
+      );
     }
     return vinfo;
   }
diff --git a/app/javascript/utils/RjsfSelectWidgetBs5.jsx b/app/javascript/utils/RjsfSelectWidgetBs5.jsx
index feefa0255..200641704 100644
--- a/app/javascript/utils/RjsfSelectWidgetBs5.jsx
+++ b/app/javascript/utils/RjsfSelectWidgetBs5.jsx
@@ -28,12 +28,9 @@ export default function SelectWidget({
 }) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyValue } = options;
 
-  const emptyValue = multiple ? [] : "";
+  const emptyValue = multiple ? [] : '';
 
-  function getValue(
-    event,
-    multiple
-  ) {
+  function getValue(event, multiple) {
     if (multiple) {
       return [].slice
         .call(event.target.options)
@@ -43,11 +40,7 @@ export default function SelectWidget({
       return event.target.value;
     }
   }
-  const selectedIndexes = enumOptionsIndexForValue(
-    value,
-    enumOptions,
-    multiple
-  );
+  const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
 
   return (
     <Form.Control
@@ -55,49 +48,35 @@ export default function SelectWidget({
       bsPrefix="form-select"
       id={id}
       name={id}
-      value={
-        typeof selectedIndexes === "undefined" ? emptyValue : selectedIndexes
-      }
+      value={typeof selectedIndexes === 'undefined' ? emptyValue : selectedIndexes}
       required={required}
       multiple={multiple}
       disabled={disabled || readonly}
       autoFocus={autofocus}
-      className={rawErrors.length > 0 ? "is-invalid" : ""}
+      className={rawErrors.length > 0 ? 'is-invalid' : ''}
       onBlur={
         onBlur &&
         ((event) => {
           const newValue = getValue(event, multiple);
-          onBlur(
-            id,
-            enumOptionsValueForIndex(newValue, enumOptions, optEmptyValue)
-          );
+          onBlur(id, enumOptionsValueForIndex(newValue, enumOptions, optEmptyValue));
         })
       }
       onFocus={
         onFocus &&
         ((event) => {
           const newValue = getValue(event, multiple);
-          onFocus(
-            id,
-            enumOptionsValueForIndex(newValue, enumOptions, optEmptyValue)
-          );
+          onFocus(id, enumOptionsValueForIndex(newValue, enumOptions, optEmptyValue));
         })
       }
       onChange={(event) => {
         const newValue = getValue(event, multiple);
-        onChange(
-          enumOptionsValueForIndex(newValue, enumOptions, optEmptyValue)
-        );
+        onChange(enumOptionsValueForIndex(newValue, enumOptions, optEmptyValue));
       }}
       aria-describedby={ariaDescribedByIds(id)}
     >
-      {!multiple && schema.default === undefined && (
-        <option value="">{placeholder}</option>
-      )}
-      {(enumOptions).map(({ value, label }, i) => {
-        const disabled =
-          Array.isArray(enumDisabled) &&
-          (enumDisabled).indexOf(value) != -1;
+      {!multiple && schema.default === undefined && <option value="">{placeholder}</option>}
+      {enumOptions.map(({ value, label }, i) => {
+        const disabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(value) != -1;
         return (
           <option key={i} id={label} value={String(i)} disabled={disabled}>
             {label}
diff --git a/app/javascript/utils/WhatsOptApi.js b/app/javascript/utils/WhatsOptApi.js
index 0df34be69..0afe2ca61 100644
--- a/app/javascript/utils/WhatsOptApi.js
+++ b/app/javascript/utils/WhatsOptApi.js
@@ -28,56 +28,64 @@ class WhatsOptApi {
 
   openmdaoChecking(mdaId, callback) {
     const path = `/analyses/${mdaId}/openmdao_checking`;
-    axios.post(this.apiUrl(path))
+    axios
+      .post(this.apiUrl(path))
       .then(callback)
       .catch((error) => console.log(error));
   }
 
   analyseSensitivity(opeId, callback) {
     const path = `/operations/${opeId}/sensitivity_analysis`;
-    axios.get(this.apiUrl(path))
+    axios
+      .get(this.apiUrl(path))
       .then(callback)
       .catch((error) => console.log(error));
   }
 
   getProjects(callback) {
     const path = '/design_projects';
-    axios.get(this.apiUrl(path))
+    axios
+      .get(this.apiUrl(path))
       .then(callback)
       .catch((error) => console.log(error));
   }
 
   getUsers(mdaId, role, callback) {
     const path = `/user_roles?query[analysis_id]=${mdaId}&query[select]=${role}`;
-    axios.get(this.apiUrl(path))
+    axios
+      .get(this.apiUrl(path))
       .then(callback)
       .catch((error) => console.log(error));
   }
 
   getUserCandidates(mdaId, role, callback) {
     const path = `/user_roles?query[analysis_id]=${mdaId}&query[select]=${role}_candidates`;
-    axios.get(this.apiUrl(path))
+    axios
+      .get(this.apiUrl(path))
       .then(callback)
       .catch((error) => console.log(error));
   }
 
   addUser(userId, mdaId, role, callback) {
     const path = `/user_roles/${userId}`;
-    axios.put(this.apiUrl(path), { user_role: { analysis_id: mdaId, role } })
+    axios
+      .put(this.apiUrl(path), { user_role: { analysis_id: mdaId, role } })
       .then(callback)
       .catch((error) => console.log(error));
   }
 
   removeUser(userId, mdaId, role, callback) {
     const path = `/user_roles/${userId}`;
-    axios.delete(this.apiUrl(path), { data: { user_role: { analysis_id: mdaId, role } } })
+    axios
+      .delete(this.apiUrl(path), { data: { user_role: { analysis_id: mdaId, role } } })
       .then(callback)
       .catch((error) => console.log(error));
   }
 
   updateUserSettings(userId, settings, callback) {
     const path = `/users/${userId}`;
-    axios.put(this.apiUrl(path), { user: { settings } })
+    axios
+      .put(this.apiUrl(path), { user: { settings } })
       .then(callback)
       .catch((error) => console.log(error));
   }
@@ -88,7 +96,8 @@ class WhatsOptApi {
     if (format) {
       path += `.${format}`;
     }
-    axios.get(this.apiUrl(path))
+    axios
+      .get(this.apiUrl(path))
       .then((response) => {
         // Here we set the update time of the MDA as we requested it
         // This field is used to implement optimistic lock on the mda
@@ -103,14 +112,16 @@ class WhatsOptApi {
 
   getAnalysisHistory(mdaId, callback) {
     const path = `/analyses/${mdaId}/journal`;
-    axios.get(this.apiUrl(path))
+    axios
+      .get(this.apiUrl(path))
       .then(callback)
       .catch((error) => console.log(error));
   }
 
   updateAnalysis(mdaId, mdaAttrs, callback, onError) {
     const path = `/analyses/${mdaId}`;
-    axios.put(this.apiUrl(path), { analysis: mdaAttrs, requested_at: this.requested_at })
+    axios
+      .put(this.apiUrl(path), { analysis: mdaAttrs, requested_at: this.requested_at })
       .then((response) => {
         // Here we set the update time of the MDA as we requested it
         // This field is used to implement optimistic lock on the mda
@@ -123,28 +134,32 @@ class WhatsOptApi {
 
   compareAnalyses(mdaId, otherMdaId, callback) {
     const path = `/analyses/${mdaId}/comparisons/new?with=${otherMdaId}`;
-    axios.get(this.apiUrl(path))
+    axios
+      .get(this.apiUrl(path))
       .then(callback)
       .catch((error) => console.log(error));
   }
 
   getDisciplines(mdaId, callback) {
     const path = `/analyses/${mdaId}/disciplines`;
-    axios.get(this.apiUrl(path))
+    axios
+      .get(this.apiUrl(path))
       .then(callback)
       .catch((error) => console.log(error));
   }
 
   getVariables(mdaId, callback) {
     const path = `/analyses/${mdaId}/variables`;
-    axios.get(this.apiUrl(path))
+    axios
+      .get(this.apiUrl(path))
       .then(callback)
       .catch((error) => console.log(error));
   }
 
   getVariableInformation(mdaId, id, callback) {
     const path = `/analyses/${mdaId}/variables/${id}`;
-    axios.get(this.apiUrl(path))
+    axios
+      .get(this.apiUrl(path))
       .then(callback)
       .catch((error) => console.log(error));
   }
@@ -153,14 +168,16 @@ class WhatsOptApi {
     const path = `/analyses/${toMdaId}`;
     this.getAnalysis(toMdaId, false, (response) => {
       const { updated_at } = response.data;
-      axios.put(this.apiUrl(path), {
-        analysis: {
-          import: {
-            analysis: fromMdaId, disciplines: [discId],
+      axios
+        .put(this.apiUrl(path), {
+          analysis: {
+            import: {
+              analysis: fromMdaId,
+              disciplines: [discId],
+            },
           },
-        },
-        requested_at: updated_at,
-      })
+          requested_at: updated_at,
+        })
         .then(callback)
         .catch(onError);
     });
@@ -168,31 +185,34 @@ class WhatsOptApi {
 
   createDiscipline(mdaId, disciplineAttributes, callback, onError) {
     const path = `/analyses/${mdaId}/disciplines`;
-    axios.post(this.apiUrl(path), {
-      discipline: disciplineAttributes,
-      requested_at: this.requested_at,
-    })
+    axios
+      .post(this.apiUrl(path), {
+        discipline: disciplineAttributes,
+        requested_at: this.requested_at,
+      })
       .then(callback)
       .catch(onError);
   }
 
   updateDiscipline(mdaId, discId, disciplineAttributes, callback, onError) {
     const path = `/analyses/${mdaId}/disciplines/${discId}`;
-    axios.put(this.apiUrl(path), {
-      discipline: disciplineAttributes,
-      requested_at: this.requested_at,
-    })
+    axios
+      .put(this.apiUrl(path), {
+        discipline: disciplineAttributes,
+        requested_at: this.requested_at,
+      })
       .then(callback)
       .catch(onError);
   }
 
   deleteDiscipline(mdaId, discId, callback, onError) {
     const path = `/analyses/${mdaId}/disciplines/${discId}`;
-    axios.delete(this.apiUrl(path), {
-      data: {
-        requested_at: this.requested_at,
-      },
-    })
+    axios
+      .delete(this.apiUrl(path), {
+        data: {
+          requested_at: this.requested_at,
+        },
+      })
       .then(callback)
       .catch(onError);
   }
@@ -205,76 +225,86 @@ class WhatsOptApi {
       option = '?owned=true';
     }
     const path = `/analyses${option}`;
-    axios.get(this.apiUrl(path))
+    axios
+      .get(this.apiUrl(path))
       .then(callback)
       .catch((error) => console.log(error));
   }
 
   getSubAnalysisCandidates(callback) {
     const path = '/analyses';
-    axios.get(this.apiUrl(path))
+    axios
+      .get(this.apiUrl(path))
       .then(callback)
       .catch((error) => console.log(error));
   }
 
   createConnection(mdaId, connectionAttributes, callback, onError) {
     const path = `/analyses/${mdaId}/connections`;
-    axios.post(this.apiUrl(path), {
-      connection: connectionAttributes,
-      requested_at: this.requested_at,
-    })
+    axios
+      .post(this.apiUrl(path), {
+        connection: connectionAttributes,
+        requested_at: this.requested_at,
+      })
       .then(callback)
       .catch(onError);
   }
 
   updateConnection(mdaId, connectionId, connectionAttributes, callback, onError) {
     const path = `/analyses/${mdaId}/connections/${connectionId}`;
-    axios.put(this.apiUrl(path), {
-      connection: connectionAttributes,
-      requested_at: this.requested_at,
-    })
+    axios
+      .put(this.apiUrl(path), {
+        connection: connectionAttributes,
+        requested_at: this.requested_at,
+      })
       .then(callback)
       .catch(onError);
   }
 
   deleteConnection(mdaId, connectionId, callback, onError) {
     const path = `/analyses/${mdaId}/connections/${connectionId}`;
-    axios.delete(this.apiUrl(path), {
-      data: {
-        requested_at: this.requested_at,
-      },
-    })
+    axios
+      .delete(this.apiUrl(path), {
+        data: {
+          requested_at: this.requested_at,
+        },
+      })
       .then(callback)
       .catch(onError);
   }
 
   getOperation(operationId, callback) {
     const path = `/operations/${operationId}`;
-    axios.get(this.apiUrl(path))
+    axios
+      .get(this.apiUrl(path))
       .then(callback)
       .catch((error) => console.log(error));
   }
 
   getOpenmdaoImpl(mdaId, callback) {
     const path = `/analyses/${mdaId}/openmdao_impl`;
-    axios.get(this.apiUrl(path))
+    axios
+      .get(this.apiUrl(path))
       .then(callback)
       .catch((error) => console.log(error));
   }
 
   updateOpenmdaoImpl(mdaId, implAttrs, callback, onError) {
     const path = `/analyses/${mdaId}/openmdao_impl`;
-    axios.patch(this.apiUrl(path), {
-      openmdao_impl: implAttrs,
-      requested_at: this.requested_at,
-    })
-      .then(() => this.getAnalysis(mdaId, false, (response) => {
-        // Here we set the update time of the MDA as we requested it
-        // This field is used to implement optimistic lock on the mda
-        // when co_owners do concurrent editing
-        this.requested_at = response.data.updated_at;
-        callback();
-      }))
+    axios
+      .patch(this.apiUrl(path), {
+        openmdao_impl: implAttrs,
+        requested_at: this.requested_at,
+      })
+      .then(() =>
+        this.getAnalysis(mdaId, false, (response) => {
+          // Here we set the update time of the MDA as we requested it
+          // This field is used to implement optimistic lock on the mda
+          // when co_owners do concurrent editing
+          this.requested_at = response.data.updated_at;
+          callback();
+        })
+      )
       .catch(onError);
   }
 }
diff --git a/app/javascript/utils/compare.js b/app/javascript/utils/compare.js
index 0547187c8..6f4d9c615 100644
--- a/app/javascript/utils/compare.js
+++ b/app/javascript/utils/compare.js
@@ -1,31 +1,41 @@
 function deepIsEqual(first, second) {
   // If first and second are the same type and have the same value
   // Useful if strings or other primitive types are compared
-  if (first === second) { return true; }
+  if (first === second) {
+    return true;
+  }
 
   // Try a quick compare by seeing if the length of properties are the same
   const firstProps = Object.getOwnPropertyNames(first);
   const secondProps = Object.getOwnPropertyNames(second);
 
   // Check different amount of properties
-  if (firstProps.length !== secondProps.length) { return false; }
+  if (firstProps.length !== secondProps.length) {
+    return false;
+  }
 
   // Go through properties of first object
   for (let i = 0; i < firstProps.length; i += 1) {
     const prop = firstProps[i];
     // Check the type of property to perform different comparisons
-    switch (typeof (first[prop])) {
+    switch (typeof first[prop]) {
       // If it is an object, decend for deep compare
       case 'object':
-        if (!deepIsEqual(first[prop], second[prop])) { return false; }
+        if (!deepIsEqual(first[prop], second[prop])) {
+          return false;
+        }
         break;
       case 'number':
         // with JavaScript NaN != NaN so we need a special check
         // eslint-disable-next-line no-restricted-globals
-        if (isNaN(first[prop]) && isNaN(second[prop])) { break; }
+        if (isNaN(first[prop]) && isNaN(second[prop])) {
+          break;
+        }
       // eslint-disable-next-line no-fallthrough
       default:
-        if (first[prop] !== second[prop]) { return false; }
+        if (first[prop] !== second[prop]) {
+          return false;
+        }
     }
   }
   return true;
diff --git a/app/javascript/utils/components/DataConfirmModal.jsx b/app/javascript/utils/components/DataConfirmModal.jsx
index d8b2d0ba2..a39fa49e0 100644
--- a/app/javascript/utils/components/DataConfirmModal.jsx
+++ b/app/javascript/utils/components/DataConfirmModal.jsx
@@ -23,19 +23,44 @@ class DataConfirmModal extends React.PureComponent {
     const { id, title, text } = this.props;
 
     return (
-      <div className="modal fade" id={`confirmModal-${id}`} tabIndex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
+      <div
+        className="modal fade"
+        id={`confirmModal-${id}`}
+        tabIndex="-1"
+        aria-labelledby="confirmModalLabel"
+        aria-hidden="true"
+      >
         <div className="modal-dialog">
           <div className="modal-content">
             <div className="modal-header">
-              <h5 className="modal-title" id="confirmModalLabel">{title }</h5>
-              <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" />
-            </div>
-            <div className="modal-body">
-              {text}
+              <h5 className="modal-title" id="confirmModalLabel">
+                {title}
+              </h5>
+              <button
+                type="button"
+                className="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              />
             </div>
+            <div className="modal-body">{text}</div>
             <div className="modal-footer">
-              <button type="button" className="btn btn-secondary" data-bs-dismiss="modal" onClick={this.handleCancel}>No, cancel</button>
-              <button type="button" className="btn btn-danger" data-bs-dismiss="modal" onClick={this.handleConfirm}>Yes</button>
+              <button
+                type="button"
+                className="btn btn-secondary"
+                data-bs-dismiss="modal"
+                onClick={this.handleCancel}
+              >
+                No, cancel
+              </button>
+              <button
+                type="button"
+                className="btn btn-danger"
+                data-bs-dismiss="modal"
+                onClick={this.handleConfirm}
+              >
+                Yes
+              </button>
             </div>
           </div>
         </div>
diff --git a/app/javascript/utils/components/Error.jsx b/app/javascript/utils/components/Error.jsx
index b7e6e245b..83e5715f9 100644
--- a/app/javascript/utils/components/Error.jsx
+++ b/app/javascript/utils/components/Error.jsx
@@ -7,7 +7,13 @@ class Error extends React.PureComponent {
     return (
       <div className="alert alert-warning alert-dismissible fade show" role="alert">
         {msg}
-        <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close" onClick={onClose} />
+        <button
+          type="button"
+          className="btn-close"
+          data-bs-dismiss="alert"
+          aria-label="Close"
+          onClick={onClose}
+        />
       </div>
     );
   }
diff --git a/app/javascript/utils/components/LoadingIndicator.jsx b/app/javascript/utils/components/LoadingIndicator.jsx
index 243f7bc5d..706e5ecee 100644
--- a/app/javascript/utils/components/LoadingIndicator.jsx
+++ b/app/javascript/utils/components/LoadingIndicator.jsx
@@ -5,14 +5,13 @@ function LoadingIndicator() {
   const { promiseInProgress } = usePromiseTracker();
 
   return (
-    promiseInProgress
-    && (
-    <div className="d-flex justify-content-center text-success mt-2">
-      <strong className="me-2">Loading...</strong>
-      <div className="spinner-border text-success" role="status">
-        <span className="sr-only">Loading...</span>
+    promiseInProgress && (
+      <div className="d-flex justify-content-center text-success mt-2">
+        <strong className="me-2">Loading...</strong>
+        <div className="spinner-border text-success" role="status">
+          <span className="sr-only">Loading...</span>
+        </div>
       </div>
-    </div>
     )
   );
 }
diff --git a/app/javascript/utils/components/custom-plotly.js b/app/javascript/utils/components/custom-plotly.js
index 4ac3f5286..05175a925 100644
--- a/app/javascript/utils/components/custom-plotly.js
+++ b/app/javascript/utils/components/custom-plotly.js
@@ -2,8 +2,6 @@
 import Plotly from 'plotly.js/lib/core';
 
 // Load in the trace types for pie, and choropleth
-Plotly.register([
-  require('plotly.js/lib/scatter'),
-]);
+Plotly.register([require('plotly.js/lib/scatter')]);
 
 export default Plotly;
diff --git a/babel.config.js b/babel.config.js
index 171872ea0..ce63c3630 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -10,12 +10,13 @@ module.exports = function (api) {
         {
           development: !isProductionEnv,
           useBuiltIns: true,
-          runtime: "automatic",
+          runtime: 'automatic',
         },
       ],
     ].filter(Boolean),
     plugins: [
-      isProductionEnv && ['babel-plugin-transform-react-remove-prop-types',
+      isProductionEnv && [
+        'babel-plugin-transform-react-remove-prop-types',
         {
           removeImport: true,
         },
diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js
index 12bfd6dd7..7367cf9d7 100644
--- a/config/webpack/webpack.config.js
+++ b/config/webpack/webpack.config.js
@@ -5,7 +5,6 @@ const webpackConfig = generateWebpackConfig();
 const webpack = require('webpack');
 
 const options = {
-
   // Manage css of swagger ui in node_modules, ignore stream
   resolve: {
     extensions: ['.css'],
@@ -16,11 +15,13 @@ const options = {
   },
 
   // Add dependency needed by swagger ui
-  plugins: [new webpack.ProvidePlugin({
-    $: 'jquery',
-    jQuery: 'jquery',
-    Buffer: ['buffer', 'Buffer'],
-  })],
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  ],
 
   // Add loader for plotly parallel coordinates
   module: {
diff --git a/eslint.config.cjs b/eslint.config.cjs
new file mode 100644
index 000000000..978178217
--- /dev/null
+++ b/eslint.config.cjs
@@ -0,0 +1,85 @@
+const js = require('@eslint/js');
+const globals = require('globals');
+const reactPlugin = require('eslint-plugin-react');
+const reactHooksPlugin = require('eslint-plugin-react-hooks');
+const jsxA11yPlugin = require('eslint-plugin-jsx-a11y');
+const eslintConfigPrettier = require('eslint-config-prettier');
+
+module.exports = [
+  {
+    ignores: [
+      'node_modules/**',
+      'public/packs/**',
+      'public/packs-test/**',
+      'public/assets/**',
+      'vendor/**',
+      'tmp/**',
+      'log/**',
+      'storage/**',
+      'upload/**',
+      '**/*_out/**',
+      'reports/**',
+      'db/*.sqlite3',
+      'app/javascript/mda_viewer/components/riek/**',
+    ],
+  },
+  {
+    linterOptions: {
+      reportUnusedDisableDirectives: 'off',
+    },
+  },
+  js.configs.recommended,
+  {
+    files: ['app/javascript/**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+        ...globals.commonjs,
+        require: 'readonly',
+        module: 'readonly',
+        $: 'readonly',
+        jQuery: 'readonly',
+        App: 'writable',
+      },
+    },
+    plugins: {
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin,
+      'jsx-a11y': jsxA11yPlugin,
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      'no-unused-vars': 'warn',
+      'no-console': 'off',
+      'no-underscore-dangle': 'off',
+    },
+  },
+  {
+    files: ['*.{js,cjs,mjs}', 'config/**/*.js'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'commonjs',
+      globals: {
+        ...globals.node,
+      },
+    },
+  },
+  eslintConfigPrettier,
+];
diff --git a/package.json b/package.json
index 5a360438a..cfc0e9d81 100644
--- a/package.json
+++ b/package.json
@@ -58,9 +58,15 @@
     "webpack-assets-manifest": "^6.4.0",
     "webpack-cli": "^7.0.2",
     "webpack-merge": "^6.0.1",
-    "xdsmjs": "2.0.1-rc.0"
+    "xdsmjs": "^2.0.0"
   },
   "version": "0.1.0",
+  "scripts": {
+    "lint": "eslint app/javascript config/webpack babel.config.js eslint.config.cjs",
+    "lint:fix": "eslint app/javascript config/webpack babel.config.js eslint.config.cjs --fix",
+    "format": "prettier \"app/javascript/**/*.{js,jsx}\" \"config/webpack/**/*.js\" \"*.{js,cjs,mjs,json}\" --write",
+    "format:check": "prettier \"app/javascript/**/*.{js,jsx}\" \"config/webpack/**/*.js\" \"*.{js,cjs,mjs,json}\" --check"
+  },
   "babel": {
     "presets": [
       "./node_modules/shakapacker/package/babel/preset.js"
@@ -70,19 +76,14 @@
     "defaults"
   ],
   "devDependencies": {
-    "@babel/eslint-parser": "^7.28.5",
+    "@eslint/js": "^9.39.1",
     "eslint": "^9.39.1",
-    "eslint-config-airbnb": "^19.0.2",
-    "eslint-config-react": "^1.1.7",
-    "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-n": "^17.23.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^7.1.0",
-    "eslint-plugin-react": "^7.20.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-webpack-plugin": "^6.0.0",
+    "globals": "^16.4.0",
+    "prettier": "^3.6.2",
     "webpack-dev-server": "^5.0.4"
   },
   "packageManager": "yarn@4.14.1"
diff --git a/postcss.config.js b/postcss.config.js
index aa5998a80..b7ea0f26f 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -4,9 +4,9 @@ module.exports = {
     require('postcss-flexbugs-fixes'),
     require('postcss-preset-env')({
       autoprefixer: {
-        flexbox: 'no-2009'
+        flexbox: 'no-2009',
       },
-      stage: 3
-    })
-  ]
-}
+      stage: 3,
+    }),
+  ],
+};
diff --git a/yarn.lock b/yarn.lock
index 1fe353078..e887d2a34 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -67,20 +67,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/eslint-parser@npm:^7.28.5":
-  version: 7.28.6
-  resolution: "@babel/eslint-parser@npm:7.28.6"
-  dependencies:
-    "@nicolo-ribaudo/eslint-scope-5-internals": "npm:5.1.1-v1"
-    eslint-visitor-keys: "npm:^2.1.0"
-    semver: "npm:^6.3.1"
-  peerDependencies:
-    "@babel/core": ^7.11.0
-    eslint: ^7.5.0 || ^8.0.0 || ^9.0.0
-  checksum: 10c0/58a85f67a056ba8389978c4654b690b890a6dcd19aa9655c5d7d9349a0c25f124cabad8a190b6bf7045a063aeee1b8e2ab23cfe4d8fa0e0517716a8b70e758bc
-  languageName: node
-  linkType: hard
-
 "@babel/generator@npm:^7.29.0":
   version: 7.29.1
   resolution: "@babel/generator@npm:7.29.1"
@@ -1271,7 +1257,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/eslint-utils@npm:^4.1.2, @eslint-community/eslint-utils@npm:^4.4.0, @eslint-community/eslint-utils@npm:^4.5.0, @eslint-community/eslint-utils@npm:^4.8.0":
+"@eslint-community/eslint-utils@npm:^4.8.0":
   version: 4.9.1
   resolution: "@eslint-community/eslint-utils@npm:4.9.1"
   dependencies:
@@ -1282,7 +1268,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/regexpp@npm:^4.11.0, @eslint-community/regexpp@npm:^4.12.1":
+"@eslint-community/regexpp@npm:^4.12.1":
   version: 4.12.2
   resolution: "@eslint-community/regexpp@npm:4.12.2"
   checksum: 10c0/fddcbc66851b308478d04e302a4d771d6917a0b3740dc351513c0da9ca2eab8a1adf99f5e0aa7ab8b13fa0df005c81adeee7e63a92f3effd7d367a163b721c2d
@@ -1335,7 +1321,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:9.39.4":
+"@eslint/js@npm:9.39.4, @eslint/js@npm:^9.39.1":
   version: 9.39.4
   resolution: "@eslint/js@npm:9.39.4"
   checksum: 10c0/5aa7dea2cbc5decf7f5e3b0c6f86a084ccee0f792d288ca8e839f8bc1b64e03e227068968e49b26096e6f71fd857ab6e42691d1b993826b9a3883f1bdd7a0e46
@@ -1891,15 +1877,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1":
-  version: 5.1.1-v1
-  resolution: "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1"
-  dependencies:
-    eslint-scope: "npm:5.1.1"
-  checksum: 10c0/75dda3e623b8ad7369ca22552d6beee337a814b2d0e8a32d23edd13fcb65c8082b32c5d86e436f3860dd7ade30d91d5db55d4ef9a08fb5a976c718ecc0d88a74
-  languageName: node
-  linkType: hard
-
 "@noble/hashes@npm:1.4.0":
   version: 1.4.0
   resolution: "@noble/hashes@npm:1.4.0"
@@ -2332,13 +2309,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rtsao/scc@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@rtsao/scc@npm:1.1.0"
-  checksum: 10c0/b5bcfb0d87f7d1c1c7c0f7693f53b07866ed9fec4c34a97a8c948fb9a7c0082e416ce4d3b60beb4f5e167cbe04cdeefbf6771320f3ede059b9ce91188c409a5b
-  languageName: node
-  linkType: hard
-
 "@scarf/scarf@npm:=1.4.0":
   version: 1.4.0
   resolution: "@scarf/scarf@npm:1.4.0"
@@ -3150,7 +3120,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/eslint@npm:*, @types/eslint@npm:^9.6.1":
+"@types/eslint@npm:*":
   version: 9.6.1
   resolution: "@types/eslint@npm:9.6.1"
   dependencies:
@@ -3287,13 +3257,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/json5@npm:^0.0.29":
-  version: 0.0.29
-  resolution: "@types/json5@npm:0.0.29"
-  checksum: 10c0/6bf5337bc447b706bb5b4431d37686aa2ea6d07cfd6f79cc31de80170d6ff9b1c7384a9c0ccbc45b3f512bae9e9f75c2e12109806a15331dc94e8a8db6dbb4ac
-  languageName: node
-  linkType: hard
-
 "@types/mapbox__point-geometry@npm:*":
   version: 1.0.87
   resolution: "@types/mapbox__point-geometry@npm:1.0.87"
@@ -3933,7 +3896,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-includes@npm:^3.1.6, array-includes@npm:^3.1.8, array-includes@npm:^3.1.9":
+"array-includes@npm:^3.1.6, array-includes@npm:^3.1.8":
   version: 3.1.9
   resolution: "array-includes@npm:3.1.9"
   dependencies:
@@ -3979,22 +3942,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array.prototype.findlastindex@npm:^1.2.6":
-  version: 1.2.6
-  resolution: "array.prototype.findlastindex@npm:1.2.6"
-  dependencies:
-    call-bind: "npm:^1.0.8"
-    call-bound: "npm:^1.0.4"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.9"
-    es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.1.1"
-    es-shim-unscopables: "npm:^1.1.0"
-  checksum: 10c0/82559310d2e57ec5f8fc53d7df420e3abf0ba497935de0a5570586035478ba7d07618cb18e2d4ada2da514c8fb98a034aaf5c06caa0a57e2f7f4c4adedef5956
-  languageName: node
-  linkType: hard
-
-"array.prototype.flat@npm:^1.3.1, array.prototype.flat@npm:^1.3.3":
+"array.prototype.flat@npm:^1.3.1":
   version: 1.3.3
   resolution: "array.prototype.flat@npm:1.3.3"
   dependencies:
@@ -4097,9 +4045,9 @@ __metadata:
   linkType: hard
 
 "axe-core@npm:^4.10.0":
-  version: 4.11.2
-  resolution: "axe-core@npm:4.11.2"
-  checksum: 10c0/606ec10fce83d918a09b571309899bd396ff32485e7513444419e85ab3944f59f3ab46387a6f6b15c796dba9c5dc41007646b00f971f8f27fcc80ba92539ab25
+  version: 4.11.4
+  resolution: "axe-core@npm:4.11.4"
+  checksum: 10c0/c4aa83fc3eac5f7a0d0cb1a28f9d073acf0c06ce8daacc38608faa278c57ce084c028c850746b98817ae4c101c30c1a32e95ea34748c4b4c7419b9b81221ef84
   languageName: node
   linkType: hard
 
@@ -4866,13 +4814,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"confusing-browser-globals@npm:^1.0.10":
-  version: 1.0.11
-  resolution: "confusing-browser-globals@npm:1.0.11"
-  checksum: 10c0/475d0a284fa964a5182b519af5738b5b64bf7e413cfd703c1b3496bf6f4df9f827893a9b221c0ea5873c1476835beb1e0df569ba643eff0734010c1eb780589e
-  languageName: node
-  linkType: hard
-
 "connect-history-api-fallback@npm:^2.0.0":
   version: 2.0.0
   resolution: "connect-history-api-fallback@npm:2.0.0"
@@ -5522,7 +5463,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:^3.2.6, debug@npm:^3.2.7":
+"debug@npm:^3.2.6":
   version: 3.2.7
   resolution: "debug@npm:3.2.7"
   dependencies:
@@ -5899,7 +5840,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enhanced-resolve@npm:^5.17.1, enhanced-resolve@npm:^5.20.0":
+"enhanced-resolve@npm:^5.20.0":
   version: 5.20.1
   resolution: "enhanced-resolve@npm:5.20.1"
   dependencies:
@@ -6060,7 +6001,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-shim-unscopables@npm:^1.0.2, es-shim-unscopables@npm:^1.1.0":
+"es-shim-unscopables@npm:^1.0.2":
   version: 1.1.0
   resolution: "es-shim-unscopables@npm:1.1.0"
   dependencies:
@@ -6164,146 +6105,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-compat-utils@npm:^0.5.1":
-  version: 0.5.1
-  resolution: "eslint-compat-utils@npm:0.5.1"
-  dependencies:
-    semver: "npm:^7.5.4"
+"eslint-config-prettier@npm:^10.1.8":
+  version: 10.1.8
+  resolution: "eslint-config-prettier@npm:10.1.8"
   peerDependencies:
-    eslint: ">=6.0.0"
-  checksum: 10c0/325e815205fab70ebcd379f6d4b5d44c7d791bb8dfe0c9888233f30ebabd9418422595b53a781b946c768d9244d858540e5e6129a6b3dd6d606f467d599edc6c
-  languageName: node
-  linkType: hard
-
-"eslint-config-airbnb-base@npm:^15.0.0":
-  version: 15.0.0
-  resolution: "eslint-config-airbnb-base@npm:15.0.0"
-  dependencies:
-    confusing-browser-globals: "npm:^1.0.10"
-    object.assign: "npm:^4.1.2"
-    object.entries: "npm:^1.1.5"
-    semver: "npm:^6.3.0"
-  peerDependencies:
-    eslint: ^7.32.0 || ^8.2.0
-    eslint-plugin-import: ^2.25.2
-  checksum: 10c0/93639d991654414756f82ad7860aac30b0dc6797277b7904ddb53ed88a32c470598696bbc6c503e066414024d305221974d3769e6642de65043bedf29cbbd30f
-  languageName: node
-  linkType: hard
-
-"eslint-config-airbnb@npm:^19.0.2":
-  version: 19.0.4
-  resolution: "eslint-config-airbnb@npm:19.0.4"
-  dependencies:
-    eslint-config-airbnb-base: "npm:^15.0.0"
-    object.assign: "npm:^4.1.2"
-    object.entries: "npm:^1.1.5"
-  peerDependencies:
-    eslint: ^7.32.0 || ^8.2.0
-    eslint-plugin-import: ^2.25.3
-    eslint-plugin-jsx-a11y: ^6.5.1
-    eslint-plugin-react: ^7.28.0
-    eslint-plugin-react-hooks: ^4.3.0
-  checksum: 10c0/867feeda45c4b480b1b8eff8fabc1bb107e837da8b48e5039e0c175ae6ad34af383b1924fc163bbfcef24a324e6651b1515e5bd12cbcbb19535a8838e2544a02
-  languageName: node
-  linkType: hard
-
-"eslint-config-react@npm:^1.1.7":
-  version: 1.1.7
-  resolution: "eslint-config-react@npm:1.1.7"
-  checksum: 10c0/cba465fef2a29dda476c5e630668f60eaf319aa90ada9a4b38cb029b361cc696581df5c30847a181bb9e5e366cfd32869729250a6c5fe31d8ce97135eae4abcb
-  languageName: node
-  linkType: hard
-
-"eslint-config-standard@npm:^17.0.0":
-  version: 17.1.0
-  resolution: "eslint-config-standard@npm:17.1.0"
-  peerDependencies:
-    eslint: ^8.0.1
-    eslint-plugin-import: ^2.25.2
-    eslint-plugin-n: "^15.0.0 || ^16.0.0 "
-    eslint-plugin-promise: ^6.0.0
-  checksum: 10c0/d32f37ec4bea541debd3a8c9e05227673a9b1a9977da078195ee55fb371813ddf1349c75f2c33d76699fe3412f1e303181795f146e8d0e546b94fa0dce2bfbf9
-  languageName: node
-  linkType: hard
-
-"eslint-import-resolver-node@npm:^0.3.9":
-  version: 0.3.10
-  resolution: "eslint-import-resolver-node@npm:0.3.10"
-  dependencies:
-    debug: "npm:^3.2.7"
-    is-core-module: "npm:^2.16.1"
-    resolve: "npm:^2.0.0-next.6"
-  checksum: 10c0/2e05bdb148fe10a25b9a6fec3c4986a2e09e98bb99208491df82a9df7725f7bb312482d585404c440d42e58ab60debe7a48d9c992191851385b18d33a146e3c3
-  languageName: node
-  linkType: hard
-
-"eslint-module-utils@npm:^2.12.1":
-  version: 2.12.1
-  resolution: "eslint-module-utils@npm:2.12.1"
-  dependencies:
-    debug: "npm:^3.2.7"
-  peerDependenciesMeta:
-    eslint:
-      optional: true
-  checksum: 10c0/6f4efbe7a91ae49bf67b4ab3644cb60bc5bd7db4cb5521de1b65be0847ffd3fb6bce0dd68f0995e1b312d137f768e2a1f842ee26fe73621afa05f850628fdc40
-  languageName: node
-  linkType: hard
-
-"eslint-plugin-es-x@npm:^7.8.0":
-  version: 7.8.0
-  resolution: "eslint-plugin-es-x@npm:7.8.0"
-  dependencies:
-    "@eslint-community/eslint-utils": "npm:^4.1.2"
-    "@eslint-community/regexpp": "npm:^4.11.0"
-    eslint-compat-utils: "npm:^0.5.1"
-  peerDependencies:
-    eslint: ">=8"
-  checksum: 10c0/002fda8c029bc5da41e24e7ac11654062831d675fc4f5f20d0de460e24bf1e05cd559000678ef3e46c48641190f4fc07ae3d57aa5e8b085ef5f67e5f63742614
-  languageName: node
-  linkType: hard
-
-"eslint-plugin-es@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "eslint-plugin-es@npm:3.0.1"
-  dependencies:
-    eslint-utils: "npm:^2.0.0"
-    regexpp: "npm:^3.0.0"
-  peerDependencies:
-    eslint: ">=4.19.1"
-  checksum: 10c0/12ae730aa9603e680af048e1653aac15e529411b68b8d0da6e290700b17c695485af7c3f5360f531f80970786cab7288c2c1d4a58c35ec1bb89649897c016c4a
-  languageName: node
-  linkType: hard
-
-"eslint-plugin-import@npm:^2.20.2":
-  version: 2.32.0
-  resolution: "eslint-plugin-import@npm:2.32.0"
-  dependencies:
-    "@rtsao/scc": "npm:^1.1.0"
-    array-includes: "npm:^3.1.9"
-    array.prototype.findlastindex: "npm:^1.2.6"
-    array.prototype.flat: "npm:^1.3.3"
-    array.prototype.flatmap: "npm:^1.3.3"
-    debug: "npm:^3.2.7"
-    doctrine: "npm:^2.1.0"
-    eslint-import-resolver-node: "npm:^0.3.9"
-    eslint-module-utils: "npm:^2.12.1"
-    hasown: "npm:^2.0.2"
-    is-core-module: "npm:^2.16.1"
-    is-glob: "npm:^4.0.3"
-    minimatch: "npm:^3.1.2"
-    object.fromentries: "npm:^2.0.8"
-    object.groupby: "npm:^1.0.3"
-    object.values: "npm:^1.2.1"
-    semver: "npm:^6.3.1"
-    string.prototype.trimend: "npm:^1.0.9"
-    tsconfig-paths: "npm:^3.15.0"
-  peerDependencies:
-    eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
-  checksum: 10c0/bfb1b8fc8800398e62ddfefbf3638d185286edfed26dfe00875cc2846d954491b4f5112457831588b757fa789384e1ae585f812614c4797f0499fa234fd4a48b
+    eslint: ">=7.0.0"
+  bin:
+    eslint-config-prettier: bin/cli.js
+  checksum: 10c0/e1bcfadc9eccd526c240056b1e59c5cd26544fe59feb85f38f4f1f116caed96aea0b3b87868e68b3099e55caaac3f2e5b9f58110f85db893e83a332751192682
   languageName: node
   linkType: hard
 
-"eslint-plugin-jsx-a11y@npm:^6.2.3":
+"eslint-plugin-jsx-a11y@npm:^6.10.2":
   version: 6.10.2
   resolution: "eslint-plugin-jsx-a11y@npm:6.10.2"
   dependencies:
@@ -6328,52 +6141,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-n@npm:^17.23.1":
-  version: 17.24.0
-  resolution: "eslint-plugin-n@npm:17.24.0"
-  dependencies:
-    "@eslint-community/eslint-utils": "npm:^4.5.0"
-    enhanced-resolve: "npm:^5.17.1"
-    eslint-plugin-es-x: "npm:^7.8.0"
-    get-tsconfig: "npm:^4.8.1"
-    globals: "npm:^15.11.0"
-    globrex: "npm:^0.1.2"
-    ignore: "npm:^5.3.2"
-    semver: "npm:^7.6.3"
-    ts-declaration-location: "npm:^1.0.6"
-  peerDependencies:
-    eslint: ">=8.23.0"
-  checksum: 10c0/65b6c9ccd4d69296df9bdc0517bdbbc71e5f1ec065e80623c49148ff7813829bd3568154a016fefc06749476f3fdadc0e1afa61a15695893a3ca3da161c9fe86
-  languageName: node
-  linkType: hard
-
-"eslint-plugin-node@npm:^11.1.0":
-  version: 11.1.0
-  resolution: "eslint-plugin-node@npm:11.1.0"
-  dependencies:
-    eslint-plugin-es: "npm:^3.0.0"
-    eslint-utils: "npm:^2.0.0"
-    ignore: "npm:^5.1.1"
-    minimatch: "npm:^3.0.4"
-    resolve: "npm:^1.10.1"
-    semver: "npm:^6.1.0"
-  peerDependencies:
-    eslint: ">=5.16.0"
-  checksum: 10c0/c7716adac4020cb852fd2410dcd8bdb13a227004de77f96d7f9806d0cf2274f24e0920a7ca73bcd72d90003696c1f17fdd9fe3ca218e64ee03dc2b840e4416fa
-  languageName: node
-  linkType: hard
-
-"eslint-plugin-promise@npm:^7.1.0":
-  version: 7.2.1
-  resolution: "eslint-plugin-promise@npm:7.2.1"
-  dependencies:
-    "@eslint-community/eslint-utils": "npm:^4.4.0"
-  peerDependencies:
-    eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
-  checksum: 10c0/d494982faeeafbd2aa5fae9cbceca546169a8399000f72d5d940fa5c4ba554612903bcafbb8033647179e5d21ccf1d621b433d089695f7f47ce3d9fcf4cd0abf
-  languageName: node
-  linkType: hard
-
 "eslint-plugin-react-hooks@npm:^7.0.1":
   version: 7.0.1
   resolution: "eslint-plugin-react-hooks@npm:7.0.1"
@@ -6389,7 +6156,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:^7.20.0":
+"eslint-plugin-react@npm:^7.37.5":
   version: 7.37.5
   resolution: "eslint-plugin-react@npm:7.37.5"
   dependencies:
@@ -6437,29 +6204,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-utils@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "eslint-utils@npm:2.1.0"
-  dependencies:
-    eslint-visitor-keys: "npm:^1.1.0"
-  checksum: 10c0/69521c5d6569384b24093125d037ba238d3d6e54367f7143af9928f5286369e912c26cad5016d730c0ffb9797ac9e83831059d7f1d863f7dc84330eb02414611
-  languageName: node
-  linkType: hard
-
-"eslint-visitor-keys@npm:^1.1.0":
-  version: 1.3.0
-  resolution: "eslint-visitor-keys@npm:1.3.0"
-  checksum: 10c0/10c91fdbbe36810dd4308e57f9a8bc7177188b2a70247e54e3af1fa05ebc66414ae6fd4ce3c6c6821591f43a556e9037bc6b071122e099b5f8b7d2f76df553e3
-  languageName: node
-  linkType: hard
-
-"eslint-visitor-keys@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "eslint-visitor-keys@npm:2.1.0"
-  checksum: 10c0/9f0e3a2db751d84067d15977ac4b4472efd6b303e369e6ff241a99feac04da758f46d5add022c33d06b53596038dbae4b4aceb27c7e68b8dfc1055b35e495787
-  languageName: node
-  linkType: hard
-
 "eslint-visitor-keys@npm:^3.4.3":
   version: 3.4.3
   resolution: "eslint-visitor-keys@npm:3.4.3"
@@ -6474,21 +6218,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-webpack-plugin@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "eslint-webpack-plugin@npm:6.0.0"
-  dependencies:
-    "@types/eslint": "npm:^9.6.1"
-    micromatch: "npm:^4.0.8"
-    normalize-path: "npm:^3.0.0"
-    schema-utils: "npm:^4.3.3"
-  peerDependencies:
-    eslint: ^9.0.0 || ^10.0.0
-    webpack: ^5.0.0
-  checksum: 10c0/9805305057c5a715287d23a03e9359f41b7b52407c4e73d81d4168843a52d548cf621d3a6341456918be1914a06d594b8021b67c18038c69473afab62b1a9302
-  languageName: node
-  linkType: hard
-
 "eslint@npm:^9.39.1":
   version: 9.39.4
   resolution: "eslint@npm:9.39.4"
@@ -7137,15 +6866,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-tsconfig@npm:^4.8.1":
-  version: 4.13.7
-  resolution: "get-tsconfig@npm:4.13.7"
-  dependencies:
-    resolve-pkg-maps: "npm:^1.0.0"
-  checksum: 10c0/1118eb7e9b27bce0b9b6f042e98f0d067e26dfa1ca32bc4b56e892b615b57a5a4af9e6f801c7b0611a4afef2e31c4941be4c6026e0e6a480aaf1ddaf261113d5
-  languageName: node
-  linkType: hard
-
 "gl-mat4@npm:^1.2.0":
   version: 1.2.0
   resolution: "gl-mat4@npm:1.2.0"
@@ -7277,10 +6997,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globals@npm:^15.11.0":
-  version: 15.15.0
-  resolution: "globals@npm:15.15.0"
-  checksum: 10c0/f9ae80996392ca71316495a39bec88ac43ae3525a438b5626cd9d5ce9d5500d0a98a266409605f8cd7241c7acf57c354a48111ea02a767ba4f374b806d6861fe
+"globals@npm:^16.4.0":
+  version: 16.5.0
+  resolution: "globals@npm:16.5.0"
+  checksum: 10c0/615241dae7851c8012f5aa0223005b1ed6607713d6813de0741768bd4ddc39353117648f1a7086b4b0fa45eae733f1c0a0fe369aa4e543bb63f8de8990178ea9
   languageName: node
   linkType: hard
 
@@ -7294,13 +7014,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globrex@npm:^0.1.2":
-  version: 0.1.2
-  resolution: "globrex@npm:0.1.2"
-  checksum: 10c0/a54c029520cf58bda1d8884f72bd49b4cd74e977883268d931fd83bcbd1a9eb96d57c7dbd4ad80148fb9247467ebfb9b215630b2ed7563b2a8de02e1ff7f89d1
-  languageName: node
-  linkType: hard
-
 "glsl-inject-defines@npm:^1.0.1":
   version: 1.0.3
   resolution: "glsl-inject-defines@npm:1.0.3"
@@ -7802,7 +7515,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.1.1, ignore@npm:^5.2.0, ignore@npm:^5.3.2":
+"ignore@npm:^5.2.0":
   version: 5.3.2
   resolution: "ignore@npm:5.3.2"
   checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337
@@ -8503,17 +8216,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json5@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "json5@npm:1.0.2"
-  dependencies:
-    minimist: "npm:^1.2.0"
-  bin:
-    json5: lib/cli.js
-  checksum: 10c0/9ee316bf21f000b00752e6c2a3b79ecf5324515a5c60ee88983a1910a45426b643a4f3461657586e8aeca87aaf96f0a519b0516d2ae527a6c3e7eed80f68717f
-  languageName: node
-  linkType: hard
-
 "json5@npm:^2.2.3":
   version: 2.2.3
   resolution: "json5@npm:2.2.3"
@@ -8874,7 +8576,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.2, micromatch@npm:^4.0.8":
+"micromatch@npm:^4.0.2":
   version: 4.0.8
   resolution: "micromatch@npm:4.0.8"
   dependencies:
@@ -8962,7 +8664,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^3.0.4, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2, minimatch@npm:^3.1.5":
+"minimatch@npm:^3.1.1, minimatch@npm:^3.1.2, minimatch@npm:^3.1.5":
   version: 3.1.5
   resolution: "minimatch@npm:3.1.5"
   dependencies:
@@ -8971,7 +8673,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.2.0, minimist@npm:^1.2.5, minimist@npm:^1.2.6, minimist@npm:^1.2.8":
+"minimist@npm:^1.2.5, minimist@npm:^1.2.6, minimist@npm:^1.2.8":
   version: 1.2.8
   resolution: "minimist@npm:1.2.8"
   checksum: 10c0/19d3fcdca050087b84c2029841a093691a91259a47def2f18222f41e7645a0b7c44ef4b40e88a1e58a40c84d2ef0ee6047c55594d298146d0eb3f6b737c20ce6
@@ -9394,7 +9096,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.assign@npm:^4.1.2, object.assign@npm:^4.1.4, object.assign@npm:^4.1.7":
+"object.assign@npm:^4.1.4, object.assign@npm:^4.1.7":
   version: 4.1.7
   resolution: "object.assign@npm:4.1.7"
   dependencies:
@@ -9408,7 +9110,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.entries@npm:^1.1.5, object.entries@npm:^1.1.9":
+"object.entries@npm:^1.1.9":
   version: 1.1.9
   resolution: "object.entries@npm:1.1.9"
   dependencies:
@@ -9432,17 +9134,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.groupby@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "object.groupby@npm:1.0.3"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.2"
-  checksum: 10c0/60d0455c85c736fbfeda0217d1a77525956f76f7b2495edeca9e9bbf8168a45783199e77b894d30638837c654d0cc410e0e02cbfcf445bc8de71c3da1ede6a9c
-  languageName: node
-  linkType: hard
-
 "object.values@npm:^1.1.6, object.values@npm:^1.2.1":
   version: 1.2.1
   resolution: "object.values@npm:1.2.1"
@@ -9781,7 +9472,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomatch@npm:^4.0.2, picomatch@npm:^4.0.3, picomatch@npm:^4.0.4":
+"picomatch@npm:^4.0.3, picomatch@npm:^4.0.4":
   version: 4.0.4
   resolution: "picomatch@npm:4.0.4"
   checksum: 10c0/e2c6023372cc7b5764719a5ffb9da0f8e781212fa7ca4bd0562db929df8e117460f00dff3cb7509dacfc06b86de924b247f504d0ce1806a37fac4633081466b0
@@ -10299,6 +9990,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier@npm:^3.6.2":
+  version: 3.8.3
+  resolution: "prettier@npm:3.8.3"
+  bin:
+    prettier: bin/prettier.cjs
+  checksum: 10c0/754816fd7593eb80f6376d7476d463e832c38a12f32775a82683adb6e35b772b1f484d65f19401507b983a8c8a7cd5a4a9f12006bd56491e8f35503473f77473
+  languageName: node
+  linkType: hard
+
 "prismjs@npm:^1.30.0":
   version: 1.30.0
   resolution: "prismjs@npm:1.30.0"
@@ -10897,13 +10597,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexpp@npm:^3.0.0":
-  version: 3.2.0
-  resolution: "regexpp@npm:3.2.0"
-  checksum: 10c0/d1da82385c8754a1681416b90b9cca0e21b4a2babef159099b88f640637d789c69011d0bc94705dacab85b81133e929d027d85210e8b8b03f8035164dbc14710
-  languageName: node
-  linkType: hard
-
 "regexpu-core@npm:^6.3.1":
   version: 6.4.0
   resolution: "regexpu-core@npm:6.4.0"
@@ -11081,13 +10774,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve-pkg-maps@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "resolve-pkg-maps@npm:1.0.0"
-  checksum: 10c0/fb8f7bbe2ca281a73b7ef423a1cbc786fb244bd7a95cbe5c3fba25b27d327150beca8ba02f622baea65919a57e061eb5005204daa5f93ed590d9b77463a567ab
-  languageName: node
-  linkType: hard
-
 "resolve-protobuf-schema@npm:^2.1.0":
   version: 2.1.0
   resolution: "resolve-protobuf-schema@npm:2.1.0"
@@ -11104,7 +10790,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.0.0, resolve@npm:^1.1.10, resolve@npm:^1.1.5, resolve@npm:^1.1.6, resolve@npm:^1.10.0, resolve@npm:^1.10.1, resolve@npm:^1.20.0, resolve@npm:^1.22.11":
+"resolve@npm:^1.0.0, resolve@npm:^1.1.10, resolve@npm:^1.1.5, resolve@npm:^1.1.6, resolve@npm:^1.10.0, resolve@npm:^1.20.0, resolve@npm:^1.22.11":
   version: 1.22.12
   resolution: "resolve@npm:1.22.12"
   dependencies:
@@ -11118,7 +10804,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^2.0.0-next.5, resolve@npm:^2.0.0-next.6":
+"resolve@npm:^2.0.0-next.5":
   version: 2.0.0-next.6
   resolution: "resolve@npm:2.0.0-next.6"
   dependencies:
@@ -11141,7 +10827,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.0.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.1.10#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.1.5#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.1.6#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.11#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.0.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.1.10#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.1.5#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.1.6#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.11#optional!builtin<compat/resolve>":
   version: 1.22.12
   resolution: "resolve@patch:resolve@npm%3A1.22.12#optional!builtin<compat/resolve>::version=1.22.12&hash=c3c19d"
   dependencies:
@@ -11155,7 +10841,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^2.0.0-next.5#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^2.0.0-next.6#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^2.0.0-next.5#optional!builtin<compat/resolve>":
   version: 2.0.0-next.6
   resolution: "resolve@patch:resolve@npm%3A2.0.0-next.6#optional!builtin<compat/resolve>::version=2.0.0-next.6&hash=c3c19d"
   dependencies:
@@ -11336,7 +11022,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^6.1.0, semver@npm:^6.3.0, semver@npm:^6.3.1":
+"semver@npm:^6.3.1":
   version: 6.3.1
   resolution: "semver@npm:6.3.1"
   bin:
@@ -11345,7 +11031,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.3.5, semver@npm:^7.5.4, semver@npm:^7.6.3":
+"semver@npm:^7.3.5, semver@npm:^7.6.3":
   version: 7.7.4
   resolution: "semver@npm:7.7.4"
   bin:
@@ -12023,13 +11709,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-bom@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "strip-bom@npm:3.0.0"
-  checksum: 10c0/51201f50e021ef16672593d7434ca239441b7b760e905d9f33df6e4f3954ff54ec0e0a06f100d028af0982d6f25c35cd5cda2ce34eaebccd0250b8befb90d8f1
-  languageName: node
-  linkType: hard
-
 "strip-json-comments@npm:^3.1.1":
   version: 3.1.1
   resolution: "strip-json-comments@npm:3.1.1"
@@ -12477,17 +12156,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-declaration-location@npm:^1.0.6":
-  version: 1.0.7
-  resolution: "ts-declaration-location@npm:1.0.7"
-  dependencies:
-    picomatch: "npm:^4.0.2"
-  peerDependencies:
-    typescript: ">=4.0.0"
-  checksum: 10c0/b579b7630907052cc174b051dffdb169424824d887d8fb5abdc61e7ab0eede348c2b71c998727b9e4b314c0436f5003a15bb7eedb1c851afe96e12499f159630
-  languageName: node
-  linkType: hard
-
 "ts-mixer@npm:^6.0.3, ts-mixer@npm:^6.0.4":
   version: 6.0.4
   resolution: "ts-mixer@npm:6.0.4"
@@ -12512,18 +12180,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tsconfig-paths@npm:^3.15.0":
-  version: 3.15.0
-  resolution: "tsconfig-paths@npm:3.15.0"
-  dependencies:
-    "@types/json5": "npm:^0.0.29"
-    json5: "npm:^1.0.2"
-    minimist: "npm:^1.2.6"
-    strip-bom: "npm:^3.0.0"
-  checksum: 10c0/5b4f301a2b7a3766a986baf8fc0e177eb80bdba6e396792ff92dc23b5bca8bb279fc96517dcaaef63a3b49bebc6c4c833653ec58155780bc906bdbcf7dda0ef5
-  languageName: node
-  linkType: hard
-
 "tslib@npm:^1.9.3":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
@@ -13109,11 +12765,11 @@ __metadata:
     "@atlaskit/pragmatic-drag-and-drop": "npm:^1.7.10"
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "npm:^1.1.0"
     "@babel/core": "npm:^7.28.5"
-    "@babel/eslint-parser": "npm:^7.28.5"
     "@babel/plugin-transform-runtime": "npm:^7.28.5"
     "@babel/preset-env": "npm:^7.28.5"
     "@babel/preset-react": "npm:^7.28.5"
     "@babel/runtime": "npm:^7.28.4"
+    "@eslint/js": "npm:^9.39.1"
     "@popperjs/core": "npm:^2.11.6"
     "@rails/actiontext": "npm:^8.1.100"
     "@rails/ujs": "npm:^7.1.3-4"
@@ -13138,24 +12794,19 @@ __metadata:
     debug: "npm:^4.4.3"
     diff2html: "npm:^3.4.22"
     eslint: "npm:^9.39.1"
-    eslint-config-airbnb: "npm:^19.0.2"
-    eslint-config-react: "npm:^1.1.7"
-    eslint-config-standard: "npm:^17.0.0"
-    eslint-plugin-import: "npm:^2.20.2"
-    eslint-plugin-jsx-a11y: "npm:^6.2.3"
-    eslint-plugin-n: "npm:^17.23.1"
-    eslint-plugin-node: "npm:^11.1.0"
-    eslint-plugin-promise: "npm:^7.1.0"
-    eslint-plugin-react: "npm:^7.20.0"
+    eslint-config-prettier: "npm:^10.1.8"
+    eslint-plugin-jsx-a11y: "npm:^6.10.2"
+    eslint-plugin-react: "npm:^7.37.5"
     eslint-plugin-react-hooks: "npm:^7.0.1"
-    eslint-webpack-plugin: "npm:^6.0.0"
     expose-loader: "npm:^5.0.0"
+    globals: "npm:^16.4.0"
     ify-loader: "npm:^1.1.0"
     immutability-helper: "npm:^3.0.2"
     jquery: "npm:^3.6.1"
     mini-css-extract-plugin: "npm:^2.5.3"
     plotly.js: "npm:^3.3.0"
     pnp-webpack-plugin: "npm:1"
+    prettier: "npm:^3.6.2"
     prop-types: "npm:^15.7.2"
     qs: "npm:^6.9.4"
     react: "npm:^19.2.0"
@@ -13175,7 +12826,7 @@ __metadata:
     webpack-cli: "npm:^7.0.2"
     webpack-dev-server: "npm:^5.0.4"
     webpack-merge: "npm:^6.0.1"
-    xdsmjs: "npm:2.0.1-rc.0"
+    xdsmjs: "npm:^2.0.0"
   languageName: unknown
   linkType: soft
 
@@ -13338,15 +12989,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"xdsmjs@npm:2.0.1-rc.0":
-  version: 2.0.1-rc.0
-  resolution: "xdsmjs@npm:2.0.1-rc.0"
+"xdsmjs@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "xdsmjs@npm:2.0.1"
   dependencies:
     d3-color: "npm:^3.1.0"
     d3-fetch: "npm:^3.0.1"
     d3-selection: "npm:^3.0.0"
     d3-transition: "npm:^3.0.1"
-  checksum: 10c0/e112a986316d42feeee4167fa9f84c39b1b13b6b6c28d37f428c0af829e00948bb73c8b60b5b747461dea50221f9e36fb3dd78b2d835dd5d77e5774d0db531b4
+  checksum: 10c0/c6e4bc8fc8b32259c2a17c96b50d19a81e5ad9598c7eb7384722958af99dad829c47f4cdcc3410b1a9afe8ba37f27f46baf2204f62f1a94ad59f629b11406cc8
   languageName: node
   linkType: hard