add opacity slider to ontology selector

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nwl-components",
-  "version": "1.3.10",
+  "version": "1.3.11",
   "files": [
     "dist"
   ],
@@ -33,7 +33,7 @@
     "splitpanes": "^3.1.0"
   },
   "peerDependencies": {
-    "vue": "^3.2.25"
+    "vue": "^3.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.4",
@@ -56,7 +56,7 @@
     "react-dom": "^18.3.1",
     "storybook": "^7.6.19",
     "vite": "^4.5.3",
-    "vue": "^3.2.25",
-    "vue-loader": "^16.8.3"
+    "vue": "^3.5.3",
+    "vue-loader": "^17.4.2"
   }
 }

src/components/common/Autocomplete.vue

@@ -8,7 +8,7 @@ import TextInput from './TextInput.vue';
 const props = defineProps({
   items: {
     type: Array,
-    required: false
+    default: () => []
   },
   isAsync: {
     type: Boolean,
@@ -57,7 +57,11 @@ watch(props.items, () => {
 
 const emit = defineEmits(['input', 'select']);
 
-const onChange = (event) => {
+const filterResults = () => {
+  state.results = state.items.filter((item) => item.toLowerCase().indexOf(state.search.toLowerCase()) > -1);
+};
+
+const onChange = () => {
   emit('input', state.search);
   state.isOpen = true;
   if (props.isAsync) {
@@ -67,10 +71,6 @@ const onChange = (event) => {
   }
 };
 
-const filterResults = () => {
-  state.results = state.items.filter((item) => item.toLowerCase().indexOf(state.search.toLowerCase()) > -1);
-};
-
 const getId = (index) => `result-item-${index}`;
 
 const setActiveDescendent = () => {
@@ -87,7 +87,7 @@ const setResult = (result) => {
   return false;
 };
 
-const onArrowDown = (evt) => {
+const onArrowDown = () => {
   if (state.isOpen) {
     state.arrowCounter = (state.arrowCounter + 1) % state.results.length;
     setActiveDescendent();

src/components/common/TextArea.vue

@@ -1,15 +1,21 @@
 <template>
   <textarea
     v-bind="props"
-    v-model="modelValue"
     @input="handleInput"
+    v-model="model"
   />
 </template>
 <script setup>
 const props = defineProps({
-  placeholder: String,
-  disabled: Boolean,
-  modelValue: String
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: Boolean
+});
+const model = defineModel({
+  type: String,
+  default: ''
 });
 const emit = defineEmits(['update:modelValue']);
 const handleInput = (event) => {

src/components/common/TextInput.vue

@@ -2,15 +2,21 @@
   <input
     type="text"
     v-bind="props"
-    :value="modelValue"
     @input="handleInput"
+    v-model="model"
   >
 </template>
 <script setup>
 const props = defineProps({
-  placeholder: String,
-  disabled: Boolean,
-  modelValue: String
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: Boolean
+});
+const model = defineModel({
+  type: String,
+  default: ''
 });
 const emit = defineEmits(['update:modelValue']);
 const handleInput = (event) => {

src/components/project/OntologySelector.stories.js

@@ -821,11 +821,12 @@ const Template = (args) => ({
             'url': ''
           }
         ]
-      }
+      },
+      opacity: ref(0.5)
     };
   },
   template: `
-    <OntologySelector :ontology="ontology" :open="open" @label-click="handleLabelClick" on-close="open = false" />
+    <OntologySelector :ontology="ontology" :open="open" v-model:opacity="opacity" @label-click="handleLabelClick" @on-close="open = false" />
   `
 });
 

src/components/project/OntologySelector.vue

@@ -2,14 +2,20 @@
   <div
     class="labelset"
     v-if="ontology != null && open"
+    ref="labelsetRef"
+    @mouseup="onHeaderMouseUp"
   >
-    <div class="header">
+    <div
+      class="header"
+      @mousedown="onHeaderMouseDown"
+    >
       <img
         class="close"
         alt="close"
         src="@/assets/times-circle.svg"
         @click="emit('onClose')"
-      >
+      ><!--<br>
+      <b>Labels</b>-->
     </div>
 
     <h3>Label Set</h3>
@@ -29,9 +35,21 @@
         <span class="label-name">{{ label.name }}</span>
       </li>
     </ul>
+    <div v-if="opacity !== null">
+      <b>Opacity</b><br>
+      <input
+        id="labels-opacity"
+        type="range"
+        min="0"
+        max="1"
+        step="0.01"
+        v-model.number="opacity"
+      >
+    </div>
   </div>
 </template>
 <script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
 
 defineProps({
   ontology: {
@@ -44,20 +62,60 @@ defineProps({
 
 const emit = defineEmits(['labelClick', 'onClose']);
 
+const opacity = defineModel('opacity', {type: Number, default: null});
+
+const isDragging = ref(false);
+const labelsetRef = ref(null);
+const clickOffset = ref({ x: 0, y: 0 });
+
+const onHeaderMouseDown = (e) => {
+  isDragging.value = true;
+  const {top, left, width, height} = labelsetRef.value.getBoundingClientRect();
+  clickOffset.value.x = e.clientX - left - width / 2;
+  clickOffset.value.y = e.clientY - top - height / 2;
+};
+
+const onHeaderMouseUp = () => {
+  isDragging.value = false;
+};
+
+const onMouseMove = (e) => {
+  if (!isDragging.value) { return; }
+  labelsetRef.value.style.left = e.clientX - clickOffset.value.x + 'px';
+  labelsetRef.value.style.top = e.clientY - clickOffset.value.y + 'px';
+};
+
+onMounted(() => {
+  document.addEventListener('mousemove', onMouseMove);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', onMouseMove);
+});
+
 </script>
 <style scoped>
 
 .labelset {
     overflow: scroll;
     position: fixed;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
+    width: 50%;
+    height: 50%;
+    overflow: scroll;
+    top: 50%;
+    left: 50%;
+    transform: translate( -50%, -50%);
+    text-align: left;
+
+    background-color: rgba(0, 0, 0, 0.8);
+    /* background-color: #333; */
+    border: thin solid #777;
+    padding: 10px;
     text-align: left;
-    background-color: #333;
     z-index: 21;
-    padding: 0 20px 20px;
+    font-size: 0.8rem;
+    resize: both;
+    /* padding: 0 20px 20px; */
 }
 
 h3 {
@@ -71,10 +129,28 @@ h3 {
 }
 
 .header {
+    height: 36px;
+    background-color: #666;
+    padding: 0 5px 0 10px;
+    margin: -10px -10px 5px -10px;
+    cursor:  pointer;
+    /* pointer-events: none; */
+}
+
+.header img {
+    float: right;
+    width:0.9rem;
+    height:0.9rem;
+    margin:8px 2px;
+    vertical-align:middle;
+    cursor:pointer;
+}
+
+/* .header {
     display: flex;
     justify-content: flex-end;
     padding: 10px 10px 0 0;
-}
+} */
 
 .label-color {
     vertical-align:middle;

src/components/settings/PureCollaborators.vue

@@ -81,7 +81,7 @@
         title="Remove selected collaborators"
         :disabled="
           selected == null ||
-            collaborators[selected][username] == 'anyone' ||
+            collaborators[selected].username === 'anyone' ||
             collaborators[selected].userID === 'anyone'
         "
       >
@@ -107,7 +107,10 @@ const props = defineProps({
     type: Array,
     required: true
   },
-  usersFound: Array
+  usersFound: {
+    type: Array,
+    default: () => []
+  }
 });
 
 const emit = defineEmits([
@@ -144,7 +147,7 @@ const handleAccessChange = (collaborator, accessType, level) => {
 
   let requestedLevel = level;
   if (existingAccessLevel === requestedLevel) {
-    requestedLevel--;
+    requestedLevel -= 1;
   }
 
   emitCollaboratorUpdate(idx, {