Merge remote-tracking branch 'origin/219-memiescape-rc0.x' into dev-merge

dist/styles/sass.css

@@ -1138,4 +1138,580 @@ select.form-control {
   width: 100%;
 }
 
+/* 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 - 0px);
+  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-isoline-info .btn-group {
+  display: initial;
+}
+
+/* -------------------- */
+.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;*/
+}
+
+/* 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 */

package.json

@@ -35,6 +35,7 @@
         "bootstrap": "^4.6.0",
         "bootstrap-dark": "^1.0.3",
         "create-react-class": "^15.6.3",
+        "d3": "^7.0.0",
         "echarts": "^5.1.2",
         "echarts-for-react": "^3.0.1",
         "graphql": "^15.6.1",

packages.dhall

@@ -206,6 +206,26 @@ let additions =
         , repo = "https://github.com/natefaubion/purescript-convertable-options"
         , version = "v1.0.0"
         }
+      , d3 =
+        { dependencies =
+          [ "aff"
+          , "aff-promise"
+          , "dom-simple"
+          , "easy-ffi"
+          , "effect"
+          , "exceptions"
+          , "foreign"
+          , "functions"
+          , "js-date"
+          , "maybe"
+          , "prelude"
+          , "psci-support"
+          , "tuples"
+          , "web-dom"
+          ]
+        , repo = "https://github.com/cgenie/purescript-d3"
+        , version = "v0.9.1"
+        }
       }
 
 in  upstream // overrides // additions

spago.dhall

@@ -26,6 +26,7 @@ to generate this file without the comments in this block.
   , "control"
   , "convertable-options"
   , "css"
+  , "d3"
   , "datetime"
   , "dom-filereader"
   , "dom-simple"

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

-module Gargantext.Components.Nodes.Corpus.Phylo where
+module Gargantext.Components.Nodes.Corpus.Phylo
+  ( phyloLayout
+  ) where
 
 import Gargantext.Prelude
-  ( pure, ($) )
 
--- import Gargantext.Utils.Toestand as T2
--- import Toestand as T
+import Affjax as AX
+import Affjax.ResponseFormat as ResponseFormat
+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 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 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"
 
-type Props = ( nodeId :: NodeID, session :: Session )
+type Props =
+  ( nodeId :: NodeID
+  , session :: Session
+  )
 
 phyloLayout :: R2.Component Props
 phyloLayout = R.createElement phyloLayoutCpt
 phyloLayoutCpt :: R.Component Props
 phyloLayoutCpt = here.component "phyloLayout" cpt where
-  cpt { nodeId, session } content = do
-    pure $  H.h1 {} [ H.text "Hello Phylo" ]
+  cpt _ _ = do
+
+    fetchedDataBox <- T.useBox (Nothing :: Maybe PhyloDataSet)
+    fetchedData    <- T.useLive T.unequal fetchedDataBox
+
+    R.useEffectOnce' $ launchAff_ do
+      result <- fetchPhyloJSON
+      liftEffect $ case result of
+        Left err  -> log2 "error" err
+        Right res -> T.write_ (Just res) fetchedDataBox
+
+    pure case fetchedData of
+      Nothing           -> mempty
+      Just phyloDataSet -> layout { phyloDataSet } []
+
+
+fetchPhyloJSON :: Aff (Either String PhyloDataSet)
+fetchPhyloJSON =
+  let
+    -- @WIP remove dumb data
+    url = "http://localhost:5000/js/knowledge-phylomemy.json"
+    -- url = "http://localhost:5000/js/vaccines_countries_06_2021.json"
+    request = AX.defaultRequest
+      { url = url
+      , method = Left GET
+      , responseFormat = ResponseFormat.string
+      }
+  in do
+    result <- request # AX.request
+    liftEffect $ case result of
+      Left err -> pure $ Left $ AX.printError err
+      Right response -> case JSON.readJSON response.body of
+        Left err -> pure $ Left $ show err
+        Right (res :: PhyloJSONSet) -> pure $ Right $ parsePhyloJSONSet res

src/Gargantext/Components/PhyloExplorer/Draw.purs

+module Gargantext.Components.PhyloExplorer.Draw
+  ( drawPhylo
+  , highlightSource
+  , unhide
+  , setGlobalDependencies, setGlobalD3Reference
+  ) where
+
+import Gargantext.Prelude
+
+import DOM.Simple (Document, Window, querySelectorAll)
+import Data.Either (Either(..))
+import Data.Foldable (for_)
+import Data.FoldableWithIndex (forWithIndex_)
+import Data.Maybe (Maybe(..), maybe)
+import Effect (Effect)
+import Effect.Uncurried (EffectFn1, EffectFn7, runEffectFn1, runEffectFn7)
+import FFI.Simple (applyTo, getProperty, (..), (.=), (.?))
+import Gargantext.Components.PhyloExplorer.Types (AncestorLink, Branch, BranchLink, GlobalTerm(..), Group(..), Link, Period, PhyloDataSet(..))
+import Graphics.D3.Base (D3, D3Eff)
+import Graphics.D3.Selection as D3S
+import Graphics.D3.Util (ffi)
+
+foreign import _drawPhylo :: EffectFn7
+  (Array Branch)
+  (Array Period)
+  (Array Group)
+  (Array Link)
+  (Array AncestorLink)