Feature/master thesis schema evolution in polystores

src/app/components/components.module.ts

@@ -37,8 +37,9 @@ import {JsonTextComponent} from './data-view/json-text/json-text.component';
 import {NgxJsonViewerModule} from 'ngx-json-viewer';
 import {JsonEditorComponent} from './json/json-editor.component';
 import {JsonElemComponent} from './json/json-elem/json-elem.component';
+import {ListPickerComponent} from './list-picker/list-picker.component';
+import {DragDropModule} from '@angular/cdk/drag-drop';
 import {DataGraphComponent} from './data-view/data-graph/data-graph.component';
-import {MultipleSwitchPipe} from './data-view/multiple-switch.pipe';
 import {DatesPipeModule} from './data-view/shared-module';
 
 //import 'hammerjs';
@@ -49,6 +50,7 @@ import {DatesPipeModule} from './data-view/shared-module';
         RouterModule,
         CommonModule,
         ChartsModule,
+        DragDropModule,
         TypeaheadModule.forRoot(),
         AppBreadcrumbModule.forRoot(),
         TreeModule,
@@ -73,6 +75,7 @@ import {DatesPipeModule} from './data-view/shared-module';
         InformationManagerComponent,
         RenderItemComponent,
         InputComponent,
+        ListPickerComponent,
         EditorComponent,
         JsonEditorComponent,
         DataViewComponent,
@@ -99,10 +102,11 @@ import {DatesPipeModule} from './data-view/shared-module';
         ToastComponent,
         InformationManagerComponent,
         InputComponent,
+        ListPickerComponent,
         JsonEditorComponent,
         EditorComponent,
         DeleteConfirmComponent
     ]
 })
 export class ComponentsModule {
-}
+}

src/app/components/list-picker/list-picker.component.html

@@ -0,0 +1,21 @@
+<div class="source-column">
+  <span>{{ sourceTitle }}</span>
+  <div class="list-container">
+    <div *ngFor="let option of _getSourceOptions()" class="list-item" (click)="_onAddOption(option)">
+      <span>{{ option[labelProperty] }}</span>
+      <em class="fa fa-solid fa-chevron-right"></em>
+    </div>
+  </div>
+</div>
+
+<div class="target-column">
+  <span>{{ targetTitle }}</span>
+  <div id="target-container" class="list-container" cdkDropList (cdkDropListDropped)="_onMoveOption($event)">
+    <div *ngFor="let option of _value;  let first = first;  let last = last;" class="list-item"
+      (click)="_onRemoveOption(option)" cdkDrag [cdkDragData]="option" [cdkDragDisabled]="disableSort"
+      cdkDragBoundary="#target-container">
+      <span>
+        <em *ngIf="!disableSort" class="fa fa-solid fa-sort"></em> {{ option[labelProperty] }}</span>
+    </div>
+  </div>
+</div>

src/app/components/list-picker/list-picker.component.scss

@@ -0,0 +1,66 @@
+.app-list-picker {
+    display: flex;
+    gap: 10px;
+
+    .source-column,
+    .target-column {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .list-container {
+        min-width: 200px;
+        min-height: 200px;
+        max-height: 200px;
+        border: 1px #e4e7ea solid;
+        flex: 1 1 auto;
+        border-radius: 0.2rem;
+        overflow-y: scroll;
+    }
+
+    .list-container .list-item:not(.cdk-drag-dragging) {
+        opacity: 1;
+        padding: 0.2rem 0.5rem;
+        transition: all 0.2s;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border: 1px var(--white) solid;
+        border-radius: 0;
+        box-shadow: none;
+        border: 1x var(--white) solid;
+        background: var(--white);
+
+        em {
+            color: var(--gray);
+            font-size: 10px;
+        }
+    }
+
+    .list-container .list-item:not(.cdk-drag-dragging):hover {
+        background: var(--light);
+        cursor: pointer;
+    }
+
+    .list-container .list-item.cdk-drag-placeholder {
+        opacity: 0.2;
+    }
+}
+
+.cdk-drag.list-item { 
+    opacity: 1;
+    padding: 0.2rem 0.5rem;
+    transition: all 0.1s;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--light);
+    border: 1px var(--gray) solid;
+    border-radius: 0.2rem;
+    box-shadow: 0px 0px 5px var(--light);
+
+    em {
+        color: var(--gray);
+        font-size: 10px;
+    }
+}

src/app/components/list-picker/list-picker.component.ts

@@ -0,0 +1,116 @@
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { Component, EventEmitter, forwardRef, HostBinding, Input, Output, ViewEncapsulation } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/**
+ * ListPickerComponent is used to select multiple values from a list of options.
+ */
+@Component({
+  selector: 'app-list-picker',
+  templateUrl: './list-picker.component.html',
+  styleUrls: ['./list-picker.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ListPickerComponent),
+      multi: true,
+    },
+  ],
+})
+export class ListPickerComponent<T> implements ControlValueAccessor {
+
+  @HostBinding("class")
+  classes = ["app-list-picker"]
+
+  /**
+   * Title of the source options
+   */
+  @Input()
+  sourceTitle = "Source";
+
+  /**
+   * Title of the target options
+   */
+  @Input()
+  targetTitle = "Target";
+
+  /**
+   * An array of objects to display as the available options.
+   */
+  @Input()
+  sourceOptions: Array<T>
+
+  /**
+   * Name of the label field of an option.
+   */
+  @Input()
+  labelProperty: keyof T | null;
+
+  /**
+   * Number of maximum options that can be selected.
+   */
+  @Input()
+  selectionLimit = Infinity;
+
+  /**
+   * Disable drag and drop sorting
+   */
+  @Input()
+  disableSort = false;
+
+  /**
+   * Callback to invoke when selection limit is reached.
+   */
+  @Output()
+  selectionLimitReached = new EventEmitter<void>();
+
+  _value: Array<T> | null;
+
+  _disabled: boolean;
+
+  _onChange: (value: Array<T>) => void
+
+  _onTouched: () => void
+
+  writeValue(value: Array<T>): void {
+   this._value = value
+  }
+
+  registerOnChange(fn: (value: Array<T>) => void): void {
+    this._onChange = fn
+  }
+
+  registerOnTouched(fn:  () => void): void {
+    this._onTouched = fn
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+   this._disabled = isDisabled;
+  }
+
+  _getSourceOptions = () => {
+    return this.sourceOptions?.filter(option => !this._value?.includes(option));
+  }
+
+  _onAddOption = (option: T) => {
+    this._onTouched();
+    if((this._value?.length ?? 0) < this.selectionLimit) {
+      this._value = [...this._value ?? [], option];
+      this._onChange(this._value);
+    } else {
+      this.selectionLimitReached.emit()
+    }
+  }
+
+  _onRemoveOption = (option: T) => {
+    this._value?.splice( this._value?.indexOf(option), 1);
+    this._onChange(this._value);
+    this._onTouched();
+  }
+
+
+  _onMoveOption = (event: CdkDragDrop<T, any>) => {
+    moveItemInArray(this._value, event.previousIndex, event.currentIndex);
+  }
+}

src/app/models/ui-request.model.ts

@@ -230,6 +230,26 @@ export class ColumnRequest extends UIRequest {
   }
 }
 
+
+/**
+ * Merge columns within a relational namespace.
+ * Used for request where you want to merge multiple columns of a table.
+ */
+export class MergeColumnsRequest extends UIRequest {
+  sourceColumns: DbColumn[];
+  targetColumnName: string;
+  joinString: string;
+  tableType: string;
+  constructor( tableId: string, sourceColumns: DbColumn[],  targetColumnName: string, joinString: string, tableType:string = 'table' ) {
+    super();
+    this.tableId = tableId;
+    this.sourceColumns = sourceColumns;
+    this.targetColumnName = targetColumnName;
+    this.joinString = joinString;   
+    this.tableType = tableType;
+  }
+}
+
 export class MaterializedRequest extends UIRequest{
   constructor(tableId: string) {
     super();
@@ -271,6 +291,24 @@ export class EditTableRequest {
   }
 }
 
+/**
+ * Transfer a table from one namespace to another.
+ * Used for request where you want to transfer a table
+ */
+ export class TransferTableRequest {
+  table: string;
+  sourceSchema: string;
+  targetSchema: string;
+  primaryKeyNames: string;
+
+  constructor( table: string, sourceNamespaceName: string, targetNamespaceName: string, primaryKeyNames: string ) {
+    this.table = table;
+    this.sourceSchema = sourceNamespaceName;
+    this.targetSchema = targetNamespaceName;
+    this.primaryKeyNames = primaryKeyNames;
+  }
+}
+
 export class EditCollectionRequest {
   database: string;
   collection: string;

src/app/services/crud.service.ts

@@ -5,8 +5,7 @@ import {
   Index,
   ModifyPartitionRequest,
   PartitionFunctionModel,
-  PartitioningRequest,
-  ResultSet
+  PartitioningRequest
 } from '../components/data-view/models/result-set.model';
 import {webSocket} from 'rxjs/webSocket';
 import {
@@ -18,7 +17,9 @@ import {
   ExploreTable,
   GraphRequest,
   MaterializedRequest,
+  MergeColumnsRequest,
   MonitoringRequest,
+  TransferTableRequest,
   QueryRequest,
   RelAlgRequest,
   Schema,
@@ -204,6 +205,13 @@ export class CrudService {
     return this._http.post(`${this.httpUrl}/dropColumn`, columnRequest, this.httpOptions);
   }
 
+   /**
+   * Merge columns of a table in a relational namespace
+   */
+  mergeColumns ( columnRequest: MergeColumnsRequest ) {
+    return this._http.post(`${this.httpUrl}/mergeColumns`, columnRequest, this.httpOptions);
+  }
+
   /**
    * Get list of tables of a schema to truncate/drop them
    */
@@ -225,6 +233,13 @@ export class CrudService {
     return this._http.post(`${this.httpUrl}/createTable`, tableRequest, this.httpOptions);
   }
 
+  /**
+   * Transfer a table to another schema
+   */
+   transferTable( tableRequest: TransferTableRequest ) {
+    return this._http.post(`${this.httpUrl}/transferTable`, tableRequest, this.httpOptions);
+  }
+
   /**
    * Create a new collection
    */
@@ -618,4 +633,4 @@ export class CrudService {
       return 'is-invalid';
     }
   }
-}
+}