@abi-software/map-side-bar 2.9.2-beta.1 → 2.10.0-beta.0

package/package.json

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

package/src/App.vue

@@ -210,14 +210,16 @@ export default {
     action: function (action) {
       console.log('action fired: ', action)
       let facets = [];
-      facets.push(
-        ...action.labels.map(val => ({
-          facet: capitalise(val),
-          term: "Anatomical structure",
-          facetPropPath: "anatomy.organ.category.name",
-        }))
-      );
-      if (this.$refs.sideBar) {
+      if (action.labels) {
+        facets.push(
+          ...action.labels.map(val => ({
+            facet: capitalise(val),
+            term: "Anatomical structure",
+            facetPropPath: "anatomy.organ.category.name",
+          }))
+        );
+      }
+      if (this.$refs.sideBar && facets?.length) {
         console.log('openSearch', facets)
         this.$refs.sideBar.openSearch(facets, "");
       }

package/src/components/ConnectivityExplorer.vue

@@ -22,7 +22,7 @@
         <el-button
           link
           class="el-button-link"
-          @click="onResetClick"
+          @click="openSearch([], '')"
           size="large"
         >
           Reset
@@ -133,9 +133,7 @@ import {
   ElIcon as Icon,
   ElInput as Input,
   ElPagination as Pagination,
-  ElMessage as Message,
 } from "element-plus";
-import 'element-plus/es/components/message/style/css';
 import EventBus from './EventBus.js'
 import SearchFilters from "./SearchFilters.vue";
 import SearchHistory from "./SearchHistory.vue";
@@ -344,13 +342,13 @@ export default {
       // disable hover changes when show connectivity is clicked
       if (!this.freezed) {
         let payload = { tabType: "connectivity" };
-
+  
         if (data) {
           payload = {...payload, ...data};
         } else if (this.expandedData) {
           payload = {...payload, ...this.expandedData};
         }
-
+  
         this.$emit("hover-changed", payload);
       }
     },
@@ -365,34 +363,13 @@ export default {
         this.openSearch([], '');
       }
     },
-    onResetClick: function () {
-      this.openSearch([], '');
-      this.$emit('connectivity-explorer-reset', []);
-    },
     openSearch: function (filter, search = "") {
       this.searchInput = search;
       this.resetPageNavigation();
       //Proceed normally if cascader is ready
       if (this.cascaderIsReady) {
-        const validatedFilters = this.$refs.filtersRef.getHierarchicalValidatedFilters(filter);
-        const notFoundItems = validatedFilters.notFound || [];
-        this.filter = validatedFilters.result;
-
-        // Show not found filter items warning message
-        notFoundItems.forEach((notFoundItem) => {
-          const itemLabel = notFoundItem.tagLabel || notFoundItem.facet;
-          Message({
-            message: `${itemLabel} cannot be found in ${notFoundItem.term}!`,
-            appendTo: this.$el,
-            showClose: true,
-            offset: 113,
-          });
-        });
-
-        if (notFoundItems.length) {
-          this.$emit('connectivity-explorer-reset', notFoundItems);
-        }
-
+        this.filter =
+          this.$refs.filtersRef.getHierarchicalValidatedFilters(filter);
         //Facets provided but cannot find at least one valid
         //facet. Tell the users the search is invalid and reset
         //facets check boxes.
@@ -590,7 +567,6 @@ export default {
   width: 298px !important;
   height: 40px;
   padding-right: 14px;
-  font-family: inherit;
 
   :deep(.el-input__inner) {
     font-family: inherit;
@@ -631,24 +607,6 @@ export default {
   padding: 1rem;
 }
 
-.content-card :deep(.el-message) {
-  position: absolute !important;
-  width: 80%;
-  font-size: 12px;
-  border-radius: var(--el-border-radius-base);
-  --el-message-bg-color: var(--el-color-error-light-9);
-  --el-message-border-color: var(--el-color-error);
-  --el-message-text-color: var(--el-text-color-primary);
-
-  .el-icon.el-message__icon {
-    display: none;
-  }
-
-  .el-message__closeBtn {
-    margin-left: auto;
-  }
-}
-
 .content {
   // width: 515px;
   flex: 1 1 auto;

package/src/components/ConnectivityInfo.vue

@@ -228,7 +228,7 @@ export default {
       updatedCopyContent: '',
       activeView: 'listView',
       connectivityLoading: false,
-      connectivitySource: 'map', // sckan
+      connectivitySource: 'sckan',
       connectivityError: {},
       graphViewLoaded: false,
       connectivityFromMap: null,
@@ -277,7 +277,7 @@ export default {
       return this.entry.destinationsWithDatasets;
     },
     resources: function () {
-      return this.entry.hyperlinks || [];
+      return this.entry.hyperlinks;
     },
     sckanVersion: function () {
       return this.entry.knowledgeSource;
@@ -528,17 +528,17 @@ export default {
       }
     },
     getConnectionsFromMap: async function () {
-      if (this.entry.mapuuid) {
+      if (this.entry.mapuuid) {        
         const url =
           this.flatmapApi +
           `flatmap/${this.entry.mapuuid}/connectivity/${this.entry.featureId[0]}`;
-
+  
         try {
           const response = await fetch(url);
           if (!response.ok) {
             throw new Error(`Response status: ${response.status}`);
           }
-
+  
           return await response.json();
         } catch (error) {
           throw new Error(error);

package/src/components/{SidebarContent.vue → DatasetExplorer.vue}

@@ -79,9 +79,7 @@ import {
   ElIcon as Icon,
   ElInput as Input,
   ElPagination as Pagination,
-  ElMessage as Message,
 } from 'element-plus'
-import 'element-plus/es/components/message/style/css';
 import SearchFilters from './SearchFilters.vue'
 import SearchHistory from './SearchHistory.vue'
 import DatasetCard from './DatasetCard.vue'
@@ -132,7 +130,7 @@ export default {
     Input,
     Pagination
   },
-  name: 'SideBarContent',
+  name: 'DatasetExplorer',
   props: {
     visible: {
       type: Boolean,
@@ -194,20 +192,8 @@ export default {
       this.resetPageNavigation()
       //Proceed normally if cascader is ready
       if (this.cascaderIsReady) {
-        const validatedFilters = this.$refs.filtersRef.getHierarchicalValidatedFilters(filter);
-        const notFoundItems = validatedFilters.notFound || [];
-        this.filter = validatedFilters.result;
-
-        // Show not found filter items warning message
-        notFoundItems.forEach((notFoundItem) => {
-          Message({
-            message: `${notFoundItem.facet} cannot be found in ${notFoundItem.term}!`,
-            appendTo: this.$el,
-            showClose: true,
-            offset: 113,
-          });
-        });
-
+        this.filter =
+          this.$refs.filtersRef.getHierarchicalValidatedFilters(filter)
         //Facets provided but cannot find at least one valid
         //facet. Tell the users the search is invalid and reset
         //facets check boxes.
@@ -430,7 +416,8 @@ export default {
               ? element['abi-contextual-information']
               : undefined,
           segmentation: element['mbf-segmentation'],
-          simulation: element['abi-simulation-file'],
+          //omex format will be the preferred mimetype
+          simulation: element['abi-simulation-omex-file'] ? element['abi-simulation-omex-file'] : element['abi-simulation-file'],
           additionalLinks: element.additionalLinks,
           detailsReady: true,
         })
@@ -577,20 +564,6 @@ export default {
   padding: 1rem;
 }
 
-.content-card :deep(.el-message) {
-  position: absolute !important;
-  width: 80%;
-  font-size: 12px;
-  border-radius: var(--el-border-radius-base);
-  --el-message-bg-color: var(--el-color-error-light-9);
-  --el-message-border-color: var(--el-color-error);
-  --el-message-text-color: var(--el-text-color-primary);
-
-  .el-icon.el-message__icon {
-    display: none;
-  }
-}
-
 .content {
   // width: 515px;
   flex: 1 1 auto;

package/src/components/ImageGallery.vue

@@ -322,26 +322,69 @@ export default {
       }
     },
     createSimulationItems: function () {
-      if (this.entry.simulation && this.entry.simulation.length > 0) {
-        let action = {
-          label: undefined,
-          apiLocation: this.envVars.API_LOCATION,
-          s3uri: this.entry.s3uri,
-          version: this.datasetVersion,
-          title: 'View simulation',
-          type: 'Simulation',
-          name: this.entry.name,
-          description: this.entry.description,
-          discoverId: this.datasetId,
-          dataset: `${this.envVars.ROOT_URL}/datasets/${this.datasetId}?type=dataset`,
-        }
-        this.items['Simulations'].push({
-          id: 'simulation',
-          title: ' ',
-          type: 'Simulation',
-          hideType: true,
-          hideTitle: true,
-          userData: action,
+      if (this.entry.simulation) {
+        this.entry.simulation.forEach((simulation) => {
+          if (simulation.additional_mimetype.name === "application/x.vnd.abi.simulation+json") {
+            let action = {
+              label: undefined,
+              apiLocation: this.envVars.API_LOCATION,
+              s3uri: this.entry.s3uri,
+              version: this.datasetVersion,
+              title: 'View simulation',
+              type: 'Simulation',
+              name: this.entry.name,
+              description: this.entry.description,
+              discoverId: this.datasetId,
+              dataset: `${this.envVars.ROOT_URL}/datasets/${this.datasetId}?type=dataset`,
+            }
+            this.items['Simulations'].push({
+              id: 'simulation',
+              title: ' ',
+              type: 'Simulation',
+              hideType: true,
+              hideTitle: true,
+              userData: action,
+            })
+          } else {
+            const filePath = simulation.dataset.path
+            const id = simulation.identifier
+            //Despite of the name, this method can be used to retreive
+            //the thumbnail information for any none scaffold type thumbnail
+            const thumbnail = this.getThumbnailForPlot(
+              simulation,
+              this.entry.thumbnails
+            )
+            let thumbnailURL = undefined
+            let mimetype = ''
+            if (thumbnail) {
+              thumbnailURL = this.getImageURL(this.envVars.API_LOCATION, {
+                id,
+                prefix: this.getS3Prefix(),
+                file_path: thumbnail.dataset.path,
+                s3Bucket: this.s3Bucket,
+              })
+              mimetype = thumbnail.mimetype.name
+            }
+            const resource = `${this.envVars.API_LOCATION}s3-resource/${this.getS3Prefix()}files/${filePath}${this.getS3Args()}`
+            let action = {
+              label: capitalise(this.label),
+              resource: resource,
+              s3uri: this.entry.s3uri,
+              title: 'View simulation',
+              type: 'Simulation',
+              discoverId: this.discoverId,
+              version: this.datasetVersion,
+            }
+            this.items['Simulations'].push({
+              id,
+              title: baseName(filePath),
+              type: 'Simulation',
+              thumbnail: thumbnailURL,
+              userData: action,
+              hideType: true,
+              mimetype,
+            })
+          }
         })
       }
     },