Skip to content

Commit

Permalink
added tabs to switch between background plots
Browse files Browse the repository at this point in the history
  • Loading branch information
@bsunnquist
bsunnquist committed Jan 23, 2024
1 parent 784bc29 commit cbd03f2
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 52 deletions.
7 changes: 4 additions & 3 deletions jwql/instrument_monitors/nircam_monitors/claw_monitor.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,13 +154,13 @@ def make_background_plots(self, plot_type='bkg'):
if int(fltr[1:4]) < 250: # i.e. SW
detectors_to_run = ['NRCA2', 'NRCA4', 'NRCB3', 'NRCB1', 'NRCA1', 'NRCA3', 'NRCB4', 'NRCB2'] # in on-sky order, don't change order
grid = plt.GridSpec(2, 4, hspace=.4, wspace=.4, width_ratios=[1, 1, 1, 1])
fig = plt.figure(figsize=(40, 20))
fig = plt.figure(figsize=(45, 20))
fig.suptitle(fltr, fontsize=70)
frack_masked_thresh = 0.075
else: # i.e. LW
detectors_to_run = ['NRCALONG', 'NRCBLONG']
grid = plt.GridSpec(1, 2, hspace=.2, wspace=.4, width_ratios=[1, 1])
fig = plt.figure(figsize=(20, 10))
fig = plt.figure(figsize=(25, 10))
fig.suptitle(fltr, fontsize=70, y=1.05)
frack_masked_thresh = 0.15
for i, det in enumerate(detectors_to_run):
Expand All @@ -178,14 +178,15 @@ def make_background_plots(self, plot_type='bkg'):
if plot_type == 'bkg':
plot_data = df['median'].values
if plot_type == 'bkg_rms':
df = df[df['stddev'] != 0] # older data has no accurate stddev measures
plot_data = df['stddev'].values
if plot_type == 'model':
plot_data = df['median'].values / df['total_bkg'].values
plot_expstarts = df['expstart_mjd'].values

# Plot the background data over time
ax = fig.add_subplot(grid[i])
ax.scatter(plot_expstarts, plot_data, alpha=0.5)
ax.scatter(plot_expstarts, plot_data, alpha=0.3)

# Match scaling in all plots to the first detector with data.
if len(df) > 0:
Expand Down
5 changes: 2 additions & 3 deletions jwql/website/apps/jwql/monitor_views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,8 @@ def background_monitor(request):
template = "background_monitor.html"

# Get the background trending filters to display
#server_name = get_config()['outputs'].split("outputs/", 1)[1] # todo uncomment
# output_dir_bkg = static(os.path.join("outputs", server_name, "claw_monitor", "backgrounds")) # todo uncomment
output_dir_bkg = os.path.join('/static/miri1/outputs', "claw_monitor", "backgrounds") # todo remove line
server_name = get_config()['outputs'].split("outputs/", 1)[1]
output_dir_bkg = static(os.path.join("outputs", server_name, "claw_monitor", "backgrounds"))
fltrs = ['F070W', 'F090W', 'F115W', 'F150W', 'F200W', 'F277W', 'F356W', 'F444W']
bkg_plots = [os.path.join(output_dir_bkg, '{}_backgrounds.png'.format(fltr)) for fltr in fltrs]
bkg_rms_plots = [os.path.join(output_dir_bkg, '{}_backgrounds_rms.png'.format(fltr)) for fltr in fltrs]
Expand Down
103 changes: 57 additions & 46 deletions jwql/website/apps/jwql/templates/background_monitor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,53 +17,60 @@ <h1>{{ inst }} Background Monitor</h1>
<style>

/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
.tabs {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
.tabs button {
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
.tabs button:hover {
background-color: #ddd;
}

/* Change background color of active tabs */
.active-tab {
background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
/* Style the tab content */
.tab-content {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
/* Style the active tab content */
.active-content {
display: block;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>

<body>

<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Background')">Background</button>
<button class="tablinks" onclick="openCity(event, 'Background RMS')">Background RMS</button>
<button class="tablinks" onclick="openCity(event, 'Background vs Model')">Background vs Model</button>
<div class="tabs">
<button class="tab active-tab" onclick="displayPlots('Background')">Background</button>
<button class="tab" onclick="displayPlots('BackgroundRMS')">Background RMS</button>
<button class="tab" onclick="displayPlots('BackgroundModel')">Background vs Model</button>
</div>

<div id="Background" class="tabcontent">
<div id="Background" class="tab-content active-content">
<div width=100% id="bkg">
{% for plot in bkg_plots %}
<img src={{ plot | safe }} width="100%">
Expand All @@ -72,7 +79,7 @@ <h1>{{ inst }} Background Monitor</h1>
</div>
</div>

<div id="Background RMS" class="tabcontent">
<div id="BackgroundRMS" class="tab-content">
<div width=100% id="bkg_rms">
{% for plot in bkg_rms_plots %}
<img src={{ plot | safe }} width="100%">
Expand All @@ -81,7 +88,7 @@ <h1>{{ inst }} Background Monitor</h1>
</div>
</div>

<div id="Background vs Model" class="tabcontent">
<div id="BackgroundModel" class="tab-content">
<div width=100% id="bkg">
{% for plot in bkg_model_plots %}
<img src={{ plot | safe }} width="100%">
Expand All @@ -91,23 +98,27 @@ <h1>{{ inst }} Background Monitor</h1>
</div>

<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
function displayPlots(tabId) {
// Hide all tab contents
var tabContents = document.getElementsByClassName('tab-content');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}

// Remove 'active-tab' class from all tabs
var tabs = document.getElementsByClassName('tab');
for (var i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active-tab');
}

// Show the selected tab content and mark the tab as active
document.getElementById(tabId).style.display = 'block';
document.querySelector('[onclick="displayPlots(\'' + tabId + '\')"]').classList.add('active-tab');
}
</script>

</main>

</body>

</main>

{% endblock %}

0 comments on commit cbd03f2

Please sign in to comment.