Skip to content
GitLab
Commit 55d0fbab authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Merged new-search into master.

parents aaad5e23 318b396a
Pipeline #39342 passed with stages
in 6 seconds
Expand all Hide whitespace changes
Inline Side-by-side
client/bundle-es5.js
View file @ 55d0fbab
This diff is collapsed.
client/bundle.js
View file @ 55d0fbab
This diff is collapsed.
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+'esmaterials';
}
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/NewSearchMod.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">&nbsp; > &nbsp; <span>Results</span></span>
<span class="goto-page Overview">&nbsp; > &nbsp; <span>Overview</span></span>
<span class="Details">
&nbsp; > &nbsp;
......@@ -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">&nbsp;&nbsp;
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">&nbsp;&nbsp;
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 );