@abi-software/flatmapvuer 0.5.9 → 0.6.0-vue3-0

package/src/components/AnnotationTool.vue

@@ -11,16 +11,24 @@
           class="dialog-text"
           :key="key"
         >
-            <strong>{{ label }}: </strong> {{ annotationEntry[key] }}
+          <strong>{{ label }}: </strong> {{ annotationEntry[key] }}
         </el-row>
         <template v-if="prevSubs.length > 0">
-          <div v-show="showSubmissions" class="hide" @click="showSubmissions = false">
+          <div
+            v-show="showSubmissions"
+            class="hide"
+            @click="showSubmissions = false"
+          >
             Hide previous submissions
-            <i class="el-icon-arrow-up"></i>
+            <el-icon><el-icon-arrow-up /></el-icon>
           </div>
-          <div v-show="!showSubmissions" class="hide" @click="showSubmissions = true">
+          <div
+            v-show="!showSubmissions"
+            class="hide"
+            @click="showSubmissions = true"
+          >
             Show previous {{ prevSubs.length }} submission(s)
-            <i class="el-icon-arrow-down"></i>
+            <el-icon><el-icon-arrow-down /></el-icon>
           </div>
           <template v-if="showSubmissions">
             <el-row class="dialog-spacer"></el-row>
@@ -29,12 +37,17 @@
             </el-row>
             <div class="entry" v-for="(sub, index) in prevSubs" :key="index">
               <el-row class="dialog-text">
-                <strong>{{ formatTime(sub.created) }}</strong> {{ sub.creator.name }}
+                <strong>{{ formatTime(sub.created) }}</strong>
+                {{ sub.creator.name }}
               </el-row>
               <el-row class="dialog-text">
-                <strong>Evidence: </strong> 
-                <el-row v-for="(evidence) in sub.evidence" :key="evidence" class="dialog-text">
-                  <a  :href="evidence" target="_blank"> {{ evidence }}</a>
+                <strong>Evidence: </strong>
+                <el-row
+                  v-for="evidence in sub.evidence"
+                  :key="evidence"
+                  class="dialog-text"
+                >
+                  <a :href="evidence" target="_blank"> {{ evidence }}</a>
                 </el-row>
               </el-row>
               <el-row class="dialog-text">
@@ -47,10 +60,7 @@
           <template v-if="isEditable">
             <el-row class="dialog-spacer"></el-row>
             <el-row v-if="!editing">
-              <i
-                class="el-icon-edit standard-icon"
-                @click="editing = true"
-              />
+              <el-icon class="standard-icon"><el-icon-edit /></el-icon>
             </el-row>
             <template v-else>
               <el-row class="dialog-text">
@@ -60,14 +70,11 @@
                 <strong>Evidvence:</strong>
               </el-row>
               <el-row v-for="(value, index) in evidence" :key="value">
-                <el-col :span="20">   
+                <el-col :span="20">
                   {{ evidence[index] }}
                 </el-col>
                 <el-col :span="4">
-                  <i
-                    class="el-icon-close standard-icon"
-                    @click="removeEvidence(index)"
-                  />
+                  <el-icon class="standard-icon"><el-icon-close /></el-icon>
                 </el-col>
               </el-row>
               <el-row>
@@ -77,20 +84,26 @@
                   v-model="newEvidence"
                   @change="evidenceEntered($event)"
                 >
-                  <el-select
-                    :popper-append-to-body="false"
-                    v-model="evidencePrefix"
-                    placeholder="Select"
-                    class="select-box"
-                    popper-class="flatmap_dropdown"
-                    slot="prepend"
-                  >
-                    <el-option v-for="item in evidencePrefixes" :key="item" :label="item" :value="item">
-                      <el-row>
-                        <el-col :span="12">{{ item }}</el-col>
-                      </el-row>
-                    </el-option>
-                  </el-select>
+                  <template #prepend>
+                    <el-select
+                      :teleported="false"
+                      v-model="evidencePrefix"
+                      placeholder="Select"
+                      class="select-box"
+                      popper-class="flatmap_dropdown"
+                    >
+                      <el-option
+                        v-for="item in evidencePrefixes"
+                        :key="item"
+                        :label="item"
+                        :value="item"
+                      >
+                        <el-row>
+                          <el-col :span="12">{{ item }}</el-col>
+                        </el-row>
+                      </el-option>
+                    </el-select>
+                  </template>
                 </el-input>
               </el-row>
               <el-row>
@@ -99,25 +112,19 @@
               <el-row class="dialog-text">
                 <el-input
                   type="textarea"
-                  :autosize="{ minRows: 2, maxRows: 4}"
+                  :autosize="{ minRows: 2, maxRows: 4 }"
                   placeholder="Enter"
                   v-model="comment"
                 />
               </el-row>
-                <el-row class="dialog-text">
-                  <el-button
-                    class="button"
-                    type="primary"
-                    plain
-                    @click="submit"
-                  >
-                    Submit
-                  </el-button>
+              <el-row class="dialog-text">
+                <el-button class="button" type="primary" plain @click="submit">
+                  Submit
+                </el-button>
               </el-row>
             </template>
             <el-row class="dialog-text" v-if="errorMessage">
-              <strong class="sub-title"> {{ errorMessage }}
-              </strong>
+              <strong class="sub-title"> {{ errorMessage }} </strong>
             </el-row>
           </template>
         </template>
@@ -126,165 +133,198 @@
   </el-main>
 </template>
 
-
 <script>
+import {
+  ArrowUp as ElIconArrowUp,
+  ArrowDown as ElIconArrowDown,
+  Edit as ElIconEdit,
+  Close as ElIconClose,
+} from '@element-plus/icons-vue'
 /* eslint-disable no-alert, no-console */
 /* eslint-disable no-alert, no-console */
-import Vue from "vue";
-import { AnnotationService } from "@abi-software/sparc-annotation";
-import { Button, Col, Input, Main, Row, Select } from "element-ui";
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-
-locale.use(lang);
-Vue.use(Button);
-Vue.use(Col);
-Vue.use(Input);
-Vue.use(Main);
-Vue.use(Row);
-Vue.use(Select);
+import { AnnotationService } from '@abi-software/sparc-annotation'
+import {
+  ElButton as Button,
+  ElCol as Col,
+  ElInput as Input,
+  ElMain as Main,
+  ElRow as Row,
+  ElSelect as Select,
+} from 'element-plus'
 
 export default {
-  name: "AnnotationTool",
+  name: 'AnnotationTool',
+  components: {
+    Button,
+    Col,
+    Input,
+    Main,
+    Row,
+    Select,
+    ElIconArrowUp,
+    ElIconArrowDown,
+    ElIconEdit,
+    ElIconClose,
+  },
   props: {
     annotationEntry: {
       type: Object,
     },
   },
   inject: ['flatmapAPI'],
-  data: function() {
+  data: function () {
     return {
       displayPair: {
-        "Feature ID": "featureId",
-        "Tooltip": "label",
-        "Models": "models",
-        "Name": "name",
-        "Resource": "resourceId"
+        'Feature ID': 'featureId',
+        Tooltip: 'label',
+        Models: 'models',
+        Name: 'name',
+        Resource: 'resourceId',
       },
       editing: false,
-      evidencePrefixes:  [
-        "DOI:",
-        "PMID:",
-      ],
-      evidencePrefix: "DOI:", 
-      evidence: [ ],
+      evidencePrefixes: ['DOI:', 'PMID:'],
+      evidencePrefix: 'DOI:',
+      evidence: [],
       authenticated: false,
       newEvidence: '',
       comment: '',
-      prevSubs: [ ],
+      prevSubs: [],
       showSubmissions: true,
-      errorMessage: "",
+      errorMessage: '',
     }
   },
   computed: {
-    isEditable: function() {
-      return this.annotationEntry['resourceId'] && this.annotationEntry['featureId'];
+    isEditable: function () {
+      return (
+        this.annotationEntry['resourceId'] && this.annotationEntry['featureId']
+      )
     },
   },
   methods: {
-    evidenceEntered: function(value) {
+    evidenceEntered: function (value) {
       if (value) {
-        this.evidence.push(this.evidencePrefix + value);
-        this.newEvidence = "";
+        this.evidence.push(this.evidencePrefix + value)
+        this.newEvidence = ''
       }
     },
-    formatTime: function(dateString) {
-      const options = { year: "numeric", month: "long", day: "numeric", 
-        hour: "numeric", minute: "numeric", second: "numeric" };
-      return new Date(dateString).toLocaleDateString(undefined, options);
+    formatTime: function (dateString) {
+      const options = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+      }
+      return new Date(dateString).toLocaleDateString(undefined, options)
     },
-    updatePrevSubmissions: function() {
+    updatePrevSubmissions: function () {
       if (this.$annotator && this.authenticated) {
-        if (this.annotationEntry['resourceId'] &&
-          this.annotationEntry['featureId']) {
-          this.$annotator.itemAnnotations(this.annotationEntry['resourceId'],
-          this.annotationEntry['featureId']).then((value) => {
-            this.prevSubs = value;
-          })
-          .catch((reason) => {
-            console.log(reason); // Error!
-          });
+        if (
+          this.annotationEntry['resourceId'] &&
+          this.annotationEntry['featureId']
+        ) {
+          this.$annotator
+            .itemAnnotations(
+              this.annotationEntry['resourceId'],
+              this.annotationEntry['featureId']
+            )
+            .then((value) => {
+              this.prevSubs = value
+            })
+            .catch((reason) => {
+              console.log(reason) // Error!
+            })
         }
       }
     },
-    submit: function() {
-      if ((this.evidence.length > 0) || this.comment) {
-        if (this.annotationEntry['resourceId'] &&
-          this.annotationEntry['featureId']) {
-          const evidenceURLs = [];
+    submit: function () {
+      if (this.evidence.length > 0 || this.comment) {
+        if (
+          this.annotationEntry['resourceId'] &&
+          this.annotationEntry['featureId']
+        ) {
+          const evidenceURLs = []
           this.evidence.forEach((evidence) => {
-            if (evidence.includes("DOI:")) {
-              const link = evidence.replace("DOI:", "https://doi.org/");
-              evidenceURLs.push(new URL(link));
-            } else if (evidence.includes("PMID:")) {
-              const link = evidence.replace("PMID:", "https://pubmed.ncbi.nlm.nih.gov/");
-              evidenceURLs.push(new URL(link));
+            if (evidence.includes('DOI:')) {
+              const link = evidence.replace('DOI:', 'https://doi.org/')
+              evidenceURLs.push(new URL(link))
+            } else if (evidence.includes('PMID:')) {
+              const link = evidence.replace(
+                'PMID:',
+                'https://pubmed.ncbi.nlm.nih.gov/'
+              )
+              evidenceURLs.push(new URL(link))
             }
-          });
+          })
           const userAnnotation = {
             resource: this.annotationEntry['resourceId'],
             item: this.annotationEntry['featureId'],
             evidence: evidenceURLs,
             comment: this.comment,
           }
-          this.$annotator.addAnnotation(userAnnotation).then(() => {
-            this.errorMessage = "";
-            this.resetSubmission();
-            this.updatePrevSubmissions();
-          })
-          .catch(() => {
-            this.errorMessage = "There is a problem with the submission, please try again later";
-          });
+          this.$annotator
+            .addAnnotation(userAnnotation)
+            .then(() => {
+              this.errorMessage = ''
+              this.resetSubmission()
+              this.updatePrevSubmissions()
+            })
+            .catch(() => {
+              this.errorMessage =
+                'There is a problem with the submission, please try again later'
+            })
         }
       }
     },
-    removeEvidence: function(index) {
-      this.evidence.splice(index, 1);
+    removeEvidence: function (index) {
+      this.evidence.splice(index, 1)
     },
-    resetSubmission: function() {
-      this.editing = false;
-      this.evidence = [];
-      this.newFeature = '';
-      this.comment = '';
+    resetSubmission: function () {
+      this.editing = false
+      this.evidence = []
+      this.newFeature = ''
+      this.comment = ''
     },
   },
   watch: {
     annotationEntry: {
-      handler: function() {
-        this.resetSubmission();
-        this.updatePrevSubmissions();
+      handler: function () {
+        this.resetSubmission()
+        this.updatePrevSubmissions()
       },
       immediate: false,
       deep: false,
-    }
+    },
   },
-  mounted: function() {
+  mounted: function () {
     if (!this.$annotator) {
-      Vue.prototype.$annotator = new AnnotationService(
-        `${this.flatmapAPI}annotator`);
+      this.$annotator = new AnnotationService(
+        `${this.flatmapAPI}annotator`
+      )
     }
     this.$annotator.authenticate().then((userData) => {
       if (userData.name && userData.email) {
-        this.authenticated = true;
-        this.updatePrevSubmissions();
+        this.authenticated = true
+        this.updatePrevSubmissions()
       } else {
-        this.errorMessage = "";
+        this.errorMessage = ''
       }
     })
-  }
-};
+  },
+}
 </script>
 
-<style scoped lang="scss">
-@import "~element-ui/packages/theme-chalk/src/button";
-@import "~element-ui/packages/theme-chalk/src/col";
-@import "~element-ui/packages/theme-chalk/src/input";
-@import "~element-ui/packages/theme-chalk/src/main";
-@import "~element-ui/packages/theme-chalk/src/row";
-@import "~element-ui/packages/theme-chalk/src/select";
+<style lang="scss" scoped>
+@use 'element-plus/theme-chalk/src/button';
+@use 'element-plus/theme-chalk/src/col';
+@use 'element-plus/theme-chalk/src/input';
+@use 'element-plus/theme-chalk/src/main';
+@use 'element-plus/theme-chalk/src/row';
+@use 'element-plus/theme-chalk/src/select';
 
 .info-field {
-  display:flex;
+  display: flex;
 }
 
 .block {
@@ -292,8 +332,8 @@ export default {
 }
 
 .button {
-  padding-top:5px;
-  padding-bottom:5px;
+  padding-top: 5px;
+  padding-bottom: 5px;
 }
 
 .standard-icon {
@@ -314,7 +354,7 @@ export default {
   font-size: 14px;
   text-align: left;
   line-height: 1.5em;
-  font-family: Asap, sans-serif,Helvetica;
+  font-family: Asap, sans-serif, Helvetica;
   font-weight: 400;
   /* outline: thin red solid; */
   padding: 1em !important;
@@ -346,7 +386,6 @@ export default {
   font-size: 16px;
 }
 
-
 .dialog-spacer {
   border-bottom: 1px solid #e4e7ed;
   margin-bottom: 10px;
@@ -364,33 +403,34 @@ export default {
   margin-top: 10px;
 }
 
-.hide{
+.hide {
   color: $app-primary-color;
   cursor: pointer;
   margin-right: 6px;
   margin-top: 3px;
 }
 
-::v-deep .el-input__inner, ::v-deep .el-textarea__inner{
+:deep(.el-input__inner),
+:deep(.el-textarea__inner) {
   font-family: Asap, sans-serif;
 }
 
 .select-box {
-  width:80px;
+  width: 80px;
   background-color: var(--white);
   font-weight: 500;
-  color:rgb(48, 49, 51);;
-  ::v-deep .el-input__inner {
-    height:30px;
+  color: rgb(48, 49, 51);
+  :deep(.el-input__inner) {
+    height: 30px;
     color: rgb(48, 49, 51);
   }
-  ::v-deep .el-input__icon {
-    line-height:30px
+  :deep(.el-input__icon) {
+    line-height: 30px;
   }
 }
 
-::v-deep .flatmap_dropdown {
-  min-width: 80px!important;
+:deep(.flatmap_dropdown) {
+  min-width: 80px !important;
   .el-select-dropdown__item {
     white-space: nowrap;
     text-align: left;

package/src/components/EventBus.js

@@ -1,3 +1,3 @@
-import Vue from 'vue';
-const EventBus = new Vue();
-export default EventBus;
+import mitt from 'mitt'
+const EventBus = new mitt()
+export default EventBus

package/src/components/ExternalResourceCard.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="resource-container">
-    <template v-for="resource in resources">
-      <div class="resource" :key="resource.id">
-        <el-button  v-if="resource.id === 'pubmed'" class="button" icon="el-icon-notebook-2" @click="openUrl(resource.url)">
+    <template v-for="resource in resources" :key="resource.id">
+      <div class="resource">
+        <el-button
+          v-if="resource.id === 'pubmed'"
+          class="button"
+          :icon="ElIconNotebook"
+          @click="openUrl(resource.url)"
+        >
           Open publications in pubmed
         </el-button>
       </div>
@@ -10,50 +15,54 @@
   </div>
 </template>
 
-
-
 <script>
+import { shallowRef } from 'vue'
+import {
+  Notebook as ElIconNotebook,
+} from '@element-plus/icons-vue'
 /* eslint-disable no-alert, no-console */
-import Vue from "vue";
-import { Button } from "element-ui";
-Vue.use(Button);
+import { ElButton as Button } from 'element-plus'
 
 export default {
-  name: "ExternalResourceCard",
+  name: 'ExternalResourceCard',
+  components: {
+    Button,
+  },
   props: {
     resources: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
   },
-  data: function() {
+  data: function () {
     return {
       pubmeds: [],
       pubmedIds: [],
-    };
+      ElIconNotebook: shallowRef(ElIconNotebook)
+    }
   },
   methods: {
-    capitalise: function(string) {
-      return string.charAt(0).toUpperCase() + string.slice(1);
+    capitalise: function (string) {
+      return string.charAt(0).toUpperCase() + string.slice(1)
     },
-    openUrl: function(url){
+    openUrl: function (url) {
       window.open(url, '_blank')
     },
-  }
-};
+  },
+}
 </script>
 
-<style scoped lang="scss">
-@import "~element-ui/packages/theme-chalk/src/button";
+<style lang="scss" scoped>
+@use 'element-plus/theme-chalk/src/button';
 
-.attribute-title{
+.attribute-title {
   font-size: 16px;
   font-weight: 600;
   /* font-weight: bold; */
   text-transform: uppercase;
 }
 
-.attribute-content{
+.attribute-content {
   font-size: 14px;
   font-weight: 400;
 }
@@ -62,16 +71,17 @@ export default {
   color: $app-primary-color;
   text-decoration: none;
   word-wrap: break-word;
-  &:hover, &:focus{
+  &:hover,
+  &:focus {
     color: $app-primary-color;
   }
 }
 
-::v-deep .el-carousel__button {
-  background-color: $app-primary-color;  
+:deep(.el-carousel__button) {
+  background-color: $app-primary-color;
 }
 
-.attribute-title{
+.attribute-title {
   font-size: 16px;
   font-weight: 600;
   /* font-weight: bold; */
@@ -84,16 +94,15 @@ export default {
   font-size: 14px !important;
   background-color: $app-primary-color;
   color: #fff;
-  &:hover{
+  &:hover {
     color: #fff !important;
     background: #ac76c5 !important;
     border: 1px solid #ac76c5 !important;
   }
-  &+.button {
+  & + .button {
     margin-top: 10px !important;
     background-color: $app-primary-color;
-    color: #fff; 
+    color: #fff;
   }
 }
-
-</style>
+</style>