SelectionTab.purs 12.1 KB
Newer Older
1 2 3 4 5 6
module Gargantext.Components.PhyloExplorer.SelectionTab
  ( selectionTab
  ) where

import Gargantext.Prelude

7
import Data.Array (length, null)
8
import Data.Foldable (intercalate)
9
import Data.FunctorWithIndex (mapWithIndex)
10 11 12 13 14 15
import Data.Int (ceil)
import Data.Maybe (Maybe(..), isJust)
import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
arturo's avatar
arturo committed
16
import Gargantext.Components.PhyloExplorer.Sidebar.DocList (docListWrapper)
17
import Gargantext.Components.PhyloExplorer.Sidebar.UpdateTerms (updateTerms)
arturo's avatar
arturo committed
18
import Gargantext.Components.PhyloExplorer.Store as PhyloStore
19 20
import Gargantext.Components.PhyloExplorer.Types (ExtractedCount(..), ExtractedTerm(..), defaultCacheParams)
import Gargantext.Hooks.FirstEffect (useFirstEffect')
21
import Gargantext.Types (CTabNgramType(..))
22
import Gargantext.Utils (nbsp, setter, (?))
23 24 25 26 27 28 29 30 31 32 33 34 35
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
import Toestand as T

type Props =
  ( key                 :: String
  , selectTermCallback  :: String -> Effect Unit
  )

selectionTab :: R2.Leaf Props
selectionTab = R2.leaf component

36 37
here :: R2.Here
here = R2.here "Gargantext.Components.PhyloExplorer.SideBar.SelectionTab"
38 39

component :: R.Component Props
40
component = here.component "main" cpt where
41 42
  cpt { selectTermCallback
      } _ = do
arturo's avatar
arturo committed
43 44 45
    -- | State
    -- |
    store <- PhyloStore.use
46

47 48 49 50 51 52
    extractedTerms      <- R2.useLive' store.extractedTerms
    extractedCount      <- R2.useLive' store.extractedCount
    selectedTerm        <- R2.useLive' store.selectedTerm
    selectedBranch      <- R2.useLive' store.selectedBranch
    selectedSource      <- R2.useLive' store.selectedSource
    expandNeighborhood  <- R2.useLive' store.expandNeighborhood
53
    expandSelection     <- R2.useLive' store.expandSelection
54

arturo's avatar
arturo committed
55
    showMore' /\ showMore <- R2.useBox' false
56 57 58 59 60 61 62 63 64 65 66 67 68

    let
      haveSelection
         = isJust selectedTerm
        || isJust selectedBranch
        || isJust selectedSource

      termCount = length extractedTerms

      maxTruncateResult = 5

      truncateResults
         = termCount > maxTruncateResult
arturo's avatar
arturo committed
69
        && not showMore'
70

arturo's avatar
arturo committed
71 72
    -- | Effects
    -- |
73 74 75

    -- reset "show more" button to hidding mode on selected terms change
    R.useEffect1' extractedTerms $
arturo's avatar
arturo committed
76
      T.write_ false showMore
77

78 79 80 81 82 83 84 85
    -- transfer local Component change to Local Storage cache
    useFirstEffect' $
      flip T.listen store.expandNeighborhood onExpandNeighborhoodChange


    -- | Behaviors
    -- |
    let
86 87
      onExpandNeighborhoodClick _ = T.modify_ (not) store.expandNeighborhood
      onExpandSelectionClick _ = T.modify_ (not) store.expandSelection
88

arturo's avatar
arturo committed
89 90
    -- | Render
    -- |
91 92 93 94 95 96
    pure $

      H.div
      { className: "phylo-selection-tab" }
      [
        -- No result
arturo's avatar
arturo committed
97
        R2.when (not haveSelection) $
98 99 100 101

          B.caveat
          { className: "phylo-selection-tab__nil" }
          [
arturo's avatar
arturo committed
102
            H.text "Select term, branch or source to get their informations"
103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 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 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201
          ]
      ,
        -- Selected source
        case selectedSource of
          Nothing -> mempty
          Just s  -> R.fragment
            [
              H.div
              { className: "phylo-selection-tab__highlight" }
              [
                H.ul
                { className: "list-group" }
                [
                  H.li
                  { className: "list-group-item" }
                  [
                    H.span
                    { className: intercalate " "
                        [ "phylo-selection-tab__highlight__badge"
                        , "badge badge-info"
                        ]
                    }
                    [
                      H.text s
                    ]
                  ,
                    H.span
                    { className: "phylo-selection-tab__highlight__type" }
                    [
                      H.text "source"
                    ]
                  ]
                ]
              ]
            ]
      ,
        -- Selected branch
        case selectedBranch of
          Nothing -> mempty
          Just s  -> R.fragment
            [
              H.div
              { className: "phylo-selection-tab__highlight" }
              [
                H.ul
                { className: "list-group" }
                [
                  H.li
                  { className: "list-group-item" }
                  [
                    H.span
                    { className: intercalate " "
                        [ "phylo-selection-tab__highlight__badge"
                        , "badge badge-info"
                        ]
                    }
                    [
                      H.text s
                    ]
                  ,
                    H.span
                    { className: "phylo-selection-tab__highlight__type" }
                    [
                      H.text "branch"
                    ]
                  ]
                ]
              ]
            ]
      ,
        -- Selected term
        case selectedTerm of
          Nothing -> mempty
          Just s  -> R.fragment
            [
              H.div
              { className: "phylo-selection-tab__highlight" }
              [
                H.ul
                { className: "list-group" }
                [
                  H.li
                  { className: "list-group-item" }
                  [
                    H.span
                    { className: intercalate " "
                        [ "phylo-selection-tab__highlight__badge"
                        , "badge badge-info"
                        ]
                    }
                    [
                      H.text s
                    ]
                  ,
                    H.span
                    { className: "phylo-selection-tab__highlight__type" }
                    [
                      H.text "term"
                    ]
202 203 204 205 206 207 208 209 210
                  ,
                    -- Expand Selection actions
                    B.iconButton
                    { name: expandSelection ?
                        "caret-up" $
                        "caret-down"
                    , className: "phylo-selection-tab__highlight__expand"
                    , callback: onExpandSelectionClick
                    }
211 212
                  ]
                ,
213 214 215 216 217
                  -- Selection actions
                  R2.when expandSelection $

                    H.li
                    { className: "list-group-item" }
218
                    [
219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234
                      -- Wikipedia informations
                      H.a
                      { href: "https://en.wikipedia.org/w/index.php?search=\""
                          <> s
                          <> "\""
                      , target: "_blank"
                      }
                      [
                        H.text "Click here for more info"
                      ]
                    ,
                      -- NGrams edition
                      H.div
                      { className: "phylo-selection-tab__highlight__actions" }
                      [
                        updateTerms
235 236 237
                        { selectedTerm: s
                        , ngramType: CTabTerms
                        }
238
                      ]
239 240 241 242 243 244
                    ]
                ]
              ]
            ]
      ,
        -- (separator)
arturo's avatar
arturo committed
245
        R2.when (haveSelection) $
246 247 248 249 250

          H.div
          { className: "phylo-selection-tab__separator" }
          [
            B.icon
arturo's avatar
arturo committed
251
            { name: "angle-double-down" }
252 253 254
          ]
      ,
        -- No extracted result
arturo's avatar
arturo committed
255
        R2.when (haveSelection && null extractedTerms) $
256 257 258 259 260 261 262 263 264 265 266 267

          H.div
          { className: "phylo-selection-tab__selection" }
          [
            B.caveat
            {}
            [
              H.text "No result found for your selection"
            ]
          ]
      ,
        -- Extracted Results
arturo's avatar
arturo committed
268
        R2.when (not null extractedTerms) $
269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292

          H.div
          { className: "phylo-selection-tab__selection" }
          [
            H.ul
            { className: "list-group" }
            [
              -- Extracted count
              case extractedCount of
                Nothing                     -> mempty
                Just (ExtractedCount count) ->

                  H.li
                  { className: "list-group-item" }
                  [
                    H.ul
                    { className: "phylo-selection-tab__counter" }
                    [
                      detailsCount count.termCount "terms" true
                    ,
                      detailsCount count.groupCount "groups" false
                    ,
                      detailsCount count.branchCount "branches" false
                    ]
293 294 295 296 297 298 299
                  ,
                    -- Expand word cloud
                    B.iconButton
                    { name: expandNeighborhood ?
                        "caret-up" $
                        "caret-down"
                    , className: "phylo-selection-tab__counter__expand"
300
                    , callback: onExpandNeighborhoodClick
301
                    }
302 303 304
                  ]
            ,
              -- Term word cloud
305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331
              R2.when expandNeighborhood $

                H.li
                { className: "list-group-item" }
                [
                  H.ul
                  {} $
                  flip mapWithIndex extractedTerms
                    \index (ExtractedTerm { label, ratio }) ->

                      R2.when
                      (
                        truncateResults == false
                      || index < maxTruncateResult
                      ) $
                        H.li
                        { className: "phylo-selection-tab__selection__item"}
                        [
                          H.a
                          { className: "badge badge-light"
                          -- adjust font size according to term frequency
                          , style:
                              { fontSize: termFontSize ratio
                              , lineHeight: termFontSize ratio
                              }
                          , on:
                            { click: \_ -> selectTermCallback label
332 333
                            }
                          }
334 335 336
                          [
                            H.text label
                          ]
337
                        ]
338 339 340 341 342 343 344 345 346 347 348 349 350
                ,
                  R2.when (truncateResults) $

                    B.button
                    { variant: ButtonVariant Light
                    , callback: \_ -> T.modify_ not showMore
                    , block: true
                    , className: "phylo-selection-tab__selection__show-more"
                    }
                    [
                      H.text "Show more"
                    ]
                ]
351 352
            ]
          ]
arturo's avatar
arturo committed
353
      ,
arturo's avatar
arturo committed
354
        -- (separator)
arturo's avatar
arturo committed
355 356 357 358 359 360 361 362 363
        R2.when (not null extractedTerms) $

          H.div
          { className: "phylo-selection-tab__separator" }
          [
            B.icon
            { name: "angle-double-down" }
          ]
      ,
arturo's avatar
arturo committed
364
        -- Extracted Docs
arturo's avatar
arturo committed
365 366 367 368 369 370 371 372
        R2.when (not null extractedTerms) $

          H.div
          { className: "phylo-selection-tab__extracted-docs" }
          [
            docListWrapper
            {}
          ]
373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390
      ]

termFontSize :: Number -> String
termFontSize
    = (_ * 10.0)
  >>> (_ + 14.0)
  >>> ceil
  >>> show
  >>> (_ <> "px")

detailsCount :: Int -> String -> Boolean -> R.Element
detailsCount value label weighty =
  H.li
  { className: "phylo-selection-tab__counter__item" }
  [
    H.span
    { className: intercalate " "
        [ "phylo-selection-tab__counter__value"
arturo's avatar
arturo committed
391
        , weighty ? "text-bold" $ ""
392 393 394 395 396 397 398 399 400
        ]
    }
    [
      H.text $ show value
    ]
  ,
    H.span
    { className: intercalate " "
        [ "phylo-selection-tab__counter__label"
arturo's avatar
arturo committed
401
        , weighty ? "text-bold" $ ""
402 403 404 405 406 407
        ]
    }
    [
      H.text $ nbsp 1 <> label
    ]
  ]
408 409 410 411 412 413

onExpandNeighborhoodChange :: T.Change Boolean -> Effect Unit
onExpandNeighborhoodChange { new } = do
  cache <- R2.loadLocalStorageState' R2.phyloParamsKey defaultCacheParams
  let update = setter (_ { expandNeighborhood = new }) cache
  R2.setLocalStorageState R2.phyloParamsKey update