few improvements

README.md

@@ -50,19 +50,19 @@ A few files needs to be imported in the page before the component is attempted t
 <script type="module" src="pdbe-interactions-component-0.1.0.js"></script>
 ```
 
-**A) Ligand interactions**
+#### A) Ligand interactions
 
 ```html
 <pdb-interactions pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></pdb-interactions>
 ```
 
-**B) Bound molecule interactions**
+#### B) Bound molecule interactions
 
 ```html
 <pdb-interactions pdb-id="3d12" bound-molecule-id="bm1"></pdb-interactions>
 ```
 
-**C) Ligand/chemical component**
+#### C) Ligand/chemical component
 
 ```html
 <pdb-interactions pdb-res-name="CLR" zoom-on ></pdb-interactions>
@@ -115,15 +115,27 @@ and then the component can be instantiated as simply as:
 
 ```javascript
 let component = document.getElementById('SIA-component');
+let uiParams = {
+    reinitialize: true, // allow reinitialize option in the component menu
+    zoom: true, // allow scene zoom
+    fullScreen: true, // allow allow full screen option in the component menu
+    downloadImage: true, // allow image download from  the component menu
+    downloadData: true, // allow interactions data download from compoment menu
+    center: true, // allow scene centering option from the component menu
+    help: false, // allow help option from the component menu
+    residueLabel: true, // show residue label
+    tooltip: true // show residue tooltip on mouse hover
+};
+
 this.display = new Visualization(this, uiParams);
 
 // to display bound molecule interactions
-this.display.initBoundMoleculeInteractions('3d12', 'bm1'
+this.display.initBoundMoleculeInteractions('3d12', 'bm1');
 // to display ligand interactions
 this.display.initLigandInteractions('1cbs', 200, 'A');
 
 // to display chemical component only
-this.display.initLigandDisplay('HEM').then(() => this.display.centerScene());
+this.display.initLigandDisplay('HEM');
 ````
 
 ## Parameters

gulpfile.js

@@ -10,13 +10,13 @@ const PKG_JSON = require(path.join(PACKAGE_ROOT_PATH, "package.json"));
 const banner = ['/**',
   ` * ${PKG_JSON.name}`,
   ` * @version ${PKG_JSON.version}`,
-  ' * @link https://github.com/PDBeurope/pdbe-molstar',
+  ' * @link https://gitlab.ebi.ac.uk/pdbe/web-components/interactions',
   ' * @license Apache 2.0',
   ' */',
   ''].join('\n');
 
   const license = ['/**',
-  ' * Copyright 2019-2020 Mandar Deshpande <mandar@ebi.ac.uk>',
+  ' * Copyright 2019-2020 Lukas Pravda <lpravda@ebi.ac.uk>',
   ' * European Bioinformatics Institute (EBI, http://www.ebi.ac.uk/)',
   ' * European Molecular Biology Laboratory (EMBL, http://www.embl.de/)',
   ' * Licensed under the Apache License, Version 2.0 (the "License");',

src/plugin/manager.ts

@@ -197,7 +197,8 @@ class Visualization {
 
         return d3.json(ligandUrl)
             .catch(e => this.processError(e, `Depiction ${ligandId} not found`))
-            .then((d: any) => this.addDepiction(d));
+            .then((d: any) => this.addDepiction(d))
+            .then(() => this.centerScene());
     }
 
 
@@ -294,6 +295,17 @@ class Visualization {
 
     // #region menu functions
     public saveSvg() {
+        //let css = new Array<string>();
+        
+        for (const key in document.styleSheets) {
+            console.log(key);
+            console.log(document.styleSheets[key]);
+            let rules = (document.styleSheets[key] as CSSStyleSheet).cssRules
+            for (const rule in rules) {
+                console.log(rules[rule].cssText);
+            }
+        }
+
         d3.text(Resources.componentSvgCss)
             .then(x => {
                 let svgData = `