Update Client Library and API Integration for Backend Changes

frontend/Caddyfile

@@ -31,13 +31,11 @@
 	}
 	rewrite @spa_router {http.matchers.file.relative}
 	# Proxy requests to API service
-	handle_path /api/* {
-		reverse_proxy {$VITE_API_URL} {
-			header_up Host {http.reverse_proxy.upstream.hostport}
-			header_up X-Real-IP {remote_host}
-			header_up X-Forwarded-For {remote_host}
-		}
-	}
+	reverse_proxy /api/* {$VITE_API_URL} {
+		header_up Host {http.reverse_proxy.upstream.hostport}
+		header_up X-Real-IP {remote_host}
+		header_up X-Forwarded-For {remote_host}
+  }
 	header {
 		X-Frame-Options "SAMEORIGIN"
 		X-XSS-Protection "1;mode=block"

frontend/src/components/model-param-selection-panes/ReportInfo.vue

@@ -287,7 +287,10 @@ const onConfirm = () => {
   if (validateComparison() && validateRange()) {
     if (form.value) {
       form.value.validate()
+    } else {
+      console.warn('Form reference is null. Validation skipped.')
     }
+
     // this panel is not in a confirmed state
     if (!isConfirmed.value) {
       modelParameterStore.confirmPanel(panelName)

frontend/src/components/model-param-selection-panes/SiteInfo.vue

@@ -394,6 +394,8 @@ const onConfirm = () => {
   if (validateRequiredFields() && validateRange()) {
     if (form.value) {
       form.value.validate()
+    } else {
+      console.warn('Form reference is null. Validation skipped.')
     }
 
     formattingValues()

frontend/src/components/model-param-selection-panes/SpeciesInfo.vue

@@ -486,7 +486,10 @@ const onConfirm = () => {
   ) {
     if (form.value) {
       form.value.validate()
+    } else {
+      console.warn('Form reference is null. Validation skipped.')
     }
+
     // this panel is not in a confirmed state
     if (!isConfirmed.value) {
       modelParameterStore.confirmPanel(panelName)

frontend/src/components/model-param-selection-panes/StandDensity.vue

@@ -138,6 +138,8 @@ const onConfirm = async () => {
 
   if (form.value) {
     form.value.validate()
+  } else {
+    console.warn('Form reference is null. Validation skipped.')
   }
 
   // this panel is not in a confirmed state

frontend/src/constants/constants.ts

@@ -114,3 +114,7 @@ export const MODEL_PARAM_TAB_NAME = Object.freeze({
   VIEW_LOG_FILE: 'View Log File',
   VIEW_ERROR_MESSAGES: 'View Error Messages',
 })
+
+export const DOWNLOAD_FILE_NAME = Object.freeze({
+  MULTI_POLYGON_OUTPUT: 'vdyp-output.zip',
+})

frontend/src/constants/message.ts

@@ -101,4 +101,13 @@ export const FILE_UPLOAD_ERR = Object.freeze({
     'The response is missing one or more required files. Please contact support or try again later.',
   INVALID_RESPONSED_FILE:
     'The response contains invalid or corrupted files. Please contact support or try again later.',
+  FAIL_RUN_MODEL: 'Failed to run the projection model.',
+})
+
+export const PROGRESS_MSG = Object.freeze({
+  RUNNING_MODEL: 'Running Model...',
+})
+
+export const SUCESS_MSG = Object.freeze({
+  FILE_UPLOAD_RUN_MODEL_RESULT: 'File successfully downloaded.',
 })

frontend/src/router/routes.ts

@@ -2,6 +2,7 @@ import type { RouteRecordRaw } from 'vue-router'
 import ModelParameterInput from '@/views/input-model-parameters/ModelParameterInput.vue'
 import PageNotFound from '@/views/PageNotFound.vue'
 import AuthInfo from '@/views/test/AuthInfo.vue'
+import ParameterDetail from '@/views/test/ParameterDetail.vue'
 
 export const routes: Array<RouteRecordRaw> = [
   {
@@ -14,5 +15,10 @@ export const routes: Array<RouteRecordRaw> = [
     name: 'AuthInfo',
     component: AuthInfo,
   },
+  {
+    path: '/param-detail',
+    name: 'ParameterDetail',
+    component: ParameterDetail,
+  },
   { path: '/:pathMatch(.*)*', name: 'NotFound', component: PageNotFound },
 ]

frontend/src/services/apiActions.ts

@@ -1,6 +1,7 @@
 import apiClient from '@/services/apiClient'
+import type { ParameterDetailsMessage, RootResource } from '@/services/vdyp-api'
 
-export const helpGet = async (): Promise<any> => {
+export const helpGet = async (): Promise<ParameterDetailsMessage[]> => {
   try {
     const response = await apiClient.helpGet()
     return response.data
@@ -10,17 +11,20 @@ export const helpGet = async (): Promise<any> => {
   }
 }
 
-export const projectionHcsvPost = async (body: any): Promise<Blob> => {
+export const projectionHcsvPost = async (
+  formData: FormData,
+  trialRun: boolean = false,
+): Promise<Blob> => {
   try {
-    const response = await apiClient.projectionHcsvPost(body)
+    const response = await apiClient.projectionHcsvPost(formData, trialRun)
     return response.data
   } catch (error) {
     console.error('Error running projection:', error)
     throw error
   }
 }
 
-export const rootGet = async (): Promise<any> => {
+export const rootGet = async (): Promise<RootResource> => {
   try {
     const response = await apiClient.rootGet()
     return response.data

frontend/src/services/apiClient.ts

@@ -1,29 +1,40 @@
 import {
-  HelpEndpointApi,
-  ProjectionEndpointApi,
-  RootEndpointApi,
+  GetHelpApi,
+  GetRootApi,
+  RunHCSVProjectionApi,
 } from '@/services/vdyp-api/'
 import axiosInstance from '@/services/axiosInstance'
+import type { AxiosRequestConfig } from 'axios'
 
-const helpApiInstance = new HelpEndpointApi(undefined, undefined, axiosInstance)
-const projectionApiInstance = new ProjectionEndpointApi(
+const helpApiInstance = new GetHelpApi(undefined, undefined, axiosInstance)
+const rootApiInstance = new GetRootApi(undefined, undefined, axiosInstance)
+const projectionApiInstance = new RunHCSVProjectionApi(
   undefined,
   undefined,
   axiosInstance,
 )
-const rootApiInstance = new RootEndpointApi(undefined, undefined, axiosInstance)
 
 export const apiClient = {
-  helpGet: (options?: any) => {
-    return helpApiInstance.v8HelpGet(options)
+  helpGet: (options?: AxiosRequestConfig) => {
+    return helpApiInstance.helpGet(options)
   },
 
-  projectionHcsvPost: (body?: any, options?: any) => {
-    return projectionApiInstance.v8ProjectionHcsvPost(body, options)
+  projectionHcsvPost: (
+    formData: FormData,
+    trialRun: boolean,
+    options?: AxiosRequestConfig,
+  ) => {
+    return projectionApiInstance.projectionHcsvPostForm(
+      formData.get('polygonInputData') as File,
+      formData.get('layersInputData') as File,
+      formData.get('projectionParameters') as any,
+      trialRun,
+      options,
+    )
   },
 
-  rootGet: (options?: any) => {
-    return rootApiInstance.v8Get(options)
+  rootGet: (options?: AxiosRequestConfig) => {
+    return rootApiInstance.rootGet(options)
   },
 }
 

frontend/src/services/vdyp-api/api.ts

@@ -1,5 +1,7 @@
 /* tslint:disable */
 /* eslint-disable */
-export * from './apis/help-endpoint-api'
-export * from './apis/projection-endpoint-api'
-export * from './apis/root-endpoint-api'
+export * from './apis/get-help-api'
+export * from './apis/get-root-api'
+export * from './apis/run-dcsvprojection-api'
+export * from './apis/run-hcsvprojection-api'
+export * from './apis/run-scsvprojection-api'

frontend/src/services/vdyp-api/apis/help-endpoint-api.ts → frontend/src/services/vdyp-api/apis/get-help-api.ts

@@ -5,15 +5,14 @@ import type { AxiosResponse, AxiosInstance, AxiosRequestConfig } from 'axios'
 import { Configuration } from '../configuration'
 // Some imports not used depending on template conditions
 // @ts-ignore
-import { BASE_PATH, COLLECTION_FORMATS, BaseAPI, RequiredError } from '../base'
+import { BASE_PATH, BaseAPI, RequiredError } from '../base'
 import type { RequestArgs } from '../base'
 import type { ParameterDetailsMessage } from '../models'
-
 /**
- * HelpEndpointApi - axios parameter creator
+ * GetHelpApi - axios parameter creator
  * @export
  */
-export const HelpEndpointApiAxiosParamCreator = function (
+export const GetHelpApiAxiosParamCreator = function (
   configuration?: Configuration,
 ) {
   return {
@@ -22,10 +21,8 @@ export const HelpEndpointApiAxiosParamCreator = function (
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
      */
-    v8HelpGet: async (
-      options: AxiosRequestConfig = {},
-    ): Promise<RequestArgs> => {
-      const localVarPath = `/api/v8/help` /* edited */
+    helpGet: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+      const localVarPath = `/api/v8/help`
       // use dummy base URL string because the URL constructor only accepts absolute URLs.
       const localVarUrlObj = new URL(localVarPath, 'https://example.com')
       let baseOptions
@@ -36,7 +33,6 @@ export const HelpEndpointApiAxiosParamCreator = function (
         method: 'GET',
         ...baseOptions,
         ...options,
-        responseType: 'json' /* edited */,
       }
       const localVarHeaderParameter = {} as any
       const localVarQueryParameter = {} as any
@@ -67,17 +63,17 @@ export const HelpEndpointApiAxiosParamCreator = function (
 }
 
 /**
- * HelpEndpointApi - functional programming interface
+ * GetHelpApi - functional programming interface
  * @export
  */
-export const HelpEndpointApiFp = function (configuration?: Configuration) {
+export const GetHelpApiFp = function (configuration?: Configuration) {
   return {
     /**
      *
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
      */
-    async v8HelpGet(
+    async helpGet(
       options?: AxiosRequestConfig,
     ): Promise<
       (
@@ -86,28 +82,26 @@ export const HelpEndpointApiFp = function (configuration?: Configuration) {
       ) => Promise<AxiosResponse<ParameterDetailsMessage[] /* edited */>>
     > {
       const localVarAxiosArgs =
-        await HelpEndpointApiAxiosParamCreator(configuration).v8HelpGet(options)
+        await GetHelpApiAxiosParamCreator(configuration).helpGet(options)
       return (
         axios: AxiosInstance = globalAxios,
         basePath: string = BASE_PATH,
       ) => {
         const axiosRequestArgs: AxiosRequestConfig = {
           ...localVarAxiosArgs.options,
-          url: /* edited */ localVarAxiosArgs.url,
+          url: basePath + localVarAxiosArgs.url,
         }
-        return axios.request<ParameterDetailsMessage[] /* edited */>(
-          axiosRequestArgs,
-        )
+        return axios.request(axiosRequestArgs)
       }
     },
   }
 }
 
 /**
- * HelpEndpointApi - factory interface
+ * GetHelpApi - factory interface
  * @export
  */
-export const HelpEndpointApiFactory = function (
+export const GetHelpApiFactory = function (
   configuration?: Configuration,
   basePath?: string,
   axios?: AxiosInstance,
@@ -118,34 +112,34 @@ export const HelpEndpointApiFactory = function (
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
      */
-    async v8HelpGet(
+    async helpGet(
       options?: AxiosRequestConfig,
     ): Promise<AxiosResponse<ParameterDetailsMessage[] /* edited */>> {
-      return HelpEndpointApiFp(configuration)
-        .v8HelpGet(options)
-        .then((request) => request(axios /* edited */))
+      return GetHelpApiFp(configuration)
+        .helpGet(options)
+        .then((request) => request(axios, basePath))
     },
   }
 }
 
 /**
- * HelpEndpointApi - object-oriented interface
+ * GetHelpApi - object-oriented interface
  * @export
- * @class HelpEndpointApi
+ * @class GetHelpApi
  * @extends {BaseAPI}
  */
-export class HelpEndpointApi extends BaseAPI {
+export class GetHelpApi extends BaseAPI {
   /**
    *
    * @param {*} [options] Override http request option.
    * @throws {RequiredError}
-   * @memberof HelpEndpointApi
+   * @memberof GetHelpApi
    */
-  public async v8HelpGet(
+  public async helpGet(
     options?: AxiosRequestConfig,
   ): Promise<AxiosResponse<ParameterDetailsMessage[] /* edited */>> {
-    return HelpEndpointApiFp(this.configuration)
-      .v8HelpGet(options)
-      .then((request) => request(this.axios /* edited */))
+    return GetHelpApiFp(this.configuration)
+      .helpGet(options)
+      .then((request) => request(this.axios, this.basePath))
   }
 }