search

who-icatx / icatx-project

A place for project tasks discussion and discussion of other issues arising on this project
0 stars 0 forks source link

Annotation properties with URL values are not displayed correctly #20

Open csnyulas opened 3 months ago

csnyulas commented 3 months ago

I observed this on WP Staging: image

csnyulas commented 2 months ago

Looking at the CSS of the rendered page, it seems that a padding-left: 22px; is missing from the CSS class that is used to render http:// links, including pointers to WikiPedia pages.

For field values with other datatypes, such as xsd:string values, this is how the applied CSS class looks like: image

On the other hand, this is what we have for the field that displays the WikiPedia logo, for example: image

or for the Link image: image

Both of these latter ones are missing the padding-left statements, and, as a consequence, are overwritten by the text: image

This seems to be a regression that is present in the WP staging server, but not the production WebProtege running on the Stanford server.

csnyulas commented 2 months ago

Looking at the source code, most likely the simplest fix would be to add in the webprotege-gwt-ui-client/src/main/java/edu/stanford/bmir/protege/web/resources/WebProtege.css CSS file to the linkIconInset, iriIconInset and wikipediaIconInset CSS classes a padding-left: 22px; line, likely this:

https://github.com/protegeproject/webprotege-gwt-ui/blame/master-who/webprotege-gwt-ui-client/src/main/java/edu/stanford/bmir/protege/web/resources/WebProtege.css#L272-L294

.linkIconInset {
    background-image: linkIconUrl;
    background-repeat: no-repeat;
    background-position: 2px 2px;
    padding-left: 22px;
    width: auto;
    height: auto;
}
.iriIconInset {
    background-image: iriIconUrl;
    background-repeat: no-repeat;
    background-position: 2px 2px;
    padding-left: 22px;
    width: auto;
    height: auto;
}
.wikipediaIconInset {
    background-image: wikipediaIcon;
    background-repeat: no-repeat;
    background-position: 2px 1px;
    background-size: 18px;
    padding-left: 22px;
    width: auto;
    height: auto;
}

The question is why was it working in the earlier version of the code (for example the one deployed at Stanford). Did it use to be combined with another CSS class perhaps (e.g. with emptyIconInset), and that combination was removed at some point? To be investigated, and to be decided what approach do we want to follow going forward?

csnyulas commented 2 months ago

Does the solution I proposed make sense @matthewhorridge ? Can we include it in the new source code? I know this is not a critical bug, but it affects usability and user impression of the tool. And would be nice to fix things that we find, and also to close as many issues as possible, especially those that don't take much effort.