Select Catalog UI for the STAC Browser #990

gaolinai8888 · 2025-11-14T07:14:25Z

Description

Checklist

PR has a descriptive title and content.
PR description contains references to any issues the PR resolves, e.g. Resolves #XXX.
PR has one of the labels: documentation, bug, enhancement, feature, maintenance
Checks are passing.
Failing lint checks can be resolved with:
- pre-commit run --all-files
- jlpm run lint

📚 Documentation preview: https://jupytergis--990.org.readthedocs.build/en/990/
💡 JupyterLite preview: https://jupytergis--990.org.readthedocs.build/en/990/lite

github-actions · 2025-11-14T07:14:33Z

👈 Launch a Binder on branch gaolinai8888/jupytergis/stac-browser

martinRenou

Thanks for starting this!! I have some rough suggestions concerning CSS styling

martinRenou · 2025-11-14T09:19:33Z

packages/base/src/stacBrowser/components/StacPanel.tsx

+    input.type = 'url';
+    input.placeholder = 'https://example.com';
+    input.style.width = '100%';
+    input.style.padding = '8px';
+    input.style.boxSizing = 'border-box';
+    input.style.border = '1px solid #ccc';
+    input.style.borderRadius = '4px';
+    input.style.marginBottom = '20px';


Please introduce CSS classes for those and add them in https://github.com/geojupyter/jupytergis/blob/main/packages/base/style/tabPanel.css

martinRenou · 2025-11-14T09:21:32Z

packages/base/src/stacBrowser/components/StacPanel.tsx

+    catalogInputLabel.style.marginBottom = '8px';
+    catalogInputLabel.style.fontWeight = 'normal';
+    catalogInputLabel.style.fontSize = '0.9em';
+    catalogInputLabel.style.color = '#666';


In order to support JupyterLab themes properly (light, dark or custom themes) you'll need to make sure to use CSS variables see e.g. https://github.com/geojupyter/jupytergis/blob/main/packages/base/style/symbologyDialog.css#L114

Also things like font sizes are generalized accross lab e.g. https://github.com/geojupyter/jupytergis/blob/main/packages/base/style/symbologyDialog.css#L25, you can use var(--jp-ui-font-size2), var(--jp-ui-font-size1) etc depending on how you want it to look like.

mfisher87

Great start! You're on the right track :)

mfisher87 · 2025-11-14T16:28:58Z

docs/contributor_guide/development_setup.md

+```{note}
+Micromamba is a lightweight package manager compatible with conda environments.
+It is recommended for setting up the JupyterGIS development environment. If you don’t have it installed, please follow the official documentation: [Micromamba Installation Guide](https://mamba.readthedocs.io/en/latest/installation/micromamba-installation.html)
+```


Can you do a rebase to remove commit 3d303d2 from this PR?

mfisher87 · 2025-11-14T16:53:29Z

packages/base/src/stacBrowser/components/catalogs.json

Instead of adding this to the repository, let's fetch it from where it lives at https://stacindex.org/api/catalogs. Once we do this, we can remove the tsconfig changes as well, and hopefully then the build will pass.

We should write this as an effect, similar to useStacSearch but much simpler. Perhaps something like (pseudocode, and I'd be happy to pair program on the implementation with you!):

const useStacIndex = (model: IJupyterGISModel): {json: string, isLoading: boolean} => { const [isLoading, setIsLoading] = useState(true); const [results, setResults] = useState<IStacIndexCatalogs>(); try { const json = (await fetchWithProxies( 'https://stacindex.org/api/catalogs', model, async response => await response.json(), undefined, 'internal', )) as IStacIndexCatalogs; setResults(json); } catch (error) { console.error('Error fetching data:', error); setResults([]); } finally { setIsLoading(false); } return {json: results, isLoading}; }

You'll need to define an interface type IStacIndexCatalogs that corresponds to the structure of the API response for this to work :)

We can also use the isLoading state to display a LoadingIcon during the fetch!

There's also the option of bringing in a new dependency like tanstack-query to handle data fetching, which is what the React docs recommend, but perhaps there's a reason we haven't done that yet. @martinRenou ?

Instead of having the front-end request this dynamically, should we download the catalog at build time? Similar to how we build the raster layers catalog during the build.

My first instinct is to fetch this data on-the-fly. I think it'd be nice to provide the latest version and it's not a large download at 52K. What's your rationale for caching it at build-time?

What's your rationale for caching it at build-time?

Making it independent of the internet connection. But making JupyterGIS fully internet independent is an impossible goal anyway so we can probably discard that.

I like independence of an Internet connection as a design principle! We could add it to our "What is JupyterGIS" page. But what are the boundaries? I think for a STAC browser, there's an inherent need for an Internet connection to actually access the data indexed by the STAC catalogs.

github-actions · 2025-11-20T06:59:34Z

Integration tests report: appsharing.space

mfisher87 · 2025-11-21T21:18:19Z

packages/base/src/stacBrowser/components/StacPanel.tsx

 const StacPanel = ({ model }: IStacViewProps) => {
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+
+  const { catalogs } = useStacIndex(model);


Suggested change

const { catalogs } = useStacIndex(model);

const { catalogs, isLoading, error } = useStacIndex(model);

Please use loading state to display a message while we're waiting for the catalog to load! Loading... is fine. But if you want you can use our loading component!

mfisher87 · 2025-11-21T21:20:57Z

packages/base/src/stacBrowser/components/StacPanel.tsx

-      </TabsContent>
-    </Tabs>
+    <div className="Select Catalog">
+      <Button onClick={handleOpenDialog}>Select a Catalog</Button>


Let's add a "Selected catalog: ..." display here that displays whatever catalog the user selected!

mfisher87 · 2025-11-21T21:22:14Z

packages/base/src/stacBrowser/components/StacPanel.tsx

+    const catalogInputLabel = document.createElement('label');
+    catalogInputLabel.textContent = 'Selected Catalog URL:';
+    catalogInputLabel.style.display = 'block';
+    catalogInputLabel.style.marginBottom = '8px';
+    catalogInputLabel.className = 'jgis-stac-catalog-input-label';
+
+    const catalogInput = document.createElement('input');
+    catalogInput.type = 'url';
+    catalogInput.placeholder = 'Selected catalog URL will appear here';
+    catalogInput.className = 'jgis-stac-catalog-input';
+    catalogInput.readOnly = true;


Let's remove this input so we have only one input and one select element in this dialog. When the select is changed, it will replace the content in the input.

Suggested change

const catalogInputLabel = document.createElement('label');

catalogInputLabel.textContent = 'Selected Catalog URL:';

catalogInputLabel.style.display = 'block';

catalogInputLabel.style.marginBottom = '8px';

catalogInputLabel.className = 'jgis-stac-catalog-input-label';

const catalogInput = document.createElement('input');

catalogInput.type = 'url';

catalogInput.placeholder = 'Selected catalog URL will appear here';

catalogInput.className = 'jgis-stac-catalog-input';

catalogInput.readOnly = true;

mfisher87 · 2025-11-21T21:22:55Z

packages/base/src/stacBrowser/components/StacPanel.tsx

+    const dialog = new Dialog<boolean>({
+      title: 'Add Catalog',
+      body: widget,
+      buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Add' })],


Suggested change

buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Add' })],

buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Select' })],

mfisher87 · 2025-11-21T21:32:52Z

@martinRenou the request to fetch catalog data fails on JupyterLite. Does the proxy not work in JupyterLite? I figured we had an escape hatch if there is no running proxy service. Do we have any issue to document that? I also can't browse the GEODES catalog on JupyterLite.

geojupyter-pr-triage bot added this to JupyterGIS PR triage Nov 14, 2025

martinRenou requested changes Nov 14, 2025

View reviewed changes

mfisher87 reviewed Nov 14, 2025

View reviewed changes

gaolinai8888 added 2 commits November 19, 2025 22:52

Initial commit

191affd

Fetch data

a0e9412

gaolinai8888 force-pushed the stac-browser branch from 98fa67a to a0e9412 Compare November 20, 2025 06:54

mfisher87 added the enhancement New feature or request label Nov 21, 2025

mfisher87 reviewed Nov 21, 2025

View reviewed changes

	const { catalogs } = useStacIndex(model);
	const { catalogs, isLoading, error } = useStacIndex(model);

	buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Add' })],
	buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Select' })],

Select Catalog UI for the STAC Browser #990

Are you sure you want to change the base?

Select Catalog UI for the STAC Browser #990

Conversation

gaolinai8888 commented Nov 14, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Uh oh!

github-actions bot commented Nov 14, 2025

Uh oh!

martinRenou left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mfisher87 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mfisher87 Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mfisher87 Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mfisher87 commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

gaolinai8888 commented Nov 14, 2025 •

edited by github-actions bot

Loading

mfisher87 Nov 14, 2025 •

edited

Loading

github-actions bot commented Nov 20, 2025 •

edited

Loading

mfisher87 Nov 21, 2025 •

edited

Loading

mfisher87 commented Nov 21, 2025 •

edited

Loading