>>> continue

dist/styles/bootstrap-darkster.css

@@ -10079,6 +10079,31 @@ h3 {
   background-color: inherit;
 }
 
+.phylo-config-form__row {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+}
+.phylo-config-form__group {
+  margin-bottom: 24px;
+}
+.phylo-config-form .b-fieldset {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+.phylo-config-form__col {
+  width: 50%;
+}
+.phylo-config-form__col:first-child {
+  padding-right: 8px;
+}
+.phylo-config-form__col:last-child {
+  padding-left: 8px;
+}
+.phylo-config-form__submit {
+  text-align: center;
+}
+
 .form-group {
   position: relative;
   margin-bottom: 24px;
@@ -10943,6 +10968,20 @@ li .node.node-type-valid .text {
   background-color: #000;
 }
 
+.phylo-config-form {
+  background-color: #0d0d0d;
+  color: #cccccc;
+}
+.phylo-config-form__group {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+.phylo-config-form__submit {
+  padding: 0.75rem 1.25rem;
+  background-color: #6f6f6f;
+  border-top: 1px solid rgba(0, 0, 0, 0.6);
+}
+
 .code-editor .editor .code-area {
   flex-grow: 1;
   max-height: 200px;

dist/styles/bootstrap-default.css

@@ -10030,6 +10030,31 @@ h3 {
   background-color: inherit;
 }
 
+.phylo-config-form__row {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+}
+.phylo-config-form__group {
+  margin-bottom: 24px;
+}
+.phylo-config-form .b-fieldset {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+.phylo-config-form__col {
+  width: 50%;
+}
+.phylo-config-form__col:first-child {
+  padding-right: 8px;
+}
+.phylo-config-form__col:last-child {
+  padding-left: 8px;
+}
+.phylo-config-form__submit {
+  text-align: center;
+}
+
 .form-group {
   position: relative;
   margin-bottom: 24px;
@@ -10894,6 +10919,20 @@ li .node.node-type-valid .text {
   background-color: #fff;
 }
 
+.phylo-config-form {
+  background-color: #fff;
+  color: #212529;
+}
+.phylo-config-form__group {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+.phylo-config-form__submit {
+  padding: 0.75rem 1.25rem;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-top: 1px solid rgba(0, 0, 0, 0.125);
+}
+
 .code-editor .editor .code-area {
   flex-grow: 1;
   max-height: 200px;

dist/styles/bootstrap-greyson.css

@@ -9787,6 +9787,31 @@ h3 {
   background-color: inherit;
 }
 
+.phylo-config-form__row {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+}
+.phylo-config-form__group {
+  margin-bottom: 24px;
+}
+.phylo-config-form .b-fieldset {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+.phylo-config-form__col {
+  width: 50%;
+}
+.phylo-config-form__col:first-child {
+  padding-right: 8px;
+}
+.phylo-config-form__col:last-child {
+  padding-left: 8px;
+}
+.phylo-config-form__submit {
+  text-align: center;
+}
+
 .form-group {
   position: relative;
   margin-bottom: 24px;
@@ -10651,6 +10676,20 @@ li .node.node-type-valid .text {
   background-color: #fff;
 }
 
+.phylo-config-form {
+  background-color: #fff;
+  color: #212529;
+}
+.phylo-config-form__group {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+.phylo-config-form__submit {
+  padding: 0.75rem 1.25rem;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-top: 1px solid rgba(0, 0, 0, 0.125);
+}
+
 .code-editor .editor .code-area {
   flex-grow: 1;
   max-height: 200px;

dist/styles/bootstrap-herbie.css

@@ -10036,6 +10036,31 @@ h3 {
   background-color: inherit;
 }
 
+.phylo-config-form__row {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+}
+.phylo-config-form__group {
+  margin-bottom: 24px;
+}
+.phylo-config-form .b-fieldset {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+.phylo-config-form__col {
+  width: 50%;
+}
+.phylo-config-form__col:first-child {
+  padding-right: 8px;
+}
+.phylo-config-form__col:last-child {
+  padding-left: 8px;
+}
+.phylo-config-form__submit {
+  text-align: center;
+}
+
 .form-group {
   position: relative;
   margin-bottom: 24px;
@@ -10900,6 +10925,20 @@ li .node.node-type-valid .text {
   background-color: #fff;
 }
 
+.phylo-config-form {
+  background-color: #fff;
+  color: #212529;
+}
+.phylo-config-form__group {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+.phylo-config-form__submit {
+  padding: 0.75rem 1.25rem;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-top: 1px solid rgba(0, 0, 0, 0.125);
+}
+
 .code-editor .editor .code-area {
   flex-grow: 1;
   max-height: 200px;

dist/styles/bootstrap-monotony.css

@@ -10036,6 +10036,31 @@ h3 {
   background-color: inherit;
 }
 
+.phylo-config-form__row {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+}
+.phylo-config-form__group {
+  margin-bottom: 24px;
+}
+.phylo-config-form .b-fieldset {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+.phylo-config-form__col {
+  width: 50%;
+}
+.phylo-config-form__col:first-child {
+  padding-right: 8px;
+}
+.phylo-config-form__col:last-child {
+  padding-left: 8px;
+}
+.phylo-config-form__submit {
+  text-align: center;
+}
+
 .form-group {
   position: relative;
   margin-bottom: 24px;
@@ -10900,6 +10925,20 @@ li .node.node-type-valid .text {
   background-color: #fff;
 }
 
+.phylo-config-form {
+  background-color: #fff;
+  color: #212529;
+}
+.phylo-config-form__group {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+.phylo-config-form__submit {
+  padding: 0.75rem 1.25rem;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-top: 1px solid rgba(0, 0, 0, 0.125);
+}
+
 .code-editor .editor .code-area {
   flex-grow: 1;
   max-height: 200px;

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

@@ -3,36 +3,27 @@ module Gargantext.Components.Forest.Tree.Node.Action.Update where
 import Gargantext.Components.Forest.Tree.Node.Action.Update.Types
 import Gargantext.Prelude
 
-import DOM.Simple.Console (log, log3)
-import Data.Array as Array
+import DOM.Simple.Console (log3)
 import Data.Either (Either(..))
-import Data.Int as Int
-import Data.Maybe (Maybe(..), fromMaybe)
-import Data.Newtype (unwrap)
-import Data.Number as Number
+import Data.Maybe (Maybe(..))
 import Effect (Effect)
-import Effect.Aff (Aff, launchAff, launchAff_)
-import Effect.Class (liftEffect)
+import Effect.Aff (Aff, launchAff_)
 import Gargantext.Components.Bootstrap.Types (ComponentStatus(..))
 import Gargantext.Components.Forest.Tree.Node.Action.Types (Action(..))
 import Gargantext.Components.Forest.Tree.Node.Tools (formChoiceSafe, submitButton, panel)
-import Gargantext.Components.PhyloExplorer.API (Clique(..), CliqueFilter(..), TimeUnit(..), TimeUnitCriteria(..), UpdateData(..), toReflexiveTimeUnit)
 import Gargantext.Components.PhyloExplorer.API as Phylo
 import Gargantext.Components.PhyloExplorer.ConfigForm as PhyloForm
-import Gargantext.Components.PhyloExplorer.ConfigFormParser (useConfigFormParser)
 import Gargantext.Components.PhyloExplorer.ConfigFormParser as PhyloHook
 import Gargantext.Config.REST (RESTError, AffRESTError)
 import Gargantext.Routes as GR
 import Gargantext.Sessions (Session, post)
 import Gargantext.Types (ID, NodeType(..))
 import Gargantext.Types as GT
-import Gargantext.Utils (getter)
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Record (merge)
 import Toestand as T
-import Unsafe.Coerce (unsafeCoerce)
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Forest.Tree.Node.Action.Update"
@@ -104,21 +95,22 @@ updatePhyloCpt = here.component "updatePhylo" cpt where
 
   -- Helpers
     let
-
+      -- @NOTE #219: use a config property returned by GET phylo route
       defaultData :: Phylo.UpdateData
       defaultData = Phylo.UpdateData
-        { proximity: 0.1
-        , synchrony: 0.1
-        , quality: 0.1
-        , exportFilter: 0.1
+        { proximity: 0.5
+        , synchrony: 0.5
+        , quality: 0.5
+        , exportFilter: 0.5
         , timeUnit: Phylo.Year $ Phylo.TimeUnitCriteria
           { period: 3
           , step: 1
           , matchingFrame: 5
           }
-        , clique: FIS
-            { support: 1
-            , size: 2
+        , clique: Phylo.MaxClique
+            { size: 5
+            , threshold: 0.0001
+            , filter: Phylo.ByThreshold
             }
         }
 

src/Gargantext/Components/PhyloExplorer/ConfigForm.purs

@@ -7,15 +7,16 @@ import Gargantext.Prelude
 
 import DOM.Simple.Console (log3)
 import Data.Either (Either(..))
-import Data.Foldable (intercalate)
+import Data.Foldable (foldl, intercalate)
 import Effect (Effect)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), ComponentStatus(..), Variant(..))
 import Gargantext.Components.PhyloExplorer.API (CliqueFilter(..), ReflexiveClique(..), ReflexiveTimeUnit(..))
-import Gargantext.Hooks.FormValidation (useFormValidation)
+import Gargantext.Hooks.FormValidation (VForm, useFormValidation)
+import Gargantext.Hooks.FormValidation.Unboxed as FV
 import Gargantext.Hooks.StateRecord (useStateRecord)
 import Gargantext.Hooks.StateRecord.Behaviors (setter)
-import Gargantext.Utils ((?))
+import Gargantext.Utils (nbsp, (?))
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -55,8 +56,7 @@ component = R.hooksComponent "configForm" cpt where
       -- @onSubmit: exec whole form validation and execute callback
       onSubmit = do
 
-        -- result <- fv.try (\_ -> formValidation state)
-        result <- pure $ Right state
+        result <- fv.try (\_ -> formValidation state)
         case result of
           Left err -> log3 "configForm validation error" state err
           Right _  -> props.callback state
@@ -66,7 +66,16 @@ component = R.hooksComponent "configForm" cpt where
     pure $
 
       H.form
-      { className: "document-form-creation" }
+      { className: "phylo-config-form" }
+      [
+        H.div
+        { className: "phylo-config-form__group" }
+        [
+          H.div
+          { className: "phylo-config-form__row" }
+          [
+            H.div
+            { className: "phylo-config-form__col" }
             [
               -- Proximity
               H.div
@@ -99,7 +108,11 @@ component = R.hooksComponent "configForm" cpt where
                     ]
                 ]
               ]
+            ]
           ,
+            H.div
+            { className: "phylo-config-form__col" }
+            [
               -- Synchrony
               H.div
               { className: intercalate " "
@@ -131,7 +144,15 @@ component = R.hooksComponent "configForm" cpt where
                     ]
                 ]
               ]
+            ]
+          ]
         ,
+          H.div
+          { className: "phylo-config-form__row" }
+          [
+            H.div
+            { className: "phylo-config-form__col" }
+            [
               -- Quality
               H.div
               { className: intercalate " "
@@ -163,7 +184,11 @@ component = R.hooksComponent "configForm" cpt where
                     ]
                 ]
               ]
+            ]
           ,
+            H.div
+            { className: "phylo-config-form__col" }
+            [
               -- Export filter
               H.div
               { className: intercalate " "
@@ -195,10 +220,21 @@ component = R.hooksComponent "configForm" cpt where
                     ]
                 ]
               ]
+            ]
+          ]
+        ]
       ,
         -- Time Unit
         B.fieldset
-        { titleSlot: H.text "Time unit" }
+        { className: "phylo-config-form__group"
+        , titleSlot: H.text "Time unit"
+        }
+        [
+          H.div
+          { className: "phylo-config-form__row" }
+          [
+            H.div
+            { className: "phylo-config-form__col" }
             [
               -- Granularity
               H.div
@@ -237,7 +273,11 @@ component = R.hooksComponent "configForm" cpt where
                   ]
                 ]
               ]
+            ]
           ,
+            H.div
+            { className: "phylo-config-form__col" }
+            [
               -- Period
               H.div
               { className: intercalate " "
@@ -334,10 +374,20 @@ component = R.hooksComponent "configForm" cpt where
                 ]
               ]
             ]
+          ]
+        ]
       ,
         -- Clique
         B.fieldset
-        { titleSlot: H.text "Clique" }
+        { className: "phylo-config-form__group"
+        , titleSlot: H.text "Clique algorithm"
+        }
+        [
+          H.div
+          { className: "phylo-config-form__row" }
+          [
+            H.div
+            { className: "phylo-config-form__col" }
             [
               -- Clique type
               H.div
@@ -362,7 +412,8 @@ component = R.hooksComponent "configForm" cpt where
                   [
                     B.button
                     { callback: \_ -> setter stateBox "cliqueType" $ show FIS_
-                , variant: OutlinedButtonVariant Secondary
+                    -- , variant: OutlinedButtonVariant Secondary
+                    , variant: ButtonVariant Light
                     , className: state.cliqueType == show FIS_ ?
                         "active" $
                         ""
@@ -373,7 +424,8 @@ component = R.hooksComponent "configForm" cpt where
                   ,
                     B.button
                     { callback: \_ -> setter stateBox "cliqueType" $ show MaxClique_
-                , variant: OutlinedButtonVariant Secondary
+                    -- , variant: OutlinedButtonVariant Secondary
+                    , variant: ButtonVariant Light
                     , className: state.cliqueType == show MaxClique_ ?
                         "active" $
                         ""
@@ -384,9 +436,13 @@ component = R.hooksComponent "configForm" cpt where
                   ]
                 ]
               ]
+            ]
           ,
             -- TYPE::FIS_
-          R2.if' (state.cliqueType == show FIS_) $ R.fragment
+            R2.if' (state.cliqueType == show FIS_) $
+
+              H.div
+              { className: "phylo-config-form__col" }
               [
                 -- Support
                 H.div
@@ -452,7 +508,10 @@ component = R.hooksComponent "configForm" cpt where
               ]
           ,
             -- TYPE::MaxClique_
-          R2.if' (state.cliqueType == show MaxClique_) $ R.fragment
+            R2.if' (state.cliqueType == show MaxClique_) $
+
+              H.div
+              { className: "phylo-config-form__col" }
               [
                 -- Size
                 H.div
@@ -477,7 +536,7 @@ component = R.hooksComponent "configForm" cpt where
                     { type: "number"
                     } `merge` bindStateKey "size"
                   ,
-                R2.if' (fv.hasError' "sjze") $
+                    R2.if' (fv.hasError' "size") $
                       H.div
                       { className: "form-group__error" }
                       [
@@ -549,18 +608,24 @@ component = R.hooksComponent "configForm" cpt where
                 ]
               ]
           ]
+        ]
       ,
         -- Submit
-        H.div { className: "document-form-creation__submit" }
+        H.div { className: "phylo-config-form__submit" }
         [
           B.button
           { callback: \_ -> onSubmit
           , status: props.status == Deferred ? Deferred $ Enabled
           , variant: ButtonVariant Primary
           , type: "submit"
-          , block: true
           }
-          [ H.text "Add" ]
+          [
+            B.icon { name: "refresh" }
+          ,
+            H.text $ nbsp 1
+          ,
+            H.text "Update!"
+          ]
         ]
       ]
 
@@ -585,27 +650,41 @@ type FormData =
 
 defaultData :: Record FormData
 defaultData =
-  { proximity     : ""
-  , synchrony     : ""
-  , quality       : ""
-  , exportFilter  : ""
-  , granularity   : ""
-  , period        : ""
-  , step          : ""
-  , matchingFrame : ""
+  { proximity     : "1.0"
+  , synchrony     : "1.0"
+  , quality       : "1.0"
+  , exportFilter  : "1.0"
+  , granularity   : show Year_
+  , period        : "1"
+  , step          : "1"
+  , matchingFrame : "1"
   , cliqueType    : show FIS_
-  , support       : ""
-  , size          : ""
-  , threshold     : ""
+  , support       : "1"
+  , size          : "1"
+  , threshold     : "1"
   , cliqueFilter  : show ByThreshold
   }
 
--- formValidation :: Record FormData -> Effect VForm
--- formValidation r = foldl append mempty rules
---   where
---     rules =
---       [ FV.nonEmpty "title" r.title
---       , FV.nonEmpty "source" r.source
---       , FV.nonEmpty "authors" r.authors
---       , FV.date "date" r.date
---       ]
+formValidation :: Record FormData -> Effect VForm
+formValidation r = foldl append mempty rules
+  where
+    rules
+       = [ FV.number "proximity" r.proximity
+         , FV.number "synchrony" r.synchrony
+         , FV.number "quality" r.quality
+         , FV.number "exportFilter" r.exportFilter
+         -- Time unit
+         , FV.int "period" r.period
+         , FV.int "step" r.step
+         , FV.int "matchingFrame" r.matchingFrame
+         ]
+         -- Clique
+      <> if (r.cliqueType == show FIS_)
+         then
+            [ FV.int "support" r.support
+            , FV.int "size" r.size
+            ]
+          else
+            [ FV.int "size" r.size
+            , FV.number "threshold" r.threshold
+            ]

src/Gargantext/Hooks/FormValidation/Boxed.purs

@@ -3,11 +3,14 @@ module Gargantext.Hooks.FormValidation.Boxed
   , class NonEmpty, nonEmpty
   , class Minimum, minimum
   , class Maximum, maximum
-  , lowercase, uppercase, email, date
+  , lowercase, uppercase, email, date, number, int
   ) where
 
 import Gargantext.Prelude
 
+import Data.Int as Int
+import Data.Maybe (isNothing)
+import Data.Number as Number
 import Data.String (toLower, toUpper)
 import Data.String.CodeUnits (length)
 import Data.String.Regex (test)
@@ -81,3 +84,15 @@ date field = T.read >=> case _ of
   input
     | (not $ test datePattern input) -> pure $ invalid [ field /\ "date" ]
     | otherwise                      -> pure $ pure unit
+
+number :: Field -> T.Box String -> Effect VForm
+number field = T.read >=> case _ of
+  input
+    | (isNothing $ Number.fromString input) -> pure $ invalid [ field /\ "number "]
+    | otherwise                             -> pure $ pure unit
+
+int :: Field -> T.Box String -> Effect VForm
+int field = T.read >=> case _ of
+  input
+    | (isNothing $ Int.fromString input) -> pure $ invalid [ field /\ "int" ]
+    | otherwise                          -> pure $ pure unit

src/Gargantext/Hooks/FormValidation/Unboxed.purs

@@ -3,11 +3,14 @@ module Gargantext.Hooks.FormValidation.Unboxed
   , class NonEmpty, nonEmpty
   , class Minimum, minimum
   , class Maximum, maximum
-  , lowercase, uppercase, email, date
+  , lowercase, uppercase, email, date, number, int
   ) where
 
 import Gargantext.Prelude
 
+import Data.Maybe (isNothing)
+import Data.Number as Number
+import Data.Int as Int
 import Data.String (toLower, toUpper)
 import Data.String.CodeUnits (length)
 import Data.String.Regex (test)
@@ -68,3 +71,13 @@ date :: Field -> String -> Effect VForm
 date field input
   | (not $ test datePattern input) = pure $ invalid [ field /\ "date" ]
   | otherwise                      = pure $ pure unit
+
+number :: Field -> String -> Effect VForm
+number field input
+  | (isNothing $ Number.fromString input) = pure $ invalid [ field /\ "number" ]
+  | otherwise                             = pure $ pure unit
+
+int :: Field -> String -> Effect VForm
+int field input
+  | (isNothing $ Int.fromString input) = pure $ invalid [ field /\ "int" ]
+  | otherwise                          = pure $ pure unit

src/sass/_legacy/_tree.sass

@@ -454,3 +454,25 @@ li
 .tile-menu__popover
   border-radius: $border-radius
   background-color: $body-bg
+
+/////////////////////////////////////////
+
+.phylo-config-form
+
+  // @TODO: manage background color for all node Box popup
+  background-color: $card-bg
+
+  // @TODO: manage the blue color set on all node Box popup
+  color: $body-color
+
+  &__group
+    padding-left: $card-spacer-x
+    padding-right: $card-spacer-x
+
+  // Apply Bootstrap "cart-footer" rules (see "_card.scss")
+  &__submit
+
+    padding: $card-spacer-y $card-spacer-x
+    color: $card-cap-color
+    background-color: $card-cap-bg
+    border-top: $card-border-width solid $card-border-color

src/sass/components/_grouped.scss

@@ -136,3 +136,42 @@
     background-color: inherit;
   }
 }
+
+/// PhyloExplorer.ConfigForm
+///-----------------------------------------------------------------------------
+
+.phylo-config-form {
+
+
+  &__row {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &__group {
+    // @TODO: generic "form-group" margin-bottom constant
+    margin-bottom: space-x(3);
+  }
+
+  .b-fieldset {
+    margin-left: $card-spacer-x;
+    margin-right: $card-spacer-x;
+  }
+
+  &__col {
+    width: 50%;
+
+    &:first-child {
+      padding-right: space-x(1);
+    }
+
+    &:last-child {
+      padding-left: space-x(1);
+    }
+  }
+
+  &__submit {
+    text-align: center;
+  }
+}