@abi-software/flatmapvuer 0.5.7 → 0.5.9-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.5.7",
+  "version": "0.5.9-beta.0",
   "license": "Apache-2.0",
   "main": "./dist/flatmapvuer.common.js",
   "files": [

package/src/App.vue

@@ -123,6 +123,7 @@ export default {
         "Kember":{taxo: "ABI:1000001", displayWarning:true},
         "Pig":{taxo: "NCBITaxon:9823", iconClass:"mapicon-icon_pig", displayWarning:true}, 
         "Cat":{taxo: "NCBITaxon:9685", iconClass:"mapicon-icon_cat", displayWarning:true},
+        "Sample":{taxo: "NCBITaxon:1",  displayWarning:true},
         "Functional Connectivity": {taxo: "FunctionalConnectivity", displayWarning:true},
       },
       tooltipContent: undefined,

package/src/components/AnnotationTool.vue

@@ -0,0 +1,344 @@
+<template>
+  <el-main class="main">
+    <div class="block">
+      <el-row class="info-field">
+        <span class="title">Feature Annotations</span>
+      </el-row>
+      <template v-if="annotationEntry">
+        <el-row
+          v-for="(key, label) in displayPair"
+          v-show="annotationEntry[key]"
+          class="dialog-text"
+          :key="key"
+        >
+            <strong>{{ label }}: </strong> {{ annotationEntry[key] }}
+        </el-row>
+        <template v-if="prevSubs.length > 0">
+          <div v-show="showSubmissions" class="hide" @click="showSubmissions = false">
+            Hide previous submissions
+            <i class="el-icon-arrow-up"></i>
+          </div>
+          <div v-show="!showSubmissions" class="hide" @click="showSubmissions = true">
+            Show previous submissions
+            <i class="el-icon-arrow-down"></i>
+          </div>
+          <template v-if="showSubmissions">
+            <el-row class="dialog-spacer"></el-row>
+            <el-row class="dialog-text">
+              <strong class="sub-title">Previous submissions:</strong>
+            </el-row>
+            <div class="entry" v-for="(sub, index) in prevSubs" :key="index">
+              <el-row class="dialog-text">
+                <strong>{{ sub.timestamp }}</strong> Anonoymous
+              </el-row>
+              <el-row class="dialog-text">
+                <strong>Evidence: </strong> {{ sub.evidence.join(', ') }}
+              </el-row>
+              <el-row class="dialog-text">
+                <strong>Comment: </strong> {{ sub.comment }}
+              </el-row>
+            </div>
+          </template>
+        </template>
+        <el-row class="dialog-spacer"></el-row>
+        <el-row v-if="!editing">
+          <i
+            class="el-icon-edit standard-icon"
+            @click="editing = true"
+          />
+        </el-row>
+        <template v-else>
+          <el-row class="dialog-text">
+            <strong class="sub-title">Suggest changes:</strong>
+          </el-row>
+          <el-row class="dialog-text">
+            <strong>Evidvence:</strong>
+          </el-row>
+          <el-row v-for="(value, index) in evidence" :key="value">
+            <el-col :span="20">   
+              {{ evidence[index] }}
+            </el-col>
+            <el-col :span="4">
+              <i
+                class="el-icon-close standard-icon"
+                @click="removeEvidence(index)"
+              />
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-input
+              size="mini"
+              placeholder="Enter"
+              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>
+            </el-input>
+          </el-row>
+          <el-row>
+            <strong>Comment:</strong>
+          </el-row>
+          <el-row class="dialog-text">
+            
+            <el-input
+              type="textarea"
+              :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>
+        </template>
+      </template>
+    </div>
+  </el-main>
+</template>
+
+
+<script>
+/* eslint-disable no-alert, no-console */
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+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);
+
+export default {
+  name: "AnnotationTool",
+  props: {
+    annotationEntry: {
+      type: Object,
+    },
+  },
+  data: function() {
+    return {
+      displayPair: {
+        "Feature": "id",
+        "Tooltip": "label",
+        "Models": "models",
+        "Name": "name",
+        "Map layer": "layer",
+      },
+      editing: false,
+      evidencePrefixes:  [
+        "DOI:",
+        "PMID:",
+      ],
+      evidencePrefix: "DOI:", 
+      evidence: [ ],
+      newEvidence: '',
+      comment: '',
+      submissions: [ ],
+      showSubmissions: true
+    }
+  },
+  computed: {
+    prevSubs: function() {
+      return this.submissions.filter(sub => {
+        if (this.annotationEntry) {
+          if (sub.id === this.annotationEntry.id && 
+            sub.layer === this.annotationEntry.layer) {
+              return true;
+            }
+        }
+        return false;
+      });
+    }
+  },
+  methods: {
+    evidenceEntered: function(value) {
+      if (value) {
+        this.evidence.push(this.evidencePrefix + value);
+        this.newEvidence = "";
+      }
+    },
+    submit: function() {
+      const now = new Date();
+      if ((this.evidence.length > 0) || this.comment) {
+        this.submissions.push( {
+          id: this.annotationEntry['id'],
+          layer: this.annotationEntry['layer'],
+          evidence: this.evidence,
+          comment: this.comment,
+          timestamp: now.toLocaleString(),
+        });
+        this.resetSubmission();
+      }
+    },
+    removeEvidence: function(index) {
+      this.evidence.splice(index, 1);
+    },
+    resetSubmission: function() {
+      this.editing = false;
+      this.evidence = [];
+      this.newFeature = '';
+      this.comment = '';
+    },
+  },
+  watch: {
+    annotationEntry: {
+      handler: function() {
+        this.resetSubmission();
+      },
+      immediate: false,
+      deep: false,
+    }
+  }
+};
+</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";
+
+.info-field {
+  display:flex;
+}
+
+.block {
+  margin-bottom: 0.5em;
+}
+
+.button {
+  padding-top:5px;
+  padding-bottom:5px;
+}
+
+.standard-icon {
+  color: $app-primary-color;
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.dialog-text {
+  color: rgb(48, 49, 51);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+}
+
+.main {
+  font-size: 14px;
+  text-align: left;
+  line-height: 1.5em;
+  font-family: Asap, sans-serif,Helvetica;
+  font-weight: 400;
+  /* outline: thin red solid; */
+  padding: 1em !important;
+  overflow-x: hidden;
+  overflow-y: auto;
+  min-width: 20rem;
+  max-height: 400px;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 6px #c0c4cc;
+  }
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 500;
+  font-weight: bold;
+  padding-bottom: 8px;
+  color: rgb(131, 0, 191);
+}
+
+.sub-title {
+  font-size: 16px;
+}
+
+
+.dialog-spacer {
+  border-bottom: 1px solid #e4e7ed;
+  margin-bottom: 10px;
+}
+
+.submit {
+  color: $app-primary-color;
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.entry ~ .entry {
+  border-top: 1px solid #e4e7ed;
+  margin-top: 10px;
+}
+
+.hide{
+  color: $app-primary-color;
+  cursor: pointer;
+  margin-right: 6px;
+  margin-top: 3px;
+}
+
+::v-deep .el-input__inner, ::v-deep .el-textarea__inner{
+  font-family: Asap, sans-serif;
+}
+
+.select-box {
+  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);
+  }
+  ::v-deep .el-input__icon {
+    line-height:30px
+  }
+}
+
+::v-deep .flatmap_dropdown {
+  min-width: 80px!important;
+  .el-select-dropdown__item {
+    white-space: nowrap;
+    text-align: left;
+    &.selected {
+      color: $app-primary-color;
+      font-weight: normal;
+    }
+  }
+}
+</style>

package/src/components/FlatmapVuer.vue

@@ -280,6 +280,24 @@
         trigger="click"
         popper-class="background-popper"
       >
+        <el-row class="backgroundText">Viewing Mode</el-row>
+        
+        <el-row class="backgroundControl">
+          <el-select
+            :popper-append-to-body="false"
+            v-model="viewingMode"
+            placeholder="Select"
+            class="select-box"
+            popper-class="flatmap_dropdown"
+          >
+            <el-option v-for="item in viewingModes" :key="item" :label="item" :value="item">
+              <el-row>
+                <el-col :span="12">{{ item }}</el-col>
+              </el-row>
+            </el-option>
+          </el-select>
+        </el-row>
+        <el-row class="backgroundSpacer"></el-row>
         <el-row class="backgroundText">Organs display</el-row>
         <el-row class="backgroundControl">
           <el-radio-group v-model="colourRadio" class="flatmap-radio" @change="setColour">
@@ -353,7 +371,9 @@
       <Tooltip
         ref="tooltip"
         class="tooltip"
+        :annotationEntry="annotationEntry"
         :entry="tooltipEntry"
+        :annotationDisplay="viewingMode === 'Annotation'"
       />
     </div>
   </div>
@@ -373,7 +393,8 @@ import {
   Loading,
   Radio,
   RadioGroup,
-  Row
+  Row,
+  Select,
 } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
@@ -387,6 +408,7 @@ Vue.use(Loading.directive);
 Vue.use(Radio);
 Vue.use(RadioGroup);
 Vue.use(Row);
+Vue.use(Select);
 const ResizeSensor = require("css-element-queries/src/ResizeSensor");
 
 const processTaxon = (flatmapAPI, taxonIdentifiers) => {
@@ -657,13 +679,22 @@ export default {
     // checkNeuronClicked shows a neuron path pop up if a path was recently clicked
     checkAndCreatePopups:  async function(data) {
       // Call flatmap database to get the connection data
-      let results = await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(data)
-      // The line below only creates the tooltip if some data was found on the path 
-      // result 0 is the connection, result 1 is the pubmed results from flatmap
-      if(results[0] || results[1] ||( data.feature.hyperlinks && data.feature.hyperlinks.length > 0)){
-        this.resourceForTooltip =  data.resource[0];
-        this.createTooltipFromNeuronCuration(data);
-      } 
+      if (this.viewingMode  === "Annotation") {
+        const annotation = this.mapImp.annotation( this.mapImp.modelFeatureIds(data.resource[0]));
+        if (annotation) {
+          this.annotationEntry = {...annotation};
+          this.displayTooltip(data.resource[0]);
+        } else {
+          this.annotation = { };
+        }
+      } else {
+        let results = await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(data)
+        // The line below only creates the tooltip if some data was found on the path 
+        // result 0 is the connection, result 1 is the pubmed results from flatmap
+        if(results[0] || results[1] ||( data.feature.hyperlinks && data.feature.hyperlinks.length > 0)){
+          this.createTooltipFromNeuronCuration(data);
+        }
+      }
     },
     popUpCssHacks: function() {
       // Below is a hack to remove flatmap tooltips while popup is open
@@ -679,7 +710,7 @@ export default {
     },
     createTooltipFromNeuronCuration: async function(data) {
       this.tooltipEntry = await this.flatmapQueries.createTooltipData(data);
-      this.displayTooltip();
+      this.displayTooltip(data.resource[0]);
     },
     // Keeping this as an API
     showPopup: function(featureId, node, options) {
@@ -748,9 +779,9 @@ export default {
         }, 500);
       }
     },
-    displayTooltip: function() {
+    displayTooltip: function(feature) {
       this.mapImp.showPopup(
-        this.mapImp.modelFeatureIds(this.resourceForTooltip)[0],
+        this.mapImp.modelFeatureIds(feature)[0],
         this.$refs.tooltip.$el,
         { className: "flatmapvuer-popover", positionAtLastClick: true }
       );
@@ -1112,6 +1143,9 @@ export default {
   },
   data: function() {
     return {
+      annotationEntry: {
+
+      },
       layers: [],
       pathways: [],
       sckanDisplay: [
@@ -1149,14 +1183,19 @@ export default {
       flatmapMarker: flatmapMarker,
       tooltipEntry: createUnfilledTooltipData(),
       connectivityTooltipVisible: false,
-      resourceForTooltip: undefined,
       drawerOpen: false,
+      annotationRadio: false,
       colourRadio: true,
       outlinesRadio: true,
       minimapResizeShow: false,
       minimapSmall: false,
       currentActive: "",
       currentHover: "",
+      viewingMode: "Exploration",
+      viewingModes: [
+        "Annotation",
+        "Exploration",
+      ]
     };
   },
   watch: {
@@ -1203,6 +1242,7 @@ export default {
 @import "~element-ui/packages/theme-chalk/src/button";
 @import "~element-ui/packages/theme-chalk/src/loading";
 @import "~element-ui/packages/theme-chalk/src/row";
+@import "~element-ui/packages/theme-chalk/src/select";
 
 .beta-popovers {
   position: absolute;
@@ -1227,7 +1267,7 @@ export default {
 }
 
 .latest-map-text {
-  color: $app-primary-color;;
+  color: $app-primary-color;
   font-family: Asap, sans-serif;
   font-size: 12px;
   margin-top: 5px;
@@ -1461,7 +1501,7 @@ export default {
   background-color: #ffffff;
   border: 1px solid $app-primary-color;
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
-  height: 200px;
+  height: 270px;
   width: 175px;
   min-width: 175px;
   &.el-popper[x-placement^="top"] {
@@ -1511,7 +1551,7 @@ export default {
 
 .backgroundControl {
   display: flex;
-  margin-top: 16px;
+  margin-top: 12px;
 }
 
 .backgroundChoice {
@@ -1749,7 +1789,7 @@ export default {
       margin-right: 0px;
     }
   }
-  .el-radio__input {
+  ::v-deep .el-radio__input {
     &.is-checked {
       & + .el-radio__label {
         color: $app-primary-color;
@@ -1759,6 +1799,9 @@ export default {
         background: $app-primary-color;
       }
     }
+    .el-radio__inner:hover {
+      border-color: $app-primary-color;
+    }
   }
 }
 
@@ -1837,5 +1880,37 @@ export default {
     }
   }
 }
+
+.select-box {
+  border-radius: 4px;
+  border: 1px solid rgb(144, 147, 153);
+  background-color: var(--white);
+  font-weight: 500;
+  color:rgb(48, 49, 51);;
+  ::v-deep .el-input__inner {
+    height:30px;
+    color: rgb(48, 49, 51);
+  }
+  ::v-deep .el-input__inner {
+    &is-focus, &:focus {
+      border: 1px solid $app-primary-color;
+    }
+  }
+  ::v-deep .el-input__icon {
+    line-height:30px
+  }
+}
+
+::v-deep .flatmap_dropdown {
+  min-width: 160px!important;
+  .el-select-dropdown__item {
+    white-space: nowrap;
+    text-align: left;
+    &.selected {
+      color: $app-primary-color;
+      font-weight: normal;
+    }
+  }
+}
 </style>
 

package/src/components/MultiFlatmapVuer.vue

@@ -476,14 +476,16 @@ export default {
   border: 1px solid rgb(144, 147, 153);
   background-color: var(--white);
   font-weight: 500;
-  color:rgb(48, 49, 51);;
+  color:rgb(48, 49, 51);
   left: 16px;
   top: 44px;
   position: absolute;
   ::v-deep .el-input__inner {
     color: rgb(48, 49, 51);
     padding-top: 0.25em;
-    .is-focus {
+  }
+  ::v-deep .el-input__inner {
+    &is-focus, &:focus {
       border: 1px solid $app-primary-color;
     }
   }