Merge pull request #8 from sdss/solara

Add solara + jdaviz for spectral display

src/components/HelloWorld.vue

@@ -5,7 +5,7 @@
 
       <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
 
-      <h1 class="text-h2 font-weight-bold">Vuetify</h1>
+      <h1 class="text-h2 font-weight-bold">SDSS</h1>
 
       <div class="py-14" />
 

src/components/Solara.vue

@@ -0,0 +1,55 @@
+<template>
+    <div v-if="valid" id="zora-solara">
+        <iframe id='iframe' :src=url width="100%" height="600px" title="Solara app running Jdaviz" frameborder="0"></iframe>
+    </div>
+    <v-banner v-else type="warning" class='ma-4' color="warning" lines="one" icon="mdi-emoticon-sad"><v-banner-text>{{ errmsg }}</v-banner-text></v-banner>
+</template>
+
+<script lang="ts" setup>
+
+import axios from 'axios'
+import { ref, onMounted } from 'vue'
+import { useAppStore } from '@/store/app'
+import { validate } from '@babel/types';
+
+const store = useAppStore()
+
+// define which properties are passed in from the parent, i.e. ":xxx"
+const props = defineProps<{
+    sdssid: string,
+    files: Array<string>,
+}>()
+
+
+let valid = ref(false)
+let errmsg = ref('')
+
+import.meta.env.VITE_API_URL + '/info/database'
+let url = ref(import.meta.env.VITE_API_URL + `/solara/?release=IPL3&sdssid=${props.sdssid}&files=${props.files.join()}`)
+console.log('url', url)
+
+async function check_solara() {
+
+    await axios.get(import.meta.env.VITE_API_URL + '/solara', {withCredentials: true})
+        .then((response) => {
+            console.log('solara response', response)
+            valid.value = true
+        })
+        .catch((error) => {
+            let obj = error.toJSON()
+            console.error('solara error', obj)
+            if (obj.code == "ERR_NETWORK") {
+                errmsg.value = 'Error: Solara network server is down.'
+            } else {
+                errmsg.value = `Error: ${obj.message}.`
+            }
+        })
+}
+
+onMounted(() => {
+    // check the solara server
+    check_solara()
+})
+
+</script>
+

src/components/__tests__/HelloWorld.spec.ts

@@ -11,6 +11,6 @@ describe('HelloWorld', () => {
 
   it('renders properly', () => {
     const wrapper = mount(HelloWorld, { global: { plugins: [vuetify] } })
-    expect(wrapper.text()).toContain('Welcome toVuetify')
+    expect(wrapper.text()).toContain('Welcome toSDSS')
   })
 })

src/views/Target.vue

@@ -76,13 +76,15 @@
             </v-col>
         </v-row>
 
-        <!-- <v-row>
+        <!-- spectral display -->
+        <v-row>
             <v-col md="12" class="solara-con">
                 <v-skeleton-loader v-if="loading" type="card"></v-skeleton-loader>
                 <v-banner v-else-if="!store.is_allowed()" type="warning" class='ma-4' color="warning" lines="one" icon="mdi-emoticon-confused"><v-banner-text>User not allowed to access spectra data.</v-banner-text></v-banner>
-                <Solara v-else></Solara>
+                <v-banner v-else-if="!has_files" type="warning" class='ma-4' color="warning" lines="one" icon="mdi-emoticon-cry"><v-banner-text>No spectral data available to load.</v-banner-text></v-banner>
+                <Solara v-else :sdssid="sdss_id" :files="files"></Solara>
             </v-col>
-        </v-row> -->
+        </v-row>
 
     </v-container>
 </template>
@@ -95,8 +97,7 @@ import { useRoute } from 'vue-router'
 import { ref, onMounted } from 'vue'
 import JSONbig from 'json-big'
 
-//import Jdaviz from '@/components/Jdaviz.vue'
-//import Solara from '@/components/Solara.vue'
+import Solara from '@/components/Solara.vue'
 import AladinLite from '@/components/AladinLite.vue'
 
 // get the application state store and router
@@ -115,6 +116,8 @@ let carts = ref([])
 let pipelines = ref({})
 let cartSort = [{ key: 'run_on', order: 'desc' }]
 let panels = ref([0])
+let files = ref([])
+let has_files = ref(false)
 
 let head = [
     {key: 'catalogid', title: 'CatalogID'},
@@ -178,14 +181,16 @@ async function get_target_info() {
     // await the promises
     await Promise.all(endpoints.map((endpoint) => axios.get(endpoint, config)))
     .then(([{data: target}, {data: cartons}, {data: catalogs}, {data: pipes}] )=> {
-      console.log({ target, cartons, catalogs, pipes });
+      console.log({ target, cartons, catalogs, pipes })
       loading.value = false
       nodata.value = Object.keys(target).length === 0
       metadata.value = target
       carts.value = cartons
       sources.value = catalogs
       pipelines.value = pipes
-      console.timeEnd('Info Time');
+      files.value = Object.values(pipes.files)
+      has_files.value = check_files(pipes.files)
+      console.timeEnd('Info Time')
     })
     .catch((error) => {
         console.error(error.toJSON().message)
@@ -197,6 +202,13 @@ async function get_target_info() {
     })
 }
 
+function check_files(data) {
+    // check if the files array is empty or not
+    let vals = Object.values(data)
+    let empty = vals.length == 1 && vals.includes('')
+    return empty ? false : true
+}
+
 async function get_db_info() {
 
     if (Object.keys(store.db_info).length !== 0) {