Refactor nested props in Tabular Chunked View

Author: guerler

client/src/components/Dataset/DatasetDisplay.vue

@@ -6,6 +6,7 @@ import { useDatasetStore } from "@/stores/datasetStore";
 import { withPrefix } from "@/utils/redirect";
 import { bytesToString } from "@/utils/utils";
 
+import LoadingSpan from "components/LoadingSpan.vue";
 import TabularChunkedView from "components/Visualizations/Tabular/TabularChunkedView.vue";
 
 interface Props {
@@ -38,13 +39,12 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div v-if="!isLoading && dataset">
+    <LoadingSpan v-if="isLoading || !dataset" message="Loading dataset content" />
+    <div v-else>
         <div v-if="dataset.deleted" id="deleted-data-message" class="errormessagelarge">
             You are viewing a deleted dataset.
         </div>
-        <TabularChunkedView
-            v-if="content && content.ck_data"
-            :options="{ dataset_config: { ...dataset, first_data_chunk: content } }" />
+        <TabularChunkedView v-if="content && content.ck_data" :options="{ ...dataset, first_data_chunk: content }" />
         <div v-else-if="content">
             <div v-if="isBinary">
                 This is a binary (or unknown to Galaxy) dataset of size {{ bytesToString(dataset.file_size) }}. Preview

client/src/components/Visualizations/Tabular/TabularChunkedView.vue

@@ -14,14 +14,12 @@ interface TabularChunk {
 
 interface TabularChunkedViewProps {
     options: {
-        dataset_config: {
-            id: string;
-            file_ext: string;
-            first_data_chunk: TabularChunk;
-            metadata_columns: number;
-            metadata_column_types: string[];
-            metadata_column_names: string[];
-        };
+        id: string;
+        file_ext: string;
+        first_data_chunk: TabularChunk;
+        metadata_columns: number;
+        metadata_column_types: string[];
+        metadata_column_names: string[];
     };
 }
 
@@ -37,32 +35,32 @@ const tabularData = reactive<{ rows: string[][] }>({
 });
 
 const columns = computed(() => {
-    const columns = Array(props.options.dataset_config.metadata_columns);
+    const columns = Array(props.options.metadata_columns);
     // for each column_name, inject header
-    if (props.options.dataset_config.metadata_column_names?.length > 0) {
-        props.options.dataset_config.metadata_column_names.forEach((column_name, index) => {
+    if (props.options.metadata_column_names?.length > 0) {
+        props.options.metadata_column_names.forEach((column_name, index) => {
             columns[index] = column_name;
         });
     }
     return columns;
 });
 
 const columnStyle = computed(() => {
-    const columnStyle = Array(props.options.dataset_config.metadata_columns);
-    if (props.options.dataset_config.metadata_column_types?.length > 0) {
-        props.options.dataset_config.metadata_column_types.forEach((column_type, index) => {
+    const columnStyle = Array(props.options.metadata_columns);
+    if (props.options.metadata_column_types?.length > 0) {
+        props.options.metadata_column_types.forEach((column_type, index) => {
             columnStyle[index] = column_type === "str" || column_type === "list" ? "string-align" : "number-align";
         });
     }
     return columnStyle;
 });
 
 const delimiter = computed(() => {
-    return props.options.dataset_config.file_ext === "csv" ? "," : "\t";
+    return props.options.file_ext === "csv" ? "," : "\t";
 });
 
 const chunkUrl = computed(() => {
-    return `${getAppRoot()}dataset/display?dataset_id=${props.options.dataset_config.id}`;
+    return `${getAppRoot()}dataset/display?dataset_id=${props.options.id}`;
 });
 
 // Loading more data on user scroll to (near) bottom.
@@ -164,8 +162,8 @@ function nextChunk() {
 
 onMounted(() => {
     // Render first chunk if available.
-    if (props.options.dataset_config.first_data_chunk) {
-        processChunk(props.options.dataset_config.first_data_chunk);
+    if (props.options.first_data_chunk) {
+        processChunk(props.options.first_data_chunk);
         loading.value = false;
     }
 });