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
Show 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 { ...@@ -6382,6 +6382,10 @@ h3 {
text-align: center; text-align: center;
} }
.range-simple__input:focus {
box-shadow: none;
}
.b-tabs .nav-item:first-child { .b-tabs .nav-item:first-child {
margin-left: 16px; margin-left: 16px;
} }
...@@ -7085,6 +7089,26 @@ a:focus { ...@@ -7085,6 +7089,26 @@ a:focus {
#portal .w-11\/12 { #portal .w-11\/12 {
width: 91.666667%; 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, #app .h-auto,
#portal .h-auto { #portal .h-auto {
height: auto; height: auto;
......
dist/styles/bootstrap-default.css
View file @ e324e1f6
...@@ -6193,6 +6193,10 @@ h3 { ...@@ -6193,6 +6193,10 @@ h3 {
text-align: center; text-align: center;
} }
.range-simple__input:focus {
box-shadow: none;
}
.b-tabs .nav-item:first-child { .b-tabs .nav-item:first-child {
margin-left: 16px; margin-left: 16px;
} }
...@@ -6892,6 +6896,26 @@ a:focus { ...@@ -6892,6 +6896,26 @@ a:focus {
#portal .w-11\/12 { #portal .w-11\/12 {
width: 91.666667%; 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, #app .h-auto,
#portal .h-auto { #portal .h-auto {
height: auto; height: auto;
......
dist/styles/bootstrap-greyson.css
View file @ e324e1f6
...@@ -5948,6 +5948,10 @@ h3 { ...@@ -5948,6 +5948,10 @@ h3 {
text-align: center; text-align: center;
} }
.range-simple__input:focus {
box-shadow: none;
}
.b-tabs .nav-item:first-child { .b-tabs .nav-item:first-child {
margin-left: 16px; margin-left: 16px;
} }
...@@ -6651,6 +6655,26 @@ a:focus { ...@@ -6651,6 +6655,26 @@ a:focus {
#portal .w-11\/12 { #portal .w-11\/12 {
width: 91.666667%; 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, #app .h-auto,
#portal .h-auto { #portal .h-auto {
height: auto; height: auto;
......
dist/styles/bootstrap-herbie.css
View file @ e324e1f6
...@@ -6196,6 +6196,10 @@ h3 { ...@@ -6196,6 +6196,10 @@ h3 {
text-align: center; text-align: center;
} }
.range-simple__input:focus {
box-shadow: none;
}
.b-tabs .nav-item:first-child { .b-tabs .nav-item:first-child {
margin-left: 16px; margin-left: 16px;
} }
...@@ -6899,6 +6903,26 @@ a:focus { ...@@ -6899,6 +6903,26 @@ a:focus {
#portal .w-11\/12 { #portal .w-11\/12 {
width: 91.666667%; 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, #app .h-auto,
#portal .h-auto { #portal .h-auto {
height: auto; height: auto;
......
dist/styles/bootstrap-monotony.css
View file @ e324e1f6
...@@ -6197,6 +6197,10 @@ h3 { ...@@ -6197,6 +6197,10 @@ h3 {
text-align: center; text-align: center;
} }
.range-simple__input:focus {
box-shadow: none;
}
.b-tabs .nav-item:first-child { .b-tabs .nav-item:first-child {
margin-left: 16px; margin-left: 16px;
} }
...@@ -6900,6 +6904,26 @@ a:focus { ...@@ -6900,6 +6904,26 @@ a:focus {
#portal .w-11\/12 { #portal .w-11\/12 {
width: 91.666667%; 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, #app .h-auto,
#portal .h-auto { #portal .h-auto {
height: auto; height: auto;
......
src/Gargantext/Components/Bootstrap/Form/FormInput.purs
View file @ e324e1f6
...@@ -22,6 +22,9 @@ type Options = ...@@ -22,6 +22,9 @@ type Options =
, type :: String , type :: String
, placeholder :: String , placeholder :: String
, size :: Sizing , size :: Sizing
, step :: String
, min :: String
, max :: String
) )
options :: Record Options options :: Record Options
...@@ -31,6 +34,9 @@ options = ...@@ -31,6 +34,9 @@ options =
, type : "text" , type : "text"
, placeholder : "" , placeholder : ""
, size : MediumSize , size : MediumSize
, step : ""
, min : ""
, max : ""
} }
-- | Structural Component for the Bootstrap input -- | Structural Component for the Bootstrap input
...@@ -73,6 +79,9 @@ component = R.hooksComponent componentName cpt where ...@@ -73,6 +79,9 @@ component = R.hooksComponent componentName cpt where
, readOnly: elem status [ Idled ] , readOnly: elem status [ Idled ]
, placeholder: props.placeholder , placeholder: props.placeholder
, type: props.type , type: props.type
, step: props.step
, min: props.min
, max: props.max
, autoComplete: "off" , autoComplete: "off"
, value: props.value , value: props.value
} }
......
src/Gargantext/Components/Forest/Tree/Node/Box.purs
View file @ e324e1f6
...@@ -343,6 +343,7 @@ panelActionCpt = here.component "panelAction" cpt ...@@ -343,6 +343,7 @@ panelActionCpt = here.component "panelAction" cpt
cpt { action: Config, nodeType } _ = cpt { action: Config, nodeType } _ =
pure $ fragmentPT $ "Config " <> show nodeType pure $ fragmentPT $ "Config " <> show nodeType
-- Functions using SubTree -- Functions using SubTree
cpt { action: Reconstruct , dispatch, nodeType } _ = pure $ update { dispatch, nodeType } []
cpt { action: Merge {subTreeParams}, boxes, dispatch, id, nodeType, session } _ = cpt { action: Merge {subTreeParams}, boxes, dispatch, id, nodeType, session } _ =
pure $ mergeNode { boxes, dispatch, id, nodeType, session, subTreeParams } [] pure $ mergeNode { boxes, dispatch, id, nodeType, session, subTreeParams } []
cpt { action: Move {subTreeParams}, boxes, dispatch, id, nodeType, session } _ = 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 ...@@ -13,7 +13,7 @@ if user has access to node then he can do all his related actions
------------------------------------------------------------------------ ------------------------------------------------------------------------
data NodeAction = Documentation NodeType data NodeAction = Documentation NodeType
| SearchBox | SearchBox
| Download | Upload | Refresh | Config | Download | Upload | Refresh | Config | Reconstruct
| Delete | Delete
| Share | Share
| ManageTeam | ManageTeam
...@@ -43,6 +43,7 @@ instance Eq NodeAction where ...@@ -43,6 +43,7 @@ instance Eq NodeAction where
eq (Add x) (Add y) = x == y eq (Add x) (Add y) = x == y
eq (Merge x) (Merge y) = x == y eq (Merge x) (Merge y) = x == y
eq Config Config = true eq Config Config = true
eq Reconstruct Reconstruct = true
eq (Publish x) (Publish y) = x == y eq (Publish x) (Publish y) = x == y
eq AddingContact AddingContact = true eq AddingContact AddingContact = true
eq CloseNodePopover CloseNodePopover = true eq CloseNodePopover CloseNodePopover = true
...@@ -61,6 +62,7 @@ instance Show NodeAction where ...@@ -61,6 +62,7 @@ instance Show NodeAction where
show Share = "Share" show Share = "Share"
show ManageTeam = "Team" show ManageTeam = "Team"
show Config = "Config" show Config = "Config"
show Reconstruct = "Reconstruct"
show (Link _) = "Link to " -- <> show x show (Link _) = "Link to " -- <> show x
show (Add _) = "Add Child" -- foldl (\a b -> a <> show b) "Add " xs show (Add _) = "Add Child" -- foldl (\a b -> a <> show b) "Add " xs
show (Merge _) = "Merge with subtree" -- <> show t show (Merge _) = "Merge with subtree" -- <> show t
...@@ -80,6 +82,7 @@ glyphiconNodeAction Download = "download" ...@@ -80,6 +82,7 @@ glyphiconNodeAction Download = "download"
glyphiconNodeAction (Merge _) = "random" glyphiconNodeAction (Merge _) = "random"
glyphiconNodeAction Refresh = "refresh" glyphiconNodeAction Refresh = "refresh"
glyphiconNodeAction Config = "wrench" glyphiconNodeAction Config = "wrench"
glyphiconNodeAction Reconstruct = "cogs"
glyphiconNodeAction Share = "user-plus" glyphiconNodeAction Share = "user-plus"
glyphiconNodeAction ManageTeam = "users" glyphiconNodeAction ManageTeam = "users"
glyphiconNodeAction AddingContact = "user-plus" glyphiconNodeAction AddingContact = "user-plus"
...@@ -224,7 +227,7 @@ settingsBox Phylo = ...@@ -224,7 +227,7 @@ settingsBox Phylo =
SettingsBox { show : true SettingsBox { show : true
, edit : true , edit : true
, doc : Documentation Phylo , doc : Documentation Phylo
, buttons : [ Refresh , buttons : [ Reconstruct
, Delete , Delete
] ]
} }
......
src/Gargantext/Components/Forest/Tree/Node/Status.purs
View file @ e324e1f6
...@@ -11,6 +11,7 @@ hasStatus :: NodeType -> NodeAction -> Status ...@@ -11,6 +11,7 @@ hasStatus :: NodeType -> NodeAction -> Status
hasStatus _ SearchBox = Test hasStatus _ SearchBox = Test
hasStatus _ Refresh = Dev hasStatus _ Refresh = Dev
hasStatus _ Config = Dev hasStatus _ Config = Dev
hasStatus _ Reconstruct = Dev
hasStatus _ (Merge _) = Dev hasStatus _ (Merge _) = Dev
hasStatus _ (Documentation _) = Dev hasStatus _ (Documentation _) = Dev
hasStatus Annuaire Upload = 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 ...@@ -64,28 +64,27 @@ component = R.hooksComponent "configForm" cpt where
let modeChoice = let modeChoice =
B.fieldset
{ className: "phylo-config-form__group"
, titleSlot: H.text "Mode Choice"
}
[
H.div
{ className: "phylo-config-form__row" }
[
H.div H.div
{ className: "phylo-config-form__col" } { className: "phylo-config-form__group" }
[ [
-- H.div
-- { className: "phylo-config-form__row" }
-- [
-- H.div
-- { className: "phylo-config-form__col" }
-- [
-- Clique type -- Clique type
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group"
, "text-center"
] ]
} }
[ [
H.div H.div
{ className: "form-group__label" } { className: "form-group__label" }
[ [
H.label {} [ H.text "Easy or Advanced:" ] H.label {} [ H.text "Mode choice" ]
] ]
, ,
H.div H.div
...@@ -117,193 +116,56 @@ component = R.hooksComponent "configForm" cpt where ...@@ -117,193 +116,56 @@ component = R.hooksComponent "configForm" cpt where
"" ""
} }
[ [
H.text "Expert" H.text "Advanced"
]
]
] ]
] ]
] ]
] ]
-- ]
-- ]
] ]
-- Render -- Render
let let
form = formAdvanced =
H.form H.form
{ className: "phylo-config-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 H.div
{ className: "form-group__field" } { className: "phylo-config-form__group" }
[
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: "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 H.div
{ className: "form-group__field" } { className: "" }
[ [
B.formInput $
{ type: "number"
} `merge` bindStateKey "exportFilter"
,
R2.when (fv.hasError' "exportFilter") $
H.div H.div
{ className: "form-group__error" } { className: "" }
[ [
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 mx-0"
, titleSlot: H.text "Time unit" , titleSlot: H.text "Time unit"
} }
[ [
-- H.div
-- { className: "phylo-config-form__row" }
-- [
-- H.div { className: "" }
-- [
-- ]
-- ]
-- ,
H.div H.div
{ className: "phylo-config-form__row" } { className: "phylo-config-form__row" }
[ [
H.div H.div { className: "w-auto phylo-config-form__col text-nowrap" }
{ className: "phylo-config-form__col" }
[ [
-- Granularity -- Granularity
H.div H.div
{ className: intercalate " " { className: intercalate " "
[ "form-group" [ "form-group"
, "mb-1"
] ]
} }
[ [
...@@ -340,12 +202,13 @@ component = R.hooksComponent "configForm" cpt where ...@@ -340,12 +202,13 @@ component = R.hooksComponent "configForm" cpt where
] ]
, ,
H.div H.div
{ className: "phylo-config-form__col" } { className: "w-10 ml-1" }
[ [
-- Period -- Period
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
...@@ -373,11 +236,16 @@ component = R.hooksComponent "configForm" cpt where ...@@ -373,11 +236,16 @@ component = R.hooksComponent "configForm" cpt where
] ]
] ]
] ]
]
, ,
H.div
{ className: "w-10 ml-1" }
[
-- Step -- Step
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
...@@ -405,11 +273,16 @@ component = R.hooksComponent "configForm" cpt where ...@@ -405,11 +273,16 @@ component = R.hooksComponent "configForm" cpt where
] ]
] ]
] ]
]
, ,
H.div
{ className: "w-10 ml-1 text-nowrap" }
[
-- Matching frame -- Matching frame
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
...@@ -441,29 +314,92 @@ component = R.hooksComponent "configForm" cpt where ...@@ -441,29 +314,92 @@ component = R.hooksComponent "configForm" cpt where
] ]
] ]
, ,
-- Clique -- Quality
B.fieldset B.fieldset
{ className: "phylo-config-form__group" { className: "phylo-config-form__group mx-0"
, titleSlot: H.text "Clique algorithm" , titleSlot: H.text "Zoom"
} }
[ [
H.div H.div
{ className: "phylo-config-form__row" } { className: intercalate " "
[ "form-group"
, "mt-0"
, "mb-1"
, "text-center"
, (fv.hasError' "quality") ?
"form-group--error" $
mempty
]
}
[ [
H.div H.div
{ className: "phylo-config-form__col" } { className: "form-group__label" }
[ [
-- Clique type H.label {} [ H.text "Level of observation" ]
]
,
H.div
{ className: "form-group__field" }
[
H.div { className: "range-simple" }
[
H.div { className: "range-simple__field d-flex" }
[
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"
]
]
]
]
-- ,
-- B.formInput $
-- { type: "number"
-- , step: "0.1"
-- , min: "0"
-- , max: "1"
-- } `merge` bindStateKey "quality"
]
]
,
-- Clusterisation algo
B.fieldset
{ className: "phylo-config-form__group mx-0"
, titleSlot: H.text "Clusterisation algorithm"
}
[
-- Mode
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
...@@ -483,7 +419,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -483,7 +419,7 @@ component = R.hooksComponent "configForm" cpt where
"" ""
} }
[ [
H.text "FIS" H.text "Basic"
] ]
, ,
B.button B.button
...@@ -495,23 +431,35 @@ component = R.hooksComponent "configForm" cpt where ...@@ -495,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
...@@ -519,7 +467,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -519,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" ]
] ]
...@@ -528,7 +476,8 @@ component = R.hooksComponent "configForm" cpt where ...@@ -528,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
...@@ -542,7 +491,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -542,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
...@@ -550,7 +499,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -550,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" ]
] ]
...@@ -559,9 +508,10 @@ component = R.hooksComponent "configForm" cpt where ...@@ -559,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" }
[ [
...@@ -570,17 +520,31 @@ component = R.hooksComponent "configForm" cpt where ...@@ -570,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
...@@ -588,7 +552,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -588,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" ]
] ]
...@@ -598,6 +562,9 @@ component = R.hooksComponent "configForm" cpt where ...@@ -598,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") $
...@@ -612,7 +579,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -612,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
...@@ -620,7 +587,7 @@ component = R.hooksComponent "configForm" cpt where ...@@ -620,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" ]
] ]
...@@ -630,6 +597,9 @@ component = R.hooksComponent "configForm" cpt where ...@@ -630,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") $
...@@ -644,12 +614,12 @@ component = R.hooksComponent "configForm" cpt where ...@@ -644,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" ]
] ]
...@@ -675,6 +645,700 @@ component = R.hooksComponent "configForm" cpt where ...@@ -675,6 +645,700 @@ component = R.hooksComponent "configForm" cpt where
] ]
] ]
,
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
{ 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.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)"
]
]
]
]
]
]
]
]
]
-- 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 = let submit =
H.div { className: "phylo-config-form__submit" } H.div { className: "phylo-config-form__submit" }
[ [
...@@ -685,16 +1349,18 @@ component = R.hooksComponent "configForm" cpt where ...@@ -685,16 +1349,18 @@ component = R.hooksComponent "configForm" cpt where
, type: "submit" , type: "submit"
} }
[ [
B.icon { name: "refresh" } B.icon { name: "cogs" }
, ,
H.text $ nbsp 1 H.text $ nbsp 1
, ,
H.text "Update!" H.text "Reconstruct the phylomemy!"
] ]
] ]
pure $ H.div {} [ modeChoice 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 , submit
] ]
...@@ -739,10 +1405,7 @@ formValidation :: Record FormData -> Effect VForm ...@@ -739,10 +1405,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
...@@ -751,10 +1414,15 @@ formValidation r = foldl append mempty rules ...@@ -751,10 +1414,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
] ]
src/sass/base/_utilities.scss
View file @ e324e1f6
...@@ -61,6 +61,12 @@ ...@@ -61,6 +61,12 @@
.w-10\/12 { width: 83.333333%; } .w-10\/12 { width: 83.333333%; }
.w-11\/12 { width: 91.666667%; } .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 /// Height
.h-auto { height: auto; } .h-auto { height: auto; }
.h-fluid, .h-fluid,
......
src/sass/components/_grouped.scss
View file @ e324e1f6
...@@ -372,6 +372,12 @@ ...@@ -372,6 +372,12 @@
} }
} }
.range-simple__input {
&:focus {
box-shadow: none;
}
}
/// Tabs /// 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