global map on summary page

.github/workflows/frontend-ui-docker-build.yml

@@ -21,7 +21,7 @@ jobs:
       - name: build
         run: |
           cd air-quality-ui
-          docker build . -t ghcr.io/${REPO}/vairify-frontend:latest --build-arg VITE_AIR_QUALITY_API_URL=${{ vars.VAIRIFY_API_URL }}
+          docker build . -t ghcr.io/${REPO}/vairify-frontend:latest --build-arg VITE_AIR_QUALITY_API_URL=${{ vars.VAIRIFY_API_URL }} --build-arg VITE_AIR_QUALITY_UI_URL=${{ vars.VAIRIFY_UI_URL }}
       - name: publish
         run: |
           docker push ghcr.io/${REPO}/vairify-frontend:latest

air-quality-ui/Dockerfile

@@ -12,6 +12,7 @@ CMD ["npm", "run", "dev"]
 FROM development AS build
 
 ARG VITE_AIR_QUALITY_API_URL
+ARG VITE_AIR_QUALITY_UI_URL
 RUN npm run build
 
 FROM nginx:alpine

air-quality-ui/README.md

@@ -10,6 +10,7 @@ From within air-quality-ui:
 ### Create .env file with content
 ```
 VITE_AIR_QUALITY_API_URL=http://localhost:8000
+VITE_AIR_QUALITY_UI_URL=http://localhost:5173
 ```
 
 ### Start

air-quality-ui/jest.config.ts

@@ -19,6 +19,7 @@ export default {
                 metaObjectReplacement: {
                   env: {
                     VITE_AIR_QUALITY_API_URL: testUrl,
+                    VITE_AIR_QUALITY_UI_URL: testUrl,
                   },
                 },
               },
@@ -31,6 +32,7 @@ export default {
   moduleNameMapper: {
     '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__ mocks __/fileMock.js',
     '\\.(css|less)$': 'identity-obj-proxy',
+    '^.+.(vert|frag|glsl)$': 'jest-transform-stub',
   },
   testPathIgnorePatterns: ['/node_modules/', '/system_tests/'],
   setupFiles: ['./jest.setup.ts'],

air-quality-ui/jest.setup.ts

@@ -9,3 +9,23 @@ Object.defineProperty(global.self, 'crypto', {
     subtle: crypto.webcrypto.subtle,
   },
 })
+
+// mock three.js and react-three-fiber components which rely on WebGL
+jest.mock('three', () => ({
+  WebGLRenderer: jest.fn(),
+  Scene: jest.fn(),
+  PerspectiveCamera: jest.fn(),
+}))
+
+jest.mock('three-stdlib', () => ({
+  LottieLoader: jest.fn(),
+}))
+
+// Mock @react-three/drei components like CameraControls
+jest.mock('@react-three/drei', () => ({
+  CameraControls: jest.fn(),
+}))
+
+jest.mock('three-custom-shader-material', () => {
+  return jest.fn(() => null) // Mock CustomShaderMaterial
+})