Merge pull request #434 from alercebroker/revert-433-develop

Revert "Apis refactor"
alercebroker · Nov 7, 2024 · 4c8b02e · 4c8b02e
2 parents 05c7eca + ba9702c
commit 4c8b02e
Show file tree

Hide file tree

Showing 12 changed files with 316 additions and 321 deletions.
diff --git a/.github/workflows/deploy_dev.yml b/.github/workflows/deploy_dev.yml
@@ -23,8 +23,7 @@ jobs:
       GOOGLE_REDIRECT_URI: ${{ secrets.GOOGLE_REDIRECT_URI }}
       TNS_API_BASE_URL: ${{ secrets.TNS_API_BASE_URL }}
       USERS_API_BASE_URL: ${{ secrets.USERS_API_BASE_URL }}
-      ALERCE_API_BASE_URL: ${{ secrets.ALERCE_API_BASE_URL }}
-      ALERCE_API_BASE_URL_OLD: ${{ secrets.ALERCE_API_BASE_URL_OLD }}
+      ZTF_API_BASE_URL: ${{ secrets.ZTF_API_BASE_URL }}
       ZTF_DR_API_BASE_URL: ${{ secrets.ZTF_DR_API_BASE_URL }}
     steps:
       - name: Configure AWS credentials

diff --git a/.github/workflows/deploy_prod.yml b/.github/workflows/deploy_prod.yml
@@ -23,8 +23,7 @@ jobs:
       GOOGLE_TAG_ID: ${{ secrets.GOOGLE_TAG_ID }}
       TNS_API_BASE_URL: ${{ secrets.TNS_API_BASE_URL }}
       USERS_API_BASE_URL: ${{ secrets.USERS_API_BASE_URL }}
-      ALERCE_API_BASE_URL: ${{ secrets.ALERCE_API_BASE_URL }}
-      ALERCE_API_BASE_URL_OLD: ${{ secrets.ALERCE_API_BASE_URL_OLD }}
+      ZTF_API_BASE_URL: ${{ secrets.ZTF_API_BASE_URL }}
       ZTF_DR_API_BASE_URL: ${{ secrets.ZTF_DR_API_BASE_URL }}
     steps:
       - name: Configure AWS credentials

diff --git a/components/cardBasicInformation.vue b/components/cardBasicInformation.vue
@@ -1,36 +1,55 @@
 <template>
   <v-col :cols="cols" :lg="lg" :md="md" :sm="sm">
     <v-card :class="cardClass">
-      <v-card v-if="isLoading || error">
-        <v-card-text v-if="isLoading">
-          <v-progress-circular
-            indeterminate
-            color="primary"
-          ></v-progress-circular>
-          Fetching data for object {{ objectId }} ...
-        </v-card-text>
-        <v-card-text v-if="error">
-          <v-alert text prominent type="error" icon="mdi-cloud-alert">
-            {{ error }}
-          </v-alert>
-        </v-card-text>
-      </v-card>
-      <v-card
-        id="basicObject-app"
-        width="100%"
-        :height="height"
-        hx-trigger="update-basic-object from:body"
-      >
-      </v-card>
+      <v-card-text v-if="isLoading">
+        <v-progress-circular
+          indeterminate
+          color="primary"
+        ></v-progress-circular>
+        Fetching data for object {{ $route.params.oid }} ...
+      </v-card-text>
+      <v-card-text v-else-if="error">
+        <v-alert text prominent type="error" icon="mdi-cloud-alert">
+          {{ error }}
+        </v-alert>
+      </v-card-text>
+      <v-card-text class="pa-1" v-else>
+        <tables-basic-information :information="information" />
+        <v-row justify="center" wrap>
+          <v-col cols="6">
+            <buttons-finding-chart-button
+              :oid="information.oid"
+              :candid="candid"
+              :useIcon="false"
+            />
+          </v-col>
+          <v-col cols="6">
+            <buttons-catalogs-buttons
+              :ra="information.meanra"
+              :dec="information.meandec"
+              title="Other archives"
+            />
+          </v-col>
+        </v-row>
+
+        <tables-tns-information
+          :loading="tns.loading"
+          :type="tns.type"
+          :name="tns.name"
+          :redshift="tns.redshift"
+          :discoverer="tns.discoverer"
+          :reporter="tns.reporter"
+          :instrument="tns.instrument"
+        />
+      </v-card-text>
     </v-card>
   </v-col>
 </template>
 
 <script>
-import { Vue, Component, Prop, Watch } from 'nuxt-property-decorator'
-
-@Component
-export default class CardMagStats extends Vue {
+import { Vue, Component, Prop } from 'nuxt-property-decorator'
+@Component()
+export default class CardBasicInformation extends Vue {
   @Prop({ type: Number | String, default: 12 }) cols
 
   @Prop({ type: Number | String, default: 12 }) lg
@@ -43,60 +62,35 @@ export default class CardMagStats extends Vue {
 
   @Prop({ type: String }) cardClass
 
-  isLoading = true
-  error = ''
-  height = '0vh'
+  @Prop({ type: String }) object
 
-  get objectId() {
-    return this.$store.state.object.objectId
+  get isLoading() {
+    return this.$store.state.object.loading
   }
 
-  get isDark() {
-    return this.$vuetify.theme.isDark
+  get error() {
+    const error = this.$store.state.object.error
+    return error
   }
 
-  mounted() {
-    const _oid = this.objectId || this.$route.params.oid
-    this._loadHtmx(_oid)
-    this.$el.addEventListener('htmx:responseError', (event) => {
-      this.error = event.detail.error
-      this.isLoading = false
-    })
-    this.$el.addEventListener('htmx:afterRequest', (event) => {
-      if (event.detail.successful) {
-        this.error = ''
-        this.isLoading = false
-        this.width = '100%'
-        this.height = '100%'
-        this.onIsDarkChange(this.isDark)
-      }
-    })
+  get information() {
+    const nonDetections = this.$store.state.lightcurve.nonDetections
+    const info = this.$store.state.object.object
+      ? this.$store.state.object.object
+      : {}
+    info['Non Detections'] = nonDetections ? nonDetections.length : null
+    return info
   }
 
-  _loadHtmx(objectId) {
-    const url = new URL(
-      `/v2/object_details/htmx/object/${objectId}`,
-      this.$config.alerceApiBaseUrl
-    )
-
-    const myDiv = document.getElementById('basicObject-app')
-    if (myDiv) {
-      myDiv.setAttribute('hx-get', url)
-      window.htmx.process(myDiv)
-      document.body.dispatchEvent(new Event('update-basic-object'))
-    }
+  get tns() {
+    return this.$store.state.tns
   }
 
-  @Watch('isDark', { immediate: true })
-  onIsDarkChange(newIsDark) {
-    const container = document.getElementById('basicObject-app')
-    if (container) {
-      if (newIsDark) {
-        container.classList.add('tw-dark')
-      } else {
-        container.classList.remove('tw-dark')
-      }
-    }
+  get candid() {
+    const detection = this.$store.state.lightcurve.detections.find(
+      (x) => x.has_stamp
+    )
+    return detection ? detection.candid : null
   }
 }
 </script>
diff --git a/components/cardClassifiers.vue b/components/cardClassifiers.vue
@@ -1,36 +1,53 @@
 <template>
   <v-col :cols="cols" :lg="lg" :md="md" :sm="sm">
-    <v-card :class="cardClass">
-      <v-card v-if="isLoading || error">
-        <v-card-text v-if="isLoading">
-          <v-progress-circular
-            indeterminate
-            color="primary"
-          ></v-progress-circular>
-          Fetching data for object {{ objectId }} ...
-        </v-card-text>
-        <v-card-text v-if="error">
-          <v-alert text prominent type="error" icon="mdi-cloud-alert">
-            {{ error }}
-          </v-alert>
-        </v-card-text>
-      </v-card>
-      <v-card
-        id="probabilities-app"
-        width="100%"
-        :height="height"
-        hx-trigger="update-probabilities from:body"
-      >
-      </v-card>
+    <v-card v-if="isLoading || error" :class="cardClass">
+      <v-card-text v-if="isLoading">
+        <v-progress-circular
+          indeterminate
+          color="primary"
+        ></v-progress-circular>
+        Fetching data for object {{ $route.params.oid }} ...
+      </v-card-text>
+      <v-card-text v-else-if="error">
+        <v-alert text prominent type="error" icon="mdi-cloud-alert">{{
+          error
+        }}</v-alert>
+      </v-card-text>
+    </v-card>
+    <v-card v-else :class="cardClass">
+      <v-card-text v-if="plotData" style="height: 100%">
+        <v-select
+          v-model="selected"
+          :items="classifiers_"
+          item-value="index"
+          item-text="name"
+          prepend-icon="mdi-robot"
+          class="py-0 my-0"
+        />
+        <plots-radar-plot :data="plotData" />
+      </v-card-text>
+      <v-card-text v-else class="fill-height">
+        <v-row align="center" justify="center" class="fill-height" no-gutters>
+          <v-col align-self="center">
+            <v-alert icon="mdi-alert" border="left" outlined>
+              <p class="ma-0">
+                The object
+                <b>{{ objectId }}</b> has not been classified yet.
+              </p>
+            </v-alert>
+          </v-col>
+        </v-row>
+      </v-card-text>
     </v-card>
   </v-col>
 </template>
 
 <script>
-import { Vue, Component, Prop, Watch } from 'nuxt-property-decorator'
+import { Vue, Component, Prop } from 'nuxt-property-decorator'
+import { filterSortClassifiers } from '../utils/classifier_sort'
 
 @Component
-export default class CardMagStats extends Vue {
+export default class CardClassifiers extends Vue {
   @Prop({ type: Number | String, default: 12 }) cols
 
   @Prop({ type: Number | String, default: 12 }) lg
@@ -39,64 +56,94 @@ export default class CardMagStats extends Vue {
 
   @Prop({ type: Number | String, default: 12 }) sm
 
-  @Prop({ type: Boolean, default: true }) show
-
   @Prop({ type: String }) cardClass
 
-  isLoading = true
-  error = ''
-  height = '0vh'
+  selected = 0
 
-  get objectId() {
-    return this.$store.state.object.objectId
+  /*
+  Format probabilities of API to array of objects: { name: class_name, value: prob_of_class}
+  */
+  formatProbs(probs, version = null) {
+    if (version) {
+      probs = probs.filter((prob) => {
+        return prob.classifier_version === version
+      })
+    }
+    return probs.map((k) => {
+      return {
+        name: k.class_name,
+        value: k.probability,
+      }
+    })
+  }
+
+  formatClassifierName(name) {
+    name = name.replace(/[$-/:-?{-~!"^_`]/g, (c) => ' ')
+    return name.replace(/\b\w/g, (c) => c.toUpperCase())
   }
 
-  get isDark() {
-    return this.$vuetify.theme.isDark
+  groupBy(data, prop) {
+    return data.reduce((groups, item) => {
+      const val = item[prop]
+      groups[val] = groups[val] || []
+      groups[val].push(item)
+      return groups
+    }, {})
   }
 
-  mounted() {
-    const _oid = this.objectId || this.$route.params.oid
-    this._loadHtmx(_oid)
-    this.$el.addEventListener('htmx:responseError', (event) => {
-      this.error = event.detail.error
-      this.isLoading = false
+  get plotData() {
+    return this.classifiers_.length > 0
+      ? this.classifiers_[this.selected].probs
+      : null
+  }
+
+  get classifiers_() {
+    const grouped = this.groupBy(this.classifiers, 'classifier_name')
+    const keys = Object.keys(grouped)
+    let res = []
+    keys.forEach((k) => {
+      const latestVersion = this.getLatestVersion(grouped[k])
+      res.push({
+        name: k,
+        probs: this.formatProbs(grouped[k], latestVersion),
+      })
     })
-    this.$el.addEventListener('htmx:afterRequest', (event) => {
-      if (event.detail.successful) {
-        this.error = ''
-        this.isLoading = false
-        this.width = '100%'
-        this.height = '100%'
-        this.onIsDarkChange(this.isDark)
-      }
+    res = filterSortClassifiers(res)
+    res.map((r, idx) => {
+      r.name = this.formatClassifierName(r.name)
+      r.index = idx
     })
+    return res
   }
 
-  _loadHtmx(objectId) {
-    const url = new URL(
-      `/v2/probability/htmx/probabilities/${objectId}`,
-      this.$config.alerceApiBaseUrl
+  getLatestVersion(classes) {
+    const uniqueVersions = Array.from(
+      new Set(classes.map((item) => item.classifier_version))
     )
+    uniqueVersions.sort()
+    return uniqueVersions.slice(-1)[0]
+  }
 
-    const myDiv = document.getElementById('probabilities-app')
-    if (myDiv) {
-      myDiv.setAttribute('hx-get', url)
-      window.htmx.process(myDiv)
-      document.body.dispatchEvent(new Event('update-probabilities'))
-    }
+  get classifiers() {
+    return this.$store.state.probabilities.probabilities
   }
 
-  @Watch('isDark', { immediate: true })
-  onIsDarkChange(newIsDark) {
-    const container = document.getElementById('probabilities-app')
-    if (container) {
-      if (newIsDark) {
-        container.classList.add('tw-dark')
-      } else {
-        container.classList.remove('tw-dark')
-      }
-    }
+  get isLoading() {
+    return this.$store.state.probabilities.loading
+  }
+
+  get error() {
+    return this.$store.state.probabilities.error
+  }
+
+  get objectId() {
+    return this.$store.state.object.objectId
   }
 }
 </script>
+
+<style scoped>
+.v-input__slot {
+  margin-bottom: 0;
+}
+</style>