Handle long values in the Project Label section on the project detail page. Resolves #986. (#988)

Author: frano-m

spa/src/app/files/hca-project/hca-project-mapper.mock.ts

@@ -239,6 +239,7 @@ export const PROJECT_DETAIL_NULL_VALUES = {
 // Example of project detail with specific values,
 // sample entity type as "specimens",
 // workflow as "Unspecified"
+// projectShortname as sentence case e.g. "Healthy and type 2 diabetes pancreas"
 export const PROJECT_DETAIL_SPECIFIC_VALUES = {
     "ageUnit": "month",
     "arrayExpressAccessions": "E-AAAA-00",
@@ -271,7 +272,7 @@ export const PROJECT_DETAIL_SPECIFIC_VALUES = {
     "otherCount": 16,
     "pairedEnd": "false",
     "projectDescription": "Contains a small file set from the dataset: 4k PBMCs from a Healthy Donor, a Single Cell Gene Expression Dataset by Cell Ranger 2.1.0. Peripheral blood mononuclear cells (PBMCs) were taken from a healthy donor (same donor as pbmc8k). PBMCs are primary cells with relatively small amounts of RNA (~1pg RNA/cell). Data/Analysis can be found here https://support.10xgenomics.com/single-cell-gene-expression/datasets/2.1.0/pbmc4k and all data is licensed under the creative commons attribution license (https://creativecommons.org/licenses/by/4.0/). This test also contains extensive metadata for browser testing. Metadata is fabricated.",
-    "projectShortname": "integration/optimus/2019-09-24T11:02:18Z",
+    "projectShortname": "Healthy and type 2 diabetes pancreas",
     "projectTitle": "Tabula Muris: Transcriptomic characterization of 20 organs and tissues from Mus musculus at single cell resolution",
     "publications": [
         {

spa/src/app/files/hca-project/hca-project.component.html

@@ -161,7 +161,7 @@ <h4 class="fontsize-m semi-bold">Project Details</h4>
                                     {{getColumnDisplayName('projectShortname')}}
                                 </hca-tooltip>
                             </p>
-                            <p class="fontsize-xs rhs">{{state.project.project.projectShortname}}</p>
+                            <p [ngClass]="{'fontsize-xxs rhs': true, 'break': !isShortNameSentence(state.project.project.projectShortname)}">{{state.project.project.projectShortname}}</p>
                         </div>
                         <div>
                             <p class="fontsize-xs semi-bold lhs">

spa/src/app/files/hca-project/hca-project.component.scss

@@ -240,8 +240,14 @@
     .rhs {
         box-sizing: border-box;
         width: 100%;
+
+        /* Break word */
+        &.break {
+            word-break: break-all;
+        }
     }
 
+    /* Species matrix url */
     .species-matrix-url {
         transition: background-color 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
         &:hover {
@@ -277,6 +283,7 @@
         .rhs {
             flex: 1;
             max-width: 400px;
+            min-width: 200px; /* Required for downloads */
             padding-left: 16px;
         }
 

spa/src/app/files/hca-project/hca-project.component.spec.ts

@@ -50,6 +50,7 @@ describe("HCAProjectComponent", () => {
     testConfig.getPortalURL.and.returnValue("https://test.com");
 
     // Class names
+    const CLASSNAME_BREAK = "break";
     const CLASSNAME_CITATION = ".citation";
     const CLASSNAME_CITATION_URL = ".citation .url";
     const CLASSNAME_PROJECT_DETAILS_LHS = ".project-details .lhs";
@@ -190,6 +191,28 @@ describe("HCAProjectComponent", () => {
         expect(projectUrl).toEqual(TEST_VALUE_CITATION_URL);
     });
 
+    /**
+     * Confirm is short name sentence returns true when project label is sentence case.
+     */
+    it("should is short name sentence returns true when project label is sentence case", () => {
+
+        const shortNameSentence = component.isShortNameSentence(PROJECT_DETAIL_SPECIFIC_VALUES.projectShortname);
+
+        // Confirm true is returned
+        expect(shortNameSentence).toEqual(true);
+    });
+
+    /**
+     * Confirm is short name sentence returns false when project label is not sentence case.
+     */
+    it("should is short name sentence returns false when project label is not sentence case", () => {
+
+        const shortNameSentence = component.isShortNameSentence(PROJECT_DETAIL_SINGLE_VALUES.projectShortname);
+
+        // Confirm false is returned
+        expect(shortNameSentence).toEqual(false);
+    });
+
     /**
      * Confirm "Citation" is displayed.
      */
@@ -268,6 +291,67 @@ describe("HCAProjectComponent", () => {
         expect(getComponentInputPropertyValue(copyToClipboard, COMPONENT_INPUT_PROPERTY_COPY_TO_CLIPBOARD_LINK)).toEqual(TEST_VALUE_CITATION_URL);
     });
 
+    /**
+     * Confirm "Project Label" is displayed.
+     */
+    it(`should display "Project Label"`, () => {
+
+        testStore.pipe
+            .and.returnValues(
+            of(PROJECT_DETAIL_SINGLE_VALUES), // selected project detail
+            of(PROJECT_MATRIX_URLS_SINGLE_SPECIES), // project matrix URLs
+            of([]), // project ids
+            of([]) // integrations
+        );
+
+        fixture.detectChanges();
+
+        // Confirm "Project Label" is displayed
+        expect(isProjectDetailLabelDisplayed(PROJECT_LABEL_PROJECT_SHORTNAME, CLASSNAME_PROJECT_DETAILS_LHS)).toEqual(true);
+    });
+
+    /**
+     * Confirm class "break" is not displayed when "projectShortname" is sentence case.
+     */
+    it(`should not display class "break" when "projectShortname" is sentence case`, () => {
+
+        testStore.pipe
+            .and.returnValues(
+            of(PROJECT_DETAIL_SPECIFIC_VALUES), // selected project detail
+            of(PROJECT_MATRIX_URLS_SINGLE_SPECIES), // project matrix URLs
+            of([]), // project ids
+            of([]) // integrations
+        );
+
+        fixture.detectChanges();
+
+        const projectDetailClasses = getProjectDetailClasses(PROJECT_LABEL_PROJECT_SHORTNAME);
+
+        // Confirm class is not displayed
+        expect(projectDetailClasses[CLASSNAME_BREAK]).toEqual(false);
+    });
+
+    /**
+     * Confirm class "break" is displayed when "projectShortname" is not sentence case.
+     */
+    it(`should display class "break" when "projectShortname" is not sentence case`, () => {
+
+        testStore.pipe
+            .and.returnValues(
+            of(PROJECT_DETAIL_SINGLE_VALUES), // selected project detail
+            of(PROJECT_MATRIX_URLS_SINGLE_SPECIES), // project matrix URLs
+            of([]), // project ids
+            of([]) // integrations
+        );
+
+        fixture.detectChanges();
+
+        const projectDetailClasses = getProjectDetailClasses(PROJECT_LABEL_PROJECT_SHORTNAME);
+
+        // Confirm class is displayed
+        expect(projectDetailClasses[CLASSNAME_BREAK]).toEqual(true);
+    });
+
     /**
      * Confirm "Sample Type" is displayed.
      */
@@ -660,12 +744,12 @@ describe("HCAProjectComponent", () => {
     }
 
     /**
-     * Returns the project detail value for the specified project detail.
+     * Returns the project detail for the specified project detail label.
      *
      * @param {string} projectDetailLabel
-     * @returns {any}
+     * @returns {DebugElement}
      */
-    function getProjectDetailValue(projectDetailLabel: string): any {
+    function getProjectDetail(projectDetailLabel: string): DebugElement {
 
         const projectDetailValueEls = fixture.debugElement.queryAll(By.css(CLASSNAME_PROJECT_DETAILS_RHS));
 
@@ -676,7 +760,43 @@ describe("HCAProjectComponent", () => {
 
         const projectDetailIndex = PROJECT_DETAIL_DISPLAY_ORDER.indexOf(projectDetailLabel);
 
-        return projectDetailValueEls[projectDetailIndex].nativeElement.innerText;
+        return projectDetailValueEls[projectDetailIndex];
+    }
+
+    /**
+     * Returns the project detail classes for the specified project detail.
+     *
+     * @param {string} projectDetailLabel
+     * @returns {Object}
+     */
+    function getProjectDetailClasses(projectDetailLabel: string): Object {
+
+        const projectDetail = getProjectDetail(projectDetailLabel);
+
+        if ( !projectDetail ) {
+
+            return;
+        }
+
+        return projectDetail.classes;
+    }
+
+    /**
+     * Returns the project detail value for the specified project detail.
+     *
+     * @param {string} projectDetailLabel
+     * @returns {any}
+     */
+    function getProjectDetailValue(projectDetailLabel: string): any {
+
+        const projectDetail = getProjectDetail(projectDetailLabel);
+
+        if ( !projectDetail ) {
+
+            return;
+        }
+
+        return projectDetail.nativeElement.innerText;
     }
 
 

spa/src/app/files/hca-project/hca-project.component.ts

@@ -176,23 +176,23 @@ export class HCAProjectComponent implements OnDestroy, OnInit {
     }
 
     /**
-     * Returns true if at least one data curator has been specified for this project.
+     * Returns true if project collaborating organizations exist.
      *
-     * @param {string[]} curators
+     * @param {CollaboratingOrganizationView[]} collaboratingOrganzations
      * @returns {boolean}
      */
-    public isAnyDataCuratorAssociated(curators: string[]): boolean {
-        return curators.length > 0;
+    public isAnyCollaboratingOrganizationAssociated(collaboratingOrganzations: CollaboratingOrganizationView[]): boolean {
+        return collaboratingOrganzations.length > 0;
     }
 
     /**
-     * Returns true if project collaborating organizations exist.
+     * Returns true if project contacts exist.
      *
-     * @param {CollaboratingOrganizationView[]} collaboratingOrganzations
+     * @param {ContactView[]} contacts
      * @returns {boolean}
      */
-    public isAnyCollaboratingOrganizationAssociated(collaboratingOrganzations: CollaboratingOrganizationView[]): boolean {
-        return collaboratingOrganzations.length > 0;
+    public isAnyContactAssociated(contacts: ContactView[]): boolean {
+        return contacts.length > 0;
     }
 
     /**
@@ -205,6 +205,16 @@ export class HCAProjectComponent implements OnDestroy, OnInit {
         return contributors.length > 0;
     }
 
+    /**
+     * Returns true if at least one data curator has been specified for this project.
+     *
+     * @param {string[]} curators
+     * @returns {boolean}
+     */
+    public isAnyDataCuratorAssociated(curators: string[]): boolean {
+        return curators.length > 0;
+    }
+
     /**
      * Returns true if project publications exist.
      *
@@ -229,16 +239,6 @@ export class HCAProjectComponent implements OnDestroy, OnInit {
         return (isMobile || isTablet);
     }
 
-    /**
-     * Returns true if project contacts exist.
-     *
-     * @param {ContactView[]} contacts
-     * @returns {boolean}
-     */
-    public isAnyContactAssociated(contacts: ContactView[]): boolean {
-        return contacts.length > 0;
-    }
-
     /**
      * Returns true if project is a selected facet.
      *
@@ -262,6 +262,17 @@ export class HCAProjectComponent implements OnDestroy, OnInit {
         return sampleEntityType === "specimens";
     }
 
+    /**
+     * Returns true if short name is spaced.
+     *
+     * @param {string} shortName
+     * @returns {boolean}
+     */
+    public isShortNameSentence(shortName: string): boolean {
+
+        return shortName.includes(" ");
+    }
+
     /**
      * Returns true if workflow is any value other than "Unspecified".
      *