Release v2.5.0

app/assets/scripts/components/documents/document-changelog-modal.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import T from 'prop-types';
 import styled from 'styled-components';
 
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { Modal as BaseModal } from '@devseed-ui/modal';
 import { glsp } from '@devseed-ui/theme-provider';
 
@@ -121,7 +121,7 @@ export default function DocumentChangelogModal(props) {
 
   useEffect(() => {
     if (revealed) {
-      ReactGA.modalview('document-changelog');
+      ReactGA.send({ hitType: 'modalview', page: '/modal/document-changelog' });
     }
   }, [revealed]);
 

app/assets/scripts/components/documents/document-delete-process.js

@@ -1,5 +1,6 @@
 import { confirmDeleteDocumentVersion } from '../common/confirmation-prompt';
 import toasts from '../common/toasts';
+import ReactGA from 'react-ga4';
 
 /**
  * Convenience method to delete an atbd version and show a toast notification.
@@ -24,6 +25,7 @@ export async function documentDeleteVersionConfirmAndToast({
     if (result.error) {
       toasts.error(`An error occurred: ${result.error.message}`);
     } else {
+      ReactGA.event('atbd_version_deleted');
       toasts.success('Document version successfully deleted');
       history.push('/dashboard');
     }

app/assets/scripts/components/documents/document-download-menu.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import T from 'prop-types';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { Auth } from 'aws-amplify';
 import { saveAs } from 'file-saver';
 

app/assets/scripts/components/documents/document-info-modal.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import T from 'prop-types';
 import styled from 'styled-components';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { FormTextarea } from '@devseed-ui/form';
 import { Modal } from '@devseed-ui/modal';
 import { Button } from '@devseed-ui/button';
@@ -41,7 +41,7 @@ export default function DocumentInfoModal(props) {
 
   useEffect(() => {
     if (revealed) {
-      ReactGA.modalview('document-info');
+      ReactGA.send({ hitType: 'modalview', page: '/modal/document-info' });
     }
   }, [revealed]);
 

app/assets/scripts/components/documents/document-tracker-modal.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import T from 'prop-types';
 import qs from 'qs';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import styled, { css } from 'styled-components';
 import { useLocation } from 'react-router';
 import { Modal, ModalFooter } from '@devseed-ui/modal';
@@ -140,7 +140,10 @@ export default function DocumentTrackerModal(props) {
 
   useEffect(() => {
     if (revealed) {
-      ReactGA.modalview('document-progress-tracker');
+      ReactGA.send({
+        hitType: 'modalview',
+        page: '/modal/document-progress-tracker'
+      });
     }
   }, [revealed]);
 

app/assets/scripts/components/documents/hub/document-hub-entry.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import T from 'prop-types';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { VerticalDivider } from '@devseed-ui/toolbar';
 import { BsFilePdf } from 'react-icons/bs';
 

app/assets/scripts/components/documents/journal-pdf-preview/index.js

@@ -23,7 +23,10 @@ import {
   formatReference,
   sortReferences
 } from '../../../utils/references';
-import { formatDocumentTableCaptions } from '../../../utils/format-table-captions';
+import { applyNumberCaptionsToDocument } from '../../../utils/apply-number-captions-to-document';
+import { VariableItem } from '../single-view/document-body';
+import { variableNodeType } from '../../../types';
+import { sortContacts } from '../../../utils/sort-contacts';
 
 const ReferencesList = styled.ol`
   && {
@@ -217,6 +220,28 @@ ImplementationDataList.propTypes = {
   )
 };
 
+function VariablesList({ list }) {
+  if (!list || list.length === 0) {
+    return EMPTY_CONTENT_MESSAGE;
+  }
+
+  return (
+    <DataListContainer>
+      {list?.map((variable, i) => (
+        <VariableItem
+          key={`variable-${i + 1}`}
+          variable={variable}
+          element={{ id: `variable-${i}`, label: `Variable #${i + 1}` }}
+        />
+      ))}
+    </DataListContainer>
+  );
+}
+
+VariablesList.propTypes = {
+  list: T.arrayOf(variableNodeType)
+};
+
 function ContactOutput(props) {
   const { data } = props;
   const { affiliations, contact, roles } = data;
@@ -344,7 +369,7 @@ function JournalPdfPreview() {
     journal_discussion,
     data_availability,
     journal_acknowledgements
-  } = formatDocumentTableCaptions(document);
+  } = applyNumberCaptionsToDocument(document);
 
   const ContentView = useMemo(() => {
     const safeReadContext = {
@@ -422,43 +447,67 @@ function JournalPdfPreview() {
 
     // create contacts list component with superscripts
     let contacts = [];
-    contacts_link?.forEach(
-      ({ contact, affiliations: contactAffiliations }, i) => {
+    let authors = contacts_link?.filter(
+      (c) => !c.roles?.includes('Document Reviewer')
+    ); // Remove any reviewer from the authors list
+
+    authors
+      ?.sort(sortContacts)
+      .forEach(({ contact, affiliations: contactAffiliations }, i) => {
         const hasAffiliation =
           contactAffiliations && contactAffiliations.length > 0;
 
-        let contactEmail = contact.mechanisms.find(
-          (mechanism) => mechanism.mechanism_type === 'Email'
-        )?.mechanism_value;
-
         const item = (
           <span key={contact.id}>
             <strong>
               {getContactName(contact, { full: true })}
-              {contactEmail && ` (${contactEmail})`}
+              {hasAffiliation &&
+                contactAffiliations.map((affiliation, j) => {
+                  return (
+                    <>
+                      <sup>
+                        {Array.from(affiliations).indexOf(affiliation) + 1}
+                      </sup>
+                      <sup>
+                        {j < contactAffiliations.length - 1 && <span>, </span>}
+                      </sup>
+                    </>
+                  );
+                })}
+              {i < authors.length - 1 && <span>, </span>}
+              {i === authors.length - 2 && <span>and </span>}
             </strong>
-            {hasAffiliation &&
-              contactAffiliations.map((affiliation, j) => {
-                return (
-                  <>
-                    <sup>
-                      {Array.from(affiliations).indexOf(affiliation) + 1}
-                    </sup>
-                    <sup>
-                      {j < contactAffiliations.length - 1 && <span>, </span>}
-                    </sup>
-                  </>
-                );
-              })}
-            {i < contacts_link.length - 1 && <span>, </span>}
-            {i === contacts_link.length - 2 && <span>and </span>}
           </span>
         );
         contacts.push(item);
-      }
-    );
+      });
+
+    // create corresponding authors list component
+    const correspondingAuthors =
+      authors
+        ?.filter((c) =>
+          c.roles?.find((r) => r.toLowerCase() === 'corresponding author')
+        )
+        .map(({ contact }) => {
+          let contactEmail = contact.mechanisms.find(
+            (mechanism) => mechanism.mechanism_type === 'Email'
+          )?.mechanism_value;
+
+          let contactName = getContactName(contact, { full: true });
+
+          return `${contactName} ${contactEmail ? `(${contactEmail})` : ''}`;
+        }) || [];
+
+    const correspondingAuthorsString = correspondingAuthors.map((author, i) => (
+      <>
+        {author}
+        {i < correspondingAuthors.length - 1 && <span>, </span>}
+        {i === correspondingAuthors.length - 2 && <span>and </span>}
+      </>
+    ));
     return {
       items: contacts,
+      correspondingAuthors: correspondingAuthorsString,
       affiliations_list: Array.from(affiliations),
       maxIndex: (contacts_link?.length ?? 0) - 1
     };
@@ -514,10 +563,9 @@ function JournalPdfPreview() {
   );
   const mathematicalTheoryVisible =
     hasContent(mathematical_theory) || mathematicalTheoryAssumptionsVisible;
-  const algorithmInputVariablesVisible = hasContent(algorithm_input_variables);
-  const algorithmOutputVariablesVisible = hasContent(
-    algorithm_output_variables
-  );
+  const algorithmInputVariablesVisible = algorithm_input_variables?.length > 0;
+  const algorithmOutputVariablesVisible =
+    algorithm_output_variables?.length > 0;
   const algorithmDescriptionVisible =
     scientificTheoryVisible ||
     mathematicalTheoryVisible ||
@@ -581,6 +629,14 @@ function JournalPdfPreview() {
                 </div>
               ))}
             </div>
+            <div>
+              {contacts?.correspondingAuthors?.length > 0 && (
+                <div>
+                  <strong>Corresponding Author(s): </strong>
+                  {contacts?.correspondingAuthors}
+                </div>
+              )}
+            </div>
           </AuthorsSection>
           <Section id='key_points' title='Key Points:' skipNumbering>
             <ul>
@@ -668,15 +724,15 @@ function JournalPdfPreview() {
                   id='algorithm_input_variables'
                   title='Algorithm Input Variables'
                 >
-                  <ContentView value={algorithm_input_variables} />
+                  <VariablesList list={algorithm_input_variables} />
                 </Section>
               )}
               {algorithmOutputVariablesVisible && (
                 <Section
                   id='algorithm_output_variables'
                   title='Algorithm Output Variables'
                 >
-                  <ContentView value={algorithm_output_variables} />
+                  <VariablesList list={algorithm_output_variables} />
                 </Section>
               )}
             </Section>

app/assets/scripts/components/documents/pdf-preview/index.js

@@ -9,6 +9,7 @@
 import DocumentTitle from '../single-view/document-title';
 import { DocumentProse } from '../single-view/document-content';
 import { ScrollAnchorProvider } from '../single-view/scroll-manager';
+import { applyNumberCaptionsToDocument } from '../../../utils/apply-number-captions-to-document';
 
 const TocHeader = styled.h1`
   border-bottom: 3px solid #000;
@@ -204,13 +205,6 @@
   // Starting from h2
   generateHeading(2, tocElement, content, undefined);
 
-  const captions = content.querySelectorAll('.slate-image-block figcaption');
-  Array.from(captions).forEach((caption, i) => {
-    const captionPrefix = document.createElement('span');
-    captionPrefix.innerText = `Figure ${i + 1}: `;
-    caption.prepend(captionPrefix);
-  });
-
   const equationNumbers = content.querySelectorAll(
     '.slate-equation-element .equation-number'
   );
@@ -225,6 +219,7 @@
   const { isAuthReady } = useUser();
   const contentRef = useRef(null);
   const [previewReady, setPreviewReady] = useState(false);
+  const [document, setDocument] = useState(null);
 
   useEffect(() => {
     isAuthReady && fetchSingleAtbd();
@@ -245,12 +240,19 @@
     }
 
     if (atbd.status === 'succeeded') {
-      generateTocAndHeadingNumbering(contentRef.current);
-
+      setDocument(applyNumberCaptionsToDocument(atbd.data.document));
       waitForImages();
     }
   }, [atbd.status]);
 
+  // This useEffect is responsible for generating the ToC and numbering
+  // after the document is transformed
+  useEffect(() => {
+    if (document && contentRef?.current) {
+      generateTocAndHeadingNumbering(contentRef.current);
+    }
+  }, [document]);
+
   return (
     <ScrollAnchorProvider disabled>
       {atbd.status === 'loading' && <GlobalLoading />}
@@ -271,9 +273,17 @@
                 id='table-of-contents'
               />
             </div>
-            <DocumentProse className='preview-page-content'>
-              <DocumentBody atbd={atbd.data} disableScrollManagement={true} />
-            </DocumentProse>
+            {document && (
+              <DocumentProse className='preview-page-content'>
+                <DocumentBody
+                  atbd={{
+                    ...atbd.data,
+                    document
+                  }}
+                  disableScrollManagement={true}
+                />
+              </DocumentProse>
+            )}
           </div>
           {previewReady && <div id='pdf-preview-ready' />}
         </PreviewContainer>

app/assets/scripts/components/documents/single-edit/step-contacts/contact-fieldset.js

@@ -38,7 +38,8 @@ const roleTypes = [
   'Supervision',
   'Investigation',
   'Funding acquisition',
-  'Corresponding Author'
+  'Corresponding Author',
+  'Document Reviewer'
 ];
 
 const emptyAffiliation = '';