@abi-software/map-utilities 1.0.0-beta.1 → 1.0.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.1-beta.0",
   "files": [
     "dist/*",
     "src/*",
@@ -29,7 +29,6 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/gallery": "^1.1.0",
     "@abi-software/svg-sprite": "^1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
     "element-plus": "^2.7.3",

package/src/App.vue

@@ -124,19 +124,19 @@ function onActionClick(value) {
 /**
  * Tooltip
  */
-const tooltipType = ref("");
-const provenanceEntry = ref({});
+const tooltipDisplay = ref(false);
+const tooltipEntry = ref({});
 const featuresAlert = ref(undefined);
+const annotationDisplay = ref(false);
 const annotationEntry = ref({});
-const imageEntry = ref([]);
 
 provide(/* key */ "getFeaturesAlert", /* value */ () => featuresAlert.value);
 provide(/* key */ "$annotator", /* value */ undefined);
 provide(/* key */ "userApiKey", /* value */ undefined);
 
-function addProvenanceEntry() {
-  tooltipType.value = "provenance";
-  provenanceEntry.value = {
+function addTooltipEntry() {
+  tooltipDisplay.value = true;
+  tooltipEntry.value = {
     destinations: [null],
     origins: [null],
     components: ["pudendal nerve"],
@@ -160,12 +160,13 @@ function addProvenanceEntry() {
     provenanceTaxonomyLabel: ["Homo sapiens"],
   };
 }
-function removeProvenanceEntry() {
-  tooltipType.value = "";
-  provenanceEntry.value = {};
+function removeTooltipEntry() {
+  tooltipDisplay.value = false;
+  tooltipEntry.value = {};
 }
 function addAnnotationEntry() {
-  tooltipType.value = "annotation";
+  tooltipDisplay.value = true;
+  annotationDisplay.value = true;
   annotationEntry.value = {
     id: "digestive_8-1",
     featureId: 4958,
@@ -178,97 +179,13 @@ function addAnnotationEntry() {
   };
 }
 function removeAnnotationEntry() {
-  tooltipType.value = "";
+  tooltipDisplay.value = false;
+  annotationDisplay.value = false;
   annotationEntry.value = {};
 }
 function commitAnnotationEvent(value) {
   console.log("🚀 ~ commitAnnotationEvent ~ value:", value);
 }
-function addImageEntry() {
-  tooltipType.value = "image";
-  imageEntry.value = [
-    {
-      anatomy: [
-        {
-          curie: "",
-          matchingStatus: "Exact Match",
-          name: "stomach",
-        },
-      ],
-      datasetId: "22",
-      datasetVersion: "2",
-      link: "https://sparc.biolucida.net/image?c=Mzg3Ny1jb2wtMTUw",
-      resource: {
-        share_link: "https://sparc.biolucida.net/image?c=Mzg3Ny1jb2wtMTUw",
-      },
-      s3uri: "s3://prd-sparc-discover50-use1/22/",
-      species: [
-        {
-          species: {
-            curie: "NCBITaxon:9825",
-            matchingStatus: "approved",
-            name: "Pig",
-            originalName: "Domestic Pig",
-            parents: [
-              {
-                curie: "ilx:0739765",
-                name: "Pig",
-              },
-            ],
-          },
-          strain: {
-            name: "Large White / Landrace crossbred pig",
-          },
-        },
-      ],
-      thumbnail: "https://sparc.biolucida.net/api/v1/thumbnail/3877",
-      title: "SPARC Image 1",
-      type: "image",
-    },
-    {
-      anatomy: [
-        {
-          curie: "",
-          matchingStatus: "Exact Match",
-          name: "stomach",
-        },
-      ],
-      datasetId: "22",
-      datasetVersion: "2",
-      link: "https://sparc.biolucida.net/image?c=Mzg3Ny1jb2wtMTUw",
-      resource: {
-        share_link: "https://sparc.biolucida.net/image?c=Mzg3Ny1jb2wtMTUw",
-      },
-      s3uri: "s3://prd-sparc-discover50-use1/22/",
-      species: [
-        {
-          species: {
-            curie: "NCBITaxon:9825",
-            matchingStatus: "approved",
-            name: "Pig",
-            originalName: "Domestic Pig",
-            parents: [
-              {
-                curie: "ilx:0739765",
-                name: "Pig",
-              },
-            ],
-          },
-          strain: {
-            name: "Large White / Landrace crossbred pig",
-          },
-        },
-      ],
-      thumbnail: "https://sparc.biolucida.net/api/v1/thumbnail/3877",
-      title: "SPARC Image 2",
-      type: "image",
-    },
-  ];
-}
-function removeImageEntry() {
-  tooltipType.value = "";
-  imageEntry.value = [];
-}
 /**
  * TreeControls
  */
@@ -312,7 +229,7 @@ function setColourField(treeData, nodeData, activeColour) {
 function setColour(nodeData, value) {
   if (nodeData && nodeData.isPrimitives) {
     const activeColour = value ? value : nodeData.defaultColour;
-    setColourField(treeDataEntry.value, nodeData, activeColour);
+    setColourField(treeDataEntry.value, nodeData, activeColour)
   }
 }
 function checkAll(value) {
@@ -463,29 +380,21 @@ function changeHover(value) {
       </el-col>
       <el-col>
         <el-button
-          v-show="
-            tooltipType === '' ||
-            (tooltipType === 'provenance' &&
-              Object.keys(provenanceEntry).length === 0)
-          "
-          @click="addProvenanceEntry"
+          v-show="!annotationDisplay"
+          @click="addTooltipEntry"
           size="small"
         >
-          Add Provenance Entry
+          Add Tooltip Entry
         </el-button>
         <el-button
-          v-show="Object.keys(provenanceEntry).length > 0"
-          @click="removeProvenanceEntry"
+          v-show="Object.keys(tooltipEntry).length > 0"
+          @click="removeTooltipEntry"
           size="small"
         >
-          Remove Provenance Entry
+          Remove Tooltip Entry
         </el-button>
         <el-button
-          v-show="
-            tooltipType === '' ||
-            (tooltipType === 'annotation' &&
-              Object.keys(annotationEntry).length === 0)
-          "
+          v-show="!Object.keys(tooltipEntry).length > 0"
           @click="addAnnotationEntry"
           size="small"
         >
@@ -498,23 +407,6 @@ function changeHover(value) {
         >
           Remove Annotation Entry
         </el-button>
-        <el-button
-          v-show="
-            tooltipType === '' ||
-            (tooltipType === 'image' && Object.keys(imageEntry).length === 0)
-          "
-          @click="addImageEntry"
-          size="small"
-        >
-          Add Image Entry
-        </el-button>
-        <el-button
-          v-show="Object.keys(imageEntry).length > 0"
-          @click="removeImageEntry"
-          size="small"
-        >
-          Remove Image Entry
-        </el-button>
       </el-col>
     </el-row>
     <el-row>
@@ -522,18 +414,10 @@ function changeHover(value) {
         <h3>TreeControls - {{ mapType }}</h3>
       </el-col>
       <el-col>
-        <el-button
-          v-show="mapType === 'scaffold'"
-          @click="switchTreeEntry('flatmap')"
-          size="small"
-        >
+        <el-button v-show="mapType==='scaffold'" @click="switchTreeEntry('flatmap')" size="small">
           Display Flatmap Tree
         </el-button>
-        <el-button
-          v-show="mapType === 'flatmap'"
-          @click="switchTreeEntry('scaffold')"
-          size="small"
-        >
+        <el-button v-show="mapType==='flatmap'" @click="switchTreeEntry('scaffold')" size="small">
           Display Scaffold Tree
         </el-button>
       </el-col>
@@ -575,12 +459,11 @@ function changeHover(value) {
       @finish-help-mode="onFinishHelpMode"
     />
     <Tooltip
-      v-show="tooltipType"
+      v-show="tooltipDisplay"
       class="tooltip"
-      :tooltipType="tooltipType"
-      :provenanceEntry="provenanceEntry"
+      :tooltipEntry="tooltipEntry"
+      :annotationDisplay="annotationDisplay"
       :annotationEntry="annotationEntry"
-      :imageEntry="imageEntry"
       @annotation="commitAnnotationEvent"
       @onActionClick="onActionClick"
     />
@@ -615,12 +498,10 @@ function changeHover(value) {
 .options-container {
   text-align: center;
 }
-
 .help-mode-dialog {
   position: absolute;
   top: 50%;
 }
-
 .tooltip {
   width: 400px;
   position: absolute;

package/src/components/CopyToClipboard/CopyToClipboard.vue

@@ -0,0 +1,146 @@
+<template>
+  <el-tooltip
+    :content="textLabel"
+    placement="bottom"
+    :hide-after="autoHideTimeout"
+    effect="clipboard-tooltip"
+    @hide="resetSettings"
+  >
+    <el-button
+      class="copy-clipboard-button"
+      :class="theme"
+      size="small"
+      @click="copyToClipboard"
+    >
+      <el-icon :color="iconColor">
+        <el-icon-copy-document />
+      </el-icon>
+      <span class="visually-hidden">{{ textLabel }}</span>
+    </el-button>
+  </el-tooltip>
+</template>
+
+<script>
+const labelBefore = 'Copy to clipboard';
+const labelAfter = 'Copied!';
+const appPrimaryColor = '#8300bf';
+
+export default {
+  name: 'CopyToClipboard',
+  props: {
+    content: {
+      type: String,
+      default: '',
+    },
+    /**
+     * Theme 'primary' or 'dark' or any name not 'light'
+     * will show primary button color.
+     */
+    theme: {
+      type: String,
+      default: 'light',
+    },
+  },
+  data: function () {
+    return {
+      textLabel: labelBefore,
+      autoHideTimeout: 0,
+      iconColor: appPrimaryColor,
+    };
+  },
+  mounted: function () {
+    if (this.theme !== 'light') {
+      this.iconColor = 'white';
+    }
+  },
+  methods: {
+    copyToClipboard: async function () {
+      let copiedSuccessfully = true;
+      this.autoHideTimeout = 600;
+
+      try {
+        await navigator.clipboard.writeText(this.content);
+      } catch (err) {
+        console.error(
+          "Error when trying to use navigator.clipboard.writeText()",
+          err
+        );
+        copiedSuccessfully = false;
+      }
+
+      if (copiedSuccessfully) {
+        this.textLabel = labelAfter;
+      } else {
+        this.textLabel = 'Error trying to copy to clipboard!';
+      }
+    },
+    resetSettings: function () {
+      this.autoHideTimeout = 0;
+      this.textLabel = labelBefore;
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .copy-clipboard-button {
+    margin-left: 0px !important;
+    margin-top: 0px !important;
+    padding: 0.25rem;
+    font-size: 14px !important;
+    transition: all 0.25s ease;
+
+    &,
+    &:focus,
+    &:active {
+      color: #fff !important;
+      background: $app-primary-color;
+      border-color: $app-primary-color !important;
+    }
+
+    &:hover {
+      background: #ac76c5 !important;
+      border-color: #ac76c5 !important;
+    }
+
+    &.light {
+      &,
+      &:focus,
+      &:active {
+        color: $app-primary-color !important;
+        background: transparent;
+        border-color: transparent !important;
+      }
+
+      &:hover {
+        background: #f3e6f9 !important;
+        border-color: #f3e6f9 !important;
+      }
+    }
+  }
+
+  .visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+</style>
+
+<style lang="scss">
+  .el-popper.is-clipboard-tooltip {
+    padding: 4px 10px;
+    font-family: Asap;
+    background: #f3ecf6 !important;
+    border: 1px solid $app-primary-color;
+
+    & .el-popper__arrow::before {
+      border: 1px solid;
+      border-color: $app-primary-color;
+      background: #f3ecf6;
+    }
+  }
+</style>

package/src/components/Tooltip/ProvenancePopup.vue

@@ -1,11 +1,11 @@
 <template>
-  <div v-if="provenanceEntry" class="main" v-loading="loading">
-    <div class="block" v-if="provenanceEntry.title">
-      <div class="title">{{ capitalise(provenanceEntry.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="
-          provenanceEntry.provenanceTaxonomyLabel &&
-          provenanceEntry.provenanceTaxonomyLabel.length > 0
+          tooltipEntry.provenanceTaxonomyLabel &&
+          tooltipEntry.provenanceTaxonomyLabel.length > 0
         "
         class="subtitle"
       >
@@ -13,7 +13,7 @@
       </div>
     </div>
     <div class="block" v-else>
-      <div class="title">{{ provenanceEntry.featureId }}</div>
+      <div class="title">{{ tooltipEntry.featureId }}</div>
     </div>
     <div v-if="featuresAlert" class="attribute-title-container">
       <span class="attribute-title">Alert</span>
@@ -51,8 +51,8 @@
     </div>
     <transition name="slide-fade">
       <div v-show="showDetails" class="content-container scrollbar">
-        {{ provenanceEntry.paths }}
-        <div v-if="provenanceEntry.origins && provenanceEntry.origins.length > 0" class="block">
+        {{ 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
@@ -70,17 +70,17 @@
             </el-popover>
           </div>
           <div
-            v-for="(origin, i) in provenanceEntry.origins"
+            v-for="(origin, i) in tooltipEntry.origins"
             class="attribute-content"
             :origin-item-label="origin"
             :key="origin"
           >
             {{ capitalise(origin) }}
-            <div v-if="i != provenanceEntry.origins.length - 1" class="separator"></div>
+            <div v-if="i != tooltipEntry.origins.length - 1" class="separator"></div>
           </div>
           <el-button
             v-show="
-              provenanceEntry.originsWithDatasets && provenanceEntry.originsWithDatasets.length > 0
+              tooltipEntry.originsWithDatasets && tooltipEntry.originsWithDatasets.length > 0
             "
             class="button"
             id="open-dendrites-button"
@@ -90,27 +90,27 @@
           </el-button>
         </div>
         <div
-          v-if="provenanceEntry.components && provenanceEntry.components.length > 0"
+          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 provenanceEntry.components"
+            v-for="(component, i) in tooltipEntry.components"
             class="attribute-content"
             :component-item-label="component"
             :key="component"
           >
             {{ capitalise(component) }}
             <div
-              v-if="i != provenanceEntry.components.length - 1"
+              v-if="i != tooltipEntry.components.length - 1"
               class="separator"
             ></div>
           </div>
         </div>
         <div
-          v-if="provenanceEntry.destinations && provenanceEntry.destinations.length > 0"
+          v-if="tooltipEntry.destinations && tooltipEntry.destinations.length > 0"
           class="block"
         >
           <div class="attribute-title-container">
@@ -130,21 +130,21 @@
             </el-popover>
           </div>
           <div
-            v-for="(destination, i) in provenanceEntry.destinations"
+            v-for="(destination, i) in tooltipEntry.destinations"
             class="attribute-content"
             :destination-item-label="destination"
             :key="destination"
           >
             {{ capitalise(destination) }}
             <div
-              v-if="i != provenanceEntry.destinations.length - 1"
+              v-if="i != tooltipEntry.destinations.length - 1"
               class="separator"
             ></div>
           </div>
           <el-button
             v-show="
-              provenanceEntry.destinationsWithDatasets &&
-              provenanceEntry.destinationsWithDatasets.length > 0
+              tooltipEntry.destinationsWithDatasets &&
+              tooltipEntry.destinationsWithDatasets.length > 0
             "
             class="button"
             @click="openAxons"
@@ -155,8 +155,8 @@
 
         <el-button
           v-show="
-            provenanceEntry.componentsWithDatasets &&
-            provenanceEntry.componentsWithDatasets.length > 0
+            tooltipEntry.componentsWithDatasets &&
+            tooltipEntry.componentsWithDatasets.length > 0
           "
           class="button"
           @click="openAll"
@@ -187,7 +187,7 @@ const capitalise = function (str) {
 export default {
   name: "ProvenancePopup",
   props: {
-    provenanceEntry: {
+    tooltipEntry: {
       type: Object,
       default: () => ({
         destinations: [],
@@ -200,7 +200,7 @@ export default {
       }),
     },
   },
-  // inject: ["getFeaturesAlert"],
+  inject: ["getFeaturesAlert"],
   data: function () {
     return {
       controller: undefined,
@@ -219,21 +219,20 @@ export default {
   },
   computed: {
     featuresAlert() {
-      // return this.getFeaturesAlert();
-      return ""
+      return this.getFeaturesAlert();
     },
     resources: function () {
       let resources = [];
-      if (this.provenanceEntry && this.provenanceEntry.hyperlinks) {
-        resources = this.provenanceEntry.hyperlinks;
+      if (this.tooltipEntry && this.tooltipEntry.hyperlinks) {
+        resources = this.tooltipEntry.hyperlinks;
       }
       return resources;
     },
     originDescription: function () {
       if (
-        this.provenanceEntry &&
-        this.provenanceEntry.title &&
-        this.provenanceEntry.title.toLowerCase().includes("motor")
+        this.tooltipEntry &&
+        this.tooltipEntry.title &&
+        this.tooltipEntry.title.toLowerCase().includes("motor")
       ) {
         return this.originDescriptions.motor;
       } else {
@@ -242,7 +241,7 @@ export default {
     },
     provSpeciesDescription: function () {
       let text = "Studied in";
-      this.provenanceEntry.provenanceTaxonomyLabel.forEach((label) => {
+      this.tooltipEntry.provenanceTaxonomyLabel.forEach((label) => {
         text += ` ${label},`;
       });
       text = text.slice(0, -1); // remove last comma
@@ -263,19 +262,19 @@ export default {
     openAll: function () {
       EventBus.emit("onActionClick", {
         type: "Facets",
-        labels: this.provenanceEntry.componentsWithDatasets.map((a) => a.name),
+        labels: this.tooltipEntry.componentsWithDatasets.map((a) => a.name),
       });
     },
     openAxons: function () {
       EventBus.emit("onActionClick", {
         type: "Facets",
-        labels: this.provenanceEntry.destinationsWithDatasets.map((a) => a.name),
+        labels: this.tooltipEntry.destinationsWithDatasets.map((a) => a.name),
       });
     },
     openDendrites: function () {
       EventBus.emit("onActionClick", {
         type: "Facets",
-        labels: this.provenanceEntry.originsWithDatasets.map((a) => a.name),
+        labels: this.tooltipEntry.originsWithDatasets.map((a) => a.name),
       });
     },
     pubmedSearchUrlUpdate: function (val) {

package/src/components/Tooltip/Tooltip.vue

@@ -1,44 +1,35 @@
 <template>
   <div class="tooltip-container" id="tooltip-container">
-    <template v-if="tooltipType === 'annotation'">
+    <template v-if="annotationDisplay">
       <annotation-popup
         :annotationEntry="annotationEntry"
         @annotation="$emit('annotation', $event)"
       />
     </template>
-    <template v-if="tooltipType === 'provenance'">
-      <provenance-popup :provenanceEntry="provenanceEntry" />
-    </template>
-    <template v-if="tooltipType === 'image'">
-      <image-gallery-popup :imageEntry="imageEntry" />
+    <template v-else>
+      <provenance-popup :tooltipEntry="tooltipEntry" />
     </template>
   </div>
 </template>
 
 <script>
-import EventBus from "../EventBus.js";
+import EventBus from '../EventBus.js';
 
 export default {
   name: "Tooltip",
   props: {
-    tooltipType: {
-      type: String,
-      default: "",
-    },
-    provenanceEntry: {
+    tooltipEntry: {
       type: Object,
-      default: {},
+    },
+    annotationDisplay: {
+      type: Boolean,
+      default: false,
     },
     annotationEntry: {
       type: Object,
-      default: {},
-    },
-    imageEntry: {
-      type: Array,
-      default: [],
     },
   },
-  mounted: function () {
+  mounted: function() {
     // Emit events from child components
     EventBus.on("onActionClick", (data) => {
       this.$emit("onActionClick", data);

package/src/components/index.js

@@ -2,5 +2,6 @@ import DrawToolbar from "./DrawToolbar/DrawToolbar.vue";
 import HelpModeDialog from "./HelpModeDialog/HelpModeDialog.vue";
 import Tooltip from "./Tooltip/Tooltip.vue";
 import TreeControls from "./TreeControls/TreeControls.vue";
+import CopyToClipboard from "./CopyToClipboard/CopyToClipboard.vue";
 
-export { DrawToolbar, HelpModeDialog, Tooltip, TreeControls };
+export { DrawToolbar, HelpModeDialog, Tooltip, TreeControls, CopyToClipboard };