Merge pull request #1308 from microbiomedata/issue-1306-show-hide-column-section

Pass correct string to showColumnsBySectionTitle when showing single section

Author: pkalita-lbl

web/src/views/SubmissionPortal/HarmonizerView.vue

@@ -250,7 +250,7 @@ export default defineComponent({
       return allTabsValid && isOwner();
     });
 
-    const fields = computed(() => flattenDeep(Object.entries(harmonizerApi.schemaSections.value)
+    const fields = computed(() => flattenDeep(Object.entries(harmonizerApi.schemaSectionColumns.value)
       .map(([sectionName, children]) => Object.entries(children).map(([columnName, column]) => {
         const val = {
           text: columnName ? `  ${columnName}` : sectionName,
@@ -750,13 +750,13 @@ export default defineComponent({
                 Show section
               </span>
               <v-radio
-                v-for="(value, sectionName) in harmonizerApi.schemaSections.value"
+                v-for="(sectionName, sectionTitle) in harmonizerApi.schemaSectionNames.value"
                 :key="sectionName"
                 :value="sectionName"
               >
                 <template #label>
                   <span>
-                    {{ sectionName }}
+                    {{ sectionTitle }}
                   </span>
                 </template>
               </v-radio>

web/src/views/SubmissionPortal/harmonizerApi.ts

@@ -181,7 +181,9 @@ interface CellData {
 }
 
 export class HarmonizerApi {
-  schemaSections: Ref<Record<string, Record<string, number>>>;
+  schemaSectionNames: Ref<Record<string, string>>;
+
+  schemaSectionColumns: Ref<Record<string, Record<string, number>>>;
 
   ready: Ref<boolean>;
 
@@ -196,7 +198,8 @@ export class HarmonizerApi {
   schema: any;
 
   constructor() {
-    this.schemaSections = ref({});
+    this.schemaSectionNames = ref({});
+    this.schemaSectionColumns = ref({});
     this.ready = ref(false);
     this.selectedColumn = ref('');
   }
@@ -327,7 +330,11 @@ export class HarmonizerApi {
   }
 
   refreshState() {
-    this.schemaSections.value = this._getColumnCoordinates();
+    this.schemaSectionNames.value = this.dh.template.reduce((acc: any, section: any) => {
+      acc[section.title] = section.name;
+      return acc;
+    }, {});
+    this.schemaSectionColumns.value = this._getColumnCoordinates();
   }
 
   async loadData(data: any[]) {