@abi-software/map-side-bar 2.4.2 → 2.5.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.4.2",
+  "version": "2.5.0-beta.0",
   "files": [
     "dist/*",
     "src/*",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.1.2",
+    "@abi-software/map-utilities": "^1.2.0-beta.3",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

package/src/App.vue

@@ -22,6 +22,7 @@
       :visible="sideBarVisibility"
       :tabs="tabs"
       :activeTabId="activeId"
+      :annotationEntry="annotationEntry"
       :connectivityInfo="connectivityInput"
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
@@ -100,8 +101,16 @@ export default {
   },
   data: function () {
     return {
+      annotationEntry: {
+        featureId :"epicardium",
+        resourceId: "https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json","resource":"https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json"
+      },
       contextArray: [null, null],
-      tabArray: [{ title: 'Flatmap', id: 1, type: 'search'}, { title: 'Connectivity', id: 2, type: 'connectivity' }],
+      tabArray: [
+        { title: 'Flatmap', id: 1, type: 'search'},
+        { title: 'Connectivity', id: 2, type: 'connectivity' },
+        { title: 'Annotation', id: 3, type: 'annotation' },
+      ],
       sideBarVisibility: true,
       envVars: {
         API_LOCATION: import.meta.env.VITE_APP_API_LOCATION,

package/src/components/AnnotationTool.vue

@@ -0,0 +1,54 @@
+<template>
+  <CreateTooltipContent
+    v-show="createData && createData.toBeConfirmed"
+    :createData="createData"
+    @confirm-create="$emit('confirm-create', $event)"
+    @cancel-create="$emit('cancel-create')"
+  />
+  <annotation-popup
+    v-show="!createData || !createData.toBeConfirmed"
+    class="annotation-popup"
+    :annotationEntry="annotationEntry"
+    @annotation="$emit('annotation', $event)"
+  />
+</template>
+
+<script>
+import { AnnotationPopup, CreateTooltipContent } from '@abi-software/map-utilities';
+import '@abi-software/map-utilities/dist/style.css';
+
+export default {
+  name: 'AnnotationTool',
+  components: {
+    AnnotationPopup
+  },
+  props: {
+    annotationEntry: {
+      type: Object,
+    },
+    createData: {
+      type: Object,
+    }
+  },
+}
+</script>
+
+<style scoped>
+.annotation-popup.main {
+  font-size: 14px;
+  text-align: left;
+  line-height: 1.5em;
+  font-family: Asap, sans-serif, Helvetica;
+  font-weight: 400;
+  /* outline: thin red solid; */
+  overflow-y: auto;
+  scrollbar-width: thin;
+  min-width: 16rem;
+  max-height: unset;
+  background-color: #f7faff;
+  height: 100%;
+  border-left: 1px solid var(--el-border-color);
+  border-top: 1px solid var(--el-border-color);
+}
+
+</style>

package/src/components/SideBar.vue

@@ -22,8 +22,8 @@
         </div>
         <div class="sidebar-container">
           <Tabs
-            v-if="tabs.length > 1 && connectivityInfo"
-            :tabTitles="tabs"
+            v-if="activeTabs.length > 1"
+            :tabTitles="activeTabs"
             :activeId="activeTabId"
             @titleClicked="tabClicked"
             @tab-close="tabClose"
@@ -39,6 +39,17 @@
                 @show-connectivity="showConnectivity"
               />
             </template>
+            <template v-else-if="tab.type === 'annotation'">
+              <annotation-tool
+                :ref="'annotationTab_' + tab.id"
+                v-show="tab.id === activeTabId"
+                :annotationEntry="annotationEntry"
+                @annotation="$emit('annotation-submitted', $event)"
+                @confirm-create="$emit('confirm-create', $event)"
+                @cancel-create="$emit('cancel-create')"
+                @confirm-delete="$emit('confirm-delete', $event)"
+              />
+            </template>
             <template v-else>
             <SidebarContent
               class="sidebar-content-container"
@@ -67,6 +78,7 @@ import { ElDrawer as Drawer, ElIcon as Icon } from 'element-plus'
 import SidebarContent from './SidebarContent.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
+import AnnotationTool from './AnnotationTool.vue'
 import ConnectivityInfo from './ConnectivityInfo.vue'
 
 /**
@@ -81,6 +93,7 @@ export default {
     Drawer,
     Icon,
     ConnectivityInfo,
+    AnnotationTool,
   },
   name: 'SideBar',
   props: {
@@ -108,7 +121,8 @@ export default {
       type: Array,
       default: () => [
         { id: 1, title: 'Search', type: 'search' },
-        { id: 2, title: 'Connectivity', type: 'connectivity' }
+        { id: 2, title: 'Connectivity', type: 'connectivity' },
+        { id: 3, title: 'Annotation', type: 'annotation' }
       ],
     },
     /**
@@ -132,6 +146,13 @@ export default {
       type: Object,
       default: null,
     },
+    /**
+     * The annotation data to show in sidebar.
+     */
+    annotationEntry: {
+      type: Object,
+      default: null,
+    }
   },
   data: function () {
     return {
@@ -201,6 +222,8 @@ export default {
       let refIdPrefix = 'searchTab_'; // default to search tab
       if (type === 'connectivity') {
         refIdPrefix = 'connectivityTab_';
+      } else if (type === 'annotation') {
+        refIdPrefix = 'annotationTab_';
       }
       const tabObj = this.getTabByIdAndType(id, type);
       const tabRefId = refIdPrefix + tabObj.id;
@@ -261,7 +284,21 @@ export default {
       this.$emit('tabClicked', {id, type});
     },
     tabClose: function (id) {
-      this.$emit('connectivity-info-close');
+      this.$emit('tab-close', id);
+    },
+  },
+  computed: {
+    activeTabs: function() {
+      const tabs = [
+        { id: 1, title: 'Search', type: 'search' }
+      ];
+      if (this.connectivityInfo) {
+        tabs.push({ id: 2, title: 'Connectivity', type: 'connectivity' });
+      }
+      if (this.annotationEntry && Object.keys(this.annotationEntry).length > 0) {
+        tabs.push({ id: 3, title: 'Annotation', type: 'annotation' });
+      }
+      return tabs;
     },
   },
   created: function () {

package/src/components/Tabs.vue

@@ -16,7 +16,7 @@
         </div>
       </div>
       <el-button
-        v-if="title.id === 2"
+        v-if="title.id !== 1"
         @click="tabClose(title.id)"
         class="button-tab-close"
         aria-label="Close"

package/src/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
     BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']
     ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
     DatasetCard: typeof import('./components/DatasetCard.vue')['default']