Merge pull request #237 from CBIIT/dev-1.3.0

Pull from Dev 1.3.0

Author: David-YuWei

public/User Guide for CCDC v1.2.2.pdf renamed to public/User Guide for CCDC v1.3.0.pdf

@@ -76,4 +76,5 @@
 
 .accordion-body {
   padding: 0;
+  font-weight: bold;
 }

src/components/Accordion/Accordion.css

@@ -414,7 +414,7 @@ const NavBar = () => {
                     <MobileLiSection style={path === "/about" || path.startsWith("/about?") ? mobileActiveStyle : null}><NavLink to="/about" onClick={handleMobileMenuClick}>About CCDI Data Catalog</NavLink></MobileLiSection>
                     <MobileLiSection style={path === "/glossary" || path.startsWith("/glossary?") ? mobileActiveStyle : null}><NavLink to="/glossary" onClick={handleMobileMenuClick}>Glossary</NavLink></MobileLiSection>
                     <MobileLiSection style={path === "/siteupdate" || path.startsWith("/siteupdate?") ? mobileActiveStyle : null}><NavLink to="/siteupdate" onClick={handleMobileMenuClick}>Site Updates</NavLink></MobileLiSection>
-                    <MobileLiSection><a href="/User Guide for CCDC v1.2.2.pdf">User Guide (PDF)</a></MobileLiSection>
+                    <MobileLiSection><a href="/User Guide for CCDC v1.3.0.pdf">User Guide (PDF)</a></MobileLiSection>
                   </MobileSubUl>
                 </MobileUlContainer>
                 <UlContainer id="primary-navigation" className="primary-navigation">
@@ -430,7 +430,7 @@ const NavBar = () => {
                           <li><NavLink to="/about" style={({ isActive }) => (isActive ? activeStyle : null)}>&nbsp; &nbsp; About CCDI Data Catalog</NavLink></li>
                           <li><NavLink to="/glossary" style={({ isActive }) => (isActive ? activeStyle : null)}>&nbsp; &nbsp; Glossary</NavLink></li>
                           <li><NavLink to="/siteupdate" style={({ isActive }) => (isActive ? activeStyle : null)}>&nbsp; &nbsp; Site Updates</NavLink></li>
-                          <li><a href="/User Guide for CCDC v1.2.2.pdf" target="_blank" rel="noreferrer">&nbsp; &nbsp; User Guide (PDF)</a></li>
+                          <li><a href="/User Guide for CCDC v1.3.0.pdf" target="_blank" rel="noreferrer">&nbsp; &nbsp; User Guide (PDF)</a></li>
                       </ul>
                   </LiSection>
                 </UlContainer>

src/components/common/NavBar.js

@@ -36,7 +36,12 @@ nav {
 }
 
 .custom-popover.popover {
-  max-width: 220px;
   border-radius: 6px;
   font-size: 12px;
+  word-wrap: normal;
+  z-index: 99;
 }
+
+.popover-body {
+  padding: 10px;
+}

src/index.css

@@ -221,6 +221,7 @@ const ParticipatingResourceDetail = ({
   const tooltips = {
     Repository: "Biomedical data repositories store, organize, validate, archive, preserve, and distribute data, in compliance with the FAIR Data Principles. It is a system for storing multiple research artifacts, provided at least some of the research artifacts contain Individual Research Data. A data repository often contains artifacts from multiple studies. Some data repositories accept research datasets irrespective of the structure of those datasets; other data repositories require all research datasets to conform to a standard reference model.",
     Catalog: "A data catalog is not a data repository but rather a place where data is described with an index to what is available. A collection of digests and references (e.g., URL or POC) to corresponding research artifacts. There is a consistent structure across the collection of digests to facilitate filtering and identifying research artifacts of interest. A catalog contains some combination of Summary Research Data, Summary Clinical Data, Data Overview, and Resource Metadata.",
+    "Cell Line": "A cell culture developed from a single cell or group of similar cells and therefore consisting of cells with a uniform genetic makeup that can be reproduced for various types of research. A cell line is different than a tissue sample in that it is grown as a culture of identical cells and can be reproduced indefinitely.",
     Collection: "A group of datasets collected together for any reason by an organization of researchers, stewards, or stakeholders either pertaining to a common theme or for a common purpose. For example, the Treehouse Childhood Cancer Initiative maintains a collection of cell line data as part of their repository of pediatric cancer genomic data.",
     Knowledgebase: "Biomedical knowledgebases extract, accumulate, organize, annotate, and link the growing body of information that is related to and relies on core datasets.",
     Registry: "A cancer registry is an information system designed for the collection, storage, and management of data on persons with cancer. An inventory of individuals or samples, usually focused on a specific diagnosis or condition. In some cases, public health laws require collecting information in registries about individuals who have a specific disease or condition. In other cases, individuals provide information about themselves to these registries voluntarily. Thus, a registry contains Individual Clinical Data, but not Individual Research Data.",

src/pages/participatingResourceDetailPage/ParticipatingResourceDetail.js

@@ -167,6 +167,17 @@ const SearchResultContainer = styled.div`
     color: #004187;
   }
 
+  .descLink {
+    margin: 0 3px 0 3px;
+    padding: 1px 5px 1px 5px;
+    border: 1px solid #9EC1DB;
+    border-radius: 5px;
+    font-weight: bold;
+    background-color: #DFEEF9;
+    color: #004187;
+    line-height: 2.5em;
+  }
+
   a[target="_blank"] {
     color: #004187;
     background: url(${externalIcon}) right center no-repeat #DFEEF9;
@@ -597,6 +608,43 @@ const SearchResult = ({
             } else {
               desc = desc.replace(/<(?![b/])/g, "&lt;");
             }
+            const arr = desc.split("http");
+            let descArr = [];
+            if (arr.length > 1) {
+              if (arr[0].endsWith("<b>")) {
+                descArr.push(arr[0].substring(0, arr[0].length - 3));
+              } else {
+                descArr.push(arr[0]);
+              }
+                for (let i = 1; i < arr.length; i += 1) {
+                    const urlArr = arr[i].split(" ");
+                    const url = urlArr[0].replace("</b>", "");
+                    const urlLastChar = url[url.length - 1];
+                    if (",;.()<>{}".includes(urlLastChar)) {
+                        const newUrl = "http".concat(url.substring(0, url.length - 1));
+                        descArr.push(newUrl);
+                        const restText = arr[i].split(url.substring(0, url.length - 1))[1];
+                        if (restText.endsWith("<b>")) {
+                          descArr.push(restText.substring(0, restText.length - 3));
+                        } else {
+                          descArr.push(restText);
+                        }
+                    } else {
+                        const newUrl = "http".concat(url);
+                        descArr.push(newUrl);
+                        if (urlArr.length !== 1) {
+                          const restText = arr[i].split(url)[1];
+                          if (restText.endsWith("<b>")) {
+                            descArr.push(restText.substring(0, restText.length - 3));
+                          } else {
+                            descArr.push(restText);
+                          }
+                        }
+                    }
+                }
+            } else {
+              descArr = arr;
+            }
             const otherMatches = [];
             if (rst.highlight) {
               Object.keys(rst.highlight).forEach((hl) => {
@@ -725,7 +773,20 @@ const SearchResult = ({
                       <div className="col">
                         <label>Description:</label>
                         <span className="textSpan">
-                          {ReactHtmlParser(desc)}
+                        {
+                          descArr.map((item, desidx) => {
+                            const deskey = `des_${desidx}`;
+                            return (
+                              item.includes("http")
+                              ? (
+                              <span key={deskey} className="descLink">
+                                <a href={item} target="_blank" rel="noreferrer noopener">{item}</a>
+                              </span>
+                              )
+                              : <span key={deskey}>{ReactHtmlParser(item)}</span>
+                            );
+                          })
+                        }
                         </span>
                       </div>
                     </div>
@@ -844,6 +905,24 @@ const SearchResult = ({
                                   </span>
                                 );
                               }
+                              if (am.name === "GEO Study Identifier") {
+                                const geoId = m.replace(/<b>/g, "").replace(/<\/b>/g, "");
+                                const geoLink = ''.concat('https://www.ncbi.nlm.nih.gov/geo/query/acc.cgi?acc=', geoId);
+                                return (
+                                  <span className="itemSpan">
+                                    <a href={geoLink} target="_blank" rel="noreferrer noopener">{geoId}</a>
+                                  </span>
+                                );
+                              }
+                              if (am.name === "dbGaP Study Identifier") {
+                                const dbId = m.replace(/<b>/g, "").replace(/<\/b>/g, "");
+                                const dbLink = ''.concat('https://www.ncbi.nlm.nih.gov/geo/query/acc.cgi?acc=', dbId);
+                                return (
+                                  <span className="itemSpan">
+                                    <a href={dbLink} target="_blank" rel="noreferrer noopener">{dbId}</a>
+                                  </span>
+                                );
+                              }
                               return (
                                 <span className="itemSpan additionalItemSpan">{ReactHtmlParser(m)}</span>
                               );