Skip to content

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

Merge remote-tracking branch 'origin/407-dev-doc-highlighting-rc0.x' into dev

parents f94c4685 f039ba8f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 843 additions and 398 deletions
dist/styles/bootstrap-darkster.css
View file @ b83573c3
......@@ -7714,21 +7714,16 @@ input[type=range]:-moz-focusring {
width: 100%;
display: block;
}
.graph-doc-focus__header {
padding: 0.5rem 1.5rem;
}
.right-handed .graph-doc-focus__header {
float: right;
margin-left: 32px;
}
.left-handed .graph-doc-focus__header {
float: left;
margin-right: 32px;
}
.graph-doc-focus__body {
padding-top: 13px;
padding-left: 1.25rem;
padding-right: 1.25rem;
.graph-doc-focus .document-layout__header {
padding-top: initial;
}
.graph-sidebar {
......@@ -8713,21 +8708,14 @@ a:focus, a:hover {
.side-panel .texts-sidepanel__header {
padding: 0.75rem 1.25rem;
font-size: 20px;
text-align: right;
}
.right-handed .side-panel .texts-sidepanel__header {
float: right;
}
.left-handed .side-panel .texts-sidepanel__header {
float: left;
}
.side-panel .texts-sidepanel__body {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.side-panel .texts-sidepanel__body .document-layout__title {
font-size: 23px;
font-size: 21px;
}
.side-panel .texts-sidepanel__body .document-layout__abstract__content {
max-height: 200px;
......@@ -9395,6 +9383,50 @@ select.form-control {
display: none;
}
.phylo-doc-focus {
scrollbar-width: none;
overflow-y: scroll;
background-color: #000000;
height: 100%;
position: relative;
z-index: 0;
}
.phylo-doc-focus::-webkit-scrollbar {
display: none;
}
.phylo-doc-focus::before {
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 45%);
content: "";
z-index: 2;
pointer-events: none;
position: sticky;
top: 0;
height: 16px;
width: 100%;
display: block;
}
.phylo-doc-focus::after {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 45%);
content: "";
pointer-events: none;
position: sticky;
bottom: 0;
height: 16px;
width: 100%;
display: block;
}
.right-handed .phylo-doc-focus__header {
margin-left: 32px;
}
.left-handed .phylo-doc-focus__header {
margin-right: 32px;
}
.phylo-doc-focus .document-layout__header {
padding-top: initial;
}
.phylo-sidebar {
scrollbar-width: none;
overflow-y: scroll;
......@@ -9573,32 +9605,34 @@ select.form-control {
.document-layout {
position: relative;
width: 100%;
max-width: 780px;
margin: 0 auto;
}
.document-layout__controls {
float: right;
color: #FF550B;
.document-layout__header {
display: flex;
justify-content: space-between;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid #dee2e6;
margin-bottom: 0.75rem;
}
.document-layout__controls__hint {
margin-right: 8px;
font-style: italic;
font-size: 14px;
animation-name: fade-in;
animation-delay: 400ms;
animation-duration: 600ms;
animation-timing-function: ease-in-out;
animation-direction: alternate;
animation-iteration-count: infinite;
opacity: 0;
.document-layout__side-controls {
display: flex;
align-items: center;
}
.document-layout__saving {
color: #FF550B;
display: flex;
}
.document-layout__controls__spinner {
.document-layout__saving__spinner {
width: 16px;
height: 16px;
}
.document-layout__controls__icon {
.document-layout__saving__icon {
font-size: 20px;
animation: fade-in 200ms ease-in-out;
animation: fade-in 200ms ease-in-out, fade-out 100ms ease-in-out 2000ms 1 normal forwards, pulse 200ms ease-in-out 0ms 1;
}
.document-layout__body {
max-width: 780px;
padding: 1.25rem;
margin: 0 auto;
}
.document-layout__separator-label {
font-weight: bold;
......
dist/styles/bootstrap-default.css
View file @ b83573c3
......@@ -7667,21 +7667,16 @@ input[type=range]:-moz-focusring {
width: 100%;
display: block;
}
.graph-doc-focus__header {
padding: 0.5rem 1.5rem;
}
.right-handed .graph-doc-focus__header {
float: right;
margin-left: 32px;
}
.left-handed .graph-doc-focus__header {
float: left;
margin-right: 32px;
}
.graph-doc-focus__body {
padding-top: 13px;
padding-left: 1.25rem;
padding-right: 1.25rem;
.graph-doc-focus .document-layout__header {
padding-top: initial;
}
.graph-sidebar {
......@@ -8666,21 +8661,14 @@ a:focus, a:hover {
.side-panel .texts-sidepanel__header {
padding: 0.75rem 1.25rem;
font-size: 20px;
text-align: right;
}
.right-handed .side-panel .texts-sidepanel__header {
float: right;
}
.left-handed .side-panel .texts-sidepanel__header {
float: left;
}
.side-panel .texts-sidepanel__body {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.side-panel .texts-sidepanel__body .document-layout__title {
font-size: 23px;
font-size: 21px;
}
.side-panel .texts-sidepanel__body .document-layout__abstract__content {
max-height: 200px;
......@@ -9348,6 +9336,50 @@ select.form-control {
display: none;
}
.phylo-doc-focus {
scrollbar-width: none;
overflow-y: scroll;
background-color: #fff;
height: 100%;
position: relative;
z-index: 0;
}
.phylo-doc-focus::-webkit-scrollbar {
display: none;
}
.phylo-doc-focus::before {
background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
content: "";
z-index: 2;
pointer-events: none;
position: sticky;
top: 0;
height: 16px;
width: 100%;
display: block;
}
.phylo-doc-focus::after {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
content: "";
pointer-events: none;
position: sticky;
bottom: 0;
height: 16px;
width: 100%;
display: block;
}
.right-handed .phylo-doc-focus__header {
margin-left: 32px;
}
.left-handed .phylo-doc-focus__header {
margin-right: 32px;
}
.phylo-doc-focus .document-layout__header {
padding-top: initial;
}
.phylo-sidebar {
scrollbar-width: none;
overflow-y: scroll;
......@@ -9526,32 +9558,34 @@ select.form-control {
.document-layout {
position: relative;
width: 100%;
max-width: 780px;
margin: 0 auto;
}
.document-layout__controls {
float: right;
color: #005a9a;
.document-layout__header {
display: flex;
justify-content: space-between;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid #dee2e6;
margin-bottom: 0.75rem;
}
.document-layout__controls__hint {
margin-right: 8px;
font-style: italic;
font-size: 14px;
animation-name: fade-in;
animation-delay: 400ms;
animation-duration: 600ms;
animation-timing-function: ease-in-out;
animation-direction: alternate;
animation-iteration-count: infinite;
opacity: 0;
.document-layout__side-controls {
display: flex;
align-items: center;
}
.document-layout__saving {
color: #005a9a;
display: flex;
}
.document-layout__controls__spinner {
.document-layout__saving__spinner {
width: 16px;
height: 16px;
}
.document-layout__controls__icon {
.document-layout__saving__icon {
font-size: 20px;
animation: fade-in 200ms ease-in-out;
animation: fade-in 200ms ease-in-out, fade-out 100ms ease-in-out 2000ms 1 normal forwards, pulse 200ms ease-in-out 0ms 1;
}
.document-layout__body {
max-width: 780px;
padding: 1.25rem;
margin: 0 auto;
}
.document-layout__separator-label {
font-weight: bold;
......
dist/styles/bootstrap-greyson.css
View file @ b83573c3
......@@ -7423,21 +7423,16 @@ input[type=range]:-moz-focusring {
width: 100%;
display: block;
}
.graph-doc-focus__header {
padding: 0.5rem 1.5rem;
}
.right-handed .graph-doc-focus__header {
float: right;
margin-left: 32px;
}
.left-handed .graph-doc-focus__header {
float: left;
margin-right: 32px;
}
.graph-doc-focus__body {
padding-top: 13px;
padding-left: 1.25rem;
padding-right: 1.25rem;
.graph-doc-focus .document-layout__header {
padding-top: initial;
}
.graph-sidebar {
......@@ -8422,21 +8417,14 @@ a:focus, a:hover {
.side-panel .texts-sidepanel__header {
padding: 0.75rem 1.25rem;
font-size: 20px;
text-align: right;
}
.right-handed .side-panel .texts-sidepanel__header {
float: right;
}
.left-handed .side-panel .texts-sidepanel__header {
float: left;
}
.side-panel .texts-sidepanel__body {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.side-panel .texts-sidepanel__body .document-layout__title {
font-size: 23px;
font-size: 21px;
}
.side-panel .texts-sidepanel__body .document-layout__abstract__content {
max-height: 200px;
......@@ -9104,6 +9092,50 @@ select.form-control {
display: none;
}
.phylo-doc-focus {
scrollbar-width: none;
overflow-y: scroll;
background-color: #fff;
height: 100%;
position: relative;
z-index: 0;
}
.phylo-doc-focus::-webkit-scrollbar {
display: none;
}
.phylo-doc-focus::before {
background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
content: "";
z-index: 2;
pointer-events: none;
position: sticky;
top: 0;
height: 16px;
width: 100%;
display: block;
}
.phylo-doc-focus::after {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
content: "";
pointer-events: none;
position: sticky;
bottom: 0;
height: 16px;
width: 100%;
display: block;
}
.right-handed .phylo-doc-focus__header {
margin-left: 32px;
}
.left-handed .phylo-doc-focus__header {
margin-right: 32px;
}
.phylo-doc-focus .document-layout__header {
padding-top: initial;
}
.phylo-sidebar {
scrollbar-width: none;
overflow-y: scroll;
......@@ -9282,32 +9314,34 @@ select.form-control {
.document-layout {
position: relative;
width: 100%;
max-width: 780px;
margin: 0 auto;
}
.document-layout__controls {
float: right;
color: #2f3c48;
.document-layout__header {
display: flex;
justify-content: space-between;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid #dee2e6;
margin-bottom: 0.75rem;
}
.document-layout__controls__hint {
margin-right: 8px;
font-style: italic;
font-size: 14px;
animation-name: fade-in;
animation-delay: 400ms;
animation-duration: 600ms;
animation-timing-function: ease-in-out;
animation-direction: alternate;
animation-iteration-count: infinite;
opacity: 0;
.document-layout__side-controls {
display: flex;
align-items: center;
}
.document-layout__saving {
color: #2f3c48;
display: flex;
}
.document-layout__controls__spinner {
.document-layout__saving__spinner {
width: 16px;
height: 16px;
}
.document-layout__controls__icon {
.document-layout__saving__icon {
font-size: 20px;
animation: fade-in 200ms ease-in-out;
animation: fade-in 200ms ease-in-out, fade-out 100ms ease-in-out 2000ms 1 normal forwards, pulse 200ms ease-in-out 0ms 1;
}
.document-layout__body {
max-width: 780px;
padding: 1.25rem;
margin: 0 auto;
}
.document-layout__separator-label {
font-weight: bold;
......
dist/styles/bootstrap-herbie.css
View file @ b83573c3
......@@ -7671,21 +7671,16 @@ input[type=range]:-moz-focusring {
width: 100%;
display: block;
}
.graph-doc-focus__header {
padding: 0.5rem 1.5rem;
}
.right-handed .graph-doc-focus__header {
float: right;
margin-left: 32px;
}
.left-handed .graph-doc-focus__header {
float: left;
margin-right: 32px;
}
.graph-doc-focus__body {
padding-top: 13px;
padding-left: 1.25rem;
padding-right: 1.25rem;
.graph-doc-focus .document-layout__header {
padding-top: initial;
}
.graph-sidebar {
......@@ -8670,21 +8665,14 @@ a:focus, a:hover {
.side-panel .texts-sidepanel__header {
padding: 0.75rem 1.25rem;
font-size: 20px;
text-align: right;
}
.right-handed .side-panel .texts-sidepanel__header {
float: right;
}
.left-handed .side-panel .texts-sidepanel__header {
float: left;
}
.side-panel .texts-sidepanel__body {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.side-panel .texts-sidepanel__body .document-layout__title {
font-size: 23px;
font-size: 21px;
}
.side-panel .texts-sidepanel__body .document-layout__abstract__content {
max-height: 200px;
......@@ -9352,6 +9340,50 @@ select.form-control {
display: none;
}
.phylo-doc-focus {
scrollbar-width: none;
overflow-y: scroll;
background-color: #fff;
height: 100%;
position: relative;
z-index: 0;
}
.phylo-doc-focus::-webkit-scrollbar {
display: none;
}
.phylo-doc-focus::before {
background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
content: "";
z-index: 2;
pointer-events: none;
position: sticky;
top: 0;
height: 16px;
width: 100%;
display: block;
}
.phylo-doc-focus::after {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
content: "";
pointer-events: none;
position: sticky;
bottom: 0;
height: 16px;
width: 100%;
display: block;
}
.right-handed .phylo-doc-focus__header {
margin-left: 32px;
}
.left-handed .phylo-doc-focus__header {
margin-right: 32px;
}
.phylo-doc-focus .document-layout__header {
padding-top: initial;
}
.phylo-sidebar {
scrollbar-width: none;
overflow-y: scroll;
......@@ -9530,32 +9562,34 @@ select.form-control {
.document-layout {
position: relative;
width: 100%;
max-width: 780px;
margin: 0 auto;
}
.document-layout__controls {
float: right;
color: #083358;
.document-layout__header {
display: flex;
justify-content: space-between;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid #dee2e6;
margin-bottom: 0.75rem;
}
.document-layout__controls__hint {
margin-right: 8px;
font-style: italic;
font-size: 14px;
animation-name: fade-in;
animation-delay: 400ms;
animation-duration: 600ms;
animation-timing-function: ease-in-out;
animation-direction: alternate;
animation-iteration-count: infinite;
opacity: 0;
.document-layout__side-controls {
display: flex;
align-items: center;
}
.document-layout__saving {
color: #083358;
display: flex;
}
.document-layout__controls__spinner {
.document-layout__saving__spinner {
width: 16px;
height: 16px;
}
.document-layout__controls__icon {
.document-layout__saving__icon {
font-size: 20px;
animation: fade-in 200ms ease-in-out;
animation: fade-in 200ms ease-in-out, fade-out 100ms ease-in-out 2000ms 1 normal forwards, pulse 200ms ease-in-out 0ms 1;
}
.document-layout__body {
max-width: 780px;
padding: 1.25rem;
margin: 0 auto;
}
.document-layout__separator-label {
font-weight: bold;
......
dist/styles/bootstrap-monotony.css
View file @ b83573c3
......@@ -7672,21 +7672,16 @@ input[type=range]:-moz-focusring {
width: 100%;
display: block;
}
.graph-doc-focus__header {
padding: 0.5rem 1.5rem;
}
.right-handed .graph-doc-focus__header {
float: right;
margin-left: 32px;
}
.left-handed .graph-doc-focus__header {
float: left;
margin-right: 32px;
}
.graph-doc-focus__body {
padding-top: 13px;
padding-left: 1.25rem;
padding-right: 1.25rem;
.graph-doc-focus .document-layout__header {
padding-top: initial;
}
.graph-sidebar {
......@@ -8671,21 +8666,14 @@ a:focus, a:hover {
.side-panel .texts-sidepanel__header {
padding: 0.75rem 1.25rem;
font-size: 20px;
text-align: right;
}
.right-handed .side-panel .texts-sidepanel__header {
float: right;
}
.left-handed .side-panel .texts-sidepanel__header {
float: left;
}
.side-panel .texts-sidepanel__body {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.side-panel .texts-sidepanel__body .document-layout__title {
font-size: 23px;
font-size: 21px;
}
.side-panel .texts-sidepanel__body .document-layout__abstract__content {
max-height: 200px;
......@@ -9353,6 +9341,50 @@ select.form-control {
display: none;
}
.phylo-doc-focus {
scrollbar-width: none;
overflow-y: scroll;
background-color: #fff;
height: 100%;
position: relative;
z-index: 0;
}
.phylo-doc-focus::-webkit-scrollbar {
display: none;
}
.phylo-doc-focus::before {
background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
content: "";
z-index: 2;
pointer-events: none;
position: sticky;
top: 0;
height: 16px;
width: 100%;
display: block;
}
.phylo-doc-focus::after {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
content: "";
pointer-events: none;
position: sticky;
bottom: 0;
height: 16px;
width: 100%;
display: block;
}
.right-handed .phylo-doc-focus__header {
margin-left: 32px;
}
.left-handed .phylo-doc-focus__header {
margin-right: 32px;
}
.phylo-doc-focus .document-layout__header {
padding-top: initial;
}
.phylo-sidebar {
scrollbar-width: none;
overflow-y: scroll;
......@@ -9531,32 +9563,34 @@ select.form-control {
.document-layout {
position: relative;
width: 100%;
max-width: 780px;
margin: 0 auto;
}
.document-layout__controls {
float: right;
color: #222222;
.document-layout__header {
display: flex;
justify-content: space-between;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid #dee2e6;
margin-bottom: 0.75rem;
}
.document-layout__controls__hint {
margin-right: 8px;
font-style: italic;
font-size: 14px;
animation-name: fade-in;
animation-delay: 400ms;
animation-duration: 600ms;
animation-timing-function: ease-in-out;
animation-direction: alternate;
animation-iteration-count: infinite;
opacity: 0;
.document-layout__side-controls {
display: flex;
align-items: center;
}
.document-layout__saving {
color: #222222;
display: flex;
}
.document-layout__controls__spinner {
.document-layout__saving__spinner {
width: 16px;
height: 16px;
}
.document-layout__controls__icon {
.document-layout__saving__icon {
font-size: 20px;
animation: fade-in 200ms ease-in-out;
animation: fade-in 200ms ease-in-out, fade-out 100ms ease-in-out 2000ms 1 normal forwards, pulse 200ms ease-in-out 0ms 1;
}
.document-layout__body {
max-width: 780px;
padding: 1.25rem;
margin: 0 auto;
}
.document-layout__separator-label {
font-weight: bold;
......
src/Gargantext/Components/Annotation/Field.purs
View file @ b83573c3
......@@ -22,7 +22,7 @@ import Data.Tuple (Tuple(..), snd)
import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Gargantext.Components.Annotation.Menu (annotationMenu, AnnotationMenu)
import Gargantext.Components.Annotation.Types (termClass, MenuType(..))
import Gargantext.Components.Annotation.Types (MenuType(..), ModeType(..), termClass)
import Gargantext.Core.NgramsTable.Functions (findNgramTermList, highlightNgrams, normNgram)
import Gargantext.Core.NgramsTable.Types (NgramsTable, NgramsTerm)
import Gargantext.Types (CTabNgramType(..), TermList)
......@@ -42,6 +42,7 @@ type Props =
( ngrams :: NgramsTable
, setTermList :: NgramsTerm -> Maybe TermList -> TermList -> Effect Unit
, text :: Maybe String
, mode :: ModeType
)
type MouseEvent = E.SyntheticEvent DE.MouseEvent
......@@ -73,7 +74,7 @@ annotatedFieldInner = R2.leafComponent annotatedFieldInnerCpt
annotatedFieldInnerCpt :: R.Component InnerProps
annotatedFieldInnerCpt = here.component "annotatedFieldInner" cpt where
cpt { menuRef, ngrams, redrawMenu, setTermList, text: fieldText } _ = do
cpt { menuRef, ngrams, redrawMenu, setTermList, text: fieldText, mode } _ = do
_redrawMenu' <- T.useLive T.unequal redrawMenu
-- menu <- T.useBox (Nothing :: Maybe (Record AnnotationMenu))
......@@ -89,9 +90,29 @@ annotatedFieldInnerCpt = here.component "annotatedFieldInner" cpt where
[
annotationMenu { menuRef }
,
H.div
{ className: "annotated-field-runs" }
((\p -> annotateRun p) <$> wrap <$> compile ngrams fieldText)
case mode of
EditionMode ->
H.div
{ className: "annotated-field-runs" }
((\p -> annotateRun p) <$> wrap <$> compile ngrams fieldText)
AdditionMode ->
R2.fromMaybe fieldText \t ->
H.div
{ className: "annotated-field-runs" }
[
annotateRun
{ list: mempty
, text: t
, onSelect: onAnnotationSelect { menuRef, ngrams, redrawMenu, setTermList }
}
]
]
-----------------------------------------------------------
......
src/Gargantext/Components/Annotation/Types.purs
View file @ b83573c3
module Gargantext.Components.Annotation.Types
( MenuType(..)
, termClass
, ModeType(..)
)
where
......@@ -8,14 +9,36 @@ import Gargantext.Prelude
import Data.Eq.Generic (genericEq)
import Data.Generic.Rep (class Generic)
import Data.Maybe (Maybe(..))
import Data.Show.Generic (genericShow)
import Gargantext.Types (TermList(..))
---------------------------------------------------------
data MenuType = NewNgram | SetTermListItem
derive instance Generic MenuType _
instance Eq MenuType where
eq = genericEq
----------------------------------------------------------
termClass :: TermList -> String
termClass CandidateTerm = "candidate-term"
termClass MapTerm = "graph-term"
termClass StopTerm = "stop-term"
---------------------------------------------------------
data ModeType
= EditionMode
| AdditionMode
derive instance Generic ModeType _
instance Eq ModeType where eq = genericEq
instance Show ModeType where show = genericShow
instance Read ModeType where
read :: String -> Maybe ModeType
read = case _ of
"EditionMode" -> Just EditionMode
"AdditionMode" -> Just AdditionMode
_ -> Nothing
src/Gargantext/Components/GraphExplorer/Frame/DocFocus.purs
View file @ b83573c3
......@@ -4,13 +4,19 @@ module Gargantext.Components.GraphExplorer.Frame.DocFocus
import Gargantext.Prelude
import Data.Maybe (Maybe(..))
import Data.Maybe (Maybe(..), isJust)
import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (Elevation(..))
import Gargantext.Components.Document.API (loadData)
import Gargantext.Components.Document.Layout (layout)
import Gargantext.Components.Document.Types (LoadedData, DocPath)
import Gargantext.Components.GraphExplorer.Types (GraphSideDoc(..))
import Gargantext.Components.Nodes.Corpus.Document (node)
import Gargantext.Sessions (Session, sessionId)
import Gargantext.Config.REST (logRESTError)
import Gargantext.Hooks.Loader (useLoaderEffect)
import Gargantext.Sessions (Session)
import Gargantext.Types (CTabNgramType(..), TabSubType(..), TabType(..))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
......@@ -25,41 +31,74 @@ type Props =
, closeCallback :: Unit -> Effect Unit
)
docFocus :: R2.Leaf Props
docFocus :: R2.Leaf ( key :: String | Props )
docFocus = R2.leaf docFocusCpt
docFocusCpt :: R.Component Props
docFocusCpt :: R.Component ( key :: String | Props )
docFocusCpt = here.component "main" cpt where
cpt { graphSideDoc: GraphSideDoc { docId, listId, corpusId }
, session
, closeCallback
} _ = do
-- | States
-- |
state' /\ state <- R2.useBox' (Nothing :: Maybe LoadedData)
-- | Computed
-- |
let
tabType :: TabType
tabType = TabDocument (TabNgramType CTabTerms)
path :: DocPath
path =
{ listIds: [listId]
, mCorpusId: Just corpusId
, nodeId: docId
, session
, tabType
}
-- | Hooks
-- |
useLoaderEffect
{ errorHandler: logRESTError here "[docFocus]"
, loader: loadData
, path
, state
}
-- | Render
-- |
pure $
H.div
{ className: "graph-doc-focus" }
[
H.div
{ className: "graph-doc-focus__header" }
[
B.iconButton
{ name: "times"
, elevation: Level2
, callback: closeCallback
}
]
,
H.div
{ className: "graph-doc-focus__body" }
[
-- print the document node
node
{ listId
, mCorpusId: Just corpusId
, nodeId: docId
, key: show (sessionId session) <> "-" <> show docId
}
]
B.cloak
{ isDisplayed: isJust state'
, idlingPhaseDuration: Just 150
, cloakSlot:
B.preloader
{}
, defaultSlot:
R2.fromMaybe state' \loaded ->
layout
{ loaded
, path
, sideControlsSlot: Just $
H.div
{ className: "graph-doc-focus__header" }
[
B.iconButton
{ name: "times"
, elevation: Level2
, callback: closeCallback
}
]
}
}
]
src/Gargantext/Components/GraphExplorer/Layout.purs
View file @ b83573c3
......@@ -30,7 +30,7 @@ import Gargantext.Hooks.Sigmax as Sigmax
import Gargantext.Hooks.Sigmax.Types as SigmaxT
import Gargantext.Types as GT
import Gargantext.Types as Types
import Gargantext.Utils ((?))
import Gargantext.Utils (getter, (?))
import Gargantext.Utils.Range as Range
import Gargantext.Utils.Reactix as R2
import Math as Math
......@@ -145,6 +145,7 @@ layoutCpt = R.memo' $ here.component "explorerWriteGraph" cpt where
{ session
, graphSideDoc
, closeCallback: closeDoc
, key: show $ getter _.docId graphSideDoc
}
]
]
......
src/Gargantext/Components/GraphExplorer/Types.purs
View file @ b83573c3
......@@ -114,6 +114,7 @@ newtype GraphSideDoc = GraphSideDoc
, corpusId :: CorpusId
, listId :: ListId
}
derive instance Newtype GraphSideDoc _
derive instance Generic GraphSideDoc _
instance Eq GraphSideDoc where eq = genericEq
......
src/Gargantext/Components/Nodes/Corpus/Document.purs
View file @ b83573c3
......@@ -4,7 +4,8 @@ module Gargantext.Components.Nodes.Corpus.Document
import Gargantext.Prelude
import Data.Maybe (Maybe(..), isJust)
import DOM.Simple (document, querySelector)
import Data.Maybe (Maybe(..), isJust, maybe)
import Data.Tuple.Nested ((/\))
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Document.API (loadData)
......@@ -59,6 +60,16 @@ nodeCpt = here.component "node" cpt where
, state
}
-- @XXX: reset "main-page__main-route" wrapper margin
-- see Gargantext.Components.Router) (@TODO?)
R.useLayoutEffect1 [] do
let mEl = querySelector document ".main-page__main-route"
-- Mount
mEl >>= maybe R.nothing (flip R2.addClass ["p-0"])
-- Unmount
pure $
mEl >>= maybe R.nothing (flip R2.removeClass ["p-0"])
-- | Render
-- |
pure $
......
src/Gargantext/Components/Nodes/Texts.purs
View file @ b83573c3
......@@ -3,7 +3,7 @@ module Gargantext.Components.Nodes.Texts where
import Gargantext.Prelude
import Data.Generic.Rep (class Generic)
import Data.Maybe (Maybe(..))
import Data.Maybe (Maybe(..), isJust)
import Data.Show.Generic (genericShow)
import Data.Tuple.Nested ((/\))
import Effect.Aff (launchAff_)
......@@ -15,6 +15,9 @@ import Gargantext.Components.Charts.Options.ECharts (dispatchAction)
import Gargantext.Components.Charts.Options.Type (EChartsInstance, EChartActionData)
import Gargantext.Components.DocsTable as DT
import Gargantext.Components.DocsTable.Types (Year)
import Gargantext.Components.Document.API (loadData)
import Gargantext.Components.Document.Layout (layout)
import Gargantext.Components.Document.Types (LoadedData, DocPath)
import Gargantext.Components.NgramsTable.Loader (clearCache)
import Gargantext.Components.Node (NodePoly(..))
import Gargantext.Components.Nodes.Corpus (loadCorpusWithChild)
......@@ -24,12 +27,13 @@ import Gargantext.Components.Nodes.Corpus.Document as D
import Gargantext.Components.Nodes.Corpus.Types (CorpusData)
import Gargantext.Components.Nodes.Lists.Types as LT
import Gargantext.Components.Nodes.Texts.Types as TT
import Gargantext.Components.Nodes.Texts.Types as TextsT
import Gargantext.Components.Reload (textsReloadContext)
import Gargantext.Components.Tab as Tab
import Gargantext.Components.Table as Table
import Gargantext.Config.REST (logRESTError)
import Gargantext.Ends (Frontends)
import Gargantext.Hooks.Loader (useLoader)
import Gargantext.Hooks.Loader (useLoader, useLoaderEffect)
import Gargantext.Hooks.Session (useSession)
import Gargantext.Sessions (Session, getCacheState, sessionId)
import Gargantext.Types (CTabNgramType(..), ListId, NodeID, SidePanelState(..), TabSubType(..), TabType(..))
......@@ -514,13 +518,83 @@ textsSidePanelCpt = here.component "sidePanel" cpt where
{}
[ H.text $ "You can select a document to see its content" ]
Just { corpusId, listId, nodeId } ->
D.node
{ listId
, mCorpusId: Just corpusId
, nodeId
, key: show (sessionId session) <> "-" <> show nodeId
Just (sidePanelTexts_ :: Record TextsT.SidePanel) ->
sideText
{ session
, sidePanelText: sidePanelTexts_
, key: show $ sidePanelTexts_.nodeId
}
]
]
]
-------------------------------------------------------
type SideText =
( sidePanelText :: Record TextsT.SidePanel
, session :: Session
-- @TODO handling `closeCallback` when SidePanelText will be extracted from
-- application layout business (and put inside the Node Document business)
-- , closeCallback :: Unit -> Effect Unit
)
sideText :: R2.Leaf ( key :: String | SideText )
sideText = R2.leaf sideTextCpt
sideTextCpt :: R.Component ( key :: String | SideText )
sideTextCpt = here.component "sideText" cpt where
cpt { sidePanelText: { corpusId, listId, nodeId }
, session
} _ = do
-- | States
-- |
state' /\ state <- R2.useBox' (Nothing :: Maybe LoadedData)
-- | Computed
-- |
let
tabType :: TabType
tabType = TabDocument (TabNgramType CTabTerms)
path :: DocPath
path =
{ listIds: [listId]
, mCorpusId: Just corpusId
, nodeId
, session
, tabType
}
-- | Hooks
-- |
useLoaderEffect
{ errorHandler: logRESTError here "[sidePanelText]"
, loader: loadData
, path
, state
}
-- | Render
-- |
pure $
H.div
{ className: "graph-doc-focus" }
[
B.cloak
{ isDisplayed: isJust state'
, idlingPhaseDuration: Just 150
, cloakSlot:
B.preloader
{}
, defaultSlot:
R2.fromMaybe state' \loaded ->
layout
{ loaded
, path
}
}
]
src/Gargantext/Components/PhyloExplorer/Frame/DocFocus.purs
View file @ b83573c3
......@@ -4,62 +4,101 @@ module Gargantext.Components.PhyloExplorer.Frame.DocFocus
import Gargantext.Prelude
import Data.Maybe (Maybe(..))
import Data.Maybe (Maybe(..), isJust)
import Data.Tuple.Nested ((/\))
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.Document.API (loadData)
import Gargantext.Components.Document.Layout (layout)
import Gargantext.Components.Document.Types (LoadedData, DocPath)
import Gargantext.Components.PhyloExplorer.Types (FrameDoc(..))
import Gargantext.Sessions (Session, sessionId)
import Gargantext.Config.REST (logRESTError)
import Gargantext.Hooks.Loader (useLoaderEffect)
import Gargantext.Sessions (Session)
import Gargantext.Types (CTabNgramType(..), TabSubType(..), TabType(..))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
here :: R2.Here
here = R2.here "Gargantext.Components.GraphExplorer.Frame.DocFocus"
here = R2.here "Gargantext.Components.PhyloExplorer.Frame.DocFocus"
type Props =
( frameDoc :: FrameDoc
( frameDoc :: FrameDoc
, session :: Session
, closeCallback :: Unit -> Effect Unit
)
docFocus :: R2.Leaf Props
docFocus :: R2.Leaf ( key :: String | Props )
docFocus = R2.leaf docFocusCpt
docFocusCpt :: R.Component Props
docFocusCpt :: R.Component ( key :: String | Props )
docFocusCpt = here.component "main" cpt where
cpt { frameDoc: FrameDoc { docId, listId, corpusId }
, session
, closeCallback
} _ = do
-- | States
-- |
state' /\ state <- R2.useBox' (Nothing :: Maybe LoadedData)
-- | Computed
-- |
let
tabType :: TabType
tabType = TabDocument (TabNgramType CTabTerms)
path :: DocPath
path =
{ listIds: [listId]
, mCorpusId: Just corpusId
, nodeId: docId
, session
, tabType
}
-- | Hooks
-- |
useLoaderEffect
{ errorHandler: logRESTError here "[docFocus]"
, loader: loadData
, path
, state
}
-- | Render
-- |
pure $
H.div
{ className: "graph-doc-focus" }
{ className: "phylo-doc-focus" }
[
H.div
{ className: "graph-doc-focus__header" }
[
B.iconButton
{ name: "times"
, elevation: Level2
, callback: closeCallback
}
]
,
H.div
{ className: "graph-doc-focus__body" }
[
-- print the document node
node
{ listId
, mCorpusId: Just corpusId
, nodeId: docId
, key: show (sessionId session) <> "-" <> show docId
}
]
B.cloak
{ isDisplayed: isJust state'
, idlingPhaseDuration: Just 150
, cloakSlot:
B.preloader
{}
, defaultSlot:
R2.fromMaybe state' \loaded ->
layout
{ loaded
, path
, sideControlsSlot: Just $
H.div
{ className: "phylo-doc-focus__header" }
[
B.iconButton
{ name: "times"
, elevation: Level2
, callback: closeCallback
}
]
}
}
]
src/Gargantext/Components/PhyloExplorer/Layout.purs
View file @ b83573c3
......@@ -275,6 +275,7 @@ layoutCpt = here.component "layout" cpt where
{ session
, frameDoc: frameDoc_
, closeCallback: closeDocCallback
, key: show $ getter _.docId frameDoc_
}
]
]
......
src/Gargantext/Components/PhyloExplorer/Types.purs
View file @ b83573c3
......@@ -30,7 +30,6 @@ import Data.String.Extra (camelCase)
import Data.Tuple as Tuple
import Data.Tuple.Nested ((/\))
import Gargantext.Components.PhyloExplorer.JSON (PhyloJSON(..), RawEdge(..), RawObject(..))
import Gargantext.Types (NodeID)
import Simple.JSON as JSON
-- @NOTE #219: PureScript Date or stick to JavaScript foreign?
......@@ -520,6 +519,7 @@ newtype FrameDoc = FrameDoc
, listId :: ListId
}
derive instance Newtype FrameDoc _
derive instance Generic FrameDoc _
derive instance Eq FrameDoc
......
src/sass/_legacy/_document.sass
View file @ b83573c3
......@@ -9,28 +9,21 @@ $document-container-width: 780px
position: relative
width: 100%
max-width: $document-container-width
margin: 0 auto
&__controls
// margin-bottom: space-x(4)
float: right
color: $primary
&__header
display: flex
justify-content: space-between
padding: $card-spacer-y $card-spacer-x
border-bottom: 1px solid $border-color
margin-bottom: $card-spacer-y
&__hint
margin-right: space-x(1)
font-style: italic
font-size: 14px
&__side-controls
display: flex
align-items: center
// delaying hint apparition
animation-name: fade-in
animation-delay: 400ms
animation-duration: 600ms
animation-timing-function: ease-in-out
animation-direction: alternate
animation-iteration-count: infinite
opacity: 0
&__saving
color: $primary
display: flex
&__spinner
width: 16px
......@@ -38,8 +31,14 @@ $document-container-width: 780px
&__icon
font-size: 20px
animation: fade-in 200ms ease-in-out
// fading icon apparition with a little pulse
// wait a little, then fading icon on hiding
animation: fade-in 200ms ease-in-out, fade-out 100ms ease-in-out 2000ms 1 normal forwards, pulse 200ms ease-in-out 0ms 1
&__body
max-width: $document-container-width
padding: $card-spacer-x
margin: 0 auto
&__separator-label
font-weight: bold
......
src/sass/_legacy/_graph.sass
View file @ b83573c3
......@@ -102,23 +102,16 @@
@include term-window
&__header
padding: 0.5rem 1.5rem
z-index: z-index('tile', 'navbar')
// avoid overlap with document side controls
@include right-handed
float: right
margin-left: space-x(4)
@include left-handed
float: left
&__body
// extra position fitting the document title separator with the graph
// sidebar tabs nav border
$offset-top: 13px
padding-top: $offset-top
padding-left: $card-spacer-x
padding-right: $card-spacer-x
margin-right: space-x(4)
// remove document header top spacing due to the already presence of
// the inner column top teaser
.document-layout__header
padding-top: initial
/////////////////////////////////////////////
......
src/sass/_legacy/_phylo.scss
View file @ b83573c3
......@@ -524,6 +524,27 @@ $decreasing-color: #11638F;
}
}
/////////////////////////////////////////////
.phylo-doc-focus {
@include term-window();
&__header {
// avoid overlap with document side controls
@include right-handed() {
margin-left: space-x(4);
}
@include left-handed () {
margin-right: space-x(4);
}
}
// remove document header top spacing due to the already presence of
// the inner column top teaser
.document-layout__header {
padding-top: initial;
}
}
////////////////////////////////////////////////////////////////
.phylo-sidebar {
......
src/sass/_legacy/_styles.sass
View file @ b83573c3
......@@ -35,18 +35,14 @@
&__header
padding: $card-spacer-y $card-spacer-x
font-size: 20px
@include right-handed
float: right
@include left-handed
float: left
text-align: right
&__body
padding-left: $card-spacer-x
padding-right: $card-spacer-x
.document-layout__title
font-size: 23px
font-size: 21px
.document-layout__abstract__content
max-height: 200px
......
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