Merge pull request #2719 from 4Science/main_CST-12825

ROR Integration - Identifier Visualization

src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html

@@ -32,6 +32,18 @@
     </ds-generic-item-page-field>
   </div>
   <div class="col-xs-12 col-md-7">
+    <ds-item-page-img-field
+      [fields]="['organization.identifier.ror']"
+      [img]="{
+        URI: './assets/images/ror-icon.svg',
+        alt: 'item.page.image.alt.ROR',
+        heightVar: '--ds-item-page-img-field-ror-inline-height'
+      }"
+      [item]="object"
+      [label]="'orgunit.page.ror'"
+      [urlRegex]="'(.*)ror.org'"
+    >
+    </ds-item-page-img-field>
     <ds-related-items
       [parentItem]="object"
       [relationType]="'isPublicationOfOrgUnit'"

src/app/item-page/field-components/metadata-values/metadata-values.component.html

@@ -3,8 +3,8 @@
       <!--
       Choose a template. Priority: markdown, link, browse link.
       -->
-      <ng-container *ngTemplateOutlet="(renderMarkdown ? markdown : (hasLink(mdValue) ? link : (hasBrowseDefinition() ? browselink : simple)));
-        context: {value: mdValue.value}">
+      <ng-container *ngTemplateOutlet="(renderMarkdown ? markdown : (hasLink(mdValue) ? (img != null ? linkImg : link) : (hasBrowseDefinition() ? browselink : simple)));
+        context: {value: mdValue.value, img}">
       </ng-container>
       <span class="separator" *ngIf="!last" [innerHTML]="separator"></span>
     </ng-container>
@@ -23,6 +23,17 @@
     </a>
 </ng-template>
 
+<!-- Render value as a link with icon -->
+<ng-template #linkImg let-img="img" let-value="value">
+  <a [href]="value" class="link-anchor dont-break-out ds-simple-metadata-link" target="_blank">
+    <img class="link-logo"
+      [alt]="img.alt | translate"
+      [style.height]="'var(' + img.heightVar + ', --ds-item-page-img-field-default-inline-height)'"
+      [src]="img.URI"/>
+    {{value}}
+  </a>
+</ng-template>
+
 <!-- Render simple value in a span  -->
 <ng-template #simple let-value="value">
   <span class="dont-break-out preserve-line-breaks">{{value}}</span>

src/app/item-page/field-components/metadata-values/metadata-values.component.ts

@@ -4,6 +4,7 @@ import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
 import { BrowseDefinition } from '../../../core/shared/browse-definition.model';
 import { hasValue } from '../../../shared/empty.util';
 import { VALUE_LIST_BROWSE_DEFINITION } from '../../../core/shared/value-list-browse-definition.resource-type';
+import { ImageField } from '../../simple/field-components/specific-field/item-page-field.component';
 
 /**
  * This component renders the configured 'values' into the ds-metadata-field-wrapper component.
@@ -55,6 +56,11 @@ export class MetadataValuesComponent implements OnChanges {
 
   @Input() browseDefinition?: BrowseDefinition;
 
+  /**
+   * Optional {@code ImageField} reference that represents an image to be displayed inline.
+   */
+  @Input() img?: ImageField;
+
   ngOnChanges(changes: SimpleChanges): void {
     this.renderMarkdown = !!this.appConfig.markdown.enabled && this.enableMarkdown;
   }

src/app/item-page/item-shared.module.ts

@@ -1,21 +1,36 @@
-import { RelatedEntitiesSearchComponent } from './simple/related-entities/related-entities-search/related-entities-search.component';
+import {
+  RelatedEntitiesSearchComponent
+} from './simple/related-entities/related-entities-search/related-entities-search.component';
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { SearchModule } from '../shared/search/search.module';
 import { SharedModule } from '../shared/shared.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { DYNAMIC_FORM_CONTROL_MAP_FN } from '@ng-dynamic-forms/core';
-import { dsDynamicFormControlMapFn } from '../shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component';
-import { TabbedRelatedEntitiesSearchComponent } from './simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component';
-import { ItemVersionsDeleteModalComponent } from './versions/item-versions-delete-modal/item-versions-delete-modal.component';
-import { ItemVersionsSummaryModalComponent } from './versions/item-versions-summary-modal/item-versions-summary-modal.component';
+import {
+  dsDynamicFormControlMapFn
+} from '../shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component';
+import {
+  TabbedRelatedEntitiesSearchComponent
+} from './simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component';
+import {
+  ItemVersionsDeleteModalComponent
+} from './versions/item-versions-delete-modal/item-versions-delete-modal.component';
+import {
+  ItemVersionsSummaryModalComponent
+} from './versions/item-versions-summary-modal/item-versions-summary-modal.component';
 import { MetadataValuesComponent } from './field-components/metadata-values/metadata-values.component';
-import { GenericItemPageFieldComponent } from './simple/field-components/specific-field/generic/generic-item-page-field.component';
-import { MetadataRepresentationListComponent } from './simple/metadata-representation-list/metadata-representation-list.component';
+import {
+  GenericItemPageFieldComponent
+} from './simple/field-components/specific-field/generic/generic-item-page-field.component';
+import {
+  MetadataRepresentationListComponent
+} from './simple/metadata-representation-list/metadata-representation-list.component';
 import { RelatedItemsComponent } from './simple/related-items/related-items-component';
 import {
   ThemedMetadataRepresentationListComponent
 } from './simple/metadata-representation-list/themed-metadata-representation-list.component';
+import { ItemPageImgFieldComponent } from './simple/field-components/specific-field/img/item-page-img-field.component';
 
 const ENTRY_COMPONENTS = [
   ItemVersionsDeleteModalComponent,
@@ -32,6 +47,7 @@ const COMPONENTS = [
   MetadataRepresentationListComponent,
   ThemedMetadataRepresentationListComponent,
   RelatedItemsComponent,
+  ItemPageImgFieldComponent,
 ];
 
 @NgModule({
@@ -42,7 +58,8 @@ const COMPONENTS = [
     CommonModule,
     SearchModule,
     SharedModule,
-    TranslateModule
+    TranslateModule,
+    NgOptimizedImage
   ],
   exports: [
     ...COMPONENTS

src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.spec.ts

@@ -0,0 +1,85 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemPageImgFieldComponent } from './item-page-img-field.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../../../../shared/testing/translate-loader.mock';
+import { APP_CONFIG } from '../../../../../../config/app-config.interface';
+import { environment } from '../../../../../../environments/environment';
+import { BrowseDefinitionDataService } from '../../../../../core/browse/browse-definition-data.service';
+import { BrowseDefinitionDataServiceStub } from '../../../../../shared/testing/browse-definition-data-service.stub';
+import { GenericItemPageFieldComponent } from '../generic/generic-item-page-field.component';
+import { MetadataValuesComponent } from '../../../../field-components/metadata-values/metadata-values.component';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { mockItemWithMetadataFieldsAndValue } from '../item-page-field.component.spec';
+import { By } from '@angular/platform-browser';
+import { ImageField } from '../item-page-field.component';
+
+let component: ItemPageImgFieldComponent;
+let fixture: ComponentFixture<ItemPageImgFieldComponent>;
+
+const mockField = 'organization.identifier.ror';
+const mockValue = 'http://ror.org/awesome-identifier';
+const mockLabel = 'ROR label';
+const mockUrlRegex = '(.*)ror.org';
+const mockImg = {
+  URI: './assets/images/ror-icon.svg',
+  alt: 'item.page.image.alt.ROR',
+  heightVar: '--ds-item-page-img-field-ror-inline-height'
+} as ImageField;
+
+describe('ItemPageImgFieldComponent', () => {
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useClass: TranslateLoaderMock
+        }
+      })],
+      providers: [
+        { provide: APP_CONFIG, useValue: environment },
+        { provide: BrowseDefinitionDataService, useValue: BrowseDefinitionDataServiceStub }
+      ],
+      declarations: [ItemPageImgFieldComponent, GenericItemPageFieldComponent, MetadataValuesComponent],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .overrideComponent(GenericItemPageFieldComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ItemPageImgFieldComponent);
+    component = fixture.componentInstance;
+    component.item = mockItemWithMetadataFieldsAndValue([mockField], mockValue);
+    component.fields = [mockField];
+    component.label = mockLabel;
+    component.urlRegex = mockUrlRegex;
+    component.img = mockImg;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display display img tag', () => {
+    const image = fixture.debugElement.query(By.css('img.link-logo'));
+    expect(image).not.toBeNull();
+  });
+
+  it('should have right attributes', () => {
+    const image = fixture.debugElement.query(By.css('img.link-logo'));
+    expect(image.attributes.src).toEqual(mockImg.URI);
+    expect(image.attributes.alt).toEqual(mockImg.alt);
+
+    const imageEl = image.nativeElement;
+    expect(imageEl.style.height).toContain(mockImg.heightVar);
+  });
+
+  it('should have the right value', () => {
+    const imageAnchor = fixture.debugElement.query(By.css('a.link-anchor'));
+    const anchorEl = imageAnchor.nativeElement;
+    expect(anchorEl.innerHTML).toContain(mockValue);
+  });
+});

src/app/item-page/simple/field-components/specific-field/img/item-page-img-field.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input } from '@angular/core';
+import { ImageField, ItemPageFieldComponent } from '../item-page-field.component';
+import { Item } from '../../../../../core/shared/item.model';
+
+@Component({
+  selector: 'ds-item-page-img-field',
+  templateUrl: '../item-page-field.component.html'
+})
+/**
+ * Component that renders an inline image for a given field.
+ * This component uses a given {@code ImageField} configuration to correctly render the img.
+ */
+export class ItemPageImgFieldComponent extends ItemPageFieldComponent {
+
+  /**
+   * The item to display metadata for
+   */
+  @Input() item: Item;
+
+  /**
+   * Separator string between multiple values of the metadata fields defined
+   * @type {string}
+   */
+  @Input() separator: string;
+
+  /**
+   * Fields (schema.element.qualifier) used to render their values.
+   */
+  @Input() fields: string[];
+
+  /**
+   * Label i18n key for the rendered metadata
+   */
+  @Input() label: string;
+
+  /**
+   * Image Configuration
+   */
+  @Input() img: ImageField;
+
+  /**
+   * Whether any valid HTTP(S) URL should be rendered as a link
+   */
+  @Input() urlRegex?: string;
+
+}

src/app/item-page/simple/field-components/specific-field/item-page-field.component.html

@@ -6,5 +6,6 @@
     [enableMarkdown]="enableMarkdown"
     [urlRegex]="urlRegex"
     [browseDefinition]="browseDefinition|async"
+    [img]="img"
   ></ds-metadata-values>
 </div>

src/app/item-page/simple/field-components/specific-field/item-page-field.component.ts

@@ -6,6 +6,25 @@ import { BrowseDefinition } from '../../../../core/shared/browse-definition.mode
 import { BrowseDefinitionDataService } from '../../../../core/browse/browse-definition-data.service';
 import { getRemoteDataPayload } from '../../../../core/shared/operators';
 
+/**
+ * Interface that encapsulate Image configuration for this component.
+ */
+export interface ImageField {
+  /**
+   * URI that is used to retrieve the image.
+   */
+  URI: string;
+  /**
+   * i18n Key that represents the alt text to display
+   */
+  alt: string;
+  /**
+   * CSS variable that contains the height of the inline image.
+   */
+  heightVar: string;
+}
+
+
 /**
  * This component can be used to represent metadata on a simple item page.
  * It expects one input parameter of type Item to which the metadata belongs.
@@ -51,6 +70,11 @@ export class ItemPageFieldComponent {
      */
     urlRegex?: string;
 
+    /**
+     * Image Configuration
+     */
+    img: ImageField;
+
     /**
      * Return browse definition that matches any field used in this component if it is configured as a browse
      * link in dspace.cfg (webui.browse.link.<n>)

src/assets/i18n/en.json5

@@ -2510,6 +2510,8 @@
 
   "item.page.claim.tooltip": "Claim this item as profile",
 
+  "item.page.image.alt.ROR": "ROR logo",
+
   "item.preview.dc.identifier.uri": "Identifier:",
 
   "item.preview.dc.contributor.author": "Authors:",
@@ -2562,6 +2564,20 @@
 
   "item.preview.oaire.fundingStream": "Funding Stream:",
 
+  "item.preview.oairecerif.identifier.url": "URL",
+
+  "item.preview.organization.address.addressCountry": "Country",
+
+  "item.preview.organization.foundingDate": "Founding Date",
+
+  "item.preview.organization.identifier.crossrefid": "CrossRef ID",
+
+  "item.preview.organization.identifier.isni": "ISNI",
+
+  "item.preview.organization.identifier.ror": "ROR ID",
+
+  "item.preview.organization.legalName": "Legal Name",
+
   "item.select.confirm": "Confirm selected",
 
   "item.select.empty": "No items to show",
@@ -3308,6 +3324,8 @@
 
   "orgunit.page.titleprefix": "Organizational Unit: ",
 
+  "orgunit.page.ror": "ROR Identifier",
+
   "pagination.options.description": "Pagination options",
 
   "pagination.results-per-page": "Results Per Page",
@@ -4276,6 +4294,8 @@
 
   "submission.import-external.source.lcname": "Library of Congress Names",
 
+  "submission.import-external.source.ror": "Research Organization Registry (ROR)",
+
   "submission.import-external.preview.title": "Item Preview",
 
   "submission.import-external.preview.title.Publication": "Publication Preview",
@@ -4368,6 +4388,8 @@
 
   "submission.sections.describe.relationship-lookup.external-source.import-modal.head.arxiv": "Importing from arXiv",
 
+  "submission.sections.describe.relationship-lookup.external-source.import-modal.head.ror": "Import from ROR",
+
   "submission.sections.describe.relationship-lookup.external-source.import-modal.import": "Import",
 
   "submission.sections.describe.relationship-lookup.external-source.import-modal.Journal.title": "Import Remote Journal",
@@ -4390,6 +4412,12 @@
 
   "submission.sections.describe.relationship-lookup.external-source.import-modal.select": "Select a local match:",
 
+  "submission.sections.describe.relationship-lookup.external-source.import-modal.isOrgUnitOfProject.title": "Import Remote Organization",
+
+  "submission.sections.describe.relationship-lookup.external-source.import-modal.isOrgUnitOfProject.added.local-entity": "Successfully added local organization to the selection",
+
+  "submission.sections.describe.relationship-lookup.external-source.import-modal.isOrgUnitOfProject.added.new-entity": "Successfully imported and added external organization to the selection",
+
   "submission.sections.describe.relationship-lookup.search-tab.deselect-all": "Deselect all",
 
   "submission.sections.describe.relationship-lookup.search-tab.deselect-page": "Deselect page",
@@ -4446,6 +4474,8 @@
 
   "submission.sections.describe.relationship-lookup.search-tab.tab-title.arxiv": "arXiv ({{ count }})",
 
+  "submission.sections.describe.relationship-lookup.search-tab.tab-title.ror": "ROR ({{ count }})",
+
   "submission.sections.describe.relationship-lookup.search-tab.tab-title.orcidWorks": "ORCID ({{ count }})",
 
   "submission.sections.describe.relationship-lookup.search-tab.tab-title.crossref": "CrossRef ({{ count }})",
@@ -4470,6 +4500,8 @@
 
   "submission.sections.describe.relationship-lookup.search-tab.tab-title.isPublicationOfAuthor": "Publication of the Author",
 
+  "submission.sections.describe.relationship-lookup.search-tab.tab-title.isOrgUnitOfProject": "OrgUnit of the Project",
+
   "submission.sections.describe.relationship-lookup.selection-tab.title.openAIREFunding": "Funding OpenAIRE API",
 
   "submission.sections.describe.relationship-lookup.selection-tab.title.isProjectOfPublication": "Project",
@@ -4518,6 +4550,8 @@
 
   "submission.sections.describe.relationship-lookup.title.isPublicationOfAuthor": "Publication",
 
+  "submission.sections.describe.relationship-lookup.title.isOrgUnitOfProject": "OrgUnit",
+
   "submission.sections.describe.relationship-lookup.search-tab.toggle-dropdown": "Toggle dropdown",
 
   "submission.sections.describe.relationship-lookup.selection-tab.settings": "Settings",
@@ -4580,6 +4614,8 @@
 
   "submission.sections.describe.relationship-lookup.selection-tab.title.wos": "Search Results",
 
+  "submission.sections.describe.relationship-lookup.selection-tab.title.ror": "Search Results",
+
   "submission.sections.describe.relationship-lookup.selection-tab.title": "Search Results",
 
   "submission.sections.describe.relationship-lookup.name-variant.notification.content": "Would you like to save \"{{ value }}\" as a name variant for this person so you and others can reuse it for future submissions? If you don't you can still use it for this submission.",
@@ -5052,6 +5088,8 @@
 
   "supervision.search.results.head": "Workflow and Workspace tasks",
 
+  "orgunit.search.results.head": "Organizational Unit Search Results",
+
   "workflow-item.edit.breadcrumbs": "Edit workflowitem",
 
   "workflow-item.edit.title": "Edit workflowitem",

src/assets/images/ror-icon.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" version="1.1"
+     viewBox="0 0 156 111" width="100%"
+     xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
+>
+    <g transform="matrix(1,0,0,1,-4.945,-4.16)">
+        <path d="M68.65,4.16L56.52,22.74L44.38,4.16L68.65,4.16Z" style="fill:rgb(83,186,161);fill-rule:nonzero;"/>
+      <path d="M119.41,4.16L107.28,22.74L95.14,4.16L119.41,4.16Z" style="fill:rgb(83,186,161);fill-rule:nonzero;"/>
+      <path d="M44.38,115.47L56.52,96.88L68.65,115.47L44.38,115.47Z" style="fill:rgb(83,186,161);fill-rule:nonzero;"/>
+      <path d="M95.14,115.47L107.28,96.88L119.41,115.47L95.14,115.47Z" style="fill:rgb(83,186,161);fill-rule:nonzero;"/>
+      <path
+        d="M145.53,63.71C149.83,62.91 153.1,61 155.33,57.99C157.57,54.98 158.68,51.32 158.68,47.03C158.68,43.47 158.06,40.51 156.83,38.13C155.6,35.75 153.93,33.86 151.84,32.45C149.75,31.05 147.31,30.04 144.53,29.44C141.75,28.84 138.81,28.54 135.72,28.54L112.16,28.54L112.16,47.37C111.97,46.82 111.77,46.28 111.55,45.74C109.92,41.79 107.64,38.42 104.71,35.64C101.78,32.86 98.32,30.72 94.3,29.23C90.29,27.74 85.9,26.99 81.14,26.99C76.38,26.99 72,27.74 67.98,29.23C63.97,30.72 60.5,32.86 57.57,35.64C54.95,38.13 52.85,41.1 51.27,44.54C51.04,42.07 50.46,39.93 49.53,38.13C48.3,35.75 46.63,33.86 44.54,32.45C42.45,31.05 40.01,30.04 37.23,29.44C34.45,28.84 31.51,28.54 28.42,28.54L4.87,28.54L4.87,89.42L18.28,89.42L18.28,65.08L24.9,65.08L37.63,89.42L53.71,89.42L38.24,63.71C42.54,62.91 45.81,61 48.04,57.99C48.14,57.85 48.23,57.7 48.33,57.56C48.31,58.03 48.3,58.5 48.3,58.98C48.3,63.85 49.12,68.27 50.75,72.22C52.38,76.17 54.66,79.54 57.59,82.32C60.51,85.1 63.98,87.24 68,88.73C72.01,90.22 76.4,90.97 81.16,90.97C85.92,90.97 90.3,90.22 94.32,88.73C98.33,87.24 101.8,85.1 104.73,82.32C107.65,79.54 109.93,76.17 111.57,72.22C111.79,71.69 111.99,71.14 112.18,70.59L112.18,89.42L125.59,89.42L125.59,65.08L132.21,65.08L144.94,89.42L161.02,89.42L145.53,63.71ZM36.39,50.81C35.67,51.73 34.77,52.4 33.68,52.83C32.59,53.26 31.37,53.52 30.03,53.6C28.68,53.69 27.41,53.73 26.2,53.73L18.29,53.73L18.29,39.89L27.06,39.89C28.26,39.89 29.5,39.98 30.76,40.15C32.02,40.32 33.14,40.65 34.11,41.14C35.08,41.63 35.89,42.33 36.52,43.25C37.15,44.17 37.47,45.4 37.47,46.95C37.47,48.6 37.11,49.89 36.39,50.81ZM98.74,66.85C97.85,69.23 96.58,71.29 94.91,73.04C93.25,74.79 91.26,76.15 88.93,77.13C86.61,78.11 84.01,78.59 81.15,78.59C78.28,78.59 75.69,78.1 73.37,77.13C71.05,76.16 69.06,74.79 67.39,73.04C65.73,71.29 64.45,69.23 63.56,66.85C62.67,64.47 62.23,61.85 62.23,58.98C62.23,56.17 62.67,53.56 63.56,51.15C64.45,48.74 65.72,46.67 67.39,44.92C69.05,43.17 71.04,41.81 73.37,40.83C75.69,39.86 78.28,39.37 81.15,39.37C84.02,39.37 86.61,39.86 88.93,40.83C91.25,41.8 93.24,43.17 94.91,44.92C96.57,46.67 97.85,48.75 98.74,51.15C99.63,53.56 100.07,56.17 100.07,58.98C100.07,61.85 99.63,64.47 98.74,66.85ZM143.68,50.81C142.96,51.73 142.06,52.4 140.97,52.83C139.88,53.26 138.66,53.52 137.32,53.6C135.97,53.69 134.7,53.73 133.49,53.73L125.58,53.73L125.58,39.89L134.35,39.89C135.55,39.89 136.79,39.98 138.05,40.15C139.31,40.32 140.43,40.65 141.4,41.14C142.37,41.63 143.18,42.33 143.81,43.25C144.44,44.17 144.76,45.4 144.76,46.95C144.76,48.6 144.4,49.89 143.68,50.81Z"
+        style="fill:rgb(32,40,38);fill-rule:nonzero;"/>
+    </g>
+</svg>

src/styles/_custom_variables.scss

@@ -105,4 +105,7 @@
 
   --ds-comcol-logo-max-width: 500px;
   --ds-comcol-logo-max-height: 500px;
+
+  --ds-item-page-img-field-default-inline-height: 24px;
+
 }

src/themes/dspace/styles/_theme_css_variable_overrides.scss

@@ -7,5 +7,7 @@
   --ds-home-news-link-color: #{$green};
   --ds-home-news-link-hover-color: #{darken($green, 15%)};
   --ds-header-navbar-border-bottom-color: #{$green};
+  --ds-item-page-img-field-default-inline-height: 24px;
+  --ds-item-page-img-field-ror-inline-height: var(--ds-item-page-img-field-default-inline-height);
 }