@abi-software/mapintegratedvuer 0.7.0-vue3.7 → 0.7.0-vue3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "0.7.0-vue3.7",
+  "version": "0.7.0-vue3.9",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -42,11 +42,11 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^0.6.0-vue3.7",
+    "@abi-software/flatmapvuer": "^0.6.1-vue3.8",
     "@abi-software/map-side-bar": "^1.7.0-vue3.4",
-    "@abi-software/plotvuer": "^0.4.0-vue-3-alpha.7",
+    "@abi-software/plotvuer": "^0.4.0-vue-3-alpha.10",
     "@abi-software/scaffoldvuer": "^0.4.0-vue3.6",
-    "@abi-software/simulationvuer": "^0.7.0-vue-3-alpha.4",
+    "@abi-software/simulationvuer": "^0.7.0-vue-3-alpha.5",
     "@abi-software/svg-sprite": "^0.4.0-vue3-beta.0",
     "@cypress/vite-dev-server": "^5.0.7",
     "@element-plus/icons-vue": "^2.3.1",
@@ -126,6 +126,9 @@
       }
     ]
   },
+  "overrides": {
+    "@abi-software/flatmapvuer": "$@abi-software/flatmapvuer"
+  },
   "browserslist": [
     "> 1%",
     "last 2 versions"

package/src/components/ContentBar.vue

@@ -21,7 +21,7 @@
         {{ getEntryTitle(entry) }}
       </div>
     </div>
-    <el-row class="icon-group">    
+    <el-row class="icon-group">
       <div v-show="contextCardEntry && contextCardVisible" class="hide" @click="contextCardVisible = false">
         Hide information
         <el-icon><el-icon-arrow-up /></el-icon>
@@ -30,7 +30,7 @@
         Show information
         <el-icon><el-icon-arrow-down /></el-icon>
       </div>
-      
+
       <el-popover
         placement="bottom"
         :teleported="false"
@@ -42,13 +42,13 @@
         :visible="contextCardVisible"
       >
         <template #default v-if="contextCardEntry">
-          <flatmap-context-card 
+          <flatmap-context-card
             class="flatmap-context-card"
-            v-if="(contextCardEntry.type == 'Flatmap' || 
-                  contextCardEntry.type == 'MultiFlatmap')" 
+            v-if="(contextCardEntry.type == 'Flatmap' ||
+                  contextCardEntry.type == 'MultiFlatmap')"
             :mapImpProv="contextCardEntry.mapImpProv"
           />
-          <context-card 
+          <context-card
             v-if="contextCardEntry.type.toLowerCase() == 'scaffold'"
             :entry="contextCardEntry"
             :envVars="envVars"
@@ -152,8 +152,8 @@ export default {
         ROOT_URL: this.settingsStore.rootUrl,
       };
     },
-    popperOptions: function() { 
-      return { 
+    popperOptions: function() {
+      return {
         preventOverflow: {
           enabled: true,
           boundary: this.boundariesElement,
@@ -245,7 +245,7 @@ export default {
   font-size: 14px;
   font-weight: normal;
   line-height: 20px;
-  margin-left: 11px;
+  margin-left: 1rem;
   margin-top: 4px;
 }
 
@@ -278,7 +278,7 @@ export default {
         color: $app-primary-color;
       }
     }
-    
+
     :deep(.el-input__icon) {
       line-height: 24px;
       color: $lightGrey;
@@ -322,21 +322,24 @@ export default {
   color: $app-primary-color;
   cursor: pointer;
   margin-right: 6px;
-  margin-top: 3px;
+  margin-top: 8px;
 }
 
 .icon-group {
+  position: relative;
+  top: auto;
   font-size: 12px;
 }
 
 .info-icon {
+  margin-top: 2px;
   margin-right: 8px;
   font-size: 28px;
   color: $app-primary-color;
   cursor: pointer;
   &::before { // since the icon is a font, we need to adjust the vertical alignment
     position: relative;
-    top: -2px; 
+    top: -2px;
   }
 }
 

package/src/components/ContentVuer.vue

@@ -87,7 +87,7 @@ export default {
     },
     getState: function () {
       return this.$refs.viewer.getState();
-    },       
+    },
     resourceSelected: function (payload) {
       this.$emit("resource-selected", payload);
     },
@@ -169,6 +169,10 @@ export default {
   height: 32px;
   border-bottom: 1px solid rgb(220, 223, 230);
   z-index: 7;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .component-container {
@@ -177,6 +181,7 @@ export default {
   bottom: 0px;
   position: absolute;
   z-index:6;
+  overflow: hidden;
 }
 
 .dataset-header {

package/src/components/ResizeSensor.vue

@@ -19,16 +19,18 @@ export default {
       }
     },
     deactivate: function() {
-      this._sensor.detach(this.$refs.display, this.displayResize);
-      delete this._sensor;
-      this._sensor = undefined;
-      this.displayResize();
+      if (this._sensor) {
+        this._sensor.detach(this.$refs.display, this.displayResize);
+        delete this._sensor;
+        this._sensor = undefined;
+        this.displayResize();
+      }
     },
     displayResize: function() {
       this.$emit("resize");
     },
   },
-  beforeDestroy() {
+  unmounted() {
     this.deactivate();
   },
   activated() {

package/src/components/SearchControls.vue

@@ -22,7 +22,7 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import { MapSvgIcon } from '@abi-software/svg-sprite';
-import { 
+import {
   ElAutocomplete as Autocomplete
 } from "element-plus";
 
@@ -80,16 +80,14 @@ export default {
     font-size: 0.8rem;
     margin-left: 0.5rem;
   }
-  .search-box {
+  :deep(.search-box) {
     margin-top: 2px;
     margin-left:0.5rem;
     height:28px;
     width:137px;
-    :deep(.el-input__inner) {
-      background-color: $background;
-      height:28px;
+    .el-input__inner {
+      height:26px;
       line-height:28px;
-      border: 1px solid rgb(144, 147, 153);
       border-radius: 4px;
       &:focus {
         border-color: $app-primary-color;

package/src/components/viewers/MultiFlatmap.vue

@@ -305,13 +305,17 @@ export default {
       }
 
       if (flatmapImp) {
+        // create the star marker
         let wrapperElement = document.createElement("div");
         wrapperElement.innerHTML = YellowStar;
 
+        // add it to the flatmap
         const markerIdentifier = flatmapImp.addMarker(marker, {
           element: wrapperElement,
           className: "highlight-marker"
         });
+
+        // update the store with the marker identifier
         this.settingsStore.updateFeaturedMarkerIdentifier({
           index,
           markerIdentifier,
@@ -362,9 +366,12 @@ export default {
 
 :deep(.maplibregl-marker) {
   &.standard-marker {
+    cursor: pointer !important;
     z-index: 2;
   }
   &.highlight-marker {
+    visibility: visible !important;
+    cursor: pointer !important;
     z-index: 1;
     div {
       scale: 0.5;

package/src/mixins/ContentMixin.js

@@ -278,6 +278,7 @@ export default {
           } catch (error) {
             markerSpecies = undefined;
           }
+          this.updateFeatureMarkers([markerCurie], undefined)
           this.settingsStore.updateFeaturedMarker({
             identifier,
             marker: markerCurie,
@@ -286,19 +287,45 @@ export default {
           });
         });
     },
+    // Check if the old featured dataset api has any info
+    oldFeaturedDatasetApiHasInfo: async function () {
+      let response = await fetch(`${this.apiLocation}get_featured_datasets_identifiers`)
+      let data = await response.json()
+      if (!data.identifiers || data.identifiers.length == 0) {
+        return false;
+      } else {
+        return data.identifiers;
+      }
+    },
+    // Check if the new featured dataset api has any info
+    newFeaturedDatasetApiHasInfo: async function () {
+      let response = await fetch(`${this.apiLocation}get_featured_dataset`)
+      let data = await response.json()
+      if (!data.datasets || data.datasets.length == 0) {
+        return false;
+      } else {
+        return data.datasets.map(d => d.id);
+      }
+    },
+
     /**
      * Get a list of featured datasets to display.
      */
-    getFeaturedDatasets: function () {
-      const local_this = this;
-      fetch(`${this.apiLocation}get_featured_datasets_identifiers`)
-        .then(response => response.json())
-        .then(data => {
-          this.settingsStore.updateFeatured(data.identifiers);
-          data.identifiers.forEach(element => {
-            local_this.getDatasetAnatomyInfo(element);
-          });
-        });
+    getFeaturedDatasets: async function () {
+      let datasetIds = [];
+
+      // Check the two api endpoints for featured datasets, old one first
+      let oldInfo = await this.oldFeaturedDatasetApiHasInfo();
+      if (oldInfo) datasetIds = oldInfo;
+      else {
+        let newInfo = await this.newFeaturedDatasetApiHasInfo();
+        if (newInfo) datasetIds = newInfo;
+      }
+      // Update the store with the new list of featured datasets
+      this.settingsStore.updateFeatured(datasetIds);
+      datasetIds.forEach(element => {
+        this.getDatasetAnatomyInfo(element)
+      });
     },
     zoomToFeatures: function () {
       return;

package/vite.config.js

@@ -11,7 +11,7 @@ export default defineConfig(({ command, mode }) => {
     css: {
         preprocessorOptions: {
           scss: {
-            additionalData: `@use '${pathSrc}/assets/styles' as *;`
+            additionalData: `@use './src/assets/styles' as *;`
           },
         },
     },