Tabs.purs 7.77 KB
Newer Older
1
module Gargantext.Components.Nodes.Lists.Tabs where
2

arturo's avatar
arturo committed
3 4
import Gargantext.Components.Nodes.Lists.Types hiding (here)

5
import Data.Array as A
6
import Data.Maybe (Maybe(..), fromMaybe)
7
import Data.Tuple.Nested ((/\))
8
import Effect.Class (liftEffect)
arturo's avatar
arturo committed
9
import Gargantext.Components.App.Store (Boxes)
10
import Gargantext.Components.NgramsTable as NT
11
import Gargantext.Core.NgramsTable.Functions as NTC
12
import Gargantext.Components.Nodes.Corpus.Chart.Metrics (metrics)
13
import Gargantext.Components.Nodes.Corpus.Chart.Pie (pie, bar)
14
import Gargantext.Components.Nodes.Corpus.Chart.Tree (tree)
15
import Gargantext.Components.Nodes.Corpus.Chart.Utils (mNgramsTypeFromTabType)
16
import Gargantext.Components.Nodes.Corpus.Types (CorpusData)
17
import Gargantext.Components.Tab as Tab
arturo's avatar
arturo committed
18
import Gargantext.Components.Table.Types (Params)
19
import Gargantext.Core.NgramsTable.Types (PageParams)
arturo's avatar
arturo committed
20
import Gargantext.Prelude (bind, pure, unit, ($))
21
import Gargantext.Sessions (Session)
22
import Gargantext.Types (CTabNgramType(..), Mode(..), TabSubType(..), TabType(..), modeTabType)
23
import Gargantext.Utils.Reactix as R2
James Laver's avatar
James Laver committed
24
import Gargantext.Utils.Toestand as T2
25 26 27 28
import Reactix as R
import Record as Record
import Record.Extra as RX
import Toestand as T
29

James Laver's avatar
James Laver committed
30 31
here :: R2.Here
here = R2.here "Gargantext.Components.Nodes.Lists.Tabs"
32

33
type Props = (
34 35 36 37 38 39
    activeTab  :: T.Box Int
  , boxes      :: Boxes
  , cacheState :: T.Box CacheState
  , corpusData :: CorpusData
  , corpusId   :: Int
  , session    :: Session
40
  )
41

arturo's avatar
arturo committed
42
tabs :: Record ( key :: String | Props ) -> R.Element
43
tabs props = R.createElement tabsCpt props []
arturo's avatar
arturo committed
44
tabsCpt :: R.Component ( key :: String | Props )
James Laver's avatar
James Laver committed
45
tabsCpt = here.component "tabs" cpt where
46 47
  cpt props@{ activeTab } _ = do
    pure $ Tab.tabs { activeTab
48 49 50
                    , tabs: tabs'
                    , className: "nodes-lists-layout-tabs"
                    } where
51 52 53 54
      tabs' = [ "Terms"      /\ view Terms []
              , "Authors"    /\ view Authors []
              , "Institutes" /\ view Institutes []
              , "Sources"    /\ view Sources []
James Laver's avatar
James Laver committed
55 56
              ]
      common = RX.pick props :: Record Props
Karen Konou's avatar
Karen Konou committed
57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
      view mode = tab $ Record.merge common { mode }

type TabProps = ( mode :: Mode | Props )

tab :: R2.Component TabProps
tab = R.createElement tabCpt

tabCpt :: R.Component TabProps
tabCpt = here.component "tab" cpt where
  cpt props _ = do
    path <- T.useBox $ NTC.initialPageParams props.session initialPath.corpusId [initialPath.listId] initialPath.tabType
    pure $ ngramsView (Record.merge props { path }) []
    where
      tabNgramType = modeTabType props.mode
      tabType      = TabCorpus (TabNgramType tabNgramType)
      listId       = props.corpusData.defaultListId
      corpusId     = props.corpusId
      initialPath  = { corpusId
                      -- , limit: Just 1000
                      , listId
                      , tabType
                      }
79

Karen Konou's avatar
Karen Konou committed
80 81

type NgramsViewProps = ( path :: T.Box PageParams | TabProps )
82

83 84
ngramsView :: R2.Component NgramsViewProps
ngramsView = R.createElement ngramsViewCpt
85
ngramsViewCpt :: R.Component NgramsViewProps
James Laver's avatar
James Laver committed
86
ngramsViewCpt = here.component "ngramsView" cpt where
87 88
  cpt props@{ boxes
            , cacheState
89 90
            , corpusData: { defaultListId }
            , mode
Karen Konou's avatar
Karen Konou committed
91 92
            , session
            , path } _ = do
93
      chartsReload <- T.useBox T2.newReload
94 95 96 97
      onCancelRef <- R.useRef Nothing
      onNgramsClickRef <- R.useRef Nothing
      onSaveRef <- R.useRef Nothing
      treeEditBox <- T.useBox NT.initialTreeEdit
98

99
      { listIds, nodeId, params } <- T.useLive T.unequal path
arturo's avatar
arturo committed
100 101 102 103 104

      pure $
        R.fragment
        [
          ngramsView'
105 106
          { boxes
          , corpusData: props.corpusData
arturo's avatar
arturo committed
107
          , listIds
108
          , mode
arturo's avatar
arturo committed
109
          , nodeId
110 111
          , params
          , session
arturo's avatar
arturo committed
112 113 114 115 116 117 118 119 120 121 122
          } []
        ,
          NT.mainNgramsTable
          { afterSync: afterSync chartsReload
          , boxes
          , cacheState
          , defaultListId
          , path
          , session
          , tabNgramType
          , tabType
123
          , treeEdit: { box: treeEditBox
124
                      , getNgramsChildren: NT.getNgramsChildrenAff session nodeId listIds tabType
125 126 127
                      , onCancelRef
                      , onNgramsClickRef
                      , onSaveRef }
arturo's avatar
arturo committed
128 129 130
          , withAutoUpdate: false
          } []
        ]
131
      where
132
        afterSync chartsReload _ = do
133
          case mNgramsType of
134
            Just _ -> do
135 136 137 138
              -- NOTE: No need to recompute chart, after ngrams are sync this
              -- should be recomputed already
              -- We just refresh it
              -- _ <- recomputeChart session chartType ngramsType corpusId listId
139
              liftEffect $ T2.reload chartsReload
140 141
            Nothing         -> pure unit

142
        tabNgramType = modeTabType mode
143
        tabType      = TabCorpus (TabNgramType tabNgramType)
144
        mNgramsType  = mNgramsTypeFromTabType tabType
145

arturo's avatar
arturo committed
146 147 148 149 150 151 152


----------------


-- @XXX re-render issue -> clone component
type NgramsViewProps' =
153 154
  ( boxes         :: Boxes
  , corpusData    :: CorpusData
arturo's avatar
arturo committed
155
  , listIds       :: Array Int
156
  , mode          :: Mode
arturo's avatar
arturo committed
157
  , nodeId        :: Int
158 159
  , params        :: Params
  , session       :: Session
arturo's avatar
arturo committed
160 161 162 163
  )

ngramsView' :: R2.Component NgramsViewProps'
ngramsView' = R.createElement ngramsViewCpt'
164 165 166 167 168 169
--ngramsViewCpt' :: R.Memo NgramsViewProps'
--ngramsViewCpt' = R.memo' $ here.component "ngramsView_clone" cpt where
ngramsViewCpt' :: R.Component NgramsViewProps'
ngramsViewCpt' = here.component "ngramsView_clone" cpt where
  cpt { boxes
      , corpusData: { defaultListId }
arturo's avatar
arturo committed
170
      , listIds
171
      , mode
arturo's avatar
arturo committed
172
      , nodeId
173 174
      , params
      , session
arturo's avatar
arturo committed
175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197
      } _ = do

    let path' = {
      corpusId: nodeId
    , limit: params.limit
    , listId: fromMaybe defaultListId $ A.head listIds
    , tabType: tabType
    }

    let chartParams = {
      corpusId: path'.corpusId
    , limit: Just path'.limit
    , listId: path'.listId
    , tabType: path'.tabType
    }

    pure $

      R.fragment $
      charts chartParams tabNgramType

    where
      charts _params CTabTerms = [
198
          {-
199
          H.div {className: "row"}
Alexandre Delanoë's avatar
Alexandre Delanoë committed
200
                [ H.div {className: "col-12 d-flex justify-content-center"}
201 202 203 204 205 206
                  [ H.img { src: "images/Gargantextuel-212x300.jpg"
                          , id: "funnyimg"
                        }
                  ]
                ]

207
              R2.select { className: "form-control"
208 209
                        , defaultValue: show chartType
                        , on: { change: \e -> setChartType
210 211 212
                                             $ const
                                             $ fromMaybe Histo
                                             $ chartTypeFromString
213
                                             $ R.unsafeEventValue e
214 215
                              }
                        } [
216 217 218
                H.option { value: show Histo     } [ H.text $ show Histo     ]
              , H.option { value: show Scatter   } [ H.text $ show Scatter   ]
              , H.option { value: show ChartBar  } [ H.text $ show ChartBar  ]
219
              , H.option { value: show ChartPie  } [ H.text $ show ChartPie  ]
220 221 222
              , H.option { value: show ChartTree } [ H.text $ show ChartTree ]
              ]
            ]
223
          ]
224
        , getChartFunction chartType $ { path: params, session }
225
        -}
arturo's avatar
arturo committed
226 227 228 229 230 231 232 233 234
      ]
      charts params' _        = [ chart params' mode ]

      chart path Authors    = pie     { boxes, path, session, onClick: Nothing, onInit: Nothing }
      chart path Institutes = tree    { boxes, path, session, onClick: Nothing, onInit: Nothing }
      chart path Sources    = bar     { boxes, path, session, onClick: Nothing, onInit: Nothing }
      chart path Terms      = metrics { boxes, path, session, onClick: Nothing, onInit: Nothing }

      tabType      = TabCorpus (TabNgramType tabNgramType)
235

arturo's avatar
arturo committed
236
      tabNgramType = modeTabType mode