Dk cfde update 1023 (#771)

* parameter values in description started * In legends and descriptions, update parameter values dynamically * PheWAS plot single item issue resolved * Issue with Dynamic subsection showing after switching pages in data table fixed * copy to clipboard function added to uiUtils.js
broadinstitute · Oct 30, 2024 · a262f27 · a262f27
1 parent 04fc0f4
commit a262f27
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 4 deletions.
diff --git a/src/components/researchPortal/ResearchDataTable.vue b/src/components/researchPortal/ResearchDataTable.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="research-data-table-wrapper" :class="(!!tableFormat.display && tableFormat.display == 'false') ? 'hidden' : ''">
-		<div v-html="tableLegend" class="data-table-legend"></div>
+		<div v-if="!!dataset" v-html="tableLegend" class="data-table-legend"></div>
 		<div
 			v-if="
 				!!searchParameters &&
@@ -231,7 +231,7 @@
 											v-html="section.label" @click="setParameter(tdValue, tdKey, section.section, section.parameter)" ></button>
 									</span>
 								</span>
-								<!-- working part-->
+
 								<span v-else-if="!!ifSubsectionColumn(tdKey)"
 										class="dynamic-subsection-options">
 										<span class="btns-wrapper">
@@ -249,6 +249,12 @@
 								</span>
 
 								<span v-else v-html="formatValue(tdValue, tdKey)"></span>
+
+								<!-- column formatting contains copy to clipboard -->
+								<b-btn  class="copy-to-clipboard"
+								 v-if="!!tableFormat['column formatting'] && tableFormat['column formatting'][tdKey] && 
+									tableFormat['column formatting'][tdKey].type.includes('copy to clipboard')"
+									@click="utils.uiUtils.copy2Clipboard(tdValue)">Copy</b-btn>
 							</td>
 							<td
 								v-if="
@@ -1542,18 +1548,34 @@ table.research-data-table {
 	cursor: pointer;
 }
 
+
 .research-data-table td {
 	border: none !important;
 	border-left: solid 1px #eee !important;
 	border-bottom: solid 1px #ddd !important;
 	height: 27px;
 	vertical-align: middle;
+	position: relative;
 }
 
 .research-data-table td.multi-value-td {
 	padding: 0 !important;
 }
 
+.research-data-table td .copy-to-clipboard {
+	font-size: 10px;
+    padding: 0 2px;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+	opacity: 0.3;
+	border-radius: 0;
+}
+
+.research-data-table td:hover .copy-to-clipboard {
+	opacity: 1;
+}
+
 .research-data-table td.multi-value-td > span {
 	display: block;
 	padding: 0.3rem;

diff --git a/src/components/researchPortal/ResearchSectionVisualizers.vue b/src/components/researchPortal/ResearchSectionVisualizers.vue
@@ -1,6 +1,7 @@
 <template>
 	<div class="col-md-12">
 		<div
+			v-if="!!plotData"
 			class="plot-legend"
 			v-html="plotLegend"
 		></div>

diff --git a/src/components/researchPortal/ResearchSubSection.vue b/src/components/researchPortal/ResearchSubSection.vue
@@ -25,6 +25,11 @@
 				<tr v-for="row in subPageData">
 					<td  v-for="head in getTopRows()">
 						<span v-html="formatValue(row[head],head)"></span>
+						<!-- column formatting contains copy to clipboard -->
+
+						<b-btn class="copy-to-clipboard" v-if="tableFormat['column formatting'] && tableFormat['column formatting'][head] &&
+							tableFormat['column formatting'][head].type.includes('copy to clipboard')"
+							@click="utils.uiUtils.copy2Clipboard(row[head])">Copy</b-btn>
 					</td>
 				</tr>
 				<tr>
@@ -115,11 +120,19 @@ export default Vue.component("research-sub-section", {
 			}
 
 			return pageData;
-		}
+		},
+		tableFormat() {
+			if (!!this.subectionConfig['table format']) {
+				return this.subectionConfig['table format'];
+			} else {
+				return null;
+			}
+		},
 	},
 	watch: {
 	},
 	methods: {
+		
 		convertJson2Csv(DATA, FILENAME) {
 
 			// First wrap strings with comma or typeof object, and flatten the data
@@ -198,6 +211,24 @@ $(function () { });
 	border-bottom: solid 1px 
 }
 
+.subsection-table td {
+	position: relative;
+}
+
+.subsection-table td .copy-to-clipboard {
+	font-size: 10px;
+    padding: 0 2px;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+	opacity: 0.3;
+	border-radius: 0;
+}
+
+.subsection-table td:hover .copy-to-clipboard {
+	opacity: 1;
+}
+
 .egl-table-page-ui-wrapper {
 	margin-top: 10px !important;
 }

diff --git a/src/utils/uiUtils.js b/src/utils/uiUtils.js
@@ -622,6 +622,11 @@ let downloadChart = function (URL, FILENAME) {
     link.click();
     document.body.removeChild(link);
 };
+
+let copy2Clipboard = function (CONTENT) {
+    window.navigator.clipboard.writeText(CONTENT);
+}
+
 export default {
     addRemoveClass,
     popOutElement,
@@ -651,5 +656,6 @@ export default {
     toggleFixedSummarySection,
     showHidePanel,
     downloadImg,
-    downloadChart
+    downloadChart,
+    copy2Clipboard
 };