From 9bc98a11cc1100dc094b935e8e52d1dde00f739a Mon Sep 17 00:00:00 2001 From: Carifio24 Date: Fri, 3 Jan 2025 11:32:22 -0500 Subject: [PATCH 01/17] Add colors file and use these color constants in slider and stage 4. --- src/hubbleds/colors.py | 2 ++ src/hubbleds/components/id_slider/__init__.py | 6 ++++-- src/hubbleds/pages/04-explore-data/__init__.py | 5 +++-- 3 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 src/hubbleds/colors.py diff --git a/src/hubbleds/colors.py b/src/hubbleds/colors.py new file mode 100644 index 000000000..9684efc8f --- /dev/null +++ b/src/hubbleds/colors.py @@ -0,0 +1,2 @@ +STUDENT_HIGHLIGHT_COLOR = "#FB5607" +CLASS_COLOR = "#3A86FF" diff --git a/src/hubbleds/components/id_slider/__init__.py b/src/hubbleds/components/id_slider/__init__.py index b39720f23..064378972 100644 --- a/src/hubbleds/components/id_slider/__init__.py +++ b/src/hubbleds/components/id_slider/__init__.py @@ -4,6 +4,8 @@ import solara from solara.alias import rv +from hubbleds.colors import STUDENT_HIGHLIGHT_COLOR, CLASS_COLOR + # NB: I didn't use any of the built-in Solara sliders since none of them really fit our # use case. Since we often have duplicate values, the only slider that would really work # is SliderValue, but that doesn't allow all of the customization options that we need. @@ -18,8 +20,8 @@ def IdSlider(gjapp, id_component, value_component, on_id, - default_color="#3A86FF", - highlight_color="#FB5607", + default_color=CLASS_COLOR, + highlight_color=STUDENT_HIGHLIGHT_COLOR, highlight_ids=None, ): diff --git a/src/hubbleds/pages/04-explore-data/__init__.py b/src/hubbleds/pages/04-explore-data/__init__.py index d1628ca25..9fcfcad49 100644 --- a/src/hubbleds/pages/04-explore-data/__init__.py +++ b/src/hubbleds/pages/04-explore-data/__init__.py @@ -12,6 +12,7 @@ from typing import Dict, List, Tuple from cosmicds.components import ScaffoldAlert, StateEditor, ViewerLayout +from hubbleds.colors import CLASS_COLOR, STUDENT_HIGHLIGHT_COLOR from hubbleds.components import DataTable, HubbleExpUniverseSlideshow, LineDrawViewer, PlotlyLayerToggle from hubbleds.state import LOCAL_STATE, GLOBAL_STATE, StudentMeasurement, get_multiple_choice, get_free_response, mc_callback, fr_callback from hubbleds.viewers.hubble_scatter_viewer import HubbleScatterView @@ -130,7 +131,7 @@ def _on_class_data_loaded(class_data_points: List[StudentMeasurement]): if not class_data.components: class_data = empty_data_from_model_class(StudentMeasurement, label="Stage 4 Class Data") class_data = GLOBAL_STATE.value.add_or_update_data(class_data) - class_data.style.color = "#3A86FF" + class_data.style.color = CLASS_COLOR class_data.style.alpha = 1 class_data.style.markersize = 10 @@ -395,7 +396,7 @@ def _on_marker_update(marker): with rv.Col(class_="no-padding"): if COMPONENT_STATE.value.current_step_between(Marker.tre_dat1, Marker.sho_est2): with solara.Columns([3,9], classes=["no-padding"]): - colors = ("#3A86FF", "#FB5607") + colors = (CLASS_COLOR, STUDENT_HIGHLIGHT_COLOR) sizes = (8, 12) with rv.Col(class_="no-padding"): From 4d3024b9d16b0cb99d545c1e831309383e171d63 Mon Sep 17 00:00:00 2001 From: Pat Udomprasert Date: Mon, 6 Jan 2025 18:09:11 -0500 Subject: [PATCH 02/17] rename file and add more colors --- src/hubbleds/colors.py | 2 -- src/hubbleds/viewer_marker_colors.py | 20 ++++++++++++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) delete mode 100644 src/hubbleds/colors.py create mode 100644 src/hubbleds/viewer_marker_colors.py diff --git a/src/hubbleds/colors.py b/src/hubbleds/colors.py deleted file mode 100644 index 9684efc8f..000000000 --- a/src/hubbleds/colors.py +++ /dev/null @@ -1,2 +0,0 @@ -STUDENT_HIGHLIGHT_COLOR = "#FB5607" -CLASS_COLOR = "#3A86FF" diff --git a/src/hubbleds/viewer_marker_colors.py b/src/hubbleds/viewer_marker_colors.py new file mode 100644 index 000000000..d3f2a724c --- /dev/null +++ b/src/hubbleds/viewer_marker_colors.py @@ -0,0 +1,20 @@ +GENERIC_COLOR = "#555555" +LIGHT_GENERIC_COLOR = "#888888" +MY_DATA_COLOR = "#EC7000" +MY_CLASS_COLOR = "#0067BB" +OTHER_CLASSES_COLOR = "#FF006E" +OTHER_STUDENTS_COLOR = "#00A598" +HUBBLE_1929_COLOR = "#FFBE0B" +HST_KEY_COLOR = "#CC6677" +H_ALPHA_COLOR = "#D01D00" +GENERIC_COLOR_NAME = "gray" +LIGHT_GENERIC_COLOR_NAME = "light gray" +MY_DATA_COLOR_NAME = "orange" +MY_CLASS_COLOR_NAME = "blue" +OTHER_CLASSES_COLOR_NAME = "pink" +OTHER_STUDENTS_COLOR_NAME = "teal" +HUBBLE_1929_COLOR_NAME = "yellow" +HSTKEY_COLOR_NAME = "rose" +H_ALPHA_COLOR_NAME = "red" + + From c9d6f340e9063d45debae0d2bb0c0d3e96ce3787 Mon Sep 17 00:00:00 2001 From: Pat Udomprasert Date: Mon, 6 Jan 2025 18:10:10 -0500 Subject: [PATCH 03/17] remove unneeded button color specification (not related this this branch) --- .../components/doppler_slideshow/SlideshowDopplerCalc5.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hubbleds/components/doppler_slideshow/SlideshowDopplerCalc5.vue b/src/hubbleds/components/doppler_slideshow/SlideshowDopplerCalc5.vue index 6b54c3ec1..ae582da09 100644 --- a/src/hubbleds/components/doppler_slideshow/SlideshowDopplerCalc5.vue +++ b/src/hubbleds/components/doppler_slideshow/SlideshowDopplerCalc5.vue @@ -900,7 +900,6 @@ JupyterApplication: **{k: np.asarray([r[k] for r in example_seed_data if r['measurement_number'] == 'first']) for k in example_seed_data[0].keys()} ) - first.style.color = "#C94456" + first.style.color = MY_CLASS_COLOR gjapp.data_collection.append(first) second = Data(label = EXAMPLE_GALAXY_SEED_DATA + '_second', **{k: np.asarray([r[k] for r in example_seed_data if r['measurement_number'] == 'second']) for k in example_seed_data[0].keys()} ) - second.style.color = "#4449C9" + second.style.color = MY_CLASS_COLOR gjapp.data_collection.append(second) link_seed_data(gjapp) @@ -204,11 +205,11 @@ def add_example_measurements_to_glue(): LOCAL_STATE.value.example_measurements, label=EXAMPLE_GALAXY_MEASUREMENTS, ) - example_measurements_glue.style.color = "red" + example_measurements_glue.style.color = MY_DATA_COLOR create_example_subsets(gjapp, example_measurements_glue) use_this = add_or_update_data(example_measurements_glue) - use_this.style.color = "red" + use_this.style.color = MY_DATA_COLOR link_example_seed_and_measurements(gjapp) else: @@ -425,7 +426,7 @@ def create_dotplot_viewer(first_dotplot = True, show_which_meas = 'first', show_ ] # If the student has made a measurement, that is the 0th layer. layer0 = gjapp.data_collection[EXAMPLE_GALAXY_MEASUREMENTS] - zorder = [5, 1] + zorder = [1,5] if ignore_full_meas_data: ignore.append(gjapp.data_collection[EXAMPLE_GALAXY_MEASUREMENTS]) if show_which_meas == 'second': # ignore the first @@ -477,12 +478,12 @@ def _on_click_callback(point): component_id=DB_VELOCITY_FIELD, vertical_line_visible=show_synced_lines.value, #COMPONENT_STATE.value.current_step_between(Marker.dot_seq2, Marker.dot_seq6), line_marker_at=sync_velocity_line, - line_marker_color='green' if show_synced_lines.value else 'green', + line_marker_color=LIGHT_GENERIC_COLOR, on_click_callback=_on_click_callback, unit="km / s", x_label="Velocity (km/s)", - y_label="Number", - zorder=zorder, + y_label="Count", + zorder=[1,5], nbin=74, x_bounds=dotplot_bounds, reset_bounds=dotplot_reset_bounds, @@ -1008,38 +1009,16 @@ def selected_galaxy_index(): data=tut_viewer_data, component_id=DB_VELOCITY_FIELD, vertical_line_visible=False, + line_marker_color=LIGHT_GENERIC_COLOR, unit="km / s", x_label="Velocity (km/s)", - y_label="Number" + y_label="Count" ), event_tutorial_finished=lambda _: dotplot_tutorial_finished.set( True ), ) - - # def create_dotplot_viewer(): - # if EXAMPLE_GALAXY_MEASUREMENTS in gjapp.data_collection: - # viewer_data = [ - # gjapp.data_collection[EXAMPLE_GALAXY_MEASUREMENTS], - # gjapp.data_collection[EXAMPLE_GALAXY_SEED_DATA], - # ] - # else: - # viewer_data = [gjapp.data_collection[EXAMPLE_GALAXY_SEED_DATA]] - # return DotplotViewer(gjapp, - # data=viewer_data, - # component_id=DB_VELOCITY_FIELD, - # vertical_line_visible=True, #COMPONENT_STATE.value.current_step_between(Marker.dot_seq2, Marker.dot_seq6), - # line_marker_at=sync_velocity_line, - # on_click_callback=lambda point: sync_velocity_line.set(point.xs[0]), - # unit="km / s", - # x_label="Velocity (km/s)", - # y_label="Number", - # zorder=[5,1], - # nbin=75, - # x_bounds = dotplot_bounds, - # reset_bounds = dotplot_reset_bounds.value - # ) # Dot Plot 1st measurement row if COMPONENT_STATE.value.current_step_between(Marker.int_dot1, Marker.dot_seq14): # TODO: Change this back to dot_seq14 if we put back 2nd galaxy measurement diff --git a/src/hubbleds/pages/03-distance-measurements/__init__.py b/src/hubbleds/pages/03-distance-measurements/__init__.py index dd9de9353..1963d5584 100644 --- a/src/hubbleds/pages/03-distance-measurements/__init__.py +++ b/src/hubbleds/pages/03-distance-measurements/__init__.py @@ -15,7 +15,11 @@ ) from cosmicds.logger import setup_logger from cosmicds.state import BaseState, BaseLocalState - +from hubbleds.viewer_marker_colors import ( + MY_DATA_COLOR, + MY_CLASS_COLOR, + LIGHT_GENERIC_COLOR +) from hubbleds.base_component_state import ( transition_next, @@ -194,13 +198,13 @@ def _glue_setup() -> JupyterApplication: **{k: asarray([r[k] for r in example_seed_data if r['measurement_number'] == 'first']) for k in example_seed_data[0].keys()} ) - first.style.color = "#C94456" + first.style.color = MY_CLASS_COLOR gjapp.data_collection.append(first) second = Data(label = EXAMPLE_GALAXY_SEED_DATA + '_second', **{k: asarray([r[k] for r in example_seed_data if r['measurement_number'] == 'second']) for k in example_seed_data[0].keys()} ) - second.style.color = "#4449C9" + second.style.color = MY_CLASS_COLOR gjapp.data_collection.append(second) link_seed_data(gjapp) @@ -304,11 +308,11 @@ def add_example_measurements_to_glue(): if len(LOCAL_STATE.value.example_measurements) > 0: logger.info(f'has {len(LOCAL_STATE.value.example_measurements)} example measurements') example_measurements_glue = models_to_glue_data(LOCAL_STATE.value.example_measurements, label=EXAMPLE_GALAXY_MEASUREMENTS) - example_measurements_glue.style.color = "red" + example_measurements_glue.style.color = MY_DATA_COLOR create_example_subsets(gjapp, example_measurements_glue) use_this = add_or_update_data(example_measurements_glue) - use_this.style.color = "red" + use_this.style.color = MY_DATA_COLOR link_example_seed_and_measurements(gjapp) else: @@ -966,10 +970,11 @@ def set_distance_line(points): component_id="est_dist_value", vertical_line_visible=show_dotplot_lines, line_marker_at=Ref(COMPONENT_STATE.fields.distance_line), + line_marker_color=LIGHT_GENERIC_COLOR, on_click_callback=set_angular_size_line, unit="Mpc", x_label="Distance (Mpc)", - y_label="Number", + y_label="Count", zorder=[5,1], x_bounds=dist_dotplot_range, hide_layers=ignore @@ -984,10 +989,11 @@ def set_distance_line(points): component_id="ang_size_value", vertical_line_visible=show_dotplot_lines, line_marker_at=Ref(COMPONENT_STATE.fields.angular_size_line), + line_marker_color=LIGHT_GENERIC_COLOR, on_click_callback=set_distance_line, unit="arcsec", x_label="Angular Size (arcsec)", - y_label="Number", + y_label="Count", zorder=[5,1], x_bounds=ang_size_dotplot_range, hide_layers=ignore diff --git a/src/hubbleds/pages/04-explore-data/__init__.py b/src/hubbleds/pages/04-explore-data/__init__.py index 9fcfcad49..69a5bb049 100644 --- a/src/hubbleds/pages/04-explore-data/__init__.py +++ b/src/hubbleds/pages/04-explore-data/__init__.py @@ -12,7 +12,7 @@ from typing import Dict, List, Tuple from cosmicds.components import ScaffoldAlert, StateEditor, ViewerLayout -from hubbleds.colors import CLASS_COLOR, STUDENT_HIGHLIGHT_COLOR +from hubbleds.viewer_marker_colors import MY_DATA_COLOR, MY_CLASS_COLOR, GENERIC_COLOR from hubbleds.components import DataTable, HubbleExpUniverseSlideshow, LineDrawViewer, PlotlyLayerToggle from hubbleds.state import LOCAL_STATE, GLOBAL_STATE, StudentMeasurement, get_multiple_choice, get_free_response, mc_callback, fr_callback from hubbleds.viewers.hubble_scatter_viewer import HubbleScatterView @@ -96,7 +96,7 @@ def glue_setup() -> Tuple[JupyterApplication, Dict[str, CDSScatterView]]: "Velocity (km/hr)": [4, 8, 10], }) race_data = GLOBAL_STATE.value.add_or_update_data(race_data) - race_data.style.color = "#f00" + race_data.style.color = GENERIC_COLOR race_data.style.alpha = 1 race_data.style.markersize = 10 race_viewer.add_data(race_data) @@ -131,7 +131,7 @@ def _on_class_data_loaded(class_data_points: List[StudentMeasurement]): if not class_data.components: class_data = empty_data_from_model_class(StudentMeasurement, label="Stage 4 Class Data") class_data = GLOBAL_STATE.value.add_or_update_data(class_data) - class_data.style.color = CLASS_COLOR + class_data.style.color = MY_CLASS_COLOR class_data.style.alpha = 1 class_data.style.markersize = 10 @@ -396,7 +396,7 @@ def _on_marker_update(marker): with rv.Col(class_="no-padding"): if COMPONENT_STATE.value.current_step_between(Marker.tre_dat1, Marker.sho_est2): with solara.Columns([3,9], classes=["no-padding"]): - colors = (CLASS_COLOR, STUDENT_HIGHLIGHT_COLOR) + colors = (MY_CLASS_COLOR, MY_DATA_COLOR) sizes = (8, 12) with rv.Col(class_="no-padding"): diff --git a/src/hubbleds/pages/05-class-results-uncertainty/__init__.py b/src/hubbleds/pages/05-class-results-uncertainty/__init__.py index 6b465fde8..8730da652 100644 --- a/src/hubbleds/pages/05-class-results-uncertainty/__init__.py +++ b/src/hubbleds/pages/05-class-results-uncertainty/__init__.py @@ -26,6 +26,7 @@ from hubbleds.viewers.hubble_scatter_viewer import HubbleScatterView from .component_state import COMPONENT_STATE, Marker from hubbleds.remote import LOCAL_API +from hubbleds.viewer_marker_colors import MY_CLASS_COLOR, MY_DATA_COLOR, OTHER_CLASSES_COLOR, OTHER_STUDENTS_COLOR, GENERIC_COLOR from cosmicds.logger import setup_logger @@ -70,11 +71,11 @@ async def _write_component_state(): solara.lab.use_task(_write_component_state, dependencies=[COMPONENT_STATE.value]) - student_default_color = "#3A86FF" - student_highlight_color = "#FF5A00" + student_default_color = MY_CLASS_COLOR + student_highlight_color = MY_DATA_COLOR - class_default_color = "#FF006E" - class_highlight_color = "#3A86FF" + class_default_color = OTHER_CLASSES_COLOR + class_highlight_color = MY_CLASS_COLOR def _update_bins(viewers: Iterable[CDSHistogramView], _msg: Optional[NumericalDataChangedMessage]=None): props = ('hist_n_bin', 'hist_x_min', 'hist_x_max') @@ -179,7 +180,7 @@ def glue_setup() -> Tuple[JupyterApplication, Dict[str, PlotlyBaseView]]: layer_viewer.add_data(class_data) class_layer = layer_viewer.layers[1] class_layer.state.zorder = 1 - class_layer.state.color = "#3A86FF" + class_layer.state.color = MY_CLASS_COLOR class_layer.state.size = 8 class_layer.state.visible = False @@ -217,7 +218,7 @@ def glue_setup() -> Tuple[JupyterApplication, Dict[str, PlotlyBaseView]]: student_hist_viewer.state.x_att = class_summary_data.id['age_value'] student_hist_viewer.state.x_axislabel = "Age (Gyr)" student_hist_viewer.state.title = "My class ages (5 galaxies each)" - student_hist_viewer.layers[0].state.color = "#8338EC" + student_hist_viewer.layers[0].state.color = MY_CLASS_COLOR all_data = models_to_glue_data(all_measurements, label="All Measurements") all_data = GLOBAL_STATE.value.add_or_update_data(all_data) @@ -248,13 +249,13 @@ def glue_setup() -> Tuple[JupyterApplication, Dict[str, PlotlyBaseView]]: all_student_hist_viewer.state.x_att = student_summ_data.id['age_value'] all_student_hist_viewer.state.x_axislabel = "Age (Gyr)" all_student_hist_viewer.state.title = "All student ages (5 galaxies each)" - all_student_hist_viewer.layers[0].state.color = "#FFBE0B" + all_student_hist_viewer.layers[0].state.color = OTHER_STUDENTS_COLOR class_hist_viewer.add_data(all_class_summ_data) class_hist_viewer.state.x_att = all_class_summ_data.id['age_value'] class_hist_viewer.state.x_axislabel = "Age (Gyr)" class_hist_viewer.state.title = "All class ages (~100 galaxies each)" - class_hist_viewer.layers[0].state.color = "#619EFF" + class_hist_viewer.layers[0].state.color = OTHER_CLASSES_COLOR # This looks weird, and it kinda is! # The idea here is that the all students viewer will always have a wider range than the all classes viewer @@ -628,6 +629,7 @@ def update_class_slider_subset(id, highlighted): glue_data=[class_summary_data], units=["Gyr"], transform=round, + color=GENERIC_COLOR ) with rv.Col(): @@ -725,6 +727,7 @@ def update_class_slider_subset(id, highlighted): glue_data=hist_data, units=units, transform=round, + color=GENERIC_COLOR ) with rv.Col(): diff --git a/src/hubbleds/pages/06-prodata/__init__.py b/src/hubbleds/pages/06-prodata/__init__.py index 171d5b302..25adebd15 100644 --- a/src/hubbleds/pages/06-prodata/__init__.py +++ b/src/hubbleds/pages/06-prodata/__init__.py @@ -27,6 +27,11 @@ get_free_response, get_multiple_choice ) +from hubbleds.viewer_marker_colors import ( + MY_CLASS_COLOR, + HUBBLE_1929_COLOR, + HST_KEY_COLOR +) from ...utils import HST_KEY_AGE, models_to_glue_data, AGE_CONSTANT @@ -155,7 +160,7 @@ def show_class_data(viewer): if data not in viewer.state.layers_data: print('adding class data') data.style.markersize = 10 - data.style.color = '#FF6D00' + data.style.color = MY_CLASS_COLOR viewer.add_data(data) viewer.state.x_att = data.id['est_dist_value'] viewer.state.y_att = data.id['velocity_value'] @@ -168,7 +173,7 @@ def show_hubble1929_data(viewer): if data not in viewer.state.layers_data: print('adding Hubble 1929') data.style.markersize = 10 - data.style.color = '#D500F9' + data.style.color = HUBBLE_1929_COLOR viewer.add_data(data) viewer.state.x_att = data.id['Distance (Mpc)'] viewer.state.y_att = data.id['Tweaked Velocity (km/s)'] @@ -181,7 +186,7 @@ def show_hst_key_data(viewer): if data not in viewer.state.layers_data: print('adding HST key') data.style.markersize = 10 - data.style.color = '#AEEA00' + data.style.color = HST_KEY_COLOR viewer.add_data(data) viewer.state.x_att = data.id['Distance (Mpc)'] viewer.state.y_att = data.id['Velocity (km/s)'] From cc5999a018a4f76aca6a7f04c0516bae9afbbee5 Mon Sep 17 00:00:00 2001 From: Pat Udomprasert Date: Mon, 6 Jan 2025 18:31:46 -0500 Subject: [PATCH 05/17] color and formatting updates --- .../spectrum_viewer/spectrum_viewer.py | 95 ++++++++++++------- 1 file changed, 60 insertions(+), 35 deletions(-) diff --git a/src/hubbleds/components/spectrum_viewer/spectrum_viewer.py b/src/hubbleds/components/spectrum_viewer/spectrum_viewer.py index e4940314e..95d761c4b 100644 --- a/src/hubbleds/components/spectrum_viewer/spectrum_viewer.py +++ b/src/hubbleds/components/spectrum_viewer/spectrum_viewer.py @@ -1,12 +1,14 @@ from typing import Callable, Optional -import plotly.express as px +import plotly.graph_objects as go import reacton.ipyvuetify as rv import solara from hubbleds.state import GalaxyData from pandas import DataFrame from hubbleds.components.spectrum_viewer.plotly_figure import FigurePlotly from cosmicds.logger import setup_logger +from hubbleds.viewer_marker_colors import GENERIC_COLOR, H_ALPHA_COLOR, MY_DATA_COLOR, LIGHT_GENERIC_COLOR +from hubbleds.utils import PLOTLY_MARGINS from glue_plotly.common import DEFAULT_FONT @@ -30,6 +32,7 @@ def SpectrumViewer( spectrum_bounds: Optional[solara.Reactive[list[float]]] = None, on_spectrum_bounds_changed: Callable = lambda x: None, max_spectrum_bounds: Optional[solara.Reactive[list[float]]] = None, + spectrum_color: str = GENERIC_COLOR, ): logger.info("Creating SpectrumViewer") @@ -182,26 +185,24 @@ def _zoom_button_clicked(): logger.info('galaxy_data is None') return - fig = px.line(spec_data_task.value, x="wave", y="flux", - # template = "plotly_dark" if use_dark_effective else "plotly_white",) - template = "plotly_white", - # hover_data={"wave": False, "flux": False}, - # line_shape="hvh", # step line plot - ) - fig.update_traces(hovertemplate='Wavelength: %{x:0.0f} Å') # - fig.update_layout( - hoverlabel=dict( - font_size=16, - bgcolor="white" - ), - ) - - + fig = go.Figure() + fig.add_trace(go.Scatter( + x= spec_data_task.value["wave"], + y= spec_data_task.value["flux"], + line=dict( + color=spectrum_color, + width=2, + ), + mode='lines', + )) + fig.update_layout( + plot_bgcolor="white", font_family=DEFAULT_FONT, title_font_family=DEFAULT_FONT, - margin=dict(l=0, r=10, t=10, b=0), + margin=PLOTLY_MARGINS, yaxis=dict( + linecolor="black", fixedrange=True, title="Brightness", showgrid=False, @@ -209,33 +210,46 @@ def _zoom_button_clicked(): linewidth=1, mirror=True, title_font_family=DEFAULT_FONT, - titlefont_size=20, - tickfont_size=12 + titlefont_size=16, + tickfont_size=12, + ticks="outside", + ticklen=5, + tickwidth=1, + tickcolor="black", ), xaxis=dict( + linecolor="black", title="Wavelength (Angstroms)", showgrid=False, showline=True, linewidth=1, mirror=True, title_font_family=DEFAULT_FONT, - titlefont_size=20, + titlefont_size=16, tickfont_size=12, - hoverformat=".1f", + hoverformat=".0f", + ticks="outside", + ticklen=5, + tickwidth=1, + tickcolor="black", ticksuffix=" Å", ), showlegend=False, + hoverlabel=dict( + font_size=16, + bgcolor="white", + ), ) + # This is the line that appears when user first makes observed wavelength measurement fig.add_vline( x=obs_wave, - line_width=1, - line_color="red", - # annotation_text="1BASE", - # annotation_font_size=12, - # annotation_position="top right", + line_width=2, + line_color= MY_DATA_COLOR, visible=vertical_line_visible.value and obs_wave > 0.0 and spectrum_click_enabled, ) + + # Orange "Your Measurement" Marker Line & Label fig.add_shape( type='line', x0=obs_wave, @@ -244,28 +258,36 @@ def _zoom_button_clicked(): y1=0.2, xref="x", yref="paper", - line_color="red", + line_color= MY_DATA_COLOR, line_width=2, - fillcolor="red", + fillcolor= MY_DATA_COLOR, label={ "text": f"Your measurement", - "textposition": "top center", - "yanchor": "bottom", + "font": { + "color": MY_DATA_COLOR, + "family": "Arial, sans-serif", + "size": 14, + "weight":"bold" + }, + "textposition": "bottom right", + "xanchor": "left", + "yanchor": "top", "textangle": 0, - "padding": 35, }, visible=vertical_line_visible.value and obs_wave > 0.0 and not spectrum_click_enabled, ) + # Light gray measurement line if (marker_position is not None) and (not spectrum_click_enabled): fig.add_vline( x = marker_position.value, line_width = 2, - line_color = "green", + line_color = LIGHT_GENERIC_COLOR, visible = True, ) + # Red Observed H-alpha Marker Line fig.add_shape( editable=False, x0=galaxy_data.redshift_rest_wave_value - 1.5, @@ -274,11 +296,12 @@ def _zoom_button_clicked(): y1=0.99, yref="paper", # xref="x", - line_color="red", - fillcolor="red", + line_color=H_ALPHA_COLOR, + fillcolor=H_ALPHA_COLOR, ysizemode="scaled", ) + # Red Observed H-alpha Marker Label fig.add_annotation( x=galaxy_data.redshift_rest_wave_value + 7, y= 0.99, @@ -288,13 +311,14 @@ def _zoom_button_clicked(): font=dict( family="Arial, sans-serif", size=14, - color="red", + color=H_ALPHA_COLOR, weight="bold" ), xanchor="left", yanchor="top", ) + # Black Rest H-alpha Marker Line fig.add_shape( editable=False, type="line", @@ -313,6 +337,7 @@ def _zoom_button_clicked(): visible=1 in toggle_group_state.value, ) + # Black Rest H-alpha Marker Label fig.add_annotation( x=galaxy_data.rest_wave_value - 7, y= 0.99, From 368dec73217a40ecb9d46b41093f5ea135a19950 Mon Sep 17 00:00:00 2001 From: Pat Udomprasert Date: Mon, 6 Jan 2025 18:31:59 -0500 Subject: [PATCH 06/17] minor text edits --- .../guidelines/GuidelineDotSequence04a.vue | 3 +-- .../guidelines/GuidelineDotplotSeq1.vue | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/hubbleds/pages/01-spectra-&-velocity/guidelines/GuidelineDotSequence04a.vue b/src/hubbleds/pages/01-spectra-&-velocity/guidelines/GuidelineDotSequence04a.vue index 538f6efbd..054f12fec 100644 --- a/src/hubbleds/pages/01-spectra-&-velocity/guidelines/GuidelineDotSequence04a.vue +++ b/src/hubbleds/pages/01-spectra-&-velocity/guidelines/GuidelineDotSequence04a.vue @@ -8,8 +8,7 @@ >

- Notice that the Dot Plot has be set to show the velocity range - that corresponds to the Spectrum Viewer's wavelength range. + Notice that the Dot Plot has been set to show the velocity range that corresponds to the Spectrum Viewer's wavelength range.

As seen in the Dot Plot Tutorial, because we are looking diff --git a/src/hubbleds/pages/03-distance-measurements/guidelines/GuidelineDotplotSeq1.vue b/src/hubbleds/pages/03-distance-measurements/guidelines/GuidelineDotplotSeq1.vue index 15dbee4a4..8dc0dd9ac 100644 --- a/src/hubbleds/pages/03-distance-measurements/guidelines/GuidelineDotplotSeq1.vue +++ b/src/hubbleds/pages/03-distance-measurements/guidelines/GuidelineDotplotSeq1.vue @@ -20,7 +20,7 @@ Let's see how your measurement compares with a random subset of measured values from others who have completed this Data Story.

- This dot plot shows the distrubution of distances measured. + This dot plot shows the distribution of distances measured.

The red-orange dot shows your measurement. From 6ddb9124adb6519822a5ef05f3cef6e0955edde9 Mon Sep 17 00:00:00 2001 From: Pat Udomprasert Date: Mon, 6 Jan 2025 19:29:15 -0500 Subject: [PATCH 07/17] specify best fit galaxy color --- src/hubbleds/components/line_draw_viewer/LineDrawPlot.vue | 4 ++-- src/hubbleds/components/line_draw_viewer/line_draw_viewer.py | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/hubbleds/components/line_draw_viewer/LineDrawPlot.vue b/src/hubbleds/components/line_draw_viewer/LineDrawPlot.vue index cb7420dbd..e4ee5ea0c 100644 --- a/src/hubbleds/components/line_draw_viewer/LineDrawPlot.vue +++ b/src/hubbleds/components/line_draw_viewer/LineDrawPlot.vue @@ -1,7 +1,7 @@