Merge branch 'subsetter_front' into develop_v2

CUAHSI · Jan 14, 2024 · 89c165f · 89c165f
2 parents 310632c + 6e7ac3d
commit 89c165f
Show file tree

Hide file tree

Showing 14 changed files with 133 additions and 42 deletions.
diff --git a/app/docker-compose.yml b/app/docker-compose.yml
@@ -24,7 +24,7 @@ services:
       dockerfile: ./frontend/Dockerfile
       context: ./
     ports:
-      - 8080:5003
+      - 8080:8080
     restart: unless-stopped
     depends_on:
       - api

diff --git a/app/env.template b/app/env.template
@@ -23,6 +23,7 @@ VITE_APP_ORIGIN=https://localhost
 # for nested static deployment, set VITE_APP_BASE=/domain-subsetter/
 VITE_APP_BASE=/
 
+# note must end with trailing slash due to vite_app_base
 # VITE_APP_FULL_URL=${VITE_APP_ORIGIN}${VITE_APP_BASE}
 VITE_APP_FULL_URL=https://localhost/
 

diff --git a/app/frontend/Dockerfile b/app/frontend/Dockerfile
@@ -1,24 +1,47 @@
 # in order to get the required .env, context must be app/
 # docker build -f app/frontend/Dockerfile app/
 FROM node:20.9.0 as build-stage
-WORKDIR /tmp
+# WORKDIR /tmp
 # COPY *env* ./
 # RUN [ -f ".env" ] || cp env.template .env
 # RUN grep '^VITE' .env > /.env
 
 WORKDIR /app
+COPY frontend/package.json ./
+COPY frontend/package-lock.json ./
+RUN npm install
 ADD frontend .
-RUN npm update
 RUN npm run build
 
-FROM nginx:1.24.0 as production-stage
-RUN mkdir /app
-COPY --from=build-stage /app/dist /app
-# COPY --from=build-stage .env .env
-COPY --from=build-stage /app/nginx.conf /etc/nginx/nginx.conf
-
-# Allow substitution of env vars at runtime
-COPY frontend/docker-entrypoint.sh /
-RUN chmod +x /docker-entrypoint.sh
-ENTRYPOINT ["/docker-entrypoint.sh"]
-EXPOSE 5003
+# FROM nginx:1.24.0 as production-stage
+# RUN mkdir /app
+# COPY --from=build-stage /app/dist /app
+# # COPY --from=build-stage .env .env
+# COPY --from=build-stage /app/nginx.conf /etc/nginx/nginx.conf
+
+# # Allow substitution of env vars at runtime
+# COPY frontend/docker-entrypoint.sh /
+# RUN chmod +x /docker-entrypoint.sh
+# ENTRYPOINT ["/docker-entrypoint.sh"]
+# EXPOSE 5003
+# CMD ["nginx" "-g" "daemon off;"]
+
+# Production layer
+FROM caddy:2.7.6-alpine as prod
+
+# Install envsubst command for replacing __env files
+# RUN set -x \
+#   && apk add gettext libintl
+
+COPY frontend/docker-entrypoint.sh /usr/local/bin/
+
+# Copy config
+COPY frontend/caddy.docker.json /etc/caddy/caddy.json
+
+# Copy source dist
+COPY --from=build-stage /app/dist /srv
+
+EXPOSE 8080
+
+ENTRYPOINT ["/usr/local/bin/docker-entrypoint.sh"]
+CMD ["caddy", "run", "--config", "/etc/caddy/caddy.json"]
diff --git a/app/frontend/caddy.docker.json b/app/frontend/caddy.docker.json
@@ -0,0 +1,58 @@
+{
+    "apps":
+    {
+        "http":
+        {
+            "servers":
+            {
+                "web":
+                {
+                    "automatic_https":
+                    {
+                        "disable": true
+                    },
+                    "listen":
+                    [
+                        ":8080"
+                    ],
+                    "routes":
+                    [
+                        {
+                            "handle":
+                            [
+                                {
+                                    "handler": "file_server",
+                                    "root": "/srv"
+                                }
+                            ],
+                            "match":
+                            [
+                                {
+                                    "path_regexp":
+                                    {
+                                        "name": "asset",
+                                        "pattern": "\\.(br|css|gz|ico|jpg|js|mp3|mp4|png|svg)$"
+                                    }
+                                }
+                            ],
+                            "terminal": true
+                        },
+                        {
+                            "handle":
+                            [
+                                {
+                                    "handler": "rewrite",
+                                    "uri": "/index.html"
+                                },
+                                {
+                                    "handler": "file_server",
+                                    "root": "/srv"
+                                }
+                            ]
+                        }
+                    ]
+                }
+            }
+        }
+    }
+}
diff --git a/app/frontend/docker-entrypoint.sh b/app/frontend/docker-entrypoint.sh
@@ -1,5 +1,5 @@
 #!/bin/sh
-ROOT_DIR=/app
+ROOT_DIR=/srv
 # Replace env vars in files served by NGINX
 for file in $ROOT_DIR/assets/*.js $ROOT_DIR/index.html;
 do
@@ -10,5 +10,4 @@ do
     sed -i 's|VITE_APP_BASE_PLACEHOLDER|'${VITE_APP_BASE}'|g' $file
 done
 
-echo "Starting Nginx"
-nginx -g 'daemon off;'
+exec "$@"
diff --git a/app/frontend/src/App.vue b/app/frontend/src/App.vue
@@ -5,6 +5,12 @@
       <AlertPopup v-bind="alertStore.displayed"></AlertPopup>
       <TheMobileNavDrawer @toggle-mobile-nav="toggleMobileNav" :show="showMobileNavigation" :paths="paths" />
       <RouterView />
+
+      <!-- The leaflet map kept alive outside of the RouterView -->
+      <KeepAlive>
+        <TheLeafletMap />
+      </KeepAlive>
+
       <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
       <SnackBar />
       <TheFooter />
@@ -17,6 +23,7 @@ import { RouterView } from 'vue-router'
 import TheAppBar from './components/TheAppBar.vue'
 import TheMobileNavDrawer from '@/components/TheMobileNavDrawer.vue'
 import AlertPopup from './components/AlertPopup.vue'
+import TheLeafletMap from './components/TheLeafletMap.vue';
 import SnackBar from './components/SnackBar.vue'
 import TheFooter from './components/TheFooter.vue'
 import { ref } from 'vue'

diff --git a/app/frontend/src/auth.js b/app/frontend/src/auth.js
@@ -12,7 +12,7 @@ export async function logIn(callback) {
   const authUrl = new URL(json.authorization_url)
   // TODO: use an env var for auth redirect instead of hard-coding
   // "#" hash routing was not passed from github env secret so had to hard code here.
-  authUrl.searchParams.set('redirect_uri', `${APP_URL}/#/auth-redirect`)
+  authUrl.searchParams.set('redirect_uri', `${APP_URL}#/auth-redirect`)
   window.open(
     authUrl.toString(),
     '_blank',

diff --git a/app/frontend/src/components/SubmitButton.vue b/app/frontend/src/components/SubmitButton.vue
@@ -68,23 +68,13 @@ async function submitHucs(selected_hucs, model) {
 async function submitBbox(bbox, model) {
   let [xmin, ymin, xmax, ymax] = bbox
   const lowerLeft = [xmin, ymin]
-  // const upperLeft = [xmin, ymax]
   const upperRight = [xmax, ymax]
-  // const lowerRight = [xmax, ymin]
-  
-  // https://github.com/derhuerst/transform-coordinates
-  // import transformation from 'transform-coordinates'
-  // const transformation = require('transform-coordinates')
-  // https://epsg.io/3082
-  // const transform = transformation('EPSG:4326', '3082') // WGS 84 to LCC
-  
+
   let firstProjection = proj4('EPSG:3857')
   let secondProjection = '+proj=lcc +lat_1=30 +lat_2=60 +lat_0=40.0000076293945 +lon_0=-97 +x_0=0 +y_0=0 +a=6370000 +b=6370000 +units=m +no_defs'
-  
+
   const lccLowerLeft = proj4(firstProjection, secondProjection, lowerLeft)
-  // const lccUpperLeft = proj4(secondProjection, upperLeft)
   const lccUpperRight = proj4(firstProjection, secondProjection, upperRight)
-  // const lccLowerRight = proj4(secondProjection, lowerRight)
 
   ymin = lccLowerLeft[1]
   xmin = lccLowerLeft[0]

diff --git a/app/frontend/src/components/TheLeafletMap.vue b/app/frontend/src/components/TheLeafletMap.vue
@@ -1,13 +1,13 @@
 <template>
-    <div id="mapContainer"></div>
+    <div v-show="$route.meta.showMap" id="mapContainer"></div>
 </template>
 
 <script setup>
 import "leaflet/dist/leaflet.css";
 import "leaflet-easybutton/src/easy-button.css";
 import L from 'leaflet'
 import "leaflet-easybutton/src/easy-button";
-import { onMounted } from 'vue'
+import { onMounted, onUpdated } from 'vue'
 import { useMapStore } from '@/stores/map'
 import { useModelsStore } from '@/stores/models'
 import { useAlertStore } from '@/stores/alerts'
@@ -27,7 +27,6 @@ const modelAction = modelsStore.$onAction(
         // this will trigger if the action succeeds and after it has fully run.
         // it waits for any returned promised
         after((result) => {
-            console.log(store.selectedModel.input)
             if (store.selectedModel.input != "bbox") {
                 removeBbox()
             } else {
@@ -49,6 +48,9 @@ const modelAction = modelsStore.$onAction(
 
 const Map = mapStore.mapObject
 
+onUpdated(() => {
+    Map.map.invalidateSize()
+})
 onMounted(() => {
     let map = L.map('mapContainer').setView([38.2, -96], 5);
     Map.map = map;
@@ -870,7 +872,14 @@ async function toggleHucsAsync(url, remove_if_selected, remove) {
                 // let elem = row.getElementsByTagName('td')[2]
                 // elem.innerText = 'Error';
                 // elem.style.color = 'red';
-                console.log("Error during toggle huc", err)
+                console.error("Error during toggle huc", err)
+                alertStore.displayAlert({
+                    title: 'Error',
+                    text: `Error selecting huc: ${err}`,
+                    type: 'error',
+                    closable: true,
+                    duration: 1
+                })
             }
             // refresh page
             // document.getElementById('huc-table-div').hide().show(0);

diff --git a/app/frontend/src/components/ThemeButton.vue b/app/frontend/src/components/ThemeButton.vue
@@ -8,7 +8,6 @@ import { useTheme } from 'vuetify'
 const theme = useTheme()
 
 function toggleTheme () {
-  console.log(theme.global.current.value)
   theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
 }
 </script>
diff --git a/app/frontend/src/constants.js b/app/frontend/src/constants.js
@@ -1,6 +1,8 @@
-export const APP_URL = import.meta.env.VITE_APP_FULL_URL || "VITE_APP_FULL_URL_PLACEHOLDER";
 export const APP_BASE = import.meta.env.VITE_APP_BASE || "VITE_APP_BASE_PLACEHOLDER";
 
+let APP_URL_IN = import.meta.env.VITE_APP_FULL_URL || "VITE_APP_FULL_URL_PLACEHOLDER";
+export const APP_URL = APP_URL_IN.endsWith("/") ? APP_URL_IN : `${APP_URL_IN}/`
+
 export const API_BASE = import.meta.env.VITE_APP_API_URL || "VITE_APP_API_URL_PLACEHOLDER";
 export const ENDPOINTS = {
   openapi: `${API_BASE}/openapi.json`,

diff --git a/app/frontend/src/router/index.js b/app/frontend/src/router/index.js
@@ -9,7 +9,10 @@ const router = createRouter({
     {
       path: '/',
       name: 'map',
-      component: MapView
+      component: MapView,
+      meta: {
+        showMap: true
+      }
     },
     {
       path: '/about',

diff --git a/app/frontend/src/stores/submissions.js b/app/frontend/src/stores/submissions.js
@@ -25,7 +25,6 @@ export const useSubmissionsStore = defineStore('submissions', () => {
     if (objIndex > -1) {
       this.submissions[objIndex]=response;
     }
-    console.log(response)
   }
 
   return { submissions, getSubmissions, refreshWorkflows, refreshSubmission}

diff --git a/app/frontend/src/views/MapView.vue b/app/frontend/src/views/MapView.vue
@@ -1,13 +1,14 @@
 <template>
   <ModelSelectDrawer :show="showModelSelect" @toggle="showModelSelect = !showModelSelect" />
   <SubmitButton />
-  <TheLeafletMap></TheLeafletMap>
+  <!-- Actual map component included in base App.vue to allow persistence -->
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref } from 'vue';
 import ModelSelectDrawer from '../components/ModelSelectDrawer.vue';
-import TheLeafletMap from '../components/TheLeafletMap.vue';
 import SubmitButton from '../components/SubmitButton.vue';
-const showModelSelect = ref(true)
+import { useModelsStore } from '@/stores/models'
+const modelsStore = useModelsStore();
+const showModelSelect = ref(modelsStore.selectedModel.value == null)
 </script>