PyCafe - Dash - Exploring James Webb Space Telescope Images

assets/
app.py
dashAgGridComponentFunctions.js
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
# check out https://dash.plotly.com/ for documentation
# And check out https://py.cafe/maartenbreddels for more examples
import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output
import pandas as pd
import dash_bootstrap_components as dbc

webb_stephans_quintet = "https://user-images.githubusercontent.com/72614349/179115663-71578706-1ab5-45a5-b809-812c7c3028a7.jpg"
webb_deep_field = "https://user-images.githubusercontent.com/72614349/179115668-2630e3e4-3a9f-4c88-9494-3412e606450a.jpg"
webb_southern_nebula = "https://user-images.githubusercontent.com/72614349/179115670-ef5bc561-d957-4e88-82dc-53ca53541b04.jpg"
webb_carina = "https://user-images.githubusercontent.com/72614349/179115673-15eaccb9-d17d-4667-84fb-e0a46fd444e8.jpg"


data_dict = {
    "name": ["Deep Field", "Southern Nebula", "Stephans Quintet", "Carina Nebula"],
    "img": [webb_deep_field, webb_southern_nebula, webb_stephans_quintet, webb_carina],
    "more_info": [
        "[James Webb Space Telescope First Images](https://www.nasa.gov/image-feature/goddard/2022/nasa-s-webb-delivers-deepest-infrared-image-of-universe-yet)",
        "[JWST -A dying star](https://www.nasa.gov/image-feature/goddard/2022/nasa-s-webb-captures-dying-star-s-final-performance-in-fine-detail)",
        "[JWST - Galexy evolution and black holes](https://www.nasa.gov/image-feature/goddard/2022/nasa-s-webb-sheds-light-on-galaxy-evolution-black-holes)",
        "[JWST Birth of a star](https://www.nasa.gov/image-feature/goddard/2022/nasa-s-webb-reveals-cosmic-cliffs-glittering-landscape-of-star-birth)",
    ],
}
df = pd.DataFrame(data_dict)

print(df.head())

columnDefs = [
    {
        "headerName": "Thumbnail",
        "field": "img",
        "cellRenderer": "ImgThumbnail",
        "width": 100,
    },
    {
        "headerName": "Image Name",
        "field": "name",
    },
    {"headerName": "More Info", "field": "more_info", "cellRenderer": "markdown"},
]


grid = dag.AgGrid(
    id="custom-component-img-grid",
    columnDefs=columnDefs,
    rowData=df.to_dict("records"),
    dashGridOptions={"rowHeight": 100},
    style={"height": 475},
    columnSize="sizeToFit",
)


app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB])

app.layout = html.Div(
    [
        dcc.Markdown(
            "Example of cellRenderer with custom Image component. Click on Thumbnail to see full size Image"
        ),
        grid,
        dbc.Modal(id="custom-component-img-modal", size="xl"),
    ],
    style={"margin": 20},
)


@app.callback(
    Output("custom-component-img-modal", "is_open"),
    Output("custom-component-img-modal", "children"),
    Input("custom-component-img-grid", "cellRendererData"),
)
def show_change(data):
    if data:
        return True, html.Img(src=data["value"])
    return False, None


if __name__ == "__main__":
    app.run_server(debug=True)
Py.Cafe

dash-jwst-images

Exploring James Webb Space Telescope Images
