react-native-community / directory

It just shows a link to the explanation page, but I don't see how to actually view the directory store for a package. I also noticed screenshots don't load unless you hover. Maybe this is intended behavior, but the UX is non-obvious.

We don't show the exact score value in the UI, but the "petals"/shapes around the icon in there represent the value:

directory/components/Library/DirectoryScore.tsx

Lines 14 to 16 in 11bae29

    
           const chunk = 100 / 6; 
        
           const getFill = (chunkNumber = 1) => 
        
             score >= chunk * chunkNumber ? colors.primaryDark : isDark ? darkColors.pewter : colors.gray3;

Definitely we could consider show the score in tooltip or using title attr, but in the other hand, since the scoring system is opinionated, we don't want to make this crucial or very important metric for the visitors. It's mostly a metadata for ordering purpose.

For images, the current behaviour is expected, we don't render images inside the entry, since we do not control their dimensions, size and aspect. Additionally, all of the images are remote located, and we decided to only fetch them on interaction (hover) to do not throttle the directory performance, and to avoid unreliable 3rd part hosts from slowing the load times

Wow, that's fascinating! I guess I should've squinted harder. It is surprising that it links to a rather lengthy page about the scoring, but doesn't explain how the scores are displayed. When you say it's used for ordering, is that the "Quality" sort?

Wow, that's fascinating! I guess I should've squinted harder. It is surprising that it links to a rather lengthy page about the scoring, but doesn't explain how the scores are displayed.

We probably should mention and demo the score display on this page, that's good idea.

When you say it's used for ordering, is that the "Quality" sort?

Yup, the "Quality" sort is the one which is based on the directory score. We also expose the data in our API, so people can use it for their own purpose:

https://reactnative.directory/api/libraries?search=mmkv

We have added tooltips support lately, which got used to show the exact library score and max possible value, when hovering the icon next to score link.

Do you feel like it's an improvement to the score display clarity? Does this solution solves the issue for you?

Thanks for checking @Simek!

Do you feel like it's an improvement to the score display clarity?

Yes, slightly

Does this solution solves the issue for you?

Unfortunately, I don't think it does. It still took me some time to figure out what was going on, and that the "flower" icon indicates the score. I still don't get why the text "Directory Score" gets so much prominence on the "card" for every library, when the score itself could easily be shown there, and perhaps the text and info about Directory Scores could itself be a tooltip.

Visually, the 50/100 that I'm hovering on, and the 75/100 directly above it don't look noticeably different. I was surprised on hover that the scores were that different.

	const chunk = 100 / 6;
	const getFill = (chunkNumber = 1) =>
	score >= chunk * chunkNumber ? colors.primaryDark : isDark ? darkColors.pewter : colors.gray3;

Directory Score doesn't show