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

package/package.json

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

package/src/components/ConnectivityCard.vue

@@ -6,7 +6,18 @@
         <div class="card-title">{{ capitalise(entry.label) }}</div>
         <template v-for="field in displayFields" :key="field">
           <div class="card-details" v-if="entry[field]">
-            <strong>{{ field }}:</strong> {{ entry[field] }}
+            <strong>{{ field }}:</strong>
+            <div v-if="field === 'nerve-label'" class="card-tags">
+              <div v-for="nerve in entry[field]" :key="nerve.nerve">
+                <el-tag type="primary" size="small">
+                  {{ nerve.nerve }}
+                </el-tag>
+                <el-tag type="primary" size="small" v-for="subNerve in nerve.subNerves">
+                  {{ subNerve }}
+                </el-tag>
+              </div>
+            </div>
+            <span v-else>{{ entry[field] }}</span>
           </div>
         </template>
       </div>
@@ -19,7 +30,7 @@ export default {
   name: "ConnectivityCard",
   data() {
     return {
-      displayFields: ["id"],
+      displayFields: ["id", "nerve-label"],
     };
   },
   props: {
@@ -90,4 +101,24 @@ export default {
   line-height: 1.5;
   letter-spacing: 1.05px;
 }
+
+.el-tag {
+  border-radius: 4px!important;
+  font-size: 0.75rem!important;
+  margin: 2px!important;
+  background: #f9f2fc!important;
+  border: 1px solid $app-primary-color!important;
+  color: $app-primary-color!important;
+}
+
+.card-tags {
+  overflow-y: scroll;
+  max-height: 4.1rem;
+
+  &::-webkit-scrollbar {
+    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
+  }
+  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
+  scrollbar-width: none; /* Hide scrollbar for Firefox */
+}
 </style>

package/src/components/ConnectivityExplorer.vue

@@ -22,7 +22,7 @@
         <el-button
           link
           class="el-button-link"
-          @click="openSearch([], '')"
+          @click="onResetClick"
           size="large"
         >
           Reset
@@ -133,7 +133,9 @@ 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";
@@ -244,9 +246,6 @@ export default {
         this.initLoading = false;
         this.numberOfHits = this.results.length;
         // knowledge is from the neuron click if there is 'ready' property
-        if (this.numberOfHits === 1 && !('ready' in this.results[0])) {
-          this.onConnectivityCollapseChange(this.results[0]);
-        }
         if (this.numberOfHits > 0 && ('ready' in this.results[0])) {
           this.$refs.filtersRef.checkShowAllBoxes();
           this.searchInput = '';
@@ -261,9 +260,12 @@ export default {
         JSON.stringify(newVal) !== JSON.stringify(oldVal) &&
         newVal.length === 1 && newVal[0].ready
       ) {
-        // if the changed property is connectivity source,
-        // or two different maps in split view, do not collapse
+        const hasValidFacet = this.filter.some(f => f.facet !== "Show all");
         if (
+          // card should not be expanded if only one entry and from neuron click
+          (this.numberOfHits === 1 && !this.searchInput && !hasValidFacet)||
+          // if the changed property is connectivity source,
+          // or two different maps in split view, do not collapse
           (
             newVal[0].connectivitySource !== oldVal[0].connectivitySource ||
             newVal[0].mapId !== oldVal[0].mapId
@@ -303,7 +305,6 @@ export default {
     },
     onConnectivityClicked: function (data) {
       this.searchInput = data.query;
-      this.filter = data.filter;
       this.searchAndFilterUpdate();
     },
     collapseChange:function (data) {
@@ -342,13 +343,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);
       }
     },
@@ -359,17 +360,50 @@ export default {
     },
     resetSearchIfNoActiveSearch: function() {
       const hasValidFacet = this.filter.some(f => f.facet !== "Show all");
-      if ((!this.searchInput && !hasValidFacet) || this.numberOfHits === 0) {
+      if (!this.searchInput && !hasValidFacet) {
         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) {
-        this.filter =
-          this.$refs.filtersRef.getHierarchicalValidatedFilters(filter);
+        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;
+          const itemLabelLowerCase = itemLabel.charAt(0).toLowerCase() + itemLabel.slice(1);
+          let message = '';
+          if (notFoundItem.term.toLowerCase() === 'origin') {
+            message = `There are no neuron populations beginning at <strong>${itemLabelLowerCase}</strong>.`;
+          } else if (notFoundItem.term.toLowerCase() === 'via') {
+            message = `There are no neuron populations that run through <strong>${itemLabelLowerCase}</strong>.`;
+          } else if (notFoundItem.term.toLowerCase() === 'destination') {
+            message = `There are no neuron populations terminating at <strong>${itemLabelLowerCase}</strong>.`;
+          } else {
+            message = `There are no neuron populations beginning, terminating, or running through <strong>${itemLabelLowerCase}</strong>.`
+          }
+          Message({
+            dangerouslyUseHTMLString: true,
+            message: message,
+            appendTo: this.$el,
+            showClose: true,
+            offset: 113,
+          });
+        });
+
+        if (notFoundItems.length) {
+          this.$emit('connectivity-explorer-reset', notFoundItems);
+        }
+
         //Facets provided but cannot find at least one valid
         //facet. Tell the users the search is invalid and reset
         //facets check boxes.
@@ -437,6 +471,7 @@ export default {
     searchAndFilterUpdate: function () {
       this.resetPageNavigation();
       this.searchKnowledge(this.filter, this.searchInput);
+      this.$refs.filtersRef.setCascader(this.filter);
       this.searchHistoryUpdate(this.filter, this.searchInput);
     },
     searchHistoryUpdate: function (filters, search) {
@@ -495,6 +530,12 @@ export default {
         }
       });
     },
+    getSearch: function () {
+      return this.searchInput;
+    },
+    getFilters: function () {
+      return this.filter;
+    },
   },
   mounted: function () {
     localStorage.removeItem('connectivity-active-view');
@@ -554,7 +595,7 @@ export default {
   transition: all 0.3s ease;
 
   .connectivity-card {
-    max-height: 200px;
+    max-height: 215px;
   }
   .connectivity-info {
     background-color: #f7faff;
@@ -567,6 +608,7 @@ export default {
   width: 298px !important;
   height: 40px;
   padding-right: 14px;
+  font-family: inherit;
 
   :deep(.el-input__inner) {
     font-family: inherit;
@@ -607,6 +649,24 @@ 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;
@@ -668,7 +728,6 @@ export default {
   background-color: transparent !important;
   padding: 2px !important;
   height: auto !important;
-  margin-left: 4px!important;
 
   &:hover {
     text-decoration-color: transparent;

package/src/components/ConnectivityInfo.vue

@@ -92,7 +92,7 @@
       <div class="block buttons-row">
         <span>Connectivity from:</span>
         <el-radio-group v-model="connectivitySource" @change="onConnectivitySourceChange">
-          <el-radio value="map">Map</el-radio>
+          <el-radio value="map" :disabled="noMapConnectivity">Map</el-radio>
           <el-radio value="sckan">SCKAN</el-radio>
         </el-radio-group>
         <el-button
@@ -110,6 +110,45 @@
       </div>
     </div>
 
+    <div v-if="entry['nerve-label']" class="block">
+      <div class="attribute-title-container">
+        <span class="attribute-title">Nerves</span>
+      </div>
+      <div v-for="(nerve, i) in entry['nerve-label']">
+        <div
+          class="attribute-content"
+          :origin-item-label="nerve.nerve"
+          :key="nerve.nerve"
+        >
+          <span>{{ capitalise(nerve.nerve) }}</span>
+        </div>
+        <div
+          v-for="(subNerve, i) in nerve.subNerves"
+          class="attribute-content"
+          style="margin-left: 1rem"
+          :origin-item-label="subNerve"
+          :key="subNerve"
+          @mouseenter="onConnectivityHovered(subNerve)"
+          @mouseleave="onConnectivityHovered()"
+        >
+          <el-popover
+            width="150"
+            trigger="hover"
+            :teleported="false"
+            popper-class="popover-origin-help"
+          >
+            <template #reference>
+              <el-icon class="magnify-glass" @click="onConnectivityClicked(subNerve)">
+                <el-icon-search />
+              </el-icon>
+            </template>
+            <span>Search sub nerve</span>
+          </el-popover>
+          <span>{{ capitalise(subNerve) }}</span>
+        </div>
+      </div>
+    </div>
+
     <div class="content-container content-container-connectivity" v-show="activeView === 'listView'">
       <connectivity-list
         v-loading="connectivityLoading"
@@ -228,7 +267,8 @@ export default {
       updatedCopyContent: '',
       activeView: 'listView',
       connectivityLoading: false,
-      connectivitySource: 'sckan',
+      connectivitySource: 'map', // sckan
+      noMapConnectivity: false,
       connectivityError: {},
       graphViewLoaded: false,
       connectivityFromMap: null,
@@ -277,7 +317,7 @@ export default {
       return this.entry.destinationsWithDatasets;
     },
     resources: function () {
-      return this.entry.hyperlinks;
+      return this.entry.hyperlinks || [];
     },
     sckanVersion: function () {
       return this.entry.knowledgeSource;
@@ -300,6 +340,7 @@ export default {
             this.graphViewLoaded = true;
           }
           this.connectivitySource = this.entry.connectivitySource;
+          this.noMapConnectivity = this.entry.noMapConnectivity;
           this.updateGraphConnectivity();
           this.connectivityLoading = false;
           // only emit to scroll when entire entry content changes
@@ -407,6 +448,15 @@ export default {
         return contentString;
       }
 
+      // Nerves
+      if (this.entry['nerve-label']?.length) {
+        const title = 'Nerves';
+        const nerves = this.entry['nerve-label'];
+        const nerveLabels = nerves.map(nerve => Object.values(nerve)).flat(Infinity);
+        const transformedNerves = transformData(title, nerveLabels);
+        contentArray.push(transformedNerves);
+      }
+      
       // Origins
       if (this.origins?.length) {
         const title = 'Origin';
@@ -471,6 +521,7 @@ export default {
     onConnectivityHovered: function (label) {
       const payload = {
         connectivityInfo: this.entry,
+        label: label,
         data: label ? this.getConnectivityDatasets(label) : [],
       };
       // type: to show error only for click event
@@ -528,19 +579,23 @@ 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) {
+          EventBus.emit('connectivity-source-change', {
+            entry: this.entry,
+            connectivitySource: "sckan",
+          });
           throw new Error(error);
         }
       }
@@ -915,4 +970,46 @@ export default {
     margin-top: -1.25rem;
   }
 }
+
+.attribute-content {
+  font-size: 14px;
+  font-weight: 500;
+  transition: color 0.25s ease;
+  position: relative;
+  cursor: default;
+  padding-left: 16px;
+
+  .magnify-glass {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:hover {
+    color: $app-primary-color;
+
+    .magnify-glass {
+      display: block;
+      padding-top: 4px;
+      cursor: pointer;
+    }
+  }
+
+  + .attribute-content {
+    &::before {
+      content: "";
+      width: 90%;
+      height: 1px;
+      background-color: var(--el-border-color);
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  &:last-of-type {
+    margin-bottom: 0.5em;
+  }
+}
 </style>

package/src/components/DatasetExplorer.vue

@@ -79,7 +79,9 @@ 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'
@@ -192,8 +194,20 @@ export default {
       this.resetPageNavigation()
       //Proceed normally if cascader is ready
       if (this.cascaderIsReady) {
-        this.filter =
-          this.$refs.filtersRef.getHierarchicalValidatedFilters(filter)
+        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,
+          });
+        });
+
         //Facets provided but cannot find at least one valid
         //facet. Tell the users the search is invalid and reset
         //facets check boxes.
@@ -416,7 +430,6 @@ export default {
               ? element['abi-contextual-information']
               : undefined,
           segmentation: element['mbf-segmentation'],
-          //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,
@@ -464,6 +477,12 @@ export default {
       this.filter = item.filters
       this.openSearch([...item.filters], item.search);
     },
+    getSearch: function () {
+      return this.searchInput
+    },
+    getFilters: function () {
+      return this.filter;
+    },
   },
   mounted: function () {
     // initialise algolia
@@ -564,6 +583,20 @@ 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

@@ -348,8 +348,6 @@ export default {
           } 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