@abi-software/scaffoldvuer 0.3.1 → 0.3.2-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.3.1",
+  "version": "0.3.2-beta.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -29,6 +29,7 @@
     "*.js"
   ],
   "dependencies": {
+    "@abi-software/flatmapvuer": "^0.5.9-beta.3",
     "@abi-software/svg-sprite": "^0.3.0",
     "axios": "^0.21.2",
     "core-js": "^3.22.5",

package/src/App.vue

@@ -8,6 +8,7 @@
       <ScaffoldVuer
         ref="scaffold"
         class="vuer"
+        :flatmapAPI="flatmapAPI"
         :display-u-i="displayUI"
         :url="url"
         :help-mode="helpMode"
@@ -341,6 +342,7 @@ export default {
       searchText: "",
       loadTextureVolumeOnReady: false,
       readyCallback: undefined,
+      flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v4/",
     };
   },
   watch: {

package/src/components/ScaffoldTooltip.vue

@@ -12,6 +12,13 @@
       <template v-popover:tooltip>
         <div class="tooltip-text">{{ label }}</div>
         <div class="tooltip-text" v-if="region">Region: {{ region }}</div>
+        <Tooltip
+          class="p-tooltip"
+          v-show="annotationDisplay"
+          ref="annotationTooltip"
+          :annotationDisplay="true"
+          :annotationEntry="annotationEntry"
+        />
       </template>
     </el-popover>
   </div>
@@ -21,6 +28,7 @@
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
 import { Popover } from "element-ui";
+import Tooltip from "@abi-software/flatmapvuer/src/components/Tooltip";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
 
@@ -32,11 +40,18 @@ Vue.use(Popover);
  */
 export default {
   name: "ScaffoldTooltip",
+ components: {
+    Tooltip,
+  },
   props: {
     label: {
       type: String,
       default: "",
     },
+    annotationDisplay: {
+      type: Boolean,
+      default: false,
+    },
     region: {
       type: String,
       default: "",
@@ -54,9 +69,11 @@ export default {
       default: 200,
     },
   },
+  inject: ['scaffoldUrl'],
   data: function () {
     return {
       display: false,
+      annotationEntry: { }
     };
   },
   computed: {
@@ -69,23 +86,43 @@ export default {
       return { left: x + "px", top: this.y - yOffset + "px" };
     },
   },
+  methods: {
+    checkForDisplay: function () {
+      if (this.visible && this.label && this.label !== "") {
+        this.display = true;
+        if (this.annotationDisplay) {
+          const region = this.region ? this.region +"/" : "";
+          this.annotationEntry = {
+            "featureId": encodeURIComponent(region + this.label),
+            "resourceId": encodeURIComponent(this.scaffoldUrl),
+          };
+        }
+      }
+      else {
+        this.display = false;
+        this.annotationEntry = { };
+      }
+    }
+  },
   watch: {
     label: {
       handler: function () {
-        if (this.visible && this.label && this.label !== "")
-          this.display = true;
-        else this.display = false;
+        this.checkForDisplay();
       },
       immediate: true,
     },
     visible: {
       handler: function () {
-        if (this.visible && this.label && this.label !== "")
-          this.display = true;
-        else this.display = false;
+        this.checkForDisplay();
       },
       immediate: true,
     },
+    annotationDisplay: {
+      handler: function () {
+        this.checkForDisplay();
+      },
+      immediate: true,
+    }
   },
 };
 </script>
@@ -138,5 +175,17 @@ export default {
     user-select: none;
     pointer-events: none;
   }
+
+  .p-tooltip {
+    display: flex;
+    width: 300px;
+    white-space:normal;
+    .attribute-content {
+      color: rgb(44, 62, 80);
+    }
+    &::before, &::after {
+      display:none;
+    }
+  }
 }
 </style>

package/src/components/ScaffoldVuer.vue

@@ -14,6 +14,7 @@
       :visible="tData.visible"
       :x="tData.x"
       :y="tData.y"
+      :annotationDisplay="viewingMode === 'Annotation' && tData.active === true"
     />
     <div
       id="organsDisplayArea"
@@ -246,6 +247,23 @@
         trigger="click"
         popper-class="background-popper non-selectable"
       >
+        <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 viewing-mode"
+            popper-class="scaffold_viewer_dropdownr"
+          >
+            <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"> Change background </el-row>
         <el-row class="backgroundChooser">
           <div
@@ -526,6 +544,21 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * Specify the endpoint of the flatmap server.
+     * This is used by annotation service included in
+     * third party flatmapvuer library.
+     */
+    flatmapAPI: {
+      type: String,
+      default: "https://mapcore-demo.org/current/flatmap/v3/"
+    },
+  },
+  provide() {
+    return {
+      flatmapAPI: this.flatmapAPI,
+      scaffoldUrl: this.url,
+    };
   },
   data: function () {
     return {
@@ -594,9 +627,15 @@ export default {
         visible: false,
         x: 200,
         y: 200,
+        active: false,
       },
       fileFormat: "metadata",
       previousMarkerLabels: [],
+      viewingMode: "Exploration",
+      viewingModes: [
+        "Annotation",
+        "Exploration",
+      ]
     };
   },
   watch: {
@@ -969,6 +1008,7 @@ export default {
               ? event.identifiers[0].data.id
               : event.identifiers[0].data.group;
             if (event.identifiers[0].coords) {
+              this.tData.active = false;
               this.tData.visible = true;
               this.tData.label = id;
               if (event.identifiers[0].data.region)
@@ -1156,6 +1196,11 @@ export default {
                 );
             }
           } else {
+            if (!name.includes("Search Results for")) {
+              this.tData.active = true;
+            } else {
+              this.tData.active = false;
+            }
             this.tData.visible = true;
             this.tData.label = name;
             this.tData.x = coords.position.x;
@@ -1257,6 +1302,7 @@ export default {
         //Unset the tracking
         this.$module.setupLiveCoordinates(undefined);
       }
+      this.tData.active = false;
       this.tData.visible = false;
       this.tData.region = undefined;
     },
@@ -1596,6 +1642,11 @@ export default {
   }
 }
 
+.backgroundSpacer {
+  border-bottom: 1px solid #e4e7ed;
+  margin-bottom: 10px;
+}
+
 .warning-icon {
   color: $warning;
   top: 15px;
@@ -1730,7 +1781,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: 72px;
+  height: 124px;
   width: 128px;
   min-width: 128px;
 
@@ -1742,6 +1793,10 @@ export default {
       }
     }
   }
+
+  .el-row ~ .el-row {
+    margin-top: 8px;
+  }
 }
 
 ::v-deep .open-map-popper {
@@ -1964,6 +2019,13 @@ export default {
   color: rgb(48, 49, 51);
   margin-left: 8px;
 
+  &.viewing-mode {
+    width: unset;
+    ::v-deep .el-input__inner {
+      line-height:30px
+    }
+  }
+
   ::v-deep .el-input__inner {
     color: $app-primary-color;
     height: 22px;
@@ -1972,6 +2034,9 @@ export default {
     border: none;
     font-family: "Asap", sans-serif;
     line-height: 22px;
+    &is-focus, &:focus {
+      border: 1px solid $app-primary-color;
+    }
   }
 
   ::v-deep .el-input,