Basic AoIs #690
Basic AoIs #690
Conversation
✅ Deploy Preview for veda-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
nerik
force-pushed
the
feature/exploration-aoi
branch
from
5c227a7 to
530acb1
Compare
nerik
force-pushed
the
feature/exploration-aoi
branch
from
3221d5b to
781701b
Compare
nerik
force-pushed
the
feature/exploration-aoi
branch
from
781701b to
9bca0b4
Compare
There was a problem hiding this comment.
A couple of things I'd suggest maybe adding/changing on this PR:
- the cursor over the map when the drawing is active
- disabling the trash can when nothing can be deleted
- jotai location uses hash to store the values. Query parameters are better suited for this purpose - can we use that instead?
| export const aoisUpdateGeometryAtom = atom( | ||
| null, | ||
| (get, set, updates: { id: string; geometry: Polygon }[]) => { | ||
| let newFeatures = [...get(aoisFeaturesAtom)]; | ||
| updates.forEach(({ id, geometry }) => { | ||
| const existingFeature = newFeatures.find((feature) => feature.id === id); | ||
| if (existingFeature) { | ||
| existingFeature.geometry = geometry; | ||
| } else { | ||
| const newFeature: AoIFeature = { | ||
| type: 'Feature', | ||
| id, | ||
| geometry, | ||
| selected: true, | ||
| properties: {} | ||
| }; | ||
| newFeatures = [...newFeatures, newFeature]; | ||
| } | ||
| }); | ||
| set(aoisHashAtom, encodeAois(newFeatures)); | ||
| } | ||
| ); | ||
|
|
||
| // Setter atom to update AOIs selected state, writing directly to the hash atom. | ||
| export const aoisSetSelectedAtom = atom(null, (get, set, ids: string[]) => { | ||
| const features = get(aoisFeaturesAtom); | ||
| const newFeatures = features.map((feature) => { | ||
| return { ...feature, selected: ids.includes(feature.id as string) }; | ||
| }); | ||
| set(aoisHashAtom, encodeAois(newFeatures)); | ||
| }); | ||
|
|
||
| // Setter atom to delete AOIs, writing directly to the hash atom. | ||
| export const aoisDeleteAtom = atom(null, (get, set, ids: string[]) => { | ||
| const features = get(aoisFeaturesAtom); | ||
| const newFeatures = features.filter( | ||
| (feature) => !ids.includes(feature.id as string) | ||
| ); | ||
| set(aoisHashAtom, encodeAois(newFeatures)); | ||
| }); |
There was a problem hiding this comment.
This is an interesting paradigm. You have atoms that just update the main atom. Is this a normal jotai paradigm?
There was a problem hiding this comment.
Is this normal? 😅
They are called derived atoms in Jotai. In my understanding, they extend the concept of selectors that exist in Redux or Recoil or many others, except they are not necessarily read-only (they can be write-only like here or read-write). The main idea is to use the URL hash as the single-source-of-truth, then provide a getter to get an array of AoIs, and setters to manipulate it.
I considered another alternative, which was to have a single read-write derived atom, then do various write operations in React land, but this turned out to be more concise. Happy to discuss if you wanna suggest alternatives.
There was a problem hiding this comment.
Just wondering about this. It is an interesting approach! :)
nerik
force-pushed
the
feature/exploration-aoi
branch
from
2f470a6 to
dc479ae
Compare
nerik
force-pushed
the
feature/exploration-aoi
branch
from
dc479ae to
24dc07a
Compare
nerik
force-pushed
the
feature/exploration-aoi
branch
from
719c7a4 to
2ab3dff
Compare
nerik
force-pushed
the
feature/exploration-aoi
branch
from
2ab3dff to
2b89c94
Compare
Prototypes a simple AoI control working with the new map. This includes storing the AoI(s) in the URL.