feat(openale): Add guided tour for search

dataesr · Dec 11, 2024 · f944e8d · f944e8d
1 parent d671ca5
commit f944e8d
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 16 deletions.
diff --git a/client/src/components/tag-input/index.jsx b/client/src/components/tag-input/index.jsx
@@ -19,6 +19,7 @@ const { VITE_APP_TAG_LIMIT } = import.meta.env;
 const SEE_MORE_AFTER = 3;
 
 export default function TagInput({
+  className,
   deletedTags,
   getRorChildren,
   hint,
@@ -97,7 +98,7 @@ export default function TagInput({
 
   return (
     <>
-      <Row verticalAlign="bottom">
+      <Row className={className} verticalAlign="bottom">
         <Col className="fr-pb-2w">
           <TextInput
             hint={hint}
@@ -199,6 +200,7 @@ export default function TagInput({
 }
 
 TagInput.propTypes = {
+  className: PropTypes.string,
   deletedTags: PropTypes.arrayOf(PropTypes.object),
   getRorChildren: PropTypes.bool,
   hint: PropTypes.string,
@@ -218,6 +220,7 @@ TagInput.propTypes = {
 };
 
 TagInput.defaultProps = {
+  className: '',
   deletedTags: [],
   getRorChildren: false,
   hint: 'Press "ENTER" to search for several terms',

diff --git a/client/src/pages/openalex-affiliations/results/index.jsx b/client/src/pages/openalex-affiliations/results/index.jsx
@@ -16,7 +16,6 @@ import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
-import { status } from '../../../config';
 import useToast from '../../../hooks/useToast';
 import Header from '../../../layout/header';
 import getFlagEmoji from '../../../utils/flags';
@@ -45,11 +44,6 @@ export default function Affiliations() {
   const [cleanRor, setCleanRor] = useState('');
   const [filteredAffiliationName, setFilteredAffiliationName] = useState('');
   const [filteredAffiliations, setFilteredAffiliations] = useState([]);
-  const [filteredStatus] = useState([
-    status.tobedecided.id,
-    status.validated.id,
-    status.excluded.id,
-  ]);
   const [isLoading, setIsLoading] = useState(false);
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
   const [isRemoveModalOpen, setIsRemoveModalOpen] = useState(false);
@@ -196,11 +190,6 @@ export default function Affiliations() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ror]);
 
-  // -------------------------------------------
-  // TODO: afficher les ROR supprimés (striked) dans la modal de suppression - à discuter
-  // TODO: pastilles de couleur pour les RORs
-  // TODO: optimisation
-
   const toggleRemovedRor = (affiliationId, rorId) => {
     const updatedAffiliations = affiliations.map((affiliation) => {
       if (affiliation.id === affiliationId) {

diff --git a/client/src/pages/openalex-affiliations/search.jsx b/client/src/pages/openalex-affiliations/search.jsx
@@ -9,13 +9,16 @@ import {
   SelectOption,
   TextInput,
 } from '@dataesr/dsfr-plus';
+import { Steps } from 'intro.js-react';
 import { useEffect, useState } from 'react';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
 import TagInput from '../../components/tag-input';
 import Header from '../../layout/header';
 import { cleanRor, getRorData, isRor } from '../../utils/ror';
 
+import 'intro.js/introjs.css';
+
 const { VITE_APP_TAG_LIMIT } = import.meta.env;
 
 const START_YEAR = 2010;
@@ -40,6 +43,28 @@ export default function OpenalexAffiliationsSearch() {
   const [searchedAffiliations, setSearchedAffiliations] = useState([]);
   const [tags, setTags] = useState([]);
 
+  const steps = [
+    {
+      element: '.step-ror-to-add',
+      intro: 'Searched affiliations. Can be ROR or string. Press ENTER to validate. OR boolean.',
+      position: 'right',
+      tooltipClass: 'myTooltipClass',
+      highlightClass: 'myHighlightClass',
+    },
+    {
+      element: '.step-ror-to-exclude',
+      intro: 'Excluded ROR. Only ROR. Separate by space.',
+    },
+    {
+      element: '.step-year-start',
+      intro: 'Filter on publication year between start and end, included',
+    },
+    {
+      element: '.step-search-works',
+      intro: '⏳ Finally run the search. It can take a while ',
+    },
+  ];
+
   useEffect(() => {
     if (searchParams.size < 4) {
       // Set default params values
@@ -218,6 +243,12 @@ export default function OpenalexAffiliationsSearch() {
   return (
     <>
       <Header />
+      <Steps
+        enabled={true}
+        initialStep={0}
+        steps={steps}
+        onExit={() => {}}
+      />
       <Modal isOpen={isOpen} hide={() => setIsOpen(false)} size="xl">
         <ModalContent>
           <Container as="section" className="filters fr-my-5w">
@@ -307,7 +338,7 @@ export default function OpenalexAffiliationsSearch() {
       </Modal>
       <Container as="section" className="filters fr-my-5w">
         <Row className="fr-pt-2w fr-pr-2w fr-pb-0 fr-pl-2w">
-          <Col xs="8">
+          <Col className="step-ror-to-add" xs="8">
             <TagInput
               getRorChildren={currentSearchParams.getRorChildren === '1'}
               hint="Press ENTER to search for several terms / expressions. If several, an OR operator is used."
@@ -329,7 +360,7 @@ export default function OpenalexAffiliationsSearch() {
           </Col>
           <Col offsetXs="1" className="text-right fr-pl-3w">
             <Row gutters verticalAlign="bottom">
-              <Col>
+              <Col className="step-year-start">
                 <Select
                   aria-label="Select a start year for search"
                   buttonLabel={currentSearchParams.startYear}
@@ -369,7 +400,7 @@ export default function OpenalexAffiliationsSearch() {
           </Col>
         </Row>
         <Row className="fr-pt-0 fr-pr-2w fr-pb-2w fr-pl-2w">
-          <Col xs="8">
+          <Col className="step-ror-to-exclude" xs="8">
             <TextInput
               hint="You can focus on recall issues in OpenAlex (missing ROR). This way, only affiliation strings that are NOT matched in OpenAlex to this specific ROR will be retrieved. If several ROR to exclude, separate them by space."
               label="ROR to exclude: exclude affiliation strings already mapped to a specific ROR in OpenAlex"
@@ -379,7 +410,7 @@ export default function OpenalexAffiliationsSearch() {
               value={excludedRors}
             />
           </Col>
-          <Col offsetXs="1" className="text-right fr-pl-3w">
+          <Col offsetXs="1" className="fr-pl-3w step-search-works text-right">
             <Button
               className="fr-mt-2w"
               disabled={searchParams.getAll('affiliations').length === 0}