Column preview improvements

apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html

@@ -89,24 +89,25 @@
                 </div>
                 <div class="csv-header-pill-content" [class.search-open]="isSearchOpen">
                     <div
-                        class="csv-header-pill"
+                        class="csv-header-pill-wrapper"
                         *ngFor="let field of filteredFields"
-                        (mouseenter)="hoveredColumn = field.csvColumn"
+                        (mouseenter)="setHoveredColumn(field.csvColumn)"
-                        (mouseleave)="hoveredColumn = undefined"
+                        (mouseleave)="setHoveredColumn()"
                         (click)="toggleFieldActive(field)"
-                        [class.selected]="isActive(field)"
                     >
-                        <div class="name">
+                        <div class="csv-header-pill" [class.selected]="isActive(field)">
-                            {{ field.csvColumn }}
+                            <div class="name">
-                        </div>
+                                {{ field.csvColumn }}
-                        <div class="secondary">
+                            </div>
-                            <div class="entry-count small-label">{{ getEntries(field.csvColumn) }} entries</div>
+                            <div class="secondary">
-                            <div class="sample small-label">Sample: {{ getSample(field.csvColumn) }}</div>
+                                <div class="entry-count small-label">{{ getEntries(field.csvColumn) }} entries</div>
+                                <div class="sample small-label">Sample: {{ getSample(field.csvColumn) }}</div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="center" [class.collapsed]="!previewExpanded">
+            <div class="center" [class.collapsed]="!previewExpanded" (mouseenter)="keepPreview = true" (mouseleave)="keepPreview = false; setHoveredColumn()">
                 <div class="csv-part-header">
                     <div class="all-caps-label">
                         {{ 'file-attributes-csv-import.csv-column' + (previewExpanded ? '' : '-preview') | translate }}
@@ -117,12 +118,13 @@
                     ></redaction-circle-button>
                 </div>
                 <div class="csv-part-content" [class.hidden]="!previewExpanded">
-                    <div class="no-hovered-column" *ngIf="!hoveredColumn" translate="file-attributes-csv-import.no-hovered-column"></div>
+                    <div class="no-column-data" *ngIf="!hoveredColumn" translate="file-attributes-csv-import.no-hovered-column"></div>
-                    <ng-container *ngFor="let row of parseResult?.data || []">
+                    <div class="no-column-data" *ngIf="hoveredColumn && !columnSample.length">
-                        <div *ngIf="row[hoveredColumn]">
+                        {{ 'file-attributes-csv-import.no-sample-data-for' | translate: { column: hoveredColumn } }}
-                            {{ row[hoveredColumn] }}
+                    </div>
-                        </div>
+                    <div *ngFor="let row of columnSample">
-                    </ng-container>
+                        {{ row }}
+                    </div>
                 </div>
             </div>
             <div class="content-container">
@@ -245,8 +247,8 @@
                     <div
                         class="table-item"
                         *cdkVirtualFor="let field of activeFields"
-                        (mouseenter)="hoveredColumn = field.csvColumn"
+                        (mouseenter)="setHoveredColumn(field.csvColumn)"
-                        (mouseleave)="hoveredColumn = undefined"
+                        (mouseleave)="setHoveredColumn()"
                     >
                         <div class="pr-0" (click)="toggleFieldSelected(field.csvColumn)">
                             <div *ngIf="!isFieldSelected(field.csvColumn)" class="select-oval"></div>

apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss

@@ -92,7 +92,7 @@
         height: calc(100% - 51px);
         font-size: 12px;
 
-        .no-hovered-column {
+        .no-column-data {
             height: 100%;
             margin: 0 10px;
             display: flex;
@@ -104,7 +104,7 @@
             font-weight: 500;
         }
 
-        > *:not(.no-hovered-column) {
+        > *:not(.no-column-data) {
             height: 30px;
             border-bottom: 1px solid $separator;
             display: flex;
@@ -121,44 +121,47 @@
 
         .csv-header-pill-content {
             overflow: auto;
-            padding: 4px 10px;
+            padding: 7px 0;
             background: $grey-2;
-            height: calc(100% - 58px);
+            height: calc(100% - 64px);
             @include no-scroll-bar;
 
             &.search-open {
                 height: calc(100% - 58px - 51px);
             }
 
-            .csv-header-pill {
+            .csv-header-pill-wrapper {
-                min-height: 32px;
+                padding: 3px 10px;
-                margin: 6px auto;
-                border-radius: 8px;
-                padding: 10px;
-                background: $white;
-                cursor: pointer;
-                display: flex;
-                flex-direction: column;
 
-                .secondary {
+                .csv-header-pill {
+                    min-height: 32px;
+                    border-radius: 8px;
+                    padding: 10px;
+                    background: $white;
+                    cursor: pointer;
                     display: flex;
-                    justify-content: space-between;
+                    flex-direction: column;
-                    margin-top: 2px;
 
-                    .entry-count {
+                    .secondary {
-                        white-space: nowrap;
+                        display: flex;
-                        margin-right: 10px;
+                        justify-content: space-between;
+                        margin-top: 2px;
+
+                        .entry-count {
+                            white-space: nowrap;
+                            margin-right: 10px;
+                        }
+
+                        .sample {
+                            @include line-clamp(1);
+                        }
                     }
 
-                    .sample {
+                    &.selected {
-                        @include line-clamp(1);
+                        background-color: $primary;
+                        color: $white;
                     }
                 }
-
-                &.selected {
-                    background-color: $primary;
-                    color: $white;
-                }
             }
         }
 

apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts

@@ -43,6 +43,8 @@ export class FileAttributesCsvImportDialogComponent {
     public filteredFields: Field[];
     public previewExpanded = true;
     public filteredKeyOptions: Observable<string[]>;
+    public keepPreview = false;
+    public columnSample = [];
 
     @ViewChild(CdkVirtualScrollViewport, { static: false }) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
 
@@ -223,4 +225,19 @@ export class FileAttributesCsvImportDialogComponent {
 
         this.dialogRef.close(true);
     }
+
+    public setHoveredColumn(column?: string) {
+        setTimeout(() => {
+            if (this.keepPreview && !column) {
+                return;
+            }
+            this.hoveredColumn = column;
+
+            if (!column) {
+                this.columnSample = [];
+            } else {
+                this.columnSample = this.parseResult.data.filter((row) => !!row[column]).map((row) => row[column]);
+            }
+        }, 0);
+    }
 }

apps/red-ui/src/assets/i18n/en.json

@@ -1179,6 +1179,7 @@
         "csv-column": "CSV Column",
         "csv-column-preview": "CSV Column Preview",
         "no-hovered-column": "Preview CSV column by hovering the entry.",
+        "no-sample-data-for": "No sample data for {{column}}.",
         "search": {
             "placeholder": "Search by column name..."
         },