feat: add results for ratings (#630)

fix: rating is empty by default
    not set to middle value
fix: improve style and accessibility of AI-generated ideas

Author: swouf

src/modules/common/response/Response.tsx

@@ -103,7 +103,7 @@ const Response: FC<ResponseProps> = ({
   const renderTopResponseAnnotation = (): JSX.Element => {
     if (isAiGenerated) {
       return (
-        <TopAnnotationTypography variant="caption" color="primary">
+        <TopAnnotationTypography variant="caption" color="white">
           {t('AI_GENERATED')}
         </TopAnnotationTypography>
       );
@@ -121,7 +121,7 @@ const Response: FC<ResponseProps> = ({
   const getTopAnnotationBoxStyle = (): SxProps<Theme> => {
     if (isAiGenerated) {
       return {
-        backgroundColor: 'white',
+        backgroundColor: theme.palette.primary.main,
       };
     }
     const rLength =
@@ -134,14 +134,6 @@ const Response: FC<ResponseProps> = ({
     };
   };
 
-  const getCardActionStyle = (): SxProps<Theme> | undefined =>
-    isAiGenerated
-      ? {
-          backgroundColor: theme.palette.primary.main,
-          color: theme.palette.primary.contrastText,
-        }
-      : undefined;
-
   if (responseContent) {
     return (
       <Box
@@ -168,11 +160,10 @@ const Response: FC<ResponseProps> = ({
           variant="outlined"
           sx={{
             width: '100%',
-            // backgroundColor: highlight ? 'hsla(0, 100%, 90%, 0.3)' : 'white',
           }}
           data-cy={RESPONSE_CY}
         >
-          <CardContent sx={{ minHeight: '32pt', ...getCardActionStyle() }}>
+          <CardContent sx={{ minHeight: '32pt' }}>
             {typeof responseContent === 'string' ? (
               <ResponsePart>{responseContent}</ResponsePart>
             ) : (
@@ -217,7 +208,7 @@ const Response: FC<ResponseProps> = ({
             </Box>
           </CardContent>
           {renderEvaluationComponent()}
-          {showRatings && <RatingsVisualization />}
+          {showRatings && <RatingsVisualization responseId={id} />}
           {typeof nbrOfVotes !== 'undefined' && <Votes votes={nbrOfVotes} />}
           {showActions && (
             <>

src/modules/common/response/evaluation/Rate.tsx

@@ -63,7 +63,7 @@ const Rate: FC<{
               maxLabel={r.maxLabel}
               levels={r.levels}
               key={index}
-              value={values.get(r.name) ?? Math.ceil(r.levels / 2)}
+              value={values.get(r.name)}
             />
           ))}
       </Container>

src/modules/common/response/visualization/DimensionsOfGlobalIssue.tsx

@@ -1,36 +1,67 @@
-import { useTranslation } from 'react-i18next';
-
-import { TRANSLATIONS_NS } from '@/config/i18n';
-
-const RatingsVisualization = (): JSX.Element => {
-  const { t } = useTranslation(TRANSLATIONS_NS);
-  // const { activity } = useSettings();
-  // const { evaluationType } = activity;
-  // const { getRatingsForResponse } = useRatings(evaluationType);
-
-  // const ratings = useMemo(
-  //   () => getRatingsForResponse(response.id),
-  //   [getRatingsForResponse, response],
-  // );
-
-  // if (evaluationType === EvaluationType.DimensionsOfGIRating) {
-  //   return (
-  //     <DimensionsOfGlobalIssue
-  //       ratings={ratings as RatingsAppData<DimensionsOfGIRatings>[]}
-  //     />
-  //   );
-  // }
-  // if (evaluationType === EvaluationType.SFERARating) {
-  //   return <SFERAViz ratings={ratings as RatingsAppData<SFERARating>[]} />;
-  // }
-  // if (evaluationType === EvaluationType.UsefulnessNoveltyRating) {
-  //   return (
-  //     <UsefulnessNovelty
-  //       ratings={ratings as RatingsAppData<UsefulnessNoveltyRatings>[]}
-  //     />
-  //   );
-  // }
-  return <>{t('NO_VISUALIZATION')}</>;
+import { FC, useEffect, useState } from 'react';
+
+import CircularProgress from '@mui/material/CircularProgress';
+import Stack from '@mui/material/Stack';
+
+import { RatingData } from '@/config/appDataTypes';
+import { useRatingsContext } from '@/modules/context/RatingsContext';
+
+import CircularIndicator from './indicators/CircularIndicator';
+
+interface RatingsVisualizationProps {
+  responseId: string;
+}
+
+const RatingsVisualization: FC<RatingsVisualizationProps> = ({
+  responseId,
+}): JSX.Element => {
+  const {
+    ratings: ratingsDef,
+    getRatingsStatsForResponse,
+    ratingsThresholds,
+  } = useRatingsContext();
+
+  const [ratings, setRatings] = useState<RatingData['ratings'] | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    getRatingsStatsForResponse(responseId).then((d) => setRatings(d));
+  }, [getRatingsStatsForResponse, responseId]);
+
+  if (typeof ratingsDef === 'undefined' || typeof ratings === 'undefined') {
+    // TODO: Make that look good.
+    return <CircularProgress />;
+  }
+
+  const nbrRatings = ratingsDef?.length ?? 0;
+
+  return (
+    <Stack
+      direction="row"
+      spacing={2}
+      alignItems="stretch"
+      justifyContent="center"
+      m={2}
+    >
+      {ratingsDef.map((singleRatingDefinition, index) => {
+        const { name } = singleRatingDefinition;
+        if (ratings) {
+          const result = ratings[index];
+          return (
+            <CircularIndicator
+              key={index}
+              value={result.value}
+              thresholds={ratingsThresholds}
+              label={name}
+              width={`${100 / nbrRatings}%`}
+            />
+          );
+        }
+        return <CircularProgress key={index} />;
+      })}
+    </Stack>
+  );
 };
 
 export default RatingsVisualization;