[feat] PageLisaMap/PagePredictionMap: add inference polygons as overlay, refactor code

static/src/components/PageLisaMap.vue

@@ -95,7 +95,6 @@
 import {
   control as LeafletControl,
   Evented as LEvented,
-  geoJSON as LeafletGeoJSON,
   type LatLng,
   Map as LMap,
   map as LeafletMap,
@@ -108,7 +107,13 @@ import { onMounted, onUpdated, ref, type Ref } from 'vue'
 import { driver } from "../../node_modules/@trincadev/driver.js/src/driver"
 
 import {
+  currentBaseMapNameRef,
+  currentMapBBoxRef,
+  currentZoomRef,
+  lisaPartialDriverSteps,
   durationRef,
+  layerControlGroupLayersRef,
+  mapNavigationLocked,
   maxZoom,
   minZoom,
   numberOfPolygonsRef,
@@ -123,95 +128,57 @@ import {
   waitingString
 } from './constants'
 import {
+  getCurrentBasemap,
   getExtentCurrentViewMapBBox,
-  getGeoJSONRequest,
+  sendMLStringRequest,
   getQueryParams,
   getSelectedPointCoordinate,
-  updateMapData
+  updateMapData,
+  updateZoomBboxMap
 } from '@/components/helpers'
-import type {IBodyLatLngWithStringPoints, SourceTileType} from '@/components/types';
+import type { SourceTileType, ServiceTiles } from '@/components/types';
 import StatsGrid from '@/components/StatsGrid.vue';
 import StringArray from '@/components/StringArray.vue';
 import ButtonMapSendStringRequest from '@/components/buttons/ButtonMapSendStringRequest.vue';
 
+const promptTextRef: Ref<string> = ref("")
+const promptTextPlaceholderRef: Ref<string> = ref(promptPlaceHolder)
+const detailIsOpenRef: Ref<boolean> = ref(false)
+
 const lisaDriverObj = driver({
   showProgress: true,
   steps: [
-    {
-      element: 'id-prediction-map-container', popover: {
-        title: 'SamGIS with LISA',
-        description: 'A quick tour about functionalities of SamGIS with LISA',
-        onNextClick: () => {
-          detailIsOpenRef.value = true
-          lisaDriverObj.moveNext();
-        }
-      }
-    },
-    {
-      element: '#map',
-      popover: {
-        title: 'Geographic map',
-        description: 'Choose here the map area where you can execute your machine learning prompt'
-      }
-    },
-    {
-      element: "#prompt-examples-array",
-      popover: {title: 'Some prompt examples', description: 'A selection of prompt examples'}
-    },
-    {
-      element: "#prompt-text-placeholder", popover: {
-        title: 'Default prompt prefix',
-        description: 'A good LLM prompt prefix tailored for photogrammetry, remote sensing and geomorphology (editable)'
-      }
-    },
-    {
-      element: "#prompt-text-llm-ref", popover: {
-        title: 'Prompt text',
-        description: 'Editable text area for the LLM text prompt (you can precompile it clicking on the examples)'
+  {
+    element: 'id-prediction-map-container', popover: {
+      title: 'SamGIS with LISA...',
+      description: 'A quick tour about functionalities of SamGIS with LISA!',
+      onNextClick: () => {
+        detailIsOpenRef.value = true
+        lisaDriverObj.moveNext();
       }
-    },
-    {
-      element: "#id-button-submit",
-      popover: {title: 'LLM submit button', description: 'submit button for the LISA request'}
-    },
-    {
-      element: '.leaflet-control-layers-toggle',
-      popover: {title: 'Map provider selector', description: 'select a different map provider'}
-    },
-    {
-      element: '#lisa-response-text',
-      popover: {title: 'LISA response text', description: 'Output area with the LISA response text'}
-    },
-    {
-      element: '#id-map-info', popover: {
-        title: 'map info',
-        description: 'Section about various map info',
-        onNextClick: () => {
-          detailIsOpenRef.value = false
-          lisaDriverObj.moveNext();
-        }
-      }
-    },
-    {
-      element: "#detail-prompt-examples-array", popover: {
-        title: 'Detail: Array of Prompt Examples',
-        description: 'Click here to expand the array of prompt examples (closed by default)'
+    }
+  },
+  ...lisaPartialDriverSteps,
+  {
+    element: '#id-map-info', popover: {
+      title: 'map info',
+      description: 'Section about various map info',
+      onNextClick: () => {
+        detailIsOpenRef.value = false
+        lisaDriverObj.moveNext();
       }
-    },
-  ]
+    }
+  },
+  {
+    element: "#detail-prompt-examples-array", popover: {
+      title: 'Detail: Array of Prompt Examples',
+      description: 'Click here to expand the array of prompt examples (closed by default)'
+    }
+  },
+]
 });
 
-const currentBaseMapNameRef = ref("")
-const currentMapBBoxRef = ref()
-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;
-};
 
 const props = defineProps<{
   mapBounds: Array<LatLng>,
@@ -234,39 +201,6 @@ const getPopupContentPoint = (leafletEvent: LEvented, label: number): HTMLDivEle
   return popupDiv
 }
 
-const sendMLStringRequest = async (leafletMap: LMap, promptRequest: string, sourceType: SourceTileType = OpenStreetMap) => {
-  mapNavigationLocked.value = true
-  const bodyRequest: IBodyLatLngWithStringPoints = {
-    bbox: getExtentCurrentViewMapBBox(leafletMap),
-    string_prompt: promptRequest,
-    zoom: leafletMap.getZoom(),
-    source_type: sourceType
-  }
-  try {
-    const geojsonOutputOnMounted = await getGeoJSONRequest(bodyRequest, '/infer_lisa')
-    const featureNew = LeafletGeoJSON(geojsonOutputOnMounted)
-    leafletMap.addLayer(featureNew)
-  } catch (errGeojsonOutputOnMounted) {
-    console.error('sendMLRequest:: sourceType: ', sourceType)
-    console.error('sendMLRequest:: promptRequest: ', promptRequest.length, '::', promptRequest)
-    console.error('sendMLRequest:: bodyRequest => ', bodyRequest, "#")
-    console.error("errGeojsonOutputOnMounted => ", errGeojsonOutputOnMounted)
-  }
-}
-
-const updateZoomBboxMap = (localMap: LMap) => {
-  currentZoomRef.value = localMap.getZoom()
-  currentMapBBoxRef.value = getExtentCurrentViewMapBBox(localMap)
-}
-
-const getCurrentBasemap = (url: string, providersArray: ServiceTiles) => {
-  for (const [key, value] of Object.entries(providersArray)) {
-    if (value._url == url) {
-      return key
-    }
-  }
-}
-
 onMounted(async () => {
   const osmTile = tileLayer.provider(OpenStreetMap)
   const params = getQueryParams()
@@ -296,8 +230,7 @@ onMounted(async () => {
   map.fitBounds(props.mapBounds)
   map.attributionControl.setPrefix(prefix)
   LeafletControl.scale({position: 'bottomleft', imperial: false, metric: true}).addTo(map)
-
-  LeafletControl.layers(baseMaps).addTo(map)
+  layerControlGroupLayersRef.value = LeafletControl.layers(baseMaps).addTo(map)
   updateZoomBboxMap(map)
 
   map.on('zoomend', (e: LEvented) => {

static/src/components/PagePredictionMap.vue

@@ -100,8 +100,7 @@
 import {
   control as LeafletControl,
   Evented as LEvented,
-  geoJSON as LeafletGeoJSON,
-  type LatLng,
+    type LatLng,
   Map as LMap,
   map as LeafletMap,
   tileLayer,
@@ -114,13 +113,21 @@ import { onMounted, onUpdated, ref, type Ref } from 'vue'
 import { driver } from "../../node_modules/@trincadev/driver.js/src/driver"
 
 import {
+  currentBaseMapNameRef,
+  currentMapBBoxRef,
+  currentZoomRef,
+  driverSteps,
   durationRef,
+  layerControlGroupLayersRef,
+  mapNavigationLocked,
+  mapOptionsDefaultRef,
   maxZoom,
   minZoom,
   numberOfPolygonsRef,
   numberOfPredictedMasksRef,
   OpenStreetMap,
   prefix,
+  promptsArrayRef,
   responseMessageRef,
   Satellite,
   waitingString
@@ -128,42 +135,25 @@ import {
 import {
   applyFnToObjectWithinArray,
   getExtentCurrentViewMapBBox,
-  getGeoJSONRequest,
+  sendMLArrayRequest,
   getQueryParams,
   getSelectedPointCoordinate,
   setGeomanControls,
-  updateMapData
+  updateMapData,
+  updateZoomBboxMap,
+  getCurrentBasemap
 } from '@/components/helpers'
-import type { IBodyLatLngPoints, IPointPrompt, IRectanglePrompt, SourceTileType } from '@/components/types';
+import type { SourceTileType, ServiceTiles } from '@/components/types';
 import StatsGrid from '@/components/StatsGrid.vue';
 import TableGenericComponent from '@/components/TableGenericComponent.vue';
 import ButtonMapSendArrayRequest from '@/components/buttons/ButtonMapSendArrayRequest.vue';
 
 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. 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' } },
-    { element: "#id-button-submit", popover: { title: 'ML submit button', description: 'Machine learning submit button' } },
-    { element: '.leaflet-control-layers-toggle', popover: { title: 'Map provider selector', description: 'select a different map provider' } },
-    { element: '#id-map-info', popover: { title: 'map info', description: 'Section about various map info' } },
-    { element: '#id-ml-request-prompt', popover: { title: 'ML prompt quest', description: 'Empty at beginning, this table will contain the machine learning prompt (points and rectangles) section' } }
-  ]
+  steps: driverSteps
 });
 
-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;
-};
 
 const props = defineProps<{
   mapBounds: Array<LatLng>,
@@ -186,45 +176,6 @@ const getPopupContentPoint = (leafletEvent: LEvented, label: number): HTMLDivEle
   return popupDiv
 }
 
-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,
-    zoom: leafletMap.getZoom(),
-    source_type: sourceType
-  }
-  try {
-    const geojsonOutputOnMounted = await getGeoJSONRequest(bodyRequest, '/infer_samgis')
-    const featureNew = LeafletGeoJSON(geojsonOutputOnMounted)
-    leafletMap.addLayer(featureNew)
-  } catch (errGeojsonOutputOnMounted) {
-    console.error('sendMLRequest:: sourceType: ', sourceType)
-    console.error('sendMLRequest:: promptRequest: ', promptRequest.length, '::', promptRequest)
-    console.error('sendMLRequest:: bodyRequest => ', bodyRequest, "#")
-    console.error("errGeojsonOutputOnMounted => ", errGeojsonOutputOnMounted)
-  }
-}
-
-const updateZoomBboxMap = (localMap: LMap) => {
-  currentZoomRef.value = localMap.getZoom()
-  currentMapBBoxRef.value = getExtentCurrentViewMapBBox(localMap)
-}
-
-const getCurrentBasemap = (url: string, providersArray: ServiceTiles) => {
-  for (const [key, value] of Object.entries(providersArray)) {
-    if (value._url == url) {
-      return key
-    }
-  }
-}
-
 onMounted(async () => {
   const osmTile = tileLayer.provider(OpenStreetMap)
   const params = getQueryParams()
@@ -253,8 +204,7 @@ onMounted(async () => {
   map.fitBounds(props.mapBounds)
   map.attributionControl.setPrefix(prefix)
   LeafletControl.scale({ position: 'bottomleft', imperial: false, metric: true }).addTo(map)
-
-  LeafletControl.layers(baseMaps).addTo(map)
+  layerControlGroupLayersRef.value = LeafletControl.layers(baseMaps).addTo(map)
   setGeomanControls(map)
   updateZoomBboxMap(map)
   mapOptionsDefaultRef.value = {...map.options}
@@ -293,4 +243,3 @@ onUpdated(() => {
   }
 })
 </script>
-

static/src/components/constants.ts

@@ -1,4 +1,7 @@
-import { ref } from "vue"
+import { ref, type Ref } from "vue"
+import {Control as LeafletControl} from 'leaflet'
+import type { IPointPrompt, IRectanglePrompt } from "./types"
+import { driver, type DriveStep } from "../../node_modules/@trincadev/driver.js/src/driver"
 
 export const prefix = " &copy; <a target=\"_blank\" href=\"https://leafletjs.com\">leaflet</a>"
 export const OpenStreetMap = "OpenStreetMap"
@@ -11,6 +14,13 @@ export const numberOfPolygonsRef = ref(0)
 export const numberOfPredictedMasksRef = ref(0)
 export const responseMessageRef = ref("-")
 export const geojsonRef = ref("geojsonOutput-placeholder")
+export const currentBaseMapNameRef = ref("")
+export const currentMapBBoxRef = ref()
+export const currentZoomRef = ref()
+export const promptsArrayRef: Ref<Array<IPointPrompt | IRectanglePrompt>> = ref([])
+export const mapOptionsDefaultRef = ref()
+export const layerControlGroupLayersRef = ref(new LeafletControl.Layers());
+export const mapNavigationLocked = ref(false)
 export const responseMessageLisaRef = ref("-")
 
 export const promptPlaceHolder = "You are a skilled gis analyst with a lot of expertise " +
@@ -245,3 +255,51 @@ export const htmlStatusMessages = [
     phrase: 'Network Authentication Required'
   }
 ]
+export const driverSteps = [
+  { 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. 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' } },
+  { element: "#id-button-submit", popover: { title: 'ML submit button', description: 'Machine learning submit button' } },
+  { element: '.leaflet-control-layers-toggle', popover: { title: 'Map provider selector', description: 'select a different map provider' } },
+  { element: '#id-map-info', popover: { title: 'map info', description: 'Section about various map info' } },
+  { element: '#id-ml-request-prompt', popover: { title: 'ML prompt quest', description: 'Empty at beginning, this table will contain the machine learning prompt (points and rectangles) section' } }
+]
+export const lisaPartialDriverSteps: Array<DriveStep> = [
+  {
+    element: '#map',
+    popover: {
+      title: 'Geographic map',
+      description: 'Choose here the map area where you can execute your machine learning prompt'
+    }
+  },
+  {
+    element: "#prompt-examples-array",
+    popover: {title: 'Some prompt examples', description: 'A selection of prompt examples'}
+  },
+  {
+    element: "#prompt-text-placeholder", popover: {
+      title: 'Default prompt prefix',
+      description: 'A good LLM prompt prefix tailored for photogrammetry, remote sensing and geomorphology (editable)'
+    }
+  },
+  {
+    element: "#prompt-text-llm-ref", popover: {
+      title: 'Prompt text',
+      description: 'Editable text area for the LLM text prompt (you can precompile it clicking on the examples)'
+    }
+  },
+  {
+    element: "#id-button-submit",
+    popover: {title: 'LLM submit button', description: 'submit button for the LISA request'}
+  },
+  {
+    element: '.leaflet-control-layers-toggle',
+    popover: {title: 'Map provider selector', description: 'select a different map provider'}
+  },
+  {
+    element: '#lisa-response-text',
+    popover: {title: 'LISA response text', description: 'Output area with the LISA response text'}
+  }
+]

static/src/components/helpers.ts

@@ -1,12 +1,16 @@
-import L, { icon, Evented as LEvented, type LatLng, Map as LMap } from 'leaflet'
-import 'leaflet-providers'
+import L, { icon, Evented as LEvented, type LatLng, Map as LMap, geoJSON as LeafletGeoJSON, FeatureGroup, } from 'leaflet'
 import {
-  responseMessageLisaRef,
-  responseMessageRef,
-  waitingString,
+  currentMapBBoxRef,
+  currentZoomRef,
   durationRef,
   numberOfPolygonsRef,
-  numberOfPredictedMasksRef
+  numberOfPredictedMasksRef,
+  layerControlGroupLayersRef,
+  mapNavigationLocked,
+  OpenStreetMap,
+  responseMessageRef,
+  responseMessageLisaRef,
+  waitingString
 } from './constants'
 import {
   ExcludeIncludeLabelPrompt as excludeIncludeLabelPrompt,
@@ -15,10 +19,84 @@ import {
   type ExcludeIncludeLabelPrompt,
   type IBodyLatLngPoints,
   type IPointPrompt,
-  type IRectanglePrompt, type IRectangleTable, type IPointTable, type IBodyLatLngWithStringPoints
+  type IRectanglePrompt,
+  type IRectangleTable,
+  type IPointTable,
+  type SourceTileType,
+  type ServiceTiles,
+  type IBodyLatLngWithStringPoints
 } from './types.d'
-import type { Ref } from 'vue'
+import { type Ref } from 'vue'
+
+
+export const updateZoomBboxMap = (localMap: LMap) => {
+  currentZoomRef.value = localMap.getZoom()
+  currentMapBBoxRef.value = getExtentCurrentViewMapBBox(localMap)
+}
 
+export const getCurrentBasemap = (url: string, providersArray: ServiceTiles): string => {
+  for (const [key, value] of Object.entries(providersArray)) {
+    if (value._url == url) {
+      return key
+    }
+  }
+  return "-"
+}
+
+const logErrorOnRequest = (fnName: string, errorsArgs: Object): void => {
+  for (const [key, value] of Object.entries(errorsArgs)) {
+    console.error(`error:${fnName}:: ${key}: `, value)
+  }
+}
+export const sendMLStringRequest = async (leafletMap: LMap, promptRequest: string, sourceType: SourceTileType = OpenStreetMap) => {
+  console.log("sendMLStringRequest:: start")
+  mapNavigationLocked.value = true
+  const bodyRequest: IBodyLatLngWithStringPoints = {
+    bbox: getExtentCurrentViewMapBBox(leafletMap),
+    string_prompt: promptRequest,
+    zoom: leafletMap.getZoom(),
+    source_type: sourceType
+  }
+  try {
+    await sendMLRequest('/infer_lisa', bodyRequest, leafletMap)
+    console.log("sendMLStringRequest:: end")
+  } catch (errGeojsonOutputOnMounted) {
+    logErrorOnRequest("sendMLStringRequest", {sourceType, promptRequest, bodyRequest, errGeojsonOutputOnMounted})
+  }
+}
+export const sendMLArrayRequest = async (
+  leafletMap: LMap, promptRequest: Array<IPointPrompt | IRectanglePrompt>, sourceType: SourceTileType = OpenStreetMap
+) => {
+  console.log("sendMLArrayRequest:: start")
+  if (leafletMap.pm.globalDragModeEnabled()) {
+    leafletMap.pm.disableGlobalDragMode()
+  }
+  if (leafletMap.pm.globalEditModeEnabled()) {
+    leafletMap.pm.disableGlobalEditMode()
+  }
+  mapNavigationLocked.value = true
+  const bodyRequest: IBodyLatLngPoints = {
+    bbox: getExtentCurrentViewMapBBox(leafletMap),
+    prompt: promptRequest,
+    zoom: leafletMap.getZoom(),
+    source_type: sourceType
+  }
+  try {
+    await sendMLRequest('/infer_samgis', bodyRequest, leafletMap)
+    console.log("sendMLArrayRequest:: end")
+  } catch (errGeojsonOutputOnMounted) {
+    logErrorOnRequest("sendMLArrayRequest", {sourceType, promptRequest, bodyRequest, errGeojsonOutputOnMounted})
+  }
+}
+const sendMLRequest = async(url: string, bodyRequest: IBodyLatLngPoints | IBodyLatLngWithStringPoints, leafletMap: LMap) => {
+    const geojsonOutputOnMounted = await getGeoJSONRequest(bodyRequest, url)
+    const featureNew = LeafletGeoJSON(geojsonOutputOnMounted)
+    let now = new Date(Date.now())
+    let nowString = now.toLocaleString('it-it')
+    let overlayMaps = new FeatureGroup([featureNew])
+    layerControlGroupLayersRef.value.addOverlay(overlayMaps, nowString)
+    leafletMap.addLayer(featureNew)
+}
 
 export const getQueryParams = () => {
   const urlSearchParams = new URLSearchParams(window.location.search);
@@ -27,7 +105,6 @@ export const getQueryParams = () => {
   return {source, options}
 }
 
-
 export const applyFnToObjectWithinArray = (array: Array<IPointPrompt | IRectanglePrompt>): Array<IPointTable | IRectangleTable> => {
   let newArray = []
   for (const el of array) {

static/src/components/types.d.ts

@@ -54,4 +54,7 @@ export interface IBodyLatLngWithStringPoints {
 export type OpenStreetMap = "OpenStreetMap"
 export type Satellite = "Satellite"
 export type SourceTileType = OpenStreetMap | Satellite
-export type ArrayNumber = Array<number>
+export type ArrayNumber = Array<number>
+export type ServiceTiles = {
+    [key: SourceTileType]: LTileLayer;
+};