def serve_layout():
"""
The layout of our app needs to be inside a function \
so that every time some new session starts a new \
session_id is generated.
"""
session_id = f"python_generated_ssid_{uuid.uuid4()}"
# TODO: This should probably be moved to `utils.startup`
# load some data for all users
for file in os.listdir("../data"):
if file.endswith("csv"):
df = pd.read_csv("../data/" + file)
r.set(f"{session_id}_user_data_example_{file[:-4]}",
pickle.dumps(df))
return html.Div(
children=[
html.H2(session_id, id="user_id", style={"display": "none"}),
html.Div(
[
# Sidebar / menu
html.Div(children=SideBar,
className="col-sm-4 col-md-3 col-xl-2",
id="sidebar",
style={"display": "inline-block"}),
# main Div
html.Div(children=MainMenu,
className="col-sm-8 col-md-9 col-xl-10",
id="mainmenu",
style={"display": "inline-block"}),
# Sidebar / menu
html.Div(children=[
sd_material_ui.Drawer(SideBar2,
id="drawer",
open=True,
docked=True,
openSecondary=True),
],
className="",
id="sidebar2",
style={"display": "inline-block"}),
],
className="row",
id="main_content")
],
className="container",
style={"display": "inline"},
id="main_page")
app.scripts.config.serve_locally = True
spacer = html.Div(children=[], style=dict(height=20))
final_spacer = html.Div(children=[], style=dict(height=400))
# Callback for BottomNavigation
app.layout = html.Div([
# Test for SDDrawer (not docked)
sd_material_ui.Drawer(id='output7',
open=False,
children=[
html.P(id='close-input7', children='X'),
html.H4(children='Drawer items'),
html.Ul(children=[
html.Li(children=['Item 1']),
html.Li(children=['Item 2']),
html.Li(children=['Item 3']),
]),
]),
html.Div(
id='input7',
children=[html.Button(children='Open or close the drawer (left)')]),
spacer,
sd_material_ui.Dialog([
html.H3('Sample Dialog'),
html.Div(html.Button('Close Dialog'), id='closer')
],
id='output2'),
html.Div(id='input2', children=[html.Button(children='Open the dialog')]),
# Test buttons together to see which was clicked
html.Div(children=[
html.P(id='output4-5-12', children=['Which button was clicked? ']),
html.P(
id='output4-5-12-b',
children=[
'Clicked values for flat () and raised () and icon () buttons'
])
]),
spacer,
# Test for SDDrawer (docked, secondary)
sd_material_ui.Drawer(id='output6',
docked=True,
openSecondary=True,
style={'backgroundColor': '#444'},
children=[html.P(children='Drawer item')]),
html.Div(id='input6',
children=[html.P(children='Open or close the drawer (docked)')]),
spacer,
# Test for SDDrawer (not docked)
sd_material_ui.Drawer(
id='output7',
docked=False,
open=False,
children=[html.P(id='close-input7', children='Drawer item')]),
html.Div(
id='input7',
children=[html.P(children='Open or close the drawer (not docked)')]),
sd.Drawer(
id="Filter_drawer",
width="40%",
docked=False,
children=[
html.Div([
html.P(
children="Run Name",
style={
"padding-left": "5px",
"font-weight": "bold",
},
),
dcc.Dropdown(
id="select_a_run",
options=[{
"label": r,
"value": r
} for r in runs],
value=runs[0],
clearable=False,
),
html.Br(),
html.P(
children="Lane Number",
style={
"padding-left": "5px",
"font-weight": "bold",
},
),
html.Div(
dcc.RadioItems(
id="lane_select",
labelStyle={
"display": "inline-block",
"padding-left": "30px",
},
)),
html.Br(),
html.P(
children="Threshold Value for Index Clusters",
style={
"padding-left": "5px",
"font-weight": "bold",
},
),
html.Div(
dcc.Input(
id="index_threshold",
placeholder='Press "Enter" when complete',
debounce=True,
type="number",
value="0",
)),
html.Br(),
html.P(
children="Sample QC Status",
style={
"padding-left": "5px",
"font-weight": "bold",
},
),
html.Div(
dcc.Checklist(
id="pass/fail",
options=[
{
"label": "Passed Samples",
"value": "Pass",
},
{
"label": "Failed Samples",
"value": "Fail",
},
],
value=["Pass", "Fail"],
labelStyle={"paddingLeft": 30},
)),
html.Div([
html.P(
children="Sample Type",
style={
"padding-left": "5px",
"font-weight": "bold",
},
),
dcc.Dropdown(
id="sample_type",
options=[
{
"label": "DNA: WG",
"value": "WG"
},
{
"label": "DNA: EX",
"value": "EX"
},
{
"label": "DNA: TS",
"value": "TS"
},
{
"label": "DNA: AS",
"value": "AS"
},
{
"label": "RNA: MR",
"value": "MR"
},
{
"label": "RNA: SM",
"value": "SM"
},
{
"label": "RNA: WT",
"value": "WT"
},
{
"label": "RNA: TR",
"value": "TR"
},
],
value=[
"WG",
"EX",
"TS",
"AS",
"MR",
"SM",
"WT",
"TR",
],
clearable=False,
multi=True,
),
]),
])
],
),
sd_material_ui.Drawer(
id='left-drawer',
width='40%',
docked=False,
children=html.Div([
dcc.Link('Bank Accounts', href='/apps/bank_accounts'),
html.Div(style={'height': 20}),
dcc.Link('Market Research', href='/apps/market_research'),
html.Div(style={'height': 20}),
dcc.Link('Virtual Portfolio', href='/apps/virtual_portfolio'),
html.Div(style={'height': 20}),
# sd_material_ui.FlatButton(
# id='bank-link', labelPosition='before', fullWidth=True,
# label='Bank Accounts',
# href='/apps/bank_accounts',
# style={'height': '80'},
# ),
# sd_material_ui.FlatButton(
# id='research-link', labelPosition='before', fullWidth=True,
# label='Market Research',
# href='/apps/market_research',
# style={'height': '80'},
# ),
# sd_material_ui.FlatButton(
# id='portfolio-link', labelPosition='before', fullWidth=True,
# label='Virtual Portfolio',
# href='/apps/virtual_portfolio',
# style={'height': '80'},
# ),
# sd_material_ui.FlatButton(
# id='calculatos-link', labelPosition='before', fullWidth=True,
# label='Financial Calculators',
# href='/apps/calculators',
# style={'height': '100'},
# ),
])),
sd_material_ui.Drawer(id='indicators-drawer', width='20%', docked=False, openSecondary=True,
children=sd_material_ui.Paper([
daq.BooleanSwitch(label='Simple Moving Average', id='0', on=False, labelPosition='right'),
daq.BooleanSwitch(label='Exponential Moving Average', id='1', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Weighted Moving Average', id='2', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Double Exponential Moving Average', id='3', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Triple Exponential Moving Average', id='4', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Triangular Moving Average', id='5', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Kaufman Adaptive Moving Average', id='6', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='MESA Adaptive Moving Average', id='7', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Triple Exponential Moving Average', id='8', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Moving Average Convergence/Divergence', id='9', on=False,
labelPosition='right'),
# {'daq.BooleanSwitch(label'='', id='', on=False, labelPosition='right'), MACDEXT
daq.BooleanSwitch(label='Stochastic Oscillator Values', id='10', on=False,
labelPosition='right'),
# {'daq.BooleanSwitch(label'='', id='', on=False, labelPosition='right'), STOCHF
daq.BooleanSwitch(label='Relative Strength Index', id='11', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Stochastic Relative Strength Index', id='12', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Williams %R Values', id='13', on=False, labelPosition='right'),
daq.BooleanSwitch(label='Average Directional Movement Index', id='14', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Absolute Price Oscillator Values', id='15', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Percentage Price Oscillator Values', id='16', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Momentum Values', id='17', on=False, labelPosition='right'),
daq.BooleanSwitch(label='Balance of Power Values', id='18', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Commodity Channel Index', id='19', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Chande Momentum Oscillator Values', id='20', on=False,
labelPosition='right'),
# {'daq.BooleanSwitch(label'='Rate of Change Values', id='', on=False, labelPosition='right'), # Save as default indicator
daq.BooleanSwitch(label='AROON Values', id='21', on=False, labelPosition='right'),
daq.BooleanSwitch(label='AROON OScillator Values', id='22', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Money Flow Index', id='23', on=False, labelPosition='right'),
# {'daq.BooleanSwitch(label'='', id='', on=False, labelPosition='right'), TRIX
daq.BooleanSwitch(label='Ultimate Oscillator Values', id='24', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Directional Movement Index', id='25', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Minus Directional Indicator Values', id='26', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Plus Directional Indicator Values', id='27', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Minus Directional Movement Values', id='28', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Plus Directional Movement Values', id='29', on=False,
labelPosition='right'),
# {'daq.BooleanSwitch(label'='', id='', on=False, labelPosition='right'), # BBands by default
daq.BooleanSwitch(label='Midpoint Values', id='30', on=False, labelPosition='right'),
daq.BooleanSwitch(label='Midprice Values', id='31', on=False, labelPosition='right'),
daq.BooleanSwitch(label='Parabolic SAR Values', id='32', on=False, labelPosition='right'),
daq.BooleanSwitch(label='True Range Values', id='33', on=False, labelPosition='right'),
daq.BooleanSwitch(label='Average True Range Values', id='34', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Normalized Average True Range Values', id='35', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Chaikin A/D Line Values', id='36', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Chaikin A/D Oscialltor Values', id='37', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='On-balance Volume Values', id='38', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Hilbert Transform', id='39', on=False, labelPosition='right'),
daq.BooleanSwitch(label='Hilbert Transform: Sine Wave', id='40', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Hilbert Transform: Trend vs Cycle', id='41', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Hilbert Transform: Dominant Cycle Period', id='42', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Hilbert Transform: Dominant Cycle Phase', id='43', on=False,
labelPosition='right'),
daq.BooleanSwitch(label='Hilbert Transform: Phasor Components', id='44', on=False,
labelPosition='right'),
])),
def generate_drawer_layout(
self,
n_plot_at_startup: int,
default_colour_column: str,
default_shape_column: str,
) -> sd_material_ui.Drawer:
return sd_material_ui.Drawer(
id=self.id_drawer,
open=False,
docked=False,
width="50%",
children=[
html.Div(
children=[
html.Label("Project:"),
dcc.Dropdown(
id=self.id_multiselect_project,
multi=True,
options=[{
"label": x,
"value": x
} for x in self.get_sorted_column(
self.project_column_name)],
value=self.get_sorted_column(
self.project_column_name),
),
html.Br(),
html.Label("Kits:"),
dcc.Dropdown(
id=self.id_multiselect_kit,
multi=True,
options=[{
"label": x,
"value": x
} for x in self.get_sorted_column(
self.kit_column_name)],
value=self.get_sorted_column(self.kit_column_name),
),
html.Br(),
html.Label("Dates: "),
dcc.DatePickerRange(
id=self.id_date_picker,
display_format="YYYY-MM-DD",
min_date_allowed=min(
self.df_func()[self.date_column_name]),
max_date_allowed=max(
self.df_func()[self.date_column_name]),
start_date=min(
self.df_func()[self.date_column_name]),
end_date=max(
self.df_func()[self.date_column_name]),
),
html.Br(),
html.Br(),
html.Label("Show Graphs:"),
dcc.Dropdown(
id=self.id_multiselect_plots,
multi=True,
options=[{
"label": x,
"value": x
} for x in self.columns_to_plot],
value=self.columns_to_plot[:n_plot_at_startup],
),
html.Br(),
html.Div([
html.Div(
[
html.Label("Colour by:"),
dcc.Dropdown(
id=self.id_select_colour,
options=[{
"label": x["name"],
"value": x["id"],
} for x in self.colour_columns],
value=default_colour_column,
),
],
style={
"width": "45%",
"display": "inline-block",
},
),
html.Div(
[
html.Label("Shape by:"),
dcc.Dropdown(
id=self.id_select_shape,
options=[{
"label": x["name"],
"value": x["id"],
} for x in self.shape_columns],
value=default_shape_column,
),
],
style={
"width": "45%",
"display": "inline-block",
"float": "right",
},
),
]),
],
style={"margin": "23px"},
)
],
)
