@abi-software/mapintegratedvuer 1.3.4 → 1.3.5-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.3.4",
+  "version": "1.3.5-beta.1",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -18,7 +18,7 @@
     "release:beta": "npm version prerelease --force --preid=beta; npm publish --access public --tag beta",
     "release:minor": "npm version minor --force; npm publish --access public",
     "release:patch": "npm version patch --force;  npm publish --access public",
-    "version": "npm run changelog; git add CHANGELOG.md",
+    "version": "npm run build-bundle; npm run changelog; git add CHANGELOG.md",
     "vuese-gen": "node vuese-generator.js",
     "vuese-watch": "node vuese-generator.js watch",
     "docs:dev": "vitepress dev docs",
@@ -51,8 +51,8 @@
   ],
   "dependencies": {
     "@abi-software/flatmapvuer": "^1.3.2",
-    "@abi-software/map-side-bar": "^2.3.1",
-    "@abi-software/map-utilities": "^1.0.0",
+    "@abi-software/map-side-bar": "^2.3.2-beta.5",
+    "@abi-software/map-utilities": "^1.0.1-beta.3",
     "@abi-software/plotvuer": "1.0.0",
     "@abi-software/scaffoldvuer": "^1.3.3",
     "@abi-software/simulationvuer": "1.0.0",

package/src/components/ContentBar.vue

@@ -365,7 +365,7 @@ export default {
 
 :deep(.context-card-popover.el-popover.el-popper) {
   max-width: calc(100vw - 100px);
-  padding-right: 0px;
+  padding: 0px;
   width: unset!important;
   background: #fff!important;
 }

package/src/components/ContextCard.vue

@@ -6,17 +6,20 @@
           <img :src="banner" class="context-image">
         </div>
         <div class="card-right scrollbar">
-          <div style="margin-right: 8px;">
+          <div>
             <div class="title">{{contextData.heading}}</div>
             <div v-html="parseMarkdown(contextData.description)"/>
-            <br/>
-
+            <!-- <br/> -->
+          </div>
+        </div>
+        <div class="card-bottom">
+          <div>
             <!-- Show sampeles and views seperately if they do not match -->
             <template v-if="!samplesUnderViews">
               <div v-if="contextData.views && contextData.views.length > 0" class="subtitle">Scaffold Views</div>
               <template v-for="(view, i) in contextData.views" :key="i+'_1'">
                 <div @click="openViewFile(view)" class="context-card-view">
-                  <img class="view-image" :src="getFileFromPath(view.thumbnail)"> 
+                  <img class="view-image" :src="getFileFromPath(view.thumbnail)">
                   <div class="view-description">{{view.description}}</div>
                 </div>
                 <div class="padding"/>
@@ -43,7 +46,7 @@
               <div v-if="contextData.views && contextData.views.length > 0" class="subtitle">Scaffold Views</div>
               <template v-for="(view, i) in contextData.views" :key="i+'_1'">
                 <span  @click="viewClicked(view, i)" class="context-card-view">
-                  <img class="view-image" :src="getFileFromPath(view.thumbnail)"/> 
+                  <img class="view-image" :src="getFileFromPath(view.thumbnail)"/>
                   <div class="view-description">{{view.description}}<i class="el-icon-warning-outline info"></i> </div>
                 </span>
                 <div v-if="sampleDetails[i]" v-html="samplesMatching(view.id).description"/>
@@ -57,6 +60,11 @@
           </div>
         </div>
       </div>
+
+      <!-- Copy to clipboard button container -->
+      <div class="float-button-container">
+        <CopyToClipboard :content="updatedCopyContent" theme="light" />
+      </div>
     </div>
   </div>
 </template>
@@ -64,6 +72,8 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
+import { CopyToClipboard } from "@abi-software/map-utilities";
+import '@abi-software/map-utilities/dist/style.css';
 
 //provide the s3Bucket related methods and data.
 import S3Bucket from "../mixins/S3Bucket.vue";
@@ -94,6 +104,9 @@ const convertBackslashToForwardSlash = function(path){
 
 export default {
   name: "contextCard",
+  components: {
+    CopyToClipboard,
+  },
   mixins: [S3Bucket],
   props: {
     /**
@@ -109,7 +122,7 @@ export default {
       showDetails: true,
       showContextCard: true,
       sampleDetails: {},
-      loading: false
+      loading: false,
     };
   },
   watch: {
@@ -142,8 +155,8 @@ export default {
         if (this.contextData.samplesUnderViews){
           return true
         } else {
-          let viewId = this.contextData.views.map(v=>v.id)
-          let samplesView = this.contextData.samples.map(s=>s.view)
+          let viewId = this.contextData.views?.map(v=>v.id) || [];
+          let samplesView = this.contextData.samples?.map(s=>s.view) || [];
 
           // get matching values
           let matching = viewId.filter(v=>samplesView.includes(v))
@@ -152,21 +165,90 @@ export default {
           if ( viewId.length === matching.length && matching.length === samplesView.length){
             return true
           }
-          return false
         }
       }
-      else return false
+      return false;
     },
     banner: function(){
       if (this.contextData.banner){
-        return this.getFileFromPath(this.contextData.banner) 
+        return this.getFileFromPath(this.contextData.banner)
       } else if (this.contextData && this.contextData.views && this.contextData.views.length > 0) {
         if(this.contextData.views[0].thumbnail){
           return this.getFileFromPath(this.contextData.views[0].thumbnail)
         }
-      } 
+      }
       return this.entry.banner
-    }
+    },
+    updatedCopyContent: function () {
+      const contentArray = [];
+
+      // Use <div> instead of <h1>..<h6> or <p>
+      // to avoid default formatting on font size and margin
+
+      if (this.contextData.heading) {
+        contentArray.push(`<div><strong>${this.contextData.heading}</strong></div>`);
+      }
+
+      if (this.contextData.description) {
+        contentArray.push(`<div>${this.contextData.description}</div>`);
+      }
+
+      if (this.contextData.views?.length) {
+        let scaffoldViews = '<div><strong>Scaffold Views</strong></div>';
+        const views = [];
+
+        this.contextData.views.forEach((view, i) => {
+          const viewContents = [];
+          const viewPath = this.getFileFromPath(view.path);
+          let viewContent = `<div>${view.description}</div>`;
+          viewContent += `\n`;
+          viewContent += `<div><a href="${viewPath}">${viewPath}</a></div>`;
+          viewContents.push(viewContent);
+
+          if (this.samplesUnderViews) {
+            const description = this.samplesMatching(view.id).description;
+            let sampleContent = `<div>${description}</div>`;
+
+            if (this.samplesMatching(view.id).path) {
+              sampleContent += `\n`;
+              const url = this.generateFileLink(this.samplesMatching(view.id));
+              sampleContent += `<div><a href="${url}">${url}</a></div>`;
+            }
+            viewContents.push(sampleContent);
+          }
+          const viewContentStr = viewContents.join('\n');
+          views.push(`<li>${viewContentStr}</li>`);
+        });
+        scaffoldViews += '\n\n';
+        scaffoldViews += `<ul>${views.join('\n')}</ul>`;
+        contentArray.push(scaffoldViews);
+      }
+
+      if (!this.samplesUnderViews) {
+        if (this.contextData.samples?.length) {
+          let sampleViews = '<div><strong>Samples on Scaffold</strong></div>';
+          const samples = [];
+
+          this.contextData.samples.forEach((sample, i) => {
+            let sampleContents = '';
+            sampleContents += `<div>${sample.heading}</div>`;
+            sampleContents += `\n`;
+            sampleContents += `<div>${sample.description}</div>`;
+            if (sample.path) {
+              const url = this.generateFileLink(sample);
+              sampleContents += `\n`;
+              sampleContents += `<div><a href="${url}">${url}</a></div>`;
+            }
+            samples.push(`<li>${sampleContents}</li>`);
+          });
+          sampleViews += '\n\n';
+          sampleViews += `<ul>${samples.join('\n')}</ul>`;
+          contentArray.push(sampleViews);
+        }
+      }
+
+      return contentArray.join('\n\n<br>');
+    },
   },
   methods: {
     samplesMatching: function(viewId){
@@ -176,7 +258,7 @@ export default {
       else return []
     },
     viewClicked: function(view, i){
-      this.openViewFile(view) 
+      this.openViewFile(view)
       this.toggleSampleDetails(i)
     },
     getContextFile: function (contextFileUrl) {
@@ -192,7 +274,7 @@ export default {
         .then((data) => {
           this.contextData = data
           this.loading = false
-          this.addDiscoverIdsToContextData() 
+          this.addDiscoverIdsToContextData()
         })
         .catch((err) => {
           //set defaults if we hit an error
@@ -285,28 +367,38 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  // text-align: initial; // default is justify
+  word-break: initial;
 }
 
 .context-card{
   background-color: white;
-  max-height: 10  50px;
   font-size: 14px;
   position: relative;
   display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
   width: 100%;
   max-height: 258px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  box-sizing: border-box;
+
+  &:not(.context-card-container) {
+    padding: 10px;
+  }
 }
 
 .context-card-view{
   cursor: pointer;
   margin-bottom: 8px;
   display: flex;
+  gap: 8px;
 }
 
 .view-image {
   width: 34px;
-  height: 34px;
-  flex: 1;
+  height: auto;
 }
 
 .view-descriptions {
@@ -339,8 +431,15 @@ export default {
 .card-right {
   flex: 1.5;
   word-break: normal !important;
-  overflow-y: scroll;
-  scrollbar-width: thin;
+
+  :deep(p:last-child) {
+    margin-bottom: 0;
+  }
+}
+
+.card-bottom {
+  flex: 0 0 100%;
+  max-width: 100%;
 }
 
 .cursor-pointer {
@@ -363,6 +462,7 @@ export default {
 
 .subtitle{
   font-weight: bold;
+  margin-bottom: 8px;
 }
 
 .scrollbar::-webkit-scrollbar-track {
@@ -382,4 +482,16 @@ export default {
   background-color: #979797;
 }
 
+.float-button-container {
+  position: absolute;
+  bottom: 6px;
+  right: 12px;
+  opacity: 0;
+  visibility: hidden;
+
+  .context-card-container:hover & {
+    opacity: 1;
+    visibility: visible;
+  }
+}
 </style>

package/src/components/FlatmapContextCard.vue

@@ -10,6 +10,11 @@
         View publication <a :href="flatmapSource" target="_blank">here</a>
       <br/>
     </div>
+
+    <!-- Copy to clipboard button container -->
+    <div class="float-button-container">
+      <CopyToClipboard :content="copyContent" theme="light" />
+    </div>
   </div>
 </template>
 
@@ -19,11 +24,14 @@
 import {
   ElLoading as Loading
 } from "element-plus";
+import { CopyToClipboard } from "@abi-software/map-utilities";
+import '@abi-software/map-utilities/dist/style.css';
 
 export default {
   name: "FlatmapContextCard",
   components: {
     Loading,
+    CopyToClipboard,
   },
   props: {
     /**
@@ -38,7 +46,8 @@ export default {
       showDetails: true,
       showContextCard: true,
       sampleDetails: {},
-      loading: false
+      loading: false,
+      copyContent: '',
     };
   },
   computed: {
@@ -51,7 +60,7 @@ export default {
             year: 'numeric',
         })
       }
-      return flatmapPublished 
+      return flatmapPublished
     },
     sckanReleaseDisplay: function() {
       let sckanRelease = "Unknown"
@@ -70,7 +79,7 @@ export default {
           sckanRelease = "Unknown";
         }
       }
-      return sckanRelease 
+      return sckanRelease
     },
     sckanReleaseLink: function() {
       let sckanLink = "Unknown"
@@ -93,6 +102,36 @@ export default {
       return flatmapSource
     },
   },
+  mounted: function () {
+    this.updateCopyContent();
+  },
+  methods: {
+    updateCopyContent: function () {
+      const contentArray = [];
+
+      // Use <div> instead of <h1>..<h6> or <p>
+      // to avoid default formatting on font size and margin
+
+      contentArray.push(`<div><strong>Flatmap Provenance</strong></div>`);
+
+      let versionContent = `<div>SCKAN version:</div>`;
+      versionContent += `\n`;
+      versionContent += `<div><a href="${this.sckanReleaseLink}">${this.sckanReleaseLink}</a></div>`;
+      contentArray.push(versionContent);
+
+      let publishedContent = `<div>Published on:</div>`;
+      publishedContent += `\n`;
+      publishedContent += `<div>${this.flatmapPublishedDisplay}</div>`;
+      contentArray.push(publishedContent);
+
+      let publicationContent = `<div>View publication:</div>`;
+      publicationContent += `\n`;
+      publicationContent += `<div><a href="${this.flatmapSource}">${this.flatmapSource}</a></div>`;
+      contentArray.push(publicationContent);
+
+      this.copyContent = contentArray.join('\n\n<br>');
+    },
+  }
 };
 </script>
 
@@ -102,19 +141,16 @@ export default {
 
 .flatmap-context-card{
   background-color: white;
-  max-height: 10  50px;
   font-size: 12px;
   position: relative;
   display: flex;
   width: 100%;
   max-height: 258px;
+  padding: 10px;
 }
 
 .card-right {
-  flex: 1.3;
-  padding-left: 6px;
-  // overflow-y: scroll;
-  scrollbar-width: thin;
+  flex: 1;
 }
 
 .cursor-pointer {
@@ -143,4 +179,16 @@ export default {
   background-color: #979797;
 }
 
+.float-button-container {
+  position: absolute;
+  bottom: 6px;
+  right: 12px;
+  opacity: 0;
+  visibility: hidden;
+
+  .flatmap-context-card:hover & {
+    opacity: 1;
+    visibility: visible;
+  }
+}
 </style>

package/src/components/viewers/MultiFlatmap.vue

@@ -478,7 +478,7 @@ export default {
     z-index: 1;
     div {
       scale: 0.5;
-      transform: translate(45px, -7px);
+      width: 0;
     }
   }
 }