From 39c2f5d462a124a4d48a23f8a5bd90734698ebef Mon Sep 17 00:00:00 2001
From: nicolas <ntraut9@gmail.com>
Date: Tue, 17 Sep 2024 14:27:03 +0200
Subject: [PATCH] small fixes

---
 .eslintrc.js                                  |   2 +-
 package.json                                  |   2 +-
 src/components/common/Button.vue              |  13 +-
 src/components/common/Select.vue              |   6 +-
 src/components/pages/ProjectPage.vue          |   2 +
 .../project/BrainboxProject.stories.js        | 483 ++++++++++--------
 src/components/project/Editor.vue             |  58 ++-
 src/components/project/EditorLayout.vue       |  15 +-
 .../project/OntologySelector.stories.js       |   1 -
 src/components/project/OntologySelector.vue   |   5 +-
 src/components/project/RangeSlider.vue        |   7 +-
 11 files changed, 344 insertions(+), 250 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 8e2b3bf..5514ec7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -10,7 +10,7 @@ module.exports = {
   ],
   'overrides': [
     {
-      files: ['*.vue'],
+      files: ['*.vue', '*.stories.js'],
       rules: {
         // 300 lines limit seems to short for *.vue files
         'max-lines': 'off'
diff --git a/package.json b/package.json
index b506ee8..25ea9d7 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "splitpanes": "^3.1.0"
   },
   "peerDependencies": {
-    "vue": "^3.4.0"
+    "vue": "^3.5.3"
   },
   "devDependencies": {
     "@babel/core": "^7.17.4",
diff --git a/src/components/common/Button.vue b/src/components/common/Button.vue
index ad38892..91bcdc5 100644
--- a/src/components/common/Button.vue
+++ b/src/components/common/Button.vue
@@ -9,14 +9,20 @@
 </template>
 <script setup>
 const props = defineProps({
-  className: String,
-  title: String,
+  className: {
+    type: String,
+    default: null
+  },
+  title: {
+    type: String,
+    default: null
+  },
   disabled: Boolean,
   small: Boolean
 });
 
 const classes = { small: props.small === true };
-if (props.className != null) {
+if (props.className !== null) {
   classes[props.className] = true;
 }
 </script>
@@ -43,6 +49,7 @@ button {
   color: #ddd;
   text-align: center;
   -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
   padding: 5px 0;
   font-weight: bold;
diff --git a/src/components/common/Select.vue b/src/components/common/Select.vue
index a59d8e4..360c95d 100644
--- a/src/components/common/Select.vue
+++ b/src/components/common/Select.vue
@@ -8,11 +8,13 @@
   </select>
 </template>
 <script setup>
-import { ref, onMounted } from 'vue';
 
 const props = defineProps({
   disabled: Boolean,
-  modelValue: String
+  modelValue: {
+    type: String,
+    required: true
+  }
 });
 
 const emit = defineEmits(['update:modelValue']);
diff --git a/src/components/pages/ProjectPage.vue b/src/components/pages/ProjectPage.vue
index 55f7e8b..86ab754 100644
--- a/src/components/pages/ProjectPage.vue
+++ b/src/components/pages/ProjectPage.vue
@@ -111,9 +111,11 @@ main {
 .vertical .left-header button {
   transform: rotate(90deg);
 }
+
 .horizontal {
   height: calc(100vh - 82px);
 }
+
 .fullscreen .horizontal {
   height: 100vh;
 }
diff --git a/src/components/project/BrainboxProject.stories.js b/src/components/project/BrainboxProject.stories.js
index d329922..49abb81 100644
--- a/src/components/project/BrainboxProject.stories.js
+++ b/src/components/project/BrainboxProject.stories.js
@@ -35,228 +35,290 @@ const Template = (args) => ({
   },
   template: `
     <EditorLayout>
-      <template v-slot:left>
+      <template #left>
         <TextAnnotations
-          :projectName="project.shortname"
-          :extractKeys="extractKeys"
-          :transformFiles="transformFiles"
-          currentFileID="624eafaa6c930bb4648d0550"
+          :project-name="project.shortname"
+          :extract-keys="extractKeys"
+          :transform-files="transformFiles"
+          current-file-i-d="624eafaa6c930bb4648d0550"
           @value-change="valueChange"
           @select-file="selectFile"
-          :files="files" />
-        </template>
-        <template v-slot:right>
-          <Editor :class="{ reduced: !isChatDisplayed }">
-            <template v-slot:tools>
+          :files="files"
+        />
+      </template>
+      <template #right>
+        <Editor :class="{ reduced: !isChatDisplayed }">
+          <template #tools>
             <Row centered>
-            <RangeSlider
-              :max="totalSlices"
-              v-model="currentSlice"
-              @update:modelValue="sliceChange"
-            />
-          </Row>
-          <Row>
-
-          <Col>
-            <ButtonsGroup fullWidth>
-              <Button
-                :class="{ pressed: currentView === 'sag' }"
-                @click="changeView('sag')"
-                >Sag</Button
-              >
-              <Button
-                :class="{ pressed: currentView === 'cor' }"
-                @click="changeView('cor')"
-                >Cor</Button
-              >
-              <Button
-                :class="{ pressed: currentView === 'axi' }"
-                @click="changeView('axi')"
-                >Axi</Button
-              >
-            </ButtonsGroup>
-
-            <Button @click="isChatDisplayed = !isChatDisplayed" title="Full screen">
-            <img class="icon" alt="Full screen" :src="alpha" />
-          </Button>
-          <Button @click="render3D()" title="3D render">
-            <img class="icon" alt="3D Render" :src="alpha" />
-          </Button>
-          <ButtonsGroup>
-            <Button
-              @click="toggleChat()"
-              title="Chat"
-              :class="{ pressed: displayChat }"
-            >
-              <img class="icon" alt="Chat" :src="alpha" />
-            </Button>
-            <Button
-              @click="toggleScript()"
-              title="Script"
-              :class="{ pressed: displayScript }"
-            >
-              <img class="icon" alt="Script" :src="alpha" />
-            </Button>
-          </ButtonsGroup>
-          <Button @click="link()" title="Link">
-            <img class="icon" alt="Link" :src="alpha" />
-          </Button>
-          <Button
-            @click="preciseCursor()"
-            title="Precise Cursor"
-            :class="{ pressed: usePreciseCursor }"
-          >
-            <img
-              class="icon"
-              alt="Precise Cursor"
-              :src="alpha"
-            />
-          </Button>
-
-          </Col>
-
-          <Col>
+              <RangeSlider
+                :max="totalSlices"
+                v-model="currentSlice"
+                @update:model-value="sliceChange"
+              />
+            </Row>
+            <Row>
+              <Col>
+                <ButtonsGroup full-width>
+                  <Button
+                    @click="changeView('sag')"
+                  >
+                    Sag
+                  </Button>
+                  <Button
+                    @click="changeView('cor')"
+                  >
+                    Cor
+                  </Button>
+                  <Button
+                    @click="changeView('axi')"
+                  >
+                    Axi
+                  </Button>
+                </ButtonsGroup>
 
+                <Button
+                  @click="isChatDisplayed = !isChatDisplayed"
+                  title="Full screen"
+                >
+                  <img
+                    class="icon"
+                    alt="Full screen"
+                    :src="alpha"
+                  >
+                </Button>
+                <Button
+                  title="3D render"
+                >
+                  <img
+                    class="icon"
+                    alt="3D Render"
+                    :src="alpha"
+                  >
+                </Button>
+                <ButtonsGroup>
+                  <Button
+                    title="Chat"
+                  >
+                    <img
+                      class="icon"
+                      alt="Chat"
+                      :src="alpha"
+                    >
+                  </Button>
+                  <Button
+                    title="Script"
+                  >
+                    <img
+                      class="icon"
+                      alt="Script"
+                      :src="alpha"
+                    >
+                  </Button>
+                </ButtonsGroup>
+                <Button
+                  title="Link"
+                >
+                  <img
+                    class="icon"
+                    alt="Link"
+                    :src="alpha"
+                  >
+                </Button>
+                <Button
+                  title="Precise Cursor"
+                >
+                  <img
+                    class="icon"
+                    alt="Precise Cursor"
+                    :src="alpha"
+                  >
+                </Button>
+              </Col>
 
-          <ButtonsGroup fullWidth>
-          <Button
-            @click="changeTool('Show')"
-            :class="{ pressed: currentTool === 'Show' }"
-          >
-            <img class="icon" alt="Show" :src="alpha" />
-          </Button>
-          <Button
-            @click="changeTool('Paint')"
-            :class="{ pressed: currentTool === 'Paint' }"
-          >
-            <img class="icon" alt="Paint" :src="alpha" />
-          </Button>
-          <Button
-            @click="changeTool('Erase')"
-            :class="{ pressed: currentTool === 'Erase' }"
-          >
-            <img class="icon" alt="Erase" :src="alpha" />
-          </Button>
-          <Button
-            @click="changeTool('Landmark')"
-            :class="{ pressed: currentTool === 'Landmark' }"
-          >
-            <img class="icon" alt="Landmark" :src="alpha" />
-          </Button>
-          <Button
-            @click="changeTool('Measure')"
-            :class="{ pressed: currentTool === 'Measure' }"
-          >
-            <img class="icon" alt="ruler" :src="alpha" />
-          </Button>
-          <Button
-            @click="toggleImageSettings()"
-            :class="{ pressed: displayAdjustSettings }"
-          >
-            <img class="icon" alt="Adjust" :src="alpha" />
-          </Button>
-          <Button
-            @click="changeTool('Eyedrop')"
-            :class="{ pressed: currentTool === 'Eyedropper' }"
-          >
-            <img class="icon" alt="Eyedropper" :src="alpha" />
-          </Button>
-        </ButtonsGroup>
+              <Col>
+                <ButtonsGroup full-width>
+                  <Button
+                  >
+                    <img
+                      class="icon"
+                      alt="Show"
+                      :src="alpha"
+                    >
+                  </Button>
+                  <Button
+                  >
+                    <img
+                      class="icon"
+                      alt="Paint"
+                      :src="alpha"
+                    >
+                  </Button>
+                  <Button
+                  >
+                    <img
+                      class="icon"
+                      alt="Erase"
+                      :src="alpha"
+                    >
+                  </Button>
+                  <Button
+                  >
+                    <img
+                      class="icon"
+                      alt="Landmark"
+                      :src="alpha"
+                    >
+                  </Button>
+                  <Button
+                  >
+                    <img
+                      class="icon"
+                      alt="ruler"
+                      :src="alpha"
+                    >
+                  </Button>
+                  <Button
+                  >
+                    <img
+                      class="icon"
+                      alt="Adjust"
+                      :src="alpha"
+                    >
+                  </Button>
+                  <Button
+                  >
+                    <img
+                      class="icon"
+                      alt="Eyedropper"
+                      :src="alpha"
+                    >
+                  </Button>
+                </ButtonsGroup>
 
+                <Button
+                  style="padding: 1px"
+                >
+                  <div
+                    class="color"
+                  />
+                </Button>
+                <Button
+                  title="Fill"
+                >
+                  <img
+                    class="icon"
+                    alt="Fill"
+                    :src="alpha"
+                  >
+                </Button>
+                <Button
+                  title="Undo"
+                >
+                  <img
+                    class="icon"
+                    alt="Undo"
+                    :src="alpha"
+                  >
+                </Button>
+                <Button
+                  title="Upload"
+                >
+                  <img
+                    class="icon"
+                    alt="Upload"
+                    :src="alpha"
+                  >
+                </Button>
+                <Button
+                  title="Download"
+                >
+                  <img
+                    class="icon"
+                    alt="Download"
+                    :src="alpha"
+                  >
+                </Button>
+                <Button
+                  title="Save"
+                >
+                  <img
+                    class="icon"
+                    alt="Save"
+                    :src="alpha"
+                  >
+                </Button>
+              </Col>
+            </Row>
+            <Row>
+              <ButtonsGroup>
+                <Button
+                  @click="changePenSize(1)"
+                  title="Change pen size to 1"
+                >
+                  1
+                </Button>
+                <Button
+                  @click="changePenSize(2)"
+                  title="Change pen size to 2"
+                >
+                  2
+                </Button>
+                <Button
+                  @click="changePenSize(3)"
+                  title="Change pen size to 3"
+                >
+                  3
+                </Button>
+                <Button
+                  @click="changePenSize(5)"
+                  title="Change pen size to 5"
+                >
+                  5
+                </Button>
+                <Button
+                  @click="changePenSize(10)"
+                  title="Change pen size to 10"
+                >
+                  10
+                </Button>
+                <Button
+                  @click="changePenSize(15)"
+                  title="Change pen size to 15"
+                >
+                  15
+                </Button>
+              </ButtonsGroup>
+            </Row>
 
-            <Button
-              style="padding: 1px"
-              @click="toggleOntology()"
-              v-if="
-                ontology != null &&
-                ontology.labels != null &&
-                ontology.labels[currentLabel] != null
-              "
+            <Row
+              style="flex: 1; min-height:60px;"
+              v-if="isChatDisplayed"
             >
               <div
-                class="color"
-              ></div>
-            </Button>
-            <Button @click="fill()" title="Fill" :class="{ pressed: doFill }">
-              <img class="icon" alt="Fill" :src="alpha" />
-            </Button>
-            <Button @click="undo()" title="Undo">
-              <img class="icon" alt="Undo" :src="alpha" />
-            </Button>
-            <Button @click="upload()" title="Upload">
-              <img class="icon" alt="Upload" :src="alpha" />
-            </Button>
-            <Button @click="download()" title="Download">
-              <img class="icon" alt="Download" :src="alpha" />
-            </Button>
-            <Button @click="save()" title="Save">
-              <img class="icon" alt="Save" :src="alpha" />
-            </Button>
-
-          </Row>
-          </Col>
-          <Row>
-            <ButtonsGroup>
-            <Button
-              @click="changePenSize(1)"
-              :class="{ pressed: currentPenSize === 1 }"
-              title="Change pen size to 1"
-              >1</Button
-            >
-            <Button
-              @click="changePenSize(2)"
-              :class="{ pressed: currentPenSize === 2 }"
-              title="Change pen size to 2"
-              >2</Button
-            >
-            <Button
-              @click="changePenSize(3)"
-              :class="{ pressed: currentPenSize === 3 }"
-              title="Change pen size to 3"
-              >3</Button
-            >
-            <Button
-              @click="changePenSize(5)"
-              :class="{ pressed: currentPenSize === 5 }"
-              title="Change pen size to 5"
-              >5</Button
-            >
-            <Button
-              @click="changePenSize(10)"
-              :class="{ pressed: currentPenSize === 10 }"
-              title="Change pen size to 10"
-              >10</Button
-            >
-            <Button
-              @click="changePenSize(15)"
-              :class="{ pressed: currentPenSize === 15 }"
-              title="Change pen size to 15"
-              >15</Button
-            >
-          </ButtonsGroup>
-        </Row>
-
-          <Row style="flex: 1; min-height:60px; margin: 0 0 30px" v-if="isChatDisplayed">
-            <div class="text" style="width: 100%;">
-              <Chat
-                :receivedMessages="receivedMessages"
-                notification="notification"
-                @send-message="sendChatMessage"
-              />
-            </div>
-          </Row>
-            </template>
-            <template v-slot:content>
-              (Viewer)
-            </template>
-          </Editor>
-        </template>
+                class="text"
+                style="width: 100%;"
+              >
+                <Chat
+                  :received-messages="receivedMessages"
+                  notification="notification"
+                  @send-message="sendChatMessage"
+                />
+              </div>
+            </Row>
+          </template>
+          <template #content>
+            (Viewer)
+          </template>
+        </Editor>
+      </template>
     </EditorLayout>
 `
 });
 
 export const Default = Template.bind({});
 
+const receivedMessages = ref([]);
+
 Default.args = {
   valueChange: action('value changed'),
   selectFile: action('file selected'),
@@ -267,5 +329,12 @@ Default.args = {
   },
   files: brainboxProject.files.list,
   project: brainboxProject,
-  sliceChange: action('slice changed')
+  sliceChange: action('slice changed'),
+  totalSlices: 100,
+  currentSlice: ref(50),
+  usePreciseCursor: ref(true),
+  changePenSize: action('changePenSize'),
+  changeView: action('changeView'),
+  receivedMessages,
+  sendChatMessage: (msg) => receivedMessages.value.push(msg)
 };
diff --git a/src/components/project/Editor.vue b/src/components/project/Editor.vue
index 32c53dc..7a62d3b 100644
--- a/src/components/project/Editor.vue
+++ b/src/components/project/Editor.vue
@@ -83,7 +83,10 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
 
-const props = defineProps({ title: String, height: Number, toolsMinHeight: String });
+defineProps({
+  title: { type: String, default: ''},
+  toolsMinHeight: {type: String, default: null}
+});
 
 const drag = ref(false);
 const dragResizableHandle = ref(false);
@@ -91,10 +94,11 @@ const position = ref({ top: 5, left: 5, right: 'auto' });
 const relativeCoords = ref({ left: 0, top: 0 });
 const toggled = ref(true);
 const toolsWidth = ref('275px');
-const toolsHeight = ref(props.toolsMinHeight);
+const toolsHeight = ref('');
 const toolsRect = ref({});
 const area = ref(null);
 const hasTwoCols = ref(false);
+const margin = 5;
 
 
 const handleMouseDown = (event) => {
@@ -116,7 +120,6 @@ const handleTouchEnd = () => {
   drag.value = false;
 };
 
-
 const handleMouseLeaveOrUp = () => {
   drag.value = false;
   dragResizableHandle.value = false;
@@ -139,32 +142,14 @@ const placeRight = () => {
   position.value = { left: 'auto', top: `${margin}px`, right: `${margin}px` };
 };
 
-const hideTools = (event) => {
+const hideTools = () => {
   toggled.value = false;
   const areaRect = area.value.getBoundingClientRect();
   if (position.value.left === 'auto') { return; }
-  parseInt(position.value.left) > areaRect.width / 2 - toolsRect.value.width / 2
-    ? placeRight()
-    : placeLeft();
-};
-
-onMounted(() => {
-  document.addEventListener('mousemove', handleMove);
-  document.addEventListener('touchmove', handleTouchMove, { passive: false });
-  placeLeft();
-  toolsRect.value = area.value.querySelector('.tools').getBoundingClientRect();
-});
-
-onUnmounted(() => {
-  document.removeEventListener('touchmove', handleTouchMove);
-  document.removeEventListener('mousemove', handleMove);
-});
-
-const handleTouchMove = (event) => {
-  if (event.touches) {
-    if (event.touches.length !== 1) { return; }
-    handleMove(event.touches[0]);
-    event.preventDefault();
+  if (parseInt(position.value.left) > areaRect.width / 2 - toolsRect.value.width / 2) {
+    placeRight();
+  } else {
+    placeLeft();
   }
 };
 
@@ -200,7 +185,26 @@ const handleMove = (event) => {
   }
 };
 
-const margin = 5;
+const handleTouchMove = (event) => {
+  if (event.touches) {
+    if (event.touches.length !== 1) { return; }
+    handleMove(event.touches[0]);
+    event.preventDefault();
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('mousemove', handleMove);
+  document.addEventListener('touchmove', handleTouchMove, { passive: false });
+  placeLeft();
+  toolsRect.value = area.value.querySelector('.tools').getBoundingClientRect();
+  toolsHeight.value = toolsRect.value.top + toolsRect.value.height;
+});
+
+onUnmounted(() => {
+  document.removeEventListener('touchmove', handleTouchMove);
+  document.removeEventListener('mousemove', handleMove);
+});
 </script>
 <style scoped>
 .area {
diff --git a/src/components/project/EditorLayout.vue b/src/components/project/EditorLayout.vue
index 981d31d..31e445a 100644
--- a/src/components/project/EditorLayout.vue
+++ b/src/components/project/EditorLayout.vue
@@ -1,3 +1,5 @@
+<!-- Looks like a lighter version of ProjectPage.vue
+ Currently only used by BrainboxProject.stories.js -->
 <template>
   <div className="editor">
     <splitpanes
@@ -69,11 +71,20 @@ const rightSize = ref(60);
     max-height: 14px;
 }
 
+.horizontal {
+  height: 100vh;
+}
+
+.horizontal :deep(.area) {
+  height: 100%;
+}
+
 .vertical .left-header button {
     transform: rotate(90deg);
 }
-.horizontal {
-  height: auto;
+
+.vertical :deep(.area) {
+  height: 100vh;
 }
 
 .vertical .left {
diff --git a/src/components/project/OntologySelector.stories.js b/src/components/project/OntologySelector.stories.js
index 042a890..5867ef6 100644
--- a/src/components/project/OntologySelector.stories.js
+++ b/src/components/project/OntologySelector.stories.js
@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 import { action } from '@storybook/addon-actions';
 import { ref } from 'vue';
 
diff --git a/src/components/project/OntologySelector.vue b/src/components/project/OntologySelector.vue
index 81b016b..d4bf870 100644
--- a/src/components/project/OntologySelector.vue
+++ b/src/components/project/OntologySelector.vue
@@ -97,11 +97,10 @@ onUnmounted(() => {
 <style scoped>
 
 .labelset {
-    overflow: scroll;
+    overflow: auto;
     position: fixed;
     width: 50%;
     height: 50%;
-    overflow: scroll;
     top: 50%;
     left: 50%;
     transform: translate( -50%, -50%);
@@ -133,8 +132,6 @@ h3 {
     background-color: #666;
     padding: 0 5px 0 10px;
     margin: -10px -10px 5px -10px;
-    cursor:  pointer;
-    /* pointer-events: none; */
 }
 
 .header img {
diff --git a/src/components/project/RangeSlider.vue b/src/components/project/RangeSlider.vue
index e32eabe..fd0f269 100644
--- a/src/components/project/RangeSlider.vue
+++ b/src/components/project/RangeSlider.vue
@@ -25,7 +25,7 @@
   </div>
 </template>
 <script setup>
-import { ref, watch, computed } from 'vue';
+import { computed } from 'vue';
 
 import Button from '@/components/common/Button.vue';
 
@@ -44,11 +44,12 @@ const props = defineProps({
   }
 });
 
+const emit = defineEmits(['update:modelValue']);
+
 const innerValue = computed({
   get: () => props.modelValue,
   set: (value) => emit('update:modelValue', value)
 });
-const emit = defineEmits(['update:modelValue']);
 
 const handleInput = ($event) => {
   innerValue.value = parseInt($event.target.value);
@@ -73,6 +74,7 @@ const handleMinusClick = () => {
 }
 input[type=range] {
   -webkit-appearance: none;
+  appearance: none;
   margin: 18px 5px;
   width: 100%;
   background: transparent;
@@ -96,6 +98,7 @@ input[type=range]::-webkit-slider-thumb {
   background: #ffffff;
   cursor: pointer;
   -webkit-appearance: none;
+  appearance: none;
   margin-top: -10px;
 }
 input[type=range]:focus::-webkit-slider-runnable-track {