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

package/src/components/ConnectivityInfo.vue

@@ -5,9 +5,7 @@
       <div class="title-content">
         <div class="block" v-if="entry.title">
           <div class="title">
-            <span @click="connectivityClicked(entry.featureId[0])">
-              {{ capitalise(entry.title) }}
-            </span>
+            {{ capitalise(entry.title) }}
             <template v-if="entry.featuresAlert">
               <el-popover
                 width="250"
@@ -24,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>
@@ -54,152 +58,53 @@
       </div>
     </div>
 
-    <div class="content-container population-display">
+    <div
+      class="content-container population-display"
+      :class="dualConnectionSource ? 'population-display-toolbar' : ''"
+    >
       <div class="block attribute-title-container">
         <span class="attribute-title">Population Display</span>
       </div>
       <div class="block buttons-row">
-        <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="hasOrigins" 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"
-        >
-          <span
-            @mouseenter="connectivityHovered(origin)"
-            @mouseleave="connectivityHovered()"
-          >
-            {{ capitalise(origin) }}
-          </span>
-          <el-icon 
-            class="connectivity-search-icon" 
-            @click="connectivityClicked(entry.featureId[0], 'Origins', origin)"
-          >
-            <el-icon-search />
-          </el-icon>
-        </div>
-        <el-button
-          v-show="hasOriginsWithDatasets"
-          class="button"
-          id="open-dendrites-button"
-          @click="openDendrites"
-        >
-          Explore origin data
-        </el-button>
-      </div>
-      <div v-if="hasComponents" 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"
-        >
-          <span
-            @mouseenter="connectivityHovered(component)"
-            @mouseleave="connectivityHovered()"
-          >
-            {{ capitalise(component) }}
-          </span>
-          <el-icon 
-            class="connectivity-search-icon" 
-            @click="connectivityClicked(entry.featureId[0], 'Components', component)"
-          >
-            <el-icon-search />
-          </el-icon>
+        <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>
-      <div v-if="hasDestinations" 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"
-          >
-            <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"
-        >
-          <span
-            @mouseenter="connectivityHovered(destination)"
-            @mouseleave="connectivityHovered()"
+        <div>
+          <el-button
+            :class="activeView === 'listView' ? 'button' : 'el-button-secondary'"
+            @click="switchConnectivityView('listView')"
           >
-            {{ capitalise(destination) }}
-          </span>
-          <el-icon 
-            class="connectivity-search-icon" 
-            @click="connectivityClicked(entry.featureId[0], 'Destinations', destination)"
+            List view
+          </el-button>
+          <el-button
+            :class="activeView === 'graphView' ? 'button' : 'el-button-secondary'"
+            @click="switchConnectivityView('graphView')"
           >
-            <el-icon-search />
-          </el-icon>
+            Graph view
+          </el-button>
         </div>
-        <el-button v-show="hasDestinationsWithDatasets" class="button" @click="openAxons"
-        >
-          Explore destination data
-        </el-button>
-      </div>
-      <div v-show="hasComponentsWithDatasets" class="block">
-        <el-button class="button" @click="openAll">
-          Search for data on components
-        </el-button>
       </div>
+    </div>
 
-      <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 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>
 
     <div class="content-container" v-show="activeView === 'graphView'">
@@ -207,8 +112,9 @@
         <connectivity-graph
           :key="entry.featureId[0]"
           :entry="entry.featureId[0]"
-          :mapServer="envVars.FLATMAPAPI_LOCATION"
+          :mapServer="flatmapApi"
           :sckanVersion="sckanVersion"
+          :connectivityFromMap="connectivityFromMap"
           @tap-node="onTapNode"
           ref="connectivityGraphRef"
         />
@@ -216,22 +122,17 @@
     </div>
 
     <div class="content-container content-container-references" v-if="resources.length">
-      <ExternalResourceCard
+      <external-resource-card
         :resources="resources"
         @references-loaded="onReferencesLoaded"
         @show-reference-connectivities="onShowReferenceConnectivities"
-      />
+      ></external-resource-card>
     </div>
   </div>
 </template>
 
 <script>
-  /* eslint-disable no-alert, no-console */
-import {
-  Warning as ElIconWarning,
-  Location as ElIconLocation,
-  Search as ElIconSearch,
-} from '@element-plus/icons-vue'
+/* eslint-disable no-alert, no-console */
 import {
   ElButton as Button,
   ElContainer as Container,
@@ -242,9 +143,11 @@ import EventBus from './EventBus.js'
 import {
   CopyToClipboard,
   ConnectivityGraph,
-  ExternalResourceCard
+  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) => {
@@ -265,12 +168,10 @@ export default {
     Button,
     Container,
     Icon,
-    ElIconWarning,
-    ElIconLocation,
-    ElIconSearch,
+    ExternalResourceCard,
     CopyToClipboard,
     ConnectivityGraph,
-    ExternalResourceCard
+    ConnectivityList,
   },
   props: {
     entry: {
@@ -294,75 +195,44 @@ 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: '',
     }
   },
-  watch: {
-    availableAnatomyFacets: {
-      handler: function (val) {
-        this.convertFacetsToList(val)
-      },
-      immediate: true,
-      deep: true,
-    },
-  },
   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)
-      );
-    },
     resources: function () {
       let resources = [];
       if (this.entry && this.entry.hyperlinks) {
@@ -398,49 +268,6 @@ 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 || [];
@@ -449,6 +276,7 @@ export default {
     },
     switchConnectivityView: function (val) {
       this.activeView = val;
+
       if (val === 'graphView' && !this.graphViewLoaded) {
         // to load the connectivity graph only after the container is in view
         this.$nextTick(() => {
@@ -459,7 +287,7 @@ export default {
     onTapNode: function (data) {
       // save selected state for list view
       const name = data.map(t => t.label).join(', ');
-      this.connectivityHovered(name);
+      this.toggleConnectivityTooltip(name, {show: true});
     },
     onShowReferenceConnectivities: function (refSource) {
       this.$emit('show-reference-connectivities', refSource);
@@ -530,28 +358,28 @@ export default {
       }
 
       // Origins
-      if (this.entry.origins?.length) {
+      if (this.origins?.length) {
         const title = 'Origin';
-        const origins = this.entry.origins;
-        const originsWithDatasets = this.entry.originsWithDatasets;
+        const origins = this.origins;
+        const originsWithDatasets = this.originsWithDatasets;
         const transformedOrigins = transformData(title, origins, originsWithDatasets);
         contentArray.push(transformedOrigins);
       }
 
       // Components
-      if (this.entry.components?.length) {
+      if (this.components?.length) {
         const title = 'Components';
-        const components = this.entry.components;
-        const componentsWithDatasets = this.entry.componentsWithDatasets;
+        const components = this.components;
+        const componentsWithDatasets = this.componentsWithDatasets;
         const transformedComponents = transformData(title, components, componentsWithDatasets);
         contentArray.push(transformedComponents);
       }
 
       // Destination
-      if (this.entry.destinations?.length) {
+      if (this.destinations?.length) {
         const title = 'Destination';
-        const destinations = this.entry.destinations;
-        const destinationsWithDatasets = this.entry.destinationsWithDatasets;
+        const destinations = this.destinations;
+        const destinationsWithDatasets = this.destinationsWithDatasets;
         const transformedDestinations = transformData(title, destinations, destinationsWithDatasets);
         contentArray.push(transformedDestinations);
       }
@@ -569,48 +397,31 @@ export default {
 
       return contentArray.join('\n\n<br>');
     },
-    getConnectivityDatasets: function (label) {
+    toggleConnectivityTooltip: function (name, option) {
       const allWithDatasets = [
-        ...this.entry.componentsWithDatasets,
-        ...this.entry.destinationsWithDatasets,
-        ...this.entry.originsWithDatasets,
+        ...this.componentsWithDatasets,
+        ...this.destinationsWithDatasets,
+        ...this.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
-    },
-    connectivityHovered: function (label) {
-      const data = label ? this.getConnectivityDatasets(label) : [];
-      // type: to show error only for click event
-      this.$emit('connectivity-hovered', data);
-    },
-    connectivityClicked: function (id, type, label) {
-      let payload = {
-        query: id,
-        filter: [],
-        data: label ? this.getConnectivityDatasets(label) : [],
-      };
-      if (type && label) {
-        payload.filter.push({
-          AND: undefined,
-          facet: type,
-          facetPropPath: 'flatmap.connectivity.source',
-          facetSubPropPath: undefined,
-          term: 'Connectivity',
+      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
+            });
+          }
         });
-      };
-      this.$emit('connectivity-clicked', payload);
+      }
+
+      // type: to show error only for click event
+      this.$emit('connectivity-component-click', data);
     },
     getErrorConnectivities: function (errorData) {
       const errorDataToEmit = [...new Set(errorData)];
@@ -666,10 +477,73 @@ 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.updatedCopyContent = this.getUpdateCopyContent();
+    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;
+    }
+
     EventBus.on('connectivity-graph-error', (errorInfo) => {
       this.pushConnectivityError(errorInfo);
     });
@@ -706,10 +580,6 @@ export default {
   font-weight: bold;
   padding-bottom: 8px;
   color: $app-primary-color;
-
-  span:hover {
-    cursor: pointer;
-  }
 }
 
 .block + .block {
@@ -754,17 +624,8 @@ export default {
   }
 }
 
-.info,
 .alert {
   color: #8300bf;
-}
-
-.info {
-  transform: rotate(180deg);
-  margin-left: 8px;
-}
-
-.alert {
   margin-left: 5px;
   vertical-align: text-bottom;
 
@@ -824,51 +685,6 @@ export default {
   text-transform: uppercase;
 }
 
-.attribute-content {
-  display: flex;
-  justify-content: space-between;
-  font-size: 14px;
-  font-weight: 500;
-  transition: color 0.25s ease;
-  position: relative;
-  cursor: default;
-
-  .connectivity-search-icon {
-    display: none;
-  }
-
-  &:hover {
-    color: $app-primary-color;
-
-    .connectivity-search-icon {
-      padding-top: 4px;
-      cursor: pointer;
-      display: block;
-    }
-  }
-
-  +.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;
@@ -925,18 +741,11 @@ export default {
     margin-top: 0 !important;
     margin-left: 10px !important;
   }
-}
 
-.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;
+  > div:first-child {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
   }
 }
 
@@ -948,6 +757,23 @@ 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 {
@@ -1069,25 +895,4 @@ 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>