Commit 7a559d4e authored by arturo's avatar arturo

[phylo] add document focus

* #375
parent 61422c57
Pipeline #2889 failed with stage
in 0 seconds
...@@ -7864,14 +7864,15 @@ input[type=range]:-moz-focusring { ...@@ -7864,14 +7864,15 @@ input[type=range]:-moz-focusring {
background-color: #121212; background-color: #121212;
} }
.graph-doc-list__item--selected::before { .graph-doc-list__item--selected::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ""; content: "";
position: absolute; position: absolute;
z-index: 1; z-index: 1;
width: 2px; width: 2px;
background-color: #0F81C7; background-color: #0F81C7;
left: 0;
top: 0;
bottom: 0;
} }
.graph-doc-list__item--selected:first-child::before { .graph-doc-list__item--selected:first-child::before {
border-top-left-radius: 0.25rem; border-top-left-radius: 0.25rem;
...@@ -9280,6 +9281,20 @@ select.form-control { ...@@ -9280,6 +9281,20 @@ select.form-control {
border-right: 1px solid #dee2e6; border-right: 1px solid #dee2e6;
} }
.phylo__focus {
flex-grow: 1;
pointer-events: all;
position: relative;
}
.phylo__focus__inner {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
background-color: #000000;
}
.phylo-isoline { .phylo-isoline {
display: flex; display: flex;
position: relative; position: relative;
...@@ -9443,7 +9458,7 @@ select.form-control { ...@@ -9443,7 +9458,7 @@ select.form-control {
font-weight: bold; font-weight: bold;
} }
.phylo-selection-tab__selection { .phylo-selection-tab__selection {
margin: 16px 20px 0; margin: 16px 20px;
} }
.phylo-selection-tab__selection__item { .phylo-selection-tab__selection__item {
white-space: normal; white-space: normal;
...@@ -9475,6 +9490,55 @@ select.form-control { ...@@ -9475,6 +9490,55 @@ select.form-control {
color: #ADB5BD; color: #ADB5BD;
text-align: center; text-align: center;
} }
.phylo-selection-tab__extracted-docs {
margin: 16px 20px;
}
.phylo-doc-list__item {
cursor: pointer;
display: flex;
align-items: flex-start;
transition: all 0.2s ease-in-out;
}
.phylo-doc-list__item:focus {
outline: 0;
}
.phylo-doc-list__item:hover {
background-color: #121212;
}
.phylo-doc-list__item--selected::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
position: absolute;
z-index: 1;
width: 2px;
background-color: #0F81C7;
}
.phylo-doc-list__item--selected:first-child::before {
border-top-left-radius: 0.25rem;
}
.phylo-doc-list__item--selected:last-child::before {
border-bottom-left-radius: 0.25rem;
}
.phylo-doc-list__item__main {
flex-grow: 1;
padding-right: 1.25rem;
}
.phylo-doc-list__item__title, .phylo-doc-list__item__source, .phylo-doc-list__item__date {
line-height: 1.3;
margin-bottom: 4px;
}
.phylo-doc-list__item__source {
font-size: 15px;
color: #DEE2E6;
}
.phylo-doc-list__item__date {
font-size: 14px;
color: #CED4DA;
}
.phylo-toolbar { .phylo-toolbar {
display: flex; display: flex;
......
...@@ -7817,14 +7817,15 @@ input[type=range]:-moz-focusring { ...@@ -7817,14 +7817,15 @@ input[type=range]:-moz-focusring {
background-color: #FCFCFC; background-color: #FCFCFC;
} }
.graph-doc-list__item--selected::before { .graph-doc-list__item--selected::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ""; content: "";
position: absolute; position: absolute;
z-index: 1; z-index: 1;
width: 2px; width: 2px;
background-color: #17a2b8; background-color: #17a2b8;
left: 0;
top: 0;
bottom: 0;
} }
.graph-doc-list__item--selected:first-child::before { .graph-doc-list__item--selected:first-child::before {
border-top-left-radius: 0.25rem; border-top-left-radius: 0.25rem;
...@@ -9233,6 +9234,20 @@ select.form-control { ...@@ -9233,6 +9234,20 @@ select.form-control {
border-right: 1px solid #dee2e6; border-right: 1px solid #dee2e6;
} }
.phylo__focus {
flex-grow: 1;
pointer-events: all;
position: relative;
}
.phylo__focus__inner {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
background-color: #fff;
}
.phylo-isoline { .phylo-isoline {
display: flex; display: flex;
position: relative; position: relative;
...@@ -9396,7 +9411,7 @@ select.form-control { ...@@ -9396,7 +9411,7 @@ select.form-control {
font-weight: bold; font-weight: bold;
} }
.phylo-selection-tab__selection { .phylo-selection-tab__selection {
margin: 16px 20px 0; margin: 16px 20px;
} }
.phylo-selection-tab__selection__item { .phylo-selection-tab__selection__item {
white-space: normal; white-space: normal;
...@@ -9428,6 +9443,55 @@ select.form-control { ...@@ -9428,6 +9443,55 @@ select.form-control {
color: #ADB5BD; color: #ADB5BD;
text-align: center; text-align: center;
} }
.phylo-selection-tab__extracted-docs {
margin: 16px 20px;
}
.phylo-doc-list__item {
cursor: pointer;
display: flex;
align-items: flex-start;
transition: all 0.2s ease-in-out;
}
.phylo-doc-list__item:focus {
outline: 0;
}
.phylo-doc-list__item:hover {
background-color: #FCFCFC;
}
.phylo-doc-list__item--selected::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
position: absolute;
z-index: 1;
width: 2px;
background-color: #17a2b8;
}
.phylo-doc-list__item--selected:first-child::before {
border-top-left-radius: 0.25rem;
}
.phylo-doc-list__item--selected:last-child::before {
border-bottom-left-radius: 0.25rem;
}
.phylo-doc-list__item__main {
flex-grow: 1;
padding-right: 1.25rem;
}
.phylo-doc-list__item__title, .phylo-doc-list__item__source, .phylo-doc-list__item__date {
line-height: 1.3;
margin-bottom: 4px;
}
.phylo-doc-list__item__source {
font-size: 15px;
color: #495057;
}
.phylo-doc-list__item__date {
font-size: 14px;
color: #6C757D;
}
.phylo-toolbar { .phylo-toolbar {
display: flex; display: flex;
......
...@@ -7573,14 +7573,15 @@ input[type=range]:-moz-focusring { ...@@ -7573,14 +7573,15 @@ input[type=range]:-moz-focusring {
background-color: #FCFCFC; background-color: #FCFCFC;
} }
.graph-doc-list__item--selected::before { .graph-doc-list__item--selected::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ""; content: "";
position: absolute; position: absolute;
z-index: 1; z-index: 1;
width: 2px; width: 2px;
background-color: #5c8f94; background-color: #5c8f94;
left: 0;
top: 0;
bottom: 0;
} }
.graph-doc-list__item--selected:first-child::before { .graph-doc-list__item--selected:first-child::before {
border-top-left-radius: 0.25rem; border-top-left-radius: 0.25rem;
...@@ -8989,6 +8990,20 @@ select.form-control { ...@@ -8989,6 +8990,20 @@ select.form-control {
border-right: 1px solid #dee2e6; border-right: 1px solid #dee2e6;
} }
.phylo__focus {
flex-grow: 1;
pointer-events: all;
position: relative;
}
.phylo__focus__inner {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
background-color: #fff;
}
.phylo-isoline { .phylo-isoline {
display: flex; display: flex;
position: relative; position: relative;
...@@ -9152,7 +9167,7 @@ select.form-control { ...@@ -9152,7 +9167,7 @@ select.form-control {
font-weight: bold; font-weight: bold;
} }
.phylo-selection-tab__selection { .phylo-selection-tab__selection {
margin: 16px 20px 0; margin: 16px 20px;
} }
.phylo-selection-tab__selection__item { .phylo-selection-tab__selection__item {
white-space: normal; white-space: normal;
...@@ -9184,6 +9199,55 @@ select.form-control { ...@@ -9184,6 +9199,55 @@ select.form-control {
color: #ADB5BD; color: #ADB5BD;
text-align: center; text-align: center;
} }
.phylo-selection-tab__extracted-docs {
margin: 16px 20px;
}
.phylo-doc-list__item {
cursor: pointer;
display: flex;
align-items: flex-start;
transition: all 0.2s ease-in-out;
}
.phylo-doc-list__item:focus {
outline: 0;
}
.phylo-doc-list__item:hover {
background-color: #FCFCFC;
}
.phylo-doc-list__item--selected::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
position: absolute;
z-index: 1;
width: 2px;
background-color: #5c8f94;
}
.phylo-doc-list__item--selected:first-child::before {
border-top-left-radius: 0.25rem;
}
.phylo-doc-list__item--selected:last-child::before {
border-bottom-left-radius: 0.25rem;
}
.phylo-doc-list__item__main {
flex-grow: 1;
padding-right: 1.25rem;
}
.phylo-doc-list__item__title, .phylo-doc-list__item__source, .phylo-doc-list__item__date {
line-height: 1.3;
margin-bottom: 4px;
}
.phylo-doc-list__item__source {
font-size: 15px;
color: #495057;
}
.phylo-doc-list__item__date {
font-size: 14px;
color: #6C757D;
}
.phylo-toolbar { .phylo-toolbar {
display: flex; display: flex;
......
...@@ -7821,14 +7821,15 @@ input[type=range]:-moz-focusring { ...@@ -7821,14 +7821,15 @@ input[type=range]:-moz-focusring {
background-color: #FCFCFC; background-color: #FCFCFC;
} }
.graph-doc-list__item--selected::before { .graph-doc-list__item--selected::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ""; content: "";
position: absolute; position: absolute;
z-index: 1; z-index: 1;
width: 2px; width: 2px;
background-color: #74DBEF; background-color: #74DBEF;
left: 0;
top: 0;
bottom: 0;
} }
.graph-doc-list__item--selected:first-child::before { .graph-doc-list__item--selected:first-child::before {
border-top-left-radius: 0.25rem; border-top-left-radius: 0.25rem;
...@@ -9237,6 +9238,20 @@ select.form-control { ...@@ -9237,6 +9238,20 @@ select.form-control {
border-right: 1px solid #dee2e6; border-right: 1px solid #dee2e6;
} }
.phylo__focus {
flex-grow: 1;
pointer-events: all;
position: relative;
}
.phylo__focus__inner {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
background-color: #fff;
}
.phylo-isoline { .phylo-isoline {
display: flex; display: flex;
position: relative; position: relative;
...@@ -9400,7 +9415,7 @@ select.form-control { ...@@ -9400,7 +9415,7 @@ select.form-control {
font-weight: bold; font-weight: bold;
} }
.phylo-selection-tab__selection { .phylo-selection-tab__selection {
margin: 16px 20px 0; margin: 16px 20px;
} }
.phylo-selection-tab__selection__item { .phylo-selection-tab__selection__item {
white-space: normal; white-space: normal;
...@@ -9432,6 +9447,55 @@ select.form-control { ...@@ -9432,6 +9447,55 @@ select.form-control {
color: #ADB5BD; color: #ADB5BD;
text-align: center; text-align: center;
} }
.phylo-selection-tab__extracted-docs {
margin: 16px 20px;
}
.phylo-doc-list__item {
cursor: pointer;
display: flex;
align-items: flex-start;
transition: all 0.2s ease-in-out;
}
.phylo-doc-list__item:focus {
outline: 0;
}
.phylo-doc-list__item:hover {
background-color: #FCFCFC;
}
.phylo-doc-list__item--selected::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
position: absolute;
z-index: 1;
width: 2px;
background-color: #74DBEF;
}
.phylo-doc-list__item--selected:first-child::before {
border-top-left-radius: 0.25rem;
}
.phylo-doc-list__item--selected:last-child::before {
border-bottom-left-radius: 0.25rem;
}
.phylo-doc-list__item__main {
flex-grow: 1;
padding-right: 1.25rem;
}
.phylo-doc-list__item__title, .phylo-doc-list__item__source, .phylo-doc-list__item__date {
line-height: 1.3;
margin-bottom: 4px;
}
.phylo-doc-list__item__source {
font-size: 15px;
color: #495057;
}
.phylo-doc-list__item__date {
font-size: 14px;
color: #6C757D;
}
.phylo-toolbar { .phylo-toolbar {
display: flex; display: flex;
......
...@@ -7822,14 +7822,15 @@ input[type=range]:-moz-focusring { ...@@ -7822,14 +7822,15 @@ input[type=range]:-moz-focusring {
background-color: #FCFCFC; background-color: #FCFCFC;
} }
.graph-doc-list__item--selected::before { .graph-doc-list__item--selected::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ""; content: "";
position: absolute; position: absolute;
z-index: 1; z-index: 1;
width: 2px; width: 2px;
background-color: #515151; background-color: #515151;
left: 0;
top: 0;
bottom: 0;
} }
.graph-doc-list__item--selected:first-child::before { .graph-doc-list__item--selected:first-child::before {
border-top-left-radius: 0.25rem; border-top-left-radius: 0.25rem;
...@@ -9238,6 +9239,20 @@ select.form-control { ...@@ -9238,6 +9239,20 @@ select.form-control {
border-right: 1px solid #dee2e6; border-right: 1px solid #dee2e6;
} }
.phylo__focus {
flex-grow: 1;
pointer-events: all;
position: relative;
}
.phylo__focus__inner {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
background-color: #fff;
}
.phylo-isoline { .phylo-isoline {
display: flex; display: flex;
position: relative; position: relative;
...@@ -9401,7 +9416,7 @@ select.form-control { ...@@ -9401,7 +9416,7 @@ select.form-control {
font-weight: bold; font-weight: bold;
} }
.phylo-selection-tab__selection { .phylo-selection-tab__selection {
margin: 16px 20px 0; margin: 16px 20px;
} }
.phylo-selection-tab__selection__item { .phylo-selection-tab__selection__item {
white-space: normal; white-space: normal;
...@@ -9433,6 +9448,55 @@ select.form-control { ...@@ -9433,6 +9448,55 @@ select.form-control {
color: #ADB5BD; color: #ADB5BD;
text-align: center; text-align: center;
} }
.phylo-selection-tab__extracted-docs {
margin: 16px 20px;
}
.phylo-doc-list__item {
cursor: pointer;
display: flex;
align-items: flex-start;
transition: all 0.2s ease-in-out;
}
.phylo-doc-list__item:focus {
outline: 0;
}
.phylo-doc-list__item:hover {
background-color: #FCFCFC;
}
.phylo-doc-list__item--selected::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
position: absolute;
z-index: 1;
width: 2px;
background-color: #515151;
}
.phylo-doc-list__item--selected:first-child::before {
border-top-left-radius: 0.25rem;
}
.phylo-doc-list__item--selected:last-child::before {
border-bottom-left-radius: 0.25rem;
}
.phylo-doc-list__item__main {
flex-grow: 1;
padding-right: 1.25rem;
}
.phylo-doc-list__item__title, .phylo-doc-list__item__source, .phylo-doc-list__item__date {
line-height: 1.3;
margin-bottom: 4px;
}
.phylo-doc-list__item__source {
font-size: 15px;
color: #495057;
}
.phylo-doc-list__item__date {
font-size: 14px;
color: #6C757D;
}
.phylo-toolbar { .phylo-toolbar {
display: flex; display: flex;
......
...@@ -11,7 +11,7 @@ import Gargantext.Components.Bootstrap as B ...@@ -11,7 +11,7 @@ import Gargantext.Components.Bootstrap as B
import Gargantext.Components.PhyloExplorer.API (get) import Gargantext.Components.PhyloExplorer.API (get)
import Gargantext.Components.PhyloExplorer.Layout (layout) import Gargantext.Components.PhyloExplorer.Layout (layout)
import Gargantext.Components.PhyloExplorer.Store as PhyloStore import Gargantext.Components.PhyloExplorer.Store as PhyloStore
import Gargantext.Components.PhyloExplorer.Types (CacheParams, PhyloDataSet, defaultCacheParams) import Gargantext.Components.PhyloExplorer.Types (CacheParams, PhyloSet(..), defaultCacheParams)
import Gargantext.Config.REST (logRESTError) import Gargantext.Config.REST (logRESTError)
import Gargantext.Hooks.FirstEffect (useFirstEffect') import Gargantext.Hooks.FirstEffect (useFirstEffect')
import Gargantext.Hooks.Loader (useLoaderEffect) import Gargantext.Hooks.Loader (useLoaderEffect)
...@@ -40,7 +40,7 @@ nodeCpt = here.component "node" cpt where ...@@ -40,7 +40,7 @@ nodeCpt = here.component "node" cpt where
-- | -- |
session <- useSession session <- useSession
state' /\ state <- R2.useBox' (Nothing :: Maybe PhyloDataSet) state' /\ state <- R2.useBox' (Nothing :: Maybe PhyloSet)
cache' /\ cache <- R2.useBox' (defaultCacheParams :: CacheParams) cache' /\ cache <- R2.useBox' (defaultCacheParams :: CacheParams)
-- | Computed -- | Computed
...@@ -92,13 +92,15 @@ nodeCpt = here.component "node" cpt where ...@@ -92,13 +92,15 @@ nodeCpt = here.component "node" cpt where
] ]
] ]
, defaultSlot: , defaultSlot:
R2.fromMaybe state' \(phyloDataSet :: PhyloDataSet) -> R2.fromMaybe state' \(PhyloSet { corpusId, listId, phyloData }) ->
let let
state_ :: Record PhyloStore.State state_ :: Record PhyloStore.State
state_ = state_ =
-- Data -- Data
{ phyloDataSet { phyloData
, corpusId
, listId
, phyloId: nodeId , phyloId: nodeId
-- (cache params) -- (cache params)
, expandSelection: getter _.expandSelection cache' , expandSelection: getter _.expandSelection cache'
......
...@@ -16,8 +16,8 @@ import Data.Maybe (Maybe(..)) ...@@ -16,8 +16,8 @@ import Data.Maybe (Maybe(..))
import Data.Newtype (class Newtype) import Data.Newtype (class Newtype)
import Data.Show.Generic (genericShow) import Data.Show.Generic (genericShow)
import Data.Symbol (SProxy(..)) import Data.Symbol (SProxy(..))
import Gargantext.Components.PhyloExplorer.JSON (PhyloJSONSet) import Gargantext.Components.PhyloExplorer.JSON (PhyloJSON)
import Gargantext.Components.PhyloExplorer.Types (PhyloDataSet, parsePhyloJSONSet) import Gargantext.Components.PhyloExplorer.Types (PhyloSet, parseToPhyloSet)
import Gargantext.Config.REST (AffRESTError) import Gargantext.Config.REST (AffRESTError)
import Gargantext.Routes (SessionRoute(..)) import Gargantext.Routes (SessionRoute(..))
import Gargantext.Routes as GR import Gargantext.Routes as GR
...@@ -30,10 +30,10 @@ import Simple.JSON as JSON ...@@ -30,10 +30,10 @@ import Simple.JSON as JSON
import Simple.JSON.Generics as JSONG import Simple.JSON.Generics as JSONG
get :: S.Session -> NodeID -> AffRESTError (PhyloDataSet) get :: S.Session -> NodeID -> AffRESTError (PhyloSet)
get session nodeId = request >>= (_ <#> parsePhyloJSONSet) >>> pure get session nodeId = request >>= (_ <#> parseToPhyloSet) >>> pure
where where
request :: AffRESTError (PhyloJSONSet) request :: AffRESTError (PhyloJSON)
request = S.get session $ PhyloAPI nodeId request = S.get session $ PhyloAPI nodeId
---------------------------------------------------------- ----------------------------------------------------------
......
module Gargantext.Components.PhyloExplorer.Frame.DocFocus
( docFocus
) where
import Gargantext.Prelude
import Data.Maybe (Maybe(..))
import Effect (Effect)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (Elevation(..))
import Gargantext.Components.Nodes.Corpus.Document (node)
import Gargantext.Components.PhyloExplorer.Types (FrameDoc(..))
import Gargantext.Sessions (Session, sessionId)
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H