Usability Bugfixing (#10)

* Fix usability Tasks

* A minus sign is missing in the hint for Integer
* The hint is wrong for nonpositive and nonnegative int
* Nothing happens when clicking "Add" button on Unit
* Show additional popus for notifications" in settings does not work
* When editing referenceUnit in Unit, an incorrect value is displayed
* Not correct behavior when displaying 2 properties
* Specific constraints are not saved
* Add symbol disappears from Characteristic after deleting Trait
* Explanations for the symbols (diagram resize) are missing*
* Show a message if validation fails
* Show "select language" only if the language is not selected
* Unique format icon
* Change the message at smart connection "property"-"operation"
* The description of several elements does not fit on the left panel
* Better highlight the selected diagram elements in ttl files
* Unit should be removed from search
* curie dataType is not displayed in characteristic
* Data of characteristic instances are not always displayed after saving
* Details of edited charcteristic are not displayed immediately
* There are 2 scrollbars in "Setting-Notification" dialog
* Characteristic jumps aside if "add trait" was clicked on
* Copy / Paste is displayed in some dialogs (disable)
* Edit dialog still appears if the element was deleted
* Editing the same files in multiple editor instances
* After "Load aspect model" changes in previously opened diagram are discarded
* Diagram element names should be unique

Author: michelu89

core/apps/ame-e2e/src/integration/editor/create-recursive-element.spec.ts

@@ -166,18 +166,11 @@ describe('Test create recursive element', () => {
       .then(() => cy.get(SELECTOR_tbDeleteButton).click({force: true}))
       .then(() => cy.getUpdatedRDF())
       .then(rdf => {
-        expect(rdf).to.contain(
-          ':property1 a bamm:Property;\n' + '    bamm:name "property1";\n' + '    bamm:characteristic :Characteristic1.'
-        );
-        expect(rdf).to.contain(
-          ':newProperty2 a bamm:Property;\n' + '    bamm:name "newProperty2";\n' + '    bamm:characteristic :Characteristic1.'
-        );
-        expect(rdf).to.contain(
-          ':newProperty3 a bamm:Property;\n' + '    bamm:name "newProperty3";\n' + '    bamm:characteristic :Characteristic1.'
-        );
-        cy.getAspect().then(checkIfAspectHasCharacteristic);
-        cyHelp.hasAddShapeOverlay('newProperty2').then(addShapeIcon => expect(addShapeIcon).to.be.false);
-        cyHelp.hasAddShapeOverlay('newProperty3').then(addShapeIcon => expect(addShapeIcon).to.be.false);
+        expect(rdf).to.contain(':property1 a bamm:Property;\n' + '    bamm:name "property1".');
+        expect(rdf).to.contain(':newProperty2 a bamm:Property;\n' + '    bamm:name "newProperty2".');
+        expect(rdf).to.contain(':newProperty3 a bamm:Property;\n' + '    bamm:name "newProperty3".');
+        cyHelp.hasAddShapeOverlay('newProperty2').then(addShapeIcon => expect(addShapeIcon).to.be.true);
+        cyHelp.hasAddShapeOverlay('newProperty3').then(addShapeIcon => expect(addShapeIcon).to.be.true);
       });
   });
 });

core/apps/ame-e2e/src/integration/editor/edit-collection.spec.ts

@@ -308,7 +308,6 @@ describe('Test editing different Collections', () => {
       .then(() => cy.get(SELECTOR_tbDeleteButton).click({force: true}))
       .then(() => cy.getUpdatedRDF())
       .then(rdf => {
-        console.log(rdf);
         expect(rdf).not.contain('NewCharacteristic');
       });
   };

core/apps/ame-e2e/src/support/commands.ts

@@ -331,9 +331,7 @@ Cypress.Commands.add('clickConnectShapes', (nameSource, nameTarget) =>
     .then(() => cyHelp.clickShape(nameSource))
     .then(() => cyHelp.clickShape(nameTarget, true))
     .then(() => {
-      debugger;
       cy.get(SELECTOR_tbConnectButton).click({force: true});
-      debugger;
     })
 );
 
@@ -350,14 +348,14 @@ Cypress.Commands.add('dragElement', (selector: string, x: number, y: number) =>
     if (Cypress.platform === 'darwin') {
       return cy
         .get(selector)
-        .trigger('mousedown', 'left' ,{which: 1, force: true})
+        .trigger('mousedown', 'left', {which: 1, force: true})
         .trigger('mousemove', {clientX: graphX, clientY: graphY, force: true, waitForAnimations: true})
         .then(() => cy.get('#graph > svg').click(graphX, graphY, {force: true}).trigger('mouseup', {force: true}));
     }
 
     return cy
       .get(selector)
-      .trigger('pointerdown' ,{which: 1, force: true})
+      .trigger('pointerdown', {which: 1, force: true})
       .trigger('pointermove', {clientX: graphX, clientY: graphY, force: true, waitForAnimations: true})
       .then(() => cy.get('#graph > svg').click(graphX, graphY, {force: true}).trigger('pointerup', {force: true}));
   })

core/apps/ame/src/app/app.component.ts

@@ -119,8 +119,6 @@ export class AppComponent implements OnInit {
               },
             ]
           : []),
-        {role: 'cut', label: 'Cut selected text'},
-        {role: 'copy', label: 'Copy selected text'},
         ...(target.tagName.toLowerCase() === 'a'
           ? [
               {
@@ -131,7 +129,6 @@ export class AppComponent implements OnInit {
               },
             ]
           : []),
-        {role: 'paste', label: 'Paste'},
       ];
 
       const menu = Menu.buildFromTemplate(template);

core/apps/ame/src/app/components/editor-canvas/editor-canvas-menu.component.html

@@ -15,16 +15,16 @@
   <div id="outline" class="map-graph"></div>
 </div>
 <div class="menu-container" *ngIf="settings.showEditorNav">
-  <button mat-button (click)="fit()">
+  <button mat-button (click)="fit()" title="Fit the complete model on the current view">
     <mat-icon>fit_screen</mat-icon>
   </button>
-  <button mat-button (click)="actualSize()">
+  <button mat-button (click)="actualSize()" title="Reset zoom level to 100%">
     <mat-icon>close_fullscreen</mat-icon>
   </button>
-  <button mat-button (click)="zoomIn()">
+  <button mat-button (click)="zoomIn()" title="Zoom in">
     <mat-icon>add</mat-icon>
   </button>
-  <button mat-button (click)="zoomOut()">
+  <button mat-button (click)="zoomOut()" title="Zoom out">
     <mat-icon>remove</mat-icon>
   </button>
 </div>

core/apps/ame/src/app/components/editor-canvas/sidebar/sidebar-element/sidebar-element.component.html

@@ -16,11 +16,11 @@
   #container
   [ngClass]="{'element-imported': elementImported()}"
   [attr.data-cy]="dataCy"
-  [title]="elementImported() ? 'Element already imported' : 'Drag to the right to create this element'"
+  [title]="elementImported() ? 'Element already imported' : element.name + ' - Drag to the right to add'"
   class="container"
 >
   <div class="icon" [ngClass]="getIconClass">
-    {{ element.type.charAt(0).toUpperCase() }}
+    {{ elementShortcut[element.type] }}
   </div>
   <div class="info" [matTooltip]="element.description" matTooltipPosition="right">
     <div class="name" [title]="element.name">

core/apps/ame/src/app/components/editor-canvas/sidebar/sidebar-element/sidebar-element.component.ts

@@ -19,19 +19,29 @@ import {MxGraphService} from '@ame/mx-graph';
 import {ElementModel} from '@ame/shared';
 import {environment} from 'environments/environment';
 
+export const elementShortcuts = {
+  property: 'P',
+  operation: 'O',
+  characteristic: 'C',
+  entity: 'E',
+  constraint: 'C',
+  trait: 'T',
+  unit: 'U',
+  event: 'E',
+  abstractEntity: 'AE',
+};
+
 @Component({
   selector: 'ame-sidebar-element',
   templateUrl: './sidebar-element.component.html',
   styleUrls: ['./sidebar-element.component.scss'],
 })
 export class SidebarElementComponent implements AfterViewInit {
-  @Input()
-  public element: ElementModel;
-
-  @ViewChild('container')
-  public container: any;
+  @Input() public element: ElementModel;
+  @ViewChild('container') public container: any;
 
   public dataCy = '';
+  public elementShortcut = elementShortcuts;
 
   get getIconClass(): string {
     return this.element.type.toLowerCase();

core/apps/ame/src/app/components/editor-canvas/sidebar/sidebar-namespace-elements/namespace-filter/namespace-filter.component.html

@@ -16,7 +16,14 @@
     <input matInput [placeholder]="'Search elements in ' + fileName" type="text" [(ngModel)]="searchedString" (keyup)="filterElements()" />
   </mat-form-field>
   <div class="types">
-    <div *ngFor="let type of types" class="type" [ngClass]="getClassesForType(type)" (click)="toggleSelect(type)">
+    <div
+      *ngFor="let type of types"
+      class="type"
+      matTooltipPosition="above"
+      [matTooltip]="'Filter by ' + type.charAt(0).toUpperCase() + type.substring(1, type.length)"
+      [ngClass]="getClassesForType(type)"
+      (click)="toggleSelect(type)"
+    >
       {{ type.charAt(0).toUpperCase() }}
     </div>
   </div>

core/apps/ame/src/app/components/editor-canvas/sidebar/sidebar-namespace-elements/namespace-filter/namespace-filter.component.scss

@@ -26,10 +26,14 @@
     color: var(--ame-font);
     cursor: pointer;
     user-select: none;
+    opacity: 60%;
     border: solid 1px transparent;
+    box-sizing: border-box;
   }
 
   .selected {
+    opacity: 100%;
+    border-width: 2px;
     border-color: var(--ame-font);
   }
 }

core/apps/ame/src/app/components/editor-canvas/sidebar/sidebar-namespace-elements/namespace-filter/namespace-filter.component.ts

@@ -29,7 +29,7 @@ export class NamespaceFilterComponent implements OnChanges {
   @Output()
   public searchElements = new EventEmitter<ElementModel[]>();
 
-  public types = ['property', 'operation', 'characteristic', 'entity', 'constraint', 'trait', 'unit', 'event'];
+  public types = ['property', 'operation', 'characteristic', 'entity', 'constraint', 'trait', 'event'];
   public selectedTypes = [];
   public searchedString: string = null;
   public filteredElements: ElementModel[];