Dashboard.purs 16.5 KB
Newer Older
1
module Gargantext.Components.Nodes.Corpus.Dashboard where
2

3
import Data.Array as A
4
import Data.Either (Either(..))
5
import Data.FunctorWithIndex (mapWithIndex)
6
import Data.List as List
7 8
import Data.Maybe (Maybe(..), fromMaybe)
import Effect (Effect)
9 10
import Effect.Aff (launchAff_)
import Effect.Class (liftEffect)
arturo's avatar
arturo committed
11
import Gargantext.Components.Corpus.CodeSection (fieldsCodeEditor)
12
import Gargantext.Components.Nodes.Corpus.Chart.Predefined as P
13
import Gargantext.Components.Nodes.Dashboard.Types as DT
14
import Gargantext.Components.Nodes.Types (FTFieldList(..), FTFieldsWithIndex(..), defaultField)
15
import Gargantext.Hooks.Loader (useLoader)
16
import Gargantext.Prelude (Unit, bind, discard, pure, read, show, unit, ($), (<$>), (<>), (==))
17
import Gargantext.Sessions (Session, sessionId)
18
import Gargantext.Types (NodeID)
19
import Gargantext.Utils.Reactix as R2
20
import Gargantext.Utils.Toestand as T2
21 22 23 24
import Reactix as R
import Reactix.DOM.HTML as H
import Record as Record
import Toestand as T
25

James Laver's avatar
James Laver committed
26 27
here :: R2.Here
here = R2.here "Gargantext.Components.Nodes.Corpus.Dashboard"
28

29
type Props =
30
  ( nodeId  :: NodeID
31
  , session :: Session )
32

33 34
dashboardLayout :: R2.Component Props
dashboardLayout = R.createElement dashboardLayoutCpt
35
dashboardLayoutCpt :: R.Component Props
James Laver's avatar
James Laver committed
36
dashboardLayoutCpt = here.component "dashboardLayout" cpt where
37 38
  cpt props@{ nodeId, session } content = do
    pure $ dashboardLayoutWithKey (Record.merge props { key }) content
39 40
      where
        key = show (sessionId session) <> "-" <> show nodeId
James Laver's avatar
James Laver committed
41 42 43

type KeyProps =
  ( key     :: String
44
  | Props
45 46
  )

47 48
dashboardLayoutWithKey :: R2.Component KeyProps
dashboardLayoutWithKey = R.createElement dashboardLayoutWithKeyCpt
49
dashboardLayoutWithKeyCpt :: R.Component KeyProps
50 51 52 53
dashboardLayoutWithKeyCpt = R2.hereComponent here "dashboardLayoutWithKey" hCpt where
  hCpt hp { nodeId, session } _ = do
    reload <- T.useBox T2.newReload
    reload' <- T.useLive T.unequal reload
54

55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
    useLoader { errorHandler: Nothing
              , herePrefix: hp
              , loader: DT.loadDashboardWithReload
              , path: { nodeId, reload: reload', session }
              , render: \(DT.DashboardData { hyperdata: DT.Hyperdata h, parentId }) -> do
                    let { charts, fields } = h
                    dashboardLayoutLoaded { charts
                                          , corpusId: parentId
                                          , defaultListId: 0
                                          , fields
                                          , nodeId
                                          , onChange: onChange nodeId reload (DT.Hyperdata h)
                                          , session } [] }
    where
      onChange :: NodeID -> T2.ReloadS -> DT.Hyperdata -> { charts :: Array P.PredefinedChart
                                                          , fields :: FTFieldList } -> Effect Unit
      onChange nodeId' reload (DT.Hyperdata h) { charts, fields } = do
        launchAff_ do
          res <- DT.saveDashboard { hyperdata: DT.Hyperdata $ h { charts = charts, fields = fields }
                                  , nodeId:nodeId'
                                  , session }
          liftEffect $ do
            _ <- case res of
              Left err -> R2.hpWarn2 hp "onChange RESTError" err
              _ -> pure unit
            T2.reload reload
81 82

type LoadedProps =
83
  ( charts        :: Array P.PredefinedChart
James Laver's avatar
James Laver committed
84
  , corpusId      :: NodeID
85
  , defaultListId :: Int
86
  , fields        :: FTFieldList
James Laver's avatar
James Laver committed
87
  , onChange      :: { charts :: Array P.PredefinedChart
88
                  , fields :: FTFieldList } -> Effect Unit
James Laver's avatar
James Laver committed
89 90
  , nodeId        :: NodeID
  , session       :: Session
91 92
  )

93 94
dashboardLayoutLoaded :: R2.Component LoadedProps
dashboardLayoutLoaded = R.createElement dashboardLayoutLoadedCpt
95
dashboardLayoutLoadedCpt :: R.Component LoadedProps
James Laver's avatar
James Laver committed
96
dashboardLayoutLoadedCpt = here.component "dashboardLayoutLoaded" cpt
97
  where
98
    cpt { charts
99 100 101 102 103 104
        , corpusId
        , defaultListId
        , fields
        , nodeId
        , onChange
        , session } _ = do
105
      pure $ H.div { className: "dashboard-layout" }
106 107 108 109 110
        [ dashboardCodeEditor { fields
                              , nodeId
                              , onChange: \fs -> onChange { charts, fields: fs }
                              , session } []
        ,  H.div { className: "row" }
111 112 113 114 115 116 117
          [ H.div { className: "col-12" }
            ([ H.h1 {} [ H.text "Board" ]
             , H.p {}  [ H.text "Summary of all your charts here" ]
             ] <> chartsEls <> [addNew])
          ]
        ]
      where
118

119
        addNew = H.div { className: "row mx-0 my-1" } [
120
          H.span { className: "btn btn-primary"
121 122 123 124 125
                 , on: { click: onClickAddChart }} [ H.span { className: "fa fa-plus" } [] ]
          ]
          where
            onClickAddChart _ = onChange { charts: A.cons P.CDocsHistogram charts
                                         , fields }
126
        chartsEls = mapWithIndex chartIdx charts
127
        chartIdx idx chart =
128
          renderChart { chart
129 130 131 132 133
                      , corpusId
                      , defaultListId
                      , onChange: onChangeChart
                      , onRemove
                      , session } []
134 135 136 137 138 139 140 141
          where
            onChangeChart c = do
              onChange { charts: fromMaybe charts (A.modifyAt idx (\_ -> c) charts)
                       , fields }
            onRemove _ = onChange { charts: fromMaybe charts $ A.deleteAt idx charts
                                  , fields }

type CodeEditorProps =
142 143
  ( fields   :: FTFieldList
  , onChange :: FTFieldList -> Effect Unit
144 145
  , nodeId   :: NodeID
  , session  :: Session
146 147 148
  )

dashboardCodeEditor :: R2.Component CodeEditorProps
149 150
dashboardCodeEditor = R.createElement dashboardCodeEditorCpt
dashboardCodeEditorCpt :: R.Component CodeEditorProps
James Laver's avatar
James Laver committed
151
dashboardCodeEditorCpt = here.component "dashboardCodeEditor" cpt
152
  where
153
    cpt { fields: FTFieldList fields, nodeId, onChange, session } _ = do
154
      let fieldsWithIndex = FTFieldsWithIndex $ mapWithIndex (\idx -> \ftField -> { idx, ftField }) fields
155 156 157
      fieldsS <- T.useBox fieldsWithIndex
      fields' <- T.useLive T.unequal fieldsS
      fieldsRef <- R.useRef fields'
158 159 160

      -- handle props change of fields
      R.useEffect1' fields $ do
161
        if R.readRef fieldsRef == fields' then
162 163
          pure unit
        else do
164 165
          R.setRef fieldsRef fields'
          T.write_ fieldsWithIndex fieldsS
166

167
      pure $ R.fragment
168
        [ H.div { className: "row mx-0 my-1" }
169 170
          [ H.div { className: "btn btn-primary " <> (saveEnabled fieldsWithIndex fields')
                  , on: { click: onClickSave fields' }
171 172 173
                  }
            [ H.span { className: "fa fa-floppy-o" } [  ]
            ]
174 175 176 177 178
          ]
        , H.div { className: "row" }
          [ H.div { className: "col-12" }
            [ fieldsCodeEditor { fields: fieldsS
                               , nodeId
179
                               , session } []
180
            ]
181
          ]
182
        , H.div { className: "row mx-0 my-1" }
183
          [ H.div { className: "btn btn-primary"
184 185 186 187 188 189
                  , on: { click: onClickAddField fieldsS }
                  }
            [ H.span { className: "fa fa-plus" } [  ]
            ]
          ]
        ]
190
      where
191 192
        saveEnabled :: FTFieldsWithIndex -> FTFieldsWithIndex -> String
        saveEnabled fs fsS = if fs == fsS then "disabled" else "enabled"
193

194
        onClickSave :: forall e. FTFieldsWithIndex -> e -> Effect Unit
195 196
        onClickSave (FTFieldsWithIndex fields') _ = do
          onChange $ FTFieldList $ (_.ftField) <$> fields'
197

198 199
        onClickAddField :: forall e. T.Box FTFieldsWithIndex -> e -> Effect Unit
        onClickAddField fieldsS _ = do
200 201
          T.modify_ (\(FTFieldsWithIndex fs) -> FTFieldsWithIndex $
            List.snoc fs $ { idx: List.length fs, ftField: defaultField }) fieldsS
202 203

type PredefinedChartProps =
204
  ( chart         :: P.PredefinedChart
James Laver's avatar
James Laver committed
205
  , corpusId      :: NodeID
206
  , defaultListId :: Int
James Laver's avatar
James Laver committed
207 208 209
  , onChange      :: P.PredefinedChart -> Effect Unit
  , onRemove      :: Unit -> Effect Unit
  , session       :: Session
210 211
  )

212 213
renderChart :: R2.Component PredefinedChartProps
renderChart = R.createElement renderChartCpt
214
renderChartCpt :: R.Component PredefinedChartProps
James Laver's avatar
James Laver committed
215
renderChartCpt = here.component "renderChart" cpt
216
  where
217
    cpt { chart
218 219 220 221 222
        , corpusId
        , defaultListId
        , onChange
        , onRemove
        , session } _ = do
223
      pure $ H.div { className: "chart card" }
224 225 226 227 228 229 230
        [ H.div { className: "card-header" }
          [ H.div { className: "row" }
            [ H.div { className: "col-2" }
              [ R2.select { defaultValue: show chart
                          , on: { change: onSelectChange }
                          } (option <$> P.allPredefinedCharts)
              ]
231
            , H.div { className: "col-9" } []
232 233 234 235
            , H.div { className: "col-1" }
              [ H.span { className: "btn btn-danger"
                       , on: { click: onRemoveClick }} [ H.span { className: "fa fa-trash" } [] ]
              ]
236
            ]
237
          ]
238 239 240 241 242
        , H.div { className: "card-body" }
          [ H.div { className: "row" }
            [ H.div { className: "col-12 chart" }
              [ P.render chart params ]
            ]
243 244
          ]
        ]
245
      where
246 247
        option pc =
          H.option { value: show pc } [ H.text $ show pc ]
248
        onSelectChange e = onChange $ fromMaybe P.CDocsHistogram $ read value
249
          where
250
            value = R.unsafeEventValue e
251
        onRemoveClick _ = onRemove unit
252
        params = { corpusId
253 254
                 , limit: Just 1000
                 , listId: Just defaultListId
255 256
                 , onClick: Nothing
                 , onInit: Nothing
257
                 , session
258
                 }
259

260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276
    -- aSchool school = H.div {className: "col-md-4 content"} [ chart $ focus school ]
    -- schools = [ "Télécom Bretagne", "Mines Nantes", "Eurecom" ]
    -- myData =
    --   [seriesBarD1 {name: "Bar Data"}
    --    [ dataSerie {name: "val1", value: 50.0}
    --    , dataSerie {name: "val2", value: 70.0}
    --    , dataSerie {name: "val3", value: 80.0} ] ]
    -- focus :: String -> Options
    -- focus school =
    --   Options
    --   { mainTitle : "Focus " <> school
    --   , subTitle  : "Total scientific publications"
    --   , xAxis     : xAxis' ["2015", "2016", "2017"]
    --   , yAxis     : yAxis' { position: "left", show: false, min : 0 }
    --   , series    : myData
    --   , addZoom   : false
    --   , tooltip   : tooltipTriggerAxis } -- Necessary?
277

278 279
-----------------------------------------------------------------------------------------------------------

280 281
-- naturePublis_x :: Array String
-- naturePublis_x = ["Com","Articles","Thèses","Reports"]
282

283 284
-- naturePublis_y' :: Array Int
-- naturePublis_y' = [23901,17417,1188,1176]
285

286 287
-- naturePublis_y :: Array DataD1
-- naturePublis_y = zipWith (\n v -> dataSerie {name: n, value: toNumber v }) naturePublis_x naturePublis_y'
288

289 290 291 292 293 294 295 296 297 298
-- naturePublis :: Options
-- naturePublis = Options
--   { mainTitle : "Nature of publications"
--   , subTitle  : "Distribution by type"
--   , xAxis     : xAxis' []
--   , yAxis     : yAxis' { position: "left", show: false, min:0}
--   , series    : [seriesFunnelD1 { name: "Funnel Data" } naturePublis_y]
--   , addZoom   : false
--   , tooltip   : tooltipTriggerAxis -- Necessary?
--   }
299 300 301

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

302 303 304 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 332 333 334
-- globalPublis_x :: Array Int
-- globalPublis_x = [1982,1986,1987,1988,1990,1993,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017]
-- globalPublis_y :: Array Int
-- globalPublis_y = [1,4,2,1,1,2,1,1,8,38,234,76,40,82,75,202,1475,1092,1827,2630,4978,3668,4764,5915,4602,5269,6814,4018]


-- globalPublis :: Options
-- globalPublis = Options
--   { mainTitle : "Histogram"
--   , subTitle  : "Distribution of publications over time"
--   , xAxis     : xAxis' (map show globalPublis_x)
--   , yAxis     : yAxis' { position: "left", show: true, min:0}
--   , series    : [seriesBarD1 {name: "Number of publication / year"} $ map (\n -> dataSerie {name: "", value: toNumber n }) globalPublis_y]
--   , addZoom   : true
--   , tooltip   : tooltipTriggerAxis -- Necessary?
--   }



-- distriBySchool_y :: Array (Tuple String Int)
-- distriBySchool_y = [Tuple "Télécom Bretagne" 1150,Tuple "Télécom SudParis" 946,Tuple "Mines Nantes" 547,Tuple "Télécom ParisTech" 429,Tuple "IMT Atlantique" 205,Tuple "Mines Alès" 56
--                    ,Tuple "Télécom Ecole de Management" 52,Tuple "Mines Albi-Carmaux" 6]

-- distriBySchool :: Options
-- distriBySchool = Options
--   { mainTitle : "School production in 2017"
--   , subTitle  : "Distribution by school"
--   , xAxis     : xAxis' []
--   , yAxis     : yAxis' { position : "", show: false, min:0}
--   , series    : [ seriesPieD1 {name: "Pie data"} (map (\(Tuple n v) -> dataSerie {name: n, value: toNumber v}) distriBySchool_y)]
--   , addZoom   : false
--   , tooltip   : tooltipTriggerAxis -- Necessary?
--   }
335

336 337 338 339 340 341 342 343 344 345 346 347 348
-- scatterEx :: Options
-- scatterEx = Options
--   { mainTitle : "Scatter test"
--   , subTitle  : "Scatter subtitle"
--   , xAxis     : xAxis' []
--   , yAxis     : yAxis' { position: "", show: true, min:0}
--   , series    : [ seriesScatterD2 {name: "name1", symbolSize: 10.0} (dataSerieV <$> [[2.0,3.0],[3.0,4.0]])
--                 , seriesScatterD2 {name: "name2", symbolSize: 5.0 } (dataSerieV <$> [[1.0,3.0],[5.0,4.0]])
--                 , seriesScatterD2 {name: "name3", symbolSize: 10.0} (dataSerieV <$> [[10.0,3.0],[8.0,4.0]])
--                 ]
--   , addZoom   : false
--   , tooltip   : tooltipTriggerAxis -- Necessary?
--   }
349

350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372
-- sankeyEx :: Options
-- sankeyEx = Options
--   { mainTitle : ""
--   , subTitle  : ""
--   , xAxis     : xAxis' []
--   , yAxis     : yAxis' { position: "", show: false, min:0}
--   , series    :
--      [ seriesSankey
--          { "data":
--              [ {name : "a"}, {name : "b"}
--              , {name:"c"},   {name:"d"} ]
--          , links:
--              [ {source : "a", target : "b", value :2.0}
--              , {source : "a", target : "c", value :1.0}
--              , {source : "b", target : "c", value :1.0}
--              , {source : "b", target : "d", value :3.0}
--              ]
--          , layout: "none"
--          }
--      ]
--   , tooltip   : tooltipTriggerAxis -- Necessary?
--   , addZoom   : false
--   }
373

374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400
-- treeData :: Array TreeNode
-- treeData =
--   [ treeNode "nodeA" 10
--     [ treeNode "nodeAa" 4 []
--     , treeNode "nodeAb" 5 []
--     , treeNode "nodeAc" 1
--       [ treeNode "nodeAca" 5 []
--       , treeNode "nodeAcb" 5 [] ] ]
--   , treeNode "nodeB" 20
--     [ treeNode "nodeBa" 20
--       [ treeNode "nodeBa1" 20 [] ]]
--   , treeNode "nodeC" 20
--     [ treeNode "nodeCa" 20
--       [ treeNode "nodeCa1" 10 []
--       , treeNode "nodeCa2" 10 [] ]
--     , treeNode "nodeD" 20
--       [ treeNode "nodeDa" 20
--         [ treeNode "nodeDa1" 2 []
--         , treeNode "nodeDa2" 2 []
--         , treeNode "nodeDa3" 2 []
--         , treeNode "nodeDa4" 2 []
--         , treeNode "nodeDa5" 2 []
--         , treeNode "nodeDa6" 2 []
--         , treeNode "nodeDa7" 2 []
--         , treeNode "nodeDa8" 2 []
--         , treeNode "nodeDa9" 2 []
--         , treeNode "nodeDa10" 2 [] ]]]]
401

402 403 404 405 406 407 408 409 410 411 412 413 414
-- treeData' :: Array TreeNode
-- treeData' =
--   [ treeNode "nodeA" 10
--     [ treeLeaf "nodeAa" 4
--     , treeLeaf "nodeAb" 5
--     , treeNode "nodeAc" 1 [ treeLeaf "nodeAca" 5, treeLeaf "nodeAcb" 5 ]]
--   , treeNode "nodeB" 20 [ treeNode "nodeBa" 20 [ treeLeaf "nodeBa1" 20]]
--   , treeNode "nodeC" 20 [ treeNode "nodeBa" 20 [ treeLeaf "nodeBa1" 20]]
--   , treeNode "nodeD" 20 [ treeNode "nodeBa" 20 [ treeLeaf "nodeBa1" 20]]
--   , treeNode "nodeE" 20 [ treeNode "nodeBa" 20 [ treeLeaf "nodeBa1" 20]]
--   , treeNode "nodeF" 20 [ treeNode "nodeBa" 20 [ treeLeaf "nodeBa1" 20]]
--   , treeNode "nodeG" 20 [ treeNode "nodeBa" 20 [ treeLeaf "nodeBa1" 20]]
--   , treeNode "nodeH" 20 [ treeNode "nodeBa" 20 [ treeLeaf "nodeBa1" 20]]]
415

416 417 418 419 420 421 422 423 424 425
-- treeMapEx :: Options
-- treeMapEx = Options
--   { mainTitle : ""
--   , subTitle  : ""
--   , xAxis     : xAxis' []
--   , yAxis     : yAxis' { position: "", show: false, min:0}
--   , series    : [mkTree TreeMap treeData]
--   , addZoom   : false
--   , tooltip   : tooltipTriggerAxis -- Necessary?
--   }
426

427 428 429 430 431 432 433 434 435 436
-- treeEx :: Options
-- treeEx = Options
--   { mainTitle : "Tree"
--   , subTitle  : "Radial"
--   , xAxis     : xAxis' []
--   , yAxis     : yAxis' { position: "", show: false, min:0}
--   , series    : [mkTree TreeRadial treeData']
--   , addZoom   : false
--   , tooltip   : tooltipTriggerAxis -- Necessary?
--   }