A floating widget for the JupyterGIS UI element

[MMesch]

Use case

It'd be nice to have the JupyterGIS widget (e.g. to select and deselect layers or with simple configurable widgets like filters/radio buttons) available as floating element on top of the map. This would allow building full-screen map applications/dashbords afterwards.

Preferred solution

No response

Alternative solutions

No response

[martinRenou]

I think we agree with @trungleduc that it would be great if JupyterCAD and JupyterGIS could share the same-ish UI where the left and right panels are taking less space + always attached to the main view (3D view for CAD, Map view for GIS).

I would love something that looks like felt where the layers list / filters / identified features doesn't take the full height and is always on the map:

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

So we would get rid of the JupyterLab side panels to be more integrated into the viewer.

Then, viewing a JupyterGIS/CAD session from the Jupyter Notebook API would automatically contain the layers list / filters controls etc.

[martinRenou]

Goes in the direction of what Matthias said in #761 (comment) about the Notebook full screen UI

[trungleduc]

So we would get rid of the JupyterLab side panels to be more integrated into the viewer.

👍 An easy way to implement it is to add a movable component to the main view that can host Lumino widgets, then we can reuse the current left and right side panels.

[Gauss-Taylor-Euler]

So we would get rid of the JupyterLab side panels to be more integrated into the viewer.

👍 An easy way to implement it is to add a movable component to the main view that can host Lumino widgets, then we can reuse the current left and right side panels.

I would like to work on this issue any details about how you will go about it ? For instance do you have a link to the movable componant you are referring to ? Thank you in advance.

[trungleduc]

The main view is a React component. You can start by creating a React component in the main view that can be resized, moved and toggled to show and hide. Injecting the current left and right panels into your component is easy.

[Gauss-Taylor-Euler]

The main view is a React component. You can start by creating a React component in the main view that can be resized, moved and toggled to show and hide. Injecting the current left and right panels into your component is easy.

Thank you , I don't get the easy part , after looking on the internet I can't find a easy way to use Lumino widget inside react component (only the other way around ) , do you have link to an example or tutorial on how to do it.

[trungleduc]

https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/components/lumino/Lumino.tsx

[martinRenou]

Ah thanks @trungleduc I was struggling to find this.

We should eventually move this code snippet in core-lumino

[Gauss-Taylor-Euler]

https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/components/lumino/Lumino.tsx

Thank you very much!