@abi-software/map-side-bar 2.0.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "files": [
     "dist/*",
     "src/*",
@@ -37,7 +37,7 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/gallery": "^1.0.0",
+    "@abi-software/gallery": "^1.1.0",
     "@abi-software/svg-sprite": "^1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

package/src/App.vue

@@ -22,6 +22,7 @@
       :activeId="activeId"
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
+      @hover-changed="hoverChanged($event)"
       @actionClick="action"
     />
   </div>
@@ -110,6 +111,9 @@ export default {
     }
   },
   methods: {
+    hoverChanged: function (data) {
+      console.log('hoverChanged', data)
+    },
     searchChanged: function (data) {
       console.log(data)
     },
@@ -205,7 +209,10 @@ export default {
     console.log('mounted app')
     EventBus.on('contextUpdate', (payLoad) => {
       console.log('contextUpdate', payLoad)
-    })
+    });
+    EventBus.on('datalink-clicked', (payLoad) => {
+      console.log('datalink-clicked', payLoad)
+    });
   },
 }
 </script>

package/src/algolia/algolia.js

@@ -100,6 +100,7 @@ export class AlgoliaClient {
     for (let res of results) {
       newResult = { ...res }
       newResult = {
+        anatomy: res.anatomy ? res.anatomy.organ.map((organ => organ.curie)) : undefined,
         doi: res.item.curie.split(':')[1],
         name: res.item.name,
         description: res.item.description,
@@ -167,6 +168,7 @@ export class AlgoliaClient {
             'item.name',
             'item.description',
             'objectID',
+            'anatomy.organ.curie'
           ],
         })
         .then(response => {

package/src/components/DatasetCard.vue

@@ -15,6 +15,7 @@
             :dataset-biolucida="biolucidaData"
             :category="currentCategory"
             @card-clicked="galleryClicked"
+            @datalink-clicked="galleryDatalinkClicked"
           />
         </span>
         <div class="card-right">
@@ -163,6 +164,9 @@ export default {
     galleryClicked: function (payload) {
       this.propogateCardAction(payload)
     },
+    galleryDatalinkClicked: function (payload) {
+      EventBus.emit('datalink-clicked', payload); // Pass to mapintegratedvuer
+    },
     openDataset: function () {
       window.open(this.dataLocation, '_blank')
     },

package/src/components/ImageGallery.vue

@@ -13,6 +13,7 @@
         :body-style="bodyStyle"
         :shadow="shadow"
         @card-clicked="cardClicked"
+        @datalink-clicked="datalinkClicked"
         ref="gallery"
       />
   </div>
@@ -116,6 +117,9 @@ export default {
     cardClicked: function (payload) {
       this.$emit('card-clicked', payload)
     },
+    datalinkClicked: function (payload) {
+      this.$emit('datalink-clicked', payload);
+    },
     createSciCurnchItems: function () {
       this.updateS3Bucket(this.entry.s3uri)
       this.createDatasetItem()
@@ -171,7 +175,7 @@ export default {
           let thumbnailURL = undefined
           let mimetype = ''
           if (thumbnail) {
-            
+
             thumbnailURL = this.getImageURL(this.envVars.API_LOCATION, {
               id,
               prefix: this.getS3Prefix(),

package/src/components/SideBar.vue

@@ -35,6 +35,7 @@
               :envVars="envVars"
               :ref="tab.id"
               @search-changed="searchChanged(tab.id, $event)"
+              @hover-changed="hoverChanged($event)"
             />
           </template>
         </div>
@@ -113,11 +114,18 @@ export default {
     }
   },
   methods: {
+    /**
+     * This event is emitted when the mouse hover are changed.
+     * @arg data
+     */
+    hoverChanged: function (data) {
+      this.$emit('hover-changed', data)
+    },
+    /**
+     * This event is emitted when the search filters are changed.
+     * @arg `obj` {data, id}
+     */
     searchChanged: function (id, data) {
-      /**
-       * This event is emitted when the search filters are changed.
-       * @arg `obj` {data, id}
-       */
       this.$emit('search-changed', { ...data, id: id })
     },
     /**
@@ -211,6 +219,15 @@ export default {
        */
       this.$emit('contextUpdate', payLoad)
     })
+    EventBus.on('datalink-clicked', (payLoad) => {
+      /**
+       * This event is emitted
+       * when the dataset button or dataset image thumbnail
+       * from the gallery component is clicked.
+       * @arg payload
+       */
+      this.$emit('datalink-clicked', payLoad);
+    })
   },
 }
 </script>

package/src/components/SidebarContent.vue

@@ -39,7 +39,13 @@
         No results found - Please change your search / filter criteria.
       </div>
       <div v-for="result in results" :key="result.doi" class="step-item">
-        <DatasetCard :entry="result" :envVars="envVars"></DatasetCard>
+        <DatasetCard
+          class="dataset-card"
+          :entry="result" 
+          :envVars="envVars" 
+          @mouseenter="hoverChanged(result)" 
+          @mouseleave="hoverChanged(undefined)"
+        />
       </div>
       <el-pagination
         class="pagination"
@@ -154,6 +160,9 @@ export default {
     },
   },
   methods: {
+    hoverChanged: function (data) {
+      this.$emit('hover-changed', data)
+    },
     resetSearch: function () {
       this.numberOfHits = 0
       this.discoverIds = []
@@ -449,6 +458,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.dataset-card:hover {
+  border-style: solid;
+  border-color: var(--el-color-primary);
+  border-radius: 5px;
+}
+
 .content-card {
   height: 100%;
   flex-flow: column;
@@ -527,7 +542,7 @@ export default {
 }
 
 .content :deep(.step-item:not(:first-child) .seperator-path) {
-  width: 486px;
+  width: 455px;
   height: 0px;
   border: solid 1px #e4e7ed;
   background-color: #e4e7ed;