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

package/src/components/ConnectivityInfo.vue

@@ -1,5 +1,27 @@
 <template>
   <div v-if="entry" class="main" v-loading="loading">
+    <div v-if="connectivityEntry.length > 1" class="button-container">
+      <el-popover
+        width="auto"
+        trigger="hover"
+        :teleported="false"
+      >
+        <template #reference>
+          <el-button class="button" @click="previous">Previous</el-button>
+        </template>
+        <span>{{ previousLabel }}</span>
+      </el-popover>
+      <el-popover
+        width="auto"
+        trigger="hover"
+        :teleported="false"
+      >
+        <template #reference>
+          <el-button class="button" @click="next">Next</el-button>
+        </template>
+        <span>{{ nextLabel }}</span>
+      </el-popover>
+    </div>
     <!-- Connectivity Info Title -->
     <div class="connectivity-info-title">
       <div class="title-content">
@@ -44,7 +66,7 @@
           popper-class="popover-map-pin"
         >
           <template #reference>
-            <el-button class="button-circle" circle @click="showConnectivity(entry)">
+            <el-button class="button-circle" circle @click="showConnectivity">
               <el-icon color="white">
                 <el-icon-location />
               </el-icon>
@@ -58,53 +80,152 @@
       </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>
-        </div>
-        <div>
-          <el-button
-            :class="activeView === 'listView' ? 'button' : 'el-button-secondary'"
-            @click="switchConnectivityView('listView')"
+        <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"
           >
-            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">
+              <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>
+        <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">
+          <div class="attribute-title">Components</div>
+        </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
-        :key="entry.featureId[0]"
-        :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'">
@@ -112,9 +233,8 @@
         <connectivity-graph
           :key="entry.featureId[0]"
           :entry="entry.featureId[0]"
-          :mapServer="flatmapApi"
+          :mapServer="envVars.FLATMAPAPI_LOCATION"
           :sckanVersion="sckanVersion"
-          :connectivityFromMap="connectivityFromMap"
           @tap-node="onTapNode"
           ref="connectivityGraphRef"
         />
@@ -132,6 +252,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,
@@ -143,11 +268,9 @@ import EventBus from './EventBus.js'
 import {
   CopyToClipboard,
   ConnectivityGraph,
-  ConnectivityList,
   ExternalResourceCard,
 } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
-import { processConnectivity } from './flatmapQueries.js';
 
 const titleCase = (str) => {
   return str.replace(/\w\S*/g, (t) => {
@@ -168,24 +291,17 @@ export default {
     Button,
     Container,
     Icon,
+    ElIconArrowUp,
+    ElIconArrowDown,
+    ElIconWarning,
     ExternalResourceCard,
     CopyToClipboard,
     ConnectivityGraph,
-    ConnectivityList,
   },
   props: {
-    entry: {
-      type: Object,
-      default: () => ({
-        destinations: [],
-        origins: [],
-        components: [],
-        destinationsWithDatasets: [],
-        originsWithDatasets: [],
-        componentsWithDatasets: [],
-        resource: undefined,
-        featuresAlert: undefined,
-      }),
+    connectivityEntry: {
+      type: Array,
+      default: [],
     },
     envVars: {
       type: Object,
@@ -195,44 +311,43 @@ 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: '',
+      entryIndex: 0
     }
   },
+  watch: {
+    availableAnatomyFacets: {
+      handler: function (val) {
+        this.convertFacetsToList(val)
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
   computed: {
+    entry: function () {
+      return this.connectivityEntry[this.entryIndex];
+    },
     resources: function () {
       let resources = [];
       if (this.entry && this.entry.hyperlinks) {
@@ -260,17 +375,85 @@ export default {
       text += ' species'
       return text
     },
+    sckanVersion: function () {
+      return this.entry.knowledgeSource
+    },
+    previousLabel: function () {
+      if (this.entryIndex === 0) {
+        return "This is the first item"
+      }
+      return this.connectivityEntry[this.entryIndex - 1].title
+    },
+    nextLabel: function () {
+      if (this.entryIndex === this.connectivityEntry.length - 1) {
+        return "This is the last item"
+      }
+      return this.connectivityEntry[this.entryIndex + 1].title
+    }
   },
   methods: {
+    previous: function () {
+      if (this.entryIndex !== 0) {
+        this.entryIndex = this.entryIndex - 1;
+      }
+    },
+    next: function () {
+      if (this.entryIndex !== this.connectivityEntry.length - 1) {
+        this.entryIndex = this.entryIndex + 1;
+      }
+    },
     titleCase: function (title) {
       return titleCase(title)
     },
     capitalise: function (text) {
       return capitalise(text)
     },
-    showConnectivity: function (entry) {
+    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 () {
       // move the map center to highlighted area
-      const featureIds = entry.featureId || [];
+      const featureIds = this.entry.featureId || [];
       // connected to flatmapvuer > moveMap(featureIds) function
       this.$emit('show-connectivity', featureIds);
     },
@@ -358,28 +541,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);
       }
@@ -399,9 +582,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 = [];
@@ -477,73 +660,9 @@ 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 (val) {
-      if (this.connectivitySource === 'map') {
-        this.getConnectionsFromMap(this.mapuuid, this.entry.featureId[0])
-          .then((response) => {
-            this.connectivityFromMap = response;
-            processConnectivity(this.flatmapApi, this.sckanVersion, response)
-              .then((result) => {
-                const mapSource = {
-                  origins: result.labels.origins,
-                  components: result.labels.components,
-                  destinations: result.labels.destinations,
-                  originsWithDatasets: result.withDatasets.originsWithDatasets,
-                  componentsWithDatasets: result.withDatasets.componentsWithDatasets,
-                  destinationsWithDatasets: result.withDatasets.destinationsWithDatasets,
-                }
-                this.updateConnectionsData(mapSource);
-              })
-          });
-      } else {
-        this.connectivityFromMap = null;
-        this.updateConnectionsData(this.entry);
-      }
-    },
-    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);
-    },
   },
   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.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);
     });
@@ -571,6 +690,11 @@ export default {
   }
 }
 
+.button-container {
+  display: flex;
+  justify-content: space-between;
+}
+
 .title {
   text-align: left;
   // width: 16em;
@@ -624,8 +748,17 @@ export default {
   }
 }
 
+.info,
 .alert {
   color: #8300bf;
+}
+
+.info {
+  transform: rotate(180deg);
+  margin-left: 8px;
+}
+
+.alert {
   margin-left: 5px;
   vertical-align: text-bottom;
 
@@ -685,6 +818,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;
@@ -741,12 +907,6 @@ export default {
     margin-top: 0 !important;
     margin-left: 10px !important;
   }
-
-  > div:first-child {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
 }
 
 .population-display {
@@ -757,23 +917,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 {
@@ -895,4 +1038,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>