Fix/var star css

src/components/Analysis/ImageViewer.vue

@@ -8,7 +8,6 @@ import { useAlertsStore } from '@/stores/alerts'
 import { useAnalysisStore } from '@/stores/analysis'
 import { loadImage, scalePoint } from '@/utils/common'
 import WCS from '@/utils/wcs'
-import VariableStarDialog from './VariableStarDialog.vue'
 
 const props = defineProps({
   catalog: {
@@ -38,8 +37,6 @@ const isHoveringLeaflet = ref(false)
 const raDec = ref({ ra: 0, dec: 0 })
 const alerts = useAlertsStore()
 const analysisStore = useAnalysisStore()
-const showVariableStarDialog = ref(false)
-const variableTargetCoords = ref({ ra: null, dec: null })
 
 onMounted(() => {
   // Initialize the map and its event listeners before adding the image overlay
@@ -210,17 +207,7 @@ function createCatalogLayer(){
       <b>Flux:</b> ${source.flux ?? 'N/A'}<br>
       <b>RA:</b> ${source.ra ?? 'N/A'}<br>
       <b>Dec:</b> ${source.dec ?? 'N/A'}<br>
-      <button class="variableAnalysisButton">Light Curve</button>
     `
-
-    div.querySelector('button').addEventListener('click',() => {
-      showVariableStarDialog.value = true
-      variableTargetCoords.value = {
-        ra: source.ra,
-        dec: source.dec
-      }
-    })
-
     // Create a circle marker for the source
     return new L.Circle([source.y_win, source.x_win], {
       color: 'var(--info)',
@@ -265,16 +252,6 @@ function createCatalogLayer(){
       </v-chip>
     </v-fade-transition>
   </div>
-  <v-dialog
-    v-model="showVariableStarDialog"
-    width="600px"
-  >
-    <variable-star-dialog
-      :coords="variableTargetCoords"
-      @analysis-action="(action, input) => emit('analysisAction', action, input)"
-      @close-dialog="showVariableStarDialog = false"
-    />
-  </v-dialog>
 </template>
 <style>
 /* Custom icons for leaflet-geoman */
@@ -322,14 +299,6 @@ function createCatalogLayer(){
   border-radius: 0.25rem;
 }
 
-.variableAnalysisButton {
-  background-color: var(--primary-interactive);
-  color: var(--text);
-  border: none;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-  cursor: pointer;
-}
 </style>
 <style scoped>
 </style>

src/components/Analysis/LightCurvePlot.vue

@@ -124,6 +124,7 @@ function createChart() {
           border: { color: text, width: 2 },
           ticks: { color: text },
           grid: { color: background, tickColor: text},
+          reverse: true
         }
       },
       plugins: {
@@ -145,18 +146,20 @@ onMounted(() => {
 </script>
 <template>
   <div class="wrapper">
-    <h4 class="title-lc">Light Curve</h4>
-    <div class="light-curve-plot-wrapper">
-      <canvas
-        ref="lightCurveCanvas"
-        class="light-curve-plot"
-      />
+    <p class="title-lc">
+      Light Curve 
       <v-btn
         icon="mdi-download"
         class="download-btn"
         title="Download as PNG"
         @click="downloadChartAsPNG(lightCurveChart, 'light-curve.png', 'Light Curve')"
       />
+    </p>
+    <div class="light-curve-plot-wrapper">
+      <canvas
+        ref="lightCurveCanvas"
+        class="light-curve-plot"
+      />
     </div>
   </div>
 </template>
@@ -180,8 +183,6 @@ onMounted(() => {
   height: 100% !important;
 }
 .download-btn {
-  margin-left: 1rem;
-  margin-bottom: 1rem;
   align-self: flex-end;
 }
 </style>

src/components/Analysis/PeriodogramPlot.vue

@@ -18,6 +18,7 @@ const props = defineProps({
 
 const canvasEl = ref(null)
 let chart = null
+const bestPeriod = ref(null)
 
 // Build an array of {x,y} points from store (x = frequency, y = power)
 function getXYPoints() {
@@ -43,12 +44,11 @@ function createChart() {
   const background = style.getPropertyValue('--secondary-background')
 
   const points = getXYPoints()
-  let selected = []
   if (
     props.periodogramData.peakIndex != null &&
     points[props.periodogramData.peakIndex]
   ) {
-    selected = [points[props.periodogramData.peakIndex]]
+    bestPeriod.value = points[props.periodogramData.peakIndex]
   }
   if (!points.length) {
     chart = new Chart(canvasEl.value, {
@@ -79,7 +79,7 @@ function createChart() {
         },
         {
           label: 'Selected',
-          data: selected,
+          data: bestPeriod.value ? [bestPeriod.value] : [],
           type: 'scatter',
           pointBackgroundColor: secondary,
           pointBorderColor: secondary,
@@ -170,7 +170,7 @@ function handlePointClick(freq, pow) {
 
   if (!freq || Number.isNaN(freq) || freq <= 0) return
   const period = 1.0 / freq
-  emit('periodSelected', period)
+  emit('periodSelected', period, freq, pow, bestPeriod.value)
 }
 
 watch(
@@ -186,20 +186,20 @@ onMounted(() => {
 
 <template>
   <div class="wrapper">
-    <h4 class="title-pd">
+    <p class="title-pd">
       Periodogram
-    </h4>
-    <div class="periodogram-plot-wrapper">
-      <canvas
-        ref="canvasEl"
-        class="periodogram-plot"
-      />
       <v-btn
         icon="mdi-download"
         class="download-btn"
         title="Download as PNG"
         @click="downloadChartAsPNG(chart, 'periodogram-plot.png', 'Periodogram')"
       />
+    </p>
+    <div class="periodogram-plot-wrapper">
+      <canvas
+        ref="canvasEl"
+        class="periodogram-plot"
+      />
     </div>
   </div>
 </template>
@@ -223,8 +223,6 @@ onMounted(() => {
   height: 100% !important;
 }
 .download-btn {
-  margin-left: 1rem;
-  margin-bottom: 1rem;
   align-self: flex-end;
 }
 </style>

src/components/Analysis/PhasedLightCurvePlot.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/require-default-prop -->
 <script setup>
 import Chart from 'chart.js/auto'
 import { ref, watch, computed, defineProps, onMounted } from 'vue'
@@ -11,9 +12,23 @@ const props = defineProps({
   periodogramData: {
     type: Object,
     required: true
+  },
+  bestPeriod: {
+    type: Object,
+    required: false
+  },
+  selectedPoints: {
+    type: Array,
+    required: false
   }
 })
 
+const bestPeriod = computed(() => props.bestPeriod)
+const selectedPoints = computed(() => props.selectedPoints)
+
+const sameValue = computed(() => (bestPeriod.value && selectedPoints.value.length > 0) ? 
+  (bestPeriod.value.x === selectedPoints.value[0].x && bestPeriod.value.y === selectedPoints.value[0].y) : false)
+
 const periodCanvas = ref(null)
 let periodChart = null
 const DECIMAL_PLACES = 4
@@ -132,25 +147,28 @@ onMounted(() => {
 </script>
 <template>
   <div class="wrapper">
-    <h4 class="title-plc">
+    <p class="title-plc">
       Phased Light Curve
-    </h4>
-    <div class="period-plot-wrapper">
-      <canvas
-        ref="periodCanvas"
-        class="period-plot"
-      />
       <v-btn
         icon="mdi-download"
         class="download-btn"
         title="Download as PNG"
         @click="downloadChartAsPNG(periodChart, 'period-plot.png', 'Phased Light Curve')"
       />
+    </p>
+    <div class="period-plot-wrapper">
+      <canvas
+        ref="periodCanvas"
+        class="period-plot"
+      />
       <div class="chip-row">
         <v-chip color="var(--info)">
           Period: {{ chartData.period }} days
         </v-chip>
-        <v-chip :color="probabilityChipColor">
+        <v-chip
+          v-if="sameValue || !selectedPoints.length"
+          :color="probabilityChipColor"
+        >
           False Alarm Probability: {{ chartData.falseAlarmPercentage }}%
         </v-chip>
       </div>
@@ -177,8 +195,6 @@ onMounted(() => {
   height: 100% !important;
 }
 .download-btn {
-  margin-left: 1rem;
-  margin-bottom: 1rem;
   align-self: flex-end;
 }
 .chip-row {

src/components/DataSession/Operation/OperationWizard.vue

@@ -224,7 +224,6 @@ function selectOperation(name) {
       operationInputs.value[key] = value.default
     }
     else if (value.color_picker) {
-      console.log('value', value)
       /**
        * Custom handling for color image operation
        * Since we can add and remove channels all inputs fall under the same key in an array of objects