dashblox 0.0.2__py3-none-any.whl

dashblox/__init__.py

@@ -0,0 +1,11 @@
+from ._version import __version__
+from . import run
+from . import utils
+from . import components
+
+__all__ = [
+    '__version__', 
+    'run',
+    'utils', 
+    'components', 
+]

dashblox/_version.py

@@ -0,0 +1 @@
+__version__ = "0.0.2"

dashblox/components/__init__.py

@@ -0,0 +1,3 @@
+from .table import table
+from .tabs import tabs
+from .loading_message import loading_message

dashblox/components/loading_message.py

@@ -0,0 +1,33 @@
+from dash import html
+
+
+def loading_message(id='loading_message',
+                    message_text='Loading Data...',
+                    initially_hidden=False):
+    """
+    Return layout component for a loading message to prevent user access to content
+    while data is loading; can be toggled off by setting "hidden" property to True
+    """
+    return html.Div(id=id,
+                    children=[
+                        html.H4(children=message_text,
+                                style={'position': 'absolute',
+                                       'top': '200px',
+                                       'height': '120px',
+                                       'left': '300px',
+                                       'width': '600px',
+                                       'padding': '45px 215px',
+                                       'color': 'rgba(19, 20, 23, 1)',
+                                       'background-color': 'rgba(255, 255, 255, 1)',
+                                       'z-index': '99'}
+                                )
+                    ],
+                    hidden=initially_hidden,
+                    style={'position': 'fixed',
+                           'top': '0px',
+                           'bottom': '0px',
+                           'left': '0px',
+                           'right': '0px',
+                           'background-color': 'rgba(0, 0, 0, 0.3)',
+                           'z-index': '98'})
+

dashblox/components/table.py

@@ -0,0 +1,237 @@
+import copy
+from collections import OrderedDict
+from dash import html, dash_table
+
+
+def table(*args, **kwargs):
+    """
+    Generate and return layout component for data table based on input parameters
+    """
+    return Table(*args, **kwargs).component
+
+
+class Table(object):
+    default_style = {
+        'div': {
+            'position': 'absolute',
+            'top': '0px',
+            'bottom': '0px',
+            'left': '0px',
+            'overflow-x': 'auto',
+            'overflow-y': 'auto',
+        },
+        'body_cell': {
+            'font-size': '14px',
+            'font-family': ['Arial', 'sans-serif'],
+            'text-align': 'left',
+            'background-color': '#FFFFFF',
+            'color': '#131417',
+            'box-sizing': 'border-box',
+            'padding': '4px 6px',
+            'overflow': 'hidden',
+            'text-overflow': 'clip',
+            'border-left': '1pt solid #737373',
+            'border-right': '1pt solid #737373',
+            'border-bottom': '1pt solid #737373',
+        },
+        'header_cell': {
+            'font-size': '14px',
+            'font-family': ['Arial', 'sans-serif'],
+            'font-weight': 'bold',
+            'text-align': 'left',
+            'background-color': '#02808A',
+            'color': '#FFFFFF',
+            'box-sizing': 'border-box',
+            'padding': '4px 6px',
+            'overflow': 'hidden',
+            'text-overflow': 'clip',
+            'border': '1pt solid #FFFFFF',
+        },
+        'header_row': {
+            'height': '30px',
+        }
+    }
+    
+    def __init__(self, table_id, columns, **kwargs):
+        """
+        Create combined header/DataTable component for dashboard layout from columns list
+        """
+        columns_cfg = self.get_columns_cfg(columns)
+        apply_style = self.setup_styles(columns_cfg, kwargs)
+        col_defs, table_editable_flag = self.setup_columns(columns_cfg)
+        cond_style = self.get_conditional_styles(columns_cfg)
+        tot_width = sum([i['width'] for i in columns_cfg.values()])
+        
+        self._component = html.Div(
+            [
+                html.Table(
+                    self.get_head_components(columns_cfg, apply_style),
+                    style={
+                        'border-collapse': 'separate',
+                        'border-spacing': '0px',
+                        'position': 'sticky',
+                        'top': '0px',
+                        'z-index': '1',
+                    }
+                ),
+                dash_table.DataTable(id=table_id,
+                                     columns=col_defs,
+                                     data=[],
+                                     page_action='none',
+                                     style_table={'width': f'{tot_width}px',
+                                                  'z-index': '0'},
+                                     style_data=apply_style['body_cell'],
+                                     style_data_conditional=cond_style,
+                                     css=[
+                                         {'selector': 'tr:first-child', 'rule': 'display: none'},
+                                         {'selector': '.dash-spreadsheet tr', 'rule': 'height: 10px;'}
+                                     ],
+                                     editable=table_editable_flag,
+                                     cell_selectable=kwargs.get('selectable', False),
+                                     selected_cells=[])
+            ],
+            style=apply_style['div']
+        )
+    
+    @staticmethod
+    def get_columns_cfg(columns):
+        """
+        Make OrderedDict from columns parameter
+        """
+        columns_cfg = OrderedDict([(k.lower(), v) for k,v in columns])
+        for k in columns_cfg:
+            if 'width' not in columns_cfg[k]:
+                columns_cfg[k]['width'] = 100
+        return columns_cfg
+
+    def setup_styles(self, columns_cfg, kwargs):
+        """
+        Define styles dicts for Div/DataTable objects from default+kwargs
+        """
+        apply_style = copy.deepcopy(self.default_style)
+        apply_style['div'].update(kwargs.get('style', {}))
+        if apply_style['div'].get('right') is None:
+            w = sum([i['width'] for i in columns_cfg.values()]) + 18
+            apply_style['div']['width'] = f'{w}px'
+
+        for k in {*apply_style}-{'div'}:
+            apply_style[k].update(kwargs.get(f'{k}_style', {}))
+        
+        return apply_style
+    
+    def setup_columns(self, columns_cfg):
+        """
+        Generate column definitions input for dash_table.DataTable
+        """
+        col_defs = list()
+        table_editable_flag = False
+        for c in columns_cfg:
+            col_def = {'id': c, 'name': c}
+            if (num_fmt:=columns_cfg[c].get('num_fmt')):
+                col_def['type'] = 'numeric'
+                if isinstance(num_fmt, str):
+                    col_def['format'] = self.get_num_fmt(num_fmt)
+                else:
+                    col_def['format'] = num_fmt
+            if columns_cfg[c].get('editable', False) and not (columns_cfg[c]['width'] == 0):
+                col_def['editable'] = True
+                table_editable_flag = True
+            col_defs += [col_def]
+            
+        return col_defs, table_editable_flag
+    
+    @staticmethod
+    def get_num_fmt(num_fmt):
+        """
+        Converts number format string into dash_table.Format or 
+        dash_table.FormatTemplate object to set column format for table.
+        """
+        t,p = num_fmt.split('-')
+        p = int(p)
+        return {
+            'money': dash_table.FormatTemplate.money(p).group(True),
+            'comma': dash_table.Format.Format(precision=p, group=True, groups=[3]),
+            'number': dash_table.Format.Format(precision=p,
+                                               scheme=dash_table.Format.Scheme.fixed),
+            'pct': dash_table.FormatTemplate.percentage(p),
+        }[t]
+        
+    @staticmethod
+    def get_conditional_styles(columns_cfg):
+        """
+        Create conditional style dict, populate rules for column widths, 
+        number alignment and any conditional formatting specified in layout.
+        """
+        cond_style = {c: dict() for c in columns_cfg}
+        for c in columns_cfg:
+            if columns_cfg[c]['width'] == 0:
+                cond_style[c]['display'] = 'none'
+            else:
+                w = columns_cfg[c]['width']
+                for p in ['min-width', 'max-width']:
+                    cond_style[c][p] = f'{w}px'
+                cond_style[c]['text-align'] = ['left','right']['num_fmt' in columns_cfg[c]]
+        cond_style = [{'if': {'column_id': c}, **cond_style[c]} 
+                      for c in columns_cfg]
+        
+        for c,cfg in columns_cfg.items():
+            for query,style in cfg.get('cstyle', []):
+                cond_style += [{'if': {'filter_query': query,
+                                       'column_id': c},
+                                **style}]
+                
+        return cond_style
+    
+    @staticmethod
+    def get_head_components(columns_cfg, apply_style):
+        """
+        Return table head (html.Thead) object for table
+        """
+        # Organize column labels; detect where multi-row head needed
+        hlabels = OrderedDict([(k, z if isinstance((z:=v.get('label', k)), list) else [z])
+                               for k,v in columns_cfg.items()
+                               if v['width'] > 0])
+        n_hrows = max([len(i) for i in hlabels.values()])
+        
+        hlabels_grid = [[*hlabels[k], *['']*n_hrows][:n_hrows] for k in hlabels]
+        row_spans = [*zip(*[[[0,cm[i+1:].index(1)+1][j] 
+                           for i,j in enumerate(cm[:-1])]
+                          for cl in hlabels_grid
+                          for cm in [[min(len(i),1) for i in cl+['X']]]])]
+        
+        hlabels_grid = [*zip(*hlabels_grid)]
+        col_spans = [[[0,rm[i+1:].index(1)+1][j] for i,j in enumerate(rm[:-1])]
+                     for rl in hlabels_grid
+                     for rm in [[int(i==0 or j!=rl[i-1]) 
+                                 for i,j in enumerate([*rl,'X'])]]]
+    
+        # Generate head components, with expanded cells where needed 
+        head_components = []
+        for r in range(n_hrows):
+            row = []
+            for c,cid in enumerate(columns_cfg):
+                if (sp_r:=row_spans[r][c])*(sp_c:=col_spans[r][c]) != 0:
+                    cell_style = copy.deepcopy(apply_style['header_cell'])
+                    if sp_c == 1:
+                        cell_style.update({i: f"{columns_cfg[cid]['width']}px" 
+                                           for i in ['min-width','max-width']})
+                    cell_style.update({
+                        'border-top-color': (cch:=[cell_style[i] 
+                                                   for i in ['color',
+                                                             'background-color']])[r==0],
+                        'border-bottom-color': cch[r+sp_r==n_hrows],
+                        'border-left-color': cch[c==0],
+                        'border-right-color': cch[c+sp_c==len(columns_cfg)],
+                    })
+                    row += [html.Th(children=hlabels_grid[r][c],                               
+                                    rowSpan=sp_r,
+                                    colSpan=sp_c,
+                                    style=cell_style)]
+            head_components += [html.Tr(row, style=apply_style['header_row'])]
+            
+        return [html.Thead(head_components)]
+
+    @property
+    def component(self):
+        return self._component
+

dashblox/components/tabs.py

@@ -0,0 +1,99 @@
+from dash import dcc, html
+import copy
+
+
+def tabs(*args, **kwargs):
+    """
+    Generate and return layout component for tabs object based on input parameters
+    """
+    return Tabs(*args, **kwargs).component
+
+
+class Tabs(object):
+    default_style = {
+        'div': {
+            'position': 'absolute',
+            'top': '12px',
+            'bottom': '12px',
+            'left': '12px',
+            'right': '12px',
+        },
+        'selector': {
+            'height': '44px',
+            'width': '540px',
+        },
+        'tab': {
+            'border-top-left-radius': '3px',
+            'border-top-right-radius': '3px',
+            'border-bottom': '1px solid #D6D6D6',
+            'border-top': '1px solid #D6D6D6',
+            'padding': '6px',
+            'font-weight': 'normal',
+            'color': '#131417',
+            'backgroundColor': '#D6D6D6',
+        },
+        'selected_tab': {
+            'border-top-left-radius': '3px',
+            'border-top-right-radius': '3px',
+            'border-bottom': '1px solid #D6D6D6',
+            'border-top': '2px solid #02808A',
+            'padding': '6px',
+            'font-weight': 'bold',
+            'color': '#02808A',
+            'backgroundColor': '#FFFFFF',
+        },
+        'tab_div': {
+            'position': 'absolute',
+            'top': '48px',
+            'bottom': '0px',
+            'left': '0px',
+            'right': '0px',
+        },
+    }
+    
+    def __init__(self,
+                 tabs_id,
+                 tabs,
+                 **kwargs):
+        """
+        Create dcc.Tabs component for dashboard layout from input list
+        """
+        self.apply_style = self.setup_styles(kwargs)
+        self._component = html.Div(
+            [
+                dcc.Tabs(id=tabs_id,
+                         value=tabs[kwargs.get('initial_select', 0)]['tab_id'],
+                         children=[self.get_tab(**t) for t in tabs],
+                         style=self.apply_style['selector'])
+            ],
+            style=self.apply_style['div']
+        )
+        
+    def setup_styles(self, kwargs):
+        """
+        Define styles dicts for Div/Tab/Tabs objects from default+kwargs
+        """
+        apply_style = copy.deepcopy(self.default_style)
+        apply_style['div'].update(kwargs.get('style', {}))
+        for k in {*apply_style}-{'div'}:
+            apply_style[k].update(kwargs.get(f'{k}_style', {}))
+        # (Auto-adjust tab_div/top to match selector/height)
+        top_px = int(apply_style['selector']['height'].replace('px', '')) + 4
+        apply_style['tab_div']['top'] = f"{top_px}px"
+            
+        return apply_style
+
+    def get_tab(self, tab_id, label, content):
+        """
+        Return layout component for tab content.
+        """
+        return dcc.Tab(label=label,
+                       value=tab_id,
+                       children=html.Div(content,
+                                         style=self.apply_style['tab_div']),
+                       style=self.apply_style['tab'],
+                       selected_style=self.apply_style['selected_tab'])
+        
+    @property
+    def component(self):
+        return self._component

dashblox/run/__init__.py

@@ -0,0 +1,6 @@
+from .multipage_setup import multipage_setup, set_host_and_port
+from .app_layout import app_layout
+from .set_up_page import set_up_page
+from .callback_utils import DashCallbackMgr, SourceData
+from .set_trigger import set_trigger
+from .notebook_test import notebook_test

dashblox/run/__main__.py

@@ -0,0 +1,8 @@
+from . import multipage_setup
+import os
+from subprocess import run
+
+multipage_setup()
+run("gunicorn -bind 0.0.0.0.${DASH_PORT} main:server", env=os.environ, shell=True)
+
+# Run from Dockerfile:  CMD python -m dashblox.run

dashblox/run/app_layout.py

@@ -0,0 +1,112 @@
+from dash import html, dcc, page_registry, page_container
+import dash_bootstrap_components as dbc
+
+
+def app_layout(title=None):
+    """
+    Return layout for multi-page app
+    """
+    # Fix position of page container to sit under navbar
+    cntix = [i for i, j in enumerate(page_container.children)
+             if j.id == '_pages_content'][0]
+    page_container.children[cntix].style = {'position': 'absolute',
+                                            'top': '50px',
+                                            'bottom': '0px', 
+                                            'left': '0px',
+                                            'right': '0px'}
+    return html.Div(
+        [
+            create_navbar(title=title or ''),
+            page_container
+        ]
+    )
+
+
+logo = f'./assets/luna_logo_teal.png'
+
+lnk_style = {
+    'width': '128px', 
+    'height': '36px', 
+    'margin': '0px 5px', 
+    'color': 'white', 
+    'border': '2px solid white', 
+    'font-size': '14px', 
+    'font-weight': 'normal', 
+    'text-align': 'center', 
+    'vertical-align': 'middle', 
+    'line-height': '32px'
+}
+
+
+def create_navbar(title):
+    """
+    Return layout components for top-of-page navigation bar.
+    """    
+    navbar = dbc.Navbar(
+        [
+            html.A(html.Img(src=logo,
+                            height=48),
+                   href='/',
+                   style = {
+                       'position': 'fixed',
+                       'vertical-align': 'middle', 
+                       'left': '20px',
+                       }
+                   ),
+            html.A(html.Div(title,
+                            style = {
+                                'font-size': '20px',
+                                'font-weight': 'bold',
+                                'color': '#014A50', 
+                                }
+                            ),
+                   href='/',
+                   style = {
+                       'position': 'fixed',
+                       'vertical-align': 'middle', 
+                       'left': '80px',
+                       'textDecoration': 'none',
+                       }
+                   ),
+            html.A(html.Div(title,
+                            style = {
+                                'font-size': '20px',
+                                'font-weight': 'bold',
+                                'color': '#014A50', 
+                                }
+                            ),
+                   href='/',
+                   style = {
+                       'position': 'fixed',
+                       'vertical-align': 'middle', 
+                       'left': '80px',
+                       'textDecoration': 'none',
+                       }
+                   ),
+            html.A(html.Img(src=logo, 
+                            height=36),
+                   href='https://www.google.com',
+                   target='_blank',
+                   style = {
+                       'position': 'fixed',
+                       'vertical-align': 'middle', 
+                       'right': '20px',
+                       }
+                   ),
+        ],
+        sticky='top',
+        style={
+            'position': 'fixed',
+            'top': '0px', 
+            'left': '0px',
+            'height': '50px',
+            'right': '0px',
+            'font-family': ['Open Sans', 'sans-serif'],
+            'background-image': 'url("./assets/navbar.png")',
+            'background-size': 'cover',
+            'min-height': '50px',
+            'background-color': 'transparent',
+        }
+    )
+    
+    return navbar