Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

VEDA UI components integration

Open
  • Is something wrong?
#31 3 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
28/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
react, typescript
Domain
api, data, frontend

Research direction

Start by reviewing the existing stac-explorer code and the referenced PlanetaryComputerDataCatalog hooks, plus veda-ui's configuration architecture. Define the standalone package boundaries around STAC API requests, response state, caching, and standardized props, then validate the design with the proposed context/reducer and react-map-gl examples. Done means the abstractions and examples are usable by both stac-explorer and veda-ui.

Written by the indexing model from the issue text.

Description

During our team week eoAPI hacking session, @abarciauskas-bgse @oliverroick and I had a chance to sit down and do a bit of high level thinking about how the work being done on the stac-explorer UI can best be generalized for use with other similar projects, most notably veda-ui. A lot of the discussion was based around improving my ideas for STAC API driven self-configuring components. @oliverroick made the excellent point that we don't want to enforce component design and structure on developers and we should instead be focusing on only a library to handle

  1. STAC API request construction and response management.
  2. STAC API response -> state/context management and standardized props propagation.

This way developers have all of the hard, drudgery work of interacting with the STAC API handled for them and they only need to worry about designing a great UX that can handle standardized props.

@mmcfarland has already done the bulk of the heavy lifting STAC API typing, query generation and titiler-pgstac mosaic integration but this work is unfortunately deeply embedded in the PlanetaryComputerDataCatalog codebase. To continue building out stac-explorer in a way that will also be usable for the veda-ui we need to restructure this code and move it into a standalone package. I think we can do this in the stac-explorer repo in the near term. I'll let @oliverroick correct me here when I use the incorrect terminology, but we discussed a few design goals to guide this work

  1. Move as much application/component configuration as possible into STAC structures at the Collection or Catalog level (this should work with both static STAC documents and API served STAC endpoints). This makes the library much more usable to the wider community who is already using STAC rather than forcing them to build custom configuration at the dataset level as we currently do with the veda-ui codebase.
  2. Simplify API data fetching and caching by using a standard library like tanstack/query.
  3. Provide examples of using the centralized STAC API state via useContext and useReducer with sample components.
  4. Provide examples of using the centralized STAC API state with react-map-gl components with the controlled approach with a footprints and mosaic tiling sources configured by standardized props defined in the library.

This was gist of most of the conversation. We also discussed how we can make these abstractions easily usable across other UI projects. It will be great to get feedback from folks working on the veda-ui restructure so that we can make this API request/state management library an easy drop in for STAC API and Titiler interactions if they would like to use it.

Dominant language
TypeScript
Stars
4
Forks
1
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from developmentseed/stac-explorer

All issues in developmentseed/stac-explorer

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.