Implement LayerManager using LitElement + anywidget

[naschmitz]

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, the pyproject.toml changes, 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.ts implements the legacy styles with the non-custom ipywidgets.
• js/material_styles.ts implements new material styles (only fonts right now).

How to build and test:

• The Python side is unchanged.
• To build the TypeScript source, run npm install and then npm 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:

• Figure out how to simplify font loading. Currently, fonts are downloaded via an @import url command and then referenced in the stylesheets, but it involves duplication and brittle URLs. - @sufyanAbbasi
• Remove setuptools references from pyproject.toml. - @naschmitz
• Fix the build issues with this pull request. - @naschmitz
• (Lower priority) Unit tests for the TypeScript code. - @sufyanAbbasi
• (Improvement, Lower priority) Get jslink working 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.

[naschmitz]

@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.

[giswqs]

@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.

[sufyanAbbasi]

This is incredible work!! I am sending over some initial comments on the TS code, but I need to look at the Python code a little better.

[sufyanAbbasi]

Thanks so much, this is really great! I'll send up a PR for testing as soon as I get them complete. I have one more nit down below, otherwise, looks good to me!

[naschmitz]

@giswqs - This pull request is ready for your review

[sufyanAbbasi]

Tests are done! https://github.com/naschmitz/geemap/tree/anywidget-test
I'll leave it to you to merge them in!

[giswqs]

@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.

1. 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:
   

2. 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.

[naschmitz]

@giswqs I think I've fixed both issues. Please take another look when you have time.

[giswqs]

Thank you very much for fixing it. I can confirm that now clicking on the layer name can toggle layer visibility.

One potential improvement would be to change the currsor shape to a pointer rather than text selection. when hoving on the layer name. Anyway, this is just a suggestion. No worries if it is difficult to change.

[naschmitz]

I fixed the cursor issue. It was as simple as adding cursor: pointer; to the relevant CSS class.