Merge branch 'dev' of https://github.com/ferbsx/MPXRadar-frontend int…

…o dev
rki-mf1 · Dec 16, 2022 · 12c8197 · 12c8197
2 parents ec3196b + ee6e064
commit 12c8197
Show file tree

Hide file tree

Showing 25 changed files with 517 additions and 9 deletions.
diff --git a/app.py b/app.py
@@ -6,20 +6,49 @@
 app = Dash(__name__, use_pages=True)
 app.layout = html.Div(
     [
-        html.H1("MonkeyPox Radar"),
+        html.H1("MonkeyPox Radar", style={'display':'inline-block'}),
+
+        html.Img(src=r'assets/hpi_logo.png',alt='Img_HPI', style={'float':'right', 'height':'15%', 'width':'15%'}),
+        html.Img(src=r'assets/rki_logo.png',alt='Img_RKI', style={'float':'right', 'height':'15%', 'width':'15%'}),
+        html.Img(src=r'assets/DAKI-FWS_logo.png',alt='Img_DAKI-FWS', style={'float':'right', 'height':'15%', 'width':'15%'}),
+
+        html.Div("A genomic surveiillance dashboard for MonkeyPox."),
+        html.Br(),
         html.Div(
             [
                 html.Div(
                     dcc.Link(
-                        f"{page['name']} - {page['path']}", href=page["relative_path"]
+                        html.A(f"{page['name']}"), href=page["relative_path"], style={'color':'black', 'display':'inline-block'}
                     )
+                        #f"{page['name']}", href=page["relative_path"]
                 )
                 for page in dash.page_registry.values()
             ]
         ),
+        html.Br(),
+        html.Br(),
         dash.page_container,
+        html.Hr(),
+        html.Br(),
+        # style={'height':'99999999px;', 'width':'100%', 'bottom':'0', 'left':'0', 'position':'absolute'}
+        html.Footer([
+            html.A("About MPXRadar", href="About", style={'color':'black', 'display':'inline-block'}),
+            html.Div(children="Supported by:", style={'float':'right', "margin-right": "250px"}),
+            html.Br(),
+            html.A("Contact Us", href="Contact", style={'color':'black'}),
+            html.Br(),
+            html.A("Imprint", href="Home", style={'color':'black'}),
+            html.Br(),
+            html.A("App:", href="Tool", style={'color':'black'}),
+
+
+
+            html.Img(src=r'assets/denbi_cloud_logo.png',alt='Img_RKI', style={'float':'right', 'height':'15%', 'width':'15%'}),
+            html.Div(children="on the basis of a decision"),
+            html.Div(children="by the German Bundestag"),
+            html.Img(src=r'assets/Bundesministerium_für_Wirtschaft_und_Energie_Logo.svg.png',alt='Img_RKI', style={'float':'right', 'height':'15%', 'width':'15%'}),]),
     ]
 )
 
 if __name__ == "__main__":
-    app.run_server(debug=True, host="0.0.0.0")
+    app.run_server(debug=True, host="0.0.0.0")
diff --git a/assets/Alice Wittig.jpeg b/assets/Alice Wittig.jpeg
diff --git a/assets/Bundesministerium_für_Wirtschaft_und_Energie_Logo.svg.png b/assets/Bundesministerium_für_Wirtschaft_und_Energie_Logo.svg.png
diff --git a/assets/DAKI-FWS_logo.png b/assets/DAKI-FWS_logo.png
diff --git a/assets/Dr. Anna-Juliane Schmachtenberg.jpeg b/assets/Dr. Anna-Juliane Schmachtenberg.jpeg
diff --git a/assets/Dr. Stephan Fuchs.png b/assets/Dr. Stephan Fuchs.png
diff --git a/assets/Ferdous Nasri.jpeg b/assets/Ferdous Nasri.jpeg
diff --git a/assets/Injun Park.jpeg b/assets/Injun Park.jpeg
diff --git a/assets/Ivan Tunov.png b/assets/Ivan Tunov.png
diff --git a/assets/Pavlo Konoplev.png b/assets/Pavlo Konoplev.png
diff --git a/assets/Prof. Dr. Bernhard Renard.jpeg b/assets/Prof. Dr. Bernhard Renard.jpeg
diff --git a/assets/denbi_cloud_logo.png b/assets/denbi_cloud_logo.png
diff --git a/assets/download_icon.png b/assets/download_icon.png
diff --git a/assets/example_MutationsDisplayed.png b/assets/example_MutationsDisplayed.png
diff --git a/assets/example_ReferenceGenome.png b/assets/example_ReferenceGenome.png
diff --git a/assets/hpi_logo.png b/assets/hpi_logo.png
diff --git a/assets/info_icon.png b/assets/info_icon.png
diff --git a/assets/rki_logo.png b/assets/rki_logo.png
diff --git a/assets/style.css b/assets/style.css
@@ -0,0 +1,5 @@
+.responsive {
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+  }
diff --git a/pages/about.py b/pages/about.py
@@ -1,15 +1,162 @@
+import dash_bootstrap_components as dbc
 import dash
-from dash import html
+from dash import html, dcc
 
-dash.register_page(__name__)
+dash.register_page(__name__, path='/About')
 
 layout = html.Div(
     children=[
-        html.H1(children="This is our about page"),
+
+        html.H1(children="Project Description"),
+        html.Div(
+            children="""
+                        Monkeypox is an infectious disease caused by a smallpox virus, recently spreading in multiple countries with over 16,500 cases and declared a global emergency by the World Health Organization (citation).
+                        Normally, the virus is rarely observed outside of Africa, but in recent months it has occurred in over 11 countries in other continents [CITATION].
+                        This alarming behavior demands action and highlights the need for genomic surveillance and spatio-temporal analyses.
+                        Therefore, the Robert Koch Institute (RKI) together with the Hasso Platter Institute (HPI) joined forces to and adapted the tool covSonar - a database framework developed at the RKI for SARS-CoV-2 - to Monkeypox.
+                    """
+        ),
+
+        html.H1(children="Who are we?"),
+        dbc.Card(
+            [
+                dbc.CardImg(src="assets/Prof. Dr. Bernhard Renard.jpeg",
+                            top=True, style={"width": "238px", "height": "300px"}, className='align-self-center'),
+                dbc.CardBody(
+                    [
+                        html.P(
+                            "Prof. Dr. Bernhard Renard", className="card-title"
+                        ),
+                    ]
+                ),
+            ], style={"width": "15rem", "margin-left": "2rem", "margin-right": "5rem", 'display': 'inline-block'},),
+        dbc.Card(
+            [
+                dbc.CardImg(src="assets/Dr. Stephan Fuchs.png", top=True,
+                            style={"width": "238px", "height": "300px"}, className='align-self-center'),
+                dbc.CardBody(
+                    [
+                        html.P(
+                            "Dr. Stephan Fuchs", className="card-text"
+                        ),
+                    ]
+                ),
+            ], style={"width": "15rem", "margin-right": "5rem", 'display': 'inline-block'},),
+        dbc.Card(
+            [
+                dbc.CardImg(src="assets/Dr. Anna-Juliane Schmachtenberg.jpeg", top=True,
+                            style={"width": "238px", "height": "300px"}, className='align-self-center'),
+                dbc.CardBody(
+                    [
+                        html.P(
+                            "Dr. Anna-Juliane Schmachtenberg"
+                        ),
+                    ]
+                ),
+            ], style={"width": "15rem", "margin-right": "5rem", 'display': 'inline-block'},),
+        dbc.Card(
+            [
+                dbc.CardImg(src="assets/Alice Wittig.jpeg", top=True,
+                            style={"width": "238px", "height": "300px"}, className='align-self-center'),
+                dbc.CardBody(
+                    [
+                        html.P(
+                            "Alice Wittig"
+                        ),
+                    ]
+                ),
+            ], style={"width": "15rem", "margin-top": "1rem", "margin-left": "2rem", "margin-right": "5rem", 'display': 'inline-block'},),
+        dbc.Card(
+            [
+                dbc.CardImg(src="assets/Ferdous Nasri.jpeg", top=True,
+                            style={"width": "238px", "height": "300px"}, className='align-self-center'),
+                dbc.CardBody(
+                    [
+                        html.P(
+                            "Ferdous Nasri"
+                        ),
+                    ]
+                ),
+            ], style={"width": "15rem", "margin-top": "1rem", "margin-right": "5rem", 'display': 'inline-block'},),
+        dbc.Card(
+            [
+                dbc.CardImg(
+                    src="https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png", top=True, style={"width": "238px", "height": "300px"}, className='align-self-center'),
+                dbc.CardBody(
+                    [
+                        html.P(
+                            "Kunaphas Kongkitimanon"
+                        ),
+                    ]
+                ),
+            ], style={"width": "15rem", "margin-top": "1rem", "margin-right": "5rem", 'display': 'inline-block'},),
+        dbc.Card(
+            [
+                dbc.CardImg(
+                    src="https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png", top=True, style={"width": "238px", "height": "300px"}, className='align-self-center'),
+                dbc.CardBody(
+                    [
+                        html.P(
+                            "Jorge Sanchez-Cortes"
+                        ),
+                    ]
+                ),
+            ], style={"width": "15rem", "margin-top": "1rem", "margin-left": "2rem", "margin-right": "5rem", 'display': 'inline-block'},),
+        dbc.Card(
+            [
+                dbc.CardImg(src="assets/Injun Park.jpeg", top=True,
+                            style={"width": "238px", "height": "300px"}, className='align-self-center'),
+                dbc.CardBody(
+                    [
+                        html.P(
+                            "Injun Park"
+                        ),
+                    ]
+                ),
+            ], style={"width": "15rem", "margin-top": "1rem", "margin-right": "5rem", 'display': 'inline-block'},),
+        dbc.Card(
+            [
+                dbc.CardImg(src="assets/Ivan Tunov.png", top=True,
+                            style={"width": "238px", "height": "300px"}, className='align-self-center'),
+                dbc.CardBody(
+                    [
+                        html.P(
+                            "Ivan Tunov"
+                        ),
+                    ]
+                ),
+            ], style={"width": "15rem", "margin-top": "1rem", "margin-right": "5rem", 'display': 'inline-block'},),
+        dbc.Card(
+            [
+                dbc.CardImg(src="assets/Pavlo Konoplev.png", top=True,
+                            style={"width": "238px", "height": "300px"}, className='align-self-center'),
+                dbc.CardBody(
+                    [
+                        html.P(
+                            "Pavlo Konoplev"
+                        ),
+                    ]
+                ),
+            ], style={"width": "15rem", "margin-top": "1rem", "margin-left": "2rem", "margin-right": "5rem", 'display': 'inline-block'},),
+
+
+
+        html.H1(children="Data sources:"),
+        html.Div(
+            children="""
+                        ...
+                    """
+        ),
+
+        html.H1(children="Link to code:"),
+        dcc.Link(html.A('Link to Github'), href=(
+            'https://github.com/ferbsx/MPXRadar-frontend'), target='_blank'),
+
+        html.H1(children="Acknowledgements:"),
         html.Div(
             children="""
-                    This is our about page content.
-                """
+                        ...
+                    """
         ),
     ]
 )
diff --git a/pages/contact.py b/pages/contact.py
@@ -0,0 +1,29 @@
+import dash
+from dash import html
+
+dash.register_page(__name__, path="/Contact")
+
+layout = html.Div(
+    children=[
+        html.H1(children="Contact us"),
+        html.Div(
+            children="""
+                Please open an issue on our GitHub repository. if you find a bug or if something is unclear. 
+            """
+        ),
+        html.Br(),
+        html.Div(
+            children="""                
+                GitHub repository link: [github-repo-link] 
+            """
+        ),
+        html.Br(),
+        html.Div(
+            children="""
+                You can also email us using the following address: monkeyporadar-team@xx.xx
+            """
+        ),
+    ],
+
+),
+
diff --git a/pages/home.py b/pages/home.py
@@ -1,7 +1,7 @@
 import dash
 from dash import html
 
-dash.register_page(__name__, path="/")
+dash.register_page(__name__, path="/Home")
 
 layout = html.Div(
     children=[

diff --git a/pages/out.csv b/pages/out.csv
@@ -0,0 +1,10 @@
+COUNTRY,MUTATION,OCCURENCES
+Austria,I64K,352
+Egypt,I64K,8
+Germany,I64K,13190
+Israel,I64K,32
+Portugal,I64K,704
+Slovakia,I64K,352
+Switzerland,I64K,32
+United Kingdom,I64K,5816
+USA,I64K,6663