# - * -coding: utf - 8 - * -

import base64

import time

import dash

import dash_core_components as dcc

import dash_html_components as html

import dash_daq as daq

import pandas as pd

import numpy as np

import numpy as np

import cv2

# prepare the data--begin

cases = pd.read_csv('../data/valid-acl.csv',

                    header=None,

                    names=['Case', 'Abnormal'],

                    dtype={

                        'Case': str,

                        'Abnormal': np.int64

                    }

                    )

case_list = cases['Case'].tolist()

predictions = pd.read_csv('./val_data.csv')

# prepare the data--end

app = dash.Dash()

# Boostrap CSS.

app.css.append_css({

    'external_url': "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

})  # noqa: E501

app.layout = html.Div(

    [

        html.Div(

            html.H1(children='Interpretation of MRNet models through Class Activation Maps (CAM)',

                    style={

                        'text-align': 'center'

                    }

                    ),

        ),

        html.Div(

            [

                html.Div(

                    [

                        html.P('Select an MRI exam:'),

                        html.Div([

                            dcc.Dropdown(

                                id='cases',

                                options=[{

                                    'label': case,

                                    'value': case

                                }

                                    for case in case_list

                                ],

                                placeholder="Pick a case",

                                clearable=False

                            )

                        ],

                            style={

                            'margin-bottom': 20

                        }

                        ),

                    ],

                    className='col-3',

                    style={

                        'margin-top': '10'

                    }

                ),

                html.Div([

                    html.Div([

                        html.Div([

                            html.P('Select true labels :'),

                            dcc.RadioItems(

                                id="label_radioitems",

                                options=[

                                    {'label': 'Positive (ACL tear)',

                                     'value': 'acl'},

                                    {'label': 'Negative (Normal)',

                                     'value': 'normal'},

                                ],

                                value='acl',

                                labelStyle={'display': 'inline-block'}

                            ),

                        ],

                            style={'float': 'left', 'width': '45%'}

                        ),

                        html.Div([

                            html.P('Select predicted labels :'),

                            dcc.RadioItems(

                                id="pred_radioitems",

                                options=[

                                    {'label': 'Positive (ACL tear)',

                                     'value': 'acl'},

                                    {'label': 'Negative (Normal)',

                                     'value': 'normal'},

                                ],

                                value='acl',

                                labelStyle={'display': 'inline-block'}

                            ),

                        ]

                        ),

                    ]),

                ],

                    className='col-6'

                ),

                html.Div([

                    html.Div(id="number_of_cases"),

                    html.Span(

                        "txt",

                        id="label_badge",

                        className="badge badge-success badge-large",

                        style={'font-size': '15px'}

                    ),

                ],

                    className='col-3'

                )

            ],

            className="row alert alert-success",

        ),

        html.Div([

            html.Div([

                html.P(id='summary', style={'font-size': '20px'}),

                html.Div([

                    html.Div('This probability is a weighted average of the three probabilities of tears over each plane', style={

                        'float': 'left', 'font-size': '20px'}),

                    html.Div('Slide over the slices of each MRI to inspect highlighted regions of tear as depicted by CAMs', style={

                        'float': 'left', 'font-size': '20px'}),

                ],

                )

            ],

                className="col-12 alert alert-info"),

        ],

            className='row'

        ),

        html.Hr(),

        html.Div(

            [

                html.Div([

                    html.Div([

                        dcc.Slider(id='slider_axial', updatemode='drag')

                    ],

                        style={'margin-right': '5px'}

                    ),

                    html.Hr(),

                    html.P(id="score_axial", style={'text-align': 'center'}),

                    html.Div([

                        html.Div([

                            html.Img(

                                id="slice_axial",

                            ),

                        ],

                            style={'float': 'left', 'margin-right': '5px'}

                        ),

                        html.Div([

                            html.Img(

                                id="cam_axial",

                            ),

                        ],

                        )

                    ],

                    ),

                    html.P(id="title_axial", style={'text-align': 'center'})

                ],

                    className="col-4"

                ),

                html.Div([

                    html.Div([

                        dcc.Slider(id='slider_coronal', updatemode='drag')

                    ],

                        style={'margin-right': '5px'}

                    ),

                    html.Hr(),

                    html.P(id="score_coronal", style={'text-align': 'center'}),

                    html.Div([

                        html.Div([

                            html.Img(

                                id="slice_coronal",

                            ),

                        ],

                            style={'float': 'left', 'margin-right': '5px'}

                        ),

                        html.Div([

                            html.Img(

                                id="cam_coronal",

                            ),

                        ],

                        )

                    ],

                    ),

                    html.P(id="title_coronal", style={'text-align': 'center'})

                ],

                    className="col-4"

                ),

                html.Div([

                    html.Div([

                        dcc.Slider(id='slider_sagittal', updatemode='drag')

                    ]),

                    html.Hr(),

                    html.P(id="score_sagittal", style={

                           'text-align': 'center'}),

                    html.Div([

                        html.Div([

                            html.Img(

                                id="slice_sagittal",

                            ),

                        ],

                            style={'float': 'left', 'margin-right': '5px'}

                        ),

                        html.Div([

                            html.Img(

                                id="cam_sagittal",

                            ),

                        ],

                        )

                    ],

                    ),

                    html.P(id="title_sagittal", style={'text-align': 'center'})

                ],

                    className="col-4"

                ),

            ],

            className='row'

        )

    ],

    className='container-fluid',

)

if __name__ == '__main__':

    app.run_server(debug=True, port=8060)