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
e03e48df
Commit
e03e48df
authored
Oct 28, 2018
by
Iker Hurtado
Browse files
Search filters box integration and improvement (2)
parent
aa9bb74f
Changes
4
Hide whitespace changes
Inline
Side-by-side
client/bundle.js
View file @
e03e48df
...
...
@@ -8097,8 +8097,10 @@
rootQueryObj
.
bool
.
must
.
push
(
this
.
_getESSimpleMatch
(
filterNameDef
,
values
,
false
)
);
}
else
{
// normal case
rootQueryObj
.
bool
.
must
.
push
(
this
.
_getESOperatorMatch
(
filterNameDef
,
values
,
false
)
);
console
.
log
(
this
.
_getESOperatorMatch
(
filterNameDef
,
values
,
false
)
);
//rootQueryObj.bool.must.push( this._getESOperatorMatch(filterNameDef, values, false) );
rootQueryObj
.
bool
.
must
.
push
(
this
.
_getESTermsArray
(
filterNameDef
,
values
)
);
//console.log(this._getESOperatorMatch(filterNameDef, values, false) );
}
});
...
...
@@ -8114,6 +8116,12 @@
};
}
_getESTermsArray
(
field
,
value
){
return
{
"
terms
"
:
{
[
field
]
:
value
}
};
}
_getESOperatorMatch
(
field
,
elements
,
and
=
true
){
let
elementsString
=
''
;
...
...
@@ -9295,7 +9303,8 @@
_paginationSearch
(){
this
.
esQueryObject
.
bool
.
must
[
1
].
match
.
system_type
=
this
.
currentSystemType
;
let
systemTypePosition
=
this
.
esQueryObject
.
bool
.
must
.
length
-
1
;
this
.
esQueryObject
.
bool
.
must
[
systemTypePosition
].
match
.
system_type
=
this
.
currentSystemType
;
let
page
=
this
.
matMap
.
get
(
this
.
currentSystemType
).
page
;
let
req
=
util
.
serverReqPOST
(
util
.
getSearchURL
()
+
'
?page=
'
+
page
+
...
...
@@ -9311,23 +9320,37 @@
}
initSearchTest
(
rootQueryObj
){
//this.resultsContainer.style.visibility = 'hidden';
this
.
matMap
.
clear
();
let
qqq
=
{
'
bool
'
:
{}
};
//qqq.bool.must = {"terms":{"crystal_system":{"operator":"or","query":"cubic"}}};
qqq
.
bool
.
must
=
{
"
terms
"
:{
"
crystal_system
"
:
[
"
hexagonal
"
,
"
cubic
"
]}};
console
.
log
(
'
SENDING:
'
,
JSON
.
stringify
(
qqq
));
console
.
log
(
'
:
'
,
qqq
.
bool
.
must
);
let
bulkReq
=
util
.
serverReqPOST
(
util
.
getSearchURL
()
+
'
?page=1
'
+
'
&per_page=
'
+
RESULTS_PER_PAGE
,
JSON
.
stringify
(
qqq
),
bulke
=>
{
let
bulkData
=
JSON
.
parse
(
bulke
.
target
.
response
);
console
.
log
(
'
GETTING:
'
,
bulkData
);
this
.
matMap
.
set
(
'
bulk
'
,
this
.
_createSystemTypeData
(
bulkData
,
1
,
bulke
.
target
.
status
===
200
));
LoadingPopup
.
hide
();
});
}
initSearch
(
rootQueryObj
){
//this.resultsContainer.style.visibility = 'hidden';
this
.
matMap
.
clear
();
this
.
currentSystemType
=
'
bulk
'
;
/*
let rootQueryObj = { 'bool' : {} };
rootQueryObj.bool.must = [];
rootQueryObj.bool.must.push( searchJson );
rootQueryObj.bool.must.push( { "match": {"system_type" : "bulk"} } );
*/
rootQueryObj
.
bool
.
must
.
push
(
{
"
match
"
:
{
"
system_type
"
:
"
bulk
"
}
}
);
console
.
log
(
'
SENDING:
'
,
JSON
.
stringify
(
rootQueryObj
));
console
.
log
(
'
:
'
,
rootQueryObj
.
bool
.
must
);
let
systemTypePosition
=
rootQueryObj
.
bool
.
must
.
length
-
1
;
this
.
esQueryObject
=
rootQueryObj
;
console
.
log
(
'
SENDING:
'
,
JSON
.
stringify
(
rootQueryObj
));
console
.
log
(
'
:
'
,
rootQueryObj
.
bool
.
must
);
LoadingPopup
.
show
();
//let oReq = util.serverReqPOST('http://enc-staging-nomad.esc.rzg.mpg.de/current/v1.0/esmaterials', postQuery, e => {
...
...
@@ -9359,11 +9382,20 @@
this
.
matMap
.
set
(
'
1D
'
,
this
.
_createSystemTypeData
(
oneDData
,
1
,
oneDe
.
target
.
status
===
200
));
this
.
_updateUI
(
this
.
current
SystemType
)
;
let
selected
SystemType
=
null
;
this
.
matMap
.
forEach
(
(
materials
,
systemType
)
=>
{
this
.
element
.
querySelector
(
'
#system-tab-
'
+
systemType
).
disabled
=
(
materials
.
total
===
0
);
if
(
selectedSystemType
===
null
&&
materials
.
total
>
0
)
{
selectedSystemType
=
systemType
;
this
.
element
.
querySelector
(
'
#system-tab-
'
+
this
.
currentSystemType
).
className
=
''
;
this
.
element
.
querySelector
(
'
#system-tab-
'
+
selectedSystemType
).
className
=
'
selected
'
;
this
.
currentSystemType
=
selectedSystemType
;
}
});
rootQueryObj
.
bool
.
must
[
systemTypePosition
].
match
.
system_type
=
this
.
currentSystemType
;
this
.
_updateUI
(
this
.
currentSystemType
);
//this.resultsContainer.style.visibility = 'visible';
LoadingPopup
.
hide
();
...
...
@@ -9550,12 +9582,9 @@
this
.
element
=
document
.
createElement
(
'
div
'
);
this
.
element
.
setAttribute
(
"
id
"
,
'
filter-panel-placeholder
'
);
this
.
element
.
innerHTML
=
`
<div class="field">
<div class="field-title"><span info-sys-data="space-group">Space group number</span></div>
<input type="text" class="space-group-number-field">
</div>
` <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>
...
...
@@ -9563,23 +9592,6 @@
<input type="checkbox" class="system-type-field" value="1D"> 1D<br>
</div>
<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="structure-type">Structure type</span></div>
<select class="structure-type-field" style="max-width: 174px">
<option></option>
</select>
</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">
...
...
@@ -9598,6 +9610,42 @@
<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>
...
...
@@ -9610,7 +9658,7 @@
</div>
<div class="field"
style="padding-top: 28px;"
>
<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>
...
...
@@ -9657,11 +9705,13 @@
getValues
(){
//let map = this.getPropsWithValueFromCurrentTab(false);
let
filterMap
=
new
Map
();
this
.
addFilterFromTextField
(
filterMap
,
'
space-group-number
'
);
this
.
addFilterFromCheckboxes
(
filterMap
,
'
system-type
'
);
this
.
addRangeFilter
(
filterMap
,
'
mass-density
'
);
this
.
addFilterFromDropdownList
(
filterMap
,
'
structure-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
,
...
...
@@ -9694,6 +9744,18 @@
//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
'
);
...
...
client/src/search-mod/FilterPanel.view.js
View file @
e03e48df
...
...
@@ -37,12 +37,9 @@ class FilterPanel {
this
.
element
=
document
.
createElement
(
'
div
'
);
this
.
element
.
setAttribute
(
"
id
"
,
'
filter-panel-placeholder
'
);
this
.
element
.
innerHTML
=
`
<div class="field">
<div class="field-title"><span info-sys-data="space-group">Space group number</span></div>
<input type="text" class="space-group-number-field">
</div>
` <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>
...
...
@@ -50,23 +47,6 @@ class FilterPanel {
<input type="checkbox" class="system-type-field" value="1D"> 1D<br>
</div>
<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="structure-type">Structure type</span></div>
<select class="structure-type-field" style="max-width: 174px">
<option></option>
</select>
</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">
...
...
@@ -85,6 +65,42 @@ class FilterPanel {
<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>
...
...
@@ -97,7 +113,7 @@ class FilterPanel {
</div>
<div class="field"
style="padding-top: 28px;"
>
<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>
...
...
@@ -144,11 +160,13 @@ class FilterPanel {
getValues
(){
//let map = this.getPropsWithValueFromCurrentTab(false);
let
filterMap
=
new
Map
();
this
.
addFilterFromTextField
(
filterMap
,
'
space-group-number
'
);
this
.
addFilterFromCheckboxes
(
filterMap
,
'
system-type
'
);
this
.
addRangeFilter
(
filterMap
,
'
mass-density
'
);
this
.
addFilterFromDropdownList
(
filterMap
,
'
structure-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
,
...
...
@@ -181,6 +199,18 @@ class FilterPanel {
//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
'
);
...
...
client/src/search-mod/MaterialList.view.js
View file @
e03e48df
...
...
@@ -135,7 +135,8 @@ class MaterialList {
_paginationSearch
(){
this
.
esQueryObject
.
bool
.
must
[
1
].
match
.
system_type
=
this
.
currentSystemType
;
let
systemTypePosition
=
this
.
esQueryObject
.
bool
.
must
.
length
-
1
;
this
.
esQueryObject
.
bool
.
must
[
systemTypePosition
].
match
.
system_type
=
this
.
currentSystemType
;
let
page
=
this
.
matMap
.
get
(
this
.
currentSystemType
).
page
;
let
req
=
util
.
serverReqPOST
(
util
.
getSearchURL
()
+
'
?page=
'
+
page
+
...
...
@@ -151,23 +152,37 @@ class MaterialList {
}
initSearchTest
(
rootQueryObj
){
//this.resultsContainer.style.visibility = 'hidden';
this
.
matMap
.
clear
();
let
qqq
=
{
'
bool
'
:
{}
};
//qqq.bool.must = {"terms":{"crystal_system":{"operator":"or","query":"cubic"}}};
qqq
.
bool
.
must
=
{
"
terms
"
:{
"
crystal_system
"
:
[
"
hexagonal
"
,
"
cubic
"
]}};
console
.
log
(
'
SENDING:
'
,
JSON
.
stringify
(
qqq
));
console
.
log
(
'
:
'
,
qqq
.
bool
.
must
);
let
bulkReq
=
util
.
serverReqPOST
(
util
.
getSearchURL
()
+
'
?page=1
'
+
'
&per_page=
'
+
RESULTS_PER_PAGE
,
JSON
.
stringify
(
qqq
),
bulke
=>
{
let
bulkData
=
JSON
.
parse
(
bulke
.
target
.
response
);
console
.
log
(
'
GETTING:
'
,
bulkData
);
this
.
matMap
.
set
(
'
bulk
'
,
this
.
_createSystemTypeData
(
bulkData
,
1
,
bulke
.
target
.
status
===
200
));
LoadingPopup
.
hide
();
});
}
initSearch
(
rootQueryObj
){
//this.resultsContainer.style.visibility = 'hidden';
this
.
matMap
.
clear
();
this
.
currentSystemType
=
'
bulk
'
;
/*
let rootQueryObj = { 'bool' : {} };
rootQueryObj.bool.must = [];
rootQueryObj.bool.must.push( searchJson );
rootQueryObj.bool.must.push( { "match": {"system_type" : "bulk"} } );
*/
rootQueryObj
.
bool
.
must
.
push
(
{
"
match
"
:
{
"
system_type
"
:
"
bulk
"
}
}
);
console
.
log
(
'
SENDING:
'
,
JSON
.
stringify
(
rootQueryObj
));
console
.
log
(
'
:
'
,
rootQueryObj
.
bool
.
must
);
let
systemTypePosition
=
rootQueryObj
.
bool
.
must
.
length
-
1
;
this
.
esQueryObject
=
rootQueryObj
;
console
.
log
(
'
SENDING:
'
,
JSON
.
stringify
(
rootQueryObj
));
console
.
log
(
'
:
'
,
rootQueryObj
.
bool
.
must
);
LoadingPopup
.
show
();
//let oReq = util.serverReqPOST('http://enc-staging-nomad.esc.rzg.mpg.de/current/v1.0/esmaterials', postQuery, e => {
...
...
@@ -199,11 +214,20 @@ class MaterialList {
this
.
matMap
.
set
(
'
1D
'
,
this
.
_createSystemTypeData
(
oneDData
,
1
,
oneDe
.
target
.
status
===
200
));
this
.
_updateUI
(
this
.
current
SystemType
)
;
let
selected
SystemType
=
null
;
this
.
matMap
.
forEach
(
(
materials
,
systemType
)
=>
{
this
.
element
.
querySelector
(
'
#system-tab-
'
+
systemType
).
disabled
=
(
materials
.
total
===
0
);
if
(
selectedSystemType
===
null
&&
materials
.
total
>
0
)
{
selectedSystemType
=
systemType
;
this
.
element
.
querySelector
(
'
#system-tab-
'
+
this
.
currentSystemType
).
className
=
''
;
this
.
element
.
querySelector
(
'
#system-tab-
'
+
selectedSystemType
).
className
=
'
selected
'
;
this
.
currentSystemType
=
selectedSystemType
;
}
});
rootQueryObj
.
bool
.
must
[
systemTypePosition
].
match
.
system_type
=
this
.
currentSystemType
;
this
.
_updateUI
(
this
.
currentSystemType
);
//this.resultsContainer.style.visibility = 'visible';
LoadingPopup
.
hide
();
...
...
client/src/search-mod/NewSearchMod.js
View file @
e03e48df
...
...
@@ -492,8 +492,10 @@ class NewSearchMod {
rootQueryObj
.
bool
.
must
.
push
(
this
.
_getESSimpleMatch
(
filterNameDef
,
values
,
false
)
);
}
else
{
// normal case
rootQueryObj
.
bool
.
must
.
push
(
this
.
_getESOperatorMatch
(
filterNameDef
,
values
,
false
)
);
console
.
log
(
this
.
_getESOperatorMatch
(
filterNameDef
,
values
,
false
)
);
//rootQueryObj.bool.must.push( this._getESOperatorMatch(filterNameDef, values, false) );
rootQueryObj
.
bool
.
must
.
push
(
this
.
_getESTermsArray
(
filterNameDef
,
values
)
);
//console.log(this._getESOperatorMatch(filterNameDef, values, false) );
}
});
...
...
@@ -509,6 +511,12 @@ class NewSearchMod {
};
}
_getESTermsArray
(
field
,
value
){
return
{
"
terms
"
:
{
[
field
]
:
value
}
};
}
_getESOperatorMatch
(
field
,
elements
,
and
=
true
){
let
elementsString
=
''
;
...
...
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