Merge pull request #19470 from ahmedhamidawan/use_datatypes_mapper_composable_in_reports (7b6f23b0) · Commits · NDIP / Galaxy

client/src/components/Markdown/Elements/HistoryDatasetDisplay.test.js

+23 −13

Original line number	Diff line number	Diff line
		import { createTestingPinia } from "@pinia/testing";
		import { mount } from "@vue/test-utils";
		import axios from "axios";
		import MockAdapter from "axios-mock-adapter";
		import { typesAndMappingResponse } from "components/Datatypes/test_fixtures";
		import { getLocalVue } from "tests/jest/helpers";

		import { testDatatypesMapper } from "@/components/Datatypes/test_fixtures";
		import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";

		import HistoryDatasetDisplay from "./HistoryDatasetDisplay.vue";

		const localVue = getLocalVue();

		const args = { history_dataset_id: "someId" };
		const api_paths_map = new Map([["/api/datatypes/types_and_mapping", typesAndMappingResponse]]);

		function setUpDatatypesStore() {
		const pinia = createTestingPinia({ stubActions: false });

		const datatypesStore = useDatatypesMapperStore();
		datatypesStore.datatypesMapper = testDatatypesMapper;

		return pinia;
		}

		describe("History Tabular Dataset Display", () => {
		let wrapper;
		@@ -23,15 +34,14 @@ describe("History Tabular Dataset Display", () => {

		beforeEach(async () => {
		axiosMock = new MockAdapter(axios);

		for (const [path, response] of api_paths_map.entries()) {
		axiosMock.onGet(path).reply(200, response);
		}

		axiosMock.onGet(`/api/datasets/${args.history_dataset_id}`).reply(200, tabularMetaData);
		axiosMock.onGet(`/api/datasets/${args.history_dataset_id}/get_content_as_text`).reply(200, tabular);

		wrapper = mount(HistoryDatasetDisplay, { localVue, propsData: { datasets: tabularDatasets, args } });
		wrapper = mount(HistoryDatasetDisplay, {
		localVue,
		propsData: { datasets: tabularDatasets, args },
		pinia: setUpDatatypesStore(),
		});
		});

		afterEach(() => {
		@@ -55,13 +65,13 @@ describe("History Text Dataset Display", () => {
		beforeEach(async () => {
		axiosMock = new MockAdapter(axios);

		for (const [path, response] of api_paths_map.entries()) {
		axiosMock.onGet(path).reply(200, response);
		}

		axiosMock.onGet(`/api/datasets/${args.history_dataset_id}/get_content_as_text`).reply(200, text);

		wrapper = mount(HistoryDatasetDisplay, { localVue, propsData: { datasets: textDatasets, args } });
		wrapper = mount(HistoryDatasetDisplay, {
		localVue,
		propsData: { datasets: textDatasets, args },
		pinia: setUpDatatypesStore(),
		});
		});

		afterEach(() => {

client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue

+53 −38

Original line number	Diff line number	Diff line
		@@ -54,33 +54,45 @@
		</span>
		</b-card-header>
		<b-card-body>
		<UrlDataProvider v-slot="{ result: itemContent, loading, error }" :url="itemUrl">
		<UrlDataProvider v-slot="{ result: datatypesModel, loading: datatypesLoading }" :url="datatypesUrl">
		<LoadingSpan v-if="loading" message="Loading Dataset" />
		<LoadingSpan v-else-if="datatypesLoading" message="Loading Datatypes" />
		<UrlDataProvider v-slot="{ result: itemContent, loading: datasetLoading, error }" :url="itemUrl">
		<LoadingSpan v-if="datasetLoading" message="Loading Dataset" />
		<LoadingSpan v-else-if="loading" message="Loading Datatypes" />
		<div v-else-if="error">{{ error }}</div>
		<div v-else-if="!datatypesMapper">Datatypes not loaded.</div>
		<div v-else :class="contentClass">
		<b-embed
		v-if="isSubTypeOfAny(datasetType, ['pdf', 'html'], datatypesModel)"
		v-if="datatypesMapper.isSubTypeOfAny(datasetType, ['pdf', 'html'])"
		type="iframe"
		aspect="16by9"
		:src="displayUrl" />
		<HistoryDatasetAsImage
		v-else-if="isSubTypeOfAny(datasetType, ['galaxy.datatypes.images.Image'], datatypesModel)"
		v-else-if="datatypesMapper.isSubTypeOfAny(datasetType, ['galaxy.datatypes.images.Image'])"
		:args="args" />
		<div v-else-if="itemContent.item_data">
		<div v-if="isSubTypeOfAny(datasetType, ['tabular'], datatypesModel)">
		<div v-if="datatypesMapper.isSubTypeOfAny(datasetType, ['tabular'])">
		<UrlDataProvider
		v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
		:url="metaUrl">
		<LoadingSpan v-if="metaLoading" message="Loading Metadata" />
		<div v-else-if="metaError">{{ metaError }}</div>
		<div v-else>
		<b-table
		v-else
		id="tabular-dataset-table"
		sticky-header
		thead-tr-class="sticky-top"
		striped
		hover
		:per-page="perPage"
		:current-page="currentPage"
		:fields="getFields(metaData)"
		:items="getItems(itemContent.item_data, metaData)" />
		<b-pagination
		v-model="currentPage"
		align="center"
		:total-rows="getItems(itemContent.item_data, metaData).length"
		:per-page="perPage"
		aria-controls="tabular-dataset-table" />
		</div>
		</UrlDataProvider>
		</div>
		<pre v-else>
		@@ -91,16 +103,17 @@
		<b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
		</div>
		</UrlDataProvider>
		</UrlDataProvider>
		</b-card-body>
		</b-card>
		</template>

		<script>
		import { DatatypesMapperModel } from "components/Datatypes/model";
		import LoadingSpan from "components/LoadingSpan";
		import { UrlDataProvider } from "components/providers/UrlDataProvider";
		import { getAppRoot } from "onload/loadConfig";
		import { mapState } from "pinia";

		import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";

		import HistoryDatasetAsImage from "./HistoryDatasetAsImage.vue";

		@@ -126,11 +139,17 @@ export default {
		},
		data() {
		return {
		currentPage: 1,
		expanded: false,
		perPage: 100,
		};
		},
		computed: {
		...mapState(useDatatypesMapperStore, ["createMapper", "datatypesMapper", "loading"]),
		contentClass() {
		if (this.datatypesMapper?.isSubTypeOfAny(this.datasetType, ["tabular"])) {
		return "";
		}
		if (this.expanded) {
		return "embedded-dataset-expanded";
		} else {
		@@ -145,9 +164,6 @@ export default {
		const dataset = this.datasets[this.args.history_dataset_id];
		return dataset && dataset.name;
		},
		datatypesUrl() {
		return "/api/datatypes/types_and_mapping";
		},
		downloadUrl() {
		return `${getAppRoot()}dataset/display?dataset_id=${this.args.history_dataset_id}`;
		},
		@@ -164,11 +180,10 @@ export default {
		return `/api/datasets/${this.args.history_dataset_id}`;
		},
		},
		methods: {
		isSubTypeOfAny(child, parents, datatypesModel) {
		const datatypesMapper = new DatatypesMapperModel(datatypesModel);
		return datatypesMapper.isSubTypeOfAny(child, parents);
		created() {
		this.createMapper();
		},
		methods: {
		getFields(metaData) {
		const fields = [];
		const columnNames = metaData.metadata_column_names \|\| [];