task/wg-166-questionnaire-preview-title

angular/src/app/components/asset-detail/asset-detail.component.html

@@ -3,7 +3,7 @@
         <div class="asset-detail-header">
             <app-feature-icon [feature]="feature"></app-feature-icon>
             <div class="feature-label">
-                {{ feature.properties.label || feature.properties.title || feature.id }}
+                {{ title }}
             </div>
             <div>
                 <button class="close-button" (click)="close()">

angular/src/app/components/asset-detail/asset-detail.component.styl

@@ -9,6 +9,7 @@
     .asset-detail-header
       display flex
       align-items center
+      padding 5px
   position fixed
   z-index 5000
   width 35%

angular/src/app/components/asset-detail/asset-detail.component.ts

@@ -21,6 +21,7 @@ export class AssetDetailComponent implements OnInit {
   featureSource: string;
   activeProject: Project;
   safePointCloudUrl: SafeResourceUrl;
+  title: string;
   constructor(
     private geoDataService: GeoDataService,
     private tapisFilesService: TapisFilesService,
@@ -48,6 +49,12 @@ export class AssetDetailComponent implements OnInit {
         this.featureSource = null;
         this.safePointCloudUrl = null;
       }
+      if (this.feature.assets.length && this.feature.assets[0].display_path) {
+        const fileName = this.extractFileName(this.feature.assets[0].display_path);
+        this.title = fileName;
+      } else {
+        this.title = this.feature.id.toString();
+      }
     });
     this.projectsService.activeProject.subscribe((current) => {
       this.activeProject = current;
@@ -81,6 +88,11 @@ export class AssetDetailComponent implements OnInit {
     this.bsModalService.show(ModalQuestionnaireViewerComponent, modalConfig);
   }
 
+  extractFileName(path: string): string {
+    const pathSegments = path.split('/');
+    return pathSegments.pop();
+  }
+
   close() {
     this.geoDataService.activeFeature = null;
   }