Hello everyone.
I am trying to set up an app where I show a heatmap in one div and besides this there is a nother Div (inline-block) where I do some manipulation of this heatmap. so Far I haven’ manage to get it to work. Here is the code I am using:
html.Div([
html.Div([
dcc.Graph(
id=‘raw_image’,
hoverData={‘points’: [{‘x’: 0, ‘y’: 0}]},
clickData={‘points’: [{‘x’: 0, ‘y’: 0}]}
)
], style={‘display’: ‘inline-block’, ‘width’: ‘50%’}),
html.Div(
dcc.Tabs(
id=“tabs”,
value=‘spectral_analyser’,
parent_className=‘custom-tabs’,
className=‘custom-tabs-container’,
children=[
dcc.Tab(
label=‘Spectral analyser’,
value=‘spectral_analyser’,
className=‘custom-tab’,
selected_className=‘custom-tab–selected’,
children=[
html.Div([
html.Div([
dcc.Graph(
id=‘raw_spectra’
),
], className=‘two_columns’, style={‘display’: ‘inline-block’, ‘width’: ‘50%’}),
html.Div([
dcc.Graph(
id=‘raw_spectra_roi’
),
], className=‘two_columns’, style={‘display’: ‘inline-block’, ‘width’: ‘50%’}),
])
]
),
dcc.Tab(
label=‘Physiological parameters retrieval’,
value=‘parameter_retrieval’,
className=‘custom-tab’,
selected_className=‘custom-tab-selected’,
children=[
html.Div([
html.Div([
dcc.Graph(
id=‘physiological_parameter’,
clickData={‘points’: [{‘x’: 0, ‘y’: 0}]}
),
], className=‘two_columns’, style={‘display’: ‘inline-block’, ‘width’: ‘30%’}),
html.Div([
dcc.Graph(
id=‘roi_mean’,
),
], className=‘two_columns’, style={‘display’: ‘inline-block’, ‘width’: ‘30%’}),
]),
html.Div([
html.Div([
html.Button(“Compute ROI results”, id=‘compute_roi’)
], style={‘display’: ‘inline-block’, ‘width’: ‘15%’}),
]),
]
]),