LWS-225: improve display of libraries in holdings panel

[jesperengstrom]

Description

Tickets involved

LWS-225

Solves

Display additional (distinguishing) library information in the holdings panel.

This could really be as easy as printing the qualifier alongside the name. But I tried a more cumbersome approach 😆
To stay consistent with how we do it elsewhere (libraries in the facets, for example) we now display decorated data here.

Summary of changes

• lensAndFormat the libraries inside the functions that prepare data for the holdings panel: holdingsByInstanceId and holdersByType.

• Break out new util method getHoldingsByType in /utils.

• New types and some checks to get rid of ts-warnings in /fnurgel/page.svelte.

• The decorated labels are ellipsed, but displayed multi-line when opened.

• We now also use DecoratedData component in facets instead of printing the rendered str. This should give us more fine-grained control over the styling?

[olovy]

LGTM!

Perhaps something like this to start with?

		"Collection-qualifier-format": {
			"@id": "Collection-qualifier-format",
			"@type": "fresnel:Format",
			"fresnel:classFormatDomain": ["Collection"],
			"fresnel:propertyFormatDomain": ["qualifier"],
			"fresnel:propertyFormat": {
				"fresnel:contentBefore": ", ",
				"fresnel:contentFirst": "",
				"fresnel:contentAfter": "",
				"fresnel:contentLast": ""
			}
		},
		"Collection-sigel-format": {
			"@id": "Collection-sigel-format",
			"@type": "fresnel:Format",
			"fresnel:classFormatDomain": ["Collection"],
			"fresnel:propertyFormatDomain": ["sigel"],
			"fresnel:propertyFormat": {
				"fresnel:contentBefore": " (",
				"fresnel:contentFirst": "(",
				"fresnel:contentAfter": ")",
				"fresnel:contentLast": ")"
			}
		},

It would be nice if sigel was a bit lighter but couldn't get it to work right away with propertyStyle

[jesperengstrom]

Perhaps something like this to start with?

Nice! Added that. We could target it with [data-property='sigel'] but i'll investigate a little. Would like to learn more about the workings of the formatters.

[jesperengstrom]

If "fresnel:propertyStyle": ["someClass"] is set in this case, it's added to _style as expected, but then ignored by the DecoratedData component. It applies classes for objects with a @type (data-type), but not in other cases (i.e data-property).

It works by simply adding
class={getStyleClasses(data)}

...but there must be some reason for this distinction @johanbissemattsson ?

[olovy]

I think it is a bit unclear if fresnel:propertyStyle should apply to contentBefore/After.
I think it should? Otherwise the parentheses get a different style in this case.
But then the whole thing has to be wrapped in an element or e.g. block breaks?

Styling the sigel in the same way as inScheme (sao etc) might be nice and consistent?
And avoids the issue for now

[jesperengstrom]

I think it is a bit unclear if fresnel:propertyStyle should apply to contentBefore/After.
I think it should? Otherwise the parentheses get a different style in this case.

Yeah, it's the same thing with role that always bugged me a bit

But having the parentheses underlined looks weird... Don't know if there's a universal solution to this 🤔

[olovy]

I think it is a bit unclear if fresnel:propertyStyle should apply to contentBefore/After.
I think it should? Otherwise the parentheses get a different style in this case.

Yeah, it's the same thing with role that always bugged me a bit

But having the parentheses underlined looks weird... Don't know if there's a universal solution to this 🤔

I think valueStyle should be used to set the underline and propertyStyle to set the size/color of the whole role parenthesis

[johanbissemattsson]

Awesome! LGTM! 🌟

But having the parentheses underlined looks weird... Don't know if there's a universal solution to this 🤔

I think valueStyle should be used to set the underline and propertyStyle to set the size/color of the whole role parenthesis

I think this is the closest to a sensible solution, so I also think fresnel:propertyStyle should preferably also be applied to contentBefore/contentAfter.

[jesperengstrom]

Styling the sigel in the same way as inScheme (sao etc) might be nice and consistent?

A bit reluctant to do that, since (I just now discovered) the contrast is too low and violates WCAG (it's not automatically detected since they're all collapsed on page load).

Should I continue to pursue better styling control through formatters, or is it becoming out of scope?

[jesperengstrom]

Merging this now. Will do a separate PR of some changes I made trying to improve the _style thing. We can try it out there.

[olovy]

A bit reluctant to do that, since (I just now discovered) the contrast is too low and violates WCAG

I suspected it did!