Tabs and Tab component bug-fixes #267

valentijnnieman · 2018-08-17T15:56:50Z

This fixes the bug where the Tabs component breaks if no children props are set. This should fix #265 too.

It also fixes the bug where the 2nd tab was selected by default - #262

(Sorry, I had some trouble with my commits, it looks a bit wonky)

valentijnnieman · 2018-08-17T19:35:42Z

It looks like this is the issue with the committed bundle files: https://unix.stackexchange.com/questions/32001/what-is-m-and-how-do-i-get-rid-of-it

radekwlsk · 2018-08-20T07:34:49Z

Any ETA on new version merging those fixes?

T4rk1n

Should have rebased instead of regenerating all the components. Fix the indentation.

T4rk1n · 2018-08-22T14:53:25Z

src/components/Tabs.react.js

@@ -124,53 +124,62 @@ export default class Tabs extends Component {
  }
  render() {


The indentation is 2 space while the rest of the components is 4 spaces.

T4rk1n · 2018-08-22T14:55:21Z

test/test_integration.py

@@ -456,6 +456,20 @@ def render_content(tab):
        time.sleep(2)
        self.assertEqual(tabs_content.text, 'Test content 1')

+


⚡️ Only one space between methods in classes.

T4rk1n · 2018-08-22T14:56:08Z

test/test_integration.py

@@ -456,6 +456,20 @@ def render_content(tab):
        time.sleep(2)
        self.assertEqual(tabs_content.text, 'Test content 1')

+
+    def test_tabs_with_children_undefined(self):


🐅 I think this test could be improved, right now it doesn't do much. Maybe add the tabs in a callback triggered by a button ?

This test tests if a Tabs component still renders even if children is undefined. Previously, if children was not set, it would break, thus throwing an error, and thus failing this test. This PR fixes #265 as mentioned above.

T4rk1n · 2018-08-22T15:05:47Z

src/components/Tabs.react.js


-    const amountOfTabs = this.props.children.length
+      const amountOfTabs = this.props.children.length


Missing ;

+1, technically we should be using semicolons.

Many more missing -- too many to mention in a review. I recommend adding
/*eslint semi: ["error", "always"]*/
to the top of this file and linting again to catch them

valentijnnieman · 2018-08-22T16:01:48Z

@T4rk1n What good would rebasing have done in this case? I'm seeing a change in end-of-line characters, when I rebuild the Tabs component it automatically rebuild all of the other components because the end-of-line characters where different (see link https://unix.stackexchange.com/questions/32001/what-is-m-and-how-do-i-get-rid-of-it)

T4rk1n · 2018-08-22T16:16:01Z

@valentijnnieman Your right. it put the ^M in the docstrings, probably from when I generated the classes, git doesn't replace the newline in strings automatically.

wbrgss

Recommending some more style changes 🐄

Repeating my 'outdated' comment:

Technically we should be using semicolons.
Many more missing -- too many to mention in a review. I recommend adding
/*eslint semi: ["error", "always"]*/
to the top of this file and linting again to catch them

wbrgss · 2018-08-22T16:25:35Z

src/components/Tabs.react.js


-    const amountOfTabs = this.props.children.length
+      const amountOfTabs = this.props.children.length


+1, technically we should be using semicolons.

Many more missing -- too many to mention in a review. I recommend adding
/*eslint semi: ["error", "always"]*/
to the top of this file and linting again to catch them

wbrgss · 2018-08-22T16:47:43Z

src/components/Tabs.react.js

-      this.props.children = [this.props.children];
-    }
+    if(this.props.children) {
+      if (!Array.isArray(this.props.children)) {


Some inconsistency here (R.is(Array, foo) is used above here). Apparently there's also the undocumented R.isArray.

…components into 265-tabs-without-children

Indentation issues are fixed.

valentijnnieman · 2018-08-22T21:00:18Z

@wbrgss That's why we have .eslintrc :-) we'll update the tooling eventually to auto-format, (#274) but for now I don't want to spend time chasing down missing semi-colons and preventing these important fixes from being released. I'm pretty sure that the latest changes (where I ran Prettier) already caught everything by the way!

wbrgss

💃 from me

T4rk1n · 2018-08-22T21:32:17Z

💃

renanxcortes · 2018-09-07T17:36:43Z

Hi! I deployed a Dash app some weeks ago and everything went okay and worked properly with the tabs, but now I ran the exactly the same code, but now I have to change the tabs whenever I want to update the callback. Do you know what might be happening? Does this PR was supposed to fix this? I`ve looked on #265 also but it didn't solve :(

My layout code is:

app.layout = html.Div(
        html.Div([    
        html.Div([
                    html.H1(children='Web STARS', style={'textAlign': 'center'}),
                    html.H2(children='A web-based version of Space-Time Analysis of Regional Systems',
                            style={'textAlign': 'center'}),
                
                
                dcc.Tabs(id="tabs", style = {'textAlign': 'center', 
                                     'backgroundColor':'lightblue',
                                     #'width': '75%'
                                     },
                children=[
        
                dcc.Tab(label='Presentation', style={'font-weight': 'bold', 'font-size': '120%'}, children=[
                        
                html.H3(children='This is a beta-version of some functions of STARS using Dash from plotly.', 
                style={'textAlign': 'center',
                   'margin-top': '60', 
                   'font-size': '110%'}),
    
                html.Img(src='data:image/png;base64,{}'.format(encoded_image_stars.decode()), 
                 style={'width': '150px',
                'margin-left': 700}),
                
                html.Img(src='data:image/png;base64,{}'.format(encoded_image_plotly.decode()), 
                 style={'width': '150px',
                'margin-left': 700}) 
                        
                        ]),
        
        
                dcc.Tab(label='Spatiotemporal Overview', style={'font-weight': 'bold', 'font-size': '120%'}, children=[
        
#                html.Div([                        
#                        dcc.Checklist(
#                            id='auto-check',
#                            options=[{'label': ' Time Travel Animation ', 'value': 'auto'}],
#                            values=[],
#                        ),
#                        ], style={'padding-top': '200px', 'display': 'inline-block', 'float': 'left'}),
#                
                html.Div([
                        html.P('Select the Year:', style={'margin-top': '5', 
                                                          'font-size': '150%', 
                                                          'font-weight': 'bold',
                                                          'textAlign': 'center'}),
                        dcc.Slider(
                            id='years-slider',
                            min=min(years),
                            max=max(years),
                            value=min(years),
                            marks={str(year): str(year) for year in years_by_step}
                        ),                        
                        dcc.Interval(
                            id='interval-event',
                            interval=24*60*60*1000,
                            n_intervals=0
                        ),
                    
                html.P('Select the Variable to analyze:', style={'margin-top': '35', 'font-size': '150%', 'font-weight': 'bold'}),    
                dcc.RadioItems(
                            id='type_data_selector',
                            options=[
                                {'label': 'Per Capita Relative Ratio (PCR)', 'value': 'pcr'},
                                {'label': 'Raw Income Data', 'value': 'raw'}
                            ],
                            value='pcr',

                            style={'margin-top': '0', 'font-size': '125%'}
                    ),
                    
               html.Div([ 
               html.P('Animation:', style={'margin-top': '20', 'font-size': '150%', 'font-weight': 'bold'})
               ]),
               
               html.Div([
               dcc.Checklist(
                            id='auto-check',
                            options=[{'label': ' Time Travelling ', 'value': 'auto'}],
                            values=[],
                        )]),  
                        
                
                html.Div([
                dcc.Checklist(
                id='spatial_travel-check',
                options=[{'label': ' Spatial Travelling ', 'value': 'auto'}],
                values=[],
                )]),
                
                dcc.Interval(
                    id='spatial_interval-event',
                    interval=24*60*60*1000,
                    n_intervals=0
                ),
                                
                        ], style={'width':1350, 'margin':25, 'float': 'left'}),
                
                html.Div([            
            html.Div([
                        
                            dcc.Graph(
                                id='choropleth-graph'
                            ),
                        
                            dcc.Graph( # ?dcc.Graph to learn more about the properties
                                id='timeseries-graph',
                            clear_on_unhover = 'True' # Sets the slider year when the mouse hover if off the graph
                            ),    
                        
                            # dcc.Graph(
                            #    id='timepath-graph'
                            #),
                                    
                    ], className="four columns"),        
            html.Div([                
                        
                        dcc.Graph(
                                id='scatter-graph'
                            ),
                        
                            html.P('Change the years below:'),
                                
                            dcc.Graph(
                                id='density-graph' 
                            ),
                                               
                            html.P('Choose a pair of years for densities:', style = {'font-weight': 'bold'}),
                            
                            html.Div([
                            dcc.Dropdown(
                                id='initial_years_dropdown',
                                options=years_options,
                                value='1929'
                            ),
                            dcc.Dropdown(
                                id='final_years_dropdown',
                                options=years_options,
                                value='2009'
                            )], className="row"),
                                
                            #   dcc.Graph(
                            #    id='boxplot-graph'
                            #)            
                        
                    ], className="four columns"),        
            html.Div([
                            dcc.Graph(
                                id='timepath-graph'
                            ),
                             dcc.Graph(
                                id='boxplot-graph'
                            ),           
					 ], className="four columns"),    
        ], className="row", style={'width': '100%', 'display': 'inline-block', 'float': 'center'}) ]),
        
        
        dcc.Tab(label='Rank Paths', style={'font-weight': 'bold', 'font-size': '120%'}, children=[
                
                
            html.Div([
            html.P('Select the Rank for the Path:', style = {'font-size': '150%', 'margin-top':25, 'font-weight': 'bold'}),
            
            html.Div([
            dcc.Dropdown(
                            id='rankpath_dropdown',
                            options=ranks_options,
                            value='1'
                        )], style = {'margin-left':600,
                                     'margin-right':600,
                                     'margin-top':10}),
            
            html.Div([
                html.P('Year Highlighted:', style={'margin-top': '25', 'font-size': '150%', 'font-weight': 'bold'}), 
                dcc.Slider(
                            id='years-slider-rank-path',
                            min=min(years),
                            max=max(years),
                            value=min(years),
                            marks={str(year): str(year) for year in years_by_step}
                        )
                ], style={'width': '75%', 
                          'margin-left':50,
                          'margin-right':50,
                          'textAlign': 'center',
                          'display':'inline-block'}),
                    
            html.Div([                           
            dcc.Graph(
                                id='rank-path-graph'
                                
                            )], style = {'margin-left':185,
                                         'margin-right':150,
                                         'margin-top':25})
                    

            
        ], className="twelve columns", style={#'width': '75%',
                                              'textAlign': 'center', 
                                              #'margin-left':150,
                                              #'margin-top':20,
                                              'backgroundColor':'rgb(244, 244, 255)'}) # Or 'lightgray' or look here https://www.w3schools.com/colors/colors_rgb.asp 
                
                
                ]),
        
        
        dcc.Tab(label='Markov and Spatial Markov', style={'font-weight': 'bold', 'font-size': '120%'}, children=[
                
                html.P('Put here the markov features')
                
                ])
        
        
        
        ])
        ])
    ], className='ten columns offset-by-one', 
       style = {'backgroundColor':'rgb(244, 244, 255)'})
)

valentijnnieman added 2 commits August 17, 2018 11:54

Fix useless bundle commits

3dd3d5f

Reupload all bundle files

0b4586f

Fix default selected tab #262

70fe0d1

valentijnnieman changed the title ~~Prevent Tabs from breaking if there are no props.children set on it~~ [WIP] Tabs and Tab component bug-fixes Aug 17, 2018

valentijnnieman changed the title ~~[WIP] Tabs and Tab component bug-fixes~~ Tabs and Tab component bug-fixes Aug 17, 2018

radekwlsk mentioned this pull request Aug 21, 2018

issue updating tabs dynamically? #265

Closed

valentijnnieman requested review from T4rk1n and wbrgss August 22, 2018 13:45

T4rk1n previously requested changes Aug 22, 2018

View reviewed changes

T4rk1n reviewed Aug 22, 2018

View reviewed changes

Small code quality fixes

916f540

wbrgss reviewed Aug 22, 2018

View reviewed changes

valentijnnieman added 3 commits August 22, 2018 12:55

Setup prettier and update ESlint

a40c4b8

Added babel-eslint dependency

5b31e5f

Tabs.value can now be updated to change the currently visible Tab

dae4a15

valentijnnieman mentioned this pull request Aug 22, 2018

Can't change Tab via callback to Tabs value prop #271

Closed

valentijnnieman added 4 commits August 22, 2018 14:44

Merge branch 'setup_prettier' of https://github.com/plotly/dash-core-…

0aeb3c4

…components into 265-tabs-without-children

Run Prettier so code quality is up to standards

471899c

Remove new-cap rule from eslint

e6061e4

Revert Prettier setup for now

d78adef

This was referenced Aug 22, 2018

Nested Tabs #273

Closed

Bug related to tabs that contain different number of subtabs or subtabs with different values and IDs #272

Closed

wbrgss approved these changes Aug 22, 2018

View reviewed changes

valentijnnieman added 2 commits August 22, 2018 17:44

Added version changes to CHANGELOG

c972f01

Updated version to 0.27.2

e2b8f7e

valentijnnieman merged commit 26b2c62 into master Aug 22, 2018

valentijnnieman deleted the 265-tabs-without-children branch August 22, 2018 21:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tabs and Tab component bug-fixes #267

Tabs and Tab component bug-fixes #267

valentijnnieman commented Aug 17, 2018 •

edited

valentijnnieman commented Aug 17, 2018

radekwlsk commented Aug 20, 2018

T4rk1n left a comment

T4rk1n Aug 22, 2018

T4rk1n Aug 22, 2018

T4rk1n Aug 22, 2018

valentijnnieman Aug 22, 2018

T4rk1n Aug 22, 2018

wbrgss Aug 22, 2018 •

edited

valentijnnieman commented Aug 22, 2018

T4rk1n commented Aug 22, 2018

wbrgss left a comment •

edited

wbrgss Aug 22, 2018 •

edited

wbrgss Aug 22, 2018

valentijnnieman commented Aug 22, 2018

wbrgss left a comment

T4rk1n commented Aug 22, 2018

renanxcortes commented Sep 7, 2018 •

edited

		@@ -124,53 +124,62 @@ export default class Tabs extends Component {
		}
		render() {

		@@ -456,6 +456,20 @@ def render_content(tab):
		time.sleep(2)
		self.assertEqual(tabs_content.text, 'Test content 1')


		const amountOfTabs = this.props.children.length
		const amountOfTabs = this.props.children.length

Tabs and Tab component bug-fixes #267

Tabs and Tab component bug-fixes #267

Conversation

valentijnnieman commented Aug 17, 2018 • edited

valentijnnieman commented Aug 17, 2018

radekwlsk commented Aug 20, 2018

T4rk1n left a comment

Choose a reason for hiding this comment

T4rk1n Aug 22, 2018

Choose a reason for hiding this comment

T4rk1n Aug 22, 2018

Choose a reason for hiding this comment

T4rk1n Aug 22, 2018

Choose a reason for hiding this comment

valentijnnieman Aug 22, 2018

Choose a reason for hiding this comment

T4rk1n Aug 22, 2018

Choose a reason for hiding this comment

wbrgss Aug 22, 2018 • edited

Choose a reason for hiding this comment

valentijnnieman commented Aug 22, 2018

T4rk1n commented Aug 22, 2018

wbrgss left a comment • edited

Choose a reason for hiding this comment

wbrgss Aug 22, 2018 • edited

Choose a reason for hiding this comment

wbrgss Aug 22, 2018

Choose a reason for hiding this comment

valentijnnieman commented Aug 22, 2018

wbrgss left a comment

Choose a reason for hiding this comment

T4rk1n commented Aug 22, 2018

renanxcortes commented Sep 7, 2018 • edited

valentijnnieman commented Aug 17, 2018 •

edited

wbrgss Aug 22, 2018 •

edited

wbrgss left a comment •

edited

wbrgss Aug 22, 2018 •

edited

renanxcortes commented Sep 7, 2018 •

edited