Left panel should be fully expandable

[systemcatch]

The left hand panel contains so much interesting information yet it's tiny and cramped.

You have to start zooming in to view it properly, and the fact users have to scroll to see all the charts isn't great.

I propose we make the panel fully expandable (either via toggle or drag) and on expansion rearrange the charts to take full advantage of the extra space.

related to #1204

[corradio]

It's a good idea. I almost feel like we need to rewrite the map in React if we want to achieve this, as I believe we've reached maximum code complexity with the current implementation.

On Thursday, October 3, 2019, Chris notifications@github.com wrote:

The left hand panel contains so much interesting information yet it's tiny and cramped.

https://user-images.githubusercontent.com/30196510/66114569-fea4a880-e5c6-11e9-82f5-d1c86db884ef.png

You have to start zooming in to view it properly, and the fact users have to scroll to see all the charts isn't great.

I propose we make the panel fully expandable (either via toggle or drag) and on expansion rearrange the charts to take full advantage of the extra space.

related to #1204 https://github.com/tmrowco/electricitymap-contrib/issues/1204

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/tmrowco/electricitymap-contrib/issues/2007?email_source=notifications&email_token=AAMUIKGKRT2BU4UJRYVST4DQMW2XNA5CNFSM4I5ARZG2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HPLE3RQ, or mute the thread https://github.com/notifications/unsubscribe-auth/AAMUIKDGA3WACH4X7IXN72TQMW2XNANCNFSM4I5ARZGQ .

--

Olivier Corradi

Founder, CEO

https://www.linkedin.com/in/oliviercorradi https://twitter.com/corradio

tmrow.com

[systemcatch]

It's a good idea. I almost feel like we need to rewrite the map in React if we want to achieve this, as I believe we've reached maximum code complexity with the current implementation.

Is it because the panel expanding across the map forces a redraw again when collapsed?

Maybe we could expand onto a separate page (no map) and just load data into the graphs on that?

[corradio]

It's more that any code that affects how the UI state works is going to be more and more difficult as the code is becoming complex. Sorry to be the bearer of bad news, but I feel like the time to refactor is getting closer!

On Thursday, October 3, 2019, Chris notifications@github.com wrote:

It's a good idea. I almost feel like we need to rewrite the map in React if we want to achieve this, as I believe we've reached maximum code complexity with the current implementation.

Is it because the panel expanding across the map forces a redraw again when collapsed?

Maybe we could expand onto a separate page (no map) and just load data into the graphs on that?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/tmrowco/electricitymap-contrib/issues/2007?email_source=notifications&email_token=AAMUIKFESVMA7DAXB7UKXQTQMW555A5CNFSM4I5ARZG2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAHUZAQ#issuecomment-537873538, or mute the thread https://github.com/notifications/unsubscribe-auth/AAMUIKEUES4FPU3DV4F5V3TQMW555ANCNFSM4I5ARZGQ .

--

Olivier Corradi

Founder, CEO

https://www.linkedin.com/in/oliviercorradi https://twitter.com/corradio

tmrow.com

[systemcatch]

It's more that any code that affects how the UI state works is going to be more and more difficult as the code is becoming complex. Sorry to be the bearer of bad news, but I feel like the time to refactor is getting closer!

Ok but can you explain what is making the code more complex? I also think if you refactor the frontend then it's a good idea to decouple it from your database (not linking zones to geometries so directly.)

[corradio]

yeah I fully agree for the decoupling. What is making the code complex is the current rendering pattern which uses redux without react. For this PR we would need to add a new UI state representing a fully expanded left panel (which is easy) and then make sure the whole UI responds to that state (more difficult as there are many moving parts).

To be clear: I don't think it's blocking per se for this PR, I just think it will increase complexity and we will be forced to refactor eventually. We might already be at the point where a contributor will struggle to make this simple feature due to the existing complexity. But if someone wants to give it a try: go ahead!

On Thu, Oct 3, 2019 at 1:00 PM Chris notifications@github.com wrote:

It's more that any code that affects how the UI state works is going to be more and more difficult as the code is becoming complex. Sorry to be the bearer of bad news, but I feel like the time to refactor is getting closer!

Ok but can you explain what is making the code more complex? I also think if you refactor the frontend then it's a good idea to decouple it from your database (not linking zones to geometries so directly.)

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/tmrowco/electricitymap-contrib/issues/2007?email_source=notifications&email_token=AAMUIKD4TBPTJEPGZ3HLB5TQMXGF7A5CNFSM4I5ARZG2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAH2NLA#issuecomment-537896620, or mute the thread https://github.com/notifications/unsubscribe-auth/AAMUIKHBHHCIAZRREFVJGCTQMXGF7ANCNFSM4I5ARZGQ .

--

Olivier Corradi

Founder, CEO

https://www.linkedin.com/in/oliviercorradi https://twitter.com/corradio

tmrow.com

[fbarl]

FYI Since we've completed migrating the UI code to React recently, now might be a good time to revisit this issue! :sunglasses:

I personally like the idea of giving left panel more focus, but would prefer simplicity over a highly customizable UI. Some more ideas along those lines:

• Display the zone stats on the whole page instead of just left panel alongside the map (the same like it's currently on the mobile, but more responsive)
• Give more width to the left panel on wider screens, e.g. keep the minimal width the same but otherwise make it 25% of the screen width, like on the second screenshot below:

before

after

I think I'd just try going with the latter as it should be much more straightforward and see where that takes us :slightly_smiling_face: WDYT @systemcatch @corradio?

[systemcatch]

@fbarl I like the idea of trying your second suggestion and seeing where it takes us.

[fbarl]

@systemcatch The change has reached the prod - https://www.electricitymap.org/

Do you think we can close the issue now?

[fbarl]

I'm closing it but @systemcatch please re-open if you think we should take further action :slightly_smiling_face:

[systemcatch]

@fbarl fine by me! 🔨