@abi-software/map-side-bar 2.5.3-beta.1 → 2.5.3-beta.11

package/package.json

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

package/src/components/ConnectivityInfo.vue

@@ -2,7 +2,7 @@
   <div v-if="entry" class="main" v-loading="loading">
     <!-- Connectivity Info Title -->
     <div class="connectivity-info-title">
-      <div>
+      <div class="title-content">
         <div class="block" v-if="entry.title">
           <div class="title">
             {{ capitalise(entry.title) }}
@@ -35,9 +35,6 @@
         <div class="block" v-else>
           <div class="title">{{ entry.featureId }}</div>
         </div>
-        <div class="block" v-if="resources.length">
-          <external-resource-card :resources="resources"></external-resource-card>
-        </div>
       </div>
       <div class="title-buttons">
         <el-popover
@@ -81,7 +78,7 @@
       </div>
     </div>
 
-    <div class="content-container content-container-connectivity" v-if="activeView === 'listView'">
+    <div class="content-container content-container-connectivity" v-show="activeView === 'listView'">
       {{ entry.paths }}
       <div v-if="entry.origins && entry.origins.length > 0" class="block">
         <div class="attribute-title-container">
@@ -209,13 +206,19 @@
       </div>
     </div>
 
-    <div class="content-container" v-if="activeView === 'graphView'">
-      <connectivity-graph
-        :entry="entry.featureId[0]"
-        :mapServer="envVars.FLATMAPAPI_LOCATION"
-        @tap-node="onTapNode"
-        ref="connectivityGraphRef"
-      />
+    <div class="content-container" v-show="activeView === 'graphView'">
+      <template v-if="graphViewLoaded">
+        <connectivity-graph
+          :entry="entry.featureId[0]"
+          :mapServer="envVars.FLATMAPAPI_LOCATION"
+          @tap-node="onTapNode"
+          ref="connectivityGraphRef"
+        />
+      </template>
+    </div>
+
+    <div class="content-container" v-if="resources.length">
+      <external-resource-card :resources="resources"></external-resource-card>
     </div>
   </div>
 </template>
@@ -232,9 +235,13 @@ import {
   ElContainer as Container,
   ElIcon as Icon,
 } from 'element-plus'
-import ExternalResourceCard from './ExternalResourceCard.vue'
+
 import EventBus from './EventBus.js'
-import { CopyToClipboard, ConnectivityGraph } from '@abi-software/map-utilities';
+import {
+  CopyToClipboard,
+  ConnectivityGraph,
+  ExternalResourceCard,
+} from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
 
 const titleCase = (str) => {
@@ -304,6 +311,7 @@ export default {
       uberons: [{ id: undefined, name: undefined }],
       connectivityError: null,
       timeoutID: undefined,
+      graphViewLoaded: false,
     }
   },
   watch: {
@@ -406,13 +414,11 @@ export default {
     switchConnectivityView: function (val) {
       this.activeView = val;
 
-      if (val === 'graphView') {
-        const connectivityGraphRef = this.$refs.connectivityGraphRef;
-        if (connectivityGraphRef && connectivityGraphRef.$el) {
-          connectivityGraphRef.$el.scrollIntoView({
-            behavior: 'smooth',
-          });
-        }
+      if (val === 'graphView' && !this.graphViewLoaded) {
+        // to load the connectivity graph only after the container is in view
+        this.$nextTick(() => {
+          this.graphViewLoaded = true;
+        });
       }
     },
     onTapNode: function (data) {
@@ -442,21 +448,6 @@ export default {
         contentArray.push(`<div>${this.provSpeciesDescription}</div>`);
       }
 
-      // PubMed URL
-      if (this.resources?.length) {
-        const pubmedContents = [];
-        this.resources.forEach((resource) => {
-          let pubmedContent = '';
-          if (resource.id === 'pubmed') {
-            pubmedContent += `<div><strong>PubMed URL:</strong></div>`;
-            pubmedContent += '\n';
-            pubmedContent += `<div><a href="${resource.url}">${resource.url}</a></div>`;
-          }
-          pubmedContents.push(pubmedContent);
-        });
-        contentArray.push(pubmedContents.join('\n\n<br>'));
-      }
-
       // entry.paths
       if (this.entry.paths) {
         contentArray.push(`<div>${this.entry.paths}</div>`);
@@ -512,6 +503,14 @@ export default {
         contentArray.push(transformedDestinations);
       }
 
+      // References
+      if (this.resources?.length) {
+        const referenceContents = [];
+        referenceContents.push(`<div><strong>References</strong></div>`);
+        // TODO: to get references after contents are loaded.
+        contentArray.push(referenceContents.join('\n\n<br>'));
+      }
+
       return contentArray.join('\n\n<br>');
     },
     toggleConnectivityTooltip: function (name, option) {
@@ -616,6 +615,11 @@ export default {
   flex-direction: row;
   justify-content: space-between;
   gap: 1rem;
+
+  .title-content {
+    flex: 1 0 0%;
+    max-width: 85%;
+  }
 }
 
 .title {
@@ -921,7 +925,10 @@ export default {
 
 .title-buttons {
   display: flex;
+  flex: 1 0 0%;
+  max-width: 15%;
   flex-direction: row;
+  justify-content: end;
   gap: 0.5rem;
 
   :deep(.copy-clipboard-button) {

package/src/components/SearchFilters.vue

@@ -469,14 +469,7 @@ export default {
               facetSubPropPath: facetSubPropPath, // will be used for filters if we are at the third level of the cascader
             }
           })
-
-        // if all checkboxes are checked
-        // there has no filter values
-        const filtersLength = filters.filter((item) => item.facet !== 'Show all');
-        if (!filtersLength.length) {
-          filters = [];
-        }
-
+        
         this.$emit('loading', true) // let sidebarcontent wait for the requests
         this.$emit('filterResults', filters) // emit filters for apps above sidebar
         this.setCascader(filterKeys) //update our cascader v-model if we modified the event
@@ -638,7 +631,7 @@ export default {
           let filters = createFilter(e)
           return filters
         })
-
+        
         // Unforttunately the cascader is very particular about it's v-model
         //   to get around this we create a clone of it and use this clone for adding our boolean information
         this.cascadeSelectedWithBoolean = filterFacets.map((e) => {