search

earth-genome / foodtwin-global-app

Repository for our work on the global foodtwin application.
MIT License
1 stars 0 forks source link

Implement XState in Globe View example #7

Closed vgeorge closed 2 months ago

vgeorge commented 2 months ago

This PR adds XState v5 to the Global View example to demonstrate how to use actor-based state management for a data visualization web app.

Workflow: The page loads with an empty globe view. When the user clicks on a country, a side panel is displayed and arcs to other random countries are rendered. When the user closes the panel, the view returns to the initial state.

Screen capture (low resolution, the real app is sharper):

gfd

The app loads static Natural Earth GeoJSON files to render administrative boundaries. We should explore a more efficient approach for the real app.

There is an inspector to see the machine state during app execution. It should open automatically when not in the production environment:

inspector

To browse/edit the machine, I recommend adding the XState extension for VSCode and following the instructions to open the diagram for src/app/sandbox/globe-view/state/machine.ts:

Screenshot 2024-06-05 at 13 12 48

@oliverroick @willemarcel The XState setup introduced some boilerplate code, but it helps to keep the components 'dumb,' as they contain minimal application logic. I tried to cover most of the workflows we would need to implement in XState for this app. There will be a learning curve, but I'm happy to help you through it. Please let me know your thoughts.

vercel[bot] commented 2 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
foodtwin-global-app ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 5, 2024 0:28am
vgeorge commented 2 months ago

@oliverroick thanks for the review! I agree we need to avoid really big machine objects. Moving actions, selectors and services to separate module files will help. It should be straightforward to do it.

About testing, I believe React Testing Library might provide a good foundation for implementing test workflows. There might be some research we need to do on how to use machine context when running tests. But I'm not sure if it is necessary. Do you think we need to add tests in this PR or can we merge?

vgeorge commented 2 months ago

@oliverroick I'll go ahead and merge this. I believe we can work on testing separately.