PEAR-2035 - start fixing data dictionary app

.secrets.baseline

@@ -205,14 +205,14 @@
         "filename": "docs/Data_Dictionary/gdcmvs.md",
         "hashed_secret": "bda4195ff28a812d14a7e4dd172299f68962d55a",
         "is_verified": false,
-        "line_number": 1
+        "line_number": 7
       },
       {
         "type": "Base64 High Entropy String",
         "filename": "docs/Data_Dictionary/gdcmvs.md",
-        "hashed_secret": "04a52a012e416f2d2b07b144a16e757e36da7ecd",
+        "hashed_secret": "97ab09d8cba84ac72babc44076ebcaf944d634e3",
         "is_verified": false,
-        "line_number": 6
+        "line_number": 15
       }
     ],
     "docs/Data_Dictionary/viewer.md": [
@@ -221,14 +221,21 @@
         "filename": "docs/Data_Dictionary/viewer.md",
         "hashed_secret": "bda4195ff28a812d14a7e4dd172299f68962d55a",
         "is_verified": false,
-        "line_number": 3
+        "line_number": 9
       },
       {
         "type": "Base64 High Entropy String",
         "filename": "docs/Data_Dictionary/viewer.md",
         "hashed_secret": "406ff424dc0a82cba2f75fd2965c5862e89fc505",
         "is_verified": false,
-        "line_number": 5
+        "line_number": 11
+      },
+      {
+        "type": "Base64 High Entropy String",
+        "filename": "docs/Data_Dictionary/viewer.md",
+        "hashed_secret": "04a52a012e416f2d2b07b144a16e757e36da7ecd",
+        "is_verified": false,
+        "line_number": 12
       }
     ],
     "docs/Data_Submission_Portal/Users_Guide/Best_Practices.md": [
@@ -278,5 +285,5 @@
       }
     ]
   },
-  "generated_at": "2024-07-09T16:27:29Z"
+  "generated_at": "2024-07-11T15:38:42Z"
 }

docs/Data_Dictionary/gdcmvs.md

@@ -1,10 +1,20 @@
+---
+hide:
+    - navigation
+    - toc
+---
+
 <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
 <script type="text/javascript" src="lib/js/jquery-ui.min.js"></script>
 <script type="text/javascript" src="lib/js/pagination.min.js"></script>
 <script type="text/javascript" src="lib/js/jsrender.min.js"></script>
 <!-- boostrap used by bundle.js for tooltips -->
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <script type="text/javascript" src="dist/bundle.js"></script>
+<link rel="stylesheet" href="dist/styles.css">
+<link rel="stylesheet" href="lib/css/jquery-ui.min.css">
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
+
+
 
 <!-- GDCMVS APP -->
 
@@ -16,11 +26,11 @@
         <input id="keywords" type="text" class="form-control search-bar__input" aria-label="keywords" placeholder="Please enter keyword" autocomplete="off">
         <div id="search-bar-options" class="search-bar__options dropdown" style="display: none;">
           <a href="#" data-toggle="dropdown" class="dropdown-toggle search-bar__option" aria-label="boolean operators"><i class="fa fa-ellipsis-h"></i></a>
-          <ul class="dropdown-menu search-bar__dropdown">
-              <li><a class="search-bar__boolean" data-boolean="AND" href="#">AND</a></li>
-              <li><a class="search-bar__boolean" data-boolean="OR" href="#">OR</a></li>
-              <li><a class="search-bar__boolean" data-boolean="NOT" href="#">NOT</a></li>
-          </ul>
+          <div class="dropdown-menu search-bar__dropdown">
+              <a class="search-bar__boolean" data-boolean="AND" href="#">AND</a>
+              <a class="search-bar__boolean" data-boolean="OR" href="#">OR</a>
+              <a class="search-bar__boolean" data-boolean="NOT" href="#">NOT</a>
+          </div>
           <a href="#" id="searchclear" class="search-bar__option" aria-label="clear search bar"><i class="fa fa-times"></i></a>
         </div>
         <span class="input-group-btn">

docs/Data_Dictionary/viewer.md

@@ -1,12 +1,20 @@
+---
+hide:
+    - navigation
+    - toc
+---
+
 # Data Dictionary Viewer
 <link rel="stylesheet" href="dictionary.css">
 <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js" integrity="sha512-vc58qvvBdrDR4etbxMdlTt4GBQk1qjvyORR2nrsPsFPyrs+/u5c3+1Ct6upOgdZoIl7eq6k3a1UPDSNAQi/32A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+
 <script src="dictionary.js"></script>
 <script src="dictionary-views.js"></script>
 <script src="dictionary-init.js"></script>
-<p id="dictionary-preamble" style="margin: 2rem auto 4rem auto; width: 95%;">
+<p id="dictionary-preamble" style="margin: 1rem auto 2rem auto; width: 95%;">
 The GDC data dictionary viewer is a user-friendly interface for accessing the <a href="../">GDC Data Dictionary</a>.
 </p>
 <div id="dictionary-loading-icon" class="loadingContainer">

docs/Data_Dictionary/viewer/dictionary.css

@@ -1,15 +1,4 @@
-.dictionary-view {
-  opacity: 0;
-  width: 95%;
-  margin: 3rem auto 0rem auto;
-}
-.dictionary-view h1:after {
-  margin-top: 0.3rem;
-}
 
-.dictionary-view .bullets {
-  padding-left: 2.2rem;
-}
 
 /* Dictionary Entity View */
 .dictionary-properties-table,
@@ -35,6 +24,7 @@
   font-style:normal;
   padding: 1rem 0.5rem;
   position: relative;
+  text-align: left;
 }
 
 
@@ -122,7 +112,6 @@
   display: block;
   width: 100%;
   padding: 0.5rem 1rem;
-  font-size: 1.3rem;
 }
 
 .dictionary-entity-list-item {
@@ -169,7 +158,6 @@
 .dictionary-summary-table {
   width: 100%;
   margin: 0rem auto 4rem auto;
-  font-size: 1.2rem;
   border: solid 1px #ccc;
   background-color: #fff;
 }
@@ -193,20 +181,17 @@
 
 .dictionary-control-container {
   position: relative;
-  font-size: 1.5rem;
 }
 
 .dictionary-view-control i[class^="fa"] {
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
-  font-size: 2rem;
 }
 
 .dictionary-control-bttn {
   margin: 0rem 0rem;
 }
 
 .dictionary-template-download-bttn {
-  font-size: 1.5rem;
   color: #6b6262;
 }
 
@@ -285,7 +270,6 @@
 
 /* Nav Breadcrumb */
 .dictionary-breadcrumb-container {
-  font-size: 1.4rem;
   padding: 0rem 0rem 0rem 0rem;
   display: none;
   height: 5rem;
@@ -300,7 +284,7 @@
 }
 
 .dictionary-view-control .dropdown-menu {
-  left: -55%;
+  left: 55%;
 }
 
 .dictionary-view-control .dictionary-tooltip span {
@@ -357,7 +341,6 @@
   visibility: hidden;
   z-index: 10;
   position: absolute;
-  font-size: 1.4rem;
   line-height: 2.1rem;
   font-style: normal;
   font-weight: normal;

docs/Data_Dictionary/viewer/entity-list-controls.view.html

@@ -4,13 +4,11 @@
                <span class="dictionary-tooltip-content">
                    Use the template to upload data to the GDC. For more information, please refer to <a href="/Data_Submission_Portal/Users_Guide/Upload_Data/" target="_blank">Upload Data's User Guide</a>.
                    Click the download icon link <span aria-hidden="true" class="fa fa-cloud-download"></span> to download the respective template(s).</span></span>
-    <div class="btn-group">
-        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" id="dictionary-current-template-data-format" aria-expanded="false">
+        <button class="md-button" data-toggle="dropdown" aria-haspopup="true" id="dictionary-current-template-data-format" aria-expanded="false">
             <span class="data-format-value">TSV</span>  <span class="caret"></span>
         </button>
-        <ul class="dropdown-menu">
-            <li><a href="javascript:void(0)" data-format="tsv">TSV</a></li>
-            <li><a href="javascript:void(0)" data-format="json">JSON</a></li>
-        </ul>
-    </div>
+        <div class="dropdown-menu">
+            <a href="javascript:void(0)" data-format="tsv">TSV</a>
+            <a href="javascript:void(0)" data-format="json">JSON</a>
+        </div>
 </div>

docs/stylesheets/gdc-common.css

@@ -0,0 +1,262 @@
+
+footer {
+    background-color: #123e57;
+    border-top: 6px solid #8c8686;
+    border-bottom: none;
+    color: #97abb6;
+    padding: 0.5rem 3rem;
+    z-index: 100;
+    width: 100%;
+    margin: 0rem 0rem 0.5rem 0rem;
+    font-size: .8rem;
+    line-height: 1.7rem;
+  }
+
+  footer a,
+  footer a:link,
+  footer a:visited {
+    color: #c2cfd5;
+    text-align: center;
+  }
+
+
+  .footer-caption > div {
+    margin: 0.5rem auto 0rem auto;
+    text-align: center;
+  }
+
+  .footer-caption {
+    margin-top: 1.5rem;
+    text-align: left;
+    line-height: 1.62rem;
+  }
+
+  .footer-caption small {
+    display: block;
+  }
+
+  .footer-caption .version-caption {
+    line-height: 3rem;
+    font-size: .7rem;
+  }
+
+  .particle.grey {
+    background-color: #6b6262
+  }
+
+  .particle.red {
+    background-color: #c31547;
+  }
+
+  .particle.blue {
+    background-color: #123e57;
+  }
+
+  .loadingContainer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    background-color: rgba(255, 255, 255, 0.8);
+    transition: opacity 0.35s ease;
+  }
+
+  .spinParticleContainer {
+    margin-right: 10px;
+    width: 4rem;
+    height: 4rem;
+    display: block;
+    -webkit-animation: Rotate 2.0s infinite linear;
+    animation: Rotate 2.0s infinite linear;
+  }
+
+  .spinParticle.endLoad {
+    -webkit-animation: BlowUp 1s 1 ease-out;
+    animation: BlowUp 1s 1 ease-out;
+  }
+
+  .spinParticle {
+    width: 4rem;
+    height: 4rem;
+    position: fixed;
+    left: 50%;
+    top: 40%;
+    z-index: 900000;
+    /* display: block; */
+    display: none;
+    -moz-animation: Rotate 2.0s infinite linear;
+    -webkit-animation: Rotate 2.0s infinite linear;
+    animation: Rotate 2.0s infinite linear;
+  }
+
+  .particle {
+    width: 60%;
+    height: 60%;
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    background-color: #000;
+    border-radius: 100%;
+
+    -webkit-animation: Scale 2.0s infinite ease-in-out;
+    animation: Scale 2.0s infinite ease-in-out;
+  }
+
+  .other-particle {
+    top: auto;
+    bottom: 0;
+    -webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+  }
+
+  .other-other-particle {
+    top: 0;
+    bottom: auto;
+    margin-left: 2.2rem;
+    -webkit-animation-delay: -1.2s;
+    animation-delay: -1.2s;
+  }
+
+  @-webkit-keyframes Rotate {
+    0% {
+      -webkit-transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+
+  @keyframes Rotate {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(359deg);
+      transform: rotate(359deg);
+    }
+  }
+
+  @-webkit-keyframes Scale {
+    0%, 100% {
+      -webkit-transform: scale(0.0);
+    }
+    50% {
+      -webkit-transform: scale(1.5);
+    }
+  }
+
+  @keyframes Scale {
+    0%, 100% {
+      -webkit-transform: scale(0.0);
+      transform: scale(0.0);
+    }
+    50% {
+        -webkit-transform: scale(1.0);
+        transform: scale(1.0);
+      }
+  }
+
+
+  @-webkit-keyframes BlowUp {
+    0% {
+      -webkit-transform: scale(1, 1);
+      transform: scale(1, 1);
+      opacity: 1.0;
+    }
+    100% {
+      -webkit-transform: scale(3, 3);
+      transform: scale(3, 3);
+      opacity: 0.0;
+    }
+  }
+
+  @keyframes BlowUp {
+    0% {
+      -webkit-transform: scale(1, 1);
+      transform: scale(1, 1);
+      opacity: 1.0;
+    }
+    100% {
+      -webkit-transform: scale(3, 3);
+      transform: scale(3, 3);
+      opacity: 0.0;
+    }
+  }
+
+/* Bootstrap styles */
+.input-group {
+    position: relative;
+    display: table;
+    border-collapse: separate;
+}
+
+.open > .dropdown-menu {
+    display: block;
+}
+
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    list-style: none;
+    font-size: 15px;
+    text-align: left;
+    background-color: #ffffff;
+    border: 1px solid #cccccc;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+}
+
+.dropdown-menu a {
+    display: flex;
+    padding: 8px;
+    color: black;
+}
+
+.checkbox {
+    position: relative;
+    display: block;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.checkbox label {
+    min-height: 21px;
+    padding-left: 20px;
+    margin-bottom: 0;
+    font-weight: normal;
+    cursor: pointer;
+    display: inline-block;
+    max-width: 100%;
+}
+
+.tab-content > .tab-pane {
+    display: none;
+}
+
+.tab-content > .active {
+    display: block;
+}
+
+.btn-group {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+}