Skip to content

P
purescript-gargantext
Commit e324e1f6 authored by Alexandre Delanoë's avatar Alexandre Delanoë
Browse files
Options

Merge remote-tracking branch 'origin/581-node-phylo-form-render-improvements' into dev

parents 3072d81a 003593fe
Hide whitespace changes
Inline Side-by-side
Showing with 1284 additions and 470 deletions
dist/styles/bootstrap-darkster.css
View file @ e324e1f6
......@@ -6382,6 +6382,10 @@ h3 {
text-align: center;
}
.range-simple__input:focus {
box-shadow: none;
}
.b-tabs .nav-item:first-child {
margin-left: 16px;
}
......@@ -7085,6 +7089,26 @@ a:focus {
#portal .w-11\/12 {
width: 91.666667%;
}
#app .min-w-25,
#portal .min-w-25 {
min-width: 25%;
}
#app .min-w-33,
#portal .min-w-33 {
min-width: 33%;
}
#app .min-w-50,
#portal .min-w-50 {
min-width: 50%;
}
#app .min-w-75,
#portal .min-w-75 {
min-width: 75%;
}
#app .min-w-100,
#portal .min-w-100 {
min-width: 100%;
}
#app .h-auto,
#portal .h-auto {
height: auto;
......
dist/styles/bootstrap-default.css
View file @ e324e1f6
......@@ -6193,6 +6193,10 @@ h3 {
text-align: center;
}
.range-simple__input:focus {
box-shadow: none;
}
.b-tabs .nav-item:first-child {
margin-left: 16px;
}
......@@ -6892,6 +6896,26 @@ a:focus {
#portal .w-11\/12 {
width: 91.666667%;
}
#app .min-w-25,
#portal .min-w-25 {
min-width: 25%;
}
#app .min-w-33,
#portal .min-w-33 {
min-width: 33%;
}
#app .min-w-50,
#portal .min-w-50 {
min-width: 50%;
}
#app .min-w-75,
#portal .min-w-75 {
min-width: 75%;
}
#app .min-w-100,
#portal .min-w-100 {
min-width: 100%;
}
#app .h-auto,
#portal .h-auto {
height: auto;
......
dist/styles/bootstrap-greyson.css
View file @ e324e1f6
......@@ -5948,6 +5948,10 @@ h3 {
text-align: center;
}
.range-simple__input:focus {
box-shadow: none;
}
.b-tabs .nav-item:first-child {
margin-left: 16px;
}
......@@ -6651,6 +6655,26 @@ a:focus {
#portal .w-11\/12 {
width: 91.666667%;
}
#app .min-w-25,
#portal .min-w-25 {
min-width: 25%;
}
#app .min-w-33,
#portal .min-w-33 {
min-width: 33%;
}
#app .min-w-50,
#portal .min-w-50 {
min-width: 50%;
}
#app .min-w-75,
#portal .min-w-75 {
min-width: 75%;
}
#app .min-w-100,
#portal .min-w-100 {
min-width: 100%;
}
#app .h-auto,
#portal .h-auto {
height: auto;
......
dist/styles/bootstrap-herbie.css
View file @ e324e1f6
......@@ -6196,6 +6196,10 @@ h3 {
text-align: center;
}
.range-simple__input:focus {
box-shadow: none;
}
.b-tabs .nav-item:first-child {
margin-left: 16px;
}
......@@ -6899,6 +6903,26 @@ a:focus {
#portal .w-11\/12 {
width: 91.666667%;
}
#app .min-w-25,
#portal .min-w-25 {
min-width: 25%;
}
#app .min-w-33,
#portal .min-w-33 {
min-width: 33%;
}
#app .min-w-50,
#portal .min-w-50 {
min-width: 50%;
}
#app .min-w-75,
#portal .min-w-75 {
min-width: 75%;
}
#app .min-w-100,
#portal .min-w-100 {
min-width: 100%;
}
#app .h-auto,
#portal .h-auto {
height: auto;
......
dist/styles/bootstrap-monotony.css
View file @ e324e1f6
......@@ -6197,6 +6197,10 @@ h3 {
text-align: center;
}
.range-simple__input:focus {
box-shadow: none;
}
.b-tabs .nav-item:first-child {
margin-left: 16px;
}
......@@ -6900,6 +6904,26 @@ a:focus {
#portal .w-11\/12 {
width: 91.666667%;
}
#app .min-w-25,
#portal .min-w-25 {
min-width: 25%;
}
#app .min-w-33,
#portal .min-w-33 {
min-width: 33%;
}
#app .min-w-50,
#portal .min-w-50 {
min-width: 50%;
}
#app .min-w-75,
#portal .min-w-75 {
min-width: 75%;
}
#app .min-w-100,
#portal .min-w-100 {
min-width: 100%;
}
#app .h-auto,
#portal .h-auto {
height: auto;
......
src/Gargantext/Components/Bootstrap/Form/FormInput.purs
View file @ e324e1f6
......@@ -22,6 +22,9 @@ type Options =
, type :: String
, placeholder :: String
, size :: Sizing
, step :: String
, min :: String
, max :: String
)
options :: Record Options
......@@ -31,6 +34,9 @@ options =
, type : "text"
, placeholder : ""
, size : MediumSize
, step : ""
, min : ""
, max : ""
}
-- | Structural Component for the Bootstrap input
......@@ -73,6 +79,9 @@ component = R.hooksComponent componentName cpt where
, readOnly: elem status [ Idled ]
, placeholder: props.placeholder
, type: props.type
, step: props.step
, min: props.min
, max: props.max
, autoComplete: "off"
, value: props.value
}
......
src/Gargantext/Components/Forest/Tree/Node/Box.purs
View file @ e324e1f6
......@@ -343,6 +343,7 @@ panelActionCpt = here.component "panelAction" cpt
cpt { action: Config, nodeType } _ =
pure $ fragmentPT $ "Config " <> show nodeType
-- Functions using SubTree
cpt { action: Reconstruct , dispatch, nodeType } _ = pure $ update { dispatch, nodeType } []
cpt { action: Merge {subTreeParams}, boxes, dispatch, id, nodeType, session } _ =
pure $ mergeNode { boxes, dispatch, id, nodeType, session, subTreeParams } []
cpt { action: Move {subTreeParams}, boxes, dispatch, id, nodeType, session } _ =
......
src/Gargantext/Components/Forest/Tree/Node/Settings.purs
View file @ e324e1f6
......@@ -13,7 +13,7 @@ if user has access to node then he can do all his related actions
------------------------------------------------------------------------
data NodeAction = Documentation NodeType
| SearchBox
| Download | Upload | Refresh | Config
| Download | Upload | Refresh | Config | Reconstruct
| Delete
| Share
| ManageTeam
......@@ -43,6 +43,7 @@ instance Eq NodeAction where
eq (Add x) (Add y) = x == y
eq (Merge x) (Merge y) = x == y
eq Config Config = true
eq Reconstruct Reconstruct = true
eq (Publish x) (Publish y) = x == y
eq AddingContact AddingContact = true
eq CloseNodePopover CloseNodePopover = true
......@@ -61,6 +62,7 @@ instance Show NodeAction where
show Share = "Share"
show ManageTeam = "Team"
show Config = "Config"
show Reconstruct = "Reconstruct"
show (Link _) = "Link to " -- <> show x
show (Add _) = "Add Child" -- foldl (\a b -> a <> show b) "Add " xs
show (Merge _) = "Merge with subtree" -- <> show t
......@@ -80,6 +82,7 @@ glyphiconNodeAction Download = "download"
glyphiconNodeAction (Merge _) = "random"
glyphiconNodeAction Refresh = "refresh"
glyphiconNodeAction Config = "wrench"
glyphiconNodeAction Reconstruct = "cogs"
glyphiconNodeAction Share = "user-plus"
glyphiconNodeAction ManageTeam = "users"
glyphiconNodeAction AddingContact = "user-plus"
......@@ -224,7 +227,7 @@ settingsBox Phylo =
SettingsBox { show : true
, edit : true
, doc : Documentation Phylo
, buttons : [ Refresh
, buttons : [ Reconstruct
, Delete
]
}
......
src/Gargantext/Components/Forest/Tree/Node/Status.purs
View file @ e324e1f6
......@@ -11,6 +11,7 @@ hasStatus :: NodeType -> NodeAction -> Status
hasStatus _ SearchBox = Test
hasStatus _ Refresh = Dev
hasStatus _ Config = Dev
hasStatus _ Reconstruct = Dev
hasStatus _ (Merge _) = Dev
hasStatus _ (Documentation _) = Dev
hasStatus Annuaire Upload = Dev
......
src/Gargantext/Components/PhyloExplorer/Config/ConfigForm.purs
View file @ e324e1f6
......@@ -64,28 +64,27 @@ component = R.hooksComponent "configForm" cpt where
let modeChoice =
B.fieldset
{ className: "phylo-config-form__group"
, titleSlot: H.text "Mode Choice"
}
H.div
{ className: "phylo-config-form__group" }
[
H.div
{ className: "phylo-config-form__row" }
[
H.div
{ className: "phylo-config-form__col" }
[
-- H.div
-- { className: "phylo-config-form__row" }
-- [
-- H.div
-- { className: "phylo-config-form__col" }
-- [
-- Clique type
H.div
{ className: intercalate " "
[ "form-group"
, "text-center"
]
}
[
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Easy or Advanced:" ]
H.label {} [ H.text "Mode choice" ]
]
,
H.div
......@@ -117,402 +116,217 @@ component = R.hooksComponent "configForm" cpt where
""
}
[
H.text "Expert"
H.text "Advanced"
]
]
]
]
]
]
-- ]
-- ]
]
-- Render
let
form =
formAdvanced =
H.form
{ className: "phylo-config-form" }
[ H.div
[
H.div
{ className: "phylo-config-form__group" }
[
H.div
{ className: "phylo-config-form__row" }
{ className: "" }
[
H.div
{ className: "phylo-config-form__col" }
{ className: "" }
[
-- Proximity
H.div
{ className: intercalate " "
[ "form-group"
, (fv.hasError' "proximity") ?
"form-group--error" $
mempty
]
-- Time Unit
B.fieldset
{ className: "phylo-config-form__group mx-0"
, titleSlot: H.text "Time unit"
}
[
-- H.div
-- { className: "phylo-config-form__row" }
-- [
-- H.div { className: "" }
-- [
-- ]
-- ]
-- ,
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Proximity" ]
]
,
H.div
{ className: "form-group__field" }
{ className: "phylo-config-form__row" }
[
B.formInput $
{ type: "number"
} `merge` bindStateKey "proximity"
,
R2.when (fv.hasError' "proximity") $
H.div
{ className: "form-group__error" }
[
H.text "Please enter a `Double` value (eg. 0.5)"
]
]
]
]
,
H.div
{ className: "phylo-config-form__col" }
[
-- Synchrony
H.div
{ className: intercalate " "
[ "form-group"
, (fv.hasError' "synchrony") ?
"form-group--error" $
mempty
]
}
[
H.div
{ className: "form-group__label" }
[
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
{ className: "form-group__field" }
[
B.formInput $
{ type: "number"
} `merge` bindStateKey "quality"
,
R2.when (fv.hasError' "quality") $
H.div { className: "w-auto phylo-config-form__col text-nowrap" }
[
-- Granularity
H.div
{ className: "form-group__error" }
{ className: intercalate " "
[ "form-group"
, "mb-1"
]
}
[
H.text "Please enter a `Double` value (eg. 0.5)"
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" }
[
-- 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.div
{ className: "w-10 ml-1" }
[
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") $
-- Period
H.div
{ className: "form-group__error" }
{ className: intercalate " "
[ "form-group"
, "mb-1"
, (fv.hasError' "period") ?
"form-group--error" $
mempty
]
}
[
H.text "Please enter an `Int` value (eg. 3)"
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: "w-10 ml-1" }
[
-- Step
H.div
{ className: "form-group__error" }
{ className: intercalate " "
[ "form-group"
, "mb-1"
, (fv.hasError' "step") ?
"form-group--error" $
mempty
]
}
[
H.text "Please enter an `Int` value (eg. 3)"
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"
}
{ className: "w-10 ml-1 text-nowrap" }
[
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" $
""
-- Matching frame
H.div
{ className: intercalate " "
[ "form-group"
, "mb-1"
, (fv.hasError' "matchingFrame") ?
"form-group--error" $
mempty
]
}
[
H.text "MaxClique"
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)"
]
]
]
]
]
]
]
,
-- TYPE::FIS_
R2.when (state.cliqueType == show FIS_) $
H.div
{ className: "phylo-config-form__col" }
,
-- Quality
B.fieldset
{ className: "phylo-config-form__group mx-0"
, titleSlot: H.text "Zoom"
}
[
-- Support
H.div
{ className: intercalate " "
[ "form-group"
, (fv.hasError' "support") ?
, "mt-0"
, "mb-1"
, "text-center"
, (fv.hasError' "quality") ?
"form-group--error" $
mempty
]
......@@ -521,160 +335,1010 @@ component = R.hooksComponent "configForm" cpt where
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Support" ]
H.label {} [ H.text "Level of observation" ]
]
,
H.div
{ className: "form-group__field" }
[
B.formInput $
bindStateKey "support"
,
R2.when (fv.hasError' "support") $
H.div
{ className: "form-group__error" }
H.div { className: "range-simple" }
[
H.div { className: "range-simple__field d-flex" }
[
H.text "Please enter an `Int` value (eg. 3)"
H.div { className: "col-9 p-0 mx-1 mt-1" } [
B.formInput $
{ className: "range-simple__input p-0 h-auto border-0"
, type: "range"
, step: "0.1"
, min: "0"
, max: "1"
} `merge` bindStateKey "quality"
]
,
H.div { className: "col-3 p-0 mx-1" } [
B.formInput $
{ className: "range-simple__witness text-small"
, type: "number"
, step: "0.1"
, min: "0"
, max: "1"
, status: Disabled
-- , readOnly: Disabled
} `merge` bindStateKey "quality"
]
]
]
]
,
-- 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)"
]
]
-- ,
-- B.formInput $
-- { type: "number"
-- , step: "0.1"
-- , min: "0"
-- , max: "1"
-- } `merge` bindStateKey "quality"
]
]
,
-- TYPE::MaxClique_
R2.when (state.cliqueType == show MaxClique_) $
,
H.div
{ className: "phylo-config-form__col" }
-- Clusterisation algo
B.fieldset
{ className: "phylo-config-form__group mx-0"
, titleSlot: H.text "Clusterisation algorithm"
}
[
-- Size
-- Mode
H.div
{ className: intercalate " "
[ "form-group"
, (fv.hasError' "size") ?
"form-group--error" $
mempty
[ "form-group text-center mb-2"
]
}
[
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Size" ]
H.label {} [ H.text "Mode" ]
]
,
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.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 "Please enter an `Int` value (eg. 3)"
H.text "Basic"
]
,
B.button
{ callback: \_ -> setter stateBox "cliqueType" $ show MaxClique_
-- , variant: OutlinedButtonVariant Secondary
, variant: ButtonVariant Light
, className: state.cliqueType == show MaxClique_ ?
"active" $
""
}
[
H.text "Expert"
]
]
]
]
,
-- Treshold
H.div
{ className: intercalate " "
[ "form-group"
, (fv.hasError' "threshold") ?
"form-group--error" $
mempty
]
}
{ className: "" }
[
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") $
-- Mode Basic / TYPE::FIS_
R2.when (state.cliqueType == show FIS_) $
H.div { className: "clustrisation-algorythm-basic form-group" }
[
-- Title FIS
H.div
{ className: "form-group__error" }
{ className: "form-group__label text-center" }
[
H.text "Please enter a `Double` value (eg. 0.5)"
H.label {} [ H.text "FIS" ]
]
]
,
H.div
{ 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
{ className: intercalate " "
[ "form-group col-4 w-10 text-center mb-0"
, (fv.hasError' "size") ?
"form-group--error" $
mempty
]
}
[
H.div
{ className: "" }
[
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)"
]
]
]
]
]
]
,
-- Clique filter
H.div
{ className: intercalate " "
[ "form-group"
]
}
{ className: "" }
[
-- Mode Expert (part 1) / TYPE::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
{ className: "phylo-config-form__row justify-content-center" }
[
-- Size
H.div
{ className: intercalate " "
[ "form-group col-3 w-10 text-center mb-0"
, (fv.hasError' "size") ?
"form-group--error" $
mempty
]
}
[
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
{ className: intercalate " "
[ "form-group col-4 w-10 text-center mb-0"
, (fv.hasError' "threshold") ?
"form-group--error" $
mempty
]
}
[
H.div
{ className: "" }
[
H.label {} [ H.text "Treshold" ]
]
,
H.div
{ className: "form-group__field" }
[
B.formInput $
{ type: "number"
, step: "0.0001"
, min: "0.0001"
, max: "1"
} `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 col-5 w-10 text-center mb-0 text-nowrap"
]
}
[
H.div
{ className: "" }
[
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" ]
]
]
]
]
]
]
]
,
H.div
{ className: "" }
[
-- Mode Expert (part 2) / TYPE::MaxClique_
R2.when (state.cliqueType == show MaxClique_) $
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Filter type" ]
]
,
H.div
{ className: "form-group__field" }
{ className: "phylo-config-form__row" }
[
B.formSelect
( bindStateKey "cliqueFilter" )
-- Proximity
H.div
{ className: intercalate " "
[ "form-group col-3 w-10 text-center mb-0"
, (fv.hasError' "proximity") ?
"form-group--error" $
mempty
]
}
[
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Proximity" ]
]
,
H.div
{ className: "form-group__field" }
[
B.formInput $
{ type: "number"
, step: "0.1"
, min: "0.1"
, max: "1"
} `merge` bindStateKey "proximity"
,
R2.when (fv.hasError' "proximity") $
H.div
{ className: "form-group__error" }
[
H.text "Please enter a `Double` value (eg. 0.5)"
]
]
]
,
-- Synchrony
H.div
{ 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" ]
]
,
H.div
{ className: "form-group__field" }
[
B.formInput $
{ type: "number"
, step: "0.1"
, min: "0.1"
, max: "1"
} `merge` bindStateKey "synchrony"
,
R2.when (fv.hasError' "synchrony") $
H.div
{ className: "form-group__error" }
[
H.text "Please enter a `Double` value (eg. 0.5)"
]
]
]
,
-- Minimum branch size
H.div
{ className: intercalate " "
[ "form-group col-5 w-10 text-center mb-0 text-nowrap"
, (fv.hasError' "exportFilter") ?
"form-group--error" $
mempty
]
}
[
H.option
{ value: show ByThreshold }
[ H.text "By threshold" ]
H.div
{ className: "form-group__label" }
[
H.label {} [ H.text "Minimum branch size" ]
]
,
H.option
{ value: show ByNeighbours }
[ H.text "By neighbours" ]
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)"
]
]
]
]
]
]
]
]
]
]
-- let
-- form =
-- H.form
-- { 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
-- { className: intercalate " "
-- [ "form-group"
-- , (fv.hasError' "proximity") ?
-- "form-group--error" $
-- mempty
-- ]
-- }
-- [
-- H.div
-- { className: "form-group__label" }
-- [
-- H.label {} [ H.text "Proximity" ]
-- ]
-- ,
-- H.div
-- { className: "form-group__field" }
-- [
-- B.formInput $
-- { type: "number"
-- } `merge` bindStateKey "proximity"
-- ,
-- R2.when (fv.hasError' "proximity") $
-- H.div
-- { className: "form-group__error" }
-- [
-- H.text "Please enter a `Double` value (eg. 0.5)"
-- ]
-- ]
-- ]
-- ]
-- ,
-- H.div
-- { className: "phylo-config-form__col" }
-- [
-- -- Synchrony
-- H.div
-- { className: intercalate " "
-- [ "form-group"
-- , (fv.hasError' "synchrony") ?
-- "form-group--error" $
-- mempty
-- ]
-- }
-- [
-- H.div
-- { className: "form-group__label" }
-- [
-- 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
-- { 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 warningMessage =
H.div { className: "alert alert-info text-small mx-auto mt-1 w-min-content min-w-75" }
[
H.p
{ className: "text-bold text-small" }
[
B.icon
{ name: "warning"
, className: "mr-1"
}
,
H.text "Warning!"
]
,
H.p { className: "text-small" }
[
H.text "Please note that the phylomemy reconstruction process consumes a lot of machine resources. If your corpus is < 2000 docs and if your list of terms is < 300 terms then the process will end quickly. If your corpus is < 5000 docs and if your list of terms is < 500 terms then the process will end in less than 30 minutes. If your corpus is > 5000 docs and if your list of terms is > 500 terms then the process can last hours."
]
]
let submit =
H.div { className: "phylo-config-form__submit" }
[
......@@ -685,16 +1349,18 @@ component = R.hooksComponent "configForm" cpt where
, type: "submit"
}
[
B.icon { name: "refresh" }
B.icon { name: "cogs" }
,
H.text $ nbsp 1
,
H.text "Update!"
H.text "Reconstruct the phylomemy!"
]
]
pure $ H.div {} [ modeChoice
, R2.when (state.defaultMode == show false) form
, R2.when (state.defaultMode == show false) formAdvanced
-- , R2.when (state.defaultMode == show false) form
, warningMessage
, submit
]
......@@ -739,10 +1405,7 @@ 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
= [ FV.number "quality" r.quality
-- Time unit
, FV.int "period" r.period
, FV.int "step" r.step
......@@ -751,10 +1414,15 @@ formValidation r = foldl append mempty rules
-- Clique
<> if (r.cliqueType == show FIS_)
then
-- FIS_ (Basic mode)
[ FV.int "support" r.support
, FV.int "size" r.size
]
else
-- MaxClique_ (Expert mode)
[ FV.int "size" r.size
, FV.number "threshold" r.threshold
, FV.number "proximity" r.proximity
, FV.number "synchrony" r.synchrony
, FV.number "exportFilter" r.exportFilter
]
src/sass/base/_utilities.scss
View file @ e324e1f6
......@@ -61,6 +61,12 @@
.w-10\/12 { width: 83.333333%; }
.w-11\/12 { width: 91.666667%; }
.min-w-25 { min-width: 25% }
.min-w-33 { min-width: 33% }
.min-w-50 { min-width: 50% }
.min-w-75 { min-width: 75% }
.min-w-100 { min-width: 100% }
/// Height
.h-auto { height: auto; }
.h-fluid,
......
src/sass/components/_grouped.scss
View file @ e324e1f6
......@@ -372,6 +372,12 @@
}
}
.range-simple__input {
&:focus {
box-shadow: none;
}
}
/// Tabs
///-----------------------------------------------------------------------------
......
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