>>> continue

dist/styles/sass.css

@@ -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 */

src/Gargantext/Components/Nodes/Corpus/Phylo.purs

@@ -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

src/Gargantext/Components/PhyloExplorer/Draw.purs

@@ -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

src/Gargantext/Components/PhyloExplorer/Types.purs

@@ -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
   }

src/Main.purs

@@ -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

src/sass/_phylo.scss

+/* 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

@@ -8,3 +8,4 @@
 @use "_range_slider.sass"
 @use "_annotation.sass"
 @use "_folder_view.sass"
+@use "_phylo.scss"