fix: fixed and improved some user interface issues.

src/app/app-config.service.ts

@@ -42,7 +42,7 @@
   datasetReduceEnabled: boolean;
   datasetDetailsShowMissingProposalId: boolean;
   datafilesActionsEnabled: boolean;
   datafilesActions: any[];
   editDatasetSampleEnabled: boolean;
   editMetadataEnabled: boolean;
   editPublishedData: boolean;
@@ -82,6 +82,7 @@
   searchPublicDataEnabled: boolean;
   searchSamples: boolean;
   sftpHost: string | null;
+  largeDataFileAccessInstruction?: string;
   shareEnabled: boolean;
   shoppingCartEnabled: boolean;
   shoppingCartOnHeader: boolean;

src/app/datasets/datafiles/datafiles.component.html

@@ -2,16 +2,7 @@
   <ng-template [ngIf]="maxFileSize && tooLargeFile">
     <span>
       <mat-icon class="warning-icon"> warning </mat-icon>
-      One or more files are too large to be downloaded directly.
-      {{
-        sftpHost
-          ? "These files are available via sftp host " +
-            sftpHost +
-            " in directory " +
-            sourcefolder +
-            "."
-          : ""
-      }}
+      <span [innerHTML]="replace_dynamic_values()"></span>
     </span>
   </ng-template>
 

src/app/datasets/datafiles/datafiles.component.ts

@@ -76,7 +76,9 @@ export class DatafilesComponent
     this.appConfig.fileserverButtonLabel || "Download";
   multipleDownloadAction: string | null = this.appConfig.multipleDownloadAction;
   maxFileSize: number | null = this.appConfig.maxDirectDownloadSize;
-  sftpHost: string | null = this.appConfig.sftpHost;
+  sftpHost: string = this.appConfig.sftpHost || "no sftp host provided";
+  customSourcefolder: string | null =
+    this.appConfig.largeDataFileAccessInstruction;
   jwt: any;
   auth_token: any;
 
@@ -204,6 +206,12 @@ export class DatafilesComponent
     }
   }
 
+  replace_dynamic_values() {
+    return `Some files are too big, but they can be downloaded 
+    at our sftp server: <strong>${this.sftpHost}</strong> 
+    at the folder: <strong>${this.customSourcefolder || this.sourcefolder}</strong>`;
+  }
+
   ngAfterViewInit() {
     this.subscriptions.push(
       this.dataset$.subscribe((dataset) => {

src/app/datasets/dataset-detail/dataset-detail.component.html

@@ -268,13 +268,17 @@
                 <a (click)="onClickSample(sample.sampleId)">
                   <span>{{ sample.description }}</span>
                 </a>
-                <span
+                <!-- NOTE: Sample editing is currently disabled.
+                    This feature not only contains bugs that need to be fixed,
+                    but we also want to have a centralized edit button in one location.
+                -->
+                <!-- <span
                   class="sample-edit"
                   (click)="openSampleEditDialog()"
                   *ngIf="appConfig.editDatasetSampleEnabled && editingAllowed"
                 >
                   <mat-icon>edit</mat-icon>
-                </span>
+                </span> -->
               </td>
             </tr>
             <tr *ngIf="dataset['instrumentId'] && instrument">

src/app/datasets/dataset-detail/dataset-detail.component.spec.ts

@@ -341,33 +341,37 @@ describe("DatasetDetailComponent", () => {
     });
   });
 
-  describe("#openSampleEditDialog()", () => {
-    it("should open the sample edit dialog and dispatch updatePropertyAction", () => {
-      const dispatchSpy = spyOn(store, "dispatch");
-      component.dataset = new Dataset();
-      component.dataset.ownerGroup = "test";
-      component.sample = new Sample();
-      const sampleId = "testId";
-      component.sample.sampleId = sampleId;
-      const pid = "testPid";
-      component.dataset.pid = pid;
-      const property = { sampleId };
-      const dialogOpenSpy = spyOn(component.dialog, "open").and.returnValue({
-        afterClosed: () => of({ sample: { sampleId: "testId" } }),
-      } as MatDialogRef<SampleEditComponent>);
-      component.openSampleEditDialog();
-
-      expect(dialogOpenSpy).toHaveBeenCalledTimes(1);
-      expect(dialogOpenSpy).toHaveBeenCalledWith(SampleEditComponent, {
-        width: "1000px",
-        data: { ownerGroup: "test", sampleId: "testId" },
-      });
-      expect(dispatchSpy).toHaveBeenCalledTimes(1);
-      expect(dispatchSpy).toHaveBeenCalledWith(
-        updatePropertyAction({ pid, property }),
-      );
-    });
-  });
+  // NOTE: Sample editing is currently disabled.
+  // This feature not only contains bugs that need to be fixed,
+  // but we also want to have a centralized edit button in one location.
+
+  // describe("#openSampleEditDialog()", () => {
+  //   it("should open the sample edit dialog and dispatch updatePropertyAction", () => {
+  //     const dispatchSpy = spyOn(store, "dispatch");
+  //     component.dataset = new Dataset();
+  //     component.dataset.ownerGroup = "test";
+  //     component.sample = new Sample();
+  //     const sampleId = "testId";
+  //     component.sample.sampleId = sampleId;
+  //     const pid = "testPid";
+  //     component.dataset.pid = pid;
+  //     const property = { sampleId };
+  //     const dialogOpenSpy = spyOn(component.dialog, "open").and.returnValue({
+  //       afterClosed: () => of({ sample: { sampleId: "testId" } }),
+  //     } as MatDialogRef<SampleEditComponent>);
+  //     component.openSampleEditDialog();
+
+  //     expect(dialogOpenSpy).toHaveBeenCalledTimes(1);
+  //     expect(dialogOpenSpy).toHaveBeenCalledWith(SampleEditComponent, {
+  //       width: "1000px",
+  //       data: { ownerGroup: "test", sampleId: "testId" },
+  //     });
+  //     expect(dispatchSpy).toHaveBeenCalledTimes(1);
+  //     expect(dispatchSpy).toHaveBeenCalledWith(
+  //       updatePropertyAction({ pid, property }),
+  //     );
+  //   });
+  // });
 
   describe("#onSaveMetadata()", () => {
     it("should dispatch an updatePropertyAction", () => {

src/app/datasets/dataset-detail/dataset-detail.component.ts

@@ -4,7 +4,7 @@ import { ENTER, COMMA, SPACE } from "@angular/cdk/keycodes";
 import { MatChipInputEvent } from "@angular/material/chips";
 
 import { MatDialog } from "@angular/material/dialog";
-import { SampleEditComponent } from "datasets/sample-edit/sample-edit.component";
+// import { SampleEditComponent } from "datasets/sample-edit/sample-edit.component";
 import { DialogComponent } from "shared/modules/dialog/dialog.component";
 import { combineLatest, fromEvent, Observable, Subscription } from "rxjs";
 import { Store } from "@ngrx/store";
@@ -277,28 +277,31 @@ export class DatasetDetailComponent
     this.router.navigateByUrl("/samples/" + id);
   }
 
-  openSampleEditDialog() {
-    if (this.dataset) {
-      this.dialog
-        .open(SampleEditComponent, {
-          width: "1000px",
-          data: {
-            ownerGroup: this.dataset.ownerGroup,
-            sampleId: this.sample?.sampleId,
-          },
-        })
-        .afterClosed()
-        .subscribe((res) => {
-          if (res && this.dataset) {
-            const { sample } = res;
-            this.sample = sample;
-            const pid = this.dataset.pid;
-            const property = { sampleId: sample.sampleId };
-            this.store.dispatch(updatePropertyAction({ pid, property }));
-          }
-        });
-    }
-  }
+  // NOTE: Sample editing is currently disabled.
+  // This feature not only contains bugs that need to be fixed,
+  // but we also want to have a centralized edit button in one location.
+  // openSampleEditDialog() {
+  //   if (this.dataset) {
+  //     this.dialog
+  //       .open(SampleEditComponent, {
+  //         width: "1000px",
+  //         data: {
+  //           ownerGroup: this.dataset.ownerGroup,
+  //           sampleId: this.sample?.sampleId,
+  //         },
+  //       })
+  //       .afterClosed()
+  //       .subscribe((res) => {
+  //         if (res && this.dataset) {
+  //           const { sample } = res;
+  //           this.sample = sample;
+  //           const pid = this.dataset.pid;
+  //           const property = { sampleId: sample.sampleId };
+  //           this.store.dispatch(updatePropertyAction({ pid, property }));
+  //         }
+  //       });
+  //   }
+  // }
 
   onSlidePublic(event: MatSlideToggleChange) {
     if (this.dataset) {
@@ -351,11 +354,7 @@ export class DatasetDetailComponent
   }
 
   getImageUrl(encoded: string) {
-    const mimeType = this.base64MimeType(encoded);
-    if (mimeType === "application/pdf") {
-      return "assets/images/pdf-icon.svg";
-    }
-    return encoded;
+    return this.attachmentService.getImageUrl(encoded);
   }
 
   openAttachment(encoded: string) {

src/app/datasets/dataset-table/dataset-table.component.html

@@ -208,7 +208,7 @@
       <mat-cell *matCellDef="let dataset">
         <img
           src="{{ dataset.pid | thumbnail | async }}"
-          height="60px"
+          height="42px"
           loading="lazy"
         />
       </mat-cell>

src/app/datasets/datasets.module.ts

@@ -89,7 +89,6 @@ import { DatasetsFilterSettingsComponent } from "./datasets-filter/settings/data
 import { CdkDrag, CdkDragHandle, CdkDropList } from "@angular/cdk/drag-drop";
 import { FiltersModule } from "shared/modules/filters/filters.module";
 import { userReducer } from "state-management/reducers/user.reducer";
-import { AttachmentService } from "shared/services/attachment.service";
 
 @NgModule({
   imports: [

src/app/shared/modules/file-uploader/file-uploader.component.ts

@@ -109,11 +109,7 @@ export class FileUploaderComponent {
   }
 
   getImageUrl(encoded: string) {
-    const mimeType = this.base64MimeType(encoded);
-    if (mimeType === "application/pdf") {
-      return "assets/images/pdf-icon.svg";
-    }
-    return encoded;
+    return this.attachmentService.getImageUrl(encoded);
   }
 
   openAttachment(encoded: string) {

src/app/shared/services/attachment.service.spec.ts

@@ -29,11 +29,25 @@ describe("AttachmentService", () => {
     });
 
     it("should return null for non-string input", () => {
-      const mimeType = service.base64MimeType(null as any);
+      const mimeType = service.base64MimeType(null);
       expect(mimeType).toBeNull();
     });
   });
 
+  describe("getImageUrl", () => {
+    it("should return the pdf icon if the file is pdf", () => {
+      const encoded = "data:application/pdf;base64,SGVsbG8sIFdvcmxkIQ==";
+      const imageUrl = service.getImageUrl(encoded);
+      expect(imageUrl).toBe("assets/images/pdf-icon.svg");
+    });
+
+    it("should return the encoded string if the file is not pdf", () => {
+      const encoded = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA";
+      const imageUrl = service.getImageUrl(encoded);
+      expect(imageUrl).toBe(encoded);
+    });
+  });
+
   describe("openAttachment", () => {
     it("should open a new window with the correct object URL", () => {
       const encoded = "data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==";

src/app/shared/services/attachment.service.ts

@@ -3,6 +3,10 @@ import { Injectable } from "@angular/core";
 @Injectable()
 export class AttachmentService {
   base64MimeType(encoded: string): string {
+    if (!encoded) {
+      return null;
+    }
+
     let result = null;
 
     if (typeof encoded !== "string") {
@@ -17,7 +21,24 @@ export class AttachmentService {
 
     return result;
   }
+
+  getImageUrl(encoded: string) {
+    if (!encoded) {
+      return null;
+    }
+
+    const mimeType = this.base64MimeType(encoded);
+    if (mimeType === "application/pdf") {
+      return "assets/images/pdf-icon.svg";
+    }
+    return encoded;
+  }
+
   openAttachment(encoded: string) {
+    if (!encoded) {
+      return null;
+    }
+
     const mimeType = this.base64MimeType(encoded);
     const strippedData = encoded.replace(
       new RegExp(`^data:${mimeType};base64,`),

src/app/shared/services/thumbnail.service.spec.ts

@@ -5,6 +5,7 @@ import { ThumbnailService } from "./thumbnail.service";
 import { selectDatasetsPerPage } from "state-management/selectors/datasets.selectors";
 import { MockStore, provideMockStore } from "@ngrx/store/testing";
 import { of, throwError } from "rxjs";
+import { AttachmentService } from "./attachment.service";
 
 describe("ThumbnailService", () => {
   let service: ThumbnailService;
@@ -27,6 +28,9 @@ describe("ThumbnailService", () => {
           provide: AppConfigService,
           useValue: { getConfig },
         },
+        {
+          provide: AttachmentService,
+        },
         provideMockStore({
           selectors: [
             {

src/app/shared/services/thumbnail.service.ts

@@ -4,6 +4,7 @@ import { distinctUntilChanged, firstValueFrom } from "rxjs";
 import { DatasetApi } from "shared/sdk";
 import { selectDatasetsPerPage } from "state-management/selectors/datasets.selectors";
 import { AppConfigService } from "app-config.service";
+import { AttachmentService } from "./attachment.service";
 
 interface ThumbnailCache {
   [pid: string]: {
@@ -25,6 +26,7 @@ export class ThumbnailService {
   constructor(
     private datasetApi: DatasetApi,
     private store: Store,
+    private attachmentService: AttachmentService,
     private appConfigService: AppConfigService,
   ) {
     this.store
@@ -60,7 +62,7 @@ export class ThumbnailService {
     try {
       const encodedPid = encodeURIComponent(pid);
       const res = await firstValueFrom(this.datasetApi.thumbnail(encodedPid));
-      const thumbnail = res?.thumbnail || null;
+      const thumbnail = this.attachmentService.getImageUrl(res?.thumbnail);
 
       this.thumbnailCache[pid] = {
         value: thumbnail,