FAIR & CARE Scoring Widgets

[jamiefeiss]

FAIR & CARE scores can now be displayed in the UI as circular progress widgets on the right side underneath the Alternate Profiles. These widgets can be enabled/disabled with the environment variable VITE_ENABLE_SCORES. Clicking on the info button to the right of the score title opens a modal which displays extra information about the score and each score value. This would also be where more granular score information (e.g. F1.1, etc.) would be displayed in the near future.

The score data is picked up in the PropTableView.vue component with the following structure:

<iri> scores:hasScore [ a qb:ObservationGroup,
            scores:FairScore ;
        qb:observation [ a qb:Observation ;
                scores:fairFScore 17 ],
            [ a qb:Observation ;
                scores:fairAScore 9 ],
            [ a qb:Observation ;
                scores:fairIScore 5 ],
            [ a qb:Observation ;
                scores:fairRScore 2 ] ;
    ],
    [ a qb:ObservationGroup,
            scores:CareScore ;
        qb:observation [ a qb:Observation ;
                scores:careCScore 6 ],
            [ a qb:Observation ;
                scores:careAScore 4 ],
            [ a qb:Observation ;
                scores:careRScore 1 ]
            [ a qb:Observation ;
                scores:careEScore 0 ] ;
    ];

As of now only FAIR & CARE scores are supported, but other scoring types can be included later on provided they follow a similar data structure.

Here are some screenshots previewing the score widgets (note that the scores are not the true values for this resource for demo purposes)

Clicking on the info button next to the scores opens the modal:

Extra divs in the RightSideBar.vue component have been added for more convenient teleports, which are used for the score widgets. These will also be used in the near future for the search bar.

Resolves #86.

[edmondchuc]

Haven't tested it locally since I don't have data for it, but otherwise code looks good to me.