Embed side panels in map view #784

Gauss-Taylor-Euler · 2025-06-24T14:52:34Z

Embedded panels

Embedded side panels, resolves #824

Demo :

demo_panel_embed.mp4

Checklist

PR has a descriptive title and content.
PR description contains references to any issues the PR resolves, e.g. Resolves #XXX.
PR has one of the labels: documentation, bug, enhancement, feature, maintenance
Checks are passing.

📚 Documentation preview: https://jupytergis--784.org.readthedocs.build/en/784/
💡 JupyterLite preview: https://jupytergis--784.org.readthedocs.build/en/784/lite

github-actions · 2025-06-24T14:52:46Z

👈 Launch a Binder on branch Gauss-Taylor-Euler/jupytergis/moveable_panel

github-actions · 2025-06-24T15:32:21Z

Integration tests report: appsharing.space

mfisher87 · 2025-06-24T15:42:29Z

Dang, Guy, that was quick! Nice job! (I'm working on reviewing your other PR right now 😸 )

Is this ready for a full review? If not, can you please convert to draft?

I think to make this releasable we need these panels to be completely closable, and perhaps off-by-default.

It'd be nice to come up with a descriptive name for each panel. For the left panel (layers and filters), I think we can call it the "Layers menu" and use a "layers" icon for the button to open it . The right panel is a bit harder. It includes object (layer & source) properties, annotations, and the identify results. What could we call that? "Details menu"? A "cog" icon? Or a "list" icon?

What do you all think?

I like the idea of completely removing the existing side panel icons so we can have a dedicated menu for each instance of JupyterGIS, as the user could have many open (widget, sidepanel, or project file) and it can be confusing when the side panel only shows information for one at a time. Nice :)

Gauss-Taylor-Euler · 2025-06-24T16:06:16Z

Dang, Guy, that was quick! Nice job! (I'm working on reviewing your other PR right now 😸 )

Is this ready for a full review? If not, can you please convert to draft?

I think to make this work in the main branch we need these panels to be completely closable, and perhaps off-by-default.

It'd be nice to come up with a descriptive name for each panel. For the left panel (layers and filters), I think we can call it the "Layers menu" and use a "layers" icon for the button to open it . The right panel is a bit harder. It includes object (layer & source) properties, annotations, and the identify results. What could we call that? "Details menu"? A "cog" icon? Or a "list" icon?

What do you all think?

I like the idea of completely removing the existing side panel icons so we can have a dedicated menu for each instance of JupyterGIS, as the user could have many open (widget, sidepanel, or project file) and it can be confusing when the side panel only shows information for one at a time. Nice :)

It isn't ready for a review, I have converted it to a draft request, I don't really have any thoughts for the names of the panels.

martinRenou · 2025-07-02T12:50:50Z

Happy to be on the same page @mfisher87 !

I really like the cleanup that this PR involves. No need to mess around with document trackers and all anymore.

Concerning the UX/UI, I had the following in mind (I'll also share ideas by @trungleduc here)

Panels have a toolbar with buttons:
- "-" button to minimize
- "TBD" button to make it floating/fixed (fixed by default makes sense to me)
Panels will not have those accordions tabs anymore (I hate them BTW), but use real tabs now. That will be less space taken vertically.

Note: we may want to explore wrapping those in an OpenLayers control component, that way it's more integrated into the map, does not conflict with other controls (zoom in/out), and would be visible when making the map fullscreen using the fullscreen control

Taking inspiration from Felt's UI really, I feel like they've done things right:

Screencast.from.2024-06-20.09-05-25.mp4

package.json

martinRenou · 2025-07-02T12:15:09Z

packages/base/src/Lumino.tsx

+    }
+  }, [ref, children]);
+  return (
+    <div id={id} ref={ref} style={{ height: height, minHeight: height }} />


Suggested change

<div id={id} ref={ref} style={{ height: height, minHeight: height }} />

<div ref={ref} style={{ height: height, minHeight: height }} />

martinRenou · 2025-07-02T12:16:20Z

packages/base/src/Lumino.tsx

+};
+
+Lumino.defaultProps = {
+  id: 'lumino-id',


I wouldn't use an id for that component, ids are supposed to be unique in the page and it looks like this code will most eventually make duplicates.

Suggested change

id: 'lumino-id',

mfisher87 · 2025-07-03T15:09:58Z

Panels will not have those accordions tabs anymore (I hate them BTW), but use real tabs now

💯 💯 💯

One thing I think we should watch out for is that some updates may not be visible to the user anymore. For example the "Annotations" tab might be deselected most of the time. When the annotations list changes, it would be really nice to present an indicator that this tab has new information, e.g. like GitHub presents a blue circle on the notifications button when there are new notifications. When using the "identify" tool, I think we should just auto-open that tab when the user identifies a feature; they always want to see the result of that operation (or they wouldn't be doing it ;) ).

martinRenou · 2025-07-04T07:49:47Z

Agreed 100% with everything you said.

We were having a pair programming session with @Gauss-Taylor-Euler yesterday, we'll move all this code to pure react components along the way, no more lumino

Gauss-Taylor-Euler · 2025-07-11T13:27:16Z

Demo.panels.mp4

martinRenou

Thanks! I made some more suggestions

packages/base/src/panelview/leftpanel.tsx

packages/base/src/stacBrowser/components/StacPanelView.tsx

packages/base/style/stacBrowser.css

packages/base/src/panelview/components/layers.tsx

Gauss-Taylor-Euler · 2025-07-15T14:46:10Z

Thanks! I made some more suggestions

No problem I am looking into it.

Gauss-Taylor-Euler · 2025-07-17T12:04:12Z

demo_panel_embed.mp4

trungleduc · 2025-07-17T13:25:28Z

demo_panel_embed.mp4

I think adding shadow effect to the panels can make it look better.

Gauss-Taylor-Euler · 2025-07-17T13:38:35Z

shadow-demo.mp4

packages/base/src/panelview/annotationPanel.tsx

martinRenou

Some more things I noticed while testing:

The panels should take 80% of the available height and we should be able to scroll through the tabs content if it goes over that available space:

See how we can't scroll through identified features if there are too many (it goes out of screen)

The temporal component is now visible anymore (hidden by the panels)

For now we could probably live with setting z-index: 99 on the temporal component so that it goes on top of the panels, but in a later PR we should make something nicer (maybe the temporal component should be yet another tab)

packages/base/src/panelview/leftpanel.tsx

packages/base/style/stacBrowser.css

mfisher87 · 2025-07-22T15:36:25Z

Beautiful 🤩

maybe the temporal component should be yet another tab

Today in the sync meeting, Martin and I discussed that perhaps the current "Identify" panel could be an "Active tool" panel; depending on which tool the user selects, the UI for that tool can go there. E.g. if "identify" mode is active, it works as it does now; if "time controller" is active, it shows the time controller UI. (To be clear: not for this PR; created #827)

Gauss-Taylor-Euler · 2025-07-28T14:25:27Z

bot please update snapshots!!!

mfisher87 · 2025-07-28T15:01:21Z

Hey Guy, just wanted to double-check you noticed some of my review comments are hidden by GitHub under "N hidden conversations"?

Gauss-Taylor-Euler · 2025-07-28T15:03:48Z

Yes I looked into them , normally all of them are resolved.

mfisher87 · 2025-07-29T21:14:59Z

Yes I looked into them , normally all of them are resolved.

Hey Guy, one missed suggestion hidden by the GitHub UI. You can see the hidden suggestions by clicking "Load more..." above:

#784 (comment)

It can help to keep track of them if you mark them as resolved as you go!

Gauss-Taylor-Euler · 2025-07-30T13:13:33Z

bot please update snapshots!!

martinRenou · 2025-07-30T14:45:07Z

Triggering CI

mfisher87

Looks great, awesome work!

Gauss-Taylor-Euler · 2025-07-31T22:47:36Z

bot please update snapshots!!

arjxn-py · 2025-08-01T06:13:16Z

Triggering CI

martinRenou · 2025-08-01T07:31:48Z

Let's goooo! Thanks a ton @Gauss-Taylor-Euler for this, and thanks to @mfisher87 for the in-depth reviews ❤️

arjxn-py · 2025-08-01T07:39:19Z

Great Success everyone 🎉 🚀
Thanks @Gauss-Taylor-Euler

mfisher87 · 2025-08-01T17:48:07Z

Awesome work @Gauss-Taylor-Euler !!

mfisher87 added the enhancement New feature or request label Jun 24, 2025

Gauss-Taylor-Euler marked this pull request as draft June 24, 2025 16:03

martinRenou mentioned this pull request Jul 1, 2025

New view mode: full-window map without JupyterLab controls #761

Closed

martinRenou reviewed Jul 3, 2025

View reviewed changes

Gauss-Taylor-Euler force-pushed the moveable_panel branch from 3c2f5ea to dd46462 Compare July 3, 2025 12:35

Gauss-Taylor-Euler force-pushed the moveable_panel branch 2 times, most recently from 4c05acb to b891b9b Compare July 10, 2025 14:09

Gauss-Taylor-Euler force-pushed the moveable_panel branch from 0265dc1 to 081f74d Compare July 15, 2025 11:49

martinRenou requested changes Jul 15, 2025

View reviewed changes

Gauss-Taylor-Euler changed the title ~~Floating side panels~~ Embedded side panels Jul 17, 2025

Gauss-Taylor-Euler marked this pull request as ready for review July 17, 2025 13:06

Gauss-Taylor-Euler force-pushed the moveable_panel branch 2 times, most recently from c67caa6 to 94cf081 Compare July 17, 2025 13:25

martinRenou reviewed Jul 18, 2025

View reviewed changes

packages/base/src/panelview/annotationPanel.tsx Outdated Show resolved Hide resolved

martinRenou requested changes Jul 21, 2025

View reviewed changes

packages/base/src/panelview/leftpanel.tsx Outdated Show resolved Hide resolved

packages/base/style/stacBrowser.css Outdated Show resolved Hide resolved

martinRenou moved this to In Progress in JupyterGIS Prioritization Jul 22, 2025

martinRenou added this to JupyterGIS Prioritization Jul 22, 2025

Add panels to notebook view

daaaaee

Gauss-Taylor-Euler force-pushed the moveable_panel branch from 1aa6500 to daaaaee Compare July 28, 2025 14:24

martinRenou closed this Jul 28, 2025

martinRenou reopened this Jul 28, 2025

Made suggested changes

db109ba

Gauss-Taylor-Euler force-pushed the moveable_panel branch from 297761d to db109ba Compare July 30, 2025 10:11

Solve annotations tests

8d65803

Gauss-Taylor-Euler force-pushed the moveable_panel branch from 736b3ba to 8d65803 Compare July 30, 2025 13:13

github-actions bot added 2 commits July 30, 2025 14:12

Update Playwright Snapshots

a011daa

Update Playwright Snapshots

589032b

martinRenou closed this Jul 30, 2025

martinRenou reopened this Jul 30, 2025

mfisher87 approved these changes Jul 31, 2025

View reviewed changes

Solved integration tests

3165569

Update Playwright Snapshots

52bfc7d

arjxn-py closed this Aug 1, 2025

arjxn-py reopened this Aug 1, 2025

martinRenou approved these changes Aug 1, 2025

View reviewed changes

martinRenou merged commit 4d0075a into geojupyter:main Aug 1, 2025
13 checks passed

	<div id={id} ref={ref} style={{ height: height, minHeight: height }} />
	<div ref={ref} style={{ height: height, minHeight: height }} />

Embed side panels in map view #784

Embed side panels in map view #784

Uh oh!

Conversation

Gauss-Taylor-Euler commented Jun 24, 2025 • edited by mfisher87 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Embedded panels

Checklist

Uh oh!

github-actions bot commented Jun 24, 2025

Uh oh!

github-actions bot commented Jun 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mfisher87 commented Jun 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Gauss-Taylor-Euler commented Jun 24, 2025

Uh oh!

martinRenou commented Jul 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

martinRenou Jul 2, 2025

Choose a reason for hiding this comment

Uh oh!

martinRenou Jul 2, 2025

Choose a reason for hiding this comment

Uh oh!

mfisher87 commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

martinRenou commented Jul 4, 2025

Uh oh!

Gauss-Taylor-Euler commented Jul 11, 2025

Uh oh!

martinRenou left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Gauss-Taylor-Euler commented Jul 15, 2025

Uh oh!

Gauss-Taylor-Euler commented Jul 17, 2025

Uh oh!

trungleduc commented Jul 17, 2025

Uh oh!

Gauss-Taylor-Euler commented Jul 17, 2025

Uh oh!

Uh oh!

martinRenou left a comment

Choose a reason for hiding this comment

The panels should take 80% of the available height and we should be able to scroll through the tabs content if it goes over that available space:

The temporal component is now visible anymore (hidden by the panels)

Uh oh!

Uh oh!

Uh oh!

mfisher87 commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Gauss-Taylor-Euler commented Jul 28, 2025 • edited by martinRenou Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mfisher87 commented Jul 28, 2025

Uh oh!

Gauss-Taylor-Euler commented Jul 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mfisher87 commented Jul 29, 2025

Uh oh!

Gauss-Taylor-Euler commented Jul 30, 2025 • edited by martinRenou Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

martinRenou commented Jul 30, 2025

Uh oh!

mfisher87 left a comment

Gauss-Taylor-Euler commented Jun 24, 2025 •

edited by mfisher87

Loading

github-actions bot commented Jun 24, 2025 •

edited

Loading

mfisher87 commented Jun 24, 2025 •

edited

Loading

martinRenou commented Jul 2, 2025 •

edited

Loading

mfisher87 commented Jul 3, 2025 •

edited

Loading

mfisher87 commented Jul 22, 2025 •

edited

Loading

Gauss-Taylor-Euler commented Jul 28, 2025 •

edited by martinRenou

Loading

Gauss-Taylor-Euler commented Jul 28, 2025 •

edited

Loading

Gauss-Taylor-Euler commented Jul 30, 2025 •

edited by martinRenou

Loading