@abi-software/map-utilities 0.0.0-beta.5 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "0.0.0-beta.5",
+  "version": "1.0.0",
   "files": [
     "dist/*",
     "src/*",
@@ -9,9 +9,13 @@
     "*.js"
   ],
   "scripts": {
-    "serve": "vite",
+    "serve": "vite --host",
     "build-bundle": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "version": "npm run build-bundle;",
+    "release:beta": "npm version prerelease --preid=beta; npm publish --tag beta",
+    "release:minor": "npm version minor; npm publish",
+    "release:patch": "npm version patch;  npm publish"
   },
   "type": "module",
   "main": "./dist/map-utilities.umd.cjs",

package/src/App.vue

@@ -15,7 +15,7 @@ const flatmapToolbarOptions = [
   "Polygon",
   "Connection",
 ];
-const scaffoldToolbarOptions = ["Edit", "Point", "LineString"];
+const scaffoldToolbarOptions = ["Edit", "Delete", "Point", "LineString"];
 const activeDrawTool = ref(undefined);
 const activeDrawMode = ref(undefined);
 const hoverVisibilities = [
@@ -117,6 +117,10 @@ function onFinishHelpMode() {
   helpModeActiveItem.value = 0;
   helpModeLastItem.value = false;
 }
+function onActionClick(value) {
+  console.log("🚀 ~ onActionClick ~ value:", value);
+}
+
 /**
  * Tooltip
  */
@@ -410,11 +414,11 @@ function changeHover(value) {
         <h3>TreeControls - {{ mapType }}</h3>
       </el-col>
       <el-col>
-        <el-button @click="switchTreeEntry('flatmap')" size="small">
-          Add Flatmap Tree Entry
+        <el-button v-show="mapType==='scaffold'" @click="switchTreeEntry('flatmap')" size="small">
+          Display Flatmap Tree
         </el-button>
-        <el-button @click="switchTreeEntry('scaffold')" size="small">
-          Add Scaffold Tree Entry
+        <el-button v-show="mapType==='flatmap'" @click="switchTreeEntry('scaffold')" size="small">
+          Display Scaffold Tree
         </el-button>
       </el-col>
     </el-row>
@@ -461,6 +465,7 @@ function changeHover(value) {
       :annotationDisplay="annotationDisplay"
       :annotationEntry="annotationEntry"
       @annotation="commitAnnotationEvent"
+      @onActionClick="onActionClick"
     />
     <TreeControls
       v-show="mapType === 'flatmap'"

package/src/components/HelpModeDialog/HelpModeDialog.vue

@@ -171,9 +171,7 @@ export default {
       return scaffoldEl;
     },
     getCurrentMultiflatmap: function () {
-      console.log("🚀 ~ this.multiflatmapRef:", this.multiflatmapRef);
       const multiflatmapEl = this.multiflatmapRef?.$el || null;
-      console.log("🚀 ~ multiflatmapEl:", multiflatmapEl);
       return multiflatmapEl;
     },
     getCurrentFlatmap: function () {
@@ -184,7 +182,6 @@ export default {
     },
     toggleHelpModeHighlight: function (option) {
       const currentMultiflatmapEl = this.getCurrentMultiflatmap();
-      console.log("🚀 ~ currentMultiflatmapEl:", currentMultiflatmapEl);
       const currentFlatmapEl = this.getCurrentFlatmap();
       const currentScaffoldEl = this.getCurrentScaffold();
       const allHighlightedItems =
@@ -192,25 +189,9 @@ export default {
 
       if (currentMultiflatmapEl) {
         if (option) {
-          console.log(
-            "🚀 ~ currentMultiflatmapEl.classList:",
-            currentMultiflatmapEl.classList
-          );
           currentMultiflatmapEl.classList.add("in-help");
-          console.log(
-            "🚀 ~ currentMultiflatmapEl.classList:",
-            currentMultiflatmapEl.classList
-          );
         } else {
-          console.log(
-            "🚀 ~ currentMultiflatmapEl.classList:",
-            currentMultiflatmapEl.classList
-          );
           currentMultiflatmapEl.classList.remove("in-help");
-          console.log(
-            "🚀 ~ currentMultiflatmapEl.classList:",
-            currentMultiflatmapEl.classList
-          );
         }
       }
 

package/src/components/Tooltip/ExternalResourceCard.vue

@@ -9,7 +9,7 @@
           :icon="ElIconNotebook"
           @click="openUrl(resource.url)"
         >
-          Open publications in pubmed
+          Open publications in PubMed
         </el-button>
       </div>
     </template>
@@ -51,6 +51,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.resource-container {
+  margin-top: 0.5em;
+}
+
 .attribute-title {
   font-size: 16px;
   font-weight: 600;

package/src/components/Tooltip/ProvenancePopup.vue

@@ -15,7 +15,7 @@
     <div class="block" v-else>
       <div class="title">{{ tooltipEntry.featureId }}</div>
     </div>
-    <div v-if="featuresAlert">
+    <div v-if="featuresAlert" class="attribute-title-container">
       <span class="attribute-title">Alert</span>
       <el-popover
         width="250"
@@ -53,7 +53,7 @@
       <div v-show="showDetails" class="content-container scrollbar">
         {{ tooltipEntry.paths }}
         <div v-if="tooltipEntry.origins && tooltipEntry.origins.length > 0" class="block">
-          <div>
+          <div class="attribute-title-container">
             <span class="attribute-title">Origin</span>
             <el-popover
               width="250"
@@ -93,7 +93,9 @@
           v-if="tooltipEntry.components && tooltipEntry.components.length > 0"
           class="block"
         >
-          <div class="attribute-title">Components</div>
+          <div class="attribute-title-container">
+            <div class="attribute-title">Components</div>
+          </div>
           <div
             v-for="(component, i) in tooltipEntry.components"
             class="attribute-content"
@@ -111,7 +113,7 @@
           v-if="tooltipEntry.destinations && tooltipEntry.destinations.length > 0"
           class="block"
         >
-          <div>
+          <div class="attribute-title-container">
             <span class="attribute-title">Destination</span>
             <el-popover
               width="250"
@@ -292,18 +294,18 @@ export default {
   text-align: left;
   // width: 16em;
   line-height: 1.5em !important;
-  font-size: 1em;
+  font-size: 18px;
   font-family: Helvetica;
-  font-weight: 500;
-  /* font-weight: bold; */
+  font-weight: bold;
   padding-bottom: 8px;
+  color: $app-primary-color;
 }
 
 .block {
   margin-bottom: 0.5em;
 
   .main > &:first-of-type {
-    margin-right: 0.5em;
+    margin-right: 1em;
   }
 }
 
@@ -374,12 +376,8 @@ export default {
   min-width: 16rem;
 }
 
-.title {
-  font-size: 18px;
-  font-weight: 500;
-  font-weight: bold;
-  padding-bottom: 8px;
-  color: rgb(131, 0, 191);
+.attribute-title-container {
+  margin-bottom: 0.5em;
 }
 
 .attribute-title {
@@ -392,6 +390,10 @@ export default {
 .attribute-content {
   font-size: 14px;
   font-weight: 500;
+
+  &:last-of-type {
+    margin-bottom: 0.5em;
+  }
 }
 
 .popover-container {

package/src/components/Tooltip/Tooltip.vue

@@ -13,6 +13,8 @@
 </template>
 
 <script>
+import EventBus from '../EventBus.js';
+
 export default {
   name: "Tooltip",
   props: {
@@ -27,6 +29,12 @@ export default {
       type: Object,
     },
   },
+  mounted: function() {
+    // Emit events from child components
+    EventBus.on("onActionClick", (data) => {
+      this.$emit("onActionClick", data);
+    });
+  },
 };
 </script>
 

package/src/components/TreeControls/TreeControls.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="selections-container">
     <el-row v-if="title">
       <el-col :span="12">
         <div class="title-text">
@@ -7,7 +7,24 @@
         </div>
       </el-col>
     </el-row>
-    <div class="tree-container">
+    <div class="tree-container" ref="treeContainer">
+      <div :class="['tree-tooltip', tooltipAtBottom ? 'bottom' : '']" >
+        <el-popover
+          ref="tooltip"
+          :visible="tooltipVisible"
+          placement="top"
+          :show-arrow="false"
+          :teleported="false"
+          trigger="manual"
+          popper-class="tree-tooltip-popper"
+          virtual-triggering
+          :width="260"
+        >
+          <template #default>
+            <div class="tooltip-text">{{ tooltipLabel }}</div>
+          </template>
+        </el-popover>
+      </div>
       <el-tree
         ref="regionTree"
         v-loading="!isReady"
@@ -20,6 +37,8 @@
         :render-after-expand="false"
         :default-expanded-keys="expandedKeys"
         @check="checkChanged"
+        :indent="8"
+        :class="[mapType === 'flatmap' ? 'hide_grandchildren_checkbox': '']"
       >
         <template #default="{ node, data }">
           <span
@@ -30,9 +49,11 @@
               hoverItem: nodeIsHover(data),
             }"
             @click="changeActiveByNode(data)"
-            @mouseover="changeHoverByNode(data)"
+            @mouseover="changeHoverByNode(data, false)"
+            @mouseenter="displayTooltip(node.label, true, $event)"
+            @mouseleave="displayTooltip('', false, $event)"
           >
-            <div :style="getBackgroundStyles(data)">
+            <div :style="getBackgroundStyles(data)" class="lastChildInItem">
               {{ node.label }}
             </div>
           </span>
@@ -44,7 +65,9 @@
               hoverItem: hover.includes(data.id),
             }"
             @click="changeActiveByNode(data, true)"
-            @mouseover="changeHoverByNode(data, true)"
+            @mouseover="changeHoverByNode(data, true, $event)"
+            @mouseenter="displayTooltip(node.label, true, $event)"
+            @mouseleave="displayTooltip('', false, $event)"
           >
             <el-color-picker
               v-if="data.isPrimitives"
@@ -54,10 +77,12 @@
               :popper-class="myPopperClass"
               @change="setColour(data, $event)"
             />
-            <span>{{ node.label }}</span>
-            <span v-if="data.isTextureSlides" class="node-options">
-              (Texture)
-            </span>
+            <div class="lastChildInItem">
+              <span>{{ node.label }}</span>
+              <span v-if="data.isTextureSlides" class="node-options">
+                (Texture)
+              </span>
+            </div>
           </span>
         </template>
       </el-tree>
@@ -118,6 +143,9 @@ export default {
     return {
       defaultExpandedKeys: ["All"],
       myPopperClass: "hide-scaffold-colour-popup",
+      tooltipVisible: false,
+      tooltipLabel: "",
+      tooltipAtBottom: false,
     };
   },
   computed: {
@@ -201,6 +229,23 @@ export default {
         this.$emit("checkChanged", node, data);
       }
     },
+    displayTooltip: function (tooltipLabel, visible, e) {
+      const hoverItem = e.target;
+      const containerItem = hoverItem.closest('.el-tree-node__content');
+      const containerItemWidth = containerItem.clientWidth;
+      const xOffset = containerItem.getBoundingClientRect().x;
+      const lastElement = containerItem.querySelector('.lastChildInItem');
+      let childrenWidth = 0;
+      if (lastElement) {
+        const rect = lastElement.getBoundingClientRect();
+        childrenWidth = rect.x + rect.width - xOffset;
+      }
+      const longLabel = childrenWidth > containerItemWidth;
+      this.tooltipVisible = longLabel && visible;
+      this.tooltipLabel = tooltipLabel;
+      this.tooltipAtBottom =
+        0.5 > (e.layerY / this.$refs.treeContainer.clientHeight) ? true : false;
+    }
   },
   unmounted: function () {
     this.sortedPrimitiveGroups = undefined;
@@ -219,6 +264,10 @@ export default {
   }
 }
 
+.selections-container {
+  padding-top: 5px;
+}
+
 .title-text {
   width: 59px;
   height: 20px;
@@ -236,6 +285,8 @@ export default {
   background: #ffffff;
   margin-top: 6px;
   scrollbar-width: thin;
+  overflow: hidden;
+  position:relative;
 
   :deep(.el-tree) {
     max-height: 240px;
@@ -267,13 +318,15 @@ export default {
   }
 }
 
-:deep(
-    .el-tree-node__children
+.hide_grandchildren_checkbox {
+  :deep(
       .el-tree-node__children
-      .el-tree-node__content
-      > label.el-checkbox
-  ) {
-  display: none;
+        .el-tree-node__children
+        .el-tree-node__content
+        > label.el-checkbox
+    ) {
+    display: none;
+  }
 }
 
 :deep(.el-checkbox__label) {
@@ -342,4 +395,24 @@ export default {
 .node-options {
   text-align: right;
 }
+
+:deep(.tree-tooltip-popper.el-popover) {
+  text-transform: none !important; // need to overide the tooltip text transform
+  border: 1px solid $app-primary-color;
+  padding: 4px;
+  font-size: 12px;
+  .el-popper__arrow {
+    &:before {
+      border-color: $app-primary-color;
+      background-color: #ffffff;
+    }
+  }
+}
+
+.tree-tooltip {
+  position:absolute;
+  &.bottom {
+    top: 70% ;
+  }
+}
 </style>

package/vite.config.js

@@ -9,7 +9,7 @@ import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
-    port: 8083,
+    port: 8081,
   },
   plugins: [
     vue(),