Electricitymap-contrib: Left panel should be fully expandable
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
systemcatch
All 10 comments
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
corradio
on 3 Oct 2019
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?
systemcatch
on 3 Oct 2019
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
corradio
on 3 Oct 2019
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.)
systemcatch
on 3 Oct 2019
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
corradio
on 3 Oct 2019
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?
fbarl
on 8 May 2020
@fbarl I like the idea of trying your second suggestion and seeing where it takes us.
systemcatch
on 10 May 2020
@systemcatch The change has reached the prod - https://www.electricitymap.org/
Do you think we can close the issue now?
fbarl
on 27 May 2020
I'm closing it but @systemcatch please re-open if you think we should take further action :slightly_smiling_face:
fbarl
on 28 May 2020
@fbarl fine by me! 🔨
systemcatch
on 28 May 2020
Related issues
wojciej
·
3Comments
corradio
·
4Comments
systemcatch
·
5Comments
Alain-Ivadolabs-Ext
·
4Comments
corradio
·
4Comments
Most helpful comment
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:
_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?