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
55d0fbab
Commit
55d0fbab
authored
Nov 14, 2018
by
Markus Scheidgen
Browse files
Merged new-search into master.
parents
aaad5e23
318b396a
Pipeline
#39342
passed with stages
in 6 seconds
Changes
9
Pipelines
1
Expand all
Hide whitespace changes
Inline
Side-by-side
client/bundle-es5.js
View file @
55d0fbab
This diff is collapsed.
Click to expand it.
client/bundle.js
View file @
55d0fbab
This diff is collapsed.
Click to expand it.
client/css/styles.css
View file @
55d0fbab
...
...
@@ -300,20 +300,31 @@ div.title span.unfolded::before{
/******+ SEARCH BAR *********/
#search-module
{
width
:
62%
;
margin
:
10px
auto
;
/*width: 62%; margin: 10px auto;*/
display
:
flex
;
margin-top
:
10px
;
justify-content
:
space-evenly
;
/*center;*/
}
.searchline
{
.search-filter-side
{
background-color
:
#DDD
;
padding
:
10px
16px
;
}
.exclusive-search-line
{
margin
:
4px
auto
;
font-size
:
0.85em
;
text-align
:
left
;
.search-box
{
width
:
742px
;
display
:
flex
;
justify-content
:
center
;
/*space-between;*/
}
.search-query-wrapper
{
width
:
85%
;
flex-grow
:
14
;
background-color
:
white
;
border
:
2px
solid
#E56400
;
padding
:
8px
6px
;
}
...
...
@@ -328,7 +339,9 @@ div.title span.unfolded::before{
}
.search-btn
{
width
:
94px
;
/*width: 94px;*/
display
:
block
;
flex-grow
:
1
;
background-color
:
#E56400
;
color
:
white
;
padding
:
16px
;
...
...
@@ -349,10 +362,13 @@ div.title span.unfolded::before{
}
.bool-buttons
button
{
border
:
1px
solid
#BBB
;
color
:
#BBB
;
cursor
:
inherit
;
color
:
#777
;
border
:
1px
solid
#777
;
background-color
:
#EEE
;
text-align
:
center
;
}
...
...
@@ -402,68 +418,24 @@ div.title span.unfolded::before{
cursor
:
default
;
}
#formula-box
{
#formula-box
,
#material-name-box
{
text-align
:
center
;
background-color
:
#DDD
;
padding
:
40px
0
;
}
.formula-text-field
,
.
material-
name-text-field
{
.formula-text-field
,
.name-text-field
{
padding
:
10px
;
border
:
0
;
font-size
:
0.9em
;
width
:
60%
;
}
.adding-formula-btn
,
.adding-
material-
name-btn
{
.adding-formula-btn
,
.adding-name-btn
{
padding
:
9px
;
border
:
1px
solid
#999
;
}
#search-properties-box
{
background-color
:
#DDD
;
padding
:
4px
;
height
:
370px
;
}
.props-box-tabs-wrapper
{
background-color
:
#EEE
;
height
:
100%
;
}
.properties-box-tabs
div
{
padding
:
20px
;
font-size
:
0.9em
;
border-bottom
:
1px
solid
#DDD
;
background-color
:
#EEE
;
cursor
:
pointer
;
text-align
:
center
;
}
.properties-box-tabs
div
.props-tab-selected
{
font-weight
:
bold
;
color
:
#E56400
;
background-color
:
#DDD
;
}
.props-tab-panel
{
padding
:
10px
60px
;
font-size
:
0.8em
;
display
:
none
;
}
.properties-box-enter-button
{
text-align
:
right
;
}
.properties-box-enter-button
button
{
margin
:
8px
20px
;
padding
:
9px
;
}
.field
{
margin-bottom
:
16px
;
}
...
...
@@ -661,7 +633,14 @@ div#specialRows{margin: 30px 40px;}
#matlist
{
width
:
690px
;
margin
:
0
auto
80px
;}
#matlist
{
width
:
742px
;
margin
:
40px
auto
40px
;}
#system-type-tabs
{
width
:
100%
;
}
#system-type-tabs
button
{
font-size
:
1.2em
;
}
#system-type-tabs
button
.selected
{
color
:
#E56400
;}
#system-type-tabs
button
:disabled
{
color
:
#BBB
;
cursor
:
default
}
span
.results-total
{
float
:
right
;}
/* #paginationWg erased*/
#matlist
.formula
{
...
...
@@ -681,6 +660,12 @@ span.prevButton{ display: inline-block; cursor: pointer;}
span
.page
{
display
:
inline-block
;
}
span
.nextButton
{
display
:
inline-block
;
cursor
:
pointer
;}
.data-container
table
{
margin
:
auto
;
width
:
96%
;
}
/*#paginationWg .left { float: left }
#paginationWg .right { float: right }*/
...
...
client/src/common/util.js
View file @
55d0fbab
...
...
@@ -39,7 +39,6 @@ let Conf = require('../Conf.js');
// global state vars
let
materialId
=
null
;
let
searchResults
=
false
;
// app-level constants
...
...
@@ -72,9 +71,10 @@ let ELEMENTS = [
// API URL and user cookie domain configuration
// Case 1: my local dev environment
let
API_HOST
=
'
http://enc-staging-nomad.esc.rzg.mpg.de/
'
;
let
API_HOST
=
'
http://enc-staging-nomad.esc.rzg.mpg.de/
'
;
let
USER_COOKIE_DOMAIN
=
'
localhost
'
;
let
path
=
'
v1.0/
'
;
let
path
=
'
v1.0/
'
;
// current development version of the API
// let path = 'v1.0/'; // stable staging
// Case 2: production environment
if
(
document
.
location
.
href
.
indexOf
(
'
nomad-coe.eu
'
)
>
0
){
//
...
...
@@ -181,7 +181,7 @@ function getSubscriptedFormula(formula){
function
getSearchURL
(){
return
API_BASE_URL
+
'
materials
'
;
return
API_BASE_URL
+
'
es
materials
'
;
}
function
getSuggestionURL
(
quantity
){
...
...
@@ -452,7 +452,6 @@ function is2DSystem_temporary_patch(){
module
.
exports
=
{
searchResults
,
materialId
,
MAT_VIEW
:
MAT_VIEW
,
IMAGE_DIR
:
IMAGE_DIR
,
...
...
client/src/main.js
View file @
55d0fbab
...
...
@@ -32,7 +32,7 @@ let FlaggingFormPopup = require('./common/FlaggingFormPopup.js');
let
PubSub
=
require
(
'
./common/PubSub.js
'
);
let
Router
=
require
(
'
./common/Router.js
'
);
let
MaterialMod
=
require
(
'
./material-mod/MaterialMod.js
'
);
let
SearchModule
=
require
(
'
./search-mod/SearchMod.js
'
);
let
SearchModule
=
require
(
'
./search-mod/
New
SearchMod.js
'
);
let
UserGuidance
=
require
(
'
./common/UserGuidance.js
'
);
let
DataStore
=
require
(
'
./material-mod/DataStore.js
'
);
...
...
@@ -42,7 +42,6 @@ let contentElement = document.getElementById('content');
let
titleElement
=
document
.
querySelector
(
'
title
'
);
/********* User flagging side tab ****************/
/* This side vertical tab is hidden initially
...
...
@@ -66,7 +65,6 @@ class Breadcrumb {
this
.
element
=
document
.
querySelector
(
'
#breadcrumb-placeholder
'
);
this
.
element
.
innerHTML
=
`
<span class="goto-page Search">Search</span>
<span class="goto-page Results"> > <span>Results</span></span>
<span class="goto-page Overview"> > <span>Overview</span></span>
<span class="Details">
>
...
...
@@ -79,7 +77,6 @@ class Breadcrumb {
</select>
</span>
`
;
this
.
resultsSel
=
this
.
element
.
querySelector
(
'
.Results
'
);
this
.
overviewSel
=
this
.
element
.
querySelector
(
'
.Overview
'
);
this
.
detailsSel
=
this
.
element
.
querySelector
(
'
.Details
'
);
this
.
detailsDropDown
=
this
.
element
.
querySelector
(
'
.details-dropdown
'
);
...
...
@@ -88,9 +85,6 @@ class Breadcrumb {
this
.
element
.
querySelector
(
'
.Search
'
).
addEventListener
(
"
click
"
,
e
=>
{
util
.
setBrowserHashPath
(
'
search
'
);
});
this
.
resultsSel
.
addEventListener
(
"
click
"
,
e
=>
{
util
.
setBrowserHashPath
(
'
search/results
'
);
});
this
.
overviewSel
.
addEventListener
(
'
click
'
,
()
=>
{
util
.
setBrowserHashPath
(
'
material
'
,
util
.
materialId
);
...
...
@@ -117,8 +111,6 @@ class Breadcrumb {
setState
(
appModule
,
param
){
let
resultsSetLabel
=
this
.
resultsSel
.
querySelector
(
'
span
'
);
resultsSetLabel
.
style
.
fontWeight
=
'
normal
'
;
let
overviewSelLabel
=
this
.
overviewSel
.
querySelector
(
'
span
'
);
overviewSelLabel
.
style
.
fontWeight
=
'
normal
'
;
...
...
@@ -126,16 +118,17 @@ class Breadcrumb {
this
.
overviewSel
.
style
.
display
=
'
none
'
;
this
.
detailsSel
.
style
.
display
=
'
none
'
;
/*
if (param === 'results'){
this.resultsSel.style.display = 'inline';
this.resultsSel.querySelector('span').style.fontWeight = 'bold';
this.element.style.visibility = 'visible';
}
else
this
.
element
.
style
.
visibility
=
'
hidden
'
;
}else this.element.style.visibility = 'hidden';
*/
this
.
element
.
style
.
visibility
=
'
hidden
'
;
}
else
if
(
appModule
===
'
material
'
){
this
.
element
.
style
.
visibility
=
'
visible
'
;
this
.
resultsSel
.
style
.
display
=
(
util
.
searchResults
?
'
inline
'
:
'
none
'
);
this
.
overviewSel
.
style
.
display
=
'
inline
'
;
if
(
param
===
undefined
){
// Overview page
...
...
@@ -203,8 +196,7 @@ PubSub.subscribe('show-search', search => {
searchMod
.
showSearchPage
();
LoadingPopup
.
hide
();
// In case it comes from the result page
}
else
if
(
search
===
'
results
'
)
searchMod
.
showResultsPage
();
}
//else if (search === 'results') searchMod.showSearchResults();
showModuleDOM
(
searchMod
.
element
);
...
...
client/src/search-mod/ElemenTable.view.js
View file @
55d0fbab
...
...
@@ -159,7 +159,7 @@ class ElemenTable{
this
.
element
.
setAttribute
(
'
id
'
,
'
elementable
'
);
// header with dropdown
let
tempHtml
=
'
<div class="element-info"></div>
'
;
let
tempHtml
=
'
<div class="element-info"></div>
'
;
tempHtml
+=
'
<div class="ptWrapper">
'
;
...
...
@@ -383,5 +383,8 @@ function getElement(e){
}
}
// EXPORTS
module
.
exports
=
ElemenTable
;
client/src/search-mod/FilterPanel.view.js
0 → 100644
View file @
55d0fbab
/**
* Copyright 2016-2018 Iker Hurtado
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
/*
*/
"
use strict
"
;
let
util
=
require
(
'
../common/util.js
'
);
let
InfoSys
=
require
(
'
../common/InfoSys.js
'
);
class
FilterPanel
{
constructor
()
{
//this.element = document.getElementById('filter-panel-placeholder');
this
.
element
=
document
.
createElement
(
'
div
'
);
this
.
element
.
setAttribute
(
"
id
"
,
'
filter-panel-placeholder
'
);
this
.
element
.
innerHTML
=
` <br>
<div>--- Structure ---</div>
<br>
<div class="field">
<div class="field-title">System type</div>
<input type="checkbox" class="system-type-field" value="bulk"> Bulk<br>
<input type="checkbox" class="system-type-field" value="2D"> 2D<br>
<input type="checkbox" class="system-type-field" value="1D"> 1D<br>
</div>
<div class="field">
<div class="field-title"><span info-sys-data="crystal-system">Crystal system</span></div>
<input type="checkbox" class="crystal-system-field" value="cubic">
<span info-sys-data="crystal-system.value:cubic">Cubic</span><br>
<input type="checkbox" class="crystal-system-field" value="hexagonal">
<span info-sys-data="crystal-system.value:hexagonal">Hexagonal</span><br>
<input type="checkbox" class="crystal-system-field" value="trigonal">
<span info-sys-data="crystal-system.value:trigonal">Trigonal</span><br>
<input type="checkbox" class="crystal-system-field" value="tetragonal">
<span info-sys-data="crystal-system.value:tetragonal">Tetragonal</span><br>
<input type="checkbox" class="crystal-system-field" value="orthorhombic">
<span info-sys-data="crystal-system.value:orthorhombic">Orthorhombic</span><br>
<input type="checkbox" class="crystal-system-field" value="monoclinic">
<span info-sys-data="crystal-system.value:monoclinic">Monoclinic</span><br>
<input type="checkbox" class="crystal-system-field" value="triclinic">
<span info-sys-data="crystal-system.value:triclinic">Triclinic</span><br>
</div>
<div class="field">
<div class="field-title"><span info-sys-data="space-group">Space group</span></div>
<select id="space-group-dropdown-list">
<option value="by-number">by number</option>
<option value="by-symbol">by short symbol</option>
</select>
<input type="text" class="space-group-textfield" style="width: 60px">
</div>
<div class="field">
<div class="field-title">Strukturbericht designation</div>
<input type="text" class="strukturbericht-designation-field">
</div>
<div class="field">
<div class="field-title"><span info-sys-data="structure-type">Structure type</span></div>
<select class="structure-type-field" style="max-width: 174px">
<option ></option>
</select>
</div>
<br>
<div>--- Properties ---</div>
<br>
<div class="field">
<div class="field-title"><span info-sys-data="mass-density">Mass density</span> <span style="font-weight: normal;">(kg/m<sup>3</sup>)</span></div>
<!-- <div class="test-slider"> </div> -->
Min: <input type="text" class="mass-density-min-field">
Max: <input type="text" class="mass-density-max-field">
</div>
<div class="field">
<div class="field-title"><span info-sys-data="band-gap">Band gap</span> <span style="font-weight: normal;">(eV)</span></div>
Min: <input type="text" class="band-gap-min-field">
Max: <input type="text" class="band-gap-max-field">
<!--
<input type="range" class="band-gap-slider" min="5" max="200" step="5" value="100"/>
<input type="range" class="band-gap-slider" min="5" max="200" step="5" value="100"/>
-->
</div>
<div class="field" >
<input type="radio" name="band-gap-type" value="direct"> Direct<br>
<input type="radio" name="band-gap-type" value="indirect"> Indirect<br>
<input type="radio" name="band-gap-type" value="both" checked> Both<br>
</div>
<div style="font-weight: bold; padding-bottom: 6px" >Results containing...</div>
<input type="checkbox" class="has-band-structure-field" value="Band structure">
<span info-sys-data="has-band-structure">Band structure</span><br>
<input type="checkbox" class="has-dos-field" value="DOS">
<span info-sys-data="has-dos">DOS</span><br>
<input type="checkbox" class="has-fermi-surface-field" value="Fermi surface">
<span info-sys-data="has-fermi-surface">Fermi surface</span><br>
<input type="checkbox" class="has-thermal-properties-field" value="Thermal properties">
<span info-sys-data="has-thermal-properties">Thermal properties</span>
<br>
<!-- <input type="checkbox" class="results-containing-field" value="EOS" disabled>Equation of state<br>-->
`
;
let
structureTypeSelect
=
this
.
element
.
querySelector
(
'
.structure-type-field
'
);
let
r1
=
util
.
serverReq
(
util
.
getSuggestionURL
(
'
structure_type
'
),
()
=>
{
JSON
.
parse
(
r1
.
response
).
structure_type
.
forEach
(
structureType
=>
{
structureTypeSelect
.
innerHTML
+=
'
<option>
'
+
structureType
+
'
</option>
'
;
});
});
InfoSys
.
addToInfoSystem
(
this
.
element
);
/* code for the MaxMinSlider component testing
this.testSlider = this.element.querySelector('.test-slider');
console.log("TAB: ",this.testSlider);
this.slider = new MaxMinSlider();
this.slider.setRange(0,10000);
this.testSlider.appendChild(this.slider.element);
*/
}
getValues
(){
//let map = this.getPropsWithValueFromCurrentTab(false);
let
filterMap
=
new
Map
();
this
.
addFilterFromCheckboxes
(
filterMap
,
'
system-type
'
);
this
.
addFilterFromCheckboxes
(
filterMap
,
'
crystal-system
'
);
this
.
addSpaceGroupFilter
(
filterMap
);
//this.addFilterFromTextField(filterMap, 'space-group-number');
this
.
addFilterFromTextField
(
filterMap
,
'
strukturbericht-designation
'
);
this
.
addFilterFromDropdownList
(
filterMap
,
'
structure-type
'
);
this
.
addRangeFilter
(
filterMap
,
'
mass-density
'
);
this
.
addRangeFilter
(
filterMap
,
'
band-gap
'
);
this
.
addBandgapTypeFilter
(
filterMap
);
this
.
addFiltersFromBoolCheckboxes
(
filterMap
,
[
'
has-band-structure
'
,
'
has-dos
'
,
'
has-fermi-surface
'
,
'
has-thermal-properties
'
]);
console
.
log
(
'
FilterPanel selected:
'
,
filterMap
);
return
filterMap
;
}
addFilterFromTextField
(
filterMap
,
filterName
){
let
field
=
this
.
element
.
querySelector
(
'
.
'
+
filterName
+
'
-field
'
);
if
(
field
.
value
!==
''
)
filterMap
.
set
(
filterName
,
[
field
.
value
]);
}
addFilterFromCheckboxes
(
filterMap
,
filterName
){
let
checkboxes
=
this
.
element
.
querySelectorAll
(
'
.
'
+
filterName
+
'
-field
'
);
let
value
=
[];
for
(
var
i
=
0
;
i
<
checkboxes
.
length
;
i
++
)
{
if
(
checkboxes
[
i
].
checked
)
value
.
push
(
checkboxes
[
i
].
value
);
//if (reset) checkboxes[i].checked = false;
}
if
(
value
.
length
>
0
)
filterMap
.
set
(
filterName
,
value
);
}
addFilterFromDropdownList
(
filterMap
,
filterName
){
let
field
=
this
.
element
.
querySelector
(
'
.
'
+
filterName
+
'
-field
'
);
let
value
=
field
.
options
[
field
.
selectedIndex
].
value
;
if
(
value
.
length
>
2
)
filterMap
.
set
(
filterName
,
[
value
]);
//if (reset) field.selectedIndex = 0;
}
addSpaceGroupFilter
(
filterMap
){
let
filterName
;
let
field
=
this
.
element
.
querySelector
(
'
#space-group-dropdown-list
'
);
let
type
=
field
.
options
[
field
.
selectedIndex
].
value
;
if
(
type
===
'
by-number
'
)
filterName
=
'
space-group-number
'
;
else
filterName
=
'
space-group-international-short-symbol
'
;
let
value
=
this
.
element
.
querySelector
(
'
.space-group-textfield
'
).
value
;
if
(
value
.
trim
()
!==
''
)
filterMap
.
set
(
filterName
,
[
value
]);
//if (reset) field.selectedIndex = 0;
}
addRangeFilter
(
filterMap
,
filterName
){
let
minField
=
document
.
querySelector
(
'
.
'
+
filterName
+
'
-min-field
'
);
let
maxField
=
document
.
querySelector
(
'
.
'
+
filterName
+
'
-max-field
'
);
let
value
=
'
:
'
;
//let label = 'Mass Density';
if
(
minField
.
value
!==
''
){
//label = minField.value+' < '+label;
value
=
minField
.
value
+
value
;
//if (reset) minField.value = '';
}
if
(
maxField
.
value
!==
''
){
//label += ' < '+maxField.value;
value
=
value
+
maxField
.
value
;
//if (reset) maxField.value = '';
}
if
(
value
!==
'
:
'
)
filterMap
.
set
(
filterName
,
value
);
}
addBandgapTypeFilter
(
filterMap
){
let
val
=
document
.
querySelector
(
'
input[name="band-gap-type"]:checked
'
).
value
;
filterMap
.
set
(
"
band-gap-type
"
,
val
);
}
addFiltersFromBoolCheckboxes
(
filterMap
,
boolFilters
){
boolFilters
.
forEach
(
filterName
=>
{
let
checkboxes
=
this
.
element
.
querySelectorAll
(
'
.
'
+
filterName
+
'
-field
'
);
//let value = [];
for
(
var
i
=
0
;
i
<
checkboxes
.
length
;
i
++
)
{
if
(
checkboxes
[
i
].
checked
){
//value.push(checkboxes[i].value);
filterMap
.
set
(
filterName
,
true
);
}
}
//if (value.length > 0) propsMap.set(propName, value);
});
}
setAddPropertiesListener
(
listener
)
{
this
.
addPropertiesListener
=
listener
;
}
}
// EXPORTS
module
.
exports
=
FilterPanel
;
/* To be implemented in the future
class MaxMinSlider{
constructor(){
this.element = document.createElement('div');
this.element.innerHTML = `
<svg class="maxminslider" xmlns="http://www.w3.org/2000/svg" width="100px" height="40px"
viewBox="0 0 100 40" >
<line class="slider-bar" x1="10" x2="90" y1="30" y2="30" stroke="blue"
stroke-width="4"/>
<circle class="min-btn" cx="10" cy="30" r="6" fill="black"/>
<text class="min-text maxminslider-text" x="10" y="10" text-anchor="start"></text>
<circle class="max-btn" cx="90" cy="30" r="6" fill="black"/>
<text class="max-text maxminslider-text" x="90" y="10" text-anchor="end"></text>
</svg>
`;
//this.bar = this.element.querySelector('.slider-bar');
this.svg = this.element.querySelector('svg');
this.minButton = this.element.querySelector('.min-btn');
this.minText = this.element.querySelector('.min-text');
this.maxButton = this.element.querySelector('.max-btn');
this.maxText = this.element.querySelector('.max-text');
this.BUTTON_R = 6;
this.minButtonDown = false;
this.minButtonInitX = null;
this.MIN_BUTTON_INIT_X = 10;
this.minX = 0;
this.maxButtonDown = false;
this.maxButtonInitX = null;
this.MAX_VALUE = 80;//this.MAX_BUTTON_INIT_X = 90;
this.maxX = this.MAX_VALUE;
console.log('minButton', this.minButton.getBoundingClientRect());
this._events();
}
_events() {
this.minButton.addEventListener( "mousedown", e => this.minButtonDown = true );
this.minButton.addEventListener( "mouseup", e => this.minButtonDown = false );
this.minButton.addEventListener( "mouseleave", e => this.minButtonDown = false );