Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a page to show all observations of a program #1680

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

Create a page to show all observations of a program #1680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2d4f1c7
initial exploratory work
bhilbert4 Jan 31, 2025
bcdaa47
troubleshooting
bhilbert4 Feb 5, 2025
b06dc05
troubleshooting
bhilbert4 Feb 5, 2025
59fe5a8
Closer. Thumbnails are visible, but in wrong place
bhilbert4 Feb 5, 2025
3bf22b7
thumbnails in the right locations, but mixed up
bhilbert4 Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
285 changes: 282 additions & 3 deletions jwql/website/apps/jwql/static/js/jwql.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1259,6 +1259,7 @@ function update_obs_options(data, inst, prop, observation) {
content += '<div class="dropdown">';
content += '<button class="btn btn-primary dropdown-toggle" type="button" id="obs_dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Obs' + observation + '</button>';
content += '<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">';
content += '<a class="dropdown-item" href="/' + inst + '/archive/' + prop + '/all_observations/" > All Obs</a>';
for (var i = 0; i < data.obs_list.length; i++) {
content += '<a class="dropdown-item" href="/' + inst + '/archive/' + prop + '/obs' + data.obs_list[i] + '/" > Obs' + data.obs_list[i] + '</a>';
}
Expand Down Expand Up @@ -1337,6 +1338,7 @@ function update_sort_options(data, base_url) {
* Updates the thumbnail-array div with interactive images of thumbnails
* @param {Object} data - The data returned by the update_thumbnails_per_observation_page/update_thumbnails_query_page AJAX methods
*/
/*
function update_thumbnail_array(data) {

// Add content to the thumbnail array div
Expand Down Expand Up @@ -1400,6 +1402,190 @@ function update_thumbnail_array(data) {
insert_thumbnail_images(image_updates);
}

*/





/**
* Updates the thumbnail-array div with interactive images of thumbnails
* @param {Object} data - The data returned by the update_thumbnails_per_observation_page/update_thumbnails_query_page AJAX methods
*/
/*
THIS IS THE ORIGINAL VERSION
function update_thumbnail_array(data, targetDiv = "thumbnail-array") {
var targetElement = document.getElementById(targetDiv);

if (!targetElement) {
console.error("Target element for thumbnails not found:", targetDiv);
console.log("Available elements:", document.querySelectorAll(".thumbnail-array"));
return;
}

var thumbnail_content = "";
var image_updates = [];

// Handle multiple observations by grouping thumbnails under their respective observation
var observations = {};

for (var i = 0; i < Object.keys(data.file_data).length; i++) {
var rootname = Object.keys(data.file_data)[i];
var file = data.file_data[rootname];

var viewed = file.viewed;
var exp_type = file.exp_type;
var filename_dict = file.filename_dict;
var filter_type = file.filter;
var pupil_type = file.pupil;
var grating_type = file.grating;
var observation_num = filename_dict.observation; // Extract observation number

var instrument = (data.inst !== "all") ? data.inst : filename_dict.instrument;

// Build thumbnail content
var content = '<div class="thumbnail" data-instrument="' + instrument +
'" data-detector="' + filename_dict.detector + '" data-proposal="' + filename_dict.program_id +
'" data-file_root="' + rootname + '" data-group_root="' + filename_dict.group_root +
'" data-exp_start="' + file.expstart + '" data-look="' + viewed + '" data-exp_type="' + exp_type +
'" data-visit="' + filename_dict.visit + '" data-filter="' + filter_type + '" data-pupil="' + pupil_type +
'" data-grating="' + grating_type + '">';
content += '<div class="thumbnail-group">';
content += '<a class="thumbnail-link" href="#" data-image-href="/' +
instrument + '/' + rootname + '/" data-group-href="/' +
instrument + '/exposure/' + filename_dict.group_root + '">';
content += '<span class="helper"></span>';
content += '<img id="thumbnail' + i +
'" src="/static/img/default_thumb.png" ' +
'alt="Thumbnail for file ' + rootname + '">';
content += '<div class="thumbnail-color-fill"></div>';
content += '<div class="thumbnail-info">';
content += 'Proposal: ' + filename_dict.program_id + '<br>';
content += 'Observation: ' + observation_num + '<br>';
content += 'Visit: ' + filename_dict.visit + '<br>';
content += 'Detector: ' + filename_dict.detector + '<br>';
content += 'Exp_Start: ' + file.expstart_iso + '<br>';
content += '</div></a></div></div>';

// Store content under the respective observation number
if (!observations[observation_num]) {
observations[observation_num] = [];
}
observations[observation_num].push(content);

// Track images that need to be updated
if (file.thumbnail !== 'none') {
var jpg_path = '/static/thumbnails/' + parse_filename(rootname).program + '/' + file.thumbnail;
image_updates.push([i, jpg_path]);
}
}

// Build the final HTML output
for (let obs in observations) {
thumbnail_content += `<h4>Observation ${obs}</h4><div class="thumbnail-container">${observations[obs].join('')}</div>`;
}

targetElement.innerHTML = thumbnail_content;

// Insert the actual thumbnail images
insert_thumbnail_images(image_updates);
}
*/


/**
* Updates the thumbnail-array div with interactive images of thumbnails
* @param {Object} data - The data returned by the update_thumbnails_per_observation_page/update_thumbnails_query_page AJAX methods
*/
function update_thumbnail_array(data, targetDiv = "thumbnail-array") {
var targetElement = document.getElementById(targetDiv);
if (!targetElement) {
console.error("Target div for thumbnails not found:", targetDiv);
console.log("Available elements:", document.querySelectorAll(".thumbnail-array"));
return;
}

var thumbnail_content = "";
var image_updates = [];

/**for (var i = 0; i < Object.keys(data.file_data).length; i++) {
var rootname = Object.keys(data.file_data)[i];
var file = data.file_data[rootname];
**/

Object.keys(data.file_data).forEach((rootname, i) => {
var file = data.file_data[rootname];

// Extract relevant file properties
var viewed = file.viewed;
var exp_type = file.exp_type;
var filename_dict = file.filename_dict;
var filter_type = file.filter;
var pupil_type = file.pupil;
var grating_type = file.grating;
var observation_num = filename_dict.observation; // Extract observation number

// Determine the instrument name
var instrument = (data.inst !== "all") ? data.inst : filename_dict.instrument;

// Build the thumbnail container
var content = '<div class="thumbnail" data-instrument="' + instrument +
'" data-detector="' + filename_dict.detector + '" data-proposal="' + filename_dict.program_id +
'" data-file_root="' + rootname + '" data-group_root="' + filename_dict.group_root +
'" data-exp_start="' + file.expstart + '" data-look="' + viewed + '" data-exp_type="' + exp_type +
'" data-visit="' + filename_dict.visit + '" data-filter="' + filter_type + '" data-pupil="' + pupil_type +
'" data-grating="' + grating_type + '">';

content += '<div class="thumbnail-group">'
content += '<a class="thumbnail-link" href="#" data-image-href="/' +
instrument + '/' + rootname + '/" data-group-href="/' +
instrument + '/exposure/' + filename_dict.group_root + '">';
content += '<span class="helper"></span>'

// Make sure thumbnail img always has a src and alt
content += '<img id="thumbnail' + i +
'" src="/static/img/default_thumb.png" ' +
'alt="Thumbnail for file ' + rootname + '">';
content += '<div class="thumbnail-color-fill" ></div>';
content += '<div class="thumbnail-info">';
content += 'Proposal: ' + filename_dict.program_id + '<br>';
content += 'Observation: ' + filename_dict.observation + '<br>';
content += 'Visit: ' + filename_dict.visit + '<br>';
content += 'Detector: ' + filename_dict.detector + '<br>';
content += 'Exp_Start: ' + file.expstart_iso + '<br>';
content += '</div></a></div></div>';

// Append content
thumbnail_content += content;

// Store image paths for later updates
if (file.thumbnail !== 'none') {
// var jpg_path = `/static/thumbnails/${filename_dict.program_id}/${file.thumbnail}`;
var jpg_path = '/static/thumbnails/' + parse_filename(rootname).program + '/' + file.thumbnail;
image_updates.push([i, jpg_path]);
}
});

// Insert thumbnails into the correct section
targetElement.innerHTML = thumbnail_content;
//$("#thumbnail-array")[0].innerHTML = thumbnail_content;

// Update the thumbnail images with correct sources
insert_thumbnail_images(image_updates);
}













/**
* Updates various components on the thumbnails page
* @param {String} inst - The instrument of interest (e.g. "FGS")
Expand All @@ -1409,14 +1595,38 @@ function update_thumbnail_array(data) {
* @param {String} sort - Sort method string saved in session data image_sort
* @param {String} group - Group method string saved in session data image_group
*/
function update_thumbnails_per_observation_page(inst, proposal, observation, base_url, sort, group) {
/*
function update_thumbnails_per_observation_page(inst, proposal, observation, base_url, sort, group, targetDiv = "thumbnail-array") {
observations.forEach(function(observation) {
let targetDiv = "thumbnail-array-" + observation; // Dynamically determine target div

if (observation === "none" || observation === "all") {
url = base_url + '/ajax/' + inst + '/archive/' + proposal + '/all_obs/';
} else {
url = base_url + '/ajax/' + inst + '/archive/' + proposal + '/obs' + observation + '/';
}

$.ajax({
url: base_url + '/ajax/' + inst + '/archive/' + proposal + '/obs' + observation + '/',
url: url,
success: function(data){
// Perform various updates to divs
var num_thumbnails = Object.keys(data.file_data).length;
update_show_count(num_thumbnails, 'activities');
update_thumbnail_array(data);

// If handling multiple observations, target the correct div dynamically
var targetElement = document.getElementById(targetDiv);
if (!targetElement) {
console.error("Target element for thumbnails not found:", targetDiv);
console.error("Target element for thumbnails not found. Checking DOM...");
console.log(document.body.innerHTML); // Print the entire DOM for debugging

return;
}

targetElement.style.display = "block";
targetElement.innerHTML = ""; // Clear existing content before updating

update_thumbnail_array(data, targetElement);
update_obs_options(data, inst, proposal, observation);
update_filter_options(data, base_url, 'thumbnail');
update_group_options(data, base_url);
Expand All @@ -1431,6 +1641,75 @@ function update_thumbnails_per_observation_page(inst, proposal, observation, bas
document.getElementById("thumbnail-array").style.display = "block";
}});
}
*/






/**
* Updates various components on the thumbnails page
* @param {String} inst - The instrument of interest (e.g. "FGS")
* @param {String} proposal - The proposal number of interest (e.g. "88660")
* @param {String} observation - The observation number within the proposal (e.g. "001")
* @param {String} base_url - The base URL for gathering data from the AJAX view.
* @param {String} sort - Sort method string saved in session data image_sort
* @param {String} group - Group method string saved in session data image_group
*/
function update_thumbnails_per_observation_page(inst, proposal, observation, base_url, sort, group, targetDiv = "thumbnail-array") {
let url = base_url + '/ajax/' + inst + '/archive/' + proposal + '/obs' + observation + '/';

console.log("Making AJAX request to:", base_url + '/ajax/' + inst + '/archive/' + proposal + '/obs' + observation + '/');


$.ajax({
url: url,
success: function(data) {
console.log("AJAX success: Data received for obs:", observation, data);
var num_thumbnails = Object.keys(data.file_data).length;
update_show_count(num_thumbnails, 'activities');

var targetElement = document.getElementById(targetDiv);
if (!targetElement) {
console.error("Target element for thumbnails not found:", targetDiv);
return;
}

targetElement.style.display = "block";
targetElement.innerHTML = ""; // Clear before updating

update_thumbnail_array(data, targetDiv);
update_obs_options(data, inst, proposal, observation);
update_filter_options(data, base_url, 'thumbnail');
update_group_options(data, base_url);
update_sort_options(data, base_url);

group_by_thumbnails(group, base_url);
sort_by_thumbnails(sort, base_url);

document.getElementById("loading").style.display = "none";
},
error: function(xhr, status, error) {
console.error("Error fetching thumbnails:", error);
}
});
}



function waitForElement(selector, callback) {
var checkExist = setInterval(function() {
var element = document.getElementById(selector);
if (element) {
clearInterval(checkExist);
callback(element);
}
}, 100); // Check every 100ms
}




/**
* Updates various components on the thumbnails anomaly query page
Expand Down
Loading