Skip to content

Commit a29663a

Browse files
guerlerguerler
committed
Convert history dataset details and display components to composition api, remove prepopulated datasets props
1 parent 378402c commit a29663a

File tree

3 files changed

+105
-135
lines changed

3 files changed

+105
-135
lines changed

‎client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue

+35-31
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,41 @@
1-
<template>
2-
<pre><code class="word-wrap-normal">{{ content }}</code></pre>
3-
</template>
1+
<script setup lang="ts">
2+
import axios from "axios";
3+
import { computed, ref } from "vue";
4+
5+
import { getAppRoot } from "@/onload/loadConfig";
46
5-
<script>
6-
const ATTRIBUTES = {
7+
const ATTRIBUTES: Record<string, string> = {
78
history_dataset_name: "name",
89
history_dataset_info: "info",
910
history_dataset_peek: "peek",
10-
history_dataset_type: "ext",
11-
};
12-
export default {
13-
props: {
14-
args: {
15-
type: Object,
16-
required: true,
17-
},
18-
datasets: {
19-
type: Object,
20-
default: null,
21-
},
22-
name: {
23-
type: String,
24-
default: null,
25-
},
26-
},
27-
computed: {
28-
getClass() {
29-
return `dataset-${ATTRIBUTES[this.name]}`;
30-
},
31-
content() {
32-
const dataset = this.datasets[this.args.history_dataset_id];
33-
return dataset && dataset[ATTRIBUTES[this.name]];
34-
},
35-
},
11+
history_dataset_type: "file_ext",
3612
};
13+
14+
const props = defineProps<{
15+
datasetId: string;
16+
name: string;
17+
}>();
18+
19+
const getClass = computed(() => `dataset-${ATTRIBUTES[props.name || ""]}`);
20+
21+
const attributeValue = ref();
22+
23+
async function fetchAttribute(datasetId: string) {
24+
try {
25+
const attributeName = ATTRIBUTES[props.name] || "";
26+
if (attributeName) {
27+
const { data } = await axios.get(`${getAppRoot()}api/datasets/${datasetId}`);
28+
attributeValue.value = data[attributeName] || `Dataset attribute '${attributeName}' unavailable.`;
29+
}
30+
} catch (error) {
31+
console.error("Error fetching dataset attribute:", error);
32+
attributeValue.value = "";
33+
}
34+
}
35+
36+
fetchAttribute(props.datasetId);
3737
</script>
38+
39+
<template>
40+
<pre><code :class="getClass">{{ attributeValue }}</code></pre>
41+
</template>

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

+69-98
Original file line numberDiff line numberDiff line change
@@ -96,110 +96,81 @@
9696
</UrlDataProvider>
9797
</template>
9898

99-
<script>
100-
import { DatatypesMapperModel } from "components/Datatypes/model";
101-
import LoadingSpan from "components/LoadingSpan";
102-
import { UrlDataProvider } from "components/providers/UrlDataProvider";
103-
import { getAppRoot } from "onload/loadConfig";
99+
<script setup lang="ts">
100+
import { computed, ref } from "vue";
101+
102+
import { DatatypesMapperModel } from "@/components/Datatypes/model";
103+
import { UrlDataProvider } from "@/components/providers/UrlDataProvider";
104+
import { getAppRoot } from "@/onload/loadConfig";
104105
105106
import HistoryDatasetAsImage from "./HistoryDatasetAsImage.vue";
107+
import LoadingSpan from "@/components/LoadingSpan.vue";
106108
107-
export default {
108-
components: {
109-
LoadingSpan,
110-
UrlDataProvider,
111-
HistoryDatasetAsImage,
112-
},
113-
props: {
114-
datasetId: {
115-
type: Number,
116-
required: true,
117-
},
118-
embedded: {
119-
type: Boolean,
120-
default: false,
121-
},
122-
},
123-
data() {
124-
return {
125-
expanded: false,
126-
};
127-
},
128-
computed: {
129-
contentClass() {
130-
if (this.expanded) {
131-
return "embedded-dataset-expanded";
132-
} else {
133-
return "embedded-dataset";
134-
}
135-
},
136-
datatypesUrl() {
137-
return "/api/datatypes/types_and_mapping";
138-
},
139-
downloadUrl() {
140-
return `${getAppRoot()}dataset/display?dataset_id=${this.datasetId}`;
141-
},
142-
displayUrl() {
143-
return `${getAppRoot()}datasets/${this.datasetId}/display/?preview=True`;
144-
},
145-
importUrl() {
146-
return `${getAppRoot()}dataset/imp?dataset_id=${this.datasetId}`;
147-
},
148-
itemUrl() {
149-
return `/api/datasets/${this.datasetId}/get_content_as_text`;
150-
},
151-
metaUrl() {
152-
return `/api/datasets/${this.datasetId}`;
153-
},
154-
},
155-
methods: {
156-
isSubTypeOfAny(child, parents, datatypesModel) {
157-
const datatypesMapper = new DatatypesMapperModel(datatypesModel);
158-
return datatypesMapper.isSubTypeOfAny(child, parents);
159-
},
160-
getFields(metaData) {
161-
const fields = [];
162-
const columnNames = metaData.metadata_column_names || [];
163-
const columnCount = metaData.metadata_columns;
164-
for (let i = 0; i < columnCount; i++) {
165-
fields.push({
166-
key: `${i}`,
167-
label: columnNames[i] || i,
168-
sortable: true,
169-
});
170-
}
171-
return fields;
172-
},
173-
getItems(textData, metaData) {
174-
const tableData = [];
175-
const delimiter = metaData.metadata_delimiter || "\t";
176-
const comments = metaData.metadata_comment_lines || 0;
177-
const lines = textData.split("\n");
178-
lines.forEach((line, i) => {
179-
if (i >= comments) {
180-
const tabs = line.split(delimiter);
181-
const rowData = {};
182-
let hasData = false;
183-
tabs.forEach((cellData, j) => {
184-
const cellDataTrimmed = cellData.trim();
185-
if (cellDataTrimmed) {
186-
hasData = true;
187-
}
188-
rowData[j] = cellDataTrimmed;
189-
});
190-
if (hasData) {
191-
tableData.push(rowData);
192-
}
109+
const props = defineProps<{
110+
datasetId: string;
111+
embedded?: boolean;
112+
}>();
113+
114+
const expanded = ref(false);
115+
116+
const contentClass = computed(() => (expanded.value ? "embedded-dataset-expanded" : "embedded-dataset"));
117+
118+
const datatypesUrl = computed(() => "/api/datatypes/types_and_mapping");
119+
const downloadUrl = computed(() => `${getAppRoot()}dataset/display?dataset_id=${props.datasetId}`);
120+
const displayUrl = computed(() => `${getAppRoot()}datasets/${props.datasetId}/display/?preview=True`);
121+
const importUrl = computed(() => `${getAppRoot()}dataset/imp?dataset_id=${props.datasetId}`);
122+
const itemUrl = computed(() => `/api/datasets/${props.datasetId}/get_content_as_text`);
123+
const metaUrl = computed(() => `/api/datasets/${props.datasetId}`);
124+
125+
function onExpand() {
126+
expanded.value = !expanded.value;
127+
}
128+
129+
function isSubTypeOfAny(child: string, parents: string[], datatypesModel: any) {
130+
const datatypesMapper = new DatatypesMapperModel(datatypesModel);
131+
return datatypesMapper.isSubTypeOfAny(child, parents);
132+
}
133+
134+
function getFields(metaData: any) {
135+
const fields = [];
136+
const columnNames = metaData.metadata_column_names || [];
137+
const columnCount = metaData.metadata_columns;
138+
for (let i = 0; i < columnCount; i++) {
139+
fields.push({
140+
key: `${i}`,
141+
label: columnNames[i] || i,
142+
sortable: true,
143+
});
144+
}
145+
return fields;
146+
}
147+
148+
function getItems(textData: string, metaData: any) {
149+
const tableData: any = [];
150+
const delimiter = metaData.metadata_delimiter || "\t";
151+
const comments = metaData.metadata_comment_lines || 0;
152+
const lines = textData.split("\n");
153+
lines.forEach((line, i) => {
154+
if (i >= comments) {
155+
const tabs = line.split(delimiter);
156+
const rowData: Record<string, string> = {};
157+
let hasData = false;
158+
tabs.forEach((cellData, j) => {
159+
const cellDataTrimmed = cellData.trim();
160+
if (cellDataTrimmed) {
161+
hasData = true;
193162
}
163+
rowData[j] = cellDataTrimmed;
194164
});
195-
return tableData;
196-
},
197-
onExpand() {
198-
this.expanded = !this.expanded;
199-
},
200-
},
201-
};
165+
if (hasData) {
166+
tableData.push(rowData);
167+
}
168+
}
169+
});
170+
return tableData;
171+
}
202172
</script>
173+
203174
<style scoped>
204175
.embedded-dataset {
205176
max-height: 20rem;

‎client/src/components/Markdown/Sections/MarkdownGalaxy.vue

+1-6
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,6 @@ const props = defineProps({
3131
type: String,
3232
required: true,
3333
},
34-
datasets: {
35-
type: Object,
36-
default: null,
37-
},
3834
});
3935
4036
const parsedArgs = computed(() => getArgs(props.content));
@@ -166,8 +162,7 @@ function argToBoolean(args, name, booleanDefault) {
166162
].includes(name)
167163
"
168164
:name="name"
169-
:args="args"
170-
:datasets="datasets" />
165+
:dataset-id="args.history_dataset_id" />
171166
</b-collapse>
172167
</div>
173168
</template>

0 commit comments

Comments
 (0)