WIP

neuroanatomy · Aug 7, 2023 · 727ca66 · 727ca66
1 parent 9eee4e2
commit 727ca66
Show file tree

Hide file tree

Showing 11 changed files with 180 additions and 56 deletions.
diff --git a/app/app.js b/app/app.js
@@ -179,7 +179,8 @@ const start = async function () {
  };
 
  const hocuspocusServer = HocuspocusServer.configure({
- port: 8081,
+ address: Config.crdt_backend_host,
+ port: Config.crdt_backend_port,
  debounce: 3000,
  onStoreDocument(data) {
  storeDocument(data);

diff --git a/app/controller/user/index.js b/app/controller/user/index.js
@@ -8,6 +8,7 @@ router.get('/json/:userName', controller.validator, controller.api_user);
 router.get('/json/:userName/files', controller.validator, controller.api_userFiles);
 router.get('/json/:userName/atlas', controller.validator, controller.api_userAtlas);
 router.get('/json/:userName/projects', controller.validator, controller.api_userProjects);
+router.post('/delete', controller.deleteProfile);
 router.get('/:userName', controller.validator, controller.user);
 
 module.exports = router;
diff --git a/app/controller/user/user.controller.js b/app/controller/user/user.controller.js
@@ -31,6 +31,11 @@ const user = function (req, res) {
  req.appConfig.db.queryUser({username})
  .then((json) => {
  if (json) {
+ if (json.disabled) {
+ res.status(404);
+
+ return res.render('disabledUser');
+ }
  const context = {
  username, // json.name,
  // nickname: json.nickname,
@@ -187,12 +192,28 @@ const api_userProjects = function (req, res) {
  });
 };
 
+const deleteProfile = async function(req, res) {
+ const loggedUser = req.user;
+ if (!loggedUser) {
+ res.status(401);
+ }
+ try {
+ const userInfo = await req.appConfig.db.queryUser({username: loggedUser.username});
+ console.log({userInfo});
+ await req.appConfig.db.updateUser({ ...userInfo, disabled: true });
+ res.redirect('/logout');
+ } catch(err) {
+ console.log(err);
+ }
+};
+
 module.exports = {
  validator,
  api_user,
  api_userAll,
  api_userFiles,
  api_userAtlas,
  api_userProjects,
+ deleteProfile,
  user
 };
diff --git a/app/views/data.mustache b/app/views/data.mustache
@@ -3,57 +3,17 @@
 
 <head>
  {{> partials/header }}
- <link rel="stylesheet" href="css/data-style.css" type="text/css" />
+ <link rel="stylesheet" href="/css/ui.css" type="text/css" />
+ <link rel="stylesheet" href="/css/data-style.css" type="text/css" />
+ <link rel="stylesheet" href="/css/project-style.css" type="text/css" />
  <link href='https://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
 </head>
 
 <body>
 
-<!-- Header (fixed height) -->
-<div id="header">
- {{> partials/menu }}
+<div id="app"></div>
 
- <!-- Small left-top logo -->
- <div style="display:inline-block;margin:10px">
- <a href='/' style="text-decoration:none">
- <img style='height:28px;vertical-align:middle' src='/img/microdraw-white.svg'/>
- </a><span id="fontLogo">
- <a href='/' style="font-family: Roboto, sans-serif; font-size: 28px; font-weight:100; text-decoration:none;vertical-align:middle">MicroDraw</a>
- </span>
- </div>
-</div>
-
-<div id="content" style="width:100%;height:calc( 100% - 48px );background:white;position:relative"></div>
-
-<script>
-function loadScript (path, testScriptPresent) {
- return new Promise((resolve, reject) => {
- if(testScriptPresent && testScriptPresent()) {
- resolve();
- }
- const s = document.createElement("script");
- s.src = path;
- s.onload=resolve;
- s.onerror=reject;
- document.body.appendChild(s);
- });
-}
-
-async function attach () {
- const res = await fetch("/microdraw");
- const txt = await res.text();
- const parser = new DOMParser();
- const elem = parser.parseFromString(txt, 'text/html').documentElement;
- const shadow = document.querySelector("#content").attachShadow({mode: 'open'});
- shadow.appendChild(elem);
- loadScript("/js/microdraw.js")
- .then(() => {
- Microdraw.init(shadow);
- });
-}
-attach();
-</script>
+<script src="/js/pages/data-page.js"></script>
 
 </body>
-
 </html>
diff --git a/app/views/disabledUser.mustache b/app/views/disabledUser.mustache
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ {{> partials/header }}
+ <link href='https://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
+</head>
+
+<body>
+
+<!-- Header (fixed height) -->
+<div id="header">
+ <!-- Small left-top logo -->
+ <div style="display:inline-block;margin:10px">
+ <a href='/' style="text-decoration:none">
+ <img style='height:28px;vertical-align:middle' src='/img/microdraw-white.svg'/>
+ </a><span id="fontLogo">
+ <a href='/' style="font-family: Roboto, sans-serif; font-size: 28px; font-weight:100; text-decoration:none;vertical-align:middle">MicroDraw</a>
+ </span>
+ </div>
+</div>
+
+This user has removed his account. <a href="/">Back to the homepage</a>
+
+
+</body>
+
+</html>
diff --git a/app/views/scripts/components/Data.vue b/app/views/scripts/components/Data.vue
@@ -0,0 +1,96 @@
+<template>
+ <Header v-if="!fullscreen">
+ <span class="title">MicroDraw</span>
+ </Header>
+ <main :class="{ fullscreen }">
+ <OntologySelector
+ :ontology="ontology"
+ :open="displayOntology"
+ @on-close="displayOntology = false"
+ @label-click="handleOntologyLabelClick"
+ />
+ <Editor :title="title" :class="{reduced: !displayChat && !displayScript}" toolsMinHeight="300px">
+ <template v-slot:tools>
+ <Tools />
+ </template>
+ <template v-slot:content>
+ <div id="microdraw" style="width: 100%; height: 100%"></div>
+ </template>
+ </Editor>
+ </main>
+ </template>
+
+ <script setup>
+ import useVisualization from "../store/visualization";
+ import Tools from "./Tools.vue";
+ import {
+ Header,
+ Editor,
+ OntologySelector,
+ } from "nwl-components";
+ import * as Vue from "vue";
+ 
+ const { baseURL } = Vue.inject('config');
+ 
+ const {
+ title,
+ displayChat,
+ displayScript,
+ displayOntology,
+ currentLabel,
+ ontology,
+ currentSlice,
+ currentFile,
+ totalSlices,
+ fullscreen,
+ init: initVisualization,
+ } = useVisualization();
+ 
+ const handleResize = () => {
+ Microdraw.resizeAnnotationOverlay();
+ };
+ 
+ const toggleFullScreen = () => {
+ if (!document.fullscreenElement) {
+ document.documentElement.requestFullscreen();
+ } else if (document.exitFullscreen) {
+ document.exitFullscreen();
+ }
+ }
+ 
+ Vue.watch(fullscreen, toggleFullScreen);
+ 
+ const _findSelectedRegion = () => {
+ const {currentImage, region} = Microdraw;
+ const {Regions: regions} = Microdraw.ImageInfo[currentImage];
+ return regions.findIndex(reg => reg.uid === region.uid);
+ };
+ 
+ const handleOntologyLabelClick = (index) => {
+ Microdraw.currentLabelIndex = index;
+ displayOntology.value = false;
+ currentLabel.value = index;
+ const regionIndex = _findSelectedRegion();
+ if(regionIndex != null) {
+ const { region } = Microdraw;
+ if (region != null) {
+ Microdraw.changeRegionName(region, Microdraw.ontology.labels[index].name);
+ }
+ }
+ }
+ 
+ Vue.onMounted(async () => {
+ await initVisualization();
+ window.addEventListener('resize', handleResize);
+ });
+</script>
+<style scoped>
+.area {
+height: calc(100vh - 82px);
+width: 100vw;
+}
+.fullscreen .area {
+ height: 100vh;
+}
+
+</style>
diff --git a/app/views/scripts/components/UserPage.vue b/app/views/scripts/components/UserPage.vue
@@ -35,18 +35,18 @@
  </tbody>
  </Table>
  </Tab>
- <Tab title="Settings">
+ <Tab title="Settings" v-if="displaySettings">
  <form class="embed-preferences">
  <h3>Embed</h3>
  <p>Limit embedding of my contents to the following hosts (1 item by line):</p>
- <textarea placeholder="google.com" name="allowedHosts"></textarea>
+ <textarea placeholder="example.com" name="allowedHosts"></textarea>
  <div class="action-buttons">
  <button className="push-button" type="submit">Save</button>
  </div>
  </form>
  <h3>Account</h3>
  <dialog ref="removeAccountDialog" class="removeAccountDialog">
- <form action="#" method="POST">
+ <form action="/user/delete" method="POST">
  <p>
  Are you sure you want to delete your account?
  </p>
@@ -63,7 +63,7 @@
  </UserPage>
  </template>
  <script setup>
- import { ref, onMounted } from "vue";
+ import { ref, onMounted, computed } from "vue";
  import { UserPage, Tabs, Tab, Table } from "nwl-components";
  const projects = ref([]);
  const removeAccountDialog = ref(null);
@@ -78,6 +78,8 @@
  projects.value.push(...res.list);
  }
  };
+
+ const displaySettings = computed(() => loggedUser && props.user.username === loggedUser.username);
  
  onMounted(() => {
  fetchProjects();
@@ -140,5 +142,7 @@
 .embed-preferences textarea {
  height: 100px;
  width: 100%;
+ margin-bottom: 10px;
+ color: black;
 }
 </style>
diff --git a/app/views/scripts/src/data-page.js b/app/views/scripts/src/data-page.js
@@ -0,0 +1,12 @@
+/* global */
+
+import 'nwl-components/dist/style.css';
+import Data from '../components/Data.vue';
+import config from './nwl-components-config';
+import { createApp } from 'vue';
+
+
+const app = createApp(Data);
+app.provide('config', config);
+
+app.mount('#app');
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
  "multer": "^1.4.5-lts.1",
  "mustache-express": "latest",
  "neuroweblab": "github:neuroanatomy/neuroweblab",
- "nwl-components": "1.3.0",
+ "nwl-components": "1.3.3",
  "passport": "^0.4.0",
  "passport-github": "latest",
  "request": "^2.88.0",

diff --git a/webpack.pages.config.js b/webpack.pages.config.js
@@ -10,7 +10,8 @@ module.exports = () => ({
  'project-settings-page':
  './app/views/scripts/src/project-settings-page.js',
  'user-page': './app/views/scripts/src/user-page.js',
- 'embed-page': './app/views/scripts/src/embed-page.js'
+ 'embed-page': './app/views/scripts/src/embed-page.js',
+ 'data-page': './app/views/scripts/src/data-page.js'
  },
  devtool: 'eval-source-map',
  plugins: [