parallelizing target api calls; adding catalog/carton info

package.json

@@ -17,6 +17,7 @@
     "@mdi/font": "7.0.96",
     "axios": "^1.6.0",
     "core-js": "^3.29.0",
+    "json-big": "^1.0.2",
     "pinia": "^2.0.0",
     "roboto-fontface": "*",
     "vue": "^3.3.4",

src/views/Target.vue

@@ -8,13 +8,18 @@
         <v-row v-else>
             <v-col md="3">
                 <h1> SDSS ID: {{ sdss_id }}</h1>
+                <p v-if="!loading">
+                    <span class="font-weight-bold">RA, Dec:</span>
+                    {{ formatNumber(metadata.ra_sdss_id, 5) }}, {{ formatNumber(metadata.dec_sdss_id, 5) }}
+                </p>
                 <v-img :width="300" cover class="bg-grey-lighten-2" src="https://picsum.photos/200"></v-img>
             </v-col>
             <v-col md="9">
                 <v-card>
                     <v-tabs v-model="tab" color="secondary">
                         <v-tab value="meta">Metadata</v-tab>
                         <v-tab value="sources">Sources</v-tab>
+                        <v-tab value="cartons">Cartons</v-tab>
                     </v-tabs>
 
                     <v-card-text>
@@ -41,7 +46,14 @@
                                 </v-table>
                             </v-card>
                         </v-window-item>
-                        <v-window-item key="sources" value="sources">Two</v-window-item>
+
+                        <v-window-item key="sources" value="sources">
+                            <v-data-table :items="sources" :headers="head" density="compact"></v-data-table>
+                        </v-window-item>
+
+                        <v-window-item key="cartons" value="cartons">
+                            <v-data-table :items="carts" :headers="headcart" density="compact" :sort-by="cartSort"></v-data-table>
+                        </v-window-item>
                     </v-window>
                     </v-card-text>
                 </v-card>
@@ -57,6 +69,7 @@ import axios from 'axios'
 import { useAppStore } from '@/store/app'
 import { useRoute } from 'vue-router'
 import { ref, onMounted } from 'vue'
+import JSONbig from 'json-big'
 
 // get the application state store and router
 const store = useAppStore()
@@ -68,25 +81,93 @@ const tab = ref(null)
 let nodata = ref(false)
 let loading = ref(true)
 let metadata = ref({})
+let sources = ref([])
+let carts = ref([])
+let cartSort = [{ key: 'run_on', order: 'desc' }]
+
+let head = [
+    {key: 'catalogid', title: 'CatalogID'},
+    {key: 'version', title: 'Version'},
+    {key: 'lead', title: 'Lead'},
+    {key: 'ra_catalogid', title: 'RA'},
+    {key: 'dec_catalogid', title: 'Dec'},
+    {key: 'n_associated', title: 'N_Associated'}
+]
+// let catalogs = [
+//   {
+//     "sdss_id": 23326,
+//     "ra_sdss_id": 315.780029296875,
+//     "dec_sdss_id": -3.2131478212519653,
+//     "catalogid": 27021603187129892,
+//     "n_associated": 1,
+//     "ra_catalogid": 315.780029296875,
+//     "dec_catalogid": -3.2131478212519653,
+//     "version": 25,
+//     "lead": "skies_v2",
+//     "ra": 315.780029296875,
+//     "dec": -3.2131478212519653
+//   }
+// ]
+
+function formatNumber (num, digit) {
+    if (num == null) {
+        return num
+    }
+    return parseFloat(num).toFixed(digit)
+}
+
+let headcart = [
+    {key: 'catalogid', title: 'Catalog ID'},
+    {key: 'carton', title: 'Carton'},
+    {key: 'epoch', title: 'Epoch'},
+    {key: 'program', title: 'Program'},
+    {key: 'category', title: 'Category'},
+    {key: 'run_on', title: 'Date Run On'},
+]
+
+async function get_target_info() {
+    console.time('Info Time');
 
-async function get_target() {
-    // get the target pipeline info from valis
+    //let sdss_id = 23326
     let rel = "IPL3"
-    await axios.get(import.meta.env.VITE_API_URL + `/target/ids/23326?release=${rel}`, )
-        .then((response) => {
-            console.log('target data', response.data)
-            nodata.value = Object.keys(response.data).length === 0
-            loading.value = false
-            console.log("nodata", nodata.value)
-            metadata.value = response.data
-        })
-        .catch((error) => {
-            console.error(error.toJSON())
-        })
+
+    // set up API call endpoints
+    let endpoints = [
+        import.meta.env.VITE_API_URL + `/target/ids/${sdss_id}?release=${rel}`,
+        import.meta.env.VITE_API_URL + `/target/cartons/${sdss_id}?release=${rel}`,
+        import.meta.env.VITE_API_URL + `/target/catalogs/${sdss_id}?release=${rel}`
+        ]
+
+    // axios config
+    // see https://axios-http.com/docs/req_config
+    const config = {
+        transformResponse: [function transform(data) {
+            // Replacing the default transformResponse in axios because this uses JSON.parse and causes problems
+            // with precision of big numbers.
+            if (typeof data === 'string') {
+                try {
+                    data = JSONbig.parse(data);
+                } catch (e) { /* Ignore */ }
+            }
+            return data
+        }],
+    }
+
+    // await the promises
+    await Promise.all(endpoints.map((endpoint) => axios.get(endpoint, config)))
+    .then(([{data: target}, {data: cartons}, {data: catalogs}] )=> {
+      console.log({ target, cartons, catalogs });
+      loading.value = false
+      nodata.value = Object.keys(target).length === 0
+      metadata.value = target
+      carts.value = cartons
+      sources.value = catalogs
+      console.timeEnd('Info Time');
+    })
 }
 
 onMounted(() => {
     // get the available target info
-    get_target()
+    get_target_info()
 })
 </script>