Changes to bar charts and 'Start your search' section (issues: #87, #88…

…, #89, #100, #102)
nih-cfde · Oct 13, 2021 · 0bd0dfd · 0bd0dfd
1 parent 54e5438
commit 0bd0dfd
Show file tree

Hide file tree

Showing 12 changed files with 529 additions and 207 deletions.
diff --git a/css/dashboard.css b/css/dashboard.css
@@ -1,5 +1,6 @@
 .main {
   overflow-y: hidden;
+  display: block;
 }
 
 .data_content {
@@ -12,6 +13,18 @@
   margin: auto;
 }
 
+#chart-container-1 {
+  display: inline-block;
+  width: 75%;
+  vertical-align: top;
+}
+
+#chart-container-2 {
+  display: inline-block;
+  width: 75%;
+  vertical-align: top;
+}
+
 svg {
   width: 100%;
   height: 100%;
@@ -27,18 +40,84 @@ svg {
   margin-bottom: 20px;
 }
 
+#sbc1-container {
+  display: inline-block;
+  width: 75%;
+}
+
+#sbc2-container {
+  display: inline-block;
+  width: 75%;
+}
+
+#sbc1_container {
+  /* padding: 2%; */
+  padding: 10px;
+  max-height: 200px;
+  overflow-y: scroll;
+  border: 0px;
+}
+
+#sbc2_container {
+  /* padding: 2%; */
+  padding: 10px;
+  max-height: 200px;
+  overflow-y: scroll;
+  border: 0px;
+}
+
+#sbc1_container::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 7px;
+}
+
+#sbc2_container::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;
+}
+
+#sbc1_container::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, .5);
+    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+}
+
+#sbc2_container::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, .5);
+  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+}
+
+#sbc1-group-by-container {
+  padding-bottom: 20px;
+}
+
+#sbc2-group-by-container {
+  padding-bottom: 20px;
+}
+
+#sbc1-group-by-and-legend-container {
+  width:24%;
+  display: inline-block;
+}
+
+#sbc2-group-by-and-legend-container {
+  width:24%;
+  display: inline-block;
+}
+
 #sbc1-form-controls {
   margin: 0 auto;
   margin-bottom: 0px;
   position: relative;
-  width: 600px;
+  width: 800px;
 }
 
 #sbc2-form-controls {
   margin: 0 auto;
   margin-bottom: 0px;
   position: relative;
-  width: 600px;
+  width: 800px;
 }
 
 #dc1-form-controls {
@@ -66,9 +145,18 @@ svg {
   flex-direction: row;
   flex-wrap: wrap;
   margin: auto;
-  width: 940px;
+  width: 1200px;
+}
+
+.export-button {
+  bottom: 0;
+  position: absolute;
+  right: 0;
+  padding: 0px;
+  margin: 0px;
 }
 
+
 div.thumbnail_chart {
   color: blue;
   cursor: pointer;

diff --git a/css/dcc-review.css b/css/dcc-review.css
@@ -2,6 +2,30 @@ body {
 
 }
 
+#chart-container-1 {
+    display: inline-block;
+    width: 70%;
+    vertical-align: top;
+}
+
+#review_bc1-group-by-container {
+    padding-bottom: 20px;
+    /* margin-top: -12px; */
+}
+
+#review_bc1-group-by-and-legend-container {
+    width:28%;
+    display: inline-block;
+    padding-left: 0px;
+}
+
+#review_bc1_container {
+	padding: 10px;
+    max-height: 300px;
+    overflow-y: scroll;
+    border: 0px;
+}
+
 .top_content_section_right {
 	display: flex;
 	flex:0 0 200px;

diff --git a/css/index.css b/css/index.css
@@ -61,6 +61,72 @@ main {
     font-size: 1.25rem;
 }
 
+#browse-by-feature-container {
+  text-align: center;
+  display: flex;
+  justify-content: space-evenly;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 10px 0;
+}
+
+#search-by-container {
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 20px 20px;
+}
+
+#sbc1-group-by-and-legend-container {
+  width:24%;
+  display: inline-block;
+}
+
+#sbc1-container {
+  display: inline-block;
+  width: 75%;
+  vertical-align: top;
+}
+
+.export-button {
+  bottom: 0;
+  position: absolute;
+  right: 0;
+  padding: 0px;
+  margin: 0px;
+}
+
+#sbc1_container {
+  /* padding: 2%; */
+  padding: 10px;
+  max-height: 200px;
+  overflow-y: scroll;
+  border: 0px;
+
+}
+
+#sbc1-group-by-container {
+  padding-bottom: 20px;
+}
+/* #sbc1_container::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 7px;
+}
+
+#sbc1_container::-webkit-scrollbar-track {
+  background-color: blue;
+  width: 20px;
+} */
+
+
+/* #sbc1_container::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, .5);
+    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+} */
+
 #chart-container {
   height: 350px;
   margin: auto;

diff --git a/css/pdashboard.css b/css/pdashboard.css
@@ -7,15 +7,51 @@
     padding: 0rem;
 }
 
-.svg_container {
-    flex: 5 1 85%;
-    border: 1px solid #cccccc;
-    margin-right: 20px;
-    padding: 0.5rem;
+
+#chart-container {
+    height: 350px;
+    margin: auto;
+}
+
+#sbc1-controls input {
+    margin-left: 0rem;
+}
+
+#sbc1-controls label {
+    margin-left: 1.2rem;
 }
 
+
+#chart-container-1 {
+    display: inline-block;
+    width: 60%;
+    vertical-align: top;
+}
+
+#sbc1-group-by-container {
+    padding-bottom: 20px;
+    margin-top: -12px;
+}
+
+#sbc1-group-by-and-legend-container {
+    width:20%;
+    display: inline-block;
+    padding-left: 8px;
+}
+
+#sbc1_container {
+    /* padding: 2%; */
+    padding: 10px;
+    max-height: 250px;
+    overflow-y: scroll;
+    border: 0px;
+}
+
+
+
 .checkboxes {
-    flex: 1 1 15%;
+    margin: 15px;
+    flex: 1 1 10%;
     border: 1px solid #cccccc;
     padding: 1rem 1rem 1rem 0rem;
 }
@@ -44,10 +80,6 @@ svg {
     min-height: 350px;
 }
 
-.checkboxes {
-    flex: 1 1 15%;
-}
-
 .button {
     margin: 0.5rem 0.5rem 1rem 0.5rem;
 }

diff --git a/css/style.css b/css/style.css
@@ -295,7 +295,7 @@ main {
   align-items: flex-start;
   flex-wrap: nowrap;
   margin: auto;
-  width: 940px;
+  max-width: 1100px;
 }
 
 .chart {

diff --git a/dcc_review.html b/dcc_review.html
@@ -86,28 +86,33 @@ <h2 id="dcc_name">&nbsp;</h2>
 			<div class="data_header snapshot">
                           <p id="data_snapshot_title" class="snapshot_head">Data Snapshot</p>
                           <p id="last_updated" class="last-updated"></p>
-			  <p id="review_bc1-export" class="export"><a href="javascript: export_chart_data('review_bc1')"><img src='images/download_button.png' style='width: 125px; height: 32px;' title='Export chart'></a></p>
+
 			</div>
 			<div class="data_snapshot_content">
 
-                          <div id="chart-container-1" style="height:450px;">
-                            <svg id="review_bc1"/>
-                          </div>
+        <div id="chart-container-1" style="height:450px;">
+          <svg id="review_bc1"></svg>
+        </div>
+
+        <div id="review_bc1-group-by-and-legend-container">
+          <div id="review_bc1-group-by-container">
+            <label for="group-by" class="form-label">Group by</label>
+            <select class="custom-select" id="review_bc1-group-by" name="groupby">
+              <option value="anatomy">Anatomy</option>
+              <option selected value="assay">Assay</option>
+              <option value="dcc">CF Program</option>
+              <option value="data_type">Data Type</option>
+              <option value="species">Species</option>
+            </select>
+          </div>
+          <div id="review_bc1_container"></div>
+        </div>
 
 			  <div id="form-controls">
 			    <form>
 			      <div class="container" style="width: 100%;">
 				<div class="row" style="flex-wrap:nowrap">
-				  <div class="col-md-4" id="review_bc1-x-axis-container">
-				    <label for="x-axis" class="form-label">X-axis</label>
-				    <select class="custom-select" id="review_bc1-x-axis" name="x-axis">
-				      <option value="anatomy">Anatomy</option>
-				      <option value="assay">Assay</option>
-				      <option selected value="data_type">Data Type</option>
-				      <option value="species">Species</option>
-				    </select>
-				  </div>
-				  <div class="col-md-4" id="review_bc1-y-axis-container">
+          <div class="col-md-4" id="review_bc1-y-axis-container">
 				    <label for="y-axis" class="form-label">Y-axis</label>
 				    <select class="custom-select" id="review_bc1-y-axis" name="y-axis">
 				      <option value="volume">Data volume</option>
@@ -116,15 +121,19 @@ <h2 id="dcc_name">&nbsp;</h2>
 				      <option value="subjects">Subject count</option>
 				    </select>
 				  </div>
-				  <div class="col-md-4" id="review_bc1-group-by-container">
-				    <label for="group-by" class="form-label">Stack by</label>
-				    <select class="custom-select" id="review_bc1-group-by" name="groupby">
+				  <div class="col-md-4" id="review_bc1-x-axis-container">
+				    <label for="x-axis" class="form-label">X-axis</label>
+				    <select class="custom-select" id="review_bc1-x-axis" name="x-axis">
 				      <option value="anatomy">Anatomy</option>
-				      <option selected value="assay">Assay</option>
-				      <option value="data_type">Data Type</option>
+				      <option value="assay">Assay</option>
+				      <option selected value="data_type">Data Type</option>
 				      <option value="species">Species</option>
 				    </select>
 				  </div>
+
+          <div class="col-md-4" id="sbc1-download-button-container">
+            <p id="review_bc1-export" class="export-button"><a href="javascript: export_chart_data('review_bc1')"><img src='images/download_button.png' style='width: 125px; height: 32px;' title='Export chart'></a></p>
+          </div>
 				</div>
 			      </div>
 			    </form>