Add tooltip over word

dlsucomet · Aug 28, 2023 · 56f2957 · 56f2957
1 parent c993468
commit 56f2957
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 6 deletions.
diff --git a/src/callbacks/home/plot/callbacks.py b/src/callbacks/home/plot/callbacks.py
@@ -1,4 +1,6 @@
-from dash import Input, Output, html
+from dash import Input, Output, State, html
+import dash_bootstrap_components as dbc
+
 import plotly.express as px
 from plotly.graph_objs import *
 from dash.exceptions import PreventUpdate
@@ -23,10 +25,70 @@ def display_word_in_the_sense_plot_description(word):
         Input('submitted-word', 'data')
     )
     def display_word_in_the_source_plot_description(word):
-        if word:
-            return f' {word} '
+        if word:       
+            return [
+                f' {word} ',
+                html.I(className='bi bi-info-circle'),
+                f' '
+            ]
 
         raise PreventUpdate
+
+    @app.callback(
+        Output('word-plot-source-modal', 'children'),
+        Output('word-plot-source-modal', 'is_open'),
+        Input('word-plot-source', 'n_clicks'),
+        State('submitted-word', 'data')
+    )
+    def display_word_tooltip_in_the_source_plot(n_clicks, word):
+        if n_clicks > 0:
+            df = get_word_db(API_URL, word)
+
+            if len(df) >= 1:
+                sense_list = []
+                for i in range(len(df)):
+                    sample_sentence_list = df.iloc[i]['example_sentences']
+
+                    html_sample_sentence = html.Ul()
+                    if len(sample_sentence_list) >= 1:
+                        html_sample_sentence = html.Ul(
+                            children=[
+                                html.Li([
+                                    html.Span('Sample sentence: '),
+                                    html.Span(
+                                        sample_sentence_list[0],
+                                        style={'color': 'gray'}
+                                    )
+                                ])
+                            ]
+                        )
+
+                    sense_list.append(
+                        html.Li([
+                            html.B(f'Sense {i+1}:'),
+                            html_sample_sentence,
+                            html.Br()
+                        ]
+                        )   
+                    )
+
+
+            modal = [
+                dbc.ModalHeader(
+                    dbc.ModalTitle(word)
+                ),
+                dbc.ModalBody([
+                    html.Ul([
+                        html.Li([
+                            s for s in sense_list
+                        ])
+                    ])
+                ])
+            ]
+
+            return modal, True
+
+        raise PreventUpdate
 
     @app.callback(
         Output('sense-dropdown', 'options'),

diff --git a/src/pages/home.py b/src/pages/home.py
@@ -275,7 +275,7 @@
             ], style={'width': '20%', 'marginLeft': '1%', 'marginRight': '1%'},
             ),
 
-            ' of', html.Span(
+            ' of', html.Span('word',
                 id='word-plot-sense', style={'white-space': 'pre'}, className='fw-bold'), 'evolves over time',
 
         ],  className='d-flex flex-row align-middle', style={'alignItems': 'center'}
@@ -293,14 +293,31 @@
 # Plot (Filtered by Source)
 # ==========================
 
+word_plot_by_source_modal = dbc.Modal(
+    id='word-plot-source-modal',
+    is_open=False,
+    size='xl',
+    scrollable=True,
+    centered=True
+)
+
+
 plot_by_source = dbc.Row([
     html.H4('Usage of Word Across Sources Over Time'),
     html.Br(),
     html.Br(),
     html.Div([
         html.Div([
-            'Show me how the usage of ', html.Span(
-                id='word-plot-source', style={'white-space': 'pre'}, className='fw-bold'), 'in',
+            'Show me how the usage of ', 
+            html.Span(
+                children=[
+                    f' word ',
+                    html.I(
+                        className='bi bi-info-circle',
+                    ),
+                    f' '
+                ],
+                id='word-plot-source', n_clicks=0, style={'white-space': 'pre'}, className='fw-bold'), 'in',
             html.Div([
                 dcc.Dropdown(
                     id='source-dropdown',
@@ -313,6 +330,8 @@
         ],  className='d-flex flex-row align-middle', style={'alignItems': 'center'}
         ),
 
+        word_plot_by_source_modal,
+
         dcc.Loading(dcc.Graph(id="graph-source"))
     ])
 ])