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

package/src/components/ConnectivityInfo.vue

@@ -1,27 +1,5 @@
 <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">
@@ -66,7 +44,7 @@
           popper-class="popover-map-pin"
         >
           <template #reference>
-            <el-button class="button-circle" circle @click="showConnectivity">
+            <el-button class="button-circle" circle @click="showConnectivity(entry)">
               <el-icon color="white">
                 <el-icon-location />
               </el-icon>
@@ -80,161 +58,65 @@
       </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="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 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>
-        <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"
+        <div>
+          <el-button
+            :class="activeView === 'listView' ? 'button' : 'el-button-secondary'"
+            @click="switchConnectivityView('listView')"
           >
-            <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) }}
+            List view
+          </el-button>
+          <el-button
+            :class="activeView === 'graphView' ? 'button' : 'el-button-secondary'"
+            @click="switchConnectivityView('graphView')"
+          >
+            Graph view
+          </el-button>
         </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="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
+        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>
 
     <div class="content-container" v-show="activeView === 'graphView'">
       <template v-if="graphViewLoaded">
         <connectivity-graph
-          :key="entry.featureId[0]"
+          v-loading="connectivityLoading"
+          :key="connectivityGraphKey"
           :entry="entry.featureId[0]"
-          :mapServer="envVars.FLATMAPAPI_LOCATION"
+          :mapServer="flatmapApi"
           :sckanVersion="sckanVersion"
+          :connectivityFromMap="connectivityFromMap"
           @tap-node="onTapNode"
           ref="connectivityGraphRef"
         />
@@ -252,11 +134,6 @@
 </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,
@@ -268,6 +145,7 @@ import EventBus from './EventBus.js'
 import {
   CopyToClipboard,
   ConnectivityGraph,
+  ConnectivityList,
   ExternalResourceCard,
 } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
@@ -291,17 +169,24 @@ export default {
     Button,
     Container,
     Icon,
-    ElIconArrowUp,
-    ElIconArrowDown,
-    ElIconWarning,
     ExternalResourceCard,
     CopyToClipboard,
     ConnectivityGraph,
+    ConnectivityList,
   },
   props: {
-    connectivityEntry: {
-      type: Array,
-      default: [],
+    entry: {
+      type: Object,
+      default: () => ({
+        origins: [],
+        components: [],
+        destinations: [],
+        originsWithDatasets: [],
+        componentsWithDatasets: [],
+        destinationsWithDatasets: [],
+        resource: undefined,
+        featuresAlert: undefined,
+      }),
     },
     envVars: {
       type: Object,
@@ -311,43 +196,58 @@ 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: '',
-      entryIndex: 0
+      sckanVersion: '',
+      connectivitySource: 'sckan',
+      mapuuid: '',
+      mapId: '',
+      dualConnectionSource: false,
+      flatmapApi: '',
+      connectivityListKey: '',
+      connectivityGraphKey: '',
+      connectivityLoading: false,
     }
   },
   watch: {
-    availableAnatomyFacets: {
-      handler: function (val) {
-        this.convertFacetsToList(val)
-      },
-      immediate: true,
-      deep: true,
-    },
+    entry: function (newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.connectivityLoading = true;
+        this.updateKeys();
+        this.updateGraphConnectivity();
+        this.updateConnectionsData(newVal);
+        this.connectivityLoading = false;
+      }
+    }
   },
   computed: {
-    entry: function () {
-      return this.connectivityEntry[this.entryIndex];
-    },
     resources: function () {
       let resources = [];
       if (this.entry && this.entry.hyperlinks) {
@@ -375,90 +275,23 @@ 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)
     },
-    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 () {
+    showConnectivity: function (entry) {
       // move the map center to highlighted area
-      const featureIds = this.entry.featureId || [];
+      const featureIds = entry.featureId || [];
       // connected to flatmapvuer > moveMap(featureIds) function
       this.$emit('show-connectivity', featureIds);
     },
     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
@@ -541,28 +374,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);
       }
@@ -582,9 +415,9 @@ export default {
     },
     toggleConnectivityTooltip: function (name, option) {
       const allWithDatasets = [
-        ...this.entry.componentsWithDatasets,
-        ...this.entry.destinationsWithDatasets,
-        ...this.entry.originsWithDatasets,
+        ...this.componentsWithDatasets,
+        ...this.destinationsWithDatasets,
+        ...this.originsWithDatasets,
       ];
       const names = name.split(','); // some features have more than one value
       const data = [];
@@ -660,9 +493,118 @@ 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.updatedCopyContent = this.getUpdateCopyContent();
+    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;
+    }
+
     EventBus.on('connectivity-graph-error', (errorInfo) => {
       this.pushConnectivityError(errorInfo);
     });
@@ -690,11 +632,6 @@ export default {
   }
 }
 
-.button-container {
-  display: flex;
-  justify-content: space-between;
-}
-
 .title {
   text-align: left;
   // width: 16em;
@@ -748,17 +685,8 @@ export default {
   }
 }
 
-.info,
 .alert {
   color: #8300bf;
-}
-
-.info {
-  transform: rotate(180deg);
-  margin-left: 8px;
-}
-
-.alert {
   margin-left: 5px;
   vertical-align: text-bottom;
 
@@ -818,39 +746,6 @@ 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;
@@ -907,6 +802,12 @@ export default {
     margin-top: 0 !important;
     margin-left: 10px !important;
   }
+
+  > div:first-child {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
 }
 
 .population-display {
@@ -917,6 +818,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 {
@@ -1038,25 +956,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>