@abi-software/mapintegratedvuer 1.3.5-beta.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.3.5-beta.0",
+  "version": "1.4.0",
   "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",
@@ -50,11 +50,11 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.3.2",
-    "@abi-software/map-side-bar": "^2.3.2-beta.5",
-    "@abi-software/map-utilities": "^1.0.1-beta.3",
+    "@abi-software/flatmapvuer": "^1.4.0",
+    "@abi-software/map-side-bar": "^2.4.1",
+    "@abi-software/map-utilities": "^1.1.0",
     "@abi-software/plotvuer": "1.0.0",
-    "@abi-software/scaffoldvuer": "^1.3.3",
+    "@abi-software/scaffoldvuer": "^1.4.0",
     "@abi-software/simulationvuer": "1.0.0",
     "@abi-software/svg-sprite": "1.0.0",
     "@element-plus/icons-vue": "^2.3.1",

package/src/App.vue

@@ -41,7 +41,8 @@
         :useHelpModeDialog="true"
         :connectivityInfoSidebar="true"
         @updateShareLinkRequested="updateUUID"
-        @isReady="mapIsReady"
+        @isReady="viewerIsReady"
+        @mapLoaded="mapIsLoaded"
       />
     </div>
   </div>
@@ -99,6 +100,9 @@ export default {
     }
   },
   methods: {
+    changeViewingMode: function(modeName) {
+      this.$refs.map.changeViewingMode(modeName);
+    },
     saveSettings: function() {
       this.mapSettings.push(this.$refs.map.getState());
     },
@@ -164,8 +168,12 @@ export default {
     setSearch: function() {
       this.$refs.map.openSearch([], "10.26275/1uno-tynt");
     },
-    mapIsReady: function() {
-      console.log("map is ready")
+    mapIsLoaded: function(map) {
+      console.log("map is loaded", map)
+      // map.changeViewingMode('Annotation')
+    },
+    viewerIsReady: function() {
+      console.log("viewer is ready")
     },
     parseQuery: function () {
       this.$router.isReady().then(() => {

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,11 +6,14 @@
           <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>
@@ -364,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 {
@@ -418,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 {
@@ -442,6 +462,7 @@ export default {
 
 .subtitle{
   font-weight: bold;
+  margin-bottom: 8px;
 }
 
 .scrollbar::-webkit-scrollbar-track {

package/src/components/FlatmapContextCard.vue

@@ -141,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 {

package/src/components/MapContent.vue

@@ -326,6 +326,12 @@ export default {
     if (!this.state) {
       this.initialState = await initialState(this.startingMap, this.options.sparcApi);
     }
+    EventBus.on("mapLoaded", (map) => {
+      /**
+       * This event emit when the map is loaded.
+       */
+      this.$emit("mapLoaded", map);
+    });
     this.isReady = true;
     this.settingsStore.updateUseHelpModeDialog(this.useHelpModeDialog);
     this.settingsStore.updateConnectivityInfoSidebar(this.connectivityInfoSidebar);

package/src/components/viewers/Flatmap.vue

@@ -100,9 +100,8 @@ export default {
       let provClone = {id: this.entry.id, prov: this.getFlatmapImp().provenance}; //create clone of provenance and add id
       EventBus.emit("mapImpProv", provClone); // send clone to context card
       this.$emit("flatmap-provenance-ready", provClone);
-      if (this.entry.resource === "FunctionalConnectivity"){
-        this.flatmapReadyForMarkerUpdates(flatmap);
-      }
+      this.flatmapReadyForMarkerUpdates(flatmap);
+      EventBus.emit("mapLoaded", flatmap);
     },
     onPathwaySelectionChanged: function (data) {
       const { label, property, checked, selectionsTitle } = data;
@@ -158,6 +157,9 @@ export default {
         flatmap.clearSearchResults();
       }
     },
+    changeViewingMode: function (modeName) {
+      this.$refs.flatmap.changeViewingMode(modeName);
+    },
   },
   computed: {
     facetSpecies() {

package/src/components/viewers/MultiFlatmap.vue

@@ -329,6 +329,7 @@ export default {
         const flatmapImp = flatmap.mapImp;
         this.flatmapMarkerUpdate(flatmapImp);
         this.updateProvCard();
+        EventBus.emit("mapLoaded", flatmap);
       }
     },
     getFlatmapImp: function () {
@@ -404,6 +405,13 @@ export default {
       }
       return false;
     },
+    /**
+     * Change the view mode of the current flatmap
+     */
+    changeViewingMode: function (modeName) {
+      const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+      flatmap.changeViewingMode(modeName);
+    },
   },
   computed: {
     facetSpecies() {

package/src/components/viewers/Scaffold.vue

@@ -139,6 +139,7 @@ export default {
         this.$refs.scaffold.toggleSyncControl(this.splitFlowStore.globalCallback, rotation);
         if (this.splitFlowStore.syncMode) this.$refs.scaffold.fitWindow();
       }
+      EventBus.emit("mapLoaded", this.$refs.scaffold);
     },
     requestSynchronisedEvent: function (flag) {
       if (this.scaffoldLoaded) {
@@ -183,6 +184,12 @@ export default {
     updateWithViewUrl: function(viewUrl) {
       this.$refs.scaffold.updateViewURL(viewUrl);
     },
+    /**
+     * Change the view mode of the current scaffold
+     */
+    changeViewingMode: function (modeName) {
+      this.$refs.scaffold.changeViewingMode(modeName);
+    },
   },
   computed: {
     warningMessage: function() {

package/src/mixins/DynamicMarkerMixin.js

@@ -47,7 +47,15 @@ export default {
         let fmMarkers = this.removeMarkersNotOnFlatmap(flatmapImp, markers);
         flatmapImp.clearMarkers();
         flatmapImp.clearDatasetMarkers();
-        flatmapImp.addDatasetMarkers(fmMarkers);
+        if (this.entry.resource === "FunctionalConnectivity") {
+          let FCMapMarkers = [];
+          for (let i = 0; i < fmMarkers.length; i++) {
+            FCMapMarkers = FCMapMarkers.concat(fmMarkers[i].terms);
+          }
+          flatmapImp.addMarkers(Array.from(new Set(FCMapMarkers)), { className: "standard-marker", cluster: false });
+        } else {
+          flatmapImp.addDatasetMarkers(fmMarkers);
+        }
 
         // Set the featured markers
         if (this.entry.type === "MultiFlatmap") {

package/src/stores/splitFlow.js

@@ -208,7 +208,7 @@ export const useSplitFlowStore = defineStore('splitFlow', {
         if (this._controller) this._controller.abort();
         this._controller = new AbortController();
         let signal = this._controller.signal;
-        console.log("getAvailableTerms")
+        // console.log("getAvailableTerms")
         fetch(`${apiLocation}get-organ-curies`, {
           signal,
         })