the layout of the base dash application was built

.gitignore

@@ -144,6 +144,12 @@ cython_debug/
 #lock fle with current dependencies
 poetry.lock
 
+/.github
+
 # jupyter tests
 tech_tests.ipynb
-/home_tests
+/home_tests
+/pyquac/ddd.csv
+/pyquac/jyp_app.ipynb
+/examples/random_test.ipynb
+/.vscode

pyproject.toml

@@ -31,6 +31,8 @@ pytest-clarity = "^1.0.1"
 notebook = "^6.4.12"
 jupyter = "^1.0.0"
 pydantic = "^1.10.2"
+pylint = "2.13.9"
+black = "^22.10.0"
 
 [build-system]
 requires = ["poetry-core>=1.0.0"]

pyquac/components/__init__.py

@@ -0,0 +1,5 @@
+# pull in components from files in the current directory to make imports cleaner
+
+from .navbar import navbar
+from .sidebar import sidebar, content
+from .property_nav import property_nav

pyquac/components/heatmap.py

@@ -0,0 +1,94 @@
+"""
+This file is for creating a graph layout
+"""
+
+from dash.dependencies import Input, Output
+import plotly.graph_objects as go
+from dash import dcc, callback
+
+
+# def figure_layout(data, cmap):
+#     def define_figure(data, cmap):
+#         fig = go.Figure(
+#             data=go.Heatmap(
+#                 z=data.iloc[:, 2], x=data.iloc[:, 0], y=data.iloc[:, 1], colorscale=cmap
+#             )
+#         )
+#         return fig
+
+#     figure = dcc.Graph(id="heatmap", figure=define_figure(data, cmap))
+#     return figure
+
+GRAPH_STYLE = {
+    "position": "fixed",
+    "top": "100px",
+    "left": "16rem",
+    "bottom": 0,
+    "width": "45rem",
+    "height": "37rem",
+    # "z-index": 1,
+    "overflow-x": "hidden",
+    "transition": "all 0.5s",
+    # "transition-delay": "width 500ms",
+    # "transition-property": "margin-right",
+    # "padding": "0.5rem 1rem",
+}
+
+GRAPH_HIDEN = {
+    "position": "fixed",
+    "top": "100px",
+    "left": 0,
+    "bottom": 0,
+    "width": "70rem",
+    "height": "37rem",
+    # "z-index": 1,
+    "overflow-x": "hidden",
+    "transition": "all 0.5s",
+    "transition-delay": "500ms",
+    # "transition-property": "margin-right",
+    # "padding": "0.5rem 1rem",
+}
+
+
+def figure_layout(data):
+    """constructor for heatmap layout
+
+    Args:
+        data (pandas DataFrame): DataFrame with the columns in the following order: [x, y, z]
+    """
+
+    def define_figure(data):
+        fig = go.Figure(
+            data=go.Heatmap(z=data.iloc[:, 2], x=data.iloc[:, 0], y=data.iloc[:, 1])
+        )
+        fig.update_layout()
+        return fig
+
+    figure = dcc.Graph(id="heatmap", figure=define_figure(data), style=GRAPH_STYLE)
+    return figure
+
+
+@callback(
+    Output("heatmap", "style"),
+    Input("btn_sidebar", "n_clicks"),
+    Input("side_click", "data"),
+)
+def toggle_graph(n, nclick):
+    """function to hide and reveal sidebar
+
+    Args:
+        n (int): _description_
+        nclick (int): _description_
+
+    Returns:
+        dict: style objects
+    """
+    if n:
+        if nclick == "SHOW":
+            graph_style = GRAPH_STYLE
+        else:
+            graph_style = GRAPH_HIDEN
+    else:
+        graph_style = GRAPH_STYLE
+
+    return graph_style

pyquac/components/navbar.py

@@ -0,0 +1,103 @@
+# notes
+"""
+This file is for creating a navigation bar that will sit at the top of your application.
+Dash Bootstrap Components documentation linked below:
+https://dash-bootstrap-components.opensource.faculty.ai/docs/components/navbar/
+"""
+
+from dash.dependencies import Input, Output
+from dash import html
+from dash import callback
+import dash_bootstrap_components as dbc
+
+from pyquac.settings import settings
+
+APP_LOGO = settings.app_logo
+
+########################## Navbar ##########################
+# Input
+COLLAPSE = html.Div(
+    [
+        dbc.Button(
+            [html.I(className="fa fa-align-justify")],
+            id="btn_sidebar",
+            className="offset-2",
+            n_clicks=0,
+        ),
+    ]
+)
+
+LOGO = html.A(
+    dbc.Row(
+        [
+            dbc.Col(html.Img(src=APP_LOGO, height="35px")),
+            dbc.Col(dbc.NavbarBrand(settings.app_name, className="ms-2")),
+        ],
+        align="start",
+        className="g-0",
+    ),
+    href=settings.app_link,
+    style={"textDecoration": "none", "margin-left": "1rem"},
+)
+
+ABOUT = dbc.NavItem(
+    html.Div(
+        [
+            dbc.NavLink("About", href="/", id="about-popover", active=True),
+            dbc.Popover(
+                id="about",
+                is_open=False,
+                target="about-popover",
+                children=[
+                    dbc.PopoverHeader("How it Works"),
+                    dbc.PopoverBody("Some text"),
+                ],
+            ),
+        ]
+    )
+)
+
+# git_link = dcc.Clipboard(title="copy link", content="https://github.com/ikaryss/pyquac")
+DROPDOWN = dbc.DropdownMenu(
+    label="Links",
+    in_navbar=True,
+    children=[
+        dbc.DropdownMenuItem(
+            [html.I(className="fa fa-github"), " Code"],
+            href=settings.app_github_url,
+            target="_blank",
+        ),
+    ],
+    color="primary",
+)
+
+navbar = dbc.Navbar(
+    class_name="nav nav-pills",
+    children=[COLLAPSE, LOGO, ABOUT, DROPDOWN],
+    color="primary",
+    dark=True,
+    expand="sm",
+)
+
+# Callback
+@callback(
+    Output(component_id="about", component_property="is_open"),
+    Output(component_id="about-popover", component_property="active"),
+    Input(component_id="about-popover", component_property="n_clicks"),
+    Input("about", "is_open"),
+    Input("about-popover", "active"),
+)
+def about_popover(n, is_open, active):
+    """toggle about popover
+
+    Args:
+        n (int): number of clicks
+        is_open (bool): current state
+        active (bool): _description_
+
+    Returns:
+        tuple(bool): status flip
+    """
+    if n:
+        return not is_open, active
+    return is_open, active

pyquac/components/property_nav.py

@@ -0,0 +1,89 @@
+# notes
+"""
+This file is for creating a property nav that will sit under main navigation bar.
+Dash Bootstrap Components documentation linked below:
+https://dash-bootstrap-components.opensource.faculty.ai/docs/components/nav/
+"""
+
+from dash.dependencies import Input, Output
+from dash import callback
+import dash_bootstrap_components as dbc
+
+PROPERTY_NAV_STYLE = {
+    "position": "fixed",
+    # "top": "70px",
+    "left": "16rem",
+    # "bottom": 0,
+    # "width": "16rem",
+    # "height": "100%",
+    "z-index": 1,
+    "overflow-x": "hidden",
+    "transition": "all 0.5s",
+    "padding": "0.5rem 1rem",
+}
+
+PROPERTY_NAV_HIDEN = {
+    "position": "fixed",
+    # "top": "70px",
+    "left": 0,
+    # "bottom": 0,
+    # "width": "16rem",
+    # "height": "100%",
+    "z-index": 1,
+    "overflow-x": "hidden",
+    "transition": "all 0.5s",
+    "padding": "0.5rem 1rem",
+}
+property_nav = dbc.Nav(
+    [
+        dbc.NavItem(dbc.Label("Status")),
+        dbc.NavItem(
+            dbc.Spinner(color="danger", type="grow", size="sm"),
+            style={"margin-left": "0.5rem"},
+        ),
+        dbc.NavItem(
+            dbc.Label("Heatmap updating"),
+            style={"margin-left": "2rem"},
+        ),
+        dbc.NavItem(
+            dbc.Checklist(
+                options=[
+                    {"label": "Pause", "value": 1},
+                ],
+                value=[],
+                id="switches-inline-input",
+                inline=True,
+                switch=True,
+            ),
+            style={"margin-left": "0.5rem"},
+        ),
+    ],
+    id="property-nav",
+    style=PROPERTY_NAV_STYLE,
+)
+
+
+@callback(
+    Output("property-nav", "style"),
+    Input("btn_sidebar", "n_clicks"),
+    Input("side_click", "data"),
+)
+def toggle_nav(n, nclick):
+    """function to hide and reveal sidebar
+
+    Args:
+        n (int): _description_
+        nclick (int): _description_
+
+    Returns:
+        dict: style objects
+    """
+    if n:
+        if nclick == "SHOW":
+            nav_style = PROPERTY_NAV_STYLE
+        else:
+            nav_style = PROPERTY_NAV_HIDEN
+    else:
+        nav_style = PROPERTY_NAV_STYLE
+
+    return nav_style