Paginate JobOutputs to prevent UI slowdown (9a8e3869) · Commits · NDIP / Galaxy

client/src/components/JobInformation/JobOutputs.vue

+34 −2

Original line number	Diff line number	Diff line
		<template>
		<div>
		<h3 v-if="title">{{ title }}</h3>
		<h3 v-if="title">
		{{ title }}
		<span v-if="paginate && totalLength > firstN"> (showing {{ firstN }} of {{ totalLength }}) </span>
		</h3>
		<table id="job-outputs" class="tabletip info_data_table">
		<thead>
		<tr>
		@@ -21,6 +24,13 @@
		:item-src="item.value.src" />
		</td>
		</tr>
		<tr v-if="paginate && totalLength > firstN">
		<td colspan="2">
		<b-button block variant="secondary" @click="firstN += 10">
		Show {{ totalLength - firstN >= 10 ? 10 : totalLength - firstN }} more outputs
		</b-button>
		</td>
		</tr>
		</tbody>
		</table>
		</div>
		@@ -39,10 +49,32 @@ export default {
		type: String,
		required: false,
		},
		paginate: {
		type: Boolean,
		default: false,
		},
		},
		data() {
		return {
		firstN: 10,
		};
		},
		computed: {
		nonHiddenOutputs() {
		return Object.fromEntries(Object.entries(this.jobOutputs).filter(([key, value]) => !key.startsWith("__")));
		if (this.paginate) {
		return Object.fromEntries(
		Object.entries(this.jobOutputs)
		.filter(([key, value]) => !key.startsWith("__"))
		.slice(0, this.firstN)
		);
		} else {
		return Object.fromEntries(
		Object.entries(this.jobOutputs).filter(([key, value]) => !key.startsWith("__"))
		);
		}
		},
		totalLength() {
		return Object.entries(this.jobOutputs).filter(([key, value]) => !key.startsWith("__")).length;
		},
		},
		};

+1 −1

Original line number	Diff line number	Diff line
		@@ -40,7 +40,7 @@
		</td>
		</div>
		<br />
		<job-outputs :job-outputs="outputs" :title="`Job Outputs`" />
		<job-outputs :job-outputs="outputs" paginate :title="`Job Outputs`" />
		</div>
		</template>