Feat/create voi

app/components/CreateAOI.vue

@@ -3,13 +3,12 @@
     <v-card-title
       class="pb-2 text-h6 text-primary font-weight-bold d-flex align-center"
     >
-      <img
+      <v-img
         src="/aoi.svg"
         alt="AOI icon"
         class="mr-3"
         width="48"
         height="48"
-        color="grey-darken-2"
       />
       Create Area of Interest (Bounding Box)
     </v-card-title>
@@ -190,7 +189,6 @@
   }
 
   function visibleBoundingBox() {
-    console.log("visibleBoundingBox", hybridViewerStore.genericRenderWindow)
     if (!hybridViewerStore.genericRenderWindow.value)
       return [-1, 1, -1, 1, -1, 1]
     const renderer = hybridViewerStore.genericRenderWindow.value.getRenderer()
@@ -223,7 +221,6 @@
   }
 
   onMounted(() => {
-    console.log("CreateAOI mounted")
     initializeAOICoordinates()
   })
 
@@ -246,22 +243,41 @@
       },
       {
         response_function: async () => {
-          await dataBaseStore.addItem(data.id, {
+          const min_x_val = safeParseFloat(min_x.value)
+          const min_y_val = safeParseFloat(min_y.value)
+          const max_x_val = safeParseFloat(max_x.value)
+          const max_y_val = safeParseFloat(max_y.value)
+          const z_val = safeParseFloat(z.value)
+
+          const aoiPoints = [
+            { x: min_x_val, y: min_y_val },
+            { x: max_x_val, y: min_y_val },
+            { x: max_x_val, y: max_y_val },
+            { x: min_x_val, y: max_y_val },
+          ]
+
+          const itemToAdd = {
             object_type: data.object_type,
             geode_object: data.geode_object,
             native_filename: data.native_file_name,
             viewable_filename: data.viewable_file_name,
             displayed_name: data.name,
+            geode_object_data: {
+              points: aoiPoints,
+              z: z_val,
+            },
             vtk_js: {
               binary_light_viewable: data.binary_light_viewable,
             },
-          })
+          }
+
+          await dataBaseStore.addItem(data.id, itemToAdd)
+
           closeDrawer()
         },
       },
     )
   }
-
   async function createAOI() {
     const min_x_val = safeParseFloat(min_x.value)
     const min_y_val = safeParseFloat(min_y.value)
@@ -277,17 +293,11 @@
       isNaN(z_val)
 
     if (hasNaN) {
-      console.error(
-        "AOI creation failed: One or more coordinate values resulted in NaN after parsing. Check the input format.",
-      )
       loading.value = false
       return
     }
 
     if (min_x_val >= max_x_val || min_y_val >= max_y_val) {
-      console.error(
-        "AOI creation failed: Min coordinates must be less than Max coordinates",
-      )
       loading.value = false
       return
     }
@@ -308,9 +318,6 @@
     const aoiSchema = back_schemas.opengeodeweb_back.create.create_aoi
 
     if (!aoiSchema || typeof aoiSchema !== "object") {
-      console.error(
-        "FATAL ERROR: The AOI schema is missing or invalid at back_schemas.opengeodeweb_back.create.create_aoi",
-      )
       loading.value = false
       return
     }
@@ -328,7 +335,6 @@
         },
       )
     } catch (error) {
-      console.error("API call failed during createAOI:", error)
     } finally {
       loading.value = false
     }
@@ -365,9 +371,6 @@
 
     const sanitized = coordinates.map((c) => sanitizeNumberString(c))
 
-    const xKey = `${type}_x`
-    const yKey = `${type}_y`
-
     if (sanitized.length >= 2) {
       if (field === "x" || type === "min") {
         min_x.value = sanitized[0]

app/components/CreateTools.vue

@@ -1,23 +1,28 @@
 <template>
-  <v-card :width="500" flat class="pa-4">
+  <v-card :width="500" flat>
     <v-card-title
-      class="pb-2 text-h4 text-primary font-weight-bold d-flex align-center"
+      class="text-h4 text-primary pa-4 font-weight-bold d-flex align-center"
     >
       <v-icon icon="mdi-creation" class="mr-3"></v-icon>
       Create New Object
     </v-card-title>
 
-    <v-card-subtitle class="ma-0 text-medium-emphasis">
+    <v-card-subtitle class="ma-0 text-medium">
       Choose a drawing tool to get started.
     </v-card-subtitle>
 
     <v-card-text class="pt-6">
       <v-row>
-        <v-col v-for="tool in tools" :key="tool.id" cols="6" class="d-flex">
+        <v-col
+          v-for="tool in tools"
+          :key="tool.id"
+          cols="6"
+          class="d-flex pa-2"
+        >
           <v-hover v-slot="{ isHovering, props }">
             <v-card
               v-bind="props"
-              class="text-center pa-4 cursor-pointer transition-swing flex-grow-1 d-flex flex-column"
+              class="text-center cursor-pointer transition-swing flex-grow-1 d-flex flex-column"
               :class="{
                 'bg-blue-lighten-5': isHovering,
                 'scale-103': isHovering,
@@ -90,6 +95,14 @@
       iconType: "svg",
       iconSource: "aoi.svg",
     },
+    {
+      id: "VOI",
+      title: "Volume of Interest",
+      description:
+        "Create a 3D bounding box from an existing AOI with Z bounds.",
+      iconType: "svg",
+      iconSource: "voi.svg",
+    },
   ]
 
   const emit = defineEmits(["select-tool"])