RDFLib / prez-ui

BSD 3-Clause "New" or "Revised" License
10 stars 7 forks source link

FAIR & CARE Scoring Widgets #90

Closed jamiefeiss closed 1 year ago

jamiefeiss commented 1 year ago

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)

Screenshot 2023-08-07 at 2 53 06 pm

Clicking on the info button next to the scores opens the modal: Screenshot 2023-08-07 at 2 53 21 pm

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.