existing dimension selection with proper dropdown

gui-js/libs/ui-components/src/lib/import-csv/import-csv.component.html

@@ -1,4 +1,4 @@
-<div #fullDialog class="main" [formGroup]="form">
+<div #fullDialog class="main" [formGroup]="form" (click)="wedgeOptionPanelVisibleIndex = null">
   <!-- HEADER START -->
   <div class="import-container">
     <button mat-raised-button type="button" (click)="selectFile()">
@@ -137,11 +137,19 @@
       <span>
         <label for="horizontal-dimension"
               title="Name of the collection of data columns.">Horizontal Dimension</label>
-        <input
-          id="horizontal-dimension"
-          type="text"
-          formControlName="horizontalDimName"
-        />
+        <div class="wedge-container">
+          <input
+            id="horizontal-dimension"
+            type="text"
+            formControlName="horizontalDimName"
+          />
+
+          <div class="material-icons wedge-icon" style="width: 20px;" (click)="onWedgeIconClicked($event, -1)">expand_more</div>
+
+          <div *ngIf="wedgeOptionPanelVisibleIndex === -1" class="wedge-options-panel">
+            <div class="wedge-option" *ngFor="let dimensionName of existingDimensionNames" (click)="onWedgeOptionClicked($event, -1, dimensionName)">{{dimensionName}}</div>
+          </div>
+        </div>
       </span>
       <ng-container [formGroup]="horizontalDimension">
         <span>
@@ -186,7 +194,7 @@
       <tr>
         <th>Name</th>
         <td *ngFor="let col of csvCols; let i = index"
-          class="col-type-container" [class.selected]="selected[i]"
+          class="col-type-container wedge-container" [class.selected]="selected[i]"
           (mousedown)="typeMouseDown($event,i)"
           (mousemove)="typeMouseMove($event,i)"
           (mouseup)="typeMouseUp($event,'name',i)"
@@ -198,6 +206,12 @@
             [value]="dialogState.spec.dimensionNames[i]"
             (change)="dialogState.spec.dimensionNames[i] = $event.target['value']"
           >
+
+          <div class="material-icons wedge-icon" style="margin-right: -2px" (click)="onWedgeIconClicked($event, i)">expand_more</div>
+
+          <div *ngIf="i === wedgeOptionPanelVisibleIndex" class="wedge-options-panel">
+            <div class="wedge-option" *ngFor="let dimensionName of selectableDimensionNames[i]" (click)="onWedgeOptionClicked($event, i, dimensionName)">{{dimensionName}}</div>
+          </div>
         </td>
       </tr>
 

gui-js/libs/ui-components/src/lib/import-csv/import-csv.component.scss

@@ -30,6 +30,8 @@
   }
 
   .options-row {
+    z-index: 10000;
+
     flex: 0 0 1;
     width: 100%;
 
@@ -88,22 +90,18 @@
   }
 }
 
-.autocomplete {
-  width: 11.125rem;
-}
-
-::ng-deep .mat-mdc-option-text {
-  font-size: 0.7rem !important;
+::ng-deep .mat-mdc-autocomplete-panel {
+  width: 9rem !important;
 }
 
 ::ng-deep .mat-mdc-option {
-  height: 18px !important;
-}
+  min-height: 0.9rem !important;
+  height: 0.9rem !important;
 
-::ng-deep .cdk-overlay-pane {
-  height: 4.5rem !important;
+  span.mdc-list-item__primary-text {
+    font-size: 0.8rem !important;
+  }
 }
-
 table {
   border-collapse: collapse;
   user-select: none;
@@ -156,3 +154,44 @@ td {
 .col-type-container.selected {
   filter: brightness(80%)
 }
+
+.hd-wedge-container.wedge-container {
+  z-index: 10000;
+}
+
+.wedge-container {
+  position: relative;
+  overflow-y: visible;
+
+  z-index: 1000;
+
+  .wedge-icon {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    margin: -1px 1px;
+
+    cursor: pointer;
+
+    transform: scale(0.75, 0.85);
+  }
+
+  .wedge-options-panel {
+    position: absolute;
+    top: 100%;
+    right: 1px;
+    border: 0.5px solid black;
+    width: calc(100% - 2px);
+
+    .wedge-option {
+      font-size: 12px;
+      padding: 2px;
+      background-color: white;
+    }
+
+    .wedge-option:hover {
+      background-color: rgb(98, 98, 203);
+      color: white;
+    }
+  }
+}

gui-js/libs/ui-components/src/lib/import-csv/import-csv.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ChangeDetectorRef, OnDestroy, OnInit, ElementRef, ViewChild } from '@angular/core';
+import { AfterViewInit, AfterViewChecked, Component, ChangeDetectorRef, OnDestroy, OnInit, ElementRef, ViewChild } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { ElectronService } from '@minsky/core';
@@ -60,7 +60,7 @@ class Dimension {
         NgStyle,
     ],
 })
-export class ImportCsvComponent extends Zoomable implements OnInit, AfterViewInit, OnDestroy {
+export class ImportCsvComponent extends Zoomable implements OnInit, AfterViewInit, AfterViewChecked, OnDestroy {
   form: FormGroup;
 
   destroy$ = new Subject<{}>();
@@ -77,6 +77,9 @@ export class ImportCsvComponent extends Zoomable implements OnInit, AfterViewIni
   selected: boolean[]; ///< per column whether column is selected
   mouseDown = -1;       ///< record of column of previous mouseDown
   dialogState: any;
+  existingDimensionNames: string[];
+  selectableDimensionNames: string[][];
+  wedgeOptionPanelVisibleIndex: number = null;
   @ViewChild('checkboxRow') checkboxRow: ElementRef<HTMLCollection>;
   @ViewChild('importCsvCanvasContainer') inputCsvCanvasContainer: ElementRef<HTMLElement>;
   @ViewChild('fullDialog') fullDialog: ElementRef<HTMLElement>;
@@ -181,6 +184,10 @@ export class ImportCsvComponent extends Zoomable implements OnInit, AfterViewIni
       }
     });
     document.onkeydown = this.onKeyDown;
+
+    this.electronService.minsky.dimensions.$properties().then(dims => {
+      this.existingDimensionNames = Object.keys(dims);
+    });
   }
 
   ngAfterViewInit() {
@@ -298,6 +305,7 @@ export class ImportCsvComponent extends Zoomable implements OnInit, AfterViewIni
     let header = this.dialogState.spec.headerRow;
     this.csvCols = new Array(this.parsedLines[header]?.length);
     this.selected = new Array(this.parsedLines[header]?.length).fill(false);
+    this.selectableDimensionNames = this.parsedLines[this.dialogState.spec.headerRow].map(header => this.getSelectableNameDimensions(header));
     this.updateColumnTypes();
   }
 
@@ -506,6 +514,33 @@ export class ImportCsvComponent extends Zoomable implements OnInit, AfterViewIni
     });
   }
 
+  // creates list of selectable name dimensions, adding header value to existing dimensions if necessary
+  // should not be called from HTML template because this will create a massive number of arrays that have to be garbage-collected
+  getSelectableNameDimensions(headerValue: string) {
+    const selectableDimensions = this.existingDimensionNames.slice();
+    if(!selectableDimensions.includes(headerValue)) selectableDimensions.push(headerValue);
+    return selectableDimensions;
+  }
+
+  onWedgeIconClicked($event, i) {
+    if(this.wedgeOptionPanelVisibleIndex === i) {
+      this.wedgeOptionPanelVisibleIndex = null;
+    } else {
+      this.wedgeOptionPanelVisibleIndex = i;
+    }
+    $event.stopPropagation();
+  }
+
+  onWedgeOptionClicked($event, i, value) {
+    this.wedgeOptionPanelVisibleIndex = null;
+    if(i === -1) {
+      this.form.controls.horizontalDimName.setValue(value);
+    } else {
+      this.dialogState.spec.dimensionNames[i] = value;
+    }
+    $event.stopPropagation();
+  }
+
   closeWindow() { this.electronService.closeWindow(); }
 
   ngOnDestroy() {