Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Open sidebar
pdbe
web-components
pdb-ligand-env
Commits
8e460b10
Commit
8e460b10
authored
Feb 15, 2021
by
Lukas Pravda
Browse files
make demo working
parent
766cfbcd
Changes
6
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
13202 additions
and
112 deletions
+13202
-112
README.md
README.md
+5
-4
demo/demo_component.html
demo/demo_component.html
+38
-37
demo/demo_plugin.html
demo/demo_plugin.html
+45
-45
gulpfile.js
gulpfile.js
+7
-1
package-lock.json
package-lock.json
+13101
-19
src/plugin/ui.ts
src/plugin/ui.ts
+6
-6
No files found.
README.md
View file @
8e460b10
...
...
@@ -5,10 +5,11 @@ This is a web-component to display ligand structure in 2D along with its interac
## Step after cloning (use local server to see demo pages)
```
shell
npm run-script build
cp
demo/demo
*
build/
(
this copies demo_component.html and demo_plugin.html to build folder
)
cd
build
python3
-m
http.server
npm run
install
npm run build
npm run start
open any of the
*
.html pages
in
the demo directory
```
## Component modes
...
...
demo/demo_component.html
View file @
8e460b10
<!doctype html>
<html
lang=
"en"
>
<head>
<script
src=
"https://d3js.org/d3.v5.min.js"
></script>
<!-- CSS style to be used for scene drawing (required for saving SVGs.) -->
<link
rel=
"stylesheet"
href=
"pdb-ligand-env-svg.css"
/>
<!-- UI icons -->
<link
rel=
"stylesheet"
href=
"https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css"
/>
<!-- Web component polyfill (only loads what it needs) -->
<script
src=
"https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js"
charset=
"utf-8"
></script>
<script
src=
"https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
charset=
"utf-8"
></script>
<!--PDBe interactions component-->
<script
type=
"module"
src=
"pdb-ligand-env-component-0.3.0-min.js"
></script>
</head>
<body>
<!--Mode A-->
<div
style=
"position: relative; float: left;"
>
<div
style=
"width: 500px; height: 500px; position: relative"
>
<pdb-ligand-env
pdb-id=
"1cbs"
pdb-res-id=
"200"
pdb-chain-id=
"A"
></pdb-ligand-env>
</div>
<head>
<script
src=
"https://d3js.org/d3.v5.min.js"
></script>
<!-- CSS style to be used for scene drawing (required for saving SVGs.) -->
<link
rel=
"stylesheet"
href=
"http://127.0.0.1:8080/pdb-ligand-env-svg.css"
/>
<!-- UI icons -->
<link
rel=
"stylesheet"
href=
"https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css"
/>
<!-- Web component polyfill (only loads what it needs) -->
<script
src=
"https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js"
charset=
"utf-8"
>
</script>
<script
src=
"https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
charset=
"utf-8"
></script>
<!--PDBe interactions component-->
<script
type=
"module"
src=
"http://127.0.0.1:8080/pdb-ligand-env-component-0.3.0-min.js"
></script>
</head>
<body>
<!--Mode A-->
<div
style=
"position: relative; float: left;"
>
<div
style=
"width: 500px; height: 500px; position: relative"
>
<pdb-ligand-env
pdb-id=
"1cbs"
pdb-res-id=
"200"
pdb-chain-id=
"A"
></pdb-ligand-env>
</div>
</div>
<!--Mode B-->
<div
style=
"position: relative; float: left;"
>
<div
style=
"width: 500px; height: 500px; position: relative"
>
<pdb-ligand-env
pdb-id=
"3d12"
bound-molecule-id=
"bm1"
></pdb-ligand-env>
</div>
</div>
<!--Mode B-->
<div
style=
"position: relative; float: left;"
>
<div
style=
"width: 500px; height: 500px; position: relative"
>
<pdb-ligand-env
pdb-id=
"3d12"
bound-molecule-id=
"bm1"
></pdb-ligand-env>
</div>
<!--Mode C-->
<div
style=
"position: relative; float: left;"
>
<div
style=
"width: 500px; height: 500px; position: relative"
>
<pdb-ligand-env
pdb-res-name=
"CLR"
zoom-on
></pdb-ligand-env>
</div>
</div>
<!--Mode C-->
<div
style=
"position: relative; float: left;"
>
<div
style=
"width: 500px; height: 500px; position: relative"
>
<pdb-ligand-env
pdb-res-name=
"CLR"
zoom-on
></pdb-ligand-env>
</div>
</div>
</body>
</body>
</html>
\ No newline at end of file
demo/demo_plugin.html
View file @
8e460b10
<!doctype html>
<html
lang=
"en"
>
<head>
<link
rel=
"stylesheet"
href=
"pdb-ligand-env.css"
/>
<script
src=
"https://d3js.org/d3.v5.min.js"
></script>
<!-- CSS style to be used for scene drawing (required for saving SVGs.) -->
<link
rel=
"stylesheet"
href=
"pdb-ligand-env-svg.css"
/>
<!-- UI icons -->
<link
rel=
"stylesheet"
href=
"https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css"
/>
<!-- Web component polyfill (only loads what it needs) -->
<script
src=
"https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js"
charset=
"utf-8"
></script>
<script
src=
"https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
charset=
"utf-8"
></script>
<!--PDBe interactions plugin-->
<script
src=
"pdb-ligand-env-plugin-min.js"
></script>
<!--Initialize Visualization-->
<script>
document
.
addEventListener
(
"
DOMContentLoaded
"
,
function
(
event
)
{
//
<!--
Mode
A
-->
var
eleLigInteraction
=
document
.
getElementById
(
'
ligand-interaction
'
);
this
.
lidisplay
=
new
Visualization
(
eleLigInteraction
,
undefined
);
this
.
lidisplay
.
initLigandInteractions
(
'
1cbs
'
,
200
,
'
A
'
);
<head>
<script
src=
"https://d3js.org/d3.v5.min.js"
></script>
<!-- CSS style to be used for scene drawing (required for saving SVGs.) -->
<link
rel=
"stylesheet"
href=
"http://127.0.0.1:8080/pdb-ligand-env-svg.css"
/>
<link
rel=
"stylesheet"
href=
"http://127.0.0.1:8080/pdb-ligand-env.css"
/>
<!-- UI icons -->
<link
rel=
"stylesheet"
href=
"https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css"
/>
<!-- Web component polyfill (only loads what it needs) -->
<script
src=
"https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js"
charset=
"utf-8"
>
</script>
<script
src=
"https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
charset=
"utf-8"
></script>
//
<!--
Mode
B
-->
var
eleBoundInteraction
=
document
.
getElementById
(
'
boundmolecule-interaction
'
);
this
.
bmdisplay
=
new
Visualization
(
eleBoundInteraction
,
undefined
);
this
.
bmdisplay
.
initBoundMoleculeInteractions
(
'
3d12
'
,
'
bm1
'
);
<!--PDBe interactions plugin-->
<script
src=
"http://127.0.0.1:8080/pdb-ligand-env-plugin.js"
></script>
//
<!--
Mode
C
-->
var
eleChemComp
=
document
.
getElementById
(
'
chem-comp
'
);
this
.
ccdisplay
=
new
Visualization
(
eleChemComp
,
undefined
);
this
.
ccdisplay
.
initLigandDisplay
(
'
HEM
'
);
});
</script>
<!--Initialize Visualization-->
<script>
document
.
addEventListener
(
"
DOMContentLoaded
"
,
function
(
event
)
{
//
<!--
Mode
A
-->
var
eleLigInteraction
=
document
.
getElementById
(
'
ligand-interaction
'
);
this
.
lidisplay
=
new
Visualization
(
eleLigInteraction
,
undefined
);
this
.
lidisplay
.
initLigandInteractions
(
'
1cbs
'
,
200
,
'
A
'
);
</head>
<body>
<!--Mode A-->
<div
style=
"position: relative; float: left;"
>
<div
style=
"width: 600px; height: 600px; position: relative"
>
//
<!--
Mode
B
-->
var
eleBoundInteraction
=
document
.
getElementById
(
'
boundmolecule-interaction
'
);
this
.
bmdisplay
=
new
Visualization
(
eleBoundInteraction
,
undefined
);
this
.
bmdisplay
.
initBoundMoleculeInteractions
(
'
3d12
'
,
'
bm1
'
);
//
<!--
Mode
C
-->
var
eleChemComp
=
document
.
getElementById
(
'
chem-comp
'
);
this
.
ccdisplay
=
new
Visualization
(
eleChemComp
,
undefined
);
this
.
ccdisplay
.
initLigandDisplay
(
'
HEM
'
);
});
</script>
</head>
<body>
<!--Mode A-->
<div
style=
"position: relative; float: left;"
>
<div
style=
"width: 600px; height: 600px; position: relative"
>
<div
id=
'ligand-interaction'
></div>
</div>
</div>
</div>
<!--Mode B-->
<div
style=
"position: relative; float: left;"
>
<div
style=
"width: 600px; height: 600px; position: relative"
>
<!--Mode B-->
<div
style=
"position: relative; float: left;"
>
<div
style=
"width: 600px; height: 600px; position: relative"
>
<div
id=
'boundmolecule-interaction'
></div>
</div>
...
...
@@ -60,6 +60,6 @@
</div>
</div>
</body>
</body>
</html>
\ No newline at end of file
gulpfile.js
View file @
8e460b10
...
...
@@ -54,6 +54,12 @@ gulp.task('copyIndex', () => {
.
pipe
(
gulp
.
dest
(
'
build/
'
));
});
gulp
.
task
(
'
copyAppCSS
'
,
()
=>
{
return
gulp
.
src
([
'
src/styles/pdb-ligand-env.css
'
])
.
pipe
(
concat
(
`pdb-ligand-env.css`
))
.
pipe
(
gulp
.
dest
(
'
build/
'
));
});
gulp
.
task
(
'
copyMapping
'
,
()
=>
{
return
gulp
.
src
([
'
dependencies/het_mapping.json
'
])
.
pipe
(
concat
(
`het_mapping.json`
))
...
...
@@ -88,5 +94,5 @@ gulp.task('minifyPlugin', () => {
.
pipe
(
gulp
.
dest
(
'
build/
'
));
});
gulp
.
task
(
'
default
'
,
gulp
.
series
(
'
clean
'
,
'
concat
'
,
'
concatCSS
'
,
gulp
.
task
(
'
default
'
,
gulp
.
series
(
'
clean
'
,
'
copyAppCSS
'
,
'
concat
'
,
'
concatCSS
'
,
'
copyXML
'
,
'
copyIndex
'
,
'
copyMapping
'
,
'
minifyPlugin
'
));
\ No newline at end of file
package-lock.json
View file @
8e460b10
This diff is collapsed.
Click to expand it.
src/plugin/ui.ts
View file @
8e460b10
...
...
@@ -26,11 +26,11 @@ let helpLigands = `
<td>
<div class="pdb-lig-env-help-residue" style="background: #F08080;"></div>
</td>
<td>cystein</td>
<td>cystein</td>
<td>
<div class="pdb-lig-env-help-residue" style="background: #00BFFF;"></div>
</td>
<td>water</td>
<td>water</td>
</tr>
<tr>
<td>
...
...
@@ -40,13 +40,13 @@ let helpLigands = `
<td>
<div class="pdb-lig-env-help-residue" style="background: #F2F2F2;"></div>
</td>
<td>other</td>
<td>other</td>
</tr>
<tr>
<td>
<div class="pdb-lig-env-help-residue" style="background: #F09048;"></div>
</td>
<td>glycine</td>
<td>glycine</td>
<td>
<div class="pdb-lig-env-help-residue" style="background: white; border: 1.2px solid black;"></div>
</td>
...
...
@@ -85,7 +85,7 @@ let helpBonds = `
</tr>
<tr>
<td>
<hr style="border: 0 none; border-top: 5px solid #008080; background: none; height: 0;" />
<hr style="border: 0 none; border-top: 5px solid #008080; background: none; height: 0;" />
</td>
<td>metal</td>
<td></td>
...
...
@@ -109,7 +109,7 @@ let helpBonds = `
// <hr style="border: 0 none; border-top: 5px dashed black; background: none; height: 0;" />
// </td>
// <td>non-covalent</td>
// </tr>
// </tr>
// </table>`
// #endregion help
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment