Commit 2f2b9b24 authored by Alexandre Delanoë's avatar Alexandre Delanoë

Merge remote-tracking branch 'origin/arturo-dev-node-term-rerendering-rc1.x' into dev-merge

parents 06a7913d 70eae499
......@@ -10887,22 +10887,12 @@ select.form-control {
z-index: initial;
}
.ngrams-table-container__header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #0d0d0d;
position: sticky;
top: 56px;
z-index: 2;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid #dee2e6;
}
.ngrams-table-container__navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
margin-top: 16px;
margin-bottom: 16px;
}
.ngrams-table-container__add-term {
margin-top: 12px;
......@@ -10921,20 +10911,46 @@ select.form-control {
top: 1px;
padding-right: 8px;
}
.ngrams-table-container__action-term {
.ngrams-table-container__selection-cta {
margin-left: 12px;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-size: 15px;
}
.ngrams-table-container__action-term::before {
content: "┌";
color: #6C757D;
font-size: 18px;
line-height: 0;
position: relative;
padding-right: 16px;
.ngrams-table-container__table-wrapper {
margin-left: -16px;
margin-right: -16px;
margin-bottom: -32px;
}
.ngrams-table-container__actions {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #000000;
position: sticky;
top: 56px;
z-index: 2;
padding: 0.75rem 16px;
border-bottom: 2px solid #dee2e6;
}
.ngrams-table-container__table {
display: flex;
gap: 16px;
}
.ngrams-table-container__table .ngrams-tree-edit-real {
width: 416px;
min-width: 264px;
flex-grow: 0;
flex-shrink: 1;
align-self: flex-start;
position: sticky;
margin-top: 16px;
margin-bottom: 16px;
top: calc( 56px + 64px + 16px );
}
.ngrams-table-container__table thead th {
border-top-width: 0;
}
.ngrams-table-container__table tbody {
padding-left: 1.25rem;
......@@ -10951,10 +10967,8 @@ select.form-control {
outline: 0;
}
.ngrams-table-container__table th:nth-child(2) {
padding-left: 32px;
}
.ngrams-table-container__table th:nth-child(3) {
width: 25%;
min-width: 280px;
}
.ngrams-table-container__table td:nth-child(1) {
padding: initial;
......@@ -10970,23 +10984,20 @@ select.form-control {
}
.ngrams-table-container__table td:nth-child(2) {
padding-left: 32px;
margin-left: 12px;
}
.ngrams-table-container__table td:nth-child(2) .tree-loaded-plus {
.ngrams-table-container__table td:nth-child(3) .tree-loaded-plus {
visibility: hidden;
position: relative;
top: 1px;
margin-left: 12px;
margin-left: 8px;
}
.ngrams-table-container__table tr:hover .tree-loaded-plus {
visibility: unset;
}
.ngrams-tree-edit-real {
min-width: 416px;
width: fit-content;
border-color: #FF550B;
margin-top: 16px;
margin-bottom: 16px;
}
.ngrams-tree-edit-real__actions {
display: flex;
......
......@@ -10834,22 +10834,12 @@ select.form-control {
z-index: initial;
}
.ngrams-table-container__header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
position: sticky;
top: 56px;
z-index: 2;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid #dee2e6;
}
.ngrams-table-container__navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
margin-top: 16px;
margin-bottom: 16px;
}
.ngrams-table-container__add-term {
margin-top: 12px;
......@@ -10868,20 +10858,46 @@ select.form-control {
top: 1px;
padding-right: 8px;
}
.ngrams-table-container__action-term {
.ngrams-table-container__selection-cta {
margin-left: 12px;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-size: 15px;
}
.ngrams-table-container__action-term::before {
content: "┌";
color: #CED4DA;
font-size: 18px;
line-height: 0;
position: relative;
padding-right: 16px;
.ngrams-table-container__table-wrapper {
margin-left: -16px;
margin-right: -16px;
margin-bottom: -32px;
}
.ngrams-table-container__actions {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
position: sticky;
top: 56px;
z-index: 2;
padding: 0.75rem 16px;
border-bottom: 2px solid #dee2e6;
}
.ngrams-table-container__table {
display: flex;
gap: 16px;
}
.ngrams-table-container__table .ngrams-tree-edit-real {
width: 416px;
min-width: 264px;
flex-grow: 0;
flex-shrink: 1;
align-self: flex-start;
position: sticky;
margin-top: 16px;
margin-bottom: 16px;
top: calc( 56px + 64px + 16px );
}
.ngrams-table-container__table thead th {
border-top-width: 0;
}
.ngrams-table-container__table tbody {
padding-left: 1.25rem;
......@@ -10898,10 +10914,8 @@ select.form-control {
outline: 0;
}
.ngrams-table-container__table th:nth-child(2) {
padding-left: 32px;
}
.ngrams-table-container__table th:nth-child(3) {
width: 25%;
min-width: 280px;
}
.ngrams-table-container__table td:nth-child(1) {
padding: initial;
......@@ -10917,23 +10931,20 @@ select.form-control {
}
.ngrams-table-container__table td:nth-child(2) {
padding-left: 32px;
margin-left: 12px;
}
.ngrams-table-container__table td:nth-child(2) .tree-loaded-plus {
.ngrams-table-container__table td:nth-child(3) .tree-loaded-plus {
visibility: hidden;
position: relative;
top: 1px;
margin-left: 12px;
margin-left: 8px;
}
.ngrams-table-container__table tr:hover .tree-loaded-plus {
visibility: unset;
}
.ngrams-tree-edit-real {
min-width: 416px;
width: fit-content;
border-color: #005a9a;
margin-top: 16px;
margin-bottom: 16px;
}
.ngrams-tree-edit-real__actions {
display: flex;
......
......@@ -10596,22 +10596,12 @@ select.form-control {
z-index: initial;
}
.ngrams-table-container__header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
position: sticky;
top: 56px;
z-index: 2;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid #dee2e6;
}
.ngrams-table-container__navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
margin-top: 16px;
margin-bottom: 16px;
}
.ngrams-table-container__add-term {
margin-top: 12px;
......@@ -10630,20 +10620,46 @@ select.form-control {
top: 1px;
padding-right: 8px;
}
.ngrams-table-container__action-term {
.ngrams-table-container__selection-cta {
margin-left: 12px;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-size: 15px;
}
.ngrams-table-container__action-term::before {
content: "┌";
color: #CED4DA;
font-size: 18px;
line-height: 0;
position: relative;
padding-right: 16px;
.ngrams-table-container__table-wrapper {
margin-left: -16px;
margin-right: -16px;
margin-bottom: -32px;
}
.ngrams-table-container__actions {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
position: sticky;
top: 56px;
z-index: 2;
padding: 0.75rem 16px;
border-bottom: 2px solid #dee2e6;
}
.ngrams-table-container__table {
display: flex;
gap: 16px;
}
.ngrams-table-container__table .ngrams-tree-edit-real {
width: 416px;
min-width: 264px;
flex-grow: 0;
flex-shrink: 1;
align-self: flex-start;
position: sticky;
margin-top: 16px;
margin-bottom: 16px;
top: calc( 56px + 64px + 16px );
}
.ngrams-table-container__table thead th {
border-top-width: 0;
}
.ngrams-table-container__table tbody {
padding-left: 1.25rem;
......@@ -10660,10 +10676,8 @@ select.form-control {
outline: 0;
}
.ngrams-table-container__table th:nth-child(2) {
padding-left: 32px;
}
.ngrams-table-container__table th:nth-child(3) {
width: 25%;
min-width: 280px;
}
.ngrams-table-container__table td:nth-child(1) {
padding: initial;
......@@ -10679,23 +10693,20 @@ select.form-control {
}
.ngrams-table-container__table td:nth-child(2) {
padding-left: 32px;
margin-left: 12px;
}
.ngrams-table-container__table td:nth-child(2) .tree-loaded-plus {
.ngrams-table-container__table td:nth-child(3) .tree-loaded-plus {
visibility: hidden;
position: relative;
top: 1px;
margin-left: 12px;
margin-left: 8px;
}
.ngrams-table-container__table tr:hover .tree-loaded-plus {
visibility: unset;
}
.ngrams-tree-edit-real {
min-width: 416px;
width: fit-content;
border-color: #2f3c48;
margin-top: 16px;
margin-bottom: 16px;
}
.ngrams-tree-edit-real__actions {
display: flex;
......
......@@ -10844,22 +10844,12 @@ select.form-control {
z-index: initial;
}
.ngrams-table-container__header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
position: sticky;
top: 56px;
z-index: 2;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid #dee2e6;
}
.ngrams-table-container__navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
margin-top: 16px;
margin-bottom: 16px;
}
.ngrams-table-container__add-term {
margin-top: 12px;
......@@ -10878,20 +10868,46 @@ select.form-control {
top: 1px;
padding-right: 8px;
}
.ngrams-table-container__action-term {
.ngrams-table-container__selection-cta {
margin-left: 12px;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-size: 15px;
}
.ngrams-table-container__action-term::before {
content: "┌";
color: #CED4DA;
font-size: 18px;
line-height: 0;
position: relative;
padding-right: 16px;
.ngrams-table-container__table-wrapper {
margin-left: -16px;
margin-right: -16px;
margin-bottom: -32px;
}
.ngrams-table-container__actions {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
position: sticky;
top: 56px;
z-index: 2;
padding: 0.75rem 16px;
border-bottom: 2px solid #dee2e6;
}
.ngrams-table-container__table {
display: flex;
gap: 16px;
}
.ngrams-table-container__table .ngrams-tree-edit-real {
width: 416px;
min-width: 264px;
flex-grow: 0;
flex-shrink: 1;
align-self: flex-start;
position: sticky;
margin-top: 16px;
margin-bottom: 16px;
top: calc( 56px + 64px + 16px );
}
.ngrams-table-container__table thead th {
border-top-width: 0;
}
.ngrams-table-container__table tbody {
padding-left: 1.25rem;
......@@ -10908,10 +10924,8 @@ select.form-control {
outline: 0;
}
.ngrams-table-container__table th:nth-child(2) {
padding-left: 32px;
}
.ngrams-table-container__table th:nth-child(3) {
width: 25%;
min-width: 280px;
}
.ngrams-table-container__table td:nth-child(1) {
padding: initial;
......@@ -10927,23 +10941,20 @@ select.form-control {
}
.ngrams-table-container__table td:nth-child(2) {
padding-left: 32px;
margin-left: 12px;
}
.ngrams-table-container__table td:nth-child(2) .tree-loaded-plus {
.ngrams-table-container__table td:nth-child(3) .tree-loaded-plus {
visibility: hidden;
position: relative;
top: 1px;
margin-left: 12px;
margin-left: 8px;
}
.ngrams-table-container__table tr:hover .tree-loaded-plus {
visibility: unset;
}
.ngrams-tree-edit-real {
min-width: 416px;
width: fit-content;
border-color: #083358;
margin-top: 16px;
margin-bottom: 16px;
}
.ngrams-tree-edit-real__actions {
display: flex;
......
......@@ -10845,22 +10845,12 @@ select.form-control {
z-index: initial;
}
.ngrams-table-container__header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
position: sticky;
top: 56px;
z-index: 2;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid #dee2e6;
}
.ngrams-table-container__navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
margin-top: 16px;
margin-bottom: 16px;
}
.ngrams-table-container__add-term {
margin-top: 12px;
......@@ -10879,20 +10869,46 @@ select.form-control {
top: 1px;
padding-right: 8px;
}
.ngrams-table-container__action-term {
.ngrams-table-container__selection-cta {
margin-left: 12px;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-size: 15px;
}
.ngrams-table-container__action-term::before {
content: "┌";
color: #CED4DA;
font-size: 18px;
line-height: 0;
position: relative;
padding-right: 16px;
.ngrams-table-container__table-wrapper {
margin-left: -16px;
margin-right: -16px;
margin-bottom: -32px;
}
.ngrams-table-container__actions {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
position: sticky;
top: 56px;
z-index: 2;
padding: 0.75rem 16px;
border-bottom: 2px solid #dee2e6;
}
.ngrams-table-container__table {
display: flex;
gap: 16px;
}
.ngrams-table-container__table .ngrams-tree-edit-real {
width: 416px;
min-width: 264px;
flex-grow: 0;
flex-shrink: 1;
align-self: flex-start;
position: sticky;
margin-top: 16px;
margin-bottom: 16px;
top: calc( 56px + 64px + 16px );
}
.ngrams-table-container__table thead th {
border-top-width: 0;
}
.ngrams-table-container__table tbody {
padding-left: 1.25rem;
......@@ -10909,10 +10925,8 @@ select.form-control {
outline: 0;
}
.ngrams-table-container__table th:nth-child(2) {
padding-left: 32px;
}
.ngrams-table-container__table th:nth-child(3) {
width: 25%;
min-width: 280px;
}
.ngrams-table-container__table td:nth-child(1) {
padding: initial;
......@@ -10928,23 +10942,20 @@ select.form-control {
}
.ngrams-table-container__table td:nth-child(2) {
padding-left: 32px;
margin-left: 12px;
}
.ngrams-table-container__table td:nth-child(2) .tree-loaded-plus {
.ngrams-table-container__table td:nth-child(3) .tree-loaded-plus {
visibility: hidden;
position: relative;
top: 1px;
margin-left: 12px;
margin-left: 8px;
}
.ngrams-table-container__table tr:hover .tree-loaded-plus {
visibility: unset;
}
.ngrams-tree-edit-real {
min-width: 416px;
width: fit-content;
border-color: #222222;
margin-top: 16px;
margin-bottom: 16px;
}
.ngrams-tree-edit-real__actions {
display: flex;
......
......@@ -3,7 +3,7 @@ module Gargantext.Components.NgramsTable
, CommonProps
, TreeEdit
, NgramsTreeEditProps
, getNgramsChildrenAff
, getNgramsChildrenAffRequest
, initialTreeEdit
, mainNgramsTable
) where
......@@ -127,13 +127,15 @@ type PreConversionRows = Seq.Seq NgramsElement
type TableContainerProps =
( addCallback :: String -> Effect Unit
, dispatch :: Dispatch
, getNgramsChildren :: NgramsTerm -> Aff (Array NgramsTerm)
, getNgramsChildrenAff :: Maybe (NgramsTerm -> Aff (Array NgramsTerm))
, getNgramsChildren :: Maybe (NgramsTerm -> Array NgramsTerm)
, ngramsSelection :: Set NgramsTerm
, ngramsTable :: NgramsTable
, path :: T.Box PageParams
, queryExactMatches :: Boolean
, syncResetButton :: Array R.Element
, tabNgramType :: CTabNgramType
, treeEdit :: Record NgramsTreeEditProps
)
tableContainer :: Record TableContainerProps -> Record TT.TableContainerProps -> R.Element
......@@ -141,13 +143,13 @@ tableContainer p q = R.createElement (tableContainerCpt p) q []
tableContainerCpt :: Record TableContainerProps -> R.Component TT.TableContainerProps
tableContainerCpt { addCallback
, dispatch
, getNgramsChildren
, ngramsSelection
, ngramsTable: ngramsTableCache
, path
, queryExactMatches
, syncResetButton
, tabNgramType
, treeEdit
} = here.component "tableContainer" cpt where
cpt props _ = do
-- | States
......@@ -186,7 +188,7 @@ tableContainerCpt { addCallback
pure $
H.div
{ classname: "ngrams-table-container" }
{ className: "ngrams-table-container" }
[
-- Portal filters
......@@ -278,15 +280,19 @@ tableContainerCpt { addCallback
]
,
H.div
{ className: "card" }
{ className: "ngrams-table-container__table-wrapper" }
[
H.div
{ className: intercalate " "
[ "ngrams-table-container__header"
[ "ngrams-table-container__actions"
]
}
[
B.wad
[]
syncResetButton
,
B.wad
[]
[
......@@ -294,10 +300,6 @@ tableContainerCpt { addCallback
selectButtons (selectionsLength ngramsSelection)
]
,
B.wad
[]
syncResetButton
]
,
H.div
......@@ -319,6 +321,8 @@ tableContainerCpt { addCallback
{}
props.tableBody
]
,
ngramsTreeEdit (treeEdit)
]
]
]
......@@ -346,7 +350,7 @@ tableContainerCpt { addCallback
selectButtons 0 = mempty
selectButtons count =
H.div
{ className: "ngrams-table-container__action-term" }
{ className: "ngrams-table-container__selection-cta" }
[
B.wad
[]
......@@ -502,7 +506,7 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
, path
, state
, tabNgramType
, treeEdit: treeEdit@{ getNgramsChildren }
, treeEdit: treeEdit@{ getNgramsChildrenAff, getNgramsChildren }
, versioned: Versioned { data: initTable }
} _ = do
treeEdit'@{ ngramsParent } <- T.useLive T.unequal treeEdit.box
......@@ -562,6 +566,7 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
convertRow ngramsElement =
{ row: renderNgramsItem { dispatch: performAction
, getNgramsChildrenAff
, getNgramsChildren
, isEditing
, ngrams: ngramsElement ^. _NgramsElement <<< _ngrams
......@@ -629,6 +634,7 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
, container: tableContainer
{ addCallback
, dispatch: performAction
, getNgramsChildrenAff
, getNgramsChildren
, ngramsSelection
, ngramsTable
......@@ -636,6 +642,7 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
, queryExactMatches: exactMatches
, syncResetButton: [ syncResetButton ]
, tabNgramType
, treeEdit
}
, params
, rows: filteredConvertedRows
......@@ -650,7 +657,7 @@ loadedNgramsTableBodyCpt = here.component "loadedNgramsTableBody" cpt where
scoreType
}
where
colNames = TT.ColumnName <$> [ "Select", "Terms", "Score"] -- see convOrderBy
colNames = TT.ColumnName <$> [ "Select", "Score", "Terms"] -- see convOrderBy
ngramsTableOrderWith :: Maybe (TT.OrderByDirection TT.ColumnName)
-> Seq.Seq NgramsElement
......@@ -783,8 +790,8 @@ type MainNgramsTableProps = (
| CommonProps
)
getNgramsChildrenAff :: Session -> NodeID -> Array ListId -> TabType -> NgramsTerm -> Aff (Array NgramsTerm)
getNgramsChildrenAff session nodeId listIds tabType (NormNgramsTerm ngrams) = do
getNgramsChildrenAffRequest :: Session -> NodeID -> Array ListId -> TabType -> NgramsTerm -> Aff (Array NgramsTerm)
getNgramsChildrenAffRequest session nodeId listIds tabType (NormNgramsTerm ngrams) = do
res :: Either RESTError ({ data :: Array { children :: Array String, ngrams :: String }}) <- get session $ Routes.GetNgrams params (Just nodeId)
case res of
Left err -> pure []
......@@ -831,23 +838,22 @@ mainNgramsTableCpt = here.component "mainNgramsTable" cpt
case cacheState' of
NT.CacheOn -> pure $ R.fragment
[ loadedNgramsTableHeader { searchQuery, params }
, ngramsTreeEdit (treeEdit)
, mainNgramsTableCacheOn (Record.merge props { state })
]
NT.CacheOff -> pure $ R.fragment
[loadedNgramsTableHeader { searchQuery, params}
, ngramsTreeEdit (treeEdit)
, mainNgramsTableCacheOff (Record.merge props { state })
]
type NgramsTreeEditProps =
( box :: T.Box TreeEdit
, getNgramsChildren :: NgramsTerm -> Aff (Array NgramsTerm)
( box :: T.Box TreeEdit
, getNgramsChildrenAff :: Maybe (NgramsTerm -> Aff (Array NgramsTerm))
, getNgramsChildren :: Maybe (NgramsTerm -> Array NgramsTerm)
--, ngramsLocalPatch :: T.Box NgramsTablePatch
, onCancelRef :: NgramsActionRef
, onNgramsClickRef :: R.Ref (Maybe NgramsClick)
, onSaveRef :: NgramsActionRef
, onCancelRef :: NgramsActionRef
, onNgramsClickRef :: R.Ref (Maybe NgramsClick)
, onSaveRef :: NgramsActionRef
)
ngramsTreeEdit :: R2.Leaf NgramsTreeEditProps
......@@ -860,14 +866,13 @@ ngramsTreeEditCpt = here.component "ngramsTreeEdit" cpt where
ngramsParentFocused <- T.useFocused (_.ngramsParent) (\a b -> b { ngramsParent = a}) box
ngramsParentFocused' <- T.useLive T.unequal ngramsParentFocused
let
gutter = B.wad_ [ "mb-2", "d-inline-block" ]
pure $ if isEditingFocused'
pure $
if isEditingFocused'
then case ngramsParentFocused' of
Nothing -> gutter
Nothing -> mempty
Just ngramsParent' -> ngramsTreeEditReal (Record.merge props { ngramsParent' })
else gutter
else mempty
type NgramsTreeEditRealProps =
( ngramsParent' :: NgramsTerm
......@@ -878,6 +883,7 @@ ngramsTreeEditReal = R2.leaf ngramsTreeEditRealCpt
ngramsTreeEditRealCpt :: R.Component NgramsTreeEditRealProps
ngramsTreeEditRealCpt = here.component "ngramsTreeEditReal" cpt where
cpt { box
, getNgramsChildrenAff
, getNgramsChildren
, ngramsParent'
, onCancelRef
......@@ -936,7 +942,8 @@ ngramsTreeEditRealCpt = here.component "ngramsTreeEditReal" cpt where
{ className: "card-body" }
[
renderNgramsTree
{ getNgramsChildren: gnc
{ getNgramsChildrenAff: Just gnc
, getNgramsChildren: Nothing
, ngramsClick
, ngramsDepth
, ngramsEdit
......
......@@ -3,7 +3,6 @@ module Gargantext.Components.NgramsTable.Tree where
import Gargantext.Prelude
import Data.Array as A
import Data.Either (Either(..))
import Data.Lens ((^..), (^.), view)
import Data.Lens.Fold (folded)
import Data.Lens.Index (ix)
......@@ -12,16 +11,16 @@ import Data.List as L
import Data.Maybe (Maybe(..), maybe)
import Data.Set (Set)
import Data.Set as Set
import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Effect.Aff (Aff)
import Effect.Aff (Aff, launchAff_)
import Effect.Class (liftEffect)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Variant(..))
import Gargantext.Components.Bootstrap.Types (Variant(..))
import Gargantext.Components.Table as Tbl
import Gargantext.Config.REST (logRESTError)
import Gargantext.Core.NgramsTable.Functions (applyNgramsPatches, setTermListA, tablePatchHasNgrams)
import Gargantext.Core.NgramsTable.Types (Action(..), NgramsClick, NgramsDepth, NgramsElement, NgramsTable, NgramsTablePatch, NgramsTerm, _NgramsElement, _NgramsRepoElement, _children, _list, _ngrams, _occurrences, ngramsTermText, replace)
import Gargantext.Hooks.Loader (useLoader)
import Gargantext.Prelude (Unit, bind, const, map, mempty, not, otherwise, pure, show, unit, ($), (+), (<<<), (<>), (==), (>), (||))
import Gargantext.Hooks.FirstEffect (useFirstEffect')
import Gargantext.Types as GT
import Gargantext.Utils ((?))
import Gargantext.Utils.Reactix as R2
......@@ -38,7 +37,8 @@ here = R2.here "Gargantext.Components.NgramsTable.Tree"
type RenderNgramsTree =
( getNgramsChildren :: NgramsTerm -> Aff (Array NgramsTerm)
( getNgramsChildrenAff :: Maybe (NgramsTerm -> Aff (Array NgramsTerm))
, getNgramsChildren :: Maybe (NgramsTerm -> Array NgramsTerm)
--, ngramsChildren :: List NgramsTerm
, ngramsClick :: NgramsClick
, ngramsDepth :: NgramsDepth
......@@ -53,13 +53,20 @@ renderNgramsTree p = R.createElement renderNgramsTreeCpt p []
renderNgramsTreeCpt :: R.Component RenderNgramsTree
renderNgramsTreeCpt = here.component "renderNgramsTree" cpt
where
cpt { getNgramsChildren, ngramsClick, ngramsDepth, ngramsEdit, ngramsStyle } _ = do
cpt { getNgramsChildrenAff
, getNgramsChildren
, ngramsClick
, ngramsDepth
, ngramsEdit
, ngramsStyle
} _ = do
pure $
H.ul
{ className: "render-ngrams-tree" }
[ H.span { className: "tree" }
[ H.span { className: "righthanded" }
[ tree { getNgramsChildren
, getNgramsChildrenAff
--, ngramsChildren
, ngramsClick
, ngramsDepth
......@@ -88,28 +95,61 @@ tag tagProps =
-}
type TreeProps =
( getNgramsChildren :: NgramsTerm -> Aff (Array NgramsTerm)
, ngramsEdit :: NgramsClick
( getNgramsChildrenAff :: Maybe (NgramsTerm -> Aff (Array NgramsTerm))
, getNgramsChildren :: Maybe (NgramsTerm -> Array NgramsTerm)
, ngramsEdit :: NgramsClick
--, ngramsTable :: NgramsTable
| TagProps
)
-- | /!\ Multiple issues to deal in this specific component:
-- | - stack of patch surgery: monolitic use of the <doctable> +
-- | design choice of rendering ngrams children on the fly +
-- | setting up a facade for the `getNgramsChildren` thunk ALWAYS as an
-- | `Aff` even if not necessary
-- | - ReactJS re-rendering flaw causing flickering UI effect
-- | - PureScript pattern matching recursive limitation
-- |
-- | ↳ workaround: employ a delegation pattern with the an input bearing
-- | both the `Aff` thunk and a pure one. Note that we could create a
-- | Typing way, due to the PureScript limitation (see above)
tree :: Record TreeProps -> R.Element
tree p = R.createElement treeCpt p []
treeCpt :: R.Component TreeProps
treeCpt = here.component "tree" cpt where
cpt props@{ getNgramsChildren, ngramsDepth } _ = do
let loader p = do
res <- getNgramsChildren p
pure $ Right res
let render nc = treeLoaded (Record.merge props { ngramsChildren: L.fromFoldable nc })
useLoader { errorHandler
, loader
, path: ngramsDepth.ngrams
, render }
where
errorHandler = logRESTError here "[tree]"
cpt props@{ getNgramsChildrenAff
, getNgramsChildren
, ngramsDepth
} _ = do
-- | States
-- |
defaultNgramsChildren <- R.useMemo $ const $
maybe
(mempty :: List NgramsTerm)
(\thunk -> L.fromFoldable $ thunk ngramsDepth.ngrams)
getNgramsChildren
ngramsChildren /\ ngramsChildren' <-
R2.useBox' (defaultNgramsChildren :: List NgramsTerm)
-- | Hooks
-- |
useFirstEffect' $ maybe
(R.nothing)
(\aff -> launchAff_ do
res <- aff ngramsDepth.ngrams
liftEffect $
flip T.write_ ngramsChildren' $ L.fromFoldable res
)
(getNgramsChildrenAff)
-- | Render
-- |
pure $
treeLoaded (Record.merge props { ngramsChildren })
type TreeLoaded =
( ngramsChildren :: List NgramsTerm
......@@ -183,8 +223,9 @@ treeLoadedCpt = here.component "treeLoaded" cpt where
H.ul {} <<< map (\ngrams -> tree ((Record.delete (Proxy :: Proxy "ngramsChildren") params) { ngramsDepth = {depth, ngrams} })) <<< L.toUnfoldable
type RenderNgramsItem =
( dispatch :: Action -> Effect Unit
, getNgramsChildren :: NgramsTerm -> Aff (Array NgramsTerm)
( dispatch :: Action -> Effect Unit
, getNgramsChildrenAff :: Maybe (NgramsTerm -> Aff (Array NgramsTerm))
, getNgramsChildren :: Maybe (NgramsTerm -> Array NgramsTerm)
, isEditing :: T.Box Boolean
, ngrams :: NgramsTerm
, ngramsElement :: NgramsElement
......@@ -212,6 +253,10 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
pure $ Tbl.makeRow
[
selected
,
B.wad'
[ "pl-3" ] $
show $ A.length $ A.fromFoldable (ngramsElement ^. _NgramsElement <<< _occurrences)
,
H.div {}
( if isEditing'
......@@ -231,7 +276,8 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
else
[
renderNgramsTree
{ getNgramsChildren: getNgramsChildren'
{ getNgramsChildrenAff: Nothing
, getNgramsChildren: Just $ getNgramsChildren'
, ngramsClick
, ngramsDepth
, ngramsEdit
......@@ -240,10 +286,6 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
}
]
)
,
B.wad'
[ "pl-3" ] $
show $ A.length $ A.fromFoldable (ngramsElement ^. _NgramsElement <<< _occurrences)
]
where
ngramsDepth = { ngrams, depth: 0 }
......@@ -261,8 +303,8 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
, ngramsStagePatch: mempty
, ngramsValidPatch: mempty
, ngramsVersion: 0 } ngramsTable
getNgramsChildren' :: NgramsTerm -> Aff (Array NgramsTerm)
getNgramsChildren' n = pure $ A.fromFoldable $ ngramsChildren n
getNgramsChildren' :: NgramsTerm -> Array NgramsTerm
getNgramsChildren' n = A.fromFoldable $ ngramsChildren n
ngramsChildren n = tbl ^.. ix n <<< _NgramsRepoElement <<< _children <<< folded
ngramsClick =
Just <<< dispatch <<< CoreAction <<< cycleTermListItem <<< view _ngrams
......
......@@ -131,7 +131,8 @@ ngramsViewCpt = here.component "ngramsView" cpt where
, tabType: TabPairing (TabNgramType $ modeTabType mode)
, tabNgramType: modeTabType' mode
, treeEdit: { box: treeEditBox
, getNgramsChildren: \_ -> pure []
, getNgramsChildrenAff: Nothing
, getNgramsChildren: Nothing
, onCancelRef
, onNgramsClickRef
, onSaveRef }
......
......@@ -161,7 +161,8 @@ ngramsViewCpt = here.component "ngramsView" cpt
, tabNgramType
, tabType
, treeEdit: { box: treeEditBox
, getNgramsChildren: \_ -> pure []
, getNgramsChildrenAff: Nothing
, getNgramsChildren: Nothing
, onCancelRef
, onNgramsClickRef
, onSaveRef }
......
......@@ -121,7 +121,8 @@ ngramsViewCpt = here.component "ngramsView" cpt where
, tabNgramType
, tabType
, treeEdit: { box: treeEditBox
, getNgramsChildren: NT.getNgramsChildrenAff session nodeId listIds tabType
, getNgramsChildrenAff: Just $ NT.getNgramsChildrenAffRequest session nodeId listIds tabType
, getNgramsChildren: Nothing
, onCancelRef
, onNgramsClickRef
, onSaveRef }
......
......@@ -63,7 +63,6 @@
flex-grow: 0
flex-shrink: 1
///////////////////////////////////////////////////:
.ngrams-table-search-button
......@@ -79,22 +78,12 @@
.ngrams-table-container
&__header
display: flex
align-items: center
justify-content: space-between
background-color: $card-bg
position: sticky
top: $topbar-height
z-index: z-index('main', 'topbar')
padding: $card-spacer-y $card-spacer-x
border-bottom: 1px solid $border-color
&__navigation
display: flex
justify-content: space-between
align-items: center
margin-bottom: space-x(1)
margin-top: space-x(2)
margin-bottom: space-x(2)
&__add-term
margin-top: space-x(1.5)
......@@ -115,22 +104,55 @@
top: $offset-y
padding-right: space-x(1)
&__action-term
&__selection-cta
margin-left: space-x(1.5)
display: flex
align-items: center
gap: space-x(1)
font-size: 14px
font-size: 15px
&::before
content: "┌"
color: $gray-400
font-size: 18px
line-height: 0
position: relative
padding-right: space-x(2)
&__table-wrapper
// @XXX: reset "main-page__main-route" wrapper margin
// see Gargantext.Components.Router)
margin-left: - space-x(2)
margin-right: - space-x(2)
margin-bottom: - space-x(4) // (+ another trimmed gutter)
&__actions
display: flex
align-items: center
justify-content: space-between
background-color: $body-bg
position: sticky
top: $topbar-height
z-index: z-index('main', 'topbar')
padding: $card-spacer-y space-x(2)
border-bottom: 2px solid $border-color
&__table
display: flex
gap: space-x(2)
.ngrams-tree-edit-real
$width: 416px
$min-width: 264px
$empirical-action-row-height: 64px
$offset-y: space-x(2)
width: $width
min-width: $min-width
flex-grow: 0
flex-shrink: 1
align-self: flex-start
position: sticky
margin-top: $offset-y
margin-bottom: $offset-y
top: calc( #{$topbar-height} + #{$empirical-action-row-height} + #{$offset-y} )
// reduce top border → due to the "__actions" bottom one
thead th
border-top-width: 0
tbody
padding-left: $card-spacer-x
......@@ -140,11 +162,12 @@
&__table
$select-column-width: 100px
$score-column-width: 25%
$score-column-min-width: 280px
/// as of now (one-based index):
/// nth(1) → "Select"
/// nth(2) → "Terms"
/// nth(3) → "Score"
/// nth(2) → "Score"
/// nth(3) → "Terms"
// (header)
th:nth-child(1)
......@@ -153,9 +176,8 @@
input
@include clickable
th:nth-child(2)
padding-left: space-x(4)
th:nth-child(3)
width: $score-column-width
min-width: $score-column-min-width
// (rows)
td:nth-child(1)
......@@ -171,6 +193,8 @@
padding-top: $offset-y
td:nth-child(2)
padding-left: space-x(4)
margin-left: space-x(1.5)
td:nth-child(3)
.tree-loaded-plus
$offset-y: 1px
......@@ -178,7 +202,7 @@
visibility: hidden
position: relative
top: $offset-y
margin-left: space-x(1.5)
margin-left: space-x(1)
tr:hover
......@@ -189,14 +213,7 @@
///////////////////////////////////////////////////:
.ngrams-tree-edit-real
// empirical value fitting the best size of the render tree
$min-with: 416px
min-width: $min-with
width: fit-content // growing purpose
border-color: $primary
margin-top: space-x(2)
margin-bottom: space-x(2)
&__actions
display: flex
......
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