feat(study): SJIP-1518 rework title summary and data access

cypress/e2e/Consultation/PageStudy_3.cy.ts

@@ -11,51 +11,68 @@ beforeEach(() => {
 });
 
 describe('Page d\'une étude - Valider les liens disponibles', () => {
-  it('Lien dbGaP du panneau Summary', () => {
-    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(3).invoke('text').then((invokeText) => {
-      if (!invokeText.includes('-')) {
-        cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(3).find('[href]')
-        .should('have.attr', 'href').and('match', /https:\/\/www\.ncbi\.nlm\.nih\.gov\/projects\/gap\/cgi-bin\/study\.cgi\?study_id\=phs002981/);
-      };
-    });
+  it('Lien Clinical Trial du panneau Summary', () => {
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(1).find('[href]')
+      .should('have.attr', 'href').and('match', /http:\/\/clinicaltrials.gov\/study\/NCT04048759/);
   });
 
-  it('Lien Study Website du panneau Summary', () => {
-    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(12).find('[href]')
-      .should('have.attr', 'href').and('match', /https:\/\/www.trisome.org/);
+  it('Lien \'See more\' de Description du panneau Summary', () => {
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(5).contains('See more').clickAndWait({force: true});
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"] [style*="webkit-line-clamp: unset"]').contains('The Human Trisome Project (HTP)').should('exist');
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(5).contains('See less').clickAndWait({force: true});
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"] [style*="webkit-line-clamp: 2"]').contains('The Human Trisome Project (HTP)').should('exist');
   });
 
   it('Lien Publication du panneau Summary', () => {
-    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(13).find('[href]')
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(10).find('[href]')
       .should('have.attr', 'href').and('match', /https:\/\/pubmed.ncbi.nlm.nih.gov\/38942750(|\/)/);
   });
 
   it('Lien \'See more\' de Publication du panneau Summary', () => {
     cy.get('[class*="PubModal_modalWrapper"]').should('not.exist');
-    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(13).contains('See more').clickAndWait({force: true});
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(10).contains('See more').clickAndWait({force: true});
     cy.get('[class*="PubModal_modalWrapper"]').should('exist');
   });
 
   it('Lien DOI Citation du panneau Summary', () => {
-    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(14).find('[href]')
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(11).find('[href]')
       .should('have.attr', 'href').and('match', /https:\/\/doi.org\/10.71738\/p0a9-2v09/);
   });
 
-  it('Lien Virtual Biorepository Email du panneau Summary', () => {
-    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(18).find('[href]')
-      .should('have.attr', 'href', 'mailto:dsresearch@cuanschutz.edu');
+  it('Lien \'See more\' de Citation Statement du panneau Summary', () => {
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(14).contains('See more').clickAndWait({force: true});
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"] [style*="webkit-line-clamp: unset"]').contains('This is the end of the Citation Statement text.').should('exist');
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(14).contains('See less').clickAndWait({force: true});
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"] [style*="webkit-line-clamp: 2"]').contains('This is the end of the Citation Statement text.').should('exist');
   });
 
-  it('Lien Virtual Biorepository URL du panneau Summary', () => {
-    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(19).find('[href]')
-      .should('have.attr', 'href', 'https://redcap.link/HTPVBRrequest');
+  it('Lien \'See more\' de Acknowledgement du panneau Summary', () => {
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(15).contains('See more').clickAndWait({force: true});
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"] [style*="webkit-line-clamp: unset"]').contains('This is the end of the Acknowledgement text.').should('exist');
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"]').eq(15).contains('See less').clickAndWait({force: true});
+    cy.get('[id="summary"] [class="ant-descriptions-item-content"] [style*="webkit-line-clamp: 2"]').contains('This is the end of the Acknowledgement text.').should('exist');
   });
 
   it('Lien Duo de l\'Access Limitation du panneau Data Access', () => {
     cy.get('[id="data_access"] [class="ant-descriptions-item-content"]').eq(0).find('[href]')
       .should('have.attr', 'href', 'http://purl.obolibrary.org/obo/DUO_0000042');
   });
 
+  it('Lien Study Website du panneau Data Access', () => {
+    cy.get('[id="data_access"] [class="ant-descriptions-item-content"]').eq(3).find('[href]')
+      .should('have.attr', 'href').and('match', /https:\/\/www.trisome.org/);
+  });
+
+  it('Lien Virtual Biorepository Email du panneau Data Access', () => {
+    cy.get('[id="data_access"] [class="ant-descriptions-item-content"]').eq(4).find('[href]')
+      .should('have.attr', 'href', 'mailto:dsresearch@cuanschutz.edu');
+  });
+
+  it('Lien Virtual Biorepository URL du panneau Data Access', () => {
+    cy.get('[id="data_access"] [class="ant-descriptions-item-content"]').eq(5).find('[href]')
+      .should('have.attr', 'href', 'https://redcap.link/HTPVBRrequest');
+  });
+
   it('Lien DataExploration du panneau HTP Whole Blood RNAseq (2020)', () => {
     cy.get('[id="HTP-RNAseq-WholeBlood-2020"] [class="ant-collapse-extra"] button').eq(0).clickAndWait({force: true});
     cy.get('[class*="DataFiles_dataFilesTabWrapper"]').should('exist'); // data-cy="ProTable_Participants"

cypress/e2e/ManifestButton/PageDataExploration_3.cy.ts

@@ -30,7 +30,7 @@ describe('Page Data Exploration (Data Files) - Api', () => {
     });
   });
 
-  it('Valider la réponse reçue - Bouton Manifest [SJIP-1520]', () => {
+  it.skip('Valider la réponse reçue - Bouton Manifest [SJIP-1520]', () => {
     cy.fixture('RequestBody/FileManifestStats.json').then((mockRequestBody) => {
       cy.intercept('POST', '**/reports/file-manifest/stats', (req) => {
         req.alias = 'postStats';

cypress/fixtures/ResponseBody/StudyEntity.json

@@ -10,11 +10,46 @@
                             "study_id": "HTP",
                             "study_code": "HTP",
                             "study_name": "The Human Trisome Project",
-                            "acknowledgement": "Acknowledgement",
+                            "acknowledgement": "A very long text to display the SeeMore button. A very long text to display the SeeMore button. A very long text to display the SeeMore button. A very long text to display the SeeMore button. A very long text to display the SeeMore button. A very long text to display the SeeMore button. A very long text to display the SeeMore button. This is the end of the Acknowledgement text.",
                             "biobank_contact": "dsresearch@cuanschutz.edu",
                             "biobank_request_link": "https://redcap.link/HTPVBRrequest",
                             "biospecimen_count": 58049,
-                            "citation_statement": "Citation Statement",
+                            "citation_statement": "A very long text to display the SeeMore button. A very long text to display the SeeMore button. A very long text to display the SeeMore button. A very long text to display the SeeMore button. A very long text to display the SeeMore button. A very long text to display the SeeMore button. A very long text to display the SeeMore button. This is the end of the Citation Statement text.",
+                            "clinical_trials": {
+                                "hits": {
+                                    "edges": [
+                                        {
+                                            "node": {
+                                                "arm_allocation": "Randomized",
+                                                "arm_information": "Other: Remote Low",
+                                                "intervention": "Remote Low (Participants will attend 40 min remotely delivered group MVPA sessions once a week, receive a step counter, access to resources for increasing MVPA, and one 20-min remotely delivered individual support/education session/wk)",
+                                                "intervention_assignment_strategy": "Parallel",
+                                                "intervention_types": [
+                                                    "Behavioral"
+                                                ],
+                                                "primary_outcome_measures": [
+                                                    "Minutes of Moderate to Vigorous Physical Activity (MVPA) per day"
+                                                ],
+                                                "primary_purpose": "Prevention",
+                                                "registry_id": "NCT04048759",
+                                                "secondary_outcome_measures": [
+                                                    "Cognitive function",
+                                                    "Cardiovascular fitness",
+                                                    "Change in quality of life",
+                                                    "Brain volume",
+                                                    "Functional connectivity",
+                                                    "Cerebral blood flow",
+                                                    "Retention",
+                                                    "Session attendance",
+                                                    "Use of recorded exercise sessions",
+                                                    "Reported Serious Adverse Events"
+                                                ],
+                                                "trial_phase": "Not Applicable"
+                                            }
+                                        }
+                                    ]
+                                }
+                            },
                             "contacts": {
                                 "hits": {
                                     "total": 2,

package.json

@@ -67,7 +67,7 @@
     "@apollo/client": "^3.13.8",
     "@dnd-kit/core": "^4.0.3",
     "@dnd-kit/sortable": "^5.1.0",
-    "@ferlab/ui": "^10.35.2",
+    "@ferlab/ui": "^10.35.3",
     "@loadable/component": "^5.16.4",
     "@react-keycloak/core": "^3.2.0",
     "@react-keycloak/web": "^3.4.0",

src/components/ExpandableText/index.module.css

@@ -0,0 +1,35 @@
+.container {
+  position: relative;
+}
+
+.text {
+  line-height: 1.5;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.text.clamped {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hiddenText {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  width: 100%;
+  visibility: hidden;
+  pointer-events: none;
+  line-height: 1.5;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.toggleButton {
+  padding: 0;
+  margin-top: 8px;
+  height: auto;
+  font-size: 12px;
+}

src/components/ExpandableText/index.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useRef, useState } from 'react';
+import intl from 'react-intl-universal';
+import { Button } from 'antd';
+
+import styles from './index.module.css';
+
+interface ExpandableTextProps {
+  text: string;
+  maxLines?: number;
+  className?: string;
+}
+
+const ExpandableText: React.FC<ExpandableTextProps> = ({ text, maxLines = 2, className = '' }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const textRef = useRef<HTMLDivElement>(null);
+  const hiddenTextRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (textRef.current && hiddenTextRef.current) {
+        const lineHeight = parseInt(window.getComputedStyle(textRef.current).lineHeight);
+        const maxHeight = lineHeight * maxLines;
+        const actualHeight = hiddenTextRef.current.scrollHeight;
+
+        setIsOverflowing(actualHeight > maxHeight);
+      }
+    };
+
+    checkOverflow();
+    window.addEventListener('resize', checkOverflow);
+
+    return () => {
+      window.removeEventListener('resize', checkOverflow);
+    };
+  }, [text, maxLines]);
+
+  const handleToggle = (event: React.MouseEvent<HTMLElement>) => {
+    setIsExpanded(!isExpanded);
+    event.currentTarget.blur();
+  };
+
+  if (!text) {
+    return null;
+  }
+
+  return (
+    <div className={`${styles.container} ${className}`}>
+      <div
+        ref={textRef}
+        className={`${styles.text} ${!isExpanded && isOverflowing ? styles.clamped : ''}`}
+        style={{
+          WebkitLineClamp: !isExpanded && isOverflowing ? maxLines : 'unset',
+          display: !isExpanded && isOverflowing ? '-webkit-box' : 'block',
+        }}
+      >
+        {text}
+      </div>
+
+      <div ref={hiddenTextRef} className={styles.hiddenText} aria-hidden="true">
+        {text}
+      </div>
+
+      {isOverflowing && (
+        <Button type="link" size="small" onClick={handleToggle} className={styles.toggleButton}>
+          {isExpanded ? intl.get('global.seeLess') : intl.get('global.seeMore')}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default ExpandableText;

src/graphql/models.ts

@@ -73,4 +73,4 @@ export interface IQueryResults<T> {
   data: T;
   loading: boolean;
   total: number;
-}
+}