>>> continue

dist/styles/sass.css

@@ -1138,8 +1138,6 @@ select.form-control {
   width: 100%;
 }
 
-/* memiescape v2.0
-   contact : quentin.lobbe@iscpif.fr */
 /* fonts */
 @font-face {
   font-family: "Inter-Regular";
@@ -1161,7 +1159,7 @@ select.form-control {
   grid-template-columns: repeat(15, 1fr);
   grid-template-rows: 2% 7% 7% auto 1%;
   grid-gap: 10px;
-  height: calc(100vh - 20px);
+  height: calc(100vh - 137px);
   color: #0d1824;
 }
 
@@ -1240,6 +1238,9 @@ select.form-control {
   padding-bottom: 20%;
   padding-left: 15px;
 }
+.phylo-isoline-info .btn-group {
+  display: initial;
+}
 
 /* -------------------- */
 .phylo-scape {
@@ -1259,12 +1260,6 @@ select.form-control {
   /*background: #FFCC73;*/
 }
 
-/* -------------------- */
-.phylo-footer {
-  grid-row: 5;
-  grid-column: 2/16;
-}
-
 /* classes */
 /* ---------- icons ---------- */
 a {

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

@@ -6,23 +6,19 @@ 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.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
 
@@ -44,9 +40,6 @@ 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.js

 exports._drawPhylo = drawPhylo;
+exports._highlightSource = highlightSource;
+exports._unhide = unhide;
+
+
+// (from "index.html" scripts)
+function unhide(name) {
+  document.getElementById("phyloName").innerHTML        = name;
+  document.getElementById("phyloName").style.visibility = "visible";
+  document.getElementById("reset").style.visibility     = "visible";
+  document.getElementById("label").style.visibility     = "visible";
+  document.getElementById("heading").style.visibility   = "visible";
+  document.getElementById("export").style.visibility    = "visible";
+
+}
 
 // set javascript date from a string year
 function yearToDate(year) {
@@ -536,7 +550,9 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
   var zoom = d3.zoom()
       .scaleExtent([1,50])
       .extent([[xo,yo],[wo,ho]])
-      .on("zoom",onZoom)
+      .on("zoom", function(e) {
+        debouncedOnZoom(e);
+      });
 
   svg.call(zoom).on("dblclick.zoom",null).on("dblclick",doubleClick);
 
@@ -548,10 +564,36 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
         .call(zoom.transform, d3.zoomIdentity);
   }
 
-  function onZoom() {
+  function debounce(fn, wait, immediate) {
+    var timeout;
+    return function() {
+      var context = this
+      , args = arguments
+      , later = function() {
+        timeout = null;
+        if (immediate !== true) {
+          fn.apply(context, args);
+        }
+      }
+      , now = immediate === true && timeout === null;
+
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+
+      if (now === true) {
+        fn.apply(context, args);
+      }
+    };
+  };
+
+  var debouncedOnZoom = debounce(
+    onZoom
+    , 50
+  );
 
-      var zoomX = d3.event.transform.rescaleX(xScale),
-          zoomY = d3.event.transform.rescaleY(yScale),
+  function onZoom(event) {
+      var zoomX = event.transform.rescaleX(xScale),
+          zoomY = event.transform.rescaleY(yScale),
           zoomXLabels = xLabels
               .filter(b => (zoomX(b.x) >= xo) && (zoomX(b.x) <= (wo + xo))),
           zoomYLabels = yLabels
@@ -561,15 +603,15 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
 
       setAxisY(zoomY,zoomYLabels);
 
-      panel.selectAll("circle").attr("transform", d3.event.transform);
-      panel.selectAll("text").attr("transform", d3.event.transform);
-      panel.selectAll("path").attr("transform", d3.event.transform);
-      panel.selectAll(".branch-hover").attr("transform", d3.event.transform);
-      panel.selectAll(".y-highlight").attr("transform", d3.event.transform);
-      panel.selectAll(".ngrams").attr("transform", d3.event.transform);
-      panel.selectAll(".term-path").attr("transform", d3.event.transform);
-      panel.selectAll(".emergence").attr("transform", d3.event.transform);
-      panel.selectAll(".header").attr("transform", d3.event.transform);
+      panel.selectAll("circle").attr("transform", event.transform);
+      panel.selectAll("text").attr("transform", event.transform);
+      panel.selectAll("path").attr("transform", event.transform);
+      panel.selectAll(".branch-hover").attr("transform", event.transform);
+      panel.selectAll(".y-highlight").attr("transform", event.transform);
+      panel.selectAll(".ngrams").attr("transform", event.transform);
+      panel.selectAll(".term-path").attr("transform", event.transform);
+      panel.selectAll(".emergence").attr("transform", event.transform);
+      panel.selectAll(".header").attr("transform", event.transform);
 
       showPeak()
   }

src/Gargantext/Components/PhyloExplorer/Draw.purs

-module Gargantext.Components.PhyloExplorer.Draw where
+module Gargantext.Components.PhyloExplorer.Draw
+  ( drawPhylo
+  , highlightSource
+  , unhide
+  , setGlobalDependencies, setGlobalD3Reference
+  ) where
 
 import Gargantext.Prelude
 
+import DOM.Simple (Window)
+import Data.Foldable (for_)
+import Data.FoldableWithIndex (forWithIndex_)
+import Data.Maybe (Maybe(..))
 import Effect (Effect)
-import Effect.Uncurried (EffectFn7, runEffectFn7)
-import Gargantext.Components.PhyloExplorer.Types (AncestorLink, Branch, BranchLink, Group, Link, Period)
+import Effect.Uncurried (EffectFn1, EffectFn7, runEffectFn1, runEffectFn7)
+import FFI.Simple (applyTo, (..), (.=), (.?))
+import Gargantext.Components.PhyloExplorer.Types (AncestorLink, Branch, BranchLink, GlobalTerm(..), Group(..), Link, Period, PhyloDataSet(..))
+import Graphics.D3.Base (D3)
 
 foreign import _drawPhylo :: EffectFn7
   (Array Branch)
@@ -26,3 +37,73 @@ drawPhylo ::
   -> Array Number
   -> Effect Unit
 drawPhylo = runEffectFn7 _drawPhylo
+
+-----------------------------------------------------------
+
+foreign import _highlightSource :: Effect Unit
+
+highlightSource :: Effect Unit
+highlightSource = _highlightSource
+
+-----------------------------------------------------------
+
+-- @WIP: still necessary? as we certainly would have only one mode?
+foreign import _unhide :: EffectFn1 String Unit
+
+unhide :: String -> Effect Unit
+unhide = runEffectFn1 _unhide
+
+-----------------------------------------------------------
+
+setGlobalDependencies :: Window -> PhyloDataSet -> Effect Unit
+setGlobalDependencies w (PhyloDataSet o)
+  = do
+    _ <- pure $ (w .= "freq") {}
+    _ <- pure $ (w .= "nbBranches") o.nbBranches
+    _ <- pure $ (w .= "nbDocs") o.nbDocs
+    _ <- pure $ (w .= "nbFoundations") o.nbFoundations
+    _ <- pure $ (w .= "nbGroups") o.nbGroups
+    _ <- pure $ (w .= "nbPeriods") o.nbPeriods
+    _ <- pure $ (w .= "nbTerms") o.nbTerms
+    _ <- pure $ (w .= "sources") o.sources
+    _ <- pure $ (w .= "terms") []
+    _ <- pure $ (w .= "timeScale") o.timeScale
+    _ <- pure $ (w .= "weighted") o.weighted
+
+    (freq :: Array Int)         <- pure $ w .. "freq"
+    (terms :: Array GlobalTerm) <- pure $ w .. "terms"
+
+    for_ o.groups \(Group g) -> do
+
+      let
+        f = g.foundation
+        l = g.label
+
+      forWithIndex_ f \idx val ->
+        let
+          idx' = show idx
+          val' = show val
+        -- For each entries in group.foundation array,
+        -- increment consequently the global window.keys array
+        in case (freq .? val') of
+          Nothing -> pure $ (freq .= val') 0
+          Just v  -> pure $ (freq .= val') (v +1)
+        -- For each entries in group.foundation array,
+        -- if the global window.terms does not have it in property,
+        -- append an item to the global window.terms
+        *> case (terms .? val') of
+          Just _  -> pure unit
+          Nothing -> void <<< pure $ (terms .= val') $ GlobalTerm
+            { label: l .. idx'
+            , fdt  : val'
+            }
+
+    -- @XXX: FFI.Simple `(...)` throws error (JavaScript issue)
+    --       need to decompose computation
+    void do
+      new <- pure $ applyTo (terms .. "flat") terms []
+      pure $ (w .= "terms") new
+
+
+setGlobalD3Reference :: Window -> D3 -> Effect Unit
+setGlobalD3Reference window d3 = void $ pure $ (window .= "d3") d3

src/Gargantext/Components/PhyloExplorer/Layout.purs

@@ -5,13 +5,12 @@ module Gargantext.Components.PhyloExplorer.Layout
 import Gargantext.Prelude
 
 import DOM.Simple (window)
-import DOM.Simple.Console (log2)
 import Data.Array as Array
-import Gargantext.Components.PhyloExplorer.Draw (drawPhylo)
-import Gargantext.Components.PhyloExplorer.JSON (RawEdge(..))
-import Gargantext.Components.PhyloExplorer.Types (PhyloDataSet(..), setGlobalDependencies)
+import Gargantext.Components.PhyloExplorer.Draw (drawPhylo, highlightSource, setGlobalD3Reference, setGlobalDependencies, unhide)
+import Gargantext.Components.PhyloExplorer.Types (PhyloDataSet(..))
 import Gargantext.Utils (nbsp)
 import Gargantext.Utils.Reactix as R2
+import Graphics.D3.Base (d3)
 import Reactix as R
 import Reactix.DOM.HTML as H
 
@@ -29,9 +28,9 @@ layoutCpt = here.component "layout" cpt where
   cpt { phyloDataSet: (PhyloDataSet o)
       } _ = do
     -- States
-
-
     R.useEffectOnce' $ do
+      unhide o.name
+      setGlobalD3Reference window d3
       setGlobalDependencies window (PhyloDataSet o)
       drawPhylo
         o.branches
@@ -42,12 +41,6 @@ layoutCpt = here.component "layout" cpt where
         o.branchLinks
         o.bb
 
-
-
-    -- @hightlightSource
-    let
-      highlightSource = \_ -> unit
-
     -- Render
     pure $
       H.div
@@ -101,7 +94,7 @@ layoutCpt = here.component "layout" cpt where
           { id: "checkSource"
           , className: "select-source"
           , defaultValue: ""
-          , on: { change: \_ -> unit }
+          , on: { change: \_ -> highlightSource }
           } $
           [
             H.option
@@ -157,12 +150,8 @@ layoutCpt = here.component "layout" cpt where
         }
         []
       ,
-        -- H.div
-        -- { id: "phyloHow"
-        -- , className: "phylo-how"
-        -- }
-        -- []
-      -- ,
+        phyloHow {} []
+      ,
         phyloPhylo {} []
       ,
 
@@ -174,10 +163,14 @@ layoutCpt = here.component "layout" cpt where
         }
         []
       ,
-
-
         H.div
         { id: "phyloIsoLine"
+        , className: "phylo-isoline"
+        }
+        []
+      ,
+        H.div
+        { id: "phyloIsolineInfo"
         , className: "phylo-isoline-info"
         }
         [
@@ -190,7 +183,7 @@ layoutCpt = here.component "layout" cpt where
             }
             [
               H.i
-              { className: "fas fa-expand-arrows-alt" }
+              { className: "fa fa-arrows-alt" }
               []
             ]
           ,
@@ -200,7 +193,7 @@ layoutCpt = here.component "layout" cpt where
             }
             [
               H.i
-              { className: "fas fa-dot-circle" }
+              { className: "fa fa-dot-circle-o" }
               []
             ]
           ,
@@ -210,7 +203,7 @@ layoutCpt = here.component "layout" cpt where
             }
             [
               H.i
-              { className: "fas fa-sort-alpha-down" }
+              { className: "fa fa-sort-alpha-asc" }
               []
             ]
           ,
@@ -245,24 +238,14 @@ layoutCpt = here.component "layout" cpt where
         , className: "phylo-graph"
         }
         []
-      ,
-
-      -- <!-- row 5 -->
-        H.div
-        { className: "phylo-footer font-bold font-small"
-        }
-        [ H.text "iscpif // cnrs // 2021" ]
-
 
       ]
 
 --------------------------------------------------------
 
-type PhyloCorpusProps = ()
-
-phyloCorpus :: R2.Component PhyloCorpusProps
+phyloCorpus :: R2.Component ()
 phyloCorpus = R.createElement phyloCorpusCpt
-phyloCorpusCpt :: R.Component PhyloCorpusProps
+phyloCorpusCpt :: R.Component ()
 phyloCorpusCpt = here.component "phyloCorpus" cpt where
   cpt _ _ = do
     -- Render
@@ -277,11 +260,48 @@ phyloCorpusCpt = here.component "phyloCorpus" cpt where
 
 ---------------------------------------------------------
 
-type PhyloPhyloProps = ()
+phyloHow :: R2.Component ()
+phyloHow = R.createElement phyloHowCpt
+phyloHowCpt :: R.Component ()
+phyloHowCpt = here.component "phyloHow" cpt where
+  cpt _ _ = do
+    -- Render
+    pure $
+
+      H.div
+      { id: "phyloHow"
+      , className: "phylo-how"
+      }
+      [
+        H.a
+        { id: "phyloSearch"
+        , href: "http://maps.gargantext.org/phylo/knowledge_visualization/memiescape/documentation.html"
+        , target: "_blank"
+        }
+        [
+          H.div
+          { className: "switch" }
+          [
+            H.i
+            { className: "far fa-question-circle how" }
+            []
+          ,
+            H.i
+            { className: "fa fa-question-circle how" }
+            [
+              H.span
+              { className: "tooltip" }
+              [ H.text "click to see how the phylomemy was built" ]
+            ]
+          ]
+        ]
+      ]
+
+---------------------------------------------------------
 
-phyloPhylo :: R2.Component PhyloPhyloProps
+phyloPhylo :: R2.Component ()
 phyloPhylo = R.createElement phyloPhyloCpt
-phyloPhyloCpt :: R.Component PhyloPhyloProps
+phyloPhyloCpt :: R.Component ()
 phyloPhyloCpt = here.component "phyloPhylo" cpt where
   cpt _ _ = do
     -- Render
@@ -297,9 +317,9 @@ phyloPhyloCpt = here.component "phyloPhylo" cpt where
 ---------------------------------------------------------
 
 type PhyloCorpusInfoProps =
-  ( nbDocs :: Int
+  ( nbDocs        :: Int
   , nbFoundations :: Int
-  , nbPeriods :: Int
+  , nbPeriods     :: Int
   )
 
 phyloCorpusInfo :: R2.Component PhyloCorpusInfoProps
@@ -341,9 +361,9 @@ phyloCorpusInfoCpt = here.component "phyloCorpusInfo" cpt where
 ---------------------------------------------------------
 
 type PhyloPhyloInfoProps =
-  ( nbTerms :: Int
-  , nbGroups :: Int
-  , nbBranches :: Int
+  ( nbTerms     :: Int
+  , nbGroups    :: Int
+  , nbBranches  :: Int
   )
 
 phyloPhyloInfo :: R2.Component PhyloPhyloInfoProps

src/Gargantext/Components/PhyloExplorer/Types.purs

@@ -4,17 +4,12 @@ module Gargantext.Components.PhyloExplorer.Types
   , Link(..), AncestorLink(..), BranchLink(..)
   , GlobalTerm(..)
   , parsePhyloJSONSet
-  , setGlobalDependencies
   ) where
 
 import Gargantext.Prelude
 
-import DOM.Simple (Window)
-import DOM.Simple.Console (log2)
 import Data.Array as Array
 import Data.Date as Date
-import Data.Foldable (for_)
-import Data.FoldableWithIndex (forWithIndex_)
 import Data.Generic.Rep (class Generic)
 import Data.Int as Int
 import Data.Maybe (Maybe(..), maybe)
@@ -23,10 +18,7 @@ import Data.Show.Generic (genericShow)
 import Data.String as String
 import Data.Tuple as Tuple
 import Data.Tuple.Nested ((/\))
-import Effect (Effect)
-import FFI.Simple (applyTo, (..), (.=), (.?))
 import Gargantext.Components.PhyloExplorer.JSON (PhyloJSONSet(..), RawEdge(..), RawObject(..))
-import Unsafe.Coerce (unsafeCoerce)
 
 
 -- @WIP PureScript Date or stick to JavaScript foreign?
@@ -42,6 +34,7 @@ data PhyloDataSet = PhyloDataSet
   , branches      :: Array Branch
   , groups        :: Array Group
   , links         :: Array Link
+  , name          :: String
   , nbBranches    :: Int
   , nbDocs        :: Int
   , nbFoundations :: Int
@@ -66,6 +59,7 @@ parsePhyloJSONSet (PhyloJSONSet o) = PhyloDataSet
   , branches
   , groups
   , links
+  , name          : o.name
   , nbBranches    : parseInt o.phyloBranches
   , nbDocs        : parseInt o.phyloDocs
   , nbFoundations : parseInt o.phyloFoundations
@@ -302,54 +296,6 @@ derive instance Generic GlobalTerm _
 derive instance Eq GlobalTerm
 instance Show GlobalTerm where show = genericShow
 
-setGlobalDependencies :: Window -> PhyloDataSet -> Effect Unit
-setGlobalDependencies w (PhyloDataSet o)
-  = do
-    _ <- pure $ (w .= "freq") {}
-    _ <- pure $ (w .= "nbBranches") o.nbBranches
-    _ <- pure $ (w .= "nbDocs") o.nbDocs
-    _ <- pure $ (w .= "nbFoundations") o.nbFoundations
-    _ <- pure $ (w .= "nbGroups") o.nbGroups
-    _ <- pure $ (w .= "nbPeriods") o.nbPeriods
-    _ <- pure $ (w .= "nbTerms") o.nbTerms
-    _ <- pure $ (w .= "sources") o.sources
-    _ <- pure $ (w .= "terms") []
-    _ <- pure $ (w .= "timeScale") o.timeScale
-    _ <- pure $ (w .= "weighted") o.weighted
-
-    (freq :: Array Int)         <- pure $ w .. "freq"
-    (terms :: Array GlobalTerm) <- pure $ w .. "terms"
-
-    for_ o.groups \(Group g) -> do
-
-      let
-        f = g.foundation
-        l = g.label
-
-      forWithIndex_ f \idx val ->
-        let
-          idx' = show idx
-          val' = show val
-        -- For each entries in group.foundation array,
-        -- increment consequently the global window.keys array
-        in case (freq .? val') of
-          Nothing -> pure $ (freq .= val') 0
-          Just v  -> pure $ (freq .= val') (v +1)
-        -- For each entries in group.foundation array,
-        -- if the global window.terms does not have it in property,
-        -- append an item to the global window.terms
-        *> case (terms .? val') of
-          Just _  -> pure unit
-          Nothing -> void <<< pure $ (terms .= val') $ GlobalTerm
-            { label: l .. idx'
-            , fdt  : val'
-            }
-
-    -- @XXX: FFI.Simple `(...)` throws error (JavaScript issue)
-    --       need to decompose computation
-    void do
-      new <- pure $ applyTo (terms .. "flat") terms []
-      pure $ (w .= "terms") new
 
 -----------------------------------------------------------
 

src/sass/_phylo.scss

-/* memiescape v2.0
-   contact : quentin.lobbe@iscpif.fr */
+$height-screen-minus: 137px; // totally unworthy empirical value calculating the screen height taken by the topbar height and other main container element height (@TODO topbar height calculation, @TODO enhance "container" class element height management, @TODO provide route view content with no inner padding -> see "main-page__main-route" paddings")
 
 /* fonts */
 
@@ -28,7 +27,11 @@
   grid-template-columns: repeat(15, 1fr);
   grid-template-rows: 2% 7% 7% auto 1%;
   grid-gap: 10px;
-  height: calc(100vh - 20px);
+  // will stick the phylomemy height to the window screen height, as if it
+  // was a fullpage / unscrollable content
+  // main purpose is to avoid any browser scroll, this will ease D3 zoom event
+  // management
+  height: calc(100vh - #{ $height-screen-minus });
   color: #0d1824;
 }
 
@@ -108,6 +111,10 @@
   padding-top: 20%;
   padding-bottom: 20%;
   padding-left: 15px;
+
+  .btn-group {
+    display: initial;
+  }
 }
 
 /* -------------------- */
@@ -129,13 +136,6 @@
   /*background: #FFCC73;*/
 }
 
-/* -------------------- */
-
-.phylo-footer {
-  grid-row: 5;
-  grid-column: 2 / 16;
-}
-
 
 /* classes */