@abi-software/flatmapvuer 1.4.1 → 1.4.3-image.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.4.1",
+  "version": "1.4.3-image.0",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -43,8 +43,8 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "3.1.4",
-    "@abi-software/map-utilities": "1.1.0",
+    "@abi-software/flatmap-viewer": "3.1.7",
+    "@abi-software/map-utilities": "^1.1.0-beta.2",
     "@abi-software/sparc-annotation": "0.3.1",
     "@abi-software/svg-sprite": "1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
@@ -59,7 +59,7 @@
     "@cypress/webpack-dev-server": "^3.6.1",
     "@vitejs/plugin-vue": "^4.6.2",
     "@vuese/markdown-render": "^2.11.3",
-    "@vuese/parser": "^2.10.3",
+    "@vuese/parser": "^2.9.1",
     "auto-changelog": "^2.4.0",
     "babel-eslint": "^10.1.0",
     "chokidar": "^3.6.0",
@@ -92,5 +92,8 @@
   "browserslist": [
     "> 1%",
     "last 2 versions"
-  ]
+  ],
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.21.1"
+  }
 }

package/src/App.vue

@@ -77,6 +77,7 @@
       :displayMinimap="true"
       :enableOpenMapUI="true"
       :flatmapAPI="flatmapAPI"
+      :sparcAPI="sparcAPI"
       :disableUI="disableUI"
       @open-pubmed-url="onOpenPubmedUrl"
       @pathway-selection-changed="onPathwaySelectionChanged"
@@ -109,6 +110,9 @@ import './icons/mapicon-species-style.css'
 import MultiFlatmapVuer from './components/MultiFlatmapVuer.vue'
 import { HelpModeDialog } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
+import { mapStores } from 'pinia';
+import { useSettingsStore } from './stores/settings';
+import { getOrganCuries } from './services/scicrunchQueries'
 
 export default {
   name: 'app',
@@ -145,6 +149,7 @@ export default {
       if (this.consoleOn) console.log(component)
       let taxon = component.mapImp.describes
       let id = component.mapImp.addMarker('UBERON:0000948')
+
       window.flatmapImp = component.mapImp
       component.enablePanZoomEvents(true)
       //component.showPathwaysDrawer(false);
@@ -285,6 +290,7 @@ export default {
       useHelpModeDialog: true,
       multiflatmapRef: null,
       mapSettings: [],
+      sparcAPI: import.meta.env.VITE_SPARC_API,
       //flatmapAPI: "https://mapcore-demo.org/current/flatmap/v2/"
       //flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v3/"
       flatmapAPI: "https://mapcore-demo.org/current/flatmap/v3/",
@@ -293,11 +299,17 @@ export default {
       //flatmapAPI: "https://mapcore-demo.org/fccb/flatmap/"
       //flatmapAPI: "https://mapcore-demo.org/staging/flatmap/v1/"
       // flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/",
-      ElIconSetting: shallowRef(ElIconSetting)
+      ElIconSetting: shallowRef(ElIconSetting),
     }
   },
   mounted: function () {
     this.multiflatmapRef = this.$refs.multi;
+    if (this.sparcAPI) {
+      getOrganCuries(this.sparcAPI).then((organCuries) => this.settingsStore.updateOrganCuries(organCuries))
+    }
+  },
+  computed: {
+    ...mapStores(useSettingsStore),
   },
   watch: {
     helpMode: function (newVal) {

package/src/components/FlatmapVuer.vue

@@ -176,13 +176,17 @@ Please use `const` to assign meaningful names to them...
           ref="zoomInPopover"
         >
           <template #reference>
-            <map-svg-icon
-              icon="zoomIn"
-              class="icon-button zoomIn"
+            <div
+              class="icon-button-container"
               @click="zoomIn()"
               @mouseover="showTooltip(1)"
               @mouseout="hideTooltip(1)"
-            />
+            >
+              <map-svg-icon
+                class="icon-button zoomIn"
+                icon="zoomIn"
+              />
+            </div>
           </template>
         </el-popover>
         <el-popover
@@ -196,13 +200,17 @@ Please use `const` to assign meaningful names to them...
           ref="zoomOutPopover"
         >
           <template #reference>
-            <map-svg-icon
-              icon="zoomOut"
-              class="icon-button zoomOut"
+            <div
+              class="icon-button-container"
               @click="zoomOut()"
               @mouseover="showTooltip(2)"
               @mouseout="hideTooltip(2)"
-            />
+            >
+              <map-svg-icon
+                class="icon-button zoomOut"
+                icon="zoomOut"
+              />
+            </div>
           </template>
         </el-popover>
         <el-popover
@@ -221,13 +229,17 @@ Please use `const` to assign meaningful names to them...
             window
           </div>
           <template #reference>
-            <map-svg-icon
-              icon="fitWindow"
-              class="icon-button fitWindow"
+            <div
+              class="icon-button-container"
               @click="resetView()"
               @mouseover="showTooltip(3)"
               @mouseout="hideTooltip(3)"
-            />
+            >
+              <map-svg-icon
+                class="icon-button fitWindow"
+                icon="fitWindow"
+              />
+            </div>
           </template>
         </el-popover>
       </div>
@@ -285,7 +297,7 @@ Please use `const` to assign meaningful names to them...
                 width="200"
                 trigger="manual"
                 popper-class="flatmap-popper flatmap-marker-popper"
-                :visible="hoverVisibilities[5].value"
+                :visible="hoverVisibilities[0].value"
                 ref="markerPopover"
               >
                 <template #reference>
@@ -426,7 +438,7 @@ Please use `const` to assign meaningful names to them...
         ref="backgroundPopover"
         :virtual-ref="backgroundIconRef"
         placement="top-start"
-        width="320"
+        width="330"
         :teleported="false"
         trigger="click"
         popper-class="background-popper h-auto"
@@ -453,13 +465,14 @@ Please use `const` to assign meaningful names to them...
             </el-row>
           </el-row>
           <template v-if="viewingMode === 'Annotation' && userInformation">
+            <el-row class="backgroundSpacer"></el-row>
             <el-row class="backgroundText">Drawn By*</el-row>
             <el-row class="backgroundControl">
               <el-select
                 :teleported="false"
                 v-model="drawnType"
                 placeholder="Select"
-                class="select-box"
+                class="select-box annotationSelector"
                 popper-class="flatmap_dropdown"
                 @change="setDrawnType"
               >
@@ -475,13 +488,14 @@ Please use `const` to assign meaningful names to them...
                 </el-option>
               </el-select>
             </el-row>
+            <el-row class="backgroundSpacer"></el-row>
             <el-row class="backgroundText">Annotated By*</el-row>
             <el-row class="backgroundControl">
               <el-select
                 :teleported="false"
                 v-model="annotatedType"
                 placeholder="Select"
-                class="select-box"
+                class="select-box annotationSelector"
                 popper-class="flatmap_dropdown"
                 @change="setAnnotatedType"
               >
@@ -498,18 +512,59 @@ Please use `const` to assign meaningful names to them...
               </el-select>
             </el-row>
           </template>
-          <el-row class="backgroundSpacer" v-if="displayFlightPathOption"></el-row>
-          <el-row class="backgroundText" v-if="displayFlightPathOption">Flight path display</el-row>
-          <el-row class="backgroundControl" v-if="displayFlightPathOption">
-            <el-radio-group
-              v-model="flightPath3DRadio"
-              class="flatmap-radio"
-              @change="setFlightPath3D"
-            >
-            <el-radio :label="false">2D</el-radio>
-            <el-radio :label="true">3D</el-radio>
-            </el-radio-group>
-          </el-row>
+          <template v-if="viewingMode === 'Exploration' && !isFC && sparcAPI">
+            <el-row class="backgroundSpacer"></el-row>
+            <el-row class="backgroundText">Markers display</el-row>
+            <el-row class="backgroundControl">
+              <el-col :span="14">
+                <el-radio-group
+                  v-model="imageRadio"
+                  class="flatmap-radio"
+                  :disabled="imagesDownloading"
+                  @change="setImage"
+                >
+                  <el-radio :label="false">Standard</el-radio>
+                  <el-radio :label="true">Image</el-radio>
+                </el-radio-group>
+              </el-col>
+              <el-col :span="10" v-if="imageRadio">
+                <el-select
+                  :teleported="false"
+                  v-model="imageType"
+                  placeholder="Select"
+                  class="select-box imageSelector"
+                  popper-class="flatmap_dropdown"
+                  :disabled="imagesDownloading"
+                  @change="setImageType"
+                >
+                  <el-option
+                    v-for="item in imageTypes"
+                    :key="item"
+                    :label="item"
+                    :value="item"
+                  >
+                    <el-row>
+                      <el-col :span="12">{{ item }}</el-col>
+                    </el-row>
+                  </el-option>
+                </el-select>
+              </el-col>
+            </el-row>
+          </template>
+          <template v-if="displayFlightPathOption">
+            <el-row class="backgroundSpacer"></el-row>
+            <el-row class="backgroundText">Flight path display</el-row>
+            <el-row class="backgroundControl">
+              <el-radio-group
+                v-model="flightPath3DRadio"
+                class="flatmap-radio"
+                @change="setFlightPath3D"
+              >
+              <el-radio :label="false">2D</el-radio>
+              <el-radio :label="true">3D</el-radio>
+              </el-radio-group>
+            </el-row>
+          </template>
           <el-row class="backgroundSpacer"></el-row>
           <el-row class="backgroundText">Organs display</el-row>
           <el-row class="backgroundControl">
@@ -565,14 +620,18 @@ Please use `const` to assign meaningful names to them...
             ref="openMapPopover"
           >
             <template #reference>
-              <map-svg-icon
+              <div
                 v-if="enableOpenMapUI && openMapOptions.length > 0"
                 ref="openMapRef"
-                icon="openMap"
-                class="icon-button open-map-button"
+                class="icon-button-container"
                 @mouseover="showTooltip(4)"
                 @mouseout="hideTooltip(4)"
-              />
+              >
+                <map-svg-icon
+                  icon="openMap"
+                  class="icon-button open-map-button"
+                />
+              </div>
             </template>
           </el-popover>
         </el-row>
@@ -587,13 +646,17 @@ Please use `const` to assign meaningful names to them...
             ref="settingsPopover"
           >
             <template #reference>
-              <map-svg-icon
+              <div
                 ref="backgroundIconRef"
-                icon="changeBckgd"
-                class="icon-button"
+                class="icon-button-container"
                 @mouseover="showTooltip(5)"
                 @mouseout="hideTooltip(5)"
-              />
+              >
+                <map-svg-icon
+                  icon="changeBckgd"
+                  class="icon-button"
+                />
+              </div>
             </template>
           </el-popover>
         </el-row>
@@ -602,9 +665,10 @@ Please use `const` to assign meaningful names to them...
         ref="tooltip"
         class="tooltip"
         v-show="tooltipDisplay"
+        :tooltipType="tooltipType"
+        :provenanceEntry="provenanceEntry"
         :annotationEntry="annotationEntry"
-        :tooltipEntry="tooltipEntry"
-        :annotationDisplay="viewingMode === 'Annotation'"
+        :imageEntry="imageEntry"
         @annotation="commitAnnotationEvent"
       />
     </div>
@@ -643,10 +707,18 @@ import yellowstar from '../icons/yellowstar'
 import ResizeSensor from 'css-element-queries/src/ResizeSensor'
 import * as flatmap from '@abi-software/flatmap-viewer'
 import { AnnotationService } from '@abi-software/sparc-annotation'
-import { mapState } from 'pinia'
-import { useMainStore } from '@/store/index'
+import { mapState, mapStores } from 'pinia'
+import { useMainStore } from '@/stores/index'
+import { useSettingsStore } from '@/stores/settings'
 import { DrawToolbar, Tooltip, TreeControls } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
+import {
+  getBiolucidaThumbnails,
+  getSegmentationThumbnails,
+  getScaffoldThumbnails,
+  getPlotThumbnails
+} from '../services/scicrunchQueries'
+import imageMixin from '../mixins/imageMixin'
 
 const centroid = (geometry) => {
   let featureGeometry = { lng: 0, lat: 0, }
@@ -735,6 +807,7 @@ const createUnfilledTooltipData = function () {
  */
 export default {
   name: 'FlatmapVuer',
+  mixins:[imageMixin],
   components: {
     Button,
     Col,
@@ -767,6 +840,71 @@ export default {
     return { annotator }
   },
   methods: {
+    /**
+     * @vuese
+     * Function to add image thumbnails to the map.
+     */
+    populateImageThumbnails: async function (type) {
+      if (this.mapImp) {
+        this.closeTooltip()
+        this.mapImp.clearMarkers();
+        const identifiers = this.mapImp.anatomicalIdentifiers
+        const imageThumbnails = this.settingsStore.getImageThumbnails(type, identifiers)
+        this.populateMapWithImages(this.mapImp, imageThumbnails, type)
+      }
+    },
+    /**
+     * @vuese
+     * Function to fetching image thumbnails.
+     */
+    fetchImageThumbnails: async function (type) {
+      let thumbnails = {}
+      const organCuries = this.settingsStore.organCuries
+      if (type === 'Image') {
+        thumbnails = await getBiolucidaThumbnails(this.sparcAPI, organCuries, type)
+      } else if (type === 'Segmentation') {
+        thumbnails = await getSegmentationThumbnails(this.sparcAPI, organCuries, type)
+      } else if (type === 'Scaffold') {
+        thumbnails = await getScaffoldThumbnails(this.sparcAPI, organCuries, type)
+      } else if (type === 'Plot') {
+        thumbnails = await getPlotThumbnails(this.sparcAPI, organCuries, type)
+      }
+      this.settingsStore.updateImageThumbnails(type, thumbnails)
+    },
+    /**
+     * @vuese
+     * Function to switch the type of displayed image.
+     * @arg type
+     */
+    setImageType: async function (type) {
+      this.imageType = type
+      if (this.mapImp) {
+        this.imagesDownloading = true;
+        if (!this.settingsStore.imageTypeCached(type)) {
+          this.loading = true
+          await this.fetchImageThumbnails(type)
+          this.loading = false
+        }
+        this.populateImageThumbnails(type)
+      }
+    },
+    /**
+     * @vuese
+     * Function to switch show or hide images.
+     * @arg flag
+     */
+    setImage: function (flag) {
+      this.imageRadio = flag
+      if (this.mapImp) {
+        if (flag) {
+          this.setImageType(this.imageType)
+        } else {
+          this.mapImp.clearMarkers();
+          this.closeTooltip();
+        }
+        this.$emit('imageThumbnailDisplay', flag)
+      }
+    },
     /**
      * @vuese
      * Function to initialise drawing.
@@ -1494,7 +1632,7 @@ export default {
           this.mapImp.zoomToGeoJSONFeatures(gid, {noZoomIn: true})
         } else {
           // reset visibility of paths
-          this.mapImp.selectGeoJSONFeatures("-1")
+          this.mapImp.unselectGeoJSONFeatures()
           payload.selections.forEach((item) => {
             let show = payload.checked.includes(item.taxon)
             this.mapImp.enableConnectivityByTaxonIds(item.taxon, show)
@@ -1635,6 +1773,7 @@ export default {
               userData: args,
               eventType: eventType,
               provenanceTaxonomy: taxons,
+              markerType: this.imageRadio ? this.imageType : "Standard",
             }
             if (eventType === 'click') {
               this.featuresAlert = data.alert
@@ -1669,7 +1808,6 @@ export default {
             }
             if (
               data &&
-              data.type !== 'marker' &&
               eventType === 'click' &&
               !(this.viewingMode === 'Neuron Connection') &&
               // Disable popup when drawing
@@ -1703,6 +1841,16 @@ export default {
      * @arg data
      */
     checkAndCreatePopups: async function (data) {
+      this.imageEntry = []
+      this.provenanceEntry = {}
+      if (data.feature.type === 'marker' && this.imageRadio) {
+        this.tooltipType = 'image'
+        const imageThumbnails = this.settingsStore.getImageThumbnails(this.imageType, [data.resource[0]])
+        if (data.resource[0] in imageThumbnails) {
+          this.imageEntry = markRaw(imageThumbnails[data.resource[0]])
+        }
+        this.displayTooltip(data.feature.models)
+      } else {
       // Call flatmap database to get the connection data
       if (this.viewingMode === 'Annotation') {
         if (data.feature) {
@@ -1710,6 +1858,7 @@ export default {
             ...data.feature,
             resourceId: this.serverURL,
           }
+          this.tooltipType = 'annotation'
           if (data.feature.featureId && data.feature.models) {
             this.displayTooltip(data.feature.models)
           } else if (data.feature.feature) {
@@ -1743,9 +1892,11 @@ export default {
           results[1] ||
           (data.feature.hyperlinks && data.feature.hyperlinks.length > 0)
         ) {
+          this.tooltipType = 'provenance'
           this.resourceForTooltip = data.resource[0]
           data.resourceForTooltip = this.resourceForTooltip
           this.createTooltipFromNeuronCuration(data)
+          }
         }
       }
     },
@@ -1784,7 +1935,7 @@ export default {
      * @arg data
      */
     createTooltipFromNeuronCuration: async function (data) {
-      this.tooltipEntry = await this.flatmapQueries.createTooltipData(data)
+      this.provenanceEntry = await this.flatmapQueries.createTooltipData(data)
       this.displayTooltip(data.resource[0])
     },
     /**
@@ -1985,7 +2136,7 @@ export default {
         options.annotationFeatureGeometry = geometry
       } else {
         featureId = this.mapImp.modelFeatureIds(feature)[0]
-        if (!this.activeDrawTool) {
+        if (!this.activeDrawTool && !this.imageEntry.length) {
           options.positionAtLastClick = true
         }
       }
@@ -1997,9 +2148,12 @@ export default {
         // const featureIds = [feature];
         // this.moveMap(featureIds);
         if (this.featuresAlert) {
-          this.tooltipEntry['featuresAlert'] = this.featuresAlert;
+          this.provenanceEntry['featuresAlert'] = this.featuresAlert;
         }
-        this.$emit('connectivity-info-open', this.tooltipEntry);
+        this.$emit('connectivity-info-open', this.provenanceEntry);
+      }
+      if (this.imageThumbnailSidebar && this.viewingMode === 'Exploration') {
+        this.$emit('image-thumbnail-open', this.imageEntry)
       }
       // If UI is not disabled,
       // And connectivityInfoSidebar is not set (default) or set to `false`
@@ -2010,8 +2164,10 @@ export default {
           this.viewingMode === 'Annotation' ||
           (
             this.viewingMode === 'Exploration' &&
-            !this.connectivityInfoSidebar &&
-            this.hasTooltipEntry()
+            (
+              (!this.connectivityInfoSidebar && this.hasTooltipEntry()) ||
+              (!this.imageThumbnailSidebar && this.imageEntry.length)
+            )
           )
         )
       ) {
@@ -2030,7 +2186,7 @@ export default {
         origins,
         provenanceTaxonomy,
         provenanceTaxonomyLabel
-      } = this.tooltipEntry;
+      } = this.provenanceEntry;
 
       return Boolean(
         components?.length ||
@@ -2334,9 +2490,9 @@ export default {
       this.addResizeButtonToMinimap()
       this.loading = false
       this.computePathControlsMaximumHeight()
-      this.drawerOpen = !this.isCentreLine      
+      this.drawerOpen = !this.isCentreLine
       this.mapResize()
-      this.handleMapClick();
+      this.handleMapClick()
       /**
        * This is ``onFlatmapReady`` event.
        * @arg ``this`` (Component Vue Instance)
@@ -2353,7 +2509,8 @@ export default {
 
       if (_map) {
         _map.on('click', (e) => {
-          if (this.tooltipEntry.featureId) {
+          // Tmeporary add imageEntry length
+          if (this.provenanceEntry.featureId || this.imageEntry.length) {
             this.$emit('connectivity-info-close');
           }
         });
@@ -2600,12 +2757,12 @@ export default {
      */
     sparcAPI: {
       type: String,
-      default: 'https://api.sparc.science/',
+      default: '',
     },
     /**
      * Flag to disable UIs on Map
      */
-     disableUI: {
+    disableUI: {
       type: Boolean,
       default: false,
     },
@@ -2616,11 +2773,17 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * The option to show image thumbnail in sidebar
+     */
+    imageThumbnailSidebar: {
+      type: Boolean,
+      default: false,
+    },
   },
   provide() {
     return {
       flatmapAPI: this.flatmapAPI,
-      sparcAPI: this.sparcAPI,
       $annotator: this.annotator,
       getFeaturesAlert: () => this.featuresAlert,
       userApiKey: this.userToken,
@@ -2639,6 +2802,8 @@ export default {
       serverURL: undefined,
       layers: [],
       pathways: [],
+      imageEntry: markRaw([]),
+      tooltipType: 'provenance',
       sckanDisplay: [
         {
           label: 'Display Path with SCKAN',
@@ -2682,8 +2847,9 @@ export default {
       currentBackground: 'white',
       availableBackground: ['white', 'lightskyblue', 'black'],
       loading: false,
+      imagesDownloading: false,
       flatmapMarker: flatmapMarker,
-      tooltipEntry: createUnfilledTooltipData(),
+      provenanceEntry: createUnfilledTooltipData(),
       connectivityTooltipVisible: false,
       drawerOpen: false,
       featuresAlert: undefined,
@@ -2706,6 +2872,9 @@ export default {
       drawnTypes: ['All tools', 'Point', 'LineString', 'Polygon', 'None'],
       annotatedType: 'Anyone',
       annotatedTypes: ['Anyone', 'Me', 'Others'],
+      imageRadio: false,
+      imageType: 'Image',
+      imageTypes: ['Image', 'Segmentation', 'Scaffold', 'Plot'],
       openMapRef: undefined,
       backgroundIconRef: undefined,
       toolbarOptions: [
@@ -2743,11 +2912,12 @@ export default {
           with: true,
           without: true,
         }
-      })
+      }),
     }
   },
   computed: {
     ...mapState(useMainStore, ['userToken']),
+    ...mapStores(useSettingsStore),
     isValidDrawnCreated: function () {
       return Object.keys(this.drawnCreatedEvent).length > 0
     },
@@ -3251,6 +3421,10 @@ export default {
   }
 }
 
+.icon-button-container {
+  display: inline-block;
+}
+
 .icon-button {
   height: 24px !important;
   width: 24px !important;
@@ -3585,7 +3759,12 @@ export default {
   background-color: var(--white);
   font-weight: 500;
   color: rgb(48, 49, 51);
-  width: 150px!important;
+  &.annotationSelector {
+    width: 150px!important;
+  }
+  &.imageSelector {
+    width: 125px!important;
+  }
 }
 
 :deep(.flatmap_dropdown) {