Persist and sync across clients text annotations

app/app.js

@@ -10,7 +10,9 @@ const https = require('https');
 const http = require('http');
 const morgan = require('morgan');
 const nwl = require('neuroweblab');
+const { reduce, assign } = require('lodash');
 const microdrawWebsocketServer = require('./controller/microdrawWebsocketServer/microdrawWebsocketServer.js');
+const { Server: HocuspocusServer } = require('@hocuspocus/server');
 const routes = require('./routes/routes');
 let port;
 let server;
@@ -96,7 +98,6 @@ const start = async function () {
  microdrawWebsocketServer.initSocketConnection();
  });
 
-
  // CORS
  app.use(function (req, res, next) {
  // Website you wish to allow to connect
@@ -156,12 +157,40 @@ const start = async function () {
  });
  global.authTokenMiddleware = nwl.authTokenMiddleware;
 
+
+ // CRDT backend
+
+ const hocuspocusServer = HocuspocusServer.configure({
+ port: 8081,
+ async onDisconnect(data) {
+ const project = await app.db.queryProject({shortname: data.documentName});
+ const vectorialAnnotations = project.annotations.list.filter((annotation) => annotation.type === 'vectorial');
+ const textAnnotations = project.annotations.list.filter((annotation) => annotation.type === 'text');
+ const files = data.document.getArray('files').toJSON();
+ const newTextAnnotations = textAnnotations.map((annotation) => {
+ const {name} = annotation;
+ const valueByFile = reduce(files.map((file) => ({ [file.source]: file[name] })), (result, obj) => assign(result, obj), {});
+
+ return {
+ ...annotation,
+ values: valueByFile
+ };
+ });
+ project.annotations.list = [...newTextAnnotations, ...vectorialAnnotations];
+ app.db.updateProject(project);
+ }
+ }
+ );
+
+ hocuspocusServer.listen();
+
+
  /* setup GUI routes */
  routes(app);
 
 
  // catch 404 and forward to error handler
- app.use(function (req, res, next) {
+ app.use(function (req) {
  console.log('ERROR: File not found', req.url);
  // var err = new Error('Not Found'); //, req);
  // err.status = 404;

app/views/scripts/components/ProjectPage.vue

@@ -9,8 +9,9 @@
  <TextAnnotations
  :extract-keys="extractTextKeys"
  :link-prefix="linkPrefix"
- :files="files"
+ :files="store.files"
  :selected="selectedFileIndex"
+ @value-change="valueChange"
  @select-file="selectFile"
  />
  <VolumeAnnotations
@@ -40,9 +41,9 @@
 
  <script setup>
  import { forEach, get, set } from "lodash";
- import { initSyncedStore, waitForSync } from "../store/synced";
  import useVisualization from "../store/visualization";
- import { enableVueBindings } from "@syncedstore/core";
+ import { HocuspocusProvider } from "@hocuspocus/provider";
+ import { syncedStore, getYjsDoc, enableVueBindings } from "@syncedstore/core";
  import Tools from "./Tools.vue";
  import {
  Editor,
@@ -53,12 +54,20 @@
  } from "nwl-components";
  import * as Vue from "vue";
  
- const { store, webrtcProvider, doc } = initSyncedStore(projectInfo.shortname);
- const { baseURL } = Vue.inject('config');
- 
  // make SyncedStore use Vuejs internally
  enableVueBindings(Vue);
- 
+
+ const store = syncedStore({ files: [], fragment: "xml" });
+ const doc = getYjsDoc(store);
+
+ const crdtProvider = new HocuspocusProvider({
+ url: "ws://0.0.0.0:8081", // FIXME
+ name: projectInfo.shortname,
+ document: doc
+ });
+
+ const { baseURL } = Vue.inject('config');
+ 
  const props = defineProps({
  project: {
  type: Object,
@@ -71,12 +80,7 @@
  });
  
  const linkPrefix = `${baseURL}/project/${projectInfo.shortname}?source=`
- const files = Vue.ref(projectInfo.files.list);
  const selectedFileIndex = projectInfo.files.list.findIndex(file => file.source === props.selectedFile);
- doc.getArray("files").observe(() => {
- files.value.splice(0, files.value.length);
- files.value.push(...store.files);
- });
 
  const textAnnotations = projectInfo.annotations.list.filter(anno => anno.type !== 'vectorial');
  const volumeAnnotations = projectInfo.annotations.list.filter(anno => anno.type === 'vectorial');
@@ -102,6 +106,10 @@
  const keys = new Map();
  keys.set("Name", "name");
  keys.set("File", "source");
+ forEach(textAnnotations, (annotation) => {
+ if (annotation.display)
+ keys.set(annotation.name, `${annotation.name}`);
+ });
  return keys;
  };
  
@@ -113,19 +121,14 @@
  return keys;
  };
  
- const syncMicrodraw = () => {
- console.log('sync microdraw')
- }
- 
  const valueChange = (content, index, selector) => {
  const sel =
  typeof selector === "string" ? [index, selector] : [index, ...selector];
- set(store.files, sel, content);
- syncMicrodraw();
+ set(store.files, sel, content);
  };
 
  const selectFile = async (file) => {
- window.location = `${linkPrefix}${file.source}`
+ // No-op. We'd rather let user click on a link.
  }
  
  const setupKeyDownListeners = () => {
@@ -137,27 +140,23 @@
  return;
  }
  if (selectedTr.previousElementSibling) {
- selectedTr.previousElementSibling.click();
+ selectedTr.previousElementSibling.querySelector('a[href]').click();
  }
  break;
  case "ArrowDown":
  if (!selectedTr) {
  return;
  }
  if (selectedTr.nextElementSibling) {
- selectedTr.nextElementSibling.click();
+ selectedTr.nextElementSibling.querySelector('a[href]').click();
  }
  break;
  default:
  break;
  }
  });
  };
- 
- const delay = (ms) => {
- return new Promise((resolve) => setTimeout(resolve, ms));
- };
- 
+ 
  const handleLayoutChange = () => {
  Microdraw.resizeAnnotationOverlay();
  };
@@ -187,7 +186,18 @@
  
  Vue.onMounted(async () => {
  setupKeyDownListeners();
- await waitForSync(webrtcProvider);
+ crdtProvider.on('synced', () => {
+ console.log('on synced');
+ if (store.files.length === 0) {
+ store.files.push(...projectInfo.files.list);
+ forEach(textAnnotations, (annotation) => {
+ forEach(annotation.values, (value, source) => {
+ const file = store.files.find(file => file.source === source);
+ if (file) file[annotation.name] = value;
+ });
+ });
+ }
+ });
  await initVisualization();
  window.addEventListener('resize', handleResize);
  });

package.json

@@ -15,7 +15,9 @@
  "dev-pages": "webpack --mode development --config webpack.pages.config.js && cp app/views/scripts/dist/*-page.js app/public/js/pages/"
  },
  "dependencies": {
- "@syncedstore/core": "^0.4.1",
+ "@hocuspocus/provider": "^2.2.3",
+ "@hocuspocus/server": "^2.2.3",
+ "@syncedstore/core": "^0.4.3",
  "bcrypt": "^3.0.8",
  "body-parser": "^1.18.3",
  "cross-env": "^7.0.3",