From f5216ba3e74daf09c11456e285900afdec2b1cac Mon Sep 17 00:00:00 2001
From: Carolina Capetillo <carolinacapetilloc@gmail.com>
Date: Tue, 24 Feb 2026 09:53:47 -0800
Subject: [PATCH 1/7] updates min character length of datasession name to 1

---
 src/components/Project/CreateSessionDialog.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Project/CreateSessionDialog.vue b/src/components/Project/CreateSessionDialog.vue
index b85b8b7..68f5408 100644
--- a/src/components/Project/CreateSessionDialog.vue
+++ b/src/components/Project/CreateSessionDialog.vue
@@ -85,8 +85,8 @@ function validateSessionName(){
   if (dataSessionsList.value.some(session => session.name === newSessionName.value)) {
     alertsStore.setAlert('error', `${newSessionName.value} already exists`)
     return false
-  } else if (newSessionName.value.length < 5) {
-    alertsStore.setAlert('warning', 'Data Session Name should be at least 5 characters long')
+  } else if (newSessionName.value.length < 1) {
+    alertsStore.setAlert('warning', 'Data Session Name should be at least 1 character long')
     return false
   } else if (newSessionName.value.length > 25) {
     alertsStore.setAlert('warning', `Data Session Name ${newSessionName.value} exceeds 25 characters`)

From 7c251d7ebfb89e29409d1dc4f937ab050ff23f05 Mon Sep 17 00:00:00 2001
From: Carolina Capetillo <carolinacapetilloc@gmail.com>
Date: Tue, 24 Feb 2026 13:32:08 -0800
Subject: [PATCH 2/7] updates style

---
 src/components/Analysis/LightCurvePlot.vue      | 17 +++++++++--------
 src/components/Analysis/PeriodogramPlot.vue     | 16 +++++++---------
 .../Analysis/PhasedLightCurvePlot.vue           | 16 +++++++---------
 3 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/src/components/Analysis/LightCurvePlot.vue b/src/components/Analysis/LightCurvePlot.vue
index b89e3e3..f822572 100644
--- a/src/components/Analysis/LightCurvePlot.vue
+++ b/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>
diff --git a/src/components/Analysis/PeriodogramPlot.vue b/src/components/Analysis/PeriodogramPlot.vue
index c73ebf7..fac53eb 100644
--- a/src/components/Analysis/PeriodogramPlot.vue
+++ b/src/components/Analysis/PeriodogramPlot.vue
@@ -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>
diff --git a/src/components/Analysis/PhasedLightCurvePlot.vue b/src/components/Analysis/PhasedLightCurvePlot.vue
index 1e43254..ac26852 100644
--- a/src/components/Analysis/PhasedLightCurvePlot.vue
+++ b/src/components/Analysis/PhasedLightCurvePlot.vue
@@ -132,20 +132,20 @@ 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
@@ -177,8 +177,6 @@ onMounted(() => {
   height: 100% !important;
 }
 .download-btn {
-  margin-left: 1rem;
-  margin-bottom: 1rem;
   align-self: flex-end;
 }
 .chip-row {

From 98cc88e6f9e5a7925619350a7dd5d458efd70bdc Mon Sep 17 00:00:00 2001
From: Carolina Capetillo <carolinacapetilloc@gmail.com>
Date: Tue, 24 Feb 2026 13:32:25 -0800
Subject: [PATCH 3/7] updates style

---
 src/views/DataAnalysisView.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/views/DataAnalysisView.vue b/src/views/DataAnalysisView.vue
index 1897bbd..e14504b 100644
--- a/src/views/DataAnalysisView.vue
+++ b/src/views/DataAnalysisView.vue
@@ -166,8 +166,7 @@ const title = computed(() => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 0.5rem;
-  gap: 1.5vh;
+  gap: 4.5vh;
   overflow: hidden;
 }
 .analysis-page{
@@ -185,7 +184,7 @@ const title = computed(() => {
   background-color: var(--header);
 }
 .analysis-row {
-  flex: 0 0 26vh;
+  flex: 0 0 22vh;
   min-height: 0;
   border-radius: 8px;
   display: flex;

From d5c6224aea944d496cefcb299841b3c3d53293ff Mon Sep 17 00:00:00 2001
From: Carolina Capetillo <carolinacapetilloc@gmail.com>
Date: Tue, 24 Feb 2026 13:33:23 -0800
Subject: [PATCH 4/7] removes light curve button

---
 src/components/Analysis/ImageViewer.vue | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/components/Analysis/ImageViewer.vue b/src/components/Analysis/ImageViewer.vue
index 58ef14f..2aee287 100644
--- a/src/components/Analysis/ImageViewer.vue
+++ b/src/components/Analysis/ImageViewer.vue
@@ -210,17 +210,8 @@ 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)',
@@ -322,14 +313,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>

From 6358a840904aefac154dbcec8b9ed08f8a2fca97 Mon Sep 17 00:00:00 2001
From: Carolina Capetillo <carolinacapetilloc@gmail.com>
Date: Tue, 24 Feb 2026 13:37:22 -0800
Subject: [PATCH 5/7] removes unused code related to variablestardialog

---
 src/components/Analysis/ImageViewer.vue       |  14 --
 .../Analysis/VariableStarDialog.vue           | 126 ------------------
 2 files changed, 140 deletions(-)
 delete mode 100644 src/components/Analysis/VariableStarDialog.vue

diff --git a/src/components/Analysis/ImageViewer.vue b/src/components/Analysis/ImageViewer.vue
index 2aee287..b4b13cb 100644
--- a/src/components/Analysis/ImageViewer.vue
+++ b/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
@@ -211,7 +208,6 @@ function createCatalogLayer(){
       <b>RA:</b> ${source.ra ?? 'N/A'}<br>
       <b>Dec:</b> ${source.dec ?? 'N/A'}<br>
     `
-
     // Create a circle marker for the source
     return new L.Circle([source.y_win, source.x_win], {
       color: 'var(--info)',
@@ -256,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 */
diff --git a/src/components/Analysis/VariableStarDialog.vue b/src/components/Analysis/VariableStarDialog.vue
deleted file mode 100644
index 9451402..0000000
--- a/src/components/Analysis/VariableStarDialog.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<script setup>
-import { computed, ref, watch } from 'vue'
-import { VDateInput } from 'vuetify/labs/VDateInput'
-import { useConfigurationStore } from '@/stores/configuration'
-import { useAnalysisStore } from '@/stores/analysis'
-import { useAlertsStore } from '@/stores/alerts'
-import { fetchApiCall } from '../../utils/api'
-
-const emit = defineEmits(['closeDialog', 'analysisAction'])
-
-const props = defineProps({
-  coords: {
-    type: Object,
-    required: true,
-  }
-})
-
-const configStore = useConfigurationStore()
-const analysisStore = useAnalysisStore()
-const alertsStore = useAlertsStore()
-
-// Date range to query images from the archive, default to last 7 days
-const endDate = ref(new Date(analysisStore.headerData.DATE))
-const startDate = ref(new Date(endDate.value))
-startDate.value.setDate(endDate.value.getDate() - 7)
-const ISOStartDate = computed(() => startDate.value.toISOString())
-const ISOEndDate = computed(() => endDate.value.toISOString())
-
-const matchingImages = ref({ count: 0, results: [] })
-
-// When date range changes, queries the archive and updates tooltip with how many images are available
-watch([startDate, endDate], () => {
-  const { datalabArchiveApiUrl } = configStore
-  const { imageFilter } = analysisStore
-  const { ra, dec } = props.coords
-
-  const queryUrl = datalabArchiveApiUrl + 'frames/?force_count=true&reduction_level=91&' +
-    `start=${ISOStartDate.value}&end=${ISOEndDate.value}&` +
-    `primary_optical_element=${imageFilter}&` +
-    `covers=POINT(${ra} ${dec})`
-
-  fetchApiCall({url: queryUrl, method: 'GET', 
-    successCallback: (data) => {
-      matchingImages.value = data
-    },
-    failCallback: (error) => {
-      console.error('Failed to fetch frames:', error)
-      alertsStore.setAlert('error', 'Failed to fetch frames from archive API')
-    }
-  })
-}, { immediate: true })
-
-// Run when user clicks "Analyze" kicks off the variable star analysis
-function dispatchVariableAnalysis() {
-  emit ('analysisAction', 'variable-star', {
-    images: matchingImages.value.results.map((image) => { // a list of images
-      return {
-        id: image.id,
-        basename: image.basename,
-        observation_date: image.observation_date,
-      }
-    }),
-    target_coords: props.coords, // the target coordinates
-  })
-  emit('closeDialog')
-}
-
-</script>
-<template>
-  <v-card class="d-flex flex-column ga-4">
-    <p>Variable Star Analysis</p>
-    <div class="d-flex ga-6">
-      <v-date-input
-        v-model="startDate"
-        :max="endDate"
-        label="From"
-        prepend-icon=""
-        prepend-inner-icon="$calendar"
-        :hide-actions="true"
-        hide-details="auto"
-        color="var(--primary-interactive)"
-        bg-color="var(--card-background)"
-        variant="solo-filled"
-      />
-      <v-date-input
-        v-model="endDate"
-        :max="new Date()"
-        :min="startDate"
-        label="To"
-        prepend-icon=""
-        prepend-inner-icon="$calendar"
-        :hide-actions="true"
-        hide-details="auto"
-        color="var(--primary-interactive)"
-        bg-color="var(--card-background)"
-        variant="solo-filled"
-      />
-    </div>
-    <p class="imageCountText">
-      {{ matchingImages.count }} Images in date range
-    </p>
-    <div class="buttons d-flex ga-4 justify-end">
-      <v-btn
-        color="var(--cancel)"
-        text="Cancel"
-        @click="$emit('closeDialog')"
-      />
-      <v-btn
-        color="var(--primary-interactive)"
-        text="Analyze"
-        @click="dispatchVariableAnalysis"
-      />
-    </div>
-  </v-card>
-</template>
-<style scoped>
-  .v-card {
-    padding: 2rem;
-    background-color: var(--card-background);
-    color: var(--text);
-  }
-  .imageCountText {
-    color: var(--info);
-    font-style: italic;
-  }
-</style>

From e0d38da35f3544244b85d7cfcaa6b1341a9265be Mon Sep 17 00:00:00 2001
From: Carolina Capetillo <carolinacapetilloc@gmail.com>
Date: Tue, 24 Feb 2026 17:03:40 -0800
Subject: [PATCH 6/7] adds logic to check if best period is the same as
 selected period and display false alarm probability if so

---
 src/components/Analysis/PeriodogramPlot.vue   |  9 +++++----
 .../Analysis/PhasedLightCurvePlot.vue         | 20 ++++++++++++++++++-
 src/views/DataAnalysisView.vue                | 10 ++++++++--
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/Analysis/PeriodogramPlot.vue b/src/components/Analysis/PeriodogramPlot.vue
index fac53eb..923c878 100644
--- a/src/components/Analysis/PeriodogramPlot.vue
+++ b/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,12 @@ 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]
+    console.log('Best period point:', bestPeriod.value)
   }
   if (!points.length) {
     chart = new Chart(canvasEl.value, {
@@ -79,7 +80,7 @@ function createChart() {
         },
         {
           label: 'Selected',
-          data: selected,
+          data: bestPeriod.value ? [bestPeriod.value] : [],
           type: 'scatter',
           pointBackgroundColor: secondary,
           pointBorderColor: secondary,
@@ -170,7 +171,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(
diff --git a/src/components/Analysis/PhasedLightCurvePlot.vue b/src/components/Analysis/PhasedLightCurvePlot.vue
index ac26852..ee7bf0b 100644
--- a/src/components/Analysis/PhasedLightCurvePlot.vue
+++ b/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
@@ -150,7 +165,10 @@ onMounted(() => {
         <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>
diff --git a/src/views/DataAnalysisView.vue b/src/views/DataAnalysisView.vue
index e14504b..a6af08b 100644
--- a/src/views/DataAnalysisView.vue
+++ b/src/views/DataAnalysisView.vue
@@ -17,6 +17,8 @@ const emit = defineEmits(['closeAnalysisDialog'])
 
 const periodogramData = ref({})
 const variableStarData = ref({})
+const bestPeriod = ref(null)
+const selectedPoints = ref([])
 
 function foldPeriod(magTimeSeries, period) {
   const frequency = 1.0 / period
@@ -95,8 +97,10 @@ function applySelectedPeriod(period) {
   variableStarData.value.magPhasedLightCurve = [...props.data.light_curve].sort((a, b) => a.phase - b.phase)
 }
 
-const handlePeriodSelected = (period) => {
+const handlePeriodSelected = (period, freq, pow, bestPeriodFromPlot) => {
   applySelectedPeriod(period)
+  bestPeriod.value = bestPeriodFromPlot
+  selectedPoints.value = [{ x: freq, y: pow }]
 }
 
 watch(() => props.data, () => {
@@ -154,6 +158,8 @@ const title = computed(() => {
           <phased-light-curve-plot
             :variable-star-data="variableStarData"
             :periodogram-data="periodogramData"
+            :best-period="bestPeriod"
+            :selected-points="selectedPoints"
             class="period-plot"
           />
         </v-row>
@@ -184,7 +190,7 @@ const title = computed(() => {
   background-color: var(--header);
 }
 .analysis-row {
-  flex: 0 0 22vh;
+  flex: 0 0 24vh;
   min-height: 0;
   border-radius: 8px;
   display: flex;

From 43a9e4924ba1b8ffde5c51242860b760d9b8a86a Mon Sep 17 00:00:00 2001
From: Carolina Capetillo <carolinacapetilloc@gmail.com>
Date: Tue, 24 Feb 2026 17:04:06 -0800
Subject: [PATCH 7/7] deletes console.logs

---
 src/components/Analysis/PeriodogramPlot.vue              | 1 -
 src/components/DataSession/Operation/OperationWizard.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/Analysis/PeriodogramPlot.vue b/src/components/Analysis/PeriodogramPlot.vue
index 923c878..ebf53c1 100644
--- a/src/components/Analysis/PeriodogramPlot.vue
+++ b/src/components/Analysis/PeriodogramPlot.vue
@@ -49,7 +49,6 @@ function createChart() {
     points[props.periodogramData.peakIndex]
   ) {
     bestPeriod.value = points[props.periodogramData.peakIndex]
-    console.log('Best period point:', bestPeriod.value)
   }
   if (!points.length) {
     chart = new Chart(canvasEl.value, {
diff --git a/src/components/DataSession/Operation/OperationWizard.vue b/src/components/DataSession/Operation/OperationWizard.vue
index bd833f3..92ae536 100644
--- a/src/components/DataSession/Operation/OperationWizard.vue
+++ b/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