feat: adding a new 'one-pager' dashboard in homepage and revamping navbar #10

Akilditu · 2020-10-31T19:20:25Z

Aim of the Pull Request

Hi Everyone

This PR aims at :

Gathering both alerts and risks dashboards into a main one on homepage and initiate new interaction abilities
Revamping Navbar design

More detailed info

The Navbar now incorporates PyroNear logo with a black background, a new CTA style and a centered text retreiving the username logged :

Both risks and alerts maps are gathered on the same dashboard, with a filter control box on the left with the ability to :

Switch from Alerts to Risks maps
Apply the Satellite or "Schématique" layers to both maps
Filter opacity for risks map (filter already existing on /risks page)

As you may notice meteo graphs under the map are not displayed anymore but this can be done setting the meteo_graphs() display param to True in homepage.py

Thanks for reviewing 👍

incorporating pyronear logo, black colored background, new cta style and a centered text retreiving username logged

brought both alerts and risks dashboards onto hompage, adding a filter box gathering existing filters and adding some. Meteo graphs are hidden but can be displayed if desire

frgfm · 2020-11-01T12:35:09Z

@Akilditu small consideration: there will be some assets that we have to put in the repository, but for logos of the organizations, I would suggest that there are hosted remotely and that our different apps only use the URL.

pechouc

Thanks a lot @Akilditu for this PR!

I have left a few comments, mostly typo corrections and two questions. But since everything seems up and running and we had already discussed these modifications, I approved it 😊

pechouc · 2020-11-01T14:12:19Z

app/homepage.py

+def choose_map_style(n_clicks):
+
+    # Because we start with the alerts map, if the number of clicks is even, this means that
+    # we are still using the alerts map and we may want to risk one


Suggested change

# we are still using the alerts map and we may want to risk one

# we are still using the alerts map and we may want to switch to the risks one

pechouc · 2020-11-01T14:13:36Z

app/homepage.py


-# instantiating the map object from alerts.py: to be modified depending on
-# what we expect the user to view first on homepage
+# Instantiating the alert map object from alerts.py and setting it a the default map object:


Suggested change

# Instantiating the alert map object from alerts.py and setting it a the default map object:

# Instantiating the alert map object from alerts.py and setting it as the default map object:

pechouc · 2020-11-01T14:14:40Z

app/homepage.py

-                                       {'label': 'Gard', 'value': 'Gard'},
-                                       {'label': 'Landes', 'value': 'Landes'}
-                                       ]))
+# Instantiating map layers button object from alters.py


Suggested change

# Instantiating map layers button object from alters.py

# Instantiating map layers button object from alerts.py

pechouc · 2020-11-01T14:15:09Z

app/homepage.py

+# Instantiating map style button object
+map_style_button = build_map_style_button()
+
+# Instantiating meteo graphs, set to True to display them under the map, Fale to hide them


Suggested change

# Instantiating meteo graphs, set to True to display them under the map, Fale to hide them

# Instantiating meteo graphs, set to True to display them under the map, False to hide them

Thanks, I will fix all this missprints in the next commit

pechouc · 2020-11-01T14:26:43Z

app/navbar.py

+            dbc.DropdownMenuItem('Niveaux de Risque', href='risks'),
+        ],
+        label="Tableaux de bord",
+        className="ml-auto flex-nowrap mt-3 mt-md-0 btn-group dropleft",


I am not sure to understand what the className defined here (and I see a similar one in the instantiation of the user_item object) is designed for and where it comes from. Could you please describe briefly its use or point us to any related resource? Many thanks!

Hi @pechouc here some explanations about those bootstrap css classes :

ml-auto : margin left auto in regards of other columns on the same row

flex-nowrap force inline alignment as explained here

mt et mt-md for margin top

btn-group dropleft to ensure that the dropdown will occur on the left (to match responsive needs) as detailed here

Hope that helps

pechouc · 2020-11-01T14:42:09Z

app/homepage.py

-                                       {'label': 'Landes', 'value': 'Landes'}
-                                       ]))
+# Instantiating map layers button object from alters.py
+map_layers_button = build_layer_style_button()


This comment is more of a question I am asking myself than a change request. Would it be cleaner to directly call the functions instead of their output when building the body object?

This might not be clear said this way but so far, we generally create a new variable (here map_layers_button) which simply contains the output of the related function (build_layer_style_button) and then, we call it without any particular transformation in the app layout block (at line 123 in this case). Equivalently, we could directly call the function at line 123 and skip the creation of the object.

I don't know what the best practice is here and I don't have any strong opinion, but I guess that we would spare quite a few lines and variables by doing so, which can only make our code more readable, right?

Totally agreed @pechouc, to be honest i followed this 'instantiation logic' to ensure code unity with respect to what has been done so far :)

I think that doing a proper PR for this refactoring task would be a good way to deal with it right ?

Yes, I guess this logic is inherited from the code initially provided with the tutorials. And fully agreed with the idea of a separate PR!

Akilditu · 2020-11-01T19:11:48Z

@Akilditu small consideration: there will be some assets that we have to put in the repository, but for logos of the organizations, I would suggest that there are hosted remotely and that our different apps only use the URL.

I agree @frgfm , we could consider adding this logo version to the pyronear.github.io repo so that it will be hosted on pyronear.org. What do you think ?

frgfm · 2020-11-01T23:02:00Z

I agree @frgfm , we could consider adding this logo version to the pyronear.github.io repo so that it will be hosted on pyronear.org. What do you think ?

Yes, sounds like our best option here!

frgfm · 2020-11-02T15:55:13Z

Here you go @Akilditu : https://pyronear.org/img/logo_letters_orange.png

Akilditu · 2020-11-02T16:02:05Z

Here you go @Akilditu : https://pyronear.org/img/logo_letters_orange.png

Yes, will commit this and then it will be ready to merge 👍

… on pyronear.org

Akilditu · 2020-11-03T10:06:54Z

@frgfm, @pechouc I think that we're good to merge ?

frgfm · 2020-11-03T10:15:26Z

@frgfm, @pechouc I think that we're good to merge ?

I'll let @pechouc give his input on this, as I only took a look at the logo part!
One small thing to consider later: we might have to consider multilanguage options (i.e. having text content stored somewhere in different languages) at some point. Perhaps we should check what our options are here to avoid having heavy design constraints later on (in another issue/PR of course).

Akilditu · 2020-11-03T11:22:48Z

One small thing to consider later: we might have to consider multilanguage options (i.e. having text content stored somewhere in different languages) at some point. Perhaps we should check what our options are here to avoid having heavy design constraints later on (in another issue/PR of course).

@frgfm This could indeed be an interesting feature to have multilang but I m not sure about the priority of this. I actually think that the next big step in term of design / functional constraints will be determined by the interviews to come with firemen.
As they are the main users of this platform and mostly french for now I guess we could consider this more as a mid / long-term matter.

VincGargasson

Same as PE, as it works and we already discussed it, I have nothing special to add.
Will see in another PR how we determine if display is true or not (button for user?).
Anyway, thanks for huge improvement Seb 👍

Akilditu added 4 commits October 31, 2020 19:12

adding pyronear logo for navbar

b6ffde7

feat: designing a new navbar

f5f2a2a

incorporating pyronear logo, black colored background, new cta style and a centered text retreiving username logged

feat: created a one page dashboard on homepage

a3fc215

brought both alerts and risks dashboards onto hompage, adding a filter box gathering existing filters and adding some. Meteo graphs are hidden but can be displayed if desire

fix: fixing a miss-operating callback

16fb89e

Akilditu requested review from VincGargasson, abdi-adel, frgfm, nrslt and pechouc October 31, 2020 19:20

Akilditu self-assigned this Nov 1, 2020

frgfm added the type: enhancement New feature or request label Nov 1, 2020

frgfm added this to the 0.1.0 milestone Nov 1, 2020

pechouc previously approved these changes Nov 1, 2020

View reviewed changes

fix: corrected some typo issues in comments

d0b8714

Akilditu dismissed pechouc’s stale review via d0b8714 November 2, 2020 10:23

Akilditu added 2 commits November 3, 2020 10:54

feat: switching pyro_logo call from the one in repo to the hosted one…

4bb3088

… on pyronear.org

feat: deleted repo stored pyro_logo png

1ed7ff7

fix: deleted unused Path import

b46ad7d

Akilditu requested a review from pechouc November 3, 2020 11:23

VincGargasson approved these changes Nov 3, 2020

View reviewed changes

Akilditu merged commit 84a063b into pyronear:master Nov 3, 2020

Akilditu deleted the new-hp-and-navbar branch November 3, 2020 13:37

pechouc mentioned this pull request Nov 5, 2020

Light Code Refactoring #12

Closed

	# we are still using the alerts map and we may want to risk one
	# we are still using the alerts map and we may want to switch to the risks one

	# Instantiating the alert map object from alerts.py and setting it a the default map object:
	# Instantiating the alert map object from alerts.py and setting it as the default map object:

	# Instantiating map layers button object from alters.py
	# Instantiating map layers button object from alerts.py

	# Instantiating meteo graphs, set to True to display them under the map, Fale to hide them
	# Instantiating meteo graphs, set to True to display them under the map, False to hide them

Uh oh!

feat: adding a new 'one-pager' dashboard in homepage and revamping navbar #10

feat: adding a new 'one-pager' dashboard in homepage and revamping navbar #10

Uh oh!

Conversation

Akilditu commented Oct 31, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Aim of the Pull Request

More detailed info

Uh oh!

frgfm commented Nov 1, 2020

Uh oh!

pechouc left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Akilditu Nov 1, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Akilditu Nov 1, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Akilditu commented Nov 1, 2020

Uh oh!

frgfm commented Nov 1, 2020

Uh oh!

frgfm commented Nov 2, 2020

Uh oh!

Akilditu commented Nov 2, 2020

Uh oh!

Akilditu commented Nov 3, 2020

Uh oh!

frgfm commented Nov 3, 2020

Uh oh!

Akilditu commented Nov 3, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

VincGargasson left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Akilditu commented Oct 31, 2020 •

edited

Loading

pechouc left a comment •

edited

Loading

Akilditu Nov 1, 2020 •

edited

Loading

Akilditu Nov 1, 2020 •

edited

Loading

Akilditu commented Nov 3, 2020 •

edited

Loading