[feat] add support for locking map during ML inference

static/package.json

@@ -1,10 +1,8 @@
 {
-  "name": "ml-trinca",
-  "version": "1.1.0",
-  "license": "Apache-2.0",
+  "name": "samgis-fe",
+  "private": true,
   "scripts": {
     "dev": "vite",
-    "dev_4040": "vite --host 0.0.0.0 --port 4040",
     "build": "vite build",
     "preview": "vite preview --port 5173",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
@@ -12,27 +10,24 @@
   "type": "module",
   "dependencies": {
     "@geoman-io/leaflet-geoman-free": "^2.16.0",
-    "driver.js": "github:trincadev/driver.js",
+    "@trincadev/driver.js": "https://github.com/trincadev/driver.js/archive/refs/tags/1.3.1.1-trincadev.tar.gz",
     "leaflet": "^1.9.4",
     "leaflet-providers": "^2.0.0",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
+    "vue": "^3.4.23"
   },
   "devDependencies": {
-    "@headlessui/vue": "^1.7.19",
-    "@heroicons/vue": "^2.1.3",
     "@tsconfig/node20": "^20.1.4",
-    "@types/leaflet": "^1.9.9",
-    "@types/node": "^20.12.5",
+    "@types/leaflet": "^1.9.11",
+    "@types/node": "^20.12.7",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.19",
-    "eslint": "^9.0.0",
-    "eslint-plugin-vue": "^9.24.0",
+    "eslint": "^9.1.0",
+    "eslint-plugin-vue": "^9.25.0",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
     "prettier": "^3.2.5",
     "tailwindcss": "^3.4.3",
-    "vite": "^5.2.8"
+    "vite": "^5.2.10"
   }
 }

static/src/AppLisa.vue

@@ -1,7 +1,7 @@
 <template>
   <PageLayout pageTitle="SamGIS with LISA - Inference map page">
     <div>
-      <div id="map-container-md">
+      <div id="map-container-md-lisa">
         <PageLisaMap :mapName="mapName"
           :mapBounds='[
             { "lat": 46.172594687922256, "lng": 10.079248798586057 },
@@ -21,4 +21,5 @@ import PageLayout from '@/components/PageLayout.vue'
 
 const mapName = ref('lisa-map')
 const description = ref("This page displays predictions made with LISA VLM.")
+console.log("lisa")
 </script>

static/src/AppMain.vue

@@ -1,7 +1,7 @@
 <template>
   <PageLayout pageTitle="SamGIS - Inference map page">
     <div>
-      <div id="map-container-md">
+      <div id="map-container-md-main">
         <PredictionMap
             :mapName="mapName"
             :mapBounds='[{

static/src/components/NavBar/NavBar.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="fixed top-2 right-5 mr-2 items-center">
     <TabComponent description="About SamGIS" href="https://trinca.tornidor.com/projects/samgis-segment-anything-applied-to-GIS" />
-    <TabComponent description="My blog" href="https://trinca.tornidor.com/" />
-    <TabComponent description="SamGIS docs" href="https://docs.ml-trinca.tornidor.com/" />
+    <TabComponent description="blog" href="https://trinca.tornidor.com/" />
+    <TabComponent description="docs" href="https://docs.ml-trinca.tornidor.com/" />
   </div>
 </template>
 

static/src/components/PageLisaMap.vue

@@ -5,39 +5,40 @@
 
       <div class="lg:border-r lg:col-span-3">
         <div id="id-map-cont" class="">
-
-          <details id="detail-prompt-examples-array" :open="detailIsOpenRef">
-
-            <summary><i>Expand this detail element for some prompt examples</i></summary>
-            <div class="grid grid-cols-1 md:grid-cols-3" id="prompt-examples-array">
-              <div class="text-xs font-extralight flex bg-green-200">
-                <textarea
-                    id="prompt-text-placeholder"
-                    v-model="promptTextPlaceholderRef"
-                    class="p-2 border-2 border-indigo-500/100 w-full"
+          <div class="flex">
+            <span class="ml-2">
+              <input type="checkbox" id="checkboxMapNavigationLocked" v-model="mapNavigationLocked" />
+              <span class="ml-2">
+                  <label class="text-red-600" for="checkboxMapNavigationLocked" v-if="mapNavigationLocked">locked map navigation!</label>
+                  <label class="text-blue-600" for="checkboxMapNavigationLocked" v-else>map navigation unlocked</label>
+              </span>
+            </span>
+            <details id="detail-prompt-examples-array" :open="detailIsOpenRef" class="ml-2">
+
+              <summary><i>prompt examples here</i></summary>
+              <div class="grid grid-cols-1 md:grid-cols-3" id="prompt-examples-array">
+                <div class="text-xs font-extralight flex bg-green-200">
+                  <textarea
+                      id="prompt-text-placeholder"
+                      v-model="promptTextPlaceholderRef"
+                      class="p-2 border-2 border-indigo-500/100 w-full"
+                  />
+                </div>
+                <StringArray
+                    :string-array="promptTextArray"
+                    :string-prefix="promptTextPlaceholderRef"
+                    @set-prompt="(stringPrompt: string) => promptTextRef = stringPrompt"
                 />
               </div>
-              <StringArray
-                  :string-array="promptTextArray"
-                  :string-prefix="promptTextPlaceholderRef"
-                  @set-prompt="(stringPrompt: string) => promptTextRef = stringPrompt"
-              />
-            </div>
 
-          </details>
+            </details>
+          </div>
 
-          <div class="flex">
-            <textarea
-                id="prompt-text-llm-ref"
-                v-model="promptTextRef"
-                :placeholder=promptTextPlaceholderRef
-                rows="2"
-                class="w-full md:pt-1 md:pb-1 flex border-2 mt-2 mb-2 mr-2 border-indigo-500/100"
-            ></textarea>
-            <div class="w-full md:pt-1 md:pb-1 flex">
+          <div class="flex w-full lg:w-2/3">
+            <div class="md:pt-1 md:pb-1 md:mr-1 mr-2">
               <ButtonMapSendStringRequest
                   id="id-button-submit"
-                  class="h-8 mt-2 text-sm font-extralight min-w-[180px] max-w-[180px]"
+                  class="w-full h-8 mt-2 text-sm font-extralight min-w-[180px] max-w-[180px]"
                   :current-base-map-name="currentBaseMapNameRef"
                   :map="map"
                   :promptText="promptTextRef"
@@ -46,7 +47,13 @@
                   :waiting-string="waitingString"
               />
             </div>
-
+            <textarea
+                  id="prompt-text-llm-ref"
+                  v-model="promptTextRef"
+                  :placeholder=promptTextPlaceholderRef
+                  rows="2"
+                  class="w-full md:pt-1 md:pb-1 border-2 mt-2 mb-2 mr-2 border-indigo-500/100"
+              ></textarea>
           </div>
 
           <div id="map" class="map-predictions"/>
@@ -96,11 +103,14 @@ import {
   TileLayer as LTileLayer
 } from 'leaflet'
 import 'leaflet-providers'
-import {onMounted, ref, type Ref} from 'vue'
-import {driver} from "../../node_modules/driver.js/src/driver"
+import { onMounted, onUpdated, ref, type Ref } from 'vue'
+// workaround because of dist/ content not included in @trincadev/driver.js tag release tarball
+import { driver } from "../../node_modules/@trincadev/driver.js/src/driver"
 
 import {
   durationRef,
+  maxZoom,
+  minZoom,
   numberOfPolygonsRef,
   numberOfPredictedMasksRef,
   OpenStreetMap,
@@ -197,6 +207,7 @@ const currentZoomRef = ref()
 const promptTextRef: Ref<string> = ref("")
 const promptTextPlaceholderRef: Ref<string> = ref(promptPlaceHolder)
 const detailIsOpenRef: Ref<boolean> = ref(false)
+const mapNavigationLocked = ref(false)
 let map: LMap
 type ServiceTiles = {
   [key: SourceTileType]: LTileLayer;
@@ -224,6 +235,7 @@ const getPopupContentPoint = (leafletEvent: LEvented, label: number): HTMLDivEle
 }
 
 const sendMLStringRequest = async (leafletMap: LMap, promptRequest: string, sourceType: SourceTileType = OpenStreetMap) => {
+  mapNavigationLocked.value = true
   const bodyRequest: IBodyLatLngWithStringPoints = {
     bbox: getExtentCurrentViewMapBBox(leafletMap),
     string_prompt: promptRequest,
@@ -277,7 +289,9 @@ onMounted(async () => {
   currentBaseMapNameRef.value = OpenStreetMap
 
   map = LeafletMap('map', {
-    layers: [osmTile]
+    layers: [osmTile],
+    minZoom: minZoom,
+    maxZoom: maxZoom
   })
   map.fitBounds(props.mapBounds)
   map.attributionControl.setPrefix(prefix)
@@ -301,5 +315,23 @@ onMounted(async () => {
 
   lisaDriverObj.drive();
 })
+
+onUpdated(() => {
+  if (mapNavigationLocked.value) {
+    map.setMaxZoom(currentZoomRef.value)
+    map.setMinZoom(currentZoomRef.value)
+    map.options.maxBoundsViscosity = 1.0
+    map.setMaxBounds(map.getBounds())
+  }
+  if (!mapNavigationLocked.value) {
+    map.setMaxZoom(maxZoom)
+    map.setMinZoom(minZoom)
+    map.options.maxBoundsViscosity = 0.0
+    map.setMaxBounds([
+      [90, 180],
+      [-90, -180]
+    ])
+  }
+})
 </script>
 

static/src/components/PagePredictionMap.vue

@@ -14,9 +14,16 @@
               :map="map"
               :prompts-array="promptsArrayRef"
               :response-message="responseMessageRef"
-              :send-m-l-request="sendMLLatLngArrayRequest"
+              :send-m-l-request="sendMLArrayRequest"
               :waiting-string="waitingString"
             />
+            <span class="ml-2 lg:hidden">
+              <input type="checkbox" id="checkboxMapNavigationLocked" v-model="mapNavigationLocked" />
+              <span class="ml-2">
+                  <label class="text-red-600" for="checkboxMapNavigationLocked" v-if="mapNavigationLocked">locked map navigation!</label>
+                  <label class="text-blue-600" for="checkboxMapNavigationLocked" v-else>map navigation unlocked</label>
+              </span>
+            </span>
           </div>
           <div id="map" class="map-predictions" />
           <ButtonMapSendArrayRequest
@@ -26,10 +33,16 @@
             :map="map"
             :prompts-array="promptsArrayRef"
             :response-message="responseMessageRef"
-            :send-m-l-request="sendMLLatLngArrayRequest"
+            :send-m-l-request="sendMLArrayRequest"
             :waiting-string="waitingString"
           />
-
+          <span class="hidden lg:block lg:ml-2">
+              <input type="checkbox" id="checkboxMapNavigationLocked" v-model="mapNavigationLocked" />
+              <span class="ml-2">
+                  <label class="text-red-600" for="checkboxMapNavigationLocked" v-if="mapNavigationLocked">locked map navigation!</label>
+                  <label class="text-blue-600" for="checkboxMapNavigationLocked" v-else>map navigation unlocked</label>
+              </span>
+            </span>
         </div>
       </div>
 
@@ -44,7 +57,6 @@
               {statName: 'prompt: points/rectangles number', statValue: promptsArrayRef.length},
             ]" />
           </div>
-
           <div v-if="responseMessageRef === waitingString" />
           <h2 v-else-if="responseMessageRef || responseMessageRef == '-'" class="text-lg text-red-600">{{ responseMessageRef }}</h2>
           <div v-else>
@@ -97,11 +109,14 @@ import {
 } from 'leaflet'
 import 'leaflet-providers'
 import '@geoman-io/leaflet-geoman-free'
-import { onMounted, ref, type Ref } from 'vue'
-import { driver } from "../../node_modules/driver.js/src/driver"
+import { onMounted, onUpdated, ref, type Ref } from 'vue'
+// workaround because of dist/ content not included in @trincadev/driver.js tag release tarball
+import { driver } from "../../node_modules/@trincadev/driver.js/src/driver"
 
 import {
   durationRef,
+  maxZoom,
+  minZoom,
   numberOfPolygonsRef,
   numberOfPredictedMasksRef,
   OpenStreetMap,
@@ -128,7 +143,7 @@ const driverObj = driver({
   showProgress: true,
   steps: [
     { element: 'id-prediction-map-container', popover: { title: 'SamGIS', description: 'A quick tour about SamGIS functionality' } },
-    { element: '#map', popover: { title: 'Webmap for ML prompt', description: 'Add here your machine learning prompt' } },
+    { element: '#map', popover: { title: 'Webmap for ML prompt', description: 'Add here your machine learning prompt. Pay attention about markers and polygons outside the map bounds: you could get unexpected results' } },
     { element: '.leaflet-pm-icon-marker-include', popover: { title: '"Include" point prompt', description: 'add "include" points prompt (label 1) for machine learning request' } },
     { element: '.leaflet-pm-icon-marker-exclude', popover: { title: '"Exclude" point prompt', description: 'add "exclude" points prompt (label 0) for machine learning request' } },
     { element: '.leaflet-pm-icon-rectangle', popover: { title: '"Include" rectangle prompt', description: 'add "include" rectangles prompt for machine learning request' } },
@@ -143,6 +158,8 @@ const currentBaseMapNameRef = ref("")
 const currentMapBBoxRef = ref()
 const currentZoomRef = ref()
 const promptsArrayRef: Ref<Array<IPointPrompt | IRectanglePrompt>> = ref([])
+const mapNavigationLocked = ref(false)
+const mapOptionsDefaultRef = ref()
 let map: LMap
 type ServiceTiles = {
   [key: SourceTileType]: LTileLayer;
@@ -169,13 +186,14 @@ const getPopupContentPoint = (leafletEvent: LEvented, label: number): HTMLDivEle
   return popupDiv
 }
 
-const sendMLLatLngArrayRequest = async (leafletMap: LMap, promptRequest: Array<IPointPrompt | IRectanglePrompt>, sourceType: SourceTileType = OpenStreetMap) => {
+const sendMLArrayRequest = async (leafletMap: LMap, promptRequest: Array<IPointPrompt | IRectanglePrompt>, sourceType: SourceTileType = OpenStreetMap) => {
   if (map.pm.globalDragModeEnabled()) {
     map.pm.disableGlobalDragMode()
   }
   if (map.pm.globalEditModeEnabled()) {
     map.pm.disableGlobalEditMode()
   }
+  mapNavigationLocked.value = true
   const bodyRequest: IBodyLatLngPoints = {
     bbox: getExtentCurrentViewMapBBox(leafletMap),
     prompt: promptRequest,
@@ -222,14 +240,15 @@ onMounted(async () => {
             "<a href='https://github.com/tilezen/joerd/blob/master/docs/attribution.md'>Mapzen Source Attributions</a>."
       }
   )
-
   let baseMaps: ServiceTiles = { OpenStreetMap: osmTile }
   baseMaps[localVarSatellite] = satelliteTile
   baseMaps[localVarTerrain] = terrainTile
   currentBaseMapNameRef.value = OpenStreetMap
 
   map = LeafletMap('map', {
-    layers: [osmTile]
+    layers: [osmTile],
+    minZoom: minZoom,
+    maxZoom: maxZoom
   })
   map.fitBounds(props.mapBounds)
   map.attributionControl.setPrefix(prefix)
@@ -238,6 +257,7 @@ onMounted(async () => {
   LeafletControl.layers(baseMaps).addTo(map)
   setGeomanControls(map)
   updateZoomBboxMap(map)
+  mapOptionsDefaultRef.value = {...map.options}
 
   map.on('zoomend', (e: LEvented) => {
     updateZoomBboxMap(map)
@@ -254,5 +274,23 @@ onMounted(async () => {
 
   driverObj.drive();
 })
+
+onUpdated(() => {
+  if (mapNavigationLocked.value) {
+    map.setMaxZoom(currentZoomRef.value)
+    map.setMinZoom(currentZoomRef.value)
+    map.options.maxBoundsViscosity = 1.0
+    map.setMaxBounds(map.getBounds())
+  }
+  if (!mapNavigationLocked.value) {
+    map.setMaxZoom(maxZoom)
+    map.setMinZoom(minZoom)
+    map.options.maxBoundsViscosity = 0.0
+    map.setMaxBounds([
+      [90, 180],
+      [-90, -180]
+    ])
+  }
+})
 </script>
 

static/src/components/constants.ts

@@ -4,7 +4,7 @@ export const prefix = " &copy; <a target=\"_blank\" href=\"https://leafletjs.com
 export const OpenStreetMap = "OpenStreetMap"
 export const Satellite = "OpenStreetMap.HOT"
 export const maxZoom = 20
-export const minZoom = 3
+export const minZoom = 2
 export const waitingString = "waiting..."
 export const durationRef = ref(0)
 export const numberOfPolygonsRef = ref(0)

static/src/input.css

@@ -1,7 +1,8 @@
 @import "leaflet/dist/leaflet.css";
 @import "leaflet-custom.css";
 @import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
-@import "../node_modules/driver.js/src/driver.css";
+/* workaround because of dist/ content not included in @trincadev/driver.js tag release tarball */
+@import "../node_modules/@trincadev/driver.js/src/driver.css";
 
 @tailwind base;