Show new display_name parameter

app/components/analysis/AnalysesTable.vue

@@ -93,7 +93,7 @@ async function getProjects() {
       method: "GET",
       query: {
         sort: "-updated_at",
-        fields: "id,name",
+        fields: "id,name,display_name",
       },
     })
     .catch(() => undefined)) as Project[];
@@ -132,8 +132,8 @@ async function parseProjects() {
   }
   if (projData) {
     projData.forEach((proj: Project) => {
-      if (proj.name) {
-        projMap.set(proj.id!, proj.name);
+      if (proj.id) {
+        projMap.set(proj.id, proj.display_name ?? proj.name ?? proj.id);
       }
     });
   }
@@ -493,7 +493,11 @@ const onCloseNavToast = () => {
         <DataTable
           v-model:expandedRows="expandedRows"
           v-model:filters="filters"
-          :globalFilterFields="['analysis.name', 'project_name', 'node.name']"
+          :globalFilterFields="[
+            'analysis.display_name',
+            'project_name',
+            'node.name',
+          ]"
           :rows="10"
           :loading="tableLoading"
           :rowsPerPageOptions="[10, 20, 50]"
@@ -510,15 +514,15 @@ const onCloseNavToast = () => {
         >
           <template #empty> No analyses found.</template>
           <Column v-if="expandRowEntries.length" expander style="width: 5rem" />
-          <Column :sortable="true" field="analysis.name">
+          <Column :sortable="true" field="analysis.display_name">
             <template #header>
               <span v-tooltip.top="'Name of the analysis'" class="help-text">
                 <b>Name</b>
               </span>
             </template>
             <template #body="{ data }">
               <span v-tooltip.right="data.analysis_id" class="help-text">
-                {{ data.analysis.name }}
+                {{ data.analysis.display_name }}
               </span>
             </template>
           </Column>

app/components/data-stores/DataStoreList.vue

@@ -2,7 +2,8 @@
 import { useDataStoreList } from "~/composables/useDataStoreList";
 import DetailedDataStoreTable from "~/components/data-stores/DetailedDataStoreTable.vue";
 
-const { dataStores, projectNameMap, loading, refresh } = await useDataStoreList();
+const { dataStores, projectNameMap, loading, refresh } =
+  await useDataStoreList();
 
 function onDeleteDataStore(dsName: string) {
   dataStores.value = dataStores.value.filter((store) => store.name !== dsName);
@@ -41,3 +42,8 @@ function onDeleteDataStore(dsName: string) {
   </div>
 </template>
 
+<style scoped>
+.data-store-description-box {
+  margin-bottom: 5rem;
+}
+</style>

app/components/data-stores/create/DataStoreProjectInitializer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, watch, computed } from "vue";
+import { computed, ref, watch } from "vue";
 import { navigateTo, useNuxtApp } from "nuxt/app";
 import InputText from "primevue/inputtext";
 import RadioButton from "primevue/radiobutton";
@@ -8,7 +8,10 @@ import InputNumber from "primevue/inputnumber";
 import InputGroupAddon from "primevue/inputgroupaddon";
 import InputGroup from "primevue/inputgroup";
 import DataStoreHelpBox from "~/components/data-stores/create/DataStoreHelpBox.vue";
-import { type AvailableProject, HelpTextField } from "~/components/data-stores/create/index";
+import {
+  type AvailableProject,
+  HelpTextField,
+} from "~/components/data-stores/create/index";
 import { useToast } from "primevue/usetoast";
 import {
   type BodyKongInitializeKongInitializePost,
@@ -36,7 +39,8 @@ if (projStatus.value === "success") {
   const projectData = projects.value as unknown as Array<ProjectNode>;
   if (projectData.length > 0) {
     availableProjects.value = projectData.map((proj: ProjectNode) => ({
-      name: proj.project?.name,
+      name:
+        proj.project?.display_name ?? proj.project?.name ?? proj.project_id,
       id: proj.project_id,
     }));
   }

app/components/projects/ProjectProposalTable.vue

@@ -22,7 +22,7 @@ const { data: response, status, refresh } = await getProjectNodes();
 function parseData() {
   if (status.value === "success") {
     proposals.value = formatDataRow(
-      response.value as unknown as Map<string, string | number | undefined>[],
+      response.value,
       dataRowUnixCols,
       expandRowEntries,
     );
@@ -94,7 +94,12 @@ const updateFilters = (filterText: string) => {
         <DataTable
           v-model:expandedRows="expandedRows"
           v-model:filters="filters"
-          :globalFilterFields="['id', 'project.name', 'node.name']"
+          :globalFilterFields="[
+            'id',
+            'project.display_name',
+            'project.name',
+            'node.name',
+          ]"
           :rows="10"
           :rowsPerPageOptions="[10, 20, 50]"
           :value="proposals"
@@ -106,15 +111,19 @@ const updateFilters = (filterText: string) => {
         >
           <template #empty> No projects found.</template>
           <Column v-if="expandRowEntries.length" expander style="width: 5rem" />
-          <Column field="project.name" :sortable="true" style="width: 30rem">
+          <Column
+            field="project.display_name"
+            :sortable="true"
+            style="width: 30rem"
+          >
             <template #header>
               <span v-tooltip.top="'Name of the project'" class="help-text">
                 <b>Project Name</b>
               </span>
             </template>
             <template #body="{ data }">
               <span v-tooltip.right="data.project.id" class="help-text">
-                {{ data.project.name }}
+                {{ data.project.display_name ?? data.project.name }}
               </span>
             </template>
           </Column>

app/composables/useDataStoreList.ts

@@ -10,7 +10,7 @@ export function buildProjectNameMap(
   const map = new Map<string, string | undefined>();
   projects.forEach((entry) => {
     if (entry.id) {
-      map.set(entry.id, entry.name ?? "N/A");
+      map.set(entry.id, entry.display_name ?? "N/A");
     }
   });
   return map;