From 858052a872766203accdaddb372260f75142259f Mon Sep 17 00:00:00 2001
From: Juan Escudero <jescudero@iaa.es>
Date: Wed, 9 Oct 2024 16:59:39 +0200
Subject: [PATCH] Allow querying plot from URL (#146)

---
 iop4api/templates/iop4api/index.html | 40 +++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/iop4api/templates/iop4api/index.html b/iop4api/templates/iop4api/index.html
index c9cc343c..e700ab10 100644
--- a/iop4api/templates/iop4api/index.html
+++ b/iop4api/templates/iop4api/index.html
@@ -112,7 +112,7 @@ <h2><a href="https://vhega.iaa.es/">VHEGA@IAA-CSIC</a></h2>
                     selectedTabs: [C1selectedTab_0, C2selectedTab_0],
                     // log
                     logEntries: [],
-                    // plot
+                    // plot (also uses input_astrosource in query vars)
                     showPlot: false,
                     plot_config_fast: true,
                     enable_full_lc: false,
@@ -121,6 +121,8 @@ <h2><a href="https://vhega.iaa.es/">VHEGA@IAA-CSIC</a></h2>
                     use_hostcorrected: false,
                     plot_config_band: 'R',
                     plot_config_band_options: ['R', 'V', 'B', 'U', 'I'],
+                    input_date_start: '',
+                    input_date_end: '',
                     // plot (flagging)
                     selected_plot_idx: [],
                     show_selected_plot_pts: false,
@@ -331,6 +333,9 @@ <h2><a href="https://vhega.iaa.es/">VHEGA@IAA-CSIC</a></h2>
             },
             methods: {
                 updateURL() {
+                    // Get the current query parameters
+                    const currentParams = window.location.search;
+
                     // Start forming the new URL based on the selected tabs
                     let newURL = '/iop4/';
 
@@ -354,6 +359,9 @@ <h2><a href="https://vhega.iaa.es/">VHEGA@IAA-CSIC</a></h2>
                         }
                     }
 
+                    // Append the original query parameters to the new URL
+                    newURL += currentParams;
+
                     window.history.pushState({}, '', newURL);
                 },
                 updateSelectedTabFromPath() { 
@@ -404,6 +412,21 @@ <h2><a href="https://vhega.iaa.es/">VHEGA@IAA-CSIC</a></h2>
                     }
                     return Number(value).toFixed(precision);
                 },
+                // auto load plot from url (e.g. /iop4/explore/plot/?srcname=2200%2B420&from=2024-01-01&to=2024-09-01)
+                autoSubmitPlotForm() {
+                    load_source_plot(document.getElementById('plot_astrosource_form'));
+                },
+                getPlotQueryParams() {
+                    const params = new URLSearchParams(window.location.search);
+                    return {
+                        srcname: params.get('srcname') || '',
+                        date1: params.get('from') || '',
+                        date2: params.get('to') || '',
+                        band: params.get('band') || 'R',
+                        fast: params.get('fast') || 'false',
+                        errors: params.get('errors') || 'true',
+                    };
+                },
             },
             beforeMount() {
                 this.updateSelectedTabFromPath();
@@ -412,6 +435,21 @@ <h2><a href="https://vhega.iaa.es/">VHEGA@IAA-CSIC</a></h2>
                 window.addEventListener('popstate', () => {
                     this.updateSelectedTabFromPath();
                 });
+                // auto load plot from url
+                const params = this.getPlotQueryParams();
+                this.input_astrosource = params.srcname;
+                this.input_date_start = params.date1;
+                this.input_date_end = params.date2;
+                this.plot_config_band = params.band;
+                this.plot_config_fast = params.fast === 'true';
+                this.enable_errorbars = params.errors === 'true';
+
+                if (this.input_astrosource) { // && this.input_date_start && this.input_date_end) {
+                    console.log('auto plotting from url with params', params);
+                    Vue.nextTick(() => {
+                        this.autoSubmitPlotForm();
+                    });
+                }
             }
         }).use(Quasar).mount('#app')