Contract Explorer: Contract storage filters

[quietbits]

1. The filter logic is "or", meaning that selecting more filters includes more records. We could implement "and" logic (narrowing down selection), making the filters dynamic. Adding more data to store locally might slow the UI, though.
2. We need an "Apply" button to apply the selected filters. Because we can have thousands of records, we can't make updates on the fly as the filters are selected. For now, I added a basic button, so we have "Apply" and "Clear filter" buttons.
3. What should be the logic for selecting value filters? I'm using object keys from decoded value XDR, and we might end up with numbers. For example, CAS3FL6TLZKDGGSISDBWGGPXT3NRR4DYTZD7YOD3HMYO6LTJUVGRVEAM (Mainnet). key filters are much more predictable than value, which can be pretty much anything.
4. How should we handle very long lists of filters? For example, CDVQVKOY2YSXS2IC7KN6MNASSHPAO7UN2UR2ON4OI2SKMFJNVAMDX6DP (Mainnet) has a very long list of value filters.
5. We need to keep checking how we handle thousands of records. On my machine, CDVQVKOY2YSXS2IC7KN6MNASSHPAO7UN2UR2ON4OI2SKMFJNVAMDX6DP (Mainnet) with 6k+ records at this time, seems OK. It takes a few seconds on the initial load, and then the loader is displayed when sorting. But the UI doesn't feel sluggish; it just takes longer to load the result.
6. Should we display the filtered results count?
7. I will add tests in a follow-up PR once we're all set with the UI.

[stellar-jenkins]

Preview is available here:
http://laboratory-pr1233.previews.kube001.services.stellar-ops.com/

[stellar-jenkins]

Preview is available here:
http://laboratory-pr1233.previews.kube001.services.stellar-ops.com/

[stellar-jenkins]

Preview is available here:
http://laboratory-pr1233.previews.kube001.services.stellar-ops.com/

[janewang]

Should we display the filtered results count?
No, I think there is no need. Once they filter down the list, maybe the user can download

[jeesunikim]

I'm getting a warning for missing key prop in console.

[stellar-jenkins]

Preview is available here:
http://laboratory-pr1233.previews.kube001.services.stellar-ops.com/

[stellar-jenkins]

Preview is available here:
http://laboratory-pr1233.previews.kube001.services.stellar-ops.com/

[jeesunikim]

added some questions but looks great. low key worried about big contract data entries getting larger and larger 😅

[stellar-jenkins]

Preview is available here:
http://laboratory-pr1233.previews.kube001.services.stellar-ops.com/

[sdfcharles]

@quietbits great work! some thoughts:

1. The filter logic is "or", meaning that selecting more filters includes more records. We could implement "and" logic (narrowing down selection), making the filters dynamic. Adding more data to store locally might slow the UI, though.

Yeah I think we should implement the 'and' logic here as well. In this case, the user has selected two filters but the combination of the two filters doesn't match any records. There should be copy here that "No results. Clear filters and try again."

2. We need an "Apply" button to apply the selected filters. Because we can have thousands of records, we can't make updates on the fly as the filters are selected. For now, I added a basic button, so we have "Apply" and "Clear filter" buttons.

Could we have the Clear Filter and Apply buttons be fixed at the bottom of the menu and the filters be scrollable? This will be clearer to the user to apply their filters instead of scrolling all the way to the bottom of a potentially long list to apply filters.

3. What should be the logic for selecting value filters? I'm using object keys from decoded value XDR, and we might end up with numbers. For example, CAS3FL6TLZKDGGSISDBWGGPXT3NRR4DYTZD7YOD3HMYO6LTJUVGRVEAM (Mainnet). key filters are much more predictable than value, which can be pretty much anything.

When we show numbers in the values filter, some suggestions:

1. if its a G address or C address, truncate the string in the pill e.g. CD25...G5JY
2. wrap the pills when they go past the width of the container
3. handle any other number with a truncated pill e.g. 12345678...

4. How should we handle very long lists of filters? For example, CDVQVKOY2YSXS2IC7KN6MNASSHPAO7UN2UR2ON4OI2SKMFJNVAMDX6DP (Mainnet) has a very long list of value filters.

Can we set a max-height of 320px on the filter menus and make them scrollable?

5. We need to keep checking how we handle thousands of records. On my machine, CDVQVKOY2YSXS2IC7KN6MNASSHPAO7UN2UR2ON4OI2SKMFJNVAMDX6DP (Mainnet) with 6k+ records at this time, seems OK. It takes a few seconds on the initial load, and then the loader is displayed when sorting. But the UI doesn't feel sluggish; it just takes longer to load the result.

Agreed the UI loading state feels good here. Wondering if it's more of a browsabliity issue – one suggestion would be to make the page number box editable so users can access middle pages easier, in addition to clicking through one page as a time.

6. Should we display the filtered results count?

Yeah, let's add that here.

[stellar-jenkins]

Preview is available here:
http://laboratory-pr1233.previews.kube001.services.stellar-ops.com/

[jeesunikim]

stellar.expert link for contract address leads to https://stellar.expert/explorer/public/account/ instead of https://stellar.expert/explorer/public/contract/. Example, the contract account CAS3J7GYLGXMF6TDJBBYYSE3HQ6BBSMLNUQ34T6TZMYMW2EVH34XOWMA is linked to public/account which is incorrect

[stellar-jenkins]

Preview is available here:
http://laboratory-pr1233.previews.kube001.services.stellar-ops.com/