Merge pull request #93 from LCOGT/feature/line-analysis-details

two new props, start and end coords as well as a detail section to the line plot
LCOGT · Jun 25, 2024 · d335def · d335def
2 parents 0c8a844 + f49a3ad
commit d335def
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/src/components/Global/UserMenu.vue b/src/components/Global/UserMenu.vue
@@ -14,9 +14,7 @@ function logOut() {
 
 <template>
   <div class="user-menu">
-    <v-menu
-      :location="start"
-    >
+    <v-menu>
       <template #activator="{ props }">
         <v-btn
           class="nav-text"

diff --git a/src/components/Project/ImageAnalysis/ImageAnalyzer.vue b/src/components/Project/ImageAnalysis/ImageAnalyzer.vue
@@ -11,12 +11,16 @@ const emit = defineEmits(['update:modelValue'])
 const configStore = useConfigurationStore()
 
 const lineProfile = ref([])
-const lineProfileLength = ref(0)
+const lineProfileLength = ref()
+const startCoords = ref()
+const endCoords = ref()
 const catalog = ref([])
 
 function closeDialog() { 
   lineProfile.value = []
   lineProfileLength.value = 0
+  startCoords.value = null
+  endCoords.value = null
   emit('update:modelValue', false)
 }
 
@@ -36,6 +40,8 @@ function handleAnalysisOutput(response, action){
   case 'line-profile':
     lineProfile.value = response.line_profile
     lineProfileLength.value = response.arcsec
+    endCoords.value = response.end_coords
+    startCoords.value = response.start_coords
     break
   case 'source-catalog':
     catalog.value = response
@@ -90,6 +96,8 @@ function handleAnalysisOutput(response, action){
           <line-plot
             :y-axis-luminosity="lineProfile"
             :x-axis-arcsecs="lineProfileLength"
+            :start-coords="startCoords"
+            :end-coords="endCoords"
           />
         </div>
       </div>

diff --git a/src/components/Project/ImageAnalysis/LinePlot.vue b/src/components/Project/ImageAnalysis/LinePlot.vue
@@ -4,7 +4,7 @@ import * as d3 from 'd3'
 
 const svg = ref(null)
 
-const props = defineProps(['yAxisLuminosity', 'xAxisArcsecs'])
+const props = defineProps(['yAxisLuminosity', 'xAxisArcsecs', 'startCoords', 'endCoords'])
 
 // Setting dimensions and margins for the plot
 const margin = { top: 20, right: 20, bottom: 70, left: 80 },
@@ -51,7 +51,7 @@ const updatePlot = () => {
     .attr('d', line)
     .attr('fill', 'none')
     .attr('stroke', 'steelblue')
-    .attr('stroke-width', 2)
+    .attr('stroke-width', 1)
 }
 
 watch(() => [props.yAxisLuminosity, props.xAxisArcsecs], () => {
@@ -107,6 +107,19 @@ onMounted(() => {
       :height="svgHeight"
     />
   </div>
+  <div
+    class="line-details"
+  >
+    <p v-if="xAxisArcsecs">
+      Distance: {{ xAxisArcsecs.toFixed(3) }} arcseconds
+    </p>
+    <p v-if="startCoords">
+      Start: RA {{ startCoords[0].toFixed(3) }} DEC {{ startCoords[1].toFixed(3) }}
+    </p>
+    <p v-if="endCoords">
+      End: RA {{ endCoords[0].toFixed(3) }} DEC {{ endCoords[1].toFixed(3) }}
+    </p>
+  </div>
 </template>
 
 <style scoped> 
@@ -117,6 +130,10 @@ onMounted(() => {
 .axis-label {
   color: var(--tan);
 }
+.line-details {
+  color: var(--tan);
+  font-family: 'Open Sans', sans-serif;
+}
 @media (max-width: 1200px) {
 .svg-wrapper {
   margin-left: -18%;