add genomics filter

app/app.py

@@ -1,191 +1,13 @@
 import os
-import pickle
-import tempfile
-import uuid
-import dash_bootstrap_components as dbc
-import dash_uploader as du
-from dash import Dash
-from dash import Input
-from dash import Output
-from dash import clientside_callback
-from dash import dcc
-from dash import html
+import sys
+from callbacks import app
+from layouts import create_layout
 
 
-dbc_css = "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.min.css"
-app = Dash(__name__, external_stylesheets=[dbc.themes.UNITED, dbc_css, dbc.icons.FONT_AWESOME])
+sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
 
-# ------------------ Nav Bar ------------------ #
-color_mode_switch = html.Span(
-    [
-        dbc.Label(className="fa fa-moon", html_for="color-mode-switch"),
-        dbc.Switch(
-            id="color-mode-switch",
-            value=False,
-            className="d-inline-block ms-1",
-            persistence=True,
-        ),
-        dbc.Label(className="fa fa-sun", html_for="color-mode-switch"),
-    ],
-    className="p-2",
-)
-
-# Define the navigation bar
-navbar = dbc.Row(
-    dbc.Col(
-        dbc.NavbarSimple(
-            children=[
-                dbc.NavItem(dbc.NavLink("Doc", href="https://nplinker.github.io/nplinker/latest/")),
-                dbc.NavItem(
-                    dbc.NavLink("About", href="https://github.com/NPLinker/nplinker-webapp"),
-                ),
-                dbc.NavItem(
-                    color_mode_switch,
-                    className="mt-1 p-1",
-                ),
-            ],
-            brand="NPLinker Webapp",
-            color="primary",
-            className="p-3 mb-2",
-            dark=True,
-        ),
-    ),
-)
-
-# ------------------ Uploader ------------------ #
-# Configure the upload folder
-TEMP_DIR = tempfile.mkdtemp()
-du.configure_upload(app, TEMP_DIR)
-
-uploader = html.Div(
-    [
-        dbc.Row(
-            dbc.Col(
-                du.Upload(
-                    id="dash-uploader",
-                    text="Import Data",
-                    text_completed="Uploaded: ",
-                    filetypes=["pkl", "pickle"],
-                    upload_id=uuid.uuid1(),  # Unique session id
-                    cancel_button=True,
-                    max_files=1,
-                ),
-            )
-        ),
-        dbc.Row(
-            dbc.Col(
-                html.Div(children="No file uploaded", id="dash-uploader-output", className="p-4"),
-                className="d-flex justify-content-center",
-            )
-        ),
-        dcc.Store(id="file-store"),  # Store to keep the file contents
-    ],
-    className="p-5 ml-5 mr-5",
-)
-
-# ------------------ Tabs ------------------ #
-# gm tab content
-gm_content = dbc.Row(
-    dbc.Col(
-        dbc.Card(
-            dbc.CardBody([html.Div(id="file-content-gm")]),
-        )
-    )
-)
-# mg tab content
-mg_content = dbc.Row(
-    dbc.Col(
-        dbc.Card(
-            dbc.CardBody([html.Div(id="file-content-mg")]),
-        )
-    ),
-)
-# tabs
-tabs = dbc.Row(
-    dbc.Col(
-        dbc.Tabs(
-            [
-                dbc.Tab(
-                    gm_content,
-                    label="Genomics -> Metabolomics",
-                    activeTabClassName="fw-bold",
-                    disabled=True,
-                    id="gm-tab",
-                    className="disabled-tab",
-                ),
-                dbc.Tab(
-                    mg_content,
-                    label="Metabolomics -> Genomics",
-                    activeTabClassName="fw-bold",
-                    disabled=True,
-                    id="mg-tab",
-                    className="disabled-tab",
-                ),
-            ],
-        ),
-    ),
-    className="p-5",
-)
-
-# ------------------ App Layout ------------------ #
-app.layout = dbc.Container([navbar, uploader, tabs], fluid=True, className="p-0")
-
-# ------------------ Callbacks------------------ #
-clientside_callback(
-    """
-    (switchOn) => {
-       document.documentElement.setAttribute('data-bs-theme', switchOn ? 'light' : 'dark');
-       return window.dash_clientside.no_update
-    }
-    """,
-    Output("color-mode-switch", "id"),
-    Input("color-mode-switch", "value"),
-)
-
-
-@du.callback(
-    id="dash-uploader",
-    output=[Output("dash-uploader-output", "children"), Output("file-store", "data")],
-)
-def upload_data(status: du.UploadStatus):  # noqa: D103
-    if status.is_completed:
-        latest_file = status.latest_file
-        with open(status.latest_file, "rb") as f:
-            pickle.load(f)
-        return (
-            f"Successfully uploaded: {os.path.basename(latest_file)} [{round(status.uploaded_size_mb, 2)} MB]",
-            str(latest_file),
-        )
-    return "No file uploaded", None
-
-
-@app.callback(
-    [Output("gm-tab", "disabled"), Output("mg-tab", "disabled")],
-    [Input("file-store", "data")],
-    prevent_initial_call=True,
-)
-def disable_tabs(file_name):  # noqa: D103
-    if file_name is None:
-        # Disable the tabs
-        return True, True
-    # Enable the tabs
-    return False, False
-
-
-# Define another callback to access the stored file path and read the file
-@app.callback(
-    [Output("file-content-gm", "children"), Output("file-content-mg", "children")],
-    [Input("file-store", "data")],
-)
-def display_file_contents(file_path):  # noqa: D103
-    if file_path is not None:
-        with open(file_path, "rb") as f:
-            data = pickle.load(f)
-        # Process and display the data as needed
-        content = f"File contents: {data[0][:2]}"
-        return content, content  # Display same content in both tabs
-    return "No data available", "No data available"
 
+app.layout = create_layout()
 
 if __name__ == "__main__":
     app.run_server(debug=True)

app/assets/style.css

@@ -8,4 +8,29 @@
 
 .nav-tabs .nav-item .nav-link.disabled {
     color: #888888 !important;  /* Set your desired color here */
+}
+
+.btn-primary {
+    /* Use theme color or styles explicitly */
+    background-color: #FF6E42 !important; /* Primary color in the UNITED theme */
+    border-color: #f19e85 !important;
+}
+
+.btn-primary:hover {
+    background-color: #e0400f !important; /* Hover color */
+    border-color: #f19e85 !important;
+}
+
+.btn-primary:active {
+    background-color: #e0400f !important;
+    border-color: #f19e85 !important;
+}
+
+.btn-primary:focus {
+    box-shadow: 0 0 0 0.2rem #e0400f !important; /* Focus outline color */
+    border-color: #f19e85 !important; /* Focus border color */
+}
+
+.custom-textinput .mantine-TextInput-input:focus {
+    border-color: #FF6E42 !important; /* Customize border color */
 }