Merge branch 'dev' into dev-doc-annotation-issue

dist/styles/Styles.css

+#page-wrapper .cache-toggle {
+  cursor: pointer;
+}
+
+.simple-layout {
+  height: 100%;
+}
+.simple-layout .spinner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+}
+
+/*# sourceMappingURL=Styles.css.map */

dist/styles/Styles.sass

+#page-wrapper
+  .cache-toggle
+    cursor: pointer
+
+.simple-layout
+  height: 100%
+  .spinner
+    position: absolute
+    left: 50%
+    top: 50%

src/Gargantext/Components/App.purs

@@ -148,7 +148,11 @@ forestLayoutMainCpt = R2.hooksComponent thisModule "forestLayoutMain" cpt
 
 -- Simple layout does not accommodate the tree
 simpleLayout :: R.State GT.Handed -> R.Element -> R.Element
-simpleLayout handed child = R.fragment [ topBar { handed }, child, license]
+simpleLayout handed child = H.div { className: "simple-layout" } [
+    topBar { handed }
+  , child
+  , license
+  ]
 
 mainPage :: R.Element -> R.Element
 mainPage child =

src/Gargantext/Components/GraphExplorer.purs

@@ -37,6 +37,7 @@ import Gargantext.Types as Types
 import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
 
+thisModule :: String
 thisModule = "Gargantext.Components.GraphExplorer"
 
 type LayoutProps =
@@ -79,7 +80,7 @@ explorerLayoutView graphVersion p = R.createElement el p []
           explorer (Record.merge props { graph, graphVersion, hyperdataGraph: loaded, mMetaData })
           where
             GET.HyperdataGraph { graph: hyperdataGraph } = loaded
-            (Tuple mMetaData graph) = convert hyperdataGraph
+            Tuple mMetaData graph = convert hyperdataGraph
 
 --------------------------------------------------------------
 explorer :: Record Props -> R.Element

src/Gargantext/Components/GraphExplorer/Sidebar.purs

@@ -20,6 +20,7 @@ import Reactix.DOM.HTML as H
 
 import Gargantext.Prelude
 
+import Gargantext.Components.Lang (Lang(..))
 import Gargantext.Components.Search (SearchType(..), SearchQuery(..))
 import Gargantext.Components.GraphExplorer.Types  as GET
 import Gargantext.Components.GraphExplorer.Types  (SidePanelState(..), SideTab(..))
@@ -85,8 +86,10 @@ sideTabNav (sidePanel /\ setSidePanel) sideTabs =
 
 sideTab :: SidePanelState -> Record Props -> R.Element
 sideTab (Opened SideTabLegend) props@{metaData} =
-  let (GET.MetaData {legend}) = metaData
+  H.div {} [ let (GET.MetaData {legend}) = metaData
                     in Legend.legend { items: Seq.fromFoldable legend}
+           , documentation EN
+           ]
 
 sideTab (Opened SideTabData) props =
   RH.div {} [ selectedNodes props (SigmaxT.nodesGraphMap props.graph)
@@ -290,4 +293,41 @@ query searchType frontends (GET.MetaData metaData) session nodesMap (selectedNod
                 ]
               ]
               -}
+--------------------------------------------------------------------------
+
+
+documentation :: Lang -> R.Element
+documentation _ =
+  H.div {} [ H.h2 {} [ H.text "What is Graph ?"]
+           , ul [ "Graph is a conveniant tool to explore your documents. "
+                , "Nodes are terms selected in your Map List. "
+                <> "Node size is proportional to the number of documents with the associated term. "
+                , "Edges between nodes represent proximities of terms according to a specific distance between your documents. "
+                <> "Link strength is proportional to the strenght of terms association."
+                ]
+           , H.h3 {} [ H.text "Basic Interactions:"]
+           , ul [ "Click on a node to select/unselect and get its information. "
+                , "In case of multiple selection, the button unselect clears all selections. "
+                <> "Use your mouse scroll to zoom in and out in the graph. "
+                , "Use the node filter to create a subgraph with nodes of a given size "
+                <>"range (e.g. display only generic terms). "
+                , "Use the edge filter so create a subgraph with links in a given range (e.g. keep the strongest association)."
+                ]
+           ]
+
+  where
+    ul ts = H.ul {} $ map (\t -> H.li {} [ H.text t ]) ts
+
+{-
+TODO DOC
+  Conditional distance between the terms X and Y is the probability to have both terms X and Y in the same textual context.
+  Distributional distance between the terms X and Y is the probability to have same others terms in the same textual context as X or Y.
+
+Global/local view:
+    The 'change level' button allows to change between global view and node centered view,
+    To explore the neighborhood of a selection click on the 'change level' button.
+-}
+
+
+
 

src/Gargantext/Components/LoadingSpinner.purs

@@ -3,15 +3,20 @@ module Gargantext.Components.LoadingSpinner where
 import Reactix as R
 import Reactix.DOM.HTML as H
 
+import Gargantext.Utils.Reactix as R2
+
+thisModule :: String
+thisModule = "Gargantext.Components.LoadingSpinner"
+
 type Props = ()
 
 loadingSpinner :: Record Props -> R.Element
 loadingSpinner props = R.createElement loadingSpinnerCpt props []
 
 loadingSpinnerCpt :: R.Component Props
-loadingSpinnerCpt = R.staticComponent "LoadingSpinner" cpt
+loadingSpinnerCpt = R2.staticComponent thisModule "LoadingSpinner" cpt
   where
-    cpt _ _ = H.i {className: "fa fa-smile-o fa-spin fa-3x fa-fw"} [H.text ""]
+    cpt _ _ = H.i {className: "spinner fa fa-smile-o fa-spin fa-3x fa-fw"} [H.text ""]
     -- cpt _ _ = H.i {className: "fa fa-globe fa-spin fa-3x fa-fw"} [H.text ""]
 
     -- cpt _ _ = H.i {className: "fa fa-circle-o-notch fa-spin fa-3x fa-fw"} [H.text ""]

src/Gargantext/Utils/Reactix.purs

@@ -48,6 +48,11 @@ type HooksComponent props = Record props -> Array R.Element -> R.Hooks R.Element
 hooksComponent :: forall props. String -> String -> HooksComponent props -> R.Component props
 hooksComponent module' name c = R.hooksComponent (module' <> "." <> name) c
 
+type StaticComponent props = Record props -> Array R.Element -> R.Element
+
+staticComponent :: forall props. String -> String -> StaticComponent props -> R.Component props
+staticComponent module' name c = R.staticComponent (module' <> "." <> name) c
+
 newtype Point = Point { x :: Number, y :: Number }
 
 -- a setter function, for useState