Forest.purs 8.6 KB
Newer Older
James Laver's avatar
James Laver committed
1
module Gargantext.Components.Forest
arturo's avatar
arturo committed
2
  ( forestLayout
3
  , Props
James Laver's avatar
James Laver committed
4
  ) where
5

6
import Data.Array as A
7
import Data.Map (empty)
8 9
import Data.Map as Map
import Data.Maybe (Maybe(..), fromMaybe)
10
import Gargantext.Components.App.Store as Store
arturo's avatar
arturo committed
11 12
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Position(..), TooltipPosition(..), Variant(..))
13
import Gargantext.Components.Forest.Tree (treeLoader)
14
import Gargantext.Ends (Frontends)
15
import Gargantext.Prelude
16
import Gargantext.Sessions (Session(..), unSessions)
17
import Gargantext.Utils.Reactix as R2
18 19 20
import Reactix as R
import Reactix.DOM.HTML as H
import Toestand as T
James Laver's avatar
James Laver committed
21

22

James Laver's avatar
James Laver committed
23 24 25
here :: R2.Here
here = R2.here "Gargantext.Components.Forest"

26
-- Shared by components here with Tree
27
type Props =
28
  ( frontends :: Frontends
29
  )
30

arturo's avatar
arturo committed
31 32 33 34
forestLayout :: R2.Leaf Props
forestLayout = R2.leaf forestLayoutCpt
forestLayoutCpt :: R.Component Props
forestLayoutCpt = here.component "forest" cpt where
35 36 37
  cpt { frontends } _ = do
    { handed, reloadForest, sessions, pinnedTreeId } <- Store.use
    
38 39 40 41
    -- TODO Fix this. I think tasks shouldn't be a Box but only a Reductor
    -- tasks'        <- GAT.useTasks reloadRoot reloadForest
    -- R.useEffect' $ do
    --   T.write_ (Just tasks') tasks
James Laver's avatar
James Laver committed
42
    handed'       <- T.useLive T.unequal handed
43
    sessions'     <- T.useLive T.unequal sessions
44
    pinnedTreeId' <- T.useLive T.unequal pinnedTreeId
45
    -- forestOpen'   <- T.useLive T.unequal forestOpen
46
    -- reloadRoot'   <- T.useLive T.unequal reloadRoot
47
    -- route'        <- T.useLive T.unequal route
48

James Laver's avatar
James Laver committed
49
    -- TODO If `reloadForest` is set, `reload` state should be updated
50
    -- TODO fix tasks ref
arturo's avatar
arturo committed
51 52 53
    pure $

      H.div
54
      { className: "forest-layout bg-light" }
55
      (A.cons (plus {}) (trees handed' pinnedTreeId' sessions' reloadForest))
56
    where
57 58 59
      trees handed' pinnedTreeId' sessions' reloadForest =
        (tree handed' pinnedTreeId' reloadForest) <$> unSessions sessions'
      tree handed' pinnedTreeId' reloadForest s@(Session { treeId }) =
arturo's avatar
arturo committed
60
        H.div
arturo's avatar
arturo committed
61
        { className: "forest-layout__tree" }
arturo's avatar
arturo committed
62
        [
63
          treeLoader
64
          { frontends
65 66
          , handed: handed'
          , reload: reloadForest
67
          , root: r
68 69 70
          , session: s
          , key: "tree-" <> (show treeId)
          }
arturo's avatar
arturo committed
71
        ]
72 73
        where
          r = fromMaybe treeId (Map.lookup (show s) pinnedTreeId')
74

75
type Plus = ( )
76 77

plus :: R2.Leaf Plus
78
plus = R2.leaf plusCpt
79 80
plusCpt :: R.Component Plus
plusCpt = here.component "plus" cpt where
81 82 83
  cpt { } _ = do
    { backend, pinnedTreeId, showLogin, showSearch } <- Store.use
    
arturo's avatar
arturo committed
84 85 86 87 88 89 90 91 92 93
    -- Behaviors
    let
      click _ = do
        -- NOTE Reset backend in case G.C.N.Home.homeLayout set that to (Just b)
        -- from current url
        _ <- T.write Nothing backend
        T.write_ true showLogin

    -- Render
    pure $
94
      H.div { className: "forest-layout__actions position-sticky top-0 py-1 bg-light" } 
95
      [
96 97 98 99 100 101 102 103 104
        H.div
        { className: "forest-layout__top_action" }
        [
          B.tooltipContainer
          { delayShow: 600
          , position: TooltipPosition Right
          , tooltipSlot:
            B.span_ "Search in trees"
          , defaultSlot:
arturo's avatar
arturo committed
105
            B.button
106 107
            { className: "w-100 text-small px-2"
            , callback: \_ -> T.write_ true showSearch
arturo's avatar
arturo committed
108 109 110
            , variant: ButtonVariant Light
            }
            [
111 112 113 114 115 116
              B.icon
              { name: "search"}
            ,
              B.wad_ [ "d-inline-block", "w-1" ]
            ,
              B.span_ "Search"
arturo's avatar
arturo committed
117
            ]
118 119
          }
        ]
arturo's avatar
arturo committed
120
      ,
121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
      {-
        H.div
        { className: "forest-layout__top_action" }
        [
          B.tooltipContainer
          { delayShow: 600
          , position: TooltipPosition Right
          , tooltipSlot:
              B.span_ "Back to home"
          , defaultSlot:
              B.button
              { className: "w-100 text-small px-2"
              , callback: const $ goToRoute Home
              , variant: ButtonVariant Light
              }
              [
                B.icon { name: "home" }
              ,
                B.wad_ [ "d-inline-block", "w-1" ]
              ,
                B.span_ "Back to home"
              ]
143
          }
144
        ]
145
      ,
146 147 148 149 150 151 152 153 154 155
      -}
        H.div
        { className: "forest-layout__top_action" }
        [
          B.tooltipContainer
          { delayShow: 600
          , position: TooltipPosition Right
          , tooltipSlot:
            B.span_ "Reset pins"
          , defaultSlot:
arturo's avatar
arturo committed
156
            B.button
157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182
            { className: "w-100 text-small px-2"
            , callback: \_ -> T.write_ empty pinnedTreeId
            , variant: ButtonVariant Light
            }
            [
              B.icon
              { name: "thumb-tack-inclined-cancel"}
            ,
              B.wad_ [ "d-inline-block", "w-1" ]
            ,
              B.span_ "Reset pins"
            ]
          }
        ]
      ,
        H.div
        { className: "forest-layout__top_action" }
        [
          B.tooltipContainer
          { delayShow: 600
          , position: TooltipPosition Right
          , tooltipSlot:
            B.span_ "Explore the GarganText ecosystem | Add or remove connection to the different workspaces (servers)"
          , defaultSlot:
            B.button
            { className: "w-100 text-small px-2"
arturo's avatar
arturo committed
183 184 185 186
            , callback: click
            , variant: ButtonVariant Light
            }
            [
arturo's avatar
arturo committed
187
              B.icon
188
              { name: "universal-access"}
arturo's avatar
arturo committed
189
            ,
arturo's avatar
arturo committed
190
              B.wad_ [ "d-inline-block", "w-1" ]
arturo's avatar
arturo committed
191
            ,
192
              B.span_ "Log in/out (workspaces)"
arturo's avatar
arturo committed
193
            ]
194 195 196 197
          }
        ]
      
      {-
Karen Konou's avatar
Karen Konou committed
198
      ,
199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215
        H.div
        { className: "forest-layout__action" }
        [
          B.tooltipContainer
          { delayShow: 600
          , position: TooltipPosition Right
          , tooltipSlot:
              B.span_ "Back to home"
          , defaultSlot:
              B.button
              { className: "forest-layout__action__button"
              , callback: const $ goToRoute Home
              , variant: ButtonVariant Light
              }
              [
                B.icon { name: "home" }
              ]
Karen Konou's avatar
Karen Konou committed
216
          }
217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281
        ,
          B.tooltipContainer
          { delayShow: 600
          , position: TooltipPosition Right
          , tooltipSlot:
            B.span_ "Reset pins"
          , defaultSlot:
            B.button
            { className: "forest-layout__action__button"
            , callback: \_ -> T.write_ empty pinnedTreeId
            , variant: ButtonVariant Light
            }
            [
              B.icon { name: "thumb-tack-inclined-cancel" }
            ]
          }
        ,
          B.tooltipContainer
          { delayShow: 600
          , position: TooltipPosition Right
          , tooltipSlot:
              B.span_ "Add or remove connection to the server(s)"
          , defaultSlot:
              B.button
              { className: "forest-layout__action__button"
              , callback: click
              , variant: ButtonVariant Light
              }
              [
                B.icon
                { name: "universal-access" }
              ,
                B.wad_ [ "d-inline-block", "w-1" ]
              ,
                H.text $ "Log in/out"
              ]
          }
        ]
        ,
        H.div
        { className: "forest-layout__action" }
        [
          B.tooltipContainer
          { delayShow: 600
          , position: TooltipPosition Right
          , tooltipSlot:
            B.span_ "Search in tree"
          , defaultSlot:
            B.button
            { className: "forest-layout__action__button"
            , callback: \_ -> T.write_ true showSearch
            , variant: ButtonVariant Light
            }
            [
              B.icon
              { name: "search"}
            ,
              B.wad_ [ "d-inline-block", "w-1" ]
            ,
              H.text $ "Search"
            ]
          }
        ]
      -}

Karen Konou's avatar
Karen Konou committed
282
      ]
283

284 285
  --, H.div { "type": "", className: "fa fa-plus-circle fa-lg"} []
  --, H.div { "type": "", className: "fa fa-minus-circle fa-lg"} []
286 287
  -- TODO same as the one in the Login Modal (same CSS)
  -- [ H.i { className: "material-icons md-36"} [] ]
288

289

arturo's avatar
arturo committed
290 291 292 293 294
-- forestLayout :: R2.Leaf Props
-- forestLayout = R2.leaf forestLayoutCpt
-- forestLayoutCpt :: R.Memo Props
-- forestLayoutCpt = R.memo' $ here.component "forestLayout" cpt where
--   cpt p _ = pure $
295

arturo's avatar
arturo committed
296 297 298 299 300 301 302 303 304
--     H.div
--     { className: "forest-layout" }
--     [
--       H.div { className: "forest-layout__top-teaser" } []
--     ,
--       forest p []
--     ,
--       H.div { className: "forest-layout__bottom-teaser" } []
--     ]