Add links to all standards and improve appearance (#240)

ac-jorellanaf · Cito · web-flow · commit 4c4ec99ffd55 · 2024-08-07T14:21:02.000+02:00
* Added links to all standards without links

* Update src/components/home/homeBottomSection/standards.json

Co-authored-by: Christoph Zwerschke &lt;c.zwerschke@dkfz-heidelberg.de&gt;

* Some fixes to appearance and code of accordion

* Added a background to carousel
Fixed statistics text alignment
Misc beauty fixes

---------

Co-authored-by: Christoph Zwerschke &lt;c.zwerschke@dkfz-heidelberg.de&gt;
diff --git a/src/components/home/homeBottomSection/homeBottomSection.tsx b/src/components/home/homeBottomSection/homeBottomSection.tsx
@@ -12,11 +12,15 @@ import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
  */
 const HomeBottomSection = () => {
   return (
-    <Row className="mx-2 mb-3">
-      <Col>
-        <h4 className="fw-bold fs-3 p-3 pb-1">Our Standards</h4>
-        <hr className="mx-3 border-tertiary mb-5 opacity-100" />
-        <Carousel indicators={false} variant="dark" interval={null}>
+    <Row className="mx-2 mb-3 mt-4 bg-tertiary rounded">
+      <Col style={{ height: "450px" }}>
+        <h4 className="fw-bold fs-3 p-3 pb-2 mb-4">Our Standards</h4>
+        <Carousel
+          indicators={false}
+          variant="dark"
+          interval={null}
+          style={{ height: "320px" }}
+        >
           {standards
             .map((value) => ({ value, sort: Math.random() }))
             .sort((a, b) => a.sort - b.sort)
@@ -29,30 +33,30 @@ const HomeBottomSection = () => {
                     {x.img_location === "" ? (
                       <Col
                         className="overflow-auto"
-                        style={{ height: "200px" }}
+                        style={{ maxHeight: "220px" }}
                       >
                         <PerfectScrollbar>
-                          <p style={{ textAlign: "justify" }}>
-                            {x.description.split("\n").map((z, idz) => (
-                              <span
-                                key={
-                                  "homepage_span_" +
-                                  x.name +
-                                  "_description_" +
-                                  idz
-                                }
-                              >
-                                {z}
-                              </span>
-                            ))}
-                          </p>
+                          {x.description.split("\n").map((z, idz) => (
+                            <p
+                              className="mb-0"
+                              style={{ textAlign: "justify" }}
+                              key={
+                                "homepage_span_" +
+                                x.name +
+                                "_description_" +
+                                idz
+                              }
+                            >
+                              {z}
+                            </p>
+                          ))}
                         </PerfectScrollbar>
                       </Col>
                     ) : (
                       <>
                         <Col
                           className="col-7 overflow-auto"
-                          style={{ height: "200px" }}
+                          style={{ maxHeight: "220px" }}
                         >
                           <PerfectScrollbar>
                             <p style={{ textAlign: "justify" }}>
@@ -84,20 +88,14 @@ const HomeBottomSection = () => {
                         as="a"
                         target="_blank"
                         variant="quinary"
-                        className="shadow-md-dark my-4"
+                        className="shadow-md-dark my-3"
                         href={x.learn_more_href}
                       >
                         <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                         &nbsp;Learn more...
                       </Button>
                     ) : (
-                      <Button
-                        variant="white"
-                        className="my-4 bg-white pe-none"
-                        href={x.learn_more_href}
-                      >
-                        &nbsp;
-                      </Button>
+                      ""
                     )}
                   </div>
                 </div>
diff --git a/src/components/home/homeBottomSection/standards.json b/src/components/home/homeBottomSection/standards.json
@@ -101,14 +101,14 @@
     "description": "Data Use Ontology (DUO) is a standard released by the fEGA, which grants researchers the ability to use human biomedical datasets for controlled-access datasets depending on their research purpose and permissions. Users can tag the datasets with specific usage constraints, which allows them to be discovered based on the permissions granted to health, clinical, and biological researchers. The DUO standard has already been used to annotate over 200,000 datasets throughout the world. For instance, a rare disease researcher can access any dataset that is authorized for commercial and rare disease use cases. The DUO standard contains human-readable explanations and terms, generated by the corresponding data access committees (DAC). The DUO standard is structured with 25 terms that reflect two types of data use: permission and modifier terms. Permission terms contain, for instance: general research use (GRU), health or medical or biomedical (HMB) disease-specific (DS), and population origins or ancestry (POA), which are all clearly approved applications or specialized fields of study. Modifier terms include limitations and requirements within controlled access such as non-commercial use only (NCU), ethics approval required (IRB) and genetics studies only (GSO).",
     "img_alt": "Chart",
     "img_location": "",
-    "learn_more_href": "",
+    "learn_more_href": "https://www.ga4gh.org/product/data-use-ontology-duo/",
     "name": "DUO"
   },
   {
     "description": "The Data Repository Service (DRS) API is a standard released by GA4GH in 2019. It provides standardized access to data independent from the architecture or technology stack of the storage repository. It essentially acts as a data catalog that lists access metadata in a standardized way. Another GA4GH standard being used by GHGA is the encryption file format Crypt4GH. It acts as a container around existing file formats, encrypting files with a symmetric stream cipher to allow for random access of the encrypted data. The symmetric key is encrypted separately via asynchronous encryption. Ideally, this means that neither the secret nor the data itself will be stored on a disk in a decrypted state throughout the file life cycle. Crypt4GH thus provides a solution to both encryptions at rest as well as transfer encryption. It is meant as a file format for bioinformatics research, but in theory can be used for any kind of file format, and some bioinformatic toolsets, like SAMtools, already provide support for Crypt4GH.",
     "img_alt": "Chart",
     "img_location": "",
-    "learn_more_href": "",
+    "learn_more_href": "https://www.ga4gh.org/product/data-repository-service-drs/",
     "name": "DRS"
   },
   {
@@ -122,7 +122,7 @@
     "description": "The Dublin CoreTM Metadata Element Set is a vocabulary of fifteen properties for use in resource description. The fifteen element \"Dublin CoreTM\" described in this standard is part of a larger set of metadata vocabularies and technical specifications maintained by the Dublin CoreTM Metadata Initiative (DCMI). The full set of vocabularies, DCMI Metadata Terms [DCMI-TERMS], also includes sets of resource classes (including the DCMI Type Vocabulary [DCMI-TYPE]), vocabulary encoding schemes, and syntax encoding schemes. The terms in DCMI vocabularies are intended to be used in combination with terms from other, compatible vocabularies in the context of application profiles and on the basis of the DCMI Abstract Model [DCAM].",
     "img_alt": "Chart",
     "img_location": "",
-    "learn_more_href": "",
+    "learn_more_href": "https://www.dublincore.org/",
     "name": "DublinCore"
   }
 ]
diff --git a/src/components/home/homeMidSection/homeMidSection.tsx b/src/components/home/homeMidSection/homeMidSection.tsx
@@ -167,26 +167,28 @@ const HomeMidSection = () => {
 
   return (
     <Col className="px-2">
-      <Row className="rounded bg-primary w-100 mx-0 mb-3 px-sm-3 px-xl-5 pb-lg-5 justify-content-evenly">
-        <h4 className="fw-bold fs-2 text-white p-4 pb-4 mx-4">Statistics</h4>
-        {Badges.map((x, idx) => (
-          <Col
-            xs={12}
-            sm={6}
-            lg={3}
-            className="mb-4 mb-lg-0 px-xl-4 px-xxl-5"
-            key={"home_page_badge_" + idx}
-          >
-            <HomeMidSectionBadge
-              badgeTitle={x.badgeTitle}
-              badgeBody={x.badgeBody}
-              bodyRowClasses={x.bodyRowClasses}
-              bodyColClasses={x.bodyColClasses}
-              badgeClasses={x.badgeClasses}
-              badgeDark={x.badgeDark}
-            />
-          </Col>
-        ))}
+      <Row className="rounded bg-primary w-100 mx-0 mb-3 pb-lg-5">
+        <h4 className="fw-bold fs-2 text-white p-4 pb-4 mx-2">Statistics</h4>
+        <div className="px-sm-3 px-xl-5 d-flex justify-content-evenly">
+          {Badges.map((x, idx) => (
+            <Col
+              xs={12}
+              sm={6}
+              lg={3}
+              className="mb-4 mb-lg-0 px-xl-4 px-xxl-5"
+              key={"home_page_badge_" + idx}
+            >
+              <HomeMidSectionBadge
+                badgeTitle={x.badgeTitle}
+                badgeBody={x.badgeBody}
+                bodyRowClasses={x.bodyRowClasses}
+                bodyColClasses={x.bodyColClasses}
+                badgeClasses={x.badgeClasses}
+                badgeDark={x.badgeDark}
+              />
+            </Col>
+          ))}
+        </div>
       </Row>
     </Col>
   );
