Cfde updates (#764)

* fixing double search-bar from merge * cfde landing page updates * landing page updates * scatter plot typo fix * more landing page updates and fixes * updating gene set link on landing page * formatters for cfde foundational pages * incorporating single search into header template * landing page GS link update * landing page urls * another one * landing page supports 'search examples' configs * hide scatter plot if no data to render
broadinstitute · Oct 23, 2024 · 82d0f79 · 82d0f79
1 parent 04ac45e
commit 82d0f79
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 17 deletions.
diff --git a/src/components/researchPortal/ResearchScatterPlot.vue b/src/components/researchPortal/ResearchScatterPlot.vue
@@ -1,7 +1,5 @@
 <template>
-	<div class="scatter-plot-content row" id="rp_scatter_plot" style="display: flex; flex-direction: row; justify-content: center;">
-
-
+	<div v-if="renderData.length > 0" class="scatter-plot-content row" id="rp_scatter_plot" style="display: flex; flex-direction: row; justify-content: center;">
 		<div class="" style="display: flex;">
 			<div class="">
 				<div :id="'scatter_dot_value' + sectionId" 
@@ -43,7 +41,7 @@
 			</div>
 				-->
 				<canvas
-					v-if="renderData.length > 0 && !!renderConfig && !groupsList && !multiList"
+					v-if="!!renderConfig && !groupsList && !multiList"
 					:id="'scatterPlot' + sectionId"
 					class="scatter-plot"
 					:width="plotDimension.width"
@@ -61,7 +59,7 @@
 				</canvas>
 			</div>
 
-			<template v-if="renderData.length > 0 && !!renderConfig && !!multiList">
+			<template v-if="!!renderConfig && !!multiList">
 				<div class="scatter-plot-groups" style="display: flex; flex-wrap: wrap;">
 					<div class="scatter-plot-group" v-for="(fieldpair, index) in multiList">
 						<div class="colors-list">
@@ -95,7 +93,7 @@
 				<div style="display:flex; flex-direction: column;">
 					<div style="display:flex; flex-direction: column;">
 						<label 
-							v-if="renderData.length > 0 && !!renderConfig && renderConfig['y axis fields'].length > 1"
+							v-if="!!renderConfig && renderConfig['y axis fields'].length > 1"
 						>
 							Y Axis
 						</label>
@@ -112,7 +110,7 @@
 						</select>
 
 						<label 
-							v-if="renderData.length > 0 && !!renderConfig && renderConfig['x axis fields'].length > 1"
+							v-if="!!renderConfig && renderConfig['x axis fields'].length > 1"
 						>
 							X Axis
 						</label>
@@ -130,7 +128,7 @@
 					</div>
 					<div class="color-key-options" style="display:flex; flex-direction: column;">
 						<label 
-							v-if="renderData.length > 0 && !!renderConfig && renderConfig['color by'].length > 1"
+							v-if="!!renderConfig && renderConfig['color by'].length > 1"
 						>
 							Color by
 						</label>
@@ -148,7 +146,7 @@
 
 						<div 
 							class="color-key"
-							v-if="renderData.length > 0 && !!renderConfig && !!colorByList 
+							v-if="!!renderConfig && !!colorByList 
 							&& !colorByGradient"
 						>
 							<div style="text-align: right; font-size: 10px; font-style: italic;">click key to highlight</div>
@@ -165,7 +163,7 @@
 
 						<div 
 							class="color-key"
-							v-if="renderData.length > 0 && !!renderConfig && !!colorByList 
+							v-if="!!renderConfig && !!colorByList 
 							&& !!colorByGradient"
 						>
 							<div style="text-align: right; font-size: 10px; font-style: italic;">drag sliders to highlight in range</div>
@@ -194,7 +192,7 @@
 					</div>
 				</div>
 				<!--
-				<template v-if="renderData.length > 0 && !!renderConfig && !!colorByList">
+				<template v-if="!!renderConfig && !!colorByList">
 				<div class="scatter-plot-groups" style="display: flex; flex-wrap: wrap;">
 					<div class="scatter-plot-group" v-for="color in colorByList[colorByField]">
 						<canvas
@@ -220,7 +218,7 @@
 			</div>
 		</div>
 
-		<template v-if="renderData.length > 0 && !!renderConfig && !!groupsList">
+		<template v-if="!!renderConfig && !!groupsList">
 			<div class="colors-list">
 				<div v-for="anno, annoIndex in colorsList" class="anno-bubble-wrapper">
 					<span class="anno-bubble" :style="'background-color:'+ compareGroupColors[annoIndex % 16]">&nbsp;</span>

diff --git a/src/components/researchPortal/customComponents/cfdeLanding.vue b/src/components/researchPortal/customComponents/cfdeLanding.vue
@@ -11,12 +11,12 @@
                     :phenotypes="phenotypesInUse"
                     :utils="utilsBox">
                 </research-single-search-cfde>
-                <div class="search-extras f-row">
+                <div v-if="sectionConfigs['content']['search examples']" class="search-extras f-row">
                     <div class="f-row" style="gap:5px">
-                        Try <a href="/research.html?entity=gene&gene=BDH2&pageid=kc_entity_gene&tissue=blood">BDH2</a>
-                        <a
-                            href="/research.html?disease=MONDO%3A0004985&entity=disease&pageid=kc_entity_disease&tissue=blood">Bipolar
-                            disorder</a>
+                        Try 
+                        <templte v-for="example in sectionConfigs['content']['search examples']">
+                            <a :href="example.url">{{example.value}}</a>
+                        </templte>
                     </div>
                 </div>
             </div>