Skip to content

P
purescript-gargantext
Commit 301eb8f8 authored by arturo's avatar arturo
Browse files
Options

>>> continue

parent 8a00269a
Hide whitespace changes
Inline Side-by-side
Showing with 14883 additions and 278 deletions
dist/js/knowledge-phylomemy.json 0 → 100644
View file @ 301eb8f8
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/styles/sass.css
View file @ 301eb8f8
...@@ -1138,4 +1138,585 @@ select.form-control { ...@@ -1138,4 +1138,585 @@ select.form-control {
width: 100%; 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 */ /*# sourceMappingURL=sass.css.map */
dist/styles/sass.css.map
View file @ 301eb8f8
{"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"} {"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 \ No newline at end of file
src/Gargantext/Components/Nodes/Corpus/Phylo.purs
View file @ 301eb8f8
...@@ -6,23 +6,27 @@ import Gargantext.Prelude ...@@ -6,23 +6,27 @@ import Gargantext.Prelude
import Affjax as AX import Affjax as AX
import Affjax.ResponseFormat as ResponseFormat import Affjax.ResponseFormat as ResponseFormat
import DOM.Simple (window)
import DOM.Simple.Console (log2) import DOM.Simple.Console (log2)
import Data.Either (Either(..)) import Data.Either (Either(..))
import Data.HTTP.Method (Method(..)) import Data.HTTP.Method (Method(..))
import Data.Maybe (Maybe(..)) import Data.Maybe (Maybe(..))
import Effect.Aff (Aff, launchAff_) import Effect.Aff (Aff, launchAff_)
import Effect.Class (liftEffect) import Effect.Class (liftEffect)
import FFI.Simple ((.=))
import Gargantext.Components.PhyloExplorer.JSON (PhyloJSONSet(..)) import Gargantext.Components.PhyloExplorer.JSON (PhyloJSONSet(..))
import Gargantext.Components.PhyloExplorer.Layout (layout) import Gargantext.Components.PhyloExplorer.Layout (layout)
import Gargantext.Components.PhyloExplorer.Types (PhyloDataSet, parsePhyloJSONSet) import Gargantext.Components.PhyloExplorer.Types (PhyloDataSet, parsePhyloJSONSet)
import Gargantext.Sessions (Session) import Gargantext.Sessions (Session)
import Gargantext.Types (NodeID) import Gargantext.Types (NodeID)
import Gargantext.Utils.Reactix as R2 import Gargantext.Utils.Reactix as R2
import Graphics.D3.Base (d3)
import Reactix as R import Reactix as R
import Reactix.DOM.HTML as H import Reactix.DOM.HTML as H
import Simple.JSON as JSON import Simple.JSON as JSON
import Toestand as T import Toestand as T
here :: R2.Here here :: R2.Here
here = R2.here "Gargantext.Components.Nodes.Corpus.Phylo" here = R2.here "Gargantext.Components.Nodes.Corpus.Phylo"
...@@ -40,6 +44,9 @@ phyloLayoutCpt = here.component "phyloLayout" cpt where ...@@ -40,6 +44,9 @@ phyloLayoutCpt = here.component "phyloLayout" cpt where
fetchedDataBox <- T.useBox (Nothing :: Maybe PhyloDataSet) fetchedDataBox <- T.useBox (Nothing :: Maybe PhyloDataSet)
fetchedData <- T.useLive T.unequal fetchedDataBox fetchedData <- T.useLive T.unequal fetchedDataBox
R.useEffectOnce' $
pure $ (window .= "d3") d3
R.useEffectOnce' $ launchAff_ do R.useEffectOnce' $ launchAff_ do
result <- fetchPhyloJSON result <- fetchPhyloJSON
liftEffect $ case result of liftEffect $ case result of
......
src/Gargantext/Components/PhyloExplorer/Draw.js
View file @ 301eb8f8
'use strict';
exports._drawPhylo = drawPhylo; exports._drawPhylo = drawPhylo;
// set javascript date from a string year // set javascript date from a string year
...@@ -12,39 +10,39 @@ function yearToDate(year) { ...@@ -12,39 +10,39 @@ function yearToDate(year) {
} }
function stringToDate(str) { function stringToDate(str) {
var arr = (str.replace('"','')).split('-'); var arr = (str.replace('"','')).split('-');
var d = new Date(); var d = new Date();
d.setYear(parseInt(arr[0])); d.setYear(parseInt(arr[0]));
d.setMonth(parseInt(arr[1])); d.setMonth(parseInt(arr[1]));
d.setMonth(d.getMonth() - 1); d.setMonth(d.getMonth() - 1);
d.setDate(parseInt(arr[2])); d.setDate(parseInt(arr[2]));
return d; return d;
} }
function utcStringToDate(str) { function utcStringToDate(str) {
var arr = ((str.replace('"','')).replace(' UTC','')).split(/[\s-:]+/); var arr = ((str.replace('"','')).replace(' UTC','')).split(/[\s-:]+/);
var d = new Date(); var d = new Date();
d.setYear(parseInt(arr[0])); d.setYear(parseInt(arr[0]));
d.setMonth(parseInt(arr[1])); d.setMonth(parseInt(arr[1]));
d.setDate(parseInt(arr[2])); d.setDate(parseInt(arr[2]));
d.setHours(parseInt(arr[3]),parseInt(arr[4]),parseInt(arr[5])) d.setHours(parseInt(arr[3]),parseInt(arr[4]),parseInt(arr[5]))
return d; return d;
} }
function stringArrToArr(str) { function stringArrToArr(str) {
var arr = ((str.replace('["','')).replace('"]','')).split('","'); var arr = ((str.replace('["','')).replace('"]','')).split('","');
return arr; return arr;
} }
function intArrToArr(int) { function intArrToArr(int) {
var arr = ((int.replace('[','')).replace(']','')).split(','); var arr = ((int.replace('[','')).replace(']','')).split(',');
return arr; return arr;
} }
function yearToDateHacked(w) { function yearToDateHacked(w) {
var d = new Date(2020,0,0); var d = new Date(2020,0,0);
d.setDate(d.getDate() + (w * 7)); d.setDate(d.getDate() + (w * 7));
return d return d
} }
function toCoord(id) { function toCoord(id) {
...@@ -56,40 +54,40 @@ function toCoord(id) { ...@@ -56,40 +54,40 @@ function toCoord(id) {
function toXLabels(branches, groups, xMax) { function toXLabels(branches, groups, xMax) {
var xLabels = branches.map(function(b) { var xLabels = branches.map(function(b) {
var bId = b.bId, var bId = b.bId,
xs = groups.filter(g => g.bId == bId).map(g => g.x), xs = groups.filter(g => g.bId == bId).map(g => g.x),
inf = Math.min(...xs), inf = Math.min(...xs),
sup = Math.max(...xs); sup = Math.max(...xs);
return { x : b.x2, return { x : b.x2,
label : b.label.replace(/\"/g, '').replace(/\|/g, ''), label : b.label.replace(/\"/g, '').replace(/\|/g, ''),
inf : inf, inf : inf,
sup : sup, sup : sup,
bId : bId}; bId : bId};
}) })
return xLabels.map(function(b,i){ return xLabels.map(function(b,i){
var prec = 0, var prec = 0,
succ = xMax; succ = xMax;
if (i != 0) if (i != 0)
prec = xLabels[i -1].sup prec = xLabels[i -1].sup
if (i != (xLabels.length - 1)) if (i != (xLabels.length - 1))
succ = xLabels[i + 1].inf succ = xLabels[i + 1].inf
var w = Math.min(...[(b.x - prec) / 2,(succ - b.x) / 2]), var w = Math.min(...[(b.x - prec) / 2,(succ - b.x) / 2]),
inf = b.x - w, inf = b.x - w,
sup = b.x + w; sup = b.x + w;
inf = (b.inf < inf) ? b.inf : inf + (w / 10); inf = (b.inf < inf) ? b.inf : inf + (w / 10);
sup = (b.sup > sup) ? b.sup : sup - (w / 10); sup = (b.sup > sup) ? b.sup : sup - (w / 10);
return { x : (sup + inf) / 2, return { x : (sup + inf) / 2,
label : b.label, label : b.label,
inf : inf, inf : inf,
sup : sup, sup : sup,
bId : b.bId}; bId : b.bId};
}) })
} }
...@@ -118,7 +116,6 @@ function xOverFlow(ticks,arr) { ...@@ -118,7 +116,6 @@ function xOverFlow(ticks,arr) {
var branchFocus = []; var branchFocus = [];
function addMarkX(ticks,ws,ids) { function addMarkX(ticks,ws,ids) {
ticks.each(function(t,i){ ticks.each(function(t,i){
d3.select(this) d3.select(this)
...@@ -142,7 +139,6 @@ function setMarkYLabel(labels) { ...@@ -142,7 +139,6 @@ function setMarkYLabel(labels) {
}) })
} }
function addMarkY(ticks) { function addMarkY(ticks) {
ticks.each(function(d,i){ ticks.each(function(d,i){
if (d3.timeYear(d) < d) { if (d3.timeYear(d) < d) {
...@@ -172,12 +168,11 @@ function removeDays(date, days) { ...@@ -172,12 +168,11 @@ function removeDays(date, days) {
return result; return result;
} }
function setYDomain(labels) { function setYDomain(labels) {
var ts = ["week","month","day","year","epoch"]; var ts = ["week","month","day","year","epoch"];
console.log(labels) //console.log(labels)
if (ts.includes(window.timeScale)) { if (ts.includes(window.timeScale)) {
labels = labels.sort(function(d1,d2){return d1.from - d2.from;}) labels = labels.sort(function(d1,d2){return d1.from - d2.from;})
...@@ -212,21 +207,20 @@ function setYDomain(labels) { ...@@ -212,21 +207,20 @@ function setYDomain(labels) {
return [inf,sup]; return [inf,sup];
} }
function groupTermsBy(elements, attr) { function groupTermsBy(elements, attr) {
let grouped = {}, let grouped = {},
curr = ""; curr = "";
for (var i = 0; i < elements.length; i++) { for (var i = 0; i < elements.length; i++) {
let from = elements[i].getAttribute(attr) let from = elements[i].getAttribute(attr)
if (curr != from) { if (curr != from) {
grouped[from] = [[(elements[i]).getAttribute("gx"),(elements[i]).getAttribute("gy"),(elements[i]).getAttribute("bid")]]; grouped[from] = [[(elements[i]).getAttribute("gx"),(elements[i]).getAttribute("gy"),(elements[i]).getAttribute("bid")]];
curr = from curr = from
} else { } else {
grouped[from].push([(elements[i]).getAttribute("gx"),(elements[i]).getAttribute("gy"),(elements[i]).getAttribute("bid")]); 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) { function findValueByPrefix(prefix) {
...@@ -241,7 +235,6 @@ function findValueByPrefix(prefix) { ...@@ -241,7 +235,6 @@ function findValueByPrefix(prefix) {
return null; return null;
} }
function highlightSource() { function highlightSource() {
let checkSource = document.getElementById("checkSource"); let checkSource = document.getElementById("checkSource");
let value = checkSource.options[checkSource.selectedIndex].value; let value = checkSource.options[checkSource.selectedIndex].value;
...@@ -273,47 +266,47 @@ function highlightSource() { ...@@ -273,47 +266,47 @@ function highlightSource() {
.classed("peak-focus-source", true); .classed("peak-focus-source", true);
}) })
} }
} }
function drawWordCloud (groups) { function drawWordCloud (groups) {
let labels = {}, let labels = {},
count = 0; count = 0;
d3.selectAll(".word-cloud").remove(); d3.selectAll(".word-cloud").remove();
groups.forEach(function(g){ groups.forEach(function(g){
let gid = (g.getAttribute("id")).replace("group",""); let gid = (g.getAttribute("id")).replace("group","");
let terms = d3.selectAll(".term").filter(".g-" + gid).nodes(); let terms = d3.selectAll(".term").filter(".g-" + gid).nodes();
terms.forEach(function(t){ terms.forEach(function(t){
count ++; count ++;
if (labels[t.getAttribute("fdt")] == undefined) { if (labels[t.getAttribute("fdt")] == undefined) {
labels[t.getAttribute("fdt")] = {"freq" : 1, "label" : t.getAttribute("label")} labels[t.getAttribute("fdt")] = {"freq" : 1, "label" : t.getAttribute("label")}
} else { } else {
labels[t.getAttribute("fdt")].freq = labels[t.getAttribute("fdt")].freq + 1 labels[t.getAttribute("fdt")].freq = labels[t.getAttribute("fdt")].freq + 1
} }
}) })
}); });
labels = (Object.values(labels)).map(function(l){ labels = (Object.values(labels)).map(function(l){
return {"freq":(l.freq / count),"label":l.label}; return {"freq":(l.freq / count),"label":l.label};
}).sort(function(l1,l2){ }).sort(function(l1,l2){
return l2.freq - l1.freq; return l2.freq - l1.freq;
}) })
let y = 20 let y = 20
let opacity = d3.scaleLinear().domain([Math.log((labels[labels.length - 1]).freq),Math.log((labels[0]).freq)]).range([0.5,1]); 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){ labels.forEach(function(l){
y = y + 12; y = y + 12;
window.svg3.append("text") window.svg3.append("text")
.attr("class","word-cloud") .attr("class","word-cloud")
.attr("x", 10) .attr("x", 10)
.attr("y", y) .attr("y", y)
.style("opacity", opacity(Math.log(l.freq))) .style("opacity", opacity(Math.log(l.freq)))
.text(l.label); .text(l.label);
}) })
} }
function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
...@@ -424,7 +417,6 @@ 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, wo = w - xo - m.r,
ho = h - yo - m.b; ho = h - yo - m.b;
/* *** draw the graph *** */ /* *** draw the graph *** */
var div3 = d3.select('#phyloGraph') var div3 = d3.select('#phyloGraph')
...@@ -437,6 +429,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { ...@@ -437,6 +429,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
.attr("height",div3.height) .attr("height",div3.height)
.append("g"); .append("g");
/* labels */ /* labels */
var firstDate = Math.min(...groups.map(g => (g.from).getFullYear())) var firstDate = Math.min(...groups.map(g => (g.from).getFullYear()))
...@@ -459,7 +452,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { ...@@ -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]), 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]); yScale = d3.scaleTime().domain(setYDomain(yLabels)).range([m.t + yo, ho + yo]);
/* panel and mask */ /* panel and& mask */
var mask = svg var mask = svg
.append("defs") .append("defs")
...@@ -498,10 +491,10 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { ...@@ -498,10 +491,10 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
/* links */ /* links */
function findGroup (id, xsc, ysc) { function findGroup (id, xsc, ysc) {
var group = groups.find(g => g.gId == id), var group = groups.find(g => g.gId == id),
x = xsc(group.x); x = xsc(group.x);
y = ysc(group.to); y = ysc(group.to);
return [x,y] return [x,y]
} }
var linkGen = d3.linkVertical(); var linkGen = d3.linkVertical();
...@@ -650,7 +643,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { ...@@ -650,7 +643,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
groups.forEach(function(g){ groups.forEach(function(g){
// is a term in many branches ? // is a term in many branches ?
for (var i = 0; i < (g.foundation).length; i++) { 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) { if (fdt in branchByGroup) {
(branchByGroup[fdt]).push(g.bId); (branchByGroup[fdt]).push(g.bId);
} else { } else {
...@@ -661,7 +654,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { ...@@ -661,7 +654,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
if ((g.role).includes(0)) { if ((g.role).includes(0)) {
for (var i = 0; i < (g.role).length; i++) { for (var i = 0; i < (g.role).length; i++) {
if ((g.role)[i] == 0) { if ((g.role)[i] == 0) {
var gf = parseInt(((g.foundation)[i]).trim()) var gf = (g.foundation)[i];
if (gf in emergences) { if (gf in emergences) {
(emergences[gf].x).push(xScale(g.x)); (emergences[gf].x).push(xScale(g.x));
(emergences[gf].y).push(yScale(g.to)); (emergences[gf].y).push(yScale(g.to));
...@@ -722,7 +715,6 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { ...@@ -722,7 +715,6 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
}); });
}); });
function landingView() { function landingView() {
window.ldView = true; window.ldView = true;
doubleClick() doubleClick()
...@@ -763,8 +755,8 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { ...@@ -763,8 +755,8 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
/* groups */ /* groups */
function textWidth(text) { function textWidth(text) {
const context = document.createElement("canvas").getContext("2d"); const context = document.createElement("canvas").getContext("2d");
return context.measureText(text).width; return context.measureText(text).width;
} }
function toLines(words,fdt,role,targetWidth) { function toLines(words,fdt,role,targetWidth) {
...@@ -805,8 +797,8 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { ...@@ -805,8 +797,8 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
function findFreq(fdt) { function findFreq(fdt) {
let freq = 0; let freq = 0;
if (window.freq[fdt.trim()] != null) { if (window.freq[fdt] != null) {
freq = window.freq[fdt.trim()] freq = window.freq[fdt]
} }
return freq; return freq;
} }
...@@ -870,8 +862,8 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { ...@@ -870,8 +862,8 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
fdt = lines[i].fdt, fdt = lines[i].fdt,
roles = lines[i].role, roles = lines[i].role,
terms = mergeLists(words,fdt,roles) terms = mergeLists(words,fdt,roles)
toSpan = (acc, w) => acc + "<tspan fdt=" + (w[1]).trim() toSpan = (acc, w) => acc + "<tspan fdt=" + w[1]
+ " class='term fdt-" + (w[1]).trim() + " " + "g-" + g.gId + findRole(w[2]) + "'" + " class='term fdt-" + w[1] + " " + "g-" + g.gId + findRole(w[2]) + "'"
+ " gy=" + yScale(g.to) + " gy=" + yScale(g.to)
+ " gx=" + xScale(g.x) + " gx=" + xScale(g.x)
+ " freq=" + findFreq(w[1]) + " freq=" + findFreq(w[1])
...@@ -911,6 +903,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { ...@@ -911,6 +903,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
d3.selectAll(".header").raise(); d3.selectAll(".header").raise();
function findRole(r) { function findRole(r) {
if (r == 0) { if (r == 0) {
return " emerging"; return " emerging";
...@@ -1056,79 +1049,81 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { ...@@ -1056,79 +1049,81 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
} }
} }
function termClick (txt,idx,nodeId,typeNode) { }
// remove old focus function termClick (txt,idx,nodeId,typeNode) {
initPath()
// catch the last transformations // remove old focus
if (typeNode == "group") { initPath()
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");
}
// 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; // focus
document.querySelector("#phyloPhylo").classList.add("phylo-focus");
document.querySelector("#phyloSearch").setAttribute("href",'https://en.wikipedia.org/w/index.php?search="' + txt + '"')
// 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), // highlight the groups
periods = groupTermsBy(terms,"from");
var groups = []; var terms = document.getElementsByClassName("fdt-" + idx),
periods = groupTermsBy(terms,"from");
for (var i = 0; i < terms.length; i++) { var groups = [];
groups.push(d3.select("#group" + (terms[i]).getAttribute("gid")));
branchFocus.push((terms[i]).getAttribute("bid")); 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())); highlightGroups(groups.map(g => g.node()));
drawWordCloud(groups.map(g => g.node())); drawWordCloud(groups.map(g => g.node()));
// highlight the cross branches links // highlight the cross branches links
var bids = []; var bids = [];
for (var i = 0; i < periods.length; i++) { for (var i = 0; i < periods.length; i++) {
if (i != periods.length - 1) { if (i != periods.length - 1) {
for (var j = 0; j < periods[i].length; j++) { for (var j = 0; j < periods[i].length; j++) {
bids.push(periods[i][j][2]) bids.push(periods[i][j][2])
var x1 = periods[i][j][0], var x1 = periods[i][j][0],
y1 = periods[i][j][1]; y1 = periods[i][j][1];
for (var k = 0; k < periods[i + 1].length; k++) { for (var k = 0; k < periods[i + 1].length; k++) {
var x2 = periods[i + 1][k][0], var x2 = periods[i + 1][k][0],
y2 = periods[i + 1][k][1]; y2 = periods[i + 1][k][1];
if ((periods[i][j][2] != periods[i + 1][k][2]) && (!bids.includes(periods[i + 1][k][2]))) { if ((periods[i][j][2] != periods[i + 1][k][2]) && (!bids.includes(periods[i + 1][k][2]))) {
// draw the links between branches // draw the links between branches
panel panel
.append("path") .append("path")
.attr("class","term-path") .attr("class","term-path")
.attr("d", function(d) { .attr("d", function(d) {
return "M" + x1 + "," + y1 return "M" + x1 + "," + y1
+ "C" + x2 + "," + y1 + "C" + x2 + "," + y1
+ " " + x2 + "," + y2 + " " + x2 + "," + y2
+ " " + x2 + "," + y2; + " " + x2 + "," + y2;
}) })
.attr("transform",transform) .attr("transform",transform)
.style("stroke-opacity", 0.4) .style("stroke-opacity", 0.4)
.lower(); .lower();
}
bids.push(periods[i + 1][k][2])
} }
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-focus",false);
d3.select("#peak-" + i).classed("peak-over",true); d3.select("#peak-" + i).classed("peak-over",true);
label.text(b.label.replace(/"/g,'')) label.text(b.label.replace(/"/g,''))
...@@ -1297,102 +1292,101 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { ...@@ -1297,102 +1292,101 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
function exportViz() { 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) { serialize(svg.node(),"phylomemy-" + Date.parse(time.toString()) + ".svg")
graph = graph.cloneNode(true); function serialize(graph,name) {
const fragment = window.location.href + "#"; graph = graph.cloneNode(true);
const walker = document.createTreeWalker(graph, NodeFilter.SHOW_ELEMENT, null, false); const fragment = window.location.href + "#";
while (walker.nextNode()) { const walker = document.createTreeWalker(graph, NodeFilter.SHOW_ELEMENT, null, false);
for (const attr of walker.currentNode.attributes) { while (walker.nextNode()) {
if (attr.value.includes(fragment)) { for (const attr of walker.currentNode.attributes) {
attr.value = attr.value.replace(fragment, "#"); 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] );
} }
}
}
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 // Extract CSS Rules
var extractedCSSText = ""; var extractedCSSText = "";
for (var i = 0; i < document.styleSheets.length; i++) { for (var i = 0; i < document.styleSheets.length; i++) {
var s = document.styleSheets[i]; var s = document.styleSheets[i];
try {
if(!s.cssRules) continue;
} catch( e ) {
if(e.name !== 'SecurityError') throw e; // for Firefox
continue;
}
var cssRules = s.cssRules; try {
for (var r = 0; r < cssRules.length; r++) { if(!s.cssRules) continue;
if ( contains( cssRules[r].selectorText, selectorTextArr ) ) } catch( e ) {
extractedCSSText += cssRules[r].cssText; 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 ) { function contains(str,arr) {
var styleElement = document.createElement("style"); return arr.indexOf( str ) === -1 ? false : true;
styleElement.setAttribute("type","text/css");
styleElement.innerHTML = cssText;
var refNode = element.hasChildNodes() ? element.children[0] : null;
element.insertBefore( styleElement, refNode );
}
}
} }
} }
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 );
}
}
}
src/Gargantext/Components/PhyloExplorer/Draw.purs
View file @ 301eb8f8
...@@ -2,11 +2,11 @@ module Gargantext.Components.PhyloExplorer.Draw where ...@@ -2,11 +2,11 @@ module Gargantext.Components.PhyloExplorer.Draw where
import Gargantext.Prelude import Gargantext.Prelude
import Data.Function.Uncurried (Fn7, runFn7)
import Effect (Effect) import Effect (Effect)
import Effect.Uncurried (EffectFn7, runEffectFn7)
import Gargantext.Components.PhyloExplorer.Types (AncestorLink, Branch, BranchLink, Group, Link, Period) import Gargantext.Components.PhyloExplorer.Types (AncestorLink, Branch, BranchLink, Group, Link, Period)
foreign import _drawPhylo :: Fn7 foreign import _drawPhylo :: EffectFn7
(Array Branch) (Array Branch)
(Array Period) (Array Period)
(Array Group) (Array Group)
...@@ -14,7 +14,7 @@ foreign import _drawPhylo :: Fn7 ...@@ -14,7 +14,7 @@ foreign import _drawPhylo :: Fn7
(Array AncestorLink) (Array AncestorLink)
(Array BranchLink) (Array BranchLink)
(Array Number) (Array Number)
(Effect Unit) (Unit)
drawPhylo :: drawPhylo ::
Array Branch Array Branch
...@@ -25,4 +25,4 @@ drawPhylo :: ...@@ -25,4 +25,4 @@ drawPhylo ::
-> Array BranchLink -> Array BranchLink
-> Array Number -> Array Number
-> Effect Unit -> Effect Unit
drawPhylo = runFn7 _drawPhylo drawPhylo = runEffectFn7 _drawPhylo
src/Gargantext/Components/PhyloExplorer/Types.purs
View file @ 301eb8f8
...@@ -35,7 +35,7 @@ foreign import stringToDate :: String -> Date.Date ...@@ -35,7 +35,7 @@ foreign import stringToDate :: String -> Date.Date
foreign import utcStringToDate :: String -> Date.Date foreign import utcStringToDate :: String -> Date.Date
newtype PhyloDataSet = PhyloDataSet data PhyloDataSet = PhyloDataSet
{ ancestorLinks :: Array AncestorLink { ancestorLinks :: Array AncestorLink
, bb :: Array Number , bb :: Array Number
, branchLinks :: Array BranchLink , branchLinks :: Array BranchLink
...@@ -90,7 +90,7 @@ parsePhyloJSONSet (PhyloJSONSet o) = PhyloDataSet ...@@ -90,7 +90,7 @@ parsePhyloJSONSet (PhyloJSONSet o) = PhyloDataSet
----------------------------------------------------------- -----------------------------------------------------------
data Branch = Branch newtype Branch = Branch
{ bId :: Int { bId :: Int
, gvid :: Int , gvid :: Int
, label :: String , label :: String
...@@ -122,7 +122,7 @@ parseBranches ...@@ -122,7 +122,7 @@ parseBranches
----------------------------------------------------------- -----------------------------------------------------------
data Period = Period newtype Period = Period
{ from :: Date.Date { from :: Date.Date
, to :: Date.Date , to :: Date.Date
, y :: Number , y :: Number
...@@ -148,7 +148,7 @@ parsePeriods epoch ...@@ -148,7 +148,7 @@ parsePeriods epoch
----------------------------------------------------------- -----------------------------------------------------------
data Group = Group newtype Group = Group
{ bId :: Int { bId :: Int
, foundation :: Array Int -- @WIP: Array String ??? , foundation :: Array Int -- @WIP: Array String ???
, from :: Date.Date , from :: Date.Date
...@@ -192,7 +192,7 @@ parseGroups epoch ...@@ -192,7 +192,7 @@ parseGroups epoch
----------------------------------------------------------- -----------------------------------------------------------
data Link = Link newtype Link = Link
{ from :: Int { from :: Int
, lId :: Int , lId :: Int
, label :: String -- @WIP: undefined in Mèmiescape v2, still needed? , label :: String -- @WIP: undefined in Mèmiescape v2, still needed?
...@@ -227,7 +227,7 @@ parseLinks ...@@ -227,7 +227,7 @@ parseLinks
----------------------------------------------------------- -----------------------------------------------------------
data AncestorLink = AncestorLink newtype AncestorLink = AncestorLink
{ from :: Int { from :: Int
, lId :: Int , lId :: Int
, label :: String -- @WIP: undefined in Mèmiescape v2, still needed? , label :: String -- @WIP: undefined in Mèmiescape v2, still needed?
...@@ -262,7 +262,7 @@ parseAncestorLinks ...@@ -262,7 +262,7 @@ parseAncestorLinks
----------------------------------------------------------- -----------------------------------------------------------
data BranchLink = BranchLink newtype BranchLink = BranchLink
{ from :: Int { from :: Int
, to :: Int , to :: Int
} }
...@@ -293,7 +293,7 @@ parseBranchLinks ...@@ -293,7 +293,7 @@ parseBranchLinks
----------------------------------------------------------- -----------------------------------------------------------
data GlobalTerm = GlobalTerm newtype GlobalTerm = GlobalTerm
{ label :: String { label :: String
, fdt :: String , fdt :: String
} }
......
src/Main.purs
View file @ 301eb8f8
...@@ -9,7 +9,6 @@ import Effect (Effect) ...@@ -9,7 +9,6 @@ import Effect (Effect)
import FFI.Simple ((...)) import FFI.Simple ((...))
import Gargantext.Components.App (app) import Gargantext.Components.App (app)
import Gargantext.Utils.Reactix as R2 import Gargantext.Utils.Reactix as R2
import Graphics.D3.Base (D3, d3)
import Prelude (Unit, ($)) import Prelude (Unit, ($))
main :: Effect Unit main :: Effect Unit
...@@ -18,7 +17,3 @@ main = paint $ toMaybe (document ... "getElementById" $ [ "app" ]) ...@@ -18,7 +17,3 @@ main = paint $ toMaybe (document ... "getElementById" $ [ "app" ])
paint :: Maybe Element -> Effect Unit paint :: Maybe Element -> Effect Unit
paint Nothing = log "[main] Container not found" paint Nothing = log "[main] Container not found"
paint (Just c) = R2.render (app {} []) c paint (Just c) = R2.render (app {} []) c
-- @WIP
d3charge :: D3
d3charge = d3
src/sass/_phylo.scss 0 → 100644
View file @ 301eb8f8
/* 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;
}
src/sass/sass.sass
View file @ 301eb8f8
...@@ -8,3 +8,4 @@ ...@@ -8,3 +8,4 @@
@use "_range_slider.sass" @use "_range_slider.sass"
@use "_annotation.sass" @use "_annotation.sass"
@use "_folder_view.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