@abi-software/map-utilities 1.4.3-isan.0 → 1.5.0-beta.0

package/src/components/Tooltip/ProvenancePopup.vue

@@ -1,37 +1,11 @@
 <template>
-  <div v-if="entry" class="main" v-loading="loading">
-    <div v-if="tooltipEntry.length > 1" class="toggle-button">
-      <el-popover width="auto" trigger="hover" :teleported="false">
-        <template #reference>
-          <el-button
-            class="button"
-            @click="previous"
-            :disabled="this.entryIndex === 0"
-          >
-            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"
-            :disabled="this.entryIndex === this.tooltipEntry.length - 1"
-          >
-            Next
-          </el-button>
-        </template>
-        <span>{{ nextLabel }}</span>
-      </el-popover>
-    </div>
-    <div class="block" v-if="entry.title">
-      <div class="title">{{ capitalise(entry.title) }}</div>
+  <div v-if="tooltipEntry" class="main" v-loading="loading">
+    <div class="block" v-if="tooltipEntry.title">
+      <div class="title">{{ capitalise(tooltipEntry.title) }}</div>
       <div
         v-if="
-          entry.provenanceTaxonomyLabel &&
-          entry.provenanceTaxonomyLabel.length > 0
+          tooltipEntry.provenanceTaxonomyLabel &&
+          tooltipEntry.provenanceTaxonomyLabel.length > 0
         "
         class="subtitle"
       >
@@ -39,9 +13,9 @@
       </div>
     </div>
     <div class="block" v-else>
-      <div class="title">{{ entry.featureId }}</div>
+      <div class="title">{{ tooltipEntry.featureId }}</div>
     </div>
-    <div v-if="entry.featuresAlert" class="attribute-title-container">
+    <div v-if="featuresAlert" class="attribute-title-container">
       <span class="attribute-title">Alert</span>
       <el-popover
         width="250"
@@ -53,7 +27,7 @@
           <el-icon class="info"><el-icon-warning /></el-icon>
         </template>
         <span style="word-break: keep-all">
-          {{ entry.featuresAlert }}
+          {{ featuresAlert }}
         </span>
       </el-popover>
     </div>
@@ -77,159 +51,243 @@
     </div>
     <transition name="slide-fade">
       <div v-show="showDetails" class="content-container scrollbar">
-        <connectivity-list
-          :key="entry.featureId[0]"
-          :entry="entry"
-          :origins="origins"
-          :components="components"
-          :destinations="destinations"
-          :originsWithDatasets="originsWithDatasets"
-          :componentsWithDatasets="componentsWithDatasets"
-          :destinationsWithDatasets="destinationsWithDatasets"
-          :availableAnatomyFacets="availableAnatomyFacets"
-          @connectivity-action-click="onConnectivityActionClick"
-        />
-        <external-resource-card
-          v-if="resources.length"
-          :resources="resources"
-        />
+        {{ tooltipEntry.paths }}
+        <div v-if="tooltipEntry.origins && tooltipEntry.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 tooltipEntry.origins"
+            class="attribute-content"
+            :origin-item-label="origin"
+            :key="origin"
+          >
+            {{ capitalise(origin) }}
+            <div v-if="i != tooltipEntry.origins.length - 1" class="separator"></div>
+          </div>
+          <el-button
+            v-show="
+              tooltipEntry.originsWithDatasets && tooltipEntry.originsWithDatasets.length > 0
+            "
+            class="button"
+            id="open-dendrites-button"
+            @click="openDendrites"
+          >
+            Explore origin data
+          </el-button>
+        </div>
+        <div
+          v-if="tooltipEntry.components && tooltipEntry.components.length > 0"
+          class="block"
+        >
+          <div class="attribute-title-container">
+            <div class="attribute-title">Components</div>
+          </div>
+          <div
+            v-for="(component, i) in tooltipEntry.components"
+            class="attribute-content"
+            :component-item-label="component"
+            :key="component"
+          >
+            {{ capitalise(component) }}
+            <div
+              v-if="i != tooltipEntry.components.length - 1"
+              class="separator"
+            ></div>
+          </div>
+        </div>
+        <div
+          v-if="tooltipEntry.destinations && tooltipEntry.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"
+            >
+              <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 tooltipEntry.destinations"
+            class="attribute-content"
+            :destination-item-label="destination"
+            :key="destination"
+          >
+            {{ capitalise(destination) }}
+            <div
+              v-if="i != tooltipEntry.destinations.length - 1"
+              class="separator"
+            ></div>
+          </div>
+          <el-button
+            v-show="
+              tooltipEntry.destinationsWithDatasets &&
+              tooltipEntry.destinationsWithDatasets.length > 0
+            "
+            class="button"
+            @click="openAxons"
+          >
+            Explore destination data
+          </el-button>
+        </div>
+
+        <el-button
+          v-show="
+            tooltipEntry.componentsWithDatasets &&
+            tooltipEntry.componentsWithDatasets.length > 0
+          "
+          class="button"
+          @click="openAll"
+        >
+          Search for data on components
+        </el-button>
+
+        <external-resource-card :resources="resources" v-if="resources.length"></external-resource-card>
       </div>
     </transition>
   </div>
 </template>
 
 <script>
-import {
-  ArrowUp as ElIconArrowUp,
-  ArrowDown as ElIconArrowDown,
-  Warning as ElIconWarning,
-} from "@element-plus/icons-vue";
 import EventBus from "../EventBus.js";
-import ConnectivityList from "../ConnectivityList/ConnectivityList.vue";
-import ExternalResourceCard from "./ExternalResourceCard.vue";
-import { capitalise, titleCase } from "../utilities.js";
+
+const titleCase = (str) => {
+  return str.replace(/\w\S*/g, (t) => {
+    return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase();
+  });
+};
+
+const capitalise = function (str) {
+  if (str) return str.charAt(0).toUpperCase() + str.slice(1);
+  return "";
+};
 
 export default {
   name: "ProvenancePopup",
-  components: {
-    ElIconArrowUp,
-    ElIconArrowDown,
-    ElIconWarning,
-    ConnectivityList,
-    ExternalResourceCard,
-  },
   props: {
     tooltipEntry: {
-      type: Array,
-      default: [],
+      type: Object,
+      default: () => ({
+        destinations: [],
+        origins: [],
+        components: [],
+        destinationsWithDatasets: [],
+        originsWithDatasets: [],
+        componentsWithDatasets: [],
+        resource: undefined,
+      }),
     },
   },
+  inject: ["getFeaturesAlert"],
   data: function () {
     return {
+      controller: undefined,
+      activeSpecies: undefined,
+      pubmedSearchUrl: "",
       loading: false,
+      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",
       },
-      entryIndex: 0,
-      availableAnatomyFacets: [],
+      componentsWithDatasets: [],
+      uberons: [{ id: undefined, name: undefined }],
     };
   },
   computed: {
-    entry: function () {
-      return this.tooltipEntry[this.entryIndex];
+    featuresAlert() {
+      return this.getFeaturesAlert();
     },
-    previousLabel: function () {
-      if (this.entryIndex === 0) {
-        return "This is the first item. Click 'Next' to see more information.";
+    resources: function () {
+      let resources = [];
+      if (this.tooltipEntry && this.tooltipEntry.hyperlinks) {
+        resources = this.tooltipEntry.hyperlinks;
       }
-      return this.tooltipEntry[this.entryIndex - 1]?.title;
+      return resources;
     },
-    nextLabel: function () {
-      if (this.entryIndex === this.tooltipEntry.length - 1) {
-        return "This is the last item. Click 'Previous' to see more information.";
+    originDescription: function () {
+      if (
+        this.tooltipEntry &&
+        this.tooltipEntry.title &&
+        this.tooltipEntry.title.toLowerCase().includes("motor")
+      ) {
+        return this.originDescriptions.motor;
+      } else {
+        return this.originDescriptions.sensory;
       }
-      return this.tooltipEntry[this.entryIndex + 1]?.title;
     },
     provSpeciesDescription: function () {
       let text = "Studied in";
-      this.entry.provenanceTaxonomyLabel.forEach((label) => {
+      this.tooltipEntry.provenanceTaxonomyLabel.forEach((label) => {
         text += ` ${label},`;
       });
       text = text.slice(0, -1); // remove last comma
       text += " species";
       return text;
     },
-    origins: function () {
-      return this.entry.origins;
-    },
-    components: function () {
-      return this.entry.components;
-    },
-    destinations: function () {
-      return this.entry.destinations;
-    },
-    originsWithDatasets: function () {
-      return this.entry.originsWithDatasets;
-    },
-    componentsWithDatasets: function () {
-      return this.entry.componentsWithDatasets;
-    },
-    destinationsWithDatasets: function () {
-      return this.entry.destinationsWithDatasets;
-    },
-    resources: function () {
-      return this.entry.hyperlinks;
-    },
-  },
-  mounted: function () {
-    this.loadAvailableAnatomyFacets();
   },
   methods: {
-    previous: function () {
-      if (this.entryIndex !== 0) {
-        this.entryIndex = this.entryIndex - 1;
-      }
-    },
-    next: function () {
-      if (this.entryIndex !== this.tooltipEntry.length - 1) {
-        this.entryIndex = this.entryIndex + 1;
-      }
-    },
     titleCase: function (title) {
       return titleCase(title);
     },
     capitalise: function (text) {
       return capitalise(text);
     },
-    onConnectivityActionClick: function (data) {
-      EventBus.emit("onActionClick", data);
+    openUrl: function (url) {
+      window.open(url, "_blank");
     },
-    // Load available anatomy facets from the local storage if available.
-    // The data is from Algolia in Sidebar.
-    loadAvailableAnatomyFacets: function () {
-      const availableAnatomyFacets = localStorage.getItem(
-        "available-anatomy-facets"
-      );
-      if (availableAnatomyFacets) {
-        this.availableAnatomyFacets = JSON.parse(availableAnatomyFacets);
-      }
+    openAll: function () {
+      EventBus.emit("onActionClick", {
+        type: "Facets",
+        labels: this.tooltipEntry.componentsWithDatasets.map((a) => a.name),
+      });
+    },
+    openAxons: function () {
+      EventBus.emit("onActionClick", {
+        type: "Facets",
+        labels: this.tooltipEntry.destinationsWithDatasets.map((a) => a.name),
+      });
+    },
+    openDendrites: function () {
+      EventBus.emit("onActionClick", {
+        type: "Facets",
+        labels: this.tooltipEntry.originsWithDatasets.map((a) => a.name),
+      });
+    },
+    pubmedSearchUrlUpdate: function (val) {
+      this.pubmedSearchUrl = val;
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.toggle-button {
-  display: flex;
-  justify-content: space-between;
-
-  .is-disabled {
-    color: #fff !important;
-    background-color: #ac76c5 !important;
-    border: 1px solid #ac76c5 !important;
-  }
+.display {
+  width: 44px;
+  word-break: normal;
 }
 
 .title {
@@ -251,12 +309,43 @@ export default {
   }
 }
 
+.pub {
+  width: 16rem;
+}
+
+.icon {
+  right: 0px;
+  position: absolute;
+  top: 10px;
+}
+
+.icon:hover {
+  cursor: pointer;
+}
+
+:deep(.popover-origin-help.el-popover) {
+  text-transform: none !important; // need to overide the tooltip text transform
+  border: 1px solid $app-primary-color;
+  .el-popper__arrow {
+    &:before {
+      border-color: $app-primary-color;
+      background-color: #ffffff;
+    }
+  }
+}
+
 .info {
   transform: rotate(180deg);
   color: #8300bf;
   margin-left: 8px;
 }
 
+.separator {
+  width: 90%;
+  height: 1px;
+  background-color: #bfbec2;
+}
+
 .hide {
   color: $app-primary-color;
   cursor: pointer;
@@ -264,6 +353,17 @@ export default {
   margin-top: 3px;
 }
 
+.slide-fade-enter-active {
+  transition: opacity 0.5s, transform 0.5s;
+}
+.slide-fade-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+}
+.slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active in <2.1.8 */ {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
 .main {
   font-size: 14px;
   text-align: left;
@@ -296,6 +396,11 @@ export default {
   }
 }
 
+.popover-container {
+  height: 100%;
+  width: 100%;
+}
+
 .main {
   .el-button.is-round {
     border-radius: 4px;
@@ -311,11 +416,9 @@ export default {
   font-size: 14px !important;
   background-color: $app-primary-color;
   color: #fff;
-
   & + .button {
     margin-top: 10px !important;
   }
-
   &:hover {
     color: #fff !important;
     background: #ac76c5 !important;
@@ -323,6 +426,27 @@ export default {
   }
 }
 
+.tooltip-container {
+  &::after,
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    flex-shrink: 0;
+  }
+  .tooltip {
+    &::after {
+      display: none;
+    }
+    &::before {
+      display: none;
+    }
+  }
+}
+
 .maplibregl-popup-anchor-bottom {
   .tooltip-container {
     &::after,
@@ -330,12 +454,10 @@ export default {
       top: 100%;
       border-width: 12px;
     }
-
     &::after {
       margin-top: -1px;
       border-color: rgb(255, 255, 255) transparent transparent transparent;
     }
-
     &::before {
       margin: 0 auto;
       border-color: $app-primary-color transparent transparent transparent;
@@ -350,12 +472,10 @@ export default {
       top: -24px;
       border-width: 12px;
     }
-
     &::after {
       margin-top: 1px;
       border-color: transparent transparent rgb(255, 255, 255) transparent;
     }
-
     &::before {
       margin: 0 auto;
       border-color: transparent transparent $app-primary-color transparent;
@@ -371,10 +491,6 @@ export default {
   .block {
     padding-top: 0.5em;
   }
-
-  .connectivity-list {
-    padding-top: 1rem;
-  }
 }
 
 .scrollbar::-webkit-scrollbar-track {
@@ -393,4 +509,10 @@ export default {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
   background-color: #979797;
 }
+
+/* Fix for chrome bug where under triangle pops up above one on top of it  */
+.selector:not(*:root),
+.tooltip-container::after {
+  top: 99.4%;
+}
 </style>

package/src/components/Tooltip/RelatedConnectivitiesButton.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="reference-button-container">
+    <el-button
+      class="reference-icon-button"
+      size="small"
+      @click="$emit('show-related-connectivities', resource)"
+    >
+      Show related connectivities
+    </el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RelatedConnectivitiesButton",
+  props: {
+    resource: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.reference-button-container {
+  margin-top: 0.5rem;
+}
+
+.reference-icon-button {
+  color: $app-primary-color !important;
+  background-color: #f9f2fc !important;
+  border-color: $app-primary-color !important;
+
+  &:hover {
+    background-color: transparent !important;
+  }
+}
+</style>

package/src/components/Tooltip/Tooltip.vue

@@ -19,7 +19,7 @@ export default {
   name: "Tooltip",
   props: {
     tooltipEntry: {
-      type: Array,
+      type: Object,
     },
     annotationDisplay: {
       type: Boolean,

package/src/components/index.js

@@ -1,7 +1,6 @@
 import AnnotationPopup from "./Tooltip/AnnotationPopup.vue";
 import CreateTooltipContent from "./Tooltip/CreateTooltipContent.vue";
 import ConnectivityGraph from "./ConnectivityGraph/ConnectivityGraph.vue";
-import ConnectivityList from "./ConnectivityList/ConnectivityList.vue";
 import CopyToClipboard from "./CopyToClipboard/CopyToClipboard.vue";
 import DrawToolbar from "./DrawToolbar/DrawToolbar.vue";
 import HelpModeDialog from "./HelpModeDialog/HelpModeDialog.vue";
@@ -13,7 +12,6 @@ export {
   AnnotationPopup,
   CreateTooltipContent,
   ConnectivityGraph,
-  ConnectivityList,
   CopyToClipboard,
   DrawToolbar,
   HelpModeDialog,

package/src/components/utilities.js

@@ -4,12 +4,6 @@ const capitalise = term => {
   return term;
 };
 
-const titleCase = (str) => {
-  return str.replace(/\w\S*/g, (t) => {
-    return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase();
-  });
-};
-
 const convertNodeToObject = (node) => {
   const obj = {};
 
@@ -56,7 +50,6 @@ const delay = (ms) => {
 
 export {
   capitalise,
-  titleCase,
   xmlToJSON,
   delay,
 };

package/src/components.d.ts

@@ -10,7 +10,6 @@ declare module 'vue' {
     AnnotationPopup: typeof import('./components/Tooltip/AnnotationPopup.vue')['default']
     ConnectionDialog: typeof import('./components/DrawToolbar/ConnectionDialog.vue')['default']
     ConnectivityGraph: typeof import('./components/ConnectivityGraph/ConnectivityGraph.vue')['default']
-    ConnectivityList: typeof import('./components/ConnectivityList/ConnectivityList.vue')['default']
     CopyToClipboard: typeof import('./components/CopyToClipboard/CopyToClipboard.vue')['default']
     CreateTooltipContent: typeof import('./components/Tooltip/CreateTooltipContent.vue')['default']
     DrawToolbar: typeof import('./components/DrawToolbar/DrawToolbar.vue')['default']
@@ -45,6 +44,7 @@ declare module 'vue' {
     ExternalResourceCard: typeof import('./components/Tooltip/ExternalResourceCard.vue')['default']
     HelpModeDialog: typeof import('./components/HelpModeDialog/HelpModeDialog.vue')['default']
     ProvenancePopup: typeof import('./components/Tooltip/ProvenancePopup.vue')['default']
+    RelatedConnectivitiesButton: typeof import('./components/Tooltip/RelatedConnectivitiesButton.vue')['default']
     Tooltip: typeof import('./components/Tooltip/Tooltip.vue')['default']
     TreeControls: typeof import('./components/TreeControls/TreeControls.vue')['default']
   }