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
Show 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,98 +382,24 @@ component = R.hooksComponent "configForm" cpt where ...@@ -375,98 +382,24 @@ component = R.hooksComponent "configForm" cpt where
] ]
, ,
B.fieldset
{ className: "phylo-config-form__group"
, titleSlot: H.text "Clusterisation algorythm"
}
[
-- Support
H.div
{ className: intercalate " "
[ "form-group"
, (fv.hasError' "support") ?
"form-group--error" $
mempty
]
}
[
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Support" ]
]
,
H.div
{ className: "form-group__field" }
[
B.formInput $
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
{ className: intercalate " "
[ "form-group"
, (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)"
]
]
]
]
, -- Clusterisation algo
-- Clique
B.fieldset B.fieldset
{ className: "phylo-config-form__group" { className: "phylo-config-form__group mx-0"
, titleSlot: H.text "Clique algorithm" , titleSlot: H.text "Clusterisation algorithm"
} }
[ [
H.div -- Mode
{ className: "phylo-config-form__row" }
[
H.div
{ className: "phylo-config-form__col" }
[
-- Clique type
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group text-center mb-2"
] ]
} }
[ [
H.div H.div
{ className: "form-group__label" } { className: "form-group__label" }
[ [
H.label {} [ H.text "Type" ] H.label {} [ H.text "Mode" ]
] ]
, ,
H.div H.div
...@@ -486,7 +419,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -486,7 +419,7 @@ component = R.hooksComponent "configForm" cpt where
"" ""
} }
[ [
H.text "FIS" H.text "Basic"
] ]
, ,
B.button B.button
...@@ -498,23 +431,35 @@ component = R.hooksComponent "configForm" cpt where ...@@ -498,23 +431,35 @@ component = R.hooksComponent "configForm" cpt where
"" ""
} }
[ [
H.text "MaxClique" H.text "Expert"
]
] ]
] ]
] ]
] ]
, ,
-- TYPE::FIS_ H.div
{ className: "" }
[
-- Mode Basic / TYPE::FIS_
R2.when (state.cliqueType == show FIS_) $ R2.when (state.cliqueType == show FIS_) $
H.div { className: "clustrisation-algorythm-basic form-group" }
[
-- Title FIS
H.div
{ className: "form-group__label text-center" }
[
H.label {} [ H.text "FIS" ]
]
,
H.div H.div
{ className: "phylo-config-form__col" } { className: "phylo-config-form__row justify-content-center" }
[ [
-- Support -- Support
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group col-4 w-10 text-center mb-0"
, (fv.hasError' "support") ? , (fv.hasError' "support") ?
"form-group--error" $ "form-group--error" $
mempty mempty
...@@ -522,7 +467,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -522,7 +467,7 @@ component = R.hooksComponent "configForm" cpt where
} }
[ [
H.div H.div
{ className: "form-group__label" } { className: "" }
[ [
H.label {} [ H.text "Support" ] H.label {} [ H.text "Support" ]
] ]
...@@ -531,7 +476,8 @@ component = R.hooksComponent "configForm" cpt where ...@@ -531,7 +476,8 @@ component = R.hooksComponent "configForm" cpt where
{ className: "form-group__field" } { className: "form-group__field" }
[ [
B.formInput $ B.formInput $
bindStateKey "support" { type: "number"
} `merge` bindStateKey "support"
, ,
R2.when (fv.hasError' "support") $ R2.when (fv.hasError' "support") $
H.div H.div
...@@ -545,7 +491,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -545,7 +491,7 @@ component = R.hooksComponent "configForm" cpt where
-- Size -- Size
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group col-4 w-10 text-center mb-0"
, (fv.hasError' "size") ? , (fv.hasError' "size") ?
"form-group--error" $ "form-group--error" $
mempty mempty
...@@ -553,7 +499,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -553,7 +499,7 @@ component = R.hooksComponent "configForm" cpt where
} }
[ [
H.div H.div
{ className: "form-group__label" } { className: "" }
[ [
H.label {} [ H.text "Size" ] H.label {} [ H.text "Size" ]
] ]
...@@ -562,9 +508,10 @@ component = R.hooksComponent "configForm" cpt where ...@@ -562,9 +508,10 @@ component = R.hooksComponent "configForm" cpt where
{ className: "form-group__field" } { className: "form-group__field" }
[ [
B.formInput $ B.formInput $
bindStateKey "size" { type: "number"
} `merge` bindStateKey "size"
, ,
R2.when (fv.hasError' "sjze") $ R2.when (fv.hasError' "size") $
H.div H.div
{ className: "form-group__error" } { className: "form-group__error" }
[ [
...@@ -573,17 +520,31 @@ component = R.hooksComponent "configForm" cpt where ...@@ -573,17 +520,31 @@ component = R.hooksComponent "configForm" cpt where
] ]
] ]
] ]
]
]
, ,
-- TYPE::MaxClique_ H.div
{ className: "" }
[
-- Mode Expert (part 1) / TYPE::MaxClique_
R2.when (state.cliqueType == show MaxClique_) $ R2.when (state.cliqueType == show MaxClique_) $
H.div { className: "clustrisation-algorythm-expert form-group" }
[
-- Title MaxClique
H.div
{ className: "form-group__label text-center" }
[
H.label {} [ H.text "MaxClique" ]
]
,
H.div H.div
{ className: "phylo-config-form__col" } { className: "phylo-config-form__row justify-content-center" }
[ [
-- Size -- Size
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group col-3 w-10 text-center mb-0"
, (fv.hasError' "size") ? , (fv.hasError' "size") ?
"form-group--error" $ "form-group--error" $
mempty mempty
...@@ -591,7 +552,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -591,7 +552,7 @@ component = R.hooksComponent "configForm" cpt where
} }
[ [
H.div H.div
{ className: "form-group__label" } { className: "" }
[ [
H.label {} [ H.text "Size" ] H.label {} [ H.text "Size" ]
] ]
...@@ -601,6 +562,9 @@ component = R.hooksComponent "configForm" cpt where ...@@ -601,6 +562,9 @@ component = R.hooksComponent "configForm" cpt where
[ [
B.formInput $ B.formInput $
{ type: "number" { type: "number"
, step: "1"
, min: "0"
, max: "10"
} `merge` bindStateKey "size" } `merge` bindStateKey "size"
, ,
R2.when (fv.hasError' "size") $ R2.when (fv.hasError' "size") $
...@@ -615,7 +579,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -615,7 +579,7 @@ component = R.hooksComponent "configForm" cpt where
-- Treshold -- Treshold
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group col-4 w-10 text-center mb-0"
, (fv.hasError' "threshold") ? , (fv.hasError' "threshold") ?
"form-group--error" $ "form-group--error" $
mempty mempty
...@@ -623,7 +587,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -623,7 +587,7 @@ component = R.hooksComponent "configForm" cpt where
} }
[ [
H.div H.div
{ className: "form-group__label" } { className: "" }
[ [
H.label {} [ H.text "Treshold" ] H.label {} [ H.text "Treshold" ]
] ]
...@@ -633,6 +597,9 @@ component = R.hooksComponent "configForm" cpt where ...@@ -633,6 +597,9 @@ component = R.hooksComponent "configForm" cpt where
[ [
B.formInput $ B.formInput $
{ type: "number" { type: "number"
, step: "0.0001"
, min: "0.0001"
, max: "1"
} `merge` bindStateKey "threshold" } `merge` bindStateKey "threshold"
, ,
R2.when (fv.hasError' "threshold") $ R2.when (fv.hasError' "threshold") $
...@@ -647,12 +614,12 @@ component = R.hooksComponent "configForm" cpt where ...@@ -647,12 +614,12 @@ component = R.hooksComponent "configForm" cpt where
-- Clique filter -- Clique filter
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group col-5 w-10 text-center mb-0 text-nowrap"
] ]
} }
[ [
H.div H.div
{ className: "form-group__label" } { className: "" }
[ [
H.label {} [ H.text "Filter type" ] H.label {} [ H.text "Filter type" ]
] ]
...@@ -676,38 +643,23 @@ component = R.hooksComponent "configForm" cpt where ...@@ -676,38 +643,23 @@ component = R.hooksComponent "configForm" cpt where
] ]
] ]
] ]
,
H.text "end new form"
]
]
]
] ]
,
let
form =
H.form
{ className: "phylo-config-form" }
[ H.div
{ className: "phylo-config-form__group" }
[
H.div H.div
{ className: "phylo-config-form__row" } { className: "" }
[ [
-- Mode Expert (part 2) / TYPE::MaxClique_
R2.when (state.cliqueType == show MaxClique_) $
H.div H.div
{ className: "phylo-config-form__col" } { className: "phylo-config-form__row" }
[ [
-- Proximity -- Proximity
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group col-3 w-10 text-center mb-0"
, (fv.hasError' "proximity") ? , (fv.hasError' "proximity") ?
"form-group--error" $ "form-group--error" $
mempty mempty
...@@ -725,6 +677,9 @@ component = R.hooksComponent "configForm" cpt where ...@@ -725,6 +677,9 @@ component = R.hooksComponent "configForm" cpt where
[ [
B.formInput $ B.formInput $
{ type: "number" { type: "number"
, step: "0.1"
, min: "0.1"
, max: "1"
} `merge` bindStateKey "proximity" } `merge` bindStateKey "proximity"
, ,
R2.when (fv.hasError' "proximity") $ R2.when (fv.hasError' "proximity") $
...@@ -735,15 +690,11 @@ component = R.hooksComponent "configForm" cpt where ...@@ -735,15 +690,11 @@ component = R.hooksComponent "configForm" cpt where
] ]
] ]
] ]
]
, ,
H.div
{ className: "phylo-config-form__col" }
[
-- Synchrony -- Synchrony
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group col-4 w-10 text-center mb-0"
, (fv.hasError' "synchrony") ? , (fv.hasError' "synchrony") ?
"form-group--error" $ "form-group--error" $
mempty mempty
...@@ -755,46 +706,6 @@ component = R.hooksComponent "configForm" cpt where ...@@ -755,46 +706,6 @@ component = R.hooksComponent "configForm" cpt where
[ [
H.label {} [ H.text "Synchrony" ] H.label {} [ H.text "Synchrony" ]
] ]
,
H.div
{ className: "form-group__field" }
[
B.formInput $
{ type: "number"
} `merge` bindStateKey "synchrony"
,
R2.when (fv.hasError' "synchrony") $
H.div
{ className: "form-group__error" }
[
H.text "Please enter a `Double` value (eg. 0.5)"
]
]
]
]
]
,
H.div
{ className: "phylo-config-form__row" }
[
H.div
{ className: "phylo-config-form__col" }
[
-- Quality
H.div
{ className: intercalate " "
[ "form-group"
, (fv.hasError' "quality") ?
"form-group--error" $
mempty
]
}
[
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Quality" ]
]
, ,
H.div H.div
{ className: "form-group__field" } { className: "form-group__field" }
...@@ -802,11 +713,11 @@ component = R.hooksComponent "configForm" cpt where ...@@ -802,11 +713,11 @@ component = R.hooksComponent "configForm" cpt where
B.formInput $ B.formInput $
{ type: "number" { type: "number"
, step: "0.1" , step: "0.1"
, min: "0" , min: "0.1"
, max: "1" , max: "1"
} `merge` bindStateKey "quality" } `merge` bindStateKey "synchrony"
, ,
R2.when (fv.hasError' "quality") $ R2.when (fv.hasError' "synchrony") $
H.div H.div
{ className: "form-group__error" } { className: "form-group__error" }
[ [
...@@ -814,15 +725,11 @@ component = R.hooksComponent "configForm" cpt where ...@@ -814,15 +725,11 @@ component = R.hooksComponent "configForm" cpt where
] ]
] ]
] ]
]
, ,
H.div -- Minimum branch size
{ className: "phylo-config-form__col" }
[
-- Export filter
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group col-5 w-10 text-center mb-0 text-nowrap"
, (fv.hasError' "exportFilter") ? , (fv.hasError' "exportFilter") ?
"form-group--error" $ "form-group--error" $
mempty mempty
...@@ -850,396 +757,567 @@ component = R.hooksComponent "configForm" cpt where ...@@ -850,396 +757,567 @@ component = R.hooksComponent "configForm" cpt where
] ]
] ]
] ]
]
]
]
,
-- Time Unit
B.fieldset
{ 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
{ className: intercalate " "
[ "form-group"
]
}
[
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Granularity" ]
]
,
H.div
{ className: "form-group__field" }
[
B.formSelect
(bindStateKey "granularity")
[
H.option
{ value: show Year_ }
[ H.text "Year" ]
,
H.option
{ value: show Month_ }
[ H.text "Month" ]
,
H.option
{ value: show Week_ }
[ H.text "Week" ]
,
H.option
{ value: show Day_ }
[ H.text "Day" ]
] ]
] ]
] ]
] ]
,
H.div
{ className: "phylo-config-form__col" }
[
-- Period
H.div
{ className: intercalate " "
[ "form-group"
, (fv.hasError' "period") ?
"form-group--error" $
mempty
] ]
}
[
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Period" ]
] ]
,
H.div
{ className: "form-group__field" }
[
B.formInput $
{ type: "number"
} `merge` bindStateKey "period"
,
R2.when (fv.hasError' "period") $
H.div
{ className: "form-group__error" }
[
H.text "Please enter an `Int` value (eg. 3)"
]
]
]
,
-- Step
H.div
{ className: intercalate " "
[ "form-group"
, (fv.hasError' "step") ?
"form-group--error" $
mempty
]
}
[
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Step" ]
]
,
H.div
{ className: "form-group__field" }
[
B.formInput $
{ type: "number"
} `merge` bindStateKey "step"
,
R2.when (fv.hasError' "step") $
H.div
{ className: "form-group__error" }
[
H.text "Please enter an `Int` value (eg. 3)"
]
]
]
,
-- Matching frame
H.div
{ className: intercalate " "
[ "form-group"
, (fv.hasError' "matchingFrame") ?
"form-group--error" $
mempty
]
}
[
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Matching frame" ]
]
,
H.div
{ className: "form-group__field" }
[
B.formInput $
{ type: "number"
} `merge` bindStateKey "matchingFrame"
,
R2.when (fv.hasError' "matchingFrame") $
H.div
{ className: "form-group__error" }
[
H.text "Please enter an `Int` value (eg. 3)"
]
]
]
]
]
]
,
-- Clique
B.fieldset
{ 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
{ className: intercalate " "
[ "form-group"
]
}
[
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Type" ]
]
,
H.div
{ className: "form-group__field" }
[
H.div
{ className: "btn-group"
, role: "group"
}
[
B.button
{ callback: \_ -> setter stateBox "cliqueType" $ show FIS_
-- , variant: OutlinedButtonVariant Secondary
, variant: ButtonVariant Light
, className: state.cliqueType == show FIS_ ?
"active" $
""
}
[
H.text "FIS"
]
,
B.button
{ callback: \_ -> setter stateBox "cliqueType" $ show MaxClique_
-- , variant: OutlinedButtonVariant Secondary
, variant: ButtonVariant Light
, className: state.cliqueType == show MaxClique_ ?
"active" $
""
}
[
H.text "MaxClique"
]
]
]
]
]
,
-- TYPE::FIS_
R2.when (state.cliqueType == show FIS_) $
H.div
{ className: "phylo-config-form__col" }
[
-- Support
H.div
{ className: intercalate " "
[ "form-group"
, (fv.hasError' "support") ?
"form-group--error" $
mempty
]
}
[
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Support" ]
]
,
H.div
{ className: "form-group__field" }
[
B.formInput $
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
{ className: intercalate " "
[ "form-group"
, (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)"
]
]
]
]
,
-- TYPE::MaxClique_
R2.when (state.cliqueType == show MaxClique_) $
H.div
{ className: "phylo-config-form__col" }
[
-- Size -- let
H.div -- form =
{ className: intercalate " " -- H.form
[ "form-group" -- { className: "phylo-config-form" }
, (fv.hasError' "size") ? -- [ H.div
"form-group--error" $ -- { className: "phylo-config-form__group" }
mempty -- [
] -- H.div
} -- { className: "phylo-config-form__row" }
[ -- [
H.div -- H.div
{ className: "form-group__label" } -- { className: "phylo-config-form__col" }
[ -- [
H.label {} [ H.text "Size" ] -- -- Proximity
] -- H.div
, -- { className: intercalate " "
H.div -- [ "form-group"
{ className: "form-group__field" } -- , (fv.hasError' "proximity") ?
[ -- "form-group--error" $
B.formInput $ -- mempty
{ type: "number" -- ]
} `merge` bindStateKey "size" -- }
, -- [
R2.when (fv.hasError' "size") $ -- H.div
H.div -- { className: "form-group__label" }
{ className: "form-group__error" } -- [
[ -- H.label {} [ H.text "Proximity" ]
H.text "Please enter an `Int` value (eg. 3)" -- ]
] -- ,
] -- H.div
] -- { className: "form-group__field" }
, -- [
-- Treshold -- B.formInput $
H.div -- { type: "number"
{ className: intercalate " " -- } `merge` bindStateKey "proximity"
[ "form-group" -- ,
, (fv.hasError' "threshold") ? -- R2.when (fv.hasError' "proximity") $
"form-group--error" $ -- H.div
mempty -- { className: "form-group__error" }
] -- [
} -- H.text "Please enter a `Double` value (eg. 0.5)"
[ -- ]
H.div -- ]
{ className: "form-group__label" } -- ]
[ -- ]
H.label {} [ H.text "Treshold" ] -- ,
] -- H.div
, -- { className: "phylo-config-form__col" }
H.div -- [
{ className: "form-group__field" } -- -- Synchrony
[ -- H.div
B.formInput $ -- { className: intercalate " "
{ type: "number" -- [ "form-group"
} `merge` bindStateKey "threshold" -- , (fv.hasError' "synchrony") ?
, -- "form-group--error" $
R2.when (fv.hasError' "threshold") $ -- mempty
H.div -- ]
{ className: "form-group__error" } -- }
[ -- [
H.text "Please enter a `Double` value (eg. 0.5)" -- H.div
] -- { className: "form-group__label" }
] -- [
] -- H.label {} [ H.text "Synchrony" ]
, -- ]
-- Clique filter -- ,
H.div -- H.div
{ className: intercalate " " -- { className: "form-group__field" }
[ "form-group" -- [
] -- B.formInput $
} -- { type: "number"
[ -- } `merge` bindStateKey "synchrony"
H.div -- ,
{ className: "form-group__label" } -- R2.when (fv.hasError' "synchrony") $
[ -- H.div
H.label {} [ H.text "Filter type" ] -- { className: "form-group__error" }
] -- [
, -- H.text "Please enter a `Double` value (eg. 0.5)"
H.div -- ]
{ className: "form-group__field" } -- ]
[ -- ]
B.formSelect -- ]
( bindStateKey "cliqueFilter" ) -- ]
[ -- ,
H.option -- H.div
{ value: show ByThreshold } -- { className: "phylo-config-form__row" }
[ H.text "By threshold" ] -- [
, -- H.div
H.option -- { className: "phylo-config-form__col" }
{ value: show ByNeighbours } -- [
[ H.text "By neighbours" ] -- -- Quality
] -- H.div
] -- { className: intercalate " "
] -- [ "form-group"
] -- , (fv.hasError' "quality") ?
] -- "form-group--error" $
] -- mempty
] -- ]
-- }
-- [
-- H.div
-- { className: "form-group__label" }
-- [
-- H.label {} [ H.text "Quality" ]
-- ]
-- ,
-- H.div
-- { className: "form-group__field" }
-- [
-- B.formInput $
-- { type: "number"
-- , step: "0.1"
-- , min: "0"
-- , max: "1"
-- } `merge` bindStateKey "quality"
-- ,
-- R2.when (fv.hasError' "quality") $
-- H.div
-- { className: "form-group__error" }
-- [
-- H.text "Please enter a `Double` value (eg. 0.5)"
-- ]
-- ]
-- ]
-- ]
-- ,
-- H.div
-- { className: "phylo-config-form__col" }
-- [
-- -- Export filter
-- H.div
-- { className: intercalate " "
-- [ "form-group"
-- , (fv.hasError' "exportFilter") ?
-- "form-group--error" $
-- mempty
-- ]
-- }
-- [
-- H.div
-- { className: "form-group__label" }
-- [
-- H.label {} [ H.text "Minimum branch size" ]
-- ]
-- ,
-- H.div
-- { className: "form-group__field" }
-- [
-- B.formInput $
-- { type: "number"
-- } `merge` bindStateKey "exportFilter"
-- ,
-- R2.when (fv.hasError' "exportFilter") $
-- H.div
-- { className: "form-group__error" }
-- [
-- H.text "Please enter a `Double` value (eg. 3.0)"
-- ]
-- ]
-- ]
-- ]
-- ]
-- ]
-- ,
-- -- Time Unit
-- B.fieldset
-- { 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
-- { className: intercalate " "
-- [ "form-group"
-- ]
-- }
-- [
-- H.div
-- { className: "form-group__label" }
-- [
-- H.label {} [ H.text "Granularity" ]
-- ]
-- ,
-- H.div
-- { className: "form-group__field" }
-- [
-- B.formSelect
-- (bindStateKey "granularity")
-- [
-- H.option
-- { value: show Year_ }
-- [ H.text "Year" ]
-- ,
-- H.option
-- { value: show Month_ }
-- [ H.text "Month" ]
-- ,
-- H.option
-- { value: show Week_ }
-- [ H.text "Week" ]
-- ,
-- H.option
-- { value: show Day_ }
-- [ H.text "Day" ]
-- ]
-- ]
-- ]
-- ]
-- ,
-- H.div
-- { className: "phylo-config-form__col" }
-- [
-- -- Period
-- H.div
-- { className: intercalate " "
-- [ "form-group"
-- , (fv.hasError' "period") ?
-- "form-group--error" $
-- mempty
-- ]
-- }
-- [
-- H.div
-- { className: "form-group__label" }
-- [
-- H.label {} [ H.text "Period" ]
-- ]
-- ,
-- H.div
-- { className: "form-group__field" }
-- [
-- B.formInput $
-- { type: "number"
-- } `merge` bindStateKey "period"
-- ,
-- R2.when (fv.hasError' "period") $
-- H.div
-- { className: "form-group__error" }
-- [
-- H.text "Please enter an `Int` value (eg. 3)"
-- ]
-- ]
-- ]
-- ,
-- -- Step
-- H.div
-- { className: intercalate " "
-- [ "form-group"
-- , (fv.hasError' "step") ?
-- "form-group--error" $
-- mempty
-- ]
-- }
-- [
-- H.div
-- { className: "form-group__label" }
-- [
-- H.label {} [ H.text "Step" ]
-- ]
-- ,
-- H.div
-- { className: "form-group__field" }
-- [
-- B.formInput $
-- { type: "number"
-- } `merge` bindStateKey "step"
-- ,
-- R2.when (fv.hasError' "step") $
-- H.div
-- { className: "form-group__error" }
-- [
-- H.text "Please enter an `Int` value (eg. 3)"
-- ]
-- ]
-- ]
-- ,
-- -- Matching frame
-- H.div
-- { className: intercalate " "
-- [ "form-group"
-- , (fv.hasError' "matchingFrame") ?
-- "form-group--error" $
-- mempty
-- ]
-- }
-- [
-- H.div
-- { className: "form-group__label" }
-- [
-- H.label {} [ H.text "Matching frame" ]
-- ]
-- ,
-- H.div
-- { className: "form-group__field" }
-- [
-- B.formInput $
-- { type: "number"
-- } `merge` bindStateKey "matchingFrame"
-- ,
-- R2.when (fv.hasError' "matchingFrame") $
-- H.div
-- { className: "form-group__error" }
-- [
-- H.text "Please enter an `Int` value (eg. 3)"
-- ]
-- ]
-- ]
-- ]
-- ]
-- ]
-- ,
-- -- Clique
-- B.fieldset
-- { 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
-- { className: intercalate " "
-- [ "form-group"
-- ]
-- }
-- [
-- H.div
-- { className: "form-group__label" }
-- [
-- H.label {} [ H.text "Type" ]
-- ]
-- ,
-- H.div
-- { className: "form-group__field" }
-- [
-- H.div
-- { className: "btn-group"
-- , role: "group"
-- }
-- [
-- B.button
-- { callback: \_ -> setter stateBox "cliqueType" $ show FIS_
-- -- , variant: OutlinedButtonVariant Secondary
-- , variant: ButtonVariant Light
-- , className: state.cliqueType == show FIS_ ?
-- "active" $
-- ""
-- }
-- [
-- H.text "FIS"
-- ]
-- ,
-- B.button
-- { callback: \_ -> setter stateBox "cliqueType" $ show MaxClique_
-- -- , variant: OutlinedButtonVariant Secondary
-- , variant: ButtonVariant Light
-- , className: state.cliqueType == show MaxClique_ ?
-- "active" $
-- ""
-- }
-- [
-- H.text "MaxClique"
-- ]
-- ]
-- ]
-- ]
-- ]
-- ,
-- -- TYPE::FIS_
-- R2.when (state.cliqueType == show FIS_) $
-- H.div
-- { className: "phylo-config-form__col" }
-- [
-- -- Support
-- H.div
-- { className: intercalate " "
-- [ "form-group"
-- , (fv.hasError' "support") ?
-- "form-group--error" $
-- mempty
-- ]
-- }
-- [
-- H.div
-- { className: "form-group__label" }
-- [
-- H.label {} [ H.text "Support" ]
-- ]
-- ,
-- H.div
-- { className: "form-group__field" }
-- [
-- B.formInput $
-- 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
-- { className: intercalate " "
-- [ "form-group"
-- , (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' "size") $
-- H.div
-- { className: "form-group__error" }
-- [
-- H.text "Please enter an `Int` value (eg. 3)"
-- ]
-- ]
-- ]
-- ]
-- ,
-- -- TYPE::MaxClique_
-- R2.when (state.cliqueType == show MaxClique_) $
-- H.div
-- { className: "phylo-config-form__col" }
-- [
-- -- Size
-- H.div
-- { className: intercalate " "
-- [ "form-group"
-- , (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 $
-- { 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)"
-- ]
-- ]
-- ]
-- ,
-- -- Treshold
-- H.div
-- { className: intercalate " "
-- [ "form-group"
-- , (fv.hasError' "threshold") ?
-- "form-group--error" $
-- mempty
-- ]
-- }
-- [
-- H.div
-- { className: "form-group__label" }
-- [
-- H.label {} [ H.text "Treshold" ]
-- ]
-- ,
-- H.div
-- { className: "form-group__field" }
-- [
-- B.formInput $
-- { type: "number"
-- } `merge` bindStateKey "threshold"
-- ,
-- R2.when (fv.hasError' "threshold") $
-- H.div
-- { className: "form-group__error" }
-- [
-- H.text "Please enter a `Double` value (eg. 0.5)"
-- ]
-- ]
-- ]
-- ,
-- -- Clique filter
-- H.div
-- { className: intercalate " "
-- [ "form-group"
-- ]
-- }
-- [
-- H.div
-- { className: "form-group__label" }
-- [
-- H.label {} [ H.text "Filter type" ]
-- ]
-- ,
-- H.div
-- { className: "form-group__field" }
-- [
-- B.formSelect
-- ( bindStateKey "cliqueFilter" )
-- [
-- H.option
-- { value: show ByThreshold }
-- [ H.text "By threshold" ]
-- ,
-- H.option
-- { value: show ByNeighbours }
-- [ 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