@abi-software/map-side-bar 2.6.2-beta.0 → 2.6.3-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.6.2-beta.0",
+  "version": "2.6.3-beta.0",
   "files": [
     "dist/*",
     "src/*",

package/src/algolia/utils.js

@@ -40,6 +40,12 @@ export const facetPropPathMapping = [
     facetPropPath: 'attributes.subject.ageCategory.value',
     facetSubpropPath: 'attributes.subject.ageCategory.subcategory.name'
   },
+  {
+    label: 'Funding Program',
+    id: 'pennsieve.organization',
+    facetPropPath: 'pennsieve.organization.name',
+    facetSubpropPath: 'pennsieve.organization.subcategory.name'
+  },
 ]
 
 // Same as above, but these show on the sidebar filters
@@ -48,6 +54,7 @@ export const shownFilters = {
   'organisms.primary.species.name' : 'Species',
   'attributes.subject.sex.value' : 'Sex',
   'attributes.subject.ageCategory.value' : 'Age Categories',
+  'pennsieve.organization.name' : 'Funding Program',
   'item.types.name' : 'Data type',
 }
 
@@ -60,9 +67,9 @@ export function getFilters(selectedFacetArray=undefined) {
     return 'NOT item.published.status:embargo'
   }
 
-  // Switch the 'term' attribute to 'label' if 'label' does not exist 
+  // Switch the 'term' attribute to 'label' if 'label' does not exist
   selectedFacetArray.forEach(f=>f.label=f.facet)
-  
+
 
   let facets = removeShowAllFacets(selectedFacetArray)
 

package/src/components/ConnectivityInfo.vue

@@ -22,7 +22,13 @@
               </el-popover>
             </template>
           </div>
-          <div v-if="hasProvenanceTaxonomyLabel" class="subtitle">
+          <div
+            v-if="
+              entry.provenanceTaxonomyLabel &&
+              entry.provenanceTaxonomyLabel.length > 0
+            "
+            class="subtitle"
+          >
             {{ provSpeciesDescription }}
           </div>
         </div>
@@ -52,39 +58,7 @@
       </div>
     </div>
 
-    <div class="content-container neuron-connection-button" v-if="entry.neuronCuration">
-      <div class="block attribute-title-container">
-        <span class="attribute-title">Neuron Connection</span>
-      </div>
-      <div class="block">
-        <el-button 
-          v-if="hasOrigins" 
-          class="button" 
-          type="primary"
-          @click="showNeuronConnection('origins')"
-        >
-          Origins
-        </el-button>
-        <el-button
-          v-if="hasComponents" 
-          class="button" 
-          type="primary"
-          @click="showNeuronConnection('components')"
-        >
-          Components
-        </el-button>
-        <el-button 
-          v-if="hasDestinations" 
-          class="button" 
-          type="primary"
-          @click="showNeuronConnection('destinations')"
-        >
-          Destinations
-        </el-button>
-      </div>
-    </div>
-
-    <div class="content-container population-display" v-if="entry.neuronCuration">
+    <div class="content-container population-display">
       <div class="block attribute-title-container">
         <span class="attribute-title">Population Display</span>
       </div>
@@ -106,7 +80,7 @@
 
     <div class="content-container content-container-connectivity" v-show="activeView === 'listView'">
       {{ entry.paths }}
-      <div v-if="hasOrigins" class="block">
+      <div v-if="entry.origins && entry.origins.length > 0" class="block">
         <div class="attribute-title-container">
           <span class="attribute-title">Origin</span>
           <el-popover
@@ -121,6 +95,7 @@
             <span style="word-break: keep-all">
               <i>Origin</i> {{ originDescription }}
             </span>
+
           </el-popover>
         </div>
         <div
@@ -128,23 +103,16 @@
           class="attribute-content"
           :origin-item-label="origin"
           :key="origin"
+          @mouseenter="toggleConnectivityTooltip(origin, {show: true})"
+          @mouseleave="toggleConnectivityTooltip(origin, {show: false})"
         >
-          <span
-            @mouseenter="toggleConnectivityTooltip(origin, {show: true})"
-            @mouseleave="toggleConnectivityTooltip(origin, {show: false})"
-          >
-            {{ capitalise(origin) }}
-          </span>
-          <el-icon 
-
-            class="neuron-connection-icon" 
-            @click="showNeuronConnection('origins', origin)"
-          >
-            <el-icon-connection />
-          </el-icon>
+          {{ capitalise(origin) }}
         </div>
         <el-button
-          v-show="hasOriginsWithDatasets"
+          v-show="
+            entry.originsWithDatasets && entry.originsWithDatasets.length > 0 &&
+            shouldShowExploreButton(entry.originsWithDatasets)
+          "
           class="button"
           id="open-dendrites-button"
           @click="openDendrites"
@@ -152,7 +120,10 @@
           Explore origin data
         </el-button>
       </div>
-      <div v-if="hasComponents" class="block">
+      <div
+        v-if="entry.components && entry.components.length > 0"
+        class="block"
+      >
         <div class="attribute-title-container">
           <div class="attribute-title">Components</div>
         </div>
@@ -161,23 +132,16 @@
           class="attribute-content"
           :component-item-label="component"
           :key="component"
+          @mouseenter="toggleConnectivityTooltip(component, {show: true})"
+          @mouseleave="toggleConnectivityTooltip(component, {show: false})"
         >
-          <span
-            @mouseenter="toggleConnectivityTooltip(component, {show: true})"
-            @mouseleave="toggleConnectivityTooltip(component, {show: false})"
-          >
-            {{ capitalise(component) }}
-          </span>
-          <el-icon 
-
-            class="neuron-connection-icon" 
-            @click="showNeuronConnection('components', component)"
-          >
-            <el-icon-connection />
-          </el-icon>
+          {{ capitalise(component) }}
         </div>
       </div>
-      <div v-if="hasDestinations" class="block">
+      <div
+        v-if="entry.destinations && entry.destinations.length > 0"
+        class="block"
+      >
         <div class="attribute-title-container">
           <span class="attribute-title">Destination</span>
           <el-popover
@@ -199,28 +163,35 @@
           class="attribute-content"
           :destination-item-label="destination"
           :key="destination"
+          @mouseenter="toggleConnectivityTooltip(destination, {show: true})"
+          @mouseleave="toggleConnectivityTooltip(destination, {show: false})"
         >
-          <span
-            @mouseenter="toggleConnectivityTooltip(destination, {show: true})"
-            @mouseleave="toggleConnectivityTooltip(destination, {show: false})"
-          >
-            {{ capitalise(destination) }}
-          </span>
-          <el-icon 
-
-            class="neuron-connection-icon" 
-            @click="showNeuronConnection('destinations', destination)"
-          >
-            <el-icon-connection />
-          </el-icon>
+          {{ capitalise(destination) }}
         </div>
-        <el-button v-show="hasDestinationsWithDatasets" class="button" @click="openAxons"
+        <el-button
+          v-show="
+            entry.destinationsWithDatasets &&
+            entry.destinationsWithDatasets.length > 0 &&
+            shouldShowExploreButton(entry.destinationsWithDatasets)
+          "
+          class="button"
+          @click="openAxons"
         >
           Explore destination data
         </el-button>
       </div>
-      <div v-show="hasComponentsWithDatasets" class="block">
-        <el-button class="button" @click="openAll">
+      <div
+        v-show="
+          entry.componentsWithDatasets &&
+          entry.componentsWithDatasets.length > 0 &&
+          shouldShowExploreButton(entry.componentsWithDatasets)
+        "
+        class="block"
+      >
+        <el-button
+          class="button"
+          @click="openAll"
+        >
           Search for data on components
         </el-button>
       </div>
@@ -257,7 +228,6 @@ import {
   ArrowUp as ElIconArrowUp,
   ArrowDown as ElIconArrowDown,
   Warning as ElIconWarning,
-  Connection as ElIconConnection,
 } from '@element-plus/icons-vue'
 /* eslint-disable no-alert, no-console */
 import {
@@ -269,7 +239,8 @@ import {
 import EventBus from './EventBus.js'
 import {
   CopyToClipboard,
-  ConnectivityGraph
+  ConnectivityGraph,
+  ExternalResourceCard,
 } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
 
@@ -295,6 +266,7 @@ export default {
     ElIconArrowUp,
     ElIconArrowDown,
     ElIconWarning,
+    ExternalResourceCard,
     CopyToClipboard,
     ConnectivityGraph,
   },
@@ -353,45 +325,6 @@ export default {
     },
   },
   computed: {
-    hasProvenanceTaxonomyLabel: function () {
-      return (
-        this.entry.provenanceTaxonomyLabel &&
-        this.entry.provenanceTaxonomyLabel.length > 0
-      );
-    },
-    hasOrigins: function () {
-      return this.entry.origins && this.entry.origins.length > 0;
-    },
-    hasOriginsWithDatasets: function () {
-      return (
-        this.entry.originsWithDatasets &&
-        this.entry.originsWithDatasets.length > 0 &&
-        this.shouldShowExploreButton(this.entry.originsWithDatasets)
-      );
-    },
-    hasComponents: function () {
-      return this.entry.components && this.entry.components.length > 0;
-    },
-    hasComponentsWithDatasets: function () {
-      return (
-        this.entry.componentsWithDatasets &&
-        this.entry.componentsWithDatasets.length > 0 &&
-        this.shouldShowExploreButton(this.entry.componentsWithDatasets)
-      );
-    },
-    hasDestinations: function () {
-      return this.entry.destinations && this.entry.destinations.length > 0;
-    },
-    hasDestinationsWithDatasets: function () {
-      return (
-        this.entry.destinationsWithDatasets &&
-        this.entry.destinationsWithDatasets.length > 0 &&
-        this.shouldShowExploreButton(this.entry.destinationsWithDatasets)
-      );
-    },
-    updatedCopyContent: function () {
-      return this.getUpdateCopyContent();
-    },
     resources: function () {
       let resources = [];
       if (this.entry && this.entry.hyperlinks) {
@@ -421,13 +354,6 @@ export default {
     },
   },
   methods: {
-    showNeuronConnection: function (type, label = undefined) {
-      const data = label ? this.findConnectivityDatasets(label) : []
-      this.$emit('neuron-connection-change', {
-        type: type,
-        data: data
-      });
-    },
     titleCase: function (title) {
       return titleCase(title)
     },
@@ -591,29 +517,29 @@ export default {
 
       return contentArray.join('\n\n<br>');
     },
-    findConnectivityDatasets: function (label) {
+    toggleConnectivityTooltip: function (name, option) {
       const allWithDatasets = [
         ...this.entry.componentsWithDatasets,
         ...this.entry.destinationsWithDatasets,
         ...this.entry.originsWithDatasets,
       ];
-      const names = label.split(','); // some features have more than one value
-      let data = [];
-      names.forEach((n) => {
-        const foundData = allWithDatasets.find((a) =>
-          a.name.toLowerCase().trim() === n.toLowerCase().trim()
-        );
-        if (foundData) {
-          data.push({
-            id: foundData.id,
-            label: foundData.name
-          });
-        }
-      });
-      return data
-    },
-    toggleConnectivityTooltip: function (label, option) {
-      const data = option.show ? this.findConnectivityDatasets(label) : []
+      const names = name.split(','); // some features have more than one value
+      const data = [];
+      if (option.show) {
+        names.forEach((n) => {
+          const foundData = allWithDatasets.find((a) =>
+            a.name.toLowerCase().trim() === n.toLowerCase().trim()
+          );
+
+          if (foundData) {
+            data.push({
+              id: foundData.id,
+              label: foundData.name
+            });
+          }
+        });
+      }
+
       // type: to show error only for click event
       this.$emit('connectivity-component-click', data);
     },
@@ -825,8 +751,6 @@ export default {
 }
 
 .attribute-content {
-  display: flex;
-  justify-content: space-between;
   font-size: 14px;
   font-weight: 500;
   transition: color 0.25s ease;
@@ -852,11 +776,6 @@ export default {
   &:last-of-type {
     margin-bottom: 0.5em;
   }
-
-  .neuron-connection-icon {
-    padding: 4px;
-    cursor: pointer;
-  }
 }
 
 .popover-container {
@@ -922,19 +841,6 @@ export default {
   }
 }
 
-.neuron-connection-button {
-  display: flex;
-  flex: 1 1 auto !important;
-  flex-direction: row !important;
-  align-items: center;
-  justify-content: space-between;
-
-  .el-button + .el-button {
-    margin-top: 0 !important;
-    margin-left: 10px !important;
-  }
-}
-
 .population-display {
   display: flex;
   flex: 1 1 auto !important;

package/src/components/SearchFilters.vue

@@ -241,9 +241,12 @@ export default {
 
               // populate second level of options
               this.options[i].children.forEach((facetItem, j) => {
-                this.options[i].children[j].label = convertReadableLabel(
-                  facetItem.label
-                )
+                // Format labels except funding program
+                if (this.options[i].children[j].facetPropPath !== 'pennsieve.organization.name') {
+                  this.options[i].children[j].label = convertReadableLabel(
+                    facetItem.label
+                  )
+                }
                 this.options[i].children[j].value =
                   this.createCascaderItemValue(facet.label, facetItem.label)
                 if (
@@ -811,6 +814,7 @@ export default {
       this.setCascader(this.entry.filterFacets)
       this.cssMods()
       this.$emit('cascaderReady')
+      this.replaceCascader();
     })
   },
 }

package/src/components/SearchHistory.vue

@@ -436,6 +436,7 @@ export default {
   display: flex;
   align-items: center;
   gap: 6px;
+  transform: translateZ(0);
 }
 
 .search-tag.el-tag {

package/src/components/SideBar.vue

@@ -39,7 +39,6 @@
                 :ref="'connectivityTab_' + tab.id"
                 @show-connectivity="showConnectivity"
                 @connectivity-component-click="onConnectivityComponentClick"
-                @neuron-connection-change="showNeuronConnection"
               />
             </template>
             <template v-else-if="tab.type === 'annotation'">
@@ -196,9 +195,6 @@ export default {
     onConnectivityComponentClick: function (data) {
       this.$emit('connectivity-component-click', data);
     },
-    showNeuronConnection: function (data) {
-      this.$emit('neuron-connection-change', data);
-    },
     /**
      * This event is emitted when the search filters are changed.
      * @arg `obj` {data, id}

package/src/components.d.ts

@@ -23,7 +23,6 @@ declare module 'vue' {
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
-    ElIconConnection: typeof import('@element-plus/icons-vue')['Connection']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']

package/src/exampleConnectivityInput.js

@@ -285,6 +285,5 @@ export default {
         "Homo sapiens",
         "Canis lupus familiaris",
         "Domestic Pig"
-    ],
-    neuronCuration: true
+    ]
 }