List project names

src/components/ProcessList.vue

@@ -0,0 +1,43 @@
+<template lang="html">
+  <v-expansion-panel-text>
+    <v-list density="compact" color="transparent" class="pa-0">
+      <v-list-item
+        v-for="project in projects" 
+        class="group" 
+        :key="project"
+        @click.stop="queryProcess(project)"
+        >
+        <v-label class="text-capitalize mb-1">{{ project }}</v-label>
+      </v-list-item>
+    </v-list>
+  </v-expansion-panel-text>
+</template>
+
+<script setup lang="ts">
+import { generateJWT } from '../functions/generate-jwt'
+import useProcessing from '../composables/useProcessing'
+import useMap from '../composables/useMap'
+
+const { projects } = useProcessing()
+const { displayGeoJSON, fitMapToBbox } = useMap()
+
+const queryProcess = async (id) => {
+  const token = generateJWT()
+  const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}projects/${id}`, {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    }
+  }).then( res  => res.json() )
+  const blob = await fetch(res.results.polygons)
+  const data = await blob.text()
+  const polygons = JSON.parse(data)
+  displayGeoJSON(polygons)
+  fitMapToBbox(res.parameters.inference.bbox) //TODO: add loading throbber
+}
+
+</script>
+
+<style lang="css" scoped>
+
+</style>

src/components/ProcessingResults.vue

@@ -63,6 +63,9 @@
               </v-btn>
             </v-expansion-panel-text>
           </v-expansion-panel>
+          <v-expansion-panel title="Processes" class="panel processes">
+            <ProcessList />
+          </v-expansion-panel>
         </v-expansion-panels>
       </div>
 
@@ -98,6 +101,7 @@ import useMap from '../composables/useMap'
 import useNotifier from '../composables/useNotifier'
 import useAreaOfInterest from '../composables/useAreaOfInterest'
 import PropertiesDisplay from './PropertiesDisplay.vue'
+import ProcessList from './ProcessList.vue'
 import { mdiChevronDown, mdiTarget } from '@mdi/js'
 import { type Feature } from 'geojson'
 

src/composables/useProcessing.ts

@@ -282,5 +282,6 @@ export default function useProcessing() {
     isProcessing,
     processBatch,
     processSmallArea,
+    projects
   }
 }