Package into web component

package-lock.json

@@ -373,6 +373,11 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.0.7.tgz",
       "integrity": "sha512-E9XZH5Dl+9MWG3MDC6wrKllhA8Rljpz66HOIeqKv2fHPed8kzuJZU3WJWLtbhDAXFwtGTyTZ4c82ZLSmqwTorg=="
     },
+    "@angular/elements": {
+      "version": "9.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/elements/-/elements-9.0.7.tgz",
+      "integrity": "sha512-y4HXXgfkof4yx3ZdNef53wMDKYvUcvgV0EiNyDZ5B+lmWz/o+xliTccJkZrdDacUTF/0Gr4SxeMN8ftbJF6erw=="
+    },
     "@angular/forms": {
       "version": "9.0.7",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.0.7.tgz",
@@ -4146,6 +4151,11 @@
         "buffer-indexof": "^1.0.0"
       }
     },
+    "document-register-element": {
+      "version": "1.14.10",
+      "resolved": "https://registry.npmjs.org/document-register-element/-/document-register-element-1.14.10.tgz",
+      "integrity": "sha512-w5UA37hEIrs+9pruo2yR5UD13c4UHDlkqqjt4qurnp7QsBI9b1IOi8WXUim+aCqKBsENX3Z/cso7XMOuwJH1Yw=="
+    },
     "dom-serialize": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",

package.json

@@ -16,6 +16,7 @@
     "@angular/common": "~9.0.2",
     "@angular/compiler": "~9.0.2",
     "@angular/core": "~9.0.2",
+    "@angular/elements": "^9.0.7",
     "@angular/forms": "~9.0.2",
     "@angular/localize": "^9.1.0",
     "@angular/platform-browser": "~9.0.2",
@@ -28,6 +29,7 @@
     "bulma": "^0.8.1",
     "bulma-toast": "^1.5.4",
     "bulma-tooltip": "^3.0.2",
+    "document-register-element": "^1.7.2",
     "html2canvas": "^1.0.0-rc.5",
     "primeicons": "^2.0.0",
     "primeng": "^9.0.5",

src/app/app-routing.module.ts

-import {NgModule} from '@angular/core';
-import {Routes, RouterModule} from '@angular/router';
-import {ExplorerPageComponent} from './pages/explorer-page/explorer-page.component';
-import {AboutPageComponent} from './pages/about-page/about-page.component';
-import {HomePageComponent} from './pages/home-page/home-page.component';
-import {CitationPageComponent} from './pages/citation-page/citation-page.component';
-
-export const routes: Routes = [
-  {path: '', component: HomePageComponent},
-  {path: 'explorer', component: ExplorerPageComponent},
-  {path: 'explorer/:protein', component: ExplorerPageComponent},
-  {path: 'cite', component: CitationPageComponent},
-  {path: 'about', component: AboutPageComponent}
-];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {
-}

src/app/app.component.html

-<div class="container is-fluid">
-  <nav class="navbar" role="navigation" aria-label="main navigation">
-    <div class="navbar-brand">
-      <img routerLink="/" src="assets/covex_logo.png" class="menu-icon is-hoverable navbar-item logo" alt="logo"/>
-      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" (click)="toggleMobileMenu()">
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
-      </a>
-    </div>
-
-    <div class="navbar-menu" [class.is-active]="mobileWindowExpanded">
-      <div class="navbar-start">
-        <a routerLink="/" routerLinkActive="is-active" [routerLinkActiveOptions]="{exact: true}" class="navbar-item is-hoverable">
-          <span class="icon"><i class="fa fa-home"></i></span>
-          <span>Home</span>
-        </a>
-        <a routerLink="/explorer" routerLinkActive="is-active" class="navbar-item is-hoverable">
-          <span class="icon"><i class="fa fa-project-diagram"></i></span>
-          <span>Explorer</span>
-        </a>
-        <a routerLink="/cite" routerLinkActive="is-active" class="navbar-item is-hoverable">
-          <span class="icon"><i class="fa fa-feather"></i></span>
-          <span>Cite</span>
-        </a>
-        <a routerLink="/about" routerLinkActive="is-active" class="navbar-item is-hoverable">
-          <span class="icon"><i class="fa fa-question"></i></span>
-          <span>About</span>
-        </a>
-      </div>
-      <div class="navbar-end">
-        <div class="navbar-item">
-          <div class="field is-grouped">
-            <p class="control">
-               Version 1.1
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nav>
-</div>
-
-<main>
-  <router-outlet></router-outlet>
-</main>

src/app/app.component.ts

 import {Component, Injector} from '@angular/core';
-import {ExplorerPageComponent} from "./pages/explorer-page/explorer-page.component";
-import {createCustomElement}  from '@angular/elements';
-
-
+import {ExplorerPageComponent} from './pages/explorer-page/explorer-page.component';
+import {createCustomElement} from '@angular/elements';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  template: `<div></div>`,
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   mobileWindowExpanded = false;
 
-  public toggleMobileMenu() {
-    this.mobileWindowExpanded = !this.mobileWindowExpanded;
-  }
-
-
-
   constructor(injector: Injector) {
     // Convert `PopupComponent` to a custom element.
-    const PopupElement = createCustomElement(ExplorerPageComponent, {injector});
+    const NetworkExpander = createCustomElement(ExplorerPageComponent, {injector});
     // Register the custom element with the browser.
-    customElements.define('explorer-element', PopupElement);
+    customElements.define('explorer-element', NetworkExpander);
   }
 
-}
-
-
-
-
-
+  public toggleMobileMenu() {
+    this.mobileWindowExpanded = !this.mobileWindowExpanded;
+  }
 
+}

src/app/app.module.ts

@@ -8,10 +8,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {TableModule} from 'primeng/table';
 
 import {AppComponent} from './app.component';
-import {AppRoutingModule} from './app-routing.module';
 import {ExplorerPageComponent} from './pages/explorer-page/explorer-page.component';
-import {AboutPageComponent} from './pages/about-page/about-page.component';
-import {HomePageComponent} from './pages/home-page/home-page.component';
 import {QueryTileComponent} from './components/query-tile/query-tile.component';
 import {LaunchAnalysisComponent} from './dialogs/launch-analysis/launch-analysis.component';
 import {DatasetTileComponent} from './components/dataset-tile/dataset-tile.component';
@@ -22,7 +19,6 @@ import {InfoTileComponent} from './components/info-tile/info-tile.component';
 import {CustomProteinsComponent} from './dialogs/custom-proteins/custom-proteins.component';
 
 import {AnalysisService} from './analysis.service';
-import { CitationPageComponent } from './pages/citation-page/citation-page.component';
 import { AddExpressedProteinsComponent } from './dialogs/add-expressed-proteins/add-expressed-proteins.component';
 
 
@@ -30,8 +26,6 @@ import { AddExpressedProteinsComponent } from './dialogs/add-expressed-proteins/
   declarations: [
     AppComponent,
     ExplorerPageComponent,
-    AboutPageComponent,
-    HomePageComponent,
     QueryTileComponent,
     LaunchAnalysisComponent,
     DatasetTileComponent,
@@ -40,12 +34,10 @@ import { AddExpressedProteinsComponent } from './dialogs/add-expressed-proteins/
     ToggleComponent,
     InfoTileComponent,
     CustomProteinsComponent,
-    CitationPageComponent,
     AddExpressedProteinsComponent,
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule,
     NgSelectModule,
     FormsModule,
     CommonModule,

src/app/pages/about-page/about-page.component.html

-<div class="scroll">
-  <div class="content">
-    <section class="hero is-primary">
-      <div class="hero-body">
-        <div class="container">
-          <h1 class="title">About CoVex</h1>
-        </div>
-      </div>
-    </section>
-
-    <div class="hero container">
-      <div class="column is-8 is-offset-2">
-        <div class="container has-text-centered">
-          <img src="assets/covex_logo.png">
-          <h2 class="subtitle is-3"> A Coronavirus Explorer </h2>
-        </div>
-        <div class="content">
-          <p>
-            <br>
-            CoVex (Coronavirus Explorer) is a unique online network and systems medicine platform for data analysis that
-            integrates virus-human interactions for SARS-CoV-2 and SARS-CoV-1. It implements different network-based
-            approaches for the identification of new drug targets and new repurposable drugs.<br>
-            <br>
-            For instructions and help check the documentation:
-            <a href="https://docs.google.com/document/d/1_SRnIx_UC8FR59rMyrf_r45fCIt3naP4t1qefYNp9vk">CoVex Documentation</a><br>
-            <br>
-            We are constantly updating and integrating new data as it becomes available.
-            <br>
-            If you are interested to make your virus-human interactome data available via our platform, please contact
-            us.
-          </p>
-          <h2 class="subtitle">Read our blog</h2>
-          <p>
-            For detailed information on CoVex and the development process please visit our blog:
-          </p>
-          <ul>
-            <li><a href="https://www.exbio.de/exbio-vs-covid-part-1/">ExBio vs Covid - Part 1</a></li>
-            <li><a href="https://www.exbio.de/exbio-vs-covid-part-2/">ExBio vs Covid - Part 2</a></li>
-          </ul>
-          <h2 class="subtitle">General workflow of the platform</h2>
-          <ol>
-            <li>Select the viral interaction dataset (SARS-CoV1-Pfefferle, SARS-CoV1-VirHostNet, SARS-CoV2-Gordon).</li>
-            <li>Select proteins of interest as seed proteins.</li>
-            <li>Perform network analysis (multi-Steiner, TrustRank, KeyPathwayMiner, closeness centrality).</li>
-            <li>Platform usage: basic and advanced options</li>
-            <li>Inspect the resulting subnetworks.</li>
-            <li>Find drugs associated with the subnetwork (TrustRank, closeness centrality).</li>
-            <li>Download your results.</li>
-          </ol>
-          <p>CoVex also provides a quick analysis option to perform steps 3 to 5 (starting from the seed proteins) to
-            return
-            a list of drugs ranked by default using TrustRank.</p>
-          <h2>Help/Contact information</h2>
-          <ul>
-            <li>General support and inquiries: CoVex dev team (covex_AT_wzw.tum.de)</li>
-            <li>Systems and network medicine: Sepideh Sadegh (sadegh_AT_wzw.tum.de)</li>
-            <li>Web platform: Julian Matschinske (julian.matschinske_AT_wzw.tum.de)</li>
-            <li>Project coordination: Prof. Dr. Jan Baumbach (jan.baumbach_AT_wzw.tum.de)</li>
-            <li>Lab website: <a href="http://www.exbio.de">http://www.exbio.de</a></li>
-          </ul>
-
-          <br>
-          <br>
-
-          <div class="has-text-centered">
-            <h2 class="subtitle"> Impressum</h2>
-            <p>Prof. Dr. Jan Baumbach
-              Chair of Experimental Bioinformatics
-              <br>
-              <i class="fa fa-phone"></i> Phone: +49-8161-71-2136<br>
-              <i class="fa fa-phone"></i> Fax: +49-8161-71-2186<br>
-              <i class="fa fa-envelope"> </i> Email: exbio_AT_wzw.tum.de<br>
-              <i class="fa fa-map-marker"></i> Address: ​​​Prof. Dr. Jan Baumbach
-              <br>
-              Chair of Experimental Bioinformatics
-              <br>
-              TUM School of Life Sciences Weihenstephan
-              <br>
-              Technical University of Munich<br>
-              Maximus-von-Imhof-Forum 3<br>
-              85354 Freising<br>
-              Germany </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-
-

src/app/pages/about-page/about-page.component.scss

-i {
-  width: 30px;
-}
-
-div.scroll{
-  overflow: auto;
-  height: calc(100vh - 70px);
-}
-
-iframe {
-  margin-bottom: 100px;
-  max-width: 100%;
-}

src/app/pages/about-page/about-page.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-about-page',
-  templateUrl: './about-page.component.html',
-  styleUrls: ['./about-page.component.scss']
-})
-export class AboutPageComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/app/pages/citation-page/citation-page.component.html

-<div class="scroll">
-  <div class="content">
-    <section class="hero is-primary">
-      <div class="hero-body">
-        <div class="container">
-          <h1 class="title">Cite CoVex</h1>
-        </div>
-      </div>
-    </section>
-
-    <div class="hero container">
-      <div class="column is-8 is-offset-2">
-        <div class="content">
-          <h2>Citation</h2>
-          <p>
-            If you use CoVex in your work please reference it as follows:
-          </p>
-          <pre>{{"@Article{Sadegh2020,"}}
-{{"author={Sadegh, Sepideh and Matschinske, Julian and Blumenthal, David B. and Galindez, Gihanna and Kacprowski, Tim and List, Markus and Nasirigerdeh, Reza and Oubounyt, Mhaned and Pichlmair, Andreas and Rose, Tim Daniel and Salgado-Albarr{\'a}n, Marisol and Sp{\"a}th, Julian and Stukalov, Alexey and Wenke, Nina K. and Yuan, Kevin and Pauling, Josch K. and Baumbach, Jan},"}}
-{{"title={Exploring the SARS-CoV-2 virus-host-drug interactome for drug repurposing},"}}
-{{"journal={Nature Communications},"}}
-{{"year={2020},"}}
-{{"month={Jul},"}}
-{{"day={14},"}}
-{{"volume={11},"}}
-{{"number={1},"}}
-{{"pages={3518},"}}
-{{"issn={2041-1723},"}}
-{{"doi={10.1038/s41467-020-17189-2},"}}
-{{"url={https://doi.org/10.1038/s41467-020-17189-2}"}}
-{{"}"}}</pre>
-
-          Paper URL: <a href="https://www.nature.com/articles/s41467-020-17189-2">https://www.nature.com/articles/s41467-020-17189-2</a>
-
-          <h2>Source code</h2>
-          <p>
-            The source code is available upon request: julian.matschinske_AT_wzw.tum.de
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-
-

src/app/pages/citation-page/citation-page.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-citation-page',
-  templateUrl: './citation-page.component.html',
-  styleUrls: ['./citation-page.component.scss']
-})
-export class CitationPageComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/pages/explorer-page/explorer-page.component.html

-<div class="is-hidden-mobile">
+<div class="is-hidden-mobile" [style.color]="textColor">
   <app-launch-analysis [(show)]="showAnalysisDialog"
                        [target]="analysisDialogTarget"
                        [dataset]="selectedDataset">

src/app/pages/explorer-page/explorer-page.component.ts

 import {
   AfterViewInit,
   Component,
-  ElementRef,
+  ElementRef, Input,
   OnInit,
   ViewChild
 } from '@angular/core';
@@ -75,6 +75,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
   public expressionExpanded = false;
   public selectedTissue: Tissue | null = null;
 
+  @Input()
+  public textColor = 'red';
+
   public datasetItems: Dataset[] = [
     {
       label: 'SARS-CoV-2 (Gordon et al.)',

src/app/pages/home-page/home-page.component.html

-<!--htmlhint inline-style-disabled:false -->
-<div class="content landing scroll">
-  <div class="container has-text-centered">
-    <div class="column">
-      <div class="logo-box is-hidden-mobile">
-        <img src="assets/covex_logo.png" style="height: 233px; width: 600px">
-      </div>
-
-      <div class="video-container">
-        <div class="has-text-centered video-box">
-          <iframe width="560" height="315" src="https://www.youtube.com/embed/yK1rbFi5wW0" frameborder="0"
-                  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
-          </iframe>
-        </div>
-        <div class="has-text-centered video-box">
-          <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/H9pbYQFlt6U" frameborder="0"
-                  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
-          </iframe>
-        </div>
-      </div>
-
-      <div class="button-box is-hidden-mobile">
-        <button class="button has-text-info is-large is-rounded">
-          <a routerLink="/explorer" routerLinkActive="is-active">
-            <span class="icon"><i class="fa fa-project-diagram has-text-info"></i></span>
-            <span>Start App</span>
-          </a>
-        </button>
-      </div>
-
-      <div class="button-box is-hidden-tablet">
-        <button class="button has-text-info is-large is-rounded">
-          <a routerLink="/explorer" routerLinkActive="is-active">
-            <span class="icon"><i class="fa fa-project-diagram has-text-info"></i></span>
-            <span>Open Desktop App</span>
-          </a>
-        </button>
-      </div>
-
-      <div class="text-box is-hidden-mobile">
-        <h1 class="subtitle is-3">
-          Explore the virus-host interactome
-        </h1>
-        <h1 class="subtitle is-3">
-          Find putative drug targets
-        </h1>
-        <h1 class="subtitle is-3">
-          Repurpose drugs
-        </h1>
-        <h1 class="subtitle is-3">
-          All in one web-tool
-        </h1>
-      </div>
-    </div>
-  </div>
-</div>

src/app/pages/home-page/home-page.component.scss

-img {
-  padding: 30px;
-  background-color: rgba(255, 255, 255, 0.7);
-  border-radius: 25px;
-}
-
-div.scroll {
-  overflow: auto;
-  height: calc(100vh - 60px);
-}
-
-.logo-box {
-  maring-top: 20px;
-  maring-bottom: 20px;
-}
-
-.text-box {
-  .subtitle {
-    color: #c8c8c8;
-  }
-}
-
-.button-box {
-  maring-top: 40px;
-  margin-bottom: 40px;
-}
-
-.video-container {
-  margin-top: 40px;
-  margin-bottom: 40px;
-
-  .video-box {
-    display: inline-block;
-    width: 100%;
-    max-width: 560px;
-    margin: 5px;
-
-    iframe {
-      max-width: 100%;
-    }
-  }
-}

src/app/pages/home-page/home-page.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-home-page',
-  templateUrl: './home-page.component.html',
-  styleUrls: ['./home-page.component.scss']
-})
-export class HomePageComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/assets/positions/network-VirHostNetSARS-CoV1.json

-{"p_P68104":{"x":0,"y":0},"p_P49069":{"x":-155,"y":44},"p_O00303":{"x":-47,"y":-490},"p_Q9BYF1":{"x":-287,"y":-48},"p_Q92843":{"x":298,"y":-141},"p_P50583":{"x":336,"y":-10},"p_Q07817":{"x":-27,"y":-228},"p_Q16548":{"x":-105,"y":-169},"p_P10415":{"x":-161,"y":-66},"p_P62258":{"x":84,"y":589},"p_Q03135":{"x":-261,"y":348},"p_Q13561":{"x":234,"y":414},"p_P02768":{"x":515,"y":296},"p_O14920":{"x":201,"y":52},"p_P25685":{"x":138,"y":-75},"p_Q5TBA9":{"x":-73,"y":160},"p_Q92499":{"x":-286,"y":74},"p_Q99873":{"x":-25,"y":-321},"p_P28340":{"x":102,"y":-250},"p_P62879":{"x":-189,"y":158},"p_P00403":{"x":-317,"y":-146},"v_E_SARS-CoV1":{"x":-265,"y":-319},"v_M_SARS-CoV1":{"x":29,"y":236},"v_N_SARS-CoV1":{"x":182,"y":-175},"v_NSP14_SARS-CoV1":{"x":-74,"y":-69},"v_ORF3A_SARS-CoV1":{"x":-12,"y":360},"v_ORF3B_SARS-CoV1":{"x":301,"y":172},"v_ORF6_SARS-CoV1":{"x":175,"y":173},"v_ORF7A_SARS-CoV1":{"x":84,"y":-5},"v_ORF7B_SARS-CoV1":{"x":78,"y":120},"v_S_SARS-CoV1":{"x":-174,"y":-273}}
+{
+  "p_P68104": {
+    "x": 0,
+    "y": 0
+  },
+  "p_P49069": {
+    "x": -155,
+    "y": 44
+  },
+  "p_O00303": {
+    "x": -47,
+    "y": -490
+  },
+  "p_Q9BYF1": {
+    "x": -287,
+    "y": -48
+  },
+  "p_Q92843": {
+    "x": 298,
+    "y": -141
+  },
+  "p_P50583": {
+    "x": 336,
+    "y": -10
+  },
+  "p_Q07817": {
+    "x": -27,
+    "y": -228
+  },
+  "p_Q16548": {
+    "x": -105,
+    "y": -169
+  },
+  "p_P10415": {
+    "x": -161,
+    "y": -66
+  },
+  "p_P62258": {
+    "x": 84,
+    "y": 589
+  },
+  "p_Q03135": {
+    "x": -261,
+    "y": 348
+  },
+  "p_Q13561": {
+    "x": 234,
+    "y": 414
+  },
+  "p_P02768": {
+    "x": 515,
+    "y": 296
+  },
+  "p_O14920": {
+    "x": 201,
+    "y": 52
+  },
+  "p_P25685": {
+    "x": 138,
+    "y": -75
+  },
+  "p_Q5TBA9": {
+    "x": -73,
+    "y": 160
+  },
+  "p_Q92499": {
+    "x": -286,
+    "y": 74
+  },
+  "p_Q99873": {
+    "x": -25,
+    "y": -321
+  },
+  "p_P28340": {
+    "x": 102,
+    "y": -250
+  },
+  "p_P62879": {
+    "x": -189,
+    "y": 158
+  },
+  "p_P00403": {
+    "x": -317,
+    "y": -146
+  },
+  "v_E_SARS-CoV1": {
+    "x": -265,
+    "y": -319
+  },
+  "v_M_SARS-CoV1": {
+    "x": 29,
+    "y": 236
+  },
+  "v_N_SARS-CoV1": {
+    "x": 182,
+    "y": -175
+  },
+  "v_NSP14_SARS-CoV1": {
+    "x": -74,
+    "y": -69
+  },
+  "v_ORF3A_SARS-CoV1": {
+    "x": -12,
+    "y": 360
+  },
+  "v_ORF3B_SARS-CoV1": {
+    "x": 301,
+    "y": 172
+  },
+  "v_ORF6_SARS-CoV1": {
+    "x": 175,
+    "y": 173
+  },
+  "v_ORF7A_SARS-CoV1": {
+    "x": 84,
+    "y": -5
+  },
+  "v_ORF7B_SARS-CoV1": {
+    "x": 78,
+    "y": 120
+  },
+  "v_S_SARS-CoV1": {
+    "x": -174,
+    "y": -273
+  }
+}

src/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>CoVex</title>
-  <base href="/">
+  <base href="/frontend/dist/covid19/">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" type="image/ico" href="assets/covex_logo_small.png">
   <script src="https://kit.fontawesome.com/3ad4fe992f.js" crossorigin="anonymous"></script>

src/polyfills.ts

@@ -65,3 +65,4 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
+import 'document-register-element';