Skip to content

P
purescript-gargantext
Commit 7a559d4e authored by arturo's avatar arturo
Browse files
Options

[phylo] add document focus 

* #375
parent 61422c57
Pipeline #2889 failed with stage
    in 0 seconds
    Expand all Hide whitespace changes
    Inline Side-by-side
    Showing with 768 additions and 224 deletions
    dist/styles/bootstrap-darkster.css
    View file @ 7a559d4e
    ......@@ -7864,14 +7864,15 @@ input[type=range]:-moz-focusring {
    background-color: #121212;
    }
    .graph-doc-list__item--selected::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    position: absolute;
    z-index: 1;
    width: 2px;
    background-color: #0F81C7;
    left: 0;
    top: 0;
    bottom: 0;
    }
    .graph-doc-list__item--selected:first-child::before {
    border-top-left-radius: 0.25rem;
    ......@@ -9280,6 +9281,20 @@ select.form-control {
    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 {
    display: flex;
    position: relative;
    ......@@ -9443,7 +9458,7 @@ select.form-control {
    font-weight: bold;
    }
    .phylo-selection-tab__selection {
    margin: 16px 20px 0;
    margin: 16px 20px;
    }
    .phylo-selection-tab__selection__item {
    white-space: normal;
    ......@@ -9475,6 +9490,55 @@ select.form-control {
    color: #ADB5BD;
    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 {
    display: flex;
    ......
    dist/styles/bootstrap-default.css
    View file @ 7a559d4e
    ......@@ -7817,14 +7817,15 @@ input[type=range]:-moz-focusring {
    background-color: #FCFCFC;
    }
    .graph-doc-list__item--selected::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    position: absolute;
    z-index: 1;
    width: 2px;
    background-color: #17a2b8;
    left: 0;
    top: 0;
    bottom: 0;
    }
    .graph-doc-list__item--selected:first-child::before {
    border-top-left-radius: 0.25rem;
    ......@@ -9233,6 +9234,20 @@ select.form-control {
    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 {
    display: flex;
    position: relative;
    ......@@ -9396,7 +9411,7 @@ select.form-control {
    font-weight: bold;
    }
    .phylo-selection-tab__selection {
    margin: 16px 20px 0;
    margin: 16px 20px;
    }
    .phylo-selection-tab__selection__item {
    white-space: normal;
    ......@@ -9428,6 +9443,55 @@ select.form-control {
    color: #ADB5BD;
    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 {
    display: flex;
    ......
    dist/styles/bootstrap-greyson.css
    View file @ 7a559d4e
    ......@@ -7573,14 +7573,15 @@ input[type=range]:-moz-focusring {
    background-color: #FCFCFC;
    }
    .graph-doc-list__item--selected::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    position: absolute;
    z-index: 1;
    width: 2px;
    background-color: #5c8f94;
    left: 0;
    top: 0;
    bottom: 0;
    }
    .graph-doc-list__item--selected:first-child::before {
    border-top-left-radius: 0.25rem;
    ......@@ -8989,6 +8990,20 @@ select.form-control {
    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 {
    display: flex;
    position: relative;
    ......@@ -9152,7 +9167,7 @@ select.form-control {
    font-weight: bold;
    }
    .phylo-selection-tab__selection {
    margin: 16px 20px 0;
    margin: 16px 20px;
    }
    .phylo-selection-tab__selection__item {
    white-space: normal;
    ......@@ -9184,6 +9199,55 @@ select.form-control {
    color: #ADB5BD;
    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 {
    display: flex;
    ......
    dist/styles/bootstrap-herbie.css
    View file @ 7a559d4e
    ......@@ -7821,14 +7821,15 @@ input[type=range]:-moz-focusring {
    background-color: #FCFCFC;
    }
    .graph-doc-list__item--selected::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    position: absolute;
    z-index: 1;
    width: 2px;
    background-color: #74DBEF;
    left: 0;
    top: 0;
    bottom: 0;
    }
    .graph-doc-list__item--selected:first-child::before {
    border-top-left-radius: 0.25rem;
    ......@@ -9237,6 +9238,20 @@ select.form-control {
    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 {
    display: flex;
    position: relative;
    ......@@ -9400,7 +9415,7 @@ select.form-control {
    font-weight: bold;
    }
    .phylo-selection-tab__selection {
    margin: 16px 20px 0;
    margin: 16px 20px;
    }
    .phylo-selection-tab__selection__item {
    white-space: normal;
    ......@@ -9432,6 +9447,55 @@ select.form-control {
    color: #ADB5BD;
    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 {
    display: flex;
    ......
    dist/styles/bootstrap-monotony.css
    View file @ 7a559d4e
    ......@@ -7822,14 +7822,15 @@ input[type=range]:-moz-focusring {
    background-color: #FCFCFC;
    }
    .graph-doc-list__item--selected::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    position: absolute;
    z-index: 1;
    width: 2px;
    background-color: #515151;
    left: 0;
    top: 0;
    bottom: 0;
    }
    .graph-doc-list__item--selected:first-child::before {
    border-top-left-radius: 0.25rem;
    ......@@ -9238,6 +9239,20 @@ select.form-control {
    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 {
    display: flex;
    position: relative;
    ......@@ -9401,7 +9416,7 @@ select.form-control {
    font-weight: bold;
    }
    .phylo-selection-tab__selection {
    margin: 16px 20px 0;
    margin: 16px 20px;
    }
    .phylo-selection-tab__selection__item {
    white-space: normal;
    ......@@ -9433,6 +9448,55 @@ select.form-control {
    color: #ADB5BD;
    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 {
    display: flex;
    ......
    src/Gargantext/Components/Nodes/Corpus/Phylo.purs
    View file @ 7a559d4e
    ......@@ -11,7 +11,7 @@ import Gargantext.Components.Bootstrap as B
    import Gargantext.Components.PhyloExplorer.API (get)
    import Gargantext.Components.PhyloExplorer.Layout (layout)
    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.Hooks.FirstEffect (useFirstEffect')
    import Gargantext.Hooks.Loader (useLoaderEffect)
    ......@@ -40,7 +40,7 @@ nodeCpt = here.component "node" cpt where
    -- |
    session <- useSession
    state' /\ state <- R2.useBox' (Nothing :: Maybe PhyloDataSet)
    state' /\ state <- R2.useBox' (Nothing :: Maybe PhyloSet)
    cache' /\ cache <- R2.useBox' (defaultCacheParams :: CacheParams)
    -- | Computed
    ......@@ -92,13 +92,15 @@ nodeCpt = here.component "node" cpt where
    ]
    ]
    , defaultSlot:
    R2.fromMaybe state' \(phyloDataSet :: PhyloDataSet) ->
    R2.fromMaybe state' \(PhyloSet { corpusId, listId, phyloData }) ->
    let
    state_ :: Record PhyloStore.State
    state_ =
    -- Data
    { phyloDataSet
    { phyloData
    , corpusId
    , listId
    , phyloId: nodeId
    -- (cache params)
    , expandSelection: getter _.expandSelection cache'
    ......
    src/Gargantext/Components/PhyloExplorer/API.purs
    View file @ 7a559d4e
    ......@@ -16,8 +16,8 @@ import Data.Maybe (Maybe(..))
    import Data.Newtype (class Newtype)
    import Data.Show.Generic (genericShow)
    import Data.Symbol (SProxy(..))
    import Gargantext.Components.PhyloExplorer.JSON (PhyloJSONSet)
    import Gargantext.Components.PhyloExplorer.Types (PhyloDataSet, parsePhyloJSONSet)
    import Gargantext.Components.PhyloExplorer.JSON (PhyloJSON)
    import Gargantext.Components.PhyloExplorer.Types (PhyloSet, parseToPhyloSet)
    import Gargantext.Config.REST (AffRESTError)
    import Gargantext.Routes (SessionRoute(..))
    import Gargantext.Routes as GR
    ......@@ -30,10 +30,10 @@ import Simple.JSON as JSON
    import Simple.JSON.Generics as JSONG
    get :: S.Session -> NodeID -> AffRESTError (PhyloDataSet)
    get session nodeId = request >>= (_ <#> parsePhyloJSONSet) >>> pure
    get :: S.Session -> NodeID -> AffRESTError (PhyloSet)
    get session nodeId = request >>= (_ <#> parseToPhyloSet) >>> pure
    where
    request :: AffRESTError (PhyloJSONSet)
    request :: AffRESTError (PhyloJSON)
    request = S.get session $ PhyloAPI nodeId
    ----------------------------------------------------------
    ......
    src/Gargantext/Components/PhyloExplorer/Frame/DocFocus.purs 0 → 100644
    View file @ 7a559d4e
    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
    here :: R2.Here
    here = R2.here "Gargantext.Components.GraphExplorer.Frame.DocFocus"
    type Props =
    ( frameDoc :: FrameDoc
    , session :: Session
    , closeCallback :: Unit -> Effect Unit
    )
    docFocus :: R2.Leaf Props
    docFocus = R2.leaf docFocusCpt
    docFocusCpt :: R.Component Props
    docFocusCpt = here.component "main" cpt where
    cpt { frameDoc: FrameDoc { docId, listId, corpusId }
    , session
    , closeCallback
    } _ = do
    -- | 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
    }
    ]
    ]
    src/Gargantext/Components/PhyloExplorer/JSON.purs
    View file @ 7a559d4e
    module Gargantext.Components.PhyloExplorer.JSON where
    module Gargantext.Components.PhyloExplorer.JSON
    ( PhyloJSON(..)
    , GraphData(..)
    , NodeData(..), RawObject(..)
    , EdgeData(..), RawEdge(..)
    ) where
    import Gargantext.Prelude
    ......@@ -10,6 +15,26 @@ import Gargantext.Utils.SimpleJSON (untaggedSumRep)
    import Simple.JSON as JSON
    newtype PhyloJSON = PhyloJSON
    { pd_corpusId :: Int
    , pd_listId :: Int
    , pd_data ::
    { _subgraph_cnt :: Int
    , directed :: Boolean
    , edges :: Array RawEdge
    , objects :: Array RawObject
    , strict :: Boolean
    | GraphData
    }
    }
    derive instance Generic PhyloJSON _
    derive instance Eq PhyloJSON
    instance Show PhyloJSON where show = genericShow
    derive newtype instance JSON.ReadForeign PhyloJSON
    --------------------------------------------------
    type GraphData =
    ( bb :: String
    , color :: String
    ......@@ -39,22 +64,6 @@ type GraphData =
    --------------------------------------------------
    newtype PhyloJSONSet = PhyloJSONSet
    { _subgraph_cnt :: Int
    , directed :: Boolean
    , edges :: Array RawEdge
    , objects :: Array RawObject
    , strict :: Boolean
    | GraphData
    }
    derive instance Generic PhyloJSONSet _
    derive instance Eq PhyloJSONSet
    instance Show PhyloJSONSet where show = genericShow
    derive newtype instance JSON.ReadForeign PhyloJSONSet
    --------------------------------------------------
    type NodeData =
    ( height :: String
    , label :: String
    ......@@ -125,7 +134,6 @@ instance Show RawObject where show = genericShow
    instance JSON.ReadForeign RawObject where
    readImpl f = GR.to <$> untaggedSumRep f
    --------------------------------------------------
    type EdgeData =
    ......
    src/Gargantext/Components/PhyloExplorer/Layout.purs
    View file @ 7a559d4e
    ......@@ -13,14 +13,16 @@ import Data.String (null)
    import Effect (Effect)
    import FFI.Simple ((..), (.=))
    import Gargantext.Components.Bootstrap as B
    import Gargantext.Components.PhyloExplorer.Frame.DocFocus (docFocus)
    import Gargantext.Components.PhyloExplorer.Resources (PubSubEvent(..))
    import Gargantext.Components.PhyloExplorer.Resources as RS
    import Gargantext.Components.PhyloExplorer.SideBar (sideBar)
    import Gargantext.Components.PhyloExplorer.Store as PhyloStore
    import Gargantext.Components.PhyloExplorer.ToolBar (toolBar)
    import Gargantext.Components.PhyloExplorer.TopBar (topBar)
    import Gargantext.Components.PhyloExplorer.Types (DisplayView, ExtractedCount, FrameDoc, PhyloDataSet(..), TabView(..), Term, sortSources)
    import Gargantext.Components.PhyloExplorer.Types (DisplayView, ExtractedCount, FrameDoc, PhyloData(..), TabView(..), Term, sortSources)
    import Gargantext.Hooks.FirstEffect (useFirstEffect')
    import Gargantext.Hooks.Session (useSession)
    import Gargantext.Hooks.UpdateEffect (useUpdateEffect1', useUpdateEffect3')
    import Gargantext.Types (SidePanelState(..))
    import Gargantext.Utils (getter, (?))
    ......@@ -59,11 +61,11 @@ layoutCpt = here.component "layout" cpt where
    , selectedSource
    , extractedCount
    , phyloId
    , phyloDataSet
    , phyloData
    , frameDoc
    } <- PhyloStore.use
    (PhyloDataSet o) <- R2.useLive' phyloDataSet
    (PhyloData o) <- R2.useLive' phyloData
    phyloId' <- R2.useLive' phyloId
    sources' <- R2.useLive' sources
    terms' <- R2.useLive' terms
    ......@@ -77,6 +79,8 @@ layoutCpt = here.component "layout" cpt where
    selectedSource' <- R2.useLive' selectedSource
    frameDoc' <- R2.useLive' frameDoc
    session <- useSession
    -- | Hooks
    -- |
    let topBarPortalKey = "portal-topbar::" <> show phyloId'
    ......@@ -143,6 +147,9 @@ layoutCpt = here.component "layout" cpt where
    mTerm <- RS.autocompleteSearch terms' s
    RS.autocompleteSubmit displayView mTerm
    closeDocCallback :: Unit -> Effect Unit
    closeDocCallback _ = T.write_ Nothing frameDoc
    -- | Effects
    -- |
    ......@@ -150,7 +157,7 @@ layoutCpt = here.component "layout" cpt where
    useFirstEffect' do
    (sortSources >>> flip T.write_ sources) o.sources
    RS.setGlobalD3Reference window d3
    RS.setGlobalDependencies window (PhyloDataSet o)
    RS.setGlobalDependencies window (PhyloData o)
    RS.drawPhylo
    o.branches
    o.periods
    ......@@ -256,7 +263,7 @@ layoutCpt = here.component "layout" cpt where
    { className: "phylo__frame" }
    [
    -- Doc focus
    R2.fromMaybe frameDoc' \(f :: FrameDoc) ->
    R2.fromMaybe frameDoc' \(frameDoc_ :: FrameDoc) ->
    H.div
    { className: "phylo__focus" }
    ......@@ -264,7 +271,11 @@ layoutCpt = here.component "layout" cpt where
    H.div
    { className: "phylo__focus__inner" }
    [
    H.text $ "hello"
    docFocus
    { session
    , frameDoc: frameDoc_
    , closeCallback: closeDocCallback
    }
    ]
    ]
    ,
    ......
    src/Gargantext/Components/PhyloExplorer/Resources.purs
    View file @ 7a559d4e
    ......@@ -25,7 +25,7 @@ import Data.String as String
    import Effect (Effect)
    import Effect.Uncurried (EffectFn1, EffectFn2, EffectFn4, EffectFn7, runEffectFn1, runEffectFn2, runEffectFn4, runEffectFn7)
    import FFI.Simple ((..), (.=), (.?))
    import Gargantext.Components.PhyloExplorer.Types (AncestorLink, Branch, BranchLink, DisplayView(..), Group(..), Link, Period, PhyloDataSet(..), Source(..), Term(..))
    import Gargantext.Components.PhyloExplorer.Types (AncestorLink, Branch, BranchLink, DisplayView(..), Group(..), Link, Period, PhyloData(..), Source(..), Term(..))
    import Gargantext.Utils (getter)
    import Gargantext.Utils.Reactix ((~~))
    import Gargantext.Utils.Reactix as R2
    ......@@ -203,8 +203,8 @@ selectionNodes = ffi ["selection", ""] "selection.nodes()"
    -----------------------------------------------------------
    setGlobalDependencies :: Window -> PhyloDataSet -> Effect Unit
    setGlobalDependencies w (PhyloDataSet o)
    setGlobalDependencies :: Window -> PhyloData -> Effect Unit
    setGlobalDependencies w (PhyloData o)
    = do
    _ <- pure $ (w .= "freq") {}
    _ <- pure $ (w .= "nbBranches") o.nbBranches
    ......
    src/Gargantext/Components/PhyloExplorer/Sidebar/DetailsTab.purs
    View file @ 7a559d4e
    ......@@ -5,7 +5,7 @@ module Gargantext.Components.PhyloExplorer.DetailsTab
    import Gargantext.Prelude
    import Gargantext.Components.PhyloExplorer.Store as PhyloStore
    import Gargantext.Components.PhyloExplorer.Types (PhyloDataSet(..))
    import Gargantext.Components.PhyloExplorer.Types (PhyloData(..))
    import Gargantext.Utils (nbsp)
    import Gargantext.Utils.Reactix as R2
    import Reactix as R
    ......@@ -25,7 +25,7 @@ detailsTabCpt = here.component "" cpt where
    -- |
    store <- PhyloStore.use
    (PhyloDataSet o) <- R2.useLive' store.phyloDataSet
    (PhyloData o) <- R2.useLive' store.phyloData
    -- | Render
    -- |
    ......
    src/Gargantext/Components/PhyloExplorer/Sidebar/SelectionTab.purs
    View file @ 7a559d4e
    ......@@ -12,6 +12,7 @@ import Data.Tuple.Nested ((/\))
    import Effect (Effect)
    import Gargantext.Components.Bootstrap as B
    import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
    import Gargantext.Components.PhyloExplorer.Sidebar.DocList (docListWrapper)
    import Gargantext.Components.PhyloExplorer.Store as PhyloStore
    import Gargantext.Components.PhyloExplorer.Types (ExtractedCount(..), ExtractedTerm(..), defaultCacheParams)
    import Gargantext.Hooks.FirstEffect (useFirstEffect')
    ......@@ -322,19 +323,26 @@ component = here.component "main" cpt where
    ]
    ]
    ]
    -- ,
    ,
    -- (separator)
    -- R2.when (not null extractedTerms) $
    -- H.div
    -- { className: "phylo-selection-tab__separator" }
    -- [
    -- B.icon
    -- { name: "angle-double-down" }
    -- ]
    -- ,
    R2.when (not null extractedTerms) $
    H.div
    { className: "phylo-selection-tab__separator" }
    [
    B.icon
    { name: "angle-double-down" }
    ]
    ,
    -- Extracted Docs
    -- R2.when (not null extractedTerms) $
    R2.when (not null extractedTerms) $
    H.div
    { className: "phylo-selection-tab__extracted-docs" }
    [
    docListWrapper
    {}
    ]
    ]
    termFontSize :: Number -> String
    ......
    src/Gargantext/Components/PhyloExplorer/Store.purs
    View file @ 7a559d4e
    ......@@ -11,7 +11,7 @@ module Gargantext.Components.PhyloExplorer.Store
    import Gargantext.Prelude
    import Data.Maybe (Maybe(..))
    import Gargantext.Components.PhyloExplorer.Types (DisplayView(..), ExtractedCount, ExtractedTerm, FrameDoc, PhyloDataSet, Source, TabView(..), Term, defaultCacheParams)
    import Gargantext.Components.PhyloExplorer.Types (CorpusId, DisplayView(..), ExtractedCount, ExtractedTerm, FrameDoc, PhyloData, Source, TabView(..), Term, ListId, defaultCacheParams)
    import Gargantext.Types (NodeID, SidePanelState(..))
    import Gargantext.Utils (getter)
    import Gargantext.Utils.Reactix as R2
    ......@@ -25,8 +25,10 @@ here = R2.here "Gargantext.Components.GraphExplorer.Store"
    type Store =
    -- Data
    ( phyloDataSet :: T.Box PhyloDataSet
    ( phyloData :: T.Box PhyloData
    , phyloId :: T.Box NodeID
    , corpusId :: T.Box CorpusId
    , listId :: T.Box ListId
    , isBuilt :: T.Box Boolean
    -- Layout
    , toolBarDisplayed :: T.Box Boolean
    ......@@ -54,8 +56,10 @@ type Store =
    type State =
    -- Data
    ( phyloDataSet :: PhyloDataSet
    ( phyloData :: PhyloData
    , phyloId :: NodeID
    , corpusId :: CorpusId
    , listId :: ListId
    , isBuilt :: Boolean
    -- Layout
    , toolBarDisplayed :: Boolean
    ......
    src/Gargantext/Components/PhyloExplorer/Types.purs
    View file @ 7a559d4e
    module Gargantext.Components.PhyloExplorer.Types
    ( PhyloDataSet(..)
    , parsePhyloJSONSet
    ( PhyloSet(..), parseToPhyloSet
    , CorpusId, ListId, DocId
    , PhyloData(..)
    , Branch(..), Period(..), Group(..)
    , Link(..), AncestorLink(..), BranchLink(..)
    , Term(..)
    ......@@ -28,18 +29,72 @@ import Data.String as String
    import Data.String.Extra (camelCase)
    import Data.Tuple as Tuple
    import Data.Tuple.Nested ((/\))
    import Gargantext.Components.PhyloExplorer.JSON (PhyloJSONSet(..), RawEdge(..), RawObject(..))
    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?
    foreign import yearToDate :: String -> Date.Date
    foreign import stringToDate :: String -> Date.Date
    foreign import utcStringToDate :: String -> Date.Date
    type CorpusId = Int
    type ListId = Int
    type DocId = Int
    ------------------------------------------------------------------
    data PhyloSet = PhyloSet
    { corpusId :: CorpusId
    , listId :: ListId
    , phyloData :: PhyloData
    }
    derive instance Generic PhyloSet _
    derive instance Eq PhyloSet
    instance Show PhyloSet where show = genericShow
    parseToPhyloSet :: PhyloJSON -> PhyloSet
    parseToPhyloSet (PhyloJSON o) = PhyloSet
    { corpusId : o.pd_corpusId
    , listId : o.pd_listId
    , phyloData : PhyloData
    { ancestorLinks
    , bb : parseBB p.bb
    , branchLinks
    , branches
    , groups
    , links
    , name : p.name
    , nbBranches : parseInt p.phyloBranches
    -- @NOTE #219: remotely stringify as a Double instead of an Int (reason?)
    , nbDocs : (parseFloat >>> parseInt') p.phyloDocs
    , nbFoundations : parseInt p.phyloFoundations
    , nbGroups : parseInt p.phyloGroups
    , nbPeriods : parseInt p.phyloPeriods
    , nbTerms : parseInt p.phyloTerms
    , periods
    , sources : parseSources p.phyloSources
    , timeScale : p.phyloTimeScale
    , weighted : getGlobalWeightedValue groups
    }
    }
    where
    p = o.pd_data
    epochTS = p.phyloTimeScale == "epoch"
    ancestorLinks = parseAncestorLinks p.edges
    branchLinks = parseBranchLinks p.edges
    branches = parseBranches p.objects
    groups = parseGroups epochTS p.objects
    links = parseLinks p.edges
    periods = parsePeriods epochTS p.objects
    ----------------------------------------------------------------------
    data PhyloDataSet = PhyloDataSet
    data PhyloData = PhyloData
    { ancestorLinks :: Array AncestorLink
    , bb :: Array Number
    , branchLinks :: Array BranchLink
    ......@@ -59,41 +114,9 @@ data PhyloDataSet = PhyloDataSet
    , weighted :: Boolean
    }
    derive instance Generic PhyloDataSet _
    derive instance Eq PhyloDataSet
    instance Show PhyloDataSet where show = genericShow
    parsePhyloJSONSet :: PhyloJSONSet -> PhyloDataSet
    parsePhyloJSONSet (PhyloJSONSet o) = PhyloDataSet
    { ancestorLinks
    , bb : parseBB o.bb
    , branchLinks
    , branches
    , groups
    , links
    , name : o.name
    , nbBranches : parseInt o.phyloBranches
    -- @NOTE #219: remotely stringify as a Double instead of an Int (reason?)
    , nbDocs : (parseFloat >>> parseInt') o.phyloDocs
    , nbFoundations : parseInt o.phyloFoundations
    , nbGroups : parseInt o.phyloGroups
    , nbPeriods : parseInt o.phyloPeriods
    , nbTerms : parseInt o.phyloTerms
    , periods
    , sources : parseSources o.phyloSources
    , timeScale : o.phyloTimeScale
    , weighted : getGlobalWeightedValue groups
    }
    where
    epochTS = o.phyloTimeScale == "epoch"
    ancestorLinks = parseAncestorLinks o.edges
    branchLinks = parseBranchLinks o.edges
    branches = parseBranches o.objects
    groups = parseGroups epochTS o.objects
    links = parseLinks o.edges
    periods = parsePeriods epochTS o.objects
    derive instance Generic PhyloData _
    derive instance Eq PhyloData
    instance Show PhyloData where show = genericShow
    -----------------------------------------------------------
    ......@@ -492,9 +515,9 @@ derive newtype instance JSON.ReadForeign ExtractedCount
    -----------------------------------------------------------
    newtype FrameDoc = FrameDoc
    { docId :: NodeID
    , corpusId :: NodeID
    , listId :: NodeID
    { docId :: DocId
    , corpusId :: CorpusId
    , listId :: ListId
    }
    derive instance Generic FrameDoc _
    ......
    src/sass/_legacy/_graph.sass
    View file @ 7a559d4e
    ......@@ -252,14 +252,13 @@
    background-color: $gray-50
    &--selected::before
    @include fit-positions
    content: ""
    position: absolute
    z-index: 1
    width: 2px
    background-color: $info
    left: 0
    top: 0
    bottom: 0
    // (following list group item border radius)
    &--selected:first-child::before
    ......
    src/sass/_legacy/_phylo.scss
    View file @ 7a559d4e
    ......@@ -383,6 +383,19 @@ $decreasing-color: #11638F;
    }
    }
    }
    &__focus {
    flex-grow: 1;
    pointer-events: all;
    position: relative;
    &__inner {
    @include fit-positions();
    position: absolute;
    background-color: $body-bg;
    }
    }
    }
    ......@@ -563,7 +576,7 @@ $decreasing-color: #11638F;
    }
    &__selection {
    margin: $margin-y $margin-x 0;
    margin: $margin-y $margin-x;
    &__item {
    white-space: normal;
    ......@@ -611,6 +624,65 @@ $decreasing-color: #11638F;
    color: $gray-500;
    text-align: center;
    }
    &__extracted-docs {
    margin: $margin-y $margin-x;
    }
    }
    .phylo-doc-list {
    &__item {
    @include clickable();
    display: flex;
    align-items: flex-start;
    transition: $transition-base;
    &:hover {
    background-color: $gray-50;
    }
    &--selected::before {
    @include fit-positions();
    content: "";
    position: absolute;
    z-index: 1;
    width: 2px;
    background-color: $info;
    }
    // (following list group item border radius)
    &--selected:first-child::before {
    border-top-left-radius: $list-group-border-radius;
    }
    &--selected:last-child::before {
    border-bottom-left-radius: $list-group-border-radius;
    }
    &__main {
    flex-grow: 1;
    padding-right: $card-spacer-x;
    }
    &__title,
    &__source,
    &__date {
    line-height: 1.3;
    margin-bottom: space-x(0.5);
    }
    &__source {
    font-size: 15px;
    color: $gray-700;
    }
    &__date {
    font-size: 14px;
    color: $gray-600;
    }
    }
    }
    ////////////////////////////////////////////////////////////////
    ......
    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