[feat] show link about embedded huggingspace on small devices

README.md

@@ -21,9 +21,19 @@ Build the docker image this way:
 # clean any old active containers
 docker stop $(docker ps -a -q); docker rm $(docker ps -a -q)
 
-# build the base docker image with the ARG DEPENDENCY_GROUP=fastapi used by poetry
-docker build . -f dockerfiles/dockerfile-samgis-base --build-arg DEPENDENCY_GROUP=fastapi \
-  --tag example-docker-namespace/samgis-base-fastapi --progress=plain
+# build the base docker image from the repository root folder using ARGs:
+# - DEPENDENCY_GROUP=fastapi used by poetry
+# VITE__MAP_DESCRIPTION, VITE__PATHNAME_CHECK, VITE__SAMGIS_SPACE used by 'docker build'
+(
+  set -o allexport && source <(cat ./static/.env|grep VITE__) && set +o allexport;
+  env|grep VITE__;
+  docker build . -f dockerfiles/dockerfile-samgis-base --progress=plain \
+  --build-arg DEPENDENCY_GROUP=fastapi \
+  --build-arg VITE__MAP_DESCRIPTION=${VITE__MAP_DESCRIPTION} \
+  --build-arg VITE__PATHNAME_CHECK=${VITE__PATHNAME_CHECK} \
+  --build-arg VITE__SAMGIS_SPACE=${VITE__SAMGIS_SPACE} \
+  --tag registry.gitlab.com/aletrn/gis-prediction
+)
 
 # build the image, use the tag "samgis-huggingface"
 docker build . --tag example-docker-namespace/samgis-huggingface --progress=plain

dockerfiles/dockerfile-samgis-base

@@ -99,11 +99,17 @@ RUN if [ "${DEPENDENCY_GROUP}" = "fastapi" ]; then if [ ! -d /appnode/node_modul
 FROM node_fastapi AS node_build
 
 ARG DEPENDENCY_GROUP
+ARG VITE__MAP_DESCRIPTION
+ARG VITE__PATHNAME_CHECK
+ARG VITE__SAMGIS_SPACE
+RUN echo "VITE__MAP_DESCRIPTION:" ${VITE__MAP_DESCRIPTION}
+RUN echo "VITE__PATHNAME_CHECK:" ${VITE__PATHNAME_CHECK}
+RUN echo "VITE__SAMGIS_SPACE:" ${VITE__SAMGIS_SPACE}
+
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store if [ "${DEPENDENCY_GROUP}" = "fastapi" ]; then \
     pnpm install --frozen-lockfile; else \
     echo "DEPENDENCY_GROUP 2: ${DEPENDENCY_GROUP} ..."; fi
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store if [ "${DEPENDENCY_GROUP}" = "fastapi" ]; then \
-    pnpm build; fi
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store if [ "${DEPENDENCY_GROUP}" = "fastapi" ]; then pnpm build; fi
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store if [ "${DEPENDENCY_GROUP}" = "fastapi" ]; then \
     pnpm tailwindcss -i /appnode/src/input.css -o /appnode/dist/output.css; fi
 RUN if [ "${DEPENDENCY_GROUP}" = "fastapi" ]; then if [ ! -d /appnode/dist ]; then echo "no dist folder" && exit 1; fi; fi

static/src/App.vue

@@ -28,7 +28,7 @@ const mapName = ref('prediction-map')
 const description = ref("This page displays predictions made with a machine learning model")
 
 onMounted(() => {
-  console.log("descr:", description.value, import.meta.env.VITE_MAP_DESCRIPTION)
-  description.value = import.meta.env.VITE_MAP_DESCRIPTION ? import.meta.env.VITE_MAP_DESCRIPTION : description.value
+  console.log("descr:", description.value, import.meta.env.VITE__MAP_DESCRIPTION)
+  description.value = import.meta.env.VITE__MAP_DESCRIPTION ? import.meta.env.VITE__MAP_DESCRIPTION : description.value
 })
 </script>

static/src/components/PagePredictionMap.vue

@@ -5,6 +5,10 @@
 
       <div class="lg:border-r lg:col-span-3">
         <div id="id-map-cont" class="">
+          v-if="currentPathnameRef.startsWith(pathnameCheckRef)"
+          <p
+            class="block lg:hidden"
+          >Trouble on page scrolling? Use the <a :href="embeddedSpaceRef">embedded space</a>.</p>
           <p class="hidden lg:block">{{ description }}</p>
           <div class="w-full md:pt-1 md:pb-1 lg:hidden portrait:xl:hidden">
             <ButtonMapSendRequest
@@ -123,6 +127,9 @@ const currentBaseMapNameRef = ref("")
 const currentMapBBoxRef = ref()
 const currentZoomRef = ref()
 const promptsArrayRef: Ref<Array<IPointPrompt | IRectanglePrompt>> = ref([])
+const pathnameCheckRef = ref(import.meta.env.VITE__PATHNAME_CHECK || "")
+const currentPathnameRef = ref("current-pathname-placeholder")
+const embeddedSpaceRef = ref(import.meta.env.VITE__SAMGIS_SPACE || "")
 let map: LMap
 type ServiceTiles = {
   [key: SourceTileType]: LTileLayer;
@@ -188,6 +195,7 @@ const getCurrentBasemap = (url: string, providersArray: ServiceTiles) => {
 }
 
 onMounted(async () => {
+  currentPathnameRef.value = window.location.pathname || ""
   const osmTile = tileLayer.provider(OpenStreetMap)
   let localVarSatellite: SourceTileType = import.meta.env.VITE_SATELLITE_NAME ? String(import.meta.env.VITE_SATELLITE_NAME) : Satellite
   const satelliteTile = tileLayer.provider(localVarSatellite)