[searx] works now, refactored to use leafComponent

src/Gargantext/Components/Annotation/AnnotatedField.purs

@@ -66,7 +66,7 @@ type InnerProps =
   )
 
 annotatedFieldInner :: R2.Leaf InnerProps
-annotatedFieldInner p = R.createElement annotatedFieldInnerCpt p []
+annotatedFieldInner = R2.leafComponent annotatedFieldInnerCpt
 annotatedFieldInnerCpt :: R.Component InnerProps
 annotatedFieldInnerCpt = here.component "annotatedFieldInner" cpt where
   cpt { menuRef, ngrams, redrawMenu, setTermList, text: fieldText } _ = do

src/Gargantext/Components/Annotation/Menu.purs

@@ -60,7 +60,7 @@ eqAnnotationMenuWrapper { new: Just _, old: Nothing } = pure $ false
 eqAnnotationMenuWrapper { new: Just n, old: Just o } = pure $ eqAnnotationMenu n o
 
 annotationMenuWrapper :: R2.Leaf AnnotationMenuWrapper
-annotationMenuWrapper p = R.createElement annotationMenuWrapperCpt p []
+annotationMenuWrapper = R2.leafComponent annotationMenuWrapperCpt
 annotationMenuWrapperCpt :: R.Component AnnotationMenuWrapper
 annotationMenuWrapperCpt = here.component "annotationMenuWrapper" cpt where
   cpt { menuRef } _ = do
@@ -71,7 +71,7 @@ annotationMenuWrapperCpt = here.component "annotationMenuWrapper" cpt where
 -- | An Annotation Menu is parameterised by a Maybe Termlist of the
 -- | TermList the currently selected text belongs to
 annotationMenu :: R2.Leaf AnnotationMenu
-annotationMenu p = R.createElement annotationMenuCpt p []
+annotationMenu = R2.leafComponent annotationMenuCpt
 annotationMenuCpt :: R.Component AnnotationMenu
 annotationMenuCpt = here.component "annotationMenu" cpt where
   cpt { x, y, list, menuType, onClose, redrawMenu, setList } _ = do
@@ -82,7 +82,7 @@ annotationMenuCpt = here.component "annotationMenu" cpt where
       ]
 
 annotationMenuInner :: R2.Leaf Props
-annotationMenuInner p = R.createElement annotationMenuInnerCpt p []
+annotationMenuInner = R2.leafComponent annotationMenuInnerCpt
 annotationMenuInnerCpt :: R.Component Props
 annotationMenuInnerCpt = here.component "annotationMenuInner" cpt where
   cpt props _ = pure $ R.fragment $ A.mapMaybe (addToList props) [ MapTerm, CandidateTerm, StopTerm ]

src/Gargantext/Components/FolderView.purs

@@ -53,7 +53,7 @@ type Props =
 data FolderStyle = FolderUp | FolderChild
 
 folderView :: R2.Leaf Props
-folderView props = R.createElement folderViewCpt props []
+folderView = R2.leafComponent folderViewCpt
 folderViewCpt :: R.Component Props
 folderViewCpt = here.component "folderViewCpt" cpt where
   cpt { backFolder, boxes, nodeId, session } _ = do

src/Gargantext/Components/FolderView/Box.purs

@@ -23,7 +23,7 @@ type NodePopupProps =
   )
 
 nodePopupView :: R2.Leaf NodePopupProps
-nodePopupView props = R.createElement nodePopupViewCpt props []
+nodePopupView = R2.leafComponent nodePopupViewCpt
 nodePopupViewCpt :: R.Component NodePopupProps
 nodePopupViewCpt = here.component "nodePopupView" cpt where
   cpt props  _ = do

src/Gargantext/Components/Forest.purs

@@ -63,7 +63,7 @@ forestCpt = here.component "forest" cpt where
 type Plus = ( boxes :: Boxes )
 
 plus :: R2.Leaf Plus
-plus p = R.createElement plusCpt p []
+plus = R2.leafComponent plusCpt
 plusCpt :: R.Component Plus
 plusCpt = here.component "plus" cpt where
   cpt { boxes: { backend, showLogin } } _ = pure $

src/Gargantext/Components/Forest/Tree/Node.purs

@@ -307,7 +307,7 @@ nodeActionsCpt = here.component "nodeActions" cpt where
     child _ = H.div {} []
 
 graphNodeActions :: R2.Leaf NodeActionsCommon
-graphNodeActions props = R.createElement graphNodeActionsCpt props []
+graphNodeActions = R2.leafComponent graphNodeActionsCpt
 graphNodeActionsCpt :: R.Component NodeActionsCommon
 graphNodeActionsCpt = here.component "graphNodeActions" cpt where
   cpt { id, session, refresh } _ =
@@ -319,7 +319,7 @@ graphNodeActionsCpt = here.component "graphNodeActions" cpt where
   errorHandler = logRESTError here "[graphNodeActions]"
 
 listNodeActions :: R2.Leaf NodeActionsCommon
-listNodeActions props = R.createElement listNodeActionsCpt props []
+listNodeActions = R2.leafComponent listNodeActionsCpt
 listNodeActionsCpt :: R.Component NodeActionsCommon
 listNodeActionsCpt = here.component "listNodeActions" cpt where
   cpt { id, session, refresh } _ =

src/Gargantext/Components/Forest/Tree/Node/Action/Add.purs

@@ -13,8 +13,8 @@ import Effect (Effect)
 import Effect.Aff (Aff, launchAff_)
 import Gargantext.Components.Forest.Tree.Node.Action.Types (Action(..))
 import Gargantext.Components.Forest.Tree.Node.Settings (SettingsBox(..), settingsBox)
-import Gargantext.Components.Forest.Tree.Node.Tools (formChoiceSafe, panel, submitButton)
-import Gargantext.Components.InputWithEnter (inputWithEnter)
+import Gargantext.Components.Forest.Tree.Node.Tools (formChoice, panel, submitButton)
+import Gargantext.Components.InputWithEnter (inputWithEnterWithKey)
 import Gargantext.Components.Lang (Lang(..), translate)
 import Gargantext.Config.REST (RESTError, AffRESTError)
 import Gargantext.Routes as GR
@@ -78,21 +78,24 @@ addNodeViewCpt :: R.Component CreateNodeProps
 addNodeViewCpt = here.component "addNodeView" cpt where
   cpt { dispatch
       , nodeTypes } _ = do
-    nodeName <- T.useBox "Name"
+    let defaultNodeType = fromMaybe Folder $ head nodeTypes
+    nodeName <- T.useBox $ GT.prettyNodeType defaultNodeType
     nodeName' <- T.useLive T.unequal nodeName
-    nodeType <- T.useBox $ fromMaybe Folder $ head nodeTypes
+    nodeType <- T.useBox defaultNodeType
     nodeType' <- T.useLive T.unequal nodeType
 
     hasChromeAgent' <- R.unsafeHooksEffect hasChromeAgent
 
     let
-
         SettingsBox {edit} = settingsBox nodeType'
         setNodeType' nt = do
           T.write_ (GT.prettyNodeType nt) nodeName
           T.write_ nt nodeType
         (maybeChoose /\ nt') = if length nodeTypes > 1
-                         then ([ formChoiceSafe nodeTypes Error setNodeType' (print hasChromeAgent') ] /\ nodeType')
+                         then ([ formChoice { items: nodeTypes
+                                            , default: Error
+                                            , callback: setNodeType'
+                                            , print: print hasChromeAgent' } [] ] /\ nodeType')
                          else ([H.div {} [H.text $ "Creating a node of type "
                                                 <> show defaultNt
                                                 <> " with name:"
@@ -102,7 +105,7 @@ addNodeViewCpt = here.component "addNodeView" cpt where
                             where
                               defaultNt = (fromMaybe Error $ head nodeTypes)
         maybeEdit   = [ if edit
-                        then inputWithEnter {
+                        then inputWithEnterWithKey {
                             onBlur: \val -> T.write_ val nodeName
                           , onEnter: \_ -> launchAff_ $ dispatch (AddNode nodeName' nt')
                           , onValueChanged: \val -> T.write_ val nodeName
@@ -111,6 +114,7 @@ addNodeViewCpt = here.component "addNodeView" cpt where
                           , defaultValue: nodeName' -- (prettyNodeType nt')
                           , placeholder: nodeName'  -- (prettyNodeType nt')
                           , type: "text"
+                          , key: show nodeType'
                           }
                         else H.div {} []
                       ]

src/Gargantext/Components/Forest/Tree/Node/Action/Contact.purs

@@ -54,7 +54,7 @@ type TextInputBoxProps =
 type AddContactProps = ( firstname :: String, lastname :: String )
 
 textInputBox :: R2.Leaf TextInputBoxProps
-textInputBox props = R.createElement textInputBoxCpt props []
+textInputBox = R2.leafComponent textInputBoxCpt
 textInputBoxCpt :: R.Component TextInputBoxProps
 textInputBoxCpt = here.component "textInputBox" cpt where
   cpt { boxName, boxAction, dispatch, isOpen

src/Gargantext/Components/Forest/Tree/Node/Action/Search/Types.purs

@@ -64,7 +64,7 @@ derive instance Generic DataField _
 instance Show DataField where
   show Gargantext   = "Gargantext"
   show (External _) = "Databases (APIs)" -- <> show x
-  show Web          = "Soon: web"
+  show Web          = "Web"
   show Files        = "Files"
 instance Doc DataField where
   doc Gargantext   = "All Gargantext Database"

src/Gargantext/Components/Forest/Tree/Node/Action/Update.purs

@@ -54,7 +54,10 @@ updateDashboardCpt = here.component "updateDashboard" cpt where
     methodBoard' <- T.useLive T.unequal methodBoard
 
     pure $ panel [ -- H.text "Update with"
-                  formChoiceSafe [All, Sources, Authors, Institutes, Ngrams] All (\val -> T.write_ val methodBoard) show
+                  formChoiceSafe { items: [All, Sources, Authors, Institutes, Ngrams]
+                                 , default: All
+                                 , callback: \val -> T.write_ val methodBoard
+                                 , print: show } []
                  ]
                  (submitButton (UpdateNode $ UpdateNodeParamsBoard { methodBoard: methodBoard' }) dispatch)
 
@@ -67,7 +70,10 @@ updateGraphCpt = here.component "updateGraph" cpt where
     methodGraph' <- T.useLive T.unequal methodGraph
 
     pure $ panel [ -- H.text "Update with"
-                  formChoiceSafe [Order1, Order2] Order1 (\val -> T.write_ val methodGraph) show
+                  formChoiceSafe { items: [Order1, Order2]
+                                 , default: Order1
+                                 , callback: \val -> T.write_ val methodGraph
+                                 , print: show } []
                  ]
                  (submitButton (UpdateNode $ UpdateNodeParamsGraph { methodGraph: methodGraph' }) dispatch)
 
@@ -80,7 +86,10 @@ updateNodeListCpt = here.component "updateNodeList" cpt where
     methodList' <- T.useLive T.unequal methodList
 
     pure $ panel [ -- H.text "Update with"
-                  formChoiceSafe [Basic, Advanced, WithModel] Basic (\val -> T.write_ val methodList) show
+                  formChoiceSafe { items: [Basic, Advanced, WithModel]
+                                 , default: Basic
+                                 , callback: \val -> T.write_ val methodList
+                                 , print: show } []
                  ]
                  (submitButton (UpdateNode $ UpdateNodeParamsList { methodList: methodList' }) dispatch)
 
@@ -93,7 +102,10 @@ updateTextsCpt = here.component "updateTexts" cpt where
     methodTexts' <- T.useLive T.unequal methodTexts
 
     pure $ panel [ -- H.text "Update with"
-                  formChoiceSafe [NewNgrams, NewTexts, Both] NewNgrams (\val -> T.write_ val methodTexts) show
+                  formChoiceSafe { items: [NewNgrams, NewTexts, Both]
+                                 , default: NewNgrams
+                                 , callback: \val -> T.write_ val methodTexts
+                                 , print: show } []
                  ]
                  (submitButton (UpdateNode $ UpdateNodeParamsTexts { methodTexts: methodTexts' }) dispatch)
 

src/Gargantext/Components/Forest/Tree/Node/Action/Upload.purs

@@ -91,7 +91,7 @@ type UploadFile =
 
 
 uploadFileView :: R2.Leaf Props
-uploadFileView props = R.createElement uploadFileViewCpt props []
+uploadFileView = R2.leafComponent uploadFileViewCpt
 uploadFileViewCpt :: R.Component Props
 uploadFileViewCpt = here.component "uploadFileView" cpt
   where
@@ -119,19 +119,24 @@ uploadFileViewCpt = here.component "uploadFileView" cpt
               ]
             , R2.row
               [ H.div {className:"col-6 flex-space-around"}
-                [ formChoiceSafe [ CSV
-                                 , CSV_HAL
-                                 , WOS
-                                 , PresseRIS
-                                 , Arbitrary
-                                 , ZIP
-                                 ] CSV setFileType' show
+                [ formChoiceSafe { items: [ CSV
+                                          , CSV_HAL
+                                          , WOS
+                                          , PresseRIS
+                                          , Arbitrary
+                                          , ZIP
+                                          ]
+                                 , default: CSV
+                                 , callback: setFileType'
+                                 , print: show } []
                 ]
               ]
             , R2.row
               [ H.div {className:"col-6 flex-space-around"}
-                [ formChoiceSafe [EN, FR, No_extraction, Universal] EN setLang'
-                  show
+                [ formChoiceSafe { items: [EN, FR, No_extraction, Universal]
+                                 , default: EN
+                                 , callback: setLang'
+                                 , print: show } []
                 ]
               ]
             , R2.row
@@ -483,7 +488,7 @@ type UploadTermButtonProps =
   )
 
 uploadTermButton :: R2.Leaf UploadTermButtonProps
-uploadTermButton props = R.createElement uploadTermButtonCpt props []
+uploadTermButton = R2.leafComponent uploadTermButtonCpt
 uploadTermButtonCpt :: R.Component UploadTermButtonProps
 uploadTermButtonCpt = here.component "uploadTermButton" cpt
   where

src/Gargantext/Components/Forest/Tree/Node/Box.purs

@@ -43,7 +43,7 @@ type CommonProps =
   , session :: Session )
 
 nodePopupView :: R2.Leaf NodePopupProps
-nodePopupView p = R.createElement nodePopupCpt p []
+nodePopupView = R2.leafComponent nodePopupCpt
 nodePopupCpt :: R.Component NodePopupProps
 nodePopupCpt = here.component "nodePopupView" cpt where
   cpt p@{ id, name, nodeType }  _ = do
@@ -178,7 +178,7 @@ type PanelActionProps =
   )
 
 panelAction :: R2.Leaf PanelActionProps
-panelAction p = R.createElement panelActionCpt p []
+panelAction = R2.leafComponent panelActionCpt
 panelActionCpt :: R.Component PanelActionProps
 panelActionCpt = here.component "panelAction" cpt
   where

src/Gargantext/Components/Forest/Tree/Node/Settings.purs

@@ -198,7 +198,7 @@ settingsBox Corpus =
 
 settingsBox NodeTexts =
   SettingsBox { show : true
-              , edit : false
+              , edit : true
               , doc  : Documentation NodeTexts
               , buttons : [ Refresh
                           , Upload
@@ -268,7 +268,7 @@ settingsBox (NodePublic FolderPublic) =
 
 settingsBox NodeList =
   SettingsBox { show : true
-              , edit : false
+              , edit : true
               , doc  : Documentation NodeList
               , buttons : [ Refresh
                           , Config

src/Gargantext/Components/Forest/Tree/Node/Tools.purs

@@ -11,6 +11,7 @@ import Effect.Aff (Aff, launchAff, launchAff_)
 import Gargantext.Components.App.Data (Boxes)
 import Gargantext.Components.Forest.Tree.Node.Action (icon, text)
 import Gargantext.Components.Forest.Tree.Node.Action.Types (Action)
+import Gargantext.Components.GraphExplorer.Types (mCameraP)
 import Gargantext.Components.InputWithEnter (inputWithEnter)
 import Gargantext.Ends (Frontends, url)
 import Gargantext.Prelude (class Ord, class Read, class Show, Unit, bind, const, discard, map, not, pure, read, show, when, mempty, ($), (<), (<<<), (<>), (<$>), (<*>))
@@ -23,6 +24,7 @@ import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Toestand as T
+import Web.HTML.ValidityState (valid)
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Forest.Tree.Node.Tools"
@@ -104,73 +106,83 @@ formEdit defaultValue setter =
             , placeholder: defaultValue, className: "form-control" }
   ] where input = setter <<< const <<< R.unsafeEventValue
 
+type FormChoiceSafeProps item m =
+  ( items    :: Array item
+  , default  :: item
+  , callback :: item -> Effect m
+  , print    :: item -> String )
+
 -- | Form Choice input
 -- if the list of options is not big enough, a button is used instead
 formChoiceSafe :: forall item m
   .  Read item
   => Show item
-  => Array item
-  -> item
-  -> (item -> Effect m)
-  -> (item -> String)
-  -> R.Element
-formChoiceSafe []  _   _   _    = mempty
-formChoiceSafe [n] _   cbk prnt = formButton n cbk prnt
-formChoiceSafe arr def cbk prnt = formChoice arr def cbk prnt
+  => R2.Component (FormChoiceSafeProps item m)
+formChoiceSafe = R.createElement formChoiceSafeCpt
+formChoiceSafeCpt :: forall item m. Read item => Show item => R.Component (FormChoiceSafeProps item m)
+formChoiceSafeCpt = here.component "formChoiceSafe" cpt where
+  cpt { items, default, callback, print } _ = do
+    pure $ case items of
+      []  -> H.div {} []
+      [n] -> formButton { item: n, callback, print } []
+      _   -> formChoice { items, default, callback, print } []
+
+type FormChoiceProps item m =
+  ( items    :: Array item
+  , default  :: item
+  , callback :: item -> Effect m
+  , print    :: item -> String )
 
 -- | List Form
 formChoice :: forall item m
   .  Read item
   => Show item
-  => Array item
-  -> item
-  -> (item -> Effect m)
-  -> (item -> String)
-  -> R.Element
-formChoice items def cbk prnt =
-
-  H.div { className: "form-group"}
-  [
-    R2.select
-    { className: "form-control with-icon-font"
-    , on: { change }
-    } $
-    map option items
-  ]
+  => R2.Component (FormChoiceProps item m)
+formChoice = R.createElement formChoiceCpt
+formChoiceCpt :: forall item m. Read item => Show item => R.Component (FormChoiceProps item m)
+formChoiceCpt = here.component "formChoice" cpt where
+  cpt { items, callback, default, print } _ = do
+    pure $ H.div { className: "form-group"}
+      [
+        R2.select
+        { className: "form-control with-icon-font"
+        , on: { change }
+        } $ map option items
+      ]
 
-  where
-    change e = cbk $ fromMaybe def $ read $ R.unsafeEventValue e
+    where
+      change e = do
+        val <- callback $ fromMaybe default $ read $ R.unsafeEventValue e
+        here.log2 "[formChoice] val" val
+        pure val
+
+      option opt = H.option { value: show opt } [ H.text $ print opt ]
 
-    option opt =
-      H.option { value: show opt }
-      [ H.text $ prnt opt ]
+type FormButtonProps item m =
+  ( item     :: item
+  , callback :: item -> Effect m
+  , print    :: item -> String )
 
 -- | Button Form
 -- FIXME: currently needs a click from the user (by default, we could avoid such click)
-formButton :: forall item m
-  .  item
-  -> (item -> Effect m)
-  -> (item -> String)
-  -> R.Element
-formButton item cbk prnt =
-
-  H.div {}
-  [
-    H.text $ "Confirm the selection of: " <> prnt item
-  ,
-    cta
-  ]
+formButton :: forall item m. R2.Component (FormButtonProps item m)
+formButton = R.createElement formButtonCpt
+formButtonCpt :: forall item m. R.Component (FormButtonProps item m)
+formButtonCpt = here.component "formButton" cpt where
+  cpt { item, callback, print} _ = do
+    pure $ H.div {}
+      [ H.text $ "Confirm the selection of: " <> print item
+      , cta ]
 
-  where
-    cta =
-      H.button
-      { className : "cold-md-5 btn btn-primary center"
-      , type : "button"
-      , title: "Form Button"
-      , style : { width: "100%" }
-      , on: { click: \_ -> cbk item }
-      }
-      [ H.text "Confirmation" ]
+    where
+      cta =
+        H.button { className : "cold-md-5 btn btn-primary center"
+                 , type : "button"
+                 , title: "Form Button"
+                 , style : { width: "100%" }
+                 , on: { click: \_ -> callback item }
+                 }
+        [ H.text "Confirmation" ]
 
 ------------------------------------------------------------------------
 ------------------------------------------------------------------------
@@ -201,7 +213,7 @@ type CheckboxProps =
   ( value :: T.Box Boolean )
 
 checkbox :: R2.Leaf CheckboxProps
-checkbox props = R.createElement checkboxCpt props []
+checkbox = R2.leafComponent checkboxCpt
 checkboxCpt :: R.Component CheckboxProps
 checkboxCpt = here.component "checkbox" cpt
   where

src/Gargantext/Components/GraphExplorer/ControlsToggleButton.purs

@@ -16,7 +16,7 @@ here = R2.here "Gargantext.Components.GraphExplorer.ControlsToggleButton"
 type Props = ( state :: T.Box Boolean )
 
 controlsToggleButton :: R2.Leaf Props
-controlsToggleButton props = R.createElement controlsToggleButtonCpt props []
+controlsToggleButton = R2.leafComponent controlsToggleButtonCpt
 
 controlsToggleButtonCpt :: R.Component Props
 controlsToggleButtonCpt = here.component "controlsToggleButton" cpt

src/Gargantext/Components/GraphExplorer/Sidebar.purs

@@ -320,7 +320,7 @@ type BadgeProps =
   , selectedNodeIds :: T.Box SigmaxT.NodeIds )
 
 badge :: R2.Leaf BadgeProps
-badge props = R.createElement badgeCpt props []
+badge = R2.leafComponent badgeCpt
 badgeCpt :: R.Component BadgeProps
 badgeCpt = here.component "badge" cpt where
   cpt { maxSize, minSize, node: { id, label, size }, selectedNodeIds } _ = do

src/Gargantext/Components/GraphExplorer/TopBar.purs

@@ -22,7 +22,7 @@ type TopBar =
   )
 
 topBar :: R2.Leaf TopBar
-topBar p = R.createElement topBarCpt p []
+topBar = R2.leafComponent topBarCpt
 topBarCpt :: R.Component TopBar
 topBarCpt = here.component "topBar" cpt where
   cpt { boxes: { sidePanelGraph

src/Gargantext/Components/InputWithEnter.purs

@@ -10,8 +10,8 @@ import Gargantext.Utils.Reactix as R2
 here :: R2.Here
 here = R2.here "Gargantext.Components.InputWithEnter"
 
-type Props a = (
-    onBlur         :: String -> Effect Unit
+type Props a =
+  ( onBlur         :: String -> Effect Unit
   , onEnter        :: Unit -> Effect Unit
   , onValueChanged :: String -> Effect Unit
 
@@ -22,9 +22,25 @@ type Props a = (
   , type           :: String
   )
 
-inputWithEnter :: forall a. Record (Props a) -> R.Element
-inputWithEnter props = R.createElement inputWithEnterCpt props []
+type PropsKey a =
+  ( key :: String
+  | Props a )
 
+inputWithEnterWithKey :: forall a. R2.Leaf (PropsKey a)
+inputWithEnterWithKey = R2.leafComponent inputWithEnterWithKeyCpt
+inputWithEnterWithKeyCpt = here.component "inputWithEnterWithKey" cpt where
+  cpt { onBlur, onEnter, onValueChanged, autoFocus, className, defaultValue, placeholder, type: t } _ = do
+    pure $ inputWithEnter { onBlur
+                          , onEnter
+                          , onValueChanged
+                          , autoFocus
+                          , className
+                          , defaultValue
+                          , placeholder
+                          , type: t }
+
+inputWithEnter :: forall a. R2.Leaf (Props a)
+inputWithEnter = R2.leafComponent inputWithEnterCpt
 inputWithEnterCpt :: forall a. R.Component (Props a)
 inputWithEnterCpt = here.component "inputWithEnter" cpt
   where

src/Gargantext/Components/ListSelection.purs

@@ -31,9 +31,12 @@ selectionCpt :: R.Component Props
 selectionCpt = here.component "selection" cpt where
   cpt { selection, session } _ = do
     pure $ H.div { className: "list-selection" }
-      [ formChoiceSafe [ MyListsFirst
-                       , OtherListsFirst
-                       , SelectedLists [] ] MyListsFirst setSelection show
+      [ formChoiceSafe { items: [ MyListsFirst
+                                , OtherListsFirst
+                                , SelectedLists [] ]
+                       , default: MyListsFirst
+                       , callback: setSelection
+                       , print: show } []
       , selectedIds { selection, session } []
       ]
     where
@@ -159,7 +162,7 @@ type RenderListElementProps =
   , selection :: T.Box Selection )
 
 renderListElement :: R2.Leaf RenderListElementProps
-renderListElement props = R.createElement renderListElementCpt props []
+renderListElement = R2.leafComponent renderListElementCpt
 renderListElementCpt :: R.Component RenderListElementProps
 renderListElementCpt = here.component "renderListElement" cpt where
   cpt { id, name, selection } _ = do

src/Gargantext/Components/Login.purs

@@ -38,7 +38,7 @@ type Props =
   )
 
 login :: R2.Leaf Props
-login props = R.createElement loginCpt props []
+login = R2.leafComponent loginCpt
 
 loginCpt :: R.Component Props
 loginCpt = here.component "login" cpt where
@@ -49,7 +49,7 @@ loginCpt = here.component "login" cpt where
       inner (Just b) = form { backend: b, sessions, visible }
 
 chooser :: R2.Leaf Props
-chooser props = R.createElement chooserCpt props []
+chooser = R2.leafComponent chooserCpt
 
 chooserCpt :: R.Component Props
 chooserCpt = here.component "chooser" cpt where

src/Gargantext/Components/Login/Form.purs

@@ -86,7 +86,7 @@ type SubmitButtonProps s v = ( cell :: T.Box Form | Props s v )
 submitButton
   :: forall s v. T.ReadWrite s Sessions => T.Write v Boolean
   => R2.Leaf (SubmitButtonProps s v)
-submitButton props = R.createElement submitButtonCpt props []
+submitButton = R2.leafComponent submitButtonCpt
 
 submitButtonCpt
   :: forall s v. T.ReadWrite s Sessions => T.Write v Boolean

src/Gargantext/Components/NgramsTable/Components.purs

@@ -31,7 +31,7 @@ type SearchInputProps =
   )
 
 searchInput :: R2.Leaf SearchInputProps
-searchInput props = R.createElement searchInputCpt props []
+searchInput = R2.leafComponent searchInputCpt
 searchInputCpt :: R.Component SearchInputProps
 searchInputCpt = here.component "searchInput" cpt
   where

src/Gargantext/Components/Nodes/Annuaire.purs

@@ -54,8 +54,7 @@ type LayoutProps =
   )
 
 annuaireLayout :: R2.Leaf LayoutProps
-annuaireLayout props = R.createElement annuaireLayoutCpt props []
-
+annuaireLayout = R2.leafComponent annuaireLayoutCpt
 annuaireLayoutCpt :: R.Component LayoutProps
 annuaireLayoutCpt = here.component "annuaireLayout" cpt where
   cpt { frontends, nodeId, session } _ = do
@@ -69,7 +68,7 @@ type KeyLayoutProps =
   )
 
 annuaireLayoutWithKey :: R2.Leaf KeyLayoutProps
-annuaireLayoutWithKey props = R.createElement annuaireLayoutWithKeyCpt props []
+annuaireLayoutWithKey = R2.leafComponent annuaireLayoutWithKeyCpt
 
 annuaireLayoutWithKeyCpt :: R.Component KeyLayoutProps
 annuaireLayoutWithKeyCpt = here.component "annuaireLayoutWithKey" cpt where
@@ -93,7 +92,7 @@ type AnnuaireProps =
 
 -- | Renders a basic table and the page loader
 annuaire :: R2.Leaf AnnuaireProps
-annuaire props = R.createElement annuaireCpt props []
+annuaire = R2.leafComponent annuaireCpt
 
 -- Abuses closure to work around the Loader
 annuaireCpt :: R.Component AnnuaireProps

src/Gargantext/Components/Nodes/Annuaire/Tabs.purs

@@ -61,7 +61,7 @@ type TabsProps =
   )
 
 tabs :: R2.Leaf TabsProps
-tabs props = R.createElement tabsCpt props []
+tabs = R2.leafComponent tabsCpt
 tabsCpt :: R.Component TabsProps
 tabsCpt = here.component "tabs" cpt where
   cpt props _ = do
@@ -105,7 +105,7 @@ type NgramsViewTabsProps =
   | TabsProps )
 
 ngramsView :: R2.Leaf NgramsViewTabsProps
-ngramsView props = R.createElement ngramsViewCpt props []
+ngramsView = R2.leafComponent ngramsViewCpt
 ngramsViewCpt :: R.Component NgramsViewTabsProps
 ngramsViewCpt = here.component "ngramsView" cpt where
   cpt props@{ defaultListId, mode, nodeId, session } _ = do

src/Gargantext/Components/Nodes/Annuaire/User.purs

@@ -91,7 +91,7 @@ userLayoutCpt = here.component "userLayout" cpt
       pure $ userLayoutWithKey $ Record.merge props { key: show sid <> "-" <> show nodeId }
 
 userLayoutWithKey :: R2.Leaf KeyLayoutProps
-userLayoutWithKey props = R.createElement userLayoutWithKeyCpt props []
+userLayoutWithKey = R2.leafComponent userLayoutWithKeyCpt
 userLayoutWithKeyCpt :: R.Component KeyLayoutProps
 userLayoutWithKeyCpt = here.component "userLayoutWithKey" cpt where
   cpt { boxes: boxes@{ sidePanelTexts }

src/Gargantext/Components/Nodes/Annuaire/User/Contact.purs

@@ -97,7 +97,7 @@ type ContactInfoItemProps =
   )
 
 contactInfoItem :: R2.Leaf ContactInfoItemProps
-contactInfoItem props = R.createElement contactInfoItemCpt props []
+contactInfoItem = R2.leafComponent contactInfoItemCpt
 contactInfoItemCpt :: R.Component ContactInfoItemProps
 contactInfoItemCpt = here.component "contactInfoItem" cpt
   where
@@ -129,7 +129,7 @@ type ItemProps =
   )
 
 itemNotEditing :: R2.Leaf ItemProps
-itemNotEditing props = R.createElement itemNotEditingCpt props []
+itemNotEditing = R2.leafComponent itemNotEditingCpt
 itemNotEditingCpt :: R.Component ItemProps
 itemNotEditingCpt = here.component "itemEditing" cpt where
   cpt { isEditing, valueBox } _ = do
@@ -146,7 +146,7 @@ itemNotEditingCpt = here.component "itemEditing" cpt where
         click _ = T.write_ true isEditing
 
 itemEditing :: R2.Leaf ItemProps
-itemEditing props = R.createElement itemEditingCpt props []
+itemEditing = R2.leafComponent itemEditingCpt
 itemEditingCpt :: R.Component ItemProps
 itemEditingCpt = here.component "itemNotEditing" cpt where
   cpt { defaultVal, isEditing, lens, onUpdateUserInfo, userInfo, valueBox } _ = do
@@ -231,7 +231,7 @@ contactLayoutCpt = here.component "contactLayout" cpt where
       contactLayoutWithKey $ Record.merge props { key }
 
 contactLayoutWithKey :: R2.Leaf AnnuaireKeyLayoutProps
-contactLayoutWithKey props = R.createElement contactLayoutWithKeyCpt props []
+contactLayoutWithKey = R2.leafComponent contactLayoutWithKeyCpt
 contactLayoutWithKeyCpt :: R.Component AnnuaireKeyLayoutProps
 contactLayoutWithKeyCpt = here.component "contactLayoutWithKey" cpt where
     cpt { annuaireId

src/Gargantext/Components/Nodes/Annuaire/User/Contacts/Tabs.purs

@@ -58,7 +58,7 @@ type TabsProps =
   )
 
 tabs :: R2.Leaf TabsProps
-tabs props = R.createElement tabsCpt props []
+tabs = R2.leafComponent tabsCpt
 tabsCpt :: R.Component TabsProps
 tabsCpt = here.component "tabs" cpt
   where

src/Gargantext/Components/Nodes/Corpus.purs

@@ -42,7 +42,7 @@ type Props =
   , session :: Session )
 
 corpusLayout :: R2.Leaf Props
-corpusLayout props = R.createElement corpusLayoutCpt props []
+corpusLayout = R2.leafComponent corpusLayoutCpt
 corpusLayoutCpt :: R.Component Props
 corpusLayoutCpt = here.component "corpusLayout" cpt where
   cpt { boxes, nodeId, session } _ = do
@@ -58,7 +58,7 @@ type KeyProps =
   )
 
 corpusLayoutMain :: R2.Leaf KeyProps
-corpusLayoutMain props = R.createElement corpusLayoutMainCpt props []
+corpusLayoutMain = R2.leafComponent corpusLayoutMainCpt
 corpusLayoutMainCpt :: R.Component KeyProps
 corpusLayoutMainCpt = here.component "corpusLayoutMain" cpt
   where

src/Gargantext/Components/Nodes/Corpus/Chart/Pie.purs

@@ -97,7 +97,7 @@ mkRequest :: Session -> ReloadPath -> GUC.Request
 mkRequest session (_ /\ path) = GUC.makeGetRequest session $ chartUrl path
 
 pie :: R2.Leaf Props
-pie props = R.createElement pieCpt props []
+pie = R2.leafComponent pieCpt
 pieCpt :: R.Component Props
 pieCpt = here.component "pie" cpt
   where

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

@@ -41,7 +41,7 @@ type ViewProps =
   )
 
 corpusCodeLayout :: R2.Leaf Props
-corpusCodeLayout props = R.createElement corpusCodeLayoutCpt props []
+corpusCodeLayout = R2.leafComponent corpusCodeLayoutCpt
 corpusCodeLayoutCpt :: R.Component Props
 corpusCodeLayoutCpt = here.component "corpusCodeLayout" cpt where
   cpt { nodeId, session, boxes } _ = do

src/Gargantext/Components/Nodes/File.purs

@@ -48,7 +48,7 @@ instance Eq File where
 type FileLayoutProps = ( nodeId :: NodeID, session :: Session )
 
 fileLayout :: R2.Leaf FileLayoutProps
-fileLayout props = R.createElement fileLayoutCpt props []
+fileLayout = R2.leafComponent fileLayoutCpt
 fileLayoutCpt :: R.Component FileLayoutProps
 fileLayoutCpt = here.component "fileLayout" cpt where
   cpt { nodeId, session } _ = do

src/Gargantext/Components/Nodes/Frame.purs

@@ -48,7 +48,7 @@ type KeyProps =
   )
 
 frameLayout :: R2.Leaf Props
-frameLayout props = R.createElement frameLayoutCpt props []
+frameLayout = R2.leafComponent frameLayoutCpt
 frameLayoutCpt :: R.Component Props
 frameLayoutCpt = here.component "frameLayout" cpt where
   cpt { nodeId, nodeType, session } _ = do
@@ -57,7 +57,7 @@ frameLayoutCpt = here.component "frameLayout" cpt where
         key = show (sessionId session) <> "-" <> show nodeId
 
 frameLayoutWithKey :: R2.Leaf KeyProps
-frameLayoutWithKey props = R.createElement frameLayoutWithKeyCpt props []
+frameLayoutWithKey = R2.leafComponent frameLayoutWithKeyCpt
 frameLayoutWithKeyCpt :: R.Component KeyProps
 frameLayoutWithKeyCpt = here.component "frameLayoutWithKey" cpt where
   cpt { nodeId, session, nodeType} _ = do
@@ -89,7 +89,7 @@ hframeUrl NodeFrameVisio base frame_id = base <> "/" <> frame_id
 hframeUrl _ base frame_id = base <> "/" <> frame_id <> "?view" -- "?both"
 
 frameLayoutView :: R2.Leaf ViewProps
-frameLayoutView props  = R.createElement frameLayoutViewCpt props []
+frameLayoutView = R2.leafComponent frameLayoutViewCpt
 frameLayoutViewCpt :: R.Component ViewProps
 frameLayoutViewCpt = here.component "frameLayoutView" cpt
   where
@@ -123,7 +123,7 @@ type NodeFrameVisioProps =
   )
 
 nodeFrameVisio :: R2.Leaf NodeFrameVisioProps
-nodeFrameVisio props = R.createElement nodeFrameVisioCpt props []
+nodeFrameVisio = R2.leafComponent nodeFrameVisioCpt
 nodeFrameVisioCpt :: R.Component NodeFrameVisioProps
 nodeFrameVisioCpt = here.component "nodeFrameVisio" cpt
   where

src/Gargantext/Components/Nodes/Home.purs

@@ -57,7 +57,7 @@ type HomeProps =
   )
 
 homeLayout :: R2.Leaf HomeProps
-homeLayout props = R.createElement homeLayoutCpt props []
+homeLayout = R2.leafComponent homeLayoutCpt
 homeLayoutCpt :: R.Component HomeProps
 homeLayoutCpt = here.component "homeLayout" cpt
   where
@@ -152,7 +152,7 @@ type TutorialProps =
   , sessions :: Array Session )
 
 tutorial :: R2.Leaf TutorialProps
-tutorial props = R.createElement tutorialCpt props []
+tutorial = R2.leafComponent tutorialCpt
 tutorialCpt :: R.Component TutorialProps
 tutorialCpt = here.component "tutorial" cpt where
   cpt { boxes

src/Gargantext/Components/Nodes/Home/Public.purs

@@ -66,7 +66,7 @@ loadPublicData _l = do
 -}
 
 renderPublic :: R2.Leaf ()
-renderPublic props = R.createElement renderPublicCpt props []
+renderPublic = R2.leafComponent renderPublicCpt
 renderPublicCpt :: R.Component ()
 renderPublicCpt = here.component "renderPublic" cpt where
   cpt _ _ = do

src/Gargantext/Components/Router.purs

@@ -62,7 +62,7 @@ type SessionNodeProps = ( nodeId :: NodeID | SessionProps )
 type Props' = ( backend :: Backend, route' :: AppRoute | Props )
 
 router :: R2.Leaf Props
-router props = R.createElement routerCpt props []
+router = R2.leafComponent routerCpt
 routerCpt :: R.Component Props
 routerCpt = here.component "router" cpt where
   cpt { boxes: boxes@{ handed } } _ = do
@@ -85,7 +85,7 @@ routerCpt = here.component "router" cpt where
 
 
 loginModal :: R2.Leaf Props
-loginModal p = R.createElement loginModalCpt p []
+loginModal = R2.leafComponent loginModalCpt
 loginModalCpt :: R.Component Props
 loginModalCpt = here.component "loginModal" cpt
   where
@@ -95,7 +95,7 @@ loginModalCpt = here.component "loginModal" cpt
         pure $ if showLogin' then login' boxes else H.div {} []
 
 topBar :: R2.Leaf Props
-topBar p = R.createElement topBarCpt p []
+topBar = R2.leafComponent topBarCpt
 topBarCpt :: R.Component Props
 topBarCpt = here.component "topBar" cpt where
   cpt { boxes: boxes@{ route } } _ = do
@@ -108,7 +108,7 @@ topBarCpt = here.component "topBar" cpt where
     pure $ TopBar.topBar { boxes } children
 
 mainPage :: R2.Leaf Props
-mainPage p = R.createElement mainPageCpt p []
+mainPage = R2.leafComponent mainPageCpt
 mainPageCpt :: R.Component Props
 mainPageCpt = here.component "mainPage" cpt where
   cpt { boxes } _ = do
@@ -197,7 +197,7 @@ mainPageCpt = here.component "mainPage" cpt where
 
 
 forest :: R2.Leaf Props
-forest p = R.createElement forestCpt p []
+forest = R2.leafComponent forestCpt
 forestCpt :: R.Component Props
 forestCpt = here.component "forest" cpt where
   cpt { boxes: boxes@{ showTree } } _ = do
@@ -212,7 +212,7 @@ forestCpt = here.component "forest" cpt where
            , frontends: defaultFrontends } []
 
 sidePanel :: R2.Leaf Props
-sidePanel p = R.createElement sidePanelCpt p []
+sidePanel = R2.leafComponent sidePanelCpt
 sidePanelCpt :: R.Component Props
 sidePanelCpt = here.component "sidePanel" cpt where
   cpt props@{ boxes: { session
@@ -233,7 +233,7 @@ type RenderRouteProps =
   )
 
 renderRoute :: R2.Leaf RenderRouteProps
-renderRoute p = R.createElement renderRouteCpt p []
+renderRoute = R2.leafComponent renderRouteCpt
 renderRouteCpt :: R.Component RenderRouteProps
 renderRouteCpt = here.component "renderRoute" cpt where
   cpt { boxes, route } _ = do

src/Gargantext/Components/Tab.purs

@@ -20,7 +20,7 @@ type TabsProps = (
   )
 
 tabs :: R2.Leaf TabsProps
-tabs props = R.createElement tabsCpt props []
+tabs = R2.leafComponent tabsCpt
 -- this is actually just the list of tabs, not the tab contents itself
 tabsCpt :: R.Component TabsProps
 tabsCpt = here.component "tabs" cpt where

src/Gargantext/Components/Table.purs

@@ -113,7 +113,7 @@ tableHeaderLayoutCpt = here.component "tableHeaderLayout" cpt
     cacheStateToggle NT.CacheOff = NT.CacheOn
 
 table :: R2.Leaf Props
-table props = R.createElement tableCpt props []
+table = R2.leafComponent tableCpt
 tableCpt :: R.Component Props
 tableCpt = here.component "table" cpt
   where
@@ -237,7 +237,7 @@ type PaginationProps =
   , totalPages :: Int )
 
 pagination :: R2.Leaf PaginationProps
-pagination props = R.createElement paginationCpt props []
+pagination = R2.leafComponent paginationCpt
 paginationCpt :: R.Component PaginationProps
 paginationCpt = here.component "pagination" cpt
   where

src/Gargantext/Utils/Reactix.purs

@@ -47,6 +47,9 @@ type Component p = Record p -> Array R.Element -> R.Element
 -- | UI Component type with only required props and no child
 type Leaf p = Record p -> R.Element
 
+leafComponent :: forall cpt p. (R.Component p) -> Record p -> R.Element
+leafComponent cpt p = R.createElement cpt p []
+
 -- | UI Component type containing optional props and children
 type OptComponent options props provided = CO.Defaults (Record options) (Record provided) (Record props)
   => Record provided -> Array R.Element -> R.Element