Merge branch 'staging'

.github/workflows/production.yml

@@ -43,7 +43,7 @@ jobs:
         run: |
           IMAGE_ID=ghcr.io/${{ github.repository }}
           IMAGE_ID=$(echo $IMAGE_ID | tr '[A-Z]' '[a-z]')
-          docker push --all-tags $IMAGE_ID
+          docker push -a $IMAGE_ID
 
   release:
     name: Create new Github release

client/src/components/tag-input/index.jsx

@@ -8,9 +8,11 @@ import {
   TextInput,
 } from '@dataesr/dsfr-plus';
 
+import './index.scss';
+
 const { VITE_APP_TAG_LIMIT } = import.meta.env;
 
-const SEE_MORE_AFTER = 5;
+const SEE_MORE_AFTER = 3;
 
 export default function TagInput({
   deletedTags,
@@ -133,12 +135,12 @@ export default function TagInput({
                   <TagGroup>
                     {currentTags.map((tag) => (
                       <DismissibleTag
-                        className="fr-mr-1w"
+                        className={`fr-mr-1w ${tag.disable ? 'scratched' : ''}`}
                         color={getTagColor(tag)}
                         key={tag.label}
                         onClick={() => handleDeleteClick(tag)}
                         size="sm"
-                        title={`Tag ${tag.label}${tag.disable ? ' (not searched)' : ''}`}
+                        title={`${tag.label}${tag.disable ? ' (not searched)' : ''}`}
                       >
                         {tag.label}
                       </DismissibleTag>

client/src/components/tag-input/index.scss

@@ -0,0 +1,3 @@
+.scratched {
+  text-decoration: line-through !important;
+}

client/src/components/tiles/datasets.jsx

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
+import './tiles.scss';
 
 export default function DatasetsTile({ setView }) {
   return (
     <div
-      className="fr-tile fr-tile--horizontal"
+      className="fr-tile fr-tile--horizontal click"
       onClick={() => setView('datasets')}
       onKeyDown={(e) => {
         if (e.key === 'Enter' || e.key === ' ') {
@@ -19,8 +20,11 @@ export default function DatasetsTile({ setView }) {
             <p>🗃 Find the datasets affiliated to your institution</p>
           </h3>
           <p className="fr-tile__detail">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            Voluptates, ratione recusandae deserunt non inventore, dolor placeat itaque eveniet, impedit facere reiciendis rem. Nihil mollitia inventore, nostrum dolores quas ea optio.
+            🔎 Explore the most frequent raw affiliation strings retrieved in the French Open Science Monitor data and in OpenAlex for your query (datasets only).
+            <br />
+            🤔 Validate ✅ or exclude ❌ each of them, whether it actually corresponds to your institution or not. 
+            <br />
+            💾 Save (export to a file) those decisions and the datasets corpus you just built.
           </p>
         </div>
       </div>

client/src/components/tiles/openalex.jsx

@@ -1,9 +1,11 @@
 import PropTypes from 'prop-types';
+import './tiles.scss';
 
 export default function OpenalexTile({ setView }) {
   return (
     <div
-      className="fr-tile fr-tile--horizontal"
+      className="fr-tile fr-tile--horizontal click"
+      size="sm"
       onClick={() => setView('openalex')}
       onKeyDown={(e) => {
         if (e.key === 'Enter' || e.key === ' ') {
@@ -19,8 +21,11 @@ export default function OpenalexTile({ setView }) {
             <p>✏️ Improve RoR matching in OpenAlex - Provide your feedback!</p>
           </h3>
           <p className="fr-tile__detail">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            Voluptates, ratione recusandae deserunt non inventore, dolor placeat itaque eveniet, impedit facere reiciendis rem. Nihil mollitia inventore, nostrum dolores quas ea optio.
+            🔎 Analyze the most frequent raw affiliation strings retrieved in OpenAlex for your query.
+            <br />
+            🤖 Check the RoR automatically computed by OpenAlex. Sometimes, they can be inaccurate or missing.
+            <br />
+            ✏️  Correct the errors (inaccurate or missing RoRs) and send feedback to OpenAlex.
           </p>
         </div>
       </div>

client/src/components/tiles/publications.jsx

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
+import './tiles.scss';
 
 export default function PublicationsTile({ setView }) {
   return (
     <div
-      className="fr-tile fr-tile--horizontal"
+      className="fr-tile fr-tile--horizontal click"
       onClick={() => setView('publications')}
       onKeyDown={(e) => {
         if (e.key === 'Enter' || e.key === ' ') {
@@ -19,8 +20,11 @@ export default function PublicationsTile({ setView }) {
             <p>📑 Find the publications affiliated to your institution</p>
           </h3>
           <p className="fr-tile__detail">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            Voluptates, ratione recusandae deserunt non inventore, dolor placeat itaque eveniet, impedit facere reiciendis rem. Nihil mollitia inventore, nostrum dolores quas ea optio.
+            🔎 Explore the most frequent raw affiliation strings retrieved in the French Open Science Monitor data and in OpenAlex for your query.
+            <br />
+            🤔 Validate ✅ or exclude ❌ each of them, whether it actually corresponds to your institution or not. 
+            <br />
+            💾 Save (export to a file) those decisions and the publications corpus you just built.
           </p>
         </div>
       </div>

client/src/components/tiles/tiles.scss

@@ -0,0 +1,6 @@
+.click {
+  cursor: pointer;
+}
+.click:hover {
+  border: solid;
+}

client/src/layout/Footer.jsx

@@ -63,14 +63,18 @@ export default function Footer() {
           <div className="fr-footer__brand fr-enlarge-link">
             <a href="/" title="Retour à l’accueil du site - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
               <p className="fr-logo">
-                Intitulé
+                MINISTÈRE
                 <br />
-                officiel
+                DE L'ENSEIGNEMENT
+                <br />
+                SUPÉRIEUR
+                <br />
+                ET DE LA RECHERCHE
               </p>
             </a>
           </div>
           <div className="fr-footer__content">
-            <p className="fr-footer__content-desc">Lorem [...] elit ut.</p>
+            <p className="fr-footer__content-desc">Retrieve the scholarly works of your institution</p>
             <ul className="fr-footer__content-list">
               <li className="fr-footer__content-item">
                 <a className="fr-footer__content-link" target="_blank" rel="noopener external noreferrer" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>

client/src/pages/filters.jsx

@@ -165,12 +165,11 @@ export default function Filters({ isFetched, sendQuery }) {
     <>
       {isSticky ? (
         <Container fluid as="section" className="filters">
-          <Row verticalAlign="top" className="fr-p-2w">
+          <Row verticalAlign="top" className="fr-p-1w">
             <Ribbon />
             <Col xs="2" offsetXs="1">
               <Title as="h1" look="h6" className="fr-m-0">
                 {VITE_APP_NAME}
-                <br />
                 {VITE_HEADER_TAG && (
                   <Badge
                     color={VITE_HEADER_TAG_COLOR}
@@ -183,9 +182,10 @@ export default function Filters({ isFetched, sendQuery }) {
             </Col>
             <Col>
               <Row>
-                <Col xs="1" className="text-right fr-pr-1w">
-                  <Title title="Selected filters" className="fr-icon-filter-line" as="h2" look="h4" />
+                { /* <Col xs="1" className="text-right fr-pr-1w">
+                 <Title title="Selected filters" className="fr-icon-filter-line" as="h2" look="h4" />
                 </Col>
+               */ }
                 <Col onClick={(e) => { setIsOpen(true); e.preventDefault(); }}>
                   <TagGroup>
                     <Tag color="blue-ecume" key="tag-sticky-years" size="sm">
@@ -206,17 +206,17 @@ export default function Filters({ isFetched, sendQuery }) {
                   >
                     <SegmentedElement
                       checked={currentSearchParams.view === 'openalex'}
-                      label="Improve RoR matching in OpenAlex"
+                      label="Improve OpenAlex (RoRs)"
                       value="openalex"
                     />
                     <SegmentedElement
                       checked={currentSearchParams.view === 'publications'}
-                      label="Find affiliated publications"
+                      label="Publications corpus"
                       value="publications"
                     />
                     <SegmentedElement
                       checked={currentSearchParams.view === 'datasets'}
-                      label="Find affiliated datasets"
+                      label="Datasets corpus"
                       value="datasets"
                     />
                   </SegmentedControl>
@@ -302,7 +302,7 @@ export default function Filters({ isFetched, sendQuery }) {
             </Row>
           </Container>
           {
-            isFetched && (
+            isFetched && false && (
               <Container as="section" className="fr-my-3w">
                 <Row>
                   <Col style={{ textAlign: 'center' }}>
@@ -313,17 +313,17 @@ export default function Filters({ isFetched, sendQuery }) {
                     >
                       <SegmentedElement
                         checked={currentSearchParams.view === 'openalex'}
-                        label="Improve RoR matching in OpenAlex"
+                        label="1.Improve RoR matching in OpenAlex"
                         value="openalex"
                       />
                       <SegmentedElement
                         checked={currentSearchParams.view === 'publications'}
-                        label="Find affiliated publications"
+                        label="Publications corpus"
                         value="publications"
                       />
                       <SegmentedElement
                         checked={currentSearchParams.view === 'datasets'}
-                        label="Find affiliated datasets"
+                        label="Datasets corpus"
                         value="datasets"
                       />
                     </SegmentedControl>

client/src/pages/index.jsx

@@ -70,11 +70,20 @@ export default function Home() {
     // TODO:do a cleaner way to display the spinner and views
     <>
       <Filters isFetched sendQuery={sendQuery} />
-      <Container as="section" className="fr-mt-10w">
-        {isFetching && <Spinner size={48} />}
+      <Container as="section" className="fr-mt-4w">
+        {isFetching && (
+          <Row>
+            <Col xs="2" offsetXs="6">
+              <Spinner size={48} />
+            </Col>
+          </Row>
+        )}
 
         {(!isFetching && !searchParams.get('view') && isFetched) && (
-          <Row gutters>
+          <Row gutters className="fr-mb-16w">
+            <Col xs="12">
+              <div> The data has been fetched, please start with one of the use cases described below. You will be able to switch from one to another. </div>
+            </Col>
             <Col>
               <OpenalexTile setView={setView} />
             </Col>

client/src/pages/views/datasets.jsx

@@ -23,7 +23,7 @@ export default function Datasets({
   tagAffiliations,
   tagDatasets,
 }) {
-  const [Tab, setTab] = useState('listOfDatasets');
+  const [Tab, setTab] = useState('selectAffiliations');
   return (
     <>
       <Row>

client/src/pages/views/openalex.jsx

@@ -32,12 +32,13 @@ export default function Openalex({
             </p>
           </div>
         </Col>
-        <Col xs="12">
+        <Col xs="3">
           <ActionsOpenalex
             allOpenalexCorrections={allOpenalexCorrections}
             options={options}
           />
-          &nbsp;
+        </Col>
+        <Col xs="3">
           <ActionsOpenalexFeedback
             allOpenalexCorrections={allOpenalexCorrections}
             options={options}

client/src/pages/views/publications.jsx

@@ -34,7 +34,7 @@ export default function Publications({
           </Title>
           <Row>
             <Col xs="12">
-              <div className="fr-callout">
+              <div className="fr-callout fr-mb-16w">
                 <p className="fr-callout__text fr-text--sm">
                   To search for publications, please disable the "Search for datasets only" option
                 </p>

client/src/utils/works.jsx

@@ -2,26 +2,67 @@ import { Button } from '@dataesr/dsfr-plus';
 
 import { status } from '../config';
 
-const {
-  VITE_API,
-} = import.meta.env;
+const { VITE_API } = import.meta.env;
 
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
-const getData = async (options) => fetch(`${VITE_API}/works`, {
-  body: JSON.stringify(options),
-  headers: { 'Content-Type': 'application/json' },
-  method: 'POST',
-}).then((response) => {
-  if (response.ok) return response.json();
-  console.error(response);
-  console.error('Oops... FOSM API request did not work');
-  return {};
-}).catch((error) => {
-  console.error(error);
-  console.error('Oops... FOSM API request did not work');
-  return {};
-});
+const b64decode = (str) => {
+  const binaryString = window.atob(str);
+  const len = binaryString.length;
+  const bytes = new Uint8Array(new ArrayBuffer(len));
+  for (let i = 0; i < len; i += 1) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+  return bytes;
+};
+
+const unzipData = async (compressedBase64) => {
+  const stream = new Blob([b64decode(compressedBase64)], {
+    type: 'application/json',
+  }).stream();
+  const compressedReadableStream = stream.pipeThrough(
+    new DecompressionStream('gzip'),
+  );
+  const resp = new Response(compressedReadableStream);
+  const blob = await resp.blob();
+  return JSON.parse(await blob.text());
+};
+
+const decompressAll = async (chunks) => {
+  const res = await Promise.all(chunks.map(async (c) => unzipData(c)));
+  return res.flat();
+};
+
+const Timeout = (time) => {
+  const controller = new AbortController();
+  setTimeout(() => controller.abort(), time * 1000);
+  return controller;
+};
+
+const getData = async (options) => {
+  try {
+    const responseAffiliations = await fetch(`${VITE_API}/works`, {
+      body: JSON.stringify(options),
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+      signal: Timeout(600).signal, // 10 minutes
+    });
+    if (responseAffiliations.ok) {
+      const { affiliations, datasets, publications } = await responseAffiliations.json();
+      const resAffiliations = await decompressAll(affiliations);
+      datasets.results = await decompressAll(datasets.results);
+      publications.results = await decompressAll(publications.results);
+      return { affiliations: resAffiliations, datasets, publications };
+    }
+    console.error(responseAffiliations);
+    console.error('Oops... FOSM API request did not work');
+    return {};
+  } catch (error) {
+    console.error(error);
+    console.error('Oops... FOSM API request did not work');
+    return {};
+  }
+};
 
 const getIdLink = (type, id) => {
   let prefix = null;