@abi-software/map-side-bar 2.7.2-beta.7 → 2.7.2

package/package.json

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

package/src/components/ConnectivityInfo.vue

@@ -58,65 +58,175 @@
       </div>
     </div>
 
-    <div
-      class="content-container population-display"
-      :class="dualConnectionSource ? 'population-display-toolbar' : ''"
-    >
+    <div class="content-container population-display">
       <div class="block attribute-title-container">
         <span class="attribute-title">Population Display</span>
       </div>
       <div class="block buttons-row">
-        <div v-if="dualConnectionSource">
-          <span>Connectivity from:</span>
-          <el-radio-group v-model="connectivitySource" @change="onConnectivitySourceChange">
-            <el-radio value="map">Map</el-radio>
-            <el-radio value="sckan">SCKAN</el-radio>
-          </el-radio-group>
+        <el-button
+          :class="activeView === 'listView' ? 'button' : 'el-button-secondary'"
+          @click="switchConnectivityView('listView')"
+        >
+          List view
+        </el-button>
+        <el-button
+          :class="activeView === 'graphView' ? 'button' : 'el-button-secondary'"
+          @click="switchConnectivityView('graphView')"
+        >
+          Graph view
+        </el-button>
+      </div>
+    </div>
+
+    <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">
+          <span class="attribute-title">Origin</span>
+          <el-popover
+            width="250"
+            trigger="hover"
+            :teleported="false"
+            popper-class="popover-origin-help"
+          >
+            <template #reference>
+              <el-icon class="info"><el-icon-warning /></el-icon>
+            </template>
+            <span style="word-break: keep-all">
+              <i>Origin</i> {{ originDescription }}
+            </span>
+
+          </el-popover>
+        </div>
+        <div
+          v-for="(origin, i) in entry.origins"
+          class="attribute-content"
+          :origin-item-label="origin"
+          :key="origin"
+          @mouseenter="toggleConnectivityTooltip(origin, {show: true})"
+          @mouseleave="toggleConnectivityTooltip(origin, {show: false})"
+        >
+          {{ capitalise(origin) }}
         </div>
-        <div>
-          <el-button
-            :class="activeView === 'listView' ? 'button' : 'el-button-secondary'"
-            @click="switchConnectivityView('listView')"
+        <el-button
+          v-show="
+            entry.originsWithDatasets && entry.originsWithDatasets.length > 0 &&
+            shouldShowExploreButton(entry.originsWithDatasets)
+          "
+          class="button"
+          id="open-dendrites-button"
+          @click="openDendrites"
+        >
+          Explore origin data
+        </el-button>
+      </div>
+      <div
+        v-if="entry.components && entry.components.length > 0"
+        class="block"
+      >
+        <div class="attribute-title-container">
+          <span class="attribute-title">Components</span>
+          <el-popover
+            width="250"
+            trigger="hover"
+            :teleported="false"
+            popper-class="popover-origin-help"
           >
-            List view
-          </el-button>
-          <el-button
-            :class="activeView === 'graphView' ? 'button' : 'el-button-secondary'"
-            @click="switchConnectivityView('graphView')"
+            <template #reference>
+              <el-icon class="info"><el-icon-warning /></el-icon>
+            </template>
+            <span style="word-break: keep-all">
+              The list is not in any specific order.<br>
+              Specific paths can be viewed using Graph View.
+            </span>
+          </el-popover>
+        </div>
+        <div
+          v-for="(component, i) in entry.components"
+          class="attribute-content"
+          :component-item-label="component"
+          :key="component"
+          @mouseenter="toggleConnectivityTooltip(component, {show: true})"
+          @mouseleave="toggleConnectivityTooltip(component, {show: false})"
+        >
+          {{ capitalise(component) }}
+        </div>
+      </div>
+      <div
+        v-if="entry.destinations && entry.destinations.length > 0"
+        class="block"
+      >
+        <div class="attribute-title-container">
+          <span class="attribute-title">Destination</span>
+          <el-popover
+            width="250"
+            trigger="hover"
+            :teleported="false"
+            popper-class="popover-origin-help"
           >
-            Graph view
-          </el-button>
+            <template #reference>
+              <el-icon class="info"><el-icon-warning /></el-icon>
+            </template>
+            <span style="word-break: keep-all">
+              <i>Destination</i> is where the axons terminate
+            </span>
+          </el-popover>
+        </div>
+        <div
+          v-for="(destination, i) in entry.destinations"
+          class="attribute-content"
+          :destination-item-label="destination"
+          :key="destination"
+          @mouseenter="toggleConnectivityTooltip(destination, {show: true})"
+          @mouseleave="toggleConnectivityTooltip(destination, {show: false})"
+        >
+          {{ capitalise(destination) }}
         </div>
+        <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="
+          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>
-    </div>
 
-    <div class="content-container content-container-connectivity" v-show="activeView === 'listView'">
-      <connectivity-list
-        v-loading="connectivityLoading"
-        :key="connectivityListKey"
-        :entry="entry"
-        :origins="origins"
-        :components="components"
-        :destinations="destinations"
-        :originsWithDatasets="originsWithDatasets"
-        :componentsWithDatasets="componentsWithDatasets"
-        :destinationsWithDatasets="destinationsWithDatasets"
-        :availableAnatomyFacets="availableAnatomyFacets"
-        :connectivityError="connectivityError"
-        @toggle-connectivity-tooltip="onToggleConnectivityTooltip"
-        @connectivity-action-click="onConnectivityActionClick"
-      ></connectivity-list>
+      <div class="connectivity-error-container">
+        <div class="connectivity-error" v-if="connectivityError">
+          <strong v-if="connectivityError.errorConnectivities">
+            {{ connectivityError.errorConnectivities }}
+          </strong>
+          {{ connectivityError.errorMessage }}
+        </div>
+      </div>
     </div>
 
     <div class="content-container" v-show="activeView === 'graphView'">
       <template v-if="graphViewLoaded">
         <connectivity-graph
-          v-loading="connectivityLoading"
-          :key="connectivityGraphKey"
+          :key="entry.featureId[0]"
           :entry="entry.featureId[0]"
-          :mapServer="flatmapApi"
+          :mapServer="envVars.FLATMAPAPI_LOCATION"
           :sckanVersion="sckanVersion"
-          :connectivityFromMap="connectivityFromMap"
           @tap-node="onTapNode"
           ref="connectivityGraphRef"
         />
@@ -134,6 +244,11 @@
 </template>
 
 <script>
+import {
+  ArrowUp as ElIconArrowUp,
+  ArrowDown as ElIconArrowDown,
+  Warning as ElIconWarning,
+} from '@element-plus/icons-vue'
 /* eslint-disable no-alert, no-console */
 import {
   ElButton as Button,
@@ -145,7 +260,6 @@ import EventBus from './EventBus.js'
 import {
   CopyToClipboard,
   ConnectivityGraph,
-  ConnectivityList,
   ExternalResourceCard,
 } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
@@ -169,21 +283,23 @@ export default {
     Button,
     Container,
     Icon,
+    ElIconArrowUp,
+    ElIconArrowDown,
+    ElIconWarning,
     ExternalResourceCard,
     CopyToClipboard,
     ConnectivityGraph,
-    ConnectivityList,
   },
   props: {
     entry: {
       type: Object,
       default: () => ({
+        destinations: [],
         origins: [],
         components: [],
-        destinations: [],
+        destinationsWithDatasets: [],
         originsWithDatasets: [],
         componentsWithDatasets: [],
-        destinationsWithDatasets: [],
         resource: undefined,
         featuresAlert: undefined,
       }),
@@ -196,56 +312,38 @@ export default {
       type: Array,
       default: () => [],
     },
-    useDOIFormatter: {
-      type: Boolean,
-      default: true,
-    },
   },
   data: function () {
     return {
       controller: undefined,
       activeSpecies: undefined,
+      pubmedSearchUrl: '',
       loading: false,
       activeView: 'listView',
+      facetList: [],
       showToolip: false,
       showDetails: false,
       originDescriptions: {
         motor: 'is the location of the initial cell body of the circuit',
         sensory: 'is the location of the initial cell body in the PNS circuit',
       },
-      origins: [],
-      originsWithDatasets: [],
-      components: [],
       componentsWithDatasets: [],
-      destinations: [],
-      destinationsWithDatasets: [],
-      connectivityFromMap: null,
       uberons: [{ id: undefined, name: undefined }],
       connectivityError: null,
       timeoutID: undefined,
       graphViewLoaded: false,
       updatedCopyContent: '',
       sckanVersion: '',
-      connectivitySource: 'sckan',
-      mapuuid: '',
-      mapId: '',
-      dualConnectionSource: false,
-      flatmapApi: '',
-      connectivityListKey: '',
-      connectivityGraphKey: '',
-      connectivityLoading: false,
     }
   },
   watch: {
-    entry: function (newVal, oldVal) {
-      if (newVal !== oldVal) {
-        this.connectivityLoading = true;
-        this.updateKeys();
-        this.updateGraphConnectivity();
-        this.updateConnectionsData(newVal);
-        this.connectivityLoading = false;
-      }
-    }
+    availableAnatomyFacets: {
+      handler: function (val) {
+        this.convertFacetsToList(val)
+      },
+      immediate: true,
+      deep: true,
+    },
   },
   computed: {
     resources: function () {
@@ -283,6 +381,49 @@ export default {
     capitalise: function (text) {
       return capitalise(text)
     },
+    openUrl: function (url) {
+      window.open(url, '_blank')
+    },
+    openAll: function () {
+      EventBus.emit('onConnectivityActionClick', {
+        type: 'Facets',
+        labels: this.entry.componentsWithDatasets.map((a) => a.name.toLowerCase()),
+      })
+    },
+    openAxons: function () {
+      EventBus.emit('onConnectivityActionClick', {
+        type: 'Facets',
+        labels: this.entry.destinationsWithDatasets.map((a) => a.name.toLowerCase()),
+      })
+    },
+    // shouldShowExploreButton: Checks if the feature is in the list of available anatomy facets
+    shouldShowExploreButton: function (features) {
+      for (let i = 0; i < features.length; i++) {
+        if (this.facetList.includes(features[i].name.toLowerCase())) {
+          return true
+        }
+      }
+      return false
+    },
+    // convertFacetsToList: Converts the available anatomy facets to a list for easy searching
+    convertFacetsToList: function (facets) {
+      facets.forEach((facet) => {
+        if(facet.children) {
+          this.convertFacetsToList(facet.children)
+        } else {
+          this.facetList.push(facet.label.toLowerCase())
+        }
+      })
+    },
+    openDendrites: function () {
+      EventBus.emit('onConnectivityActionClick', {
+        type: 'Facets',
+        labels: this.entry.originsWithDatasets.map((a) => a.name.toLowerCase()),
+      })
+    },
+    pubmedSearchUrlUpdate: function (val) {
+      this.pubmedSearchUrl = val
+    },
     showConnectivity: function (entry) {
       // move the map center to highlighted area
       const featureIds = entry.featureId || [];
@@ -291,7 +432,6 @@ export default {
     },
     switchConnectivityView: function (val) {
       this.activeView = val;
-      this.setState();
 
       if (val === 'graphView' && !this.graphViewLoaded) {
         // to load the connectivity graph only after the container is in view
@@ -374,28 +514,28 @@ export default {
       }
 
       // Origins
-      if (this.origins?.length) {
+      if (this.entry.origins?.length) {
         const title = 'Origin';
-        const origins = this.origins;
-        const originsWithDatasets = this.originsWithDatasets;
+        const origins = this.entry.origins;
+        const originsWithDatasets = this.entry.originsWithDatasets;
         const transformedOrigins = transformData(title, origins, originsWithDatasets);
         contentArray.push(transformedOrigins);
       }
 
       // Components
-      if (this.components?.length) {
+      if (this.entry.components?.length) {
         const title = 'Components';
-        const components = this.components;
-        const componentsWithDatasets = this.componentsWithDatasets;
+        const components = this.entry.components;
+        const componentsWithDatasets = this.entry.componentsWithDatasets;
         const transformedComponents = transformData(title, components, componentsWithDatasets);
         contentArray.push(transformedComponents);
       }
 
       // Destination
-      if (this.destinations?.length) {
+      if (this.entry.destinations?.length) {
         const title = 'Destination';
-        const destinations = this.destinations;
-        const destinationsWithDatasets = this.destinationsWithDatasets;
+        const destinations = this.entry.destinations;
+        const destinationsWithDatasets = this.entry.destinationsWithDatasets;
         const transformedDestinations = transformData(title, destinations, destinationsWithDatasets);
         contentArray.push(transformedDestinations);
       }
@@ -415,9 +555,9 @@ export default {
     },
     toggleConnectivityTooltip: function (name, option) {
       const allWithDatasets = [
-        ...this.componentsWithDatasets,
-        ...this.destinationsWithDatasets,
-        ...this.originsWithDatasets,
+        ...this.entry.componentsWithDatasets,
+        ...this.entry.destinationsWithDatasets,
+        ...this.entry.originsWithDatasets,
       ];
       const names = name.split(','); // some features have more than one value
       const data = [];
@@ -493,118 +633,10 @@ export default {
         this.connectivityError = null;
       }, ERROR_TIMEOUT);
     },
-    updateConnectionsData: function (source) {
-      this.origins = source.origins;
-      this.components = source.components;
-      this.destinations = source.destinations;
-      this.originsWithDatasets = source.originsWithDatasets;
-      this.componentsWithDatasets = source.componentsWithDatasets;
-      this.destinationsWithDatasets = source.destinationsWithDatasets;
-
-      this.updatedCopyContent = this.getUpdateCopyContent();
-    },
-    onConnectivitySourceChange: function (connectivitySource) {
-      const { featureId } = this.entry;
-
-      this.connectivityLoading = true;
-      this.setState();
-
-      if (this.activeView !== 'graphView') {
-        this.graphViewLoaded = false;
-      }
-
-      this.updateGraphConnectivity();
-      this.updateKeys();
-
-      EventBus.emit('connectivity-source-change', {
-        featureId: featureId,
-        connectivitySource: connectivitySource,
-      });
-    },
-    updateGraphConnectivity: function () {
-      if (this.connectivitySource === 'map') {
-        this.getConnectionsFromMap(this.mapuuid, this.entry.featureId[0])
-          .then((response) => {
-            this.connectivityFromMap = response;
-            this.connectivityLoading = false;
-          });
-      } else {
-        this.connectivityFromMap = null;
-        this.connectivityLoading = false
-      }
-    },
-    getConnectionsFromMap: async function (mapuuid, pathId) {
-      const url = this.flatmapApi + `flatmap/${mapuuid}/connectivity/${pathId}`;
-
-      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);
-      }
-    },
-    onToggleConnectivityTooltip: function (data) {
-      const {name, option} = data;
-      this.toggleConnectivityTooltip(name, option);
-    },
-    onConnectivityActionClick: function (data) {
-      EventBus.emit('onConnectivityActionClick', data);
-    },
-    /**
-     * Using two different keys for List and Graph
-     * because the graph needs to be in view to update
-     */
-    updateKeys: function () {
-      if (this.activeView === 'graphView') {
-        this.connectivityGraphKey = this.entry.featureId[0] + this.connectivitySource;
-      }
-      this.connectivityListKey = this.entry.featureId[0] + this.connectivitySource;
-    },
-    /**
-     * store active view and connectivity source
-     * to keep view between switching tabs
-     */
-    setState: function () {
-      localStorage.setItem('connectivity-active-view', this.activeView);
-      localStorage.setItem('connectivity-source', this.connectivitySource);
-    },
-    updateSettingsFromState: function () {
-      const activeView = localStorage.getItem('connectivity-active-view');
-      const connectivitySource = localStorage.getItem('connectivity-source');
-
-      if (activeView) {
-        this.activeView = activeView;
-      }
-
-      if (this.activeView === 'graphView') {
-        this.graphViewLoaded = true;
-      }
-
-      if (connectivitySource) {
-        this.connectivitySource = connectivitySource;
-      }
-    },
   },
   mounted: function () {
     this.sckanVersion = this.entry['knowledge-source'];
-    this.mapuuid = this.entry['mapuuid'];
-    this.mapId = this.entry['mapId'];
-    this.flatmapApi = this.envVars.FLATMAPAPI_LOCATION;
-
-    this.updateSettingsFromState();
-    this.updateKeys();
-    this.updateGraphConnectivity();
-    this.updateConnectionsData(this.entry);
-
-    // TODO: only rat flatmap has dual connections now
-    if (this.mapId === 'rat-flatmap') {
-      this.dualConnectionSource = true;
-    }
-
+    this.updatedCopyContent = this.getUpdateCopyContent();
     EventBus.on('connectivity-graph-error', (errorInfo) => {
       this.pushConnectivityError(errorInfo);
     });
@@ -685,8 +717,17 @@ export default {
   }
 }
 
+.info,
 .alert {
   color: #8300bf;
+}
+
+.info {
+  transform: rotate(180deg);
+  margin-left: 8px;
+}
+
+.alert {
   margin-left: 5px;
   vertical-align: text-bottom;
 
@@ -746,6 +787,39 @@ export default {
   text-transform: uppercase;
 }
 
+.attribute-content {
+  font-size: 14px;
+  font-weight: 500;
+  transition: color 0.25s ease;
+  position: relative;
+  cursor: default;
+
+  &:hover {
+    color: $app-primary-color;
+  }
+
+  + .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;
+  }
+}
+
+.popover-container {
+  height: 100%;
+  width: 100%;
+}
+
 .main {
   .el-button.is-round {
     border-radius: 4px;
@@ -802,12 +876,6 @@ export default {
     margin-top: 0 !important;
     margin-left: 10px !important;
   }
-
-  > div:first-child {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
 }
 
 .population-display {
@@ -818,23 +886,6 @@ export default {
   justify-content: space-between;
   border-bottom: 1px solid $app-primary-color;
   padding-bottom: 0.5rem !important;
-
-  &.population-display-toolbar {
-    flex-direction: column !important;
-    align-items: start;
-
-    .buttons-row {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-    }
-  }
-
-  .el-radio {
-    margin-right: 1rem;
-  }
 }
 
 .tooltip-container {
@@ -956,4 +1007,25 @@ export default {
     margin-top: -1.25rem;
   }
 }
+
+.connectivity-error-container {
+  position: sticky;
+  bottom: 0.5rem;
+  width: 100%;
+  min-height: 31px; // placeholder
+  margin-top: -10px !important;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.connectivity-error {
+  width: fit-content;
+  font-size: 12px;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--el-color-error-light-9);
+  border-radius: var(--el-border-radius-small);
+  border: 1px solid var(--el-color-error);
+}
 </style>

package/src/components/SearchHistory.vue

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