Commits (58)
This diff is collapsed.
window.nomadEnv = { 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: "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/', keycloakBase: 'https://nomad-lab.eu/fairdi/keycloak/auth/',
keycloakRealm: 'fairdi_nomad_test', keycloakRealm: 'fairdi_nomad_test',
keycloakClientId: 'nomad_gui_dev' keycloakClientId: 'nomad_gui_dev'
......
...@@ -151,7 +151,6 @@ ...@@ -151,7 +151,6 @@
} }
#flagging-form-popup button{ #flagging-form-popup button{
/*width: 200px;*/
margin: 20px 0 10px; margin: 20px 0 10px;
background-color: #EEE; background-color: #EEE;
color: #777; color: #777;
...@@ -235,6 +234,13 @@ header{ background-color: #23356d; } ...@@ -235,6 +234,13 @@ header{ background-color: #23356d; }
flex-grow: 1; flex-grow: 1;
} }
.user-msg-box{
color: #E56400;
font-size: 1.2em;
font-weight: bold;
}
div#logo-header { div#logo-header {
width: 1200px; margin: 0 auto; width: 1200px; margin: 0 auto;
/* padding-top: 10px;padding-bottom: 56px;*/ /* padding-top: 10px;padding-bottom: 56px;*/
...@@ -248,7 +254,11 @@ div#logo-header img{ vertical-align: middle; } ...@@ -248,7 +254,11 @@ div#logo-header img{ vertical-align: middle; }
div#second-header, #breadcrumb-placeholder{ div#second-header, #breadcrumb-placeholder{
width: 1200px; margin: 0 auto;} 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{ #breadcrumb-placeholder{
font-style: normal; font-style: normal;
...@@ -347,26 +357,52 @@ div.title span.unfolded::before{ ...@@ -347,26 +357,52 @@ div.title span.unfolded::before{
/******+ SEARCH BAR *********/ /******+ SEARCH BAR *********/
#search-module{ #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; .search-main-side{
font-size: 0.85em; transition: opacity 0.8s;
} }
.search-option>input {
margin-top:-0px; .search-box {
vertical-align: middle; width: 742px;
display: flex;
justify-content: center; /*space-between;*/
align-items: flex-start; /*space-between;*/
/*justify-content: center; [>space-between;<]*/
} }
.search-query-wrapper{ .search-query-wrapper{
width: 85%; position: relative;
background-color: white; border: 2px solid #E56400; flex-grow: 14;
background-color: white;
border: 2px solid #E56400;
padding: 8px 6px; padding: 8px 6px;
box-sizing: border-box;
min-height: 50px;
} }
.clean-btn{ .clean-btn{
padding: 6px; padding: 6px;
background-color: white; background-color: white;
...@@ -377,68 +413,89 @@ div.title span.unfolded::before{ ...@@ -377,68 +413,89 @@ div.title span.unfolded::before{
color: #E56400; color: #E56400;
} }
.search-btn{ .search-btn {
width: 94px; display: block;
background-color: #E56400; background-color: #E56400;
color: white; color: white;
padding: 16px; padding: 10px;
flex: 0 0 100px;
box-sizing: border-box;
height: 50px;
} }
.search-query-symbol{ .search-query-symbol{
font-size: 1.3em; font-size: 1.0em;
font-weight: bold; font-weight: bold;
} }
.add-buttons{ .add-buttons{
display: inline-block; display: inline-block;
background-color: #DDD;
width: 100%; width: 100%;
margin: 40px 0 0; margin: 0px 0 0;
padding: 20px 0; background-color: #CFCFCF;
text-align: center;
} }
.bool-buttons {
color: #555;
}
.bool-buttons button{ .bool-buttons button{
border: 1px solid #BBB; border: 1px solid #777;
color: #BBB; background-color: #EEE;
cursor: inherit; text-align: center;
} }
.tab-buttons button{ .tab-buttons button{
display: inline-block; display: inline-flex;
background-color: #EEE; align-items: center;
padding: 10px 30px; justify-content: space-between;
margin: 0 10px; border-right: 1px solid #BBB;
background-color: #CFCFCF;
width: 140px;
padding: 15px 20px;
font-size: .9em; font-size: .9em;
color: #777; color: #555;
border: 1px solid #777; text-align: center;
} }
/*.tab-buttons button:last-child {*/
/*border-right: none;*/
/*}*/
.tab-buttons button#add-tab-selected{ .tab-buttons button#add-tab-selected{
background-color: #DDD;
color: #E56400; color: #E56400;
border-color: #E56400;
font-weight: bold; font-weight: bold;
} }
.tab-buttons button:disabled{ .tab-buttons button:disabled{
color: #BBB; color: #AAA;
border-color: #BBB;
cursor: default; cursor: default;
} }
.triangle-container{
width: 115px;
display: inline-block;
margin: 0px 10px;
text-align: center;
}
.triangle{ .triangle{
display: inline-block; display: inline-block;
width: 0; height: 0; width: 0;
border-right: 30px solid transparent; height: 0;
border-top: 30px solid transparent; margin: -10px 0px;
border-left: 30px solid transparent; border-right: 25px solid transparent;
border-bottom: 30px solid #DDD; 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{ .add-panel button{
background-color: #EEE; background-color: #EEE;
...@@ -452,78 +509,168 @@ div.title span.unfolded::before{ ...@@ -452,78 +509,168 @@ div.title span.unfolded::before{
cursor: default; cursor: default;
} }
#formula-box{ /* Formula and Material name boxes */
text-align: center;
.TextBox {
display: flex;
justify-content: center;
text-align: left;
background-color: #DDD; background-color: #DDD;
padding: 40px 0;
} }
.formula-text-field, .material-name-text-field{
.TextBox input[type=text] {
padding: 10px; padding: 10px;
border: 0; border: 0;
font-size: 0.9em; 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{ .AutocompleteTextField-dropdown > div, .AutocompleteMultiselectTextfield-dropdown > div {
background-color: #DDD; padding: 2px 10px 2px 10px;
padding: 4px; cursor: pointer;
height: 330px; border: 1px solid transparent;
} }
.props-box-tabs-wrapper{ .AutocompleteMultiselectTextfield-dropdown > div {
background-color: #EEE; display: flex;
height: 100%; align-items: center;
} }
.properties-box-tabs div{ .autocomplete-active {
padding: 20px; border-color: #E56400 !important;
font-size: 0.9em; }
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; cursor: pointer;
text-align: center; }
.selectedItemLabel>img{
margin-left: 0.5rem;
} }
.properties-box-tabs div.props-tab-selected{
font-weight: bold; /* Material name autocomplete */
color: #E56400; .material-name-autocomplete-textfield{
width: 580px;
}
.material-name-autocomplete-dropdown{
background-color: #DDD; background-color: #DDD;
box-shadow: 1px 1px 4px gray;
} }
.props-tab-panel{ /* Autocomplete multiselect */
padding: 10px 60px; .AutocompleteMultiselectTextfield-dropdown {
font-size: 0.8em; width: 200px;
display: none; 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; 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;
}
.filter-section-title{
display: flex;
align-items: center;
justify-content: center;
color: white; padding: 10px 0;
font-size: 12pt;
background-color: #E56400;
padding: 10px;
} }
.field{ .filter-quantity-box {
margin-bottom: 16px; margin-bottom: 12px;
padding: 5px 15px;
} }
.filter-quantity-box > * {
transition: opacity 0.8s;
}
.field-title{ .field-title{
font-size: 1.1em; color: #E56400;
font-size: 1em;
padding: 10px 0; padding: 10px 0;
font-weight: bold; font-weight: bold;
} }
input[type='range'] { input[type='range'] {
margin: 0; margin: 0;
-webkit-appearance: none; -webkit-appearance: none;
...@@ -567,6 +714,17 @@ background-image: -webkit-linear-gradient(top, #777, #AAA, #777); ...@@ -567,6 +714,17 @@ background-image: -webkit-linear-gradient(top, #777, #AAA, #777);
#searchbar #searchline{ text-align: center; } #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]{ #searchbar input[type=text]{
padding: 8px 16px; height: 23px; width: 600px; padding: 8px 16px; height: 23px; width: 600px;
background: #FFF; border: 0; background: #FFF; border: 0;
...@@ -589,10 +747,20 @@ background-image: -webkit-linear-gradient(top, #777, #AAA, #777); ...@@ -589,10 +747,20 @@ background-image: -webkit-linear-gradient(top, #777, #AAA, #777);
} }
#searchbtn:disabled { } #searchbtn:disabled { }
.search-labels{width: 62%; margin: 10px auto;} .search-labels {
span.search-label{ display: inline-block; margin: 0 8px; width: 62%;
margin: 10px auto;
}
.search-label {
color: #555;
}
span.search-label {
display: inline-block; margin: 0 8px;
background-color: #E4E4E4; border: 0; background-color: #E4E4E4; border: 0;
padding: 4px; } padding: 4px;
padding-left: 6px;
}
img.remove-label{ cursor: pointer; } img.remove-label{ cursor: pointer; }
...@@ -607,9 +775,8 @@ img.remove-label{ cursor: pointer; } ...@@ -607,9 +775,8 @@ img.remove-label{ cursor: pointer; }
#elementable{width:690px; position: relative; #elementable{width:690px; position: relative;
padding: 0 26px; margin: 0 auto 0;
margin: 0 auto 60px; }
background-color: #DDD;}
.element-info{position: absolute; .element-info{position: absolute;
display: none; display: none;
...@@ -627,8 +794,8 @@ background-color: #DDD;} ...@@ -627,8 +794,8 @@ background-color: #DDD;}
} }
#elementable table#pt-main{ #elementable table#pt-main{
padding-top: 40px; color: #333;
color: #333; border: 0; border: 0;
} }
#elementable table#pt-laac{ #elementable table#pt-laac{
...@@ -700,37 +867,48 @@ background-color: #DDD;} ...@@ -700,37 +867,48 @@ background-color: #DDD;}
#elementable td.el-selected{ background-color: black; #elementable td.el-selected{ background-color: black;
color: #FFF; } 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{ .legend div{
display: inline-block; color: black; display: inline-block; color: black;
padding: 2px 12px; margin: 4px 0; padding: 2px 12px;
margin: 4px 0;
} }
.MaterialList{ /*width: 690px; margin: 0 auto 80px;*/
margin-top: 25px;
#matlist{ width: 690px; margin: 0 auto 80px;} }
/* #paginationWg erased*/ /* #paginationWg erased*/
#matlist .formula { .MaterialList .formula {
padding: 20px 0 4px; font-size: 1.1em; padding: 20px 0 4px; font-size: 1.1em;
background-color: #EEE; border-bottom: 1px solid #AAA; background-color: #EEE; border-bottom: 1px solid #AAA;
} }
#matlist .mat-row { font-size: .9em; cursor: pointer;} .MaterialList .mat-row { font-size: .9em; cursor: pointer;}
#matlist td { padding: 2px 0;} .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; } 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.prevButton{ display: inline-block; cursor: pointer;}
span.page{ display: inline-block; } span.page{ display: inline-block; }
span.nextButton{ display: inline-block; cursor: pointer;} span.nextButton{ display: inline-block; cursor: pointer;}
.mat-list-container table{
margin: auto;
width: 100%;/*width: 96%;*/
}
/*#paginationWg .left { float: left } /*#paginationWg .left { float: left }
#paginationWg .right { float: right }*/ #paginationWg .right { float: right }*/
...@@ -744,7 +922,6 @@ span.nextButton{ display: inline-block; cursor: pointer;} ...@@ -744,7 +922,6 @@ span.nextButton{ display: inline-block; cursor: pointer;}
} }
navTreeWrapper
.node-selected{ .node-selected{
font-weight: bold; font-weight: bold;
...@@ -1224,6 +1401,58 @@ text.structure-viewer-legend-labels{ ...@@ -1224,6 +1401,58 @@ text.structure-viewer-legend-labels{
font-size: 16px; 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 { .tooltip {
visibility: hidden; visibility: hidden;
......
...@@ -71,17 +71,19 @@ ...@@ -71,17 +71,19 @@
</header> </header>
<div id="second-header"> <div id="second-header">
<div style="float: left; width: 60%;"> <div>
<a href=""> <img src="img/NOMADEncyclopedia.png" /></a> <a href=""> <img src="img/NOMADEncyclopedia.png" /></a>
</div> </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" > <div id="info-sys-switch-box" >
Additional information &nbsp; Additional information &nbsp;
<!--<input id="info-sys-switch" type="checkbox" />--> <!--<input id="info-sys-switch" type="checkbox" />-->
</div> </div>
</div> </div>
<div style="clear: both;"></div>
</div> </div>
<div id="breadcrumb-placeholder" ></div> <div id="breadcrumb-placeholder" ></div>
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
"comment": "not required", "comment": "not required",
"text": "Basis functions that are used to solve the Kohn-Sham equation." "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.", "comment": "links to defining pages for every possible entry.",
"link": "https://en.wikipedia.org/wiki/Basis_set_(chemistry)", "link": "https://en.wikipedia.org/wiki/Basis_set_(chemistry)",
"text": "Representation of Kohn\u2013Sham states.", "text": "Representation of Kohn\u2013Sham states.",
...@@ -158,7 +158,7 @@ ...@@ -158,7 +158,7 @@
"comment": "explaining that this is the volume of the primitive unit cell", "comment": "explaining that this is the volume of the primitive unit cell",
"text": "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).", "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", "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.", "text": "Name of scientific software (code) used for the calculation.",
...@@ -305,7 +305,7 @@ ...@@ -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)", "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", "link": "https://en.wikipedia.org/wiki/Crystal_system",
"values": { "values": {
...@@ -416,7 +416,7 @@ ...@@ -416,7 +416,7 @@
"num": "space group" "num": "space group"
} }
}, },
"functional type": { "functional_type": {
"comment": "general explanation and link to defining or explaining page for every functional type", "comment": "general explanation and link to defining or explaining page for every functional type",
"text": "Type of exchange\u2013correlation functional.", "text": "Type of exchange\u2013correlation functional.",
"values": { "values": {
...@@ -474,11 +474,11 @@ ...@@ -474,11 +474,11 @@
} }
} }
}, },
"has band structure": { "has_band_structure": {
"comment": "can be shown in the header as general explanation for all calculations", "comment": "can be shown in the header as general explanation for all calculations",
"text": "Search for calculations that contain an electronic band structure." "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", "comment": "can be shown in the header as general explanation for all calculations",
"text": "Search for calculations that contain a density of states." "text": "Search for calculations that contain a density of states."
}, },
...@@ -486,7 +486,7 @@ ...@@ -486,7 +486,7 @@
"comment": "can be shown in the header as general explanation for all calculations", "comment": "can be shown in the header as general explanation for all calculations",
"text": "Search for calculations that contain a fermi surface." "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", "comment": "can be shown in the header as general explanation for all calculations",
"text": "Search for calculations that contain thermal properties." "text": "Search for calculations that contain thermal properties."
}, },
...@@ -604,7 +604,7 @@ ...@@ -604,7 +604,7 @@
"comment": "", "comment": "",
"text": "Parameter specifying the shape of the distribution for the given smearing kind." "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.", "comment": "general explanation and link to explaining page for every space group.",
"link": "https://en.wikipedia.org/wiki/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.", "text": "The space group is defined by the translational symmetry of a crystal, together with its point symmetries.",
...@@ -619,11 +619,18 @@ ...@@ -619,11 +619,18 @@
"specific heat cv": { "specific heat cv": {
"text": "Temperature dependence of the heat capacity per unit cell at constant volume." "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)", "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." "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)", "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.", "text": "Classification of materials into different high-level categories, based on their atomic configurations.",
"values": { "values": {
......
...@@ -30,9 +30,6 @@ let loadingPopup = document.querySelector('#loading-popup'); ...@@ -30,9 +30,6 @@ let loadingPopup = document.querySelector('#loading-popup');
let loadSet = new Set(); let loadSet = new Set();
function show(id) { function show(id) {
if (!window.allowNewLoadPopup) {
return;
}
loadSet.add(id, true); loadSet.add(id, true);
let ttRect = loadingPopup.getBoundingClientRect(); let ttRect = loadingPopup.getBoundingClientRect();
let leftPos = (window.innerWidth - ttRect.width)/2; let leftPos = (window.innerWidth - ttRect.width)/2;
......
...@@ -45,14 +45,10 @@ function route() { ...@@ -45,14 +45,10 @@ function route() {
if (hashHistory.length && historyLength == length) { if (hashHistory.length && historyLength == length) {
if (hashHistory[hashHistory.length - 2] == hash) { if (hashHistory[hashHistory.length - 2] == hash) {
hashHistory = hashHistory.slice(0, -1); hashHistory = hashHistory.slice(0, -1);
LoadingPopup.reset();
window.allowNewLoadPopup = false;
} else { } else {
window.allowNewLoadPopup = true;
hashHistory.push(hash); hashHistory.push(hash);
} }
} else { } else {
window.allowNewLoadPopup = true;
hashHistory.push(hash); hashHistory.push(hash);
historyLength = length; historyLength = length;
} }
...@@ -79,6 +75,8 @@ function route() { ...@@ -79,6 +75,8 @@ function route() {
else command = hashPath; else command = hashPath;
if (routes.has(command)) { if (routes.has(command)) {
// When entering a new page, reset the spinner.
LoadingPopup.reset();
routes.get(command)(param, subparam); routes.get(command)(param, subparam);
} }
}; };
......
...@@ -32,7 +32,7 @@ let FlaggingFormPopup = require('./common/FlaggingFormPopup.js'); ...@@ -32,7 +32,7 @@ let FlaggingFormPopup = require('./common/FlaggingFormPopup.js');
let PubSub = require('./common/PubSub.js'); let PubSub = require('./common/PubSub.js');
let Router = require('./common/Router.js'); let Router = require('./common/Router.js');
let MaterialMod = require('./material-mod/MaterialMod.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 UserGuidance = require('./common/UserGuidance.js');
let DataStore = require('./material-mod/DataStore.js'); let DataStore = require('./material-mod/DataStore.js');
...@@ -40,7 +40,6 @@ let DataStore = require('./material-mod/DataStore.js'); ...@@ -40,7 +40,6 @@ let DataStore = require('./material-mod/DataStore.js');
// main DOM elements // main DOM elements
let contentElement = document.getElementById('content'); let contentElement = document.getElementById('content');
let titleElement = document.querySelector('title'); let titleElement = document.querySelector('title');
window.allowNewLoadPopup = true;
var getUrl = window.location; var getUrl = window.location;
var guiRoot = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname; var guiRoot = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname;
...@@ -219,6 +218,7 @@ let searchMod; ...@@ -219,6 +218,7 @@ let searchMod;
let MaterialModule; let MaterialModule;
let materialModDOM; let materialModDOM;
let currentModule; // current module DOM being shown let currentModule; // current module DOM being shown
let initialized = false; // Has the search been initialized
function showModuleDOM(module){ function showModuleDOM(module){
...@@ -260,15 +260,11 @@ PubSub.subscribe('show-search', search => { ...@@ -260,15 +260,11 @@ PubSub.subscribe('show-search', search => {
titleElement.innerHTML = 'NOMAD Encyclopedia - Search'; titleElement.innerHTML = 'NOMAD Encyclopedia - Search';
breadcrumb.setState('search', search); breadcrumb.setState('search', search);
if (search === undefined) {
//LoadingPopup.reset();
searchMod.showSearchPage();
} else if (search === 'results') {
searchMod.showResultsPage();
}
showModuleDOM(searchMod.element); showModuleDOM(searchMod.element);
if (!initialized) {
searchMod.sendQuery();
}
initialized = true
}); });
......
...@@ -33,6 +33,7 @@ let calcMap = new Map(); ...@@ -33,6 +33,7 @@ let calcMap = new Map();
let ready = false; let ready = false;
let hasThermal; let hasThermal;
let hasElecStructure; let hasElecStructure;
let missing = false;
function setMaterialData(dataFromAPI){ function setMaterialData(dataFromAPI){
materialData = dataFromAPI; materialData = dataFromAPI;
...@@ -42,6 +43,14 @@ function getMaterialData(){ ...@@ -42,6 +43,14 @@ function getMaterialData(){
return materialData; return materialData;
} }
function setMissing(value) {
missing = value;
}
function getMissing() {
return missing;
}
function setIdealizedStructure(structure){ function setIdealizedStructure(structure){
idealizedStructure = structure; idealizedStructure = structure;
} }
...@@ -129,6 +138,9 @@ function getGroupId(leafId) { ...@@ -129,6 +138,9 @@ function getGroupId(leafId) {
function isReady(matId) { function isReady(matId) {
if (materialData !== undefined) { if (materialData !== undefined) {
if (missing && matId == materialData.material_id) {
return true;
}
if (idealizedStructure !== undefined) { if (idealizedStructure !== undefined) {
if (calcs !== undefined) { if (calcs !== undefined) {
if (groups !== undefined) { if (groups !== undefined) {
...@@ -147,6 +159,7 @@ function clear() { ...@@ -147,6 +159,7 @@ function clear() {
calcs = undefined; calcs = undefined;
groups = undefined; groups = undefined;
idealizedStructure = undefined; idealizedStructure = undefined;
missing = false;
} }
function isInAnyGroup(calcId){ function isInAnyGroup(calcId){
...@@ -192,6 +205,8 @@ module.exports = { ...@@ -192,6 +205,8 @@ module.exports = {
isInAnyNotDisabledGroup, isInAnyNotDisabledGroup,
getGroupLeafId, getGroupLeafId,
isReady, isReady,
setMissing,
getMissing,
clear, clear,
setIdealizedStructure, setIdealizedStructure,
getIdealizedStructure, getIdealizedStructure,
......
...@@ -48,6 +48,9 @@ class MaterialMod { ...@@ -48,6 +48,9 @@ class MaterialMod {
constructor(){ constructor(){
this.element = document.createElement('div'); this.element = document.createElement('div');
this.element.setAttribute("id",'material-module'); 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 = new Overview();
this.overview.attachAndSetEvents(this.element); this.overview.attachAndSetEvents(this.element);
...@@ -138,11 +141,25 @@ class MaterialMod { ...@@ -138,11 +141,25 @@ class MaterialMod {
* Called upon loading the overview page for a specific material. * Called upon loading the overview page for a specific material.
*/ */
_loadMaterial(matId, view) { _loadMaterial(matId, view) {
// Set to loading mode
this._setView(view);
let show = () => { let show = () => {
// 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 {
missingPrompt.style.display = "none";
this._setView(view);
let materialData = DataStore.getMaterialData(); let materialData = DataStore.getMaterialData();
let idealizedStructure = DataStore.getIdealizedStructure(); let idealizedStructure = DataStore.getIdealizedStructure();
// Cell viewer needs to be set only after page is visible so that it is // Cell viewer needs to be set only after page is visible so that it is
...@@ -163,6 +180,7 @@ class MaterialMod { ...@@ -163,6 +180,7 @@ class MaterialMod {
this.overview.setCalcsData(markedTreeLeafs); this.overview.setCalcsData(markedTreeLeafs);
this._setCellViewer(this.overview.vizBox); this._setCellViewer(this.overview.vizBox);
} }
}
}; };
let isReady = () => { let isReady = () => {
let ready = DataStore.isReady(matId); let ready = DataStore.isReady(matId);
...@@ -175,6 +193,7 @@ class MaterialMod { ...@@ -175,6 +193,7 @@ class MaterialMod {
// If material is already loaded, nothing fetched. // If material is already loaded, nothing fetched.
if (!isReady()) { if (!isReady()) {
DataStore.clear(); DataStore.clear();
this.overview.clearCalcsData();
LoadingPopup.reset(); LoadingPopup.reset();
this.structureViewer.axisCheckbox.checked = true; this.structureViewer.axisCheckbox.checked = true;
this.structureViewer.bondsCheckbox.checked = true; this.structureViewer.bondsCheckbox.checked = true;
...@@ -187,9 +206,16 @@ class MaterialMod { ...@@ -187,9 +206,16 @@ class MaterialMod {
// Request basic material data // Request basic material data
LoadingPopup.show("load_basic"); LoadingPopup.show("load_basic");
util.serverReq(util.getMaterialURL(matId), e1 => { util.serverReq(util.getMaterialURL(matId), e1 => {
// 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); let materialData = JSON.parse(e1.target.response);
DataStore.setMaterialData(materialData); DataStore.setMaterialData(materialData);
util.materialId = materialData.material_id; util.materialId = materialData.material_id;
}
isReady(); isReady();
LoadingPopup.hide("load_basic"); LoadingPopup.hide("load_basic");
}); });
...@@ -197,6 +223,11 @@ class MaterialMod { ...@@ -197,6 +223,11 @@ class MaterialMod {
// Request basic details for all calculations related to this material // Request basic details for all calculations related to this material
LoadingPopup.show("load_calculations"); LoadingPopup.show("load_calculations");
util.serverReq(util.getMaterialXsURL('calculations', matId), e4 => { util.serverReq(util.getMaterialXsURL('calculations', matId), e4 => {
// 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 calculations = JSON.parse(e4.target.response);
let representatives = calculations.representatives; let representatives = calculations.representatives;
let idealId = representatives.idealized_structure; let idealId = representatives.idealized_structure;
...@@ -207,22 +238,35 @@ class MaterialMod { ...@@ -207,22 +238,35 @@ class MaterialMod {
let query = JSON.stringify({properties: ["idealized_structure"]}); let query = JSON.stringify({properties: ["idealized_structure"]});
LoadingPopup.show("load_idealized"); LoadingPopup.show("load_idealized");
util.serverReqPOST(util.getMaterialCalcURL(matId, idealId), query, e2 => { 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; let struct = JSON.parse(e2.target.response).idealized_structure;
DataStore.setIdealizedStructure(struct); DataStore.setIdealizedStructure(struct);
this.structureViewer.load(struct); this.structureViewer.load(struct);
document.getElementById('structure-ov').style.visibility = 'visible'; document.getElementById('structure-ov').style.visibility = 'visible';
document.getElementById('methodology-ov').style.visibility = 'visible'; document.getElementById('methodology-ov').style.visibility = 'visible';
}
isReady(); isReady();
LoadingPopup.hide("load_idealized"); LoadingPopup.hide("load_idealized");
}); });
}
LoadingPopup.hide("load_calculations"); LoadingPopup.hide("load_calculations");
}); });
// Request groups // Request groups
LoadingPopup.show("load_groups"); LoadingPopup.show("load_groups");
util.serverReq(util.getMaterialXsURL('groups', matId), e5 => { util.serverReq(util.getMaterialXsURL('groups', matId), e5 => {
// Check for error
let stat = e5.target.status;
if (stat >= 400 && stat < 500) {
DataStore.setMissing(true);
} else {
let groups = JSON.parse(e5.target.response); let groups = JSON.parse(e5.target.response);
DataStore.setGroups(groups); DataStore.setGroups(groups);
}
isReady(); isReady();
LoadingPopup.hide("load_groups"); LoadingPopup.hide("load_groups");
}); });
......
...@@ -71,11 +71,11 @@ class Overview { ...@@ -71,11 +71,11 @@ class Overview {
<span class="material-type-field" ></span> <span class="material-type-field" ></span>
</div> </div>
<div class="space-group-field" style="display: none"> <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> <span class="space-group-value" ></span>
</div> </div>
<div class="structure-type-field" style="display: none"> <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> <span class="structure-type-value" ></span>
</div> </div>
</div> </div>
...@@ -109,11 +109,11 @@ class Overview { ...@@ -109,11 +109,11 @@ class Overview {
<div class="info-fields-label" > Available calculations </div> <div class="info-fields-label" > Available calculations </div>
<div style="float: left; width: 45%" > <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 class="functional-field" > </div>
</div> </div>
<div style="float: right; width: 45%" > <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 class="code-field"> </div>
</div> </div>
<div style="clear: both;"></div> <div style="clear: both;"></div>
...@@ -322,7 +322,7 @@ class Overview { ...@@ -322,7 +322,7 @@ class Overview {
this.spaceGroupValue.textContent = data.space_group_number+ this.spaceGroupValue.textContent = data.space_group_number+
' ('+data.space_group_international_short_symbol+')'; ' ('+data.space_group_international_short_symbol+')';
InfoSys.addElementToInfoSystem(this.spaceGroupValue, InfoSys.addElementToInfoSystem(this.spaceGroupValue,
'space-group.value:'+data.space_group_number); 'space_group_number.value:' + data.space_group_number);
} }
if (this.similarityFinder) { if (this.similarityFinder) {
...@@ -358,6 +358,14 @@ class Overview { ...@@ -358,6 +358,14 @@ class Overview {
return false; return false;
} }
clearCalcsData() {
this.materialId = null;
this.calcMaterialId = null;
let bsLoaded = false;
let phononLoaded = false;
let dosLoaded = false;
}
setCalcsData(markedTreeLeafs) { setCalcsData(markedTreeLeafs) {
let matData = DataStore.getMaterialData(); let matData = DataStore.getMaterialData();
let calcs = DataStore.getCalculations(); let calcs = DataStore.getCalculations();
...@@ -418,7 +426,7 @@ class Overview { ...@@ -418,7 +426,7 @@ class Overview {
let container = document.createElement("div"); let container = document.createElement("div");
functionalMap.forEach((number, functional) => { functionalMap.forEach((number, functional) => {
let span = document.createElement("span"); 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); span.textContent = number + ' ' + util.getDefault(functional);
container.appendChild(span); container.appendChild(span);
let linebreak = document.createElement("br"); let linebreak = document.createElement("br");
...@@ -432,7 +440,7 @@ class Overview { ...@@ -432,7 +440,7 @@ class Overview {
let container2 = document.createElement("div"); let container2 = document.createElement("div");
codeMap.forEach((number, codeName) => { codeMap.forEach((number, codeName) => {
let span = document.createElement("span"); 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; span.textContent = number + ' ' + codeName;
container2.appendChild(span); container2.appendChild(span);
let linebreak = document.createElement("br"); let linebreak = document.createElement("br");
...@@ -524,7 +532,7 @@ class Overview { ...@@ -524,7 +532,7 @@ class Overview {
this.heatCalcIdBox.innerHTML = ''; this.heatCalcIdBox.innerHTML = '';
} else { } else {
let url = util.getMaterialCalcURL(this.materialId, calcWithHeat.calc_id); let url = util.getMaterialCalcURL(this.materialId, calcWithHeat.calc_id);
LoadingPopup.show(); LoadingPopup.show("overview_thermodynamical");
let query = JSON.stringify({properties: ["thermodynamical_properties"]}); let query = JSON.stringify({properties: ["thermodynamical_properties"]});
util.serverReqPOST(url, query, e => { util.serverReqPOST(url, query, e => {
if (e.target.status === 200) { if (e.target.status === 200) {
...@@ -537,7 +545,7 @@ class Overview { ...@@ -537,7 +545,7 @@ class Overview {
this.phononLoaded = true; this.phononLoaded = true;
document.getElementById('thermal-props-ov').style.visibility = 'visible'; document.getElementById('thermal-props-ov').style.visibility = 'visible';
} }
LoadingPopup.hide(); LoadingPopup.hide("overview_thermodynamical");
}); });
} }
} }
......
...@@ -62,11 +62,11 @@ class StructureDetails extends DetailsViewBase { ...@@ -62,11 +62,11 @@ class StructureDetails extends DetailsViewBase {
<span class="struct-field" ></span> <span class="struct-field" ></span>
</div> </div>
<div class="structure-type-field" style="display: none"> <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> <span class="structure-type-value" ></span>
</div> </div>
<div class="structure-prototype-field" style="display: none"> <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> <span class="structure-prototype-value" ></span>
</div> </div>
<div class="strukturbericht-field" style="display: none"> <div class="strukturbericht-field" style="display: none">
...@@ -81,11 +81,11 @@ class StructureDetails extends DetailsViewBase { ...@@ -81,11 +81,11 @@ class StructureDetails extends DetailsViewBase {
style="flex-basis: 70%; border-right: 1px solid #E4E4E4; "> style="flex-basis: 70%; border-right: 1px solid #E4E4E4; ">
<div> <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> <span class="lattice-value" ></span>
</div> </div>
<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> <span class="space-group-value" ></span>
</div> </div>
<div> <div>
...@@ -248,9 +248,9 @@ class StructureDetails extends DetailsViewBase { ...@@ -248,9 +248,9 @@ class StructureDetails extends DetailsViewBase {
} }
InfoSys.addElementToInfoSystem(this.spaceGroupValue, InfoSys.addElementToInfoSystem(this.spaceGroupValue,
'space-group.value:'+data.space_group_number); 'space_group_number.value:'+data.space_group_number);
InfoSys.addElementToInfoSystem(this.latticeValue, InfoSys.addElementToInfoSystem(this.latticeValue,
'crystal-system.value:'+data.crystal_system); 'crystal_system.value:'+data.crystal_system);
InfoSys.addElementToInfoSystem(this.pointGroupValue, InfoSys.addElementToInfoSystem(this.pointGroupValue,
'point-group.value:'+data.point_group); 'point-group.value:'+data.point_group);
//InfoSys.addElementToInfoSystem(this.wyckoffValue, 'wyckoff-position-population.value:'+); //InfoSys.addElementToInfoSystem(this.wyckoffValue, 'wyckoff-position-population.value:'+);
......
/**
* Copyright 2019-2019 Georg Huhs
*
* Licensed under the Apache License, Version 2.0 (the "License");