fix: various styling fixes

src/aind_qc_portal/panel/quality_control.py

@@ -7,7 +7,7 @@
 
 from aind_qc_portal.docdb.database import qc_from_id, qc_update_to_id
 from aind_qc_portal.panel.evaluation import QCEvalPanel
-from aind_qc_portal.utils import status_html, update_schema_version
+from aind_qc_portal.utils import status_html, update_schema_version, OUTER_STYLE
 
 
 class QCPanel(param.Parameterized):
@@ -157,12 +157,12 @@ def panel(self):
         self.modality_selector.param.watch(self._update_modality_filter, "value")
         self.stage_selector.param.watch(self._update_stage_filter, "value")
 
-        header_col = pn.Column(header_row, pn.Row(self.modality_selector, self.stage_selector))
+        header_col = pn.Column(header_row, pn.Row(self.modality_selector, self.stage_selector), styles=OUTER_STYLE)
 
-        self.tabs = pn.Tabs(sizing_mode='stretch_width')
+        self.tabs = pn.Tabs(sizing_mode='stretch_width', styles=OUTER_STYLE)
         self.update_objects()
 
-        col = pn.Column(header_col, pn.layout.Divider(), self.tabs, self.hidden_html)
+        col = pn.Column(header_col, self.tabs, self.hidden_html)
 
         return col
 

src/aind_qc_portal/qc_app.py

@@ -7,10 +7,12 @@
 alt.data_transformers.disable_max_rows()
 # from aind_qc_portal.search import search_bar
 from aind_qc_portal.panel.quality_control import QCPanel
+from aind_qc_portal.utils import set_background
 
 alt.data_transformers.disable_max_rows()
 pn.extension("vega", "ace", "jsoneditor")
-# pn.state.template.title = "AIND QC"
+
+set_background()
 
 
 # State sync

src/aind_qc_portal/qc_asset_app.py

@@ -19,21 +19,13 @@
     update_schema_version,
     AIND_COLORS,
     OUTER_STYLE,
+    set_background
 )
 
 alt.data_transformers.disable_max_rows()
 pn.extension("vega", "ace", "jsoneditor")
 
-# Define CSS to set the background color
-background_color = AIND_COLORS["dark_blue"]
-css = f"""
-body {{
-    background-color: {background_color} !important;
-}}
-"""
-
-# Add the custom CSS
-pn.config.raw_css.append(css)
+set_background()
 
 
 class AssetHistory(param.Parameterized):

src/aind_qc_portal/qc_portal_app.py

@@ -8,21 +8,12 @@
 from datetime import datetime
 
 from aind_qc_portal.docdb.database import get_meta, API_GATEWAY_HOST, DATABASE, COLLECTION
-from aind_qc_portal.utils import ASSET_LINK_PREFIX, QC_LINK_PREFIX, qc_color, update_schema_version, OUTER_STYLE, AIND_COLORS
+from aind_qc_portal.utils import ASSET_LINK_PREFIX, QC_LINK_PREFIX, qc_color, update_schema_version, OUTER_STYLE, AIND_COLORS, set_background
 from aind_data_schema.core.quality_control import QualityControl
 
 pn.extension()
 
-# Define CSS to set the background color
-background_color = AIND_COLORS["dark_blue"]
-css = f"""
-body {{
-    background-color: {background_color} !important;
-}}
-"""
-
-# Add the custom CSS
-pn.config.raw_css.append(css)
+set_background()
 
 
 class SearchOptions(param.Parameterized):
@@ -214,8 +205,6 @@ def new_class(cls, **kwargs):
     searchview.df_filtered(),
     escape=False,
     sizing_mode="stretch_both",
-    min_height=800,
-    max_height=1200,
     index=False,
 )
 

src/aind_qc_portal/utils.py

@@ -1,6 +1,7 @@
 from datetime import timedelta
 
 import numpy as np
+import panel as pn
 from aind_data_schema.core.quality_control import QualityControl, Status
 
 ASSET_LINK_PREFIX = "/qc_asset_app?id="
@@ -12,7 +13,7 @@
     "green": "#1D8649",
     "yellow": "#FFB71B",
     "grey": "#7C7C7F",
-    "red": "FF5733",
+    "red": "#FF5733",
 }
 
 OUTER_STYLE = {
@@ -24,6 +25,18 @@
     'margin': "5px",
 }
 
+BACKGROUND_CSS = f"""
+body {{
+    background-color: {AIND_COLORS["dark_blue"]} !important;
+}}
+"""
+
+
+def set_background():
+
+    # Add the custom CSS
+    pn.config.raw_css.append(BACKGROUND_CSS)
+
 
 def update_schema_version(record: dict):
     if record.get("quality_control") and record.get("schema_version"):
@@ -114,13 +127,15 @@ def qc_color(v):
         CSS style string
     """
     if v == "No QC":
-        return f"background-color: {AIND_COLORS['yellow']}"
+        color = AIND_COLORS['yellow']
     elif v == "Pass":
-        return f"background-color: {AIND_COLORS['green']}"
+        color = AIND_COLORS['green']
     elif v == "Fail":
-        return f"background-color: {AIND_COLORS['red']}"
+        color = AIND_COLORS['red']
     elif v == "Pending":
-        return f"background-color: {AIND_COLORS['light_blue']}"
+        color = AIND_COLORS['light_blue']
+    print(color)
+    return f"background-color: {color}"
 
 
 def bincount2D(x, y, xbin=0, ybin=0, xlim=None, ylim=None, weights=None):