Skip to content

P
purescript-gargantext
Commit f70dc5a7 authored by Fabien Manière's avatar Fabien Manière
Browse files
Options

better phylo form, part 2

parent 07ecded6
Hide whitespace changes
Inline Side-by-side
Showing with 853 additions and 773 deletions
src/Gargantext/Components/PhyloExplorer/Config/ConfigForm.purs
View file @ f70dc5a7
...@@ -165,6 +165,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -165,6 +165,7 @@ component = R.hooksComponent "configForm" cpt where
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group"
, "mb-1"
] ]
} }
[ [
...@@ -207,6 +208,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -207,6 +208,7 @@ component = R.hooksComponent "configForm" cpt where
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group"
, "mb-1"
, (fv.hasError' "period") ? , (fv.hasError' "period") ?
"form-group--error" $ "form-group--error" $
mempty mempty
...@@ -243,6 +245,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -243,6 +245,7 @@ component = R.hooksComponent "configForm" cpt where
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group"
, "mb-1"
, (fv.hasError' "step") ? , (fv.hasError' "step") ?
"form-group--error" $ "form-group--error" $
mempty mempty
...@@ -279,6 +282,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -279,6 +282,7 @@ component = R.hooksComponent "configForm" cpt where
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group"
, "mb-1"
, (fv.hasError' "matchingFrame") ? , (fv.hasError' "matchingFrame") ?
"form-group--error" $ "form-group--error" $
mempty mempty
...@@ -318,7 +322,10 @@ component = R.hooksComponent "configForm" cpt where ...@@ -318,7 +322,10 @@ component = R.hooksComponent "configForm" cpt where
[ [
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group my-1 text-center" [ "form-group"
, "mt-0"
, "mb-1"
, "text-center"
, (fv.hasError' "quality") ? , (fv.hasError' "quality") ?
"form-group--error" $ "form-group--error" $
mempty mempty
...@@ -375,313 +382,384 @@ component = R.hooksComponent "configForm" cpt where ...@@ -375,313 +382,384 @@ component = R.hooksComponent "configForm" cpt where
] ]
, ,
-- Clusterisation algo
B.fieldset B.fieldset
{ className: "phylo-config-form__group" { className: "phylo-config-form__group mx-0"
, titleSlot: H.text "Clusterisation algorythm" , titleSlot: H.text "Clusterisation algorithm"
} }
[ [
-- Support -- Mode
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group text-center mb-2"
, (fv.hasError' "support") ?
"form-group--error" $
mempty
] ]
} }
[ [
H.div H.div
{ className: "form-group__label" } { className: "form-group__label" }
[ [
H.label {} [ H.text "Support" ] H.label {} [ H.text "Mode" ]
] ]
, ,
H.div H.div
{ className: "form-group__field" } { className: "form-group__field" }
[ [
B.formInput $ H.div
bindStateKey "support" { className: "btn-group"
, , role: "group"
R2.when (fv.hasError' "support") $ }
H.div [
{ className: "form-group__error" } B.button
{ callback: \_ -> setter stateBox "cliqueType" $ show FIS_
-- , variant: OutlinedButtonVariant Secondary
, variant: ButtonVariant Light
, className: state.cliqueType == show FIS_ ?
"active" $
""
}
[ [
H.text "Please enter an `Int` value (eg. 3)" H.text "Basic"
] ]
] ,
] B.button
, { callback: \_ -> setter stateBox "cliqueType" $ show MaxClique_
-- Size -- , variant: OutlinedButtonVariant Secondary
H.div , variant: ButtonVariant Light
{ className: intercalate " " , className: state.cliqueType == show MaxClique_ ?
[ "form-group" "active" $
, (fv.hasError' "size") ? ""
"form-group--error" $ }
mempty
]
}
[
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Size" ]
]
,
H.div
{ className: "form-group__field" }
[
B.formInput $
bindStateKey "size"
,
R2.when (fv.hasError' "sjze") $
H.div
{ className: "form-group__error" }
[ [
H.text "Please enter an `Int` value (eg. 3)" H.text "Expert"
] ]
]
] ]
] ]
] ,
,
-- Clique
B.fieldset
{ className: "phylo-config-form__group"
, titleSlot: H.text "Clique algorithm"
}
[
H.div H.div
{ className: "phylo-config-form__row" } { className: "" }
[ [
H.div -- Mode Basic / TYPE::FIS_
{ className: "phylo-config-form__col" } R2.when (state.cliqueType == show FIS_) $
[
-- Clique type H.div { className: "clustrisation-algorythm-basic form-group" }
H.div
{ className: intercalate " "
[ "form-group"
]
}
[ [
-- Title FIS
H.div H.div
{ className: "form-group__label" } { className: "form-group__label text-center" }
[ [
H.label {} [ H.text "Type" ] H.label {} [ H.text "FIS" ]
] ]
, ,
H.div H.div
{ className: "form-group__field" } { className: "phylo-config-form__row justify-content-center" }
[ [
-- Support
H.div
{ className: intercalate " "
[ "form-group col-4 w-10 text-center mb-0"
, (fv.hasError' "support") ?
"form-group--error" $
mempty
]
}
[
H.div
{ className: "" }
[
H.label {} [ H.text "Support" ]
]
,
H.div
{ className: "form-group__field" }
[
B.formInput $
{ type: "number"
} `merge` bindStateKey "support"
,
R2.when (fv.hasError' "support") $
H.div
{ className: "form-group__error" }
[
H.text "Please enter an `Int` value (eg. 3)"
]
]
]
,
-- Size
H.div H.div
{ className: "btn-group" { className: intercalate " "
, role: "group" [ "form-group col-4 w-10 text-center mb-0"
, (fv.hasError' "size") ?
"form-group--error" $
mempty
]
} }
[ [
B.button H.div
{ callback: \_ -> setter stateBox "cliqueType" $ show FIS_ { className: "" }
-- , variant: OutlinedButtonVariant Secondary
, variant: ButtonVariant Light
, className: state.cliqueType == show FIS_ ?
"active" $
""
}
[ [
H.text "FIS" H.label {} [ H.text "Size" ]
] ]
, ,
B.button H.div
{ callback: \_ -> setter stateBox "cliqueType" $ show MaxClique_ { className: "form-group__field" }
-- , variant: OutlinedButtonVariant Secondary
, variant: ButtonVariant Light
, className: state.cliqueType == show MaxClique_ ?
"active" $
""
}
[ [
H.text "MaxClique" B.formInput $
{ type: "number"
} `merge` bindStateKey "size"
,
R2.when (fv.hasError' "size") $
H.div
{ className: "form-group__error" }
[
H.text "Please enter an `Int` value (eg. 3)"
]
] ]
] ]
] ]
] ]
] ]
, ,
-- TYPE::FIS_ H.div
R2.when (state.cliqueType == show FIS_) $ { className: "" }
[
-- Mode Expert (part 1) / TYPE::MaxClique_
R2.when (state.cliqueType == show MaxClique_) $
H.div H.div { className: "clustrisation-algorythm-expert form-group" }
{ className: "phylo-config-form__col" }
[ [
-- Support -- Title MaxClique
H.div H.div
{ className: intercalate " " { className: "form-group__label text-center" }
[ "form-group" [
, (fv.hasError' "support") ? H.label {} [ H.text "MaxClique" ]
"form-group--error" $ ]
mempty ,
] H.div
} { className: "phylo-config-form__row justify-content-center" }
[ [
-- Size
H.div H.div
{ className: "form-group__label" } { className: intercalate " "
[ "form-group col-3 w-10 text-center mb-0"
, (fv.hasError' "size") ?
"form-group--error" $
mempty
]
}
[ [
H.label {} [ H.text "Support" ] H.div
{ className: "" }
[
H.label {} [ H.text "Size" ]
]
,
H.div
{ className: "form-group__field" }
[
B.formInput $
{ type: "number"
, step: "1"
, min: "0"
, max: "10"
} `merge` bindStateKey "size"
,
R2.when (fv.hasError' "size") $
H.div
{ className: "form-group__error" }
[
H.text "Please enter an `Int` value (eg. 3)"
]
]
] ]
, ,
-- Treshold
H.div H.div
{ className: "form-group__field" } { className: intercalate " "
[ "form-group col-4 w-10 text-center mb-0"
, (fv.hasError' "threshold") ?
"form-group--error" $
mempty
]
}
[ [
B.formInput $ H.div
bindStateKey "support" { className: "" }
[
H.label {} [ H.text "Treshold" ]
]
, ,
R2.when (fv.hasError' "support") $ H.div
H.div { className: "form-group__field" }
{ className: "form-group__error" } [
[ B.formInput $
H.text "Please enter an `Int` value (eg. 3)" { type: "number"
] , step: "0.0001"
] , min: "0.0001"
] , max: "1"
, } `merge` bindStateKey "threshold"
-- Size ,
H.div R2.when (fv.hasError' "threshold") $
{ className: intercalate " " H.div
[ "form-group" { className: "form-group__error" }
, (fv.hasError' "size") ? [
"form-group--error" $ H.text "Please enter a `Double` value (eg. 0.5)"
mempty ]
] ]
}
[
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Size" ]
] ]
, ,
-- Clique filter
H.div H.div
{ className: "form-group__field" } { className: intercalate " "
[ "form-group col-5 w-10 text-center mb-0 text-nowrap"
]
}
[ [
B.formInput $ H.div
bindStateKey "size" { className: "" }
[
H.label {} [ H.text "Filter type" ]
]
, ,
R2.when (fv.hasError' "sjze") $ H.div
H.div { className: "form-group__field" }
{ className: "form-group__error" } [
B.formSelect
( bindStateKey "cliqueFilter" )
[ [
H.text "Please enter an `Int` value (eg. 3)" H.option
{ value: show ByThreshold }
[ H.text "By threshold" ]
,
H.option
{ value: show ByNeighbours }
[ H.text "By neighbours" ]
] ]
]
] ]
] ]
] ]
, ]
-- TYPE::MaxClique_ ]
R2.when (state.cliqueType == show MaxClique_) $
,
H.div
{ className: "" }
[
-- Mode Expert (part 2) / TYPE::MaxClique_
R2.when (state.cliqueType == show MaxClique_) $
H.div
{ className: "phylo-config-form__row" }
[
-- Proximity
H.div H.div
{ className: "phylo-config-form__col" } { className: intercalate " "
[ "form-group col-3 w-10 text-center mb-0"
, (fv.hasError' "proximity") ?
"form-group--error" $
mempty
]
}
[ [
-- Size
H.div H.div
{ className: intercalate " " { className: "form-group__label" }
[ "form-group"
, (fv.hasError' "size") ?
"form-group--error" $
mempty
]
}
[ [
H.div H.label {} [ H.text "Proximity" ]
{ className: "form-group__label" } ]
[ ,
H.label {} [ H.text "Size" ] H.div
] { className: "form-group__field" }
[
B.formInput $
{ type: "number"
, step: "0.1"
, min: "0.1"
, max: "1"
} `merge` bindStateKey "proximity"
, ,
H.div R2.when (fv.hasError' "proximity") $
{ className: "form-group__field" } H.div
[ { className: "form-group__error" }
B.formInput $ [
{ type: "number" H.text "Please enter a `Double` value (eg. 0.5)"
} `merge` bindStateKey "size" ]
, ]
R2.when (fv.hasError' "size") $ ]
H.div ,
{ className: "form-group__error" } -- Synchrony
[ H.div
H.text "Please enter an `Int` value (eg. 3)" { className: intercalate " "
] [ "form-group col-4 w-10 text-center mb-0"
, (fv.hasError' "synchrony") ?
"form-group--error" $
mempty
] ]
}
[
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Synchrony" ]
] ]
, ,
-- Treshold
H.div H.div
{ className: intercalate " " { className: "form-group__field" }
[ "form-group"
, (fv.hasError' "threshold") ?
"form-group--error" $
mempty
]
}
[ [
H.div B.formInput $
{ className: "form-group__label" } { type: "number"
[ , step: "0.1"
H.label {} [ H.text "Treshold" ] , min: "0.1"
] , max: "1"
} `merge` bindStateKey "synchrony"
, ,
H.div R2.when (fv.hasError' "synchrony") $
{ className: "form-group__field" } H.div
[ { className: "form-group__error" }
B.formInput $ [
{ type: "number" H.text "Please enter a `Double` value (eg. 0.5)"
} `merge` bindStateKey "threshold" ]
, ]
R2.when (fv.hasError' "threshold") $ ]
H.div ,
{ className: "form-group__error" } -- Minimum branch size
[ H.div
H.text "Please enter a `Double` value (eg. 0.5)" { className: intercalate " "
] [ "form-group col-5 w-10 text-center mb-0 text-nowrap"
, (fv.hasError' "exportFilter") ?
"form-group--error" $
mempty
] ]
}
[
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Minimum branch size" ]
] ]
, ,
-- Clique filter
H.div H.div
{ className: intercalate " " { className: "form-group__field" }
[ "form-group"
]
}
[ [
H.div B.formInput $
{ className: "form-group__label" } { type: "number"
[ } `merge` bindStateKey "exportFilter"
H.label {} [ H.text "Filter type" ]
]
, ,
H.div R2.when (fv.hasError' "exportFilter") $
{ className: "form-group__field" } H.div
[ { className: "form-group__error" }
B.formSelect
( bindStateKey "cliqueFilter" )
[ [
H.option H.text "Please enter a `Double` value (eg. 3.0)"
{ value: show ByThreshold }
[ H.text "By threshold" ]
,
H.option
{ value: show ByNeighbours }
[ H.text "By neighbours" ]
] ]
]
] ]
] ]
]
]
] ]
,
H.text "end new form"
] ]
] ]
] ]
...@@ -691,555 +769,555 @@ component = R.hooksComponent "configForm" cpt where ...@@ -691,555 +769,555 @@ component = R.hooksComponent "configForm" cpt where
let -- let
form = -- form =
H.form -- H.form
{ className: "phylo-config-form" } -- { className: "phylo-config-form" }
[ H.div -- [ H.div
{ className: "phylo-config-form__group" } -- { className: "phylo-config-form__group" }
[ -- [
H.div -- H.div
{ className: "phylo-config-form__row" } -- { className: "phylo-config-form__row" }
[ -- [
H.div -- H.div
{ className: "phylo-config-form__col" } -- { className: "phylo-config-form__col" }
[ -- [
-- Proximity -- -- Proximity
H.div -- H.div
{ className: intercalate " " -- { className: intercalate " "
[ "form-group" -- [ "form-group"
, (fv.hasError' "proximity") ? -- , (fv.hasError' "proximity") ?
"form-group--error" $ -- "form-group--error" $
mempty -- mempty
] -- ]
} -- }
[ -- [
H.div -- H.div
{ className: "form-group__label" } -- { className: "form-group__label" }
[ -- [
H.label {} [ H.text "Proximity" ] -- H.label {} [ H.text "Proximity" ]
] -- ]
, -- ,
H.div -- H.div
{ className: "form-group__field" } -- { className: "form-group__field" }
[ -- [
B.formInput $ -- B.formInput $
{ type: "number" -- { type: "number"
} `merge` bindStateKey "proximity" -- } `merge` bindStateKey "proximity"
, -- ,
R2.when (fv.hasError' "proximity") $ -- R2.when (fv.hasError' "proximity") $
H.div -- H.div
{ className: "form-group__error" } -- { className: "form-group__error" }
[ -- [
H.text "Please enter a `Double` value (eg. 0.5)" -- H.text "Please enter a `Double` value (eg. 0.5)"
] -- ]
] -- ]
] -- ]
] -- ]
, -- ,
H.div -- H.div
{ className: "phylo-config-form__col" } -- { className: "phylo-config-form__col" }
[ -- [
-- Synchrony -- -- Synchrony
H.div -- H.div
{ className: intercalate " " -- { className: intercalate " "
[ "form-group" -- [ "form-group"
, (fv.hasError' "synchrony") ? -- , (fv.hasError' "synchrony") ?
"form-group--error" $ -- "form-group--error" $
mempty -- mempty
] -- ]
} -- }
[ -- [
H.div -- H.div
{ className: "form-group__label" } -- { className: "form-group__label" }
[ -- [
H.label {} [ H.text "Synchrony" ] -- H.label {} [ H.text "Synchrony" ]
] -- ]
, -- ,
H.div -- H.div
{ className: "form-group__field" } -- { className: "form-group__field" }
[ -- [
B.formInput $ -- B.formInput $
{ type: "number" -- { type: "number"
} `merge` bindStateKey "synchrony" -- } `merge` bindStateKey "synchrony"
, -- ,
R2.when (fv.hasError' "synchrony") $ -- R2.when (fv.hasError' "synchrony") $
H.div -- H.div
{ className: "form-group__error" } -- { className: "form-group__error" }
[ -- [
H.text "Please enter a `Double` value (eg. 0.5)" -- H.text "Please enter a `Double` value (eg. 0.5)"
] -- ]
] -- ]
] -- ]
] -- ]
] -- ]
, -- ,
H.div -- H.div
{ className: "phylo-config-form__row" } -- { className: "phylo-config-form__row" }
[ -- [
H.div -- H.div
{ className: "phylo-config-form__col" } -- { className: "phylo-config-form__col" }
[ -- [
-- Quality -- -- Quality
H.div -- H.div
{ className: intercalate " " -- { className: intercalate " "
[ "form-group" -- [ "form-group"
, (fv.hasError' "quality") ? -- , (fv.hasError' "quality") ?
"form-group--error" $ -- "form-group--error" $
mempty -- mempty
] -- ]
} -- }
[ -- [
H.div -- H.div
{ className: "form-group__label" } -- { className: "form-group__label" }
[ -- [
H.label {} [ H.text "Quality" ] -- H.label {} [ H.text "Quality" ]
] -- ]
, -- ,
H.div -- H.div
{ className: "form-group__field" } -- { className: "form-group__field" }
[ -- [
B.formInput $ -- B.formInput $
{ type: "number" -- { type: "number"
, step: "0.1" -- , step: "0.1"
, min: "0" -- , min: "0"
, max: "1" -- , max: "1"
} `merge` bindStateKey "quality" -- } `merge` bindStateKey "quality"
, -- ,
R2.when (fv.hasError' "quality") $ -- R2.when (fv.hasError' "quality") $
H.div -- H.div
{ className: "form-group__error" } -- { className: "form-group__error" }
[ -- [
H.text "Please enter a `Double` value (eg. 0.5)" -- H.text "Please enter a `Double` value (eg. 0.5)"
] -- ]
] -- ]
] -- ]
] -- ]
, -- ,
H.div -- H.div
{ className: "phylo-config-form__col" } -- { className: "phylo-config-form__col" }
[ -- [
-- Export filter -- -- Export filter
H.div -- H.div
{ className: intercalate " " -- { className: intercalate " "
[ "form-group" -- [ "form-group"
, (fv.hasError' "exportFilter") ? -- , (fv.hasError' "exportFilter") ?
"form-group--error" $ -- "form-group--error" $
mempty -- mempty
] -- ]
} -- }
[ -- [
H.div -- H.div
{ className: "form-group__label" } -- { className: "form-group__label" }
[ -- [
H.label {} [ H.text "Minimum branch size" ] -- H.label {} [ H.text "Minimum branch size" ]
] -- ]
, -- ,
H.div -- H.div
{ className: "form-group__field" } -- { className: "form-group__field" }
[ -- [
B.formInput $ -- B.formInput $
{ type: "number" -- { type: "number"
} `merge` bindStateKey "exportFilter" -- } `merge` bindStateKey "exportFilter"
, -- ,
R2.when (fv.hasError' "exportFilter") $ -- R2.when (fv.hasError' "exportFilter") $
H.div -- H.div
{ className: "form-group__error" } -- { className: "form-group__error" }
[ -- [
H.text "Please enter a `Double` value (eg. 3.0)" -- H.text "Please enter a `Double` value (eg. 3.0)"
] -- ]
] -- ]
] -- ]
] -- ]
] -- ]
] -- ]
, -- ,
-- Time Unit -- -- Time Unit
B.fieldset -- B.fieldset
{ className: "phylo-config-form__group" -- { className: "phylo-config-form__group"
, titleSlot: H.text "Time unit" -- , titleSlot: H.text "Time unit"
} -- }
[ -- [
H.div -- H.div
{ className: "phylo-config-form__row" } -- { className: "phylo-config-form__row" }
[ -- [
H.div -- H.div
{ className: "phylo-config-form__col" } -- { className: "phylo-config-form__col" }
[ -- [
-- Granularity -- -- Granularity
H.div -- H.div
{ className: intercalate " " -- { className: intercalate " "
[ "form-group" -- [ "form-group"
] -- ]
} -- }
[ -- [
H.div -- H.div
{ className: "form-group__label" } -- { className: "form-group__label" }
[ -- [
H.label {} [ H.text "Granularity" ] -- H.label {} [ H.text "Granularity" ]
] -- ]
, -- ,
H.div -- H.div
{ className: "form-group__field" } -- { className: "form-group__field" }
[ -- [
B.formSelect -- B.formSelect
(bindStateKey "granularity") -- (bindStateKey "granularity")
[ -- [
H.option -- H.option
{ value: show Year_ } -- { value: show Year_ }
[ H.text "Year" ] -- [ H.text "Year" ]
, -- ,
H.option -- H.option
{ value: show Month_ } -- { value: show Month_ }
[ H.text "Month" ] -- [ H.text "Month" ]
, -- ,
H.option -- H.option
{ value: show Week_ } -- { value: show Week_ }
[ H.text "Week" ] -- [ H.text "Week" ]
, -- ,
H.option -- H.option
{ value: show Day_ } -- { value: show Day_ }
[ H.text "Day" ] -- [ H.text "Day" ]
] -- ]
] -- ]
] -- ]
] -- ]
, -- ,
H.div -- H.div
{ className: "phylo-config-form__col" } -- { className: "phylo-config-form__col" }
[ -- [
-- Period -- -- Period
H.div -- H.div
{ className: intercalate " " -- { className: intercalate " "
[ "form-group" -- [ "form-group"
, (fv.hasError' "period") ? -- , (fv.hasError' "period") ?
"form-group--error" $ -- "form-group--error" $
mempty -- mempty
] -- ]
} -- }
[ -- [
H.div -- H.div
{ className: "form-group__label" } -- { className: "form-group__label" }
[ -- [
H.label {} [ H.text "Period" ] -- H.label {} [ H.text "Period" ]
] -- ]
, -- ,
H.div -- H.div
{ className: "form-group__field" } -- { className: "form-group__field" }
[ -- [
B.formInput $ -- B.formInput $
{ type: "number" -- { type: "number"
} `merge` bindStateKey "period" -- } `merge` bindStateKey "period"
, -- ,
R2.when (fv.hasError' "period") $ -- R2.when (fv.hasError' "period") $
H.div -- H.div
{ className: "form-group__error" } -- { className: "form-group__error" }
[ -- [
H.text "Please enter an `Int` value (eg. 3)" -- H.text "Please enter an `Int` value (eg. 3)"
] -- ]
] -- ]
] -- ]
, -- ,
-- Step -- -- Step
H.div -- H.div
{ className: intercalate " " -- { className: intercalate " "
[ "form-group" -- [ "form-group"
, (fv.hasError' "step") ? -- , (fv.hasError' "step") ?
"form-group--error" $ -- "form-group--error" $
mempty -- mempty
] -- ]
} -- }
[ -- [
H.div -- H.div
{ className: "form-group__label" } -- { className: "form-group__label" }
[ -- [
H.label {} [ H.text "Step" ] -- H.label {} [ H.text "Step" ]
] -- ]
, -- ,
H.div -- H.div
{ className: "form-group__field" } -- { className: "form-group__field" }
[ -- [
B.formInput $ -- B.formInput $
{ type: "number" -- { type: "number"
} `merge` bindStateKey "step" -- } `merge` bindStateKey "step"
, -- ,
R2.when (fv.hasError' "step") $ -- R2.when (fv.hasError' "step") $
H.div -- H.div
{ className: "form-group__error" } -- { className: "form-group__error" }
[ -- [
H.text "Please enter an `Int` value (eg. 3)" -- H.text "Please enter an `Int` value (eg. 3)"
] -- ]
] -- ]
] -- ]
, -- ,
-- Matching frame -- -- Matching frame
H.div -- H.div
{ className: intercalate " " -- { className: intercalate " "
[ "form-group" -- [ "form-group"
, (fv.hasError' "matchingFrame") ? -- , (fv.hasError' "matchingFrame") ?
"form-group--error" $ -- "form-group--error" $
mempty -- mempty
] -- ]
} -- }
[ -- [
H.div -- H.div
{ className: "form-group__label" } -- { className: "form-group__label" }
[ -- [
H.label {} [ H.text "Matching frame" ] -- H.label {} [ H.text "Matching frame" ]
] -- ]
, -- ,
H.div -- H.div
{ className: "form-group__field" } -- { className: "form-group__field" }
[ -- [
B.formInput $ -- B.formInput $
{ type: "number" -- { type: "number"
} `merge` bindStateKey "matchingFrame" -- } `merge` bindStateKey "matchingFrame"
, -- ,
R2.when (fv.hasError' "matchingFrame") $ -- R2.when (fv.hasError' "matchingFrame") $
H.div -- H.div
{ className: "form-group__error" } -- { className: "form-group__error" }
[ -- [
H.text "Please enter an `Int` value (eg. 3)" -- H.text "Please enter an `Int` value (eg. 3)"
] -- ]
] -- ]
] -- ]
] -- ]
] -- ]
] -- ]
, -- ,
-- Clique -- -- Clique
B.fieldset -- B.fieldset
{ className: "phylo-config-form__group" -- { className: "phylo-config-form__group"
, titleSlot: H.text "Clique algorithm" -- , titleSlot: H.text "Clique algorithm"
} -- }
[ -- [
H.div -- H.div
{ className: "phylo-config-form__row" } -- { className: "phylo-config-form__row" }
[ -- [
H.div -- H.div
{ className: "phylo-config-form__col" } -- { className: "phylo-config-form__col" }
[ -- [
-- Clique type -- -- Clique type
H.div -- H.div
{ className: intercalate " " -- { className: intercalate " "
[ "form-group" -- [ "form-group"
] -- ]
} -- }
[ -- [
H.div -- H.div
{ className: "form-group__label" } -- { className: "form-group__label" }
[ -- [
H.label {} [ H.text "Type" ] -- H.label {} [ H.text "Type" ]
] -- ]
, -- ,
H.div -- H.div
{ className: "form-group__field" } -- { className: "form-group__field" }
[ -- [
H.div -- H.div
{ className: "btn-group" -- { className: "btn-group"
, role: "group" -- , role: "group"
} -- }
[ -- [
B.button -- B.button
{ callback: \_ -> setter stateBox "cliqueType" $ show FIS_ -- { callback: \_ -> setter stateBox "cliqueType" $ show FIS_
-- , variant: OutlinedButtonVariant Secondary -- -- , variant: OutlinedButtonVariant Secondary
, variant: ButtonVariant Light -- , variant: ButtonVariant Light
, className: state.cliqueType == show FIS_ ? -- , className: state.cliqueType == show FIS_ ?
"active" $ -- "active" $
"" -- ""
} -- }
[ -- [
H.text "FIS" -- H.text "FIS"
] -- ]
, -- ,
B.button -- B.button
{ callback: \_ -> setter stateBox "cliqueType" $ show MaxClique_ -- { callback: \_ -> setter stateBox "cliqueType" $ show MaxClique_
-- , variant: OutlinedButtonVariant Secondary -- -- , variant: OutlinedButtonVariant Secondary
, variant: ButtonVariant Light -- , variant: ButtonVariant Light
, className: state.cliqueType == show MaxClique_ ? -- , className: state.cliqueType == show MaxClique_ ?
"active" $ -- "active" $
"" -- ""
} -- }
[ -- [
H.text "MaxClique" -- H.text "MaxClique"
] -- ]
] -- ]
] -- ]
] -- ]
] -- ]
, -- ,
-- TYPE::FIS_ -- -- TYPE::FIS_
R2.when (state.cliqueType == show FIS_) $ -- R2.when (state.cliqueType == show FIS_) $
H.div -- H.div
{ className: "phylo-config-form__col" } -- { className: "phylo-config-form__col" }
[ -- [
-- Support -- -- Support
H.div -- H.div
{ className: intercalate " " -- { className: intercalate " "
[ "form-group" -- [ "form-group"
, (fv.hasError' "support") ? -- , (fv.hasError' "support") ?
"form-group--error" $ -- "form-group--error" $
mempty -- mempty
] -- ]
} -- }
[ -- [
H.div -- H.div
{ className: "form-group__label" } -- { className: "form-group__label" }
[ -- [
H.label {} [ H.text "Support" ] -- H.label {} [ H.text "Support" ]
] -- ]
, -- ,
H.div -- H.div
{ className: "form-group__field" } -- { className: "form-group__field" }
[ -- [
B.formInput $ -- B.formInput $
bindStateKey "support" -- bindStateKey "support"
, -- ,
R2.when (fv.hasError' "support") $ -- R2.when (fv.hasError' "support") $
H.div -- H.div
{ className: "form-group__error" } -- { className: "form-group__error" }
[ -- [
H.text "Please enter an `Int` value (eg. 3)" -- H.text "Please enter an `Int` value (eg. 3)"
] -- ]
] -- ]
] -- ]
, -- ,
-- Size -- -- Size
H.div -- H.div
{ className: intercalate " " -- { className: intercalate " "
[ "form-group" -- [ "form-group"
, (fv.hasError' "size") ? -- , (fv.hasError' "size") ?
"form-group--error" $ -- "form-group--error" $
mempty -- mempty
] -- ]
} -- }
[ -- [
H.div -- H.div
{ className: "form-group__label" } -- { className: "form-group__label" }
[ -- [
H.label {} [ H.text "Size" ] -- H.label {} [ H.text "Size" ]
] -- ]
, -- ,
H.div -- H.div
{ className: "form-group__field" } -- { className: "form-group__field" }
[ -- [
B.formInput $ -- B.formInput $
bindStateKey "size" -- bindStateKey "size"
, -- ,
R2.when (fv.hasError' "sjze") $ -- R2.when (fv.hasError' "size") $
H.div -- H.div
{ className: "form-group__error" } -- { className: "form-group__error" }
[ -- [
H.text "Please enter an `Int` value (eg. 3)" -- H.text "Please enter an `Int` value (eg. 3)"
] -- ]
] -- ]
] -- ]
] -- ]
, -- ,
-- TYPE::MaxClique_ -- -- TYPE::MaxClique_
R2.when (state.cliqueType == show MaxClique_) $ -- R2.when (state.cliqueType == show MaxClique_) $
H.div -- H.div
{ className: "phylo-config-form__col" } -- { className: "phylo-config-form__col" }
[ -- [
-- Size -- -- Size
H.div -- H.div
{ className: intercalate " " -- { className: intercalate " "
[ "form-group" -- [ "form-group"
, (fv.hasError' "size") ? -- , (fv.hasError' "size") ?
"form-group--error" $ -- "form-group--error" $
mempty -- mempty
] -- ]
} -- }
[ -- [
H.div -- H.div
{ className: "form-group__label" } -- { className: "form-group__label" }
[ -- [
H.label {} [ H.text "Size" ] -- H.label {} [ H.text "Size" ]
] -- ]
, -- ,
H.div -- H.div
{ className: "form-group__field" } -- { className: "form-group__field" }
[ -- [
B.formInput $ -- B.formInput $
{ type: "number" -- { type: "number"
} `merge` bindStateKey "size" -- } `merge` bindStateKey "size"
, -- ,
R2.when (fv.hasError' "size") $ -- R2.when (fv.hasError' "size") $
H.div -- H.div
{ className: "form-group__error" } -- { className: "form-group__error" }
[ -- [
H.text "Please enter an `Int` value (eg. 3)" -- H.text "Please enter an `Int` value (eg. 3)"
] -- ]
] -- ]
] -- ]
, -- ,
-- Treshold -- -- Treshold
H.div -- H.div
{ className: intercalate " " -- { className: intercalate " "
[ "form-group" -- [ "form-group"
, (fv.hasError' "threshold") ? -- , (fv.hasError' "threshold") ?
"form-group--error" $ -- "form-group--error" $
mempty -- mempty
] -- ]
} -- }
[ -- [
H.div -- H.div
{ className: "form-group__label" } -- { className: "form-group__label" }
[ -- [
H.label {} [ H.text "Treshold" ] -- H.label {} [ H.text "Treshold" ]
] -- ]
, -- ,
H.div -- H.div
{ className: "form-group__field" } -- { className: "form-group__field" }
[ -- [
B.formInput $ -- B.formInput $
{ type: "number" -- { type: "number"
} `merge` bindStateKey "threshold" -- } `merge` bindStateKey "threshold"
, -- ,
R2.when (fv.hasError' "threshold") $ -- R2.when (fv.hasError' "threshold") $
H.div -- H.div
{ className: "form-group__error" } -- { className: "form-group__error" }
[ -- [
H.text "Please enter a `Double` value (eg. 0.5)" -- H.text "Please enter a `Double` value (eg. 0.5)"
] -- ]
] -- ]
] -- ]
, -- ,
-- Clique filter -- -- Clique filter
H.div -- H.div
{ className: intercalate " " -- { className: intercalate " "
[ "form-group" -- [ "form-group"
] -- ]
} -- }
[ -- [
H.div -- H.div
{ className: "form-group__label" } -- { className: "form-group__label" }
[ -- [
H.label {} [ H.text "Filter type" ] -- H.label {} [ H.text "Filter type" ]
] -- ]
, -- ,
H.div -- H.div
{ className: "form-group__field" } -- { className: "form-group__field" }
[ -- [
B.formSelect -- B.formSelect
( bindStateKey "cliqueFilter" ) -- ( bindStateKey "cliqueFilter" )
[ -- [
H.option -- H.option
{ value: show ByThreshold } -- { value: show ByThreshold }
[ H.text "By threshold" ] -- [ H.text "By threshold" ]
, -- ,
H.option -- H.option
{ value: show ByNeighbours } -- { value: show ByNeighbours }
[ H.text "By neighbours" ] -- [ H.text "By neighbours" ]
] -- ]
] -- ]
] -- ]
] -- ]
] -- ]
] -- ]
] -- ]
let submit = let submit =
H.div { className: "phylo-config-form__submit" } H.div { className: "phylo-config-form__submit" }
...@@ -1261,7 +1339,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -1261,7 +1339,7 @@ component = R.hooksComponent "configForm" cpt where
pure $ H.div {} [ modeChoice pure $ H.div {} [ modeChoice
, R2.when (state.defaultMode == show false) formAdvanced , R2.when (state.defaultMode == show false) formAdvanced
, R2.when (state.defaultMode == show false) form -- , R2.when (state.defaultMode == show false) form
, submit , submit
] ]
...@@ -1306,10 +1384,7 @@ formValidation :: Record FormData -> Effect VForm ...@@ -1306,10 +1384,7 @@ formValidation :: Record FormData -> Effect VForm
formValidation r = foldl append mempty rules formValidation r = foldl append mempty rules
where where
rules rules
= [ FV.number "proximity" r.proximity = [ FV.number "quality" r.quality
, FV.number "synchrony" r.synchrony
, FV.number "quality" r.quality
, FV.number "exportFilter" r.exportFilter
-- Time unit -- Time unit
, FV.int "period" r.period , FV.int "period" r.period
, FV.int "step" r.step , FV.int "step" r.step
...@@ -1318,10 +1393,15 @@ formValidation r = foldl append mempty rules ...@@ -1318,10 +1393,15 @@ formValidation r = foldl append mempty rules
-- Clique -- Clique
<> if (r.cliqueType == show FIS_) <> if (r.cliqueType == show FIS_)
then then
-- FIS_ (Basic mode)
[ FV.int "support" r.support [ FV.int "support" r.support
, FV.int "size" r.size , FV.int "size" r.size
] ]
else else
-- MaxClique_ (Expert mode)
[ FV.int "size" r.size [ FV.int "size" r.size
, FV.number "threshold" r.threshold , FV.number "threshold" r.threshold
, FV.number "proximity" r.proximity
, FV.number "synchrony" r.synchrony
, FV.number "exportFilter" r.exportFilter
] ]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment