New project page components

.eslintignore

@@ -1,4 +1,5 @@
 /public/lib/
-/public/js/
+/public/js/*
+!/public/js/surfacenets-worker.js
 dist/
 /view/atlasmaker/src/tools/render3D/three.js*

.eslintrc.js

@@ -2,5 +2,15 @@ module.exports = {
   'env': {
     'mocha': true
   },
-  'extends': ['naat']
+  'extends': ['naat', 'plugin:vue/vue3-strongly-recommended'],
+  'rules': { 'vue/multi-word-component-names': 'off' },
+  'overrides': [
+    {
+      files: ['*.vue'],
+      rules: {
+        // 300 lines limit seems to short for *.vue files
+        'max-lines': 'off'
+      }
+    }
+  ]
 };

.gitignore

@@ -15,14 +15,8 @@ public/_img-all/
 public/.DS_Store
 public/data
 public/doc2/*
-public/js/
-public/js/ask-for-login-page.js
-public/js/index-page.js
-public/js/mri-page.js
-public/js/project-new-page.js
-public/js/project-page.js
-public/js/project-settings-page.js
-public/js/user-page.js
+/public/js/*
+!/public/js/surfacenets-worker.js
 public/lib/.DS_Store
 public/lib/atlasmaker-tools
 public/lib/atlasmaker.js

.vscode/settings.json

@@ -2,8 +2,14 @@
   "[javascript]": {
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": [
-      "source.formatDocument", // used by rohit-gohri.format-code-action
-      "source.fixAll.eslint" // used by dbaeumer.vscode-eslint
+      // "source.formatDocument", // problem with switch case multi lines comment indents
+      "source.fixAll.eslint"
     ]
+  },
+  "[vue]": {
+    "editor.formatOnSave": false,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
   }
-}
+}

app.js

@@ -4,21 +4,21 @@
     Atlas Maker Server
     Roberto Toro, 25 July 2014
 */
-const nwl = require('neuroweblab');
 const fs = require('fs');
+const path = require('path');
+const https = require('https');
+const http = require('http');
+const nwl = require('neuroweblab');
 const express = require('express');
 const compression = require('compression');
-const path = require('path');
 const favicon = require('serve-favicon');
 const logger = require('morgan');
 const tracer = require('tracer').console({ format: '[{{file}}:{{line}}]  {{message}}' });
 const cookieParser = require('cookie-parser');
 const bodyParser = require('body-parser');
 const mustacheExpress = require('mustache-express');
 const Config = JSON.parse(fs.readFileSync('./cfg.json'));
-const https = require('https');
-const http = require('http');
-
+const { Server: HocuspocusServer } = require('@hocuspocus/server');
 global.authTokenMiddleware = nwl.authTokenMiddleware;
 
 const AtlasmakerServer = require('./controller/atlasmakerServer/atlasmakerServer');
@@ -129,7 +129,7 @@ const start = async function () {
   // Configure server and web socket
   //========================================================================================
 
-  const server = http.createServer(app).listen(3001, () => { console.log('Listening http on port 3001'); });
+  const server = http.createServer(app).listen(Config.app_port, () => { console.log(`Listening http on port ${Config.app_port}`); });
   const atlasmakerServer = new AtlasmakerServer(db);
   atlasmakerServer.dataDirectory = dirname + '/public';
 
@@ -146,15 +146,37 @@ const start = async function () {
     atlasmakerServer.server = http.createServer(app);
   }
 
-  atlasmakerServer.server.listen(8080, () => {
+  atlasmakerServer.server.listen(Config.ws_port, () => {
     if (Config.secure) {
-      console.log('Listening wss on port 8080');
+      console.log(`Listening wss on port ${Config.ws_port}`);
     } else {
-      console.log('Listening ws on port 8080');
+      console.log(`Listening ws on port ${Config.ws_port}`);
     }
     atlasmakerServer.initSocketConnection();
   });
 
+  //========================================================================================
+  // Configure Yjs backend for multiuser edition
+  //========================================================================================
+
+  const hocuspocusServer = HocuspocusServer.configure({
+    port: Config.crdt_backend_port,
+    onDisconnect(data) {
+      data.document.getArray('files').toJSON()
+        .forEach((json) => {
+          delete json._id;
+          db.get('mri').update({
+            source: json.source,
+            backup: { $exists: false }
+          }, json
+          , { replaceOne: true })
+            .catch((er) => console.log(er));
+        });
+    }
+  });
+
+  hocuspocusServer.listen();
+
   //========================================================================================
   // Setup routes
   //========================================================================================
@@ -192,7 +214,7 @@ const start = async function () {
   //   });
   // });
 
-  return { app, server, atlasmakerServer };
+  return { app, server, atlasmakerServer, hocuspocusServer };
 };
 
 module.exports = { start };

cfg.json.example

@@ -1,6 +1,10 @@
 {
     "hostname": "http://localhost:3001",
-    "wshostname": "localhost:8080",
+    "wshostname": "ws://localhost:8080",
+    "app_port": 3001,
+    "ws_port": 8080,
+    "crdt_backend_url": "ws://localhost:8081",
+    "crdt_backend_port": "8081",
     "secure": false,
     "ssl_key": "./key.pem",
     "ssl_cert": "./cert.pem",

controller/atlasmakerServer/atlasmakerServer.js

@@ -1,15 +1,23 @@
 /* eslint-disable max-lines */
 const fs = require('fs');
 const os = require('os');
+const path = require('path');
 const zlib = require('zlib');
-const tracer = require('tracer').console({ format: '[{{file}}:{{line}}]  {{message}}' });
+
+const AsyncLock = require('async-lock');
+const createDOMPurify = require('dompurify');
+const jsonpatch = require('fast-json-patch');
 const jpeg = require('jpeg-js'); // jpeg-js library: https://github.com/eugeneware/jpeg-js
-const merge = require('merge');
-const path = require('path');
+const { JSDOM } = require('jsdom');
 const keypress = require('keypress');
+const merge = require('merge');
+const tracer = require('tracer').console({ format: '[{{file}}:{{line}}]  {{message}}' });
+const WebSocket = require('ws');
+
+const notifier = require('../../notifier');
 
 const amri = require('./atlasmaker-mri');
-const AsyncLock = require('async-lock');
+
 const lock = new AsyncLock();
 
 // Get whitelist and blacklist
@@ -19,12 +27,9 @@ const whitelist = JSON.parse(fs.readFileSync(path.join(__dirname, 'whitelist.jso
 const blacklist = JSON.parse(fs.readFileSync(path.join(__dirname, 'blacklist.json')));
 
 // var http = require('http');
-const WebSocket = require('ws');
 const WebSocketServer = WebSocket.Server;
 let websocketserver;
 
-const createDOMPurify = require('dompurify');
-const { JSDOM } = require('jsdom');
 const { window } = (new JSDOM('', {
   features: {
     FetchExternalResources: false, // disables resource loading over HTTP / filesystem
@@ -33,7 +38,6 @@ const { window } = (new JSDOM('', {
 }));
 const DOMPurify = createDOMPurify(window);
 
-const jsonpatch = require('fast-json-patch');
 
 const bufferTag = function (str, sz) {
   const buf = Buffer.alloc(sz).fill(32);
@@ -274,6 +278,7 @@ data.vox_offset: ${me.Brains[i].data.vox_offset}
       }
     },
     removeAtlasAtIndex: function (iAtlas) {
+      // can throw an error if me.Atlases[iAtlas] is undefined
       console.log(`INFO: Removing atlas ${me.Atlases[iAtlas].filename}`);
       clearInterval(me.Atlases[iAtlas].timer);
       delete me.Atlases[iAtlas];
@@ -322,12 +327,12 @@ data.vox_offset: ${me.Brains[i].data.vox_offset}
       try {
         await me._saveAtlasVoxelData(atlas);
       } catch (err) {
-        throw new Error('Can\'t save atlas voxel data', err);
+        console.error('Can\'t save atlas voxel data', err);
       }
       try {
         await me._saveAtlasVectorialData(atlas);
       } catch (err) {
-        throw new Error('Can\'t save atlas vectorial data', err);
+        console.error('Can\'t save atlas vectorial data', err);
       }
     },
 
@@ -351,7 +356,8 @@ data.vox_offset: ${me.Brains[i].data.vox_offset}
         try {
           mri = await db.get('mri').findOne({ source: atlas.source, backup: { $exists: 0 } }, { _id: 0 });
         } catch (err) {
-          throw new Error('Can\'t find entry for atlas voxel data in DB', err);
+          console.error(err);
+          throw new Error('Can\'t find entry for atlas voxel data in DB');
         }
 
         if (mri === null) {
@@ -1126,6 +1132,11 @@ data.vox_offset: ${me.Brains[i].data.vox_offset}
       const sourceUS = me.getUserFromUserId(data.uid);
 
       // get brainPath from User object
+      if (!sourceUS.User) {
+        console.error('sourceUS.User object still not created, do not try to get brain slice');
+
+        return;
+      }
       const brainPath = sourceUS.User.dirname + sourceUS.User.mri;
 
       // update User object
@@ -1139,7 +1150,8 @@ data.vox_offset: ${me.Brains[i].data.vox_offset}
       me.getBrainAtPath(brainPath)
         .then(function (theData) {
           me.sendSliceToUser(theData, view, slice, userSocket);
-        });
+        })
+        .catch((err) => console.error(err));
     },
     receiveRequestSlice2Message: function (data, userSocket) {
       const { view } = data; // user view
@@ -1337,7 +1349,8 @@ data.vox_offset: ${me.Brains[i].data.vox_offset}
       try {
         await Promise.all(results);
       } catch (err) {
-        throw new Error('Can\'t unload atlases', err);
+        console.error('Can\'t unload atlases');
+        console.error(err);
       }
     },
     _sendAtlasVoxelDataToUser: function (atlasdata, userSocket, flagCompress) {
@@ -1396,7 +1409,7 @@ data.vox_offset: ${me.Brains[i].data.vox_offset}
      * @returns {Object} An atlas (mri structure)
      */
     // eslint-disable-next-line max-statements
-    loadAtlas: async function loadAtlas(User) {
+    loadAtlas: async function loadAtlas (User) {
       const mriPath = path.join(me.dataDirectory, User.dirname, User.atlasFilename);
 
       if (typeof User.dirname === 'undefined') {
@@ -1619,9 +1632,9 @@ data.vox_offset: ${me.Brains[i].data.vox_offset}
                 me.sendAtlasToUser(atlas, userSocket, true);
                 sourceUS.User.isMRILoaded = true;
               })
-              .catch((err) => console.log(new Error('ERROR: Unable to load atlas', err)));
+              .catch((err) => console.error('ERROR: Unable to load atlas', err));
           }
-        } else {
+        } else if (User) {
           // receive a specific field of the User data object from the user
           /** @todo If the atlas/mri for the client failed to be sent, `User` is undefined */
           const changes = JSON.parse(data.description);
@@ -1995,7 +2008,8 @@ data.vox_offset: ${me.Brains[i].data.vox_offset}
           try {
             await me.unloadAtlas(sourceUS.User.dirname, sourceUS.User.atlasFilename, sourceUS.specimenName);
           } catch (err) {
-            throw new Error('Can\'t unload atlas', err);
+            console.error('Can\'t unload atlas');
+            console.error(err);
           }
         }
       } else {
@@ -2047,7 +2061,8 @@ data.vox_offset: ${me.Brains[i].data.vox_offset}
         try {
           await me._disconnectUser({ ws });
         } catch (err) {
-          throw new Error('Can\'t disconnect user', err);
+          console.error('Can\'t disconnect user');
+          console.error(err);
         }
       });
     },
@@ -2108,7 +2123,6 @@ free memory: ${os.freemem()}
 };
 
 // Notifications
-const notifier = require('../../notifier');
 notifier.on('saveAllAtlases', () => {
   atlasmakerServer.saveAllAtlases();
 });

controller/dataSlices/dataSlices.js

@@ -1,9 +1,9 @@
 /* eslint-disable max-lines */
 console.log('dataSlices.js');
 const dateFormat = require('dateformat');
+const { AccessLevel } = require('neuroweblab');
 
 const { ForbiddenAccessError } = require('../../errors');
-const { AccessLevel } = require('neuroweblab');
 const BrainboxAccessControlService = require('../../services/BrainboxAccessControlService');
 
 /**
@@ -15,7 +15,7 @@ const BrainboxAccessControlService = require('../../services/BrainboxAccessContr
  * @param {integer} length Number of files to include in the slice
  * @returns {Object} user files slice
  */
-const getUserFilesSlice = function getUserFilesSlice(req, requestedUser, start, length) {
+const getUserFilesSlice = function getUserFilesSlice (req, requestedUser, start, length) {
   console.log('getUserFilesSlice. Start, end:', start, length);
   let loggedUser = 'anonymous';
   if (req.isAuthenticated()) {
@@ -81,7 +81,7 @@ const getUserFilesSlice = function getUserFilesSlice(req, requestedUser, start,
  * @param {integer} length Number of files to include in the slice
  * @returns {Object} user atlas slice
  */
-const getUserAtlasSlice = function getUserAtlasSlice(req, requestedUser, start, length) {
+const getUserAtlasSlice = function getUserAtlasSlice (req, requestedUser, start, length) {
   let loggedUser = 'anonymous';
   if (req.isAuthenticated()) {
     loggedUser = req.user.username;
@@ -146,7 +146,7 @@ const getUserAtlasSlice = function getUserAtlasSlice(req, requestedUser, start,
  * @param {integer} length Number of files to include in the slice
  * @returns {Object} user projects slice
  */
-const getUserProjectsSlice = function getUserProjectsSlice(req, requestedUser, start, length) {
+const getUserProjectsSlice = function getUserProjectsSlice (req, requestedUser, start, length) {
   let loggedUser = 'anonymous';
   if (req.isAuthenticated()) {
     loggedUser = req.user.username;
@@ -218,7 +218,7 @@ const getProjectFilesSlice = async (req, projShortname, start, length, namesFlag
   if (!project) {
     console.log('project is empty');
 
-    return;
+    return [];
   }
 
   // check access
@@ -281,7 +281,7 @@ const getProjectFilesSlice = async (req, projShortname, start, length, namesFlag
  * @param {integer} length Number of files to include in the slice
  * @returns {Object} files slice
  */
-const getFilesSlice = function getFilesSlice(req, start, length) {
+const getFilesSlice = function getFilesSlice (req, start, length) {
   let loggedUser = 'anonymous';
   if (req.isAuthenticated()) {
     loggedUser = req.user.username;
@@ -332,7 +332,7 @@ const getFilesSlice = function getFilesSlice(req, start, length) {
  * @returns {Object} project slice
  */
 // eslint-disable-next-line max-statements
-const getProjectsSlice = async function getProjectsSlice(req, start, length) {
+const getProjectsSlice = async function getProjectsSlice (req, start, length) {
   let loggedUser = 'anonymous';
   if (req.isAuthenticated()) {
     loggedUser = req.user.username;