Commit 301eb8f8 authored by arturo's avatar arturo

>>> continue

parent 8a00269a
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -1138,4 +1138,585 @@ select.form-control {
width: 100%;
}
/* memiescape v2.0
contact : quentin.lobbe@iscpif.fr */
/* fonts */
@font-face {
font-family: "Inter-Regular";
font-style: normal;
font-weight: 400;
src: url("../fonts/phylo/Inter-Regular.woff2") format("woff2"), url("../fonts/phylo/Inter-Regular.woff") format("woff");
}
@font-face {
font-family: "Inter-Bold";
font-style: normal;
font-weight: 700;
src: url("../fonts/phylo/Inter-Bold.woff2") format("woff2"), url("../fonts/phylo/Inter-Bold.woff") format("woff");
}
/* grid */
.phylo {
font-family: "Inter-Regular";
font-size: 16px;
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: 2% 7% 7% auto 1%;
grid-gap: 10px;
height: calc(100vh - 20px);
color: #0d1824;
}
/* ---- row 1 ---- */
.phylo-title {
grid-row: 1;
grid-column: 1/2;
align-items: center;
text-align: right;
margin-top: 0.5px;
}
.phylo-folder {
grid-row: 1;
grid-column: 2/16;
align-items: center;
}
/* -------------------- */
.phylo-corpus {
grid-row: 2/3;
grid-column: 1/2;
/*background : #3E75B3;*/
font-size: 14px;
display: flex;
align-items: center;
justify-content: right;
}
.phylo-phylo {
grid-row: 3/4;
grid-column: 1/2;
font-size: 14px;
display: flex;
align-items: center;
justify-content: right;
}
.phylo-corpus-info {
grid-row: 2/3;
grid-column: 2/4;
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
}
.phylo-phylo-info {
grid-row: 3/4;
grid-column: 2/4;
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
}
.phylo-how {
grid-row: 2/4;
grid-column: 1/2;
z-index: 2;
display: flex;
align-items: center;
justify-content: right;
}
.phylo-isoline {
grid-row: 2/4;
grid-column: 3/15;
/*background: rgba(223,216,200,0.25); */
}
.phylo-isoline-info {
grid-row: 2/4;
grid-column: 15/16;
padding-top: 20%;
padding-bottom: 20%;
padding-left: 15px;
}
/* -------------------- */
.phylo-scape {
grid-row: 4;
grid-column: 1/15;
/*background: #FFCC73;*/
}
.phylo-timeline {
grid-row: 4;
grid-column: 1/2;
}
.phylo-graph {
grid-row: 4;
grid-column: 15/16;
/*background: #FFCC73;*/
}
/* -------------------- */
.phylo-footer {
grid-row: 5;
grid-column: 2/16;
}
/* classes */
/* ---------- icons ---------- */
a {
color: inherit;
cursor: pointer;
}
.how {
cursor: pointer;
position: relative;
}
.tooltip {
font-family: "Inter-Regular";
font-size: 14px;
font-style: normal;
font-weight: 400;
}
i.how span {
position: absolute;
width: 300px;
color: #FFFFFF;
background: #0d1824;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
i.how span:after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0;
height: 0;
border-right: 8px solid #0d1824;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
i.how:hover span {
visibility: visible;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
.switch > .far + .fa,
.switch:hover > .far {
display: none;
}
.switch:hover > .far + .fa {
display: inherit;
color: #0d1824;
}
/* ---------- fonts ---------- */
.font-bold {
font-family: "Inter-Bold";
text-transform: uppercase;
}
.font-small {
color: #0d1824;
font-size: 12px;
}
.header {
/*font-weight: bold;*/
/*text-transform: uppercase;*/
font-weight: 500;
cursor: pointer;
}
.header:hover {
font-weight: bold;
}
/* ---------- input ---------- */
.button {
background-color: white;
border: 1.5px solid #0d1824;
cursor: pointer;
}
.button:hover {
background-color: #0d1824;
color: white;
}
.btn-group button {
margin-top: 1px;
margin-bottom: 1px;
display: block;
width: 40px;
}
.draw {
display: none;
}
.phylo-focus {
fill: #f8381f;
color: #f8381f;
}
.reset {
visibility: hidden;
}
.label {
visibility: hidden;
}
.heading {
visibility: hidden;
}
.export {
visibility: hidden;
}
.headed {
background-color: #0d1824;
color: white;
}
.labeled {
background-color: #0d1824;
color: white;
}
.input-file {
display: inline-block;
cursor: pointer;
}
.input-file:hover {
border-bottom: 1.5px solid #0d1824;
}
.input-name {
font-style: italic;
opacity: 0.7;
font-size: 14px;
padding-left: 6px;
padding-right: 6px;
}
/* ---------- axis ---------- */
.x-axis path {
stroke: #EBE4DD;
stroke-width: 1.5px;
}
.y-axis path {
stroke: #EBE4DD;
stroke-width: 1.5px;
}
.y-highlight {
stroke: #f3be54;
stroke-width: 1.5px;
}
.x-mark {
fill: #4A5C70;
stroke-width: 1px;
stroke: #fff;
}
.x-mark-over {
fill: #f3be54;
}
.x-mark-focus {
fill: #f8381f;
}
.tick text {
font-family: "Inter-Regular";
}
.tick text:hover {
cursor: pointer;
}
.y-label {
font-size: 10px;
font-family: "Inter-Regular";
font-weight: normal;
}
.y-label-bold {
font-size: 12px;
font-family: "Inter-Bold";
font-weight: bold;
}
.y-mark-year-inner {
fill: #4A5C70;
}
.y-mark-year-inner-highlight {
fill: #f3be54;
}
.y-mark-year-outer {
fill: #fff;
stroke: #4A5C70;
stroke-width: 1px;
}
.y-mark-year-outer-highlight {
fill: #fff;
stroke: #f3be54;
stroke-width: 3px;
}
.y-mark-month {
fill: #4A5C70;
}
/* ---------- group ---------- */
.group-outer {
stroke-width: 0.8px;
stroke: #fff;
fill: #fff;
}
.group-inner {
stroke-width: 0.8px;
stroke: #0d1824;
fill: #0d1824;
/*cursor: pointer;*/
z-index: 10;
}
.group-heading {
fill: #fff;
stroke: #B5B5B5;
}
.group-focus {
stroke: #f8381f;
}
.source-focus {
stroke: #67a9cf;
}
.group-unfocus {
stroke: #A9A9A9;
}
.group-path {
cursor: pointer;
}
/* ---------- labels ---------- */
.ngrams {
visibility: hidden;
}
.term {
cursor: pointer;
}
.term:hover {
font-weight: bold;
fill: #f8381f;
}
.term-unfocus {
/*fill: #A9A9A9;*/
}
.term-focus {
/*fill: black;*/
}
.term-path {
fill: none;
stroke: #F0684D;
stroke-width: 1.5px;
}
.emerging {
/*text-decoration: underline #F0684D;*/
/*fill:#5AA350;*/
/*fill: #5AA350;*/
fill: #F8381F;
}
.decreasing {
/*text-decoration: underline #74B5FF;*/
fill: #11638F;
}
.path-focus {
fill: none;
stroke: #F0684D;
stroke-width: 1.5px;
}
.path-unfocus {
stroke: #A9A9A9;
}
.path-heading {
stroke: #B5B5B5;
}
/* ---------- phylo ---------- */
.branch-hover {
fill: #f3be54;
opacity: 0.5;
}
/* elements */
#file-path {
display: none;
}
/* axis */
.axisRight {
font-family: "Inter-Regular";
font-size: 10px;
}
/* isoline */
.peak {
stroke: white;
stroke-width: 1px;
font-family: "Inter-Regular";
font-size: 14px;
text-anchor: middle;
visibility: visible;
}
.peak-over {
font-size: 18px;
stroke-width: 2px;
cursor: pointer;
stroke: #f3be54;
z-index: 100;
}
.peak-focus {
font-size: 18px;
stroke-width: 2px;
stroke: #F0684D;
}
.peak-focus-source {
font-size: 18px;
stroke-width: 2px;
stroke: #67a9cf;
}
.peak-label {
text-align: center;
font-family: "Inter-Regular";
font-size: 14px;
font-style: normal;
font-weight: 400;
color: #FFFFFF;
border-radius: 3px;
border-style: solid;
border-width: 2px;
border-color: white;
background: #0d1824;
padding: 5px;
z-index: 10;
position: absolute;
visibility: hidden;
}
.word-cloud {
font-family: "Inter-Regular";
font-size: 12px;
}
.search {
margin-left: 10px;
visibility: hidden;
position: absolute;
z-index: 7;
font-size: 14px;
background-color: transparent;
outline: 0;
border-width: 0 0 2px;
border-color: #0d1824;
}
.search-label {
visibility: hidden;
margin-left: 5px;
}
.search:focus {
border-color: #F0684D;
}
.autocomplete {
margin-left: 10px;
visibility: hidden;
position: absolute;
z-index: 7;
font-size: 14px;
background-color: transparent;
color: silver;
z-index: 1;
border: none;
}
.loading {
visibility: hidden;
}
.phylo-name {
visibility: hidden;
text-transform: capitalize;
font-weight: bold;
}
.select-source {
margin-left: 10px;
display: none;
border: 1.5px solid #0d1824;
cursor: pointer;
outline: 0;
background: transparent;
border-image: none;
outline-offset: -2px;
outline-color: transparent;
box-shadow: none;
-webkit-appearance: none;
}
option {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
/*# sourceMappingURL=sass.css.map */
{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/abstract/_members.scss","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EAEA;;;AAEF;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AAME;EACE;;;AC9DN;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACjFJ;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC1GF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAMN;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEA;EACE;EACA;;AAEJ;EACE;EACA;;AAIA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AAIF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AAGR;EACE;;AAEA;EACE;EACA;;AC5HO;ED+HP;;;ACxIO;ED2IP;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAEN;EAWE;EAGA;EACA,eAvPkB;;AAyPlB;EACE;EACA;;AC/LO;ED4MP;EACA,MAFW;EAGX;;;ACvNO;ED2NP;EACA,OAFW;EAGX;;;AAGA;EACE;;AAEA;EACE;;AAGJ;EACE;;AACF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;;AAEA;EAGE;EACA,WAzSa;EA4Sb;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAEN;EACE;EACA;EACA;EACA;;AAEJ;EAEE;EACA;;;AAEJ;EAEE;EACA;;;AAEF;EAGE;EAKA;EACA;EACA;EACA;EAGA;EACA;EACA;EAKA;;AAHA;EACE;;;AAKJ;EAGE;;AC3SS;EDrDP;EACA;;;AC2CO;EDxCP;EACA;;;ACgDO;ED8SP;;AAEA;EACE;;;AC1TK;ED6TP;;AAEA;EACE;;;AAON;EAIE;EAEA;EACA;EACA;EACA,QApYmC;EAqYnC;;ACxUS;ED4UP;;;ACrVO;EDwVP;;;AAEJ;EAGE;EAEA;EACA;EACA;EACA,QAvZgC;EAwZhC;;AC1VS;ED8VP;;;ACvWO;ED0WP;;;AAKF;EAIE;EACA;;AC3WO;EDrDP;EACA;;;AC2CO;EDxCP;EACA;;;AA6ZA;EACE,eA3a+B;;;AAibjC;EACE;;AAEE;EACE;;;AE/ZN;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;AAEV;EACE;;AAEA;EACE;;;AC9FN;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAII;EACE;EACA;;AAEJ;EACE;EACA;;AF4CK;EEzCP;;AAEA;EACE;;;AF6BK;EE1BP;;AAEA;EACE;;;AAGN;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;AAEA;EACE;;AAEF;EACE;;;AAGJ;EAKE;;AAEA;EACE;;AAIE;EACE;;AACF;EACE;;AAEJ;EAGE;;AAGJ;EACE,SAtBa;EAuBb;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKE;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;;AAKN;EACE;;AFjGO;EEoGL;;;AF7GK;EEgHL;;;AAEJ;EACE,SAZa;;;AAcjB;EAKE;;AAEA;EACE;EACA,OARa;EASb,QATa;EAUb,MAToB;EAUpB,KATmB;;;AC/KvB;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACNxB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","file":"sass.css"}
\ No newline at end of file
{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/abstract/_members.scss","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass","../../src/sass/_phylo.scss"],"names":[],"mappings":"AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EAEA;;;AAEF;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AAME;EACE;;;AC9DN;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACjFJ;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC1GF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAMN;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEA;EACE;EACA;;AAEJ;EACE;EACA;;AAIA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AAIF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AAGR;EACE;;AAEA;EACE;EACA;;AC5HO;ED+HP;;;ACxIO;ED2IP;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAEN;EAWE;EAGA;EACA,eAvPkB;;AAyPlB;EACE;EACA;;AC/LO;ED4MP;EACA,MAFW;EAGX;;;ACvNO;ED2NP;EACA,OAFW;EAGX;;;AAGA;EACE;;AAEA;EACE;;AAGJ;EACE;;AACF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;;AAEA;EAGE;EACA,WAzSa;EA4Sb;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAEN;EACE;EACA;EACA;EACA;;AAEJ;EAEE;EACA;;;AAEJ;EAEE;EACA;;;AAEF;EAGE;EAKA;EACA;EACA;EACA;EAGA;EACA;EACA;EAKA;;AAHA;EACE;;;AAKJ;EAGE;;AC3SS;EDrDP;EACA;;;AC2CO;EDxCP;EACA;;;ACgDO;ED8SP;;AAEA;EACE;;;AC1TK;ED6TP;;AAEA;EACE;;;AAON;EAIE;EAEA;EACA;EACA;EACA,QApYmC;EAqYnC;;ACxUS;ED4UP;;;ACrVO;EDwVP;;;AAEJ;EAGE;EAEA;EACA;EACA;EACA,QAvZgC;EAwZhC;;AC1VS;ED8VP;;;ACvWO;ED0WP;;;AAKF;EAIE;EACA;;AC3WO;EDrDP;EACA;;;AC2CO;EDxCP;EACA;;;AA6ZA;EACE,eA3a+B;;;AAibjC;EACE;;AAEE;EACE;;;AE/ZN;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;AAEV;EACE;;AAEA;EACE;;;AC9FN;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAII;EACE;EACA;;AAEJ;EACE;EACA;;AF4CK;EEzCP;;AAEA;EACE;;;AF6BK;EE1BP;;AAEA;EACE;;;AAGN;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;AAEA;EACE;;AAEF;EACE;;;AAGJ;EAKE;;AAEA;EACE;;AAIE;EACE;;AACF;EACE;;AAEJ;EAGE;;AAGJ;EACE,SAtBa;EAuBb;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKE;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;;AAKN;EACE;;AFjGO;EEoGL;;;AF7GK;EEgHL;;;AAEJ;EACE,SAZa;;;AAcjB;EAKE;;AAEA;EACE;EACA,OARa;EASb,QATa;EAUb,MAToB;EAUpB,KATmB;;;AC/KvB;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACNxB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AChBF;AAAA;AAGA;AAEA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAEA;EACE;EACA;AACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;AACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;EACA;AACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;AACA;;;AAGF;AAEA;EACE;EACA;;;AAIF;AAGA;AAEA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EAAU;EACV;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;EAEE;;;AAEF;EACE;EACA;;;AAKF;AAGA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AACE;AACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;AACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAEA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AACE;;;AAGF;AACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AACE;AACA;AACA;EACA;;;AAGF;AACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAEA;EACE;EACA;;;AAGF;AAEA;EACE;;;AAIF;AAEA;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA","file":"sass.css"}
\ No newline at end of file
......@@ -6,23 +6,27 @@ import Gargantext.Prelude
import Affjax as AX
import Affjax.ResponseFormat as ResponseFormat
import DOM.Simple (window)
import DOM.Simple.Console (log2)
import Data.Either (Either(..))
import Data.HTTP.Method (Method(..))
import Data.Maybe (Maybe(..))
import Effect.Aff (Aff, launchAff_)
import Effect.Class (liftEffect)
import FFI.Simple ((.=))
import Gargantext.Components.PhyloExplorer.JSON (PhyloJSONSet(..))
import Gargantext.Components.PhyloExplorer.Layout (layout)
import Gargantext.Components.PhyloExplorer.Types (PhyloDataSet, parsePhyloJSONSet)
import Gargantext.Sessions (Session)
import Gargantext.Types (NodeID)
import Gargantext.Utils.Reactix as R2
import Graphics.D3.Base (d3)
import Reactix as R
import Reactix.DOM.HTML as H
import Simple.JSON as JSON
import Toestand as T
here :: R2.Here
here = R2.here "Gargantext.Components.Nodes.Corpus.Phylo"
......@@ -40,6 +44,9 @@ phyloLayoutCpt = here.component "phyloLayout" cpt where
fetchedDataBox <- T.useBox (Nothing :: Maybe PhyloDataSet)
fetchedData <- T.useLive T.unequal fetchedDataBox
R.useEffectOnce' $
pure $ (window .= "d3") d3
R.useEffectOnce' $ launchAff_ do
result <- fetchPhyloJSON
liftEffect $ case result of
......
'use strict';
exports._drawPhylo = drawPhylo;
// set javascript date from a string year
......@@ -12,39 +10,39 @@ function yearToDate(year) {
}
function stringToDate(str) {
var arr = (str.replace('"','')).split('-');
var d = new Date();
d.setYear(parseInt(arr[0]));
d.setMonth(parseInt(arr[1]));
d.setMonth(d.getMonth() - 1);
d.setDate(parseInt(arr[2]));
return d;
var arr = (str.replace('"','')).split('-');
var d = new Date();
d.setYear(parseInt(arr[0]));
d.setMonth(parseInt(arr[1]));
d.setMonth(d.getMonth() - 1);
d.setDate(parseInt(arr[2]));
return d;
}
function utcStringToDate(str) {
var arr = ((str.replace('"','')).replace(' UTC','')).split(/[\s-:]+/);
var d = new Date();
d.setYear(parseInt(arr[0]));
d.setMonth(parseInt(arr[1]));
d.setDate(parseInt(arr[2]));
d.setHours(parseInt(arr[3]),parseInt(arr[4]),parseInt(arr[5]))
return d;
var arr = ((str.replace('"','')).replace(' UTC','')).split(/[\s-:]+/);
var d = new Date();
d.setYear(parseInt(arr[0]));
d.setMonth(parseInt(arr[1]));
d.setDate(parseInt(arr[2]));
d.setHours(parseInt(arr[3]),parseInt(arr[4]),parseInt(arr[5]))
return d;
}
function stringArrToArr(str) {
var arr = ((str.replace('["','')).replace('"]','')).split('","');
return arr;
var arr = ((str.replace('["','')).replace('"]','')).split('","');
return arr;
}
function intArrToArr(int) {
var arr = ((int.replace('[','')).replace(']','')).split(',');
return arr;
var arr = ((int.replace('[','')).replace(']','')).split(',');
return arr;
}
function yearToDateHacked(w) {
var d = new Date(2020,0,0);
d.setDate(d.getDate() + (w * 7));
return d
var d = new Date(2020,0,0);
d.setDate(d.getDate() + (w * 7));
return d
}
function toCoord(id) {
......@@ -56,40 +54,40 @@ function toCoord(id) {
function toXLabels(branches, groups, xMax) {
var xLabels = branches.map(function(b) {
var bId = b.bId,
xs = groups.filter(g => g.bId == bId).map(g => g.x),
inf = Math.min(...xs),
sup = Math.max(...xs);
return { x : b.x2,
label : b.label.replace(/\"/g, '').replace(/\|/g, ''),
inf : inf,
sup : sup,
bId : bId};
var bId = b.bId,
xs = groups.filter(g => g.bId == bId).map(g => g.x),
inf = Math.min(...xs),
sup = Math.max(...xs);
return { x : b.x2,
label : b.label.replace(/\"/g, '').replace(/\|/g, ''),
inf : inf,
sup : sup,
bId : bId};
})
return xLabels.map(function(b,i){
var prec = 0,
succ = xMax;
var prec = 0,
succ = xMax;
if (i != 0)
prec = xLabels[i -1].sup
if (i != 0)
prec = xLabels[i -1].sup
if (i != (xLabels.length - 1))
succ = xLabels[i + 1].inf
if (i != (xLabels.length - 1))
succ = xLabels[i + 1].inf
var w = Math.min(...[(b.x - prec) / 2,(succ - b.x) / 2]),
inf = b.x - w,
sup = b.x + w;
var w = Math.min(...[(b.x - prec) / 2,(succ - b.x) / 2]),
inf = b.x - w,
sup = b.x + w;
inf = (b.inf < inf) ? b.inf : inf + (w / 10);
sup = (b.sup > sup) ? b.sup : sup - (w / 10);
inf = (b.inf < inf) ? b.inf : inf + (w / 10);
sup = (b.sup > sup) ? b.sup : sup - (w / 10);
return { x : (sup + inf) / 2,
label : b.label,
inf : inf,
sup : sup,
bId : b.bId};
return { x : (sup + inf) / 2,
label : b.label,
inf : inf,
sup : sup,
bId : b.bId};
})
}
......@@ -118,7 +116,6 @@ function xOverFlow(ticks,arr) {
var branchFocus = [];
function addMarkX(ticks,ws,ids) {
ticks.each(function(t,i){
d3.select(this)
......@@ -142,7 +139,6 @@ function setMarkYLabel(labels) {
})
}
function addMarkY(ticks) {
ticks.each(function(d,i){
if (d3.timeYear(d) < d) {
......@@ -172,12 +168,11 @@ function removeDays(date, days) {
return result;
}
function setYDomain(labels) {
var ts = ["week","month","day","year","epoch"];
console.log(labels)
//console.log(labels)
if (ts.includes(window.timeScale)) {
labels = labels.sort(function(d1,d2){return d1.from - d2.from;})
......@@ -212,21 +207,20 @@ function setYDomain(labels) {
return [inf,sup];
}
function groupTermsBy(elements, attr) {
let grouped = {},
curr = "";
for (var i = 0; i < elements.length; i++) {
let from = elements[i].getAttribute(attr)
if (curr != from) {
grouped[from] = [[(elements[i]).getAttribute("gx"),(elements[i]).getAttribute("gy"),(elements[i]).getAttribute("bid")]];
curr = from
} else {
grouped[from].push([(elements[i]).getAttribute("gx"),(elements[i]).getAttribute("gy"),(elements[i]).getAttribute("bid")]);
}
let grouped = {},
curr = "";
for (var i = 0; i < elements.length; i++) {
let from = elements[i].getAttribute(attr)
if (curr != from) {
grouped[from] = [[(elements[i]).getAttribute("gx"),(elements[i]).getAttribute("gy"),(elements[i]).getAttribute("bid")]];
curr = from
} else {
grouped[from].push([(elements[i]).getAttribute("gx"),(elements[i]).getAttribute("gy"),(elements[i]).getAttribute("bid")]);
}
return Object.values(grouped);
};
}
return Object.values(grouped);
};
function findValueByPrefix(prefix) {
......@@ -241,7 +235,6 @@ function findValueByPrefix(prefix) {
return null;
}
function highlightSource() {
let checkSource = document.getElementById("checkSource");
let value = checkSource.options[checkSource.selectedIndex].value;
......@@ -273,47 +266,47 @@ function highlightSource() {
.classed("peak-focus-source", true);
})
}
}
}
function drawWordCloud (groups) {
function drawWordCloud (groups) {
let labels = {},
count = 0;
let labels = {},
count = 0;
d3.selectAll(".word-cloud").remove();
d3.selectAll(".word-cloud").remove();
groups.forEach(function(g){
let gid = (g.getAttribute("id")).replace("group","");
let terms = d3.selectAll(".term").filter(".g-" + gid).nodes();
terms.forEach(function(t){
count ++;
if (labels[t.getAttribute("fdt")] == undefined) {
labels[t.getAttribute("fdt")] = {"freq" : 1, "label" : t.getAttribute("label")}
} else {
labels[t.getAttribute("fdt")].freq = labels[t.getAttribute("fdt")].freq + 1
}
})
});
groups.forEach(function(g){
let gid = (g.getAttribute("id")).replace("group","");
let terms = d3.selectAll(".term").filter(".g-" + gid).nodes();
terms.forEach(function(t){
count ++;
if (labels[t.getAttribute("fdt")] == undefined) {
labels[t.getAttribute("fdt")] = {"freq" : 1, "label" : t.getAttribute("label")}
} else {
labels[t.getAttribute("fdt")].freq = labels[t.getAttribute("fdt")].freq + 1
}
})
});
labels = (Object.values(labels)).map(function(l){
return {"freq":(l.freq / count),"label":l.label};
}).sort(function(l1,l2){
return l2.freq - l1.freq;
})
labels = (Object.values(labels)).map(function(l){
return {"freq":(l.freq / count),"label":l.label};
}).sort(function(l1,l2){
return l2.freq - l1.freq;
})
let y = 20
let opacity = d3.scaleLinear().domain([Math.log((labels[labels.length - 1]).freq),Math.log((labels[0]).freq)]).range([0.5,1]);
labels.forEach(function(l){
y = y + 12;
window.svg3.append("text")
.attr("class","word-cloud")
.attr("x", 10)
.attr("y", y)
.style("opacity", opacity(Math.log(l.freq)))
.text(l.label);
})
}
let y = 20
let opacity = d3.scaleLinear().domain([Math.log((labels[labels.length - 1]).freq),Math.log((labels[0]).freq)]).range([0.5,1]);
labels.forEach(function(l){
y = y + 12;
window.svg3.append("text")
.attr("class","word-cloud")
.attr("x", 10)
.attr("y", y)
.style("opacity", opacity(Math.log(l.freq)))
.text(l.label);
})
}
function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
......@@ -424,7 +417,6 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
wo = w - xo - m.r,
ho = h - yo - m.b;
/* *** draw the graph *** */
var div3 = d3.select('#phyloGraph')
......@@ -437,6 +429,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
.attr("height",div3.height)
.append("g");
/* labels */
var firstDate = Math.min(...groups.map(g => (g.from).getFullYear()))
......@@ -459,7 +452,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
var xScale = d3.scaleLinear().domain([0,frame[2]]).range([xo + m.t,wo + xo]),
yScale = d3.scaleTime().domain(setYDomain(yLabels)).range([m.t + yo, ho + yo]);
/* panel and mask */
/* panel and& mask */
var mask = svg
.append("defs")
......@@ -498,10 +491,10 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
/* links */
function findGroup (id, xsc, ysc) {
var group = groups.find(g => g.gId == id),
x = xsc(group.x);
y = ysc(group.to);
return [x,y]
var group = groups.find(g => g.gId == id),
x = xsc(group.x);
y = ysc(group.to);
return [x,y]
}
var linkGen = d3.linkVertical();
......@@ -650,7 +643,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
groups.forEach(function(g){
// is a term in many branches ?
for (var i = 0; i < (g.foundation).length; i++) {
var fdt = parseInt(((g.foundation)[i]).trim());
var fdt = (g.foundation)[i];
if (fdt in branchByGroup) {
(branchByGroup[fdt]).push(g.bId);
} else {
......@@ -661,7 +654,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
if ((g.role).includes(0)) {
for (var i = 0; i < (g.role).length; i++) {
if ((g.role)[i] == 0) {
var gf = parseInt(((g.foundation)[i]).trim())
var gf = (g.foundation)[i];
if (gf in emergences) {
(emergences[gf].x).push(xScale(g.x));
(emergences[gf].y).push(yScale(g.to));
......@@ -722,7 +715,6 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
});
});
function landingView() {
window.ldView = true;
doubleClick()
......@@ -763,8 +755,8 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
/* groups */
function textWidth(text) {
const context = document.createElement("canvas").getContext("2d");
return context.measureText(text).width;
const context = document.createElement("canvas").getContext("2d");
return context.measureText(text).width;
}
function toLines(words,fdt,role,targetWidth) {
......@@ -805,8 +797,8 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
function findFreq(fdt) {
let freq = 0;
if (window.freq[fdt.trim()] != null) {
freq = window.freq[fdt.trim()]
if (window.freq[fdt] != null) {
freq = window.freq[fdt]
}
return freq;
}
......@@ -870,8 +862,8 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
fdt = lines[i].fdt,
roles = lines[i].role,
terms = mergeLists(words,fdt,roles)
toSpan = (acc, w) => acc + "<tspan fdt=" + (w[1]).trim()
+ " class='term fdt-" + (w[1]).trim() + " " + "g-" + g.gId + findRole(w[2]) + "'"
toSpan = (acc, w) => acc + "<tspan fdt=" + w[1]
+ " class='term fdt-" + w[1] + " " + "g-" + g.gId + findRole(w[2]) + "'"
+ " gy=" + yScale(g.to)
+ " gx=" + xScale(g.x)
+ " freq=" + findFreq(w[1])
......@@ -911,6 +903,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
d3.selectAll(".header").raise();
function findRole(r) {
if (r == 0) {
return " emerging";
......@@ -1056,79 +1049,81 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
}
}
function termClick (txt,idx,nodeId,typeNode) {
}
// remove old focus
initPath()
function termClick (txt,idx,nodeId,typeNode) {
// catch the last transformations
if (typeNode == "group") {
var transform = d3.select("#group" + nodeId).node().getAttribute("transform");
} else if (typeNode == "head") {
var transform = d3.select("#head" + nodeId).node().getAttribute("transform");
} else {
var transform = (d3.selectAll(".header").nodes())[0].getAttribute("transform");
}
// remove old focus
initPath()
// focus
// catch the last transformations
if (typeNode == "group") {
var transform = d3.select("#group" + nodeId).node().getAttribute("transform");
} else if (typeNode == "head") {
var transform = d3.select("#head" + nodeId).node().getAttribute("transform");
} else {
var transform = (d3.selectAll(".header").nodes())[0].getAttribute("transform");
}
document.querySelector("#phyloPhylo").innerHTML = txt;
document.querySelector("#phyloPhylo").classList.add("phylo-focus");
document.querySelector("#phyloSearch").setAttribute("href",'https://en.wikipedia.org/w/index.php?search="' + txt + '"')
// focus
// highlight the groups
document.querySelector("#phyloPhylo").innerHTML = txt;
document.querySelector("#phyloPhylo").classList.add("phylo-focus");
document.querySelector("#phyloSearch").setAttribute("href",'https://en.wikipedia.org/w/index.php?search="' + txt + '"')
var terms = document.getElementsByClassName("fdt-" + idx),
periods = groupTermsBy(terms,"from");
// highlight the groups
var groups = [];
var terms = document.getElementsByClassName("fdt-" + idx),
periods = groupTermsBy(terms,"from");
for (var i = 0; i < terms.length; i++) {
groups.push(d3.select("#group" + (terms[i]).getAttribute("gid")));
branchFocus.push((terms[i]).getAttribute("bid"));
}
var groups = [];
for (var i = 0; i < terms.length; i++) {
groups.push(d3.select("#group" + (terms[i]).getAttribute("gid")));
branchFocus.push((terms[i]).getAttribute("bid"));
}
highlightGroups(groups.map(g => g.node()));
drawWordCloud(groups.map(g => g.node()));
// highlight the cross branches links
var bids = [];
for (var i = 0; i < periods.length; i++) {
if (i != periods.length - 1) {
for (var j = 0; j < periods[i].length; j++) {
bids.push(periods[i][j][2])
var x1 = periods[i][j][0],
y1 = periods[i][j][1];
for (var k = 0; k < periods[i + 1].length; k++) {
var x2 = periods[i + 1][k][0],
y2 = periods[i + 1][k][1];
if ((periods[i][j][2] != periods[i + 1][k][2]) && (!bids.includes(periods[i + 1][k][2]))) {
// draw the links between branches
panel
.append("path")
.attr("class","term-path")
.attr("d", function(d) {
return "M" + x1 + "," + y1
+ "C" + x2 + "," + y1
+ " " + x2 + "," + y2
+ " " + x2 + "," + y2;
})
.attr("transform",transform)
.style("stroke-opacity", 0.4)
.lower();
}
bids.push(periods[i + 1][k][2])
highlightGroups(groups.map(g => g.node()));
drawWordCloud(groups.map(g => g.node()));
// highlight the cross branches links
var bids = [];
for (var i = 0; i < periods.length; i++) {
if (i != periods.length - 1) {
for (var j = 0; j < periods[i].length; j++) {
bids.push(periods[i][j][2])
var x1 = periods[i][j][0],
y1 = periods[i][j][1];
for (var k = 0; k < periods[i + 1].length; k++) {
var x2 = periods[i + 1][k][0],
y2 = periods[i + 1][k][1];
if ((periods[i][j][2] != periods[i + 1][k][2]) && (!bids.includes(periods[i + 1][k][2]))) {
// draw the links between branches
panel
.append("path")
.attr("class","term-path")
.attr("d", function(d) {
return "M" + x1 + "," + y1
+ "C" + x2 + "," + y1
+ " " + x2 + "," + y2
+ " " + x2 + "," + y2;
})
.attr("transform",transform)
.style("stroke-opacity", 0.4)
.lower();
}
bids.push(periods[i + 1][k][2])
}
}
}
d3.selectAll(".path-unfocus").lower();
}
function peakOver (b,i) {
d3.selectAll(".path-unfocus").lower();
}
function peakOver (b,i) {
d3.select("#peak-" + i).classed("peak-focus",false);
d3.select("#peak-" + i).classed("peak-over",true);
label.text(b.label.replace(/"/g,''))
......@@ -1297,102 +1292,101 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
function exportViz() {
const xmlns = "http://www.w3.org/2000/xmlns/";
const xlinkns = "http://www.w3.org/1999/xlink";
const svgns = "http://www.w3.org/2000/svg";
var time = new Date();
const xmlns = "http://www.w3.org/2000/xmlns/";
const xlinkns = "http://www.w3.org/1999/xlink";
const svgns = "http://www.w3.org/2000/svg";
serialize(svg.node(),"phylomemy-" + Date.parse(time.toString()) + ".svg")
var time = new Date();
function serialize(graph,name) {
graph = graph.cloneNode(true);
const fragment = window.location.href + "#";
const walker = document.createTreeWalker(graph, NodeFilter.SHOW_ELEMENT, null, false);
while (walker.nextNode()) {
for (const attr of walker.currentNode.attributes) {
if (attr.value.includes(fragment)) {
attr.value = attr.value.replace(fragment, "#");
}
}
}
graph.setAttributeNS(xmlns, "xmlns", svgns);
graph.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
var cssStyleText = getCSSStyles( graph );
appendCSS( cssStyleText, graph );
const serializer = new window.XMLSerializer;
const string = serializer.serializeToString(graph);
var svgBlob = new Blob([string], {type: "image/svg+xml"});
var svgUrl = URL.createObjectURL(svgBlob);
var downloadLink = document.createElement("a");
downloadLink.href = svgUrl;
downloadLink.download = name;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
};
function getCSSStyles( parentElement ) {
var selectorTextArr = [];
// Add Parent element Id and Classes to the list
selectorTextArr.push( '#'+parentElement.id );
for (var c = 0; c < parentElement.classList.length; c++)
if ( !contains('.'+parentElement.classList[c], selectorTextArr) )
selectorTextArr.push( '.'+parentElement.classList[c] );
// Add Children element Ids and Classes to the list
var nodes = parentElement.getElementsByTagName("*");
for (var i = 0; i < nodes.length; i++) {
var id = nodes[i].id;
if ( !contains('#'+id, selectorTextArr) )
selectorTextArr.push( '#'+id );
var classes = nodes[i].classList;
for (var c = 0; c < classes.length; c++)
if ( !contains('.'+classes[c], selectorTextArr) )
selectorTextArr.push( '.'+classes[c] );
serialize(svg.node(),"phylomemy-" + Date.parse(time.toString()) + ".svg")
function serialize(graph,name) {
graph = graph.cloneNode(true);
const fragment = window.location.href + "#";
const walker = document.createTreeWalker(graph, NodeFilter.SHOW_ELEMENT, null, false);
while (walker.nextNode()) {
for (const attr of walker.currentNode.attributes) {
if (attr.value.includes(fragment)) {
attr.value = attr.value.replace(fragment, "#");
}
}
}
graph.setAttributeNS(xmlns, "xmlns", svgns);
graph.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
var cssStyleText = getCSSStyles( graph );
appendCSS( cssStyleText, graph );
const serializer = new window.XMLSerializer;
const string = serializer.serializeToString(graph);
var svgBlob = new Blob([string], {type: "image/svg+xml"});
var svgUrl = URL.createObjectURL(svgBlob);
var downloadLink = document.createElement("a");
downloadLink.href = svgUrl;
downloadLink.download = name;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
};
function getCSSStyles( parentElement ) {
var selectorTextArr = [];
// Add Parent element Id and Classes to the list
selectorTextArr.push( '#'+parentElement.id );
for (var c = 0; c < parentElement.classList.length; c++)
if ( !contains('.'+parentElement.classList[c], selectorTextArr) )
selectorTextArr.push( '.'+parentElement.classList[c] );
// Add Children element Ids and Classes to the list
var nodes = parentElement.getElementsByTagName("*");
for (var i = 0; i < nodes.length; i++) {
var id = nodes[i].id;
if ( !contains('#'+id, selectorTextArr) )
selectorTextArr.push( '#'+id );
var classes = nodes[i].classList;
for (var c = 0; c < classes.length; c++)
if ( !contains('.'+classes[c], selectorTextArr) )
selectorTextArr.push( '.'+classes[c] );
}
// Extract CSS Rules
var extractedCSSText = "";
for (var i = 0; i < document.styleSheets.length; i++) {
var s = document.styleSheets[i];
try {
if(!s.cssRules) continue;
} catch( e ) {
if(e.name !== 'SecurityError') throw e; // for Firefox
continue;
}
// Extract CSS Rules
var extractedCSSText = "";
for (var i = 0; i < document.styleSheets.length; i++) {
var s = document.styleSheets[i];
var cssRules = s.cssRules;
for (var r = 0; r < cssRules.length; r++) {
if ( contains( cssRules[r].selectorText, selectorTextArr ) )
extractedCSSText += cssRules[r].cssText;
try {
if(!s.cssRules) continue;
} catch( e ) {
if(e.name !== 'SecurityError') throw e; // for Firefox
continue;
}
}
var cssRules = s.cssRules;
for (var r = 0; r < cssRules.length; r++) {
if ( contains( cssRules[r].selectorText, selectorTextArr ) )
extractedCSSText += cssRules[r].cssText;
}
}
return extractedCSSText;
function contains(str,arr) {
return arr.indexOf( str ) === -1 ? false : true;
}
}
return extractedCSSText;
function appendCSS( cssText, element ) {
var styleElement = document.createElement("style");
styleElement.setAttribute("type","text/css");
styleElement.innerHTML = cssText;
var refNode = element.hasChildNodes() ? element.children[0] : null;
element.insertBefore( styleElement, refNode );
}
}
function contains(str,arr) {
return arr.indexOf( str ) === -1 ? false : true;
}
}
function appendCSS( cssText, element ) {
var styleElement = document.createElement("style");
styleElement.setAttribute("type","text/css");
styleElement.innerHTML = cssText;
var refNode = element.hasChildNodes() ? element.children[0] : null;
element.insertBefore( styleElement, refNode );
}
}
}
......@@ -2,11 +2,11 @@ module Gargantext.Components.PhyloExplorer.Draw where
import Gargantext.Prelude
import Data.Function.Uncurried (Fn7, runFn7)
import Effect (Effect)
import Effect.Uncurried (EffectFn7, runEffectFn7)
import Gargantext.Components.PhyloExplorer.Types (AncestorLink, Branch, BranchLink, Group, Link, Period)
foreign import _drawPhylo :: Fn7
foreign import _drawPhylo :: EffectFn7
(Array Branch)
(Array Period)
(Array Group)
......@@ -14,7 +14,7 @@ foreign import _drawPhylo :: Fn7
(Array AncestorLink)
(Array BranchLink)
(Array Number)
(Effect Unit)
(Unit)
drawPhylo ::
Array Branch
......@@ -25,4 +25,4 @@ drawPhylo ::
-> Array BranchLink
-> Array Number
-> Effect Unit
drawPhylo = runFn7 _drawPhylo
drawPhylo = runEffectFn7 _drawPhylo
......@@ -35,7 +35,7 @@ foreign import stringToDate :: String -> Date.Date
foreign import utcStringToDate :: String -> Date.Date
newtype PhyloDataSet = PhyloDataSet
data PhyloDataSet = PhyloDataSet
{ ancestorLinks :: Array AncestorLink
, bb :: Array Number
, branchLinks :: Array BranchLink
......@@ -90,7 +90,7 @@ parsePhyloJSONSet (PhyloJSONSet o) = PhyloDataSet
-----------------------------------------------------------
data Branch = Branch
newtype Branch = Branch
{ bId :: Int
, gvid :: Int
, label :: String
......@@ -122,7 +122,7 @@ parseBranches
-----------------------------------------------------------
data Period = Period
newtype Period = Period
{ from :: Date.Date
, to :: Date.Date
, y :: Number
......@@ -148,7 +148,7 @@ parsePeriods epoch
-----------------------------------------------------------
data Group = Group
newtype Group = Group
{ bId :: Int
, foundation :: Array Int -- @WIP: Array String ???
, from :: Date.Date
......@@ -192,7 +192,7 @@ parseGroups epoch
-----------------------------------------------------------
data Link = Link
newtype Link = Link
{ from :: Int
, lId :: Int
, label :: String -- @WIP: undefined in Mèmiescape v2, still needed?
......@@ -227,7 +227,7 @@ parseLinks
-----------------------------------------------------------
data AncestorLink = AncestorLink
newtype AncestorLink = AncestorLink
{ from :: Int
, lId :: Int
, label :: String -- @WIP: undefined in Mèmiescape v2, still needed?
......@@ -262,7 +262,7 @@ parseAncestorLinks
-----------------------------------------------------------
data BranchLink = BranchLink
newtype BranchLink = BranchLink
{ from :: Int
, to :: Int
}
......@@ -293,7 +293,7 @@ parseBranchLinks
-----------------------------------------------------------
data GlobalTerm = GlobalTerm
newtype GlobalTerm = GlobalTerm
{ label :: String
, fdt :: String
}
......
......@@ -9,7 +9,6 @@ import Effect (Effect)
import FFI.Simple ((...))
import Gargantext.Components.App (app)
import Gargantext.Utils.Reactix as R2
import Graphics.D3.Base (D3, d3)
import Prelude (Unit, ($))
main :: Effect Unit
......@@ -18,7 +17,3 @@ main = paint $ toMaybe (document ... "getElementById" $ [ "app" ])
paint :: Maybe Element -> Effect Unit
paint Nothing = log "[main] Container not found"
paint (Just c) = R2.render (app {} []) c
-- @WIP
d3charge :: D3
d3charge = d3
/* memiescape v2.0
contact : quentin.lobbe@iscpif.fr */
/* fonts */
@font-face {
font-family: 'Inter-Regular';
font-style: normal;
font-weight: 400;
src: url("../fonts/phylo/Inter-Regular.woff2") format("woff2"),
url("../fonts/phylo/Inter-Regular.woff") format("woff");
}
@font-face {
font-family: 'Inter-Bold';
font-style: normal;
font-weight: 700;
src: url("../fonts/phylo/Inter-Bold.woff2") format("woff2"),
url("../fonts/phylo/Inter-Bold.woff") format("woff");
}
/* grid */
.phylo {
font-family: "Inter-Regular";
font-size: 16px;
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: 2% 7% 7% auto 1%;
grid-gap: 10px;
height: calc(100vh - 20px);
color: #0d1824;
}
/* ---- row 1 ---- */
.phylo-title {
grid-row: 1;
grid-column: 1 / 2;
align-items: center;
text-align: right;
margin-top: 0.5px;
}
.phylo-folder {
grid-row: 1;
grid-column: 2 / 16;
align-items: center;
}
/* -------------------- */
.phylo-corpus {
grid-row: 2 / 3;
grid-column: 1 / 2;
/*background : #3E75B3;*/
font-size: 14px;
display: flex;
align-items: center;
justify-content: right;
}
.phylo-phylo {
grid-row: 3 / 4;
grid-column: 1 / 2;
font-size: 14px;
display: flex;
align-items: center;
justify-content: right;
}
.phylo-corpus-info {
grid-row: 2 / 3;
grid-column: 2 / 4;
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
}
.phylo-phylo-info {
grid-row: 3 / 4;
grid-column: 2 / 4;
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
}
.phylo-how {
grid-row: 2 / 4;
grid-column: 1 / 2;
z-index: 2;
display: flex;
align-items: center;
justify-content: right;
}
.phylo-isoline {
grid-row: 2 / 4;
grid-column: 3 / 15;
/*background: rgba(223,216,200,0.25); */
}
.phylo-isoline-info {
grid-row: 2 / 4;
grid-column: 15 / 16;
padding-top: 20%;
padding-bottom: 20%;
padding-left: 15px;
}
/* -------------------- */
.phylo-scape {
grid-row: 4;
grid-column: 1 / 15;
/*background: #FFCC73;*/
}
.phylo-timeline {
grid-row: 4;
grid-column: 1 / 2;
}
.phylo-graph {
grid-row: 4;
grid-column: 15 / 16;
/*background: #FFCC73;*/
}
/* -------------------- */
.phylo-footer {
grid-row: 5;
grid-column: 2 / 16;
}
/* classes */
/* ---------- icons ---------- */
a {
color: inherit;
cursor: pointer;
}
.how {
cursor: pointer;
position: relative;
}
.tooltip {
font-family: "Inter-Regular";
font-size: 14px;
font-style: normal;
font-weight: 400;
}
i.how span {
position: absolute;
width:300px;
color: #FFFFFF;
background: #0d1824;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
i.how span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #0d1824;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
i.how:hover span {
visibility: visible;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
.switch > .far + .fa,
.switch:hover > .far {
display: none;
}
.switch:hover > .far + .fa {
display: inherit;
color: #0d1824;
}
/* ---------- fonts ---------- */
.font-bold {
font-family: "Inter-Bold";
text-transform: uppercase;
}
.font-small {
color: #0d1824;
font-size: 12px;
}
.header {
/*font-weight: bold;*/
/*text-transform: uppercase;*/
font-weight: 500;
cursor: pointer;
}
.header:hover {
font-weight: bold;
}
/* ---------- input ---------- */
.button {
background-color: white;
border: 1.5px solid #0d1824;
cursor: pointer;
}
.button:hover {
background-color: #0d1824;
color: white;
}
.btn-group button{
margin-top: 1px;
margin-bottom: 1px;
display: block;
width: 40px;
}
.draw {
display: none;
}
.phylo-focus {
fill: #f8381f;
color: #f8381f;
}
.reset {
visibility: hidden;
}
.label {
visibility: hidden;
}
.heading {
visibility: hidden;
}
.export {
visibility: hidden;
}
.headed {
background-color: #0d1824;
color: white;
}
.labeled {
background-color: #0d1824;
color: white;
}
.input-file {
display: inline-block;
cursor: pointer;
}
.input-file:hover {
border-bottom: 1.5px solid #0d1824;
}
.input-name {
font-style: italic;
opacity: 0.7;
font-size: 14px;
padding-left: 6px;
padding-right: 6px;
}
/* ---------- axis ---------- */
.x-axis path {
stroke: #EBE4DD;
stroke-width: 1.5px;
}
.y-axis path {
stroke: #EBE4DD;
stroke-width: 1.5px;
}
.y-highlight {
stroke: #f3be54;
stroke-width: 1.5px;
}
.x-mark {
fill: #4A5C70;
stroke-width: 1px;
stroke: #fff;
}
.x-mark-over {
fill: #f3be54;
}
.x-mark-focus {
fill: #f8381f;
}
.tick text {
font-family: "Inter-Regular";
}
.tick text:hover {
cursor: pointer;
}
.y-label {
font-size: 10px;
font-family: "Inter-Regular";
font-weight: normal;
}
.y-label-bold {
font-size: 12px;
font-family: "Inter-Bold";
font-weight: bold;
}
.y-mark-year-inner {
fill: #4A5C70;
}
.y-mark-year-inner-highlight {
fill: #f3be54;
}
.y-mark-year-outer {
fill: #fff;
stroke: #4A5C70;
stroke-width: 1px;
}
.y-mark-year-outer-highlight {
fill: #fff;
stroke: #f3be54;
stroke-width: 3px;
}
.y-mark-month {
fill: #4A5C70;
}
/* ---------- group ---------- */
.group-outer {
stroke-width: 0.8px;
stroke: #fff;
fill: #fff;
}
.group-inner {
stroke-width: 0.8px;
stroke: #0d1824;
fill: #0d1824;
/*cursor: pointer;*/
z-index: 10;
}
.group-heading {
fill: #fff;
stroke: #B5B5B5;
}
.group-focus {
stroke: #f8381f;
}
.source-focus {
stroke: #67a9cf;
}
.group-unfocus {
stroke: #A9A9A9;
}
.group-path {
cursor: pointer;
}
/* ---------- labels ---------- */
.ngrams {
visibility: hidden;
}
.term {
cursor: pointer;
}
.term:hover {
font-weight: bold;
fill: #f8381f;
}
.term-unfocus {
/*fill: #A9A9A9;*/
}
.term-focus {
/*fill: black;*/
}
.term-path {
fill: none;
stroke: #F0684D;
stroke-width: 1.5px;
}
.emerging {
/*text-decoration: underline #F0684D;*/
/*fill:#5AA350;*/
/*fill: #5AA350;*/
fill: #F8381F;
}
.decreasing {
/*text-decoration: underline #74B5FF;*/
fill: #11638F;
}
.path-focus {
fill: none;
stroke: #F0684D;
stroke-width: 1.5px;
}
.path-unfocus {
stroke: #A9A9A9;
}
.path-heading {
stroke: #B5B5B5;
}
/* ---------- phylo ---------- */
.branch-hover {
fill: #f3be54;
opacity: 0.5;
}
/* elements */
#file-path {
display: none;
}
/* axis */
.axisRight {
font-family: "Inter-Regular";
font-size: 10px;
}
/* isoline */
.peak {
stroke: white;
stroke-width: 1px;
font-family: "Inter-Regular";
font-size: 14px;
text-anchor: middle;
visibility: visible;
}
.peak-over {
font-size: 18px;
stroke-width: 2px;
cursor: pointer;
stroke: #f3be54;
z-index: 100;
}
.peak-focus {
font-size: 18px;
stroke-width: 2px;
stroke: #F0684D;
}
.peak-focus-source {
font-size: 18px;
stroke-width: 2px;
stroke: #67a9cf;
}
.peak-label {
text-align: center;
font-family: "Inter-Regular";
font-size: 14px;
font-style: normal;
font-weight: 400;
color: #FFFFFF;
border-radius: 3px;
border-style: solid;
border-width: 2px;
border-color: white;
background: #0d1824;
padding: 5px;
z-index: 10;
position: absolute;
visibility: hidden;
}
.word-cloud {
font-family: "Inter-Regular";
font-size: 12px;
}
.search {
margin-left: 10px;
visibility: hidden;
position: absolute;
z-index: 7;
font-size: 14px;
background-color: transparent;
outline: 0;
border-width: 0 0 2px;
border-color: #0d1824
}
.search-label {
visibility: hidden;
margin-left: 5px;
}
.search:focus {
border-color: #F0684D
}
.autocomplete {
margin-left: 10px;
visibility: hidden;
position: absolute;
z-index: 7;
font-size: 14px;
background-color: transparent;
color: silver;
z-index: 1;
border: none;
}
.loading {
visibility: hidden;
}
.phylo-name {
visibility:hidden;
text-transform: capitalize;
font-weight: bold;
}
.select-source {
margin-left: 10px;
display: none;
border: 1.5px solid #0d1824;
cursor: pointer;
outline: 0;
background: transparent;
border-image: none;
outline-offset: -2px;
outline-color: transparent;
box-shadow: none;
-webkit-appearance: none;
}
option {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
......@@ -8,3 +8,4 @@
@use "_range_slider.sass"
@use "_annotation.sass"
@use "_folder_view.sass"
@use "_phylo.scss"
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment