Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
nomad-lab
encyclopedia-gui
Commits
cde0f4e0
Commit
cde0f4e0
authored
Feb 01, 2019
by
Markus Scheidgen
Browse files
First implementation of similarity in GUI.
parent
a22dc0b9
Changes
5
Hide whitespace changes
Inline
Side-by-side
.gitignore
0 → 100644
View file @
cde0f4e0
enc-gui.iml
client/bundle.js
View file @
cde0f4e0
...
...
@@ -153,11 +153,11 @@ if (document.location.href.indexOf('nomad-coe.eu') > 0){//
path
=
'
api/v1.0/
'
;
}
// Case 3: testing-staging environment and local installations (docker containers) of full Encyclopedia stack
else
if
(
document
.
location
.
href
.
indexOf
(
'
gui
'
)
>
0
){
API_HOST
=
'
/
'
;
// USER_COOKIE_DOMAIN = 'localhost' and path = 'v1.0/';
if
(
document
.
location
.
href
.
indexOf
(
'
staging
'
)
>
0
)
// testing-staging server
USER_COOKIE_DOMAIN
=
'
.mpg.de
'
;
}
//
else if (document.location.href.indexOf('gui') > 0){
//
API_HOST= '/'; // USER_COOKIE_DOMAIN = 'localhost' and path = 'v1.0/';
//
if (document.location.href.indexOf('staging') > 0) // testing-staging server
//
USER_COOKIE_DOMAIN = '.mpg.de';
//
}
let
API_BASE_URL
=
API_HOST
+
path
;
//console.log('API host: ',API_HOST,' USER_COOKIE_DOMAIN: ',USER_COOKIE_DOMAIN);
...
...
@@ -4416,6 +4416,7 @@ let DOSPlotter = __webpack_require__(10);
let
HeatCapPlotter
=
__webpack_require__
(
11
);
let
MaterialMod
=
__webpack_require__
(
9
);
let
DataStore
=
__webpack_require__
(
1
);
let
SimilarityFinder
=
__webpack_require__
(
37
).
SimilarityFinder
;
const
ELEMENT_INCLUDED_MSG
=
'
ELEMENT ALREADY INCLUDED
'
;
...
...
@@ -4535,9 +4536,13 @@ class Overview {
</div>
</div>
<div style="clear: both;"></div>
<div style="float: left; width: 60%; " class="similarity-finder">
</div>
<div style="clear: both;"></div>
<div class="spin-legend" style="font-size: 0.9em; padding: 6px 30px 10px; display: none">
<svg width="15px" height="10px"> <polyline points="0,5 15,5" class="plotSpin1"/></svg>
Spin <span style='font-size: 1.1em'>⇧</span>
...
...
@@ -4545,11 +4550,11 @@ class Overview {
<svg width="15px" height="10px"> <polyline points="0,5 15,5" class="plotSpin2"/></svg>
Spin <span style='font-size: 1.1em'>⇩</span>
</div>
</div>
<!--
<div class="footer">
<b>Band gap</b>: <span class="e-struct-field" ></span>
</div>
-->
...
...
@@ -4696,6 +4701,15 @@ class Overview {
'
space-group.value:
'
+
data
.
space_group_number
);
}
if
(
data
.
similarity
)
{
if
(
!
this
.
similarityFinder
)
{
this
.
similarityFinder
=
new
SimilarityFinder
({
left
:
40
,
right
:
16
,
top
:
0
,
bottom
:
30
});
const
similarityFinderContainer
=
this
.
element
.
querySelector
(
'
.similarity-finder
'
);
this
.
similarityFinder
.
setSimilarityData
(
data
.
similarity
);
similarityFinderContainer
.
appendChild
(
this
.
similarityFinder
.
element
);
}
}
}
...
...
@@ -9576,5 +9590,92 @@ class MaxMinSlider{
*/
/***/
}),
/* 37 */
/***/
(
function
(
module
,
exports
,
__webpack_require__
)
{
let
util
=
__webpack_require__
(
0
);
class
SimilarityFinder
{
constructor
()
{
this
.
folded
=
true
;
this
.
element
=
document
.
createElement
(
'
div
'
);
//this.element.className = className;
this
.
element
.
innerHTML
+=
`
<div >
<span style=" vertical-align: 30%; ">Similar materials</span>
<img style="cursor: pointer" src="
${
util
.
IMAGE_DIR
}
folded.png" />
</div>
<div class="vr-download-panel" style="position: relative; display: none">
</div>
`
;
// Focus related properties (in order to hide the box when the user click out)
this
.
element
.
tabIndex
=
'
0
'
;
// enabled the support of focusing
this
.
element
.
style
.
outline
=
'
none
'
;
// The outline is not shown when it gains the focus
this
.
foldingPanel
=
this
.
element
.
querySelector
(
'
.vr-download-panel
'
);
this
.
foldBtn
=
this
.
element
.
querySelector
(
'
img
'
);
this
.
foldBtn
.
addEventListener
(
'
click
'
,
e
=>
{
this
.
folded
=
!
this
.
folded
;
this
.
foldBtn
.
src
=
(
this
.
folded
?
util
.
IMAGE_DIR
+
'
folded.png
'
:
util
.
IMAGE_DIR
+
'
unfolded.png
'
);
//this.foldBtn.className = (this.folded ? 'on' : 'off');
this
.
foldingPanel
.
style
.
display
=
(
this
.
folded
?
'
none
'
:
'
block
'
);
});
this
.
element
.
addEventListener
(
'
blur
'
,
e
=>
{
setTimeout
(()
=>
{
this
.
folded
=
true
;
this
.
foldBtn
.
src
=
util
.
IMAGE_DIR
+
'
folded.png
'
;
this
.
foldingPanel
.
style
.
display
=
'
none
'
;
},
100
);
});
//this.cellViewer.toggleLatticeParameters(false);
}
setSimilarityData
(
similarityData
)
{
const
dataAsArray
=
Object
.
keys
(
similarityData
).
map
(
function
(
key
)
{
return
{
data
:
similarityData
[
key
],
key
:
key
}
})
dataAsArray
.
sort
(
function
(
a
,
b
)
{
if
(
a
.
data
.
Tc
<
b
.
data
.
Tc
)
{
return
1
}
else
if
(
a
.
data
.
Tc
>
b
.
data
.
Tc
)
{
return
-
1
}
else
{
return
0
}
})
const
container
=
document
.
createElement
(
'
div
'
)
container
.
class
=
'
vr-download-panel-unfolded
'
container
.
style
=
'
width: 210px;
'
this
.
foldingPanel
.
appendChild
(
container
)
dataAsArray
.
forEach
(
function
(
item
)
{
const
material_id
=
item
.
key
.
split
(
'
:
'
)[
0
]
const
element
=
document
.
createElement
(
'
div
'
)
element
.
style
=
"
padding: 5px;
"
const
url
=
`
${
window
.
location
.
toString
().
replace
(
/#.*$/
,
""
)}
#/material/
${
material_id
}
`
console
.
log
(
url
)
element
.
innerHTML
=
`<a href="
${
url
}
" target="_
${
material_id
}
">
${
item
.
data
.
formula
}
(
${
item
.
data
.
space_group_number
}
):
${
item
.
data
.
Tc
}
</a>`
container
.
appendChild
(
element
)
})
}
}
// class DropDown
module
.
exports
=
{
SimilarityFinder
};
/***/
})
/******/
]);
\ No newline at end of file
client/src/common/util.js
View file @
cde0f4e0
...
...
@@ -83,11 +83,11 @@ if (document.location.href.indexOf('nomad-coe.eu') > 0){//
path
=
'
api/v1.0/
'
;
}
// Case 3: testing-staging environment and local installations (docker containers) of full Encyclopedia stack
else
if
(
document
.
location
.
href
.
indexOf
(
'
gui
'
)
>
0
){
API_HOST
=
'
/
'
;
// USER_COOKIE_DOMAIN = 'localhost' and path = 'v1.0/';
if
(
document
.
location
.
href
.
indexOf
(
'
staging
'
)
>
0
)
// testing-staging server
USER_COOKIE_DOMAIN
=
'
.mpg.de
'
;
}
//
else if (document.location.href.indexOf('gui') > 0){
//
API_HOST= '/'; // USER_COOKIE_DOMAIN = 'localhost' and path = 'v1.0/';
//
if (document.location.href.indexOf('staging') > 0) // testing-staging server
//
USER_COOKIE_DOMAIN = '.mpg.de';
//
}
let
API_BASE_URL
=
API_HOST
+
path
;
//console.log('API host: ',API_HOST,' USER_COOKIE_DOMAIN: ',USER_COOKIE_DOMAIN);
...
...
client/src/material-mod/Overview.view.js
View file @
cde0f4e0
...
...
@@ -33,6 +33,7 @@ let DOSPlotter = require('./DOSPlotter.js');
let
HeatCapPlotter
=
require
(
'
./HeatCapPlotter.js
'
);
let
MaterialMod
=
require
(
'
./MaterialMod.js
'
);
let
DataStore
=
require
(
'
./DataStore.js
'
);
let
SimilarityFinder
=
require
(
'
./Similarity.js
'
).
SimilarityFinder
;
const
ELEMENT_INCLUDED_MSG
=
'
ELEMENT ALREADY INCLUDED
'
;
...
...
@@ -152,9 +153,13 @@ class Overview {
</div>
</div>
<div style="clear: both;"></div>
<div style="float: left; width: 60%; " class="similarity-finder">
</div>
<div style="clear: both;"></div>
<div class="spin-legend" style="font-size: 0.9em; padding: 6px 30px 10px; display: none">
<svg width="15px" height="10px"> <polyline points="0,5 15,5" class="plotSpin1"/></svg>
Spin <span style='font-size: 1.1em'>⇧</span>
...
...
@@ -162,11 +167,11 @@ class Overview {
<svg width="15px" height="10px"> <polyline points="0,5 15,5" class="plotSpin2"/></svg>
Spin <span style='font-size: 1.1em'>⇩</span>
</div>
</div>
<!--
<div class="footer">
<b>Band gap</b>: <span class="e-struct-field" ></span>
</div>
-->
...
...
@@ -313,6 +318,15 @@ class Overview {
'
space-group.value:
'
+
data
.
space_group_number
);
}
if
(
data
.
similarity
)
{
if
(
!
this
.
similarityFinder
)
{
this
.
similarityFinder
=
new
SimilarityFinder
({
left
:
40
,
right
:
16
,
top
:
0
,
bottom
:
30
});
const
similarityFinderContainer
=
this
.
element
.
querySelector
(
'
.similarity-finder
'
);
this
.
similarityFinder
.
setSimilarityData
(
data
.
similarity
);
similarityFinderContainer
.
appendChild
(
this
.
similarityFinder
.
element
);
}
}
}
...
...
client/src/material-mod/Similarity.js
0 → 100644
View file @
cde0f4e0
let
util
=
require
(
'
../common/util.js
'
);
class
SimilarityFinder
{
constructor
()
{
this
.
folded
=
true
;
this
.
element
=
document
.
createElement
(
'
div
'
);
//this.element.className = className;
this
.
element
.
innerHTML
+=
`
<div >
<span style=" vertical-align: 30%; ">Similar materials</span>
<img style="cursor: pointer" src="
${
util
.
IMAGE_DIR
}
folded.png" />
</div>
<div class="vr-download-panel" style="position: relative; display: none">
</div>
`
;
// Focus related properties (in order to hide the box when the user click out)
this
.
element
.
tabIndex
=
'
0
'
;
// enabled the support of focusing
this
.
element
.
style
.
outline
=
'
none
'
;
// The outline is not shown when it gains the focus
this
.
foldingPanel
=
this
.
element
.
querySelector
(
'
.vr-download-panel
'
);
this
.
foldBtn
=
this
.
element
.
querySelector
(
'
img
'
);
this
.
foldBtn
.
addEventListener
(
'
click
'
,
e
=>
{
this
.
folded
=
!
this
.
folded
;
this
.
foldBtn
.
src
=
(
this
.
folded
?
util
.
IMAGE_DIR
+
'
folded.png
'
:
util
.
IMAGE_DIR
+
'
unfolded.png
'
);
//this.foldBtn.className = (this.folded ? 'on' : 'off');
this
.
foldingPanel
.
style
.
display
=
(
this
.
folded
?
'
none
'
:
'
block
'
);
});
this
.
element
.
addEventListener
(
'
blur
'
,
e
=>
{
setTimeout
(()
=>
{
this
.
folded
=
true
;
this
.
foldBtn
.
src
=
util
.
IMAGE_DIR
+
'
folded.png
'
;
this
.
foldingPanel
.
style
.
display
=
'
none
'
;
},
100
);
});
//this.cellViewer.toggleLatticeParameters(false);
}
setSimilarityData
(
similarityData
)
{
const
dataAsArray
=
Object
.
keys
(
similarityData
).
map
(
function
(
key
)
{
return
{
data
:
similarityData
[
key
],
key
:
key
}
})
dataAsArray
.
sort
(
function
(
a
,
b
)
{
if
(
a
.
data
.
Tc
<
b
.
data
.
Tc
)
{
return
1
}
else
if
(
a
.
data
.
Tc
>
b
.
data
.
Tc
)
{
return
-
1
}
else
{
return
0
}
})
const
container
=
document
.
createElement
(
'
div
'
)
container
.
class
=
'
vr-download-panel-unfolded
'
container
.
style
=
'
width: 210px;
'
this
.
foldingPanel
.
appendChild
(
container
)
dataAsArray
.
forEach
(
function
(
item
)
{
const
material_id
=
item
.
key
.
split
(
'
:
'
)[
0
]
const
element
=
document
.
createElement
(
'
div
'
)
element
.
style
=
"
padding: 5px;
"
const
url
=
`
${
window
.
location
.
toString
().
replace
(
/#.*$/
,
""
)}
#/material/
${
material_id
}
`
console
.
log
(
url
)
element
.
innerHTML
=
`<a href="
${
url
}
" target="_
${
material_id
}
">
${
item
.
data
.
formula
}
(
${
item
.
data
.
space_group_number
}
):
${
item
.
data
.
Tc
}
</a>`
container
.
appendChild
(
element
)
})
}
}
// class DropDown
module
.
exports
=
{
SimilarityFinder
};
\ No newline at end of file
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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