Implement LayerManager using LitElement + anywidget
Overview:
- Used anywidget to implement the custom widget and LitElement for template rendering. LitElement because it's simple, lightweight, efficient, and safe.
- Changed build system to hatchling. The old setuptools build system is insufficient for building custom widgets.
- The diffs show 2000+ more lines being added to the codebase than deleted. This is expected. There are several large, one-time additions like
package-lock.json, thepyproject.tomlchanges, and the style sheets to replicate legacy ipywidgets styles. Future widget migrations will have much smaller diffs.
Files and directories:
geemap/static/*contains the compiled ECMAScript modules. These files aren't manually written. Each widget must have it's own compiled ECMAScript module. A previous version of this pull request checked in static files, but there are security risks with that and the Python package installers should know how to build the TypeScript into modules.js/*contains the TypeScript and CSS source files. These files are written manually.js/ipywidgets_styles.tsimplements the legacy styles with the non-custom ipywidgets.js/material_styles.tsimplements new material styles (only fonts right now).
How to build and test:
- The Python side is unchanged.
- To build the TypeScript source, run
npm installand thennpm run dev. This starts a development server that will watch the TypeScript and CSS source files for changes and re-build when necessary.
TODOs remaining:
- [x] Figure out how to simplify font loading. Currently, fonts are downloaded via an
@import urlcommand and then referenced in the stylesheets, but it involves duplication and brittle URLs. - @sufyanAbbasi - [x] Remove setuptools references from pyproject.toml. - @naschmitz
- [x] Fix the build issues with this pull request. - @naschmitz
- [ ] (Lower priority) Unit tests for the TypeScript code. - @sufyanAbbasi
- [ ] (Improvement, Lower priority) Get
jslinkworking in Colab. It'll make the UI feel so much more responsive. - @sufyanAbbasi - [ ] (Improvement, Lower priority) Add a delete confirmation dialog over the layer manager instead of inline with the rows.
@giswqs Don't feel like you need to jump in and start reviewing this right away. I want to get feedback from other members of the Earth Engine team (@sufyanAbbasi in particular) and I'm sure there will be several iterations.
@naschmitz Sure, no problem. I will wait for other team members to review it first. I am not familar with TypeScript yet. Not much help I can provide yet.
@giswqs - This pull request is ready for your review
Tests are done! https://github.com/naschmitz/geemap/tree/anywidget-test I'll leave it to you to merge them in!
@naschmitz Sorry for the delay! I just started reviewing the PR. This is tremendous amount of work. Thank you for puttting this together.
Here are some feedback I would like to share.
-
It seems that the basemap layer spinner continues to spin indefinitely, even after the basemap layer has finished loading. I'm not sure if you can replicate this issue. Here’s a screenshot for reference:
-
In previous versions, besides ticking the layer checkboxes, clicking directly on the layer names would also toggle the layers on and off. In this PR, it appears that layers can only be toggled by checking the boxes, and clicking the layer names has no effect.
@giswqs I think I've fixed both issues. Please take another look when you have time.
I fixed the cursor issue. It was as simple as adding cursor: pointer; to the relevant CSS class.