[refactor] move some functions and ref from PagePredictionMap.vue

static/src/components/PagePredictionMap.vue

@@ -100,13 +100,11 @@
 import {
   control as LeafletControl,
   Evented as LEvented,
-  geoJSON as LeafletGeoJSON,
   type LatLng,
   Map as LMap,
   map as LeafletMap,
   tileLayer,
-  TileLayer as LTileLayer,
-  FeatureGroup
+  TileLayer as LTileLayer
 } from 'leaflet'
 import 'leaflet-providers'
 import '@geoman-io/leaflet-geoman-free'
@@ -115,57 +113,47 @@ 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
+  waitingString,
 } from './constants'
 import {
   applyFnToObjectWithinArray,
   getExtentCurrentViewMapBBox,
-  getGeoJSONRequest,
+  sendMLRequest,
   getQueryParams,
   getSelectedPointCoordinate,
   setGeomanControls,
-  updateMapData
+  updateMapData,
+  updateZoomBboxMap,
+  getCurrentBasemap
 } from '@/components/helpers'
-import type { IBodyLatLngPoints, IPointPrompt, IRectanglePrompt, SourceTileType } from '@/components/types';
+import type { ServiceTiles, SourceTileType } from '@/components/types';
 import StatsGrid from '@/components/StatsGrid.vue';
 import TableGenericComponent from '@/components/TableGenericComponent.vue';
 import ButtonMapSendRequest from '@/components/buttons/ButtonMapSendRequest.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()
-const layerControlGroupLayersRef = ref(LeafletControl.layers());
 let map: LMap
-type ServiceTiles = {
-  [key: SourceTileType]: LTileLayer;
-};
 
 const props = defineProps<{
   mapBounds: Array<LatLng>,
@@ -188,51 +176,6 @@ const getPopupContentPoint = (leafletEvent: LEvented, label: number): HTMLDivEle
   return popupDiv
 }
 
-const sendMLRequest = 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)
-    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)
-  } 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()
@@ -300,4 +243,3 @@ onUpdated(() => {
   }
 })
 </script>
-

static/src/components/constants.ts

@@ -1,4 +1,6 @@
-import { ref } from "vue"
+import { ref, type Ref } from "vue"
+import L, {Control as LeafletControl} from 'leaflet'
+import type { IPointPrompt, IRectanglePrompt } from "./types"
 
 export const prefix = " &copy; <a target=\"_blank\" href=\"https://leafletjs.com\">leaflet</a>"
 export const OpenStreetMap = "OpenStreetMap"
@@ -11,6 +13,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)
 // modified from https://github.com/for-GET/know-your-http-well/blob/master/json/status-codes.json
 export const htmlStatusMessages = [
   {
@@ -234,3 +243,14 @@ 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' } }
+]

static/src/components/helpers.ts

@@ -1,10 +1,15 @@
-import L, { icon, Evented as LEvented, type LatLng, Map as LMap } from 'leaflet'
+import L, { icon, Evented as LEvented, type LatLng, Map as LMap, geoJSON as LeafletGeoJSON, FeatureGroup, } from 'leaflet'
 import {
-  responseMessageRef,
-  waitingString,
+  currentMapBBoxRef,
+  currentZoomRef,
   durationRef,
   numberOfPolygonsRef,
-  numberOfPredictedMasksRef
+  numberOfPredictedMasksRef,
+  layerControlGroupLayersRef,
+  mapNavigationLocked,
+  OpenStreetMap,
+  responseMessageRef,
+  waitingString
 } from './constants'
 import {
   ExcludeIncludeLabelPrompt as excludeIncludeLabelPrompt,
@@ -13,9 +18,59 @@ import {
   type ExcludeIncludeLabelPrompt,
   type IBodyLatLngPoints,
   type IPointPrompt,
-  type IRectanglePrompt, type IRectangleTable, type IPointTable
+  type IRectanglePrompt,
+  type IRectangleTable,
+  type IPointTable,
+  type SourceTileType,
+  type ServiceTiles
 } 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 "-"
+}
+
+export const sendMLRequest = async (
+  leafletMap: LMap, promptRequest: Array<IPointPrompt | IRectanglePrompt>, sourceType: SourceTileType = OpenStreetMap
+  ) => {
+  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 {
+    const geojsonOutputOnMounted = await getGeoJSONRequest(bodyRequest, '/infer_samgis')
+    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)
+  } catch (errGeojsonOutputOnMounted) {
+    console.error('sendMLRequest:: sourceType: ', sourceType)
+    console.error('sendMLRequest:: promptRequest: ', promptRequest.length, '::', promptRequest)
+    console.error('sendMLRequest:: bodyRequest => ', bodyRequest, "#")
+    console.error("errGeojsonOutputOnMounted => ", errGeojsonOutputOnMounted)
+  }
+}
 
 export const getQueryParams = () => {
   const urlSearchParams = new URLSearchParams(window.location.search);

static/src/components/types.d.ts

@@ -47,4 +47,8 @@ export interface IBodyLatLngPoints {
 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;
+};
+