def create_pca(n_clicks, n_vars, facet_height, groupby, include_labels, exclude_labels, norm_cols, file_types, wdir): if n_clicks is None: raise PreventUpdate if norm_cols is None: norm_cols = [] df = T.get_complete_results(wdir, include_labels=include_labels, exclude_labels=exclude_labels, file_types=file_types) if file_types is not None and len(file_types) > 0: df = df[df['Type'].isin(file_types)] if groupby is not None and len(groupby) > 0: color_groups = df[['ms_file', groupby]].drop_duplicates().set_index('ms_file') else: color_groups = None groupby = None if len(norm_cols) != 0: if ('peak_label' in norm_cols) and ('ms_file' in norm_cols): return dbc.Alert( "'peak_label' and 'ms_file' should not be used together for normalization!", color='danger') df = df[df.Batch.notna()] cols = ['peak_max'] df.loc[:, cols] = ((df[cols] - df[cols + norm_cols].groupby( norm_cols).transform('median')[cols].values) / df[cols + norm_cols].groupby(norm_cols).transform( 'std')[cols].values).reset_index() figures = [] mint = Mint() mint.results = df mint.pca() ndx = mint.decomposition_results['df_projected'].index.to_list() mint.pca_plot_cumulative_variance() src = T.fig_to_src() figures.append(html.Img(src=src)) if color_groups is not None: color_groups = color_groups.loc[ndx].values with sns.plotting_context("paper"): mint.plot_pair_plot(group_name=groupby, color_groups=color_groups, n_vars=n_vars, height=facet_height) src = T.fig_to_src() figures.append(html.Img(src=src)) return figures
def get_about_html(): text = """ This is the implementation of our Data Science Project. The aim of this project is to provide suggestions on suitable relocation areas in Finland, based on housing prices and demographics. """ return html.Div([ html.H1("About"), html.H3(text, id="about_text"), html.H1("Team"), html.Table([ html.Thead( html.Tr([ html.Th("Letizia"), html.Th("Taige"), html.Th("Roope"), html.Th("Trang"), html.Th("Thong") ])), html.Tbody( html.Tr([ html.Td( html.A(html.Img( src= "https://avatars1.githubusercontent.com/u/45148109?s=200&v=4", alt="Letizia"), href="https://github.com/letiziaia")), html.Td( html.A(html.Img( src= "https://avatars2.githubusercontent.com/u/16875716?s=200&v=4", alt="Taige"), href="https://github.com/xiaoxiaobt")), html.Td( html.A(html.Img( src= "https://avatars2.githubusercontent.com/u/43811718?s=200&v=4", alt="Roope"), href="https://github.com/rooperuu")), html.Td( html.A(html.Img( src= "https://avatars3.githubusercontent.com/u/55182434?s=200&v=4", alt="Trang"), href="https://github.com/trangmng")), html.Td( html.A(html.Img( src= "https://avatars0.githubusercontent.com/u/32213097?s=200&v=4", alt="Thong"), href="https://github.com/trananhthong")) ])) ], id="team_table") ], id="about_info")
def app_page_layout(page_layout, app_title="Dash Bio App", app_name="", light_logo=True, standalone=False, bg_color="#506784", font_color="#F3F6FA"): return html.Div( id='main_page', children=[ dcc.Location(id='url', refresh=False), html.Div( id='app-page-header', children=[ html.A(id='dashbio-logo', children=[ html.Img(src='data:image/png;base64,{}'.format( base64.b64encode( open( os.path.join( ASSETSPATH, 'plotly-dash-bio-logo.png'), 'rb').read()).decode())) ], href="/Portal" if standalone else "/dash-bio"), html.H2(app_title), html.A(id='gh-link', children=['View on GitHub'], href="https://github.com/cytham/variantmap", style={ 'color': 'white' if light_logo else 'black', 'border': 'solid 1px white' if light_logo else 'solid 1px black' }), html.Img(src='data:image/png;base64,{}'.format( base64.b64encode( open( os.path.join(ASSETSPATH, 'GitHub-Mark-{}64px.png'). format('Light-' if light_logo else ''), 'rb').read()).decode())) ], style={ 'background': bg_color, 'color': font_color, }), html.Div(id='app-page-content', children=page_layout) ], )
def create_figure(n_clicks, fig_size_x, fig_size_y, options, file_types, include_labels, exclude_labels, ms_order, wdir): if n_clicks is None: raise PreventUpdate mint = Mint() if fig_size_x is None: fig_size_x = 8 if fig_size_y is None: fig_size_y = 8 fig_size_x = min(float(fig_size_x), 100) fig_size_y = min(float(fig_size_y), 100) df = T.get_complete_results( wdir, include_labels=include_labels, exclude_labels=exclude_labels, file_types=file_types ) df['ms_file'] = df['MS-file'] mint.results = df mint.plot_clustering(figsize=(fig_size_x, fig_size_y), transpose='Transposed' in options) src = T.fig_to_src() print('HC figure created.') return html.Img(src=src, style={'maxWidth': '80%'})
def update_reports_list(iso_code): reports = reliefweb_api.get_reports_for_country(iso_code) if not reports: return '' images = [ html.A(children=[ html.Img(src=report['thumbnail'], style={ 'height': '180px', 'padding': '3', 'marginRight': 40, 'marginLeft': 40, 'boxShadow': '10px 10px 5px 0px #656565', 'background': '#FFF' }), html.P(report['title'][0:50], style={ 'font-size': 'small', 'text-align': 'center' }) ], href=report['file'], target='_blank') for report in reports ] return html.Div([ html.H3('Humanitarian Reports'), html.Div(children=images, style={ 'display': 'flex', 'align': 'middle', 'flexDirection': 'row', 'justifyContent': 'center' }) ])
def get_dash_app(server, storage_type='memory'): # type: (flask.Flask, str) -> dash.Dash ''' Generate Dash Flask app instance. Args: server (Flask): Flask instance. storage_type (str): Storage type (used for testing). Default: memory. Returns: Dash: Dash app instance. ''' store = dcc.Store(id='store', storage_type=storage_type) icon = html.Img(id='icon', src='/assets/icon.svg') tabs = dcc.Tabs( id='tabs', className='tabs', value='plots', children=[ dcc.Tab(className='tab', label='plots', value='plots'), dcc.Tab(className='tab', label='data', value='data'), dcc.Tab(className='tab', label='config', value='config'), dcc.Tab(className='tab', label='api', value='api'), dcc.Tab(className='tab', label='docs', value='docs'), dcc.Tab(className='tab', label='monitor', value='monitor'), ], ) tabs = html.Div(id='tabs-container', children=[icon, tabs]) content = dcc.Loading( id="content", className='content', type="dot", fullscreen=True, ) # path to resources inside pip package assets = lbt.relative_path(__file__, "../resources") # path to resources inside repo if 'REPO_ENV' in os.environ.keys(): assets = lbt.relative_path(__file__, "../../../resources") app = dash.Dash( name='Shekels', title='Shekels', server=server, external_stylesheets=['/static/style.css'], assets_folder=assets, ) app.layout = html.Div(id='layout', children=[store, tabs, content]) app.config['suppress_callback_exceptions'] = True return app
def test_sample_items(): layout = html.Div(html.Div( html.Img(src="https://plotly.com/~chris/1638.png")), style={"color": "red"}) expected = ( "Div(children=Div(Img(src='https://plotly.com/~chris/1638.png')), " "style={'color': 'red'})") assert repr(layout) == expected assert layout._namespace == "dash_html_components"
def add_header(el): return dbc.Row([ dbc.Col( dcc.Link(html.H1('My car info'), href=dash_app.requests_pathname_external_prefix, style={"text-decoration": "none"})), dbc.Col( dcc.Link(html.Img(src="assets/images/settings.svg", width="30veh"), href=dash_app.requests_pathname_external_prefix + "config", className="float-end")) ]), el
def get_app_layout(): return dbc.Container([ dcc.Store(id='selected-data-left'), dcc.Store(id='selected-data-right'), dcc.Store(id='session-id', data=str(uuid.uuid4())), dcc.Store(id='filter-trigger', data=0), dcc.Store(id='left-hide-trigger', data=0), dcc.Store(id='file-loaded-trigger', data=0), dcc.Store(id='dummy-export-scatter2d-left'), dcc.Store(id='dummy-export-scatter2d-right'), dcc.Store(id='dummy-export-histogram'), dcc.Store(id='dummy-export-violin'), dcc.Store(id='dummy-export-parallel'), dcc.Store(id='dummy-export-heatmap'), dcc.Store(id='dummy-export-data'), html.Div( [ html.Div(html.Img( src=app.get_asset_url('sensorview_logo.svg'), id='sensorview-image', style={ 'height': '100px', 'width': 'auto', }, ), className="text-center"), html.H1(app.title, className="text-center"), html.Hr(className="my-2"), html.P( 'Sensor Data Visualization', className="text-center" ), ], className="bg-light rounded-3 my-2 p-3", ), dbc.Row([ dbc.Col( dbc.CardGroup([ testcase_card, datafile_card ]) )], className='mb-3'), tabs, dcc.Markdown( 'Designed and developed by **Zhengyu Peng** \ | Powered by [Dash](https://plotly.com/dash/),\ [Redis](https://redis.io/),\ [Celery](https://docs.celeryproject.org/en/stable/),\ [Docker](https://www.docker.com/)'), ], fluid=True, className="dbc_light")
def load_data_by_type(filetype, contents): children = [] _type, payload = contents.split(",") if filetype in {"csv", "xlsx", "xls"}: children = [load_table(filetype, payload)] elif filetype in {"png", "svg"}: children = [html.Img(src=contents)] children += [ html.Hr(), html.Div("Raw Content", id="raw-title"), html.Pre(payload, style=pre_style), ] return html.Div(children)
def get_header(): """ """ with open( Path(__file__).parent.parent.parent / ".github" / "images" / "aivclab.svg", "rb" ) as svg: encoded = base64.b64encode(svg.read()) return html.Div( [ html.Div( [html.H1(HTML_TITLE)], className="col text-left align-self-center p-1", ), html.Div( [ html.Img( src="/assets/alexandra.png", style={"height": "110px", "object-fit": "contain"}, ), html.Img( src=f"data:image/svg+xml;base64,{encoded.decode()}", # className='img-responsive', style={"height": "110px", "object-fit": "contain"}, ), ], className="col text-center p-1", ), html.Div( [ html.H1(id=TIME_ID), dcc.Interval(id=TIME_INTERVAL_ID, interval=1000, n_intervals=0), ], className="col text-right align-self-center p-1", ), ], className="row p-3", )
def __init__(self) -> None: super().__init__( className='div-logo', children=[ dhtml. A(target=DOC_URL, className='display-inline', children=[ dhtml.Img( className='logo', src= 'https://mwvgroup.github.io/Egon/assets/images/logo.svg' ), dhtml.Span(className='logo-text', children=['Egon']) ]) ])
def get_footer(): """ """ return html.Footer( [ html.Div( [ html.P([f"{k}: "]), html.A([html.Img(src=v)], href=v.split(".svg")[0]), ], className="col", ) for k, v in BUILD_STATUS_MAPPING ] + [ dcc.Interval( id=BUILD_STATUS_INTERVAL, interval=60 * 1000, n_intervals=0) ], className="page-footer text-center row p-3", )
def _preview_row(matches: list, row: int, n_cols: int): if matches == []: return [] thumbnails = [] for match in matches: url = f"/thumb/{match['pdf']}".rsplit(".", 1)[0] + ".jpg" title = " ".join([w.capitalize() for w in match["title"].split("_")]) prev_id = {"type": "preview", "_id": match["_id"], "row": row} thumbnails.append( dbc.Col( html.Div( className="preview", children=[ html.Img(src=url, style={"width": "100%"}), html.Div( className="previewinfo", id=prev_id, n_clicks=0, children=[ html.Div(className="previewinfo_background"), html.Div(title, className="previewinfo_title"), html.Div(match["date"], className="previewinfo_date"), ], ), ], ), width=12 // n_cols, )) thumbnails = dbc.Row(thumbnails, style={"width": "100%"}) hidden_doc = dbc.Row( dbc.Col( dbc.Collapse(id={ "type": "hidden_doc", "row": row }, is_open=False)), style={ "width": "100%", "margin-bottom": "1em", "margin-top": "1em" }, ) return [thumbnails, hidden_doc]
def card(title, text, link=None): return html.Div( [ html.Div( [ html.Img(alt=''), html.Div([ html.H4(title, className='card-title'), html.P(text, className='card-text') ], className='card-body'), html.Div( [ # spa.ButtonLink('Find Out More!', href=spa.url_for(link)).layout ], className='card-footer') ], className='card h-100') ], className='col-lg-3 col-md-6 mb-4')
def generate_country_map(selected_iso_code): return html.Div( [ html.Img( src= 'https://reliefweb.int/sites/reliefweb.int/files/resources/{0}_ocha_500px.png' .format(selected_iso_code.lower()), style={ 'height': '400', 'boxShadow': '1px 1px 5px #999', 'border': 'solid 1px #EFEFEF', # ddd; 'padding': '5px' }) ], style={ 'display': 'flex', 'align': 'middle', 'flexDirection': 'row', 'justifyContent': 'center' })
import dash from dash import html import dash_labs as dl import dash_bootstrap_components as dbc app = dash.Dash(__name__, plugins=[dl.plugins.pages], external_stylesheets=[dbc.themes.BOOTSTRAP]) pages_dropdown = dbc.DropdownMenu( [ dbc.DropdownMenuItem( children=html.Div([ html.Img( src=app.get_asset_url(page["image"]), height="60px", width="80px", ), page["name"], ]), href=page["path"], ) for page in dash.page_registry.values() ], nav=True, label="More Pages", toggle_class_name="text-white", ) # navbar = dbc.Navbar( dbc.Container( [
'font-size': '6.0rem', 'color': '#4D637F' }), ], className='row twelve columns', style={ 'position': 'relative', 'right': '15px' }), html.Div([html.Div([], className='twelve columns')], className='row'), # Row 2: Hover Panel and Graph html.Div([ html.Div([ html.Img(id='spike_img', src=SPIKE_IMG, width='300px', height='400px'), ], className='three columns', style=dict(marginTop='100px')), html.Div([ dcc.Graph(id='clickable-graph', style=dict(width='600px', height='600px'), config={ 'displayModeBar': False, 'scrollZoom': False, }, clickData=dict(points=[dict(pointNumber=0)]), figure=FIGURE), ], className='nine columns',
{%config%} {%scripts%} {%renderer%} </footer> </body> </html>""" server = app.server app.config.suppress_callback_exceptions = True # we use the Row and Col components to construct the sidebar header # it consists of a title, and a toggle, the latter is hidden on large screens sidebar_header = dbc.Row( [ # dbc.Col(html.H3("Ag Texts", className="display-4000")), dbc.Col(html.Img(src=app.get_asset_url("logo.png"), width="130px", style={'margin-left':'15px'})), dbc.Col( html.Button( # use the Bootstrap navbar-toggler classes to style the toggle html.Span(className="navbar-toggler-icon"), className="navbar-toggler", # the navbar-toggler classes don't set color, so we do it here style={ "color": "rgba(0,0,0,.5)", "bordercolor": "rgba(0,0,0,.1)", }, id="toggle", ), # the column containing the toggle will be only as wide as the # toggle, resulting in the toggle being right aligned width="auto",
{%renderer%} </footer> </body> </html> ''' server = app.server load_figure_template('vapor') app.layout = dbc.Container([ dbc.Row([ dbc.Col([ html.Img(src='/assets/mylogo.png', style={ 'width': '5.5vw', 'margin-top': '5%', 'border-radius': '50%', 'max-width': '100%', 'height': 'auto' }) ]), dbc.Col([ html.H1('Open Seating Restaurant Tracker', style={'textAlign': 'center'}), ], width=11) ]), dbc.Row([ dbc.Col([ html.Label('Approved for Sidewalk Seating:', className='mt-5'), dcc.RadioItems(id='sidewalk-seating', options=[{
html.H2('Finance Explorer', style={ 'display': 'inline', 'float': 'left', 'font-size': '2.65em', 'margin-left': '7px', 'font-weight': 'bolder', 'font-family': 'Product Sans', 'color': "rgba(117, 117, 117, 0.95)", 'margin-top': '20px', 'margin-bottom': '0' }), html.Img( src= "https://s3-us-west-1.amazonaws.com/plotly-tutorials/logo/new-branding/dash-logo-by-plotly-stripe.png", style={ 'height': '100px', 'float': 'right' }, ), ]), dcc.Dropdown(id='stock-ticker-input', options=[{ 'label': s[0], 'value': str(s[1]) } for s in zip(df.Stock.unique(), df.Stock.unique())], value=['YHOO', 'GOOGL'], multi=True), html.Div(id='graphs') ], className="container")
reference = """ [1] He, S., Peng, Y. & Sun, K. SEIR modeling of the COVID-19 and its dynamics. *Nonlinear Dyn* **101**, 1667-1680 (2020). """ fname = os.path.join(os.path.dirname(__file__), 'descriptions', 'SEIR_image.png') encoded_image = base64.b64encode(open(fname, 'rb').read()) app.app.layout = dbc.Container(children=[ html.H1(title), html.H4('Motivation'), dcc.Markdown(motivation), html.H4('Description'), dcc.Markdown(description1), html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()), style={'width': '1000px'}), dcc.Markdown(description2), html.H4('Simulation and real data'), dcc.Markdown(plot_description), html.Br(), fig_slider, # dcc.Markdown(reference), ]) # Get sliders for callback sliders = app.slider_ids() server = app.app.server @app.app.callback(Output('fig', 'figure'),
[ "v0.2.0", "switch to 'tournament' selection, add mutation range slider & validation" ], ["v0.1.1", "reduce max number of variables to 5"], ["v0.1.0", "release on Materials Cloud"], ] about_html = [html.P(i) for i in about.split("\n\n")] layout = [ html.Div( [ html.Div(html.H1(app.title), id="maintitle"), html.H2("About"), html.Img(src="assets/images/logo.png", className="sycologo"), html.Img(src="assets/images/schema.png", className="sycoschema"), html.Div(about_html + [ html.P( html.A(html.B("Watch the tutorial on Youtube"), href='https://youtu.be/i8i4HmEEw4Y', target='_blank')), ], className="info-container"), html.H2("Steps"), html.Div(html.Ol([ html.Li(html.A('Compute diverse set', href='maxdiv/')), html.Li( html.A('Genetic Algorithm: compute next generation', href='ga/')), html.Li(html.A('Determine importance of variables',
"height": "400px", "margin-top": "10px", "margin-right": "0px", "width": "55%" }) # Main page layout layout = html.Div([ # Banner display html.Div([ html.H2('Kapton Data Acquisition', id='title'), html.Img( src= "https://www6.slac.stanford.edu/sites/www6.slac.stanford.edu/files/SLAC_Logo_W.png", style={ 'height': '80%', 'padding-top': 8 }, ) ], className="banner", style={ 'width': '96%', 'margin-top': '2%' }), # Main HTML division html.Div( [ # Element that allows you to update components on a predefined interval
def get_exemplary_equivalents(): return html.Div([ html.Br(), html.Br(), html.Br(), html.Br(), html.Div( [ html.H2("Exemplary Equivalents", style={"textAlign": "center"}), html.Br(), html.P( [ html.Div( [ html.Img( id="house_icon", style={ "height": "20%", "width": "50%" }, ), html.Div([ html.Strong( id="household_fraction", style={ "color": "green", "fontSize": 20, "paddingLeft": "4%", }, ), html.H5( "of weekly", style={"paddingLeft": "3.5%"}, ), html.H5( "American", style={"paddingLeft": "2.8%"}, ), html.H5("household"), html.H5( "emissions", style={"paddingLeft": "1.4%"}, ), ]), ], style={ "float": "left", "width": "25%" }, ), html.Div( [ html.Img( id="car_icon", style={ "height": "43%", "width": "28.5%", # "paddingLeft": "2%", }, ), html.Div([ html.Strong( id="car_miles", style={ "color": "green", "fontWeight": "bold", "fontSize": 20, }, ), html.H5( "driven", style={"paddingLeft": "5.5%"}, ), ]), ], style={ "float": "left", "width": "50%", "paddingLeft": 90, }, ), html.Div( [ html.Img( id="tv_icon", style={ "height": "35%", "width": "53%", "paddingLeft": "5%", }, ), html.Div([ html.Strong( id="tv_time", style={ "color": "green", "fontSize": 20, "paddingLeft": "8%", }, ), html.H5( "of 32-inch", style={"paddingLeft": "5%"}, ), html.H5( "LCD TV", style={"paddingLeft": "10%"}, ), html.H5( "watched", style={"paddingLeft": "6.4%"}, ), ]), ], style={ "float": "right", "width": "25%" }, ), ], style={ "paddingLeft": "20%", "paddingRight": "15%" }, ), ], style={"display": "inline-block"}, ), ])
# adresse_b = st.sidebar.text_input("Lieu d'arrivée") DEFAULT_OPACITY = 0.8 # df = pd.read_csv( # 'https://gist.githubusercontent.com/chriddyp/5d1ea79569ed194d432e56108a04d188/ # raw/a9f9e8076b837d541398e999dcbac2b2826a81f8/gdp-life-exp-2007.csv') app.layout = html.Div( id="root", children=[ html.Div( id="header", children=[ html.Img(id="logo", src=app.get_asset_url("logo_transparent.png"), width='150px'), html.H1(children= "HealthPath - Reduce the caloric pressure around you"), html.P( id="description", children= "HealthPath enables you to find itineraries going through the best natural \ and built environment for your health.", ), ], ), html.Div( id='app-container', children=[ html.Div(
'top': '400px', 'left': 0, 'zIndex': 99999, 'padding': '5px 8px', 'boxShadow': '2px 0 8px #00000026', 'borderRadius': '0 4px 4px 0', 'backgroundColor': 'white' }), # 页面结构 fac.AntdRow( [ fac.AntdCol( html.Img(src=app.get_asset_url('imgs/fac-logo.svg'), style={ 'height': '50px', 'padding': '0 10px', 'marginTop': '7px' }), ), fac.AntdCol( fac.AntdParagraph([ fac.AntdText('feffery-antd-components', strong=True, style={'fontSize': '35px'}), fac.AntdText(f'v{fac.__version__}', style={ 'fontSize': '10px', 'paddingLeft': '2px' }) ])), fac.AntdCol(fac.AntdParagraph([ fac.AntdText(
id="navbar-collapse1", navbar=True, ), ]), className="mb-5", ) # this example that adds a logo to the navbar brand logo = dbc.Navbar( dbc.Container( [ html.A( # Use row and col to control vertical alignment of logo / brand dbc.Row( [ dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")), dbc.Col(dbc.NavbarBrand("Logo", className="ms-2")), ], align="center", className="g-0", ), href="https://plotly.com", style={"textDecoration": "none"}, ), dbc.NavbarToggler(id="navbar-toggler2", n_clicks=0), dbc.Collapse( dbc.Nav( [nav_item, dropdown], className="ms-auto", navbar=True, ),
import dash_bootstrap_components as dbc from dash import html from .util import make_subheading COOKIE = "https://todaysmama.com/.image/t_share/MTU5OTEwMzkyMDIyMTE1NzAz/cookie-monster.png" # noqa offcanvas = html.Div( [ make_subheading("Offcanvas", "offcanvas"), html.P([ dbc.Button("Show the cookie monster", id="offcanvas-button"), dbc.Offcanvas( html.Img(src=COOKIE, style={"width": "100%"}), title="Cookies!", id="offcanvas", is_open=False, ), ]), ], className="mb-4", )
def peak_preview( n_clicks, from_scratch, #peak_opt, #set_rt, ms_selection, wdir): if n_clicks is None: raise PreventUpdate # reset updating after 5 attempts n_attempts = fsc.get(f'{wdir}-update-attempt') if n_attempts is None: n_attempts = 1 elif n_attempts % 5: fsc.set(f'{wdir}-updating', False) # increment counter of attempts fsc.set(f'{wdir}-update-attempt', n_attempts + 1) if fsc.get(f'{wdir}-updating') is True: raise PreventUpdate fsc.set(f'{wdir}-updating', True) prop_id = dash.callback_context.triggered[0]['prop_id'] regenerate = prop_id.startswith('pko-peak-preview-from-scratch') if regenerate: image_path = os.path.join(wdir, 'figures', 'peak-preview') if os.path.isdir(image_path): shutil.rmtree(image_path) if ms_selection == 'peakopt': ms_files = T.get_ms_fns_for_peakopt(wdir) elif ms_selection == 'all': ms_files = T.get_ms_fns(wdir) else: assert False, ms_selection if len(ms_files) == 0: return dbc.Alert( 'No files selected for peak optimization in Metadata tab. Please, select some files in column "PeakOpt".', color='warning') else: logging.info( f'Using {len(ms_files)} files for peak preview. ({ms_selection})' ) targets = T.get_targets(wdir) file_colors = T.file_colors(wdir) n_total = len(targets) sns.set_context('paper') images = [] for i, (peak_label, row) in tqdm(enumerate(targets.iterrows()), total=n_total): fsc.set('progress', int(100 * (i + 1) / n_total)) mz_mean, mz_width, rt, rt_min, rt_max = \ row[['mz_mean', 'mz_width', 'rt', 'rt_min', 'rt_max']] if np.isnan(rt_min) or rt_min is None: rt_min = 0 if np.isnan(rt_max) or rt_max is None: rt_max = 15 image_label = f'{peak_label}_{rt_min}_{rt_max}' _, fn = T.get_figure_fn(kind='peak-preview', wdir=wdir, label=image_label, format='png') if not os.path.isfile(fn) or regenerate: logging.info(f'Regenerating figure for {peak_label}') create_preview_peakshape(ms_files, mz_mean, mz_width, rt, rt_min, rt_max, image_label, wdir, title=peak_label, colors=file_colors) if os.path.isfile(fn): src = T.png_fn_to_src(fn) else: src = None _id = {'index': peak_label, 'type': 'image'} image_id = f'image-{i}' images.append( html.A(id=_id, children=html.Img(src=src, height=300, id=image_id, style={'margin': '10px'}))) images.append( dbc.Tooltip(peak_label, target=image_id, style={'font-size': '50'})) fsc.set(f'{wdir}-updating', False) return images