[GraphExplorer] fixes after dysfun's quick commit

src/Gargantext/Components/GraphExplorer.purs

@@ -47,7 +47,7 @@ import Web.Storage.Storage (getItem)
 import Reactix as R
 import Reactix.DOM.HTML as RH
 
-type Props = ()
+type Props s fa2 = ()
 
 explorer :: forall s fa2. Record (Props s fa2) -> R.Element
 explorer props = R.createElement explorerCpt props []
@@ -61,9 +61,9 @@ explorerCpt = R.hooksComponent "Explorer" cpt
         outer
         [ inner
           [ row1
-            [ col [ pullLeft [ Toggle.treeTogglebutton controls.showTree ] ]
+            [ col [ pullLeft [ Toggle.treeToggleButton controls.showTree ] ]
             , col [ Toggle.controlsToggleButton controls.showControls ]
-            , col [ pullRight [ Toggle.sidePanelToggleButton controls.showSidePanel ] ]
+            , col [ pullRight [ Toggle.sidebarToggleButton controls.showSidePanel ] ]
             ]
           , row [ Controls.controls controls ]
           , row [ graph controls, sidebar controls ]

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -10,22 +10,28 @@ module Gargantext.Components.GraphExplorer.Controls
  , getMultiNodeSelect, setMultiNodeSelect
  ) where
 
+import Data.Tuple.Nested ((/\))
+import Effect (Effect)
+import Prelude
 import Reactix as R
 import Reactix.DOM.HTML as RH
 
+import Gargantext.Components.GraphExplorer.ToggleButton (edgesToggleButton)
+import Gargantext.Utils.Reactix as R2
+
 
 type Controls =
-  ( showTree :: R.State Boolean
-  , showControls :: R.State Boolean
-  , showSidePanel :: R.State Boolean
-  , showEdges :: R.State Boolean
-  , cursorSize :: R.State Number
+  ( cursorSize :: R.State Number
   , labelSize :: R.State Number
   , nodeSize :: R.State Number
   , multiNodeSelect :: R.Ref Boolean
+  , showControls :: R.State Boolean
+  , showEdges :: R.State Boolean
+  , showSidePanel :: R.State Boolean
+  , showTree :: R.State Boolean
   )
 
-controls = Record Controls -> R.Element
+controls :: Record Controls -> R.Element
 controls props = R.createElement controlsCpt props []
 
 controlsCpt :: R.Component Controls
@@ -35,84 +41,84 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
       case getShowControls props of
         false -> pure $ RH.div {} []
         true -> do
-          RH.div { className: "col-md-12", style: { paddingBottom: "10px" } }
-          [ menu { id: "toolbar" }
-            [ RH.ul {}
-              [ -- change type button (?)
-                RH.li {} [ edgesToggleButton props.showEdges ]
-                -- change level
-                -- file upload
-                -- run demo
-                -- search button
-                -- search topics
-                -- cursor size: 0-100
-                -- labels size: 1-4
-                -- node size : 5-15
-                -- edge size : ??
-                -- zoom: 0 -100 - calculate ratio
-                -- toggle multi node selection
-                -- spatialization (pause ForceAtlas2)
-                -- save button
+          pure $ RH.div { className: "col-md-12", style: { paddingBottom: "10px" } }
+            [ R2.menu { id: "toolbar" }
+              [ RH.ul {}
+                [ -- change type button (?)
+                  RH.li {} [ edgesToggleButton props.showEdges ]
+                  -- change level
+                  -- file upload
+                  -- run demo
+                  -- search button
+                  -- search topics
+                  -- cursor size: 0-100
+                  -- labels size: 1-4
+                  -- node size : 5-15
+                  -- edge size : ??
+                  -- zoom: 0 -100 - calculate ratio
+                  -- toggle multi node selection
+                  -- spatialization (pause ForceAtlas2)
+                  -- save button
+                ]
               ]
             ]
-          ]
 
 useGraphControls :: R.Hooks (Record Controls)
 useGraphControls = do
-  showTree <- R.useState' false
+  cursorSize <- R.useState' 10.0
+  labelSize <- R.useState' 3.0
+  nodeSize <- R.useState' 10.0
+  multiNodeSelect <- R.useRef false
   showControls <- R.useState' false
-  showSidePanel <- R.useState' false
   showEdges <- R.useState' true
-  cursorSize <- R.useState' 10
-  labelSize <- R.useState' 3
-  nodeSize <- R.useState' 10
-  multiNodeSelect <- R.useRef false
+  showSidePanel <- R.useState' false
+  showTree <- R.useState' false
   pure { showTree, showControls, showSidePanel, showEdges, cursorSize, labelSize, nodeSize, multiNodeSelect }
-  
-getShowTree :: Controls -> Boolean
+
+getShowTree :: Record Controls -> Boolean
 getShowTree { showTree: ( should /\ _ ) } = should
 
-getShowControls :: Controls -> Boolean
+getShowControls :: Record Controls -> Boolean
 getShowControls { showControls: ( should /\ _ ) } = should
 
-getShowSidePanel :: Controls -> Boolean
+getShowSidePanel :: Record Controls -> Boolean
 getShowSidePanel { showSidePanel: ( should /\ _ ) } = should
 
-getShowEdges :: Controls -> Boolean
-getShowEdges { showEdges: ( should /\ _ ) } = should 
+getShowEdges :: Record Controls -> Boolean
+getShowEdges { showEdges: ( should /\ _ ) } = should
 
-getCursorSize :: Controls -> Number
+getCursorSize :: Record Controls -> Number
 getCursorSize { cursorSize: ( size /\ _ ) } = size
 
-getLabelSize :: Controls -> Number
+getLabelSize :: Record Controls -> Number
 getLabelSize { labelSize: ( size /\ _ ) } = size
 
-getNodeSize :: Controls -> Number
+getNodeSize :: Record Controls -> Number
 getNodeSize { nodeSize: ( size /\ _ ) } = size
 
-getMultiNodeSelect :: Controls -> Boolean
+getMultiNodeSelect :: Record Controls -> Boolean
 getMultiNodeSelect { multiNodeSelect } = R.readRef multiNodeSelect
 
-setShowTree :: Controls -> Boolean -> Effect Unit
-setShowTree { showTree: ( _ /\ set ) } = set
+setShowTree :: Record Controls -> Boolean -> Effect Unit
+setShowTree { showTree: ( _ /\ set ) } v = set $ const v
 
-setShowControls :: Controls -> Boolean -> Effect Unit
-setShowControls { showControls: ( _ /\ set ) } = set
+setShowControls :: Record Controls -> Boolean -> Effect Unit
+setShowControls { showControls: ( _ /\ set ) } v = set $ const v
 
-setShowSidePanel :: Controls -> Boolean -> Effect Unit
-setShowSidePanel { showSidePanel: ( _ /\ set ) } = set
+setShowSidePanel :: Record Controls -> Boolean -> Effect Unit
+setShowSidePanel { showSidePanel: ( _ /\ set ) } v = set $ const v
 
-setShowEdges :: Controls -> Boolean -> Effect Unit
-setShowEdges { showEdges: ( _ /\ set ) } = set
+setShowEdges :: Record Controls -> Boolean -> Effect Unit
+setShowEdges { showEdges: ( _ /\ set ) } v = set $ const v
 
-setCursorSize :: Controls -> Number -> Effect Unit
-setCursorSize { cursorSize: ( _ /\ setSize ) } = setSize
+setCursorSize :: Record Controls -> Number -> Effect Unit
+setCursorSize { cursorSize: ( _ /\ setSize ) } v = setSize $ const v
 
-setLabelSize :: Controls -> Number -> Effect Unit
-setLabelSize { labelSize: ( _ /\ setSize) } = setSize
+setLabelSize :: Record Controls -> Number -> Effect Unit
+setLabelSize { labelSize: ( _ /\ setSize) } v = setSize $ const v
 
-setNodeSize :: Controls -> Number -> Effect Unit
-setNodeSize { nodeSize: ( _ /\ setSize ) } = setSize
+setNodeSize :: Record Controls -> Number -> Effect Unit
+setNodeSize { nodeSize: ( _ /\ setSize ) } v = setSize $ const v
 
-setMultiNodeSelect :: Controls -> Boolean -> Effect Unit
+setMultiNodeSelect :: Record Controls -> Boolean -> Effect Unit
 setMultiNodeSelect { multiNodeSelect } = R.setRef multiNodeSelect

src/Gargantext/Components/GraphExplorer/ControlsToggleButton.purs

@@ -2,7 +2,8 @@ module Gargantext.Components.GraphExplorer.ControlsToggleButton
   ( Props, controlsToggleButton, controlsToggleButtonCpt
   ) where
 
-import Prelude (bind, pure, ($))
+import Data.Tuple.Nested ((/\))
+import Prelude
 import Reactix as R
 import Reactix.DOM.HTML as H
 
@@ -10,15 +11,15 @@ type Props = ( state :: R.State Boolean )
 
 controlsToggleButton :: Record Props -> R.Element
 controlsToggleButton props = R.createElement controlsToggleButtonCpt props []
-  
+
 controlsToggleButtonCpt :: R.Component Props
 controlsToggleButtonCpt = R.hooksComponent "GraphControlsToggleButton" cpt
   where
     cpt {state} _ = do
       let (open /\ setOpen) = state
       pure $
-        RH.button
+        H.button
           { className: "btn btn-primary", on: {click: \_ -> setOpen not } }
-          [ RH.text (text open) ]
+          [ H.text (text open) ]
     text true = "Hide Controls"
     text false = "Show Controls"

src/Gargantext/Components/GraphExplorer/Legend.purs

@@ -2,9 +2,11 @@ module Gargantext.Components.GraphExplorer.Legend
   ( Props, legend, legendCpt
   ) where
 
-import Data.Seq (Seq)
-import Data.Seq as Seq
-import Data.Traversable (foldMap)
+import Prelude hiding (map)
+
+import Data.Sequence (Seq)
+import Data.Sequence as Seq
+import Data.Traversable (foldMap, traverseDefault)
 import Reactix as R
 import Reactix.DOM.HTML as RH
 import Gargantext.Components.GraphExplorer.Types (Cluster(..), MetaData(..), Edge(..), GraphData(..), Legend(..), Node(..), getLegendData, intColor)
@@ -17,11 +19,11 @@ legend props = R.createElement legendCpt props []
 legendCpt :: R.Component Props
 legendCpt = R.hooksComponent "Legend" cpt
   where
-    cpt {items} _ = pure $ RH.div {} (foldMap entry items)
+    cpt {items} _ = pure $ RH.div {} [foldMap entry items]
 
 entry :: Legend -> R.Element
 entry (Legend {id_, label}) =
   RH.p {}
   [ RH.span { style: { width: 10, height: 10, backgroundColor: intColor id_, display: "inline-block" } } []
-  , RH.text # " " <> label
-    
+  , RH.text $ " " <> label
+  ]

src/Gargantext/Components/GraphExplorer/ToggleButton.purs

@@ -6,24 +6,25 @@ module Gargantext.Components.GraphExplorer.ToggleButton
   , edgesToggleButton
   ) where
 
-import Prelude (bind, pure, ($))
+import Prelude
+import Data.Tuple.Nested ((/\))
 import Reactix as R
-import Reactix.HTML as H
+import Reactix.DOM.HTML as H
 
 type Props = ( state :: R.State Boolean, onMessage :: String, offMessage :: String )
 
 toggleButton :: Record Props -> R.Element
 toggleButton props = R.createElement toggleButtonCpt props []
-  
+
 toggleButtonCpt :: R.Component Props
 toggleButtonCpt = R.hooksComponent "ToggleButton" cpt
   where
     cpt {state, onMessage, offMessage} _ = do
       let (toggled /\ setToggled) = state
       pure $
-        RH.button
+        H.button
           { className: "btn btn-primary", on: {click: \_ -> setToggled not } }
-          [ RH.text (text onMessage offMessage toggled) ]
+          [ H.text (text onMessage offMessage toggled) ]
     text on _off true = on
     text _on off false = off
 

src/Gargantext/Components/GraphExplorer/Types.purs

 module Gargantext.Components.GraphExplorer.Types where
 
 import Prelude
+import Partial.Unsafe (unsafePartial)
 
 import Data.Argonaut (class DecodeJson, decodeJson, (.?))
-import Data.Array (concat, fromFoldable, group, sort, take)
+import Data.Array (concat, fromFoldable, group, sort, take, (!!), length)
+import Data.Maybe (Maybe(..), maybe, fromJust)
 import Data.Newtype (class Newtype)
-import Data.Maybe (Maybe(..), maybe)
+
 newtype Node = Node
   { id_ :: String
   , size :: Int
@@ -145,5 +147,3 @@ defaultPalette = ["#5fa571","#ab9ba2","#da876d","#bdd3ff","#b399df","#ffdfed","#
 
 intColor :: Int -> String
 intColor i = unsafePartial $ fromJust $ defaultPalette !! (i `mod` length defaultPalette)
-
-  

src/Gargantext/Pages/Corpus/Graph.purs

@@ -24,6 +24,7 @@ import Effect.Aff (Aff)
 import Effect.Class (liftEffect)
 import Gargantext.Hooks.Sigmax.Types as Sigmax
 import Gargantext.Hooks.Sigmax.Sigmajs (CameraProps, SigmaNode, cameras, getCameraProps, goTo, pauseForceAtlas2, sigmaOnMouseMove)
+import Gargantext.Components.GraphExplorer (getAuthData, getNodes, intColor)
 import Gargantext.Components.GraphExplorer.Types (Cluster(..), MetaData(..), Edge(..), GraphData(..), Legend(..), Node(..), getLegendData)
 import Gargantext.Components.Login.Types (AuthData(..), TreeId)
 import Gargantext.Components.RandomText (words)
@@ -31,6 +32,7 @@ import Gargantext.Components.Graph as Graph
 import Gargantext.Components.Tree as Tree
 import Gargantext.Config as Config
 import Gargantext.Config.REST (get)
+import Gargantext.Pages.Layout.Actions (Action(..))
 import Gargantext.Pages.Corpus.Graph.Tabs as GT
 import Gargantext.Types (class Optional)
 import Gargantext.Utils (toggleSet)
@@ -234,8 +236,8 @@ render d p (State {sigmaGraphData, settings, legendData}) c =
 --   for_ (cameras s !! 0) $ \cam ->
 --     void $ goTo cam (f $ getCameraProps cam)
 
-      , text $ " " <> label
-      ]
+      -- , text $ " " <> label
+      -- ]
 
 
 specOld :: Spec State {} Action
@@ -327,7 +329,7 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render']
                     ]
                   ]
                 -}
-                , li [className "col-md-1"]
+                 li [className "col-md-1"]
                   [ span [] [text "Selector"]
                   , input [ _type "range"
                           , _id "cursorSizeRange"

src/Gargantext/Utils/Reactix.purs

@@ -44,6 +44,9 @@ overState f (_state /\ setState) = setState f
 select :: ElemFactory
 select = createDOMElement "select"
 
+menu :: ElemFactory
+menu = createDOMElement "menu"
+
 effToggler :: forall e. R.State Boolean -> EffectFn1 e Unit
 effToggler (_value /\ setValue) = mkEffectFn1 $ \e -> setValue not
 

yarn.lock

@@ -3351,10 +3351,6 @@ react-is@^16.8.1, react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
 
-"react-sigma@git://github.com/np/react-sigma.git#shouldComponentUpdate":
-  version "1.2.29"
-  resolved "git://github.com/np/react-sigma.git#0023eb24248c7bc61aec872bc26552e3d569b974"
-
 react-testing-library@^6.1.2:
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/react-testing-library/-/react-testing-library-6.1.2.tgz#f6bba6eeecedac736eb00b22b4c70bae04535a4f"
@@ -3701,8 +3697,9 @@ shelljs@^0.8.2, shelljs@^0.8.3:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
-sigma@../sigma.js:
+"sigma@git://github.com/jjl/sigma.js#garg":
   version "1.2.1"
+  resolved "git://github.com/jjl/sigma.js#64a0e1ccd48550387ad4a56292dcbaef3258c929"
 
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"