Added a text block to show the current time range selection. Closes #22

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__':

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;