[front] feat: add buttons to compare criteria

.github/workflows/e2e.yml

@@ -55,6 +55,7 @@ jobs:
         with:
           working-directory: tests
           browser: chrome
+          headed: true
           spec: "cypress/e2e/frontend/**/*"
 
       - name: Print dev-env logs

frontend/public/locales/en/translation.json

@@ -79,7 +79,8 @@
     "title": "Criteria scores distribution"
   },
   "comparison": {
-    "successfullySubmitted": "The comparison has been successfully submitted.",
+    "ok": "OK",
+    "successfullySubmitted": "Comparison successfully submitted.",
     "itemsAreSimilar": "These two items are very similar, it is probably not useful to compare them.",
     "removeOptionalCriterias": "Remove optional criteria",
     "addOptionalCriterias": "Add optional criteria",
@@ -103,10 +104,18 @@
     "hideHelp": "Hide the help",
     "showHelp": "Show help for comparisons"
   },
+  "comparisonInput": {
+    "thisComparisonWasMadeOnAMobileDevice": "This comparison was made on a mobile device. The mobile interface exceptionally replaces the usual interface.",
+    "thisComparisonWasMadeOnAComputer": "This comparison was made on a computer. It cannot be modified on a mobile device."
+  },
   "comparisons": {
     "goToComparison": "Go to comparison"
   },
   "submit": "submit",
+  "comparisonCriteriaButtons": {
+    "nextQualityCriterion": "Next quality criterion",
+    "previousQualityCriterion": "Previous quality criterion"
+  },
   "comparisonSeries": {
     "skipTheSeries": "Skip the series"
   },
@@ -1148,12 +1157,16 @@
         "title1": "Comparing two videos 🌻",
         "message1": {
           "p10": "After watching the videos, move the main handle to the video that should be largely recommended according to you. Save once you've made your choice.",
-          "p20": "The more your opinion is clear-cut on a criterion, the more the handle should be close to the slider extremity. If you find the videos similar, the handle should remain close to the center."
+          "p10mobile": "After watching the videos, vote for the video that should be largely recommended using the buttons below.",
+          "p20": "The more your opinion is clear-cut on a criterion, the more the handle should be close to the slider extremity. If you find the videos similar, the handle should remain close to the center.",
+          "p20mobile": "If your preference is strong, use the buttons at the ends. If you find the two videos similar, use the \"equal\" button in the middle."
         },
         "title2": "Making comparisons helps science 🔬",
         "message2": {
           "p10": "Each comparison helps Tournesol improve its recommendations and its open database. Try to unfold and use the optional criteria now.",
-          "p20": "You can always choose to not vote on an optional criterion by unchecking it. You will be able to edit all your comparisons from your page My comparisons."
+          "p10mobile": "Each comparison helps Tournesol improve its recommendations and its open database.",
+          "p20": "You can always choose to not vote on an optional criterion by unchecking it. You will be able to edit all your comparisons from the page My comparisons.",
+          "p20mobile": "After a few comparisons, new optional criteria will be displayed. You will also be able to edit all your comparisons from the page My Comparisons."
         },
         "title3": "How does Tournesol work? 🤖",
         "message3": {

frontend/public/locales/fr/translation.json

@@ -83,6 +83,7 @@
     "title": "Distribution des scores par critère"
   },
   "comparison": {
+    "ok": "OK",
     "successfullySubmitted": "Comparaison bien enregistrée.",
     "itemsAreSimilar": "Ces deux éléments sont très similaires, ce n'est probablement pas une bonne idée de les comparer.",
     "removeOptionalCriterias": "Supprimer les critères optionnels",
@@ -107,10 +108,18 @@
     "hideHelp": "Cacher l'aide",
     "showHelp": "Montrer l'aide pour les comparaisons"
   },
+  "comparisonInput": {
+    "thisComparisonWasMadeOnAMobileDevice": "Cette comparaison a été faite sur un périphérique mobile. L'interface mobile remplace exceptionnellement l'interface habituelle.",
+    "thisComparisonWasMadeOnAComputer": "Cette comparaison a été faite sur un ordinateur. Elle ne peut pas être modifiée sur un périphérique mobile."
+  },
   "comparisons": {
     "goToComparison": "Voir la comparaison"
   },
   "submit": "enregistrer",
+  "comparisonCriteriaButtons": {
+    "nextQualityCriterion": "Critère de qualité suivant",
+    "previousQualityCriterion": "Critère de qualité précédent"
+  },
   "comparisonSeries": {
     "skipTheSeries": "Passer la série"
   },
@@ -1158,12 +1167,16 @@
         "title1": "Comparer deux vidéos 🌻",
         "message1": {
           "p10": "Après avoir regardé les vidéos, déplacez le curseur principal vers la vidéo qui, selon vous, devrait être largement recommandée. Enregistrez quand votre choix est fait.",
-          "p20": "Plus votre avis est tranché sur un critère, plus le curseur devrait être proche de l'extrémité. Si vous trouvez les vidéos similaires, le curseur devrait se rapprocher du centre."
+          "p10mobile": "Après avoir regardé les vidéos, votez pour celle qui dévrait être largement recommandée en utilisant les boutons de comparaison au dessous.",
+          "p20": "Plus votre avis est tranché sur un critère, plus le curseur devrait être proche de l'extrémité. Si vous trouvez les vidéos similaires, le curseur devrait se rapprocher du centre.",
+          "p20mobile": "Si votre avis est tranché, utilisez les boutons aux extrémités. Si vous trouvez les deux vidéos similaires, utilisez le bouton \"égal\" du milieu."
         },
         "title2": "Faire des comparaisons aide la science 🔬",
         "message2": {
           "p10": "Chaque comparaison aide Tournesol à améliorer ses recommandations et sa base de données publique. Essayez maintenant de dérouler et d'utiliser les critères optionnels.",
-          "p20": "Vous pouvez choisir de ne pas vous exprimer sur un critère optionnel en le décochant. Il vous sera possible de modifier ultérieurement vos comparaisons depuis votre page Mes comparaisons."
+          "p10mobile": "Chaque comparaison aide Tournesol à améliorer ses recommandations et sa base de données publique.",
+          "p20": "Vous pouvez choisir de ne pas vous exprimer sur un critère optionnel en le décochant. Il vous sera possible de modifier ultérieurement vos comparaisons depuis votre page Mes comparaisons.",
+          "p20mobile": "Après quelques comparaisons de nouveaux critères optionnels vous serons proposés. Il vous sera aussi possible de modifier toutes vos comparaisons depuis votre page Mes comparaisons."
         },
         "title3": "Comment fonctionne Tournesol ? 🤖",
         "message3": {

frontend/src/features/comparisonSeries/TutorialContext.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const initialState = {
+  isActive: false,
+};
+
+export const TutorialContext = createContext(initialState);

frontend/src/features/comparisons/Comparison.tsx

@@ -9,15 +9,21 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Location } from 'history';
 
-import { CircularProgress, Grid, Card } from '@mui/material';
+import {
+  Box,
+  Card,
+  CircularProgress,
+  Grid,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
 
 import { useNotifications } from 'src/hooks';
 import {
   UsersService,
   ComparisonRequest,
   ApiError,
 } from 'src/services/openapi';
-import ComparisonSliders from 'src/features/comparisons/ComparisonSliders';
 import EntitySelector, {
   SelectorValue,
 } from 'src/features/entity_selector/EntitySelector';
@@ -27,6 +33,7 @@ import { UID_YT_NAMESPACE } from 'src/utils/constants';
 import { useCurrentPoll } from 'src/hooks/useCurrentPoll';
 import ComparisonEntityContexts from './ComparisonEntityContexts';
 import ComparisonHelper from './ComparisonHelper';
+import ComparisonInput from './ComparisonInput';
 
 export const UID_PARAMS: { vidA: string; vidB: string } = {
   vidA: 'uidA',
@@ -37,6 +44,8 @@ const LEGACY_PARAMS: { vidA: string; vidB: string } = {
   vidB: 'videoB',
 };
 
+const COMPARISON_MAX_WIDTH = '880px';
+
 const getUidsFromLocation = (location: Location) => {
   const searchParams = new URLSearchParams(location.search);
   let uidA = searchParams.get(UID_PARAMS.vidA);
@@ -84,6 +93,9 @@ const Comparison = ({
   const { t, i18n } = useTranslation();
   const currentLang = i18n.resolvedLanguage;
 
+  const theme = useTheme();
+  const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
   const history = useHistory();
   const location = useLocation();
   const { showSuccessAlert, displayErrorsFrom } = useNotifications();
@@ -231,16 +243,30 @@ const Comparison = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentLang]);
 
-  const onSubmitComparison = async (c: ComparisonRequest) => {
+  const onSubmitComparison = async (
+    c: ComparisonRequest,
+    partialUpdate?: boolean
+  ) => {
     try {
       if (initialComparison) {
         const { entity_a, entity_b, criteria_scores, duration_ms } = c;
-        await UsersService.usersMeComparisonsUpdate({
-          pollName,
-          uidA: entity_a.uid,
-          uidB: entity_b.uid,
-          requestBody: { criteria_scores, duration_ms },
-        });
+
+        if (partialUpdate === true) {
+          const resp = await UsersService.usersMeComparisonsPartialUpdate({
+            pollName,
+            uidA: entity_a.uid,
+            uidB: entity_b.uid,
+            requestBody: { criteria_scores, duration_ms },
+          });
+          setInitialComparison(resp);
+        } else {
+          await UsersService.usersMeComparisonsUpdate({
+            pollName,
+            uidA: entity_a.uid,
+            uidB: entity_b.uid,
+            requestBody: { criteria_scores, duration_ms },
+          });
+        }
       } else {
         await UsersService.usersMeComparisonsCreate({
           pollName,
@@ -275,84 +301,102 @@ const Comparison = ({
       setSelectorB((value) => ({ ...value, ratingIsExpired: true }));
     }
 
-    showSuccessAlert(t('comparison.successfullySubmitted'));
+    if (smallScreen) {
+      showSuccessAlert(t('comparison.ok'), 1200);
+    } else {
+      showSuccessAlert(t('comparison.successfullySubmitted'));
+    }
   };
 
   return (
-    <Grid container maxWidth="880px" gap={1}>
-      <Grid item xs display="flex" flexDirection="column" alignSelf="stretch">
-        <EntitySelector
-          alignment="left"
-          value={selectorA}
-          onChange={onChangeA}
-          otherUid={uidB}
-          history={selectorAHistory.current}
-        />
-      </Grid>
-      <Grid item xs display="flex" flexDirection="column" alignSelf="stretch">
-        <EntitySelector
-          alignment="right"
-          value={selectorB}
-          onChange={onChangeB}
-          otherUid={uidA}
-          history={selectorBHistory.current}
-        />
-      </Grid>
+    <>
       <Grid
-        item
-        xs={12}
-        sx={{
-          mt: 1,
-          display: 'flex',
-          alignItems: 'center',
-          flexDirection: 'column',
-          '&:empty': {
-            display: 'none',
-          },
-        }}
-        component={Card}
-        elevation={2}
+        container
+        gap={1}
+        mb={1}
+        maxWidth={COMPARISON_MAX_WIDTH}
+        // Allow the CriterionButtons to slide behind the entity selectors.
+        zIndex={theme.zIndex.comparisonElevation1}
       >
-        <ComparisonHelper />
+        <Grid item xs display="flex" flexDirection="column" alignSelf="stretch">
+          <EntitySelector
+            alignment="left"
+            value={selectorA}
+            onChange={onChangeA}
+            otherUid={uidB}
+            history={selectorAHistory.current}
+          />
+        </Grid>
+        <Grid item xs display="flex" flexDirection="column" alignSelf="stretch">
+          <EntitySelector
+            alignment="right"
+            value={selectorB}
+            onChange={onChangeB}
+            otherUid={uidA}
+            history={selectorBHistory.current}
+          />
+        </Grid>
       </Grid>
-      <Grid item xs={12} sx={{ '&:empty': { display: 'none' } }}>
-        <ComparisonEntityContexts selectorA={selectorA} selectorB={selectorB} />
-      </Grid>
-      <Grid
-        item
-        xs={12}
-        sx={{
-          marginTop: 2,
-          display: 'flex',
-          alignItems: 'center',
-          flexDirection: 'column',
-          py: 3,
-          '&:empty': { display: 'none' },
-        }}
-        component={Card}
-        elevation={2}
-      >
-        {selectorA.rating && selectorB.rating ? (
-          isLoading ? (
-            <CircularProgress color="secondary" />
-          ) : (
-            <ComparisonSliders
-              submit={onSubmitComparison}
-              initialComparison={initialComparison}
-              uidA={uidA || ''}
-              uidB={uidB || ''}
-              isComparisonPublic={
-                selectorA.rating.individual_rating.is_public &&
-                selectorB.rating.individual_rating.is_public
-              }
-            />
-          )
-        ) : selectorA.uid && selectorB.uid ? (
-          // Entities are selected but ratings are not loaded yet
-          <CircularProgress color="secondary" />
-        ) : null}
+      <Grid container gap={1} maxWidth={COMPARISON_MAX_WIDTH}>
+        <Grid
+          item
+          xs={12}
+          display="flex"
+          alignItems="center"
+          flexDirection="column"
+          sx={{
+            '&:empty': {
+              display: 'none',
+            },
+          }}
+          component={Card}
+          elevation={2}
+        >
+          <ComparisonHelper />
+        </Grid>
+        <Grid item xs={12} sx={{ '&:empty': { display: 'none' } }}>
+          <ComparisonEntityContexts
+            selectorA={selectorA}
+            selectorB={selectorB}
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          display="flex"
+          alignItems="stretch"
+          flexDirection="column"
+          gap={1}
+          sx={{
+            '&:empty': { display: 'none' },
+          }}
+        >
+          {selectorA.rating && selectorB.rating ? (
+            isLoading ? (
+              <Box display="flex" justifyContent="center">
+                <CircularProgress color="secondary" />
+              </Box>
+            ) : (
+              <ComparisonInput
+                uidA={uidA || ''}
+                uidB={uidB || ''}
+                onSubmit={onSubmitComparison}
+                initialComparison={initialComparison}
+                isComparisonPublic={
+                  selectorA.rating.individual_rating.is_public &&
+                  selectorB.rating.individual_rating.is_public
+                }
+              />
+            )
+          ) : selectorA.uid && selectorB.uid ? (
+            // Entities are selected but ratings are not loaded yet
+            <Box display="flex" justifyContent="center">
+              <CircularProgress color="secondary" />
+            </Box>
+          ) : null}
+        </Grid>
       </Grid>
-    </Grid>
+    </>
   );
 };