Skip to content

GitLab

Commits (58)
Expand all Hide whitespace changes
Inline Side-by-side
client/bundle.js
View file @ c43f397c
This diff is collapsed.
client/conf.js
View file @ c43f397c
window.nomadEnv = {
//apiRoot: "https://labdev-nomad.esc.rzg.mpg.de/dev/nomad/encyclopedia-api/",
//apiRoot: "https://nomad-lab.eu/dev/rae/enc-search/api/encyclopedia/",
apiRoot: "https://nomad-lab.eu/prod/rae/beta/api/encyclopedia/",
//apiRoot: "https://nomad-lab.eu/prod/rae/api/encyclopedia/",
apiRoot: "http://localhost:8000/fairdi/nomad/latest/api/encyclopedia/",
//apiRoot: "http://localhost:8000/fairdi/nomad/latest/api/encyclopedia/",
keycloakBase: 'https://nomad-lab.eu/fairdi/keycloak/auth/',
keycloakRealm: 'fairdi_nomad_test',
keycloakClientId: 'nomad_gui_dev'
......
client/css/styles.css
View file @ c43f397c
......@@ -151,7 +151,6 @@
}
#flagging-form-popup button{
/*width: 200px;*/
margin: 20px 0 10px;
background-color: #EEE;
color: #777;
......@@ -235,6 +234,13 @@ header{ background-color: #23356d; }
flex-grow: 1;
}
.user-msg-box{
color: #E56400;
font-size: 1.2em;
font-weight: bold;
}
div#logo-header {
width: 1200px; margin: 0 auto;
/* padding-top: 10px;padding-bottom: 56px;*/
......@@ -248,7 +254,11 @@ div#logo-header img{ vertical-align: middle; }
div#second-header, #breadcrumb-placeholder{
width: 1200px; margin: 0 auto;}
div#second-header{ padding: 16px 0;}
div#second-header{
display: flex;
justify-content: space-between;
padding: 16px 0;
}
#breadcrumb-placeholder{
font-style: normal;
......@@ -347,26 +357,52 @@ 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;*/
align-items: flex-start;
}
.search-title{
color: #E56400; font-size: 15pt; font-weight: bold;
text-align: center;
}
.searchline{
.search-filter-side{
background-color: white;/* background-color: #DDD;*/
width: 260px;
/*padding: 16px;*/
}
.search-option {
padding: 10px 0px;
font-size: 0.85em;
.search-main-side{
transition: opacity 0.8s;
}
.search-option>input {
margin-top:-0px;
vertical-align: middle;
.search-box {
width: 742px;
display: flex;
justify-content: center; /*space-between;*/
align-items: flex-start; /*space-between;*/
/*justify-content: center; [>space-between;<]*/
}
.search-query-wrapper{
width: 85%;
background-color: white; border: 2px solid #E56400;
position: relative;
flex-grow: 14;
background-color: white;
border: 2px solid #E56400;
padding: 8px 6px;
box-sizing: border-box;
min-height: 50px;
}
.clean-btn{
padding: 6px;
background-color: white;
......@@ -377,68 +413,89 @@ div.title span.unfolded::before{
color: #E56400;
}
.search-btn{
width: 94px;
.search-btn {
display: block;
background-color: #E56400;
color: white;
padding: 16px;
padding: 10px;
flex: 0 0 100px;
box-sizing: border-box;
height: 50px;
}
.search-query-symbol{
font-size: 1.3em;
font-size: 1.0em;
font-weight: bold;
}
.add-buttons{
display: inline-block;
background-color: #DDD;
width: 100%;
margin: 40px 0 0;
padding: 20px 0;
text-align: center;
margin: 0px 0 0;
background-color: #CFCFCF;
}
.bool-buttons {
color: #555;
}
.bool-buttons button{
border: 1px solid #BBB;
color: #BBB;
cursor: inherit;
border: 1px solid #777;
background-color: #EEE;
text-align: center;
}
.tab-buttons button{
display: inline-block;
background-color: #EEE;
padding: 10px 30px;
margin: 0 10px;
display: inline-flex;
align-items: center;
justify-content: space-between;
border-right: 1px solid #BBB;
background-color: #CFCFCF;
width: 140px;
padding: 15px 20px;
font-size: .9em;
color: #777;
border: 1px solid #777;
color: #555;
text-align: center;
}
/*.tab-buttons button:last-child {*/
/*border-right: none;*/
/*}*/
.tab-buttons button#add-tab-selected{
background-color: #DDD;
color: #E56400;
border-color: #E56400;
font-weight: bold;
}
.tab-buttons button:disabled{
color: #BBB;
border-color: #BBB;
color: #AAA;
cursor: default;
}
.triangle-container{
width: 115px;
display: inline-block;
margin: 0px 10px;
text-align: center;
}
.triangle{
display: inline-block;
width: 0; height: 0;
border-right: 30px solid transparent;
border-top: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid #DDD;
width: 0;
height: 0;
margin: -10px 0px;
border-right: 25px solid transparent;
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-bottom: 25px solid #DDD;
}
.add-panel {
padding: 20px 10px;
background-color: #DDD;
}
.add-panel button{
background-color: #EEE;
......@@ -452,78 +509,168 @@ div.title span.unfolded::before{
cursor: default;
}
#formula-box{
text-align: center;
/* Formula and Material name boxes */
.TextBox {
display: flex;
justify-content: center;
text-align: left;
background-color: #DDD;
padding: 40px 0;
}
.formula-text-field, .material-name-text-field{
.TextBox input[type=text] {
padding: 10px;
border: 0;
font-size: 0.9em;
width: 60%;
box-sizing: border-box;
width: 580px;
}
.adding-formula-btn, .adding-material-name-btn{
padding: 9px;
border: 1px solid #999;
/*
.textfield-composition{
padding: 10px;
border: 0;
font-size: 0.9em;
box-sizing: border-box;
width: 100%;
}*/
/* Autocomplete components */
.AutocompleteTextField{
display: inline-block;
}
.AutocompleteTextField-dropdown, .AutocompleteMultiselectTextfield-dropdown{
font-size: 0.9em;
position: absolute;
z-index: 99;
}
#search-properties-box{
background-color: #DDD;
padding: 4px;
height: 330px;
.AutocompleteTextField-dropdown > div, .AutocompleteMultiselectTextfield-dropdown > div {
padding: 2px 10px 2px 10px;
cursor: pointer;
border: 1px solid transparent;
}
.props-box-tabs-wrapper{
background-color: #EEE;
height: 100%;
.AutocompleteMultiselectTextfield-dropdown > div {
display: flex;
align-items: center;
}
.properties-box-tabs div{
padding: 20px;
font-size: 0.9em;
.autocomplete-active {
border-color: #E56400 !important;
}
border-bottom: 1px solid #DDD;
background-color: #EEE;
.AutocompleteMultiselectTextfield-selected-box{
padding-top: 5px;
}
.selectedItemLabel{
display: inline-flex;
align-items: center;
border-radius: 10px;
border: 1px solid #E56400;
height: 1.2rem;
padding: 4px 8px;
margin-right: 8px;
margin-top: 8px;
cursor: pointer;
text-align: center;
}
.selectedItemLabel>img{
margin-left: 0.5rem;
}
.properties-box-tabs div.props-tab-selected{
font-weight: bold;
color: #E56400;
/* Material name autocomplete */
.material-name-autocomplete-textfield{
width: 580px;
}
.material-name-autocomplete-dropdown{
background-color: #DDD;
box-shadow: 1px 1px 4px gray;
}
.props-tab-panel{
padding: 10px 60px;
font-size: 0.8em;
display: none;
/* Autocomplete multiselect */
.AutocompleteMultiselectTextfield-dropdown {
width: 200px;
background-color: white;
box-shadow: 0 1px 2px #E56400;
}
.properties-box-enter-button{
text-align: right;
/* To remove
.autocomplete-em {
font-weight: bold;
}
.properties-box-enter-button button{
margin: 8px 20px;
.autocomplete-items-strukturbericht, .autocomplete-items-structuretype{
margin-left: 0px;
width: 220px;
} */
.adding-formula-btn, .adding-name-btn{
padding: 9px;
border: 1px solid #999;
}
/* equivalent to view-box */
.filter-section-box{
margin-bottom: 20px;
}
.filter-section-box input[type="text"]{
box-sizing: border-box;
width: 200px;
padding: 6px;
border: 1px solid #DDD;
}
.field{
margin-bottom: 16px;
.filter-section-title{
display: flex;
align-items: center;
justify-content: center;
color: white; padding: 10px 0;
font-size: 12pt;
background-color: #E56400;
padding: 10px;
}
.filter-quantity-box {
margin-bottom: 12px;
padding: 5px 15px;
}
.filter-quantity-box > * {
transition: opacity 0.8s;
}
.field-title{
font-size: 1.1em;
color: #E56400;
font-size: 1em;
padding: 10px 0;
font-weight: bold;
}
input[type='range'] {
margin: 0;
-webkit-appearance: none;
......@@ -567,6 +714,17 @@ background-image: -webkit-linear-gradient(top, #777, #AAA, #777);
#searchbar #searchline{ text-align: center; }
.search-option {
padding-top: 10px;
padding-bottom: 0;
font-size: 0.85em;
}
.search-option>input {
margin-top:-0px;
vertical-align: middle;
}
#searchbar input[type=text]{
padding: 8px 16px; height: 23px; width: 600px;
background: #FFF; border: 0;
......@@ -589,10 +747,20 @@ background-image: -webkit-linear-gradient(top, #777, #AAA, #777);
}
#searchbtn:disabled { }
.search-labels{width: 62%; margin: 10px auto;}
span.search-label{ display: inline-block; margin: 0 8px;
.search-labels {
width: 62%;
margin: 10px auto;
}
.search-label {
color: #555;
}
span.search-label {
display: inline-block; margin: 0 8px;
background-color: #E4E4E4; border: 0;
padding: 4px; }
padding: 4px;
padding-left: 6px;
}
img.remove-label{ cursor: pointer; }
......@@ -607,9 +775,8 @@ img.remove-label{ cursor: pointer; }
#elementable{width:690px; position: relative;
padding: 0 26px;
margin: 0 auto 60px;
background-color: #DDD;}
margin: 0 auto 0;
}
.element-info{position: absolute;
display: none;
......@@ -627,8 +794,8 @@ background-color: #DDD;}
}
#elementable table#pt-main{
padding-top: 40px;
color: #333; border: 0;
color: #333;
border: 0;
}
#elementable table#pt-laac{
......@@ -700,37 +867,48 @@ background-color: #DDD;}
#elementable td.el-selected{ background-color: black;
color: #FFF; }
div#specialRows{margin: 30px 40px;}
div#specialRows{margin: 20px 40px;}
.legend{ text-align: center; padding: 40px 0;}
.legend {
text-align: center;
padding-top: 16px;
padding-bottom: 20px;
}
.legend div{
display: inline-block; color: black;
padding: 2px 12px; margin: 4px 0;
padding: 2px 12px;
margin: 4px 0;
}
#matlist{ width: 690px; margin: 0 auto 80px;}
.MaterialList{ /*width: 690px; margin: 0 auto 80px;*/
margin-top: 25px;
}
/* #paginationWg erased*/
#matlist .formula {
.MaterialList .formula {
padding: 20px 0 4px; font-size: 1.1em;
background-color: #EEE; border-bottom: 1px solid #AAA;
}
#matlist .mat-row { font-size: .9em; cursor: pointer;}
#matlist td { padding: 2px 0;}
.MaterialList .mat-row { font-size: .9em; cursor: pointer;}
.MaterialList td { padding: 2px 0;}
#matlist .not-found{ font-size: 1.6em; color: #E56400;
.MaterialList .not-found{ font-size: 1.6em; color: #E56400;
text-align: center; padding: 80px 0; }
#matlist .pag-header{ font-size: 1.0em;padding: 10px 12px 24px;text-align: center;}
.MaterialList .results-total{text-align: center;}
.MaterialList .pag-header{ font-size: 1.0em;padding: 10px 12px 24px;text-align: center;}
span.prevButton{ display: inline-block; cursor: pointer;}
span.page{ display: inline-block; }
span.nextButton{ display: inline-block; cursor: pointer;}
.mat-list-container table{
margin: auto;
width: 100%;/*width: 96%;*/
}
/*#paginationWg .left { float: left }
#paginationWg .right { float: right }*/
......@@ -744,7 +922,6 @@ span.nextButton{ display: inline-block; cursor: pointer;}
}
navTreeWrapper
.node-selected{
font-weight: bold;
......@@ -1224,6 +1401,58 @@ text.structure-viewer-legend-labels{
font-size: 16px;
}
#syntax-error{
visibility: hidden;
display: flex;
align-items: center;
position: absolute;
height: 1.5rem;
color: white;
background-color: #E56400;
left: -2px;
bottom: 100%;
padding: 0.1rem 0.5rem;
}
.value-checkbox {
margin-right: 0.5rem;
}
.tab-buttons>button>img.search-fold-icon {
display: inline-block;
width: 15px;
height: 15px;
visibility: hidden;
pointer-events: none;
}
.tab-buttons>button#add-tab-selected>img.search-fold-icon {
visibility: visible;
}
.composition {
}
#composition-title {
box-sizing: border-box;
height: 50px;
width: 120px;
flex: 0 0 120px;
}
.restricted-search-option {
margin-top: -20px;
margin-bottom: 10px;
}
#missing-prompt{
margin-top: 0.5rem;
background-color: #E56400;
color: white;
padding: 16px;
display: none;
}
/*
.tooltip {
visibility: hidden;
......
client/index.html
View file @ c43f397c
......@@ -71,17 +71,19 @@
</header>
<div id="second-header">
<div style="float: left; width: 60%;">
<div>
<a href=""> <img src="img/NOMADEncyclopedia.png" /></a>
</div>
<div style="float: right; width: 30%;text-align: right">
<div class="user-msg-box"></div>
<div style="text-align: right">
<div id="info-sys-switch-box" >
Additional information &nbsp;
<!--<input id="info-sys-switch" type="checkbox" />-->
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="breadcrumb-placeholder" ></div>
......
client/infosys.json
View file @ c43f397c
......@@ -22,7 +22,7 @@
"comment": "not required",
"text": "Basis functions that are used to solve the Kohn-Sham equation."
},
"basis set type": {
"basis_set": {
"comment": "links to defining pages for every possible entry.",
"link": "https://en.wikipedia.org/wiki/Basis_set_(chemistry)",
"text": "Representation of Kohn\u2013Sham states.",
......@@ -158,7 +158,7 @@
"comment": "explaining that this is the volume of the primitive unit cell",
"text": "Volume of the primitive unit cell."
},
"code name": {
"code_name": {
"comment": "askhl: Program names about which I am not sure about are marked with leading question mark. Present names are those that are explicitly used e.g. as fixedStartValues in parsers (obtained from grep).",
"link": "https://en.wikipedia.org/wiki/List_of_quantum_chemistry_and_solid-state_physics_software",
"text": "Name of scientific software (code) used for the calculation.",
......@@ -305,7 +305,7 @@
}
}
},
"crystal system": {
"crystal_system": {
"comment": "to explaining page for every crystal system (wikipedia has pages for crystal systems, but hexagonal and trigonal are treated on the same page, so two links go to that page on purpose. --askhl)",
"link": "https://en.wikipedia.org/wiki/Crystal_system",
"values": {
......@@ -416,7 +416,7 @@
"num": "space group"
}
},
"functional type": {
"functional_type": {
"comment": "general explanation and link to defining or explaining page for every functional type",
"text": "Type of exchange\u2013correlation functional.",
"values": {
......@@ -474,11 +474,11 @@
}
}
},
"has band structure": {
"has_band_structure": {
"comment": "can be shown in the header as general explanation for all calculations",
"text": "Search for calculations that contain an electronic band structure."
},
"has dos": {
"has_dos": {
"comment": "can be shown in the header as general explanation for all calculations",
"text": "Search for calculations that contain a density of states."
},
......@@ -486,7 +486,7 @@
"comment": "can be shown in the header as general explanation for all calculations",
"text": "Search for calculations that contain a fermi surface."
},
"has thermal properties": {
"has_thermal_properties": {
"comment": "can be shown in the header as general explanation for all calculations",
"text": "Search for calculations that contain thermal properties."
},
......@@ -604,7 +604,7 @@
"comment": "",
"text": "Parameter specifying the shape of the distribution for the given smearing kind."
},
"space group": {
"space_group_number": {
"comment": "general explanation and link to explaining page for every space group.",
"link": "https://en.wikipedia.org/wiki/Space_group",
"text": "The space group is defined by the translational symmetry of a crystal, together with its point symmetries.",
......@@ -619,11 +619,18 @@
"specific heat cv": {
"text": "Temperature dependence of the heat capacity per unit cell at constant volume."
},
"structure type": {
"structure_type": {
"comment": "general explanation and link to explaining pages for every structure type (will fix this once the possible values of this are known. --askhl)",
"text": "Classification according to known structure types."
},
"system type": {
"structure_prototype": {
"text": "Formula for the prototypical material having this structure."
},
"strukturbericht": {
"text": "Classification of the material according to the historically grown 'strukturbericht'.",
"link": "https://en.wikipedia.org/wiki/Strukturbericht_designation"
},
"material_type": {
"comment": "explain how every structure type is defined in our system (need information about what system type can be. Also this may not make so much sense while we only have bulk. --askhl)",
"text": "Classification of materials into different high-level categories, based on their atomic configurations.",
"values": {
......
client/src/common/LoadingPopup.js
View file @ c43f397c
......@@ -30,9 +30,6 @@ let loadingPopup = document.querySelector('#loading-popup');
let loadSet = new Set();
function show(id) {
if (!window.allowNewLoadPopup) {
return;
}
loadSet.add(id, true);
let ttRect = loadingPopup.getBoundingClientRect();
let leftPos = (window.innerWidth - ttRect.width)/2;
......
client/src/common/Router.js
View file @ c43f397c
......@@ -45,14 +45,10 @@ function route() {
if (hashHistory.length && historyLength == length) {
if (hashHistory[hashHistory.length - 2] == hash) {
hashHistory = hashHistory.slice(0, -1);
LoadingPopup.reset();
window.allowNewLoadPopup = false;
} else {
window.allowNewLoadPopup = true;
hashHistory.push(hash);
}
} else {
window.allowNewLoadPopup = true;
hashHistory.push(hash);
historyLength = length;
}
......@@ -79,6 +75,8 @@ function route() {
else command = hashPath;
if (routes.has(command)) {
// When entering a new page, reset the spinner.
LoadingPopup.reset();
routes.get(command)(param, subparam);
}
};
......
client/src/main.js
View file @ c43f397c
......@@ -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');//require('./search-mod/SearchMod.js');
let UserGuidance = require('./common/UserGuidance.js');
let DataStore = require('./material-mod/DataStore.js');
......@@ -40,7 +40,6 @@ let DataStore = require('./material-mod/DataStore.js');
// main DOM elements
let contentElement = document.getElementById('content');
let titleElement = document.querySelector('title');
window.allowNewLoadPopup = true;
var getUrl = window.location;
var guiRoot = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname;
......@@ -219,6 +218,7 @@ let searchMod;
let MaterialModule;
let materialModDOM;
let currentModule; // current module DOM being shown
let initialized = false; // Has the search been initialized
function showModuleDOM(module){
......@@ -260,15 +260,11 @@ PubSub.subscribe('show-search', search => {
titleElement.innerHTML = 'NOMAD Encyclopedia - Search';
breadcrumb.setState('search', search);
if (search === undefined) {
//LoadingPopup.reset();
searchMod.showSearchPage();
} else if (search === 'results') {
searchMod.showResultsPage();
}
showModuleDOM(searchMod.element);
if (!initialized) {
searchMod.sendQuery();
}
initialized = true
});
......
client/src/material-mod/DataStore.js
View file @ c43f397c
......@@ -33,6 +33,7 @@ let calcMap = new Map();
let ready = false;
let hasThermal;
let hasElecStructure;
let missing = false;
function setMaterialData(dataFromAPI){
materialData = dataFromAPI;
......@@ -42,6 +43,14 @@ function getMaterialData(){
return materialData;
}
function setMissing(value) {
missing = value;
}
function getMissing() {
return missing;
}
function setIdealizedStructure(structure){
idealizedStructure = structure;
}
......@@ -129,6 +138,9 @@ function getGroupId(leafId) {
function isReady(matId) {
if (materialData !== undefined) {
if (missing && matId == materialData.material_id) {
return true;
}
if (idealizedStructure !== undefined) {
if (calcs !== undefined) {
if (groups !== undefined) {
......@@ -147,6 +159,7 @@ function clear() {
calcs = undefined;
groups = undefined;
idealizedStructure = undefined;
missing = false;
}
function isInAnyGroup(calcId){
......@@ -192,6 +205,8 @@ module.exports = {
isInAnyNotDisabledGroup,
getGroupLeafId,
isReady,
setMissing,
getMissing,
clear,
setIdealizedStructure,
getIdealizedStructure,
......
client/src/material-mod/MaterialMod.js
View file @ c43f397c
......@@ -48,6 +48,9 @@ class MaterialMod {
constructor(){
this.element = document.createElement('div');
this.element.setAttribute("id",'material-module');
this.missingPrompt = document.createElement('div');
this.missingPrompt.id = "missing-prompt";
this.element.appendChild(this.missingPrompt)
this.overview = new Overview();
this.overview.attachAndSetEvents(this.element);
......@@ -138,30 +141,45 @@ class MaterialMod {
* Called upon loading the overview page for a specific material.
*/
_loadMaterial(matId, view) {
// Set to loading mode
this._setView(view);
let show = () => {
let materialData = DataStore.getMaterialData();
let idealizedStructure = DataStore.getIdealizedStructure();
// Cell viewer needs to be set only after page is visible so that it is
// resized correctly.
if (this.currentDetailView !== null) {
this.currentDetailView.load();
if (view === util.MAT_VIEW.structure) {
this._setCellViewer(this.structureDetails.vizBox);
}
if (view === util.MAT_VIEW.methodology) {
this.methodologyDetails.updateSelection();
// Show error message if resource not found
const missingPrompt = document.getElementById("missing-prompt");
if (DataStore.getMissing()) {
// Hide the current view
if (this.currentDetailView === null) {
this.overview.element.style.display = 'none';
} else {
this.currentDetailView.element.style.display = 'none';
}
const msg = `
Could not find information for material with identifier ${matId}.
Either the material does not exist or is not yet visible in the Encyclopedia.
`;
missingPrompt.textContent = msg;
missingPrompt.style.display = "block";
} else {
document.querySelector('title').innerHTML =
'NOMAD Encyclopedia - '+util.getMaterialTitle(materialData, false);
this.overview.setMaterialData();
let name = (materialData.material_name === null ? materialData.formula : materialData.material_name);
this.overview.setCalcsData(markedTreeLeafs);
this._setCellViewer(this.overview.vizBox);
missingPrompt.style.display = "none";
this._setView(view);
let materialData = DataStore.getMaterialData();
let idealizedStructure = DataStore.getIdealizedStructure();
// Cell viewer needs to be set only after page is visible so that it is
// resized correctly.
if (this.currentDetailView !== null) {
this.currentDetailView.load();
if (view === util.MAT_VIEW.structure) {
this._setCellViewer(this.structureDetails.vizBox);
}
if (view === util.MAT_VIEW.methodology) {
this.methodologyDetails.updateSelection();
}
} else {
document.querySelector('title').innerHTML =
'NOMAD Encyclopedia - '+util.getMaterialTitle(materialData, false);
this.overview.setMaterialData();
let name = (materialData.material_name === null ? materialData.formula : materialData.material_name);
this.overview.setCalcsData(markedTreeLeafs);
this._setCellViewer(this.overview.vizBox);
}
}
};
let isReady = () => {
......@@ -175,6 +193,7 @@ class MaterialMod {
// If material is already loaded, nothing fetched.
if (!isReady()) {
DataStore.clear();
this.overview.clearCalcsData();
LoadingPopup.reset();
this.structureViewer.axisCheckbox.checked = true;
this.structureViewer.bondsCheckbox.checked = true;
......@@ -187,9 +206,16 @@ class MaterialMod {
// Request basic material data
LoadingPopup.show("load_basic");
util.serverReq(util.getMaterialURL(matId), e1 => {
let materialData = JSON.parse(e1.target.response);
DataStore.setMaterialData(materialData);
util.materialId = materialData.material_id;
// Check for error
let stat = e1.target.status;
if (stat >= 400 && stat < 500) {
DataStore.setMissing(true);
DataStore.setMaterialData({material_id: matId});
} else {
let materialData = JSON.parse(e1.target.response);
DataStore.setMaterialData(materialData);
util.materialId = materialData.material_id;
}
isReady();
LoadingPopup.hide("load_basic");
});
......@@ -197,32 +223,50 @@ class MaterialMod {
// Request basic details for all calculations related to this material
LoadingPopup.show("load_calculations");
util.serverReq(util.getMaterialXsURL('calculations', matId), e4 => {
let calculations = JSON.parse(e4.target.response);
let representatives = calculations.representatives;
let idealId = representatives.idealized_structure;
DataStore.setCalculations(calculations);
// Get the idealized structure
//util.serverReq(util.getMaterialXsURL('idealized_structure', matId), e2 => {
let query = JSON.stringify({properties: ["idealized_structure"]});
LoadingPopup.show("load_idealized");
util.serverReqPOST(util.getMaterialCalcURL(matId, idealId), query, e2 => {
let struct = JSON.parse(e2.target.response).idealized_structure;
DataStore.setIdealizedStructure(struct);
this.structureViewer.load(struct);
document.getElementById('structure-ov').style.visibility = 'visible';
document.getElementById('methodology-ov').style.visibility = 'visible';
isReady();
LoadingPopup.hide("load_idealized");
});
// Check for error
let stat = e4.target.status;
if (stat >= 400 && stat < 500) {
DataStore.setMissing(true);
} else {
let calculations = JSON.parse(e4.target.response);
let representatives = calculations.representatives;
let idealId = representatives.idealized_structure;
DataStore.setCalculations(calculations);
// Get the idealized structure
//util.serverReq(util.getMaterialXsURL('idealized_structure', matId), e2 => {
let query = JSON.stringify({properties: ["idealized_structure"]});
LoadingPopup.show("load_idealized");
util.serverReqPOST(util.getMaterialCalcURL(matId, idealId), query, e2 => {
// Check for error
let stat = e2.target.status;
if (stat >= 400 && stat < 500) {
DataStore.setMissing(true);
} else {
let struct = JSON.parse(e2.target.response).idealized_structure;
DataStore.setIdealizedStructure(struct);
this.structureViewer.load(struct);
document.getElementById('structure-ov').style.visibility = 'visible';
document.getElementById('methodology-ov').style.visibility = 'visible';
}
isReady();
LoadingPopup.hide("load_idealized");
});
}
LoadingPopup.hide("load_calculations");
});
// Request groups
LoadingPopup.show("load_groups");
util.serverReq(util.getMaterialXsURL('groups', matId), e5 => {
let groups = JSON.parse(e5.target.response);
DataStore.setGroups(groups);
// Check for error
let stat = e5.target.status;
if (stat >= 400 && stat < 500) {
DataStore.setMissing(true);
} else {
let groups = JSON.parse(e5.target.response);
DataStore.setGroups(groups);
}
isReady();
LoadingPopup.hide("load_groups");
});
......
client/src/material-mod/Overview.view.js
View file @ c43f397c
......@@ -71,11 +71,11 @@ class Overview {
<span class="material-type-field" ></span>
</div>
<div class="space-group-field" style="display: none">
<b><span info-sys-data="space-group">Space group</span></b>:
<b><span info-sys-data="space_group_number">Space group</span></b>:
<span class="space-group-value" ></span>
</div>
<div class="structure-type-field" style="display: none">
<b><span info-sys-data="structure-type">Structure type</span></b>:
<b><span info-sys-data="structure_type">Structure type</span></b>:
<span class="structure-type-value" ></span>
</div>
</div>
......@@ -109,11 +109,11 @@ class Overview {
<div class="info-fields-label" > Available calculations </div>
<div style="float: left; width: 45%" >
<b><span info-sys-data="functional-type">Functional</span></b>
<b><span info-sys-data="functional_type">Functional</span></b>
<div class="functional-field" > </div>
</div>
<div style="float: right; width: 45%" >
<b><span info-sys-data="code-name">Code</span></b>
<b><span info-sys-data="code_name">Code</span></b>
<div class="code-field"> </div>
</div>
<div style="clear: both;"></div>
......@@ -322,7 +322,7 @@ class Overview {
this.spaceGroupValue.textContent = data.space_group_number+
' ('+data.space_group_international_short_symbol+')';
InfoSys.addElementToInfoSystem(this.spaceGroupValue,
'space-group.value:'+data.space_group_number);
'space_group_number.value:' + data.space_group_number);
}
if (this.similarityFinder) {
......@@ -358,6 +358,14 @@ class Overview {
return false;
}
clearCalcsData() {
this.materialId = null;
this.calcMaterialId = null;
let bsLoaded = false;
let phononLoaded = false;
let dosLoaded = false;
}
setCalcsData(markedTreeLeafs) {
let matData = DataStore.getMaterialData();
let calcs = DataStore.getCalculations();
......@@ -418,7 +426,7 @@ class Overview {
let container = document.createElement("div");
functionalMap.forEach((number, functional) => {
let span = document.createElement("span");
span.setAttribute("info-sys-data", "functional-type.value:" + util.getDefault(functional));
span.setAttribute("info-sys-data", "functional_type.value:" + util.getDefault(functional));
span.textContent = number + ' ' + util.getDefault(functional);
container.appendChild(span);
let linebreak = document.createElement("br");
......@@ -432,7 +440,7 @@ class Overview {
let container2 = document.createElement("div");
codeMap.forEach((number, codeName) => {
let span = document.createElement("span");
span.setAttribute("info-sys-data", "code-name.value:" + codeName);
span.setAttribute("info-sys-data", "code_name.value:" + codeName);
span.textContent = number + ' ' + codeName;
container2.appendChild(span);
let linebreak = document.createElement("br");
......@@ -524,7 +532,7 @@ class Overview {
this.heatCalcIdBox.innerHTML = '';
} else {
let url = util.getMaterialCalcURL(this.materialId, calcWithHeat.calc_id);
LoadingPopup.show();
LoadingPopup.show("overview_thermodynamical");
let query = JSON.stringify({properties: ["thermodynamical_properties"]});
util.serverReqPOST(url, query, e => {
if (e.target.status === 200) {
......@@ -537,7 +545,7 @@ class Overview {
this.phononLoaded = true;
document.getElementById('thermal-props-ov').style.visibility = 'visible';
}
LoadingPopup.hide();
LoadingPopup.hide("overview_thermodynamical");
});
}
}
......
client/src/material-mod/StructureDetails.view.js
View file @ c43f397c
......@@ -62,11 +62,11 @@ class StructureDetails extends DetailsViewBase {
<span class="struct-field" ></span>
</div>
<div class="structure-type-field" style="display: none">
<b><span info-sys-data="structure-type">Structure type</span></b>:
<b><span info-sys-data="structure_type">Structure type</span></b>:
<span class="structure-type-value" ></span>
</div>
<div class="structure-prototype-field" style="display: none">
<b><span info-sys-data="structure-prototype">Structure prototype</span></b>:
<b><span info-sys-data="structure_prototype">Structure prototype</span></b>:
<span class="structure-prototype-value" ></span>
</div>
<div class="strukturbericht-field" style="display: none">
......@@ -81,11 +81,11 @@ class StructureDetails extends DetailsViewBase {
style="flex-basis: 70%; border-right: 1px solid #E4E4E4; ">
<div>
<b><span info-sys-data="crystal-system">Lattice</span></b>:
<b><span info-sys-data="crystal_system">Lattice</span></b>:
<span class="lattice-value" ></span>
</div>
<div>
<b><span info-sys-data="space-group">Space group</span></b>:
<b><span info-sys-data="space_group_number">Space group</span></b>:
<span class="space-group-value" ></span>
</div>
<div>
......@@ -248,9 +248,9 @@ class StructureDetails extends DetailsViewBase {
}
InfoSys.addElementToInfoSystem(this.spaceGroupValue,
'space-group.value:'+data.space_group_number);
'space_group_number.value:'+data.space_group_number);
InfoSys.addElementToInfoSystem(this.latticeValue,
'crystal-system.value:'+data.crystal_system);
'crystal_system.value:'+data.crystal_system);
InfoSys.addElementToInfoSystem(this.pointGroupValue,
'point-group.value:'+data.point_group);
//InfoSys.addElementToInfoSystem(this.wyckoffValue, 'wyckoff-position-population.value:'+);
......
client/src/search-mod/AutocompleteMultiselectTextfield.js 0 → 100644
View file @ c43f397c
/**
* Copyright 2019-2019 Georg Huhs
*
* 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.
*
*/
/*
Basic class for extending a text field with autocomplete functionality
*/
"use strict";
class AutocompleteMultiselectTextfield {
constructor(id = "", placeholder = '', allowEmptyInput = true) {
this.id = id;
this.element = document.createElement('div');
//this.element.style.display = 'inline';
this.element.className = `AutocompleteMultiselectTextfield ${id}-autocomplete-multiselect-textfield`;
this.element.innerHTML = `
<input type="text" placeholder="${placeholder}" />
<div class="AutocompleteMultiselectTextfield-dropdown ${this.id}-autocomplete-multiselect-dropdown"></div>
<div class="AutocompleteMultiselectTextfield-selected-box"></div>
`;
this.input = this.element.querySelector('input');
this.selectedItemsBox = this.element.querySelector('.AutocompleteMultiselectTextfield-selected-box');
this.listContainer = this.element.querySelector('.AutocompleteMultiselectTextfield-dropdown');
this.selectListener;
// state
this.valueList; // List of autocomplete (possible) values
this.selectedValues = new Set();
this.allowEmptyInput = allowEmptyInput;
// event management
// When clicking on the textfield the dropdown shows up
this.input.addEventListener("click", (e) => {
this._processInput();
e.stopPropagation();
});
// the dropdown list is updated as the user writes on the textfield
this.input.addEventListener("input", (e) => {
this._processInput();
});
// The dropdown is hiden when the mouse leaves the component area
this.element.addEventListener("mouseleave", e => {
this._cleanList();
});
// Handle the item removal on the selected items box
this.selectedItemsBox.addEventListener("click", e => {
let itemLabel = event.target.closest('span');
this._removeSelectedValue(itemLabel.dataset.value);
//itemLabel.dispatchEvent(new Event('change'));
});
// Handle the item selection on the dropdown
this.listContainer.addEventListener("click", e => {
let listItem = event.target.closest('div');
this._toggleItem(listItem);
});
this.listContainer.addEventListener("mouseover", e => {
let listItem = event.target.closest('div');
this._setActiveListItem(listItem);
});
}
getValues(){
return Array.from(this.selectedValues);
}
/*resetValue(){
this.input.value = '';
}*/
disable(bool){
this.input.disabled = bool;
}
setAutocompleteList(valueList){
this.valueList = valueList;
}
setSelectListener(listener) {
this.selectListener = listener;
}
_processInput() {
const currentInput = this.input.value;
// close any already open lists of autocompleted values
this._cleanList();//this._closeAllLists();
// in case of an empty input field
if (!this.allowEmptyInput && !currentInput) {
return false;
}
// for each autocomplete value
let counter = 0;
const matchingValues = this.valueList.filter( value => {
const matching = value.toUpperCase().includes(currentInput.toUpperCase());
if (matching) counter++;
return counter <= 15 && matching;
});
//console.log('matchingValues', matchingValues)
this.listContainer.innerHTML = '';
matchingValues.forEach( value => {
const listItem = generateListItem(value, currentInput, this.selectedValues