Preview app bugs and enhancements

[bertearazvan]

Thanks for the implementation, it sure looks more professional now.

I just tried it, and I do have some comments:

• The info text when you click on details seems superfluous now. Why not just remove it? It's hard to find anyway.
• The bold /apidoc in the details section looks weird to me.
• Raster listing starts at page 0, and no indication how many pages there are.
• No padding between metadata and preview image looks cramped.
• What happened to the zoom to the dataset? Imaging you have a raster of one yard in New Zealand, how are you ever going to find it on the world map? Just saw that it does zoom in, but not if you select the first dataset in the list :thinking:
• The function of the "change base map" button is not obvious before you click on it. Couldn't this be "satellite view" / "street view" with a matching icon instead?
• Sidebar looks very large on smaller / non-maximized windows, and is not resizable anymore:

• I just saw that you can minimize the sidebar. That arrow is hard to find. Couldn't this be on the left side of the sidebar?
• RGB view is broken, there is no way to select different rasters for the bands.
• I don't think the RGB contrast sliders work as they should. They just have a range of 0-255 instead of the range of the rasters.
• Key descriptions are not part of the UI anymore?
• Some more vertical breathing room would be nice.

No one has asked for my review, so you can do with this feedback whatever you want.

Originally posted by @dionhaefner in https://github.com/DHI-GRAS/terracotta/issues/194#issuecomment-826627029

[bertearazvan]

• The info text when you click on details seems superfluous now. Why not just remove it? It's hard to find anyway.

Yes, I agree, that description is a bit useless.

• [ ] Remove the description.

  • The bold /apidoc in the details section looks weird to me.

The main point for the /apidoc being bold is to point out that every deployment has an /apidoc route and to spot out the obvious.

• No padding between metadata and preview image looks cramped.

The metadata should be scrollable horizontally. Somehow I see in the screenshot you added that it is not. I'll look into that. I will add a small padding to that image.

• [x] Add padding to the preview image.

Just saw that it does zoom in, but not if you select the first dataset in the list 🤔

I will fix the zoom for the first dataset. It must be an if that does if(0) which is not true, so it does not continue.

• [x] fix first dataset not zooming in

• Raster listing starts at page 0, and no indication how many pages there are.

• I don't think there is a way to figure out how many pages of data are from the datasets, without fetching all the datasets and doing some sort of calculation. At the moment when you land on the page it fetches the page=0&limit=15. Maybe I missed out on some docs where it is stated how you can see how many pages are?
• The first page being 0 I think should start from 0 as it reflects the paging for the developer that tries it out. If I would make it let's say 1, if the user goes and checks for page=1 it won't be the same page as he expects.

• The function of the "change base map" button is not obvious before you click on it. Couldn't this be "satellite view" / "street view" with a matching icon instead?

• [x] Add street view icon on toggle.

• Sidebar looks very large on smaller / non-maximized windows, and is not resizable anymore:

• [ ] I will add some sort of resizing bar. The current maximum width of that Sidebar is 50 viewport width, should I make it let's say 40vw?

• RGB view is broken, there is no way to select different rasters for the bands.

Hmm, the way it works is that you select the RGB ranges and the bands and then you can select other datasets with te same RGB configuration.

• I just saw that you can minimize the sidebar. That arrow is hard to find. Couldn't this be on the left side of the sidebar?

I think UX wise it is correct for that icon to be on the right side. Once I add the resize bar I think it would be more intuitive. I can make the icons slightly bigger as well.

• [ ] make resize icon bigger

• I don't think the RGB contrast sliders work as they should. They just have a range of 0-255 instead of the range of the rasters.

Hmm okay, from my experience the rgb values do not go over 255, I might be wrong. I will look into it.

• [x] look into values for rgb

• Key descriptions are not part of the UI anymore?

Not sure there were descriptions for each key. But you can see the keys example under apidocs.

• Some more vertical breathing room would be nice.

I think I feel what you are suggesting but I am not sure what you have in mind exactly..

No one has asked for my review, so you can do with this feedback whatever you want.

Will make sure I do from now.

Sorry if this comment is too messy, hope it makes sense.

[dionhaefner]

I think UX wise it is correct for that icon to be on the right side. Once I add the resize bar I think it would be more intuitive. I can make the icons slightly bigger as well.

Google Maps disagrees :)

[dionhaefner]

The main point for the /apidoc being bold is to point out that every deployment has an /apidoc route and to spot out the obvious.

I think the main problem is that for this view the line breaks right before the bold apidoc, so it has the same visuals as the Docs: and Keys:.

The metadata should be scrollable horizontally. Somehow I see in the screenshot you added that it is not. I'll look into that. I will add a small padding to that image.

It is scrollable, but since I'm on a Mac the scrollbar is hidden by default. As you can see it looks a bit weird.

I don't think there is a way to figure out how many pages of data are from the datasets, without fetching all the datasets and doing some sort of calculation

OK

Hmm, the way it works is that you select the RGB ranges and the bands and then you can select other datasets with te same RGB configuration.

OK, /rgb works on another deployment, so that is reassuring. But the sliders are definitely wrong. The range should be the same as in the /singleband case, not 0-255.

Not sure there were descriptions for each key. But you can see the keys example under apidocs.

Yes, there are, although not all deployments use them. Ideally they should be visible in the preview app, since we specifically want to highlight most of what Terracotta is capable of.

I think I feel what you are suggesting but I am not sure what you have in mind exactly..

More vertical padding between the UI elements. It feels a bit cramped.

Will make sure I do from now.

I didn't want to sound snappy. I'm not a dictator or even code owner here. If you want to disregard my points that's a valid option.

---

Another point I missed before: You only show a small subset of the full metadata (which is understandable). But how about we add a small link "view full metadata" to the raw output of the metadata endpoint? E.g. View full metadata