From a742f3f7f67ba6a5a34b118f2c814981e663eb90 Mon Sep 17 00:00:00 2001
From: Abel Serrano Juste <akronix5@gmail.com>
Date: Mon, 3 Sep 2018 17:47:05 +0200
Subject: [PATCH] Added a text block to show the current time range selection.
 Closes #22

---
 main.py        | 39 +++++++++++++++++++++++++++++++++++++--
 styles/app.css | 11 +++++++++++
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/main.py b/main.py
index 33cd77c..b0c73ef 100644
--- a/main.py
+++ b/main.py
@@ -178,8 +178,12 @@ def select_time_axis_control(init_relative_time):
     def date_slider_control():
         return (html.Div(id='date-slider-div', className='container',
                 children=[
-                    html.Strong(
-                        'Time interval (months)'),
+                    html.Span(id='slider-header',
+                    children=[
+                        html.Strong(
+                            'Time interval (months):'),
+                        html.Span(id='display-slider-selection')
+                    ]),
 
                     html.Div(id='date-slider-container',
                         style={'height': '35px'},
@@ -540,6 +544,37 @@ def update_slider(time_axis_json, selected_timeaxis, slider_previous_state):
                     )
                 )
 
+    @app.callback(
+        Output('display-slider-selection', 'children'),
+        [Input('dates-slider', 'value')],
+        [State('time-axis-selection', 'value'),
+        State('time-axis', 'children')]
+    )
+    def display_slider_selection(slider_selection, selected_timeaxis, time_axis_json):
+        """
+        Shows the selected time range from the slider in a text block.
+        slider_selection -- Selection of the Range Slider.
+        """
+
+        if not slider_selection:
+            return;
+
+        relative_time = selected_timeaxis == 'relative'
+
+        if relative_time:
+            return('From month {} to month {} after the birthdate of the oldest wiki.'.
+                format(slider_selection[0], slider_selection[1]))
+
+        # In case we are displaying calendar dates, then we have to do a
+        # conversion from "relative dates" to the actual 'natural' date.
+        else:
+            new_timerange = [0,0]
+            time_axis = pd.DatetimeIndex(json.loads(time_axis_json))
+            new_timerange[0] = time_axis[slider_selection[0]].strftime('%b %Y')
+            new_timerange[1] = time_axis[slider_selection[1]].strftime('%b %Y')
+            return('From {} to {} '.format(new_timerange[0], new_timerange[1]))
+
+
     return # bind_callbacks
 
 if __name__ == '__main__':
diff --git a/styles/app.css b/styles/app.css
index cee3651..6493370 100644
--- a/styles/app.css
+++ b/styles/app.css
@@ -67,6 +67,17 @@ input[type=checkbox] {
     display: inline-block;
 }
 
+#slider-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-right: 15px;
+}
+
+#display-slider-selection {
+    font-size: 12px;
+}
+
 .selector {
     padding: 10px;
     background: #ededed78;