From 6af1f7e74dd9199bda236a5d088a59a17b2dc5d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= Date: Mon, 5 Jul 2021 14:11:21 +0200 Subject: [PATCH] feat(ontology): change gui element for text value properties (#478) * refactor(ontology): clean up default properties * style(ontology): support multi line comments in property's tooltip * feat(ontology): change gui-element for text values * chore(deps): bump DSP-JS to v2.5.0 * test(ontology): fix broken tests --- package-lock.json | 27 +- package.json | 4 +- .../default-data/default-properties.ts | 60 +---- .../property-form.component.html | 27 +- .../property-form.component.spec.ts | 4 +- .../property-form/property-form.component.ts | 249 ++++++++++++------ .../property-info.component.html | 2 +- .../property-info/property-info.component.ts | 17 +- .../resource-class-info.component.ts | 14 +- src/assets/style/_elements.scss | 2 +- 10 files changed, 245 insertions(+), 161 deletions(-) diff --git a/package-lock.json b/package-lock.json index 502b67d6e7..1d886e43bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "@angular/platform-browser-dynamic": "^11.2.9", "@angular/router": "^11.2.9", "@ckeditor/ckeditor5-angular": "^1.2.3", - "@dasch-swiss/dsp-js": "^2.4.0", + "@dasch-swiss/dsp-js": "^2.5.0", "@dasch-swiss/dsp-ui": "^1.6.0", "@ngx-translate/core": "^12.1.2", "@ngx-translate/http-loader": "5.0.0", @@ -75,6 +75,19 @@ "typescript": "4.0.7" } }, + ".yalc/@dasch-swiss/dsp-js": { + "version": "2.4.0", + "extraneous": true, + "license": "AGPL-3.0", + "dependencies": { + "@types/jsonld": "^1.5.0", + "json2typescript": "1.4.1", + "jsonld": "^5.2.0" + }, + "peerDependencies": { + "rxjs": "6.x" + } + }, "node_modules/@angular-devkit/architect": { "version": "0.1102.14", "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1102.14.tgz", @@ -2245,9 +2258,9 @@ } }, "node_modules/@dasch-swiss/dsp-js": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/@dasch-swiss/dsp-js/-/dsp-js-2.4.0.tgz", - "integrity": "sha512-anHm+SP0qAqDpTcUHCSED37Wtalo1XWSLFFVcN2JYn7hMUFbXHGrdsw50UuK+RWMEDjEAbUwLomDxjxzry3opw==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@dasch-swiss/dsp-js/-/dsp-js-2.5.0.tgz", + "integrity": "sha512-Zd13732lmd/yS/LrfkJj2KJ1TnGWOuXsvffTMXMYpiYtTxdWl90GyFtgbt7IVtdcPyOaGrg8gZpTVssslUSMBw==", "dependencies": { "@types/jsonld": "^1.5.0", "json2typescript": "1.4.1", @@ -22048,9 +22061,9 @@ } }, "@dasch-swiss/dsp-js": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/@dasch-swiss/dsp-js/-/dsp-js-2.4.0.tgz", - "integrity": "sha512-anHm+SP0qAqDpTcUHCSED37Wtalo1XWSLFFVcN2JYn7hMUFbXHGrdsw50UuK+RWMEDjEAbUwLomDxjxzry3opw==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@dasch-swiss/dsp-js/-/dsp-js-2.5.0.tgz", + "integrity": "sha512-Zd13732lmd/yS/LrfkJj2KJ1TnGWOuXsvffTMXMYpiYtTxdWl90GyFtgbt7IVtdcPyOaGrg8gZpTVssslUSMBw==", "requires": { "@types/jsonld": "^1.5.0", "json2typescript": "1.4.1", diff --git a/package.json b/package.json index ce29b8d553..3a37f4ec9c 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ }, "private": true, "dependencies": { + "3d-force-graph": "^1.60.12", "@angular/animations": "^11.2.9", "@angular/cdk": "^11.2.5", "@angular/common": "11.2.9", @@ -33,11 +34,10 @@ "@angular/platform-browser-dynamic": "^11.2.9", "@angular/router": "^11.2.9", "@ckeditor/ckeditor5-angular": "^1.2.3", - "@dasch-swiss/dsp-js": "^2.4.0", + "@dasch-swiss/dsp-js": "^2.5.0", "@dasch-swiss/dsp-ui": "^1.6.0", "@ngx-translate/core": "^12.1.2", "@ngx-translate/http-loader": "5.0.0", - "3d-force-graph": "^1.60.12", "angular-split": "^4.0.0", "ckeditor5-custom-build": "github:dasch-swiss/ckeditor_custom_build", "core-js": "^3.6.5", diff --git a/src/app/project/ontology/default-data/default-properties.ts b/src/app/project/ontology/default-data/default-properties.ts index eb344755a5..6a386df196 100644 --- a/src/app/project/ontology/default-data/default-properties.ts +++ b/src/app/project/ontology/default-data/default-properties.ts @@ -43,7 +43,7 @@ export class DefaultProperties { description: 'Short text such as title or name', subPropOf: Constants.HasValue, objectType: Constants.TextValue, - guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'SimpleText', // 'Input', + guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'SimpleText', // better element would be: 'Input', group: 'Text' // redundant information, but otherwise we don't get the main group name after selecting type }, { @@ -75,27 +75,9 @@ export class DefaultProperties { description: 'Dropdown menu with values from predefined list', subPropOf: Constants.HasValue, objectType: Constants.ListValue, - guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'List', // 'Pulldown' + guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'List', // better element would be: 'Pulldown' or 'Select' group: 'List' } - // { - // icon: 'check_box', - // label: 'Checkboxes', - // description: 'Select multiple values from predefined short list', - // subPropOf: Constants.HasValue, - // objectType: Constants.ListValue, - // guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Checkbox', - // group: 'List' - // }, - // { - // icon: 'radio_button_checked', - // label: 'Multiple choice', - // description: 'Select only one value from predefined short list', - // subPropOf: Constants.HasValue, - // objectType: Constants.ListValue, - // guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Radio', - // group: 'List' - // } ] }, { @@ -118,21 +100,21 @@ export class DefaultProperties { { icon: 'calendar_today', label: 'Date', - description: 'A date picker with day, month and year', - subPropOf: Constants.HasValue, - objectType: Constants.DateValue, - guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Date', - group: 'Date / Time' - }, - { - icon: 'date_range', - label: 'Period', - description: 'A period of time between two dates', + description: 'A date field with day, month and year', subPropOf: Constants.HasValue, objectType: Constants.DateValue, guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Date', group: 'Date / Time' }, + // { + // icon: 'date_range', + // label: 'Period', + // description: 'A period of time between two dates', + // subPropOf: Constants.HasValue, + // objectType: Constants.DateValue, + // guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Date', + // group: 'Date / Time' + // }, { icon: 'access_time', label: 'Timestamp', @@ -147,7 +129,7 @@ export class DefaultProperties { label: 'Time sequence', description: 'A time sequence with start and end point on a timeline', subPropOf: Constants.HasValue, - objectType: Constants.TimeValue, + objectType: Constants.IntervalValue, guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Interval', group: 'Date / Time' } @@ -188,22 +170,6 @@ export class DefaultProperties { guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Searchbox', // 'Autocomplete', group: 'Link / Relation' }, - // { - // icon: 'picture_in_picture', - // label: 'Part of resource class', - // subPropOf: Constants.KnoraApiV2 + Constants.HashDelimiter + 'isPartOf', - // objectType: Constants.LinkValue, - // guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'Searchbox', // 'Autocomplete', - // group: 'Link' - // }, - // { - // icon: 'compare_arrows', - // label: 'External resource', - // subPropOf: Constants.HasValue, - // objectType: Constants.UriValue, - // guiEle: Constants.SalsahGui + Constants.HashDelimiter + 'SimpleText', - // group: 'Link' - // }, { icon: 'language', label: 'External URL', diff --git a/src/app/project/ontology/property-form/property-form.component.html b/src/app/project/ontology/property-form/property-form.component.html index 5a3140653b..323eca7746 100644 --- a/src/app/project/ontology/property-form/property-form.component.html +++ b/src/app/project/ontology/property-form/property-form.component.html @@ -3,9 +3,9 @@ -->
-

- This property already exists. - Be careful when editing it, it could have an effect in other resource classes if it is used there. +

+ This property already exists. If you want to modify it, go to the "properties" view. +

@@ -13,16 +13,27 @@ - {{propertyInfo.propType?.icon}}  + {{propertyForm.controls['propType'].value.icon}}  Property type - + + + + {{propertyForm.controls['propType'].value.group}}:  + {{propertyForm.controls['propType'].value.label}} + + + + + {{ele.icon}} {{ele.label}} + + +
- @@ -32,7 +43,7 @@
-
diff --git a/src/app/project/ontology/property-form/property-form.component.spec.ts b/src/app/project/ontology/property-form/property-form.component.spec.ts index 3afff3bb55..2c6ba634ac 100644 --- a/src/app/project/ontology/property-form/property-form.component.spec.ts +++ b/src/app/project/ontology/property-form/property-form.component.spec.ts @@ -136,7 +136,7 @@ describe('PropertyFormComponent', () => { const ontologyEndpointSpyObj = { v2: { - onto: jasmine.createSpyObj('onto', ['updateResourceProperty', 'createResourceProperty']) + onto: jasmine.createSpyObj('onto', ['updateResourceProperty', 'createResourceProperty', 'replaceGuiElementOfProperty']) } }; @@ -206,8 +206,6 @@ describe('PropertyFormComponent', () => { }); - - it('should create an instance', () => { expect(simpleTextHostComponent.propertyFormComponent).toBeTruthy(); }); diff --git a/src/app/project/ontology/property-form/property-form.component.ts b/src/app/project/ontology/property-form/property-form.component.ts index e585005b0e..eacd85d839 100644 --- a/src/app/project/ontology/property-form/property-form.component.ts +++ b/src/app/project/ontology/property-form/property-form.component.ts @@ -15,6 +15,7 @@ import { UpdateOntology, UpdateResourceClassCardinality, UpdateResourcePropertyComment, + UpdateResourcePropertyGuiElement, UpdateResourcePropertyLabel } from '@dasch-swiss/dsp-js'; import { AutocompleteItem, DspApiConnectionToken } from '@dasch-swiss/dsp-ui'; @@ -80,7 +81,10 @@ export class PropertyFormComponent implements OnInit { lastModificationDate: string; // selection of default property types - propertyTypes: PropertyCategory[] = DefaultProperties.data; + defaultProperties: PropertyCategory[] = DefaultProperties.data; + + // selection of possible property types in case of edit prop + restrictedPropertyTypes: PropertyCategory[]; showGuiAttr = false; guiAttrIcon = 'tune'; @@ -142,21 +146,55 @@ export class PropertyFormComponent implements OnInit { buildForm() { + let disablePropType = true; + // if property definition exists // we are in edit mode: prepare form to edit label and/or comment + // and to edit gui element (which is part of property type) if (this.propertyInfo.propDef) { this.labels = this.propertyInfo.propDef.labels; this.comments = this.propertyInfo.propDef.comments; this.guiAttributes = this.propertyInfo.propDef.guiAttributes; + + // prepare list of restricted property types + this.restrictedPropertyTypes = [{ + group: this.propertyInfo.propType.group, + elements: [] + }]; + + // filter property types by group + const restrictedElements: DefaultProperty[] = this.filterPropertyTypesByGroup(this.propertyInfo.propType.group); + + // slice array + // this slice value will be kept + // because there was the idea to shorten the array of restrcited elements + // in case e.g. richtext can't be changed to simple text, then we shouldn't list the simple text item + const slice = 0; + + // there's only the object type "text", where we can change the gui element; + disablePropType = (this.propertyInfo.propType.objectType !== Constants.TextValue); + + this.restrictedPropertyTypes[0].elements = restrictedElements.slice(slice); + } else { + this.restrictedPropertyTypes = this.defaultProperties; } this.propertyForm = this._fb.group({ + 'propType': new FormControl({ + value: this.propertyInfo.propType, + disabled: disablePropType || this.resClassIri + }), 'guiAttr': new FormControl({ value: this.guiAttributes }), - 'multiple': new FormControl(), // --> TODO: here we will check, if it can be updated; case updateCardinality: disabled if !canSetFullCardinality && multiple.value !== true + 'multiple': new FormControl({ + value: '', // --> TODO: will be set in update cardinality task + disabled: this.propertyInfo.propType.objectType === Constants.BooleanValue + // --> TODO: here we also have to check, if it can be updated (update cardinality task); + // case updateCardinality: disabled if !canSetFullCardinality && multiple.value !== true + }), 'required': new FormControl({ - value: '', + value: '', // --> TODO: will be set in update cardinality task disabled: !this.canSetFullCardinality }) }); @@ -218,6 +256,19 @@ export class PropertyFormComponent implements OnInit { ); } + /** + * filters property types by group; it's used + * in case of editing a property to restrict + * the list of property types and elements + * @param group + * @returns an array of elements + */ + filterPropertyTypesByGroup(group: string): DefaultProperty[] { + const groups: PropertyCategory[] = this.defaultProperties.filter(item => item.group === group); + + return (groups.length ? groups[0].elements : []); + } + updateAttributeField(type: DefaultProperty) { // reset value of guiAttr @@ -281,67 +332,92 @@ export class PropertyFormComponent implements OnInit { submitData() { this.loading = true; - // do something with your data + + // the property exist already; update label, comment and/or gui element if (this.propertyInfo.propDef) { - // edit mode: update res property info (label and comment) - // label - const onto4Label = new UpdateOntology(); - onto4Label.id = this.ontology.id; - onto4Label.lastModificationDate = this.lastModificationDate; - - const updateLabel = new UpdateResourcePropertyLabel(); - updateLabel.id = this.propertyInfo.propDef.id; - updateLabel.labels = this.labels; - onto4Label.entity = updateLabel; - - // comment - const onto4Comment = new UpdateOntology(); - onto4Comment.id = this.ontology.id; - - const updateComment = new UpdateResourcePropertyComment(); - updateComment.id = this.propertyInfo.propDef.id; - updateComment.comments = (this.comments.length ? this.comments : this.labels); - onto4Comment.entity = updateComment; - - this._dspApiConnection.v2.onto.updateResourceProperty(onto4Label).subscribe( - (classLabelResponse: ResourcePropertyDefinitionWithAllLanguages) => { - this.lastModificationDate = classLabelResponse.lastModificationDate; - onto4Comment.lastModificationDate = this.lastModificationDate; - - this._dspApiConnection.v2.onto.updateResourceProperty(onto4Comment).subscribe( - (classCommentResponse: ResourcePropertyDefinitionWithAllLanguages) => { - this.lastModificationDate = classCommentResponse.lastModificationDate; - - if (this.resClassIri && classCommentResponse.lastModificationDate) { - // edit cardinality mode: update cardinality of existing property in res class - this.setCardinality(this.propertyInfo.propDef); - } else { - // close the dialog box + + if (this.resClassIri) { + // set cardinality with existing property in res class + this.setCardinality(this.propertyInfo.propDef); + } else { + // edit property mode: update res property info (label and comment) or gui element and attribute + + // label + const onto4Label = new UpdateOntology(); + onto4Label.id = this.ontology.id; + onto4Label.lastModificationDate = this.lastModificationDate; + + const updateLabel = new UpdateResourcePropertyLabel(); + updateLabel.id = this.propertyInfo.propDef.id; + updateLabel.labels = this.labels; + onto4Label.entity = updateLabel; + + // comment + const onto4Comment = new UpdateOntology(); + onto4Comment.id = this.ontology.id; + + const updateComment = new UpdateResourcePropertyComment(); + updateComment.id = this.propertyInfo.propDef.id; + updateComment.comments = (this.comments.length ? this.comments : this.labels); + onto4Comment.entity = updateComment; + + this._dspApiConnection.v2.onto.updateResourceProperty(onto4Label).subscribe( + (classLabelResponse: ResourcePropertyDefinitionWithAllLanguages) => { + this.lastModificationDate = classLabelResponse.lastModificationDate; + onto4Comment.lastModificationDate = this.lastModificationDate; + + this._dspApiConnection.v2.onto.updateResourceProperty(onto4Comment).subscribe( + (classCommentResponse: ResourcePropertyDefinitionWithAllLanguages) => { + this.lastModificationDate = classCommentResponse.lastModificationDate; + + const onto4guiEle = new UpdateOntology(); + onto4guiEle.id = this.ontology.id; + onto4guiEle.lastModificationDate = this.lastModificationDate; + + const updateGuiEle = new UpdateResourcePropertyGuiElement(); + updateGuiEle.id = this.propertyInfo.propDef.id; + updateGuiEle.guiElement = this.propertyForm.controls['propType'].value.guiEle; + + const guiAttr = this.propertyForm.controls['guiAttr'].value; + if (guiAttr) { + updateGuiEle.guiAttributes = this.setGuiAttribute(guiAttr); + } + + onto4guiEle.entity = updateGuiEle; + + this._dspApiConnection.v2.onto.replaceGuiElementOfProperty(onto4guiEle).subscribe( + (guiEleResponse: ResourcePropertyDefinitionWithAllLanguages) => { + this.lastModificationDate = guiEleResponse.lastModificationDate; + // close the dialog box + this.loading = false; + this.closeDialog.emit(); + }, + (error: ApiResponseError) => { + this.error = true; + this.loading = false; + this._errorHandler.showMessage(error); + } + ); + + }, + (error: ApiResponseError) => { + this.error = true; this.loading = false; - this.closeDialog.emit(); + this._errorHandler.showMessage(error); } + ); - }, - (error: ApiResponseError) => { - this.error = true; - this.loading = false; - this._errorHandler.showMessage(error); - } - ); - - - }, - (error: ApiResponseError) => { - this.error = true; - this.loading = false; - this._errorHandler.showMessage(error); - } - ); - + }, + (error: ApiResponseError) => { + this.error = true; + this.loading = false; + this._errorHandler.showMessage(error); + } + ); + } } else { // create mode: new property incl. gui type and attribute // submit property - // this.submitProps(this.resourceClassForm.value.properties, this.propertyInfo.propDef.id); // set resource property name / id: randomized string const uniquePropName: string = this._ontologyService.setUniqueName(this.ontology.id); @@ -357,31 +433,7 @@ export class PropertyFormComponent implements OnInit { newResProp.comment = (this.comments.length ? this.comments : this.labels); const guiAttr = this.propertyForm.controls['guiAttr'].value; if (guiAttr) { - switch (this.propertyInfo.propType.guiEle) { - - case Constants.SalsahGui + Constants.HashDelimiter + 'Colorpicker': - newResProp.guiAttributes = ['ncolors=' + guiAttr]; - break; - case Constants.SalsahGui + Constants.HashDelimiter + 'List': - case Constants.SalsahGui + Constants.HashDelimiter + 'Pulldown': - case Constants.SalsahGui + Constants.HashDelimiter + 'Radio': - newResProp.guiAttributes = ['hlist=<' + guiAttr + '>']; - break; - case Constants.SalsahGui + Constants.HashDelimiter + 'SimpleText': - // --> TODO could have two guiAttr fields: size and maxlength - // we suggest to use default value for size; we do not support this guiAttr in DSP-App - newResProp.guiAttributes = ['maxlength=' + guiAttr]; - break; - case Constants.SalsahGui + Constants.HashDelimiter + 'Spinbox': - // --> TODO could have two guiAttr fields: min and max - newResProp.guiAttributes = ['min=' + guiAttr, 'max=' + guiAttr]; - break; - case Constants.SalsahGui + Constants.HashDelimiter + 'Textarea': - // --> TODO could have four guiAttr fields: width, cols, rows, wrap - // we suggest to use default values; we do not support this guiAttr in DSP-App - newResProp.guiAttributes = ['width=100%']; - break; - } + newResProp.guiAttributes = this.setGuiAttribute(guiAttr); } newResProp.guiElement = this.propertyInfo.propType.guiEle; newResProp.subPropertyOf = [this.propertyInfo.propType.subPropOf]; @@ -460,4 +512,37 @@ export class PropertyFormComponent implements OnInit { } + setGuiAttribute(guiAttr: string): string[] { + + let guiAttributes: string[]; + + switch (this.propertyInfo.propType.guiEle) { + + case Constants.SalsahGui + Constants.HashDelimiter + 'Colorpicker': + guiAttributes = ['ncolors=' + guiAttr]; + break; + case Constants.SalsahGui + Constants.HashDelimiter + 'List': + case Constants.SalsahGui + Constants.HashDelimiter + 'Pulldown': + case Constants.SalsahGui + Constants.HashDelimiter + 'Radio': + guiAttributes = ['hlist=<' + guiAttr + '>']; + break; + case Constants.SalsahGui + Constants.HashDelimiter + 'SimpleText': + // --> TODO could have two guiAttr fields: size and maxlength + // we suggest to use default value for size; we do not support this guiAttr in DSP-App + guiAttributes = ['maxlength=' + guiAttr]; + break; + case Constants.SalsahGui + Constants.HashDelimiter + 'Spinbox': + // --> TODO could have two guiAttr fields: min and max + guiAttributes = ['min=' + guiAttr, 'max=' + guiAttr]; + break; + case Constants.SalsahGui + Constants.HashDelimiter + 'Textarea': + // --> TODO could have four guiAttr fields: width, cols, rows, wrap + // we suggest to use default values; we do not support this guiAttr in DSP-App + guiAttributes = ['width=100%']; + break; + } + + return guiAttributes; + } + } diff --git a/src/app/project/ontology/property-info/property-info.component.html b/src/app/project/ontology/property-info/property-info.component.html index 897c877697..0d7ee1a74c 100644 --- a/src/app/project/ontology/property-info/property-info.component.html +++ b/src/app/project/ontology/property-info/property-info.component.html @@ -5,7 +5,7 @@ matTooltipPosition="above"> {{propType?.icon}} - + {{propDef.label ? propDef.label : propDef.id}} diff --git a/src/app/project/ontology/property-info/property-info.component.ts b/src/app/project/ontology/property-info/property-info.component.ts index 11107daed5..02dbb4e6ef 100644 --- a/src/app/project/ontology/property-info/property-info.component.ts +++ b/src/app/project/ontology/property-info/property-info.component.ts @@ -113,7 +113,7 @@ export class PropertyInfoComponent implements OnChanges, AfterContentInit { project: ReadProject; // list of default property types - propertyTypes: PropertyCategory[] = DefaultProperties.data; + defaultProperties: PropertyCategory[] = DefaultProperties.data; // list of resource classes where the property is used resClasses: ResourceClassDefinitionWithAllLanguages[] = []; @@ -153,11 +153,16 @@ export class PropertyInfoComponent implements OnChanges, AfterContentInit { // find gui ele from list of default property-types to set type value if (this.propDef.guiElement) { - for (const group of this.propertyTypes) { - this.propType = group.elements.find(i => - i.guiEle === this.propDef.guiElement && - (i.objectType === this.propDef.objectType || i.subPropOf === this.propDef.subPropertyOf[0]) - ); + for (const group of this.defaultProperties) { + if (this.propDef.subPropertyOf[0] !== Constants.HasLinkTo) { + this.propType = group.elements.find(i => + i.guiEle === this.propDef.guiElement && i.objectType === this.propDef.objectType + ); + } else { + this.propType = group.elements.find(i => + i.guiEle === this.propDef.guiElement && i.subPropOf === this.propDef.subPropertyOf[0] + ); + } if (this.propType) { break; diff --git a/src/app/project/ontology/resource-class-info/resource-class-info.component.ts b/src/app/project/ontology/resource-class-info/resource-class-info.component.ts index e0c4eccf55..321dd8555f 100644 --- a/src/app/project/ontology/resource-class-info/resource-class-info.component.ts +++ b/src/app/project/ontology/resource-class-info/resource-class-info.component.ts @@ -5,6 +5,7 @@ import { ApiResponseError, CanDoResponse, ClassDefinition, + Constants, IHasProperty, KnoraApiConnection, PropertyDefinition, @@ -196,10 +197,15 @@ export class ResourceClassInfoComponent implements OnInit { // find corresponding default property to have more prop info if (availableProp.guiElement) { for (const group of this.defaultProperties) { - propType = group.elements.find(i => - i.guiEle === availableProp.guiElement && - (i.objectType === availableProp.objectType || i.subPropOf === availableProp.subPropertyOf[0]) - ); + if (availableProp.subPropertyOf[0] !== Constants.HasLinkTo) { + propType = group.elements.find(i => + i.guiEle === availableProp.guiElement && i.objectType === availableProp.objectType + ); + } else { + propType = group.elements.find(i => + i.guiEle === availableProp.guiElement && i.subPropOf === availableProp.subPropertyOf[0] + ); + } if (propType) { break; diff --git a/src/assets/style/_elements.scss b/src/assets/style/_elements.scss index 8ce7d79a38..8e0cdbb306 100644 --- a/src/assets/style/_elements.scss +++ b/src/assets/style/_elements.scss @@ -615,7 +615,7 @@ $gc-small: $form-width - $gc-large - 4; .multi-line-tooltip { white-space: pre-line; line-height: 1.5; - font-size: 12px; + font-size: 11px; } // --------------------------------------