@abi-software/map-side-bar 2.2.1-beta.4 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.2.1-beta.4",
+  "version": "2.3.0",
   "files": [
     "dist/*",
     "src/*",
@@ -12,7 +12,8 @@
     "serve": "vite --host",
     "build-bundle": "vite build",
     "preview": "vite preview",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
+    "test": "cypress run --component",
+    "cypress:open": "cypress open",
     "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",
@@ -57,8 +58,12 @@
     "autoprefixer": "^10.4.17",
     "chokidar": "^3.6.0",
     "concurrently": "^8.2.2",
+    "cypress": "^13.13.0",
+    "cypress-multi-reporters": "^1.6.4",
+    "cypress-wait-until": "^3.0.1",
     "eslint": "^8.56.0",
     "eslint-plugin-vue": "^9.19.2",
+    "mochawesome": "^7.1.3",
     "file-loader": "^5.0.2",
     "raw-loader": "^0.5.1",
     "sass": "^1.70.0",

package/reporter-config.json

@@ -0,0 +1,10 @@
+{
+  "reporterEnabled": "mochawesome",
+  "mochawesomeReporterOptions": {
+    "reportDir": "cypress/reports/mocha",
+    "quiet": true,
+    "overwrite": false,
+    "html": true,
+    "json": true
+  }
+}

package/src/components/ConnectivityInfo.vue

@@ -20,6 +20,25 @@
         </div>
         <external-resource-card :resources="resources"></external-resource-card>
       </div>
+      <div>
+        <el-popover
+          width="200"
+          trigger="hover"
+          :teleported="false"
+          popper-class="popover-origin-help"
+        >
+          <template #reference>
+            <el-button class="button-circle" circle @click="showConnectivity(entry)">
+              <el-icon color="white">
+                <el-icon-location />
+              </el-icon>
+            </el-button>
+          </template>
+          <span>
+            Show connectivity on map
+          </span>
+        </el-popover>
+      </div>
     </div>
     <div v-if="featuresAlert" class="attribute-title-container">
       <span class="attribute-title">Alert</span>
@@ -322,6 +341,12 @@ export default {
     pubmedSearchUrlUpdate: function (val) {
       this.pubmedSearchUrl = val
     },
+    showConnectivity: function (entry) {
+      // move the map center to highlighted area
+      const featureIds = entry.featureId || [];
+      // connected to flatmapvuer > moveMap(featureIds) function
+      this.$emit('show-connectivity', featureIds);
+    },
   },
 }
 </script>
@@ -338,6 +363,7 @@ export default {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  gap: 1rem;
 }
 
 .title {
@@ -363,6 +389,19 @@ export default {
   width: 16rem;
 }
 
+.button-circle {
+  width: 24px !important;
+  height: 24px !important;
+
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: $app-primary-color;
+    border-color: $app-primary-color;
+  }
+}
+
 .icon {
   right: 0px;
   position: absolute;

package/src/components/SideBar.vue

@@ -36,6 +36,7 @@
                 :availableAnatomyFacets="availableAnatomyFacets"
                 v-show="tab.id === activeTabId"
                 :ref="'connectivityTab_' + tab.id"
+                @show-connectivity="showConnectivity"
               />
             </template>
             <template v-else>
@@ -135,7 +136,7 @@ export default {
   data: function () {
     return {
       drawerOpen: false,
-
+      availableAnatomyFacets: []
     }
   },
   methods: {
@@ -146,6 +147,13 @@ export default {
     hoverChanged: function (data) {
       this.$emit('hover-changed', data)
     },
+    /**
+     * This event is emitted when the show connectivity button is clicked.
+     * @arg featureIds
+     */
+    showConnectivity: function (featureIds) {
+      this.$emit('show-connectivity', featureIds);
+    },
     /**
      * This event is emitted when the search filters are changed.
      * @arg `obj` {data, id}
@@ -308,7 +316,7 @@ export default {
     EventBus.on('available-facets', (payLoad) => {
         this.availableAnatomyFacets = payLoad.find((facet) => facet.label === 'Anatomical Structure').children
     })
-    
+
   },
 }
 </script>

package/src/components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
+    ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']